/* ============================================================
   Directors Work Schedule Platform — interface styles

   Visual language follows the Atlassian/Jira pattern: a neutral
   grey canvas, white elevated surfaces, status "lozenges", and a
   Trello-style column board. Layered over Bootstrap so that screens
   which still use Bootstrap markup inherit the same language.
   ============================================================ */

:root {
    /* Neutrals */
    --n0:  #ffffff;
    --n10: #fafbfc;
    --n20: #f4f5f7;
    --n30: #ebecf0;
    --n40: #dfe1e6;
    --n50: #c1c7d0;
    --n70: #a5adba;
    --n200: #6b778c;
    --n300: #5e6c84;
    --n500: #42526e;
    --n800: #172b4d;

    /* Brand — Ghana Air Force navy, used for the shell */
    --brand:        #0b2f6b;
    --brand-dark:   #071f48;
    --brand-light:  #1a4a9c;

    /* Accents */
    --blue:     #0c66e4;
    --blue-dark:#0055cc;
    --blue-bg:  #e9f2ff;
    --green:    #216e4e;
    --green-bg: #dcfff1;
    --yellow:   #a54800;
    --yellow-bg:#fff7d6;
    --red:      #ae2e24;
    --red-bg:   #ffecea;
    --purple:   #5e4db2;
    --purple-bg:#f3f0ff;
    --teal:     #206a83;
    --teal-bg:  #e3fafc;

    --radius:    3px;
    --radius-lg: 6px;
    --shadow-card:  0 1px 1px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.13);
    --shadow-raise: 0 8px 16px -4px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);
    --shadow-overlay: 0 4px 8px -2px rgba(9,30,66,.25), 0 0 1px rgba(9,30,66,.31);

    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', monospace;

    --sidebar-w: 240px;
    --topbar-h:  56px;

    /* Legacy aliases kept so untouched templates keep resolving */
    --sky-surface: var(--n20);
    --sky-text:    var(--n800);
    --sky-border:  var(--n40);
    --gaf-blue:        var(--blue);
    --gaf-blue-dark:   var(--blue-dark);
    --ga-sidebar:      var(--brand);
    --ga-sidebar-dark: var(--brand-dark);
}

/* ---- Dark theme -------------------------------------------------------
   Only the tokens change; every component below resolves through them.
   `data-theme` on <html> wins; otherwise the OS preference applies.      */
:root[data-theme="dark"],
:root:not([data-theme="light"]) .dws-force-dark {
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --n0:  #1d2125;
        --n10: #22272b;
        --n20: #282e33;
        --n30: #2c333a;
        --n40: #38414a;
        --n50: #454f59;
        --n70: #596773;
        --n200: #8c9bab;
        --n300: #9fadbc;
        --n500: #b6c2cf;
        --n800: #dee4ea;

        --brand: #11315f;
        --brand-dark: #0a1f40;
        --brand-light: #1d4b8f;

        --blue: #579dff;      --blue-dark: #85b8ff;   --blue-bg: #1c2b41;
        --green: #7ee2b8;     --green-bg: #1c3329;
        --yellow: #f5cd47;    --yellow-bg: #332e1b;
        --red: #f87168;       --red-bg: #42221f;
        --purple: #9f8fef;    --purple-bg: #2b273f;
        --teal: #9dd9ee;      --teal-bg: #1d3439;

        --shadow-card:  0 1px 1px rgba(3,8,16,.5), 0 0 1px rgba(3,8,16,.5);
        --shadow-raise: 0 8px 16px -4px rgba(3,8,16,.6), 0 0 1px rgba(3,8,16,.6);
        --shadow-overlay: 0 4px 8px -2px rgba(3,8,16,.6), 0 0 1px rgba(3,8,16,.6);

        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --n0:  #1d2125;
    --n10: #22272b;
    --n20: #282e33;
    --n30: #2c333a;
    --n40: #38414a;
    --n50: #454f59;
    --n70: #596773;
    --n200: #8c9bab;
    --n300: #9fadbc;
    --n500: #b6c2cf;
    --n800: #dee4ea;

    --brand: #11315f;
    --brand-dark: #0a1f40;
    --brand-light: #1d4b8f;

    --blue: #579dff;      --blue-dark: #85b8ff;   --blue-bg: #1c2b41;
    --green: #7ee2b8;     --green-bg: #1c3329;
    --yellow: #f5cd47;    --yellow-bg: #332e1b;
    --red: #f87168;       --red-bg: #42221f;
    --purple: #9f8fef;    --purple-bg: #2b273f;
    --teal: #9dd9ee;      --teal-bg: #1d3439;

    --shadow-card:  0 1px 1px rgba(3,8,16,.5), 0 0 1px rgba(3,8,16,.5);
    --shadow-raise: 0 8px 16px -4px rgba(3,8,16,.6), 0 0 1px rgba(3,8,16,.6);
    --shadow-overlay: 0 4px 8px -2px rgba(3,8,16,.6), 0 0 1px rgba(3,8,16,.6);
}

/* AG Grid ships a light theme; point it at the tokens in dark mode. */
:root[data-theme="dark"] .ag-theme-alpine,
:root:not([data-theme="light"]) .ag-theme-alpine {
    --ag-background-color: var(--n0);
    --ag-header-background-color: var(--n20);
    --ag-odd-row-background-color: var(--n0);
    --ag-foreground-color: var(--n800);
}

