/* ============================================================
   CORE — base overrides, typography, scrollbar
   ============================================================ */

/* --- Design tokens: the scales theme.css never defined -------------------
   theme.css ships colour/radius/shadow tokens but no spacing and no type
   scale, so every gap and font-size in this file used to be a magic number.
   These are the only two scales; use them instead of new literals. */
:root {
    /* Spacing — 4px base grid */
    --rt-sp-1: 4px;
    --rt-sp-2: 8px;
    --rt-sp-3: 12px;
    --rt-sp-4: 16px;
    --rt-sp-5: 20px;
    --rt-sp-6: 24px;
    --rt-sp-8: 32px;

    /* Type scale — 13px is the hard floor anywhere in the app */
    --rt-fs-meta: 13px;   /* captions, table meta, helper text */
    --rt-fs-body: 14px;   /* default body, inputs, buttons, table cells */
    --rt-fs-lead: 15px;   /* card titles, emphasised rows */
    --rt-fs-h3:   18px;
    --rt-fs-h2:   22px;
    --rt-fs-h1:   26px;

    /* Control height — buttons and inputs share these so any toolbar
       mixing the two lines up on a single baseline. */
    --rt-ctl-h-sm: 32px;
    --rt-ctl-h:    38px;
    --rt-ctl-h-lg: 46px;

    /* --- Tokens referenced across the stylesheet but never declared -------
       These were all used as `var(--rt-x, <light-mode-literal>)`. Because the
       variable didn't exist, every one of them silently resolved to its
       hardcoded light fallback — including in dark mode, which is why panels
       like the assignment "report required" row rendered as a white box with
       pale text. Declaring them makes the fallbacks dead code and lets dark
       mode override them below. */
    --rt-light:        #F8F9FA;   /* subtle raised surface on the card */
    --rt-body-color:   var(--rt-text);
    --rt-heading-color: var(--rt-heading);
    --rt-card-radius:  var(--rt-radius);
    --rt-input-bg:     #FFFFFF;
    --rt-danger-rgb:   239, 68, 68;
    --rt-info-rgb:     14, 165, 233;
    --rt-warning-rgb:  245, 158, 11;
    --rt-success-rgb:  34, 197, 94;
}

/* --- Text rendering ------------------------------------------------------
   theme.css used to force `-webkit-font-smoothing: antialiased` on `*`, which
   turns off ClearType subpixel rendering on Windows. That thinned every glyph:
   body copy looked washed out and Font Awesome glyphs — solid shapes whose
   thin strokes depend on subpixel coverage — read as faded and blurry.
   Grayscale AA is only correct on macOS Retina, so scope it there. */
body { text-rendering: optimizeSpeed; }

@supports (-webkit-touch-callout: none) {
    body { -webkit-font-smoothing: antialiased; }
}

/* Icon fonts must never inherit grayscale AA or fractional sizing — both
   soften the glyph edge. Pin them to crisp, whole-pixel rendering. */
.fa, .fas, .far, .fal, .fab, .fad, .fa-solid, .fa-regular, .fa-light,
.fa-brands, .fa-duotone, [class^="fa-"], [class*=" fa-"] {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    text-rendering: auto;
    line-height: 1;
    /* Icons must not be dimmed with opacity — that is what made them look
       "faded". De-emphasis is done with colour tokens instead. */
    opacity: 1;
}

/* Inline SVG icons: align with text and keep strokes crisp */
svg { shape-rendering: geometricPrecision; }

/* --- Typography floor ---------------------------------------------------
   Nothing in the UI may render below 13px. */
body {
    font-size: var(--rt-fs-body);
    line-height: 1.55;
}

h1 { font-size: var(--rt-fs-h1); }
h2 { font-size: var(--rt-fs-h2); }
h3 { font-size: var(--rt-fs-h3); }
h4 { font-size: var(--rt-fs-lead); }
h5, h6 { font-size: var(--rt-fs-body); }

small, .small { font-size: var(--rt-fs-meta); }

/* --- Contrast -----------------------------------------------------------
   --rt-text-soft was #9CA3AF = 2.55:1 on white, far below the 4.5:1 WCAG AA
   floor, and it drives every placeholder in the app. --rt-text-muted at
   #6B7280 passed only by a hair (4.83:1) with no headroom, and it is paired
   with small type in ~50 rules. Both are darkened to sit comfortably inside
   AA while staying visibly secondary. */
:root {
    --rt-text-muted: #5B6472;  /* 6.4:1 on white */
    --rt-text-soft:  #78839A;  /* 4.6:1 on white */
}

[data-theme="dark"] {
    /* Light mode collapsed muted/soft into one value in dark mode; keep the
       two steps distinct there too. */
    --rt-text-muted: #A9B2C1;
    --rt-text-soft:  #8B94A3;

    /* Dark equivalents for the previously-undeclared tokens */
    --rt-light:    rgba(255, 255, 255, .05);
    --rt-input-bg: var(--rt-card-bg);
}

/* --- Bootstrap colour bridge --------------------------------------------
   theme.css mapped only `--bs-primary` onto the brand palette. Every other
   Bootstrap semantic colour still held its factory value, so any component
   theme.css did not hand-restyle — checked radio/checkbox groups, focus
   rings, alerts, progress bars, spinners, nav-pills, list-groups — rendered
   in stock Bootstrap blue/cyan/amber while the rest of the screen used the
   brand palette. That mismatch is why the UI read as two different designs.
   Bridge the whole semantic set, including the RGB triplets Bootstrap needs
   for its alpha mixes. */
:root {
    --bs-secondary:      var(--rt-secondary);
    --bs-secondary-rgb:  99, 102, 241;
    --bs-success:        var(--rt-success);
    --bs-success-rgb:    34, 197, 94;
    --bs-info:           var(--rt-info);
    --bs-info-rgb:       14, 165, 233;
    --bs-warning:        var(--rt-warning);
    --bs-warning-rgb:    245, 158, 11;
    --bs-danger:         var(--rt-danger);
    --bs-danger-rgb:     239, 68, 68;

    --bs-emphasis-color: var(--rt-heading);
    --bs-secondary-color: var(--rt-text-muted);
    --bs-tertiary-color:  var(--rt-text-soft);

    /* Focus ring was rgba(13,110,253,.25) — Bootstrap blue on a green app */
    --bs-focus-ring-color: rgba(var(--rt-primary-rgb), .25);

    /* Bootstrap's own radius scale competed with --rt-radius */
    --bs-border-radius:    var(--rt-radius-sm);
    --bs-border-radius-sm: var(--rt-radius-sm);
    --bs-border-radius-lg: var(--rt-radius);
    --bs-border-radius-xl: var(--rt-radius-lg);
    --bs-border-color:     var(--rt-border);
}

/* Selected states of `.btn-check` groups (radio/checkbox rendered as buttons)
   hardcode Bootstrap's palette in bootstrap.min.css rather than reading a
   variable, so they need explicit mapping. */
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary.active,
.btn-outline-primary:active {
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
    color: #fff;
}
.btn-check:checked + .btn-outline-secondary,
.btn-outline-secondary.active {
    background-color: var(--rt-text);
    border-color: var(--rt-text);
    color: #fff;
}
.btn-check:focus + .btn,
.btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 .25rem rgba(var(--rt-primary-rgb), .25);
}

/* Checkboxes and radios */
.form-check-input:checked {
    background-color: var(--rt-primary);
    border-color: var(--rt-primary);
}
.form-check-input:focus {
    border-color: var(--rt-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--rt-primary-rgb), .25);
}
.form-switch .form-check-input:focus { border-color: var(--rt-primary); }

/* Progress, spinners and links follow the brand too */
.progress-bar { background-color: var(--rt-primary); }
.spinner-border, .spinner-grow { color: var(--rt-primary); }

/* Bootstrap draws the select chevron as a background SVG with a near-black
   stroke, which disappears against the dark theme's field colour — dark-mode
   selects looked like plain read-only text boxes. Redraw it light. */
[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23A9B2C1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ============================================================
   LAYOUT — sidebar, navbar, content shell, page header
   ============================================================ */

/* Sidebar submenu (dropdown children): flex so a trailing count badge aligns
   right, matching the top-level menu links. */
.sidebar-submenu .submenu-link { display: flex; align-items: center; gap: .4rem; }
.sidebar-submenu .submenu-link .submenu-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.header-profile .profile-info { text-align: left; max-width: 150px; overflow: hidden; }
.nav-profile-name, .nav-profile-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Navbar: .dropdown wrapper defaults to display:block which creates an inline
   formatting context — the inner inline-flex button can get baseline-shifted.
   Forcing flex on the wrapper keeps all action icons on the same line. */
.header-actions .dropdown { display: flex; align-items: center; }

/* Unread notification highlight */
.notif-dropdown .notif-item.notif-unread { background: color-mix(in srgb, var(--rt-primary) 5%, transparent); }
[data-theme="dark"] .notif-dropdown .notif-item.notif-unread { background: rgba(255,255,255,.06); }

/* ============================================================
   COMPONENTS — cards, badges, buttons, modals, alerts, forms
   ============================================================ */

/* --- Confirmation dialog icon (global [data-confirm] modal) --- */
.confirm-icon {
    width: 64px;
    height: 64px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.6rem;
}
.confirm-icon-danger  { background: var(--rt-danger-light);  color: var(--rt-danger); }
.confirm-icon-warning { background: var(--rt-warning-light); color: var(--rt-warning); }
.confirm-icon-primary { background: rgba(var(--rt-primary-rgb), .12); color: var(--rt-primary); }
.confirm-icon-success { background: var(--rt-success-light); color: var(--rt-success); }

[data-theme="dark"] .confirm-icon-danger  { color: #FCA5A5; }
[data-theme="dark"] .confirm-icon-warning { color: #FCD34D; }
[data-theme="dark"] .confirm-icon-success { color: #86EFAC; }

/* Confirm dialog actions — labels always on ONE line, buttons auto-fit.
   Roomier width so short labels sit side-by-side; long labels (or narrow
   screens) wrap to full-width stacked rows instead of growing button height.
   Scoped by #id so it wins over Bootstrap's .modal-dialog sizing. */
#app-confirm-modal .app-confirm-dialog { max-width: 400px; }
#app-confirm-modal .app-confirm-actions .btn {
    flex: 1 0 auto;
    white-space: nowrap;
    padding-inline: 1.5rem;
}

/* Safety net for EVERY modal, all modules: a button's label never wraps to a
   second line (which used to grow button height in narrow modals). If several
   buttons can't fit one row, the flex-wrap footer stacks WHOLE buttons instead,
   each still on a single line. */
.modal .btn { white-space: nowrap; }
.modal .modal-footer { flex-wrap: wrap; }

/* --- Buttons: ONE height standard for the whole app ----------------------
   Previously button geometry was split across two files — theme.css set the
   padding shorthand, this file then overrode only padding-top/bottom — so the
   real height depended on stylesheet load order and no button had a defined
   size. Three sizes exist, each pinned to a fixed height from the control
   scale so buttons and inputs always line up in a toolbar. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rt-sp-2);
    min-height: var(--rt-ctl-h);
    padding: 0 var(--rt-sp-4);
    font-size: var(--rt-fs-body);
    font-weight: 500;
    line-height: 1.2;
    border-radius: var(--rt-radius-sm);
    white-space: nowrap;
}

.btn-sm {
    min-height: var(--rt-ctl-h-sm);
    padding: 0 var(--rt-sp-3);
    font-size: var(--rt-fs-meta);
    border-radius: var(--rt-radius-sm);
}

.btn-lg {
    min-height: var(--rt-ctl-h-lg);
    padding: 0 var(--rt-sp-6);
    font-size: var(--rt-fs-lead);
    border-radius: var(--rt-radius);
}

/* `.btn-xs` shipped twice with conflicting values (14px/6px radius in the
   RECEPTION block vs 12px/4px in ERRORS), so the same class rendered two
   different buttons depending on whether `.btn` was also present. One
   definition, matching the scale. */
.btn.btn-xs, .btn-xs {
    min-height: 26px;
    padding: 0 var(--rt-sp-2);
    font-size: var(--rt-fs-meta);
    line-height: 1.2;
    border-radius: 6px;
}

/* Icon-only square buttons keep a true square box at every size */
.btn-icon           { width: var(--rt-ctl-h);    height: var(--rt-ctl-h);    min-height: 0; padding: 0; }
.btn-icon.btn-sm    { width: var(--rt-ctl-h-sm); height: var(--rt-ctl-h-sm); min-height: 0; padding: 0; }
.btn-icon.btn-lg    { width: var(--rt-ctl-h-lg); height: var(--rt-ctl-h-lg); min-height: 0; padding: 0; }

/* Icons inside buttons: optical size, never scaled by the label */
.btn > i { font-size: 1em; }

/* Icon-only buttons must carry `.btn-icon` to get the square box — CSS cannot
   tell an icon-only button from an icon+label one (`:only-child` ignores text
   nodes, so matching on it squashes labelled buttons). */

/* Focus ring — consistent, visible, keyboard-only */
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--rt-primary);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- Form controls: same height scale as buttons ------------------------- */
.form-control, .form-select {
    min-height: var(--rt-ctl-h);
    font-size: var(--rt-fs-body);
    border-radius: var(--rt-radius-sm);
}
.form-control-sm, .form-select-sm {
    min-height: var(--rt-ctl-h-sm);
    font-size: var(--rt-fs-meta);
}

/* A select must always reserve room for its chevron, otherwise the arrow is
   painted straight over the selected value — which is what the DataTables
   page-length picker was doing at every size. */
.form-select    { padding-right: 2.25rem; background-position: right .75rem center; }
.form-select-sm { padding-right: 1.9rem;  background-position: right .6rem center; }
textarea.form-control { min-height: 96px; padding-top: .5rem; }

.form-label {
    font-size: var(--rt-fs-meta);
    font-weight: 600;
    color: var(--rt-text);
    margin-bottom: var(--rt-sp-1);
}
.form-text { font-size: var(--rt-fs-meta); color: var(--rt-text-muted); }

/* --- File inputs --------------------------------------------------------
   File pickers were written four different ways across the app: a custom
   `.file-input-btn`, a Bootstrap `.form-control`, a hidden input with its own
   trigger, and — most visibly — bare inputs rendering Chrome's raw grey
   "Choose File / No file chosen" widget. Styling the native shadow part gives
   every one of them the same look without touching the markup. */
input[type="file"]:not(.d-none) {
    display: block;
    width: 100%;
    min-height: var(--rt-ctl-h);
    padding: 0;
    font-size: var(--rt-fs-body);
    color: var(--rt-text-muted);
    background: var(--rt-card-bg);
    border: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-sm);
    cursor: pointer;
}

input[type="file"]:not(.d-none)::file-selector-button {
    height: calc(var(--rt-ctl-h) - 2px);
    margin-inline-end: var(--rt-sp-3);
    padding: 0 var(--rt-sp-4);
    font-family: inherit;
    font-size: var(--rt-fs-meta);
    font-weight: 500;
    color: var(--rt-text);
    background: var(--rt-body-bg);
    border: 0;
    border-inline-end: 1px solid var(--rt-border);
    border-radius: var(--rt-radius-sm) 0 0 var(--rt-radius-sm);
    cursor: pointer;
    transition: var(--rt-trans);
}

input[type="file"]:not(.d-none):hover::file-selector-button {
    background: var(--rt-primary-light);
    color: var(--rt-primary);
}

input[type="file"].form-control-sm:not(.d-none) { min-height: var(--rt-ctl-h-sm); }
input[type="file"].form-control-sm:not(.d-none)::file-selector-button {
    height: calc(var(--rt-ctl-h-sm) - 2px);
}

/* --- Modals: centred by default -----------------------------------------
   29 of the app's 32 modals lacked `.modal-dialog-centered`, so dialogs
   opened pinned to the top of the viewport while the three that had it were
   centred. Centring is the house style; apply it to all of them here rather
   than editing every view. */
.modal-dialog {
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}
.modal-dialog > .modal-content { width: 100%; }

/* Header, body and footer shared a horizontal inset of 1.25rem except the
   body, which fell through to Bootstrap's 1rem — every modal's content was
   misaligned by 4px against its own title. One inset for all three. */
.modal-header,
.modal-body,
.modal-footer { padding: var(--rt-sp-5) var(--rt-sp-6); }
.modal-header { padding-bottom: var(--rt-sp-4); }
.modal-footer { padding-top: var(--rt-sp-4); gap: var(--rt-sp-2); }
.modal-footer > * { margin: 0; }
.modal-title { font-size: var(--rt-fs-lead); font-weight: 600; }

/* The backdrop was stock Bootstrap #000/.5 — heavy against the light shell
   and nearly invisible over the dark theme. Match it to the shadow palette
   and blur the page behind so the dialog separates cleanly. */
.modal-backdrop.show { background: rgba(15, 23, 42, .45); opacity: 1; }
.modal.show { backdrop-filter: blur(3px); }
[data-theme="dark"] .modal-backdrop.show { background: rgba(0, 0, 0, .6); }

/* --- Cards: one header/body rhythm -------------------------------------- */
.card { border-radius: var(--rt-radius); }
.card-header {
    padding: var(--rt-sp-5) var(--rt-sp-6);
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rt-sp-3);
}
.card-body   { padding: var(--rt-sp-6); }
.card-footer { padding: var(--rt-sp-4) var(--rt-sp-6); }

