@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800&display=swap');

:root,
html[data-theme="light"] {
    --bg-primary: #f4f5f6;
    --bg-secondary: #eceeef;
    --surface: #ffffff;
    --surface-alt: #fafafa;
    --text-primary: #17191c;
    --text-secondary: #697079;
    --border: #dde0e3;
    --border-strong: #c8ccd0;
    --accent-red: #c8102e;
    --accent-hover: #a90c26;
    --danger: #c8102e;
    --success: #237a57;
    --warning: #a96808;
    --sidebar: #17191c;
    --sidebar-text: #c5c8cd;
    --sidebar-muted: #777e87;
    --shadow: 0 5px 18px rgba(20, 24, 30, .055);
}

html[data-theme="dark"] {
    --bg-primary: #111315;
    --bg-secondary: #171a1d;
    --surface: #1c1f22;
    --surface-alt: #22262a;
    --text-primary: #f2f3f4;
    --text-secondary: #9da3aa;
    --border: #30353a;
    --border-strong: #434950;
    --accent-red: #df1739;
    --accent-hover: #ee2949;
    --danger: #ed3150;
    --success: #4fb58b;
    --warning: #e7a845;
    --sidebar: #090a0b;
    --sidebar-text: #c7cbd0;
    --sidebar-muted: #666d75;
    --shadow: 0 6px 22px rgba(0, 0, 0, .22);
    color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg-primary); color: var(--text-primary); font-family: Vazirmatn, Tahoma, sans-serif; font-size: 14px; transition: background .2s, color .2s; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; }