/* The auth screens paint their own gradient. */
:root[data-theme="dark"] .dws-auth {
    background: linear-gradient(160deg, #06101f 0%, #0a1f40 55%, #11315f 100%);
}

* { box-sizing: border-box; }

body {
    font-family: var(--font-sans);
    background: var(--n20);
    color: var(--n800);
    font-size: 14px;
    line-height: 1.43;
    margin: 0;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 600; letter-spacing: -.008em; color: var(--n800); margin: 0; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }

.font-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.dws-preline { white-space: pre-line; }
.text-muted { color: var(--n300) !important; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 2px; }

/* ============================================================
   App shell — fixed navy topbar, light project sidebar
   ============================================================ */

.dws-shell { min-height: 100vh; display: flex; flex-direction: column; }

.dws-appbar {
    position: sticky; top: 0; z-index: 300;
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 12px;
    padding: 0 16px;
    background: var(--brand);
    color: #fff;
    box-shadow: 0 1px 0 rgba(9,30,66,.25);
}
.dws-appbar__brand { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; }
.dws-appbar__brand:hover { color: #fff; text-decoration: none; }
.dws-appbar__mark {
    width: 28px; height: 28px; flex: none;
    display: grid; place-items: center;
    border-radius: var(--radius);
    background: rgba(255,255,255,.16);
    font-size: 13px;
}
.dws-appbar__name { font-weight: 600; font-size: 14px; letter-spacing: -.01em; line-height: 1.1; }
.dws-appbar__sub  { font-size: 11px; color: rgba(255,255,255,.66); line-height: 1.1; }
.dws-appbar__spacer { flex: 1; }

.dws-search {
    position: relative; width: 260px; max-width: 32vw;
}
.dws-search input {
    width: 100%; height: 32px;
    padding: 0 10px 0 30px;
    border-radius: var(--radius);
    border: 1px solid rgba(255,255,255,.28);
    background: rgba(255,255,255,.12);
    color: #fff; font-size: 13px;
}
.dws-search input::placeholder { color: rgba(255,255,255,.6); }
.dws-search input:focus { outline: none; background: #fff; color: var(--n800); border-color: #fff; }
.dws-search input:focus::placeholder { color: var(--n200); }
.dws-search i {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    font-size: 12px; color: rgba(255,255,255,.7); pointer-events: none;
}
.dws-search input:focus + i { color: var(--n200); }

.dws-iconbtn {
    position: relative;
    width: 32px; height: 32px; flex: none;
    display: grid; place-items: center;
    border-radius: 50%;
    color: rgba(255,255,255,.85);
    text-decoration: none; border: 0; background: transparent;
}
.dws-iconbtn:hover { background: rgba(255,255,255,.16); color: #fff; text-decoration: none; }
.dws-iconbtn__dot {
    position: absolute; top: 1px; right: 0;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 8px; background: var(--red);
    color: #fff; font-size: 10px; font-weight: 700;
    display: grid; place-items: center;
    border: 2px solid var(--brand);
}

.dws-avatar {
    width: 28px; height: 28px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 600;
    background: var(--blue); color: #fff;
    text-transform: uppercase; letter-spacing: .02em;
}
.dws-avatar--sm { width: 22px; height: 22px; font-size: 9px; }
.dws-avatar--lg { width: 40px; height: 40px; font-size: 14px; }
.dws-avatar--ghost { background: var(--n40); color: var(--n300); }
.dws-avatar--xl { width: 72px; height: 72px; font-size: 24px; }
.dws-avatar--photo { object-fit: cover; background: var(--n30); }

.dws-body { flex: 1; display: flex; min-height: 0; }

.dws-sidebar {
    width: var(--sidebar-w); flex: none;
    background: var(--n10);
    border-right: 1px solid var(--n30);
    padding: 16px 8px 12px;
    display: flex; flex-direction: column;
}
.dws-sidebar__heading {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--n200);
    padding: 8px 12px 4px;
}
.dws-nav { display: flex; flex-direction: column; gap: 1px; }
.dws-nav__link {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 12px;
    border-radius: var(--radius);
    color: var(--n500); font-size: 13.5px; font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
}
.dws-nav__link i { width: 15px; font-size: 13px; text-align: center; color: var(--n200); }
.dws-nav__link:hover { background: var(--n30); color: var(--n800); text-decoration: none; }
.dws-nav__link.active {
    background: var(--blue-bg); color: var(--blue-dark);
    border-left-color: var(--blue); font-weight: 600;
}
.dws-nav__link.active i { color: var(--blue); }
.dws-sidebar__footer {
    margin-top: auto; padding: 10px 12px 0;
    border-top: 1px solid var(--n30);
    font-size: 11px; color: var(--n200);
}

.dws-main { flex: 1; min-width: 0; padding: 20px 28px 48px; }

/* Page header */
.dws-page-head { margin-bottom: 16px; }
.dws-breadcrumb { font-size: 12px; color: var(--n200); margin-bottom: 4px; }
.dws-breadcrumb a { color: var(--n200); }
.dws-page-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.dws-page-title h1 { margin: 0; }
.dws-page-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dws-page-sub { font-size: 13px; color: var(--n300); margin-top: 4px; }

/* Toolbar above a list/board */
.dws-toolbar {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap; margin-bottom: 14px;
}
.dws-toolbar__spacer { flex: 1; }

/* ============================================================
   Controls — Bootstrap overrides in the Jira idiom
   ============================================================ */

.btn {
    border-radius: var(--radius);
    font-weight: 500; font-size: 13.5px;
    padding: 6px 12px; border: 0;
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1.25;
}
.btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; box-shadow: none; }
/* inline-flex defaults to flex-start, which left-aligns a stretched button */
.btn.w-100, .btn.btn-block, .btn-group .btn { justify-content: center; }
.btn-sm { padding: 4px 10px; font-size: 13px; }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background: var(--blue-dark); color: #fff; }
.btn-secondary, .btn-default { background: var(--n30); color: var(--n500); }
.btn-secondary:hover { background: var(--n40); color: var(--n800); }
.btn-outline-primary { background: transparent; color: var(--blue); box-shadow: inset 0 0 0 1px var(--n50); }
.btn-outline-primary:hover { background: var(--blue-bg); color: var(--blue-dark); box-shadow: inset 0 0 0 1px var(--blue); }
.btn-outline-secondary { background: transparent; color: var(--n500); box-shadow: inset 0 0 0 1px var(--n50); }
.btn-outline-secondary:hover { background: var(--n30); color: var(--n800); }
.btn-outline-danger { background: transparent; color: var(--red); box-shadow: inset 0 0 0 1px var(--n50); }
.btn-outline-danger:hover { background: var(--red-bg); color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #8f2016; color: #fff; }
.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #185c40; color: #fff; }
.btn-light, .btn-outline-dark { background: var(--n0); color: var(--n500); box-shadow: inset 0 0 0 1px var(--n50); }
.btn-link { color: var(--blue); background: none; box-shadow: none; }

.form-control, .form-select {
    border-radius: var(--radius);
    border: 1px solid var(--n50);
    background: var(--n10);
    font-size: 13.5px; padding: 6px 10px;
    color: var(--n800);
}
.form-control:focus, .form-select:focus {
    background: var(--n0); border-color: var(--blue);
    box-shadow: 0 0 0 1px var(--blue); outline: none;
}
.form-control-sm, .form-select-sm { padding: 4px 8px; font-size: 13px; }
.form-label { font-size: 12px; font-weight: 600; color: var(--n300); margin-bottom: 4px; }
.form-text { font-size: 12px; color: var(--n200); }

/* Cards / panels */
.card {
    background: var(--n0);
    border: 1px solid var(--n30);
    border-radius: var(--radius-lg);
    box-shadow: none;
}
.card-header {
    background: var(--n0);
    border-bottom: 1px solid var(--n30);
    font-weight: 600; font-size: 13px;
    color: var(--n500);
    padding: 10px 14px;
    display: flex; align-items: center; gap: 8px;
}
.card-body { padding: 14px; }

/* Alerts */
.alert {
    border: 0; border-radius: var(--radius);
    border-left: 3px solid transparent;
    font-size: 13.5px; padding: 10px 14px;
}
.alert-success { background: var(--green-bg); color: var(--green); border-left-color: var(--green); }
.alert-danger  { background: var(--red-bg);   color: var(--red);   border-left-color: var(--red); }
.alert-warning { background: var(--yellow-bg);color: var(--yellow);border-left-color: var(--yellow); }
.alert-info, .alert-primary { background: var(--blue-bg); color: var(--blue-dark); border-left-color: var(--blue); }
.alert-secondary { background: var(--n30); color: var(--n500); border-left-color: var(--n50); }

/* ============================================================
   Lozenges — Jira's status pill
   ============================================================ */

.lozenge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 7px;
    border-radius: var(--radius);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    line-height: 1.4; white-space: nowrap;
    background: var(--n30); color: var(--n500);
}
.lozenge--default  { background: var(--n30);     color: var(--n500); }
.lozenge--progress { background: var(--blue-bg); color: var(--blue-dark); }
.lozenge--success  { background: var(--green-bg);color: var(--green); }
.lozenge--warning  { background: var(--yellow-bg); color: var(--yellow); }
.lozenge--danger   { background: var(--red-bg);  color: var(--red); }
.lozenge--moved    { background: var(--purple-bg); color: var(--purple); }
.lozenge--info     { background: var(--teal-bg); color: var(--teal); }
.lozenge--solid    { background: var(--blue); color: #fff; }

/* Bootstrap badges adopt the lozenge look so untouched screens match */
.badge {
    border-radius: var(--radius);
    font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 6px;
}
.badge.bg-primary   { background: var(--blue-bg) !important;  color: var(--blue-dark); }
.badge.bg-secondary { background: var(--n30) !important;      color: var(--n500); }
.badge.bg-success   { background: var(--green-bg) !important; color: var(--green); }
.badge.bg-warning   { background: var(--yellow-bg) !important;color: var(--yellow); }
.badge.bg-danger    { background: var(--red-bg) !important;   color: var(--red); }
.badge.bg-dark      { background: var(--n40) !important;      color: var(--n500); }

/* Priority / type glyphs */
.dws-prio { font-size: 12px; width: 14px; text-align: center; }
.dws-prio--high   { color: var(--red); }
.dws-prio--normal { color: var(--yellow); }
.dws-prio--low    { color: var(--blue); }

.dws-key {
    font-family: var(--font-mono);
    font-size: 11.5px; font-weight: 600;
    color: var(--n200); text-transform: uppercase;
    letter-spacing: .02em; white-space: nowrap;
}
a.dws-key:hover { color: var(--blue); }

/* ============================================================
   View toggle (List | Board)
   ============================================================ */

.dws-viewtoggle {
    display: inline-flex;
    background: var(--n30);
    border-radius: var(--radius);
    padding: 2px;
}
.dws-viewtoggle a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px;
    font-size: 13px; font-weight: 500;
    color: var(--n500); text-decoration: none;
    border-radius: 2px;
}
.dws-viewtoggle a:hover { color: var(--n800); text-decoration: none; }
.dws-viewtoggle a.active {
    background: var(--n0); color: var(--blue-dark);
    font-weight: 600; box-shadow: var(--shadow-card);
}

/* ============================================================
   List view — dense Jira-style rows
   ============================================================ */

.dws-list {
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius-lg);
    overflow-x: auto;   /* narrow screens scroll the table, not the page */
}
.dws-table { width: 100%; min-width: 860px; border-collapse: collapse; }
.dws-table thead th {
    background: var(--n20);
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n200);
    padding: 8px 12px; text-align: left; white-space: nowrap;
    border-bottom: 1px solid var(--n30);
}
.dws-table tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--n30);
    vertical-align: middle; font-size: 13.5px;
}
.dws-table tbody tr:last-child td { border-bottom: 0; }
.dws-table tbody tr:hover { background: var(--n10); }
.dws-table__title { font-weight: 500; color: var(--n800); }
.dws-table__title:hover { color: var(--blue); }
.dws-table .nowrap { white-space: nowrap; }
.dws-table__num { font-variant-numeric: tabular-nums; color: var(--n300); }