/* Card titles were a mix of h2 and h5 across modules; normalise the rendered
   size so the markup tag no longer changes the look. */
.card-title {
    font-size: var(--rt-fs-lead);
    font-weight: 600;
    margin: 0;
}

/* --- Toast ---------------------------------------------------------------
   Transient confirmation for an action that has no page reload — device sync,
   kanban drag, inline saves. One implementation for the whole app (there used
   to be a floating pill in kanban and an inline alert stack in devices). */
.app-toast {
    position: fixed;
    bottom: var(--rt-sp-6);
    right: var(--rt-sp-6);
    z-index: 9999;
    min-width: 220px;
    max-width: 340px;
    padding: var(--rt-sp-3) var(--rt-sp-4);
    border-radius: var(--rt-radius-sm);
    font-size: var(--rt-fs-body);
    font-weight: 500;
    color: #fff;
    background: var(--rt-text);
    box-shadow: var(--rt-shadow-lg);
    transform: translateY(80px);
    opacity: 0;
    transition: transform .25s, opacity .25s;
}
.app-toast.show      { transform: translateY(0); opacity: 1; }
.app-toast.is-success { background: var(--rt-success); }
.app-toast.is-error   { background: var(--rt-danger); }
.app-toast.is-warning { background: var(--rt-warning); }
.app-toast.is-info    { background: var(--rt-info); }

/* --- Page header --------------------------------------------------------- */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--rt-sp-3);
    margin-bottom: var(--rt-sp-6);
}
.page-header h1 { font-size: var(--rt-fs-h2); margin: 0; }
.page-header .breadcrumb { margin: var(--rt-sp-1) 0 0; font-size: var(--rt-fs-meta); }

/* --- CRUD form pages -----------------------------------------------------
   Create/edit screens used five different wrappers and five different column
   widths, so one form opened centred and narrow while the next ran the full
   width of the screen with 1300px-wide inputs. `.form-page` is the single
   wrapper every create/edit view uses; `.form-page-wide` is the opt-out for
   the genuinely two-column screens (assignments, org profile). */
.form-page {
    max-width: 780px;
    margin-inline: auto;
}
.form-page-wide {
    max-width: 1180px;
    margin-inline: auto;
}

/* Form actions always sit in the same place: right-aligned, primary last —
   matching the reading order of every dialog in the app. */
.form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--rt-sp-2);
    flex-wrap: wrap;
}
.form-actions .btn { min-width: 112px; }

/* Long forms group fields under a section label */
.form-section + .form-section { margin-top: var(--rt-sp-8); }
.form-section-title {
    font-size: var(--rt-fs-meta);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--rt-text-muted);
    padding-bottom: var(--rt-sp-2);
    margin-bottom: var(--rt-sp-4);
    border-bottom: 1px solid var(--rt-border);
}

/* Inputs inside a form never stretch past a comfortable measure, even in a
   full-width card — a 1300px-wide "Email" field is unusable. */
.form-page .form-control,
.form-page .form-select { max-width: 100%; }

/* NOTE: stat cards already have a working definition (components.css for the
   base, the ANALYTICS block below for the horizontal `.stat-card-h` variant).
   Do not redefine `.stat-card` here — several pages use a vertical layout and
   forcing a flex row on the base class breaks them. Pages that looked
   different were using ad-hoc markup, not a missing style; the fix is to use
   `stat-card stat-card-h` with the standard label/value/icon structure. */


/* ============================================================
   UTILITIES — the named classes that replaced inline style=""
   ============================================================
   The views used to carry ~200 inline `style` attributes, which the project
   rules forbid and which made the same measurement drift between pages (six
   different filter widths, four progress-bar heights). Each utility below is
   the single approved way to express that intent. The ONLY inline style still
   allowed is a CSS custom property carrying a genuinely dynamic value —
   `style="--pct: 42%"` — which the rules explicitly permit. */

/* --- Toolbar filter controls -------------------------------------------
   Filter selects above a DataTable were pinned at 110/130/140/150/160/170/
   180/320px depending on the page. Three steps, applied by intent. */
/* Fixed widths, not `width:100%` — these controls sit in a flex toolbar and a
   percentage width makes them claim the whole row, which wrapped four filters
   onto two lines. `flex: 0 0 auto` keeps them from stretching either. */
.filter-control,
.filter-control-xs,
.filter-control-sm,
.filter-control-lg,
.filter-control-xl { flex: 0 0 auto; }

.filter-control     { width: 160px; }
.filter-control-sm  { width: 130px; }
.filter-control-lg  { width: 200px; }

/* --- Progress bars -----------------------------------------------------
   theme.css already defines .progress (6px), .progress-lg (10px) and
   .progress-xl (14px); these fill the two missing steps. */
.progress-xs { height: 5px; }
.progress-sm { height: 6px; }
.progress-md { height: 8px; }

/* A progress bar's width is data, so it stays inline — but as a custom
   property, not a raw `width`. Usage: <div class="progress-bar is-pct"
   style="--pct: {{ $n }}%"> */
.progress-bar.is-pct { width: var(--pct, 0%); }

/* Fixed-size meters that sit inside a table cell */
.meter-sm { width: 60px; }
.meter-md { width: 80px; }

/* --- Truncation --------------------------------------------------------
   Pair with Bootstrap's .text-truncate, which needs a width to bite. */
.truncate-sm { max-width: 200px; }
.truncate-md { max-width: 240px; }
.truncate-lg { max-width: 320px; }

/* Table column sizing lives with the other sizing steps further down. */

/* --- Whitespace --------------------------------------------------------- */
.ws-pre-line { white-space: pre-line; }
.ws-pre-wrap { white-space: pre-wrap; }

/* --- Chart containers ---------------------------------------------------
   ApexCharts needs an explicit height on its host element. */
.chart-box    { width: 100%; height: 220px; }
.chart-box-lg { width: 100%; min-height: 260px; }

/* --- Empty-state icon --------------------------------------------------- */
.empty-icon { font-size: 32px; color: var(--rt-text-soft); }

/* --- Legend dot variants ------------------------------------------------
   The "idle" series has no semantic colour token, so it was hardcoded inline
   on every legend row. */
.legend-dot.is-idle { background: var(--rt-text-soft); }

/* --- Extra-small avatar -------------------------------------------------
   Stacked assignee avatars in dense table rows. theme.css stops at
   .avatar-xs (24px); these two are smaller still. */
.avatar-2xs { width: 22px; height: 22px; font-size: var(--rt-fs-meta); }
.avatar-3xs { width: 20px; height: 20px; font-size: var(--rt-fs-meta); }

/* --- Additional sizing steps -------------------------------------------
   Filled in after the first conversion pass surfaced widths the initial
   three-step scale didn't cover. */
.filter-control-xs  { width: 120px; }
.filter-control-xl  { width: 280px; }
.truncate-xs { max-width: 150px; }

/* On a narrow viewport a fixed-width filter would overflow its toolbar. */
@media (max-width: 575.98px) {
    .filter-control,
    .filter-control-xs,
    .filter-control-sm,
    .filter-control-lg,
    .filter-control-xl { width: 100%; }
}

.col-min-xs { min-width: 42px; }
.col-min-sm { min-width: 32px; }
.col-min    { min-width: 110px; }
.col-min-md { min-width: 130px; }
.col-min-lg { min-width: 160px; }
.col-w-40   { width: 40%; }
.col-w-fixed { width: 320px; }

/* --- Scroll containers -------------------------------------------------- */
.scroll-sm { max-height: 260px; overflow-y: auto; }
.drop-zone { min-height: 80px; }
.calendar-host { min-height: 580px; }

/* --- Small fixed boxes -------------------------------------------------- */
/* An icon in a label column, kept on a common left edge */
.icon-fixed { width: 16px; text-align: center; display: inline-block; }
/* Numeric suffix in the gantt legend */
.value-fixed { width: 32px; text-align: right; }
/* Count pill on a sidebar link. A number badge is not prose, so it sits below
   the 13px text floor — but keep the box tight so a long menu label still fits
   on one line next to it. */
.badge-count {
    font-size: 11px;
    line-height: 1.45;
    min-width: 18px;
    padding: 0 5px;
    flex-shrink: 0;
}
/* Larger stat-card icon used by the file manager tiles */
.stat-icon-sm { width: 36px; height: 36px; font-size: var(--rt-fs-lead); }
/* Empty-state icon, compact variant (kanban column) */
.empty-icon-sm { font-size: 20px; color: var(--rt-text-soft); }
/* A track that shows its full length as a faint rail behind the real bar */
.progress-bar-ghost { width: 100%; opacity: .15; }

/* --- Misc --------------------------------------------------------------- */
.cursor-pointer { cursor: pointer; }
.min-w-0 { min-width: 0; }
.dropdown-w-md { min-width: 220px; }
/* Chat bubble never spans the full thread width */
.bubble-max { max-width: 80%; }

/* Clamp a teaser to N lines with an ellipsis */
.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }


/* ============================================================
   FORMS — Choices.js select skin, Flatpickr date picker skin
   ============================================================ */

/* --- Choices.js: base wrapper --- */
.choices { margin-bottom: 0; }
.choices__inner {
    background: var(--rt-input-bg, var(--rt-card-bg));
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    min-height: unset;
    padding: 0.375rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--rt-text);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.choices.is-open .choices__inner,
.choices.is-focused .choices__inner {
    border-color: var(--rt-primary);
    box-shadow: 0 0 0 3px rgba(var(--rt-primary-rgb), .12);
    outline: none;
}
/* Validation error state */
.choices.is-invalid .choices__inner {
    border-color: var(--bs-danger);
    box-shadow: 0 0 0 3px rgba(220,53,69,.15);
}
.choices.is-invalid ~ .invalid-feedback { display: block; }

/* Single-value selected text */
.choices__list--single { padding: 0; }
.choices__list--single .choices__item { font-size: 0.9375rem; color: var(--rt-text); }

/* Placeholder */
.choices__placeholder { opacity: 1; color: var(--rt-text-muted); }

/* Caret arrow */
.choices[data-type*="select-one"]::after {
    border-color: var(--rt-text-muted) transparent transparent transparent;
    right: 14px;
}
.choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--rt-primary) transparent;
}

/* Search input inside dropdown */
.choices__input {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rt-border) !important;
    border-radius: 0 !important;
    padding: 0.35rem 0.5rem !important;
    font-size: 0.875rem !important;
    color: var(--rt-text) !important;
    width: 100% !important;
    box-shadow: none !important;
    margin-bottom: 4px;
}
.choices__input:focus { box-shadow: none !important; border-bottom-color: var(--rt-primary) !important; }

