/* =============================================================
   Raqmi Resolve — Design System
   Bootstrap 5.3 + Bootstrap Icons + Geist (all self-hosted)
   Achromatic zinc palette · light + dark · enterprise SaaS

   Ported from RaqmiERP's design system so the two products read as one
   family. The TOKEN LAYER below is deliberately identical to the ERP's —
   if a token changes there, change it here too. Everything from section 9
   onward is Resolve's own: the work queues, the attention panel, the SLA
   meter and the complaint timeline have no counterpart in the ERP.

   Two rules this file exists to enforce:
     · Colour carries MEANING, never decoration. The accent is achromatic,
       so red/amber/green on a screen always mean breached/at-risk/met.
     · Arabic is a first-class layout, not a mirror applied afterwards.
       Section 14 is not optional polish.
   ============================================================= */

/* ---------- 1. Design tokens ---------- */
:root {
    /* Zinc scale (light is default) */
    --zinc-50:  #fafafa;
    --zinc-100: #f4f4f5;
    --zinc-200: #e4e4e7;
    --zinc-300: #d4d4d8;
    --zinc-400: #a1a1aa;
    --zinc-500: #71717a;
    --zinc-600: #52525b;
    --zinc-700: #3f3f46;
    --zinc-800: #27272a;
    --zinc-900: #18181b;
    --zinc-950: #09090b;

    /* Semantic — light */
    --bg-app:        var(--zinc-50);
    --bg-surface:    #ffffff;
    --bg-elevated:   #ffffff;
    --bg-muted:      var(--zinc-100);
    --bg-hover:      rgba(24, 24, 27, .04);
    --bg-active:     rgba(24, 24, 27, .07);

    --border-subtle: rgba(24, 24, 27, .08);
    --border-default:var(--zinc-200);
    --border-strong: var(--zinc-300);

    --text-primary:  var(--zinc-900);
    --text-secondary:var(--zinc-600);
    --text-muted:    var(--zinc-500);
    --text-faint:    var(--zinc-400);
    --text-inverse:  #ffffff;
    --bg-inverse:    var(--zinc-900);

    --accent:        var(--zinc-900);
    --accent-hover:  var(--zinc-800);
    --accent-fg:     #ffffff;

    --success:       #16a34a;
    --success-bg:    rgba(22, 163, 74, .10);
    --danger:        #dc2626;
    --danger-bg:     rgba(220, 38, 38, .10);
    --warning:       #d97706;
    --warning-bg:    rgba(217, 119, 6, .10);
    --info:          var(--zinc-700);
    --info-bg:       rgba(63, 63, 70, .07);

    --ring:          rgba(24, 24, 27, .12);
    --ring-focus:    rgba(24, 24, 27, .25);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .03);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 12px rgba(0, 0, 0, .04);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px rgba(0, 0, 0, .06);
    --shadow-xl: 0 4px 16px rgba(0, 0, 0, .06), 0 20px 40px rgba(0, 0, 0, .08);

    --radius-sm: 6px;
    --radius:    8px;
    --radius-lg: 10px;
    --radius-xl: 14px;

    --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

    --sidebar-w:           248px;
    --sidebar-w-collapsed: 68px;
    --topbar-h:            56px;

    --sidebar-link-color:  #0a0a0a;
    --sidebar-link-icon:   #3f3f46;
    --sidebar-group-color: #52525b;

    --transition-fast: 120ms cubic-bezier(.4, 0, .2, 1);
    --transition:      180ms cubic-bezier(.4, 0, .2, 1);
}