/* ============================================================
   Board view — Trello columns
   ============================================================ */

.dws-board {
    display: flex; gap: 12px;
    align-items: flex-start;
    overflow-x: auto;
    padding-bottom: 12px;
    min-height: 360px;
}
.dws-col {
    flex: 0 0 330px; width: 330px;
    background: var(--n20);
    border: 1px solid var(--n30);
    border-radius: var(--radius-lg);
    display: flex; flex-direction: column;
    max-height: calc(100vh - 230px);
}
.dws-col__head {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px 8px;
    position: sticky; top: 0;
    background: var(--n20);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    border-bottom: 1px solid transparent;
}
.dws-col__title {
    font-size: 11.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n300);
}
.dws-col__count {
    font-size: 11px; font-weight: 600; color: var(--n200);
    background: var(--n30); border-radius: 10px;
    padding: 1px 7px; min-width: 20px; text-align: center;
}
.dws-col__rule { height: 3px; border-radius: 2px; margin: 0 12px 8px; background: var(--n40); }
.dws-col__rule--progress { background: var(--blue); }
.dws-col__rule--success  { background: var(--green); }
.dws-col__rule--warning  { background: var(--yellow); }
.dws-col__rule--danger   { background: var(--red); }
.dws-col__rule--moved    { background: var(--purple); }
.dws-col__rule--info     { background: var(--teal); }
.dws-col__body {
    flex: 1; overflow-y: auto;
    padding: 0 10px 10px;
    display: flex; flex-direction: column; gap: 10px;
    min-height: 70px;
}
.dws-col__empty {
    font-size: 12px; color: var(--n200);
    text-align: center; padding: 18px 8px;
    border: 1px dashed var(--n40); border-radius: var(--radius);
}
.dws-col.is-locked .dws-col__head { opacity: .85; }

/* Ticket card */
.dws-ticket {
    display: block;
    background: var(--n0);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 14px 15px;
    text-decoration: none; color: inherit;
    border-left: 4px solid var(--n40);
}
.dws-ticket:hover { background: var(--n10); text-decoration: none; color: inherit; box-shadow: var(--shadow-overlay); }
.dws-ticket--progress { border-left-color: var(--blue); }
.dws-ticket--success  { border-left-color: var(--green); }
.dws-ticket--warning  { border-left-color: var(--yellow); }
.dws-ticket--danger   { border-left-color: var(--red); }
.dws-ticket--moved    { border-left-color: var(--purple); }
.dws-ticket--info     { border-left-color: var(--teal); }
.dws-ticket__title {
    font-size: 15px; line-height: 1.45; color: var(--n800);
    margin-bottom: 10px; font-weight: 500;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden;
}
.dws-ticket__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dws-ticket__spacer { flex: 1; }
.dws-ticket__foot {
    display: flex; align-items: center; gap: 7px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--n30);
}
.dws-ticket__labels { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
/* Pointer-driven dragging (see static/js/board.js). */
.dws-ticket[data-assignment] { cursor: grab; touch-action: pan-x pan-y; }
.dws-ticket[data-assignment]:active { cursor: grabbing; }
.dws-ticket.is-dragging {
    cursor: grabbing;
    box-shadow: var(--shadow-raise);
    transform: rotate(2.5deg);      /* the Trello tilt */
    opacity: .92;
}
.dws-ticket-placeholder {
    border: 1px dashed var(--n50);
    border-radius: var(--radius);
    background: var(--n30);
}
/* Stop text selection and scroll-chaining while a card is in hand. */
body.dws-dragging { user-select: none; -webkit-user-select: none; cursor: grabbing; }
body.dws-dragging .dws-col__body { overscroll-behavior: contain; }

.dws-col__body.is-dropzone { background: var(--blue-bg); border-radius: var(--radius); outline: 2px dashed var(--blue); outline-offset: -4px; }
.dws-col__body.is-forbidden { background: var(--red-bg); border-radius: var(--radius); outline: 2px dashed var(--red); outline-offset: -4px; }

/* Mini progress bar used on cards */
.dws-meter { height: 4px; border-radius: 2px; background: var(--n30); overflow: hidden; margin-top: 8px; }
.dws-meter__fill { height: 100%; background: var(--green); border-radius: 2px; }

/* Empty state */
.dws-empty {
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius-lg);
    padding: 44px 24px; text-align: center;
}
.dws-empty i { font-size: 28px; color: var(--n50); margin-bottom: 10px; display: block; }
.dws-empty h3 { font-size: 15px; margin-bottom: 4px; }
.dws-empty p { font-size: 13px; color: var(--n300); margin: 0; }

/* Stat tiles */
.dws-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.dws-stat {
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius-lg); padding: 12px 14px;
    text-decoration: none; display: block;
    flex: 1 1 150px; max-width: 240px;
}
a.dws-stat:hover { border-color: var(--blue); text-decoration: none; }
.dws-stat__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n200); margin-bottom: 6px;
}
.dws-stat__value { font-size: 26px; font-weight: 600; line-height: 1; color: var(--n800); }
.dws-stat__value.is-danger  { color: var(--red); }
.dws-stat__value.is-warning { color: var(--yellow); }
.dws-stat__value.is-success { color: var(--green); }
.dws-stat__value.is-progress{ color: var(--blue); }

.dws-section-title {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--n200);
    margin: 22px 0 10px;
}
.dws-section-title:first-child { margin-top: 0; }

/* Auth screens */
.dws-auth {
    min-height: 100vh; display: grid; place-items: center;
    padding: 24px; position: relative; overflow: hidden;
    background: var(--brand-dark);
}
/* The GHAF formation flypast, held on a layer behind the card and blurred,
   so the aircraft read as a soft frosted backdrop. Scaled past the edges so
   the blur never reveals a hard border. */