/* Dropdown panel */
.choices__list--dropdown,
.choices__list[aria-expanded] {
    background: var(--rt-card-bg);
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.10);
    margin-top: 4px;
    z-index: 1060;
}
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
    font-size: 0.875rem;
    padding: 0.45rem 0.85rem;
    color: var(--rt-text);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(var(--rt-primary-rgb), .10);
    color: var(--rt-primary);
}
/* Already-selected item tick */
.choices__list--dropdown .choices__item.is-selected,
.choices__list[aria-expanded] .choices__item.is-selected {
    font-weight: 600;
    color: var(--rt-primary);
}

/* No results */
.choices__list--dropdown .choices__item--disabled,
.choices__list[aria-expanded] .choices__item--disabled {
    opacity: .55;
    font-size: 0.8125rem;
}

/* --- Flatpickr: calendar skin --- */
.flatpickr-calendar {
    background: var(--rt-card-bg) !important;
    border: 1px solid var(--rt-border) !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.12) !important;
    font-size: 14px;
}
.flatpickr-months .flatpickr-month,
.flatpickr-weekdays,
span.flatpickr-weekday {
    background: var(--rt-card-bg) !important;
    color: var(--rt-text) !important;
    fill: var(--rt-text);
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    fill: var(--rt-text-muted) !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { fill: var(--rt-primary) !important; }
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months {
    color: var(--rt-text) !important;
    background: transparent !important;
}
.flatpickr-day {
    color: var(--rt-text) !important;
    border-radius: 6px !important;
}
.flatpickr-day:hover { background: rgba(var(--rt-primary-rgb),.10) !important; border-color: transparent !important; }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--rt-primary) !important;
    border-color: var(--rt-primary) !important;
    color: #fff !important;
}
.flatpickr-day.today:not(.selected) {
    border-color: var(--rt-primary) !important;
    color: var(--rt-primary) !important;
}
.flatpickr-day.inRange {
    background: rgba(var(--rt-primary-rgb),.12) !important;
    box-shadow: -5px 0 0 rgba(var(--rt-primary-rgb),.12), 5px 0 0 rgba(var(--rt-primary-rgb),.12) !important;
    border-color: transparent !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { opacity: .35; }
.flatpickr-time input { color: var(--rt-text) !important; background: transparent !important; }
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm { color: var(--rt-text-muted) !important; }

/* Choices.js sm variant — mirrors Bootstrap .form-select-sm / .form-control-sm */
/* Fixed height only for single selects; multi-selects must grow to fit tags. */
.choices--sm[data-type*="select-one"] .choices__inner {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    min-height: unset;
    height: calc(1.5em + 0.5rem + 2px); /* 31px — exact match with form-control-sm / btn-sm */
    line-height: 1.5;
    display: flex;
    align-items: center;
}

/* Multi-select: tag (pill) layout — wraps to multiple rows, never clipped */
.choices[data-type*="select-multiple"] .choices__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    height: auto;
    min-height: calc(1.5em + 0.75rem + 2px);
    padding: 0.25rem 0.4rem;
    cursor: text;
}
.choices--sm[data-type*="select-multiple"] .choices__inner {
    min-height: calc(1.5em + 0.5rem + 2px);
    font-size: 0.875rem;
}
.choices[data-type*="select-multiple"] .choices__list--multiple { display: inline; }
.choices__list--multiple .choices__item {
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.4;
    background: rgba(var(--rt-primary-rgb), .12);
    border: 1px solid rgba(var(--rt-primary-rgb), .25);
    color: var(--rt-primary);
    word-break: break-word;
}
.choices__list--multiple .choices__item.is-highlighted {
    background: rgba(var(--rt-primary-rgb), .20);
    border-color: rgba(var(--rt-primary-rgb), .45);
}
/* Remove ("x") button on each tag */
.choices[data-type*="select-multiple"] .choices__button {
    margin: 0 -2px 0 8px;
    padding-left: 0;
    width: 16px;
    border-left: 1px solid rgba(var(--rt-primary-rgb), .3);
    opacity: .7;
}
.choices[data-type*="select-multiple"] .choices__button:hover { opacity: 1; }
/* The search field inside a multi-select sits inline with the tags */
.choices[data-type*="select-multiple"] .choices__input {
    margin-bottom: 0;
    border-bottom: none !important;
    padding: 0.15rem 0.25rem !important;
    background: transparent !important;
}
.choices--sm[data-type*="select-one"]::after { right: 10px; }
.choices--sm .choices__list--single,
.choices--sm .choices__list--single .choices__item,
.choices--sm .choices__placeholder { font-size: 0.875rem; line-height: 1.5; }

/* ============================================================
   DATATABLES — custom skin (search, pagination, length, info)
   ============================================================ */

/* Empty and loading states -------------------------------------------------
   Both used to render as a bare line of text pinned to the left edge of the
   table, which read as a broken row rather than a state. Centre them, give
   them breathing room and a muted treatment so a list with no data still
   looks intentional. */
table.dataTable td.dataTables_empty,
table.dataTable td.dt-empty {
    padding: var(--rt-sp-8) var(--rt-sp-4);
    text-align: center;
    color: var(--rt-text-muted);
    font-size: var(--rt-fs-body);
}

table.dataTable td.dataTables_empty::before,
table.dataTable td.dt-empty::before {
    content: "\f15b";               /* fa-file — neutral "nothing here" mark */
    font-family: "Font Awesome 6 Pro", "Font Awesome 6 Free";
    font-weight: 900;
    display: block;
    font-size: 28px;
    color: var(--rt-text-soft);
    margin-bottom: var(--rt-sp-3);
}

/* While an AJAX page is in flight the table body is replaced by a single
   "loading" cell — show a spinner beside it instead of naked text. */
.dataTables_processing,
.dt-processing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rt-sp-2);
    color: var(--rt-text-muted);
}

/* Controls bar (length + search) — avoids Bootstrap .row negative margins
   inside overflow:hidden cards */
.dt-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    flex-wrap: wrap;
}

/* Export buttons toolbar (Excel / PDF) sitting inside the controls bar */
.dt-toolbar { display: flex; align-items: center; }
.dt-toolbar .dt-buttons { display: inline-flex; gap: .5rem; margin: 0; }
.dt-toolbar .dt-button { margin: 0; }
.dt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid var(--rt-border);
    font-size: 14px;
    color: var(--rt-text-muted);
    flex-wrap: wrap;
}

/* Length selector — label wraps "Show X entries", keep inline */
.dt-length label,
.dataTables_length label {
    display: inline-flex; align-items: center; gap: .4rem;
    margin: 0; font-size: 14px; color: var(--rt-text-muted);
    white-space: nowrap;
}
.dt-length select,
.dataTables_length select { width: auto; min-width: 70px; font-size: 14px; padding: .25rem .5rem; display: inline-block; }

/* Search input — icon + styled input, "Search:" label text hidden.
   DT v2 generates: .dt-filter > .dt-search > input + label (label is empty, after input).
   ::before lives on .dt-search (not .dt-filter) so top:50% calculates against the
   input's height only. label gets height:0 so it can never inflate .dt-search's height. */
.dt-filter,
.dataTables_filter { display: flex; align-items: center; }

.dt-filter .dt-search { position: relative; }

.dt-filter .dt-search::before {
    content: '\f002';
    font-family: 'Font Awesome 6 Pro', 'Font Awesome 6 Free', 'FontAwesome';
    font-weight: 900;
    font-size: 14px;
    color: var(--rt-text-muted);
    position: absolute;
    left: .65rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    line-height: 1;
    z-index: 1;
}
.dt-filter label,
.dataTables_filter label { display: block; height: 0; overflow: hidden; margin: 0; }

.dt-filter input,
.dataTables_filter input {
    font-size: 14px; padding: .3rem .65rem .3rem 2rem; min-width: 200px;
    border: 1px solid var(--rt-border); border-radius: 8px;
    background: var(--rt-card-bg); color: var(--rt-text); outline: none;
}
.dt-filter input:focus,
.dataTables_filter input:focus { border-color: var(--rt-primary); box-shadow: 0 0 0 3px rgba(var(--rt-primary-rgb),.12); }

/* Info text */
.dt-info-text,
.dataTables_info { font-size: 14px; color: var(--rt-text-muted); }

/* Pagination */
.dt-paging .pagination,
.dataTables_paginate .pagination { margin: 0; }
.dt-paging .page-link,
.dataTables_paginate .page-link { font-size: 14px; padding: .3rem .6rem; border-radius: 6px !important; border: 1px solid var(--rt-border); color: var(--rt-text); }
.dt-paging .page-item.active .page-link,
.dataTables_paginate .page-item.active .page-link { background: var(--rt-primary); border-color: var(--rt-primary); color: #fff; }
.dt-paging .page-item.disabled .page-link,
.dataTables_paginate .page-item.disabled .page-link { opacity: .45; }

/* Table itself */
table.dataTable { width: 100% !important; table-layout: auto; }
table.dataTable thead th { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--rt-text-muted); border-bottom: 1px solid var(--rt-border) !important; }
table.dataTable tbody td { font-size: 14px; border-top: 1px solid var(--rt-border); vertical-align: middle; }

/* Shrink columns to content width */
table.dataTable .dt-col-nowrap,
table.dataTable .dt-col-nowrap * { white-space: nowrap; }

/* Name column: flexible, wraps, takes remaining space */
table.dataTable .dt-col-name { width: 99%; min-width: 200px; }
table.dataTable .dt-col-name .dt-cell-clamp { white-space: normal; }

/* Generic flexible/fill column: same trick as .dt-col-name, for a
   non-name column that should absorb the remaining table width and wrap
   (e.g. a department/category cell). Needs a real min-width — otherwise
   table-layout:auto shrinks a wrappable column down to its longest word. */
table.dataTable .dt-col-fill { width: 99%; min-width: 220px; white-space: normal; }
table.dataTable.no-footer { border-bottom: none; }

/* 2-line clamp for long cell text with native title tooltip.
   overflow-wrap (not word-break) so lines break at spaces first and
   only split a word when a single token can't fit at all. */
.dt-cell-clamp {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: break-word;
    cursor: default;
}

/* Action column: flex wrapper ignores text-align — enforce right alignment */
table.dataTable td.text-end > .d-flex { justify-content: flex-end; }


/* ============================================================
   MODULE: AUTH — login page, forgot/reset password
   ============================================================ */

/* Password toggle button in input-group */
.input-group button.input-group-text {
    cursor: pointer;
    background: transparent;
    border-left: 0;
}
.input-group button.input-group-text:hover {
    background: var(--rt-body-bg, #f5f5f5);
}


/* ============================================================
   MODULE: SUPER ADMIN — org list, system dashboard
   ============================================================ */

/* Stat card — horizontal variant: icon right, text left.
   Balance the label against the number: a slightly bolder label, a slightly
   smaller value, and a tight gap so the two lines read as one unit. */
.stat-card-h .stat-icon  { margin-bottom: 0; flex-shrink: 0; }
.stat-card-h .stat-label { font-size: 14px; font-weight: 600; margin-bottom: .15rem; line-height: 1.3; }
.stat-card-h .stat-value { font-size: 1.4rem; line-height: 1.1; margin-bottom: 0; }
/* Unit suffix ("ball") after a score — muted and smaller so the number still
   leads. Used where a value is a 0-100 rating rather than a percentage. */
.stat-value .stat-unit { font-size: .6em; font-weight: 600; opacity: .65; margin-left: .12em; }
/* Legacy override used by super admin pages */
.stat-card .stat-icon.mb-0 { margin-bottom: 0; }
.stat-card .stat-value { font-size: 1.5rem; }


/* ============================================================
   MODULE: ORG SETTINGS — departments, positions, members
   ============================================================ */

/* Org profile logo upload widget */
.settings-logo-img {
    width: 120px;
    height: 120px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--rt-border);
    background: var(--rt-body-bg);
    padding: 6px;
}
.settings-logo-placeholder {
    width: 120px;
    height: 120px;
    border-radius: 12px;
    border: 2px dashed var(--rt-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rt-body-bg);
}


/* ============================================================
   MODULE: PROFILE — profile settings page
   ============================================================ */

/* Tab nav */
.profile-tabs { border-bottom: 2px solid var(--rt-border); margin-bottom: 0; }
.profile-tabs .nav-link {
    color: var(--rt-text-muted);
    font-size: 14px;
    font-weight: 500;
    padding: .5rem 1rem;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    border-radius: 0;
    transition: color .15s, border-color .15s;
}
.profile-tabs .nav-link:hover { color: var(--rt-primary); border-bottom-color: transparent; }
.profile-tabs .nav-link.active { color: var(--rt-primary); border-bottom-color: var(--rt-primary); background: none; }

/* Avatar upload widget */
.profile-avatar-wrap { position: relative; }
.profile-avatar-img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--rt-border);
}
.profile-avatar-placeholder {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px dashed var(--rt-border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rt-body-bg);
}
.profile-avatar-initials {
    font-size: 28px;
    font-weight: 700;
    color: var(--rt-primary);
    line-height: 1;
    text-transform: uppercase;
}

/* Roles matrix table */
.roles-matrix-table th,
.roles-matrix-table td { border-color: var(--rt-border); }
.roles-matrix-table .roles-matrix-perm-col { min-width: 220px; }
.roles-matrix-group td {
    background: var(--rt-light);
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .04em;
}

/* ============================================================
   MODULE: HR — employees, attendance, leaves, announcements
   ============================================================ */