[data-bs-theme="dark"] {
    --bg-app:        #0a0a0b;
    --bg-surface:    #121214;
    --bg-elevated:   #18181b;
    --bg-muted:      #1c1c1f;
    --bg-hover:      rgba(255, 255, 255, .04);
    --bg-active:     rgba(255, 255, 255, .07);

    --border-subtle: rgba(255, 255, 255, .06);
    --border-default:rgba(255, 255, 255, .08);
    --border-strong: rgba(255, 255, 255, .12);

    --text-primary:  #fafafa;
    --text-secondary:#d4d4d8;
    --text-muted:    #a1a1aa;
    --text-faint:    #71717a;
    --text-inverse:  var(--zinc-900);
    --bg-inverse:    #fafafa;

    --accent:        #fafafa;
    --accent-hover:  #e4e4e7;
    --accent-fg:     var(--zinc-900);

    --success:       #22c55e;
    --success-bg:    rgba(34, 197, 94, .12);
    --danger:        #ef4444;
    --danger-bg:     rgba(239, 68, 68, .12);
    --warning:       #f59e0b;
    --warning-bg:    rgba(245, 158, 11, .12);
    --info:          #d4d4d8;
    --info-bg:       rgba(255, 255, 255, .06);

    --ring:          rgba(255, 255, 255, .12);
    --ring-focus:    rgba(255, 255, 255, .28);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .25);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 12px rgba(0, 0, 0, .35);
    --shadow-lg: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-xl: 0 8px 24px rgba(0, 0, 0, .5), 0 24px 48px rgba(0, 0, 0, .55);

    --sidebar-link-color: #e4e4e7;
    --sidebar-link-icon:  #a1a1aa;
    --sidebar-group-color:#71717a;
}

/* ---------- 2. Base ---------- */
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html, body {
    background-color: var(--bg-app);
    color: var(--text-primary);
    font-family: var(--font-sans);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: -0.005em;
    transition: background-color var(--transition), color var(--transition);
}

body { min-height: 100vh; }

h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
}
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
h4 { font-size: 1rem; }
h5 { font-size: .9375rem; }
h6 { font-size: .8125rem; }

code, pre, .font-mono { font-family: var(--font-mono); font-size: .85em; }

a { color: var(--text-primary); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--text-secondary); }

hr { border-color: var(--border-subtle); opacity: 1; }

.text-secondary { color: var(--text-secondary) !important; }
.text-muted     { color: var(--text-muted) !important; }

/* Tabular figures everywhere a number is compared down a column. */
.mono { font-variant-numeric: tabular-nums; }

/* ---------- 3. Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-default);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: padding-box; }

/* ---------- 4. App shell + sidebar ---------- */
.app-shell { min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    height: 100vh;
    /* dvh tracks the *visible* viewport, so the bottom of the offcanvas is never
       left behind a mobile browser's URL bar. vh is the fallback. */
    height: 100dvh;
    position: fixed;
    top: 0; left: 0;
    z-index: 1045;
    background: var(--bg-surface);
    border-right: 1px solid var(--border-subtle);
    display: flex;
    flex-direction: column;
    transition: width var(--transition);
    overflow: hidden;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: var(--topbar-h);
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    min-width: 0;
    flex: 1;
}
.sidebar-brand-link:hover { color: inherit; }
/* The RR mark, as an image rather than an icon glyph.
   ⚠ Swapped on [data-bs-theme], NOT on prefers-color-scheme: the theme here is the
   user's own choice out of localStorage, and keying the logo to the OS instead would
   render the white-on-black mark onto a white sidebar for anyone whose app theme and
   system theme disagree. The favicon is the opposite case — see the <head> in
   _Layout.cshtml — because a browser tab is painted by the browser, not by us. */