.ltr { direction: ltr; text-align: left; display: inline-block; }
.mono { font-family: Consolas, monospace; letter-spacing: .025em; }
.muted { color: var(--text-secondary); }
.app-shell { min-height: 100vh; }
.sidebar { position: fixed; z-index: 1040; top: 0; right: 0; bottom: 0; width: 254px; display: flex; flex-direction: column; padding: 0 17px; background: var(--sidebar); color: var(--sidebar-text); border-left: 1px solid rgba(255,255,255,.04); }
.brand { height: 82px; display: flex; align-items: center; gap: 11px; padding: 0 7px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-mark { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; background: var(--accent-red); color: #fff; font-family: Arial, sans-serif; font-size: 22px; font-weight: 800; transform: skew(-6deg); border-radius: 3px; }
.brand strong { display: block; color: #fff; font-size: 15px; font-weight: 700; }
.brand small { display: block; margin-top: 3px; color: var(--sidebar-muted); font-size: 10px; }
.sidebar-close { display: none; margin-right: auto; border: 0; color: #fff; background: none; font-size: 25px; }
.side-nav { flex: 1; display: flex; flex-direction: column; gap: 4px; padding: 25px 0; overflow-y: auto; }
.side-nav a { min-height: 44px; display: flex; align-items: center; gap: 12px; padding: 0 14px; color: var(--sidebar-text); border-radius: 5px; border-right: 3px solid transparent; transition: .15s; }
.side-nav a:hover { color: #fff; background: rgba(255,255,255,.055); }
.side-nav a.active { color: #fff; background: rgba(200,16,46,.13); border-right-color: var(--accent-red); }
.side-nav a > span { width: 19px; color: #8e949c; font-size: 17px; text-align: center; }
.side-nav a.active > span { color: #ef4260; }
.side-nav a b { margin-right: auto; min-width: 22px; height: 20px; padding: 2px 6px; text-align: center; font-size: 11px; background: var(--accent-red); color: #fff; border-radius: 10px; }
.sidebar-user { min-height: 75px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.avatar { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: #34383e; color: #fff; font-weight: 700; }
.user-copy { min-width: 0; flex: 1; }
.user-copy strong, .user-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-copy strong { color: #fff; font-size: 12px; }
.user-copy small { color: var(--sidebar-muted); font-size: 10px; margin-top: 2px; }
.sidebar-user form button { border: 0; background: none; color: #888f96; font-size: 20px; cursor: pointer; }
.sidebar-overlay { display: none; }
.main-area { min-height: 100vh; margin-right: 254px; }
.topbar { position: sticky; z-index: 1020; top: 0; height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 0 31px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.topbar-title { display: flex; align-items: center; gap: 12px; }
.topbar-title h1 { margin: 0; font-size: 19px; font-weight: 700; }
.topbar-title span { display: block; margin-top: 4px; color: var(--text-secondary); font-size: 11px; }
.menu-button { display: none; border: 0; background: none; color: var(--text-primary); font-size: 22px; }
.topbar-actions { display: flex; align-items: center; gap: 11px; }
.global-search { width: min(28vw, 350px); height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 5px; }
.global-search span { color: var(--text-secondary); font-size: 18px; }
.global-search input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--text-primary); font-size: 12px; }
.theme-toggle { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text-primary); cursor: pointer; font-size: 19px; }
.top-user { display: flex; align-items: center; gap: 8px; padding-right: 10px; border-right: 1px solid var(--border); font-size: 12px; font-weight: 600; }
.top-user .avatar { width: 31px; height: 31px; background: var(--accent-red); }
.content-area { max-width: 1740px; margin: 0 auto; padding: 27px 31px 45px; }
.app-alert { max-width: 900px; margin: 0 auto 18px; border-radius: 5px; border-width: 1px; box-shadow: var(--shadow); }
.section-heading { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-bottom: 19px; }
.section-heading h2 { margin: 0; font-size: 18px; font-weight: 700; }
.section-heading p { margin: 5px 0 0; color: var(--text-secondary); font-size: 12px; }
.heading-actions, .hero-actions, .row-actions { display: flex; align-items: center; gap: 8px; }
.btn { min-height: 39px; padding: 8px 16px; border-radius: 4px; font-size: 12px; font-weight: 600; }
.btn-primary { --bs-btn-bg: var(--accent-red); --bs-btn-border-color: var(--accent-red); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); }
.btn-secondary { --bs-btn-bg: #32363a; --bs-btn-border-color: #32363a; --bs-btn-hover-bg: #202326; --bs-btn-hover-border-color: #202326; }
.btn-light { --bs-btn-bg: var(--surface); --bs-btn-color: var(--text-primary); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--surface-alt); --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-border-color: var(--border-strong); }
.btn-link { color: var(--text-secondary); text-decoration: none; }
.panel, .table-panel, .form-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.panel { padding: 20px; }
.panel-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; }
.panel-header h3 { margin: 0; font-size: 14px; font-weight: 700; }
.panel-header p { margin: 4px 0 0; color: var(--text-secondary); font-size: 11px; }
.panel-header > a:not(.btn) { color: var(--accent-red); font-size: 11px; font-weight: 600; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; margin-bottom: 18px; }
.metric-card { position: relative; min-height: 123px; padding: 18px 20px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.metric-card::before { content: ''; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: var(--border-strong); }
.metric-card.accent::before, .metric-card.danger::before { background: var(--accent-red); }
.metric-card > span { display: block; color: var(--text-secondary); font-size: 11px; }
.metric-card > strong { display: block; margin: 8px 0 5px; font-size: 27px; font-weight: 800; direction: ltr; text-align: right; }
.metric-card > small { color: var(--text-secondary); font-size: 10px; }
.metric-card.danger > strong { color: var(--danger); }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, .75fr); gap: 17px; }
.attention-row { display: flex; align-items: center; gap: 11px; padding: 12px 3px; border-top: 1px solid var(--border); transition: background .15s; }
.attention-row:hover { background: var(--surface-alt); }
.priority-dot { width: 7px; height: 7px; flex: 0 0 auto; border-radius: 50%; background: #9aa0a6; }
.priority-dot.high { background: var(--warning); }.priority-dot.urgent { background: var(--accent-red); }
.attention-main { min-width: 0; flex: 1; }
.attention-main strong, .attention-main small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attention-main strong { font-size: 12px; }.attention-main small { margin-top: 4px; color: var(--text-secondary); font-size: 10px; }
.attention-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 5px; }
.attention-meta small { color: var(--text-secondary); font-size: 9px; }
.badge-soft, .stage-pill, .priority-label { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; background: var(--bg-secondary); color: var(--text-secondary); border-radius: 3px; font-size: 10px; white-space: nowrap; }
.badge-soft.danger, .badge-soft.urgent { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.stage-pill { color: var(--text-primary); border: 1px solid var(--border); background: var(--surface-alt); }
.priority-label { padding: 3px 7px; font-weight: 600; }
.priority-label.high { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }
.priority-label.urgent { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.priority-label.low { color: var(--text-secondary); }.priority-label.normal { color: var(--success); background: color-mix(in srgb, var(--success) 9%, transparent); }
.workload-row { display: grid; grid-template-columns: minmax(100px, 1fr) 1.2fr 25px; align-items: center; gap: 9px; margin: 13px 0; }
.workload-row > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; color: var(--text-secondary); }
.workload-row > div { height: 4px; overflow: hidden; border-radius: 3px; background: var(--bg-secondary); }
.workload-row i { height: 100%; display: block; background: var(--accent-red); }
.workload-row strong { direction: ltr; font-size: 11px; text-align: left; }
.empty-state { padding: 48px 20px; text-align: center; color: var(--text-secondary); }
.empty-state > span { display: grid; place-items: center; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 50%; background: var(--bg-secondary); font-size: 22px; }
.empty-state h4 { margin: 0 0 6px; color: var(--text-primary); font-size: 14px; }.empty-state p { margin: 0 0 14px; font-size: 11px; }
.empty-state.compact { padding: 24px 10px; font-size: 11px; }
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; }
.filter-bar select, .filter-bar input { height: 38px; padding: 0 11px; color: var(--text-primary); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; outline: none; font-size: 11px; }
.filter-bar select { min-width: 130px; }.filter-bar.simple .search-field { max-width: 450px; }.filter-bar.simple select { min-width: 190px; }
.search-field { min-width: 230px; flex: 1; display: flex; align-items: center; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; }
.search-field input { min-width: 0; flex: 1; border: 0; background: transparent; }.search-field span { padding-right: 11px; color: var(--text-secondary); font-size: 17px; }
.search-field.wide { min-width: 300px; flex: 2; }
.quick-filters { flex-basis: 100%; display: flex; gap: 4px; padding-top: 8px; border-top: 1px solid var(--border); }
.quick-filters a { padding: 6px 10px; color: var(--text-secondary); border-radius: 3px; font-size: 10px; }
.quick-filters a:hover, .quick-filters a.active { color: #fff; background: #34383d; }
.table-panel { overflow: hidden; }
.app-table { width: 100%; border-collapse: collapse; }
.app-table th { padding: 12px 14px; color: var(--text-secondary); background: var(--surface-alt); border-bottom: 1px solid var(--border); font-size: 10px; font-weight: 600; white-space: nowrap; }
.app-table td { padding: 13px 14px; border-bottom: 1px solid var(--border); font-size: 11px; vertical-align: middle; }
.app-table tbody tr:last-child td { border-bottom: 0; }.app-table tbody tr:hover td { background: color-mix(in srgb, var(--surface-alt) 75%, transparent); }
.strong-link { font-weight: 700; }.strong-link:hover, .row-action:hover, .row-actions a:hover { color: var(--accent-red); }
.row-action { color: var(--accent-red); font-size: 10px; font-weight: 600; white-space: nowrap; }
.row-actions { white-space: nowrap; }.row-actions a, .row-actions button { border: 0; padding: 0; background: none; color: var(--text-primary); font-size: 10px; cursor: pointer; }
.danger-link { color: var(--danger)!important; }
.table-sub { display: block; max-width: 210px; margin-top: 3px; color: var(--text-secondary); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 9px; }
.truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-progress { width: 52px; height: 3px; display: inline-block; vertical-align: middle; overflow: hidden; background: var(--bg-secondary); border-radius: 3px; }.mini-progress i { height: 100%; display: block; background: var(--accent-red); }.mini-progress + small { margin-right: 5px; color: var(--text-secondary); }
.pagination-wrap { display: flex; justify-content: center; align-items: center; gap: 14px; padding: 15px; border-top: 1px solid var(--border); color: var(--text-secondary); font-size: 10px; }.pagination-wrap a { color: var(--accent-red); font-weight: 600; }
.form-page { max-width: 1050px; margin: 0 auto; }.form-page.narrow { max-width: 720px; }.form-panel { padding: 25px; }
.form-section-title { display: flex; gap: 12px; padding-bottom: 19px; margin-bottom: 22px; border-bottom: 1px solid var(--border); }
.form-section-title > span { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; background: var(--accent-red); color: #fff; border-radius: 3px; font-weight: 700; }
.form-section-title h3 { margin: 0; font-size: 14px; }.form-section-title p { margin: 4px 0 0; color: var(--text-secondary); font-size: 10px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }.field-group.full { grid-column: 1 / -1; }
.field-group label { display: block; margin-bottom: 6px; color: var(--text-primary); font-size: 11px; font-weight: 600; }.field-group label em { margin-right: 3px; color: var(--accent-red); font-style: normal; }
.form-control, .form-select { min-height: 41px; color: var(--text-primary); background-color: var(--surface-alt); border-color: var(--border); border-radius: 4px; font-size: 12px; }.form-control:focus, .form-select:focus { color: var(--text-primary); background: var(--surface); border-color: var(--accent-red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-red) 10%, transparent); }.form-control::placeholder { color: var(--text-secondary); }
textarea.form-control { min-height: 95px; }.field-error { display: block; margin-top: 5px; color: var(--danger); font-size: 10px; }.help-text { color: var(--text-secondary); font-size: 9px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 15px; }
.upload-rules { margin-top: 20px; padding: 14px; background: var(--bg-primary); border-right: 3px solid var(--border-strong); }.upload-rules strong { font-size: 11px; }.upload-rules p { margin: 3px 0 0; color: var(--text-secondary); font-size: 10px; }
.detail-hero, .case-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 23px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }
.hero-main { display: flex; align-items: center; gap: 15px; }.large-avatar { width: 58px; height: 58px; display: grid; place-items: center; background: #30343a; color: #fff; border-radius: 4px; font-size: 22px; font-weight: 800; }.large-avatar.vehicle { background: var(--bg-secondary); color: var(--accent-red); font-size: 25px; }
.eyebrow { color: var(--accent-red); font-size: 9px; font-weight: 700; text-transform: uppercase; }.detail-hero h2, .case-hero h2 { margin: 4px 0; font-size: 20px; }.detail-hero p, .case-hero p { margin: 0; color: var(--text-secondary); font-size: 11px; }
.detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.info-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 22px; margin: 0; }.info-list > div { display: flex; justify-content: space-between; gap: 15px; padding: 11px 0; border-bottom: 1px solid var(--border); }.info-list dt { color: var(--text-secondary); font-size: 10px; font-weight: 400; }.info-list dd { margin: 0; text-align: left; font-size: 11px; font-weight: 600; }
.note-box { padding: 13px; margin-top: 15px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; color: var(--text-secondary); font-size: 11px; line-height: 1.9; }
.vehicle-feature { display: flex; align-items: center; gap: 12px; padding: 13px; background: var(--surface-alt); border: 1px solid var(--border); }.vehicle-icon { width: 40px; height: 40px; display: grid; place-items: center; color: var(--accent-red); background: var(--bg-secondary); font-size: 22px; }.vehicle-feature h3 { margin: 0; font-size: 13px; }.vehicle-feature p { margin: 3px 0 0; color: var(--text-secondary); font-size: 9px; }.vehicle-feature > a { margin-right: auto; color: var(--accent-red); font-size: 10px; }
.case-summary { display: grid; grid-template-columns: repeat(3, 1fr) auto; align-items: center; gap: 15px; margin-top: 12px; padding: 14px; border-top: 1px solid var(--border); }.case-summary span, .case-summary strong { display: block; }.case-summary span { color: var(--text-secondary); font-size: 9px; }.case-summary strong { margin-top: 3px; font-size: 11px; }
.case-callout { display: flex; align-items: center; justify-content: space-between; margin-top: 15px; padding: 13px; background: color-mix(in srgb, var(--accent-red) 5%, var(--surface-alt)); border-right: 3px solid var(--accent-red); }.case-callout span, .case-callout strong { display: block; }.case-callout span { color: var(--text-secondary); font-size: 9px; }.case-callout strong { margin-top: 3px; }.case-callout > b { color: var(--accent-red); font-size: 10px; }
.hero-badges { display: flex; gap: 6px; margin-bottom: 8px; }.detail-tabs { display: flex; gap: 25px; margin-bottom: 15px; padding: 0 18px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; overflow-x: auto; }.detail-tabs a { flex: 0 0 auto; padding: 14px 2px 12px; color: var(--text-secondary); border-bottom: 2px solid transparent; font-size: 11px; }.detail-tabs a.active { color: var(--text-primary); border-bottom-color: var(--accent-red); font-weight: 700; }.detail-tabs b { padding: 1px 5px; background: var(--bg-secondary); border-radius: 8px; font-size: 8px; }
.case-metrics { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-bottom: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }.case-metrics article { min-height: 91px; padding: 17px; border-left: 1px solid var(--border); }.case-metrics article:last-child { border-left: 0; }.case-metrics span, .case-metrics strong { display: block; }.case-metrics span { color: var(--text-secondary); font-size: 9px; }.case-metrics strong { margin-top: 8px; font-size: 12px; }.case-metrics .danger strong { color: var(--danger); }
.progress-track { height: 5px; overflow: hidden; background: var(--bg-secondary); border-radius: 4px; }.progress-track i { display: block; height: 100%; background: var(--accent-red); border-radius: inherit; }.case-metrics .progress-track { margin-top: 9px; }
.document-section { margin-bottom: 16px; }.document-type { font-weight: 600; white-space: nowrap; }.document-type:first-letter { color: var(--accent-red); }
.checklist { margin-bottom: 18px; padding: 13px; background: var(--surface-alt); border: 1px solid var(--border); }.checklist > strong { display: block; margin-bottom: 9px; font-size: 10px; }.checklist > div { display: flex; flex-wrap: wrap; gap: 7px; }.checklist span { padding: 5px 8px; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: 3px; font-size: 9px; }.checklist span i { margin-left: 4px; font-style: normal; }.checklist span.done { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, var(--border)); }
.timeline > div { display: flex; gap: 9px; padding: 5px 0 12px; }.timeline i { position: relative; width: 7px; height: 7px; margin-top: 5px; border: 2px solid var(--accent-red); border-radius: 50%; }.timeline p { margin: 0; }.timeline strong, .timeline span { display: block; }.timeline strong { font-size: 10px; }.timeline span { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }
.kanban-board { display: flex; gap: 11px; min-height: 600px; padding: 2px 1px 18px; overflow-x: auto; scroll-snap-type: x proximity; }
.kanban-column { width: 294px; min-width: 294px; align-self: flex-start; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; scroll-snap-align: start; }.kanban-column > header { height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 13px; background: var(--surface); border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; }.kanban-column > header div { display: flex; align-items: center; gap: 7px; }.kanban-column h3 { margin: 0; font-size: 11px; }.kanban-column header b { min-width: 22px; padding: 2px 5px; color: var(--text-secondary); background: var(--bg-secondary); border-radius: 9px; font-size: 9px; text-align: center; }.column-dot { width: 6px; height: 6px; background: var(--accent-red); border-radius: 50%; }
.kanban-cards { min-height: 90px; padding: 9px; }.kanban-card { position: relative; margin-bottom: 9px; padding: 13px; background: var(--surface); border: 1px solid var(--border); border-right: 3px solid #a3a7ab; border-radius: 5px; box-shadow: 0 2px 8px rgba(0,0,0,.035); cursor: grab; }.kanban-card:active { cursor: grabbing; }.kanban-card.priority-high { border-right-color: var(--warning); }.kanban-card.priority-urgent { border-right-color: var(--accent-red); }.kanban-card.sortable-ghost { opacity: .35; }.kanban-card.sortable-chosen { box-shadow: 0 10px 25px rgba(0,0,0,.15); }
.card-top { display: flex; align-items: center; justify-content: space-between; }.case-number { color: var(--accent-red); font-size: 9px; font-weight: 700; }.kanban-card h4 { margin: 9px 0 4px; font-size: 13px; font-weight: 700; }.card-person { color: var(--text-primary); font-size: 10px; }.card-person span { color: var(--text-secondary); }.card-vin { display: flex; align-items: center; justify-content: space-between; margin: 10px 0; padding: 6px 8px; background: var(--surface-alt); border: 1px solid var(--border); }.card-vin span { color: var(--text-secondary); font-size: 8px; }.card-vin b { font-size: 9px; }
.card-details { margin: 0; }.card-details > div { display: grid; grid-template-columns: 62px 1fr; gap: 7px; padding: 4px 0; }.card-details dt { color: var(--text-secondary); font-size: 8px; font-weight: 400; }.card-details dd { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 9px; font-weight: 600; }.card-details dd.overdue { color: var(--danger); }
.completion { margin-top: 9px; }.completion > div:first-child { display: flex; justify-content: space-between; margin-bottom: 5px; color: var(--text-secondary); font-size: 8px; }.completion b { color: var(--text-primary); }.kanban-card footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 8px; color: var(--text-secondary); border-top: 1px solid var(--border); font-size: 8px; }.drag-handle { font-size: 15px; line-height: 1; }.column-empty { padding: 20px 5px; color: var(--text-secondary); text-align: center; font-size: 9px; }
.export-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; }.export-card { padding: 25px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }.export-card > span { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 15px; color: var(--accent-red); background: color-mix(in srgb, var(--accent-red) 8%, transparent); border: 1px solid color-mix(in srgb, var(--accent-red) 22%, var(--border)); font-size: 10px; font-weight: 800; }.export-card h3 { font-size: 15px; }.export-card p { min-height: 42px; color: var(--text-secondary); font-size: 11px; line-height: 1.8; }
.search-page-form { max-width: 760px; display: flex; gap: 8px; margin-bottom: 20px; }.search-page-form input { flex: 1; height: 44px; padding: 0 15px; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); outline: 0; border-radius: 4px; }.search-page-form input:focus { border-color: var(--accent-red); }.search-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.search-result { display: flex; gap: 10px; padding: 11px 0; border-top: 1px solid var(--border); }.search-result > span { color: var(--accent-red); font-size: 17px; }.search-result strong, .search-result small { display: block; }.search-result strong { font-size: 11px; }.search-result small { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }.empty-inline { color: var(--text-secondary); font-size: 10px; }
.settings-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .8fr); gap: 16px; max-width: 950px; }.theme-options { display: grid; gap: 10px; }.theme-options button { display: flex; align-items: center; gap: 13px; padding: 11px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; text-align: right; }.theme-options button:hover { border-color: var(--accent-red); }.theme-preview { width: 76px; height: 47px; flex: 0 0 auto; border-radius: 3px; border: 1px solid #c7cbd0; background: linear-gradient(90deg, #202327 25%, #f5f6f7 25%); }.theme-preview.dark { border-color: #454a50; background: linear-gradient(90deg, #08090a 25%, #1d2023 25%); }.theme-options strong, .theme-options small { display: block; }.theme-options strong { font-size: 11px; }.theme-options small { margin-top: 3px; color: var(--text-secondary); font-size: 9px; }
.backup-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 17px; padding: 26px; color: #fff; background: #1b1e21; border-right: 4px solid var(--accent-red); border-radius: 5px; }.backup-hero > div > span { color: #ef4b65; font-size: 9px; font-weight: 700; }.backup-hero h2 { margin: 7px 0; font-size: 19px; }.backup-hero p { margin: 0; color: #a3a9b0; font-size: 10px; }.backup-hero form { flex: 0 0 auto; }
.confirm-card { max-width: 540px; margin: 60px auto; padding: 35px; text-align: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 6px; }.confirm-icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; color: var(--danger); background: color-mix(in srgb, var(--danger) 9%, transparent); font-size: 22px; font-weight: 800; }.confirm-card h2 { font-size: 17px; }.confirm-card p { color: var(--text-secondary); font-size: 11px; line-height: 1.8; }.confirm-card form { display: flex; justify-content: center; gap: 8px; margin-top: 20px; }
.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(380px, 43%) 1fr; background: var(--surface); }.login-panel { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 46px 55px; overflow: hidden; color: #fff; background: #131518; }.login-panel::after { content: ''; position: absolute; width: 420px; height: 420px; bottom: -160px; left: -120px; border: 1px solid rgba(255,255,255,.09); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,.017), 0 0 0 130px rgba(255,255,255,.012); }.login-brand { display: flex; align-items: center; gap: 11px; z-index: 1; }.login-brand strong, .login-brand small { display: block; }.login-brand strong { font-size: 15px; }.login-brand small { margin-top: 3px; color: #858c94; font-size: 10px; }.login-intro { z-index: 1; }.login-intro > span { color: #ed3655; font-size: 10px; font-weight: 700; }.login-intro h1 { margin: 13px 0; font-size: clamp(30px, 4vw, 50px); font-weight: 800; line-height: 1.45; }.login-intro h1::after { content: ''; display: block; width: 50px; height: 3px; margin-top: 20px; background: var(--accent-red); }.login-intro p { max-width: 400px; color: #969ca3; font-size: 12px; line-height: 2; }.login-panel > small { z-index: 1; color: #5e646b; direction: ltr; font-size: 8px; letter-spacing: .15em; }.login-form-wrap { display: grid; place-items: center; padding: 30px; background: var(--bg-primary); }.login-card { width: min(390px, 100%); padding: 36px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow); }.login-card header { margin-bottom: 25px; }.login-card h2 { margin: 0; font-size: 21px; }.login-card header p { margin: 7px 0 0; color: var(--text-secondary); font-size: 11px; }.login-card > label { display: block; margin: 14px 0 6px; font-size: 11px; font-weight: 600; }.login-card .btn { margin-top: 22px; }.login-help { margin: 17px 0 0; color: var(--text-secondary); text-align: center; font-size: 9px; }
.error-page { min-height: 100vh; display: grid; place-content: center; justify-items: center; padding: 30px; text-align: center; background: var(--bg-primary); }.error-page.inline { min-height: calc(100vh - 155px); }.error-page > span { color: var(--accent-red); font-size: 70px; font-weight: 800; line-height: 1; }.error-page h1 { margin: 15px 0 8px; font-size: 21px; }.error-page p { color: var(--text-secondary); font-size: 11px; }.error-page .btn { margin-top: 12px; }

@media (max-width: 1150px) {
    .metric-grid { grid-template-columns: repeat(2, 1fr); }
    .case-metrics { grid-template-columns: repeat(3, 1fr); }.case-metrics article { border-bottom: 1px solid var(--border); }
    .global-search { width: 230px; }.top-user > span:last-child { display: none; }
}

@media (max-width: 900px) {
    .sidebar { transform: translateX(105%); transition: transform .22s; }.sidebar.open { transform: translateX(0); }.sidebar-close { display: block; }.sidebar-overlay { position: fixed; z-index: 1030; inset: 0; background: rgba(0,0,0,.45); }.sidebar-overlay.show { display: block; }
    .main-area { margin-right: 0; }.menu-button { display: block; }.topbar { padding: 0 18px; }.content-area { padding: 22px 18px 40px; }
    .dashboard-grid, .detail-grid, .settings-grid { grid-template-columns: 1fr; }.search-columns { grid-template-columns: 1fr; }.global-search { width: 220px; }.top-user { display: none; }
    .login-page { grid-template-columns: 1fr; }.login-panel { min-height: 290px; padding: 30px; }.login-intro h1 { font-size: 28px; }.login-panel > small { display: none; }
}

@media (max-width: 600px) {
    .topbar { height: 70px; }.topbar-title span, .global-search { display: none; }.content-area { padding: 17px 12px 35px; }
    .section-heading { align-items: flex-start; flex-direction: column; }.section-heading .btn-primary { width: 100%; }.heading-actions { width: 100%; }.heading-actions .btn { flex: 1; }
    .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }.metric-card { min-height: 110px; padding: 14px; }.metric-card > strong { font-size: 23px; }
    .form-grid { grid-template-columns: 1fr; }.field-group.full { grid-column: auto; }.form-panel { padding: 18px 14px; }
    .detail-hero, .case-hero, .backup-hero { align-items: flex-start; flex-direction: column; padding: 17px; }.hero-actions { width: 100%; flex-wrap: wrap; }.hero-actions .btn { flex: 1; }.info-list { grid-template-columns: 1fr; }.case-summary { grid-template-columns: repeat(2, 1fr); }.case-summary .btn { grid-column: 1/-1; }
    .case-metrics { grid-template-columns: repeat(2, 1fr); }.case-metrics article { min-height: 80px; }.case-metrics article:last-child { grid-column: 1/-1; }
    .export-grid { grid-template-columns: 1fr; }.quick-filters { overflow-x: auto; }.quick-filters a { flex: 0 0 auto; }.filter-bar select, .filter-bar .search-field { min-width: calc(50% - 5px); }.filter-bar .search-field.wide { min-width: 100%; }
    .kanban-column { width: 280px; min-width: 280px; }.login-panel { min-height: 245px; padding: 25px; }.login-brand { align-self: flex-start; }.login-intro p { display: none; }.login-form-wrap { padding: 18px; }.login-card { padding: 25px 20px; }
}

/* Phase 2 operational components */
.notification-button { position: relative; width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); font-size: 18px; }
.notification-button b { position: absolute; top: -5px; left: -5px; min-width: 18px; height: 18px; padding: 1px 5px; border-radius: 9px; background: var(--accent-red); color: #fff; font-size: 9px; text-align: center; }
.metric-grid.phase2 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-triple { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.mini-task, .compact-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; border-top: 1px solid var(--border); }
.mini-task > div, .compact-row > strong { min-width: 0; flex: 1; }.mini-task strong, .mini-task small { display: block; }.mini-task strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }.mini-task small, .compact-row small { color: var(--text-secondary); font-size: 9px; }.mini-task > span, .compact-row > span { color: var(--text-secondary); font-size: 9px; white-space: nowrap; }.mini-task.overdue { border-right: 2px solid var(--danger); }.mini-task.overdue > span { color: var(--danger); }
.compact-row strong { font-size: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.manager-workload { margin-top: 16px; }.workload-user-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }.workload-user-grid article { padding: 13px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; }.workload-user-grid article > strong { font-size: 11px; }.workload-user-grid dl { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin: 10px 0 0; }.workload-user-grid dl div { display: flex; justify-content: space-between; }.workload-user-grid dt { color: var(--text-secondary); font-size: 8px; font-weight: 400; }.workload-user-grid dd { margin: 0; font-size: 9px; font-weight: 700; }
.task-tabs { display: flex; gap: 4px; margin-bottom: 14px; padding: 5px; overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }.task-tabs a { flex: 0 0 auto; padding: 8px 13px; color: var(--text-secondary); border-radius: 3px; font-size: 10px; }.task-tabs a.active { color: #fff; background: #34383d; }
.task-list { display: grid; gap: 7px; }.task-row { display: grid; grid-template-columns: 28px minmax(220px, 1fr) 130px 100px 90px 55px; align-items: center; gap: 13px; min-height: 74px; padding: 10px 15px; background: var(--surface); border: 1px solid var(--border); border-right: 3px solid var(--border-strong); border-radius: 5px; box-shadow: var(--shadow); }.task-row.overdue { border-right-color: var(--danger); }.task-check { width: 25px; height: 25px; display: grid; place-items: center; color: var(--text-secondary); border: 1px solid var(--border); border-radius: 50%; }.task-check.done { color: var(--success); border-color: var(--success); }.task-main > div { display: flex; align-items: center; gap: 7px; }.task-main a { font-size: 11px; font-weight: 700; }.task-main p { margin: 4px 0 0; color: var(--text-secondary); font-size: 9px; }.task-main p a { color: var(--accent-red); font-size: 9px; }.task-assignee span, .task-assignee strong, .task-due span, .task-due strong { display: block; }.task-assignee span, .task-due span { color: var(--text-secondary); font-size: 8px; }.task-assignee strong, .task-due strong { margin-top: 3px; font-size: 9px; }.task-row.overdue .task-due strong { color: var(--danger); }
.status-pill { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 3px; color: var(--text-secondary); background: var(--bg-secondary); font-size: 9px; white-space: nowrap; }.status-pill.completed, .status-pill.active { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }.status-pill.in_progress { color: #2d6fac; background: color-mix(in srgb, #2d6fac 10%, transparent); }.status-pill.waiting, .status-pill.blocked { color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); }.status-pill.cancelled, .status-pill.archived { color: var(--text-secondary); }
.task-detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; padding: 23px; background: var(--surface); border: 1px solid var(--border); border-right: 4px solid var(--border-strong); border-radius: 6px; }.task-detail-hero.overdue { border-right-color: var(--danger); }.task-detail-hero h2 { margin: 8px 0 5px; font-size: 19px; }.task-detail-hero p { margin: 0; color: var(--text-secondary); font-size: 10px; }.task-detail-hero form { margin: 0; }.subtasks { margin-top: 12px; }.subtasks a { display: flex; justify-content: space-between; padding: 8px; border-top: 1px solid var(--border); font-size: 10px; }.subtasks span { color: var(--text-secondary); }.comments-panel { max-width: 900px; }.comment { display: flex; gap: 10px; padding: 13px 0; border-top: 1px solid var(--border); }.comment > div { flex: 1; }.comment strong { font-size: 10px; }.comment small { margin-right: 8px; color: var(--text-secondary); font-size: 8px; }.comment p { margin: 5px 0 0; font-size: 10px; line-height: 1.8; }.comment-form { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }.comment-form .form-grid { grid-template-columns: 1fr; }
.review-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap: 16px; }.review-status { display: inline-flex; width: fit-content; padding: 4px 8px; border-radius: 3px; font-size: 9px; white-space: nowrap; }.review-status.uploaded { color: var(--text-secondary); background: var(--bg-secondary); }.review-status.under_review { color: #2d6fac; background: color-mix(in srgb, #2d6fac 10%, transparent); }.review-status.approved { color: var(--success); background: color-mix(in srgb, var(--success) 10%, transparent); }.review-status.rejected, .review-status.needs_correction, .review-status.expired { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }.superseded { opacity: .68; }
.case-hero.phase2.blocked { border-right: 4px solid var(--danger); }.blocked-banner { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 13px 17px; color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--border)); border-radius: 5px; }.blocked-banner strong { white-space: nowrap; }.blocked-banner p { flex: 1; margin: 0; color: var(--text-primary); font-size: 10px; }.blocked-banner form { margin: 0; }.blocked-chip { margin-left: 4px; padding: 3px 6px; color: #fff; background: var(--danger); border-radius: 3px; font-size: 8px; }.block-control { max-width: 600px; margin: -5px 0 16px; padding: 10px 13px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; }.block-control summary { color: var(--danger); cursor: pointer; font-size: 10px; font-weight: 700; }.block-control form { display: flex; gap: 8px; margin-top: 10px; }.case-metrics.phase2 article small { display: block; margin-top: 3px; color: var(--danger); font-size: 8px; }.progress-track.approved i { background: var(--success); }
.advanced-checklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 18px; }.advanced-checklist article { display: flex; align-items: center; gap: 8px; padding: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-right: 3px solid var(--border-strong); border-radius: 4px; }.advanced-checklist article.uploaded { border-right-color: var(--warning); }.advanced-checklist article.approved { border-right-color: var(--success); }.advanced-checklist article > span { font-size: 17px; color: var(--text-secondary); }.advanced-checklist article.approved > span { color: var(--success); }.advanced-checklist strong, .advanced-checklist small { display: block; }.advanced-checklist strong { font-size: 9px; }.advanced-checklist strong em { color: var(--accent-red); font-style: normal; }.advanced-checklist small { margin-top: 3px; color: var(--text-secondary); font-size: 8px; }
.internal-note { margin-bottom: 9px; padding: 11px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; }.internal-note.pinned { border-right: 3px solid var(--accent-red); }.internal-note header { display: flex; justify-content: space-between; gap: 10px; }.internal-note header strong { font-size: 10px; }.internal-note header span { color: var(--text-secondary); font-size: 8px; }.internal-note p { margin: 7px 0 0; font-size: 10px; line-height: 1.8; }.note-form { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }.note-form .form-grid { grid-template-columns: 1fr; }
.alert-row { display: flex; gap: 9px; margin-bottom: 7px; padding: 10px; background: var(--surface-alt); border: 1px solid var(--border); border-right: 3px solid var(--warning); border-radius: 4px; }.alert-row.critical { border-right-color: var(--danger); }.alert-row.info { border-right-color: #2d6fac; }.alert-row > span { width: 20px; height: 20px; display: grid; place-items: center; color: var(--warning); background: color-mix(in srgb, var(--warning) 10%, transparent); border-radius: 50%; font-weight: 800; }.alert-row.critical > span { color: var(--danger); }.alert-row strong { font-size: 9px; }.alert-row p { margin: 3px 0 0; color: var(--text-secondary); font-size: 9px; }
.activity-timeline { position: relative; }.activity-timeline article { display: flex; gap: 12px; padding: 0 0 17px; }.activity-timeline article > i { position: relative; width: 9px; height: 9px; flex: 0 0 auto; margin-top: 5px; border: 2px solid var(--accent-red); border-radius: 50%; }.activity-timeline article > i::after { content: ''; position: absolute; top: 8px; right: 2px; width: 1px; height: 75px; background: var(--border); }.activity-timeline article:last-child > i::after { display: none; }.activity-timeline article > div { flex: 1; }.activity-timeline header { display: flex; justify-content: space-between; }.activity-timeline header strong { font-size: 10px; }.activity-timeline header span, .activity-timeline small { color: var(--text-secondary); font-size: 8px; }.activity-timeline p { margin: 4px 0; font-size: 10px; }.change-list { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }.change-list span { padding: 4px 7px; color: var(--text-secondary); background: var(--surface-alt); border: 1px solid var(--border); font-size: 8px; }.change-list b { color: var(--text-primary); }
.kanban-toolbar { display: flex; gap: 8px; margin-bottom: 11px; }.kanban-toolbar details { position: relative; padding: 8px 11px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; font-size: 9px; }.kanban-toolbar summary { cursor: pointer; font-weight: 600; }.kanban-preferences, .saved-filters, .save-filter-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; }.kanban-preferences label { white-space: nowrap; }.saved-filters span { display: flex; align-items: center; gap: 5px; padding: 5px 7px; background: var(--surface-alt); border: 1px solid var(--border); }.saved-filters form { margin: 0; }.saved-filters button { border: 0; color: var(--danger); background: none; }.save-filter-form input { min-height: 31px; padding: 3px 8px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); }.kanban-card.blocked { background: color-mix(in srgb, var(--danger) 3%, var(--surface)); border-right-color: var(--danger); }.card-counters { display: flex; gap: 5px; margin-top: 8px; }.card-counters span { padding: 4px 6px; color: var(--text-secondary); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 3px; font-size: 8px; }.card-counters b { margin-right: 3px; color: var(--danger); }
.bulk-toolbar { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }.bulk-toolbar strong { margin-left: auto; font-size: 9px; }.bulk-toolbar select { min-height: 33px; padding: 4px 8px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); font-size: 9px; }
.batch-create { margin-bottom: 14px; padding: 0; overflow: hidden; }.batch-create > summary { padding: 15px 18px; cursor: pointer; font-size: 11px; font-weight: 700; list-style-position: inside; }.batch-create[open] > summary { border-bottom: 1px solid var(--border); }.batch-create > form { padding: 15px 18px; }.quick-entry-table input, .quick-entry-table select { min-width: 120px; width: 100%; padding: 7px 8px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 3px; font-size: 9px; }.quick-entry-table .errorlist { min-width: 150px; margin: 4px 0 0; padding: 0; color: var(--danger); list-style: none; font-size: 8px; }.inline-actions { margin-top: 12px; }
.quick-entry-table textarea { min-width: 220px; min-height: 55px; resize: vertical; }
.trade-registration-panel { margin-bottom: 16px; }.trade-status { display: inline-flex; padding: 5px 10px; border-radius: 4px; color: var(--text-secondary); background: var(--surface-alt); font-size: 9px; font-weight: 700; }.trade-status.initial_registered { color: #8a6815; background: color-mix(in srgb, var(--warning) 14%, transparent); }.trade-status.eight_digit_received { color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }.trade-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }.trade-summary > div { padding: 12px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 4px; }.trade-summary span, .trade-summary strong { display: block; }.trade-summary span { margin-bottom: 5px; color: var(--text-secondary); font-size: 8px; }.trade-summary strong { font-size: 10px; line-height: 1.7; }.trade-documents { display: flex; gap: 14px; margin-top: 10px; font-size: 9px; }.trade-registration-panel > details { margin-top: 15px; border-top: 1px solid var(--border); }.trade-registration-panel > details > summary { padding: 13px 0 4px; cursor: pointer; font-size: 10px; font-weight: 700; }.trade-form { padding-top: 12px; }.trade-form .btn { margin-top: 12px; }
.document-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; margin-bottom: 18px; }.document-preview { min-width: 0; padding: 8px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; text-decoration: none; }.document-preview:hover { border-color: var(--border-strong); }.document-preview img { width: 100%; height: 105px; object-fit: cover; border-radius: 3px; background: var(--bg-primary); }.document-file-icon { display: grid; height: 105px; place-items: center; color: var(--text-secondary); background: var(--bg-primary); font-size: 32px; border-radius: 3px; }.document-preview strong, .document-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.document-preview strong { margin-top: 7px; font-size: 9px; }.document-preview small { margin-top: 3px; color: var(--text-secondary); font-size: 8px; }
.case-checklist { display: grid; gap: 9px; }.checklist-group { overflow: hidden; background: var(--surface-alt); border: 1px solid var(--border); border-radius: 5px; }.checklist-group > summary { display: flex; justify-content: space-between; padding: 11px 13px; cursor: pointer; }.checklist-group > summary strong { font-size: 10px; }.checklist-group > summary span { color: var(--text-secondary); font-size: 8px; }.checklist-items { padding: 0 12px 10px; }.checklist-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 9px; min-height: 45px; padding: 7px 0; border-top: 1px solid var(--border); }.check-square { display: grid; width: 19px; height: 19px; place-items: center; border: 1px solid var(--border-strong); border-radius: 3px; color: transparent; font-size: 12px; font-weight: 900; }.checklist-item.uploaded .check-square { color: #fff; background: var(--success); border-color: var(--success); }.checklist-item.not-required .check-square { color: var(--text-secondary); background: color-mix(in srgb, var(--text-secondary) 9%, transparent); border-color: var(--border); opacity: .65; }.checklist-main strong, .checklist-main small { display: block; }.checklist-main strong { font-size: 9px; }.checklist-main small { margin-top: 2px; color: var(--text-secondary); font-size: 8px; }.checklist-item.not-required .checklist-main { opacity: .62; }.checklist-actions { display: flex; align-items: center; gap: 7px; font-size: 8px; }.checklist-actions form { margin: 0; }.checklist-toggle { padding: 3px 5px; color: var(--text-secondary); background: transparent; border: 0; cursor: pointer; font-size: 8px; text-decoration: underline; }
.report-filters { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 13px; padding: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 5px; }.report-filters select, .report-filters input { min-height: 36px; padding: 4px 9px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); border-radius: 3px; font-size: 9px; }.report-filters label { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); font-size: 8px; }.search-columns.advanced { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.notification-list { max-width: 900px; }.notification-row { display: flex; align-items: center; gap: 11px; padding: 13px 3px; border-top: 1px solid var(--border); }.notification-row.unread { background: color-mix(in srgb, var(--accent-red) 3%, transparent); }.notification-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }.notification-row.unread .notification-dot { background: var(--accent-red); }.notification-row > div { min-width: 0; flex: 1; }.notification-row strong, .notification-row p, .notification-row small { display: block; }.notification-row strong { font-size: 10px; }.notification-row p { margin: 3px 0; color: var(--text-secondary); font-size: 9px; }.notification-row small { color: var(--text-secondary); font-size: 8px; }
.settings-panel { margin-bottom: 16px; }.config-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid var(--border); }.config-row strong, .config-row small { display: block; }.config-row strong { font-size: 10px; }.config-row small { margin-top: 3px; color: var(--text-secondary); font-size: 8px; }.config-row > span { color: var(--text-secondary); font-size: 8px; }.recycle-warning { margin-bottom: 14px; padding: 13px; color: var(--danger); background: color-mix(in srgb, var(--danger) 6%, var(--surface)); border: 1px solid color-mix(in srgb, var(--danger) 22%, var(--border)); border-radius: 5px; }.recycle-warning p { margin: 3px 0 0; color: var(--text-primary); font-size: 9px; }.purge-input { width: 65px; padding: 2px 5px; color: var(--text-primary); background: var(--surface-alt); border: 1px solid var(--border); font-size: 8px; }.restore-card { max-width: 720px; margin: 20px auto; padding: 27px; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--danger); border-radius: 6px; box-shadow: var(--shadow); }.restore-icon { width: 45px; height: 45px; display: grid; place-items: center; color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); border-radius: 50%; font-size: 22px; }.restore-card h2 { font-size: 16px; }.restore-card > p { color: var(--text-secondary); font-size: 10px; }.restore-card form > label { display: block; margin-bottom: 6px; font-size: 10px; }