.dws-auth::before {
    content: ""; position: absolute; inset: -40px; z-index: 0;
    background: url("../img/login-bg.jpg") center/cover no-repeat;
    filter: blur(7px) saturate(1.15) brightness(.86);
    transform: scale(1.06);
}
/* A navy wash over the blur keeps the white card crisp and on-brand. */
.dws-auth::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: linear-gradient(160deg,
        rgba(7,31,72,.55) 0%, rgba(11,47,107,.35) 55%, rgba(16,64,127,.45) 100%);
}
.dws-auth__card {
    position: relative; z-index: 1;
    width: 100%; max-width: 380px;
    /* Frosted glass: translucent, blurred over what sits behind it. */
    background: rgba(255,255,255,.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 14px;
    box-shadow: 0 16px 48px -12px rgba(3,10,30,.55), inset 0 1px 0 rgba(255,255,255,.6);
    padding: 30px 28px;
}
/* The glass is light; keep text on it dark and legible in dark mode too. */
.dws-auth__card, .dws-auth__card label, .dws-auth__card .form-label { color: #0b2142; }
:root[data-theme="dark"] .dws-auth__card { background: rgba(23,33,55,.62); border-color: rgba(255,255,255,.14); }
:root[data-theme="dark"] .dws-auth__card,
:root[data-theme="dark"] .dws-auth__card label,
:root[data-theme="dark"] .dws-auth__card .form-label { color: #e6ecf5; }
:root[data-theme="dark"] .dws-auth__card .form-control { background: rgba(255,255,255,.08); color: #e6ecf5; border-color: rgba(255,255,255,.18); }
.dws-auth__header { text-align: center; margin-bottom: 20px; }
.dws-auth__logo {
    display: block; margin: 0 auto 12px;
    width: 64px; height: 64px; border-radius: 50%;
    object-fit: cover; background: #fff;
    border: 2px solid rgba(255,255,255,.75);
    box-shadow: 0 4px 14px -4px rgba(3,10,30,.45);
}
.dws-auth__header h1 { font-size: 16px; letter-spacing: .01em; }
.dws-auth__byline {
    display: block; margin-top: 6px;
    font-size: 10.5px; font-weight: 500; letter-spacing: .08em;
    text-transform: uppercase; color: var(--n300); opacity: .8;
}
.dws-auth__header span {
    display: block; margin-top: 4px;
    font-size: 11px; font-weight: 600; letter-spacing: .09em;
    text-transform: uppercase; color: var(--n200);
}

/* AG Grid retheme (admin registers still use it) */
.ag-theme-alpine {
    --ag-font-family: var(--font-sans);
    --ag-font-size: 13px;
    --ag-foreground-color: var(--n800);
    --ag-secondary-foreground-color: var(--n200);
    --ag-header-foreground-color: var(--n200);
    --ag-background-color: var(--n0);
    --ag-header-background-color: var(--n20);
    --ag-odd-row-background-color: var(--n0);
    --ag-row-hover-color: var(--n10);
    --ag-border-color: var(--n30);
    --ag-row-border-color: var(--n30);
    --ag-header-column-separator-color: var(--n30);
    --ag-selected-row-background-color: var(--blue-bg);
    --ag-input-focus-border-color: var(--blue);
    --ag-border-radius: 3px;
    --ag-grid-size: 5px;
    --ag-cell-horizontal-padding: 12px;
}
.ag-theme-alpine .ag-header-cell-text {
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
}

/* ============================================================
   Responsive
   ------------------------------------------------------------
   >1200  full layout
   992-1200  icon-only sidebar
   <992   sidebar becomes an off-canvas drawer
   <600   single-column board, stacked headers
   ============================================================ */

/* The appbar toggle is always available: on wide screens it collapses the
   sidebar to an icon rail, below 992px it opens the drawer. */
.dws-navtoggle { display: grid; }
.dws-scrim { display: none; }

.dws-sidebar { transition: width .16s ease; }

/* Collapsed rail (wide screens only — below 992px the drawer takes over). */
@media (min-width: 993px) {
    .dws-shell--rail .dws-sidebar {
        width: 56px;
        padding-left: 6px; padding-right: 6px;
    }
    .dws-shell--rail .dws-nav__link span,
    .dws-shell--rail .dws-sidebar__heading,
    .dws-shell--rail .dws-sidebar__footer { display: none; }
    .dws-shell--rail .dws-nav__link {
        justify-content: center;
        padding: 10px 0;
        border-left-color: transparent;
    }
    .dws-shell--rail .dws-nav__link.active {
        background: var(--blue-bg);
        box-shadow: inset 2px 0 0 var(--blue);
    }
    .dws-shell--rail .dws-nav__link i { width: auto; font-size: 15px; }
}

@media (max-width: 1200px) {
    .dws-main { padding: 16px 18px 40px; }
    .dws-search { width: 190px; }
    .dws-col { flex-basis: 300px; width: 300px; }
}

@media (max-width: 992px) {
    .dws-sidebar {
        position: fixed;
        top: var(--topbar-h); bottom: 0; left: 0;
        z-index: 290;
        width: 252px;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--shadow-overlay);
        overflow-y: auto;
    }
    .dws-sidebar.is-open { transform: translateX(0); }
    .dws-scrim {
        display: block;
        position: fixed; inset: var(--topbar-h) 0 0 0;
        background: rgba(9,30,66,.42);
        z-index: 280;
        opacity: 0; pointer-events: none;
        transition: opacity .18s ease;
    }
    .dws-scrim.is-open { opacity: 1; pointer-events: auto; }
    .dws-appbar__sub { display: none; }
    .dws-search { width: 150px; }
}

@media (max-width: 768px) {
    .dws-main { padding: 14px 14px 36px; }
    .dws-search { display: none; }
    .dws-appbar { gap: 8px; padding: 0 10px; }
    .dws-appbar__name { font-size: 13px; }

    .dws-page-title { align-items: flex-start; }
    .dws-page-actions { margin-left: 0; width: 100%; }
    .dws-page-actions .btn { flex: 1 1 auto; justify-content: center; }
    .dws-toolbar { gap: 8px; }
    .dws-toolbar form { width: 100%; }
    .dws-toolbar .form-select { width: 100% !important; }

    .dws-stat { max-width: none; flex: 1 1 calc(50% - 10px); }
    .dws-stat__value { font-size: 22px; }

    /* The board scrolls one column at a time. */
    .dws-board {
        gap: 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }
    .dws-col {
        flex-basis: 84vw; width: 84vw;
        max-height: none;
        scroll-snap-align: start;
    }
    .dws-col__body { max-height: 62vh; }

    h1, .dws-page-title h1 { font-size: 18px; }
}

@media (max-width: 480px) {
    .dws-col { flex-basis: 90vw; width: 90vw; }
    .dws-stat { flex: 1 1 100%; }
    .dws-empty { padding: 30px 16px; }
    .dws-viewtoggle { width: 100%; }
    .dws-viewtoggle a { flex: 1; justify-content: center; }
}

/* Touch devices cannot use HTML5 drag-and-drop, so every draggable card
   also carries an explicit move control. It stays available on desktop. */
.dws-ticket__open {
    color: var(--n200); padding: 2px 5px; border-radius: var(--radius);
    font-size: 12px; line-height: 1; text-decoration: none;
}
.dws-ticket__open:hover { background: var(--blue-bg); color: var(--blue-dark); text-decoration: none; }
.dws-ticket__move {
    border: 0; background: transparent;
    color: var(--n200); cursor: pointer;
    padding: 2px 5px; border-radius: var(--radius);
    font-size: 11px; line-height: 1;
}
.dws-ticket__move:hover { background: var(--n30); color: var(--n800); }
.dws-movemenu {
    position: absolute; z-index: 400;
    background: var(--n0);
    border: 1px solid var(--n30);
    border-radius: var(--radius);
    box-shadow: var(--shadow-overlay);
    padding: 4px; min-width: 170px;
}
.dws-movemenu__title {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n200); padding: 6px 8px 4px;
}
.dws-movemenu button {
    display: block; width: 100%; text-align: left;
    border: 0; background: transparent;
    padding: 7px 8px; border-radius: 2px;
    font-size: 13px; color: var(--n500); cursor: pointer;
}
.dws-movemenu button:hover { background: var(--n20); color: var(--n800); }
.dws-movemenu button[aria-current="true"] { color: var(--blue-dark); font-weight: 600; }

@media (hover: none) {
    /* No hover affordance on touch, so make the handle permanent. */
    .dws-ticket__move { color: var(--n300); }
}


/* ============================================================
   Collaborative boards
   ============================================================ */

.dws-boardgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.dws-boardtile {
    display: flex; flex-direction: column; gap: 4px;
    min-height: 112px; padding: 12px 14px;
    border-radius: var(--radius-lg);
    color: #fff; text-decoration: none;
    background: var(--brand);
}
.dws-boardtile:hover { color: #fff; text-decoration: none; filter: brightness(1.08); }
.dws-boardtile__name { font-weight: 600; font-size: 15px; line-height: 1.25; }
.dws-boardtile__desc {
    font-size: 12px; color: rgba(255,255,255,.78);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dws-boardtile__foot {
    margin-top: auto; padding-top: 10px;
    display: flex; align-items: center; justify-content: space-between;
    font-size: 11.5px; color: rgba(255,255,255,.8);
}
.dws-boardtile__members { display: flex; }
.dws-boardtile__members .dws-avatar { margin-left: -6px; border: 2px solid rgba(255,255,255,.35); }
.dws-boardtile__swatch {
    width: 14px; height: 14px; border-radius: 3px; display: inline-block;
}
.dws-boardtile--blue,   .dws-boardtile--blue.dws-boardtile__swatch   { background: #0c66e4; }
.dws-boardtile--green,  .dws-boardtile--green.dws-boardtile__swatch  { background: #216e4e; }
.dws-boardtile--purple, .dws-boardtile--purple.dws-boardtile__swatch { background: #5e4db2; }
.dws-boardtile--red,    .dws-boardtile--red.dws-boardtile__swatch    { background: #ae2e24; }
.dws-boardtile--orange, .dws-boardtile--orange.dws-boardtile__swatch { background: #a54800; }
.dws-boardtile--teal,   .dws-boardtile--teal.dws-boardtile__swatch   { background: #206a83; }
.dws-boardtile--navy,   .dws-boardtile--navy.dws-boardtile__swatch   { background: #0b2f6b; }

/* Overlapping avatars */
.dws-facepile { display: inline-flex; align-items: center; }
.dws-facepile .dws-avatar { margin-left: -5px; border: 2px solid var(--n0); }
.dws-facepile .dws-avatar:first-child { margin-left: 0; }
.dws-facepile--lg { gap: 2px; flex-wrap: wrap; }
.dws-facepile--lg .dws-avatar { margin-left: 0; border: 0; }
.dws-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--n20); border: 1px solid var(--n30);
    border-radius: 14px; padding: 2px 4px 2px 2px;
    font-size: 12px; color: var(--n500); margin: 0 4px 4px 0;
}
.dws-chip button {
    border: 0; background: transparent; color: var(--n200);
    cursor: pointer; font-size: 11px; padding: 0 4px; border-radius: 50%;
}
.dws-chip button:hover { background: var(--red-bg); color: var(--red); }

/* Inline "add a card" field at the foot of a list */
.dws-col__add { padding: 0 8px 8px; }
.dws-col__add .form-control {
    background: transparent; border: 1px dashed var(--n40);
}
.dws-col__add .form-control:focus { background: var(--n0); border-style: solid; }

.dws-board--editable .dws-ticket { cursor: pointer; }

/* Card detail drawer */
.dws-cardpanel { position: fixed; inset: 0; z-index: 600; }
.dws-cardpanel[hidden] { display: none !important; }
.dws-cardpanel__scrim { position: absolute; inset: 0; background: rgba(9,30,66,.48); }
.dws-cardpanel__sheet {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: min(460px, 100%);
    background: var(--n0);
    box-shadow: var(--shadow-raise);
    display: flex; flex-direction: column;
    animation: dws-slide-in .16s ease;
}
@keyframes dws-slide-in { from { transform: translateX(16px); opacity: .6; } to { transform: none; opacity: 1; } }
.dws-cardpanel__head {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 14px 14px 10px;
    border-bottom: 1px solid var(--n30);
}
.dws-cardpanel__title {
    width: 100%; border: 1px solid transparent; background: transparent;
    font-size: 16px; font-weight: 600; color: var(--n800);
    border-radius: var(--radius); padding: 4px 6px;
}
.dws-cardpanel__title:hover { background: var(--n20); }
.dws-cardpanel__title:focus { background: var(--n0); border-color: var(--blue); outline: none; }
.dws-cardpanel__body { flex: 1; overflow-y: auto; padding: 4px 14px 24px; }
.dws-cardpanel__row { padding: 14px 0; border-bottom: 1px solid var(--n30); }
.dws-cardpanel__row:last-child { border-bottom: 0; }
.dws-cardpanel__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n200); margin-bottom: 8px;
}
.dws-cardpanel__label i { margin-right: 5px; }

/* Editable / draggable list headers */
.dws-col__grip {
    color: var(--n50); font-size: 12px; cursor: grab;
    padding: 4px 3px; margin: -4px -1px -4px -3px;
    border-radius: 3px;
    touch-action: none;          /* the pointer stream is ours */
    user-select: none;
}
.dws-col__grip:hover { background: var(--n30); color: var(--n300); }
.dws-col__grip:active { cursor: grabbing; }
.dws-col__title--editable {
    border-radius: var(--radius); padding: 2px 5px; margin-left: -5px;
    outline: none; cursor: text;
}
.dws-col__title--editable:hover { background: var(--n30); }
.dws-col__title--editable:focus {
    background: var(--n0); box-shadow: 0 0 0 1px var(--blue); color: var(--n800);
}
.dws-col.is-column-dragging { opacity: .5; }
.dws-col.is-column-target { box-shadow: inset 3px 0 0 var(--blue); }

/* Comments */
.dws-comments { display: flex; flex-direction: column; gap: 10px; }
.dws-comment { display: flex; gap: 8px; }
.dws-comment__body {
    flex: 1; min-width: 0;
    background: var(--n20); border-radius: var(--radius);
    padding: 7px 10px;
}
.dws-comment__head {
    display: flex; align-items: baseline; gap: 6px;
    font-size: 11.5px; color: var(--n200); margin-bottom: 2px;
}
.dws-comment__head b { color: var(--n500); font-size: 12.5px; font-weight: 600; }
.dws-comment__text { font-size: 13.5px; color: var(--n800); white-space: pre-wrap; }
.dws-comment__delete {
    border: 0; background: transparent; color: var(--n200);
    cursor: pointer; font-size: 11px; padding: 0 2px; margin-left: auto;
}
.dws-comment__delete:hover { color: var(--red); }
.dws-comments__empty { font-size: 12.5px; color: var(--n200); }

/* "Show more" pager */
.dws-showmore {
    border: 0; background: transparent;
    color: var(--blue); font-size: 12.5px; font-weight: 600;
    padding: 8px 10px; cursor: pointer; border-radius: var(--radius);
    text-align: left;
}
.dws-showmore:hover { background: var(--n30); color: var(--blue-dark); }
.dws-showmore--wide {
    display: block; width: 100%; text-align: center;
    margin-top: 6px; background: var(--n0);
    border: 1px solid var(--n30);
}
.dws-showmore--wide:hover { background: var(--n20); }

/* A heading group in dashboard list mode */
.dws-group { margin-bottom: 18px; }
.dws-group__head {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 8px;
}
.dws-group__rule { width: 22px; height: 3px; margin: 0; flex: none; }
.dws-group__title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n300);
}

/* Save confirmation */
.dws-toast {
    position: fixed; right: 20px; bottom: 20px; z-index: 900;
    display: flex; align-items: center; gap: 8px;
    background: var(--n800); color: #fff;
    border-radius: var(--radius); padding: 10px 14px;
    font-size: 13.5px; font-weight: 500;
    box-shadow: var(--shadow-raise);
    opacity: 0; transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease;
    pointer-events: none;
}
.dws-toast.is-visible { opacity: 1; transform: none; }
.dws-toast--success i { color: #7ee2b8; }
.dws-toast--danger { background: var(--red); }

/* Collaborator picker — a dropdown with multi-select */
.dws-picker { position: relative; }
.dws-picker__trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left;
    background: var(--n10); border: 1px solid var(--n50);
    border-radius: var(--radius); padding: 7px 10px;
    font-size: 13.5px; color: var(--n500); cursor: pointer;
}
.dws-picker__trigger:hover { background: var(--n20); color: var(--n800); }
.dws-picker__trigger[aria-expanded="true"] {
    border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); background: var(--n0);
}
.dws-picker__caret { margin-left: auto; font-size: 10px; color: var(--n200); }
.dws-picker__trigger[aria-expanded="true"] .dws-picker__caret { transform: rotate(180deg); }

.dws-picker__menu {
    position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius); box-shadow: var(--shadow-overlay);
    display: flex; flex-direction: column; max-height: 320px;
}
.dws-picker__search { position: relative; padding: 8px; border-bottom: 1px solid var(--n30); }
.dws-picker__search i {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--n200); pointer-events: none;
}
.dws-picker__search input { padding-left: 26px; }
.dws-picker__list { flex: 1; overflow-y: auto; padding: 4px; }
.dws-picker__row {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: 6px 8px; border-radius: var(--radius);
    font-size: 13px; color: var(--n800); cursor: pointer;
}
.dws-picker__row:hover { background: var(--n20); }
.dws-picker__row[aria-selected="true"] { background: var(--blue-bg); }
.dws-picker__check {
    width: 16px; height: 16px; flex: none;
    border: 1.5px solid var(--n50); border-radius: 3px;
    display: grid; place-items: center;
    font-size: 9px; color: transparent; background: var(--n0);
}
.dws-picker__row[aria-selected="true"] .dws-picker__check {
    background: var(--blue); border-color: var(--blue); color: #fff;
}
.dws-picker__name { flex: 1; min-width: 0; }
.dws-picker__name b { font-weight: 500; display: block; }
.dws-picker__name span { font-size: 11.5px; color: var(--n200); }
.dws-picker__foot {
    display: flex; align-items: center; gap: 8px;
    padding: 8px; border-top: 1px solid var(--n30);
}
.dws-picker__count { flex: 1; font-size: 12px; color: var(--n200); }
.dws-picker__empty { padding: 14px 10px; font-size: 12.5px; color: var(--n200); text-align: center; }

/* Collaborator typeahead */
.dws-typeahead { position: relative; }
.dws-typeahead__results {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius); box-shadow: var(--shadow-overlay);
    max-height: 240px; overflow-y: auto; margin-top: 2px;
}
.dws-typeahead__results button {
    display: flex; align-items: center; gap: 8px;
    width: 100%; text-align: left; border: 0; background: transparent;
    padding: 7px 10px; cursor: pointer; font-size: 13px; color: var(--n800);
}
.dws-typeahead__results button:hover,
.dws-typeahead__results button[aria-selected="true"] { background: var(--blue-bg); }
.dws-typeahead__empty { padding: 10px; font-size: 12.5px; color: var(--n200); }
.dws-typeahead__meta { font-size: 11.5px; color: var(--n200); }

/* Checklist */
.dws-checklist label {
    display: flex; align-items: flex-start; gap: 8px;
    padding: 5px 0; font-size: 13.5px; cursor: pointer;
}
.dws-checklist input { margin-top: 3px; }
.dws-checklist .is-done { color: var(--n200); text-decoration: line-through; }

@media (max-width: 768px) {
    .dws-cardpanel__sheet { width: 100%; }
    .dws-boardgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}


/* ============================================================
   Shell extras: switcher, dock, panes, viewer, calendar, chat
   ============================================================ */

/* Board switcher popover */
.dws-switcher {
    position: fixed; z-index: 700; width: 320px;
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-raise);
    display: flex; flex-direction: column; max-height: 70vh;
}
.dws-switcher[hidden] { display: none !important; }
.dws-switcher__search { position: relative; padding: 10px; border-bottom: 1px solid var(--n30); }
.dws-switcher__search i {
    position: absolute; left: 20px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--n200); pointer-events: none;
}
.dws-switcher__search input { padding-left: 26px; }
.dws-switcher__body { flex: 1; overflow-y: auto; padding: 6px; }
.dws-switcher__foot { padding: 8px 10px; border-top: 1px solid var(--n30); }
.dws-switcher__heading {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--n200); padding: 8px 8px 4px;
}
.dws-switcher__row {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 8px; border-radius: var(--radius);
    color: var(--n800); text-decoration: none; font-size: 13.5px;
}
.dws-switcher__row:hover { background: var(--n20); text-decoration: none; color: var(--n800); }
.dws-switcher__swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.dws-switcher__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dws-switcher__count { font-size: 11px; color: var(--n200); white-space: nowrap; }
.dws-switcher__star {
    border: 0; background: transparent; color: var(--n50);
    cursor: pointer; font-size: 11px; padding: 2px 3px; border-radius: 3px;
}
.dws-switcher__star:hover { background: var(--n30); color: var(--n300); }
.dws-switcher__star.is-on { color: var(--yellow); }
.dws-switcher__empty { padding: 16px; text-align: center; font-size: 12.5px; color: var(--n200); }