.sidebar-brand-mark {
    width: 28px; height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    background-image: url('/images/logo-light.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
[data-bs-theme="dark"] .sidebar-brand-mark { background-image: url('/images/logo-dark.png'); }
.sidebar-brand-text { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.sidebar-brand-name { font-weight: 600; font-size: .9rem; }
.sidebar-brand-sub  { font-size: .7rem; color: var(--text-muted); }

/* The tenant a staff member is working inside. Stated once, permanently, rather
   than left to be inferred from the data on screen. */
.sidebar-context {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-subtle);
    flex-shrink: 0;
}
.sidebar-context-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.sidebar-context-value {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidebar-scroll { flex: 1; overflow-y: auto; padding: 10px 10px 12px; }

.sidebar-section-label {
    font-size: .65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 14px 10px 6px;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 1px;
    border-radius: var(--radius-sm);
    color: var(--sidebar-link-color);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.1;
    position: relative;
    transition: background var(--transition-fast), color var(--transition-fast);
    white-space: nowrap;
}
.sidebar-link i {
    font-size: 1.05rem;
    width: 18px;
    text-align: center;
    color: var(--sidebar-link-icon);
    flex-shrink: 0;
}
.sidebar-link span { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link:hover { background: var(--bg-hover); color: var(--text-primary); }
.sidebar-link:hover i { color: var(--text-primary); }
.sidebar-link.active {
    background: var(--bg-active);
    color: var(--text-primary);
    font-weight: 600;
}
.sidebar-link.active i { color: var(--text-primary); }
.sidebar-link.active::before {
    content: '';
    position: absolute;
    inset-inline-start: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 16px;
    border-radius: 0 3px 3px 0;
    background: var(--accent);
}

/* A count riding on a nav item. Only ever shown for work that is late or
   unowned — a badge on every item is a badge on nothing. */
.sidebar-count {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--bg-muted);
    color: var(--text-muted);
    border: 1px solid var(--border-subtle);
}
.sidebar-count.is-danger { background: var(--danger-bg); color: var(--danger); border-color: transparent; }

.sidebar-footer {
    padding: 10px 12px;
    border-top: 1px solid var(--border-subtle);
    flex-shrink: 0;
}

/* Collapsed rail (desktop only — the mobile offcanvas must never inherit it). */
@media (min-width: 992px) {
    html[data-sidebar="collapsed"] .sidebar { width: var(--sidebar-w-collapsed); }

    html[data-sidebar="collapsed"] .sidebar .sidebar-brand-text,
    html[data-sidebar="collapsed"] .sidebar .sidebar-context,
    html[data-sidebar="collapsed"] .sidebar .sidebar-section-label,
    html[data-sidebar="collapsed"] .sidebar .sidebar-count,
    html[data-sidebar="collapsed"] .sidebar .sidebar-link > span { display: none; }

    html[data-sidebar="collapsed"] .sidebar .sidebar-footer .user-meta { display: none !important; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-brand { padding: 0; justify-content: center; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-brand-link { flex: 0 0 auto; gap: 0; justify-content: center; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-footer { padding: 10px 8px; }
    html[data-sidebar="collapsed"] .sidebar .sidebar-link {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
        margin: 2px 0;
    }
}

/* Hover label for rail icons — one body-level node, positioned by site.js. */
.rail-tip {
    position: fixed;
    z-index: 1060;
    padding: 5px 10px;
    border-radius: var(--radius-sm);
    background: var(--bg-inverse);
    color: var(--text-inverse);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    transition: opacity var(--transition-fast);
}
.rail-tip.is-visible { opacity: 1; }

/* Persistent on desktop; a real offcanvas below lg. */
@media (min-width: 992px) {
    .sidebar.offcanvas { transform: none !important; visibility: visible !important; }
}
.offcanvas.app-offcanvas {
    width: var(--sidebar-w);
    background: var(--bg-surface);
    color: var(--text-primary);
}
.offcanvas.app-offcanvas .offcanvas-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- 5. Main area + topbar ---------- */
.main-area {
    margin-left: var(--sidebar-w);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition);
}
html[data-sidebar="collapsed"] .main-area { margin-left: var(--sidebar-w-collapsed); }
@media (max-width: 991.98px) {
    .main-area, html[data-sidebar="collapsed"] .main-area { margin-left: 0; }
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 1020;
    height: var(--topbar-h);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px;
    background: color-mix(in srgb, var(--bg-app) 78%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--border-subtle);
}
.topbar-title {
    font-size: .9375rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.topbar-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 600;
    border: 1px solid var(--border-subtle);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.topbar-avatar:hover { background: var(--bg-hover); }

.page-container { padding: 24px 28px 48px; flex: 1; }
@media (max-width: 575.98px) { .page-container { padding: 16px; } }

/* The page's own header: what this screen is, and the one action it is for. */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-header h1 { font-size: 1.375rem; margin: 0; }
.page-header .page-subtitle {
    font-size: .875rem;
    color: var(--text-muted);
    margin-top: 3px;
}
.page-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.section-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 10px;
}

/* ---------- 6. Buttons ---------- */
.btn {
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1;
    padding: 9px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast), box-shadow var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring-focus); }
.btn:disabled, .btn.disabled { opacity: .5; pointer-events: none; }
.btn-sm { padding: 7px 11px; font-size: .8125rem; }
.btn-lg { padding: 11px 18px; font-size: .9375rem; }

.btn-primary, .btn-dark {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.btn-primary:hover, .btn-dark:hover {
    background: var(--accent-hover);
    color: var(--accent-fg);
    border-color: var(--accent-hover);
}
.btn-secondary, .btn-outline-secondary, .btn-outline-primary, .btn-light {
    background: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-default);
}
.btn-secondary:hover, .btn-outline-secondary:hover,
.btn-outline-primary:hover, .btn-light:hover {
    background: var(--bg-muted);
    color: var(--text-primary);
    border-color: var(--border-strong);
}
.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    box-shadow: none;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-danger {
    background: var(--danger);
    color: #ffffff;
    border-color: var(--danger);
}
.btn-danger:hover { background: var(--danger); color: #ffffff; opacity: .9; }
.btn-outline-danger {
    background: var(--bg-surface);
    color: var(--danger);
    border-color: var(--border-default);
}
.btn-outline-danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); }
.btn-success, .btn-outline-success {
    background: var(--bg-surface);
    color: var(--success);
    border-color: var(--border-default);
}
.btn-success:hover, .btn-outline-success:hover {
    background: var(--success-bg);
    color: var(--success);
    border-color: var(--success);
}
.btn-warning {
    background: var(--bg-surface);
    color: var(--warning);
    border-color: var(--border-default);
}
.btn-warning:hover { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }

.btn-icon {
    width: 34px; height: 34px;
    padding: 0;
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
    box-shadow: none;
    border-radius: var(--radius-sm);
}
.btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-icon i { font-size: 1.05rem; }

/* ---------- 7. Forms ---------- */
.form-label {
    font-size: .875rem;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
    letter-spacing: -0.005em;
}
.form-text { font-size: .8125rem; color: var(--text-muted); margin-top: 4px; }

.form-control, .form-select {
    font-family: var(--font-sans);
    font-size: .9375rem;
    color: var(--text-primary);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 9px 12px;
    line-height: 1.4;
    box-shadow: var(--shadow-xs);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control::placeholder { color: var(--text-faint); }
.form-control:hover, .form-select:hover { border-color: var(--border-strong); }
.form-control:focus, .form-select:focus {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--text-secondary);
    box-shadow: 0 0 0 3px var(--ring-focus);
    outline: none;
}
.form-control:disabled, .form-select:disabled {
    background-color: var(--bg-muted);
    color: var(--text-muted);
    cursor: not-allowed;
}
.form-control-sm, .form-select-sm { padding: 7px 10px; font-size: .8125rem; }
textarea.form-control { min-height: 80px; }

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--danger); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px var(--danger-bg); }