@media (max-width: 1100px) { .dashboard-triple, .search-columns.advanced { grid-template-columns: 1fr 1fr; }.workload-user-grid { grid-template-columns: 1fr 1fr; }.advanced-checklist { grid-template-columns: 1fr 1fr; }.task-row { grid-template-columns: 25px 1fr 110px 90px 80px; }.task-row > .row-action { display: none; } }
@media (max-width: 800px) { .metric-grid.phase2 { grid-template-columns: 1fr 1fr; }.dashboard-triple, .review-layout { grid-template-columns: 1fr; }.task-row { grid-template-columns: 25px 1fr 80px; }.task-assignee, .task-row > .status-pill { display: none; }.task-detail-hero { align-items: flex-start; flex-direction: column; }.advanced-checklist { grid-template-columns: 1fr; }.blocked-banner { align-items: flex-start; flex-direction: column; }.kanban-toolbar { overflow-x: auto; }.kanban-toolbar details { flex: 0 0 auto; }.bulk-toolbar { overflow-x: auto; }.bulk-toolbar > * { flex: 0 0 auto; } }
@media (max-width: 800px) { .trade-summary { grid-template-columns: 1fr 1fr; }.checklist-item { grid-template-columns: 24px 1fr; }.checklist-actions { grid-column: 2; flex-wrap: wrap; } }
@media (max-width: 550px) { .dashboard-triple, .search-columns.advanced, .workload-user-grid { grid-template-columns: 1fr; }.task-row { grid-template-columns: 25px 1fr; }.task-due { grid-column: 2; }.case-metrics.phase2 { grid-template-columns: 1fr 1fr; }.block-control form { flex-direction: column; } }