/* ── Attendance: per-day punch timeline (FaceID terminals) ─── */
.att-timeline {
    position: relative;
    padding-left: 8px;
}
.att-timeline-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding-bottom: 14px;
}
.att-timeline-item:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 30px;
    bottom: -4px;
    width: 2px;
    background: var(--bs-border-color, #e9edf2);
}
.att-timeline-dot {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    z-index: 1;
}
.att-timeline-dot.is-in  { background: rgba(25, 135, 84, .12);  color: #198754; }
.att-timeline-dot.is-out { background: rgba(220, 53, 69, .12);  color: #dc3545; }
.att-timeline-body {
    flex: 1 1 auto;
    padding: 4px 0;
}


/* ============================================================
   MODULE: PROJECTS — list, detail, tasks, kanban, timeline
   ============================================================ */

/* ── Department landing cards (projects grouped by department) ── */
.dept-card { transition: var(--rt-trans); cursor: pointer; }
.dept-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--rt-shadow);
    border-color: var(--rt-primary);
}
.dept-card:hover .fa-arrow-right { color: var(--rt-primary) !important; }

/* ── Member identity rows: tighten the name / sub-label stack ──
   The two stacked lines inherited the body line-height (1.55), leaving a big
   gap between a member's name and their role/email. Pin a tight line-height so
   the pair reads as one block (overview cards + the team-tab table). */
.proj-member-row .fw-medium,
.proj-member-row .text-muted,
#tab-team .table td .fw-medium,
#tab-team .table td .text-muted { line-height: 1.3; }

/* ── Kanban board layout ───────────────────────────────────── */
.kanban-wrap {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 16px;
    min-height: 0;
}
.kanban-wrap::-webkit-scrollbar { height: 6px; }
.kanban-wrap::-webkit-scrollbar-track { background: transparent; }
.kanban-wrap::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 3px; }

/* ── Column ────────────────────────────────────────────────── */
.kb-col {
    flex: 0 0 290px;
    min-width: 290px;
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    background: var(--rt-light);
    border: 1px solid var(--rt-border);
    max-height: calc(100vh - 220px);
}
.kb-col-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 10px;
    border-bottom: 1px solid var(--rt-border);
    background: transparent;
    border-radius: 12px 12px 0 0;
}
.kb-col-header .kb-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.kb-col-header .kb-col-title {
    font-size: 14px;
    font-weight: 600;
    flex: 1;
    color: var(--rt-text);
}
.kb-col-header .kb-count {
    font-size: 14px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 20px;
    background: var(--rt-border);
    color: var(--rt-text-muted);
    min-width: 22px;
    text-align: center;
}
.kb-col-header .kb-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--rt-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background .15s, color .15s;
    flex-shrink: 0;
}
.kb-col-header .kb-add-btn:hover { background: var(--rt-primary); color: #fff; }

/* ── Column body / scroll ──────────────────────────────────── */
.kb-col-body {
    padding: 10px 10px 6px;
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
    scrollbar-color: var(--rt-border) transparent;
    min-height: 60px;
}
.kb-col-body::-webkit-scrollbar { width: 4px; }
.kb-col-body::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 2px; }