.form-check-input {
    background-color: var(--bg-surface);
    border: 1px solid var(--border-strong);
    box-shadow: var(--shadow-xs);
}
.form-check-input:focus { border-color: var(--text-secondary); box-shadow: 0 0 0 3px var(--ring-focus); }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.form-check-label { font-size: .875rem; color: var(--text-primary); }

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%2352525b' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
    padding-right: 34px;
    appearance: none;
    -webkit-appearance: none;
}
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23a1a1aa' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
}

.input-group-text {
    background: var(--bg-muted);
    border-color: var(--border-default);
    color: var(--text-muted);
    font-size: .875rem;
}

.text-danger.small { font-size: .75rem; margin-top: 4px; display: inline-block; }

/* ---------- 8. Cards, tables, pills, alerts ---------- */
.card {
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    box-shadow: var(--shadow-xs);
}
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--border-subtle);
    padding: 14px 18px;
    font-size: .9rem;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.005em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.card-body { padding: 18px; }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--border-subtle);
    padding: 12px 18px;
}

.table {
    --bs-table-bg: transparent;
    color: var(--text-primary);
    font-size: .875rem;
    margin: 0;
    border-color: var(--border-subtle);
}
.table > :not(caption) > * > * {
    background-color: transparent;
    color: inherit;
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px;
    vertical-align: middle;
}
.table thead th, .table > thead > tr > th {
    background-color: var(--bg-muted) !important;
    color: var(--text-muted);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    border-bottom: 1px solid var(--border-subtle);
    padding: 11px 16px;
    white-space: nowrap;
}
.table > tbody > tr:hover > * { background: var(--bg-hover); }
.table tbody tr:last-child > * { border-bottom: 0; }
.table-sm > :not(caption) > * > * { padding: 9px 12px; }
.table code {
    font-family: var(--font-mono);
    background: var(--bg-muted);
    color: var(--text-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: .75rem;
}

/* Status pill — the single vocabulary for state anywhere in the product. */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    padding: 5px 10px 5px 9px;
    border-radius: 999px;
    background-color: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: .9;
    flex-shrink: 0;
}
.status-pill.is-success { color: var(--success); background: var(--success-bg); border-color: transparent; }
.status-pill.is-danger  { color: var(--danger);  background: var(--danger-bg);  border-color: transparent; }
.status-pill.is-warning { color: var(--warning); background: var(--warning-bg); border-color: transparent; }
.status-pill.is-info    { color: var(--info);    background: var(--info-bg);    border-color: transparent; }
.status-pill.is-muted   { color: var(--text-muted); }
.status-pill.no-dot::before { display: none; }

