/*
 * me.redesign.css — Maktab brand component layer.
 * =============================================================================
 * Loaded LAST (after theme_boot, so it wins ties) and consumes ONLY the --me-*
 * tokens + --mk-* brand extensions defined by the `maktab` theme in
 * me.themes.css. It introduces NEW `mk-` component classes for redesigned
 * markup; it must not restyle frozen shell/dock/DataTables hooks.
 *
 * RULES
 *   1. Every color/radius/shadow comes from a token — no raw hex here.
 *   2. `mk-` classes only. Alternate themes reskin these for free via --me-*.
 *   3. Global polish is gated `` so the
 *      classic dev-reference stays byte-identical.
 *   4. Direction-agnostic: logical properties (margin-inline, inset-inline,
 *      text-align:start/end) — one file serves RTL + LTR.
 *   5. See docs/DESIGN_SYSTEM.md for the component catalogue.
 */

:root {
    --mk-font: 'tajwal_regular', 'Poppins-Regular', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mk-font-num: 'Poppins-Regular', var(--mk-font);
}

/* ═══════════════════ GLOBAL POLISH (non-classic only) ═══════════════════ */
 ::selection { background: var(--me-accent-100); color: var(--me-heading); }

/* focus-visible ring on interactive elements */
 a:focus-visible,
 button:focus-visible,
 [role="button"]:focus-visible,
 input:focus-visible,
 select:focus-visible,
 textarea:focus-visible,
 .mk-btn:focus-visible {
    outline: 2px solid var(--me-accent);
    outline-offset: 2px;
    border-radius: var(--me-ctl-radius);
}

/* subtle scrollbar tint — COLOR ONLY, no width change.
   DataTables runs with fixedHeader + scrollY and reserves the NATIVE scrollbar
   width in the header to keep columns aligned with the scroll body; changing
   ::-webkit-scrollbar width would desync header/body columns, so we never touch
   scrollbar geometry (only the Firefox color hint, which does not affect width). */
 { scrollbar-color: var(--me-border-strong) transparent; }