/* Dock bar and panes */
.dws-dockbar {
    position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%);
    z-index: 650; display: flex; gap: 4px; padding: 6px;
    background: var(--n800); border-radius: 999px;
    box-shadow: var(--shadow-raise);
}
.dws-dockbar[hidden] { display: none !important; }
.dws-dockbar__btn {
    display: flex; align-items: center; gap: 7px;
    border: 0; background: transparent; cursor: pointer;
    color: rgba(255,255,255,.72); font-size: 13px; font-weight: 500;
    padding: 7px 14px; border-radius: 999px;
}
.dws-dockbar__btn:hover { background: rgba(255,255,255,.12); color: #fff; }
.dws-dockbar__btn.is-on { background: var(--blue); color: #fff; }
.dws-dockbar__btn i { font-size: 13px; }

.dws-dock {
    display: flex; flex: none;
    border-right: 1px solid var(--n30);
    background: var(--n10);
    max-height: calc(100vh - var(--topbar-h));
    position: sticky; top: var(--topbar-h);
}
.dws-dock[hidden] { display: none !important; }
.dws-dock__panes { display: flex; }
body.dws-resizing { cursor: col-resize; user-select: none; }
body.dws-has-dock .dws-main { padding-bottom: 80px; }

.dws-pane {
    position: relative; flex: 0 0 340px; width: 340px;
    display: flex; flex-direction: column;
    min-width: 220px; max-width: 820px;
    border-right: 1px solid var(--n30); background: var(--n0);
    max-height: calc(100vh - var(--topbar-h));
}
/* Drag the right edge, since panes now sit to the left of the content. */
.dws-pane__grip {
    position: absolute; right: -3px; top: 0; bottom: 0; width: 6px;
    cursor: col-resize; z-index: 3;
}
.dws-pane__grip:hover { background: var(--blue-bg); }
.dws-pane__head {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-bottom: 1px solid var(--n30);
    background: var(--n20);
}
.dws-pane__head i { color: var(--n200); font-size: 12px; }
.dws-pane__title {
    flex: 1; font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em; color: var(--n300);
}
.dws-pane__close {
    border: 0; background: transparent; color: var(--n200);
    cursor: pointer; padding: 2px 4px; border-radius: 3px;
}
.dws-pane__close:hover { background: var(--n30); color: var(--n800); }
.dws-pane__body { flex: 1; overflow-y: auto; padding: 10px 12px; }
.dws-pane__empty { padding: 20px 8px; text-align: center; font-size: 12.5px; color: var(--n200); }

/* Calendar */
.dws-cal__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dws-cal__month { flex: 1; text-align: center; font-size: 13px; font-weight: 600; }
.dws-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dws-cal__dow {
    text-align: center; font-size: 10px; font-weight: 700;
    color: var(--n200); padding: 2px 0;
}
.dws-cal__day {
    aspect-ratio: 1; border: 0; background: var(--n20);
    border-radius: var(--radius); cursor: default;
    font-size: 12px; color: var(--n500);
    display: grid; place-items: center; position: relative;
}
.dws-cal__day.is-today { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue-dark); font-weight: 700; }
.dws-cal__day.has-due { background: var(--blue-bg); color: var(--blue-dark); font-weight: 600; cursor: pointer; }
.dws-cal__day.has-due::after {
    content: ''; position: absolute; bottom: 4px;
    width: 4px; height: 4px; border-radius: 50%; background: var(--blue);
}
.dws-cal__day.is-overdue { background: var(--red-bg); color: var(--red); }
.dws-cal__day.is-overdue::after { background: var(--red); }
.dws-cal__list { margin-top: 10px; }
.dws-cal__listhead {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--n200); margin-bottom: 4px;
}
.dws-cal__item {
    display: block; padding: 6px 8px; border-radius: var(--radius);
    font-size: 12.5px; color: var(--n800); text-decoration: none;
    background: var(--n20); margin-bottom: 4px;
}
.dws-cal__item:hover { background: var(--n30); text-decoration: none; }
.dws-cal__item small { display: block; font-size: 11px; color: var(--n200); }
.dws-cal__item.is-overdue { border-left: 3px solid var(--red); }