/* ── Task card ─────────────────────────────────────────────── */
.kb-card {
    background: var(--rt-surface);
    border: 1px solid var(--rt-border);
    border-radius: 10px;
    padding: 12px 13px 10px;
    margin-bottom: 8px;
    cursor: grab;
    transition: box-shadow .18s, transform .12s, border-color .18s;
    position: relative;
    border-left: 3px solid transparent;
    user-select: none;
}
.kb-card:active { cursor: grabbing; }
.kb-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,.09);
    border-color: var(--rt-primary-light, #c3d9ff);
    transform: translateY(-1px);
}
.kb-card.sortable-ghost {
    opacity: .4;
    border: 2px dashed var(--rt-primary);
    background: var(--rt-primary-soft, #ebf2ff);
}
.kb-card.sortable-drag {
    box-shadow: 0 8px 28px rgba(0,0,0,.18);
    transform: rotate(1.5deg) scale(1.02);
    cursor: grabbing;
    opacity: 1 !important;
}

/* Priority left border */
.kb-card[data-priority="low"]      { border-left-color: var(--rt-secondary, #adb5bd); }
.kb-card[data-priority="medium"]   { border-left-color: var(--rt-info, #17a2b8); }
.kb-card[data-priority="high"]     { border-left-color: var(--rt-warning, #ffc107); }
.kb-card[data-priority="critical"] { border-left-color: var(--rt-danger, #dc3545); }

/* Done column: muted cards */
.kb-col[data-status="done"] .kb-card { opacity: .75; }
.kb-col[data-status="cancelled"] .kb-card { opacity: .6; }

.kb-card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 5px;
    color: var(--rt-text);
}
.kb-card-desc {
    font-size: 14px;
    color: var(--rt-text-muted);
    line-height: 1.45;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--rt-text-muted);
    flex-wrap: wrap;
}
.kb-card-meta .kb-due { display: flex; align-items: center; gap: 3px; }
.kb-card-meta .kb-due.overdue { color: var(--rt-danger, #dc3545); font-weight: 600; }

.kb-card-actions {
    display: none;
    position: absolute;
    top: 8px;
    right: 8px;
    gap: 4px;
    background: var(--rt-surface);
    border-radius: 6px;
    padding: 2px;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.kb-card:hover .kb-card-actions { display: flex; }
.kb-card-actions a,
.kb-card-actions button,
.kb-card-actions span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    border: none;
    background: transparent;
    color: var(--rt-text-muted);
    font-size: 14px;
    cursor: pointer;
    transition: background .12s, color .12s;
    text-decoration: none;
}
.kb-card-actions a:hover      { background: var(--rt-primary-soft, #ebf2ff); color: var(--rt-primary); }
.kb-card-actions span:hover   { background: var(--rt-primary-soft, #ebf2ff); color: var(--rt-primary); }
.kb-card-actions button:hover { background: #fee2e2; color: var(--rt-danger, #dc3545); }

/* ── Sortable chosen state (while dragging) ────────────────── */
.kb-card.sortable-chosen { cursor: grabbing; }

/* ── Priority badge pill ───────────────────────────────────── */
.kb-priority {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    padding: 1px 7px;
    border-radius: 20px;
}

/* ── Milestone chip ────────────────────────────────────────── */
.kb-milestone {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--rt-border);
    color: var(--rt-text-muted);
    max-width: 120px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Drop-zone highlight ───────────────────────────────────── */
.kb-col-body.drag-over {
    background: rgba(var(--rt-primary-rgb), .06);
    border-radius: 8px;
    outline: 2px dashed var(--rt-primary);
    outline-offset: -4px;
}

/* ── Column color accents ──────────────────────────────────── */
.kb-col[data-status="todo"]        .kb-status-dot { background: #adb5bd; }
.kb-col[data-status="in_progress"] .kb-status-dot { background: var(--rt-info); }
.kb-col[data-status="in_review"]   .kb-status-dot { background: var(--rt-warning); }
.kb-col[data-status="done"]        .kb-status-dot { background: var(--rt-success); }
.kb-col[data-status="cancelled"]   .kb-status-dot { background: var(--rt-danger); }

.kb-col[data-status="todo"]        .kb-count { background: #e9ecef; color: #6c757d; }
.kb-col[data-status="in_progress"] .kb-count { background: #cff4fc; color: #055160; }
.kb-col[data-status="in_review"]   .kb-count { background: #fff3cd; color: #664d03; }
.kb-col[data-status="done"]        .kb-count { background: #d1e7dd; color: #0a3622; }
.kb-col[data-status="cancelled"]   .kb-count { background: #f8d7da; color: #58151c; }

/* ── Kanban filter bar ─────────────────────────────────────── */
.kanban-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 10px 14px;
}

/* Toast feedback moved to the COMPONENTS block as `.app-toast` — it is no
   longer kanban-specific. See modules/toast.js. */

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 575px) {
    .kb-col { flex: 0 0 260px; min-width: 260px; }
}

/* ── task-status-select styling (DataTable) ────────────────── */
.task-status-select {
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid transparent;
    appearance: auto;
}

/* ── Timeline / Gantt ──────────────────────────────────────── */
.gantt-wrap { overflow-x: auto; border-radius: 0 0 var(--rt-card-radius, 10px) var(--rt-card-radius, 10px); }
.gantt-wrap::-webkit-scrollbar { height: 6px; }
.gantt-wrap::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 3px; }

.gantt-head,
.gantt-row    { display: flex; min-width: 700px; }
.gantt-head   { border-bottom: 2px solid var(--rt-border); position: sticky; top: 0; background: var(--rt-surface); z-index: 5; }
.gantt-row    { border-bottom: 1px solid var(--rt-border); min-height: 44px; align-items: stretch; }
.gantt-row:last-child { border-bottom: none; }
.gantt-row.ms-row { background: var(--rt-body-bg, #f8f9fa); }
.gantt-row.task-row { padding-left: 0; }

.g-name {
    width: 220px;
    min-width: 220px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-right: 1px solid var(--rt-border);
    font-size: 14px;
    overflow: hidden;
}
.g-name-head { font-size: var(--rt-fs-meta); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--rt-text-muted); }
.g-name-nested { padding-left: 28px; }
.g-name-inner { min-width: 0; overflow: hidden; }
.g-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g-meta  { font-size: 14px; color: var(--rt-text-muted); }

.g-track {
    flex: 1;
    position: relative;
    padding: 0 4px;
}

/* Month header cells */
.g-months { flex: 1; display: flex; }
.g-month-cell {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: var(--rt-text-muted);
    border-left: 1px solid var(--rt-border);
    padding: 8px 4px;
}
.g-month-cell:first-child { border-left: none; }

/* Today line */
.g-today-line {
    position: absolute;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--rt-danger, #dc3545);
    opacity: .55;
    pointer-events: none;
    z-index: 4;
    left: var(--today-pct, -999%);
}
.g-today-line::before {
    content: '';
    position: absolute;
    top: 0; left: -4px;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--rt-danger, #dc3545);
}

/* Gantt bar — positioned via CSS custom properties set server-side */
.g-bar {
    position: absolute;
    top: 50%; transform: translateY(-50%);
    height: 22px; border-radius: 11px;
    left: var(--bar-left, 0%);
    width: var(--bar-width, 5%);
    min-width: 6px;
    display: flex; align-items: center;
    overflow: hidden;
    cursor: default;
    transition: opacity .15s, filter .15s;
}
.g-bar:hover { opacity: .88; filter: brightness(1.06); }

.g-bar.ms-bar { height: 14px; border-radius: 7px; }
.g-bar.task-bar { height: 20px; border-radius: 10px; }

.g-progress {
    position: absolute; left: 0; top: 0;
    height: 100%;
    width: var(--prog, 0%);
    background: rgba(0,0,0,.22);
    pointer-events: none;
}
.g-bar-label {
    position: relative; z-index: 1;
    font-size: 14px; font-weight: 700;
    color: #fff;
    padding: 0 7px;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

/* Milestone dot in name col */
.g-ms-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.g-task-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-left: 18px;
}
.g-task-dot-flush { margin-left: 0; }

/* Milestone divider */
.gantt-ms-divider {
    display: flex;
    min-width: 700px;
    background: var(--rt-primary-soft, #ebf2ff);
    border-bottom: 1px solid var(--rt-border);
    padding: 4px 12px 4px 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rt-primary);
    align-items: center;
    gap: 6px;
}

/* Empty state */
.gantt-empty {
    min-width: 700px;
    padding: 40px;
    text-align: center;
    color: var(--rt-text-muted);
}

/* ── Milestone list below gantt ────────────────────────────── */
.ms-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--rt-border);
}
.ms-list-item:last-child { border-bottom: none; }
.ms-icon-tile {
    width: 34px; height: 34px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; flex-shrink: 0;
}

/* ============================================================
   MODULE: ANALYTICS — dashboard widgets, report pages
   ============================================================ */

/* ── Stat trend pill ──────────────────────────────────────── */
.stat-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    font-weight: 600;
    margin-top: 2px;
}
.stat-trend.up      { color: var(--rt-success, #14C38E); }
.stat-trend.down    { color: var(--rt-danger,  #EF4444); }
.stat-trend.neutral { color: var(--rt-text-muted, #aaa); }

/* ── Legend dot ───────────────────────────────────────────── */
.legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    flex-shrink: 0;
}

/* ── Department breakdown rows ────────────────────────────── */
.dept-row {
    margin-bottom: 12px;
}
.dept-row:last-child { margin-bottom: 0; }
.dept-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--rt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}
.dept-bar-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.dept-count {
    font-size: 14px;
    font-weight: 700;
    color: var(--rt-text-muted);
    flex-shrink: 0;
    min-width: 20px;
    text-align: right;
}

/* ── Team workload rows ───────────────────────────────────── */
.workload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.workload-row:last-child { margin-bottom: 0; }
.workload-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Activity timeline ────────────────────────────────────── */
.dash-timeline {
    list-style: none;
    padding: 0;
    margin: 0;
}
.dash-timeline > li {
    display: flex;
    gap: 10px;
    padding-bottom: 14px;
    position: relative;
}
.dash-timeline > li:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 1px;
    background: var(--rt-border);
}
.dash-tl-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
}
.dash-tl-content { min-width: 0; flex: 1; }
.dash-tl-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-tl-meta {
    font-size: 14px;
    color: var(--rt-text-muted);
    margin-top: 2px;
}

/* ── Upcoming event items ─────────────────────────────────── */
.event-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--rt-border);
}
.event-item:last-child { border-bottom: none; padding-bottom: 0; }
.event-date-badge {
    min-width: 44px;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.edb-day {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: inherit;
}
.edb-mon {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: inherit;
    opacity: .75;
}
.event-content { min-width: 0; flex: 1; }
.event-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--rt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.event-subtitle {
    font-size: 14px;
    color: var(--rt-text-muted);
    margin-top: 2px;
}


/* ── Stat card border accent (action alert cards) ──────────── */
.border-warning-subtle { border-color: rgba(var(--rt-warning-rgb, 245,158,11), .35) !important; }
.border-info-subtle    { border-color: rgba(var(--rt-info-rgb,    14,165,233), .35) !important; }
.border-danger-subtle  { border-color: rgba(var(--rt-danger-rgb,  239,68,68),  .35) !important; }

/* ── Clamp text to 2 lines ─────────────────────────────────── */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Soft secondary icon background ────────────────────────── */
.bg-secondary-soft { background-color: rgba(100,116,139,.12); }
.text-purple { color: var(--rt-purple, #8B5CF6) !important; }

/* ── Attendance calendar ─────────────────────────────────────── */
.att-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.att-cal-dow {
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    color: var(--rt-text-muted, #94a3b8);
    padding: 4px 0 6px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.att-cal-cell {
    border-radius: 8px;
    padding: 8px 7px 7px;
    min-height: 68px;
    border: 1.5px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 5px;
    transition: opacity .15s, transform .12s, box-shadow .12s;
    text-decoration: none;
}
/* Clickable cells hover */
a.att-cal-cell:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    text-decoration: none;
}
/* Cell variants */
.att-cell-empty  { background: transparent; border-color: transparent; }
.att-cell-future { background: var(--rt-card-bg, #fff); border-color: var(--rt-border, #e2e8f0); opacity: .45; }
.att-cell-weekend{ background: rgba(100,116,139,.05); border-color: rgba(100,116,139,.12); }
.att-cell-nodata { background: var(--rt-card-bg, #fff); border-color: var(--rt-border, #e2e8f0); }
.att-cell-green  { background: rgba(34,197,94,.10); border-color: rgba(34,197,94,.25); }
.att-cell-yellow { background: rgba(245,158,11,.10); border-color: rgba(245,158,11,.28); }
.att-cell-red    { background: rgba(239,68,68,.08);  border-color: rgba(239,68,68,.22); }
/* Today highlight */
.att-cell-today  { border-color: var(--rt-primary, #4361ee) !important; border-width: 2px !important; }
.att-cell-today .att-day-num { color: var(--rt-primary, #4361ee); }
/* Day number */
.att-day-num {
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    color: var(--rt-heading-color, #1e293b);
}
.att-cell-future .att-day-num,
.att-cell-weekend .att-day-num { color: var(--rt-text-muted, #94a3b8); }
/* Stat pills inside cells */
.att-day-stats { display: flex; flex-wrap: wrap; gap: 3px; }
.att-stat-pill {
    font-size: 14px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 5px;
    line-height: 1.55;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
    transition: opacity .12s, transform .1s;
}
.att-stat-pill:hover { opacity: .82; transform: scale(1.05); text-decoration: none; }
.att-stat-pill.present { background: rgba(34,197,94,.22);  color: #15803d; }
.att-stat-pill.late    { background: rgba(245,158,11,.22); color: #92400e; }
.att-stat-pill.absent  { background: rgba(239,68,68,.18);  color: #b91c1c; }
/* Legend row */
.att-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--rt-body-color, #475569);
}
.att-legend-circle {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.att-legend-circle.present { background: var(--rt-success); }
.att-legend-circle.late    { background: var(--rt-warning); }
.att-legend-circle.absent  { background: var(--rt-danger); }
.att-legend-circle.leave   { background: #818cf8; }

/* ── Todo list item in dashboard ───────────────────────────── */
.dash-todo-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--rt-border);
    flex-shrink: 0;
    margin-top: 2px;
}

/* ── Dashboard KPI cards (redesign) ─────────────────────────── */
.kpi-card {
    background: var(--rt-card-bg);
    border-radius: var(--rt-radius-lg);
    border: 1px solid var(--rt-border);
    padding: 1.15rem 1.25rem 1rem 1.5rem;
    position: relative;
    overflow: hidden;
    transition: var(--rt-trans);
    display: flex;
    flex-direction: column;
}
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(15,23,42,.09); }
.kpi-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
    background: var(--kc, var(--rt-primary));
}
.kpi-card .kpi-deco {
    position: absolute;
    right: -18px; bottom: -18px;
    width: 80px; height: 80px;
    border-radius: 50%;
    background: rgba(var(--kc-rgb, 20,195,142), .07);
    pointer-events: none;
}
.kpi-card .kpi-body {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .65rem;
}
.kpi-card .kpi-text { flex: 1; min-width: 0; }
.kpi-card .kpi-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: rgba(var(--kc-rgb, 20,195,142), .13);
    color: var(--kc, var(--rt-primary));
    flex-shrink: 0;
}
.kpi-card .kpi-label {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--rt-text-muted);
    margin-bottom: .25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kpi-card .kpi-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--rt-heading);
    line-height: 1;
}
/* Color tokens */
.kpi-primary { --kc: var(--rt-primary); --kc-rgb: 20, 195, 142; }
.kpi-success { --kc: var(--rt-success); --kc-rgb: 34, 197, 94; }
.kpi-warning { --kc: var(--rt-warning); --kc-rgb: 245, 158, 11; }
.kpi-info    { --kc: var(--rt-info);    --kc-rgb: 14, 165, 233; }
.kpi-danger  { --kc: var(--rt-danger);  --kc-rgb: 239, 68, 68; }
.kpi-purple  { --kc: var(--rt-purple);  --kc-rgb: 139, 92, 246; }
.kpi-orange  { --kc: var(--rt-orange);  --kc-rgb: 251, 146, 60; }
/* ── Performance analytics (Samaradorlik tahlili) ───────────── */
/* Rank cell: a number badge, tabular so the column stays aligned */
.perf-rank {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 6px;
    border-radius: 8px;
    background: var(--rt-light, #f1f5f9);
    color: var(--rt-text-muted);
    font-size: var(--rt-fs-meta);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* Overall score cell: number + bucket badge over a thin progress rail */
.perf-overall { min-width: 150px; }
.perf-overall-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}
.perf-overall-val {
    font-size: var(--rt-fs-lead);
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

/* Component chip: score over its maximum (30 / 60 / 10) */
.perf-chip {
    font-size: var(--rt-fs-meta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.perf-chip b { font-weight: 800; }
.perf-chip small { opacity: .7; font-size: inherit; }

/* Detail page — identity strip above the score ring */
.perf-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    text-align: left;
}
.perf-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rt-primary-light);
    color: var(--rt-primary);
    font-weight: 700;
}
.perf-avatar img { width: 100%; height: 100%; object-fit: cover; }
.perf-score-chart { margin: -6px 0 2px; }

/* Detail page — one score component (bar + the raw figures behind it) */
.perf-component {
    padding-bottom: var(--rt-sp-4);
    margin-bottom: var(--rt-sp-4);
    border-bottom: 1px solid var(--rt-border);
}
.perf-component-last { padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
.perf-component-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.perf-component-icon { width: 18px; text-align: center; }
.perf-component-title {
    font-weight: 600;
    color: var(--rt-heading-color, #1e293b);
}
.perf-component-score {
    margin-left: auto;
    font-size: var(--rt-fs-lead);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.perf-component-score small { font-size: var(--rt-fs-meta); font-weight: 600; opacity: .65; }
.perf-component-raw {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 10px;
    font-size: var(--rt-fs-meta);
    color: var(--rt-body-color, #475569);
}
.perf-component-raw b { font-weight: 700; }
.perf-component-hint {
    margin-top: 6px;
    font-size: var(--rt-fs-meta);
    color: var(--rt-text-muted);
}

/* Placeholder in a chart box that has nothing to plot yet */
.chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    color: var(--rt-text-muted);
    font-size: var(--rt-fs-meta);
}

/* Solid purple fill — theme.css only ships the soft variant */
.bg-purple { background-color: var(--rt-purple, #8B5CF6) !important; }

/* Alert variant (col-lg-4 wide action cards) */
.kpi-alert { padding: 1.35rem 1.25rem 1.25rem 1.5rem; }
.kpi-alert .kpi-alert-body {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: .75rem;
}
.kpi-alert .kpi-icon {
    width: 62px; height: 62px;
    border-radius: 16px;
    font-size: 24px;
    margin-bottom: 0;
}
.kpi-alert .kpi-alert-text { flex: 1; min-width: 0; }
.kpi-alert .kpi-value { font-size: 2.75rem; }
.kpi-alert .kpi-cta { margin-top: auto; }


/* ============================================================
   MODULE: TODO  (Rejalar — personal planner)
   ============================================================ */

/* Panels */
.todo-panel .card-header { border-bottom: 1px solid var(--rt-border, #eceef2); }
.todo-panel-date { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); font-weight: 500; }

/* Quick-add row */
.todo-add { display: flex; gap: 8px; margin-bottom: 14px; }
.todo-add .form-control { flex: 1; }

/* List reset */
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

/* One plan row */
.todo-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px; border-radius: 10px;
    background: var(--rt-surface-2, #f7f8fa);
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease;
}
.todo-item:hover { background: var(--rt-surface-3, #eef1f5); border-color: var(--rt-border, #e6e9ee); }
.todo-item--ghost { opacity: .45; }

.todo-drag { color: var(--rt-text-faint, #b7bdc9); cursor: grab; font-size: 12px; touch-action: none; }
.todo-drag:active { cursor: grabbing; }

/* Round complete toggle */
.todo-check {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--rt-border-strong, #cbd2dc); background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; cursor: pointer; padding: 0; transition: all .15s ease;
}
.todo-check i { font-size: 10px; opacity: 0; transition: opacity .15s ease; }
.todo-check:hover { border-color: var(--rt-success, #17b26a); }

.todo-dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; }

.todo-main { flex: 1; min-width: 0; }
.todo-title { font-size: var(--rt-fs-body, 14px); color: var(--rt-text, #2b3038); line-height: 1.3; word-break: break-word; }
.todo-note { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); margin-top: 2px; }

.todo-actions { display: flex; align-items: center; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.todo-item:hover .todo-actions { opacity: 1; }
.todo-btn {
    border: 0; background: transparent; color: var(--rt-text-muted, #8a94a6);
    width: 28px; height: 28px; border-radius: 7px; cursor: pointer; font-size: 12px;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.todo-btn:hover { background: var(--rt-surface, #fff); color: var(--rt-text, #2b3038); }
.todo-btn-danger:hover { color: var(--rt-danger, #f04438); }
.todo-actions form { margin: 0; line-height: 0; }

/* Completed state */
.todo-item--done { background: transparent; }
.todo-item--done .todo-check { background: var(--rt-success, #17b26a); border-color: var(--rt-success, #17b26a); }
.todo-item--done .todo-check i { opacity: 1; }
.todo-item--done .todo-title { text-decoration: line-through; color: var(--rt-text-faint, #b0b7c3); }
.todo-item--done .todo-dot { opacity: .4; }

/* Locked entry — auto-posted from an assignment report; read-only, no strike-through */
.todo-lock { color: var(--rt-text-faint, #b7bdc9); font-size: 12px; display: inline-flex; }
.todo-check--static { cursor: default; }
.todo-item--locked .todo-title { text-decoration: none; color: var(--rt-text, #2b3038); }
.todo-item--locked .todo-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.todo-item--locked .todo-actions { opacity: 1; }

/* Daily deadline notice above the entry input */
.todo-notice {
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--rt-info-soft, #eaf4ff); color: var(--rt-text, #2b3038);
    border: 1px solid color-mix(in srgb, var(--rt-info, #2f80ed) 22%, transparent);
    border-radius: 10px; padding: 10px 13px; margin-bottom: 12px;
    font-size: var(--rt-fs-meta, 13px); line-height: 1.5;
}
.todo-notice > i { color: var(--rt-info, #2f80ed); margin-top: 2px; flex: none; }
.todo-notice b { font-weight: 700; }

/* Empty state */
.todo-empty {
    text-align: center; color: var(--rt-text-muted, #8a94a6);
    font-size: var(--rt-fs-meta, 13px); padding: 20px 8px;
}

/* History table */
.todo-hist-title { font-size: var(--rt-fs-body, 14px); color: var(--rt-text, #2b3038); }
.todo-hist-title.todo-hist-done { text-decoration: line-through; color: var(--rt-text-faint, #b0b7c3); }
.todo-hist-note { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); margin-top: 2px; }

/* Team oversight mini-meter */
.todo-team-meter { display: inline-flex; align-items: center; gap: 8px; }
.todo-team-bar { width: 90px; height: 6px; border-radius: 4px; background: var(--rt-surface-3, #eef1f5); overflow: hidden; }
.todo-team-bar > span { display: block; height: 100%; border-radius: 4px; background: var(--rt-success, #17b26a); }
.todo-team-frac { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); white-space: nowrap; }

/* Tabs (Bugungi · Ertangi · Muammolar) */
.todo-tabs { border-bottom: 0; padding: 4px 6px 0; gap: 2px; flex-wrap: nowrap; overflow-x: auto; }
.todo-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; border-radius: 0;
    color: var(--rt-text-muted, #8a94a6); font-size: var(--rt-fs-body, 14px); font-weight: 600;
    padding: 12px 14px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.todo-tabs .nav-link:hover { color: var(--rt-text, #2b3038); }
.todo-tabs .nav-link.active {
    color: var(--rt-primary, #4f46e5); background: transparent;
    border-bottom-color: var(--rt-primary, #4f46e5);
}
.todo-tab-count {
    font-size: 11px; font-weight: 700; line-height: 1; min-width: 18px; text-align: center;
    padding: 3px 6px; border-radius: 10px;
    background: var(--rt-surface-3, #eef1f5); color: var(--rt-text-muted, #8a94a6);
}
.todo-tabs .nav-link.active .todo-tab-count { background: color-mix(in srgb, var(--rt-primary, #4f46e5) 14%, transparent); color: var(--rt-primary, #4f46e5); }
.todo-tab-count--danger { background: color-mix(in srgb, var(--rt-danger, #f04438) 12%, transparent); color: var(--rt-danger, #f04438); }

/* Day header (date + hint) inside a tab */
.todo-day-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 12px; }
.todo-day-hint { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); }

/* Problem rows */
.todo-problem-check { border-color: var(--rt-danger, #f04438); }
.todo-problem-check:hover { border-color: var(--rt-success, #17b26a); }
.todo-problem--resolved .todo-problem-check { background: var(--rt-success, #17b26a); border-color: var(--rt-success, #17b26a); }
.todo-problem--resolved .todo-problem-check i { opacity: 1; }
.todo-problem--resolved .todo-title { text-decoration: line-through; color: var(--rt-text-faint, #b0b7c3); }
.todo-problem--resolved .todo-dot { opacity: .4; }
.todo-problem-badge { flex: 0 0 auto; }
.todo-problem-link {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
    font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6);
}
.todo-problem-link i { font-size: 10px; }

/* Team oversight — problems list */
.team-problem-list { display: flex; flex-direction: column; gap: 8px; }
.team-problem-row {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 12px; border-radius: 10px;
    background: var(--rt-surface-2, #f7f8fa); border: 1px solid var(--rt-border, #eceef2);
}
.team-problem-row.is-resolved { opacity: .72; }
.team-problem-row .todo-dot { margin-top: 6px; }
.team-problem-main { flex: 1; min-width: 0; }
.team-problem-top { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); margin-bottom: 2px; }
.team-problem-name { font-weight: 600; color: var(--rt-text, #2b3038); }
.team-problem-dept, .team-problem-date { color: var(--rt-text-muted, #8a94a6); }
.team-problem-title { font-size: var(--rt-fs-body, 14px); color: var(--rt-text, #2b3038); word-break: break-word; }
.team-problem-note { font-size: var(--rt-fs-meta, 13px); color: var(--rt-text-muted, #8a94a6); margin-top: 2px; }
.team-problem-row.is-resolved .team-problem-title { text-decoration: line-through; color: var(--rt-text-faint, #b0b7c3); }


/* ============================================================
   MODULE: CALENDAR
   ============================================================ */

/* FullCalendar integration tweaks */
.fc { font-family: inherit; font-size: .875rem; }
.fc .fc-toolbar-title { font-size: 1.1rem; font-weight: 600; }
.fc .fc-button {
    background: var(--rt-card-bg);
    border-color: var(--rt-border);
    color: var(--rt-text);
    font-size: var(--rt-fs-meta);
    padding: .3rem .7rem;
}
.fc .fc-button:hover,
.fc .fc-button-active { background: var(--rt-primary) !important; border-color: var(--rt-primary) !important; color: #fff !important; }
.fc .fc-button:focus { box-shadow: none !important; }
.fc-theme-standard td, .fc-theme-standard th { border-color: var(--rt-border); }
.fc-theme-standard .fc-scrollgrid { border-color: var(--rt-border); }
.fc .fc-daygrid-day-number { color: var(--rt-text); font-size: var(--rt-fs-meta); font-weight: 600; padding: 4px 6px; }
.fc .fc-daygrid-day.fc-day-today { background: color-mix(in srgb, var(--rt-primary) 6%, transparent); }
.fc .fc-event { border-radius: 4px; font-size: var(--rt-fs-meta); padding: 1px 4px; cursor: pointer; }
.fc .fc-list-event:hover td { background: var(--rt-body-bg); }
[data-theme="dark"] .fc .fc-button { background: var(--rt-card-bg); border-color: var(--rt-border); color: var(--rt-text); }
[data-theme="dark"] .fc-theme-standard td,
[data-theme="dark"] .fc-theme-standard th,
[data-theme="dark"] .fc-theme-standard .fc-scrollgrid { border-color: var(--rt-border); }
[data-theme="dark"] .fc .fc-daygrid-day-number { color: var(--rt-text); }


/* ============================================================
   MODULE: ASSIGNMENTS — list, detail, report workflow
   ============================================================ */

/* ── Avatar group (overlapping circles) ───────────────────── */
.asgn-avatar-group { display: flex; align-items: center; }
.asgn-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700; letter-spacing: 0;
    border: 2px solid var(--rt-card-bg);
    margin-left: -8px;
    cursor: default; flex-shrink: 0; position: relative;
    transition: transform .15s;
    z-index: 1;
}
.asgn-avatar:first-child { margin-left: 0; }
.asgn-avatar:hover { transform: translateY(-3px) scale(1.1); z-index: 10; }

.asgn-avatar-primary { background: rgba(20,195,142,.18); color: #0e9e72; }
.asgn-avatar-success  { background: rgba(34,197,94,.18);  color: #16a34a; }
.asgn-avatar-warning  { background: rgba(245,158,11,.18); color: #b45309; }
.asgn-avatar-info     { background: rgba(14,165,233,.18); color: #0369a1; }
.asgn-avatar-danger   { background: rgba(239,68,68,.18);  color: #b91c1c; }
/* The roster tints avatars by effective status, which can also be `secondary`
   (cancelled) — without this the avatar would render unstyled. */
.asgn-avatar-secondary { background: rgba(100,116,139,.18); color: #475569; }
.asgn-avatar-more {
    background: var(--rt-light, #f3f4f6);
    color: var(--rt-text-muted);
    font-size: 14px; font-weight: 600;
}

/* ── Create / edit form — two-column layout ────────────────── */
.asgn-form-grid { align-items: stretch; }
.asgn-form-card { border: 1px solid var(--rt-border, #e9ebec); }
.asgn-form-card .card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; padding: 14px 18px;
}
.asgn-form-actions {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-top: 18px; padding-top: 18px;
    border-top: 1px solid var(--rt-border, #e9ebec);
}

/* Report-required toggle card */
.asgn-report-toggle {
    border: 1px solid var(--rt-border, #e9ebec);
    border-radius: 8px;
    padding: 12px 14px;
    background: var(--rt-light, #f8f9fa);
}

/* ── Assignee picker (right panel) ─────────────────────────── */
.asgn-picker-card .card-body { display: flex; flex-direction: column; min-height: 0; }
.asgn-picker-body { gap: 14px; }
.asgn-picker-counter {
    font-size: var(--rt-fs-meta); font-weight: 600;
    color: var(--rt-primary); white-space: nowrap;
    background: var(--rt-primary-soft, rgba(13,110,253,.1));
    border-radius: 20px; padding: 3px 11px;
}

/* assign-type segmented switch */
.asgn-type-switch { display: flex; gap: 6px; margin-bottom: 14px; }
.asgn-type-switch .btn {
    flex: 1; font-size: 13px; font-weight: 600;
    border-radius: 8px; padding: 8px 10px;
    border: 1px solid var(--rt-border, #e9ebec);
    color: var(--rt-text-muted); background: var(--rt-card-bg);
}
.asgn-type-switch .btn-check:checked + .btn {
    background: var(--rt-primary); border-color: var(--rt-primary); color: #fff;
}

/* search box */
.asgn-search { position: relative; margin-bottom: 12px; }
.asgn-search > i {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--rt-text-muted); font-size: 14px; pointer-events: none;
}
.asgn-search .form-control { padding-left: 38px; }

/* department multi-select filter */
.asgn-dept-filter { margin-bottom: 12px; }

/* select-all / clear toolbar */
.asgn-emp-toolbar { display: flex; gap: 14px; margin-bottom: 8px; }
.asgn-link-btn {
    background: none; border: none; padding: 0;
    font-size: var(--rt-fs-meta); font-weight: 600; color: var(--rt-text-muted);
    cursor: pointer; transition: color .15s;
}
.asgn-link-btn:hover { color: var(--rt-primary); }

/* employee list */
.asgn-emp-list {
    flex: 1; min-height: 200px; max-height: 460px; overflow-y: auto;
    border: 1px solid var(--rt-border, #e9ebec); border-radius: 8px;
    padding: 6px;
}
.asgn-emp-item {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 10px; border-radius: 8px; margin: 0;
    cursor: pointer; transition: background .12s;
    border: 1px solid transparent;
}
/* display:flex above outranks the UA [hidden] rule — restore hiding for the filter */
.asgn-emp-item[hidden] { display: none; }
.asgn-emp-item:hover { background: var(--rt-light, #f8f9fa); }
.asgn-emp-item.selected {
    background: var(--rt-primary-soft, rgba(13,110,253,.08));
    border-color: var(--rt-primary);
}
.asgn-emp-item input[type="checkbox"] { width: 17px; height: 17px; flex-shrink: 0; cursor: pointer; }
.asgn-emp-avatar {
    width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px; font-weight: 700;
    background: rgba(13,110,253,.12); color: var(--rt-primary);
}
.asgn-emp-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.asgn-emp-name {
    font-size: 14px; font-weight: 600; color: var(--rt-text); line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asgn-emp-meta {
    font-size: var(--rt-fs-meta); color: var(--rt-text-muted); line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asgn-emp-tick { font-size: 16px; color: var(--rt-primary); opacity: 0; flex-shrink: 0; transition: opacity .12s; }
.asgn-emp-item.selected .asgn-emp-tick { opacity: 1; }

.asgn-emp-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    padding: 36px 16px; color: var(--rt-text-muted); text-align: center;
}
.asgn-emp-empty[hidden] { display: none; }
.asgn-emp-empty > i { font-size: 26px; color: var(--rt-text-soft); }
.asgn-emp-empty > span { font-size: 13px; }

/* ── Title cell ────────────────────────────────────────────── */
.asgn-title-cell { min-width: 0; }
.asgn-title-link {
    font-size: 14px; font-weight: 600;
    color: var(--rt-text); text-decoration: none;
    display: block; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}
.asgn-title-link:hover { color: var(--rt-primary); }
.asgn-desc-preview {
    font-size: 14px; color: var(--rt-text-muted); margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px;
}

/* ── Due date cell ─────────────────────────────────────────── */
.asgn-due-cell {
    display: flex; align-items: center; gap: 7px;
    font-size: 14px; color: var(--rt-text-muted);
    white-space: nowrap;
}
.asgn-due-cell > i { font-size: 14px; flex-shrink: 0; }
.asgn-due-date { font-weight: 500; line-height: 1.2; }
.asgn-due-delta { font-size: 14px; font-weight: 600; line-height: 1.2; opacity: .85; }

.asgn-due-overdue { color: #dc2626; }
.asgn-due-overdue .asgn-due-date { font-weight: 700; }
.asgn-due-soon { color: #d97706; }

/* ── Row priority left border ──────────────────────────────── */
#assignments-table tbody tr { border-left: 3px solid transparent; }
#assignments-table tbody tr[data-priority="low"]      { border-left-color: var(--rt-secondary, #adb5bd); }
#assignments-table tbody tr[data-priority="medium"]   { border-left-color: var(--rt-info, #0dcaf0); }
#assignments-table tbody tr[data-priority="high"]     { border-left-color: var(--rt-warning, #ffc107); }
#assignments-table tbody tr[data-priority="critical"] { border-left-color: var(--rt-danger, #dc3545); }

/* ── Styled file input wrapper (replaces native "Choose Files") */
.file-input-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.file-input-wrap input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap;
}
.file-input-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: .35rem .8rem;
    border-radius: 6px;
    border: 1px solid var(--rt-border);
    background: var(--rt-card-bg);
    color: var(--rt-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, background .15s;
    white-space: nowrap;
}
.file-input-btn:hover { border-color: var(--rt-primary); color: var(--rt-primary); }
.file-input-name {
    font-size: 14px;
    color: var(--rt-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 260px;
}

/* ── Report file picker ────────────────────────────────────── */
.asgn-file-picker {
    border: 1.5px dashed var(--rt-border, #dee2e6);
    border-radius: 8px;
    background: var(--rt-card-bg);
    transition: border-color .18s;
    overflow: hidden;
}
.asgn-file-picker:hover,
.asgn-file-picker.drag-over { border-color: var(--rt-primary); }

.asgn-file-label {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    cursor: pointer; margin: 0;
    color: var(--rt-text-muted); font-size: 14px;
}
.asgn-file-label > i { font-size: 15px; color: var(--rt-primary); flex-shrink: 0; }
.asgn-file-label-main { font-weight: 600; color: var(--rt-text); font-size: 14px; line-height: 1.2; }
.asgn-file-hint { font-size: 14px; color: var(--rt-text-muted); line-height: 1.3; }

.asgn-file-selected {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px;
    background: var(--rt-primary-soft, rgba(13,110,253,.07));
    border-top: 1px solid var(--rt-border, #dee2e6);
    font-size: 14px;
}
.asgn-file-selected > i { color: var(--rt-success); font-size: 14px; flex-shrink: 0; }
.asgn-file-name { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asgn-file-size { color: var(--rt-text-muted); flex-shrink: 0; }
.asgn-file-remove {
    background: none; border: none; padding: 0 2px;
    color: var(--rt-text-muted); font-size: 16px; line-height: 1;
    cursor: pointer; flex-shrink: 0;
}
.asgn-file-remove:hover { color: var(--rt-danger); }

/* ── Report attachment download chip ───────────────────────── */
.asgn-attachment-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 20px;
    background: var(--rt-light, #f8f9fa);
    border: 1px solid var(--rt-border, #dee2e6);
    font-size: 14px; font-weight: 500; color: var(--rt-text);
    text-decoration: none; transition: background .15s;
}
.asgn-attachment-chip:hover { background: var(--rt-primary-soft); color: var(--rt-primary); }
.asgn-attachment-chip > i { color: var(--rt-primary); font-size: 14px; }

/* ── Reviewer "mark as done" (force-complete) ───────────────── */
.asgn-complete { border-top: 1px dashed var(--rt-border, #dee2e6); padding-top: 14px; }
.asgn-complete-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 8px 12px; border-radius: 8px;
    background: var(--rt-card-bg); cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--rt-success, #22c55e) 35%, var(--rt-border, #dee2e6));
    color: var(--rt-success, #22c55e); font-size: 13px; font-weight: 600;
    transition: background .15s, border-color .15s;
}
.asgn-complete-toggle:hover { background: color-mix(in srgb, var(--rt-success, #22c55e) 8%, var(--rt-card-bg)); }
.asgn-complete-toggle > span { flex: 1; text-align: left; }
.asgn-complete-caret { font-size: var(--rt-fs-meta); transition: transform .18s; }
.asgn-complete-toggle.is-open .asgn-complete-caret { transform: rotate(180deg); }
.asgn-complete-body {
    margin-top: 12px; padding: 14px;
    border: 1px solid color-mix(in srgb, var(--rt-success, #22c55e) 25%, var(--rt-border, #dee2e6));
    border-radius: 8px;
    background: color-mix(in srgb, var(--rt-success, #22c55e) 5%, var(--rt-card-bg));
}

/* ── Department-head scope + delegation ─────────────────────── */

/* Context strip above the head's list: what this page does and does not show */
.asgn-scope-note {
    display: flex; align-items: center; gap: var(--rt-sp-2);
    padding: var(--rt-sp-2) var(--rt-sp-3); border-radius: var(--rt-card-radius, 8px);
    background: color-mix(in srgb, var(--rt-info, #0dcaf0) 8%, var(--rt-card-bg));
    border: 1px solid color-mix(in srgb, var(--rt-info, #0dcaf0) 22%, transparent);
    color: var(--rt-body-color); font-size: var(--rt-fs-meta);
}
.asgn-scope-note > i { color: var(--rt-info, #0dcaf0); font-size: 15px; flex-shrink: 0; }

/* "Barchasi / Men bergan / Menga berilgan" chips.
   justify-content is explicit: .card-header sets space-between, which would
   fling three chips to the two ends of a full-width card header. */
.asgn-scope-bar {
    display: flex; flex-wrap: wrap; gap: var(--rt-sp-2);
    justify-content: flex-start;
}
.asgn-scope-chip {
    display: inline-flex; align-items: center; gap: var(--rt-sp-2);
    height: var(--rt-ctl-h-sm, 32px); padding: 0 var(--rt-sp-3);
    border-radius: 20px; cursor: pointer;
    border: 1px solid var(--rt-border, #e9ebec);
    background: var(--rt-card-bg); color: var(--rt-text-muted);
    font-size: var(--rt-fs-meta); font-weight: 600;
    transition: background .15s, border-color .15s, color .15s;
}
.asgn-scope-chip:hover { border-color: var(--rt-primary); color: var(--rt-primary); }
.asgn-scope-chip.active {
    background: var(--rt-primary); border-color: var(--rt-primary); color: #fff;
}
.asgn-scope-chip > i { font-size: var(--rt-fs-meta); }
.asgn-scope-count {
    min-width: 20px; padding: 0 6px; border-radius: 10px;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: var(--rt-fs-meta); font-weight: 700; line-height: 18px; text-align: center;
}
.asgn-scope-chip.active .asgn-scope-count { background: rgba(255, 255, 255, .22); }

/* ── Status tab rail ───────────────────────────────────────────
   The list's state is the primary thing on the page, so it sits on a visible
   underline rail with its counts — not hidden behind a <select> the reader has
   to open to learn what is in there. Scrolls horizontally on narrow screens
   rather than wrapping into a second row. */
.asgn-tabbar-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--rt-sp-3); }
.asgn-tabbar {
    display: flex; align-items: stretch; gap: var(--rt-sp-1);
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-bottom: -1px;
}
.asgn-tabbar::-webkit-scrollbar { display: none; }
.asgn-tab {
    position: relative; flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 6px;
    height: var(--rt-ctl-h, 38px); padding: 0 var(--rt-sp-3);
    border: 0; background: none; cursor: pointer;
    font-size: var(--rt-fs-body); font-weight: 600; color: var(--rt-text-muted);
    white-space: nowrap; transition: color .15s;
}
.asgn-tab::after {
    content: ''; position: absolute; left: 8px; right: 8px; bottom: 0;
    height: 2.5px; border-radius: 3px 3px 0 0; background: var(--rt-primary);
    transform: scaleX(0); transform-origin: center; transition: transform .2s;
}
.asgn-tab:hover { color: var(--rt-primary); }
.asgn-tab.active { color: var(--rt-heading-color, var(--rt-body-color)); }
.asgn-tab.active::after { transform: scaleX(1); }
.asgn-tab-count {
    min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center;
    background: color-mix(in srgb, var(--rt-text-muted) 14%, transparent);
    font-size: var(--rt-fs-meta); font-weight: 700; line-height: 18px;
    font-variant-numeric: tabular-nums;
}
.asgn-tab.active .asgn-tab-count { background: var(--rt-primary-soft, rgba(13,110,253,.12)); color: var(--rt-primary); }
/* The three states that mean "needs attention" keep their semantic colour even
   when the tab is not the active one — colour is not the only cue, the label is. */
.asgn-tab-overdue .asgn-tab-count { background: color-mix(in srgb, var(--rt-danger, #ef4444) 14%, transparent); color: var(--rt-danger, #b91c1c); }
.asgn-tab-review  .asgn-tab-count { background: color-mix(in srgb, var(--rt-warning, #f59e0b) 16%, transparent); color: #b45309; }
.asgn-tab-done    .asgn-tab-count { background: color-mix(in srgb, var(--rt-success, #22c55e) 14%, transparent); color: #16a34a; }

/* ── Assignee roster (summary + collapsible status groups) ─────
   A flat list of tall rows is fine at 2 people and unusable at 10: the reader
   scrolls past everyone already done to find the one person who is late. So the
   roster leads with a summary and groups the rest by status, with settled
   groups collapsed. No inner scrollbar — nested scroll fights the page. */
.asgn-roster-summary { padding: var(--rt-sp-3) var(--rt-sp-4) var(--rt-sp-2); }
.asgn-roster-pct { font-size: var(--rt-fs-lead); line-height: 1; }
.asgn-roster-legend {
    display: flex; flex-wrap: wrap; gap: var(--rt-sp-1) var(--rt-sp-3);
    margin-top: var(--rt-sp-2); font-size: var(--rt-fs-meta);
}
.asgn-roster-legend > span { display: inline-flex; align-items: center; gap: 5px; }

.asgn-roster-group { border-top: 1px solid var(--rt-border, #e9ebec); }
.asgn-roster-summary-row {
    display: flex; align-items: center; gap: var(--rt-sp-2);
    padding: var(--rt-sp-2) var(--rt-sp-4);
    cursor: pointer; list-style: none;
    font-size: var(--rt-fs-meta); font-weight: 600; color: var(--rt-body-color);
    transition: background .12s;
}
.asgn-roster-summary-row::-webkit-details-marker { display: none; }
.asgn-roster-summary-row:hover { background: var(--rt-light, #f8f9fa); }
.asgn-roster-group-label { flex: 1; }
.asgn-roster-group-count {
    min-width: 20px; padding: 0 6px; border-radius: 10px; text-align: center;
    background: color-mix(in srgb, currentColor 12%, transparent);
    font-size: var(--rt-fs-meta); font-weight: 700; line-height: 18px;
}
.asgn-roster-caret { font-size: 11px; color: var(--rt-text-muted); transition: transform .18s; }
.asgn-roster-group[open] .asgn-roster-caret { transform: rotate(180deg); }

/* Two columns from lg up: 10 people become 5 rows instead of 10. */
.asgn-roster-grid {
    display: grid; grid-template-columns: 1fr; gap: 2px;
    padding: 0 var(--rt-sp-2) var(--rt-sp-2);
}
@media (min-width: 992px) {
    .asgn-roster-grid { grid-template-columns: 1fr 1fr; }
}
.asgn-roster-row {
    display: flex; align-items: center; gap: var(--rt-sp-2);
    padding: 6px var(--rt-sp-2); border-radius: 8px; min-width: 0;
}
.asgn-roster-row:hover { background: var(--rt-light, #f8f9fa); }
.asgn-roster-main { flex: 1; min-width: 0; }
.asgn-roster-name {
    font-size: var(--rt-fs-body); font-weight: 600; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.asgn-roster-you {
    margin-left: 4px; padding: 0 6px; border-radius: 8px;
    background: var(--rt-primary-soft, rgba(13,110,253,.1)); color: var(--rt-primary);
    font-size: var(--rt-fs-meta); font-weight: 700;
}
.asgn-roster-meta {
    display: flex; flex-wrap: wrap; gap: 2px var(--rt-sp-2);
    font-size: var(--rt-fs-meta); color: var(--rt-text-muted); line-height: 1.3;
}
.asgn-roster-meta > span { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.asgn-roster-meta > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.asgn-roster-undo { flex-shrink: 0; }

/* "➜ X biriktirgan" attribution under a delegated assignee */
.asgn-delegated-by {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 2px;
    color: var(--rt-primary); font-weight: 500;
}
.asgn-delegated-by > i { font-size: 11px; }

/* The delegation card itself — visually tied to the assignees card above it */
.asgn-delegate-card { border-color: color-mix(in srgb, var(--rt-primary) 30%, var(--rt-border, #e9ebec)); }
.asgn-delegate-note {
    display: flex; align-items: flex-start; gap: var(--rt-sp-2);
    padding: var(--rt-sp-3); border-radius: var(--rt-card-radius, 8px);
    background: color-mix(in srgb, var(--rt-primary) 7%, var(--rt-card-bg));
    border: 1px solid color-mix(in srgb, var(--rt-primary) 20%, transparent);
    color: var(--rt-body-color); font-size: var(--rt-fs-meta); line-height: 1.45;
}
.asgn-delegate-note > i { color: var(--rt-primary); font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.asgn-delegate-list { min-height: 0; max-height: 280px; }
.asgn-delegate-empty {
    display: flex; flex-direction: column; align-items: center; gap: var(--rt-sp-2);
    padding: var(--rt-sp-6) var(--rt-sp-4); text-align: center;
    color: var(--rt-text-muted); font-size: var(--rt-fs-meta);
}
.asgn-delegate-empty > i { font-size: 24px; color: var(--rt-text-soft); }
.asgn-delegate-counter {
    display: inline-block; min-width: 20px; margin-left: 6px; padding: 0 6px;
    border-radius: 10px; background: rgba(255, 255, 255, .25);
    font-size: var(--rt-fs-meta); font-weight: 700; line-height: 18px;
}
.asgn-delegate-counter[hidden] { display: none; }

/* Why the approve/return buttons are absent for a head on a delegated task */
.asgn-review-routing {
    display: flex; align-items: center; gap: var(--rt-sp-2);
    padding: var(--rt-sp-2) var(--rt-sp-3); border-radius: var(--rt-card-radius, 8px);
    background: color-mix(in srgb, var(--rt-warning, #ffc107) 10%, var(--rt-card-bg));
    border: 1px solid color-mix(in srgb, var(--rt-warning, #ffc107) 26%, transparent);
    color: var(--rt-body-color); font-size: var(--rt-fs-meta);
}
.asgn-review-routing > i { color: var(--rt-warning, #ffc107); font-size: 15px; flex-shrink: 0; }

/* ============================================================
   MODULE: FILES
   ============================================================ */

/* Active context filter card */
.context-filter-card.active { border-color: var(--rt-primary); background: color-mix(in srgb, var(--rt-primary) 6%, var(--rt-card-bg)); }
[data-theme="dark"] .context-filter-card.active { background: rgba(255,255,255,.05); }

/* ============================================================
   MODULE: DOCUMENTS — list cell, category, show page
   ============================================================ */

/* Title cell in the documents table */
.doc-title-cell { display: flex; align-items: center; gap: 12px; }
.doc-title-cell .doc-icon {
    width: 40px; height: 40px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 1.15rem;
    background: color-mix(in srgb, var(--rt-primary) 8%, var(--rt-card-bg));
}
.doc-title-cell .doc-title-link { font-weight: 600; }
.doc-title-cell .doc-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.doc-ext-tag {
    font-size: var(--rt-fs-meta); font-weight: 700; letter-spacing: .03em;
    padding: 1px 6px; border-radius: 4px; text-transform: uppercase;
    background: color-mix(in srgb, var(--rt-primary) 12%, transparent); color: var(--rt-primary);
}
.doc-size { font-size: var(--rt-fs-meta); color: var(--rt-text-muted, #888); }
.doc-cat-name { font-weight: 600; }

/* Show page */
.doc-show-head { display: flex; align-items: center; gap: 16px; }
.doc-show-icon {
    width: 56px; height: 56px; flex: 0 0 56px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; font-size: 1.6rem;
    background: color-mix(in srgb, var(--rt-primary) 9%, var(--rt-card-bg));
}
.doc-meta-list dt { font-size: var(--rt-fs-meta); color: var(--rt-text-muted, #888); font-weight: 600; }
.doc-meta-list dd { margin-bottom: 12px; }
.doc-meta-list dd:last-child { margin-bottom: 0; }

/* ============================================================
   MODULE: RECEPTION — queue board, slots, show page
   ============================================================ */

/* ── Shared micro utilities ─────────────────────────────────── */
/* `.btn-xs` is defined once, in the COMPONENTS block. */

/* ── Queue board (horizontal-scroll kanban) ─────────────────── */
.rec-queue-board {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 6px;
    align-items: flex-start;
}
.rec-queue-board::-webkit-scrollbar { height: 4px; }
.rec-queue-board::-webkit-scrollbar-track { background: transparent; }
.rec-queue-board::-webkit-scrollbar-thumb { background: var(--rt-border); border-radius: 4px; }

.rec-queue-col { flex: 0 0 272px; min-width: 272px; }
.rec-queue-col > .card { border-top: 3px solid; overflow: hidden; }
.rec-queue-col[data-status="pending"]     > .card { border-top-color: var(--rt-warning, #f59e0b); }
.rec-queue-col[data-status="scheduled"]  > .card { border-top-color: var(--rt-info, #0ea5e9); }
.rec-queue-col[data-status="in_progress"]> .card { border-top-color: var(--rt-primary, #405189); }
.rec-queue-col[data-status="completed"]  > .card { border-top-color: var(--rt-success, #22c55e); }
.rec-queue-col[data-status="no_show"]    > .card { border-top-color: var(--rt-danger, #ef4444); }

/* ── Queue card ─────────────────────────────────────────────── */
.rec-queue-card {
    background: var(--rt-card-bg);
    border: 1px solid var(--rt-border);
    border-left: 3px solid transparent;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 8px;
    cursor: default;
    transition: box-shadow .15s, transform .15s;
}
.rec-queue-card:last-child { margin-bottom: 0; }
.rec-queue-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.10); transform: translateY(-1px); }

/* Dedicated drag handle — only this zone initiates Sortable drag */
.rec-drag-handle {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: grab;
    color: var(--rt-text-muted);
    user-select: none;
}
/* Dimming an icon to 35% opacity dropped it to ~1.6:1 against the card —
   effectively invisible. De-emphasise with a colour token instead. */
.rec-drag-handle > i { color: var(--rt-text-soft); font-size: 14px; transition: color .15s; }
.rec-drag-handle:hover > i { color: var(--rt-text); }
.rec-drag-handle:active { cursor: grabbing; }

/* Interactive children must not inherit grab cursor */
.rec-queue-card a,
.rec-queue-card .btn,
.rec-queue-card .asgn-avatar { cursor: pointer; }

/* Priority accent bar (left border) */
.rec-queue-card[data-priority="critical"]      { border-left-color: var(--rt-danger, #dc3545); }
.rec-queue-card[data-priority="important"]     { border-left-color: var(--rt-warning, #f59e0b); }
.rec-queue-card[data-priority="necessary"]     { border-left-color: var(--rt-primary, #405189); }
.rec-queue-card[data-priority="report"]        { border-left-color: var(--rt-purple, #6f42c1); }
.rec-queue-card[data-priority="informational"] { border-left-color: var(--rt-secondary, #6c757d); }

/* Top row: queue# (left) + priority badge (right) */
.rec-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 22px;
    margin-bottom: 8px;
}

/* Title: 2-line clamp */
.rec-card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--rt-text);
    text-decoration: none;
    margin-bottom: 10px;
}
.rec-card-title:hover { color: var(--rt-primary); }

/* Meta rows: manager, time */
.rec-card-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rec-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--rt-text-muted);
    line-height: 1.4;
}
.rec-meta-row > i {
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
    color: var(--rt-text-soft);
}

/* Bottom section: avatars (left) + actions (right), separated from meta */
.rec-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid var(--rt-border);
}

/* Compact overlapping avatars inside card */
.rec-queue-card .asgn-avatar-group { display: flex; align-items: center; }
.rec-queue-card .asgn-avatar {
    width: 24px; height: 24px;
    font-size: 14px;
    margin-left: -6px;
    border: 1.5px solid var(--rt-card-bg);
}
.rec-queue-card .asgn-avatar:first-child { margin-left: 0; }
.rec-queue-card .asgn-avatar-more { font-size: 14px; width: 24px; height: 24px; }

/* Icon-only action buttons (right side of bottom row) */
.rec-card-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* ── Show page — note blocks ────────────────────────────────── */
.rec-note-block {
    border: 1px solid var(--rt-border);
    border-left: 3px solid var(--rt-secondary);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 10px;
    background: var(--rt-card-bg);
}
.rec-note-block.note-agenda     { border-left-color: var(--rt-info); }
.rec-note-block.note-transcript { border-left-color: var(--rt-secondary); }
.rec-note-block.note-outcome    { border-left-color: var(--rt-success); }
.rec-note-block.note-task_item  { border-left-color: var(--rt-warning); }
.rec-note-block.note-private    { background: color-mix(in srgb, var(--rt-warning) 5%, var(--rt-card-bg)); }

[data-theme="dark"] .rec-note-block.note-private { background: rgba(245,158,11,.07); }

/* ═══════════════════════════════════════════════════════════════
   MODULE:MANAGER — Team page (manager.team.*)
   ═══════════════════════════════════════════════════════════════ */

.team-member-card { border: 1px solid var(--rt-border); border-radius: 10px; overflow: hidden; transition: box-shadow .2s; }
.team-member-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.team-card-accent { height: 4px; width: 100%; }
.avatar-xxl { width: 72px; height: 72px; min-width: 72px; line-height: 72px; }
.min-w-0 { min-width: 0; }
/* `.btn-xs` is defined once, in the COMPONENTS block. */
.team-dept-badge { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }

/* ═══════════════════════════════════════════════════════════════
   MODULE:TELEGRAM — settings page, manage page
   ═══════════════════════════════════════════════════════════════ */

.tg-status-card { border: 1px solid var(--rt-border); }
.tg-icon-wrap { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tg-icon-linked { background: rgba(34,197,94,.12); color: #16a34a; }
.tg-icon-unlinked { background: rgba(156,163,175,.12); color: var(--rt-text-muted); }

.tg-steps-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.tg-step-item { display: flex; align-items: flex-start; gap: .75rem; }
.tg-step-num { width: 28px; height: 28px; min-width: 28px; border-radius: 50%; background: var(--rt-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--rt-fs-meta); font-weight: 600; }

[data-theme="dark"] .tg-icon-linked { background: rgba(34,197,94,.15); }
[data-theme="dark"] .tg-icon-unlinked { background: rgba(156,163,175,.08); }

/* ============================================================
   MODULE: ERRORS — 403, 404 pages
   ============================================================ */

.error-page-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--rt-body-bg, #f3f4f6);
    padding: 2rem;
}
.error-page {
    text-align: center;
    max-width: 520px;
    width: 100%;
}
.error-code-bg {
    font-size: 7rem;
    font-weight: 900;
    line-height: 1;
    color: var(--rt-primary, #405189);
    opacity: .10;
    letter-spacing: -.03em;
    margin-bottom: -.5rem;
    user-select: none;
}
.error-icon-wrap {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 2rem;
}
.error-icon-403 { background: rgba(245,158,11,.12); color: #d97706; }
.error-icon-404 { background: rgba(var(--rt-primary-rgb),.12); color: var(--rt-primary); }
.error-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rt-heading, #1e293b);
    margin-bottom: .5rem;
}
.error-text {
    color: var(--rt-text-muted, #64748b);
    font-size: 1rem;
    margin-bottom: 1.75rem;
    line-height: 1.6;
}

/* ============================================================
   MODULE: CORRESPONDENCE — request form, department-code form
   ============================================================ */

.corr-form-icon {
    width: 40px; height: 40px; flex: 0 0 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px; font-size: 1.05rem;
    background: color-mix(in srgb, var(--rt-primary) 10%, var(--rt-card-bg));
    color: var(--rt-primary);
}

/* Segmented icon-choice cards — a radio button-group (btn-check) styled
   as selectable cards instead of a plain <select> or bare btn-group. */
.corr-choice-group { display: flex; gap: 10px; flex-wrap: wrap; }
.corr-choice {
    flex: 1; min-width: 200px;
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border: 1.5px solid var(--rt-border);
    border-radius: 12px;
    background: var(--rt-card-bg);
    cursor: pointer;
    transition: border-color .15s, background .15s, box-shadow .15s;
    margin-bottom: 0;
}
.corr-choice-icon {
    width: 38px; height: 38px; flex: 0 0 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px; font-size: 1rem;
    background: var(--rt-light, #f3f4f6);
    color: var(--rt-text-muted);
    transition: background .15s, color .15s;
}
.corr-choice-text { min-width: 0; }
.corr-choice-title { display: block; font-weight: 600; font-size: 14px; color: var(--rt-text); line-height: 1.3; }
.corr-choice-desc { display: block; font-size: var(--rt-fs-meta); color: var(--rt-text-muted); line-height: 1.3; margin-top: 1px; }

.btn-check:checked + .corr-choice {
    border-color: var(--rt-primary);
    background: color-mix(in srgb, var(--rt-primary) 6%, var(--rt-card-bg));
    box-shadow: 0 4px 14px rgba(var(--rt-primary-rgb), .12);
}
.btn-check:checked + .corr-choice .corr-choice-icon { background: var(--rt-primary); color: #fff; }
.btn-check:disabled + .corr-choice { opacity: .5; cursor: not-allowed; }

/* Conditional sub-section (e.g. signatory field, shown only for letters) */
.corr-subfield {
    border: 1px dashed var(--rt-border);
    border-radius: 12px;
    padding: 14px 16px;
    background: var(--rt-light, #f8f9fa);
}

/* Short numeric department/signatory code input */
.corr-code-input { text-align: center; font-weight: 700; font-size: 1.35rem; letter-spacing: .04em; }

/* Number-format editor (HR type settings) — template field beside a live
   sample, with click-to-insert placeholder chips underneath. */
.corr-format-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.corr-format-input {
    flex: 1 1 260px;
    font-family: var(--bs-font-monospace, monospace);
    letter-spacing: .02em;
}
.corr-format-preview {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 8px;
    padding: 0 14px;
    border: 1px solid var(--rt-border);
    border-radius: 8px;
    background: var(--rt-light, #f8f9fa);
}
.corr-format-preview-label { font-size: 14px; color: var(--rt-text-muted); }
.corr-format-preview code { font-size: 14px; font-weight: 700; color: var(--rt-primary); }

.corr-chip-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.corr-chip {
    padding: 3px 10px;
    border: 1px dashed var(--rt-border);
    border-radius: 20px;
    background: var(--rt-card-bg);
    color: var(--rt-text-muted);
    font-family: var(--bs-font-monospace, monospace);
    font-size: 14px;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.corr-chip:hover {
    border-color: var(--rt-primary);
    color: var(--rt-primary);
    background: color-mix(in srgb, var(--rt-primary) 6%, var(--rt-card-bg));
}

/* Grant row — "this person may sign this type, with THIS code". The tick and
   the code are one decision, so they sit on one line and move together. */
.corr-grant-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 0;
    flex-wrap: wrap;
}
.corr-grant-check { flex: 1 1 auto; min-width: 0; margin-bottom: 0; }
.corr-grant-code {
    flex: 0 0 62px; width: 62px;
    text-align: center; font-weight: 700; letter-spacing: .04em;
}
.corr-grant-code:disabled { background: var(--rt-light, #f1f3f5); opacity: .55; }
.corr-grant-error { flex: 1 0 100%; font-size: 14px; color: var(--rt-danger, #dc3545); }
/* Shown in place of the code field for types that number plainly (1, 2, 3). */
.corr-grant-hint { flex: 0 0 auto; font-size: 14px; color: var(--rt-text-muted); font-style: italic; }

/* Starting-sequence rows (HR settings) — type · current number · live next. */
.corr-seq-row {
    display: flex; align-items: center; gap: 14px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--rt-border);
}
.corr-seq-row:last-child { border-bottom: 0; }
.corr-seq-label { flex: 1 1 120px; font-weight: 600; min-width: 0; }
.corr-seq-input { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.corr-seq-input input { width: 96px; text-align: center; font-weight: 700; }
.corr-seq-next { flex: 0 0 auto; font-size: 14px; color: var(--rt-text-muted); }
.corr-seq-next strong { color: var(--rt-primary); font-size: 1.05rem; }
.corr-seq-error { flex: 1 0 100%; font-size: 14px; color: var(--rt-danger, #dc3545); }

/* ============================================================
   CORE: font-size floor — nothing renders below the meta step (13px)
   ============================================================ */

.fs-10, .fs-11, .fs-12, .fs-13 { font-size: var(--rt-fs-meta) !important; }
.fs-14 { font-size: var(--rt-fs-body) !important; }

/* ============================================================
   Telegram Broadcast (xabar yuborish)
   ============================================================ */
.tg-bc-segment { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tg-bc-seg-btn {
    flex:1; min-width:140px; display:flex; align-items:center; gap:10px;
    padding:12px 14px; border:1.5px solid var(--rt-border); border-radius:14px;
    background:var(--rt-card-bg); cursor:pointer; transition:.15s; font-weight:600; color:var(--rt-text);
}
.tg-bc-seg-btn i { font-size:18px; }
.tg-bc-seg-btn.active { border-color:var(--rt-primary); color:var(--rt-primary); background:rgba(var(--rt-primary-rgb),.06); box-shadow:0 4px 14px rgba(var(--rt-primary-rgb),.12); }

.tg-bc-groups { display:flex; flex-direction:column; gap:8px; }
.tg-bc-group {
    display:flex; align-items:center; gap:12px; padding:12px 14px; border:1px solid var(--rt-border);
    border-radius:12px; cursor:pointer; transition:.12s;
}
.tg-bc-group:hover { background:var(--rt-body-bg); }
.tg-bc-group.selected { border-color:var(--rt-primary); background:rgba(var(--rt-primary-rgb),.05); }
.tg-bc-group input { width:18px; height:18px; flex-shrink:0; cursor:pointer; }
.tg-bc-group-ico { width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center;
    background:var(--rt-info-light); color:var(--rt-info); flex-shrink:0; }

.tg-bc-drop {
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    padding:26px 16px; border:2px dashed var(--rt-border); border-radius:16px;
    background:var(--rt-body-bg); cursor:pointer; text-align:center; transition:.15s;
}
.tg-bc-drop:hover { border-color:var(--rt-primary); background:rgba(var(--rt-primary-rgb),.04); }
.tg-bc-drop .tg-bc-drop-ico { font-size:30px; color:var(--rt-primary); }
.tg-bc-drop-title { font-weight:600; color:var(--rt-heading); }
.tg-bc-drop-hint { font-size: var(--rt-fs-meta); color:var(--rt-text-soft); }

.tg-bc-preview { position:relative; margin-top:12px; border-radius:14px; overflow:hidden; border:1px solid var(--rt-border); }
.tg-bc-preview img, .tg-bc-preview video { display:block; width:100%; max-height:320px; object-fit:contain; background:#000; }
.tg-bc-preview-remove {
    position:absolute; top:8px; right:8px; width:32px; height:32px; border-radius:50%;
    border:none; background:rgba(0,0,0,.6); color:#fff; cursor:pointer; font-size:15px; line-height:1;
}

.tg-bc-counter { display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--rt-primary); }