.case-inline-create { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 14px 16px; background: var(--surface-alt); border: 1px dashed var(--border-strong); border-radius: 5px; }
.case-inline-create strong, .case-inline-create small { display: block; }
.case-inline-create strong { font-size: 10px; }
.case-inline-create small { margin-top: 4px; color: var(--text-secondary); font-size: 9px; }
.case-inline-create-actions { display: flex; flex-wrap: wrap; gap: 7px; }
#popupCreateResult { margin: 12px 0 0; }
.popup-create-modal { color: var(--text-primary); background: var(--surface); border-color: var(--border); }
.popup-create-modal .modal-header, .popup-create-modal .modal-footer { border-color: var(--border); }
.popup-create-modal .modal-header h2 { margin: 0; font-size: 16px; }
.popup-create-modal .modal-header p { margin: 5px 0 0; color: var(--text-secondary); font-size: 9px; }
.popup-create-modal .modal-body { padding: 20px; }
.modal-dialog-scrollable .popup-create-modal > form { min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; overflow: hidden; }
.modal-dialog-scrollable .popup-create-modal > form > .modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.popup-create-modal .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.popup-create-modal .field-group:has(textarea), .popup-create-modal .field-group:has(input[type="file"]) { grid-column: span 3; }

@media (max-width: 900px) { .popup-create-modal .form-grid { grid-template-columns: 1fr 1fr; }.popup-create-modal .field-group:has(textarea), .popup-create-modal .field-group:has(input[type="file"]) { grid-column: span 2; } }
@media (max-width: 600px) { .case-inline-create { align-items: stretch; flex-direction: column; }.case-inline-create-actions { flex-direction: column; }.popup-create-modal .form-grid { grid-template-columns: 1fr; }.popup-create-modal .field-group:has(textarea), .popup-create-modal .field-group:has(input[type="file"]) { grid-column: auto; } }
@media (max-width: 600px) { .modal-dialog-scrollable { height: calc(100dvh - 1rem); min-height: calc(100dvh - 1rem); margin: .5rem; }.popup-create-modal .modal-body { padding: 14px; } }

