/* IBM Plex Sans (2026-08-30) — module-scoped, self-hosted, same pattern as
   fonts.css's Inter (two Unicode-range subsets covering Azerbaijani: "latin" for
   ö/ü and "latin-ext" for ğ/ı/ş and critically ə, U+0259). Applied only to
   .trq-app below, not fonts.css's site-wide --font-sans — this was a request for
   this module's own screens, not a sitewide type-scale change. Unlike Inter,
   Google's distribution of this face has no variable-weight file, so it's one
   file per weight (not one file for the whole 100-900 range) — only the 3
   weights this module's own type scale actually uses (400/600/700) are shipped,
   ~118KB total across 6 files (vs Inter's 133KB across 2) — comparable, not a
   regression, but note this scales per weight if more are ever added later. */
/* 01.10: Noto Sans — TamstoreRequest giriş ekranları (.trq-login-v2). Öz serverimizdən (latın, latın-ext: ə ş ğ, kiril: RU). */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-800.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-latin-ext-800.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-cyrillic-400.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-cyrillic-600.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-cyrillic-700.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/noto-sans-cyrillic-800.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/ibm-plex-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{
  --trq-bg:#f4f7fb;
  --trq-surface:#ffffff;
  --trq-surface-2:#eef2f8;
  --trq-border:#dde4ef;
  --trq-text:#132a4e;
  --trq-text-dim:#57647c;
  --trq-accent:#1d8f6f;
  --trq-accent-2:#4fc79b;
  --trq-brand:#1d4e96;
  /* Same gold as the TAMSTORE✦ wordmark's star (assets/img/tamstore-logo*.svg,
     fill="#f5a623") — used for the login hero's own icon accents (2026-08-29) so
     they read as brand gold, not the app's separate green action-accent. */
  --trq-star-gold:#f5a623;
  --trq-success:#16a34a;
  --trq-danger:#dc2626;
  --trq-warning:#d97706;
  --trq-radius:16px;
  --trq-safe-top:env(safe-area-inset-top,0px);
  --trq-safe-bottom:env(safe-area-inset-bottom,0px);
  --trq-shadow:0 1px 2px rgba(19,42,78,.06),0 1px 1px rgba(19,42,78,.04);

  /* Təsdiqlər rebuild palette (2026-08-29) — deliberately a self-contained
     palette/scale, not the --trq-* tokens above (the spec called for specific
     hex values distinct from this app's existing theme). Moved here from
     .appr2-screen (2026-09-01): every appr2 and la- prefixed rule that reads
     these was written assuming they'd always resolve, but several of those
     elements are appended straight to document.body (the reminder-preview
     modal's la-plan-group and la-plan-warn rows, the reject-reason popover,
     etc.) — outside .appr2-screen's subtree. A scoped selector can't help a
     sibling in the DOM, only :root can, so these live at :root now like every
     other TamstoreRequest color token. See the memory on the scoped-CSS-
     variable bug class audit (2026-09-01) for the full list this fixed.
     WARNING if you edit this comment: do not type an asterisk immediately
     followed by a forward slash anywhere in this prose, with nothing between
     them — that two-character pair ends a CSS comment wherever it appears, even
     mid-sentence, even inside what looks like plain text. That exact mistake
     happened twice while writing this very comment: once in an earlier draft
     that abbreviated two rule-name prefixes back to back, and again in the
     first attempt at this warning paragraph itself, which tried to show the
     dangerous pair as a literal example. Each time, everything from that point
     until the real closing sequence below got parsed as invalid CSS, and
     --appr2-ink (the very next declaration) silently went missing — every
     sibling declaration around it kept working, so this is easy to miss by
     reading the file and only shows up as a computed-style check coming back
     empty. Describe the danger in words, never demonstrate it in the danger
     zone. */
  --appr2-ink:#1d2430; --appr2-blue:#1b4b8f; --appr2-green:#17805a;
  --appr2-green-bg:#eef4f1; --appr2-amber:#c98a1e; --appr2-red:#a8352c;
  --appr2-approved:#2e7d54; --appr2-border:#dde2ea; --appr2-row-border:#f0f3f7;
  --appr2-head-bg:#f7f9fc; --appr2-head-text:#8b95a3; --appr2-secondary-text:#97a1b0;
  --appr2-warn-bg:#fdfbf5;
}
*{box-sizing:border-box;}
/* The native [hidden] attribute only wins the cascade against the UA stylesheet — any
   author rule that sets display on the same element (e.g. .trq-tab{display:flex}) beats
   it by specificity, silently un-hiding elements JS correctly marked hidden. Force it. */
[hidden]{display:none !important;}
html,body{margin:0;padding:0;max-width:100%;overflow-x:clip;}
/* HR Center's shared fonts.css is loaded on this page (confirmed via computed
   styles, not just link presence) and its --text-*/--font-sans variables resolve
   here — so this module reaches the real shared type scale rather than a local
   copy. This body rule previously redeclared its own font-family fallback stack,
   which silently beat fonts.css's html,body{font-family:var(--font-sans)} rule at
   equal specificity by loading later in <head> — exactly the "another stylesheet
   declaring the same selector and winning" trap. Inherit explicitly instead. */
body{
  background:var(--trq-bg);
  color:var(--trq-text);
  /* Redefines the --font-sans CUSTOM PROPERTY at body scope, same technique
     .trq-app uses below and for the same reason (2026-09-01, scoped-CSS-variable
     audit) — but body is the one wrapper every dynamically document.body-appended
     popover/modal/toast actually descends from (they're .trq-app's siblings, not
     its descendants, so .trq-app's own redefinition never reached them). Without
     this, every such element silently rendered in fonts.css's site-wide Inter
     instead of this module's IBM Plex Sans — never broken, just the wrong font,
     the milder sibling of the invisible-button bug this same audit found. */
  --font-sans:'IBM Plex Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-family:var(--font-sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button,input,select,textarea{font-family:inherit;}
/* Redefines the CUSTOM PROPERTY --font-sans (not font-family directly) —
   fonts.css's --text-* tokens (--text-page-title etc, used all over this file's
   existing rules via e.g. font:var(--text-page-title,600 22px/1.25 var(--font-sans)))
   each bake in a var(--font-sans) reference of their own; a plain font-family
   override here would be beaten by every one of those, since they set the
   property directly rather than inherit it. Custom properties resolve
   var(--font-sans) using the cascade at the element where they're actually
   used, not where --text-page-title was defined, so redefining the variable
   here reaches every one of them without editing each rule individually. */
.trq-app{min-height:100vh;display:flex;flex-direction:column;--font-sans:'IBM Plex Sans','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-family:var(--font-sans);}
.trq-screen{display:none;flex:1;min-height:100vh;}
.trq-app[data-view="loading"] [data-screen="loading"],
.trq-app[data-view="login"] [data-screen="login"],
.trq-app[data-view="verify"] [data-screen="verify"],
.trq-app[data-view="email-code"] [data-screen="email-code"],
.trq-app[data-view="set-password"] [data-screen="set-password"],
.trq-app[data-view="reset-password"] [data-screen="reset-password"],
.trq-app[data-view="login-password"] [data-screen="login-password"],
.trq-app[data-view="force-password"] [data-screen="force-password"],
.trq-app[data-view="employee-shell"] [data-screen="employee-shell"],
.trq-app[data-view="admin-shell"] [data-screen="admin-shell"]{display:flex;flex-direction:column;}

.trq-logo{display:inline-flex;flex-direction:column;align-items:center;gap:2px;}
.trq-logo-row{display:inline-flex;align-items:center;}
.trq-logo-image{height:20px;width:auto;display:block;}
.trq-logo-image-lg{height:34px;}
.trq-logo-request{font-size:.62rem;font-weight:700;color:var(--trq-text-dim);letter-spacing:.24em;margin-top:2px;}
.trq-logo-request-sm{font-size:.56rem;font-weight:700;color:var(--trq-text-dim);letter-spacing:.2em;margin-top:1px;}
.trq-topbar-brand{display:flex;flex-direction:column;align-items:flex-start;gap:1px;}

.trq-splash{flex:1;display:flex;align-items:center;justify-content:center;}

.trq-auth-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 20px calc(32px + var(--trq-safe-bottom));gap:8px;text-align:center;}
.trq-auth-tagline{color:var(--trq-text-dim);margin:6px 0 20px;font-size:.95rem;}
.trq-auth-title{margin:14px 0 4px;font-size:1.3rem;}
.trq-auth-card{width:100%;max-width:380px;padding:22px;display:flex;flex-direction:column;gap:14px;}
.trq-auth-hint{color:var(--trq-text-dim);font-size:.8rem;margin-top:16px;}

.trq-card{background:var(--trq-surface);border:1px solid var(--trq-border);border-radius:var(--trq-radius);box-shadow:var(--trq-shadow);}

.trq-field{display:flex;flex-direction:column;gap:6px;text-align:left;font-size:.85rem;color:var(--trq-text-dim);}
/* Screen-reader-only label — visible placeholder/select already carries the
   meaning visually, this just keeps the <label> accessible without a
   redundant on-screen caption (2026-08-29, STORE team view). */
.trq-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
.trq-field input,.trq-field select,.trq-field textarea{
  background:var(--trq-surface-2);border:1px solid var(--trq-border);color:var(--trq-text);
  border-radius:10px;padding:13px 14px;font-size:1rem;outline:none;font-family:inherit;
}
.trq-field textarea{resize:vertical;min-height:70px;}
.trq-field input:focus,.trq-field select:focus,.trq-field textarea:focus{border-color:var(--trq-accent);}

/* Shared segmented date-input component — every date field in the app, see
   enhanceDateInputs() in tamstorerequest-app.js. The real <input type="date"> stays
   in the DOM (form semantics, .value stays plain ISO) but is visually removed from
   flow; .trq-date-text is the actual interactive surface (day/month/year segments,
   keyboard nav, live validation), .trq-date-toggle opens the custom .trq-date-picker
   popup (month/year <select>s + day grid) rather than relying on the native picker,
   which can't jump directly to an arbitrary year/month. */
.trq-date-wrap{position:relative;display:block;}
.trq-date-native-hidden{position:absolute;width:1px;height:1px;padding:0;margin:0;border:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}
.trq-date-text{width:100%;padding-right:40px;}
.trq-date-text.trq-date-text-invalid{border-color:var(--trq-danger);}
.trq-date-error{margin-top:4px;}
.trq-date-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);width:30px;height:30px;
  display:flex;align-items:center;justify-content:center;background:none;border:none;
  color:var(--trq-text-dim);cursor:pointer;border-radius:8px;
}
.trq-date-toggle:hover{background:var(--trq-surface-2);color:var(--trq-text);}
.trq-date-toggle:disabled{opacity:.4;pointer-events:none;}
.trq-date-picker{
  position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:280px;
  background:var(--trq-surface);border:1px solid var(--trq-border);border-radius:12px;
  box-shadow:var(--trq-shadow);padding:12px;text-align:left;
}
.trq-date-picker-header{display:flex;align-items:center;gap:4px;margin-bottom:8px;}
.trq-date-picker-nav{
  flex:0 0 auto;width:22px;height:22px;border:1px solid var(--trq-border);border-radius:7px;
  background:var(--trq-surface-2);color:var(--trq-text);cursor:pointer;font-size:.78rem;
}
.trq-date-picker-month{flex:1.3;min-width:0;}
.trq-date-picker-year{flex:1;min-width:0;}
.trq-date-picker-month,.trq-date-picker-year{
  background:var(--trq-surface-2);border:1px solid var(--trq-border);border-radius:7px;
  padding:3px 4px;font-size:.74rem;color:var(--trq-text);
}
.trq-date-picker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;margin-bottom:4px;}
.trq-date-picker-weekdays span{font-size:.7rem;font-weight:700;color:var(--trq-text-dim);}
.trq-date-picker-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;}
/* grid-column:auto (2026-08-28) — the actual, confirmed root cause of the "calendar
   renders one cell" bug reported three times: `.trq-main form.trq-card button` (further
   up this file) forces grid-column:1/-1 on EVERY button nested inside the 2-column
   Yeni-tələb form grid, meant for that form's own submit button. The date picker's day
   buttons are plain <button> elements injected by JS deep inside that same form, so they
   inherited it too — each day silently expanding to span all 7 grid columns and stacking
   one per row (only "1" and "2" visible before the picker's height ran off-screen). The
   picker's own grid-template-columns was always correct; only the children's placement
   was wrong, which is why checking the container's computed style alone (done twice
   before landing on this) never caught it — only inspecting an actual child's
   grid-column, or looking at a real screenshot, showed it. There was never a second
   picker implementation; this was the only one, silently broken by an unrelated,
   overly-broad sitewide selector. */
.trq-date-picker-day{
  aspect-ratio:1;border:none;background:none;border-radius:8px;font-size:.82rem;
  color:var(--trq-text);cursor:pointer;
}
/* Matches (actually beats) .trq-main form.trq-card button's specificity — a plain
   .trq-date-picker-day{grid-column:auto} rule loses to it regardless of source order
   (0,3,1) vs (0,1,0), which is why the first attempt at this fix visibly did nothing. */
.trq-main form.trq-card .trq-date-picker-day{grid-column:auto;}
.trq-date-picker-day:hover{background:var(--trq-surface-2);}
.trq-date-picker-day.is-selected{background:var(--trq-accent);color:#fff;font-weight:700;}

.trq-combo{position:relative;}
.trq-combo input{width:100%;padding-right:40px;font-weight:600;box-sizing:border-box;cursor:pointer;}
.trq-combo input.trq-combo-input-empty{font-weight:400;color:var(--trq-text-dim);}
.trq-combo input::placeholder{font-weight:400;color:var(--trq-text-dim);}
.trq-combo-caret{
  position:absolute;right:12px;top:50%;transform:translateY(-50%);
  color:var(--trq-text-dim);pointer-events:none;transition:transform .15s ease,color .15s ease;
}
.trq-combo.trq-combo-open .trq-combo-caret{transform:translateY(-50%) rotate(180deg);color:var(--trq-accent);}
.trq-combo-list{
  position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--trq-surface);
  border:1px solid var(--trq-border);border-radius:12px;
  box-shadow:0 10px 28px rgba(19,42,78,.16),0 2px 8px rgba(19,42,78,.08);
  max-height:240px;overflow-y:auto;z-index:30;display:none;padding:6px;
}
.trq-combo-list.trq-combo-list-open{display:block;}
.trq-combo-option{
  padding:10px 12px;margin:1px 0;font-size:.9rem;color:var(--trq-text);cursor:pointer;
  border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  transition:background .1s ease;
}
.trq-combo-option:hover{background:var(--trq-surface-2);}
.trq-combo-option.trq-combo-option-selected{background:rgba(29,143,111,.1);color:var(--trq-accent);font-weight:700;}
.trq-combo-option.trq-combo-option-selected::after{content:'✓';font-weight:700;flex-shrink:0;}
.trq-combo-empty{padding:10px 12px;font-size:.82rem;color:var(--trq-text-dim);}
/* Two-line combo option (2026-08-29) — name plus domain/position, so two
   same-named employees in the manager picker can be told apart. */