.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: .7rem;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 5px;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
}

/* Bootstrap .badge is used in a few config screens; keep it in the same language. */
.badge {
    font-weight: 500;
    font-size: .72rem;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
    border: 1px solid var(--border-subtle);
}
/* Both spellings: `.bg-*` and Bootstrap 5.3's `.text-bg-*`. The pages predate this
   stylesheet and use the latter throughout — remapping them here is what lets a
   status badge anywhere in the product speak the same colour language without
   editing thirty call sites. */
.badge.bg-danger, .badge.text-bg-danger {
    background: var(--danger-bg) !important; color: var(--danger) !important; border-color: transparent;
}
.badge.bg-success, .badge.text-bg-success {
    background: var(--success-bg) !important; color: var(--success) !important; border-color: transparent;
}
.badge.bg-warning, .badge.text-bg-warning {
    background: var(--warning-bg) !important; color: var(--warning) !important; border-color: transparent;
}
.badge.bg-info, .badge.bg-primary, .badge.bg-secondary,
.badge.text-bg-info, .badge.text-bg-primary, .badge.text-bg-secondary, .badge.text-bg-light {
    background: var(--info-bg) !important; color: var(--text-secondary) !important; border-color: transparent;
}
.badge.bg-dark, .badge.text-bg-dark {
    background: var(--accent) !important; color: var(--accent-fg) !important; border-color: transparent;
}

.alert {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    font-size: .875rem;
    padding: 12px 14px;
    background-color: var(--bg-muted);
    color: var(--text-primary);
}
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: transparent; }
.alert-success { background: var(--success-bg); color: var(--success); border-color: transparent; }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: transparent; }
.alert-info, .alert-primary, .alert-secondary {
    background: var(--info-bg);
    color: var(--text-secondary);
    border-color: transparent;
}

.dropdown-menu {
    background-color: var(--bg-elevated);
    border: 1px solid var(--border-default);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    min-width: 220px;
    font-size: .875rem;
    color: var(--text-primary);
}
.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 7px 10px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background var(--transition-fast);
}
.dropdown-item i { color: var(--text-muted); width: 16px; text-align: center; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bg-hover); color: var(--text-primary); }
.dropdown-divider { border-color: var(--border-subtle); margin: 6px 2px; }
.dropdown-header {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-faint);
    padding: 6px 10px 4px;
}

.modal-content, .offcanvas {
    background: var(--bg-elevated);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
}
.modal-content { border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); }
.modal-header, .offcanvas-header { border-bottom: 1px solid var(--border-subtle); padding: 16px 20px; }
.modal-footer { border-top: 1px solid var(--border-subtle); padding: 14px 20px; }
.modal-backdrop.show { opacity: .5; }
[data-bs-theme="dark"] .modal-backdrop.show { opacity: .65; }

.nav-tabs { border-bottom: 1px solid var(--border-subtle); gap: 2px; }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--text-muted);
    font-size: .875rem;
    font-weight: 500;
    padding: 9px 12px;
}
.nav-tabs .nav-link:hover { color: var(--text-primary); background: transparent; }
.nav-tabs .nav-link.active {
    color: var(--text-primary);
    background: transparent;
    border-bottom-color: var(--accent);
}

.pagination { --bs-pagination-font-size: .8125rem; }
.page-link {
    background: var(--bg-surface);
    border-color: var(--border-default);
    color: var(--text-secondary);
    padding: 6px 11px;
}
.page-link:hover { background: var(--bg-muted); color: var(--text-primary); border-color: var(--border-strong); }
.page-item.active .page-link {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-fg);
}
.page-item.disabled .page-link { background: var(--bg-muted); color: var(--text-faint); border-color: var(--border-subtle); }

.progress {
    background: var(--bg-muted);
    border-radius: 999px;
    height: 6px;
}
.progress-bar { background: var(--accent); }