/* ═══════════════════════════ BUTTONS ═══════════════════════════ */
.mk-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 18px; border-radius: var(--me-ctl-radius);
    font-family: var(--mk-font); font-size: 14px; font-weight: 600; line-height: 1;
    border: 1px solid transparent; cursor: pointer; text-decoration: none;
    background: var(--me-surface); color: var(--me-text);
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}
.mk-btn--primary { background: var(--mk-navy); color: #fff; }
.mk-btn--primary:hover { background: var(--mk-navy-700); color: #fff; }
.mk-btn--blue { background: var(--me-accent); color: #fff; }
.mk-btn--blue:hover { background: var(--me-accent-deep); color: #fff; }
.mk-btn--indigo { background: var(--mk-indigo); color: #fff; }
.mk-btn--indigo:hover { filter: brightness(.94); color: #fff; }
.mk-btn--outline { background: transparent; border-color: var(--me-border-strong); color: var(--me-text); }
.mk-btn--outline:hover { border-color: var(--me-accent); color: var(--me-accent); }
.mk-btn--ghost { background: transparent; color: var(--me-muted); }
.mk-btn--ghost:hover { background: var(--me-surface-2); color: var(--me-text); }
.mk-btn--danger { background: var(--me-bad); color: #fff; }
.mk-btn--danger:hover { filter: brightness(.94); }
.mk-btn--icon { width: 40px; padding: 0; }
.mk-btn:disabled, .mk-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════ PILLS / DOTS / CHIPS ═══════════════════════════ */
.mk-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4;
    background: #f2f4f7; color: #475467;
}
.mk-pill--progress { background: var(--me-accent-soft); color: var(--me-accent-deep); }
.mk-pill--review   { background: var(--mk-ai-soft);     color: var(--mk-ai); }
.mk-pill--awaiting { background: var(--me-warn-soft);   color: #b54708; }
.mk-pill--ok       { background: var(--me-ok-soft);     color: #027a48; }
.mk-pill--done     { background: var(--me-ok-soft);     color: #027a48; }
.mk-pill--draft    { background: #f2f4f7;               color: #475467; }
.mk-pill--overdue  { background: var(--me-bad-soft);    color: #b42318; }

.mk-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.mk-dot--high { background: var(--me-bad); }
.mk-dot--med  { background: var(--me-warn); }
.mk-dot--low  { background: var(--me-ok); }

.mk-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500;
    background: var(--me-accent-soft); color: var(--me-accent-deep);
}
.mk-chip__x { cursor: pointer; opacity: .7; font-weight: 700; }
.mk-chip__x:hover { opacity: 1; }

/* file-type chips */
.mk-file { display: inline-flex; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.mk-file--pdf  { background: #fef3f2; color: #d92d20; }
.mk-file--doc  { background: var(--me-accent-soft); color: var(--me-accent-deep); }
.mk-file--xls  { background: var(--me-ok-soft); color: #027a48; }
.mk-file--img  { background: var(--mk-ai-soft); color: var(--mk-ai); }
.mk-file--eml  { background: var(--me-warn-soft); color: #b54708; }

/* ═══════════════════════════ CARDS ═══════════════════════════ */
.mk-card {
    background: var(--me-surface); border: 1px solid var(--me-border);
    border-radius: var(--me-radius); box-shadow: var(--me-shadow-1); padding: 24px;
}
.mk-card__title { font-size: 18px; font-weight: 600; color: var(--me-heading); margin: 0 0 4px; }
.mk-card__sub { font-size: 13px; color: var(--me-muted); margin: 0 0 16px; }
.mk-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--me-muted); }

/* KPI stat card */
.mk-stat { display: flex; flex-direction: column; gap: 8px; }
.mk-stat__chip {
    width: 40px; height: 40px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--me-accent-soft); color: var(--me-accent-deep);
}
.mk-stat__num { font-family: var(--mk-font-num); font-variant-numeric: tabular-nums; font-size: 28px; font-weight: 700; color: var(--me-heading); line-height: 1.1; }
.mk-stat__label { font-size: 13px; color: var(--me-muted); }
.mk-stat__delta { font-size: 12px; color: var(--me-muted); display: inline-flex; align-items: center; gap: 4px; }
.mk-stat__delta--up { color: #027a48; }
.mk-stat__delta--down { color: #b42318; }

/* ═══════════════════════════ FORM SYSTEM ═══════════════════════════ */
.mk-field { display: flex; flex-direction: column; gap: 6px; }
.mk-label { font-size: 13px; font-weight: 500; color: var(--me-text); }
.mk-label .mk-req { color: var(--me-bad); margin-inline-start: 2px; }
.mk-input, .mk-select, .mk-textarea {
    width: 100%; min-height: 40px; padding: 9px 12px; font-family: var(--mk-font); font-size: 14px;
    color: var(--me-text); background: var(--me-surface);
    border: 1px solid var(--me-border-strong); border-radius: var(--me-ctl-radius);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.mk-input:focus, .mk-select:focus, .mk-textarea:focus {
    outline: none; border-color: var(--me-accent); box-shadow: 0 0 0 3px var(--me-accent-soft);
}
.mk-input::placeholder, .mk-textarea::placeholder { color: var(--me-subtle); }
.mk-textarea { min-height: 88px; resize: vertical; }
.mk-counter { font-size: 12px; color: var(--me-subtle); text-align: end; }
.mk-banner {
    display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
    background: var(--me-accent-soft); border: 1px solid var(--me-accent-100);
    border-radius: var(--me-ctl-radius); color: var(--me-accent-deep); font-size: 13px;
}
.mk-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 20px; }
.mk-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 20px; }
@media (max-width: 768px) { .mk-grid-2, .mk-grid-3 { grid-template-columns: 1fr; } }

/* ═══════════════════════════ WIZARD CHROME ═══════════════════════════ */
.mk-tabstrip { display: flex; gap: 4px; border-bottom: 1px solid var(--me-border); overflow-x: auto; }
.mk-tab {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px;
    font-size: 14px; font-weight: 600; color: var(--me-muted); white-space: nowrap;
    border-bottom: 2px solid transparent; cursor: pointer; background: none; border-top: 0; border-inline: 0;
}
.mk-tab:hover { color: var(--me-text); }
.mk-tab.is-active { color: var(--me-accent); border-bottom-color: var(--me-accent); }

.mk-stepper-v { display: flex; flex-direction: column; gap: 2px; }
.mk-step { display: flex; gap: 12px; padding: 10px 12px; border-radius: var(--me-ctl-radius); cursor: pointer; }
.mk-step.is-active { background: var(--me-accent-soft); }
.mk-step__mark { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--me-border-strong); color: var(--me-muted); font-size: 12px; background: var(--me-surface); }
.mk-step.is-active .mk-step__mark { border-color: var(--me-accent); color: var(--me-accent); }
.mk-step.is-done .mk-step__mark { background: var(--me-accent); border-color: var(--me-accent); color: #fff; }
.mk-step__title { font-size: 14px; font-weight: 600; color: var(--me-text); }
.mk-step__desc { font-size: 12px; color: var(--me-muted); }

.mk-summary { position: sticky; top: 16px; background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-radius); box-shadow: var(--me-shadow-1); padding: 20px; }

.mk-footerbar {
    position: sticky; bottom: 0; display: flex; align-items: center; gap: 12px; justify-content: flex-end;
    padding: 14px 20px; background: var(--me-surface); border-top: 1px solid var(--me-border);
    box-shadow: 0 -2px 12px rgba(16,24,40,.06);
}
.mk-footerbar__note { margin-inline-end: auto; font-size: 13px; color: var(--me-muted); }

/* ═══════════════════════════ DETAIL DRAWER ═══════════════════════════ */
.mk-drawer { background: var(--me-surface); border-inline-start: 1px solid var(--me-border); box-shadow: var(--me-shadow-2); display: flex; flex-direction: column; }
.mk-drawer__head { padding: 20px; border-bottom: 1px solid var(--me-border); }
.mk-drawer__id { font-family: var(--mk-font-num); font-size: 12px; color: var(--me-muted); }
.mk-drawer__title { font-size: 18px; font-weight: 700; color: var(--me-heading); }
.mk-deflist { display: grid; grid-template-columns: max-content 1fr; gap: 10px 16px; font-size: 13px; }
.mk-deflist dt { color: var(--me-muted); }
.mk-deflist dd { color: var(--me-text); margin: 0; }

/* horizontal workflow stepper */
.mk-flow { display: flex; align-items: flex-start; }
.mk-flow__step { flex: 1; text-align: center; position: relative; font-size: 11px; color: var(--me-muted); }
.mk-flow__step::before { content: ""; position: absolute; top: 11px; inset-inline: -50% 50%; height: 2px; background: var(--me-border); z-index: 0; }
.mk-flow__step:first-child::before { display: none; }
.mk-flow__node { width: 24px; height: 24px; border-radius: 50%; margin: 0 auto 6px; position: relative; z-index: 1;
    background: var(--me-surface); border: 2px solid var(--me-border-strong); display: flex; align-items: center; justify-content: center; }
.mk-flow__step.is-done .mk-flow__node { background: var(--me-accent); border-color: var(--me-accent); color: #fff; }
.mk-flow__step.is-done::before { background: var(--me-accent); }
.mk-flow__step.is-current .mk-flow__node { border-color: var(--me-accent); color: var(--me-accent); }

/* ═══════════════════════════ AI CARD ═══════════════════════════ */
.mk-ai-card { background: var(--mk-ai-soft); border: 1px solid color-mix(in srgb, var(--mk-ai) 22%, transparent); border-radius: var(--me-radius); padding: 16px; }
.mk-ai-card__title { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--mk-ai); }
.mk-ai-conf { font-family: var(--mk-font-num); font-variant-numeric: tabular-nums; font-weight: 700; color: var(--mk-ai); }

/* ═══════════════════════════ DROPZONE / MODAL / MISC ═══════════════════════════ */
.mk-dropzone { border: 1.5px dashed var(--me-border-strong); border-radius: var(--me-radius); padding: 24px; text-align: center; color: var(--me-muted); background: var(--me-surface-2); }
.mk-dropzone:hover { border-color: var(--me-accent); color: var(--me-accent); }

.mk-modal__head { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--me-border); }
.mk-modal__chip { width: 40px; height: 40px; border-radius: 10px; background: var(--me-accent-soft); color: var(--me-accent-deep); display: inline-flex; align-items: center; justify-content: center; }
.mk-modal__title { font-size: 18px; font-weight: 700; color: var(--me-heading); }
.mk-modal__sub { font-size: 13px; color: var(--me-muted); }

.mk-empty { text-align: center; color: var(--me-muted); padding: 40px 20px; }
.mk-empty__icon { color: var(--me-subtle); margin-bottom: 12px; }

/* ═══════════════════ SHARED TEMPLATES (datatable / ticket / landing) ═══════════════════
   Style the existing hooks in layouts/{datatable_template,ticket,landing_page_template}
   + partials/full_page_header. CSS only — no markup edits, no touching data-mex or JS
   click hooks (.fc-searchInput-field, .dt-dropdown-filterBtn, .exportMatterTable, …). */

/* --- list filter toolbar (datatable_template) --- */
/* height-neutral: the DataTables scroll body is a fixed calc(100vh - 370px), so any
   extra vertical space here pushes pagination below the fold. Keep only the surface
   tint + radius (no padding/margin/border additions); legacy padding stands. */
 .filter-container {
    background: var(--me-surface);
    border-radius: var(--me-radius);
}
 .fc-search-wrapper {
    display: flex; align-items: center; gap: 8px;
    background: var(--me-surface-2);
    border: 1px solid var(--me-border-strong);
    border-radius: 999px;
    padding: 0 12px; min-width: 220px; height: 38px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
 .fc-search-wrapper:focus-within {
    border-color: var(--me-accent);
    box-shadow: 0 0 0 3px var(--me-accent-soft);
    background: var(--me-surface);
}
 .fc-searchInput-field {
    border: 0; background: transparent; outline: none; width: 100%;
    font-family: var(--mk-font); font-size: 13px; color: var(--me-text);
}
 .fc-searchInput-field::placeholder { color: var(--me-subtle); }
 .dt-dropdown-filterBtn {
    display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 14px;
    border: 1px solid var(--me-border-strong); border-radius: var(--me-ctl-radius);
    background: var(--me-surface); color: var(--me-text); font-size: 13px; font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
}
 .dt-dropdown-filterBtn:hover { border-color: var(--me-accent); color: var(--me-accent); }
 .dt-filterTag-section { border-top: 1px solid var(--me-divider); }

/* --- ticket popup (layouts/ticket) --- */
 .responsive-ticket {
    background: var(--me-surface);
    border-radius: var(--me-radius-lg);
    box-shadow: var(--me-shadow-2);
    overflow: hidden;
}
 .ticket-overlay-header {
    background: var(--mk-navy);
    padding: 14px 16px;
}
 .ticket-overlay-header .text-white { font-size: 16px; font-weight: 600; }

/* --- landing template (layouts/landing_page_template + full_page_header).
   .bg-white / .landingpage-container are already themed by the chrome block;
   this adds hairlines, radius and nav-item states. --- */
 .landing-sidebar-col { border-inline-end: 1px solid var(--me-border); }
 .landingpage-options > li { border-radius: var(--me-ctl-radius); color: var(--me-muted); transition: background .15s ease, color .15s ease; }
 .landingpage-options > li.active,
 .landingpage-options > li:hover { background: var(--me-accent-soft); color: var(--me-accent-deep); }
 .landing-page-overlay .overlay-container {
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius);
}

/* ═══════════════════ AUTH (login_app + auth/{login,init-reset-password,reset-password,account-activation}) ═══════════════════
   CSS-only over the shared .login-* hooks; markup/form names/csrf/.toggle-password JS
   untouched. me.redesign.css loads after landing_page/style.ar.css so these win. */
 .col-background {
    background: linear-gradient(160deg, var(--mk-navy) 0%, var(--mk-navy-700) 100%) !important;
    color: #fff;
}
 .login-form {
    background: var(--me-surface);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius-lg);
    box-shadow: var(--me-shadow-2);
    padding: 32px; width: 100%; max-width: 400px;
}
 .login-form-label {
    display: block; font-size: 13px; font-weight: 500; color: var(--me-text); margin: 14px 0 6px;
}
 .login-form-input {
    width: 100%; min-height: 42px; padding: 10px 12px;
    border: 1px solid var(--me-border-strong); border-radius: var(--me-ctl-radius);
    font-size: 14px; color: var(--me-text); background: var(--me-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}
 .login-form-input:focus {
    outline: none; border-color: var(--me-accent); box-shadow: 0 0 0 3px var(--me-accent-soft);
}
 .login-form-input.is-invalid { border-color: var(--me-bad); }
 .login-btn {
    width: 100%; min-height: 44px; margin-top: 20px;
    background: var(--mk-navy); color: #fff; border: 0; border-radius: var(--me-ctl-radius);
    font-size: 15px; font-weight: 600; cursor: pointer; transition: background .15s ease;
}
 .login-btn:hover { background: var(--mk-navy-700); }
 .login-form a { color: var(--me-accent); text-decoration: none; }
 .login-form a:hover { color: var(--me-accent-deep); text-decoration: underline; }
 .pass-container .field-icon { color: var(--me-muted); }

/* ═══════════════════════════ MOTION ═══════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .mk-btn, .mk-input, .mk-select, .mk-textarea, .mk-tab, .mk-dropzone { transition: none !important; }
}

/* ═════════════════ DATATABLE / LANDING REDESIGN ═════════════════ */
/* Landing composition + list components. Token-driven, RTL-safe (logical
   properties), gated to non-classic themes. Frozen DOM hooks are restyled,
   never renamed. */

/* ---- Layout: the table renders at natural height with its own internal
   scroll body (bounded by scrollY + the JS fitScrollBody). The sidebar is
   bounded by its OWN max-height/scroll. We deliberately do NOT force a
   flex/min-height:0 chain on the table containers — that collapses the table
   to zero height when an ancestor isn't height-bounded. ---- */
 .landing-page-overlay .overlay-container {
    border: 0 !important; border-radius: 0 !important; background: transparent !important;
}

/* ---- Title row ---- */
 .landing-title-row {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex: 0 0 auto; margin: 8px 12px 0; padding: 12px 18px;
    background: var(--me-surface); border: 1px solid var(--me-border);
    border-radius: var(--me-radius, 12px); box-shadow: var(--me-shadow-1);
}
 .p-landing-row {padding: 10px 10px 4px;}
 .landing-title-row__head { display: flex; align-items: center; gap: 12px; min-width: 0; }
 .landing-title { font-size: 20px; font-weight: 700; color: var(--me-heading); margin: 0; line-height: 1.2; }
 .landing-title__sub { font-size: 12.5px; color: var(--me-muted); margin: 1px 0 0; }
 .landing-title__actions { display: flex; align-items: center; gap: 8px; flex: none; }
 .landing-title__actions .mk-btn { display: inline-flex; align-items: center; gap: 6px; }
/* module create buttons live DIRECTLY in the title card as a primary action */
 .landing-title__actions .dt-addButton,
 .landing-title__actions .lp-create-btn {
    background: var(--mk-navy) !important; color: #fff !important;
    height: 40px; min-width: 40px; padding: 0 16px; border-radius: var(--me-ctl-radius, 8px);
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    border: 0 !important; width: auto !important; font-size: 14px; font-weight: 600; cursor: pointer;
}
 .landing-title__actions .dt-addButton:hover,
 .landing-title__actions .lp-create-btn:hover { background: var(--mk-navy-700) !important; color: #fff !important; }
 .landing-title__actions .dt-addButton svg path,
 .landing-title__actions .lp-create-btn svg path { stroke: #fff; }
/* consistent "+" icon + text label */
 .landing-title__actions .dt-addbtn-ico { width: 13px; height: 13px; flex: none; }
 .landing-title__actions .dt-addbtn-ico path { stroke: #fff; }
 .landing-title__actions .dt-addbtn-label { color: #fff; font-weight: 600; white-space: nowrap; }
/* hide the datatable-toolbar create button ONLY when the landing title already
   carries a create button (so modules not yet wired keep their toolbar button) */
 .landingpage-container:has(.landing-title__actions > *) .dt-toolbar-addbtn { display: none !important; }
 .dt-toolbar-addbtn:empty { display: none; }

/* ---- Full-width KPI cards (spread across the whole row, responsive) ---- */
 .landing-statcards-row { width: 100%; flex: 0 0 auto; }
 .mk-stat-grid {
    display: grid; width: 100%;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px; padding: 10px 12px 4px;
}
@media (max-width: 700px) {  .mk-stat-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
 .mk-stat-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
 .mk-stat-card .mk-stat__chip { width: 40px; height: 40px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; }
 .mk-stat-card .mk-stat__chip svg { width: 19px; height: 19px; }
 .mk-stat__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
 .mk-stat-card .mk-stat__label { font-size: 12px; color: var(--me-muted); }
 .mk-stat-card .mk-stat__num { font-size: 22px; line-height: 1.15; }
 .mk-stat__delta { font-size: 11.5px; margin-top: 2px; }
 .mk-stat__delta-lbl { color: var(--me-muted); font-weight: 400; }
 .mk-stat__chip--total    { background: var(--me-accent-soft); color: var(--me-accent-deep); }
 .mk-stat__chip--progress { background: var(--me-ok-soft);     color: #027a48; }
 .mk-stat__chip--due      { background: var(--me-warn-soft);   color: #b54708; }
 .mk-stat__chip--review   { background: var(--mk-ai-soft);     color: var(--mk-ai); }
 .mk-stat__chip--overdue  { background: var(--me-bad-soft);    color: #b42318; }

/* ---- Sidebar: separated cards; bounded by its OWN max-height + scroll
   (independent of the table, so neither collapses). ---- */
 .landing-sidebar-col {
    background: transparent !important; border: 0 !important;
    padding: 2px 8px 12px 0px !important;
    max-height: calc(100vh - 210px); overflow-y: auto; overflow-x: hidden;
}
 .landing-sidebar-col > .row { margin: 0; }
 .landing-sidebar-col > .row > .col { padding: 0; }
 .lp-section { background: var(--me-surface); border: 1px solid var(--me-border); border-radius: var(--me-radius, 12px); box-shadow: var(--me-shadow-1); padding: 10px; margin-bottom: 12px; }
 .lp-block + .lp-block { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--me-border); }
 .lp-section__title { font-size: 12px; font-weight: 700; color: var(--me-heading); padding: 4px 6px 6px; margin: 0; }
 .lp-section__head { display: flex; align-items: center; justify-content: space-between; }
 .lp-section__add { border: 0; background: transparent; color: var(--me-accent); cursor: pointer; width: 24px; height: 24px; border-radius: 6px; margin-inline-end: 4px; display: inline-flex; align-items: center; justify-content: center; }
 .lp-section__add:hover { background: var(--me-accent-soft); }

/* Views list items — no border-bottom, compact, active state. */
 .landing-sidebar-col .landingpage-options { gap: 2px; }
 .landing-sidebar-col .landingpage-options li {
    display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px;
    border-bottom: 0 !important; cursor: pointer; font-size: 13px; color: var(--me-text);
    margin: 0; list-style: none; background: transparent;
}
 .landing-sidebar-col .landingpage-options li:hover { background: var(--me-surface-2); }
 .landing-sidebar-col .landingpage-options li.active { background: var(--me-accent-soft); color: var(--me-accent-deep); font-weight: 600; }
 .landing-sidebar-col .landingpage-options li svg { width: 16px; height: 16px; flex: none; }
 .landing-sidebar-col .landingpage-options li > span:not(.lp-nav__count) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .lp-nav__count { margin-inline-start: auto; font-size: 12px; font-weight: 600; color: var(--me-muted); background: var(--me-surface-2); border-radius: 10px; padding: 1px 8px; min-width: 22px; text-align: center; }
 .landingpage-options li.active .lp-nav__count { color: var(--me-accent-deep); background: #fff; }

/* Quick filters. */
 .lp-qf-list { display: flex; flex-direction: column; gap: 2px; padding: 2px; }
 .lp-qf { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--me-text); margin: 0; }
 .lp-qf:hover { background: var(--me-surface-2); }
 .lp-qf__check { accent-color: var(--me-accent); flex: none; }
 .lp-qf__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--me-accent); flex: none; }
 .lp-qf__label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .lp-qf-list .lp-qf:nth-child(1) .lp-qf__dot { background: var(--me-bad); }
 .lp-qf-list .lp-qf:nth-child(2) .lp-qf__dot { background: var(--me-accent); }
 .lp-qf-list .lp-qf:nth-child(3) .lp-qf__dot { background: #7c3aed; }
 .lp-qf-list .lp-qf:nth-child(4) .lp-qf__dot { background: var(--me-warn); }
 .lp-qf-list .lp-qf:nth-child(5) .lp-qf__dot { background: var(--me-ok); }
 .lp-qf-list .lp-qf:nth-child(6) .lp-qf__dot { background: #0891b2; }

/* Saved-views card list. */
 .lp-savedviews .msv-add-row { padding: 0 2px 8px; }
 .lp-savedviews .msv-add-row .msv-name { flex: 1 1 auto; min-width: 0; height: 32px; font-size: 12.5px; }
 .lp-savedviews .msv-add-row .msv-save { flex: none; white-space: nowrap; }
 .lp-savedviews .msv-menu { display: flex; flex-direction: column; gap: 2px; padding: 2px; }
 .lp-savedviews .msv-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 13px; color: var(--me-text); list-style: none; }
 .lp-savedviews .msv-item:hover { background: var(--me-surface-2); color: var(--me-accent-deep); }
 .lp-savedviews .msv-item-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .lp-savedviews .msv-del { flex: none; border: 0; background: transparent; color: var(--me-muted); width: 20px; height: 20px; border-radius: 6px; line-height: 1; font-size: 15px; cursor: pointer; opacity: 0; }
 .lp-savedviews .msv-item:hover .msv-del { opacity: 1; }
 .lp-savedviews .msv-del:hover { background: var(--me-bad-soft); color: var(--me-bad); }
 .lp-savedviews .msv-empty { padding: 7px 8px; font-size: 12.5px; list-style: none; color: var(--me-muted); }

/* ---- Collapsed sidebar = clean narrow icon rail (Views icons only) ---- */
 .landing-sidebar-col.close { flex: 0 0 64px; max-width: 64px; width: 64px; padding: 0 !important; position: relative; }
/* Hide every label / secondary section — only the Views icons remain. */
 .landing-sidebar-col.close .lp-section__title,
 .landing-sidebar-col.close .lp-block--quickfilters,
 .landing-sidebar-col.close .lp-section--savedviews,
 .landing-sidebar-col.close .landingpage-options li > span,
 .landing-sidebar-col.close .lp-nav__count { display: none !important; }
/* The Views card becomes the rail; its header row is the toggle bar. */
 .landing-sidebar-col.close .lp-section--main { padding: 48px 8px 10px; margin: 0; }
 .landing-sidebar-col.close .lp-block--views { padding: 0; border: 0; margin: 0; }
 .landing-sidebar-col.close .landingpage-options { gap: 6px; align-items: center; }
 .landing-sidebar-col.close .landingpage-options li {
    justify-content: center; padding: 0; gap: 0; width: 42px; height: 42px; margin: 0 auto; border-radius: 10px;
}
 .landing-sidebar-col.close .landingpage-options li svg { width: 18px; height: 18px; }
/* collapsed: the content column takes the freed space */
 .landing-sidebar-col.close ~ .landing-page-overlay { flex: 1 1 auto !important; max-width: none !important; width: auto !important; }
/* collapsed: the toggle is a full-width header bar spanning the rail width
   (always visible so it can re-expand the rail); icons sit below it. */
 .landing-sidebar-col.close .collapce-sidebar-position {
    display: inline-flex !important; align-items: center; justify-content: center;
    position: absolute; top: 8px; inset-inline: 8px; height: 34px; width: 100%;
    bottom: auto !important; left: auto !important; right: auto !important; transform: none !important;
    z-index: 10;
}
 .landing-sidebar-col.close .collapce-sidebar-position:hover { background: var(--me-accent-soft); }
 .landing-sidebar-col.close .collapce-sidebar-position svg path { fill: var(--me-accent); }

/* ---- Datatable container: one clean white card (no blue bg / no double
   borders). NO flex/min-height:0 here — the table keeps its natural height and
   scrolls via its own scroll body. ---- */
 .landingpage-container .dt-background {
    background: var(--me-surface) !important; border: 1px solid var(--me-border) !important;
    border-radius: var(--me-radius, 12px) !important; box-shadow: var(--me-shadow-1);
    padding: 8px 12px 10px !important; margin: 0;
}
 .landingpage-container .filter-container { background: transparent !important; border: 0 !important; box-shadow: none !important; margin-top: 0 !important; border-radius: 0 !important; }
 .landingpage-container .dt-table { margin: 0; }

/* Toolbar search box. */
 .landingpage-container .fc-search-wrapper { border: 1px solid var(--me-border-strong); border-radius: 8px; background: var(--me-surface); padding: 5px 10px; min-width: 220px; gap: 6px; }
 .landingpage-container .fc-searchInput-field { border: 0 !important; background: transparent !important; outline: none; width: 100%; font-size: 13px; box-shadow: none !important; }

/* ---- Table: compact rows, matter name + number tag, owner chip ---- */
 .landingpage-container table.dataTable > tbody > tr > td { padding-top: 8px; padding-bottom: 8px; vertical-align: middle; font-size: 13px; }
 .landingpage-container table.dataTable > thead > tr > th { padding-top: 10px; padding-bottom: 10px; vertical-align: middle; font-size: 12px; font-weight: 600; color: var(--me-muted); }
 .landingpage-container table.dataTable > tbody > tr:first-child > td { border-top: 0; }
 .workspace-matter-name { font-weight: 600 !important; font-size: 13.5px !important; color: var(--me-heading) !important; }
 .matter-number-tag { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px; background: var(--me-surface-2); color: var(--me-muted); font-size: 11.5px; font-weight: 600; white-space: nowrap; font-family: var(--mk-font-num, inherit); }
 .mk-owner { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
 .mk-owner__avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--me-accent-soft); color: var(--me-accent-deep); }
 .mk-owner__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .mk-pill--suspended { background: #fff4e5; color: #b54708; }

/* ---- Scroll body height (fallback; JS fitScrollBody refines it live) ---- */
 .landingpage-container .dt-scroll-body,
 .landingpage-container .dataTables_scrollBody { max-height: calc(100vh - 470px); }

/* ---- Sticky-column edge shadow: only while horizontally scrolled ---- */
 table.dataTable:not(.dtfc-scrolling-left):not(.dtfc-scrolling-right) tr > .dtfc-edge-start::after,
 table.dataTable:not(.dtfc-scrolling-left):not(.dtfc-scrolling-right) tr > .dtfc-edge-end::after { box-shadow: none !important; }