.trq-combo-option-text{display:flex;flex-direction:column;gap:1px;min-width:0;}
.trq-combo-option-secondary{font-size:.76rem;color:var(--trq-text-dim);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.trq-combo-popover{
  background:var(--trq-surface);border:1px solid var(--trq-border);border-radius:12px;
  box-shadow:0 10px 28px rgba(19,42,78,.16),0 2px 8px rgba(19,42,78,.08);
  padding:8px;width:260px;max-width:90vw;
}
.trq-combo-popover-search{
  width:100%;box-sizing:border-box;padding:10px 12px;margin-bottom:6px;
  border:1px solid var(--trq-border);border-radius:8px;background:var(--trq-surface-2);
  color:var(--trq-text);font-size:.9rem;font-family:inherit;outline:none;
}
.trq-combo-popover-search:focus{border-color:var(--trq-accent);}
.trq-combo-popover-list{max-height:240px;overflow-y:auto;}
.trq-btn-caret{display:inline-flex;margin-left:4px;vertical-align:-3px;transition:transform .15s ease;}
.trq-btn[aria-expanded="true"] .trq-btn-caret{transform:rotate(180deg);}

.trq-btn{border:none;border-radius:12px;padding:13px 18px;font-size:1rem;font-weight:700;cursor:pointer;touch-action:manipulation;}
.trq-btn-primary{background:var(--trq-accent);color:#fff;}
.trq-btn-primary:active{background:var(--trq-accent-2);}
.trq-btn-secondary{background:var(--trq-surface-2);color:var(--trq-text);border:1px solid var(--trq-border);}
.trq-btn-danger{background:var(--trq-danger);color:#fff;}
.trq-btn-link{background:none;color:var(--trq-text-dim);font-weight:500;font-size:.85rem;padding:10px;text-decoration:underline;}
.trq-btn-block{width:100%;}
.trq-btn-sm{padding:9px 12px;font-size:.85rem;border-radius:10px;}
.trq-btn[disabled]{opacity:.55;pointer-events:none;}

.trq-error{color:var(--trq-danger);font-size:.85rem;margin:0;}
.trq-success-text{color:var(--trq-success);font-size:.85rem;margin:0;}

.trq-topbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:calc(12px + var(--trq-safe-top)) 16px 12px;background:var(--trq-surface);border-bottom:1px solid var(--trq-border);
  position:sticky;top:0;z-index:5;
}
.trq-topbar-actions{display:flex;align-items:center;gap:10px;min-width:0;}
.trq-lang-select-compact .trq-lang-trigger{padding:5px 10px;font-size:.72rem;}
.trq-lang-select-compact .trq-lang-icon{width:13px;height:13px;}
.trq-topbar-user{max-width:55%;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trq-topbar-user-name{color:var(--trq-text);font-size:.85rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;}
.trq-topbar-user-domain{color:var(--trq-text-dim);font-size:.72rem;font-weight:600;margin-top:1px;overflow:hidden;text-overflow:ellipsis;}
/* Base (mobile) state for the breadcrumb + avatar chip — deliberately placed before
   the >=1100px media query below so that query's override always wins the cascade
   (a later, unconditional rule with equal specificity would otherwise beat it). */
.trq-topbar-breadcrumb{display:none;font-size:.85rem;color:var(--trq-text-dim);white-space:nowrap;}
.trq-topbar-breadcrumb .trq-breadcrumb-current{color:var(--trq-text);font-weight:700;}
.trq-topbar-user-inner{display:flex;align-items:center;gap:10px;}
.trq-topbar-avatar{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--trq-text);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;
}
.trq-topbar-user-text{min-width:0;}
.trq-impersonation-banner{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  background:#fef3c7;color:#92400e;padding:9px 16px;font-size:.82rem;font-weight:700;
  position:sticky;top:0;z-index:6;border-bottom:1px solid #f5d68b;
}
.trq-impersonation-banner .trq-btn{padding:6px 12px;font-size:.78rem;}
.trq-main{flex:1;overflow-y:auto;padding:16px 16px calc(24px + var(--trq-safe-bottom));}
.trq-tabbar{
  display:flex;background:var(--trq-surface);border-top:1px solid var(--trq-border);
  padding-bottom:var(--trq-safe-bottom);position:sticky;bottom:0;z-index:5;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
}
.trq-tab{
  position:relative;flex:1 1 0;min-width:0;background:none;border:none;color:var(--trq-text-dim);display:flex;flex-direction:column;align-items:center;
  gap:3px;padding:9px 4px 8px;font-size:.68rem;font-weight:600;cursor:pointer;touch-action:manipulation;
}
.trq-tab > span:not(.trq-tab-icon){max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* nth-of-type (not nth-child) so this only ever counts sibling <button> tabs — the
   sidebar's group-label/admin-chip <div>s (desktop-only, see below) must not shift
   this count on mobile even though they're still present in the DOM there.
   Threshold is 6, not 7 (2026-09-03): Çıxış moved out of .trq-tabbar-scroll (see
   the sidebar media query below), so it's no longer a same-parent <button>
   sibling of the other tabs and doesn't count toward this nth-of-type anymore —
   6 here plus the always-present Çıxış reproduces the original "7 total" trigger. */
.trq-tabbar:has(.trq-tab:nth-of-type(6)) .trq-tab{flex:0 0 auto;min-width:64px;}
.trq-tab-icon{font-size:1.2rem;line-height:1;}
.trq-tab-icon svg{width:1.15em;height:1.15em;display:block;}
.trq-tab.is-active{color:var(--trq-accent);}
/* Desktop-sidebar-only chrome: section headers between tab groups and the admin
   identity chip. All hidden on the mobile bottom tab bar (where the tabbar is a
   horizontal row, not a sidebar column) and only switched on inside the
   >=1100px sidebar media query further down. */
.trq-tab-group-label,.trq-sidebar-admin-chip,.trq-sidebar-brand{display:none;}
/* Wraps everything except the admin chip + Çıxış (2026-09-03) — display:contents
   on mobile so it's invisible to the horizontal flex row (its children lay out
   as if they were direct .trq-tabbar children, exactly as before this wrapper
   existed); the sidebar media query below turns it into the scrollable region so
   a long nav list can't push the chip/Çıxış below the viewport. */
.trq-tabbar-scroll{display:contents;}
/* Outlook-style unread/pending count badge, shared by the employee "Tələblərim"
   tab (item 3, 2026-08-24) and the manager "Təsdiqlər" tab (item 2, 2026-08-25) —
   one component/visual language for both. Empty content collapses to a small dot;
   a count renders as a compact red pill. */
.trq-badge-dot{
  position:absolute;top:4px;right:calc(50% - 22px);min-width:9px;height:9px;padding:0;
  border-radius:50%;background:var(--trq-danger);border:2px solid var(--trq-surface);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:.62rem;font-weight:800;line-height:1;
}
.trq-badge-dot:not(:empty){min-width:16px;height:16px;padding:0 4px;}

.trq-section-title{font:var(--text-page-title,600 22px/1.25 var(--font-sans));margin:0 0 12px;}
.trq-subtle{color:var(--trq-text-dim);font:var(--text-table-body,400 13px/1.5 var(--font-sans));margin:0 0 14px;}

.trq-stage-toggle{display:flex;gap:8px;background:var(--trq-surface-2);border:1px solid var(--trq-border);border-radius:12px;padding:4px;margin-bottom:14px;}
.trq-stage-btn{flex:1;padding:10px 8px;border:none;border-radius:9px;background:transparent;color:var(--trq-text-dim);font-weight:700;font-size:.82rem;cursor:pointer;}
.trq-stage-btn.is-active{background:var(--trq-accent);color:#fff;}

.trq-list{display:flex;flex-direction:column;gap:10px;}
.trq-request-card{background:var(--trq-surface);border:1px solid var(--trq-border);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--trq-shadow);}
.trq-request-type{font-weight:700;font-size:.92rem;}
.trq-request-type-sub{font-weight:400;font-size:.78rem;color:var(--trq-text-dim);}
/* Shared "never wrapped" line for a card/row's №, date range and day count
   (2026-08-28) — the compact date format (formatDateRangeCompact) already keeps the
   text short; this is the safety net for anything narrower still. */
.trq-nowrap-line{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trq-md-item-sent{color:var(--trq-text-dim);font-size:.72rem;}
.trq-request-meta{color:var(--trq-text-dim);font-size:.8rem;margin-top:2px;}
.trq-request-note{color:var(--trq-text-dim);font-size:.82rem;margin-top:8px;line-height:1.4;white-space:pre-wrap;}
.trq-request-actions{display:flex;gap:8px;margin-top:12px;}
.trq-request-actions .trq-btn{flex:1;}

.trq-timeline{display:flex;flex-direction:column;gap:9px;margin-top:10px;}
.trq-timeline-step{display:flex;gap:9px;align-items:flex-start;}
.trq-timeline-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;margin-top:4px;background:var(--trq-border);}
.trq-timeline-done .trq-timeline-dot{background:var(--trq-success);}
.trq-timeline-rejected .trq-timeline-dot{background:var(--trq-danger);}
.trq-timeline-pending .trq-timeline-dot{background:var(--trq-warning);}
.trq-timeline-returned .trq-timeline-dot{background:var(--trq-warning);}
.trq-timeline-label{font-weight:700;font-size:.78rem;}
.trq-timeline-pending .trq-timeline-label{color:var(--trq-warning);}
.trq-timeline-rejected .trq-timeline-label{color:var(--trq-danger);}
.trq-timeline-returned .trq-timeline-label{color:var(--trq-warning);}
.trq-timeline-meta{color:var(--trq-text-dim);font-size:.76rem;margin-top:1px;}

.trq-request-col-details,.trq-request-col-status{min-width:0;}

.trq-manage-header{
  background:var(--trq-brand);color:#fff;border-radius:14px;padding:18px 22px;margin-bottom:16px;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
}
.trq-manage-header-title{font-size:1.15rem;font-weight:800;}
.trq-manage-header-fin{font-size:.82rem;opacity:.85;margin-top:3px;}
.trq-manage-header .trq-btn{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);}
.trq-manage-header .trq-btn:hover{background:rgba(255,255,255,.24);}

/* "Siyahı + detal" master-detail layout for Tələblərim/Tələblər: a compact clickable
   list on the left, the selected request's full detail (incl. approval timeline) on
   the right. Stacked on narrow screens (detail below the list), side-by-side on wide. */
.trq-md-layout{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.trq-md-list{display:flex;flex-direction:column;gap:0;border:1px solid var(--trq-border);border-radius:14px;overflow:hidden;background:var(--trq-surface);width:100%;}
.trq-md-item{width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--trq-border);padding:11px 16px;cursor:pointer;font:inherit;color:inherit;display:flex;justify-content:space-between;align-items:flex-start;gap:10px;}
.trq-md-item:last-child{border-bottom:0;}
.trq-md-item:hover{background:var(--trq-surface-2);}
.trq-md-item.is-selected{background:#f1faf6;box-shadow:inset 3px 0 0 var(--trq-accent);}
.trq-md-item-body{min-width:0;flex:1;}
.trq-md-item-type{font-weight:700;font-size:.9rem;}
.trq-unread-dot{display:inline-block;width:7px;height:7px;margin-right:6px;border-radius:50%;background:var(--trq-danger);vertical-align:middle;}
.trq-md-item-meta{color:var(--trq-text-dim);font-size:.78rem;margin-top:2px;}
.trq-md-detail{flex:1;min-width:0;width:100%;padding:22px;}
.trq-md-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:4px;}
.trq-md-detail-title{font-weight:700;font-size:1.15rem;}
.trq-md-detail-history-label{margin-top:22px;margin-bottom:2px;}
@media (min-width:1100px){
  .trq-md-layout{flex-direction:row;align-items:stretch;gap:22px;}
  .trq-md-list{width:400px;flex:0 0 400px;align-self:flex-start;max-height:70vh;overflow-y:auto;}
  .trq-md-detail{border-radius:16px;}
}

/* Shared "employee info" visual language: uppercase dim labels, breadcrumb structure
   line, 2-col value grid — used by Profil and reused wherever else employee details
   are shown (e.g. the admin ŞV Doğrulama Siyahısı entry card). */
.trq-info-label{color:var(--trq-text-dim);font:var(--text-eyebrow,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:var(--eyebrow-letter-spacing,.08em);margin-bottom:4px;}
.trq-info-breadcrumb{color:var(--trq-text-dim);font-size:.82rem;line-height:1.5;}
.trq-info-breadcrumb .trq-info-crumb-current{color:var(--trq-text);font-weight:600;}
.trq-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;margin-top:16px;}
.trq-info-grid-item{min-width:0;}
.trq-info-grid-value{font-size:.92rem;font-weight:600;color:var(--trq-text);}
.trq-profile-reports-link{color:var(--trq-brand);text-decoration:underline;text-underline-offset:2px;}
.trq-profile-reports-link:hover{color:var(--trq-accent);}
/* Brief highlight when "Tabeçilikdə: N nəfər" scrolls the team card into view —
   fades on its own, no JS timer needed to remove the class (animation-fill-mode
   forwards would keep the end state; this deliberately doesn't, so a re-click
   re-triggers cleanly via the forced-reflow class removal/re-add in JS). */
@keyframes trq-profile-team-flash{0%{box-shadow:0 0 0 3px var(--trq-brand);}100%{box-shadow:0 0 0 3px transparent;}}
.trq-profile-team-flash{animation:trq-profile-team-flash 1.4s ease-out;}

.trq-profile-card{padding:26px;display:flex;flex-wrap:wrap;gap:32px;}
.trq-profile-photo-col{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:160px;}
.trq-profile-avatar{width:132px;height:132px;border-radius:50%;overflow:hidden;background:var(--trq-surface-2);border:1px solid var(--trq-border);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:2.1rem;color:var(--trq-text-dim);}
.trq-profile-avatar img{width:100%;height:100%;object-fit:cover;}
.trq-profile-photo-edit{position:absolute;bottom:2px;right:2px;width:32px;height:32px;border-radius:50%;background:var(--trq-accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;border:2px solid var(--trq-surface);font-size:.95rem;}
.trq-profile-name{font-weight:700;font-size:1.1rem;text-align:center;margin-top:4px;}
.trq-profile-fin{color:var(--trq-text-dim);font-size:.8rem;text-align:center;margin-top:2px;}
.trq-profile-role-pill{margin-top:8px;display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:#e3f5ee;color:var(--trq-accent);font-size:.76rem;font-weight:700;}
.trq-profile-role-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--trq-accent);}
.trq-profile-main{flex:1 1 320px;min-width:260px;}
.trq-profile-password-row{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;padding-top:18px;border-top:1px solid var(--trq-border);}
.trq-profile-password-row + .trq-profile-password-row{margin-top:16px;padding-top:14px;}
.trq-profile-password-row .trq-info-label{margin-bottom:2px;}
.trq-profile-password-hint{color:var(--trq-text-dim);font-size:.78rem;}

/* ---------- Profil: two-column layout (identity card + right column) ---------- */
.trq-profile-layout{display:flex;flex-direction:column;gap:16px;}
.trq-profile-identity-card{padding:26px;text-align:center;}
.trq-profile-position{color:var(--trq-text-dim);font-size:.85rem;margin-top:2px;}
.trq-profile-facts{text-align:left;margin-top:18px;padding-top:16px;border-top:1px solid var(--trq-border);display:flex;flex-direction:column;gap:10px;}
.trq-profile-fact{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.trq-profile-fact-value{font-weight:600;font-size:.85rem;color:var(--trq-text);text-align:right;}
.trq-profile-photo-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:16px;}
.trq-profile-right{display:flex;flex-direction:column;gap:16px;min-width:0;}
.trq-org-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.trq-org-chip{display:inline-flex;padding:5px 12px;border-radius:999px;background:var(--trq-surface-2);border:1px solid var(--trq-border);font-size:.8rem;font-weight:600;color:var(--trq-text);}
.trq-org-chip-sep{color:var(--trq-text-dim);font-size:.8rem;}
/* Muted sub-value under a table cell's main number (e.g. accrued days for the
   current work year) — min-height reserves the same row space whether or not a
   given row actually has one, so numbers stay aligned across rows regardless. */
.trq-table-sub{color:var(--trq-text-dim);font-size:.76rem;margin-top:2px;min-height:1.2em;}
.trq-table-status-col{width:1%;white-space:nowrap;}
@media (min-width:900px){
  .trq-profile-layout{flex-direction:row;align-items:flex-start;gap:20px;}
  .trq-profile-identity-card{width:300px;flex:0 0 300px;}
  .trq-profile-right{flex:1;}
}

.trq-field-row{display:flex;gap:12px;}
.trq-field-row .trq-field{flex:1;min-width:0;}
.trq-daycount-box{
  padding:10px 14px;background:var(--trq-surface-2);border:1px solid var(--trq-border);
  border-radius:10px;font-size:.85rem;color:var(--trq-text-dim);font-weight:600;
}
.trq-daycount-chip{
  flex:0 0 auto;align-self:flex-end;white-space:nowrap;padding:9px 14px;
  background:var(--trq-surface-2);border:1px solid var(--trq-border);border-radius:10px;
  font-size:.82rem;color:var(--trq-accent);font-weight:700;
}
.trq-daycount-text{font-weight:600;color:var(--trq-text-dim);font-size:.85rem;}
.trq-comp-slots{display:flex;flex-wrap:wrap;gap:10px;}
.trq-comp-slots .trq-date-wrap{flex:1 1 150px;min-width:150px;}
.trq-request-unseen{position:relative;}
.trq-request-unseen::after{content:'';position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--trq-accent);}

.trq-pill{display:inline-flex;align-items:center;padding:3px 10px;border-radius:999px;font-size:.72rem;font-weight:700;white-space:nowrap;}
.trq-pill-pending_manager{background:#fff3d6;color:var(--trq-warning);}
.trq-pill-pending_admin{background:#e0ecff;color:var(--trq-brand);}
.trq-pill-approved{background:#dcf5e6;color:var(--trq-success);}
.trq-pill-rejected{background:#fde3e3;color:var(--trq-danger);}
.trq-pill-cancelled{background:var(--trq-surface-2);color:var(--trq-text-dim);}
.trq-pill-returned_for_correction{background:#fff3d6;color:var(--trq-warning);}
/* Hesablar account-type badge (2026-08-29) — PERSONAL vs STORE, distinct at a
   glance since their first-login behaviour differs (ŞV step vs none). */
.trq-pill-type-personal{background:var(--trq-surface-2);color:var(--trq-text-dim);}
.trq-pill-type-store{background:#e0ecff;color:var(--trq-brand);}

/* ---------- Hesablar row actions (2026-08-29) ----------
   One always-visible structural action (Menecer) plus a "⋯" menu for the rest
   (Şifrə sıfırla / Şifrə təyin et / E-poçt kodunu ötür / Blokla) — five buttons no
   longer fit one line at desktop width (the fifth, "Blokla", wrapped to a second
   row). Nothing removed, just relocated; every item works identically for a STORE
   account as a PERSONAL one — no action here is type-specific. The menu itself is
   a fixed-position popover appended to <body> (openRowActionsMenu, reusing the
   Menecer combo's own positioning code) rather than nested inside the row —
   nested inside .trq-table-wrap (overflow-x:auto, which forces overflow-y to clip
   too) silently cut the menu off before this. */
.trq-acc-actions{display:flex;align-items:center;gap:6px;justify-content:flex-end;}
.trq-rowmenu-trigger{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  background:var(--trq-surface-2);border:1px solid var(--trq-border);border-radius:8px;
  font-size:1rem;line-height:1;color:var(--trq-text);cursor:pointer;flex:0 0 auto;
}
.trq-rowmenu-trigger:hover{background:var(--trq-border);}
.trq-rowmenu-popover{width:170px;padding:6px;display:flex;flex-direction:column;gap:2px;}
.trq-rowmenu-item{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:none;background:none;font-size:.82rem;cursor:pointer;color:var(--trq-text);white-space:nowrap;font-family:inherit;}
.trq-rowmenu-item:hover{background:var(--trq-surface-2);}
.trq-rowmenu-item-danger{color:var(--trq-danger);}

.trq-table-wrap{overflow-x:auto;border:1px solid var(--trq-border);border-radius:14px;background:var(--trq-surface);}
table.trq-table{border-collapse:collapse;width:100%;font:var(--text-table-body,400 13px/1.5 var(--font-sans));min-width:560px;}
table.trq-table th,table.trq-table td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--trq-border);white-space:nowrap;}
table.trq-table th{color:var(--trq-text-dim);font:var(--text-table-header,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:var(--table-header-letter-spacing,.04em);}
table.trq-table tr:last-child td{border-bottom:none;}
table.trq-table td.trq-cell-wrap{white-space:normal;}

.trq-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;align-items:flex-end;}
.trq-toolbar .trq-field{min-width:110px;flex:1;}

.trq-entry-list{display:flex;flex-direction:column;gap:10px;}
.trq-entry-card{padding:14px;}
.trq-entry-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:6px;}
.trq-entry-card-name{font-weight:700;font-size:.92rem;}
.trq-photo-indicator{display:inline-block;margin-right:6px;font-size:.85rem;vertical-align:middle;}
.trq-entry-card-fin{color:var(--trq-text-dim);font-size:.8rem;margin-top:2px;}
.trq-entry-card-meta{color:var(--trq-text-dim);font-size:.78rem;margin-top:6px;line-height:1.5;}
.trq-entry-card-actions{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}

.trq-empty{color:var(--trq-text-dim);text-align:center;padding:40px 16px;font-size:.9rem;}
.trq-spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--trq-border);border-top-color:var(--trq-accent);animation:trq-spin .8s linear infinite;}
@keyframes trq-spin{to{transform:rotate(360deg);}}

.trq-modal-backdrop{position:fixed;inset:0;background:rgba(4,7,15,.7);display:flex;align-items:center;justify-content:center;padding:16px;z-index:20;}
.trq-modal{background:var(--trq-surface);border:1px solid var(--trq-border);border-radius:18px;padding:20px;width:100%;max-width:480px;max-height:85vh;overflow-y:auto;}
/* Bottom sheet on true phone widths: same shared .trq-modal/.trq-modal-backdrop markup
   used by every dialog in the app (decision, confirm, alert, password, photo import,
   account documents, feature flags, verification entry) — this is one CSS-only change
   that fixes all of them together, not a parallel dialog implementation. */
@media (max-width:559px){
  .trq-modal-backdrop{align-items:flex-end;padding:0;}
  .trq-modal{max-width:none;max-height:90vh;border-radius:18px 18px 0 0;padding-bottom:calc(20px + var(--trq-safe-bottom));}
}
.trq-modal-title{font-weight:800;font-size:1rem;margin:0 0 10px;}
.trq-modal-context{margin:0 0 14px;padding:12px 14px;border-radius:12px;background:var(--trq-surface-2);border:1px solid var(--trq-border);}
.trq-modal-context b{display:block;font-size:.92rem;color:var(--trq-text);}
.trq-modal-context span{display:block;margin-top:3px;font-size:.8rem;color:var(--trq-text-dim);}
.trq-modal-actions{display:flex;gap:10px;margin-top:16px;}
.trq-modal-actions .trq-btn{flex:1;}

/* Ərizə document preview + inline signature on the İmza line (2026-08-28) — the
   employee signs directly on a rendered HTML replica of the document (same
   model/wording as the PDF), not a separate canvas block below a PDF viewer. */
.trq-erize-modal{max-width:640px;}
.trq-erize-doc-actions{display:flex;justify-content:flex-end;margin-bottom:10px;}
.trq-erize-doc{
  width:100%;max-width:480px;margin:0 auto 14px;aspect-ratio:210/297;
  background:#fff;color:#161616;border:1px solid var(--trq-border);border-radius:4px;
  box-shadow:0 1px 4px rgba(0,0,0,.1);padding:9% 8%;
  display:flex;flex-direction:column;font-size:.82rem;line-height:1.45;overflow-y:auto;
}
.trq-erize-doc-addressee{text-align:right;}
.trq-erize-doc-addressee div{margin-bottom:2px;}
.trq-erize-doc-title{text-align:center;font-weight:800;font-size:1.05rem;letter-spacing:.02em;margin:20px 0;}
.trq-erize-doc-body{text-align:justify;}
/* Follows the body with a fixed gap — never anchored to the page bottom — and
   starts around the horizontal mid-point of the page, matching a real paper
   application's layout (2026-08-28), not the far left. */
.trq-erize-doc-footer{margin-top:34px;}
/* On-behalf sign warning (2026-08-29, item 1.5) — right above the signblock, at
   the point of signing, not buried at the top of the form. */
.trq-erize-onbehalf-warning{background:#fff3d6;color:var(--trq-warning);border-radius:8px;padding:10px 12px;font-size:.82rem;font-weight:600;margin:0 0 14px;}
/* Enlarged 2026-08-29 (56%->64%/66%->82%, 100px/78px->150px height) — a mouse/
   stylus signature was cramped into an ~192x100 box even at desktop width; see
   resizeCanvas()'s matching comment in tamstorerequest-app.js for the lineWidth
   bump this required so the stroke doesn't come out relatively thinner once
   scaled down into the ərizə's fixed 170x50pt signature box. */
.trq-erize-doc-signblock{width:64%;margin-left:auto;}
.trq-erize-doc-date{margin-bottom:10px;}
.trq-erize-doc-signature-label{margin-bottom:2px;}
/* A real signature space, not a boxed input — no fill, no border, just a baseline
   under a wide, tall drawing area; fully drawable edge to edge. */
.trq-signature-pad{width:100%;height:150px;display:block;touch-action:none;cursor:crosshair;background:transparent;border:0;border-bottom:1.5px solid var(--trq-border);border-radius:0;}
.trq-erize-doc-clear-link{display:inline-block;margin-top:6px;background:none;border:0;padding:0;font-size:.72rem;color:var(--trq-text-dim);text-decoration:underline;cursor:pointer;}
.trq-erize-desktop-hint{font-size:.72rem;color:var(--trq-text-dim);margin:10px 0 0;}
@media (max-width:700px){
  .trq-erize-doc{font-size:.76rem;padding:8% 7%;}
  .trq-erize-doc-title{margin:16px 0;}
  .trq-erize-doc-signblock{width:82%;}
  .trq-signature-pad{height:150px;}
}

/* ---------- Full-screen signature layer (touch-primary devices, 2026-08-29) ----------
   Deliberately opaque white, fixed, and above every other modal (z-index) — no
   backdrop-click or swipe closes this, only the explicit ✕/Təmizlə/Hazır controls
   (see openFullScreenSignatureLayer). touch-action:none on the overlay itself, not
   just the canvas, so a stray two-finger gesture anywhere in the layer can't pan/
   zoom the page underneath. */
.trq-sig-fullscreen{
  position:fixed;inset:0;z-index:50;background:#fff;color:#161616;
  display:flex;flex-direction:column;touch-action:none;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
}
.trq-sig-fs-close{
  position:absolute;top:calc(12px + env(safe-area-inset-top,0px));right:14px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--trq-border);
  background:var(--trq-surface-2);color:var(--trq-text-dim);font-size:1.05rem;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
/* Trimmed from 18px/60px (2026-08-29) to reclaim a little more drawing area now
   that the inline pad's own enlargement raised the bar for how roomy this should
   feel too — still clears the close button and leaves the Təmizlə/Hazır row its own
   untouched space below (a flex sibling, not overlapping the canvas). */
.trq-sig-fs-canvas-wrap{flex:1;position:relative;margin:52px 12px 0;min-height:0;}
.trq-sig-fs-canvas{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair;background:transparent;}
.trq-sig-fs-baseline{position:absolute;left:0;right:0;bottom:20%;height:1.5px;background:var(--trq-border);pointer-events:none;}
.trq-sig-fs-error{color:var(--trq-danger);font-size:.85rem;text-align:center;margin:10px 16px 0;}
.trq-sig-fs-actions{display:flex;gap:10px;padding:14px 18px calc(16px + env(safe-area-inset-bottom,0px));}
.trq-sig-fs-actions .trq-btn{flex:1;}
/* Landscape phones: shorter viewport height, so trim the vertical chrome a touch. */
@media (max-height:500px){
  .trq-sig-fs-canvas-wrap{margin-top:38px;}
  .trq-sig-fs-actions{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));}
}

/* Ərizələr arxivi (2026-08-28) — table rows inside the existing list/detail layout.
   The list column's default 400px (sized for the card-style rows elsewhere) is too
   narrow for an 8-column table — give the archive's list column more room and let
   the table itself scroll horizontally as a fallback on narrower screens. */
.trq-archive-table tr[data-archive-row]{cursor:pointer;}
.trq-archive-table tr[data-archive-row]:hover{background:var(--trq-surface-2);}
.trq-archive-table tr[data-archive-row].is-selected{background:#f1faf6;box-shadow:inset 3px 0 0 var(--trq-accent);}
@media (min-width:1100px){
  .trq-archive-layout.trq-req-layout{gap:16px;}
  .trq-archive-layout .trq-req-list-col{width:auto;flex:1.7 1 0;min-width:0;}
  .trq-archive-layout .trq-req-detail{flex:1 1 0;min-width:0;}
}

.trq-badge-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:999px;background:var(--trq-danger);color:#fff;font-size:.65rem;font-weight:800;margin-left:4px;}

@media (min-width:560px){
  .trq-shell{max-width:560px;margin:0 auto;box-shadow:0 0 0 1px var(--trq-border);}
}

@media (min-width:1100px){
  body{background:var(--trq-bg);}
  .trq-screen.trq-shell{display:none;}
  .trq-shell{
    width:100%;max-width:none;margin:0;display:grid;grid-template-columns:240px minmax(0,1fr);
    grid-template-rows:auto auto minmax(0,1fr);box-shadow:none;
  }
  .trq-app[data-view="employee-shell"] [data-screen="employee-shell"].trq-shell,
  .trq-app[data-view="admin-shell"] [data-screen="admin-shell"].trq-shell{display:grid;}
  .trq-topbar{grid-column:2;grid-row:1;padding:20px 32px;position:sticky;top:0;}
  .trq-topbar-brand{flex-direction:row;align-items:center;gap:8px;}
  .trq-topbar-user-name{font-size:.95rem;}
  .trq-topbar-user-domain{font-size:.76rem;}
  /* The mobile base rule caps .trq-topbar-user at max-width:55% so a long name
     can't push the avatar off a narrow screen — that cap was never relaxed here,
     so on desktop (ample room to the left of the right-aligned actions block) the
     name/domain still got ellipsis-clipped despite the empty space. Desktop lets
     them take whatever width they actually need; ellipsis remains a safety net
     for a genuinely oversized name, it just no longer fires from an arbitrary
     percentage. */
  .trq-topbar-user{max-width:none;}
  .trq-main{grid-column:2;grid-row:3;padding:32px 40px 48px;overflow-y:auto;}
  /* Səlahiyyət zolağı öz sətrində — əks halda gizli üçüncü sətrə, ekrandan kənara düşür. */
  #trq-access-warn{grid-column:2;grid-row:2;}
  .trq-tabbar{
    grid-column:1;grid-row:1 / -1;display:flex;flex-direction:column;align-items:stretch;
    gap:4px;padding:22px 0;background:var(--trq-text);border-top:none;border-right:1px solid var(--trq-text);
    position:sticky;top:0;height:100vh;overflow:hidden;
  }
  /* The scrollable nav region (2026-09-03) — min-height:0 is required for a
     flex child's overflow-y:auto to actually engage instead of the child just
     growing past its flex basis and pushing the chip/Çıxış below the
     viewport, which was the original bug (only reachable by zooming out). */
  .trq-tabbar-scroll{
    display:flex;flex-direction:column;gap:4px;flex:1 1 auto;min-height:0;
    overflow-y:auto;overflow-x:hidden;padding:0 14px;
  }
  /* These two now sit outside .trq-tabbar-scroll (pinned, never scroll away),
     so they lost the horizontal inset .trq-tabbar's own padding used to give
     every child — restored here as margin instead. */
  .trq-sidebar-admin-chip,.trq-tabbar > .trq-tab{margin-left:14px;margin-right:14px;}
  .trq-sidebar-brand{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:2px 14px 26px;}
  .trq-sidebar-brand-logo{height:22px;width:auto;display:block;}
  .trq-sidebar-brand-caption{font-size:.62rem;font-weight:700;color:rgba(255,255,255,.6);letter-spacing:.2em;}
  .trq-tab{flex:0 0 auto;min-width:0;flex-direction:row;justify-content:flex-start;gap:12px;padding:12px 14px;border-radius:10px;font-size:.85rem;text-align:left;color:rgba(255,255,255,.68);}
  .trq-tab > span:not(.trq-tab-icon){max-width:none;overflow:visible;white-space:normal;}
  .trq-tab:hover{background:rgba(255,255,255,.07);color:#fff;}
  .trq-tab.is-active{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28);}
  .trq-tab-icon{font-size:1.05rem;width:20px;text-align:center;}
  .trq-tab-group-label{
    display:block;padding:16px 14px 6px;color:rgba(255,255,255,.4);
    font:var(--text-eyebrow,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:var(--eyebrow-letter-spacing,.08em);
  }
  .trq-tab-group-label:first-child{padding-top:0;}
  /* Hide a group's own header when the single tab it introduces is hidden (e.g. the
     "Menecer" heading above Təsdiqlər for non-managers) — mirrors the tab's own
     [hidden] state without any extra JS. */
  .trq-tab-group-label:has(+ .trq-tab[hidden]){display:none;}
  .trq-sidebar-admin-chip{
    display:flex;align-items:center;gap:10px;padding:10px 14px;margin-bottom:6px;
    border-top:1px solid rgba(255,255,255,.14);padding-top:16px;
  }
  .trq-sidebar-admin-avatar{
    flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff;
    display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;
  }
  .trq-sidebar-admin-text{display:flex;flex-direction:column;min-width:0;}
  .trq-sidebar-admin-name{font-size:.8rem;font-weight:700;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .trq-sidebar-admin-role{font-size:.7rem;color:rgba(255,255,255,.55);margin-top:1px;}
  .trq-badge-dot{position:static;margin-left:auto;border:none;}
  .trq-badge-dot:not(:empty){min-width:18px;height:18px;padding:0 5px;font-size:.7rem;}
  .trq-section-title{margin-bottom:18px;}
  .trq-stage-toggle{max-width:520px;}
  .trq-toolbar{gap:12px;}
  .trq-toolbar .trq-field{min-width:180px;}
  .trq-main > form.trq-card,
  .trq-main #trq-new-form-wrap form.trq-card{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:24px !important;max-width:980px;}
  .trq-main form.trq-card .trq-field:nth-last-of-type(1),
  .trq-main form.trq-card textarea,
  .trq-main form.trq-card input[type="file"],
  .trq-main form.trq-card .trq-error,
  .trq-main form.trq-card button{grid-column:1 / -1;}
  .trq-table-wrap{border-radius:10px;}
  table.trq-table{min-width:0;}
  table.trq-table th,table.trq-table td{padding:12px 14px;}
  .trq-entry-list,.trq-list{gap:0;border:1px solid var(--trq-border);border-radius:10px;overflow:hidden;background:var(--trq-surface);}
  .trq-entry-card,.trq-request-card{border:0;border-bottom:1px solid var(--trq-border);border-radius:0;box-shadow:none;padding:14px 16px;}
  .trq-entry-card:last-child,.trq-request-card:last-child{border-bottom:0;}
  .trq-entry-card{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(300px,2fr) auto;align-items:center;gap:18px;}
  .trq-entry-card-head{margin:0;align-items:center;}
  .trq-entry-card-meta{margin:0;}
  .trq-entry-card-actions{margin:0;justify-content:flex-end;flex-wrap:nowrap;}
  /* Details (name, №, date range) needs the room; status pill + one button don't —
     was 1fr/1.6fr (status wider than details), backwards from what actually needs
     space and a real contributor to the date-line wrap (2026-08-28). */
  .trq-request-card{display:grid;grid-template-columns:minmax(240px,2fr) minmax(140px,1fr);align-items:start;gap:20px;padding:12px 20px;}
  .trq-request-note{margin:0;}
  .trq-request-actions{margin-top:14px;justify-content:flex-start;}
  .trq-request-actions .trq-btn{flex:0 0 auto;}
  .trq-request-col-status{display:flex;flex-direction:column;align-items:flex-start;gap:2px;}
  .trq-modal{max-width:460px;padding:24px;}.trq-modal-actions .trq-btn{flex:0 0 auto;min-width:120px;}
  .trq-topbar{justify-content:flex-start;gap:28px;}
  .trq-topbar-breadcrumb{display:block;}
  /* Was on .trq-topbar-user alone — before .trq-topbar-actions existed to wrap the
     lang switcher alongside it, that correctly pushed the one right-side element to
     the edge. Now it only pushed topbar-user to the right edge of .trq-topbar-actions
     itself, while .trq-topbar-actions (the real right-side group) stayed put right
     after the breadcrumb with just the 28px gap — logo/breadcrumb/switcher/avatar all
     clustered left, empty space on the right. Moving it to .trq-topbar-actions pushes
     the whole right-side group (switcher + avatar/name) flush to the edge, with the
     switcher-to-avatar gap staying the normal, non-flexing 10px from .trq-topbar-actions
     itself. */
  .trq-topbar-actions{margin-left:auto;}
}

/* ---------- Login: split hero layout (2026-08-28 mockup rebuild) ----------
   Mobile: the navy hero band now shows too (previously fully display:none, with
   only a plain logo floating in the white panel) but condensed to just the logo +
   headline — .trq-login-types/.trq-login-flow/.trq-login-hero-footer/the divider
   are desktop-only (min-width:860px), so the condensed band stays short enough that
   the form below still reaches its "Daxil ol" button with no scrolling on a normal
   phone viewport (verified at 390×844 and 360×740). */
.trq-login-hero{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  background:var(--trq-text);color:#fff;padding:28px 20px 22px;
}
.trq-login-hero .trq-logo-request{color:rgba(255,255,255,.68);}
.trq-login-hero-copy{display:flex;flex-direction:column;gap:10px;align-items:center;}
.trq-login-hero-title{font-size:1.5rem;font-weight:800;line-height:1.3;margin:0;text-wrap:balance;}
.trq-login-hero-text,.trq-login-types,.trq-login-flow,.trq-login-hero-divider,.trq-login-hero-footer{display:none;}
.trq-login-mobile-logo{display:none;}
.trq-login-form-wrap{width:100%;max-width:380px;flex:none;padding:0;gap:6px;}
.trq-login-title{margin:4px 0 2px;}
.trq-login-subtitle{margin:0 0 22px;}
.trq-login-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:28px 20px calc(28px + var(--trq-safe-bottom));}
@media (min-width:860px){
  /* Matches the base rule's own selector (.trq-app[data-view="login"]
     [data-screen="login"], specificity 0,3,0) rather than just ".trq-login-screen"
     (0,1,0) — the lower-specificity form was silently losing regardless of media
     query or source order, which is why desktop kept rendering the mobile stacked
     layout (hero band on top, form floating below) instead of a side-by-side
     split: .trq-login-hero got display:flex fine (nothing else contests that
     selector), but the screen container itself never actually left
     flex-direction:column. */
  .trq-app[data-view="login"] [data-screen="login"].trq-login-screen,
  .trq-app[data-view="verify"] [data-screen="verify"].trq-login-screen,
  .trq-app[data-view="email-code"] [data-screen="email-code"].trq-login-screen,
  .trq-app[data-view="set-password"] [data-screen="set-password"].trq-login-screen{flex-direction:row;}
  /* Logo pinned top, divider+footer pinned bottom, copy fills whatever's left
     between them — .trq-login-hero-copy{flex:1} claims all the leftover space
     itself and top-aligns its own children within it. */
  .trq-login-hero{
    display:flex;flex:1.35 1 0;flex-direction:column;align-items:stretch;text-align:left;
    background:var(--trq-text);color:#fff;padding:56px 60px;gap:0;
  }
  .trq-login-hero-copy{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:stretch;gap:14px;min-height:0;}
  .trq-login-hero-title{font-size:2.1rem;line-height:1.28;}
  .trq-login-hero-text{display:block;font-size:.95rem;max-width:440px;}
  .trq-login-eyebrow{display:block;font-size:.68rem;font-weight:700;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-bottom:12px;}
  .trq-login-types{display:block;margin-top:8px;}
  .trq-login-types-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;}
  .trq-login-type-item{display:flex;align-items:center;gap:9px;font-size:.85rem;font-weight:600;color:rgba(255,255,255,.92);padding:4px 0;}
  .trq-login-type-icon{flex:0 0 auto;width:18px;height:18px;color:var(--trq-star-gold);}
  .trq-login-type-icon svg{width:100%;height:100%;display:block;}
  .trq-login-type-subitem{font-size:.76rem;color:rgba(255,255,255,.6);padding:1px 0 1px 27px;position:relative;}
  .trq-login-type-subitem::before{content:"–";position:absolute;left:11px;color:rgba(255,255,255,.4);}
  .trq-login-flow{
    display:block;margin-top:20px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);
    border-radius:14px;padding:16px 18px 18px;
  }
  .trq-login-flow .trq-login-eyebrow{margin-bottom:12px;}
  .trq-login-flow-steps{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;}
  .trq-login-flow-step{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;flex:1;min-width:0;}
  .trq-login-flow-icon{width:26px;height:26px;color:var(--trq-star-gold);}
  .trq-login-flow-icon svg{width:100%;height:100%;display:block;}
  .trq-login-flow-title{font-size:.78rem;font-weight:700;color:#fff;}
  .trq-login-flow-sub{font-size:.68rem;color:rgba(255,255,255,.6);}
  .trq-login-flow-arrow{color:rgba(255,255,255,.35);font-size:1rem;padding-top:5px;flex:0 0 auto;}
  .trq-login-hero-divider{display:block;height:1px;background:rgba(255,255,255,.16);margin-top:24px;}
  .trq-login-hero-footer{display:block;font-size:.72rem;color:rgba(255,255,255,.45);margin:14px 0 0;}
  .trq-login-panel{flex:1 1 0;}
  .trq-login-mobile-logo{display:none;}
  .trq-login-form-wrap{text-align:left;align-items:flex-start;}
}

/* ---------- Login v2 (01.10.2026) — TamstoreRequest yeni giriş dizaynı: .trq-login-v2 / .trq-lx-*.
   ATU öz köhnə markup-ı (.trq-login-types / .trq-login-flow) ilə qalır — yuxarıdakı qaydalar ona görə toxunulmayıb.
   Telefon: hero yalnız loqo + başlıq + mətn (form sürüşdürmədən görünsün); kartlar, növlər, prosedur ≥860px. ---------- */
.trq-login-v2{--font-sans:'Noto Sans','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-family:var(--font-sans);}
.trq-lx-copy{display:flex;flex-direction:column;gap:8px;align-items:center;}
.trq-lx-title{font-size:1.45rem;font-weight:800;line-height:1.25;margin:0;text-wrap:balance;color:#fff;}
.trq-lx-text{margin:0;font-size:.88rem;line-height:1.55;color:rgba(255,255,255,.8);max-width:560px;text-wrap:pretty;}
.trq-lx-features,.trq-lx-types,.trq-lx-proc{display:none;}
.trq-lx-first{width:100%;margin-top:16px;padding:18px 20px;border-radius:14px;box-sizing:border-box;}
.trq-lx-first-title{display:block;font-weight:700;font-size:.95rem;color:var(--trq-text);margin-bottom:12px;}
.trq-lx-first-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.trq-lx-first-list li{display:flex;align-items:center;gap:12px;font-size:.9rem;color:var(--trq-text);line-height:1.35;}
.trq-lx-first-no{flex:0 0 24px;height:24px;border-radius:50%;background:rgba(29,143,111,.12);color:var(--trq-accent);font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;}
.trq-lx-phone{margin:4px 0 0;font-size:.82rem;color:var(--trq-text-dim);}
.trq-lx-mail{color:var(--trq-accent);font-weight:700;text-decoration:none;word-break:break-all;}
.trq-lx-mail:hover{text-decoration:underline;}
.trq-lx-dept{width:100%;margin-top:28px;padding-top:18px;border-top:1px solid var(--trq-border);font-weight:800;font-size:1.1rem;line-height:1.3;color:var(--trq-text);}
@media (min-width:860px){
  .trq-login-v2 .trq-lx-hero{flex:1.45 1 0;padding:52px 64px 48px;align-items:stretch;text-align:left;}
  .trq-lx-logo{align-self:center;margin-bottom:40px;}
  .trq-lx-copy{align-items:stretch;gap:0;}
  .trq-lx-title{font-size:2.75rem;line-height:1.15;letter-spacing:-.01em;margin-bottom:18px;}
  .trq-lx-text{font-size:1.02rem;max-width:660px;margin-bottom:30px;}
  .trq-lx-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:32px;}
  .trq-lx-feature{display:flex;flex-direction:column;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:12px;padding:20px 20px 22px;min-width:0;}
  .trq-lx-feature-icon{width:22px;height:22px;color:var(--trq-star-gold);margin-bottom:12px;}
  .trq-lx-feature-icon svg,.trq-lx-type-icon svg,.trq-lx-step-circle svg{display:block;}
  .trq-lx-feature-icon svg{width:100%;height:100%;}
  .trq-lx-feature-title{font-weight:700;font-size:1rem;color:#fff;}
  .trq-lx-feature-text{font-size:.84rem;line-height:1.5;color:rgba(255,255,255,.72);}
  .trq-lx-eyebrow{display:block;font-size:.72rem;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.72);margin-bottom:14px;}
  .trq-lx-types{display:block;margin-bottom:28px;}
  .trq-lx-types-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;}
  .trq-lx-type{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:10px;padding:10px 12px;min-width:0;}
  .trq-lx-type-icon{flex:0 0 34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;}
  .trq-lx-type-icon svg{width:19px;height:19px;}
  .trq-lx-type-icon.is-orange{background:rgba(245,166,35,.16);color:var(--trq-star-gold);}
  .trq-lx-type-icon.is-blue{background:rgba(74,168,234,.18);color:#4aa8ea;}
  .trq-lx-type-icon.is-green{background:rgba(62,207,149,.18);color:#3ecf95;}
  .trq-lx-type-body{display:flex;flex-direction:column;min-width:0;}
  .trq-lx-type-title{font-weight:700;font-size:.9rem;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .trq-lx-type-sub{font-size:.74rem;color:rgba(255,255,255,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .trq-lx-proc{display:block;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.13);border-radius:14px;padding:22px 30px 26px;}
  .trq-lx-proc-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;}
  .trq-lx-proc-head .trq-lx-eyebrow{margin:0;}
  .trq-lx-proc-badge{border:1px solid var(--trq-star-gold);color:var(--trq-star-gold);border-radius:999px;padding:3px 14px;font-size:.78rem;font-weight:700;white-space:nowrap;}
  .trq-lx-proc-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;}
  .trq-lx-proc-steps::before{content:"";position:absolute;top:31px;left:16.67%;right:16.67%;height:2px;background:var(--trq-star-gold);}
  .trq-lx-step{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px;position:relative;min-width:0;}
  .trq-lx-step-circle{width:64px;height:64px;border-radius:50%;border:2px solid var(--trq-star-gold);background:#243958;background:color-mix(in srgb,var(--trq-text) 93%,#fff);color:var(--trq-star-gold);display:flex;align-items:center;justify-content:center;margin-bottom:12px;box-sizing:border-box;}
  .trq-lx-step-circle svg{width:26px;height:26px;}
  .trq-lx-step-no{font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--trq-star-gold);}
  .trq-lx-step-title{font-weight:700;color:#fff;font-size:.98rem;}
  .trq-lx-step-sub{font-size:.8rem;color:rgba(255,255,255,.62);}
  .trq-lx-dept{margin-top:44px;padding-top:22px;font-size:1.3rem;}
}
@media (min-width:860px) and (max-width:1180px){
  .trq-login-v2 .trq-lx-hero{padding:44px 36px 40px;}
  .trq-lx-title{font-size:2.2rem;}
  .trq-lx-features{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trq-lx-types-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* 01.10 (düzəliş): sol hissə bir ekrana sığsın — ölçülər ekranın hündürlüyünə görə (clamp + vh); sağ panel geniş ekranda böyük. */
@media (min-width:860px){
  .trq-login-v2 .trq-lx-hero{padding:clamp(22px,3.6vh,52px) clamp(32px,4vw,72px) clamp(18px,3vh,44px);}
  .trq-lx-logo{margin-bottom:clamp(12px,2.6vh,40px);}
  .trq-lx-copy{flex:1;justify-content:center;min-height:0;}
  .trq-lx-title{font-size:clamp(1.8rem,1.6vw + 1.6vh,2.9rem);margin-bottom:clamp(8px,1.4vh,18px);}
  .trq-lx-text{font-size:clamp(.88rem,.45vw + .6vh,1.05rem);margin-bottom:clamp(14px,2.4vh,30px);}
  .trq-lx-features{gap:clamp(8px,1.2vh,14px);margin-bottom:clamp(14px,2.4vh,32px);}
  .trq-lx-feature{padding:clamp(12px,1.7vh,20px) 18px clamp(12px,1.9vh,22px);gap:4px;}
  .trq-lx-feature-icon{margin-bottom:clamp(4px,.9vh,12px);}
  .trq-lx-feature-text{font-size:clamp(.78rem,.3vw + .55vh,.86rem);}
  .trq-lx-eyebrow{margin-bottom:clamp(8px,1.3vh,14px);}
  .trq-lx-types{margin-bottom:clamp(12px,2.2vh,28px);}
  .trq-lx-types-grid{gap:clamp(8px,1vh,12px);}
  .trq-lx-type{padding:clamp(6px,.9vh,11px) 12px;}
  .trq-lx-proc{padding:clamp(12px,2vh,22px) clamp(18px,2.2vw,32px) clamp(12px,2.2vh,26px);}
  .trq-lx-proc-head{margin-bottom:clamp(8px,1.6vh,18px);}
  .trq-lx-step-circle{width:clamp(44px,5.6vh,64px);height:clamp(44px,5.6vh,64px);margin-bottom:clamp(6px,1.1vh,12px);}
  .trq-lx-step-circle svg{width:clamp(20px,2.4vh,26px);height:clamp(20px,2.4vh,26px);}
  .trq-lx-proc-steps::before{top:calc(clamp(44px,5.6vh,64px) / 2 - 1px);}
  .trq-login-v2 .trq-login-panel{padding:24px clamp(24px,3vw,56px);}
}
@media (min-width:1200px){
  .trq-login-v2 .trq-login-form-wrap{max-width:460px;}
  .trq-login-v2 .trq-auth-card{max-width:none;padding:26px 28px;gap:16px;}
  .trq-login-v2 .trq-login-title{font-size:2rem;margin:6px 0 4px;}
  .trq-login-v2 .trq-login-subtitle{font-size:1.02rem;margin-bottom:22px;}
  .trq-login-v2 .trq-field{font-size:.95rem;}
  .trq-login-v2 .trq-field input{font-size:1rem;}
  .trq-login-v2 .trq-checkbox-row{font-size:.92rem;}
  .trq-login-v2 .trq-login-submit{font-size:1.05rem;padding-top:13px;padding-bottom:13px;}
  .trq-login-v2 .trq-lx-first{padding:22px 26px;}
  .trq-login-v2 .trq-lx-first-title{font-size:1.02rem;}
  .trq-login-v2 .trq-lx-first-list li{font-size:.98rem;}
  .trq-login-v2 .trq-login-support,.trq-login-v2 .trq-lx-phone{font-size:.9rem;}
}

/* ---------- Login: language selector ---------- */
.trq-login-lang-row{display:flex;justify-content:flex-end;width:100%;margin-bottom:18px;}
.trq-lang-select{position:relative;}
.trq-lang-trigger{
  display:inline-flex;align-items:center;gap:6px;background:var(--trq-surface-2);
  border:1px solid var(--trq-border);border-radius:999px;padding:6px 12px;
  font-size:.78rem;font-weight:700;color:var(--trq-text);cursor:pointer;
}
.trq-lang-icon{width:14px;height:14px;color:var(--trq-text-dim);flex:0 0 auto;}
.trq-lang-icon svg{width:100%;height:100%;display:block;}
.trq-lang-eyebrow{color:var(--trq-text-dim);font-weight:600;}
.trq-lang-menu{
  position:absolute;top:calc(100% + 6px);right:0;background:var(--trq-surface);
  border:1px solid var(--trq-border);border-radius:10px;box-shadow:var(--trq-shadow);
  min-width:170px;padding:6px;z-index:20;
}
.trq-lang-option{display:block;width:100%;text-align:left;padding:8px 10px;border-radius:8px;border:none;background:none;font-size:.82rem;cursor:pointer;color:var(--trq-text);}
.trq-lang-option:hover{background:var(--trq-surface-2);}
.trq-lang-option.is-active{font-weight:700;color:var(--trq-accent);}

/* ---------- Login: forgot-password link, remember-me, support footer ---------- */
.trq-field-label-row{display:flex;justify-content:space-between;align-items:baseline;gap:10px;}
.trq-inline-link{color:var(--trq-accent);font-size:.78rem;font-weight:700;text-decoration:none;}
.trq-inline-link:hover{text-decoration:underline;}
.trq-checkbox-row{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--trq-text-dim);cursor:pointer;}
.trq-checkbox-row input{width:auto;margin:0;}
.trq-login-support{margin-top:18px;font-size:.82rem;color:var(--trq-text-dim);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.trq-login-support-icon{width:15px;height:15px;color:var(--trq-text-dim);flex:0 0 auto;}
.trq-login-support-icon svg{width:100%;height:100%;display:block;}
.trq-login-support a{color:var(--trq-accent);font-weight:700;text-decoration:none;}
.trq-login-support a:hover{text-decoration:underline;}

/* ---------- Login: error banner (validation failure + session-expired) ----------
   #trq-login-error's .textContent is set directly by JS (see tamstorerequest-app.js —
   onAuthenticated/session-expired/login-failure paths) — the icon below is generated
   content (::before), never a real child node, so it survives every textContent
   overwrite with no JS changes needed. */
.trq-login-screen .trq-error{
  display:flex;align-items:flex-start;gap:8px;background:#fdecec;border:1px solid #f6c8c8;
  color:#b42323;border-radius:10px;padding:10px 12px;font-size:.82rem;line-height:1.4;
}
.trq-login-screen .trq-error::before{
  content:"";flex:0 0 auto;width:16px;height:16px;margin-top:1px;
  background-color:#c0362f;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4.5 21 19.5H3Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4.5 21 19.5H3Z' stroke='black' stroke-width='1.8' stroke-linejoin='round'/%3E%3Cpath d='M12 10v4.2' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17' r='1' fill='black'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- Login: field leading icons (domain + password) ---------- */
.trq-field-icon-wrap{position:relative;}
.trq-field-icon-wrap input{width:100%;padding-left:42px;}
.trq-field-icon-glyph{
  position:absolute;top:50%;left:13px;transform:translateY(-50%);
  width:17px;height:17px;color:var(--trq-text-dim);pointer-events:none;
}
.trq-field-icon-glyph svg{width:100%;height:100%;display:block;}

/* ---------- Password visibility toggle (login) ----------
   The button's real textContent ("Göstər"/"Gizlət") is still set by JS on every
   click (see tamstorerequest-app.js) and still updates on language switch via the
   normal data-trq-i18n pass — untouched, so no JS changes were needed here. It's
   just visually replaced by an eye icon: text-indent pushes the real text off-screen
   (kept for screen readers / the accessible name) while the centered ::before icon
   flips between eye/eye-off purely from the password input's own [type], via the
   sibling combinator below. */
.trq-password-input{position:relative;}
.trq-password-input input{width:100%;padding-right:44px;}
.trq-password-toggle{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);background:none;border:none;
  color:var(--trq-text-dim);cursor:pointer;width:32px;height:32px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  text-indent:-9999px;overflow:hidden;white-space:nowrap;
}
.trq-password-toggle:hover{background:var(--trq-surface-2);color:var(--trq-accent);}
.trq-password-toggle::before{
  content:"";flex:0 0 auto;width:18px;height:18px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.8' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Ccircle cx='12' cy='12' r='2.8' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center/contain no-repeat;
}
#trq-login-password[type="text"] ~ .trq-password-toggle::before{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3.5 3.5l17 17' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M9.9 5.7A10.6 10.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a15.6 15.6 0 0 1-3 3.7M6.6 7.3C4 9 2.5 12 2.5 12s3.5 6.5 9.5 6.5c1.3 0 2.5-.3 3.6-.8' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M9.9 12a2.8 2.8 0 0 0 4 2.5' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3.5 3.5l17 17' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M9.9 5.7A10.6 10.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a15.6 15.6 0 0 1-3 3.7M6.6 7.3C4 9 2.5 12 2.5 12s3.5 6.5 9.5 6.5c1.3 0 2.5-.3 3.6-.8' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M9.9 12a2.8 2.8 0 0 0 4 2.5' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* Password field has both a leading lock icon and the trailing toggle above, so it
   needs more right padding than the plain .trq-field-icon-wrap default. */
.trq-password-input.trq-field-icon-wrap input{padding-left:42px;padding-right:44px;}

/* ---------- Login: primary button arrow ---------- */
.trq-login-submit{display:flex;align-items:center;justify-content:center;gap:8px;}
.trq-login-submit-arrow{width:18px;height:18px;flex:0 0 auto;}

/* ---------- Stat card row (Tələblərim summary) — real, derived counts only ---------- */
.trq-stat-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px;}
.trq-stat-card{position:relative;background:var(--trq-surface);border:1px solid var(--trq-border);border-radius:14px;padding:14px 28px 14px 16px;box-shadow:var(--trq-shadow);}
/* ⓘ tooltip icon — hover/focus shows it on desktop for free; .is-open (toggled by
   wireInfoTips on click) covers tap on mobile, dismissed by a single document-level
   click listener rather than one per tile. No sitewide tooltip component existed in
   this app to reuse (checked) — this is the one shared instance every balance tile
   uses, on every screen that renders leaveBalanceSummaryHtml. */
.trq-info-tip{position:absolute;top:10px;right:10px;width:18px;height:18px;padding:0;border:none;background:none;border-radius:50%;color:var(--trq-text-dim);font-size:13px;line-height:18px;text-align:center;cursor:pointer;}
.trq-info-tip:hover,.trq-info-tip:focus-visible{color:var(--trq-accent);}
.trq-info-tip::after{
  content:attr(data-tip);position:absolute;top:calc(100% + 6px);right:0;z-index:6;
  width:220px;max-width:60vw;padding:9px 11px;border-radius:10px;
  background:var(--trq-surface);border:1px solid var(--trq-border);box-shadow:var(--trq-shadow);
  color:var(--trq-text);font-size:.78rem;font-weight:400;line-height:1.4;text-transform:none;letter-spacing:normal;text-align:left;
  opacity:0;transform:translateY(-3px);pointer-events:none;transition:opacity 150ms ease,transform 150ms ease;
}
.trq-info-tip:hover::after,.trq-info-tip:focus-visible::after,.trq-info-tip.is-open::after{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){.trq-info-tip::after{transition:none;}}
.trq-stat-card-label{font:var(--text-eyebrow,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:var(--eyebrow-letter-spacing,.08em);color:var(--trq-text-dim);}
.trq-stat-card-value{font-size:22px;font-weight:700;color:var(--trq-text);margin-top:6px;}
.trq-stat-card-sub{font-size:.76rem;color:var(--trq-text-dim);margin-top:4px;}
/* The tile people actually act on ("Bu günə qalıq") — first in DOM order and
   visually heavier than the other three, so it reads as the primary number at a
   glance rather than one of four equal tiles. */
.trq-stat-card-suffix{font-size:.76rem;font-weight:400;color:var(--trq-text-dim);margin-left:2px;}
.trq-stat-card-primary{border-color:var(--trq-accent);background:#f1faf6;}
.trq-stat-card-primary .trq-stat-card-label{color:var(--trq-accent);}
.trq-stat-card-primary .trq-stat-card-value{font-size:28px;color:var(--trq-accent);}
@media (min-width:640px){.trq-stat-row{grid-template-columns:repeat(4,1fr);}}

/* Compact single-line pointer to the full balance breakdown on Profil — used on
   Tələblərim instead of the full 4-tile row (item 2, 2026-08-27: that screen
   should read as "requests", not repeat Profil's own balance block). */
.trq-balance-chip{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;margin-bottom:16px;border-radius:10px;background:var(--trq-surface);border:1px solid var(--trq-border);color:var(--trq-text-dim);font:var(--text-control,400 13px/1.4 var(--font-sans));text-decoration:none;}
.trq-balance-chip b{color:var(--trq-text);font-weight:700;}
.trq-balance-chip:hover{border-color:var(--trq-accent);color:var(--trq-accent);}

/* ---------- "Yeni tələb" type selector as cards + right-rail flow/qayda panel ---------- */
.trq-stage-toggle.trq-stage-toggle-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;
  background:none;border:none;padding:0;margin-bottom:16px;
}
.trq-stage-toggle-cards .trq-stage-btn{
  flex:none;text-align:left;background:var(--trq-surface);border:1px solid var(--trq-border);
  border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;
  font-size:.9rem;color:var(--trq-text);box-shadow:var(--trq-shadow);
}
.trq-stage-toggle-cards .trq-stage-btn .trq-type-card-desc{font-size:.76rem;font-weight:500;color:var(--trq-text-dim);}
.trq-stage-toggle-cards .trq-stage-btn.is-active{background:#f1faf6;border-color:var(--trq-accent);color:var(--trq-accent);}
.trq-stage-toggle-cards .trq-stage-btn.is-active .trq-type-card-desc{color:var(--trq-accent);opacity:.85;}

.trq-new-layout{display:flex;flex-direction:column;gap:20px;}
.trq-new-main{min-width:0;}
.trq-new-aside{display:flex;flex-direction:column;gap:16px;}
.trq-flow-card-title{font:var(--text-eyebrow,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:var(--eyebrow-letter-spacing,.08em);color:var(--trq-text-dim);margin:0 0 14px;}
.trq-flow-steps{display:flex;flex-direction:column;gap:14px;}
.trq-flow-step{display:flex;align-items:flex-start;gap:10px;}
.trq-flow-step-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--trq-border);margin-top:5px;}
.trq-flow-step:first-child .trq-flow-step-dot{background:var(--trq-accent);}
.trq-flow-step-label{font-weight:700;font-size:.85rem;}
.trq-flow-step-meta{font-size:.76rem;color:var(--trq-text-dim);margin-top:1px;}
@media (min-width:1100px){
  .trq-new-layout{flex-direction:row;align-items:flex-start;gap:26px;}
  .trq-new-main{flex:1;}
  .trq-new-main .trq-stage-toggle.trq-stage-toggle-cards{grid-template-columns:repeat(3,1fr);max-width:none;}
  .trq-new-aside{width:300px;flex:0 0 300px;}
}

/* ---------- HR təsdiqi (admin requests-oversight) ---------- */
.trq-req-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.trq-req-header-actions{display:flex;gap:8px;flex-wrap:wrap;}
.trq-stage-count{
  display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 5px;
  margin-left:7px;border-radius:999px;background:rgba(19,42,78,.08);color:inherit;font-size:.68rem;font-weight:800;
}
.trq-stage-btn.is-active .trq-stage-count{background:rgba(255,255,255,.28);}

.trq-req-layout{display:flex;flex-direction:column;gap:16px;align-items:stretch;}
.trq-req-list-col{display:flex;flex-direction:column;border:1px solid var(--trq-border);border-radius:14px;overflow:hidden;background:var(--trq-surface);width:100%;}
.trq-req-list-head{display:block;padding:10px 14px;border-bottom:1px solid var(--trq-border);background:var(--trq-surface-2);}
.trq-req-select-all{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;color:var(--trq-text-dim);cursor:pointer;}
#trq-req-list{max-height:70vh;overflow-y:auto;}
.trq-req-row{display:flex;gap:10px;padding:11px 16px;border-bottom:1px solid var(--trq-border);align-items:flex-start;cursor:pointer;}
.trq-req-row:last-child{border-bottom:0;}
.trq-req-row:hover{background:var(--trq-surface-2);}
.trq-req-row.is-selected{background:#f1faf6;box-shadow:inset 3px 0 0 var(--trq-accent);}
.trq-req-row-checkbox{margin-top:3px;flex:0 0 auto;width:16px;height:16px;}
.trq-req-row-body{flex:1;min-width:0;}
.trq-req-row-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;}
.trq-req-row-name{font-weight:700;font-size:.9rem;}
.trq-req-row-meta{color:var(--trq-text-dim);font-size:.78rem;margin-top:2px;}
.trq-req-row-sub{color:var(--trq-text-dim);font-size:.74rem;margin-top:4px;}
.trq-req-row-reject{color:var(--trq-danger);font-size:.74rem;margin-top:4px;}

.trq-req-detail{padding:22px;min-height:120px;}
.trq-req-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;}
.trq-req-detail-person{display:flex;gap:12px;align-items:center;min-width:0;}
.trq-req-detail-avatar{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:var(--trq-surface-2);color:var(--trq-text-dim);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.95rem;}
.trq-req-detail-name{font-weight:800;font-size:1.1rem;}
.trq-req-detail-fin{color:var(--trq-text-dim);font-size:.8rem;margin-top:2px;}

.trq-req-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:18px 0;}
.trq-req-metric{background:var(--trq-surface-2);border:1px solid var(--trq-border);border-radius:12px;padding:12px 14px;min-width:0;}
.trq-req-metric-label{font:var(--text-eyebrow,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:var(--eyebrow-letter-spacing,.08em);color:var(--trq-text-dim);}
.trq-req-metric-value{font-size:15px;font-weight:700;margin-top:4px;color:var(--trq-text);}

.trq-req-hr-note{margin-top:18px;}
.trq-req-hr-note textarea{width:100%;min-height:70px;}
.trq-req-decision-actions{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;}
.trq-req-checks{display:flex;flex-direction:column;gap:6px;margin-top:8px;}
.trq-req-check-item{font-size:.82rem;padding:8px 10px;border-radius:10px;background:var(--trq-surface-2);}
.trq-req-check-ok{color:var(--trq-success);}
.trq-req-check-warn{color:var(--trq-danger);background:#fde3e3;}

@media (min-width:640px){.trq-req-metrics{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1100px){
  .trq-req-layout{flex-direction:row;align-items:flex-start;gap:22px;}
  .trq-req-list-col{width:400px;flex:0 0 400px;}
  .trq-req-detail{flex:1;min-width:0;border-radius:16px;}
}

/* ---------- Settings: Təsdiq qaydası toggle panel ---------- */
.trq-settings-toggle-list{display:flex;flex-direction:column;}
.trq-settings-toggle-row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 0;border-bottom:1px solid var(--trq-border);}
.trq-settings-toggle-row:last-child{border-bottom:0;}
.trq-settings-toggle-label{font-weight:700;font-size:.9rem;}
.trq-settings-toggle-desc{color:var(--trq-text-dim);font-size:.78rem;margin-top:3px;max-width:520px;}
.trq-switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;}
.trq-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.trq-switch-track{position:absolute;inset:0;background:var(--trq-border);border-radius:999px;transition:background .15s ease;}
.trq-switch-track::before{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(19,42,78,.25);transition:transform .15s ease;}
.trq-switch input:checked + .trq-switch-track{background:var(--trq-accent);}
.trq-switch input:checked + .trq-switch-track::before{transform:translateX(18px);}
.trq-switch input:disabled + .trq-switch-track{opacity:.55;cursor:not-allowed;}
.trq-switch input:disabled{cursor:not-allowed;}

/* ================= Təsdiqlər rebuild (2026-08-29) =================
   Deliberately a self-contained palette/scale, not the shared --trq-* tokens —
   the spec calls for specific hex values distinct from this app's existing
   theme (e.g. --trq-warning is #d97706, not #c98a1e), and for blue/green to be
   reserved for exactly the roles listed below, never general status colour.
   Font: IBM Plex Sans is now self-hosted and applied module-wide on .trq-app
   (2026-08-30, see the @font-face block near the top of this file) — this
   block still deliberately doesn't set its own font-family, inheriting it from
   .trq-app like every other TamstoreRequest screen. */
.appr2-screen{
  color:var(--appr2-ink);
}
.appr2-titlerow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.appr2-title{font-size:21px;font-weight:600;color:var(--appr2-ink);margin:0;}
.appr2-context{font-size:13px;color:var(--appr2-secondary-text);margin:4px 0 0;}
.appr2-titlerow-actions{display:flex;gap:10px;flex:0 0 auto;}
/* Fallback values on every var(--appr2-*) below (2026-08-31) — these classes are
   also used inside .appr2-reason-popover, which openAnchoredCombo/
   apprOpenReasonPopover append directly to document.body, outside the
   .appr2-screen container these custom properties are scoped to. Without a
   fallback, --appr2-green resolved to nothing there and .appr2-btn-primary
   rendered white text on a transparent background — an invisible "Təsdiqlə"
   button on the manager's own reject-a-request popover, found while capturing a
   help-screen screenshot of exactly that flow. Same root cause already fixed
   once this session for the mail-gate confirm modal (see the hardcoded-colors
   comment on .la-confirm-warning) — same fix shape here, via var() fallbacks
   instead of hardcoding, since these classes still need to look right inside
   .appr2-screen too. */
.appr2-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:36px;padding:0 16px;border-radius:3px;font-size:13px;font-weight:600;cursor:pointer;border:1px solid var(--appr2-border, #dde2ea);background:#fff;color:var(--appr2-ink, #1d2430);}
.appr2-btn:disabled{opacity:.55;cursor:not-allowed;}
.appr2-btn-primary{background:var(--appr2-green, #17805a);border-color:var(--appr2-green, #17805a);color:#fff;}
.appr2-btn-primary:hover:not(:disabled){background:#14704e;}
.appr2-btn-danger-hover:hover:not(:disabled){color:var(--appr2-red, #a8352c);border-color:var(--appr2-red, #a8352c);}

.appr2-container{background:#fff;border:1px solid var(--appr2-border);border-radius:3px;}
.appr2-statusrow{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:0 0 12px;border-bottom:1px solid var(--appr2-row-border);margin-bottom:0;}
.appr2-tabs{display:flex;gap:22px;}
.appr2-tab{background:none;border:0;border-bottom:2px solid transparent;padding:0 0 12px;font-size:13.5px;font-weight:600;color:var(--appr2-secondary-text);cursor:pointer;display:flex;align-items:center;gap:7px;}
.appr2-tab.is-active{color:var(--appr2-ink);border-bottom-color:var(--appr2-green);}
.appr2-count-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:var(--appr2-head-bg);color:var(--appr2-head-text);font-size:11px;font-weight:700;}
.appr2-tab.is-active .appr2-count-badge{background:var(--appr2-green-bg);color:var(--appr2-green);}
.appr2-statusrow-actions{display:flex;gap:10px;align-items:center;}
.appr2-search{height:34px;padding:0 12px;border:1px solid var(--appr2-border);border-radius:3px;font-size:13px;width:220px;background:#fff;color:var(--appr2-ink);}
.appr2-sort{height:34px;padding:0 10px;border:1px solid var(--appr2-border);border-radius:3px;font-size:13px;background:#fff;color:var(--appr2-ink);}

.appr2-chiprow{display:flex;gap:8px;flex-wrap:wrap;padding:12px 0;}
.appr2-chip{height:30px;padding:0 14px;border-radius:999px;border:1px solid var(--appr2-border);background:#fff;color:var(--appr2-secondary-text);font-size:12.5px;font-weight:600;cursor:pointer;}
.appr2-chip.is-active{background:var(--appr2-green-bg);border-color:var(--appr2-green);color:var(--appr2-green);}

.appr2-grid{display:grid;grid-template-columns:42px 1fr 190px 128px 62px 132px 214px;width:100%;}
.appr2-grid-head{display:contents;}
.appr2-grid-head > div{height:34px;display:flex;align-items:center;background:var(--appr2-head-bg);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--appr2-head-text);padding:0 10px;}
.appr2-row{display:contents;}
.appr2-row > div{height:60px;display:flex;align-items:center;border-bottom:1px solid var(--appr2-row-border);padding:0 10px;min-width:0;font-size:13.5px;}
.appr2-row:hover > div{background:var(--appr2-head-bg);}
.appr2-row.is-selected > div{background:var(--appr2-green-bg);}
.appr2-cell-check{justify-content:center;}
.appr2-cell-employee{display:flex;align-items:center;gap:10px;min-width:0;}
.appr2-avatar{flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:var(--appr2-head-bg);color:var(--appr2-head-text);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.appr2-employee-text{min-width:0;display:flex;flex-direction:column;gap:1px;}
.appr2-employee-name{font-size:13.5px;font-weight:500;color:var(--appr2-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appr2-employee-sub{font-size:12px;color:var(--appr2-secondary-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.appr2-tabular{font-variant-numeric:tabular-nums;}
.appr2-cell-day{justify-content:flex-end;padding-right:22px;}
.appr2-cell-waiting.is-overdue{color:var(--appr2-amber);font-weight:600;}
.appr2-cell-decision{display:flex;gap:6px;}
.appr2-decision-btn{flex:1;height:32px;border-radius:3px;font-size:12.5px;font-weight:600;cursor:pointer;border:1px solid var(--appr2-border);background:#fff;color:var(--appr2-ink);display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-family:inherit;box-sizing:border-box;padding:0;}
.appr2-decision-btn:hover{text-decoration:none;}
.appr2-decision-btn.appr2-approve{background:var(--appr2-green);border-color:var(--appr2-green);color:#fff;}
.appr2-decision-btn.appr2-approve:hover:not(:disabled){background:#14704e;}
.appr2-decision-btn.appr2-reject:hover:not(:disabled){color:#fff;background:var(--appr2-red);border-color:var(--appr2-red);}
.appr2-decision-btn:disabled{opacity:.55;cursor:not-allowed;}
.appr2-status-dot{display:inline-flex;align-items:center;gap:7px;font-size:13px;}
.appr2-status-dot::before{content:'';width:6px;height:6px;border-radius:50%;flex:0 0 auto;background:currentColor;}
.appr2-status-pending{color:var(--appr2-amber);}
.appr2-status-approved{color:var(--appr2-approved);}
.appr2-status-rejected{color:var(--appr2-red);}

.appr2-warning-row{display:flex;align-items:center;gap:10px;background:var(--appr2-warn-bg);padding:10px 16px;font-size:12.5px;color:var(--appr2-ink);border-top:1px solid var(--appr2-row-border);}
.appr2-warning-dot{width:6px;height:6px;border-radius:50%;background:var(--appr2-amber);flex:0 0 auto;}
.appr2-footer{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;font-size:12.5px;color:var(--appr2-secondary-text);}
.appr2-footer a{color:var(--appr2-blue);text-decoration:none;font-weight:600;}
.appr2-footer a:hover{text-decoration:underline;}
.appr2-empty{padding:40px 16px;text-align:center;font-size:13px;color:var(--appr2-secondary-text);}
.appr2-empty a{color:var(--appr2-blue);text-decoration:none;font-weight:600;}

/* Reject-reason popover (fixed-position, anchored — same technique as
   openAnchoredCombo/openRowActionsMenu, not a full modal). */
.appr2-reason-popover{background:#fff;border:1px solid var(--appr2-border, #dde2ea);border-radius:6px;box-shadow:0 10px 28px rgba(19,42,78,.16),0 2px 8px rgba(19,42,78,.08);padding:14px;width:280px;}
.appr2-reason-popover textarea{width:100%;box-sizing:border-box;min-height:70px;border:1px solid var(--appr2-border);border-radius:4px;padding:8px;font-size:13px;font-family:inherit;resize:vertical;margin-bottom:10px;}
.appr2-reason-popover-actions{display:flex;justify-content:flex-end;gap:8px;}
.appr2-reason-error{color:var(--appr2-red, #a8352c);font-size:12px;margin:0 0 8px;}

/* Approve toast — no functional "Geri al" (see chat report: no API exists to
   reverse a manager approval), so this is a plain auto-dismissing confirmation
   rather than a fake undo control. */
.appr2-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--appr2-ink);color:#fff;padding:12px 18px;border-radius:6px;font-size:13px;display:flex;align-items:center;gap:14px;z-index:60;box-shadow:0 10px 28px rgba(19,42,78,.25);}
.appr2-toast button{background:none;border:0;color:#fff;opacity:.7;font-size:13px;cursor:pointer;padding:0;}
.appr2-toast button:hover{opacity:1;}
.appr2-toast-undo{font-weight:700;text-decoration:underline;opacity:1!important;}
.appr2-toast-undo:disabled{opacity:.5!important;cursor:not-allowed;}

@media (max-width:900px){
  .appr2-grid{grid-template-columns:36px 1fr 96px 62px;}
  .appr2-grid-head > div:nth-child(4), .appr2-grid-head > div:nth-child(6),
  .appr2-row > div:nth-child(4), .appr2-row > div:nth-child(6){display:none;}
}

/* ================= Məzuniyyət analizi (2026-08-30) =================
   Reuses the .appr2-* tokens/typography for visual consistency with Təsdiqlər
   (same font, same restrained palette, no decorative cards) — plain sortable
   tables throughout (including "monthly volume"/"per store", deliberately not
   charted, to match Təsdiqlər's own all-table restraint) rather than a
   dashboard-style layout. */
.la-titlerow{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.la-title{font-size:21px;font-weight:600;color:var(--appr2-ink);margin:0;}
.la-context{font-size:13px;color:var(--appr2-secondary-text);margin:4px 0 0;}
.la-titlerow-actions{display:flex;gap:10px;flex:0 0 auto;}
.la-container{background:#fff;border:1px solid var(--appr2-border);border-radius:3px;}
.la-tabs{display:flex;gap:22px;padding:0 16px;border-bottom:1px solid var(--appr2-row-border);}
.la-tab{background:none;border:0;border-bottom:2px solid transparent;padding:12px 0;font-size:13.5px;font-weight:600;color:var(--appr2-secondary-text);cursor:pointer;}
.la-tab.is-active{color:var(--appr2-ink);border-bottom-color:var(--appr2-green);}
.la-filters{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;padding:14px 16px;border-bottom:1px solid var(--appr2-row-border);}
.la-filter-field{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--appr2-head-text);}
.la-filter-field select,.la-filter-field input{height:32px;padding:0 10px;border:1px solid var(--appr2-border);border-radius:3px;font-size:13px;background:#fff;color:var(--appr2-ink);font-weight:400;text-transform:none;letter-spacing:0;}
.la-filter-field input[type="number"]{width:84px;}
.la-summary-bar{display:flex;gap:24px;padding:12px 16px;font-size:13px;color:var(--appr2-secondary-text);border-bottom:1px solid var(--appr2-row-border);flex-wrap:wrap;}
.la-summary-bar b{color:var(--appr2-ink);font-variant-numeric:tabular-nums;font-weight:600;}
.la-breadcrumb{display:flex;align-items:center;gap:6px;padding:10px 16px;font-size:12.5px;color:var(--appr2-secondary-text);flex-wrap:wrap;}
.la-breadcrumb button{background:none;border:0;color:var(--appr2-blue);cursor:pointer;font-size:12.5px;padding:0;font-weight:600;}
.la-breadcrumb button:hover{text-decoration:underline;}
.la-table-wrap{overflow-x:auto;}
table.la-table{width:100%;border-collapse:collapse;}
table.la-table th{height:34px;background:var(--appr2-head-bg);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--appr2-head-text);padding:6px 10px;text-align:left;cursor:pointer;white-space:normal;line-height:1.25;user-select:none;}
table.la-table th.la-num{text-align:right;}
table.la-table th.la-sorted-desc::after{content:' ▾';}
table.la-table th.la-sorted-asc::after{content:' ▴';}
table.la-table td{height:46px;padding:0 10px;border-bottom:1px solid var(--appr2-row-border);font-size:13.5px;color:var(--appr2-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px;}
table.la-table tbody tr.la-clickable{cursor:pointer;}
table.la-table tbody tr.la-clickable:hover td{background:var(--appr2-head-bg);}
table.la-table td.la-num{font-variant-numeric:tabular-nums;text-align:right;}
table.la-table td.la-over-threshold{color:var(--appr2-amber);font-weight:600;}
table.la-table td.la-check{width:34px;max-width:34px;overflow:visible;}
.la-empty{padding:40px 16px;text-align:center;font-size:13px;color:var(--appr2-secondary-text);}
.la-modal .trq-modal{max-width:860px;width:92vw;max-height:86vh;overflow-y:auto;}
.la-plan-group{border:1px solid var(--appr2-row-border);border-radius:4px;padding:12px 14px;margin-bottom:10px;}
.la-plan-group-head{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;font-weight:600;color:var(--appr2-ink);margin-bottom:4px;}
.la-plan-group-meta{font-size:12px;color:var(--appr2-secondary-text);margin-bottom:8px;}
.la-plan-group-employees{font-size:12.5px;color:var(--appr2-ink);}
.la-plan-skip-row{font-size:13px;color:var(--appr2-ink);padding:6px 0;border-bottom:1px solid var(--appr2-row-border);}
.la-plan-warn{background:var(--appr2-warn-bg);border:1px solid #f2e6c4;border-radius:4px;padding:10px 12px;font-size:12.5px;color:var(--appr2-ink);margin-bottom:12px;}
.la-action-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;background:var(--appr2-green-bg);border-bottom:1px solid var(--appr2-row-border);font-size:13px;color:var(--appr2-ink);}
.la-select-all-count{font-size:11px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--appr2-secondary-text);white-space:nowrap;}
.la-level-row{border-top:1px solid var(--appr2-row-border);}
/* Hardcoded (not var(--appr2-*)) deliberately — this modal is appended to
   document.body, outside the .appr2-screen container those custom properties
   are scoped to, so they'd resolve to nothing here. */
.la-confirm-warning{background:#fdf3d9;border:2px solid #c98a1e;border-radius:4px;padding:14px 16px;margin-top:12px;font-size:13.5px;font-weight:600;color:#6b4a0a;line-height:1.5;}
.trq-btn-armed{background:#c98a1e!important;border-color:#c98a1e!important;color:#fff!important;}
.trq-btn-armed:hover:not(:disabled){background:#b17716!important;}
.la-send-progress{display:flex;align-items:center;gap:10px;font-size:13px;color:#57647c;margin-top:10px;}
.la-send-progress .trq-spinner{width:16px;height:16px;border-width:2px;}

/* Mail gate mode banner (Mail jurnalı) — visually distinct per mode so the running
   mode is unmissable, not just readable if you go looking. */
.trq-mail-mode-banner{border-radius:6px;padding:10px 14px;margin:10px 0 4px;font-size:13.5px;line-height:1.5;}
.trq-mail-mode-log{background:var(--trq-surface-2);color:var(--trq-text-dim);}
.trq-mail-mode-allowlist{background:#e0ecff;color:var(--trq-brand);}
.trq-mail-mode-send{background:#fde3e3;color:var(--trq-danger);font-weight:600;}

/* Məlumat (in-app help, 2026-08-31) — flat divided-list language matching the
   Əməliyyat açarları switches above, deliberately not the bordered/shadowed
   .trq-card grid used elsewhere: this is reference text to scan quickly, not a
   dashboard of discrete controls. */
.trq-help-search-wrap{margin:14px 0 18px;max-width:420px;}
.trq-help-search{width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--trq-border);border-radius:8px;font-size:.9rem;background:var(--trq-surface);color:var(--trq-text);}
.trq-help-search:focus{outline:2px solid var(--trq-brand);outline-offset:1px;}
.trq-help-group{margin-bottom:22px;}
.trq-help-group-title{font:var(--text-eyebrow,700 11px/1.3 var(--font-sans));text-transform:uppercase;letter-spacing:.08em;color:var(--trq-text-dim);margin-bottom:6px;}
.trq-help-item{border-bottom:1px solid var(--trq-border);padding:2px 0;}
.trq-help-item:last-child{border-bottom:0;}
.trq-help-summary{cursor:pointer;list-style:none;padding:12px 28px 12px 0;font-weight:600;font-size:.9rem;color:var(--trq-text);position:relative;}
.trq-help-summary::-webkit-details-marker{display:none;}
.trq-help-summary::after{content:'+';position:absolute;right:4px;top:10px;font-size:1.1rem;line-height:1;color:var(--trq-text-dim);}
.trq-help-item[open]>.trq-help-summary::after{content:'−';}
.trq-help-body{padding:0 0 16px;font-size:.85rem;color:var(--trq-text-dim);line-height:1.6;max-width:680px;}
.trq-help-body p{margin:0 0 10px;}
.trq-help-body p:last-child{margin-bottom:0;}
.trq-help-body ul{margin:0 0 10px;padding-left:20px;}
.trq-help-body li{margin-bottom:4px;}
.trq-help-body b{color:var(--trq-text);}
.trq-help-body img{display:block;max-width:100%;border:1px solid var(--trq-border);border-radius:8px;margin-top:10px;}

/* Manager-picker dialog (2026-09-01) — body-appended like every .trq-modal-
   backdrop dialog, so only --trq-* (root-scoped) tokens or literals below, per
   the scoped-CSS-variable audit this same day. */
.trq-mgr-picker-modal{max-width:560px;}
.trq-mgr-picker-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;}
.trq-mgr-picker-close{background:none;border:0;font-size:1.1rem;line-height:1;color:var(--trq-text-dim);cursor:pointer;padding:2px 4px;flex:0 0 auto;}
.trq-mgr-picker-close:hover{color:var(--trq-text);}
.trq-mgr-picker-close:disabled{opacity:.5;cursor:not-allowed;}
.trq-mgr-picker-search{width:100%;box-sizing:border-box;padding:10px 14px;border:1px solid var(--trq-border);border-radius:8px;font-size:.9rem;background:var(--trq-surface);color:var(--trq-text);margin-bottom:10px;}
.trq-mgr-picker-search:focus{outline:2px solid var(--trq-brand);outline-offset:1px;}
.trq-mgr-picker-search:disabled{opacity:.6;}
.trq-mgr-picker-list{max-height:520px;overflow-y:auto;border:1px solid var(--trq-border);border-radius:8px;}
.trq-mgr-picker-list.trq-mgr-picker-busy{opacity:.6;pointer-events:none;}
.trq-mgr-picker-row{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;border-bottom:1px solid var(--trq-border);}
.trq-mgr-picker-row:last-child{border-bottom:0;}
.trq-mgr-picker-row:hover,.trq-mgr-picker-row.is-focused{background:var(--trq-surface-2);}
.trq-mgr-picker-row.is-current{background:#eef4f1;}
.trq-mgr-picker-row-main{flex:1;min-width:0;}
.trq-mgr-picker-row-name{font-weight:600;font-size:.88rem;color:var(--trq-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trq-mgr-picker-row-secondary{font-size:.76rem;color:var(--trq-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.trq-mgr-picker-check{color:var(--trq-accent);font-weight:700;flex:0 0 auto;}
.trq-mgr-picker-divider{border-top:1px solid var(--trq-border);margin:2px 0;}
.trq-mgr-picker-empty{padding:16px;text-align:center;font-size:.85rem;color:var(--trq-text-dim);}
.trq-mgr-picker-error{margin-top:10px;}

/* Departure-notice CC chip list (2026-09-01) — --trq-* (root-scoped) tokens
   only; this dialog is a body-appended .trq-modal-backdrop like every other
   one here, per the scoped-CSS-variable audit. */
.trq-chip-list{display:flex;flex-wrap:wrap;gap:6px;min-height:22px;}
.trq-chip{display:inline-flex;align-items:center;gap:6px;background:var(--trq-surface-2);border:1px solid var(--trq-border);border-radius:999px;padding:4px 6px 4px 12px;font-size:.82rem;color:var(--trq-text);}
.trq-chip-remove{background:none;border:0;color:var(--trq-text-dim);cursor:pointer;font-size:.8rem;line-height:1;padding:2px 4px;border-radius:50%;}
.trq-chip-remove:hover{background:var(--trq-border);color:var(--trq-text);}

/* Məzuniyyət analizi selection bar (2026-09-01) — always-visible running count
   plus an expandable list of who's selected, so a nine-person cross-search
   selection is legible and each person removable without hunting for their
   row again. --appr2-*/--trq-* only, in-tree under .appr2-screen. */
.la-selection-bar{padding:10px 16px;border-bottom:1px solid var(--appr2-row-border);}
.la-selection-toggle{background:none;border:0;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--appr2-ink);cursor:pointer;padding:2px 0;}
.la-selection-caret{font-size:11px;color:var(--appr2-secondary-text);transition:transform .15s;}
.la-selection-toggle.is-open .la-selection-caret{transform:rotate(180deg);}
.la-selection-actions{display:inline-flex;align-items:center;gap:10px;margin-left:16px;}
/* A visible gap between "Xatırlatma göndər" and "Məzuniyyət məlumatı" — two
   very differently-scaled actions that used to sit as anonymous adjacent
   buttons (2026-09-01: made the wrong-button-by-accident risk worse once
   select-all could reach the whole company). */
.la-selection-actions-divider{width:1px;height:22px;background:var(--appr2-row-border);flex:0 0 auto;}
.la-selection-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
.la-rowmenu-col{width:36px;text-align:center;}
/* Caution variant (2026-09-01) — amber outline, not the primary green fill,
   for an action that is far less routine and far more consequential per
   click than the button next to it (see appr2-amber, already the "needs
   attention" color everywhere else on this screen). */
.appr2-btn-caution{border-color:var(--appr2-amber, #c98a1e);color:var(--appr2-amber, #c98a1e);background:#fff;}
.appr2-btn-caution:hover:not(:disabled){background:#fdf6ea;}

/* Multi-employee departure notice rows (2026-09-01) — body-appended modal,
   --trq-* (root-scoped) tokens only. */
.trq-dep-multi-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--trq-border);}
.trq-dep-multi-row:last-child{border-bottom:0;}
.trq-dep-multi-row-main{flex:1;min-width:0;}
.trq-dep-multi-row-name{font-weight:600;font-size:.88rem;color:var(--trq-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.trq-dep-multi-row-secondary{font-size:.76rem;color:var(--trq-text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;}
.trq-dep-multi-exit{flex:0 0 auto;width:150px;margin:0;}
.trq-dep-multi-total{flex:0 0 auto;width:64px;text-align:right;font-weight:700;font-size:.88rem;color:var(--trq-text);}
.trq-dep-multi-remove{flex:0 0 auto;}

/* ---------- Davamiyyət pozuntuları (2026-09-03) ----------
   Admin review screen for attendance-violation notices. Layout only: cards,
   tables, buttons, pills, modals and spinners all reuse the classes above
   rather than restating them. */

/* .trq-card itself has no padding of its own (many other screens position
   their own inline padding on top of it) — scoped here rather than on
   .trq-card globally, which would touch every other admin screen that reuses
   it. Comfortable horizontal room on both sides (2026-09-03: the table used
   to run right up against the card's own border). */
.trqav-card { padding: 20px 24px; }

.trqav-toolbar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.trqav-spacer { flex: 1 1 auto; }
.trqav-date { min-width: 150px; }
.trqav-search { min-width: 240px; flex: 0 1 300px; }
.trqav-domain-filter { min-width: 170px; }

.trqav-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; }
/* The two figures an admin acts on. Colour is a nudge, never the only signal —
   every count is also labelled in text. */
.trqav-stat-ok { border-left: 3px solid #1f7a45; }
.trqav-stat-warn { border-left: 3px solid #b4741a; }

.trqav-breakdown { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; font-size: 12.5px; }
.trqav-grace { margin: 4px 0 22px; }

.trqav-actionbar { display: flex; align-items: center; gap: 14px; margin: 12px 0 10px; }
.trqav-selectall { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.trqav-actionbar .trq-btn { margin-left: auto; }

/* Fixed proportions (2026-09-03). table-layout:fixed is what makes the colgroup
   widths authoritative — without it the browser re-negotiates every column from
   content, which is how the full org path used to squeeze Tarix and İş qrafiki
   into each other. Every cell truncates instead of pushing its neighbours. */
.trqav-table { table-layout: fixed; width: 100%; }
.trqav-col-check { width: 34px; }
.trqav-col-name { width: 18%; }
/* Fixed px, not % — FİN is a short, fixed-length code (2026-09-03: it was
   truncating with an ellipsis even though it never needs to; a % column
   shrinks with the table, a fixed one for a fixed-length value never has to). */
.trqav-col-fin { width: 92px; }
.trqav-col-structure { width: 15%; }
.trqav-col-date { width: 8%; }
.trqav-col-schedule { width: 9%; }
.trqav-col-time { width: 6%; }
.trqav-col-violation { width: 13%; }
.trqav-col-status { width: 11%; }
.trqav-col-actions { width: 168px; }
.trqav-table th, .trqav-table td { vertical-align: top; padding-top: 9px; padding-bottom: 9px; }
/* "Menecerə görə" tab (2026-09-03) — no rowspan'd groups here, every row is
   one manager on one line, so cells sit centered rather than top-anchored. */
.trqav-manager-table th, .trqav-manager-table td { vertical-align: middle; }
.trqav-mgr-col-name { width: 30%; }
.trqav-mgr-col-num { width: 10%; }
.trqav-mgr-col-address { width: 28%; }
.trqav-mgr-col-reachable { width: 9%; }
/* Right-aligned, tabular-nums so a column of counts lines up as figures
   rather than ragged text — İşçi sayı / Pozuntu sayı. */
.trqav-num { text-align: right; font-variant-numeric: tabular-nums; }
th.trqav-num { text-align: right; }
/* Name + "Mağaza" pill on one flex baseline (2026-09-03: align-items:center
   is what fixes the pill sitting visibly higher/lower than the name text —
   an inline pill's own line-height/padding otherwise fights the surrounding
   text's baseline). */
.trqav-manager-name { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; }
.trqav-manager-name .trqav-ellipsis { min-width: 0; }
/* One button, not the Fərdi tab's two — right-aligned so it sits flush
   against the table's edge instead of drifting with the button's own width. */
.trqav-manager-table .trqav-actions { justify-content: flex-end; }

/* Category badges (2026-09-03) — one colour per kind of unit, same palette
   family as the violation-kind badges above. */
.trqav-cat-badge { font-size: 10.5px; padding: 2px 8px; }
.trqav-cat-magaza { background: #e0ecff; color: var(--trq-brand); }
.trqav-cat-ofis { background: #efe6fb; color: #6b3fa0; }
.trqav-cat-seyyar { background: #fdf0dd; color: #8a5a10; }
.trqav-cat-istehsal-anbar { background: #dcf5e6; color: #1f7a45; }
.trqav-cat-unresolved { background: #fbe4e5; color: #a4232c; }
/* Structure line under the manager name — same shortened/full-on-hover
   treatment as an individual row's own structure cell. */
.trqav-mgr-structure { display: block; font-size: 11.5px; margin-top: 2px; }
/* This screen's rows now always carry a second (structure) line, so the
   fixed compact height needs the room — still uniform across every row,
   just at a taller baseline than a single-line row would need. */
.trqav-manager-table.trqav-table-compact tbody tr { height: 52px; }

.trqav-unassigned-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 24px 0 10px; }
.trqav-unassigned-table .trqav-mgr-col-name { width: 60%; }

/* Expand a manager row to see its employees (2026-09-03) — previously only
   visible by opening the send dialog. */
.trqav-mgr-toggle {
  flex: 0 0 auto; width: 18px; height: 18px; padding: 0; border: none; background: none;
  color: var(--trq-text-dim); font-size: 11px; line-height: 1; cursor: pointer;
}
.trqav-mgr-toggle:hover { color: var(--trq-text); }
.trqav-mgr-detail-row td { padding: 0 0 14px; background: var(--trq-surface-2); }
.trqav-mgr-detail { margin: 10px 14px 0; border: 1px solid var(--trq-border); border-radius: 10px; overflow: hidden; }
.trqav-subtable { table-layout: auto; width: 100%; }
.trqav-subtable th, .trqav-subtable td { padding: 6px 12px; font-size: 12.5px; }
.trqav-subtable thead th { background: var(--trq-surface); font-weight: 600; color: var(--trq-text-dim); }
.trqav-subtable tbody tr:not(:last-child) td { border-bottom: 1px solid var(--trq-border); }
/* Tightened 2026-09-03 (was 9px/56px) — this is a scanning screen, and the
   status cell collapsing to one line plus employee-grouping (name/position/
   FİN/structure via rowspan instead of repeating per date) means a row no
   longer needs room for stacked reasons or repeated identity cells. */
.trqav-table-compact th, .trqav-table-compact td { padding-top: 5px; padding-bottom: 5px; }
.trqav-table-compact tbody tr { height: 34px; }
.trqav-ellipsis, .trqav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trqav-fin { white-space: nowrap; }
.trqav-nowrap { white-space: nowrap; }
.trqav-name { font-weight: 600; }
.trqav-actions { display: flex; gap: 6px; align-items: flex-start; white-space: nowrap; }
/* Unsendable rows stay fully legible — they are information, not noise. An
   unreachable employee is shown with the reason rather than dropped, so this is
   a tint, not a fade-out. */
.trqav-row-blocked { background: #fbfbfc; }
/* The 2nd..Nth date row of an employee group (rowspan'd lead cells absent) —
   a hair lighter so the eye still reads where one employee's block ends and
   the next begins, without a heavy rule on every single date row. */
.trqav-group-row { background: #fdfdfe; }

.trqav-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.trqav-badge-late { background: #fdf0dd; color: #8a5a10; }
.trqav-badge-early-leave { background: #e6f0fb; color: #1f4e79; }
.trqav-badge-absent { background: #fbe4e5; color: #a4232c; }
.trqav-badge-short-presence { background: #fdf0dd; color: #8a5a10; }
/* Measured, but excused by an approved hourly permission. Struck through so the
   figure reads as real-but-not-the-reason. */
.trqav-badge-covered { background: #eef0f3; color: #6b7280; text-decoration: line-through; }

.trqav-notes { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 5px; }
.trqav-blocker { color: #a4232c; font-size: 11.5px; font-weight: 600; }
.trqav-warning { color: #8a5a10; font-size: 11.5px; }
.trqav-ok { color: #1f7a45; font-size: 12px; font-weight: 600; }

.trqav-status { font-weight: 600; font-size: 12px; }
.trqav-status-sent { color: #1f7a45; }
.trqav-status-failed, .trqav-status-bounced { color: #a4232c; }
.trqav-status-suppressed { color: #6b7280; }
.trqav-status-sending { color: #8a5a10; }
.trqav-errtext { max-width: 260px; }

/* ---- send dialog ---- */
.trqav-modal { max-width: 720px; width: 92vw; }
.trqav-dialog-note { margin: 0 0 12px; line-height: 1.5; }
.trqav-dialog-toggle { margin-bottom: 10px; }
.trqav-bucket { margin-top: 10px; }
.trqav-chip { margin: 2px 4px 2px 0; }
.trqav-chip a { margin-left: 6px; color: inherit; text-decoration: none; }
.trqav-addrow { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.trqav-addrow select, .trqav-addrow input { padding: 8px; border-radius: 8px; border: 1px solid var(--trq-border); }
.trqav-addrow input { flex: 1; min-width: 180px; }
.trqav-resolved { margin-top: 16px; border-top: 1px solid var(--trq-border); padding-top: 12px; }
.trqav-resolved-count { margin: 4px 0 8px; font-size: 13px; }
.trqav-resolved-list { max-height: 200px; overflow-y: auto; }
.trqav-preview-meta { display: grid; gap: 4px; margin-bottom: 12px; font-size: 12.5px; }
.trqav-preview-frame { width: 100%; height: 440px; border: 1px solid #e3e7ec; border-radius: 6px; background: #fff; }

@media (max-width: 900px) {
  .trqav-modal { width: 96vw; }
  .trqav-preview-frame { height: 320px; }
}

/* ---- TamstorePay import progress ----
   A month of HikCentral events takes long enough that a static spinner reads as
   a frozen screen. The bar is driven by real numbers — uploaded bytes first,
   then the job row's own phase and percent — never by a timer. */
.tsp-import-progress { margin-top: 14px; padding: 12px; border: 1px solid var(--trq-border); border-radius: 10px; background: var(--trq-surface-2); }
.tsp-import-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13.5px; font-weight: 600; color: var(--trq-text); }
.tsp-import-bar { margin: 8px 0 6px; height: 8px; border-radius: 999px; background: var(--trq-border); overflow: hidden; }
.tsp-import-bar-fill { height: 100%; width: 2%; border-radius: 999px; background: var(--trq-accent); transition: width .25s ease; }
.tsp-import-progress .trq-subtle { margin: 2px 0 0; font-size: 12.5px; }

@media (prefers-reduced-motion: reduce) {
  .tsp-import-bar-fill { transition: none; }
}

/* ================= Məzuniyyət — balans reyestri (2026-09-22) =================
   Deliberately built on the .la-* tokens above rather than a palette of its own:
   the section is a peer of Məzuniyyət analizi and Təsdiqlər, not a second
   product, so it inherits their tables, filters and typography and only adds
   what genuinely has no equivalent there — the journal's derived rows, the
   rule editor, the import plan and the balance headline. */
.lr-screen .la-filters{align-items:flex-end;}
/* Five sub-tabs do not fit 390px; the strip scrolls rather than hiding the
   last one, which on a phone was "Qaydalar" — the screen a rule change lives on. */
.lr-screen .la-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.lr-screen .la-tabs::-webkit-scrollbar{display:none;}
.lr-screen .la-tab{white-space:nowrap;flex:0 0 auto;}
.lr-warnbar{background:var(--appr2-warn-bg);border:1px solid #f2e6c4;border-radius:3px;padding:10px 14px;font-size:12.8px;color:var(--appr2-ink);margin-bottom:12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.lr-warnbar-link{background:none;border:0;color:var(--appr2-blue);font-weight:600;font-size:12.8px;cursor:pointer;padding:0;}
.lr-warnbar-link:hover{text-decoration:underline;}
.lr-note{font-size:12.5px;color:var(--appr2-secondary-text);max-width:760px;line-height:1.45;}

.lr-quickbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--appr2-row-border);}
.lr-quickbar-spacer{flex:1;}
.lr-quick{background:#fff;border:1px solid var(--appr2-border);border-radius:14px;padding:5px 12px;font-size:12.5px;color:var(--appr2-ink);cursor:pointer;display:inline-flex;gap:6px;align-items:center;}
.lr-quick span{font-variant-numeric:tabular-nums;color:var(--appr2-secondary-text);font-weight:600;}
.lr-quick.is-active{background:var(--appr2-green-bg);border-color:var(--appr2-green);font-weight:600;}
.lr-quick.is-active span{color:var(--appr2-ink);}

.lr-pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;font-size:12.5px;color:var(--appr2-secondary-text);border-top:1px solid var(--appr2-row-border);flex-wrap:wrap;}
.lr-pager-actions{display:flex;gap:6px;align-items:center;}
.lr-pager-actions select{height:28px;border:1px solid var(--appr2-border);border-radius:3px;font-size:12.5px;}

.lr-negative{color:#c0392b;}
.lr-chip-muted{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:9px;background:#eee;color:#666;vertical-align:middle;}
/* 01.10: məzuniyyət haqqının üsulu — "12 ay" nişanı; seçim sütunu. */
.lr-chip-info{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:9px;background:#e3edfb;color:#1b4b8f;vertical-align:middle;font-weight:600;}
.lr-pick-col{width:28px;text-align:center;}
.lr-chip-warn{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:9px;background:var(--appr2-warn-bg);color:#8a6d1a;vertical-align:middle;cursor:help;}
.lr-chip-current{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:9px;background:var(--appr2-green-bg);color:#2c6b3f;vertical-align:middle;}
.lr-chip-new{display:inline-block;font-size:10px;padding:1px 6px;border-radius:9px;background:#e8f4ea;color:#2c6b3f;vertical-align:middle;font-weight:600;}
/* Hesablamanın açılışı, sətrin özündə — kvota varsa bir sətir, yoxdursa cəm. */
.lr-annual-note{display:block;font-size:10px;font-weight:400;color:var(--appr2-secondary-text);line-height:1.3;margin-top:1px;white-space:normal;}
/* Açılış sətri sütunun öz eni ilə oxunmalıdır — yoxsa "Veteran kvotası — 46
   gün (əlavələr cəmlənmir)" dörd sətrə qırılır və sütun rəqəmdən dar qalır. */
.la-table th.lr-annual-cell, .la-table td.lr-annual-cell{min-width:150px;}
table.la-table tbody tr.lr-row-future td{background:#fbfaff;color:#555;}

.lr-linkbtn{background:none;border:0;color:var(--appr2-blue);font-size:12.5px;font-weight:600;cursor:pointer;padding:0 4px 0 0;}
.lr-linkbtn:hover{text-decoration:underline;}
.lr-linkbtn-danger{color:#c0392b;}
table.la-table tbody tr.lr-row-cancelled td{color:#999;text-decoration:line-through;}
table.la-table tbody tr.lr-row-current td{background:var(--appr2-green-bg);}
table.la-table tbody tr.lr-row-clickable{cursor:pointer;}
table.la-table tbody tr.lr-row-clickable:hover td{background:#f4f7fb;}
table.la-table tbody tr.lr-row-derived td{background:#fafafa;color:#555;}

.lr-detail-head{display:flex;justify-content:space-between;gap:20px;padding:16px;border-bottom:1px solid var(--appr2-row-border);flex-wrap:wrap;}
.lr-detail-name{font-size:17px;font-weight:600;color:var(--appr2-ink);}
.lr-detail-meta{font-size:12.5px;color:var(--appr2-secondary-text);margin-top:3px;}
.lr-detail-balance{text-align:right;min-width:150px;}
.lr-detail-balance-value{font-size:34px;font-weight:600;color:var(--appr2-ink);font-variant-numeric:tabular-nums;line-height:1.1;}
.lr-detail-balance-label{font-size:12px;color:var(--appr2-secondary-text);}
.lr-formula{padding:12px 16px;font-size:13px;color:var(--appr2-ink);background:#fafafa;border-bottom:1px solid var(--appr2-row-border);line-height:1.6;}
.lr-formula-meta{font-size:12px;color:var(--appr2-secondary-text);margin-top:6px;line-height:1.5;}
.lr-detail-actions{display:flex;gap:8px;padding:12px 16px;flex-wrap:wrap;}
.lr-section-title{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--appr2-head-text);padding:16px 16px 8px;}

.lr-form{display:flex;flex-wrap:wrap;gap:12px;}
.lr-form .la-filter-field{position:relative;}
.lr-suggest{position:absolute;top:100%;left:0;right:0;z-index:20;background:#fff;border:1px solid var(--appr2-border);border-radius:3px;box-shadow:0 6px 18px rgba(0,0,0,.12);max-height:240px;overflow-y:auto;}
.lr-suggest button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font-size:13px;cursor:pointer;border-bottom:1px solid var(--appr2-row-border);text-transform:none;letter-spacing:0;font-weight:400;}
.lr-suggest button:hover{background:var(--appr2-head-bg);}
.lr-suggest button span{display:block;font-size:11.5px;color:var(--appr2-secondary-text);}
.lr-suggest-empty{padding:10px;font-size:12.5px;color:var(--appr2-secondary-text);}

.lr-preview{margin:14px 0;padding:12px 14px;border:1px solid var(--appr2-row-border);border-radius:4px;background:#fafafa;font-size:13px;color:var(--appr2-ink);}
.lr-preview-row{display:flex;justify-content:space-between;gap:16px;padding:3px 0;}
.lr-preview-row b{font-variant-numeric:tabular-nums;}
.lr-preview-holidays{margin-top:8px;font-size:12.5px;color:#2c6b3f;line-height:1.5;}
.lr-preview-warn{margin-top:8px;padding:8px 10px;background:var(--appr2-warn-bg);border:1px solid #f2e6c4;border-radius:3px;font-size:12.5px;color:var(--appr2-ink);}

.lr-import-actions{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap;}
.lr-import-summary{margin-top:14px;}
.lr-import-counts{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.lr-count{font-size:12.5px;padding:4px 10px;border-radius:12px;background:#f1f1f1;color:#444;}
.lr-count b{font-variant-numeric:tabular-nums;}
.lr-count-ok{background:var(--appr2-green-bg);color:#2c6b3f;}
.lr-count-warn{background:var(--appr2-warn-bg);color:#8a6d1a;}
.lr-count-err{background:#fdecea;color:#b3261e;}
.lr-import-rows{max-height:340px;overflow-y:auto;border:1px solid var(--appr2-row-border);border-radius:3px;}
.lr-import-rows table.la-table td{height:34px;font-size:12.5px;}
tr.lr-import-error td{background:#fdecea;}
tr.lr-import-warning td{background:var(--appr2-warn-bg);}
.lr-import-done{font-size:13px;color:#2c6b3f;font-weight:600;}
.lr-overlap-list{margin-top:8px;font-size:12.3px;line-height:1.55;max-height:180px;overflow-y:auto;}

.lr-rules{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;padding:16px;}
.lr-rule-card{border:1px solid var(--appr2-border);border-radius:4px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px;}
.lr-rule-head{display:flex;justify-content:space-between;gap:8px;align-items:baseline;font-size:13.5px;}
.lr-rule-key-tag{font-size:11px;color:#999;font-family:ui-monospace,monospace;}
.lr-rule-desc{font-size:12px;color:var(--appr2-secondary-text);line-height:1.5;}
.lr-rule-editor input,.lr-rule-editor select{height:32px;padding:0 10px;border:1px solid var(--appr2-border);border-radius:3px;font-size:13px;width:100%;background:#fff;}
.lr-rule-switch{display:flex;align-items:center;gap:8px;font-size:13px;}
.lr-rule-switch input{width:auto;height:auto;}
.lr-rule-list{display:flex;flex-direction:column;gap:6px;margin-bottom:6px;}
.lr-rule-row{display:flex;gap:6px;align-items:center;}
.lr-rule-row input,.lr-rule-row select{height:30px;padding:0 8px;border:1px solid var(--appr2-border);border-radius:3px;font-size:12.5px;min-width:0;}
.lr-rule-row .lr-rule-key{flex:1 1 40%;}
.lr-rule-row .lr-rule-val{flex:0 0 70px;}
.lr-rule-row .lr-rule-mode{flex:0 0 108px;}
/* Bir kvota növü dörd sahədir və hər biri adlandırılıb — adsız qutular
   sırası "42 · 42" kimi oxunur və hansının nə olduğu görünmür. */
.lr-rule-row.lr-quota-row{display:grid;grid-template-columns:minmax(0,1fr) 86px 76px;gap:6px 8px;align-items:end;padding-bottom:10px;border-bottom:1px dashed var(--appr2-row-border);}
.lr-rule-row.lr-quota-row .lr-quota-field{display:flex;flex-direction:column;gap:3px;font-size:10px;text-transform:uppercase;letter-spacing:.3px;color:var(--appr2-secondary-text);min-width:0;}
.lr-rule-row.lr-quota-row .lr-quota-field input{width:100%;}
.lr-rule-row.lr-quota-row .lr-quota-stacks{grid-column:1 / -1;display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--appr2-secondary-text);flex-wrap:wrap;}
.lr-rule-row.lr-quota-row .lr-quota-stacks input{flex:0 0 auto;height:auto;}
.lr-rule-row.lr-quota-row .lr-quota-stacks small{color:#8a8a8a;font-size:10.5px;}
.lr-rule-row.lr-quota-row .lr-rule-mode{grid-column:1 / -1;flex:none;width:100%;}
.lr-rule-row.lr-quota-row .lr-rule-mode[hidden]{display:none;}
.lr-rule-row.lr-quota-row .lr-linkbtn{grid-column:1 / -1;justify-self:start;}
.lr-rule-foot{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11.5px;color:var(--appr2-secondary-text);margin-top:auto;padding-top:6px;border-top:1px solid var(--appr2-row-border);}

@media (max-width: 760px){
  .lr-detail-head{flex-direction:column;}
  .lr-detail-balance{text-align:left;}
  .lr-detail-balance-value{font-size:30px;}
  .lr-rules{grid-template-columns:1fr;padding:12px;}
  .lr-quickbar{gap:6px;}
  .lr-quick{font-size:12px;padding:4px 10px;}
  .la-titlerow-actions{width:100%;}
  .lr-screen .la-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .lr-screen table.la-table td,.lr-screen table.la-table th{padding:0 8px;font-size:12.5px;}
  .lr-form .la-filter-field{flex:1 1 100% !important;}
}

/* Məzuniyyət — ikinci mərhələ (2026-09-22): iş ili istisnaları, sərhəd bölgüsü
   və silmə. Same tokens as the rest of the section. */
.lr-detail-asof{margin-top:8px;display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--appr2-head-text);}
.lr-detail-asof input{height:30px;padding:0 8px;border:1px solid var(--appr2-border);border-radius:3px;font-size:12.5px;font-weight:400;text-transform:none;letter-spacing:0;}
.lr-asof-note{margin:0 16px 12px;padding:8px 12px;background:var(--appr2-warn-bg);border:1px solid #f2e6c4;border-radius:3px;font-size:12.5px;color:var(--appr2-ink);}
.lr-asof-note.is-future{background:#eef4fb;border-color:#cfe0f2;}
.lr-exceptions{color:#8a6d1a;}
.lr-section-hint{font-weight:400;text-transform:none;letter-spacing:0;color:var(--appr2-secondary-text);}
.lr-delete-summary{margin:0 0 10px;padding:10px 12px;background:#fafafa;border:1px solid var(--appr2-row-border);border-radius:4px;font-size:13px;line-height:1.55;color:var(--appr2-ink);}
.la-asof-title{color:var(--appr2-blue);}
.la-source-note{font-size:12px;color:var(--appr2-secondary-text);margin:4px 0 0;max-width:640px;line-height:1.45;}

/* Bayram təqviminin tamlıq yoxlaması (2026-09-22) */
.lr-warnbar{display:block;}
.lr-warnbar-title{font-weight:600;margin-bottom:4px;}
.lr-warnbar-list{margin:0 0 6px;padding-left:18px;font-size:12.5px;line-height:1.6;}
.lr-holidaycheck{border:1px solid var(--appr2-border);border-radius:4px;margin:0 16px 14px;background:#fff;}
.lr-holidaycheck-head{display:flex;gap:16px;align-items:flex-end;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--appr2-row-border);}
.lr-holidaycheck-note{font-size:12px;color:var(--appr2-secondary-text);max-width:560px;line-height:1.45;}
.lr-hc-summary{padding:10px 14px;font-size:13px;color:#8a6d1a;background:var(--appr2-warn-bg);border-bottom:1px solid #f2e6c4;}
.lr-hc-summary.is-ok{color:#2c6b3f;background:var(--appr2-green-bg);border-bottom-color:#cfe6d6;}
.lr-hc-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;padding:12px 14px;}
.lr-hc-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--appr2-head-text);margin-bottom:6px;}
.lr-hc-list{margin:0;padding-left:18px;font-size:12.8px;line-height:1.7;color:var(--appr2-ink);}
.lr-hc-list li.lr-hc-missing{color:#c0392b;}
.lr-hc-list li.lr-hc-partial{color:#8a6d1a;}
.lr-hc-list li.lr-hc-ok{color:#2c6b3f;}
.lr-rule-row .lr-rule-month,.lr-rule-row .lr-rule-day{flex:0 0 56px;}

/* Məzuniyyət — canlı bayram hesablaması (2026-09-22).
   The rule sentence sits above the two forms that need it (the record form and
   the holiday form) and reads as a statement, not a warning: nothing is wrong,
   this is simply how the day count works. */
.lr-rule-note{margin:0 0 12px;padding:8px 11px;border-left:3px solid #d9c48a;background:var(--appr2-warn-bg);border-radius:0 3px 3px 0;font-size:12.5px;line-height:1.45;color:var(--appr2-ink);}
/* The one-line "Bayram günü yoxdur — 21 təqvim günü, 21 çıxılan gün" summary. */
.lr-preview-sentence{margin:0 0 8px;padding-bottom:8px;border-bottom:1px solid var(--appr2-border);font-size:13px;font-weight:600;color:var(--appr2-ink);}
/* A checkbox that owns a whole row, with its own explanation under it. */
.lr-check{flex-direction:row !important;align-items:flex-start;gap:8px;text-transform:none;letter-spacing:0;font-weight:400;font-size:12.5px;flex-wrap:wrap;}
.lr-check input[type="checkbox"]{margin-top:2px;}
.lr-check span{font-weight:600;}
.lr-check small{flex:1 1 100%;}
/* Two holidays on one date: both rows are marked, and both say the day counts once. */
.lr-row-overlap>td{background:var(--appr2-warn-bg);}
/* A .la-filter-field upper-cases its label; the explanatory line under a select
   is a sentence, not a label, and has to keep its own case. */
.la-filter-field small.lr-note{text-transform:none;letter-spacing:normal;font-weight:400;}

/* Məzuniyyət — iş ili bölgüsü və Ərizə (2026-09-22).
   The split is a small table, not a sentence: each year's own "before → after"
   has to sit beside its number or the reader cannot check the rule. */
.lr-preview-split{margin-top:10px;padding-top:8px;border-top:1px solid var(--appr2-border);}
.lr-preview-split-head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--appr2-head-text);margin-bottom:5px;}
.lr-preview-split-row{display:flex;align-items:baseline;gap:10px;padding:3px 0;font-size:12.5px;}
.lr-preview-split-row>span:first-child{flex:1;}
.lr-preview-split-balance{color:var(--appr2-secondary-text);font-size:12px;}
/* The hand-written split: one row per work year, with what is left in it. */
.lr-split-editor{flex:1 1 100%;margin:0;padding:10px 12px;border:1px solid var(--appr2-border);border-radius:4px;background:var(--appr2-head-bg);}
.lr-split-head{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--appr2-head-text);margin-bottom:6px;}
.lr-split-row{display:flex;align-items:center;gap:8px;padding:3px 0;font-size:12.5px;}
.lr-split-year{min-width:96px;font-weight:600;}
.lr-split-remaining{flex:1;color:var(--appr2-secondary-text);font-size:12px;}
.lr-split-input{width:78px;padding:4px 6px;border:1px solid var(--appr2-border);border-radius:3px;font-size:12.5px;text-align:right;}
.lr-split-unit{color:var(--appr2-secondary-text);font-size:12px;}
.lr-split-total{margin-top:6px;padding-top:6px;border-top:1px solid var(--appr2-border);font-size:12.5px;font-weight:600;}
.lr-split-total-off{color:#b3261e;}
/* Ərizə: Var — yaşıl, Yoxdur — qırmızı, as the spec asks. */
.lr-chip-app{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 7px;border-radius:9px;vertical-align:middle;}
.lr-chip-app-yes{background:#e6f4ec;color:#17805a;}
.lr-chip-app-no{background:#fdeaea;color:#b3261e;}
/* The year the next leave will be charged to. */
.lr-chip-fifo{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:9px;background:#eaf1fb;color:#1b4b8f;vertical-align:middle;cursor:help;}

/* ---- Məzuniyyət: əməliyyat zolağı ---------------------------------------
   İdxal düymələri əvvəl sürətli filtr çiplərinin sonunda idi və ekran
   darlaşanda çiplərin arasında ikinci sətrə düşürdülər — "yalnız Excel var"
   məhz belə oxunurdu. Əməliyyat düyməsi filtr deyil: öz sətrindədir, filtrlərin
   üstündədir və hər tabda eyni yerdədir. */
.lr-actionbar{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  padding:12px 16px 0;
}
.lr-actionbar:empty{display:none;}
/* Səlahiyyət cavabı gəlməyəndə düymə gizlənmir — ekran səbəbini yazır. */
.lr-perm-warn{
  display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12px;color:#8a6d1a;background:var(--appr2-warn-bg);
  border-radius:6px;padding:4px 10px;
}

/* Məzuniyyət — siyahıdan çıxarma və struktur nişanı (2026-09-23).
   Köhnə .lr-chip-source qaydaları götürüldü: siyahı birləşdirilmir, ona görə
   "ŞV / idxal" etiketi də yoxdur. */
.lr-chip-excluded { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; background:#e2e8f0; color:#475569; font-size:11px; font-weight:600; vertical-align:middle; }
.lr-row-excluded > td { background:#f1f5f9; color:#64748b; }
.lr-mark-sv { margin-left:4px; color:#94a3b8; font-weight:700; cursor:help; }
.lr-pick-th, .lr-pick-td { width:34px; text-align:center; }
.lr-pick-td input, .lr-pick-th input { cursor:pointer; }
.lr-subtabs { margin-bottom:12px; }

/* Məzuniyyət — FAKTİKİ / PLANLI (2026-09-23, Mərhələ 2). Mavi = hesablama tarixindən sonrası. */
.lr-planned{color:#1b5fb8;}
td.lr-planned{font-weight:600;}
.lr-planned-col{white-space:nowrap;}
.lr-next-planned{display:inline-block;margin-left:4px;color:#1b5fb8;font-size:11px;white-space:nowrap;cursor:help;}
.lr-quick-planned span{color:#1b5fb8;}
.lr-explain{margin:0;padding:8px 16px;font-size:12.5px;color:var(--appr2-secondary-text);border-bottom:1px solid var(--appr2-row-border);}
.lr-state{display:inline-block;font-size:11px;padding:1px 7px;border-radius:9px;white-space:nowrap;}
.lr-state-past{background:#eef0f3;color:#5b6472;}
.lr-state-ongoing{background:#fff1e0;color:#b8620b;}
.lr-state-planned{background:#e6f0fc;color:#1b5fb8;}
.lr-row-planned td{background:#f7fafe;}
.lr-divider-row td{padding:4px 10px !important;font-size:11.5px;color:#1b5fb8;text-align:center;background:#fff !important;border-top:1px solid #b9cfee;border-bottom:1px solid #b9cfee;}
.lr-split-note{display:block;font-size:11px;color:var(--appr2-secondary-text);font-weight:400;white-space:nowrap;}
.lr-share-note{display:block;font-size:11px;color:#6b4ea8;white-space:nowrap;}
.lr-summary-line{font-size:13.5px;line-height:1.7;}
.lr-detail-balance-planned{font-size:12.5px;color:#1b5fb8;margin-top:2px;}
.lr-records-toolbar{display:flex;gap:14px;align-items:flex-end;flex-wrap:wrap;margin:0 0 8px;}
.lr-toggle{display:inline-flex;gap:6px;align-items:center;font-size:12.5px;cursor:pointer;}
.lr-totals{padding:8px 12px;margin:0 0 8px;border:1px solid var(--appr2-row-border);border-radius:8px;background:#fafbfc;font-size:13px;line-height:1.6;}
.lr-totals b{font-variant-numeric:tabular-nums;}
.lr-totals-split{color:var(--appr2-secondary-text);}
.lr-totals-filtered{margin-left:6px;font-size:11.5px;color:#b8620b;}
/* CƏMİ sətri cədvəlin altına yapışır — uzun siyahıda scroll edəndə görünən qalır. */
.lr-records-wrap{max-height:70vh;overflow:auto;}
.lr-records-table tfoot td{position:sticky;bottom:0;z-index:2;background:#f1f4f8;border-top:2px solid #c9d2de;font-variant-numeric:tabular-nums;}
.lr-group-row td{background:#f4f1fb;cursor:pointer;font-size:12.5px;}
.lr-group-caret{display:inline-block;width:12px;color:#6b4ea8;}
.lr-preview-planned{margin:0 0 8px;padding:8px 10px;border-radius:6px;background:#e6f0fc;color:#1b4b8f;font-size:12.5px;font-weight:600;}
@media (max-width:640px){
  .lr-totals{font-size:12px;}
  .lr-records-wrap{max-height:60vh;}
}

/* Məzuniyyət — Mərhələ 3 (2026-09-23): struktur filtrləri, panel idxalı, tarixsiz istifadə. */
.lr-structure-filters{border-bottom:1px solid var(--appr2-row-border);padding:0 16px;}
.lr-structure-filters>summary{cursor:pointer;padding:8px 0;font-size:12.5px;font-weight:600;color:var(--appr2-ink);list-style:revert;}
.lr-structure-count{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:9px;background:var(--appr2-green-bg);font-weight:600;font-size:11px;}
.lr-structure-row{padding:0 0 10px !important;border:0 !important;}
.lr-structure-row select{max-width:220px;}
.lr-detail-structure span{white-space:nowrap;}
.lr-detail-structure small{color:var(--appr2-secondary-text);}
.lr-state-undated{background:#f3eefb;color:#6b4ea8;}
.lr-row-undated td{background:#fbf9fe;}
.lr-panel-batches{margin:0 0 12px;padding:8px 12px;border:1px dashed var(--appr2-row-border);border-radius:8px;font-size:12.5px;}
.lr-panel-batch{padding:3px 0;}
.lr-panel-batch.is-undone{color:var(--appr2-secondary-text);text-decoration:line-through;}
.lr-panel-batch.is-undone .lr-chip-muted{text-decoration:none;}
.lr-pi-tabs{margin:10px 0 12px;}
.lr-pi-days input,.lr-pi-days select{font-size:12.5px;}
.lr-pi-summary{margin:8px 0;padding:8px 12px;border-radius:6px;background:#eef4fb;font-size:13px;}
.lr-pi-bulk{margin:6px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12.5px;}
@media (max-width:640px){
  .lr-structure-row select{max-width:100%;}
  .lr-detail-structure span{white-space:normal;}
}

/* İstifadəçilər və rollar (2026-09-23, Mərhələ 4) */
.trq-access-warn{margin:12px 24px 0;padding:10px 14px;border-radius:8px;background:#fff6e5;border:1px solid #f2d39b;color:#7a4b00;font-size:13px;}
.usr-status{display:inline-block;padding:1px 8px;border-radius:10px;font-size:11.5px;white-space:nowrap;background:#eef0f3;color:#5b6472;}
.usr-ok{background:#e7f6ec;color:#1e7a3c;}
.usr-warn{background:#fff1e0;color:#b8620b;}
.usr-bad{background:#fdecea;color:#b3261e;}
.usr-muted{background:#eef0f3;color:#5b6472;}
.usr-results{max-height:220px;overflow:auto;display:flex;flex-direction:column;gap:2px;margin:6px 0;}
.usr-result{display:block;text-align:left;padding:6px 8px;border:1px solid var(--appr2-row-border);border-radius:6px;background:#fff;font-size:12.5px;cursor:pointer;}
.usr-result:hover{background:#f6f8fb;}
.usr-picked{padding:8px 10px;margin:6px 0 10px;border-radius:6px;background:#f6f8fb;font-size:13px;}
.usr-pw-mode{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:13px;}
.usr-password{margin:10px 0;padding:12px 14px;border-radius:8px;border:1px solid #b9cfee;background:#eef4fb;}
.usr-password-title{font-size:12px;color:#1b4b8f;margin-bottom:6px;}
.usr-password-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.usr-password-value{font-size:18px;letter-spacing:.5px;padding:4px 10px;background:#fff;border-radius:6px;border:1px dashed #9db7df;user-select:all;}
.usr-password-warn{margin-top:6px;font-size:12.5px;font-weight:600;color:#b3261e;}
.usr-card-head{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:10px;}
.usr-card-status{text-align:right;}
.usr-override-banner{margin:6px 0 10px;padding:8px 12px;border-radius:6px;background:#f4f1fb;color:#4b3591;font-size:13px;font-weight:600;}
.usr-matrix-wrap{max-height:52vh;overflow:auto;}
.usr-matrix td,.usr-matrix th{padding:5px 6px !important;}
.usr-matrix select{font-size:11.5px;max-width:118px;}
.usr-cell-na{background:#f4f5f7;}
.usr-cell.is-on{background:#f1faf4;}
.usr-cell.is-off{background:#fff;}
.usr-cell.has-override{box-shadow:inset 0 0 0 2px #8a6ad0;}
.usr-cell.from-template{background:#fafbfc;}
.usr-cell-mark{margin-left:4px;font-size:11px;color:var(--appr2-secondary-text);}
.usr-roles{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:12px 16px;}
.usr-role-list{display:flex;flex-direction:column;gap:6px;}
.usr-role{text-align:left;padding:8px 10px;border:1px solid var(--appr2-row-border);border-radius:8px;background:#fff;cursor:pointer;font-size:13px;}
.usr-role.is-active{border-color:var(--appr2-green);background:var(--appr2-green-bg);}
.usr-reset-form{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:8px 0;font-size:13px;}
@media (max-width:760px){.usr-roles{grid-template-columns:1fr;}.usr-card-status{text-align:left;}}
/* Məzuniyyət ixracı (2026-09-23): seçilmiş işçilər üçün düymələr, tarixlər hesabatı. */
.lr-pick-actions{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;}
.lr-pick-actions[hidden]{display:none;}
.lr-dates-period{line-height:1.5;min-width:220px;}
.lr-dates-period small{color:var(--appr2-secondary-text);}
/* Məzuniyyət siyahısının axtarış sahəsi (2026-09-23): enli, ikonlu, "×" ilə. */
.la-filter-field.lr-search-field{flex:1 1 34%;min-width:340px;max-width:560px;}
.lr-search{position:relative;display:flex;align-items:center;}
.la-filter-field .lr-search input{width:100%;height:42px;padding:0 40px 0 40px;font-size:15px;line-height:42px;box-sizing:border-box;border-radius:10px;}
.lr-search-icon{position:absolute;left:12px;width:18px;height:18px;color:var(--appr2-secondary-text);pointer-events:none;}
.lr-search-clear{position:absolute;right:6px;width:30px;height:30px;border:0;border-radius:50%;background:transparent;color:var(--appr2-secondary-text);font-size:20px;line-height:1;cursor:pointer;}
.lr-search-clear:hover,.lr-search-clear:focus-visible{background:rgba(0,0,0,.07);color:inherit;}
.lr-search-clear[hidden]{display:none;}
.lr-search-count{min-height:16px;font-size:12.5px;font-weight:500;text-transform:none;letter-spacing:0;color:var(--appr2-secondary-text);}
.la-filter-field .lr-search-plain{min-width:300px;height:40px;font-size:15px;}
.lr-app-missing{color:#b3261e;font-weight:600;}
.lr-import-file{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 10px;}
@media (max-width:640px){
  .la-filter-field.lr-search-field{flex-basis:100%;min-width:0;max-width:none;}
  /* 16px: iOS klaviatura açılanda səhifəni böyütmür, ekran atlamır. */
  .la-filter-field .lr-search input,.la-filter-field .lr-search-plain{font-size:16px;min-width:0;width:100%;}
}

/* Panel hesabı (2026-09-24) */
.pnl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:6px 0 8px;font-size:13px;}
.pnl-presets{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.pnl-sections{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:6px;}
.pnl-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;border:1px solid #dde4ef;border-radius:8px;background:#fff;}
.pnl-row.is-off{background:#f5f6f8;color:#7a8394;}
.pnl-check{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px;}
.pnl-row select{font-size:12.5px;}
.pnl-off{font-size:12px;color:#7a8394;}
.pnl-summary{margin:10px 0;}
.pnl-sentence{font-weight:600;padding:8px 10px;background:#eef4fb;border-radius:8px;margin-bottom:4px;}
.pnl-card-summary{border:1px solid #dde4ef;border-radius:10px;padding:10px 12px;margin:10px 0;display:flex;flex-direction:column;gap:4px;font-size:13px;}
.pnl-card-summary button{align-self:flex-start;margin-top:4px;}
.pnl-card-edit{border-top:1px solid #dde4ef;margin-top:6px;padding-top:6px;}
.pnl-menu{margin-top:8px;border:1px solid #c6d2e3;border-radius:10px;background:#12305a;color:#fff;padding:10px 12px;max-width:320px;}
.pnl-menu-title{font-weight:700;margin-bottom:6px;}
.pnl-menu-group{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.7;margin-top:8px;}
.pnl-menu-item{padding:4px 0 4px 8px;border-left:2px solid rgba(255,255,255,.3);margin:2px 0;font-size:13px;}
.pnl-menu .lr-note{color:#cfdcf0;}
@media (max-width:640px){.pnl-presets{margin-left:0;}.pnl-sections{grid-template-columns:1fr;}}
.trq-perm-hidden{display:none !important;}

/* Məzuniyyət — Kompensasiya (2026-09-24): tarixsiz, yalnız gün sayı; məzuniyyətdən ayrı rəng. */
.lr-state-compensation{background:#fff3e0;color:#9a5b00;}
.lr-compensation{color:#9a5b00;}
.lr-row-compensation td{background:#fffaf2;}
.lr-preview-compensation{font-weight:600;color:#7a4700;}

/* İşdən çıxma (2026-09-24): çıxarılmış sətir sönük + nişan, panel zolağı, sətir menyusu, hesabat statusu, mail təsdiqi. */
.lr-row-excluded > td { background:#f1f5f9; color:#64748b; }
.lr-row-excluded .lr-chip-excluded { background:#fde68a; color:#78350f; }
.lr-excluded-banner { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:0 0 12px; padding:10px 14px; border:1px solid #f59e0b; background:#fffbeb; border-radius:8px; font-size:13px; color:#78350f; }
.lr-excluded-banner > span { flex:1 1 280px; }
.lr-row-menu-th, .lr-row-menu-td { width:34px; text-align:center; }
.lr-row-menu { border:1px solid transparent; background:none; border-radius:6px; width:30px; height:28px; font-size:18px; line-height:1; cursor:pointer; color:#475569; }
.lr-row-menu:hover { border-color:#cbd5e1; background:#fff; }
.lr-row-menu-pop { position:fixed; z-index:10070; min-width:180px; padding:4px; background:#fff; border:1px solid #cfd6de; border-radius:8px; box-shadow:0 10px 28px rgba(16,24,40,.18); display:flex; flex-direction:column; }
.lr-row-menu-pop button { text-align:left; border:0; background:none; padding:9px 12px; border-radius:6px; font:inherit; font-size:13px; cursor:pointer; min-height:36px; }
.lr-row-menu-pop button:hover { background:#eef4fb; }
.lr-quick-excluded { border-style:dashed; }
.lr-dep-tabs { margin:0 0 10px; }
.lr-dep-emp { margin:0 0 8px; }
.lr-dep-emp-name { font-weight:700; font-size:14px; }
.lr-dep-emp-name small { font-weight:400; color:#64748b; margin-left:6px; }
.lr-dep-chip { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600; white-space:nowrap; }
.lr-dep-none { background:#e2e8f0; color:#475569; }
.lr-dep-prepared { background:#e0f2fe; color:#075985; }
.lr-dep-sent { background:#dcfce7; color:#166534; }
.lr-dep-error { background:#fee2e2; color:#991b1b; }
.lr-dep-stale { background:#fef3c7; color:#92400e; }
div.lr-dep-stale { margin-top:4px; padding:4px 6px; border-radius:4px; font-size:11.5px; white-space:normal; max-width:260px; }
.lr-ex-table td.lr-ex-actions { white-space:normal; overflow:visible; text-overflow:clip; max-width:none; min-width:210px; }
.lr-ex-actions .lr-linkbtn { display:inline-block; margin:2px 10px 2px 0; }
.lr-ex-note { margin:0 16px 8px; }
.lr-dep-mail { margin-top:12px; padding:12px 14px; border:1px solid #cfd6de; border-radius:8px; background:#fff; }
.lr-dep-mail-head { font-weight:700; margin-bottom:8px; }
.lr-dep-mail-grid { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr); gap:8px 12px; }
.lr-dep-mail-grid input { width:100%; }
.lr-dep-mail-subject { margin:10px 0 6px; font-size:13px; }
.lr-dep-sentence { margin:0 0 8px; padding:8px 10px; border-left:3px solid #1f7a5a; background:#f5f9f7; font-size:13px; line-height:1.5; }
.lr-dep-sentence.is-negative { border-left-color:#c62828; background:#fff6f6; }
@media (max-width:600px){ .lr-dep-mail-grid { grid-template-columns:1fr; } .lr-row-menu { width:44px; height:44px; } .lr-ex-actions { white-space:normal; } }
.lr-dep-blocked { margin:10px 0; padding:10px 12px; border:1px solid #fca5a5; background:#fef2f2; border-radius:8px; }
.lr-dep-blocked-head { font-weight:700; color:#991b1b; margin-bottom:4px; }
.lr-dep-blocked-row { padding:6px 0; border-top:1px dashed #fecaca; font-size:13px; color:#7f1d1d; }

/* Məlumat yoxlaması (2026-09-25, Mərhələ 5) — doqquz kart, xülasə zolağı, toplu əməliyyatlar cədvəli. */
.lr-dc-summary{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;margin:4px 0 8px;font-size:14px;}
.lr-dc-summary.is-clean{background:#e9f5ef;border:1px solid #b7dcc8;color:#17613f;}
.lr-dc-summary.has-errors{background:#fbeceb;border:1px solid #efc0bb;color:#8f2019;}
.lr-dc-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;margin:10px 0 14px;}
.lr-dc-card{border:1px solid var(--trq-border);border-top-width:4px;border-radius:12px;padding:10px 12px;background:#fff;display:flex;flex-direction:column;gap:2px;}
.lr-dc-card-head{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:var(--trq-text-dim);}
.lr-dc-no{font-weight:700;}
.lr-dc-count{font-size:26px;font-weight:700;line-height:1.15;font-variant-numeric:tabular-nums;}
.lr-dc-title{font-weight:600;font-size:13px;}
.lr-dc-cond{font-size:12px;color:var(--trq-text-dim);margin-bottom:4px;}
.lr-dc-ok{border-top-color:#17805a;} .lr-dc-ok .lr-dc-count,.lr-dc-ok .lr-dc-level{color:#17805a;}
.lr-dc-error{border-top-color:#b3261e;} .lr-dc-error .lr-dc-count,.lr-dc-error .lr-dc-level{color:#b3261e;}
.lr-dc-warning{border-top-color:#b7700f;} .lr-dc-warning .lr-dc-count,.lr-dc-warning .lr-dc-level{color:#b7700f;}
.lr-dc-info{border-top-color:#1d4e96;} .lr-dc-info .lr-dc-count,.lr-dc-info .lr-dc-level{color:#1d4e96;}
.lr-batch-table tr.is-restored td{background:#f1f3f6;color:#5f6b7c;}
.lr-batch-items{display:flex;flex-direction:column;gap:4px;padding:4px 0;}
@media (max-width:600px){.lr-dc-cards{grid-template-columns:1fr 1fr;}}
/* Mərhələ 6: nəticə yenilənərkən filtrlər işlək qalır, cədvəlin üstündə spinner. */
.lr-results{position:relative;min-height:80px;}
.lr-results.is-loading>*{opacity:.45;transition:opacity .12s;}
.lr-results.is-loading::after{content:'';position:absolute;top:40px;left:50%;width:28px;height:28px;margin-left:-14px;border-radius:50%;border:3px solid #c6cfdc;border-top-color:#17805a;animation:iw-spin .8s linear infinite;}
@keyframes iw-spin{to{transform:rotate(360deg);}}
/* ================= Ezamiyyət bölməsi (2026-09-25) — Məzuniyyətin sinifləri üzərində, yalnız əlavələr ================= */
.tr-modebar{margin-bottom:8px;}
.tr-modal{max-width:1180px;width:calc(100vw - 32px);}
.tr-form-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,1fr);gap:18px;align-items:start;}
@media (max-width:900px){.tr-form-grid{grid-template-columns:1fr;}}
.tr-preview{position:sticky;top:0;border:1px solid #dfe5ee;border-radius:8px;padding:12px;background:#f8fafc;min-height:120px;}
.tr-breakdown{font-size:13px;}
.tr-bd-head{font-weight:600;margin-bottom:4px;}
.tr-bd-norm{color:#475467;margin-bottom:8px;}
.tr-bd-places{color:#475467;margin:-4px 0 8px;padding:6px 8px;background:#f9fafb;border-radius:6px;font-size:13px;line-height:1.5;}
.tr-normplace-list{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:4px;}
.tr-normplace-row{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--appr2-ink);cursor:pointer;}
.tr-normplace-row input[type="radio"]{height:auto;width:auto;margin:0;padding:0;}
.tr-normplace-list .lr-note{text-transform:none;letter-spacing:0;font-weight:400;}
.tr-normplace-row b{font-variant-numeric:tabular-nums;}
.tr-bd-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;}
.tr-bd-table td{padding:4px 6px;border-bottom:1px solid #edf1f6;vertical-align:top;}
.tr-bd-formula{color:#667085;font-size:12px;}
.tr-bd-dup td{color:#b54708;}
.tr-bd-total td{font-weight:700;border-top:2px solid #98a2b3;border-bottom:none;}
.tr-bd-excess{margin-top:8px;padding:6px 8px;border-radius:6px;background:#fff4e5;color:#8a4b00;font-size:12.5px;}
.tr-issues{margin-top:10px;display:flex;flex-direction:column;gap:6px;}
.tr-other-row{display:flex;gap:6px;margin-bottom:4px;}
.tr-other-row input{flex:1 1 0;min-width:0;}
.tr-km-row{display:flex;align-items:center;gap:8px;margin-top:4px;font-size:12.5px;}
.tr-km-row input{width:110px;}
.tr-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:6px 14px;margin:10px 0;font-size:13px;}
.tr-history{margin-top:6px;font-size:12.5px;}
.tr-history div{padding:2px 0;}
.tr-norm-old td{color:#667085;}
.tr-company{white-space:normal;}
.tr-places{display:grid;gap:8px;margin-bottom:14px;}
.tr-place-group>div{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px;}
.tr-place{cursor:pointer;}
.tr-subrow td:first-child{padding-left:26px;color:#475467;}
.tr-place-chips{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0;}
.tr-emp-settings{align-items:flex-end;margin:10px 0;}
.tr-cal-wrap{max-height:70vh;}
.tr-cal{font-size:11.5px;}
.tr-cal th,.tr-cal td{padding:3px 2px;text-align:center;min-width:22px;}
.tr-cal .tr-cal-name{text-align:left;min-width:180px;position:sticky;left:0;background:#fff;z-index:1;}
.tr-cal .tr-cal-name small{display:block;color:#667085;font-weight:400;}
.tr-cal th.is-weekend{background:#f2f4f7;}
.tr-cal th.is-today{background:#dcfae6;}
.tr-cal-on{cursor:pointer;font-size:10px;color:#fff;overflow:hidden;white-space:nowrap;}
.tr-kind-domestic{background:#17805a;}
.tr-kind-foreign{background:#2e5aac;}
.tr-kind-commute{background:#b54708;}
.tr-legend{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin:0 4px 0 10px;}
.tr-charts{display:flex;flex-wrap:wrap;gap:16px;margin:8px 0 12px;}
.tr-chart{margin:0;flex:1 1 420px;max-width:560px;border:1px solid #edf1f6;border-radius:8px;padding:8px 10px;}
.tr-chart figcaption{font-weight:600;font-size:12.5px;margin-bottom:6px;}
.tr-chart svg{width:100%;height:auto;}
.tr-chart-label{font-size:11px;fill:#344054;}
.tr-chart-value{font-size:10.5px;fill:#475467;}
.tr-chart-bar{fill:#17805a;}
/* Ezamiyyət — ödəniş növbəsi (2026-09-25). */
.lr-quick.tr-quick-pay span{white-space:nowrap;}
.tr-pay-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;margin:8px 0;}
.tr-pay-group{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;}
.tr-pay-tools{display:inline-flex;flex-wrap:wrap;gap:6px;}
.tr-pay-nobank{margin:6px 0;}
.tr-pay-result{display:flex;align-items:center;gap:8px;margin:6px 0;}
.tr-pay-selbar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:6px 0;padding:8px 12px;border:1px solid #b7d7c8;border-radius:10px;background:#eef8f3;}
.tr-pay-selbar[hidden]{display:none;}
.tr-pay-selbar b{margin-right:4px;}
.tr-pay-table .tr-iban{font-variant-numeric:tabular-nums;white-space:nowrap;}
.tr-pay-table tr.tr-nobank-row td{background:#fff5f5;}
.tr-nobank{color:var(--trq-danger);font-weight:600;white-space:nowrap;}
.tr-pay-status{white-space:nowrap;}
.tr-pay-status.tr-pay-pending{color:#b54708;}
.tr-pay-status.tr-pay-sent{color:#175cd3;}
.tr-pay-status.tr-pay-paid{color:#17805a;}
.tr-pay-status.tr-pay-cancelled{color:var(--appr2-secondary-text);text-decoration:line-through;}
.tr-pay-batches{margin-top:12px;}
.tr-pay-batches summary{cursor:pointer;font-weight:600;margin-bottom:6px;}
.tr-pay-offer{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;}
/* Forma: Yadda saxla bağlıdırsa səbəb düymənin üstündə, sahə öz yanında qırmızı. */
.tr-save-reasons{margin:10px 0 0;padding:8px 12px;border:1px solid #f5c2c0;border-radius:8px;background:#fef3f2;color:var(--trq-danger);font-size:13px;}
.tr-save-reasons ul{margin:4px 0 0;padding-left:18px;}
.tr-save-reasons[hidden]{display:none;}
.tr-save-wrap{display:inline-flex;}
.tr-field-missing input,.tr-field-missing select,.tr-field-missing .fs-trigger,.tr-field-missing .trq-date-text{border-color:var(--trq-danger)!important;}
.tr-field-error{display:block;margin-top:3px;color:var(--trq-danger);font-size:11.5px;font-weight:500;text-transform:none;letter-spacing:normal;}
.tr-form-footer{position:sticky;bottom:0;z-index:2;margin-top:8px;padding-top:4px;background:var(--trq-surface);box-shadow:0 -6px 10px -8px rgba(15,23,42,.25);}
.lr-preview-ok{padding:6px 8px;border-radius:6px;background:#ecfdf3;color:#067647;}
@media (max-width:600px){.tr-cal .tr-cal-name{min-width:120px;}.tr-modal{width:calc(100vw - 16px);padding:14px;}}
/* Ezamiyyət — hesablama və ödəniş statusu (paket III, 2026-09-28): rəngli nişan; hesablanmamış qeydin məbləğləri boz (önizləmə) */
.tr-pay-status[class*="tr-state-"]{display:inline-block;padding:1px 8px;border-radius:999px;font-size:.78rem;font-weight:600;border:1px solid transparent;}
.tr-state-not_calculated{background:#f2f4f7;color:#475467;border-color:#d0d5dd;}
.tr-state-calculated{background:#eff8ff;color:#175cd3;border-color:#b2ddff;}
.tr-state-stale{background:#fffaeb;color:#b54708;border-color:#fedf89;}
.tr-state-sent{background:#f4f3ff;color:#5925dc;border-color:#d9d6fe;}
.tr-state-paid{background:#ecfdf3;color:#067647;border-color:#abefc6;}
.tr-state-not_paid{background:#fef3f2;color:#b42318;border-color:#fecdca;}
.tr-state-not_required{background:#f9fafb;color:#667085;border-color:#eaecf0;text-decoration:none;}
.tr-table tr.tr-precalc td.la-num{color:#98a2b3;}
.tr-paystate-box{margin:8px 0;padding:8px 10px;border:1px solid var(--appr2-border);border-radius:8px;font-size:.86rem;}

/* C4 (29.09): "Ərizə: Yoxdur" sətirlərində nümunə / göndər / skan linkləri */
.lr-app-sample-links { font-size: 12px; margin-top: 2px; white-space: nowrap; }

/* UX (29.09): bloklamayan bildirişlər — yuxarı sağda toast yığını (xəta qırmızı, xəbərdarlıq sarı, uğur yaşıl). */
#trq-toast-stack { position: fixed; top: 16px; right: 16px; z-index: 10050; display: flex; flex-direction: column; gap: 8px; max-width: min(440px, calc(100vw - 32px)); pointer-events: none; }
.trq-toast { pointer-events: auto; position: relative; background: #fff; border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 30, 60, .18); padding: 10px 34px 10px 14px; border-left: 5px solid #5f6b7e; font-size: .88rem; color: #1d2430; animation: trq-toast-in .18s ease-out; }
.trq-toast-error { border-left-color: #c62828; background: #fff5f5; }
.trq-toast-warn { border-left-color: #d98e04; background: #fffaf0; }
.trq-toast-success { border-left-color: #2e7d32; background: #f3fbf4; }
.trq-toast-info { border-left-color: #1b4b8f; }
.trq-toast-body { white-space: pre-line; line-height: 1.4; }
.trq-toast-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.trq-toast-act { border: 1px solid #c9d3e3; background: #fff; border-radius: 6px; padding: 3px 10px; font-size: .8rem; cursor: pointer; }
.trq-toast-close { position: absolute; top: 6px; right: 8px; border: 0; background: transparent; font-size: .9rem; cursor: pointer; color: #5f6b7e; }
@keyframes trq-toast-in { from { transform: translateY(-6px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-color-scheme: dark) { .trq-toast { background: #1f2633; color: #e8ecf3; } .trq-toast-error { background: #3a1f22; } .trq-toast-warn { background: #3a311c; } .trq-toast-success { background: #1d3323; } }

/* Məzuniyyət qalıqlarını göndər (01.10.2026) */
.lr-bm-modal{max-height:92vh;overflow-y:auto;}
.lr-bm-section{border:1px solid var(--appr2-row-border,#e4e7ec);border-radius:8px;padding:10px 12px;margin-bottom:10px;}
.lr-bm-head{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:8px;font-size:13px;}
.lr-bm-state{margin-left:auto;font-size:12.5px;}
.lr-bm-sources{display:flex;flex-wrap:wrap;gap:8px 16px;margin-bottom:8px;font-size:13px;}
.lr-bm-src{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:6px;cursor:pointer;}
.lr-bm-src.is-active{background:rgba(23,128,90,.08);}
.lr-bm-count{display:inline-block;min-width:18px;padding:0 6px;border-radius:9px;background:var(--appr2-green-bg,#e7f5ee);font-weight:600;font-size:11.5px;text-align:center;}
.lr-bm-picker{position:relative;}
.lr-bm-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px;}
.lr-bm-tree{max-height:300px;overflow-y:auto;font-size:13px;border:1px solid var(--appr2-row-border,#e4e7ec);border-radius:6px;padding:4px 6px;}
.lr-bm-tree-kids{padding-left:18px;}
.lr-bm-tree-item>summary{cursor:pointer;list-style:revert;}
.lr-bm-leaf{padding-left:14px;}
.lr-bm-node{display:inline-flex;align-items:center;gap:4px;cursor:pointer;}
.lr-bm-preview{border:1px solid var(--appr2-row-border,#e4e7ec);border-radius:8px;padding:10px 12px;font-size:13px;display:grid;gap:4px;margin-bottom:8px;}
.lr-bm-body-preview{white-space:pre-wrap;font-family:inherit;margin:4px 0 0;padding:8px;background:rgba(0,0,0,.03);border-radius:6px;}
/* 02.10 Məzuniyyət qalıqlarını göndər: xəta qırmızı, köhnəlmiş önizləmə, naməlum {…} sarı, düymədə yüklənmə */
.lr-bm-error{margin:0 0 8px;padding:8px 10px;border:1px solid #f1b8b3;border-radius:6px;background:#fdecea;color:#b3261e;font-weight:600;font-size:13px;}
.lr-bm-stale{margin:0 0 8px;padding:8px 10px;border:1px solid #f2e6c4;border-radius:6px;background:var(--appr2-warn-bg,#fff8e6);font-size:13px;}
.lr-bm-ok{color:#17805a;font-weight:600;}
.lr-bm-frompage{color:#17805a;}
.lr-bm-varwarn{margin-top:6px;padding:6px 10px;border-radius:6px;background:#fff4c2;border:1px solid #f0d36b;color:#5c4500;font-size:12.5px;}
.lr-bm-hl-wrap{position:relative;display:block;}
.lr-bm-hl-wrap>textarea,.lr-bm-hl-wrap>input{display:block;}
.lr-bm-hl{position:absolute;top:0;left:0;right:0;bottom:0;box-sizing:border-box;border-style:solid;border-color:transparent;color:transparent;overflow:hidden;pointer-events:none;overflow-wrap:break-word;word-wrap:break-word;margin:0;}
.lr-bm-hl mark{background:rgba(250,204,21,.55);color:transparent;border-radius:2px;padding:0;}
.lr-bm-btn-spin{display:inline-block;width:12px;height:12px;margin-right:6px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:lr-bm-spin .7s linear infinite;}
@keyframes lr-bm-spin{to{transform:rotate(360deg)}}
@media (prefers-color-scheme: dark){
  .lr-bm-error{background:#3a1f22;border-color:#6b2c2c;color:#ffb4ab;}
  .lr-bm-varwarn{background:#3a311c;border-color:#6b5a26;color:#f3dd8e;}
  .lr-bm-hl mark{background:rgba(250,204,21,.35);}
}