/* =============================================================
   9. Resolve's own components
   ============================================================= */

/* ---------- 9.1 Attention panel ----------
   The dashboard's first screenful answers one question: what needs me now.
   These rows are ordered by urgency, not by recency, and each is a link into
   the filtered list — a number the staff member cannot act on is noise. */
.attention {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.attention-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
}
.attention-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .95rem;
    font-weight: 600;
}
.attention-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.attention-row:last-child { border-bottom: 0; }
.attention-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.attention-icon {
    width: 36px; height: 36px;
    border-radius: var(--radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
    background: var(--bg-muted);
    color: var(--text-secondary);
}
.attention-icon.is-danger  { background: var(--danger-bg);  color: var(--danger); }
.attention-icon.is-warning { background: var(--warning-bg); color: var(--warning); }
.attention-icon.is-success { background: var(--success-bg); color: var(--success); }
.attention-text { min-width: 0; flex: 1; }
.attention-label { font-size: .875rem; font-weight: 500; }
.attention-hint { font-size: .78rem; color: var(--text-muted); }
.attention-value {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1;
}
.attention-value.is-danger  { color: var(--danger); }
.attention-value.is-warning { color: var(--warning); }
.attention-value.is-zero    { color: var(--text-faint); }

/* The all-clear. Worth designing: an empty attention panel is the goal state,
   and a blank box reads as a broken query rather than as good news. */
.attention-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px;
    color: var(--success);
    font-size: .9rem;
}
.attention-clear i { font-size: 1.25rem; }

/* ---------- 9.2 Secondary metric strip ---------- */
.stat-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1px;
    background: var(--border-subtle);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    overflow: hidden;
}
.stat-cell {
    background: var(--bg-surface);
    padding: 14px 16px;
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
a.stat-cell:hover { background: var(--bg-hover); color: var(--text-primary); }
.stat-cell-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.stat-cell-value {
    font-size: 1.25rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

/* ---------- 9.3 SLA health ---------- */
.sla-meter + .sla-meter { margin-top: 16px; }
.sla-meter-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
}
.sla-meter-label { font-size: .8125rem; color: var(--text-secondary); }
.sla-meter-value {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sla-meter-track {
    height: 7px;
    border-radius: 999px;
    background: var(--bg-muted);
    overflow: hidden;
}
.sla-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--success);
    transition: width var(--transition);
}
.sla-meter-fill.is-warning { background: var(--warning); }
.sla-meter-fill.is-danger  { background: var(--danger); }
.sla-meter-foot { font-size: .75rem; color: var(--text-muted); margin-top: 5px; }

/* ---------- 9.4 Work queue rows ----------
   A queue is not a report. Every row carries the four facts needed to decide
   whether to open it: who it is about, what state it is in, how long is left,
   and whose desk it is on. */
.queue { display: flex; flex-direction: column; }
.queue-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    transition: background var(--transition-fast);
}
.queue-row:last-child { border-bottom: 0; }
.queue-row:hover { background: var(--bg-hover); color: var(--text-primary); }
.queue-main { min-width: 0; flex: 1; }
.queue-title {
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;

    /* A complaint title is customer-authored, so its language is whatever the
       customer wrote — not the language of the staff member reading it. `plaintext`
       takes the direction from the title's own first strong character, which is what
       keeps an English title inside the Arabic UI from truncating at the wrong end
       ("…ortal attachment check" instead of "Portal attachment…"). */
    unicode-bidi: plaintext;
}
.queue-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
    font-size: .75rem;
    color: var(--text-muted);
}
.queue-meta .dot { color: var(--text-faint); }
.queue-ref {
    font-family: var(--font-mono);
    font-size: .72rem;
    color: var(--text-muted);
}
.queue-side {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.queue-chevron { color: var(--text-faint); font-size: .9rem; }
.queue-row:hover .queue-chevron { color: var(--text-secondary); }
@media (max-width: 767.98px) {
    .queue-side .d-none-sm { display: none; }
}

/* SLA countdown. Colour is the whole point — it must survive being read at a
   glance from across a desk. */
.countdown {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: .75rem;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: var(--bg-muted);
    color: var(--text-secondary);
    white-space: nowrap;
}
.countdown.is-breached { background: var(--danger-bg);  color: var(--danger); }
.countdown.is-soon     { background: var(--warning-bg); color: var(--warning); }
.countdown.is-ok       { background: var(--success-bg); color: var(--success); }

/* Assignee initials. An unassigned complaint gets a dashed ring, so "nobody
   owns this" is visible in the same glance as who does. */
.avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .02em;
    flex-shrink: 0;
    text-transform: uppercase;
}
.avatar.is-unassigned {
    border-style: dashed;
    border-color: var(--border-strong);
    color: var(--text-faint);
    background: transparent;
}
.avatar-sm { width: 22px; height: 22px; font-size: .6rem; }