.credential-summary dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0 0; }
.credential-summary dl div { padding: 8px; background: var(--surface-alt); border: 1px solid var(--border); }
.credential-summary dt { color: var(--text-secondary); font-size: 8px; font-weight: 400; }
.credential-summary dd { margin: 4px 0 0; font-size: 10px; font-weight: 700; }
.credential-password { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.credential-secret { min-width: 76px; padding: 4px 7px; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 3px; font-family: inherit; font-size: 9px; text-align: center; user-select: none; }
.credential-secret.is-visible { direction: ltr; color: var(--text-primary); border-color: var(--border-strong); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; user-select: all; }
.credential-reveal { padding: 3px 5px; color: var(--accent-red); background: transparent; border: 0; font-size: 8px; font-weight: 700; cursor: pointer; text-decoration: underline; }
.credential-reveal:disabled { cursor: wait; opacity: .65; }
.credential-password small { color: var(--text-secondary); font-size: 8px; }

/* Collapsible kanban stages */
.kanban-board { min-height: 235px; }
.kanban-column { transition: width .18s ease, min-width .18s ease; }
.kanban-column > header { height: auto; min-height: 48px; padding: 0; }
.kanban-column-toggle { width: 100%; min-height: 47px; display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: 8px; padding: 0 12px; color: var(--text-primary); background: transparent; border: 0; text-align: right; cursor: pointer; }
.kanban-column-toggle:hover { background: var(--surface-alt); }
.kanban-column-toggle:focus-visible { outline: 2px solid var(--accent-red); outline-offset: -2px; }
.kanban-column-title { min-width: 0; display: flex; align-items: center; gap: 7px; }
.kanban-column-title h3 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-column-count { display: inline-flex; align-items: center; gap: 4px; padding: 3px 7px; color: var(--text-secondary); background: var(--bg-secondary); border-radius: 10px; white-space: nowrap; }
.kanban-column header .kanban-column-count b { min-width: 0; padding: 0; color: var(--text-primary); background: transparent; font-size: 10px; }
.kanban-column-count small { font-size: 8px; }
.kanban-column-chevron { color: var(--text-secondary); font-size: 17px; line-height: 1; transition: transform .18s ease; }
.kanban-column:not(.is-collapsed) .kanban-column-chevron { transform: rotate(180deg); }
.kanban-column.is-collapsed { width: 58px; min-width: 58px; height: 218px; overflow: hidden; }
.kanban-column.is-collapsed > header { width: 100%; height: 218px; min-height: 218px; border-bottom: 0; border-radius: 6px; }
.kanban-column.is-collapsed .kanban-column-toggle { height: 100%; min-height: 218px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 12px 7px 9px; text-align: center; }
.kanban-column.is-collapsed .kanban-column-title { min-width: 0; min-height: 0; display: flex; flex: 1 1 auto; flex-direction: column; align-items: center; gap: 9px; }
.kanban-column.is-collapsed .column-dot { width: 7px; height: 7px; flex: 0 0 auto; box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-red) 10%, transparent); }
.kanban-column.is-collapsed .kanban-column-title h3 { max-height: 128px; margin: 0; overflow: hidden; color: var(--text-primary); font-size: 10px; font-weight: 700; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; writing-mode: vertical-rl; transform: rotate(180deg); }
.kanban-column.is-collapsed .kanban-column-count { display: flex; flex: 0 0 auto; flex-direction: column; gap: 0; padding: 4px 5px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 4px; }
.kanban-column.is-collapsed .kanban-column-count small { display: block; font-size: 7px; line-height: 1.4; }
.kanban-column.is-collapsed .kanban-column-chevron { flex: 0 0 auto; font-size: 15px; transform: rotate(-90deg); }
.kanban-column.is-collapsed .kanban-cards { display: none; }

@media (max-width: 800px) { .kanban-column:not(.is-collapsed) { width: 280px; min-width: 280px; }.kanban-column.is-collapsed { width: 52px; min-width: 52px; height: 200px; }.kanban-column.is-collapsed > header, .kanban-column.is-collapsed .kanban-column-toggle { height: 200px; min-height: 200px; }.kanban-column.is-collapsed .kanban-column-title h3 { max-height: 115px; font-size: 9px; }.kanban-column.is-collapsed .kanban-column-count small { display: block; } }