/* ======================================================================
   AMTR TABLET — THEME v5
   
   BAZOWA ROZDZIELCZOŚĆ: 1366×768 (Power Apps canvas, tablet 10" landscape)
   Wszystkie wymiary w vw — skalują się liniowo proporcjonalnie.
   
   SKALA TYPOGRAFII (wprost z Power Apps AMTR):
     12  0.88vw  — meta, status pill
     16  1.2vw   — body
     18  1.3vw   — standard label
     22  1.6vw   — ważne labele, subtitle
     26  1.9vw   — header bar name, brand
     32  2.35vw  — screen title
     50  3.7vw   — hero, klawisze, big values
   
   SKALA SPACING (Power Apps):
     4   0.3vw   — ciasne (gap w komponencie)
     8   0.6vw   — małe paddingi
     12  0.88vw  — input padding
     16  1.2vw   — standard gap/padding
     32  2.35vw  — sekcja gap, main padding
     64  4.7vw   — bardzo duże
     88  6.45vw  — max (login container)
     96  7vw     — sidebar width
     128 9.4vw   — klawisz, tile
   ====================================================================== */

:root {
  /* ── KOLORY ── */
  --varBgScreen:        #0A0A0B;
  --varBgPanel:         #121214;
  --varBgCard:          #18181B;
  --varBgElev:          #1F1F23;
  --varBgInput:         #050506;         /* v7.1: ciemniejsze niż karta — "zapadnięte pole" */

  --varTextPrimary:     #FAFAFA;
  --varTextSecondary:   #A1A1AA;
  --varTextTertiary:    #71717A;
  --varTextMuted:       #52525B;

  --varBorder:          #26262A;
  --varBorderStrong:    #3F3F46;

  --varColorAMTR:       #E5622A;
  --varColorAMTRGlow:   rgba(229, 98, 42, 0.12);

  /* ── STATUS (Oczekuje/W trakcie/Wstrzymane/Wykonane) ── */
  --varStatusOczekujeFill:    #2D2014;
  --varStatusOczekujeText:    #FBBF24;
  --varStatusOczekujeBorder:  #78350F;

  --varStatusWTrakcieFill:    #1E293B;
  --varStatusWTrakcieText:    #60A5FA;
  --varStatusWTrakcieBorder:  #1E40AF;

  --varStatusWstrzymaneFill:  #2D1B1B;
  --varStatusWstrzymaneText:  #F87171;
  --varStatusWstrzymaneBorder:#7F1D1D;

  --varStatusWykonaneFill:    #14281B;
  --varStatusWykonaneText:    #4ADE80;
  --varStatusWykonaneBorder:  #166534;

  /* ── PROGRESS ── */
  --varProgressColor: #4ADE80;
  --varProgressTrack: #27272A;

  /* ── BADGE QC ── */
  --varBadgeQCFill:    #2D1B3D;
  --varBadgeQCText:    #C084FC;
  --varBadgeQCBorder:  #6B21A8;

  /* ── FONTS ── */
  --fontSans: "Segoe UI Variable", "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --fontMono: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;

  /* ══════════════════════════════════════════════════════════════
     DESIGN TOKENS v5 (vw, baza 1366)
     ══════════════════════════════════════════════════════════════ */

  /* ── TYPOGRAFIA ── */
  --text-meta:   0.88vw;    /* 12 */
  --text-body:   1.2vw;     /* 16 */
  --text-std:    1.3vw;     /* 18 */
  --text-imp:    1.6vw;     /* 22 */
  --text-header: 1.9vw;     /* 26 */
  --text-title:  2.35vw;    /* 32 */
  --text-hero:   3.7vw;     /* 50 */

  /* ── SPACING ── */
  --sp-1:  0.3vw;           /* 4 */
  --sp-2:  0.6vw;           /* 8 */
  --sp-3:  0.88vw;          /* 12 */
  --sp-4:  1.2vw;           /* 16 */
  --sp-5:  1.6vw;           /* 22 — między elementami sekcji */
  --sp-6:  2.35vw;          /* 32 */
  --sp-7:  3.5vw;           /* 48 */
  --sp-8:  4.7vw;           /* 64 */
  --sp-max:6.45vw;          /* 88 */

  /* ── FONT WEIGHTS ── */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* ── RADII ── */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ── TRANSITIONS ── */
  --t-fast: 0.1s;
  --t-base: 0.15s;
}