/* ---------- 9.5 Filter toolbar ---------- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.toolbar-search { position: relative; flex: 1 1 260px; min-width: 200px; }
.toolbar-search .form-control { padding-inline-start: 34px; }
.toolbar-search i {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    font-size: .9rem;
    pointer-events: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1;
    padding: 8px 12px;
    border-radius: 999px;
    background: var(--bg-surface);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    box-shadow: var(--shadow-xs);
    white-space: nowrap;
    transition: background var(--transition-fast), color var(--transition-fast),
                border-color var(--transition-fast);
}
.chip:hover { background: var(--bg-muted); color: var(--text-primary); border-color: var(--border-strong); }
.chip.is-active {
    background: var(--accent);
    color: var(--accent-fg);
    border-color: var(--accent);
}
.chip.is-active:hover { background: var(--accent-hover); color: var(--accent-fg); }
.chip-count {
    font-family: var(--font-mono);
    font-size: .7rem;
    opacity: .75;
}

/* The count of filters currently narrowing the list, so a staff member never
   wonders why a complaint they expect is missing. */
.filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--accent-fg);
    font-family: var(--font-mono);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1;
}

/* ---------- 9.6 Empty states ---------- */
.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-muted);
}
.empty-state i {
    font-size: 1.75rem;
    color: var(--text-faint);
    display: block;
    margin-bottom: 10px;
}
.empty-state-title {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 3px;
}
.empty-state-hint { font-size: .8125rem; color: var(--text-muted); }
.empty-state-sm { padding: 24px 16px; }

/* ---------- 9.7 Complaint timeline ---------- */
.timeline {
    list-style: none;
    margin: 0;
    padding-inline-start: 1.25rem;
    border-inline-start: 2px solid var(--border-default);
}
.timeline > li { position: relative; padding-bottom: 1rem; }
.timeline > li::before {
    content: "";
    position: absolute;
    inset-inline-start: -1.6rem;
    top: 0.35rem;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--text-faint);
    border: 2px solid var(--bg-app);
    box-sizing: content-box;
}
.timeline > li.timeline-public::before { background: var(--accent); }
.timeline > li.timeline-note::before   { background: var(--warning); }
.timeline-time { font-size: .75rem; color: var(--text-muted); }

/* ⚠ An internal note must be unmistakable on screen: mistaking one for a
   customer reply is how a note ends up quoted back to a complainant. */
.note-internal {
    border-inline-start: 3px solid var(--warning);
    background: var(--warning-bg);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}
.reply-public {
    border-inline-start: 3px solid var(--accent);
    background: var(--bg-muted);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
}

.sla-breached { color: var(--danger); font-weight: 600; }
.sla-met      { color: var(--success); }

/* Customer text and staff notes are typed with their own line breaks; collapsing
   them turns a numbered account of what happened into one paragraph. */
.prewrap { white-space: pre-wrap; overflow-wrap: anywhere; }

/* A definition row — label above value — used across the detail and config
   screens instead of a two-column table pretending to be data. */
.field { margin-bottom: 14px; }
.field-label {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--text-muted);
    margin-bottom: 2px;
}
.field-value { font-size: .875rem; color: var(--text-primary); }

/* ---------- 10. Auth + setup surfaces ---------- */
.auth-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: var(--bg-app);
}
.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}
/* The sign-in page stacks two cards — customer, then staff — so the width that used to live
   on .auth-card moves to the stack. .auth-card keeps its own max-width for the pages that
   still use it alone (the error page). */