/* Chat */
.dws-chat { display: flex; flex-direction: column; gap: 10px; max-height: 100%; }
.dws-chat__msg { display: flex; gap: 8px; }
.dws-chat__bubble { flex: 1; min-width: 0; background: var(--n20); border-radius: var(--radius); padding: 7px 10px; }
.dws-chat__msg.is-mine .dws-chat__bubble { background: var(--blue-bg); }
.dws-chat__meta { display: flex; gap: 6px; align-items: baseline; font-size: 11px; color: var(--n200); }
.dws-chat__meta b { font-size: 12.5px; color: var(--n500); }
.dws-chat__text { font-size: 13.5px; color: var(--n800); white-space: pre-wrap; }
.dws-chat__form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.dws-chat__form textarea { flex: 1; }
.dws-chat__send {
    width: 34px; height: 34px; flex: none; padding: 0;
    border-radius: 50%; justify-content: center;
}
.dws-chat__send i { font-size: 13px; }

/* File rows */
.dws-filerow {
    display: flex; align-items: center; gap: 10px;
    padding: 8px; border-radius: var(--radius);
}
.dws-filerow:hover { background: var(--n20); }
.dws-filerow > i { font-size: 16px; color: var(--n200); width: 18px; text-align: center; }
.dws-filerow__main { flex: 1; min-width: 0; }
.dws-filerow__name { display: block; font-size: 13px; font-weight: 500; color: var(--n800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dws-filerow__meta { font-size: 11.5px; color: var(--n200); }

/* Attachment viewer */
.dws-viewer { position: fixed; inset: 0; z-index: 800; }
.dws-viewer[hidden] { display: none !important; }
.dws-viewer__scrim { position: absolute; inset: 0; background: rgba(9,30,66,.6); }
.dws-viewer__sheet {
    position: absolute; inset: 4vh 6vw; background: var(--n0);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-raise);
    display: flex; flex-direction: column; overflow: hidden;
}
.dws-viewer__head {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px; border-bottom: 1px solid var(--n30);
}
.dws-viewer__name { flex: 1; font-weight: 600; font-size: 14px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dws-viewer__body { flex: 1; overflow: auto; background: var(--n20); display: flex; }
.dws-viewer__frame { flex: 1; border: 0; background: var(--n0); }
.dws-viewer__image { max-width: 100%; max-height: 100%; margin: auto; display: block; object-fit: contain; }
.dws-viewer__doc {
    background: var(--n0); margin: 18px auto; padding: 28px 34px;
    max-width: 760px; width: 100%; font-size: 14px; line-height: 1.6;
    box-shadow: var(--shadow-card);
}
.dws-viewer__doc p { margin: 0 0 10px; }

/* Dashboard: due buckets */
.dws-duegrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.dws-duecol { background: var(--n0); border: 1px solid var(--n30); border-radius: var(--radius-lg); padding: 10px; }
.dws-duecol__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.dws-duecol__label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n300);
}
.dws-duecol--overdue { border-top: 3px solid var(--red); }
.dws-duecol--today { border-top: 3px solid var(--yellow); }
.dws-duecol--tomorrow { border-top: 3px solid var(--blue); }
.dws-duecol--week { border-top: 3px solid var(--n50); }
.dws-duerow {
    display: block; padding: 6px 8px; border-radius: var(--radius);
    text-decoration: none; margin-bottom: 3px;
}
.dws-duerow:hover { background: var(--n20); text-decoration: none; }
.dws-duerow__title { display: block; font-size: 13px; color: var(--n800);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dws-duerow__meta { font-size: 11px; color: var(--n200); }

@media (max-width: 992px) {
    /* Not enough width to sit beside the content: overlay instead. */
    .dws-dock {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        z-index: 600; height: 52vh;
        border-right: 0; border-top: 1px solid var(--n30);
        box-shadow: 0 -4px 14px rgba(9,30,66,.18);
        max-height: none;
    }
    .dws-dock__panes { width: 100%; overflow-x: auto; }
    .dws-pane { flex: 0 0 86vw; width: 86vw; max-height: none; }
    body.dws-has-dock .dws-main { padding-bottom: calc(52vh + 74px); }
    .dws-dockbar__btn span { display: none; }
    .dws-switcher { width: calc(100vw - 24px); right: 12px !important; }
    .dws-viewer__sheet { inset: 2vh 3vw; }
}

/* Card drawer: attachments, permissions, sharing */
.dws-attachments { display: flex; flex-direction: column; gap: 4px; }
.dws-attachments:empty::after {
    content: 'No attachments yet.'; font-size: 12.5px; color: var(--n200);
}
.dws-perm {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    padding: 8px; border: 1px solid var(--n30);
    border-radius: var(--radius); margin-bottom: 6px;
}
.dws-perm__name { font-size: 13px; font-weight: 500; flex: 1; min-width: 110px; }
.dws-perm__flags { display: flex; gap: 8px; flex-wrap: wrap; }
.dws-perm__flag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 11.5px; color: var(--n300);
}
.dws-share__warn {
    background: var(--yellow-bg); color: var(--yellow);
    border-radius: var(--radius); padding: 8px 10px;
    font-size: 12.5px; display: flex; gap: 7px; align-items: flex-start;
}
.dws-share__opt { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--n500); }
.dws-sharerow {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    background: var(--n20); border-radius: var(--radius);
    padding: 7px 10px; font-size: 12.5px; margin-bottom: 5px;
}
.dws-sharerow input {
    flex: 1; min-width: 150px; font-family: var(--font-mono); font-size: 11px;
    border: 1px solid var(--n40); border-radius: 3px; padding: 3px 6px;
    background: var(--n0); color: var(--n500);
}
.dws-sharerow.is-dead { opacity: .55; }