/* RESET */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; }

body {
  background: var(--varBgScreen);
  color: var(--varTextPrimary);
  font-family: var(--fontSans);
  font-size: var(--text-body);       /* 16 */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

button {
  font-family: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
}

input, textarea {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  outline: none;
  font-size: inherit;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════════ */
.app-screen {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100%;
  background: var(--varBgScreen);
  display: flex;
  overflow: hidden;
  margin: 0 auto;
}

.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--sp-6);              /* 32 */
  min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   SIDEBAR — 96 width, 52 button, 24 icon
   ══════════════════════════════════════════════════════════════ */
.sidebar {
  width: 7vw;                        /* 96 */
  height: 100vh;                     /* v5.2: gwarancja wysokości — defensywnie */
  flex-shrink: 0;
  background: var(--varBgScreen);
  border-right: 1px solid var(--varBorder);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
}

.sidebar-logo {
  font-family: var(--fontMono);
  font-size: var(--text-body);       /* 16 */
  font-weight: var(--fw-bold);
  color: var(--varColorAMTR);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex: 0 0 auto;
  height: 6.45vw;                    /* 88 */
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--varBorder);
}

.sidebar-actions {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;           /* v5.2: wyśrodkowane w pionie */
  align-items: center;
  gap: var(--sp-4);                  /* 16 — odstępy między ikonami */
  width: 100%;
  padding: var(--sp-5) 0;            /* 22 */
  min-height: 0;
}

.sidebar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--varTextSecondary);
  background: var(--varBgCard);
  border: 1px solid var(--varBorderStrong);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  width: 3.8vw;                      /* 52 */
  height: 3.8vw;                     /* 52 */
  transition: all var(--t-base);
}

.sidebar-btn:hover {
  background: var(--varBgElev);
  border-color: var(--varTextSecondary);
  color: var(--varTextPrimary);
}

.sidebar-btn-primary {
  color: var(--varTextSecondary);
  border-color: var(--varBorderStrong);
  background: var(--varBgCard);
}
.sidebar-btn-primary:hover {
  color: var(--varColorAMTR);
  border-color: var(--varColorAMTR);
  background: var(--varColorAMTRGlow);
}

.sidebar-btn--save {
  color: var(--varTextSecondary);
  border-color: var(--varBorderStrong);
  background: var(--varBgCard);
}
.sidebar-btn--save:hover {
  background: var(--varBgElev);
  border-color: var(--varTextSecondary);
  color: var(--varTextPrimary);
}

/* Wariant "primary-action" — v7.1: neutralne tło, tylko ikona pomarańczowa
   (spójnie z innymi przyciskami sidebar, nie "wybija się" kolorem) */
.sidebar-btn--primary-action {
  background: var(--varBgCard);
  border: 1px solid var(--varBorderStrong);
  border-radius: var(--radius-md);
  color: var(--varColorAMTR);            /* ikona pomarańczowa */
  width: 3.8vw;                          /* 52 */
  height: 3.8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
  transition: all var(--t-base);
}
.sidebar-btn--primary-action:hover {
  background: var(--varColorAMTRGlow);
  border-color: var(--varColorAMTR);
}
.sidebar-btn--primary-action .sidebar-icon svg {
  stroke: var(--varColorAMTR);
}

.sidebar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75vw;                     /* 24 */
  height: 1.75vw;
}
.sidebar-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar-avatar {
  flex: 0 0 auto;
  height: 6.45vw;                    /* 88 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--varBorder);
  cursor: default;
}

.sidebar-avatar-circle {
  width: 3.8vw;                      /* 52 */
  height: 3.8vw;
  border-radius: var(--radius-md);
  background: var(--varBgCard);
  border: 1px solid var(--varBorderStrong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fontMono);
  font-size: var(--text-std);        /* 18 */
  font-weight: var(--fw-semi);
  color: var(--varTextPrimary);
}

.sidebar-avatar-name,
.sidebar-avatar-role { display: none; }