.auth-stack {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-stack .auth-card { max-width: none; }

/* The customer card is a tinted surface, and its call to action is an OUTLINE button while
   the staff one stays solid. Two solid primaries would make the page ask a question it cannot
   answer: which of these is "the" button? */
.auth-card-customer {
    background: var(--bg-muted);
    padding: 24px;
}
.auth-secondary-link {
    display: block;
    text-align: center;
    font-size: .8125rem;
    color: var(--text-secondary);
    text-decoration: none;
    /* A 44px target: most customers reach this page on a phone. */
    padding: 12px 8px;
    margin: -4px 0;
}
.auth-secondary-link:hover { color: var(--text-primary); text-decoration: underline; }

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--text-faint);
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-subtle);
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}
/* Pushed to the edge of the brand row without pushing the mark off centre. */
.auth-lang { margin-inline-start: auto; }
.auth-brand-mark {
    width: 34px; height: 34px;
    border-radius: 9px;
    flex-shrink: 0;
    background-image: url('/images/logo-light.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
[data-bs-theme="dark"] .auth-brand-mark { background-image: url('/images/logo-dark.png'); }

/* The one-off setup wizard: wider than a sign-in card, narrower than the app. */
.setup-container { max-width: 46rem; }

/* =============================================================
   14. Right-to-left
   Bootstrap ships a built RTL bundle that mirrors the grid, spacing and
   float system. These are the cases it cannot know about.
   ============================================================= */

/* Arabic font stack — Geist has no Arabic coverage. */
[lang="ar"], [lang="ar"] body {
    --font-sans: 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-feature-settings: normal;
    letter-spacing: 0;
    line-height: 1.7;
}

/* Tracking and upper-casing are Latin typographic devices: Arabic is cursive, so letter-spacing
   breaks the joins between letters, and text-transform has nothing to do. */
[lang="ar"] .auth-divider {
    letter-spacing: 0;
    text-transform: none;
    font-size: .75rem;
}

/* The shell is hand-built, so its fixed positioning must be flipped by hand. */
[dir="rtl"] .sidebar {
    left: auto;
    right: 0;
    border-right: none;
    border-left: 1px solid var(--border-subtle);
}
[dir="rtl"] .main-area { margin-left: 0; margin-right: var(--sidebar-w); }
[dir="rtl"] html[data-sidebar="collapsed"] .main-area,
html[dir="rtl"][data-sidebar="collapsed"] .main-area { margin-right: var(--sidebar-w-collapsed); }
@media (max-width: 991.98px) {
    [dir="rtl"] .main-area { margin-right: 0; }
}
[dir="rtl"] .sidebar-link.active::before { border-radius: 3px 0 0 3px; }

/* ⚠ The .mono rule is load-bearing. A complaint reference (CMP-2026-000125), an
   intake code and a timestamp are latin runs inside Arabic text, so the
   bidirectional algorithm reorders them around the hyphens and renders
   000125-2026-CMP. These identifiers are on nearly every staff screen and are
   read out over the phone, so a mangled one is not cosmetic. isolate keeps the
   run from disturbing the Arabic around it as well. */
[dir="rtl"] .mono,
[dir="rtl"] .queue-ref,
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .font-monospace {
    direction: ltr;
    text-align: right;
    unicode-bidi: isolate;
}
[dir="rtl"] td.mono, [dir="rtl"] th.mono { direction: ltr; text-align: right; }

/* An input holding a reference, an email address or a URL types left-to-right
   even when its label reads right-to-left. */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* Bootstrap's RTL bundle mirrors layout, not glyphs — a chevron pointing "onward"
   has to be flipped by hand or it points back out of the row. */
[dir="rtl"] .queue-chevron { transform: scaleX(-1); }

/* A countdown is a number plus a unit; it must not reorder. */
[dir="rtl"] .countdown, [dir="rtl"] .attention-value, [dir="rtl"] .stat-cell-value {
    direction: ltr;
    unicode-bidi: isolate;
}

/* =============================================================
   15. Miscellany
   ============================================================= */

/* An asp-validation-summary div is always rendered — when there is nothing to
   report the tag helper emits it with class "validation-summary-valid" and a
   single hidden <li>. Because the alert styling sits on that same element,
   every form showed an empty red bar. Hide the element itself when it is in the
   valid state; jquery.validate.unobtrusive swaps the class to
   validation-summary-errors when messages appear, so it reveals itself. */
.validation-summary-valid { display: none; }

@media print {
    .sidebar, .topbar, .page-actions, .toolbar { display: none !important; }
    .main-area { margin: 0 !important; }
    .card { box-shadow: none; border-color: #ddd; }
}