/* Board search / assignee filter */
.dws-boardfilter { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dws-boardsearch { position: relative; width: 240px; }
.dws-boardsearch i {
    position: absolute; left: 9px; top: 50%; transform: translateY(-50%);
    font-size: 11px; color: var(--n200); pointer-events: none;
}
.dws-boardsearch input { padding-left: 26px; }
.dws-boardfilter__people { display: flex; gap: 3px; flex-wrap: wrap; }
.dws-boardfilter__person {
    border: 2px solid transparent; background: transparent; padding: 0;
    border-radius: 50%; cursor: pointer; line-height: 0;
}
.dws-boardfilter__person.is-on { border-color: var(--blue); }
.dws-ticket.is-filtered { display: none; }

/* Card detail: keep the label column tight so values have room */
.dws-detail-table td:first-child { width: 92px; white-space: nowrap; }
.dws-detail-table td { padding: 5px 6px; font-size: 13px; vertical-align: top; }

/* Archived boards */
.dws-boardtile--archived { opacity: .6; filter: grayscale(.4); }
.dws-archivedrow {
    display: flex; align-items: center; gap: 10px;
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius); padding: 9px 12px; margin-bottom: 6px;
}
.dws-archivedrow__name { flex: 1; font-size: 13.5px; font-weight: 500; }
.dws-archivedrow__meta { font-size: 11.5px; color: var(--n200); }

/* AI chat pane (stub) */
.dws-ai { display: flex; flex-direction: column; height: 100%; }
.dws-ai__log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; }
.dws-ai__intro { text-align: center; padding: 24px 10px; color: var(--n300); }
.dws-ai__intro i { font-size: 24px; color: var(--purple); display: block; margin-bottom: 10px; }
.dws-ai__intro h3 { font-size: 14px; margin-bottom: 6px; }
.dws-ai__intro p { font-size: 12.5px; margin: 0 0 14px; }
.dws-ai__suggestions { display: flex; flex-direction: column; gap: 6px; }
.dws-ai__suggestions button {
    border: 1px solid var(--n30); background: var(--n0);
    border-radius: var(--radius); padding: 8px 10px;
    font-size: 12.5px; color: var(--n500); cursor: pointer; text-align: left;
}
.dws-ai__suggestions button:hover { background: var(--n20); color: var(--n800); border-color: var(--n50); }
.dws-ai__msg { display: flex; flex-direction: column; gap: 3px; }
.dws-ai__who {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--n200);
}
.dws-ai__text { font-size: 13.5px; line-height: 1.5; color: var(--n800); white-space: pre-wrap; }
.dws-ai__msg--you .dws-ai__text {
    background: var(--blue-bg); border-radius: var(--radius);
    padding: 8px 10px; align-self: flex-start;
}
.dws-ai__msg--bot .dws-ai__text {
    background: var(--n20); border-left: 3px solid var(--purple);
    border-radius: var(--radius); padding: 8px 10px;
}
.dws-ai__form { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; }
.dws-ai__form textarea { flex: 1; resize: none; }