/* ══════════════════════════════════════════════════════════════
   SCREEN HEADER (na górze każdego ekranu)
   ══════════════════════════════════════════════════════════════ */
.screen-header {
  display: flex;
  align-items: center;               /* v5: center zamiast baseline */
  gap: var(--sp-4);                  /* 16 */
  padding: 0 0 var(--sp-4);          /* 16 */
  border-bottom: 1px solid var(--varBorder);
  margin-bottom: var(--sp-5);        /* 22 */
  flex-shrink: 0;
}

.screen-title {
  font-size: var(--text-title);      /* 32 */
  font-weight: var(--fw-semi);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.screen-subtitle {
  font-family: var(--fontMono);
  font-size: var(--text-meta);       /* 12 */
  color: var(--varTextTertiary);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: var(--fw-semi);
}

.screen-header-meta {
  margin-left: auto;
  font-family: var(--fontMono);
  font-size: var(--text-meta);       /* 12 */
  color: var(--varTextTertiary);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: var(--fw-semi);
}

/* ══════════════════════════════════════════════════════════════
   HEADER BAR (Praca, Operacja) — sekcja z nazwą zlecenia i statusem
   ══════════════════════════════════════════════════════════════ */
.header-bar {
  background: var(--varBgCard);
  border: 1px solid var(--varBorder);
  border-radius: var(--radius-md);
  padding: var(--sp-4) var(--sp-6);  /* 16 32 */
  display: flex;
  align-items: center;
  gap: var(--sp-4);                  /* 16 */
  margin-bottom: var(--sp-4);        /* 16 */
  flex-shrink: 0;
}

.header-bar-name {
  font-size: var(--text-imp);        /* 22 (było 26) — ton-down, nie dominuje nad tytułem ekranu */
  font-weight: var(--fw-semi);
  letter-spacing: -0.01em;
}

.header-bar-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--varTextMuted);
}

.header-bar-meta {
  color: var(--varTextSecondary);
  font-size: var(--text-body);       /* 16 */
}

.header-bar-meta-mono {
  font-family: var(--fontMono);
  font-size: var(--text-body);       /* 16 */
  color: var(--varTextSecondary);
  letter-spacing: 0.02em;
}

.header-bar-status { margin-left: auto; }

/* ══════════════════════════════════════════════════════════════
   STATUS PILL — statusy operacji/zleceń
   ══════════════════════════════════════════════════════════════ */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.44vw;                       /* 6 */
  padding: 0.44vw 0.88vw;            /* 6 12 */
  font-family: var(--fontMono);
  font-size: var(--text-meta);       /* 12 */
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid;
  border-radius: var(--radius-md);   /* v5.2: 4px spójnie */
  white-space: nowrap;
}

.status-pill::before {
  content: "";
  display: inline-block;
  width: 0.44vw;                     /* 6 */
  height: 0.44vw;
  border-radius: 50%;
  background: currentColor;
}

.status-pill--oczekuje {
  background: var(--varStatusOczekujeFill);
  color: var(--varStatusOczekujeText);
  border-color: var(--varStatusOczekujeBorder);
}
.status-pill--wtrakcie {
  background: var(--varStatusWTrakcieFill);
  color: var(--varStatusWTrakcieText);
  border-color: var(--varStatusWTrakcieBorder);
}
.status-pill--wstrzymane {
  background: var(--varStatusWstrzymaneFill);
  color: var(--varStatusWstrzymaneText);
  border-color: var(--varStatusWstrzymaneBorder);
}
.status-pill--wykonane {
  background: var(--varStatusWykonaneFill);
  color: var(--varStatusWykonaneText);
  border-color: var(--varStatusWykonaneBorder);
}

/* ══════════════════════════════════════════════════════════════
   SCROLLBAR
   ══════════════════════════════════════════════════════════════ */
::-webkit-scrollbar { width: 0.88vw; height: 0.88vw; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--varBorderStrong);
  border: 3px solid var(--varBgScreen);
  border-radius: var(--radius-md);   /* v5.2: 4px spójnie */
}
::-webkit-scrollbar-thumb:hover { background: var(--varTextTertiary); }