/* ============================================================
   Workflow Stepper
   Usage: _status_stepper.blade.php
   ============================================================ */

.wf-stepper-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.wf-stepper {
    display: flex;
    align-items: flex-start;
    width: 100%;
}

.wf-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    width: 64px;
    min-width: 0;
}

.wf-dot {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #ced4da;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #adb5bd;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

.wf-step-name {
    font-size: 0.58rem;
    color: #adb5bd;
    text-align: center;
    margin-top: 4px;
    word-break: break-word;
    line-height: 1.2;
    width: 100%;
}

.wf-line {
    flex: 1;
    height: 2px;
    background: #ced4da;
    margin-top: 12px;
    min-width: 8px;
    transition: background 0.25s ease;
}

/* Done */
.wf-step.done .wf-dot       { background: #198754; border-color: #198754; color: #fff; }
.wf-step.done .wf-step-name  { color: #198754; }
.wf-line.done                 { background: #198754; }

/* Current / Active */
.wf-step.current .wf-dot {
    background: #e28a5f;
    border-color: #c87453;
    color: #fff;
    animation: wf-pulse 1.6s ease-in-out infinite;
}
.wf-step.current .wf-step-name { color: #0d6efd; font-weight: 700; }

/* Rejected */
.wf-step.failed .wf-dot        { background: #dc3545; border-color: #dc3545; color: #fff; }
.wf-step.failed .wf-step-name  { color: #dc3545; font-weight: 700; }
.wf-line.failed                 { background: #dc3545; }

/* Revision / Sent Back */
.wf-step.returned .wf-dot       { background: #fd7e14; border-color: #fd7e14; color: #fff; }
.wf-step.returned .wf-step-name { color: #fd7e14; font-weight: 700; }
.wf-line.returned                { background: #fd7e14; }

@keyframes wf-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.35); }
    50%       { box-shadow: 0 0 0 6px rgba(13, 110, 253, 0); }
}


/* ============================================================
   Approval Flow Rail  (.wf-flow)
   Usage: admin/components/approval/flow.blade.php
   ------------------------------------------------------------
   The successor to .wf-stepper above. Everything here is namespaced
   under .wf-flow so the older rail — still drawn by the PhD progress
   report and the user manual — keeps its own look untouched.

   Loaded from custom.css because the component is included from cards,
   modal bodies and my-request lists across five modules; a page-level
   stylesheet would have to be remembered at every one of those sites.
   ============================================================ */

.wf-flow { width: 100%; min-width: 0; }

.wf-flow-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 7px;
}
.wf-flow-title {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #7b8496;
}

/* Turnaround chip — silent while there is time, insistent once there is not */
.wf-sla {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.wf-sla i { font-size: 0.58rem; }
.wf-sla.is-ok   { background: #eef2f7; color: #64748b; }
.wf-sla.is-due  { background: #fdf4e3; color: #9a6a12; }
.wf-sla.is-over { background: #fdecec; color: #b3261e; }

/* A series that has not begun. Dashed, not filled: this is not a state the
   request is in, it is a state it has not reached. */
.wf-idle {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 1px 9px;
    border-radius: 999px;
    border: 1px dashed #d5dae3;
    color: #98a1b0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: none;
}
.wf-idle i { font-size: 0.55rem; }

/* The dormant rail recedes so a live one beside it always wins the eye */
.wf-flow.is-idle .wf-rail { opacity: .55; }
.wf-flow.is-idle .wf-flow-title { color: #9aa2b1; }

/* ---- the rail ------------------------------------------------------------ */
.wf-rail {
    display: flex;
    align-items: flex-start;
    width: 100%;
    min-width: 0;
    /* Half the empty space either side of a dot: (node width − dot width) / 2,
       less a couple of px so the line stops just short of the dot rather than
       touching it. The connectors below pull themselves in by this much. */
    --wf-shoulder: 38px;
}

.wf-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 auto;
    /* Wide enough for a full salutation + surname on two lines — the whole
       point of the rail is that each step names its person, and "Prof. DIBAKAR
       RAKSHIT" ellipsised to "Prof. DIB…" defeats it. */
    width: 108px;
    min-width: 0;
    text-align: center;
    /* Above the connectors, which reach in underneath */
    position: relative;
    z-index: 1;
}
.wf-node[data-bs-toggle="tooltip"] { cursor: help; }

.wf-node-dot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #d7dce5;
    background: #fff;
    color: #b6bdc9;
    font-size: 10px;
    flex-shrink: 0;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.wf-node:hover .wf-node-dot { transform: translateY(-1px); }

.wf-node-tx { display: block; margin-top: 6px; width: 100%; min-width: 0; }

/* The ACTION is a label: small, uppercase, letter-spaced, and the only thing
   here that carries the state colour. Straight out of the .ui- micro-label
   idiom the rest of the admin theme uses. */
.wf-node-tx b {
    display: block;
    font-size: 0.5rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.3;
    color: #a4abb8;
    word-break: break-word;
}

/* The PERSON is a value: larger than its label, lighter, and deliberately
   NEUTRAL in every state. The dot and the label already say what happened —
   colouring the name too made the two read as one green blob.
   Two lines, hard-clamped, so a long name reads in full and no single card
   grows taller than its neighbours. The clamp needs -webkit-box; max-height is
   the fallback where it is unsupported, cropping rather than overflowing. */
.wf-node-tx em {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 2.5em;
    margin-top: 4px;
    font-size: 0.585rem;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0;
    line-height: 1.25;
    color: #6b7484;
    overflow: hidden;
    overflow-wrap: anywhere;
}
/* The step was taken but nobody was stored against it. Said quietly and in
   italics so it never passes for a name, and never for a rendering fault. */
.wf-node-tx em.is-nil { color: #b8bfca; font-style: italic; font-weight: 400; }

/* The connector runs dot-to-dot, not box-to-box. A node is 108px wide because
   its label needs the room, but its dot is only 28px — so a connector sized to
   the gap between the boxes stops 40px short at each end and the rail reads as
   four dashes rather than one line. The negative margins reach in under each
   neighbour's empty shoulder; .wf-node's z-index keeps the dots on top. */
.wf-seg {
    flex: 1 1 auto;
    height: 2px;
    min-width: 4px;
    margin: 13px calc(var(--wf-shoulder) * -1) 0;
    border-radius: 2px;
    background: #e0e4eb;
    transition: background .25s ease;
}

/* Done — the colour lives on the dot and the action label only; the name
   stays neutral in every state so the two never blur into one another. */
.wf-node.is-done .wf-node-dot  { background: #1c7a45; border-color: #1c7a45; color: #fff; }
.wf-node.is-done .wf-node-tx b { color: #1c7a45; }
.wf-seg.is-done                { background: #1c7a45; }

/* Current — the one step that is actually waiting on somebody */
.wf-node.is-current .wf-node-dot {
    background: #d97706;
    border-color: #b45309;
    color: #fff;
    animation: wf-flow-pulse 1.9s ease-in-out infinite;
}
.wf-node.is-current .wf-node-tx b { color: #b45309; }

/* Rejected */
.wf-node.is-failed .wf-node-dot  { background: #b3261e; border-color: #b3261e; color: #fff; }
.wf-node.is-failed .wf-node-tx b { color: #b3261e; }
.wf-seg.is-failed                { background: #b3261e; }

/* Sent back for changes */
.wf-node.is-returned .wf-node-dot  { background: #ea7317; border-color: #ea7317; color: #fff; }
.wf-node.is-returned .wf-node-tx b { color: #c2600f; }
.wf-seg.is-returned                { background: #ea7317; }

/* Withdrawn — the applicant took it back. Deliberately GREY, not red: red
   is the vocabulary for refused, and a withdrawal is not a refusal. It is an
   outcome that simply stopped happening, and the rail should read as ended
   rather than as failed. */
.wf-node.is-stopped .wf-node-dot  { background: #8a93a6; border-color: #8a93a6; color: #fff; }
.wf-node.is-stopped .wf-node-tx b { color: #6b7484; }
.wf-seg.is-stopped                { background: #8a93a6; }

@keyframes wf-flow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.38); }
    50%      { box-shadow: 0 0 0 7px rgba(217, 119, 6, 0); }
}

/* ---- the road ahead ------------------------------------------------------
   Not just the next gate: the step waiting on someone now, and every step the
   request still has to pass after it. The current one carries full weight, the
   later ones recede — same information, correct emphasis.
   ------------------------------------------------------------------------- */
.wf-await {
    margin-top: 10px;
    border-radius: 10px;
    background: #fbfcfe;
    border: 1px solid #e6eaf1;
    border-left: 3px solid #d97706;
    overflow: hidden;
}

.wf-await-row { padding: 9px 11px; }
.wf-await-row + .wf-await-row { border-top: 1px solid #edf0f5; }

/* The step actually being waited on */
.wf-await-row.is-now { background: #fffdf8; }

/* Everything after it — quieter ground, quieter faces */
.wf-await-row.is-next { background: transparent; }
.wf-await-row.is-next .wf-await-cap { color: #a0a8b6; }
.wf-await-row.is-next .wf-await-cap > i { color: #b9c0cc; }
.wf-await-row.is-next .wf-await-cap b { color: #78818f; }
.wf-await-row.is-next .wf-who { border-color: #eaedf3; box-shadow: none; background: #fcfdfe; }
.wf-await-row.is-next .wf-who-nm { color: #7b8493; font-weight: 600; }
.wf-await-row.is-next .wf-who-av { background: #f1f3f7; color: #8d95a3; }
.wf-await-row.is-next .wf-who:hover { border-color: #d9dfe8; background: #fff; }

/* A step with nobody on it is the one thing here that must not recede */
.wf-await-row.is-empty { background: #fdf7f7; }

/* NOW / THEN marker — a tiny ordinal so the rows read as a sequence */
.wf-await-when {
    flex: 0 0 auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: #d97706;
    color: #fff;
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.07em;
}
.wf-await-row.is-next .wf-await-when { background: #e8ebf1; color: #8d95a3; }
.wf-await-row.is-empty .wf-await-when { background: #b3261e; color: #fff; }

.wf-await-cap {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #8a92a2;
}
.wf-await-cap > i { color: #d97706; font-size: 0.62rem; }
.wf-await-cap b { color: #4b5563; font-weight: 800; letter-spacing: 0.02em; }
.wf-await-row.is-empty .wf-await-cap > i { color: #b3261e; }
.wf-await-any {
    padding: 0 7px;
    border-radius: 999px;
    background: #eef2f7;
    color: #64748b;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
}

.wf-await-gap {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 0.63rem;
    font-weight: 700;
    color: #b3261e;
}
.wf-await-gap > i { font-size: 0.62rem; }

.wf-await-list {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 7px;
}

/* ---- the steps ahead, folded away ----------------------------------------
   Only the step being waited on earns permanent room on a card. The rest sit
   behind one line — present, countable, one click away, costing four lines of
   vertical space instead of twenty across a list of twenty claims.
   ------------------------------------------------------------------------- */
.wf-await-toggle {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 7px 11px;
    border: 0;
    border-top: 1px solid #edf0f5;
    background: #f8fafc;
    color: #7b8493;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: background .13s ease, color .13s ease;
}
.wf-await-toggle:hover { background: #f1f5f9; color: #4b5563; }
.wf-await-toggle:focus-visible { outline: 2px solid #d97706; outline-offset: -2px; }
.wf-await-toggle > i:first-child {
    font-size: 0.6rem;
    transition: transform .28s ease;
}
.wf-await.is-open .wf-await-toggle > i:first-child { transform: rotate(180deg); }

/* One label swaps for the other — no JS text juggling to keep translated */
.wf-await .wf-await-toggle-hide,
.wf-await.is-open .wf-await-toggle-show { display: none; }
.wf-await.is-open .wf-await-toggle-hide { display: inline; }

/* A gap downstream is announced on the closed line, not hidden behind it */
.wf-await-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: #fdecec;
    color: #b3261e;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.wf-await-more {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
}
.wf-await-more-inner > .wf-await-row:first-child { border-top: 1px solid #edf0f5; }

@media (prefers-reduced-motion: reduce) {
    .wf-await-more { transition: none; }
    .wf-await-toggle > i:first-child { transition: none; }
}

.wf-who {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 10px 3px 3px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e6ee;
    box-shadow: 0 1px 2px rgba(30, 40, 70, .05);
    transition: border-color .13s ease, box-shadow .13s ease, transform .13s ease;
}
.wf-who[data-bs-toggle="tooltip"] { cursor: help; }
.wf-who:hover { border-color: #c9d2e0; box-shadow: 0 3px 9px rgba(30, 40, 70, .10); transform: translateY(-1px); }

.wf-who-av {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: linear-gradient(135deg, #eef2ff, #e0e7ff);
    color: #4c51bf;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.wf-who-nm {
    font-size: 0.65rem;
    font-weight: 700;
    color: #455061;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wf-who.is-more {
    padding: 4px 11px;
    font-size: 0.62rem;
    font-weight: 800;
    color: #64748b;
    background: #f2f4f8;
}

/* Standing in for somebody else — the right is borrowed, not theirs */
.wf-who.is-cover { border-color: #cfe0f3; background: #f7fbff; }
.wf-who-cover {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-left: 2px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #2563a8;
    font-size: 0.53rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}
.wf-who-cover i { font-size: 0.5rem; }

/* ---- tooltip body -------------------------------------------------------- */
.wf-tip { display: block; text-align: left; line-height: 1.45; }
.wf-tip-cap {
    display: block;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    opacity: .6;
    margin-bottom: 2px;
}
.wf-tip strong { display: block; font-size: 0.76rem; font-weight: 700; }
.wf-tip-sub  { display: block; font-size: 0.66rem; opacity: .8; }
.wf-tip-date { display: block; font-size: 0.64rem; opacity: .65; margin-top: 1px; }
.wf-tip-note {
    display: block;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    font-size: 0.66rem;
    font-style: italic;
    opacity: .9;
}
.tooltip.show { opacity: 1; }
.tooltip .tooltip-inner { max-width: 300px; padding: 8px 11px; text-align: left; }

/* Narrow cards: the rail keeps its dots-and-lines shape and keeps naming its
   people — the type gives way, the information does not.
   --wf-shoulder must follow the node width, or the connectors stop short again
   at exactly the widths where the rail has least room to spare. */
@media (max-width: 991px) {
    .wf-rail { --wf-shoulder: 28px; }   /* (88 − 28) / 2 − 2 */
    .wf-node { width: 88px; }
}
@media (max-width: 575px) {
    .wf-rail { --wf-shoulder: 20px; }   /* (68 − 24) / 2 − 2 */
    .wf-node { width: 68px; }
    .wf-node-dot { width: 24px; height: 24px; }
    .wf-seg { margin-top: 11px; }
    .wf-node-tx b  { font-size: 0.46rem; letter-spacing: 0.05em; }
    .wf-node-tx em { font-size: 0.52rem; max-height: 3.2em; -webkit-line-clamp: 3; line-clamp: 3; }
}
@media (prefers-reduced-motion: reduce) {
    .wf-node.is-current .wf-node-dot { animation: none; }
    .wf-node-dot, .wf-who { transition: none; }
}


/* ============================================================
   Approval attachments  (.ab-)
   Usage: admin/components/approval/_bills_upload.blade.php
          admin/components/approval/_bills_list.blade.php
   ============================================================ */

/* ---- upload box ---------------------------------------------------------- */
.ab-upload {
    padding: 13px 15px;
    border: 1px dashed #cfd6e2;
    border-radius: 11px;
    background: #fbfcfe;
}
.ab-upload-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
    font-size: 0.78rem;
    color: #4b5563;
}
.ab-upload-head > i { color: #6b7484; }
.ab-upload-head b { font-weight: 700; }
.ab-req, .ab-opt {
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.ab-req { background: #fdecec; color: #b3261e; }
.ab-opt { background: #eef2f7; color: #64748b; }

.ab-upload-help  { margin: 0 0 9px; font-size: 0.76rem; line-height: 1.6; color: #6b7484; }
.ab-upload-rules { margin: 8px 0 0; font-size: 0.7rem; line-height: 1.6; color: #8a93a6; }
.ab-upload-rules > i { margin-right: 4px; }

.ab-picked { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
/* Now a row rather than a block: each picked file carries its own × so one can
   be taken off the list without clearing the whole selection. */
.ab-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 3px 5px 3px 10px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e2e6ee;
    font-size: 0.68rem;
    font-weight: 600;
    color: #455061;
    white-space: nowrap;
}
.ab-chip > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ab-chip.is-bad { background: #fdecec; border-color: #f3cfcf; color: #b3261e; }

.ab-chip-x {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .45;
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    transition: opacity .12s ease, background-color .12s ease;
}
.ab-chip-x:hover { opacity: 1; background: #f1f3f7; }
.ab-chip.is-bad .ab-chip-x:hover { background: #f7d7d7; }
.ab-warn { flex: 1 1 100%; margin: 4px 0 0; font-size: 0.7rem; font-weight: 700; color: #b3261e; }

/* ---- what is already attached -------------------------------------------- */
.ab-list {
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid #e6eaf1;
    border-left: 3px solid #2563a8;
    border-radius: 10px;
    background: #fbfcfe;
}
.ab-list.is-empty { border-left-color: #b3261e; background: #fdf7f7; }

.ab-list-head {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #8a92a2;
}
.ab-list-head > i { color: #2563a8; font-size: 0.65rem; }
.ab-list.is-empty .ab-list-head > i { color: #b3261e; }
.ab-list-head b { color: #4b5563; letter-spacing: 0.02em; }
.ab-count {
    padding: 0 7px;
    border-radius: 999px;
    background: #eaf2fb;
    color: #2563a8;
    font-weight: 800;
}
.ab-empty-note { margin: 6px 0 0; font-size: 0.7rem; line-height: 1.6; color: #a06863; }

.ab-files { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; }
.ab-file {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 9px;
    border: 1px solid #e7e9ef;
    border-radius: 8px;
    background: #fff;
}
.ab-file-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #f2f4f8;
    color: #64748b;
    font-size: 0.7rem;
    flex: 0 0 auto;
}
.ab-file-tx { flex: 1 1 auto; min-width: 0; }
.ab-file-nm {
    display: block;
    font-size: 0.74rem;
    font-weight: 700;
    color: #2563a8;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ab-file-nm:hover { text-decoration: underline; }
.ab-file-sub { display: block; font-size: 0.64rem; color: #8a93a6; }
.ab-file-del {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid #e7e9ef;
    border-radius: 7px;
    background: #fff;
    color: #8a93a6;
    font-size: 0.68rem;
    transition: all .12s ease;
}
.ab-file-del:hover { border-color: #b3261e; background: #b3261e; color: #fff; }


/* ============================================================
   Action Card  (status-bordered card with workflow state bg)
   ============================================================ */

.action-card {
    transition: box-shadow 0.2s ease;
    border: 1px solid #dee2e6 !important;
    border-left-width: 5px !important;
}
.action-card.border-warning { border-left-color: #ffc107 !important; }
.action-card.border-success { border-left-color: #198754 !important; }
.action-card.border-danger  { border-left-color: #dc3545 !important; }
.action-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.13) !important; cursor: pointer; }


/* ============================================================
   Utility Buttons
   ============================================================ */

.btn-outline-forest { color: #1e8449; border-color: #1e8449; background: transparent; }
.btn-outline-forest:hover { color: #fff; background-color: #1e8449; border-color: #1e8449; }
.btn-outline-forest:disabled,
.btn-outline-forest.disabled { color: #1e8449; border-color: #1e8449; opacity: 0.55; }


/* ============================================================
   Modal close button
   Applies to every admin modal. Bootstrap paints .btn-close as a dark
   SVG mask, which all but disappears on the dark headers used across
   the ERP — this turns it into a round, self-contained button that
   reads on any header colour and grows a soft target on hover.
   ============================================================ */

.modal .btn-close {
    width: 30px;
    height: 30px;
    padding: 0;
    /* style.css pins this absolutely at top:12px/right:10px — keep it there */
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.16);
    /* Redrawn white glyph — replaces Bootstrap's dark default */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M2.15 2.15a.75.75 0 0 1 1.06 0L8 6.94l4.79-4.79a.75.75 0 1 1 1.06 1.06L9.06 8l4.79 4.79a.75.75 0 0 1-1.06 1.06L8 9.06l-4.79 4.79a.75.75 0 0 1-1.06-1.06L6.94 8 2.15 3.21a.75.75 0 0 1 0-1.06z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px 13px;
    opacity: 0.85;
    transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.15s ease;
}

.modal .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.3);
    opacity: 1;
    transform: rotate(90deg);
}

.modal .btn-close:focus {
    outline: 0;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
    opacity: 1;
}

.modal .btn-close:active { transform: rotate(90deg) scale(0.92); }

/* Light headers need the dark glyph back, or the X vanishes into the page */
.modal .modal-header.bg-white .btn-close,
.modal .modal-header.bg-light .btn-close,
.modal .modal-header.bg-transparent .btn-close,
.modal .btn-close.btn-close-dark {
    background-color: rgba(20, 25, 40, 0.08);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%233b4252'%3e%3cpath d='M2.15 2.15a.75.75 0 0 1 1.06 0L8 6.94l4.79-4.79a.75.75 0 1 1 1.06 1.06L9.06 8l4.79 4.79a.75.75 0 0 1-1.06 1.06L8 9.06l-4.79 4.79a.75.75 0 0 1-1.06-1.06L6.94 8 2.15 3.21a.75.75 0 0 1 0-1.06z'/%3e%3c/svg%3e");
}

.modal .modal-header.bg-white .btn-close:hover,
.modal .modal-header.bg-light .btn-close:hover,
.modal .modal-header.bg-transparent .btn-close:hover,
.modal .btn-close.btn-close-dark:hover {
    background-color: rgba(20, 25, 40, 0.16);
}

.modal .modal-header.bg-white .btn-close:focus,
.modal .modal-header.bg-light .btn-close:focus,
.modal .modal-header.bg-transparent .btn-close:focus,
.modal .btn-close.btn-close-dark:focus {
    box-shadow: 0 0 0 3px rgba(20, 25, 40, 0.14);
}

@media (prefers-reduced-motion: reduce) {
    .modal .btn-close,
    .modal .btn-close:hover,
    .modal .btn-close:active { transition: none; transform: none; }
}


/* ============================================================
   Misc
   ============================================================ */

.detail-link { transition: color 0.15s ease; }
.detail-link:hover { text-decoration: underline !important; }


/* ============================================================================
   Action Centre notification — "new items need your attention"

   The live poller used to raise a full-screen SweetAlert modal with a stock
   sky-blue OK button: it blocked the page, it was the only sky blue in the
   system, and it told you what had arrived without letting you go there.

   This is a slide-in panel instead. It states what arrived, each line is a link
   straight to that queue, and it dismisses itself. Nothing is blocked.

   It rides on EVERY admin page — including ones that do not link
   erp-admin.css — so every token carries a literal fallback.
   ========================================================================== */
.acn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1200;
    width: 380px;
    max-width: calc(100vw - 32px);
    border: 1px solid var(--ui-line, #e2e6ee);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(20, 25, 40, .22);
    overflow: hidden;
    transform: translateY(14px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
}
.acn.is-in { transform: none; opacity: 1; }

.acn-head {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    background: linear-gradient(135deg, var(--ui-maroon, #a6303a) 0%, var(--ui-maroon-deep, #6d1f27) 100%);
    color: #fff;
}
.acn-head-ic {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .17);
    font-size: 13px;
    flex: 0 0 auto;
}
.acn-head-tx { flex: 1 1 auto; min-width: 0; }
.acn-head-tx b { display: block; font-size: 13px; font-weight: 800; letter-spacing: .01em; }
.acn-head-tx span { display: block; margin-top: 1px; font-size: 11px; color: rgba(255, 255, 255, .8); }
.acn-x {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease;
}
.acn-x:hover { background: rgba(255, 255, 255, .28); }

.acn-body { max-height: 300px; overflow-y: auto; scrollbar-width: thin; }

.acn-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 15px;
    border-bottom: 1px solid var(--ui-line-faint, #f1f3f6);
    text-decoration: none;
    transition: background .12s ease;
}
.acn-row:last-child { border-bottom: 0; }
.acn-row:hover { background: var(--ui-wash, #fbfcfd); text-decoration: none; }

.acn-n {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 26px;
    padding: 0 8px;
    border-radius: 8px;
    background: var(--ui-band-a, #f6e4e7);
    border: 1px solid var(--ui-band-line, #e6cdd2);
    color: var(--ui-maroon, #a6303a);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}
.acn-row.is-urgent .acn-n {
    background: var(--ui-bad-bg, #fdecec);
    border-color: var(--ui-bad-line, #f3cfcf);
    color: var(--ui-bad, #b3261e);
}

.acn-tx { flex: 1 1 auto; min-width: 0; }
.acn-mod {
    display: block;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ui-ink-5, #8a93a6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.acn-lbl {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--ui-ink-2, #3b4252);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.acn-go { flex: 0 0 auto; font-size: 11px; color: var(--ui-ink-6, #a2aab8); }
.acn-row:hover .acn-go { color: var(--ui-maroon, #a6303a); }

.acn-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    border-top: 1px solid var(--ui-line-faint, #f1f3f6);
    background: var(--ui-wash-2, #fafbfc);
}
.acn-more { font-size: 11px; color: var(--ui-ink-5, #8a93a6); }
.acn-all {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--ui-maroon, #a6303a);
    text-decoration: none;
}
.acn-all:hover { color: var(--ui-maroon-deep, #6d1f27); text-decoration: underline; }

@media (max-width: 575px) {
    .acn { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .acn { transition: none; transform: none; opacity: 1; }
}


/* ============================================================================
   Admin header — tablet and phone

   The stock theme breaks the header into TWO rows below 992px: it sets
   .m-header to width:100% so the logo takes the whole first line, then forces
   the nav visible underneath on its own white bar with a shadow
   (.unity-header > .collapse:not(.show)). The result is a logo row, a second
   row of controls, and the slate-blue header colour showing between them —
   which is neither the institutional palette nor a usable header.

   This puts it back to ONE row at every width: brand left, controls right.
   Loaded after style.css, so it wins on equal specificity.
   ========================================================================== */
@media only screen and (max-width: 991px) {

    .unity-header {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center;
        gap: 6px;
        height: 62px;
        min-height: 62px;
        /* !important because the theme sets `.unity-header { padding: 0 }`
           globally; without it the logo sits hard against the screen edge. */
        padding: 0 14px !important;
        /* Institutional white, not the theme's #3f4d67 slate. */
        background: #fff !important;
        border-bottom: 1px solid var(--ui-line, #e2e6ee);
        box-shadow: 0 2px 10px rgba(30, 40, 70, .05);
    }

    /* Brand block: sized to its contents, not to the whole row. */
    .unity-header .m-header {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 12px;
        width: auto !important;
        height: auto !important;
        flex: 0 0 auto;
        padding-left: 4px;
    }
    /* The mark is not repeated here. It heads the sidebar drawer instead (see
       the .unity-navbar .navbar-brand block below), which is where it is read —
       the header only needs the menu button and the controls, and dropping it
       gives the controls the whole row on a narrow screen. */
    .unity-header .m-header .b-brand { display: none !important; }

    /* ⚠ The sidebar toggle is the reason the right-hand icons were being sat on.
       The theme styles .mobile-menu as `position:absolute; right:0; width:37px;
       height:70px`. Inside .m-header that resolves against .unity-header (which
       is position:relative), so the hamburger was thrown to the FAR RIGHT of the
       header and landed directly on top of the profile icon. In a single-row
       header it simply belongs in the flow, at the left, before the logo. */
    .unity-header .m-header .mobile-menu {
        position: static !important;
        /* right:20px is still declared by the theme at this width; harmless once
           the element is static, but the flex basis is fixed so the logo can
           never be laid out on top of it. */
        right: auto !important;
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 30px !important;
        margin-right: 4px;
        padding: 0 !important;
    }
    /* The theme draws the three bars in #fff, for its dark slate header. On a
       white header that is an invisible control — and the sliver that did show
       read as a stray red mark next to the icons. */
    .unity-header .m-header .mobile-menu span,
    .unity-header .m-header .mobile-menu span:after,
    .unity-header .m-header .mobile-menu span:before {
        background-color: var(--ui-ink-3, #4b5563) !important;
    }
    .unity-header .m-header .mobile-menu:hover span,
    .unity-header .m-header .mobile-menu:hover span:after,
    .unity-header .m-header .mobile-menu:hover span:before {
        background-color: var(--ui-maroon, #a6303a) !important;
    }

    /* The controls: one row, pushed right, no second bar and no shadow. */
    .unity-header > .collapse:not(.show),
    .unity-header > .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        min-width: 0;
        align-items: center;
        justify-content: flex-end;
        background: transparent !important;
        box-shadow: none !important;
        position: static !important;
        padding: 0 !important;
    }
    .unity-header .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* The long institute name and the fullscreen toggle are the first things
       to go — neither survives a 360px screen, and the logo already says
       which institute this is. */
    .unity-header .navbar-nav.me-auto { display: none !important; }

    .unity-header .navbar-nav > li > a,
    .unity-header .navbar-nav > li > .dropdown > a {
        color: var(--ui-ink-3, #4b5563) !important;
        padding: 0 9px !important;
    }
    .unity-header .navbar-nav > li > a:hover { color: var(--ui-maroon, #a6303a) !important; }

    /* The chevron on each header dropdown.
       The theme gives the toggle `line-height: 70px` and pins the caret at
       `top: 0`, which only lands correctly in a 70px header. At 62px (and 56px
       on a phone) the glyph floats clear of its icon and reads as a stray tick
       sitting above it. Centre it on the icon instead of on the line box. */
    .unity-header .dropdown .dropdown-toggle {
        display: inline-flex !important;
        align-items: center;
        line-height: 1 !important;
        padding-right: 14px !important;
    }
    .unity-header .dropdown .dropdown-toggle:after {
        top: 50% !important;
        right: 0 !important;
        transform: translateY(-50%);
        font-size: 12px !important;
        line-height: 1 !important;
        opacity: .55;
    }

    /* Dropdowns must stay on screen rather than running off the right edge.
       The theme sets `.unity-header .dropdown .dropdown-menu { width:90%;
       left:0; right:0; margin:auto }` at this width, which centres them over
       the page and overrides the profile card's own 264px. Undone here. */
    .unity-header .dropdown .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        left: auto !important;
        right: 4px !important;
        width: auto !important;
        max-width: calc(100vw - 16px) !important;
        margin: 6px 0 0 !important;
    }
    .unity-header .dropdown .dropdown-menu.drp-user-card,
    .unity-header .dropdown .dropdown-menu.notification {
        width: min(288px, calc(100vw - 16px)) !important;
    }
    /* Belt and braces: a header dropdown is only ever visible with .show on it.
       Without this, any theme rule that sets display on .dropdown-menu leaves a
       sliver of the maroon card peeking out under the icon. */
    .unity-header .dropdown-menu:not(.show) { display: none !important; }

    /* The theme hides this on tablet and then relies on the second bar; with a
       single row there is nothing left for it to toggle. */
    .unity-header #mobile-header { display: none !important; }

    /* The theme reserves 60px on the last control for a search box this build
       does not have, which pushed the profile icon away from the edge and left
       the row looking unbalanced. */
    .unity-header .navbar-nav > li:last-child { padding-right: 0 !important; }

    /* The theme reserves 140px above the content at this width — the height of
       its old two-row header (.unity-header.headerpos-fixed ~ .unity-main-container
       in style.css). The header above is one 62px row, so the difference was a
       band of dead space under the header on every admin page on a phone. Keep
       the reservation equal to the header. */
    .unity-header.headerpos-fixed ~ .unity-main-container { padding-top: 62px; }
}

/* ---------------------------------------------------------------------------
   Sidebar drawer — breathing room at the top
   ----------------------------------------------------------------------------
   On mobile the drawer opens directly under the fixed header and the first item
   ("Dashboard") sits hard against it, reading as though it were part of the bar
   rather than the first thing in a list.
   ------------------------------------------------------------------------- */
@media only screen and (max-width: 991px) {

    /* The theme hides the sidebar's own brand block below 992px
       (.unity-navbar .navbar-brand { display: none }) because the logo lives in
       the header instead. But the drawer covers the header when it opens, so it
       used to slide out with "Dashboard" as its first line and nothing saying
       which system you were in. Bring the mark back as the drawer's own head. */
    .unity-navbar .navbar-brand {
        display: flex !important;
        align-items: center;
        gap: 10px;
        height: auto !important;
        padding: 14px 18px 12px !important;
        border-bottom: 1px solid var(--ui-line-faint, #f1f3f6);
        background: #fff;
    }
    .unity-navbar .navbar-brand .b-brand { display: inline-flex; align-items: center; min-width: 0; }
    .unity-navbar .navbar-brand .b-brand img {
        height: 30px;
        width: auto;
        max-width: 190px;
        object-fit: contain;
    }
    /* The drawer's own collapse button belongs to the desktop rail, not here —
       the drawer is closed by tapping outside it or the header button. */
    .unity-navbar .navbar-brand #mobile-collapse { display: none !important; }

    .unity-navbar .navbar-content,
    .unity-navbar .scroll-div.navbar-content { padding-top: 8px; }
    .unity-navbar .unity-inner-navbar { padding-top: 4px; }
    .unity-navbar .unity-inner-navbar > li:first-child { margin-top: 2px; }
}

/* Phones: tighten further and drop the language label to its icon. */
@media only screen and (max-width: 575px) {
    .unity-header { height: 56px; min-height: 56px; padding: 0 11px !important; gap: 2px; }
    .unity-header .m-header { gap: 7px; }
    /* The drawer's mark scales down with the screen; the header carries none. */
    .unity-navbar .navbar-brand { padding: 12px 15px 10px !important; }
    .unity-navbar .navbar-brand .b-brand img { height: 26px; max-width: 62vw; }
    .unity-header .navbar-nav > li > a,
    .unity-header .navbar-nav > li > .dropdown > a { padding: 0 6px !important; }
    /* "English ⌄" becomes the globe alone — the menu still names the language. */
    .unity-header .navbar-nav .lng-title { display: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Select2 — the ERP skin, application-wide.

   The library ships a grey squared box with a default-blue highlight; style.css
   then flattens it to an underline. Neither looks like the rest of the system.
   This skin restates the doctrine's form language over it: white field, soft
   border, 10px radius, maroon focus and highlight. Token fallbacks keep pages
   without erp-admin.css rendering identically (same pattern as flatpickr-erp).
   Loads after style.css on purpose — order is what lets these rules win.
   ════════════════════════════════════════════════════════════════════════ */

/* ---- Closed control: single ---- */
.select2-container--default .select2-selection--single {
    background: #fff !important;
    border: 1px solid #dde3ee !important;
    border-radius: 10px !important;
    height: 38px !important;
    transition: border-color .13s ease, box-shadow .13s ease;
}
.select2-container--default .select2-selection--single:hover {
    border-color: #c3cddd !important;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--ui-maroon, #a6303a) !important;
    box-shadow: 0 0 0 3px rgba(166, 48, 58, .12) !important;
}
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 8px 30px 8px 13px;
    line-height: 1.55;
    color: #3b4252;
    font-size: 13.5px;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #8a93a6;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 6px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #8a93a6 transparent transparent transparent;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--ui-maroon, #a6303a) transparent;
}
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #8a93a6;
    font-weight: 700;
    margin-right: 14px;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--ui-bad, #a6303a);
}

/* ---- Closed control: multiple (chips) ---- */
.select2-container--default .select2-selection--multiple {
    background: #fff !important;
    border: 1px solid #dde3ee !important;
    border-radius: 10px !important;
    min-height: 38px;
    padding: 2px 6px;
    transition: border-color .13s ease, box-shadow .13s ease;
}
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-maroon, #a6303a) !important;
    box-shadow: 0 0 0 3px rgba(166, 48, 58, .12) !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: #f6e9ea;
    border: 1px solid #ecd3d5;
    border-radius: 999px;
    color: var(--ui-maroon-dark, #822630);
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 10px 2px 6px;
    margin: 4px 4px 2px 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--ui-maroon, #a6303a);
    font-weight: 700;
    margin-right: 2px;
    border-right: 0;
    padding: 0 2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: transparent;
    color: var(--ui-maroon-deep, #5f1b22);
}

/* ---- Dropdown panel ---- */
.select2-dropdown {
    border: 1px solid #e3e8f2 !important;
    border-radius: 12px !important;
    box-shadow: 0 16px 38px rgba(30, 40, 70, .16) !important;
    overflow: hidden;
    margin-top: 6px;
}
.select2-dropdown--above {
    margin-top: -6px;
    box-shadow: 0 -10px 30px rgba(30, 40, 70, .14) !important;
}

/* Search box inside the panel */
.select2-container--default .select2-search--dropdown {
    padding: 10px 10px 6px;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #dde3ee !important;
    border-radius: 8px !important;
    padding: 7px 12px;
    font-size: 13px;
    color: #3b4252;
    outline: none;
    transition: border-color .13s ease, box-shadow .13s ease;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--ui-maroon, #a6303a) !important;
    box-shadow: 0 0 0 3px rgba(166, 48, 58, .10);
}

/* Options */
.select2-results { padding: 4px 6px 6px; }
.select2-container--default .select2-results > .select2-results__options {
    max-height: 264px;
    scrollbar-width: thin;
    scrollbar-color: #c9d2e0 transparent;
}
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar { width: 8px; }
.select2-container--default .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: #c9d2e0; border-radius: 999px; border: 2px solid #fff;
}
.select2-container--default .select2-results__option {
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    color: #3b4252;
    margin: 1px 0;
    transition: background .1s ease;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--ui-maroon, #a6303a) !important;
    color: #fff !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: #f6e9ea;
    color: var(--ui-maroon-dark, #822630);
    font-weight: 600;
}
.select2-container--default .select2-results__option[aria-disabled="true"] {
    color: #b3bac7;
}
.select2-container--default .select2-results__option .select2-results__group,
.select2-container--default .select2-results__group {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a93a6;
    padding: 8px 12px 4px;
}

/* ── <optgroup> children, indented ──────────────────────────────────────
   select2 draws a group as an option <li role="group"> holding a <strong>
   heading and a nested <ul>. The plugin indents that nested list by 1em, but
   the flat option padding above ties it on specificity and loads later, so
   every grouped picker in the admin showed headings and items on one margin
   and the heading stopped reading as a heading. These win the tie and add an
   indent guide, so a long list still reads as a tree when scrolled. Global,
   so By permission, Offices, leave balances, grade computation and the
   purchase forms all get it without a line each. */
.select2-container--default .select2-results__option[role="group"] {
    padding: 0;                      /* the heading carries its own */
}
.select2-container--default .select2-results__options--nested {
    margin: 0 0 4px;
    padding-left: 0;
}
/* Indent by padding alone — no guide line. The step is enough to read the
   heading as a heading, and a rule down the left made the list look boxed. */
.select2-container--default .select2-results__options--nested > .select2-results__option {
    padding-left: 30px;
}
/* A grouped result must never look hover-able as a whole; only its items do. */
.select2-container--default .select2-results__option[role="group"]:hover { background: none; }
.select2-container--default .select2-results__message {
    color: #8a93a6;
    font-size: 12.5px;
}

/* Disabled control */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background: #f4f6fa !important;
    border-color: #e5eaf3 !important;
    box-shadow: none !important;
}