/* A sidebar entry that is a button, not a link */
button.dws-nav__link {
    width: 100%; text-align: left; border: 0;
    font-family: inherit; cursor: pointer;
}
.dws-nav__tag { margin-left: auto; font-size: 9px; padding: 1px 4px; }
.dws-shell--rail .dws-nav__tag { display: none; }

/* Shared (public, read-only) card */
.dws-shared { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.dws-shared__bar {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 2px; font-size: 12.5px; color: var(--n300);
}
.dws-shared__tag {
    margin-left: auto; font-size: 10.5px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .05em;
    background: var(--yellow-bg); color: var(--yellow);
    padding: 3px 8px; border-radius: var(--radius);
}
.dws-shared__sheet {
    background: var(--n0); border: 1px solid var(--n30);
    border-radius: var(--radius-lg); padding: 26px 30px;
}
.dws-shared__meta { font-size: 12px; color: var(--n200); margin-bottom: 6px; }
.dws-shared__sheet h1 { font-size: 20px; margin-bottom: 14px; }
.dws-shared__sheet h2 {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--n200); margin: 22px 0 8px;
}
.dws-shared__facts { display: flex; gap: 6px; flex-wrap: wrap; }
.dws-shared__checklist, .dws-shared__files { list-style: none; padding: 0; margin: 0; }
.dws-shared__checklist li, .dws-shared__files li {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 0; font-size: 13.5px;
}
.dws-shared__checklist li i, .dws-shared__files li i { color: var(--n200); }
.dws-shared__checklist li.is-done { color: var(--n200); text-decoration: line-through; }
.dws-shared__comment {
    background: var(--n20); border-radius: var(--radius);
    padding: 9px 12px; margin-bottom: 8px; font-size: 13.5px;
}
.dws-shared__comment b { font-size: 12.5px; }
.dws-shared__foot {
    margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--n30);
    font-size: 11.5px; color: var(--n200);
}


/* ============================================================
   Guided tour — spotlight overlay with smooth motion
   ============================================================ */
/* The overlay is visual only — it never captures clicks, so the page
   underneath (including the spotlighted control) stays fully usable. Only
   the tooltip catches clicks, for its own buttons. */
.dws-tour { position: fixed; inset: 0; z-index: 2000; pointer-events: none; }
.dws-tour[hidden], .dws-tour:not(.is-open) { display: none; }
.dws-tour__tip { pointer-events: auto; }

/* The cut-out: a huge box-shadow dims everything except the spotlight,
   and transitions smoothly as it moves between targets. */
.dws-tour__spot {
    position: absolute; border-radius: 10px;
    box-shadow: 0 0 0 9999px rgba(9, 20, 48, .62);
    outline: 2px solid rgba(255,255,255,.9);
    outline-offset: 2px;
    transition: left .4s cubic-bezier(.4,0,.2,1),
                top .4s cubic-bezier(.4,0,.2,1),
                width .4s cubic-bezier(.4,0,.2,1),
                height .4s cubic-bezier(.4,0,.2,1),
                opacity .25s ease;
    pointer-events: none;
}
/* When centred (no target) the dim still covers the screen. */
.dws-tour__spot[style*="opacity: 0"] { box-shadow: 0 0 0 9999px rgba(9, 20, 48, .62); width: 0; height: 0; }

.dws-tour__tip {
    position: absolute; width: 320px; max-width: calc(100vw - 24px);
    background: var(--n0); color: var(--n800);
    border-radius: 12px; padding: 18px 18px 14px;
    box-shadow: 0 18px 50px -12px rgba(3,10,30,.5);
    transition: left .4s cubic-bezier(.4,0,.2,1), top .4s cubic-bezier(.4,0,.2,1);
    animation: dws-tour-pop .32s cubic-bezier(.34,1.56,.64,1);
}
.dws-tour__tip.is-center { width: 380px; }
@keyframes dws-tour-pop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
    to   { opacity: 1; }
}
.dws-tour__tip.is-center { animation: dws-tour-pop-center .32s cubic-bezier(.34,1.56,.64,1); }
@keyframes dws-tour-pop-center {
    from { opacity: 0; transform: translate(-50%, -46%) scale(.94); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.dws-tour__count {
    font-size: 10.5px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--blue); margin-bottom: 6px;
}
.dws-tour__title { font-size: 16px; margin: 0 0 7px; color: var(--n800); }
.dws-tour__body { font-size: 13.5px; line-height: 1.55; color: var(--n500); margin-bottom: 14px; }
.dws-tour__body b { color: var(--n800); font-weight: 600; }
.dws-tour__actions { display: flex; align-items: center; gap: 8px; }
.dws-tour__grow { flex: 1; }
.dws-tour__skip {
    border: 0; background: transparent; color: var(--n200);
    font-size: 12.5px; cursor: pointer; padding: 6px 4px;
}
.dws-tour__skip:hover { color: var(--n500); }
.dws-tour__back, .dws-tour__next {
    border: 0; border-radius: var(--radius); cursor: pointer;
    font-size: 13px; font-weight: 500; padding: 7px 14px;
}
.dws-tour__back { background: var(--n30); color: var(--n500); }
.dws-tour__back:hover { background: var(--n40); }
.dws-tour__next { background: var(--blue); color: #fff; }
.dws-tour__next:hover { background: var(--blue-dark); }

/* A gentle pulse on the launcher so first-timers notice it. */
.dws-tour-launch { position: relative; }
.dws-tour-launch::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(87,157,255,.6);
    animation: dws-tour-pulse 2.4s ease-out infinite;
}
@keyframes dws-tour-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(87,157,255,.5); }
    70%  { box-shadow: 0 0 0 10px rgba(87,157,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(87,157,255,0); }
}
@media (prefers-reduced-motion: reduce) {
    .dws-tour__spot, .dws-tour__tip { transition: none; }
    .dws-tour__tip { animation: none; }
    .dws-tour-launch::after { animation: none; }
}

/* ---------- Printable prescribed tracking form (unchanged) ---------- */
/* ---------- Printable prescribed tracking form ---------- */
.print-report-section {
    font-family: 'Times New Roman', Times, serif;
    color: #000;
    background: #fff;
    padding: 12px;
}
.dws-classification {
    font-size: 13px;
    letter-spacing: 1px;
    padding: 4px 0;
}
.dws-classification.print-top { text-align: left; }
.print-report-section .form-title {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    text-decoration: underline;
    margin: 12px 0;
    letter-spacing: .5px;
}
.print-report-section .form-meta {
    text-align: center;
    font-size: 11px;
    color: #333;
    margin-bottom: 12px;
}
.tracking-table {
    width: 100%;
    border-collapse: collapse;
    border: 1.5px solid #000;
}
.tracking-table th,
.tracking-table td {
    border: 1px solid #000;
    padding: 6px 4px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
}
.tracking-table .col-ser { width: 4%; }
.tracking-table .col-appt { width: 6%; }
.tracking-table .col-directive { width: 26%; }
.tracking-table .col-remarks { width: 12%; }

@page { size: A4 landscape; margin: 20mm 12mm; }
@media print {
    body * { visibility: hidden; }
    .print-report-section, .print-report-section * { visibility: visible; }
    .print-report-section {
        position: absolute;
        inset: 0;
        padding: 0;
    }
    /* Classification: right-aligned above the header and after the table.
       (Per-page fixed positioning proved unreliable across browsers; final
       per-page marks + numbering move to server-side PDF in Phase 5.) */
    .tracking-table thead { display: table-header-group; }
    .tracking-table tr { page-break-inside: avoid; }
}