/* ===========================================================================
   Smart Lawyer - Design System (05-UI-UX-DESIGN-SYSTEM.md)
   CSS custom properties drive theming; logical properties handle RTL/LTR.
   No hardcoded colors in components - always reference variables.
   =========================================================================== */

:root {
    --slw-bg: #f0f2f5;
    --slw-surface: #ffffff;
    --slw-surface-2: #f7f9fc;
    --slw-surface-hover: #eef2f8;
    --slw-text-primary: #1a1d29;
    --slw-text-secondary: #6b7280;
    --slw-border: #e5e7eb;
    --slw-primary: #2563eb;
    --slw-primary-hover: #1d4ed8;
    --slw-primary-light: #dbeafe;
    --slw-primary-contrast: #ffffff;
    --slw-success: #059669;
    --slw-danger: #dc2626;
    --slw-warning: #d97706;
    --slw-radius: 12px;
    --slw-radius-sm: 8px;
    --slw-radius-xs: 6px;
    --slw-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
    --slw-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --slw-shadow-lg: 0 10px 40px rgba(0,0,0,0.10);
    --slw-font: "Segoe UI", "Cairo", "Dubai", system-ui, -apple-system, sans-serif;
    --slw-transition: 0.2s ease;
}

[data-theme="dark"] {
    --slw-bg: #0d1117;
    --slw-surface: #161b22;
    --slw-surface-2: #1c2330;
    --slw-surface-hover: #222936;
    --slw-text-primary: #e6edf3;
    --slw-text-secondary: #8b949e;
    --slw-border: #30363d;
    --slw-primary: #3b82f6;
    --slw-primary-hover: #60a5fa;
    --slw-primary-light: rgba(59,130,246,0.15);
    --slw-primary-contrast: #ffffff;
    --slw-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --slw-shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --slw-shadow-lg: 0 10px 40px rgba(0,0,0,0.5);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--slw-bg);
    color: var(--slw-text-primary);
    font-family: var(--slw-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--slw-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Topbar ---------- */
.slw-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 12px;
    padding-inline: 24px;
    background: var(--slw-surface);
    border-block-end: 1px solid var(--slw-border);
}
.slw-topbar-brand { display: flex; align-items: center; gap: 10px; font-weight: 700; }
.slw-logo { width: 32px; height: 32px; }
.slw-brand-text { color: var(--slw-text-primary); }
.slw-topbar-actions { display: flex; align-items: center; gap: 8px; }

/* ---------- Buttons ---------- */
.slw-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding-block: 8px;
    padding-inline: 16px;
    border-radius: var(--slw-radius-sm);
    border: 1px solid transparent;
    background: var(--slw-surface-2);
    color: var(--slw-text-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--slw-transition);
}
.slw-btn:disabled { opacity: .6; cursor: not-allowed; }
.slw-btn-primary { background: var(--slw-primary); color: var(--slw-primary-contrast); border-color: var(--slw-primary); }
.slw-btn-primary:hover:not(:disabled) { background: var(--slw-primary-hover); border-color: var(--slw-primary-hover); }
.slw-btn-ghost { background: transparent; border-color: transparent; color: var(--slw-text-secondary); }
.slw-btn-ghost:hover:not(:disabled) { background: var(--slw-surface-2); color: var(--slw-text-primary); }
.slw-btn-danger { background: var(--slw-danger); color: #fff; border-color: var(--slw-danger); }
.slw-btn-block { width: 100%; }
.slw-btn-loading .slw-btn-spinner { display: inline-block; }
.slw-btn-spinner {
    width: 16px; height: 16px;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: 50%;
    display: none;
    animation: slw-spin .7s linear infinite;
}
@keyframes slw-spin { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.slw-card {
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    box-shadow: var(--slw-shadow);
    transition: box-shadow var(--slw-transition);
}

/* ---------- Auth layout ---------- */
.slw-main { min-height: calc(100% - 57px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.slw-auth-card { width: 100%; max-width: 400px; padding: 32px; }
.slw-auth-title { margin: 0 0 20px; font-size: 22px; text-align: center; }

/* ---------- Fields ---------- */
.slw-field { margin-block-end: 12px; display: flex; flex-direction: column; gap: 4px; }
.slw-field label { font-weight: 600; font-size: 13px; color: var(--slw-text-primary); }
.slw-field input,
.slw-field select,
.slw-field textarea {
    padding-block: 7px; padding-inline: 10px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    font: inherit;
    font-size: 13px;
    transition: border-color var(--slw-transition), box-shadow var(--slw-transition);
}
.slw-field input:focus,
.slw-field select:focus,
.slw-field textarea:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 2px var(--slw-primary-light);
}
.slw-field input::placeholder { color: var(--slw-text-secondary); opacity: 0.6; }
.slw-field-error { color: var(--slw-danger); font-size: 11px; min-height: 13px; }
.slw-field-row { display: flex; align-items: center; justify-content: space-between; margin-block-end: 12px; gap: 12px; flex-wrap: wrap; }
.slw-checkbox { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.slw-link { font-size: 14px; }
.slw-link-block { display: block; text-align: center; margin-block-start: 16px; }

/* ---------- Global inputs (outside .slw-field) ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="search"], input[type="tel"],
input[type="url"], select, textarea {
    padding-block: 7px; padding-inline: 10px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    font: inherit;
    font-size: 13px;
    transition: border-color var(--slw-transition), box-shadow var(--slw-transition);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 3px var(--slw-primary-light);
}
input::placeholder, textarea::placeholder { color: var(--slw-text-secondary); opacity: 0.6; }

/* ---------- Content cards in dashboard ---------- */
.slw-app-content .slw-card:not(.slw-modal-dialog) { max-width: 100% !important; }

/* ---------- Alerts ---------- */
.slw-alert { padding-block: 10px; padding-inline: 12px; border-radius: var(--slw-radius-sm); margin-block-end: 16px; font-size: 14px; }
.slw-alert-error { background: rgba(217, 45, 32, .12); color: var(--slw-danger); border: 1px solid rgba(217, 45, 32, .3); }
.slw-alert-success { background: rgba(31, 157, 85, .12); color: var(--slw-success); border: 1px solid rgba(31, 157, 85, .3); }
.slw-alert-warning { background: rgba(181, 71, 8, .12); color: var(--slw-warning); border: 1px solid rgba(181, 71, 8, .3); }

/* ---------- Toasts ---------- */
.slw-toast-container { position: fixed; inset-block-end: 24px; inset-inline-end: 24px; display: flex; flex-direction: column; gap: 8px; z-index: 2000; }
.slw-toast { padding-block: 12px; padding-inline: 16px; border-radius: var(--slw-radius-sm); background: var(--slw-surface); box-shadow: var(--slw-shadow-lg); border-inline-start: 4px solid var(--slw-primary); }
.slw-toast.success { border-inline-start-color: var(--slw-success); }
.slw-toast.error { border-inline-start-color: var(--slw-danger); }

/* ---------- Dashboard shell ---------- */
.slw-dashboard-shell { max-width: 760px; margin: 40px auto; padding: 28px; }
.slw-dashboard-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-dashboard-head h1 { margin: 0; font-size: 20px; }
.slw-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 0; }
.slw-info-item { background: var(--slw-surface-2); border-radius: var(--slw-radius-sm); padding: 14px; }
.slw-info-item dt { color: var(--slw-text-secondary); font-size: 12px; margin-block-end: 4px; }
.slw-info-item dd { margin: 0; font-weight: 600; }

/* ---------- Dashboard page content ---------- */
.slw-dash-page { max-width: 1200px; margin: 0 auto; }
.slw-dash-welcome { margin-block-end: 32px; }
.slw-dash-welcome h1 { margin: 0 0 4px; font-size: 24px; color: var(--slw-text-primary); }
.slw-dash-subtitle { margin: 0; color: var(--slw-text-secondary); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; }
.slw-dash-last-login { opacity: 0.8; }

.slw-dash-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 20px; margin-block-end: 32px; }
.slw-dash-stat-card {
    display: flex; flex-direction: column; gap: 8px;
    padding: 24px 20px;
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.15s;
}
.slw-dash-stat-card:hover { box-shadow: var(--slw-shadow-lg); transform: translateY(-2px); text-decoration: none; }
.slw-dash-stat-icon { font-size: 28px; }
.slw-dash-stat-label { font-size: 13px; color: var(--slw-text-secondary); font-weight: 600; }
.slw-dash-stat-value { font-size: 15px; color: var(--slw-text-primary); font-weight: 700; }

.slw-dash-quick-actions { margin-block-end: 32px; }
.slw-dash-quick-actions h2 { font-size: 18px; margin: 0 0 16px; color: var(--slw-text-primary); }
.slw-dash-quick-grid { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- Dashboard Layout (sidebar + topbar + content) ---------- */
.slw-app { display: flex; min-height: 100vh; }

.slw-sidebar {
    width: 260px;
    flex-shrink: 0;
    background: var(--slw-surface);
    border-inline-end: 1px solid var(--slw-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.25s ease;
}
.slw-sidebar-brand {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 20px;
    border-block-end: 1px solid var(--slw-border);
    font-weight: 700;
}
.slw-sidebar-logo { width: 32px; height: 32px; }
.slw-sidebar-brand-text { color: var(--slw-text-primary); font-size: 14px; }
.slw-sidebar-close { display: none; position: absolute; top: 12px; inset-inline-end: 12px; background: none; border: none; font-size: 24px; cursor: pointer; color: var(--slw-text-secondary); }

.slw-sidebar-nav { flex: 1; padding: 8px 8px; overflow-y: auto; }

.slw-sidebar-link-top {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    border-radius: var(--slw-radius-sm);
    color: var(--slw-text-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    margin-block-end: 4px;
    transition: background 0.15s;
}
.slw-sidebar-link-top:hover { background: var(--slw-surface-2); text-decoration: none; }
.slw-sidebar-link-top.active { background: var(--slw-primary); color: var(--slw-primary-contrast); }

.slw-nav-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; line-height: 1; }

.slw-nav-group { margin-block-end: 2px; }
.slw-nav-group-header {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 12px;
    border: none; background: none; cursor: pointer;
    border-radius: var(--slw-radius-sm);
    color: var(--slw-text-primary);
    font-size: 13px; font-weight: 600;
    transition: background 0.15s;
}
.slw-nav-group-header:hover { background: var(--slw-surface-2); }
.slw-nav-group-title { flex: 1; text-align: start; }
.slw-nav-chevron { font-size: 14px; transition: transform 0.2s; color: var(--slw-text-secondary); }
.slw-nav-group.open .slw-nav-chevron { transform: rotate(180deg); }

.slw-nav-group-items {
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease;
}
.slw-nav-group.open .slw-nav-group-items { max-height: 2000px; }

/* ---------- Sub-groups (nested nav) ---------- */
.slw-nav-subgroup { margin-block: 2px; }
.slw-nav-sub-header {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 7px 12px 7px 32px;
    border: none; background: none; cursor: pointer;
    border-radius: var(--slw-radius-xs);
    color: var(--slw-text-secondary);
    font-size: 12px; font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background 0.15s, color 0.15s;
}
.slw-nav-sub-header:hover { background: var(--slw-surface-2); color: var(--slw-text-primary); }
.slw-nav-sub-title { flex: 1; text-align: start; }
.slw-nav-subgroup .slw-nav-chevron { font-size: 11px; transition: transform 0.2s; }
.slw-nav-subgroup.open .slw-nav-chevron { transform: rotate(180deg); }
.slw-nav-sub-items {
    max-height: 0; overflow: hidden;
    transition: max-height 0.25s ease;
}
.slw-nav-subgroup.open .slw-nav-sub-items { max-height: 500px; }
.slw-nav-sub-items .slw-sidebar-link { padding-inline-start: 52px; font-size: 13px; }

.slw-sidebar-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px 8px 42px;
    border-radius: var(--slw-radius-sm);
    color: var(--slw-text-primary);
    text-decoration: none;
    font-size: 13px;
    transition: background 0.15s, color 0.15s;
}
.slw-sidebar-link:hover { background: var(--slw-surface-2); text-decoration: none; }
.slw-sidebar-link.active { background: var(--slw-primary); color: var(--slw-primary-contrast); font-weight: 600; }

.slw-sidebar-footer { padding: 12px 16px; border-block-start: 1px solid var(--slw-border); }
.slw-sidebar-logout { width: 100%; justify-content: center; }

.slw-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 99; }
.slw-sidebar-overlay.show { display: block; }

.slw-app-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; overflow: visible; }

.slw-appbar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 24px;
    background: var(--slw-surface);
    border-block-end: 1px solid var(--slw-border);
    position: sticky; top: 0; z-index: 50;
}
.slw-sidebar-toggle { display: flex; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; }
.slw-sidebar-toggle span { width: 22px; height: 2px; background: var(--slw-text-primary); border-radius: 2px; }
.slw-appbar-info { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.slw-appbar-tenant { font-weight: 700; font-size: 15px; color: var(--slw-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slw-appbar-user { font-size: 13px; color: var(--slw-text-secondary); }
.slw-appbar-actions { display: flex; align-items: center; gap: 8px; }

.slw-app-content { flex: none; padding: 24px; overflow-x: clip; overflow-y: visible; width: 100%; min-width: 0; }

.slw-calendar-card { width: 100%; max-width: 100%; overflow: hidden; }
.slw-calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px; border-block-end: 1px solid var(--slw-border); }
.slw-calendar-head h1 { margin: 0; font-size: 22px; }
.slw-calendar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slw-calendar-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; padding: 20px 24px; }
.slw-calendar-kpis .slw-kpi { min-width: 0; padding: 14px 10px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface-2); text-align: center; }
.slw-kpi-value { display: block; font-size: 20px; font-weight: 700; color: var(--slw-primary); }
.slw-kpi-label { display: block; margin-block-start: 4px; color: var(--slw-text-secondary); font-size: 12px; }
.slw-calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px 20px; flex-wrap: wrap; }
.slw-calendar-view-buttons { display: flex; gap: 6px; flex-wrap: wrap; }
.slw-cal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 24px 16px; }
.slw-cal-title { font-size: 18px; font-weight: 700; }
.slw-cal-grid { display: grid; gap: 1px; margin: 0 24px 24px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); overflow: hidden; background: var(--slw-border); }
.slw-cal-month { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.slw-cal-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.slw-cal-dow { padding: 10px 8px; background: var(--slw-surface-2); color: var(--slw-text-secondary); font-size: 12px; font-weight: 700; text-align: center; }
.slw-cal-cell { min-height: 104px; padding: 8px; background: var(--slw-surface); overflow: hidden; }
.slw-cal-empty { background: var(--slw-surface-2); }
.slw-cal-day { margin-block-end: 6px; color: var(--slw-text-secondary); font-size: 12px; font-weight: 700; }
.slw-cal-today { box-shadow: inset 0 0 0 2px var(--slw-primary); }
.slw-cal-event { display: flex; align-items: center; gap: 5px; margin-block-start: 4px; padding: 4px 6px; border-inline-start: 3px solid var(--slw-primary); border-radius: 4px; background: var(--slw-surface-2); font-size: 11px; line-height: 1.3; }
.slw-cal-event-dot { width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; }
.slw-cal-event-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slw-cal-more { margin-block-start: 4px; color: var(--slw-primary); font-size: 11px; font-weight: 700; }
.slw-cal-week-cell { min-height: 180px; }
.slw-cal-day-header { padding-block-end: 8px; border-block-end: 1px solid var(--slw-border); font-weight: 700; }
.slw-cal-event-week { display: block; }
.slw-cal-event-time { display: block; color: var(--slw-text-secondary); font-size: 10px; }
.slw-calendar-list { margin: 0 24px 24px; overflow-x: auto; }

@media (max-width: 900px) {
    .slw-calendar-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
    .slw-calendar-head { align-items: stretch; flex-direction: column; padding: 18px; }
    .slw-calendar-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); padding-inline: 18px; }
    .slw-calendar-toolbar { align-items: stretch; flex-direction: column; padding-inline: 18px; }
    .slw-cal-header { padding-inline: 18px; }
    .slw-cal-grid { margin-inline: 18px; }
    .slw-cal-cell { min-height: 78px; padding: 5px; }
    .slw-cal-event { font-size: 10px; }
    .slw-calendar-list { margin-inline: 18px; }
}

/* Responsive: collapse sidebar on mobile */
@media (max-width: 768px) {
    .slw-sidebar {
        position: fixed; top: 0; inset-inline-start: 0;
        transform: translateX(-100%);
    }
    [dir="rtl"] .slw-sidebar { transform: translateX(100%); }
    .slw-sidebar.open { transform: translateX(0); }
    .slw-sidebar-close { display: block; }
    .slw-sidebar-toggle { display: flex; }
    .slw-app-content { padding: 16px; }
}

/* ---------- Theme toggle labels ---------- */
.slw-theme-toggle .theme-dark-label { display: none; }
[data-theme="dark"] .slw-theme-toggle .theme-light-label { display: none; }
[data-theme="dark"] .slw-theme-toggle .theme-dark-label { display: inline; }

/* ---------- RTL: mirror directional icons ---------- */
[dir="rtl"] .rtl-flip { transform: scaleX(-1); }

@media (max-width: 480px) {
    .slw-auth-card { padding: 22px; }
    .slw-topbar { padding-inline: 14px; }
}

/* ---------- Onboarding wizard ---------- */
.slw-onboarding-wizard { width: 100%; max-width: 560px; margin: 24px auto; padding: 32px; }
.slw-wizard-steps { display: flex; gap: 4px; margin-block-end: 24px; }
.slw-wizard-step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border-block-end: 3px solid var(--slw-border); opacity: .5; transition: opacity .2s, border-color .2s; }
.slw-wizard-step.active { opacity: 1; border-block-end-color: var(--slw-primary); }
.slw-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--slw-surface-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.slw-wizard-step.active .slw-step-num { background: var(--slw-primary); color: var(--slw-primary-contrast); }
.slw-step-label { font-size: 12px; text-align: center; }
.slw-wizard-panel { display: none; }
.slw-wizard-panel.active { display: block; }
.slw-wizard-actions { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 20px; }
.slw-input-group { display: flex; align-items: center; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); overflow: hidden; }
.slw-input-group input { border: none; border-radius: 0; flex: 1; }
.slw-input-suffix { padding-inline: 10px; color: var(--slw-text-secondary); font-size: 13px; white-space: nowrap; background: var(--slw-surface-2); height: 100%; display: flex; align-items: center; }
.slw-field-hint { font-size: 12px; min-height: 14px; }
.slw-hint-ok { color: var(--slw-success); }
.slw-hint-err { color: var(--slw-danger); }
.slw-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; }
.slw-review-item dt { color: var(--slw-text-secondary); font-size: 12px; }
.slw-review-item dd { margin: 0 0 8px; font-weight: 600; }
.slw-alert-info { background: rgba(20, 93, 160, .12); color: var(--slw-primary); border: 1px solid rgba(20, 93, 160, .3); }

/* ---------- Company Profile ---------- */
.slw-profile-card { max-width: 680px; margin: 24px auto; padding: 32px; }
.slw-profile-uploads { display: flex; gap: 24px; margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--slw-border); flex-wrap: wrap; }
.slw-upload-section { flex: 1; min-width: 200px; }
.slw-upload-section h3 { font-size: 16px; margin-block-end: 12px; }
.slw-logo-preview { max-width: 100%; max-height: 120px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); margin-block-end: 8px; }
.slw-logo-placeholder { width: 120px; height: 80px; border: 2px dashed var(--slw-border); border-radius: var(--slw-radius-sm); display: flex; align-items: center; justify-content: center; color: var(--slw-text-secondary); font-size: 12px; margin-block-end: 8px; }
.slw-profile-subscription { margin-block-start: 32px; padding-block-start: 24px; border-block-start: 1px solid var(--slw-border); }
.slw-profile-subscription h3 { font-size: 16px; margin-block-end: 12px; }

@media (max-width: 600px) {
    .slw-review-grid { grid-template-columns: 1fr; }
    .slw-profile-uploads { flex-direction: column; }
}

/* ---------- Branches Management (SCR-ADM-003) ---------- */
.slw-branches-card { max-width: 960px; margin: 24px auto; padding: 28px; }
.slw-branches-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-branches-head h1 { margin: 0; font-size: 20px; }
.slw-branches-toolbar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-block-end: 16px; }
.slw-branches-search { padding-block: 8px; padding-inline: 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface); color: var(--slw-text-primary); font: inherit; min-width: 220px; }
.slw-branches-search:focus { outline: 2px solid var(--slw-primary); outline-offset: -1px; border-color: var(--slw-primary); }

/* ---------- Table (shared component, reused by future list screens) ---------- */
.slw-table-wrap { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; border-radius: var(--slw-radius-sm); border: 1px solid var(--slw-border); }
.slw-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; }
.slw-table thead th { text-align: start; padding-block: 12px; padding-inline: 14px; background: var(--slw-surface-2); color: var(--slw-text-secondary); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; border-block-end: 1px solid var(--slw-border); white-space: nowrap; }
.slw-table tbody td { padding-block: 12px; padding-inline: 14px; border-block-end: 1px solid var(--slw-border); vertical-align: middle; }
.slw-table tbody tr { transition: background var(--slw-transition); }
.slw-table tbody tr:hover { background: var(--slw-surface-hover); }
.slw-table tbody tr:last-child td { border-block-end: none; }
.slw-table-skeleton td { text-align: center; color: var(--slw-text-secondary); padding-block: 24px; }
.slw-table-empty { text-align: center; color: var(--slw-text-secondary); padding-block: 32px; }

/* ---------- Badges ---------- */
.slw-badge { display: inline-flex; align-items: center; padding-block: 3px; padding-inline: 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.slw-badge-primary { background: rgba(20, 93, 160, .12); color: var(--slw-primary); }
.slw-badge-success { background: rgba(31, 157, 85, .12); color: var(--slw-success); }
.slw-badge-secondary { background: var(--slw-surface-2); color: var(--slw-text-secondary); }
[data-theme="dark"] .slw-badge-primary { background: rgba(77, 163, 255, .15); }
[data-theme="dark"] .slw-badge-secondary { background: var(--slw-surface-2); }

/* ---------- Small button variant ---------- */
.slw-btn-sm { padding-block: 5px; padding-inline: 10px; font-size: 13px; }
.slw-btn-danger-text { color: var(--slw-danger); }
.slw-btn-danger-text:hover:not(:disabled) { background: rgba(217, 45, 32, .1); color: var(--slw-danger); }

/* ---------- Modal (shared component) ---------- */
.slw-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.slw-modal[hidden] { display: none; }
.slw-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .45); }
.slw-modal-dialog { position: relative; width: min(680px, calc(100vw - 32px)); max-width: 680px; max-height: min(86vh, 760px); overflow-y: auto; padding: 24px; z-index: 1; border-radius: var(--slw-radius); box-shadow: var(--slw-shadow-lg); }
.slw-modal-dialog.slw-modal-lg { width: min(900px, calc(100vw - 32px)); max-width: 900px; }
.slw-modal-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 18px; }
.slw-modal-head h2 { margin: 0; font-size: 18px; }
.slw-modal-dialog form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 2px; }
.slw-modal-dialog form > .slw-field { min-width: 0; }
.slw-modal-dialog form > .slw-form-row, .slw-modal-dialog form > .slw-alert, .slw-modal-dialog form > .slw-modal-actions, .slw-modal-dialog form > footer { grid-column: 1 / -1; }
.slw-modal-dialog form > input[type="hidden"] { display: none; }
.slw-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: 14px; }
.slw-field-checkbox { flex-direction: row; align-items: center; }

@media (max-width: 600px) {
    .slw-branches-card { padding: 18px; }
    .slw-branches-search { min-width: 100%; }
    .slw-modal-dialog { margin: 16px; width: calc(100vw - 32px); max-width: none; }
    .slw-modal-dialog.slw-modal-lg { width: calc(100vw - 32px); }
    .slw-modal-dialog form { grid-template-columns: 1fr; }
    .slw-modal-dialog form > .slw-form-row { grid-column: auto; }
}

/* ---------- Users Management (SCR-ADM-004) ---------- */
.slw-users-card { max-width: 960px; margin: 24px auto; padding: 28px; }
.slw-users-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-users-head h1 { margin: 0; font-size: 20px; }
.slw-users-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
.slw-users-search { padding-block: 8px; padding-inline: 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface); color: var(--slw-text-primary); font: inherit; min-width: 200px; }
.slw-users-search:focus { outline: 2px solid var(--slw-primary); outline-offset: -1px; border-color: var(--slw-primary); }
.slw-users-filter { padding-block: 8px; padding-inline: 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface); color: var(--slw-text-primary); font: inherit; }

/* ---------- Pagination ---------- */
.slw-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-block-start: 16px; }
.slw-pagination span { font-size: 14px; color: var(--slw-text-secondary); }

/* ---------- Checkbox group (roles multi-select) ---------- */
.slw-checkbox-group { display: flex; flex-wrap: wrap; gap: 12px; }
.slw-checkbox-group .slw-checkbox { font-size: 14px; }

@media (max-width: 600px) {
    .slw-users-card { padding: 18px; }
    .slw-users-search { min-width: 100%; }
    .slw-users-filter { flex: 1; min-width: 120px; }
}

/* ---------- Roles & Permissions (SCR-ADM-005) ---------- */
.slw-roles-card { max-width: 1100px; margin: 24px auto; padding: 28px; }
.slw-roles-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-roles-head h1 { margin: 0; font-size: 20px; }
.slw-roles-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.slw-roles-list { border: 1px solid var(--slw-border); border-radius: var(--slw-radius); padding: 12px; max-height: 600px; overflow-y: auto; }
.slw-roles-ul { list-style: none; padding: 0; margin: 0; }
.slw-roles-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--slw-radius-sm); cursor: pointer; transition: background 0.15s; }
.slw-roles-item:hover { background: var(--slw-surface-hover); }
.slw-roles-item-active { background: var(--slw-primary-light); font-weight: 600; }
.slw-roles-item-name { flex: 1; }
.slw-roles-item-count { font-size: 12px; color: var(--slw-text-secondary); }
.slw-badge-sm { font-size: 10px; padding: 2px 6px; }
.slw-roles-matrix { min-height: 400px; }
.slw-roles-empty-hint { color: var(--slw-text-secondary); text-align: center; padding: 60px 20px; }
.slw-roles-matrix-head { display: flex; align-items: center; gap: 12px; margin-block-end: 16px; }
.slw-roles-matrix-head h2 { margin: 0; font-size: 18px; }
.slw-roles-dirty { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--slw-warning-light); border-radius: var(--slw-radius-sm); margin-block-end: 16px; font-size: 14px; }
.slw-roles-dirty[hidden] { display: none; }
.slw-perm-group { margin-block-end: 24px; }
.slw-perm-group-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--slw-text-secondary); margin-block-end: 8px; border-block-end: 1px solid var(--slw-border); padding-block-end: 4px; }
.slw-perm-rows { display: flex; flex-direction: column; gap: 4px; }
.slw-perm-row { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--slw-radius-sm); }
.slw-perm-row:hover { background: var(--slw-surface-hover); }
.slw-perm-label { flex: 1; font-size: 14px; }
.slw-perm-key { font-size: 11px; color: var(--slw-text-secondary); font-family: monospace; }
.slw-roles-matrix-actions { display: flex; align-items: center; gap: 12px; margin-block-start: 24px; }

/* Toggle switch */
.slw-switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.slw-switch input { opacity: 0; width: 0; height: 0; }
.slw-switch-slider { position: absolute; cursor: pointer; inset: 0; background: var(--slw-border); border-radius: 22px; transition: 0.3s; }
.slw-switch-slider::before { position: absolute; content: ""; height: 16px; width: 16px; left: 3px; bottom: 3px; background: white; border-radius: 50%; transition: 0.3s; }
.slw-switch input:checked + .slw-switch-slider { background: var(--slw-primary); }
.slw-switch input:checked + .slw-switch-slider::before { transform: translateX(18px); }

@media (max-width: 768px) {
    .slw-roles-layout { grid-template-columns: 1fr; }
    .slw-roles-list { max-height: 300px; }
}

/* ---------- System Lookups (SCR-ADM-006) ---------- */
.slw-lookups-card { max-width: 1100px; margin: 24px auto; padding: 28px; }
.slw-lookups-head { margin-block-end: 20px; }
.slw-lookups-head h1 { font-size: 20px; }
.slw-lookups-layout { display: grid; grid-template-columns: 260px 1fr; gap: 24px; }
.slw-lookups-categories { border: 1px solid var(--slw-border); border-radius: var(--slw-radius); padding: 12px; max-height: 600px; overflow-y: auto; }
.slw-lookups-ul { list-style: none; padding: 0; margin: 0; }
.slw-lookups-cat-item { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: var(--slw-radius-sm); cursor: pointer; transition: background 0.15s; }
.slw-lookups-cat-item:hover { background: var(--slw-surface-hover); }
.slw-lookups-cat-item-active { background: var(--slw-primary-light); font-weight: 600; }
.slw-lookups-items { min-height: 400px; }
.slw-lookups-empty-hint { color: var(--slw-text-secondary); text-align: center; padding: 60px 20px; }
.slw-lookups-items-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-block-end: 16px; }
.slw-lookups-items-head h2 { margin: 0; font-size: 18px; }
.slw-transition-targets { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 768px) {
    .slw-lookups-layout { grid-template-columns: 1fr; }
}

/* ---------- Clients Management (SCR-LEG-001) ---------- */
[hidden] { display: none !important; }
.slw-clients-card { max-width: 1100px; margin: 24px auto; padding: 28px; }
.slw-clients-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-clients-head h1 { font-size: 20px; }
.slw-clients-toolbar { display: flex; gap: 12px; margin-block-end: 20px; flex-wrap: wrap; }
.slw-clients-search { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.slw-clients-filter { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.slw-modal-lg { max-width: 560px; }
.slw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.slw-radio-group { display: flex; gap: 16px; }
.slw-radio { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.slw-contact-row { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr auto; gap: 8px; margin-block-end: 8px; align-items: center; }
.slw-contact-row input { padding: 6px 10px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }

@media (max-width: 600px) {
    .slw-form-row { grid-template-columns: 1fr; }
    .slw-contact-row { grid-template-columns: 1fr; }
}

/* ---------- Cases Management (SCR-LEG-002) ---------- */
.slw-cases-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-cases-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-cases-head h1 { font-size: 20px; }
.slw-cases-toolbar { display: flex; gap: 12px; margin-block-end: 20px; flex-wrap: wrap; }
.slw-cases-search { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
select[multiple] { min-height: 80px; }

/* ---------- Sessions Calendar (SCR-LEG-003) ---------- */
.slw-sessions-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-sessions-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-block-end: 20px; }
.slw-sessions-head h1 { font-size: 20px; }
.slw-sessions-toolbar { display: flex; gap: 12px; margin-block-end: 20px; flex-wrap: wrap; }
.slw-sessions-toolbar select { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.slw-badge-scheduled { background: var(--slw-info-bg, #e3f2fd); color: var(--slw-info-text, #1565c0); }
.slw-badge-completed { background: var(--slw-success-bg, #e8f5e9); color: var(--slw-success-text, #2e7d32); }
.slw-badge-postponed { background: var(--slw-warning-bg, #fff3e0); color: var(--slw-warning-text, #ef6c00); }
.slw-badge-cancelled { background: var(--slw-danger-bg, #ffebee); color: var(--slw-danger-text, #c62828); }

/* ---------- Courts & Opponents (SCR-LEG-004) ---------- */
.slw-courts-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-courts-head { margin-block-end: 20px; }
.slw-courts-head h1 { font-size: 20px; }
.slw-courts-head .slw-muted { color: var(--slw-text-muted, #888); margin: 0 8px; }
.slw-courts-toolbar { display: flex; gap: 12px; margin-block-end: 20px; flex-wrap: wrap; }
.slw-courts-toolbar input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }

/* ---------- Chart of Accounts (SCR-FIN-001) ---------- */
.slw-accounts-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-accounts-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-accounts-head h1 { font-size: 20px; }
.slw-accounts-toolbar { display: flex; gap: 12px; margin-block-end: 20px; }
.slw-accounts-toolbar input[type="search"] { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.slw-tree-table td:first-child { white-space: nowrap; }

/* ---------- Journal Entries (SCR-FIN-002) ---------- */
.slw-journal-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-journal-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-journal-head h1 { font-size: 20px; }
.slw-journal-toolbar { display: flex; gap: 12px; margin-block-end: 20px; flex-wrap: wrap; }
.slw-journal-toolbar input, .slw-journal-toolbar select { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.slw-journal-lines { max-height: none; overflow: visible; margin-block-end: 16px; }
.slw-journal-entry-dialog .slw-lines-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 13px; }
.slw-journal-entry-dialog .slw-lines-table th, .slw-journal-entry-dialog .slw-lines-table td { padding: 10px 12px; vertical-align: middle; }
.slw-journal-entry-dialog .slw-lines-table th:nth-child(1), .slw-journal-entry-dialog .slw-lines-table td:nth-child(1) { width: 58%; }
.slw-journal-entry-dialog .slw-lines-table th:nth-child(2), .slw-journal-entry-dialog .slw-lines-table td:nth-child(2), .slw-journal-entry-dialog .slw-lines-table th:nth-child(3), .slw-journal-entry-dialog .slw-lines-table td:nth-child(3) { width: 16%; }
.slw-journal-entry-dialog .slw-lines-table th:nth-child(4), .slw-journal-entry-dialog .slw-lines-table td:nth-child(4) { width: 10%; text-align: center; }
.slw-journal-entry-dialog .slw-lines-table input[type="number"], .slw-journal-entry-dialog .slw-lines-table select { width: 100%; min-width: 0; }
.slw-journal-entry-dialog { width: min(1080px, calc(100vw - 48px)); max-width: 1080px; max-height: calc(100vh - 48px); padding: 28px; }
.slw-journal-entry-dialog > form { display: block; }
.slw-journal-master, .slw-journal-detail { border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface); padding: 18px; }
.slw-journal-master { margin-block-end: 18px; background: var(--slw-surface-2); }
.slw-journal-master h3, .slw-journal-detail h3 { margin: 0; font-size: 16px; }
.slw-journal-master > h3 { margin-block-end: 14px; }
.slw-journal-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; color: var(--slw-text-secondary); }
.slw-journal-detail-head span { font-size: 12px; }
.slw-journal-detail #btnAddLine { margin-block-start: 4px; }
.slw-journal-entry-dialog .slw-modal-actions { padding-block-start: 18px; border-block-start: 1px solid var(--slw-border); }
.slw-journal-entry-dialog .slw-badge { white-space: nowrap; }
@media (max-width: 700px) {
    .slw-journal-entry-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 16px; }
    .slw-journal-master .slw-form-row { grid-template-columns: 1fr; }
    .slw-journal-entry-dialog .slw-lines-table { font-size: 12px; }
    .slw-journal-entry-dialog .slw-lines-table th, .slw-journal-entry-dialog .slw-lines-table td { padding: 8px 6px; }
    .slw-journal-entry-dialog .slw-lines-table th:nth-child(1), .slw-journal-entry-dialog .slw-lines-table td:nth-child(1) { width: 48%; }
    .slw-journal-entry-dialog .slw-lines-table th:nth-child(2), .slw-journal-entry-dialog .slw-lines-table td:nth-child(2), .slw-journal-entry-dialog .slw-lines-table th:nth-child(3), .slw-journal-entry-dialog .slw-lines-table td:nth-child(3) { width: 20%; }
    .slw-journal-entry-dialog .slw-lines-table th:nth-child(4), .slw-journal-entry-dialog .slw-lines-table td:nth-child(4) { width: 12%; }
}

/* ---------- Invoices (SCR-FIN-003) ---------- */
.slw-invoices-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-invoices-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-invoices-head h1 { font-size: 20px; }
.slw-invoices-toolbar { display: flex; gap: 12px; margin-block-end: 20px; flex-wrap: wrap; }
.slw-invoices-toolbar input, .slw-invoices-toolbar select { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.slw-invoice-lines { max-height: none; overflow: visible; margin-block-end: 14px; }
.slw-modal-dialog.slw-invoice-dialog { width: min(1120px, calc(100vw - 48px)); max-width: 1120px; max-height: calc(100vh - 48px); padding: 28px; }
.slw-modal-dialog.slw-invoice-dialog > form { display: block; }
.slw-invoice-master, .slw-invoice-detail { border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); padding: 18px; }
.slw-invoice-master { margin-block-end: 18px; background: var(--slw-surface-2); }
.slw-invoice-master h3, .slw-invoice-detail h3 { margin: 0; font-size: 16px; }
.slw-invoice-master > h3 { margin-block-end: 14px; }
.slw-invoice-detail { margin-block-end: 16px; }
.slw-invoice-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 12px; color: var(--slw-text-secondary); }
.slw-invoice-detail-head span { font-size: 12px; }
.slw-invoice-detail #btnAddInvoiceLine { margin-block-start: 4px; }
.slw-invoice-dialog .slw-lines-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 13px; }
.slw-invoice-dialog .slw-lines-table th, .slw-invoice-dialog .slw-lines-table td { padding: 9px 10px; vertical-align: middle; }
.slw-invoice-dialog .slw-lines-table th:nth-child(1), .slw-invoice-dialog .slw-lines-table td:nth-child(1) { width: 38%; }
.slw-invoice-dialog .slw-lines-table th:nth-child(2), .slw-invoice-dialog .slw-lines-table td:nth-child(2) { width: 12%; }
.slw-invoice-dialog .slw-lines-table th:nth-child(3), .slw-invoice-dialog .slw-lines-table td:nth-child(3) { width: 16%; }
.slw-invoice-dialog .slw-lines-table th:nth-child(4), .slw-invoice-dialog .slw-lines-table td:nth-child(4) { width: 14%; }
.slw-invoice-dialog .slw-lines-table th:nth-child(5), .slw-invoice-dialog .slw-lines-table td:nth-child(5) { width: 14%; }
.slw-invoice-dialog .slw-lines-table th:nth-child(6), .slw-invoice-dialog .slw-lines-table td:nth-child(6) { width: 6%; text-align: center; }
.slw-invoice-dialog .slw-lines-table input, .slw-invoice-dialog .slw-lines-table select { width: 100%; min-width: 0; }
.slw-invoice-dialog .slw-lines-table tfoot td { background: var(--slw-surface-2); font-weight: 600; }
.slw-invoice-notes { margin-block-end: 16px; }
.slw-invoice-dialog .slw-modal-actions { padding-block-start: 18px; border-block-start: 1px solid var(--slw-border); }
@media (max-width: 700px) {
    .slw-invoice-dialog { width: calc(100vw - 24px); max-height: calc(100vh - 24px); padding: 16px; }
    .slw-invoice-master .slw-form-row { grid-template-columns: 1fr; }
    .slw-invoice-dialog .slw-lines-table { font-size: 12px; }
    .slw-invoice-dialog .slw-lines-table th, .slw-invoice-dialog .slw-lines-table td { padding: 7px 5px; }
}
.slw-btn-success { background: var(--slw-success, #28a745); color: white; }

/* ---------- Receipts (SCR-FIN-004) ---------- */
.slw-receipts-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-receipts-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-receipts-head h1 { font-size: 20px; }
.slw-receipts-toolbar { display: flex; gap: 12px; margin-block-end: 20px; }
.slw-receipts-toolbar select { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }
.alloc-amount { width: 120px; }

/* ---------- Payment Vouchers (SCR-FIN-005) ---------- */
.slw-vouchers-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-vouchers-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-vouchers-head h1 { font-size: 20px; }
.slw-vouchers-toolbar { display: flex; gap: 12px; margin-block-end: 20px; }
.slw-vouchers-toolbar select { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }

/* ---------- Case Expenses (SCR-FIN-006) ---------- */
.slw-case-expenses-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-case-expenses-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-case-expenses-head h1 { font-size: 20px; }
.slw-case-expenses-toolbar { display: flex; gap: 12px; margin-block-end: 20px; }
.slw-case-expenses-toolbar select { padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); }

/* ---------- Client Statement (SCR-FIN-007) ---------- */
.slw-statement-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-statement-head { margin-block-end: 20px; }
.slw-statement-head h1 { font-size: 20px; }
.slw-statement-toolbar { display: flex; gap: 12px; align-items: flex-end; margin-block-end: 20px; flex-wrap: wrap; }
.slw-statement-summary { display: flex; gap: 40px; margin-block-end: 24px; padding: 20px; background: var(--slw-surface-2, #f5f5f5); border-radius: var(--slw-radius-sm); }
.slw-statement-balance, .slw-statement-credit { display: flex; flex-direction: column; }
.slw-statement-label { font-size: 12px; color: var(--slw-text-muted, #666); }
.slw-statement-amount { font-size: 24px; font-weight: 600; }

/* ---------- Archive Folders (SCR-ARC-001) ---------- */
.slw-folders-card { max-width: 1400px; margin: 24px auto; padding: 28px; }
.slw-folders-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 20px; }
.slw-folders-head h1 { font-size: 20px; }
.slw-folders-layout { display: flex; gap: 16px; min-height: 500px; }
.slw-folders-tree { width: 300px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); padding: 12px; overflow-y: auto; max-height: 600px; }
.slw-folders-explorer { flex: 1; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); padding: 16px; }
.slw-folders-empty { color: var(--slw-text-muted, #666); text-align: center; padding: 40px; }
.slw-folders-breadcrumb { font-weight: 600; margin-block-end: 16px; padding-block-end: 8px; border-block-end: 1px solid var(--slw-border); }
.slw-tree-list { list-style: none; padding: 0; margin: 0; }
.slw-tree-list .slw-tree-list { padding-inline-start: 20px; }
.slw-tree-node { padding: 4px 0; display: flex; align-items: center; gap: 4px; }
.slw-tree-toggle { cursor: pointer; width: 16px; font-size: 10px; color: var(--slw-text-muted, #666); }
.slw-tree-label { cursor: pointer; flex: 1; padding: 2px 6px; border-radius: 4px; }
.slw-tree-label:hover { background: var(--slw-surface-2, #f0f0f0); }
.slw-tree-selected { background: var(--slw-primary, #007bff); color: white; }
.slw-tree-actions { display: none; gap: 2px; }
.slw-tree-node:hover .slw-tree-actions { display: flex; }
.slw-tree-loading, .slw-tree-empty, .slw-tree-error { color: var(--slw-text-muted, #666); padding: 8px; font-size: 13px; }

/* ---------- File Explorer (SCR-ARC-002) ---------- */
.slw-files-panel { max-width: 1400px; margin: 16px auto; padding: 16px 28px; }
.slw-files-head { display: flex; align-items: center; justify-content: space-between; margin-block-end: 16px; }
.slw-files-breadcrumb { font-weight: 600; }
.slw-files-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.slw-file-card { position: relative; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); padding: 12px; text-align: center; cursor: pointer; transition: box-shadow 0.15s; }
.slw-file-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.slw-file-thumb { width: 80px; height: 80px; object-fit: cover; border-radius: 4px; }
.slw-file-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: var(--slw-surface-2, #f0f0f0); border-radius: 4px; font-size: 12px; font-weight: 700; color: var(--slw-text-muted, #666); }
.slw-file-name { margin-block-start: 8px; font-size: 13px; word-break: break-all; }
.slw-file-meta { font-size: 11px; color: var(--slw-text-muted, #666); }
.slw-file-menu-btn { position: absolute; inset-block-start: 4px; inset-inline-end: 4px; background: none; border: none; cursor: pointer; font-size: 18px; color: var(--slw-text-muted, #666); }
.slw-files-loading, .slw-files-error, .slw-files-empty { grid-column: 1 / -1; text-align: center; padding: 32px; color: var(--slw-text-muted, #666); }
.slw-context-menu { position: fixed; z-index: 9999; background: var(--slw-surface, #fff); border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); box-shadow: 0 4px 12px rgba(0,0,0,0.15); min-width: 180px; }
.slw-context-menu ul { list-style: none; padding: 4px 0; margin: 0; }
.slw-context-menu li { padding: 8px 16px; cursor: pointer; font-size: 14px; }
.slw-context-menu li:hover { background: var(--slw-surface-2, #f0f0f0); }
.slw-context-menu li.slw-disabled { color: var(--slw-text-muted, #999); cursor: not-allowed; }
.slw-context-menu li.slw-disabled:hover { background: transparent; }
.slw-context-menu li.slw-danger { color: var(--slw-danger, #dc3545); }
.slw-rename-row { display: flex; align-items: center; gap: 4px; }
.slw-rename-ext { font-weight: 600; color: var(--slw-text-muted, #666); }

/* ---------- Trust Accounts (SCR-FIN-008) ---------- */
.slw-trust-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-trust-head { margin-block-end: 20px; }
.slw-trust-head h1 { font-size: 20px; }
.slw-trust-client-field { margin-block-end: 20px; max-width: 400px; }
.slw-trust-balance { display: flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--slw-surface-2, #f0f7ff); border: 1px solid var(--slw-primary, #007bff); border-radius: var(--slw-radius-sm); margin-block-end: 20px; }
.slw-trust-balance-label { font-weight: 600; font-size: 14px; }
.slw-trust-balance-value { font-size: 28px; font-weight: 700; color: var(--slw-primary, #007bff); }
.slw-trust-actions { display: flex; gap: 12px; margin-block-end: 20px; }
.slw-trust-ledger { margin-block-start: 16px; }
.slw-trust-table { width: 100%; }
.slw-trust-table th { text-align: start; padding: 8px 12px; background: var(--slw-surface-2, #f0f0f0); font-size: 13px; }
.slw-trust-table td { padding: 8px 12px; border-block-start: 1px solid var(--slw-border); font-size: 14px; }
.slw-trust-empty, .slw-trust-loading { color: var(--slw-text-muted, #666); text-align: center; padding: 32px; }

/* ---------- Org Structure (SCR-HR-002) ---------- */
.slw-org-card { max-width: 1200px; margin: 24px auto; padding: 28px; }
.slw-org-head { margin-block-end: 20px; }
.slw-org-head h1 { font-size: 20px; }
.slw-tabs { display: flex; gap: 4px; border-block-end: 2px solid var(--slw-border); margin-block-end: 20px; }
.slw-tab { padding: 8px 20px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600; color: var(--slw-text-muted, #666); border-block-end: 2px solid transparent; margin-block-end: -2px; }
.slw-tab-active { color: var(--slw-primary, #007bff); border-block-end-color: var(--slw-primary, #007bff); }
.slw-tab-panel { display: none; }
.slw-tab-panel-active { display: block; }
.slw-toolbar { display: flex; gap: 12px; margin-block-end: 16px; align-items: center; }

/* ---------- Employees (SCR-HR-001) ---------- */
.slw-emp-card { max-width: 1400px; margin: 24px auto; padding: 28px; }
.slw-emp-head { margin-block-end: 20px; }
.slw-emp-head h1 { font-size: 20px; }
.slw-emp-filters { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-block-end: 20px; }
.slw-status-badge { padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.slw-status-active { background: #d4edda; color: #155724; }
.slw-status-onleave { background: #fff3cd; color: #856404; }
.slw-status-terminated { background: #e2e3e5; color: #6c757d; }
.slw-status-approved { background: #cce5ff; color: #004085; }
.slw-status-cancelled { background: #f8d7da; color: #721c24; }

/* Sortable table headers + payroll breakdown */
.slw-table thead th[data-sort] { cursor: pointer; user-select: none; }
.slw-table thead th[data-sort]:hover { background: var(--slw-surface-2, #f1f5f9); }
.slw-table thead th.sort-asc::after { content: ' ▲'; font-size: 10px; }
.slw-table thead th.sort-desc::after { content: ' ▼'; font-size: 10px; }
.slw-breakdown-row td { background: var(--slw-surface-2, #f8fafc); padding: 8px 16px; }
.slw-breakdown-list { margin: 4px 0 0; padding-inline-start: 18px; font-size: 12px; color: var(--slw-text-secondary, #64748b); }
.slw-num { text-align: end; }

/* ---------- Tasks Enterprise (SCR-LEG-005) ---------- */
.slw-page-head-actions { display: flex; gap: 8px; align-items: center; }
.slw-search-input { flex: 1; min-width: 200px; padding: 8px 12px; border: 1px solid var(--slw-border); border-radius: 6px; font-size: 14px; }

.slw-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-block-end: 16px; }
.slw-stat-card { background: var(--slw-surface); border: 1px solid var(--slw-border); border-radius: 8px; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.slw-stat-label { font-size: 12px; color: var(--slw-text-secondary); text-transform: uppercase; font-weight: 600; }
.slw-stat-value { font-size: 24px; font-weight: 700; color: var(--slw-text-primary); }
.slw-stat-warning .slw-stat-value { color: #856404; }
.slw-stat-info .slw-stat-value { color: var(--slw-primary); }
.slw-stat-danger .slw-stat-value { color: var(--slw-danger); }
.slw-stat-success .slw-stat-value { color: var(--slw-success); }

.slw-bulk-bar { display: flex; gap: 8px; align-items: center; background: var(--slw-primary-light); padding: 10px 16px; border-radius: 6px; margin-block-end: 12px; }
.slw-bulk-bar span { font-weight: 600; font-size: 13px; }
.slw-btn-sm { padding: 4px 10px; font-size: 12px; }
.slw-btn-danger { background: var(--slw-danger); color: #fff; border: none; }
.slw-btn-danger:hover { background: #b91c1c; }
.slw-btn-success { background: var(--slw-success); color: #fff; border: none; }

.slw-progress-bar { width: 100%; height: 18px; background: var(--slw-surface-2); border-radius: 9px; overflow: hidden; }
.slw-progress-fill { height: 100%; background: var(--slw-primary); color: #fff; font-size: 11px; text-align: center; line-height: 18px; font-weight: 600; transition: width 0.3s; }
.slw-progress-sm { height: 4px; margin-block-start: 6px; }
.slw-progress-sm .slw-progress-fill { font-size: 0; }

.slw-kanban { display: flex; gap: 12px; overflow-x: auto; padding-block-end: 12px; min-height: 400px; }
.slw-kanban-column { flex: 0 0 280px; background: var(--slw-surface-2); border-radius: 8px; border: 1px solid var(--slw-border); display: flex; flex-direction: column; }
.slw-kanban-column-header { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-block-end: 1px solid var(--slw-border); }
.slw-kanban-column-header h3 { font-size: 14px; font-weight: 700; margin: 0; }
.slw-kanban-count { background: var(--slw-border); border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; }
.slw-kanban-column-body { padding: 8px; flex: 1; overflow-y: auto; max-height: 500px; }
.slw-kanban-card { background: var(--slw-surface); border: 1px solid var(--slw-border); border-radius: 6px; padding: 10px 12px; margin-block-end: 8px; cursor: grab; transition: box-shadow 0.2s; }
.slw-kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.slw-kanban-card:active { cursor: grabbing; }
.slw-kanban-card-overdue { border-color: var(--slw-danger); border-width: 2px; }
.slw-kanban-card-title { font-size: 13px; font-weight: 600; margin-block-end: 6px; }
.slw-kanban-card-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--slw-text-secondary); }
.slw-kanban-card-due { color: var(--slw-danger); font-weight: 600; }

.slw-tag { display: inline-block; background: var(--slw-primary-light); color: var(--slw-primary); padding: 1px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; margin-block-end: 2px; }

.slw-modal-lg { max-width: 800px; width: 90%; }

.slw-modal-dialog.slw-journal-entry-dialog { width: min(1080px, calc(100vw - 48px)); max-width: 1080px; max-height: calc(100vh - 48px); }
.slw-modal-dialog.slw-journal-entry-dialog > form { display: block; }
.slw-modal-dialog.slw-journal-entry-dialog .slw-journal-lines { overflow: visible; max-height: none; }
.slw-modal-dialog.slw-journal-entry-dialog .slw-lines-table { width: 100%; min-width: 0; table-layout: fixed; }
.slw-modal-dialog.slw-journal-entry-dialog .slw-lines-table select, .slw-modal-dialog.slw-journal-entry-dialog .slw-lines-table input[type="number"] { width: 100%; min-width: 0; }

.slw-task-detail-body { display: grid; grid-template-columns: 1fr 300px; gap: 16px; max-height: 60vh; overflow-y: auto; }
.slw-task-detail-main h3, .slw-task-detail-sidebar h3 { font-size: 14px; font-weight: 700; margin-block: 12px 8px; }
.slw-task-detail-desc { font-size: 14px; color: var(--slw-text-secondary); margin-block-end: 12px; white-space: pre-wrap; }
.slw-task-detail-meta div { font-size: 13px; margin-block-end: 4px; }
.slw-task-detail-meta strong { color: var(--slw-text-primary); }
.slw-task-detail-progress { margin-block-end: 12px; }

.slw-comments-list { max-height: 200px; overflow-y: auto; margin-block-end: 8px; }
.slw-comment { background: var(--slw-surface-2); border-radius: 6px; padding: 8px 12px; margin-block-end: 6px; }
.slw-comment-header { display: flex; justify-content: space-between; font-size: 12px; margin-block-end: 4px; }
.slw-comment-header strong { color: var(--slw-primary); }
.slw-comment-header span { color: var(--slw-text-secondary); }
.slw-comment-body { font-size: 13px; }
.slw-comment-add { display: flex; gap: 8px; align-items: flex-end; }
.slw-comment-add textarea { flex: 1; padding: 8px; border: 1px solid var(--slw-border); border-radius: 6px; font-size: 13px; resize: vertical; }

.slw-history-list { max-height: 200px; overflow-y: auto; }
.slw-history-item { font-size: 12px; padding: 4px 0; border-block-end: 1px solid var(--slw-border); }
.slw-history-action { font-weight: 600; color: var(--slw-primary); }
.slw-history-time { color: var(--slw-text-secondary); font-size: 11px; }

.slw-subtasks-list { max-height: 150px; overflow-y: auto; }
.slw-subtask { font-size: 13px; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.slw-badge-sm { font-size: 10px; padding: 1px 6px; }
.slw-badge-info { background: var(--slw-primary-light); color: var(--slw-primary); }

.slw-row-overdue { background: #fef2f2; }
.slw-row-overdue:hover { background: #fee2e2; }

.slw-empty { text-align: center; color: var(--slw-text-secondary); padding: 24px; font-style: italic; }

/* ---------- Dashboard Tasks Analytics ---------- */
.slw-dash-tasks-analytics { margin-block-start: 24px; }
.slw-dash-tasks-analytics h2 { font-size: 18px; font-weight: 700; margin-block-end: 16px; }
.slw-dash-analytics-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
.slw-dash-analytics-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.slw-dash-chart-card { background: var(--slw-surface); border: 1px solid var(--slw-border); border-radius: 8px; padding: 16px; }
.slw-dash-chart-card h3 { font-size: 14px; font-weight: 700; margin-block-end: 12px; }

.slw-chart-bars { display: flex; flex-direction: column; gap: 8px; }
.slw-chart-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.slw-chart-bar-label { flex: 0 0 80px; text-align: end; color: var(--slw-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slw-chart-bar-track { flex: 1; height: 20px; background: var(--slw-surface-2); border-radius: 4px; overflow: hidden; }
.slw-chart-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; min-width: 2px; }
.slw-chart-bar-value { flex: 0 0 30px; font-weight: 700; text-align: start; }

/* Report charts card (FIN Phase 5) */
.slw-chart-card { border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); padding: 16px; margin-block-start: 16px; background: var(--slw-surface); }
.slw-chart-card h3 { margin-block-end: 12px; font-size: 14px; color: var(--slw-text-primary); }

/* Print header (hidden on screen) */
.slw-print-header { display: none; }

.slw-dash-time-tracking { display: flex; flex-direction: column; gap: 8px; }
.slw-time-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; border-block-end: 1px solid var(--slw-border); }
.slw-time-row span { color: var(--slw-text-secondary); }
.slw-time-row strong { color: var(--slw-text-primary); }

@media (max-width: 768px) {
    .slw-dash-analytics-grid { grid-template-columns: 1fr; }
    .slw-task-detail-body { grid-template-columns: 1fr; }
}

/* === Cases Enterprise UI === */
.slw-page-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.slw-page-head-title h1 { margin: 0; font-size: 1.5rem; }
.slw-page-head-actions { display: flex; gap: .5rem; }

.slw-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
.slw-stat-card { background: var(--card-bg, #fff); border: 1px solid var(--border, #e2e8f0); border-radius: .5rem; padding: .75rem 1rem; display: flex; flex-direction: column; gap: .25rem; }
.slw-stat-label { font-size: .75rem; color: var(--text-muted, #64748b); text-transform: uppercase; letter-spacing: .03em; }
.slw-stat-value { font-size: 1.5rem; font-weight: 700; }

.slw-cases-toolbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: 1rem; }
.slw-search-input { flex: 1; min-width: 200px; padding: .5rem .75rem; border: 1px solid var(--border, #cbd5e1); border-radius: .375rem; }
.slw-filter-select { padding: .5rem .75rem; border: 1px solid var(--border, #cbd5e1); border-radius: .375rem; background: #fff; }
.slw-filter-check { display: flex; align-items: center; gap: .25rem; font-size: .875rem; cursor: pointer; }

.slw-bulk-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; background: var(--primary-light, #eff6ff); border-radius: .375rem; margin-bottom: 1rem; }
.slw-bulk-bar span { font-weight: 600; font-size: .875rem; }

.slw-tag { display: inline-block; padding: .125rem .5rem; font-size: .75rem; border-radius: 9999px; background: var(--primary-light, #eff6ff); color: var(--primary, #2563eb); margin-right: .25rem; }

.slw-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin-bottom: 1.5rem; }
.slw-detail-field { display: flex; flex-direction: column; gap: .125rem; }
.slw-detail-field label { font-size: .75rem; color: var(--text-muted, #64748b); text-transform: uppercase; }
.slw-detail-field span { font-size: .875rem; }
.slw-detail-full { grid-column: 1 / -1; }

.slw-comments-section { margin-bottom: 1.5rem; }
.slw-comments-section h4, .slw-history-section h4 { margin: 0 0 .5rem; font-size: 1rem; font-weight: 600; }
.slw-comment { border-bottom: 1px solid var(--border, #e2e8f0); padding: .5rem 0; }
.slw-comment-head { display: flex; justify-content: space-between; font-size: .8rem; color: var(--text-muted, #64748b); margin-bottom: .25rem; }
.slw-comment-body { font-size: .875rem; }
.slw-comment-add { display: flex; gap: .5rem; margin-top: .75rem; }
.slw-comment-add textarea { flex: 1; padding: .5rem; border: 1px solid var(--border, #cbd5e1); border-radius: .375rem; }

.slw-history-section { margin-bottom: 1rem; }
.slw-history-item { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .375rem 0; border-bottom: 1px solid var(--border, #f1f5f9); font-size: .8rem; }
.slw-history-action { font-weight: 600; color: var(--primary, #2563eb); }
.slw-history-field { color: var(--text-muted, #64748b); }
.slw-history-values { font-family: monospace; font-size: .75rem; }
.slw-history-user { font-size: .75rem; color: var(--text-muted, #64748b); }
.slw-history-date { font-size: .75rem; color: var(--text-muted, #94a3b8); margin-left: auto; }

.slw-empty { text-align: center; padding: 2rem; color: var(--text-muted, #64748b); }
.slw-empty-text { color: var(--text-muted, #94a3b8); font-size: .875rem; padding: .5rem 0; }

/* Tasks Enterprise: Timeline, Tabs, Attachments, Expenses, Multi-Assignee */
.slw-task-detail-body { display: flex; gap: 16px; max-height: 70vh; overflow-y: auto; }
.slw-task-detail-main { flex: 1; min-width: 0; }
.slw-task-detail-sidebar { flex: 0 0 260px; border-inline-start: 1px solid var(--slw-border, #e2e8f0); padding-inline-start: 16px; }
.slw-task-detail-desc { margin-block-end: 12px; white-space: pre-wrap; }
.slw-task-detail-meta { display: grid; gap: 4px; font-size: 13px; margin-block-end: 12px; }
.slw-task-detail-assignees { margin-block-end: 12px; }
.slw-assignee-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.slw-assignee-chip { background: var(--slw-primary-light, #e0e7ff); color: var(--slw-primary, #4f46e5); padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; }
.slw-multi-assignee { background: var(--slw-info, #3b82f6); color: #fff; padding: 1px 6px; border-radius: 4px; font-size: 11px; }

.slw-tabs { display: flex; gap: 0; border-block-end: 2px solid var(--slw-border, #e2e8f0); margin-block-end: 12px; }
.slw-tab { padding: 8px 16px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--slw-text-secondary, #64748b); border-block-end: 2px solid transparent; margin-block-end: -2px; }
.slw-tab:hover { color: var(--slw-primary, #4f46e5); }
.slw-tab-active { color: var(--slw-primary, #4f46e5); border-block-end-color: var(--slw-primary, #4f46e5); }
.slw-tab-content { display: none; }
.slw-tab-content-active,
.slw-tab-content.active { display: block; }

.slw-timeline { position: relative; padding-inline-start: 24px; }
.slw-timeline::before { content: ''; position: absolute; inset-inline-start: 10px; top: 0; bottom: 0; width: 2px; background: var(--slw-border, #e2e8f0); }
.slw-timeline-item { position: relative; margin-block-end: 16px; padding-inline-start: 20px; }
.slw-timeline-icon { position: absolute; inset-inline-start: -18px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--slw-surface, #fff); border: 2px solid var(--slw-border, #e2e8f0); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.slw-timeline-comment .slw-timeline-icon { border-color: var(--slw-primary, #4f46e5); background: var(--slw-primary-light, #e0e7ff); }
.slw-timeline-history .slw-timeline-icon { border-color: var(--slw-text-secondary, #94a3b8); }
.slw-timeline-content { background: var(--slw-surface-2, #f8fafc); border-radius: 8px; padding: 8px 12px; border: 1px solid var(--slw-border, #e2e8f0); }
.slw-timeline-header { display: flex; justify-content: space-between; font-size: 12px; margin-block-end: 4px; }
.slw-timeline-header span { color: var(--slw-text-secondary, #94a3b8); }
.slw-timeline-body { font-size: 13px; }

.slw-comments-list { max-height: 300px; overflow-y: auto; margin-block-end: 12px; }
.slw-comment { background: var(--slw-surface-2, #f8fafc); border-radius: 8px; padding: 10px 12px; margin-block-end: 8px; border: 1px solid var(--slw-border, #e2e8f0); }
.slw-comment-header { display: flex; justify-content: space-between; font-size: 12px; margin-block-end: 4px; }
.slw-comment-header span { color: var(--slw-text-secondary, #94a3b8); }
.slw-comment-body { font-size: 13px; white-space: pre-wrap; }
.slw-comment-attachments { margin-block-start: 8px; display: flex; flex-direction: column; gap: 4px; }
.slw-attachment { background: var(--slw-surface, #fff); border: 1px solid var(--slw-border, #e2e8f0); border-radius: 4px; padding: 4px 8px; font-size: 12px; cursor: pointer; display: flex; align-items: center; gap: 4px; }
.slw-attachment:hover { border-color: var(--slw-primary, #4f46e5); background: var(--slw-primary-light, #e0e7ff); }
.slw-attachment-size { color: var(--slw-text-secondary, #94a3b8); font-size: 11px; }
.slw-attachment-download { color: var(--slw-primary, #4f46e5); text-decoration: none; font-size: 14px; }
.slw-comment-add { margin-block-start: 8px; }
.slw-comment-actions { display: flex; gap: 8px; align-items: center; margin-block-start: 6px; }
.slw-comment-file-list { margin-block-start: 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.slw-file-chip { background: var(--slw-primary-light, #e0e7ff); color: var(--slw-primary, #4f46e5); padding: 2px 8px; border-radius: 4px; font-size: 12px; }

.slw-expenses-list { margin-block-end: 12px; }
.slw-expense-add { background: var(--slw-surface-2, #f8fafc); border-radius: 8px; padding: 12px; border: 1px solid var(--slw-border, #e2e8f0); }
.slw-table-sm { font-size: 13px; }
.slw-table-sm th, .slw-table-sm td { padding: 6px 8px; }

.slw-history-list { max-height: 200px; overflow-y: auto; }
.slw-history-item { font-size: 12px; padding: 4px 0; border-block-end: 1px solid var(--slw-border, #e2e8f0); }
.slw-history-action { font-weight: 600; }
.slw-history-time { color: var(--slw-text-secondary, #94a3b8); font-size: 11px; }
.slw-subtasks-list { max-height: 200px; overflow-y: auto; }
.slw-subtask { font-size: 13px; padding: 4px 0; }

/* Clear timeline button in grid view */
.slw-btn-timeline { display: inline-flex; align-items: center; gap: 4px; }
.slw-btn-timeline::before { content: '\\1F4DD'; font-size: 14px; }
.slw-timeline-list { min-height: 60px; }
.slw-timeline-list .slw-empty { padding: 16px; }
.slw-task-detail-main .slw-tabs { position: sticky; top: 0; background: var(--slw-surface, #fff); z-index: 5; padding-block-end: 0; }
.slw-task-detail-body { padding: 4px; }
.slw-task-detail-desc { min-height: 1em; }
.slw-task-detail-meta { background: var(--slw-surface-2, #f8fafc); border-radius: 8px; padding: 10px 12px; border: 1px solid var(--slw-border, #e2e8f0); }
.slw-task-detail-assignees { margin-block-end: 12px; }
.slw-comment-add textarea { width: 100%; padding: 8px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 6px; font-size: 13px; resize: vertical; }
.slw-comment-actions { display: flex; gap: 8px; align-items: center; margin-block-start: 6px; }
.slw-expense-add { background: var(--slw-surface-2, #f8fafc); border-radius: 8px; padding: 12px; border: 1px solid var(--slw-border, #e2e8f0); margin-block-start: 8px; }
.slw-expense-add .slw-form-row { gap: 8px; }
.slw-expense-add .slw-field label { font-size: 12px; color: var(--slw-text-secondary, #64748b); font-weight: 600; }
.slw-expense-add .slw-field input, .slw-expense-add .slw-field select { width: 100%; padding: 6px 8px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 4px; font-size: 13px; }

/* ---------- Multi-select dropdown (checkbox-based) ---------- */
.slw-multiselect { position: relative; }
.slw-multiselect-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%; padding-block: 7px; padding-inline: 10px;
    border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm);
    background: var(--slw-surface); color: var(--slw-text-primary);
    font: inherit; font-size: 14px; cursor: pointer; text-align: start;
    transition: border-color var(--slw-transition), box-shadow var(--slw-transition);
}
.slw-multiselect-toggle:focus {
    outline: none; border-color: var(--slw-primary);
    box-shadow: 0 0 0 2px var(--slw-primary-light);
}
.slw-multiselect-label {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--slw-text-secondary); flex: 1;
}
.slw-multiselect-label.has-selection { color: var(--slw-text-primary); }
.slw-multiselect-caret { font-size: 12px; color: var(--slw-text-secondary); flex-shrink: 0; }
.slw-multiselect-panel {
    position: absolute; top: calc(100% + 4px); inset-inline: 0; z-index: 1000;
    background: var(--slw-surface); border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm); box-shadow: var(--slw-shadow-lg);
    max-height: 240px; display: flex; flex-direction: column;
}
.slw-multiselect-search {
    padding-block: 8px; padding-inline: 10px; border: none; border-block-end: 1px solid var(--slw-border);
    border-radius: 0; font-size: 13px; background: var(--slw-surface-2);
}
.slw-multiselect-search:focus { box-shadow: none; border-color: var(--slw-border); }
.slw-multiselect-items { overflow-y: auto; flex: 1; }
.slw-multiselect-item {
    display: flex; align-items: center; gap: 8px;
    padding-block: 7px; padding-inline: 10px; cursor: pointer;
    font-size: 14px; color: var(--slw-text-primary);
    transition: background var(--slw-transition);
}
.slw-multiselect-item:hover { background: var(--slw-surface-hover); }
.slw-multiselect-item input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.slw-multiselect-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slw-multiselect-empty { padding: 12px 10px; color: var(--slw-text-secondary); font-size: 13px; text-align: center; }

/* ---------- Document Search ---------- */
.slw-docsearch-card { padding: 20px; }
.slw-docsearch-stats { display: flex; gap: 12px; flex-wrap: wrap; margin-block-end: 16px; }
.slw-stat-card { background: var(--slw-surface-2, #f8fafc); border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 12px 16px; text-align: center; min-width: 120px; }
.slw-stat-value { display: block; font-size: 24px; font-weight: 700; color: var(--slw-primary, #4f46e5); }
.slw-stat-label { display: block; font-size: 12px; color: var(--slw-text-secondary, #64748b); margin-block-start: 4px; }
.slw-docsearch-form { margin-block-end: 16px; }
.slw-docsearch-main { display: flex; gap: 8px; margin-block-end: 12px; }
.slw-docsearch-input { flex: 1; }
.slw-docsearch-filters { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.slw-docsearch-table { width: 100%; }
.slw-docsearch-snippet { max-width: 400px; font-size: 13px; color: var(--slw-text-secondary, #64748b); }
.slw-docsearch-snippet mark { background: #fef08a; padding: 1px 2px; border-radius: 2px; }
.slw-badge-office { background: #dbeafe; color: #1e40af; }
.slw-badge-case { background: #fef3c7; color: #92400e; }
.slw-badge-client { background: #d1fae5; color: #065f46; }
.slw-docsearch-count { margin-block-end: 8px; font-weight: 600; }

/* ---------- Report Designer ---------- */
.slw-reports-card { padding: 20px; }
.slw-report-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; margin-block-end: 8px; }
.slw-report-item-info { flex: 1; }
.slw-report-designer { padding: 20px; }
.slw-report-designer-layout { display: grid; grid-template-columns: 250px 1fr 300px; gap: 16px; min-height: 500px; }
.slw-report-catalog, .slw-report-preview { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 12px; overflow-y: auto; max-height: 600px; }
.slw-catalog-tree { font-size: 14px; }
.slw-catalog-table { margin-block-end: 12px; }
.slw-catalog-table h4 { margin-block-end: 4px; font-size: 14px; }
.slw-catalog-table ul { list-style: none; padding-inline-start: 12px; margin: 0; }
.slw-catalog-col { padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 13px; }
.slw-catalog-col:hover { background: var(--slw-primary-light, #e0e7ff); }
.slw-report-canvas { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 16px; }
.slw-report-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-end: 16px; }
.slw-selected-columns { margin-block-end: 16px; }
.slw-selected-col { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; background: var(--slw-surface-2, #f8fafc); border-radius: 4px; margin-block-end: 4px; }
.slw-filter-row, .slw-sort-row { display: flex; gap: 8px; margin-block-end: 6px; }
.slw-report-run { padding: 20px; }
.slw-report-table { width: 100%; }

/* ---------- Screen Designer ---------- */
.slw-forms-card { padding: 20px; }
.slw-form-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; margin-block-end: 8px; }
.slw-form-item-info { flex: 1; }
.slw-screen-designer { padding: 20px; }
.slw-screen-designer-layout { display: grid; grid-template-columns: 200px 1fr 280px; gap: 16px; min-height: 500px; }
.slw-screen-palette, .slw-screen-properties { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 12px; overflow-y: auto; max-height: 600px; }
.slw-palette-items { display: flex; flex-direction: column; gap: 4px; }
.slw-palette-item { padding: 8px 10px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 4px; cursor: pointer; font-size: 14px; }
.slw-palette-item:hover { background: var(--slw-primary-light, #e0e7ff); border-color: var(--slw-primary, #4f46e5); }
.slw-screen-canvas { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 16px; }
.slw-screen-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-block-end: 16px; }
.slw-canvas-section { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 12px; margin-block-end: 12px; }
.slw-canvas-section legend { display: flex; align-items: center; gap: 8px; }
.slw-section-name { width: 200px; }
.slw-canvas-fields { min-height: 40px; }
.slw-canvas-field { padding: 6px 10px; background: var(--slw-surface-2, #f8fafc); border-radius: 4px; margin-block-end: 4px; cursor: pointer; font-size: 14px; }
.slw-canvas-field:hover { background: var(--slw-primary-light, #e0e7ff); }
.slw-screen-run { padding: 20px; }
.slw-form-section { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 12px; margin-block-end: 16px; }
.slw-form-fields { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; }
.slw-form-field { padding: 4px; }
.slw-col-12 { grid-column: span 12; }
.slw-col-6 { grid-column: span 6; }
.slw-col-4 { grid-column: span 4; }
.slw-required { color: var(--slw-danger, #ef4444); }
.slw-record-form-panel { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 16px; margin-block-start: 16px; background: var(--slw-surface-2, #f8fafc); }
.slw-form-actions { display: flex; gap: 8px; margin-block-start: 12px; }
.slw-records-list { margin-block-end: 16px; }

/* ---------- Excel Import ---------- */
.slw-excel-import { padding: 20px; }
.slw-excel-import-steps { display: flex; flex-direction: column; gap: 24px; }
.slw-import-step { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 8px; padding: 16px; }
.slw-analysis-results { margin-block-end: 16px; }
.slw-analysis-sheet { margin-block-end: 12px; }
.slw-screen-meta-form { background: var(--slw-surface-2, #f8fafc); padding: 12px; border-radius: 8px; margin-block-end: 12px; }
.slw-lookup-source { padding: 4px 8px; font-size: 13px; color: var(--slw-text-secondary, #64748b); }

.dyn-designer { padding: 18px; }
.dyn-designer-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-block-end: 16px; flex-wrap: wrap; }
.dyn-title-group, .dyn-toolbar-actions, .dyn-device-toggle, .dyn-section-title, .dyn-section-actions, .dyn-screen-button { display: flex; align-items: center; gap: 8px; }
.dyn-title-group { min-width: 0; flex: 1 1 360px; }
.dyn-title-input { min-width: 180px; max-width: 420px; flex: 1; border: 0; border-bottom: 2px solid var(--slw-border, #e2e8f0); background: transparent; color: var(--slw-text-primary); font-size: 1.35rem; font-weight: 700; padding: 6px 2px; }
.dyn-title-input:focus { outline: none; border-color: var(--slw-primary, #4f46e5); }
.dyn-status-badge, .dyn-version-badge { border-radius: 999px; padding: 4px 9px; font-size: 11px; white-space: nowrap; }
.dyn-status-draft { background: #e2e8f0; color: #334155; }
.dyn-status-published { background: #dcfce7; color: #166534; }
.dyn-status-deprecated { background: #fee2e2; color: #991b1b; }
.dyn-version-badge { background: #dbeafe; color: #1e40af; }
.dyn-toolbar-actions { flex-wrap: wrap; }
.dyn-device-toggle { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 7px; overflow: hidden; }
.dyn-device-btn { border: 0; background: var(--slw-surface-2, #f8fafc); color: var(--slw-text-secondary, #64748b); padding: 7px 10px; cursor: pointer; }
.dyn-device-btn + .dyn-device-btn { border-inline-start: 1px solid var(--slw-border, #e2e8f0); }
.dyn-device-btn.is-active, .dyn-device-btn:hover { background: var(--slw-primary, #4f46e5); color: #fff; }
.dyn-alert { border-radius: 7px; padding: 9px 12px; margin-block-end: 14px; font-size: 13px; }
.dyn-alert.is-success { background: #dcfce7; color: #166534; }
.dyn-alert.is-error { background: #fee2e2; color: #991b1b; }
.dyn-designer-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 14px; align-items: start; }
.dyn-palette, .dyn-properties { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.dyn-panel { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 9px; background: var(--slw-surface, #fff); overflow: hidden; }
.dyn-panel-header { display: flex; align-items: center; gap: 7px; padding: 10px 12px; border-block-end: 1px solid var(--slw-border, #e2e8f0); color: var(--slw-text-primary); font-size: 13px; font-weight: 700; }
.dyn-panel-header-row { justify-content: space-between; }
.dyn-panel-body { padding: 11px; }
.dyn-palette-list { display: grid; gap: 6px; }
.dyn-palette-item { display: flex; align-items: center; gap: 9px; width: 100%; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 6px; background: var(--slw-surface-2, #f8fafc); color: var(--slw-text-primary); padding: 8px 10px; text-align: start; cursor: grab; font-size: 13px; }
.dyn-palette-item:hover, .dyn-palette-item:focus { border-color: var(--slw-primary, #4f46e5); background: var(--slw-primary-light, #eef2ff); }
.dyn-palette-item:active { cursor: grabbing; }
.dyn-screens-panel { max-height: 310px; overflow: auto; }
.dyn-screen-tree { display: grid; gap: 4px; }
.dyn-screen-tree-item { display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 7px 8px; border-radius: 6px; color: var(--slw-text-primary); text-decoration: none; font-size: 12px; }
.dyn-screen-tree-item:hover, .dyn-screen-tree-item.is-current { background: var(--slw-primary-light, #eef2ff); color: var(--slw-primary, #4f46e5); }
.dyn-status-text { color: var(--slw-text-secondary, #64748b); font-size: 10px; }
.dyn-lookup-source { display: flex; align-items: center; gap: 7px; padding: 6px 2px; color: var(--slw-text-secondary, #64748b); font-size: 12px; }
.dyn-lookup-source small { margin-inline-start: auto; color: var(--slw-text-tertiary, #94a3b8); }
.dyn-canvas { min-width: 0; transition: max-width .2s ease; }
.dyn-canvas[data-device="tablet"] { max-width: 768px; width: 100%; margin-inline: auto; }
.dyn-canvas[data-device="mobile"] { max-width: 375px; width: 100%; margin-inline: auto; }
.dyn-meta-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dyn-control { display: flex; flex-direction: column; gap: 5px; min-width: 0; color: var(--slw-text-primary); font-size: 12px; }
.dyn-control-wide { grid-column: 1 / -1; }
.dyn-control input, .dyn-control textarea, .dyn-control select { width: 100%; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 6px; background: var(--slw-surface, #fff); color: var(--slw-text-primary); padding: 7px 8px; font-size: 13px; }
.dyn-control input:focus, .dyn-control textarea:focus, .dyn-control select:focus { outline: none; border-color: var(--slw-primary, #4f46e5); box-shadow: 0 0 0 2px var(--slw-primary-light, #eef2ff); }
.dyn-control small { color: var(--slw-text-secondary, #64748b); }
.dyn-checkbox { display: flex; align-items: center; gap: 7px; min-height: 34px; color: var(--slw-text-primary); font-size: 12px; }
.dyn-checkbox input { width: 16px; height: 16px; }
.dyn-sections { display: grid; gap: 12px; margin-block-start: 14px; }
.dyn-section { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 9px; background: var(--slw-surface, #fff); overflow: hidden; }
.dyn-section-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 11px; border-block-end: 1px solid var(--slw-border, #e2e8f0); background: var(--slw-surface-2, #f8fafc); }
.dyn-section-name-group { display: flex; gap: 6px; min-width: 0; }
.dyn-section-name { width: 150px; min-width: 0; border: 1px solid transparent; border-radius: 5px; background: transparent; color: var(--slw-text-primary); padding: 5px 7px; font-size: 13px; font-weight: 600; }
.dyn-section-name:focus { background: var(--slw-surface, #fff); border-color: var(--slw-border, #e2e8f0); outline: none; }
.dyn-collapse-toggle { border: 0; background: transparent; color: var(--slw-text-secondary, #64748b); cursor: pointer; padding: 4px; }
.dyn-section-body { padding: 10px; min-height: 72px; }
.dyn-fields-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; min-height: 46px; }
.dyn-field { min-width: 0; }
.dyn-col-12 { grid-column: span 12; }
.dyn-col-6 { grid-column: span 6; }
.dyn-col-4 { grid-column: span 4; }
.dyn-col-3 { grid-column: span 3; }
.dyn-field-card { display: flex; align-items: center; gap: 6px; min-width: 0; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 7px; background: var(--slw-surface-2, #f8fafc); padding: 7px; cursor: pointer; }
.dyn-field.is-selected > .dyn-field-card, .dyn-field-card:hover { border-color: var(--slw-primary, #4f46e5); box-shadow: 0 0 0 2px var(--slw-primary-light, #eef2ff); }
.dyn-drag-handle { color: var(--slw-text-tertiary, #94a3b8); cursor: grab; }
.dyn-field-icon { color: var(--slw-primary, #4f46e5); }
.dyn-inline-label { flex: 1; min-width: 55px; border: 0; background: transparent; color: var(--slw-text-primary); font-size: 12px; font-weight: 600; }
.dyn-inline-label:focus { outline: none; border-block-end: 1px solid var(--slw-primary, #4f46e5); }
.dyn-field-type-badge { flex-shrink: 0; border-radius: 999px; background: #dbeafe; color: #1e40af; padding: 3px 6px; font-size: 10px; }
.dyn-inline-required { display: inline-flex; align-items: center; color: var(--slw-danger, #ef4444); font-size: 11px; }
.dyn-inline-required-input { width: 14px; height: 14px; }
.dyn-inline-sort, .dyn-inline-width { width: 48px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 4px; background: var(--slw-surface, #fff); color: var(--slw-text-primary); padding: 3px; font-size: 11px; }
.dyn-inline-width { width: 52px; }
.dyn-remove-field-button, .dyn-remove-screen-button, .dyn-remove-grid-column { border: 0; background: transparent; color: var(--slw-danger, #ef4444); cursor: pointer; padding: 3px 5px; }
.dyn-grid-columns { margin-block-start: 7px; border-inline-start: 2px solid var(--slw-border, #e2e8f0); padding-inline-start: 8px; display: grid; gap: 5px; }
.dyn-grid-columns-title, .dyn-property-label { color: var(--slw-text-secondary, #64748b); font-size: 11px; font-weight: 700; }
.dyn-grid-columns .dyn-field-card { background: var(--slw-surface, #fff); }
.dyn-grid-add { justify-self: start; }
.dyn-drop-hint, .dyn-empty-state, .dyn-empty-property { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--slw-text-secondary, #64748b); font-size: 12px; min-height: 46px; text-align: center; }
.dyn-empty-state { flex-direction: column; padding: 22px; }
.dyn-empty-state i { font-size: 26px; color: var(--slw-text-tertiary, #94a3b8); }
.dyn-add-section { width: 100%; margin-block-start: 10px; }
.dyn-screen-buttons-panel { margin-block-start: 14px; }
.dyn-screen-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.dyn-screen-button { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 6px; padding-inline-start: 4px; }
.dyn-workflow-stepper { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; margin-block-start: 14px; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 9px; padding: 10px; background: var(--slw-surface-2, #f8fafc); }
.dyn-step { display: inline-flex; align-items: center; gap: 5px; color: var(--slw-text-secondary, #64748b); font-size: 11px; }
.dyn-step b { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--slw-border, #e2e8f0); color: var(--slw-text-primary); font-size: 11px; }
.dyn-step.is-active { color: var(--slw-primary, #4f46e5); font-weight: 700; }
.dyn-step.is-active b { background: var(--slw-primary, #4f46e5); color: #fff; }
.dyn-workflow-stepper > small { flex-basis: 100%; text-align: center; color: var(--slw-text-secondary, #64748b); font-size: 11px; margin-block-start: 4px; }
.dyn-properties { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; }
.dyn-properties .dyn-panel-body { display: grid; gap: 9px; }
.dyn-property-group { display: grid; gap: 6px; padding-block-start: 8px; border-block-start: 1px solid var(--slw-border, #e2e8f0); }
.dyn-property-group[hidden] { display: none; }
.dyn-warning { color: var(--slw-warning, #b45309); font-size: 11px; }
.dyn-grid-column-row { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--slw-border, #e2e8f0); border-radius: 5px; padding: 4px 6px; font-size: 11px; }
.dyn-relationship-map { min-height: 150px; overflow-x: auto; }
.dyn-relationship-map svg { display: block; width: 100%; min-width: 380px; height: 150px; }
.dyn-map-center { fill: var(--slw-primary, #4f46e5); }
.dyn-map-node { fill: #16a34a; }
.dyn-map-line { stroke: #94a3b8; stroke-width: 1.5; }
.dyn-map-label, .dyn-map-edge-label { fill: var(--slw-text-secondary, #64748b); font-size: 10px; }
.dyn-map-empty { fill: var(--slw-text-tertiary, #94a3b8); font-size: 11px; }
.dyn-muted { color: var(--slw-text-secondary, #64748b); font-size: 12px; }
@media (max-width: 1180px) { .dyn-designer-layout { grid-template-columns: 190px minmax(0, 1fr); } .dyn-properties { grid-column: 1 / -1; position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .dyn-designer { padding: 10px; } .dyn-designer-layout { grid-template-columns: 1fr; } .dyn-properties { display: flex; } .dyn-meta-grid { grid-template-columns: 1fr; } .dyn-control-wide { grid-column: auto; } .dyn-section-header, .dyn-title-group, .dyn-toolbar-actions { align-items: stretch; flex-direction: column; } .dyn-section-name-group { width: 100%; flex-direction: column; } .dyn-section-name { width: 100%; } .dyn-section-actions { width: 100%; justify-content: flex-end; } .dyn-col-6, .dyn-col-4, .dyn-col-3 { grid-column: span 12; } .dyn-workflow-stepper { justify-content: flex-start; } .dyn-workflow-stepper > i { display: none; } }
.slw-runtime-grid { overflow-x: auto; margin-block-start: 8px; }
.slw-runtime-grid .slw-table { min-width: 520px; }
.slw-runtime-tab { border: 1px solid var(--slw-border, #e2e8f0); border-radius: 6px; padding: 10px; background: var(--slw-surface-2, #f8fafc); }

.slw-public-main { width: 100%; min-height: 100vh; }
.slw-landing { min-height: 100vh; background: var(--slw-bg); color: var(--slw-text-primary); }
.slw-landing-nav { position: sticky; top: 0; z-index: 100; padding: 14px 5vw; background: color-mix(in srgb, var(--slw-surface) 90%, transparent); backdrop-filter: blur(18px); border-block-end: 1px solid var(--slw-border); }
.slw-landing-nav-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; gap: 28px; }
.slw-landing-logo { display: inline-flex; align-items: center; gap: 9px; color: var(--slw-text-primary); font-size: 18px; font-weight: 800; white-space: nowrap; }
.slw-landing-logo::before { content: "◆"; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--slw-primary); color: #fff; font-size: 13px; }
.slw-landing-nav-links { display: flex; align-items: center; gap: 22px; flex: 1; }
.slw-landing-nav-links a { color: var(--slw-text-secondary); font-size: 13px; font-weight: 600; }
.slw-landing-nav-links a:hover { color: var(--slw-primary); text-decoration: none; }
.slw-landing-nav-actions { display: flex; align-items: center; gap: 7px; }
.slw-landing-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); gap: 40px; align-items: center; max-width: 1240px; min-height: 570px; margin: 0 auto; padding: 80px 5vw; }
.slw-landing-hero::before { content: ""; position: absolute; width: 440px; height: 440px; border-radius: 50%; background: var(--slw-primary-light); filter: blur(3px); inset-inline-end: -140px; top: -120px; opacity: .8; }
.slw-landing-hero-content { position: relative; z-index: 1; }
.slw-landing-hero h1 { max-width: 720px; margin: 0 0 18px; color: var(--slw-text-primary); font-size: clamp(2.3rem, 5vw, 4.8rem); line-height: 1.08; letter-spacing: -.04em; }
.slw-landing-hero h1::first-line { color: var(--slw-primary); }
.slw-landing-hero p { max-width: 650px; margin: 0 0 28px; color: var(--slw-text-secondary); font-size: 18px; }
.slw-landing-hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.slw-btn-lg { padding-block: 12px; padding-inline: 22px; }
.slw-landing-hero-media { position: relative; z-index: 1; min-height: 300px; display: grid; place-items: center; border: 1px solid var(--slw-border); border-radius: 28px; background: linear-gradient(145deg, var(--slw-primary), #172554); box-shadow: 0 24px 70px rgba(37,99,235,.25); overflow: hidden; }
.slw-landing-hero-media::after { content: ""; position: absolute; inset: 24px; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; }
.slw-landing-hero-media img { position: relative; z-index: 1; max-width: 88%; max-height: 300px; object-fit: contain; border-radius: 12px; }
.slw-landing-hero-media.slw-hero-slider { display: block; min-height: 0; padding: 0; border: none; background: none; box-shadow: none; overflow: visible; }
.slw-landing-hero-media.slw-hero-slider::after { display: none; }
.slw-hero-slider-track { position: relative; width: 100%; aspect-ratio: 4 / 5; max-height: 560px; }
.slw-hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.slw-hero-slide.active { opacity: 1; z-index: 1; }
.slw-hero-slide img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: top; border-radius: 24px; box-shadow: 0 24px 70px rgba(37,99,235,.28); border: 1px solid var(--slw-border); }
.slw-hero-slider-dots { display: flex; justify-content: center; gap: 8px; margin-block-start: 14px; }
.slw-hero-dot { width: 10px; height: 10px; padding: 0; border: none; border-radius: 999px; background: var(--slw-border); cursor: pointer; transition: background .2s, width .2s; }
.slw-hero-dot.active { width: 26px; background: var(--slw-primary); }
.slw-landing-features, .slw-landing-slider, .slw-landing-pricing, .slw-landing-testimonials, .slw-landing-cta { padding: 86px 5vw; }
.slw-landing-features, .slw-landing-pricing { background: var(--slw-surface); }
.slw-landing-features > h2, .slw-landing-slider > h2, .slw-landing-pricing > h2, .slw-landing-testimonials > h2 { max-width: 1240px; margin: 0 auto 30px; text-align: center; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.03em; }
.slw-landing-features-grid, .slw-landing-pricing-grid, .slw-landing-testimonials-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.slw-landing-feature-card, .slw-testimonial-card, .slw-pricing-card { border: 1px solid var(--slw-border); border-radius: 18px; background: var(--slw-surface); padding: 25px; box-shadow: var(--slw-shadow); transition: transform .2s, box-shadow .2s, border-color .2s; }
.slw-landing-feature-card:hover, .slw-testimonial-card:hover, .slw-pricing-card:hover { transform: translateY(-5px); border-color: var(--slw-primary); box-shadow: var(--slw-shadow-lg); }
.slw-landing-feature-card h3, .slw-testimonial-card cite { margin: 0 0 8px; font-size: 17px; }
.slw-landing-feature-card p, .slw-testimonial-card blockquote, .slw-testimonial-role { margin: 0; color: var(--slw-text-secondary); font-size: 14px; }
.slw-landing-slider { background: linear-gradient(180deg, var(--slw-bg), var(--slw-surface-2)); }
.slw-slider-container { position: relative; max-width: 1050px; min-height: 310px; margin: 0 auto; overflow: hidden; border: 1px solid var(--slw-border); border-radius: 24px; background: var(--slw-surface); box-shadow: var(--slw-shadow-lg); }
.slw-slider-track { min-height: 310px; }
.slw-slider-slide { display: none; min-height: 310px; align-items: center; justify-content: center; gap: 25px; padding: 30px 9%; text-align: center; }
.slw-slider-slide.active { display: flex; flex-direction: column; }
.slw-slider-slide img { max-width: 100%; max-height: 220px; object-fit: contain; border-radius: 13px; }
.slw-slider-caption { max-width: 720px; margin: 0; color: var(--slw-text-secondary); font-size: 15px; }
.slw-slider-placeholder-icon { display: grid; place-items: center; width: 74px; height: 74px; border-radius: 22px; background: var(--slw-primary-light); color: var(--slw-primary); font-size: 28px; }
.slw-slider-placeholder h3 { margin: 0; font-size: 24px; }
.slw-slider-prev, .slw-slider-next { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 1px solid var(--slw-border); border-radius: 50%; background: var(--slw-surface); color: var(--slw-primary); font-size: 25px; cursor: pointer; box-shadow: var(--slw-shadow); }
.slw-slider-prev { inset-inline-start: 18px; }
.slw-slider-next { inset-inline-end: 18px; }
.slw-slider-dots { position: absolute; bottom: 16px; inset-inline: 0; display: flex; justify-content: center; gap: 6px; }
.slw-slider-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: var(--slw-border); cursor: pointer; }
.slw-slider-dot.active { width: 22px; border-radius: 6px; background: var(--slw-primary); }
.slw-landing-pricing-toggle { display: flex; justify-content: center; gap: 4px; margin: 0 auto 28px; }
.slw-pricing-toggle-btn { border: 1px solid var(--slw-border); background: var(--slw-surface-2); color: var(--slw-text-secondary); padding: 9px 18px; cursor: pointer; font: inherit; font-weight: 700; }
.slw-pricing-toggle-btn:first-child { border-radius: 999px 0 0 999px; }
.slw-pricing-toggle-btn:last-child { border-radius: 0 999px 999px 0; }
.slw-pricing-toggle-btn.active { background: var(--slw-primary); border-color: var(--slw-primary); color: #fff; }
.slw-pricing-card { position: relative; display: flex; flex-direction: column; }
.slw-pricing-card-popular { border: 2px solid var(--slw-primary); transform: translateY(-8px); }
.slw-pricing-ribbon { position: absolute; top: 14px; inset-inline-end: 14px; padding: 4px 8px; border-radius: 999px; background: var(--slw-primary-light); color: var(--slw-primary); font-size: 10px; font-weight: 800; }
.slw-pricing-card h3 { margin: 0 0 8px; font-size: 20px; }
.slw-pricing-desc { min-height: 44px; color: var(--slw-text-secondary); font-size: 13px; }
.slw-pricing-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; min-width: 0; margin: 15px 0; color: var(--slw-primary); font-weight: 800; }
.slw-price-amount { min-width: 0; max-width: 100%; overflow-wrap: anywhere; font-size: clamp(1.8rem, 3vw, 2.35rem); font-variant-numeric: tabular-nums; line-height: 1.1; }
.slw-price-currency, .slw-price-cycle { color: var(--slw-text-secondary); font-size: 12px; white-space: nowrap; }
.slw-pricing-features { flex: 1; list-style: none; margin: 0 0 22px; padding: 0; color: var(--slw-text-secondary); font-size: 13px; }
.slw-pricing-features li { padding: 7px 0; border-block-end: 1px dashed var(--slw-border); }
.slw-feature-check { color: var(--slw-success); margin-inline-end: 6px; }
.slw-feature-x { color: var(--slw-danger); margin-inline-end: 6px; }
.slw-landing-testimonials { background: var(--slw-bg); }
.slw-testimonial-card blockquote { margin: 0 0 15px; font-size: 16px; }
.slw-testimonial-card cite { display: block; font-style: normal; font-weight: 800; }
.slw-testimonial-role { display: block; margin-block-start: 3px; }
.slw-landing-cta { background: linear-gradient(135deg, #172554, var(--slw-primary)); color: #fff; }
.slw-landing-cta-content { max-width: 760px; margin: 0 auto; }
.slw-landing-cta h2 { margin: 0 0 8px; font-size: clamp(1.8rem, 4vw, 3rem); }
.slw-landing-cta p { color: rgba(255,255,255,.75); }
.slw-lead-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-block-start: 24px; }
.slw-lead-form .slw-field label { color: #fff; }
.slw-lead-form .slw-alert, .slw-lead-form button { grid-column: 1 / -1; }
.slw-landing-policy { padding: 60px 5vw; background: var(--slw-bg); }
.slw-policy-head { max-width: 860px; margin: 0 auto 30px; text-align: center; }
.slw-policy-kicker { display: inline-block; margin-block-end: 8px; padding: 4px 14px; border-radius: 999px; background: var(--slw-primary-light); color: var(--slw-primary); font-size: 12px; font-weight: 700; }
.slw-policy-head h2 { margin: 0 0 8px; font-size: clamp(1.6rem, 3vw, 2.2rem); }
.slw-policy-head p { color: var(--slw-text-secondary); margin: 0; }
.slw-policy-list { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.slw-policy-item { border: 1px solid var(--slw-border); border-radius: 14px; background: var(--slw-surface); overflow: hidden; transition: border-color .2s, box-shadow .2s; }
.slw-policy-item:hover { border-color: var(--slw-primary); }
.slw-policy-item summary { padding: 16px 20px; font-weight: 700; cursor: pointer; list-style: none; position: relative; }
.slw-policy-item summary::-webkit-details-marker { display: none; }
.slw-policy-item summary::after { content: '+'; position: absolute; inset-inline-end: 20px; inset-block-start: 50%; transform: translateY(-50%); color: var(--slw-primary); font-size: 20px; font-weight: 700; }
.slw-policy-item[open] summary::after { content: '−'; }
.slw-policy-item p { margin: 0; padding: 0 20px 14px; color: var(--slw-text-secondary); font-size: 14px; line-height: 1.9; }
.slw-policy-item p a { color: var(--slw-primary); }
.slw-landing-footer { padding: 34px 5vw; background: var(--slw-surface); border-block-start: 1px solid var(--slw-border); }
.slw-landing-footer-inner { max-width: 1240px; margin: 0 auto; display: flex; justify-content: space-between; gap: 30px; }
.slw-landing-footer-brand span { font-weight: 800; }
.slw-landing-footer-brand p { max-width: 480px; color: var(--slw-text-secondary); font-size: 13px; }
.slw-landing-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.slw-landing-footer-contact h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; }
.slw-landing-footer-contact { display: flex; flex-direction: column; gap: 6px; }
.slw-landing-footer-contact a { color: var(--slw-text-secondary); font-size: 13px; }
.slw-landing-footer-contact a:hover { color: var(--slw-primary); }
.slw-landing-footer-copyright { max-width: 1240px; margin: 22px auto 0; padding-block-start: 15px; border-block-start: 1px solid var(--slw-border); color: var(--slw-text-secondary); font-size: 12px; }
.slw-eyebrow { display: block; margin-block-end: 6px; color: var(--slw-primary); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.slw-dash-page, .slw-host-dashboard { width: 100%; max-width: 1400px; margin: 0 auto; }
.slw-dash-welcome, .slw-host-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-block-end: 30px; }
.slw-dash-welcome h1, .slw-host-hero h1 { margin: 0 0 7px; font-size: clamp(1.7rem, 3vw, 2.7rem); letter-spacing: -.04em; }
.slw-dash-subtitle, .slw-host-hero p { margin: 0; display: flex; flex-wrap: wrap; gap: 16px; color: var(--slw-text-secondary); font-size: 13px; }
.slw-dash-stats, .slw-host-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-block-end: 20px; }
.slw-dash-stat-card, .slw-host-kpi { min-height: 142px; display: flex; flex-direction: column; justify-content: center; gap: 7px; border: 1px solid var(--slw-border); border-radius: 16px; background: var(--slw-surface); padding: 20px; box-shadow: var(--slw-shadow); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.slw-dash-stat-card:hover { transform: translateY(-4px); box-shadow: var(--slw-shadow-lg); text-decoration: none; }
.slw-dash-stat-icon, .slw-host-kpi-icon { color: var(--slw-primary); font-size: 24px; }
.slw-dash-stat-label, .slw-host-kpi span:last-child { color: var(--slw-text-secondary); font-size: 12px; font-weight: 700; }
.slw-dash-stat-value { color: var(--slw-primary); font-size: 13px; font-weight: 800; }
.slw-host-kpi strong { font-size: 30px; line-height: 1; }
.slw-dash-content-grid, .slw-host-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, .8fr); gap: 18px; }
.slw-dash-panel, .slw-host-panel { border: 1px solid var(--slw-border); border-radius: 16px; background: var(--slw-surface); padding: 22px; box-shadow: var(--slw-shadow); }
.slw-dash-panel-head, .slw-host-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-block-end: 18px; }
.slw-dash-panel-head h2, .slw-host-panel-head h2 { margin: 0; font-size: 18px; }
.slw-dash-panel-mark, .slw-host-panel-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--slw-primary-light); color: var(--slw-primary); font-weight: 800; }
.slw-dash-action-grid, .slw-host-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.slw-dash-action, .slw-host-action { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--slw-border); border-radius: 10px; padding: 14px; color: var(--slw-text-primary); text-decoration: none; }
.slw-dash-action:hover, .slw-host-action:hover { border-color: var(--slw-primary); background: var(--slw-primary-light); text-decoration: none; }
.slw-dash-action span, .slw-host-action small { color: var(--slw-text-secondary); font-size: 12px; }
.slw-dash-module-list { display: grid; gap: 4px; }
.slw-dash-module-list a { display: flex; justify-content: space-between; padding: 11px 4px; border-block-end: 1px solid var(--slw-border); color: var(--slw-text-primary); font-weight: 600; }
.slw-dash-module-list a:hover { color: var(--slw-primary); text-decoration: none; }
.slw-host-panel-wide { grid-column: 1 / 2; }
.slw-host-panel-copy { color: var(--slw-text-secondary); line-height: 1.8; }
.slw-btn-block { width: 100%; margin-block-start: 8px; }
.slw-app.sidebar-collapsed .slw-sidebar { width: 76px; }
.slw-app.sidebar-collapsed .slw-sidebar-brand { justify-content: center; padding-inline: 8px; }
.slw-app.sidebar-collapsed .slw-sidebar-brand-text, .slw-app.sidebar-collapsed .slw-nav-group-title, .slw-app.sidebar-collapsed .slw-nav-chevron, .slw-app.sidebar-collapsed .slw-nav-group-items, .slw-app.sidebar-collapsed .slw-sidebar-link-top > span:not(.slw-nav-icon) { display: none; }
.slw-app.sidebar-collapsed .slw-sidebar-link-top, .slw-app.sidebar-collapsed .slw-nav-group-header { justify-content: center; padding-inline: 8px; }
.slw-app.sidebar-collapsed .slw-sidebar-footer { padding-inline: 8px; }
.slw-app.sidebar-collapsed .slw-sidebar-logout { font-size: 0; padding-inline: 8px; }
.slw-app.sidebar-collapsed .slw-sidebar-logout::before { content: "↪"; font-size: 18px; }
@media (max-width: 900px) { .slw-landing-hero { grid-template-columns: 1fr; text-align: center; } .slw-landing-hero p { margin-inline: auto; } .slw-landing-hero-cta { justify-content: center; } .slw-dash-stats, .slw-host-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .slw-dash-content-grid, .slw-host-grid { grid-template-columns: 1fr; } .slw-host-panel-wide { grid-column: auto; } }
@media (max-width: 700px) { .slw-landing-nav-inner, .slw-landing-footer-inner, .slw-dash-welcome, .slw-host-hero { align-items: stretch; flex-direction: column; } .slw-landing-nav-links { order: 3; justify-content: center; } .slw-landing-nav-actions { flex-wrap: wrap; } .slw-lead-form { grid-template-columns: 1fr; } .slw-dash-stats, .slw-host-kpis, .slw-dash-action-grid, .slw-host-actions-grid { grid-template-columns: 1fr; } }
@media (max-width: 768px) { .slw-app.sidebar-collapsed .slw-sidebar { width: 260px; } .slw-app.sidebar-collapsed .slw-sidebar-brand-text, .slw-app.sidebar-collapsed .slw-nav-group-title, .slw-app.sidebar-collapsed .slw-nav-chevron, .slw-app.sidebar-collapsed .slw-nav-group-items, .slw-app.sidebar-collapsed .slw-sidebar-link-top > span:not(.slw-nav-icon) { display: initial; } .slw-app.sidebar-collapsed .slw-sidebar-link-top, .slw-app.sidebar-collapsed .slw-nav-group-header { justify-content: initial; padding-inline: 12px; } }
.slw-landing-menu-toggle { display: none; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface); color: var(--slw-text-primary); padding: 7px 10px; cursor: pointer; font-size: 18px; line-height: 1; }
.slw-landing-menu-toggle:hover { border-color: var(--slw-primary); color: var(--slw-primary); }
@media (max-width: 700px) {
    .slw-landing-nav { padding: 10px 16px; }
    .slw-landing-nav-inner { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
    .slw-landing-logo { flex: 1 1 auto; min-width: 0; }
    .slw-landing-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
    .slw-landing-nav-links, .slw-landing-nav-actions { display: none; flex-basis: 100%; width: 100%; }
    .slw-landing-nav.is-open .slw-landing-nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 0; order: 3; padding-block: 6px; border-block: 1px solid var(--slw-border); }
    .slw-landing-nav.is-open .slw-landing-nav-links a { padding: 10px 4px; border-block-end: 1px solid var(--slw-border); }
    .slw-landing-nav.is-open .slw-landing-nav-actions { display: flex; order: 4; flex-wrap: wrap; justify-content: stretch; }
    .slw-landing-nav.is-open .slw-landing-nav-actions .slw-btn { flex: 1 1 auto; }
    .slw-landing-hero { min-height: auto; padding: 56px 20px; }
    .slw-landing-hero h1 { font-size: clamp(2rem, 10vw, 3rem); }
    .slw-landing-hero p { font-size: 15px; }
    .slw-landing-features, .slw-landing-slider, .slw-landing-pricing, .slw-landing-testimonials, .slw-landing-cta { padding: 54px 16px; }
    .slw-slider-container, .slw-slider-track, .slw-slider-slide { min-height: 270px; }
    .slw-slider-slide { padding-inline: 48px; }
    .slw-slider-prev { inset-inline-start: 8px; }
    .slw-slider-next { inset-inline-end: 8px; }
    .slw-landing-footer { padding: 28px 16px; }
    .slw-appbar { padding: 9px 12px; gap: 6px; }
    .slw-appbar-info { min-width: 0; }
    .slw-appbar-user { display: none; }
    .slw-appbar-actions { gap: 3px; }
    .slw-appbar-actions .slw-btn { padding-inline: 8px; font-size: 12px; }
    .slw-app-content { padding: 14px; }
    .slw-dashboard-body { overflow-x: hidden; }
}

.slw-table-wrap { scrollbar-width: thin; scrollbar-color: var(--slw-border) transparent; }
.slw-table-wrap::-webkit-scrollbar { height: 8px; }
.slw-table-wrap::-webkit-scrollbar-thumb { background: var(--slw-border); border-radius: 8px; }
.slw-journal-lines, .slw-invoice-lines { overflow-x: auto; }
.slw-page-head, .slw-page-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.slw-page-head { justify-content: space-between; }
@media (max-width: 768px) {
    .slw-app-content { min-width: 0; }
    .slw-app-content > .slw-card { margin-inline: 0; padding: 16px; }
    .slw-app-content .slw-table-wrap { width: 100%; max-width: 100%; }
    .slw-app-content .slw-table { min-width: 680px; font-size: 12px; }
    .slw-app-content .slw-table thead th, .slw-app-content .slw-table tbody td { padding-block: 9px; padding-inline: 10px; }
    .slw-app-content .slw-toolbar, .slw-app-content [class$="-toolbar"], .slw-app-content [class$="-filters"] { display: flex; width: 100%; max-width: 100%; flex-wrap: wrap; gap: 8px; }
    .slw-app-content .slw-toolbar > *, .slw-app-content [class$="-toolbar"] > *, .slw-app-content [class$="-filters"] > * { flex: 1 1 180px; min-width: 0; max-width: 100%; }
    .slw-app-content .slw-toolbar .slw-btn, .slw-app-content [class$="-toolbar"] .slw-btn { flex: 0 1 auto; }
    .slw-page-head { align-items: stretch; flex-direction: column; }
    .slw-page-head-actions { width: 100%; }
    .slw-page-head-actions > *, .slw-page-head .slw-actions > * { flex: 1 1 auto; }
    .slw-search-input, .slw-clients-search, .slw-cases-search, .slw-branches-search, .slw-users-search, .slw-courts-toolbar input[type="search"] { min-width: 0; width: 100%; }
    .slw-pagination { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 480px) {
    .slw-app-content > .slw-card { padding: 12px; }
    .slw-app-content .slw-toolbar > *, .slw-app-content [class$="-toolbar"] > *, .slw-app-content [class$="-filters"] > * { flex-basis: 100%; }
    .slw-app-content .slw-toolbar .slw-btn, .slw-app-content [class$="-toolbar"] .slw-btn { width: 100%; }
    .slw-page-head-actions, .slw-page-head .slw-actions { flex-direction: column; width: 100%; }
    .slw-page-head-actions > *, .slw-page-head .slw-actions > * { width: 100%; }
}
@media (max-width: 1024px) {
    .slw-sidebar { position: fixed; top: 0; inset-inline-start: 0; width: 260px; height: 100vh; transform: translateX(-100%); z-index: 1000; }
    [dir="rtl"] .slw-sidebar { transform: translateX(100%); }
    .slw-sidebar.open { transform: translateX(0); }
    .slw-sidebar-close, .slw-sidebar-toggle { display: flex; }
    .slw-app-main { width: 100%; flex: 1 1 100%; }
    .slw-app.sidebar-collapsed .slw-sidebar { width: 260px; }
    .slw-app.sidebar-collapsed .slw-sidebar-brand-text, .slw-app.sidebar-collapsed .slw-nav-group-title, .slw-app.sidebar-collapsed .slw-nav-chevron, .slw-app.sidebar-collapsed .slw-nav-group-items, .slw-app.sidebar-collapsed .slw-sidebar-link-top > span:not(.slw-nav-icon) { display: initial; }
    .slw-app.sidebar-collapsed .slw-sidebar-link-top, .slw-app.sidebar-collapsed .slw-nav-group-header { justify-content: initial; padding-inline: 12px; }
}


/* Cycle Test Page */
.slw-cycle-test { padding: 16px; max-width: 1400px; margin: 0 auto; }
.slw-cycle-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.slw-cycle-header h1 { font-size: 1.6rem; margin: 4px 0; color: var(--slw-text); }
.slw-cycle-header p { color: var(--slw-text-muted); margin: 0; font-size: 0.9rem; }
.slw-cycle-header-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.slw-cycle-rows-label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; color: var(--slw-text-muted); }
.slw-cycle-rows-label select { padding: 6px 10px; border: 1px solid var(--slw-border); border-radius: 6px; background: var(--slw-surface); color: var(--slw-text); }
.slw-cycle-run-icon { font-size: 0.8rem; }
.slw-cycle-progress-section { margin-bottom: 24px; }
.slw-cycle-progress-card { background: var(--slw-surface); border: 1px solid var(--slw-border); border-radius: 12px; padding: 20px; }
.slw-cycle-progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.slw-cycle-progress-header h2 { font-size: 1.1rem; margin: 0; color: var(--slw-text); }
.slw-cycle-progress-percent { font-size: 1.4rem; font-weight: 700; color: var(--slw-primary); }
.slw-cycle-progress-bar-track { width: 100%; height: 12px; background: var(--slw-border); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.slw-cycle-progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--slw-primary), #4a9eff); border-radius: 6px; transition: width 0.5s ease; }
.slw-cycle-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.slw-cycle-stat { text-align: center; padding: 8px; background: var(--slw-bg); border-radius: 8px; }
.slw-cycle-stat-label { display: block; font-size: 0.75rem; color: var(--slw-text-muted); margin-bottom: 4px; }
.slw-cycle-stat strong { font-size: 1.2rem; color: var(--slw-text); }
.slw-cycle-stat-pass strong { color: #22c55e; }
.slw-cycle-stat-fail strong { color: #ef4444; }
.slw-cycle-screens { margin-bottom: 24px; }
.slw-cycle-screens h2 { font-size: 1.2rem; margin-bottom: 16px; color: var(--slw-text); }
.slw-cycle-screens-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.slw-cycle-screen-card { background: var(--slw-surface); border: 1px solid var(--slw-border); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color 0.2s; }
.slw-cycle-screen-card:hover { border-color: var(--slw-primary); }
.slw-cycle-screen-card.pass { border-inline-start: 4px solid #22c55e; }
.slw-cycle-screen-card.fail { border-inline-start: 4px solid #ef4444; }
.slw-cycle-screen-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.slw-cycle-screen-status { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; }
.slw-cycle-screen-status.pass { background: rgba(34,197,94,0.13); color: #22c55e; }
.slw-cycle-screen-status.fail { background: rgba(239,68,68,0.13); color: #ef4444; }
.slw-cycle-screen-info { flex: 1; }
.slw-cycle-screen-info strong { display: block; font-size: 0.95rem; color: var(--slw-text); }
.slw-cycle-screen-info small { color: var(--slw-text-muted); font-size: 0.75rem; }
.slw-cycle-screen-duration { font-size: 0.8rem; color: var(--slw-text-muted); }
.slw-cycle-screen-stats { display: flex; gap: 10px; font-size: 0.8rem; margin-bottom: 8px; }
.slw-cycle-screen-stat.pass { color: #22c55e; }
.slw-cycle-screen-stat.fail { color: #ef4444; }
.slw-cycle-screen-mini-progress { height: 4px; background: var(--slw-border); border-radius: 2px; overflow: hidden; }
.slw-cycle-screen-mini-bar { height: 100%; border-radius: 2px; transition: width 0.3s; }
.slw-cycle-screen-mini-bar.pass { background: #22c55e; }
.slw-cycle-screen-mini-bar.fail { background: #ef4444; }
.slw-cycle-screen-logs { margin-top: 10px; border-top: 1px solid var(--slw-border); padding-top: 8px; max-height: 200px; overflow-y: auto; }
.slw-cycle-log-section { margin-bottom: 24px; }
.slw-cycle-log-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px; }
.slw-cycle-log-header h2 { font-size: 1.2rem; margin: 0; color: var(--slw-text); }
.slw-cycle-log-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.slw-cycle-log-filter { padding: 4px 12px; font-size: 0.8rem; border-radius: 6px; }
.slw-cycle-log-filter.active { background: var(--slw-primary); color: white; border-color: var(--slw-primary); }
.slw-cycle-log-container { background: var(--slw-surface); border: 1px solid var(--slw-border); border-radius: 10px; padding: 12px; max-height: 500px; overflow-y: auto; font-family: 'Cascadia Code', 'Consolas', monospace; font-size: 0.82rem; }
.slw-cycle-log-entry { display: flex; align-items: flex-start; gap: 8px; padding: 4px 6px; border-radius: 4px; margin-bottom: 2px; }
.slw-cycle-log-entry:hover { background: var(--slw-bg); }
.slw-cycle-log-time { color: var(--slw-text-muted); font-size: 0.75rem; white-space: nowrap; min-width: 70px; }
.slw-cycle-log-icon { width: 18px; text-align: center; font-weight: 700; flex-shrink: 0; }
.slw-cycle-log-pass .slw-cycle-log-icon { color: #22c55e; }
.slw-cycle-log-fail .slw-cycle-log-icon { color: #ef4444; }
.slw-cycle-log-warn .slw-cycle-log-icon { color: #f59e0b; }
.slw-cycle-log-info .slw-cycle-log-icon { color: var(--slw-primary); }
.slw-cycle-log-screen { color: var(--slw-text-muted); font-size: 0.75rem; white-space: nowrap; min-width: 80px; }
.slw-cycle-log-message { color: var(--slw-text); flex: 1; }
.slw-cycle-log-detail { color: var(--slw-text-muted); font-size: 0.75rem; }
.slw-cycle-loading { display: none; flex-direction: column; align-items: center; justify-content: center; padding: 60px; gap: 16px; }
.slw-cycle-spinner { width: 48px; height: 48px; border: 4px solid var(--slw-border); border-top-color: var(--slw-primary); border-radius: 50%; animation: slw-cycle-spin 1s linear infinite; }
.slw-cycle-spinner-small { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: slw-cycle-spin 0.8s linear infinite; }
@keyframes slw-cycle-spin { to { transform: rotate(360deg); } }
.slw-cycle-empty { text-align: center; padding: 60px 20px; }
.slw-cycle-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.slw-cycle-empty h2 { color: var(--slw-text); margin-bottom: 8px; }
.slw-cycle-empty p { color: var(--slw-text-muted); margin-bottom: 4px; }
.slw-cycle-empty-note { font-size: 0.85rem; }
@media (max-width: 768px) {
    .slw-cycle-header { flex-direction: column; }
    .slw-cycle-screens-grid { grid-template-columns: 1fr; }
    .slw-cycle-stats { grid-template-columns: repeat(2, 1fr); }
    .slw-cycle-log-entry { flex-wrap: wrap; }
    .slw-cycle-log-screen { min-width: auto; }
}

/* ===========================================================================
   Legal AI Chatbot Widget - Modern, Clear, Solid & High-Contrast
   =========================================================================== */
.slw-chat-fab {
    position: fixed;
    bottom: 24px;
    inset-inline-end: 24px;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff !important;
    border: none;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(30, 64, 175, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99998;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
}
.slw-chat-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 32px rgba(30, 64, 175, 0.5), 0 4px 10px rgba(0, 0, 0, 0.2);
}
.slw-chat-fab svg {
    color: #ffffff;
}
.slw-chat-fab-badge {
    position: absolute;
    top: -2px;
    inset-inline-end: -2px;
    background: #ef4444;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
}

.slw-chat-panel {
    position: fixed;
    bottom: 92px;
    inset-inline-end: 24px;
    width: 440px;
    max-width: calc(100vw - 32px);
    height: 620px;
    max-height: calc(100vh - 120px);
    background: #ffffff !important;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25), 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    z-index: 99999;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    font-family: inherit;
}
[data-theme="dark"] .slw-chat-panel {
    background: #161b22 !important;
    border-color: #30363d;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 4px 16px rgba(0, 0, 0, 0.3);
}

.slw-chat-header {
    padding: 14px 18px;
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%) !important;
    color: #ffffff !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.slw-chat-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}
.slw-chat-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.slw-chat-title {
    font-weight: 700;
    font-size: 15px;
    color: #ffffff;
    line-height: 1.2;
}
.slw-chat-status {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.85);
    margin-top: 3px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.slw-chat-status::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    background: #10b981;
    border-radius: 50%;
}
.slw-chat-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.slw-chat-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.slw-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: #f8fafc !important;
}
[data-theme="dark"] .slw-chat-messages {
    background: #0d1117 !important;
}

.slw-chat-welcome {
    text-align: center;
    padding: 24px 16px;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    color: #475569;
}
[data-theme="dark"] .slw-chat-welcome {
    background: #1c2330;
    border-color: #30363d;
    color: #94a3b8;
}
.slw-chat-welcome-icon {
    font-size: 40px;
    margin-bottom: 8px;
}
.slw-chat-welcome p {
    margin: 4px 0;
    font-size: 13.5px;
    line-height: 1.5;
}

.slw-chat-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    animation: slw-chat-fade-in 0.25s ease;
}
@keyframes slw-chat-fade-in {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.slw-chat-message-user {
    flex-direction: row-reverse;
}
.slw-chat-avatar-small {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #1e40af;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

.slw-chat-bubble {
    max-width: 85%;
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.65;
    word-wrap: break-word;
}
.slw-chat-bubble-user {
    background: #1e40af !important;
    color: #ffffff !important;
    border-bottom-inset-inline-end-radius: 4px;
    font-weight: 500;
}
.slw-chat-bubble-bot {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #cbd5e1;
    border-bottom-inset-inline-start-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .slw-chat-bubble-bot {
    background: #1c2330 !important;
    color: #f1f5f9 !important;
    border-color: #30363d;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.slw-chat-bubble-bot h2,
.slw-chat-bubble-bot h3,
.slw-chat-bubble-bot h4 {
    margin: 10px 0 4px;
    font-size: 14.5px;
    font-weight: 700;
    color: #1e40af;
}
[data-theme="dark"] .slw-chat-bubble-bot h2,
[data-theme="dark"] .slw-chat-bubble-bot h3,
[data-theme="dark"] .slw-chat-bubble-bot h4 {
    color: #60a5fa;
}
.slw-chat-bubble-bot blockquote {
    border-inline-start: 3px solid #2563eb;
    padding-inline-start: 10px;
    margin: 8px 0;
    color: #334155;
    background: #f1f5f9;
    padding: 6px 10px;
    border-radius: 4px;
}
[data-theme="dark"] .slw-chat-bubble-bot blockquote {
    color: #cbd5e1;
    background: #161b22;
}
.slw-chat-bubble-bot ul {
    margin: 6px 0;
    padding-inline-start: 22px;
}
.slw-chat-bubble-bot li {
    margin: 3px 0;
}
.slw-chat-bubble-bot strong {
    color: #0f172a;
    font-weight: 700;
}
[data-theme="dark"] .slw-chat-bubble-bot strong {
    color: #ffffff;
}
.slw-chat-bubble-bot code {
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12.5px;
    font-family: monospace;
}
[data-theme="dark"] .slw-chat-bubble-bot code {
    background: #161b22;
    color: #93c5fd;
}

.slw-chat-typing {
    display: flex;
    gap: 5px;
    align-items: center;
    padding: 14px 18px;
}
.slw-chat-typing span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #64748b;
    animation: slw-chat-bounce 1.4s infinite;
}
.slw-chat-typing span:nth-child(2) { animation-delay: 0.2s; }
.slw-chat-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes slw-chat-bounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-7px); opacity: 1; }
}

.slw-chat-suggestions {
    padding: 8px 14px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
    background: #ffffff !important;
    border-top: 1px solid #e2e8f0;
}
[data-theme="dark"] .slw-chat-suggestions {
    background: #161b22 !important;
    border-color: #30363d;
}
.slw-chat-suggestion {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #1e293b;
    padding: 5px 11px;
    border-radius: 16px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}
[data-theme="dark"] .slw-chat-suggestion {
    background: #1c2330;
    border-color: #30363d;
    color: #e2e8f0;
}
.slw-chat-suggestion:hover {
    background: #1e40af;
    color: #ffffff;
    border-color: #1e40af;
}

.slw-chat-input-area {
    padding: 10px 14px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    gap: 8px;
    align-items: flex-end;
    flex-shrink: 0;
    background: #ffffff !important;
}
[data-theme="dark"] .slw-chat-input-area {
    background: #161b22 !important;
    border-color: #30363d;
}
.slw-chat-input {
    flex: 1;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 13.5px;
    resize: none;
    outline: none;
    background: #f8fafc !important;
    color: #0f172a !important;
    font-family: inherit;
    max-height: 100px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
[data-theme="dark"] .slw-chat-input {
    background: #0d1117 !important;
    color: #f1f5f9 !important;
    border-color: #30363d;
}
.slw-chat-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.slw-chat-send {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #1e40af;
    color: #ffffff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s ease, transform 0.1s ease;
}
.slw-chat-send:hover {
    background: #1d4ed8;
    transform: scale(1.04);
}
.slw-chat-send:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.slw-chat-citations {
    padding: 10px 12px;
    margin: 6px 0 2px 0;
    background: #ffffff !important;
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme="dark"] .slw-chat-citations {
    background: #161b22 !important;
    border-color: #30363d;
}
.slw-chat-citations-title {
    font-size: 12px;
    font-weight: 700;
    color: #1e40af;
    margin-bottom: 6px;
}
[data-theme="dark"] .slw-chat-citations-title {
    color: #60a5fa;
}
.slw-chat-citations ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.slw-chat-citations li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 0;
    font-size: 12.5px;
    border-bottom: 1px dashed #e2e8f0;
}
[data-theme="dark"] .slw-chat-citations li {
    border-color: #30363d;
}
.slw-chat-citations li:last-child {
    border-bottom: none;
}

.slw-chat-history-card { width: 100%; max-width: 1100px; margin: 0 auto; padding: 24px; }
.slw-chat-history-card .slw-page-head { margin-block-end: 20px; }
.slw-chat-history-card h1 { margin: 0; font-size: 22px; }
.slw-page-subtitle { margin: 5px 0 0; color: var(--slw-text-secondary); font-size: 13px; }
.slw-chat-history-list { display: grid; gap: 14px; }
.slw-chat-history-item { border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); padding: 16px; background: var(--slw-surface); }
.slw-chat-history-item > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-block-end: 10px; }
.slw-chat-history-item time { color: var(--slw-text-secondary); font-size: 12px; }
.slw-chat-history-item h2 { margin: 0 0 10px; font-size: 16px; }
.slw-chat-history-answer { white-space: pre-wrap; line-height: 1.7; font-size: 14px; color: var(--slw-text-primary); }
.slw-chat-cite-icon {
    font-size: 14px;
}
.slw-chat-cite-source {
    color: #1e293b;
    font-weight: 600;
}
[data-theme="dark"] .slw-chat-cite-source {
    color: #e2e8f0;
}

@media (max-width: 480px) {
    .slw-chat-panel {
        width: calc(100vw - 20px);
        inset-inline-end: 10px;
        bottom: 84px;
        height: calc(100vh - 100px);
    }
    .slw-chat-fab {
        inset-inline-end: 16px;
        bottom: 16px;
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   Legal Library & Templates (SCR-LEG-005)
   ========================================================================== */
.slw-legal-library-card,
.slw-legal-templates-card {
    padding: 24px;
}

.slw-legal-library-head,
.slw-legal-templates-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 20px;
}

.slw-legal-library-head h1,
.slw-legal-templates-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--slw-text-primary);
}

.slw-legal-library-actions,
.slw-legal-templates-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.slw-legal-library-toolbar,
.slw-legal-templates-toolbar {
    display: flex;
    gap: 12px;
    margin-block-end: 16px;
    flex-wrap: wrap;
}

.slw-legal-library-search,
.slw-legal-templates-search {
    flex: 1 1 240px;
    min-width: 200px;
    padding: 8px 14px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    font-size: 14px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
}

.slw-legal-library-search:focus,
.slw-legal-templates-search:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 3px rgba(20, 93, 160, .12);
}

.slw-legal-library-category,
.slw-legal-templates-category {
    flex: 0 1 200px;
    padding: 8px 14px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    font-size: 14px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    cursor: pointer;
}

/* Legal library search section */
.slw-legal-library-search-section {
    margin-block-start: 24px;
}

.slw-legal-library-search-section h2 {
    font-size: 18px;
    font-weight: 700;
    margin-block: 0 12px;
    color: var(--slw-text-primary);
}

.slw-legal-library-search-row {
    display: flex;
    gap: 10px;
    margin-block-end: 14px;
    flex-wrap: wrap;
}

.slw-legal-library-search-input {
    flex: 1 1 300px;
    min-width: 200px;
    padding: 10px 16px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    font-size: 14px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
}

.slw-legal-library-search-input:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 3px rgba(20, 93, 160, .12);
}

.slw-legal-library-search-results {
    display: grid;
    gap: 12px;
}

.slw-legal-search-result {
    padding: 14px 16px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    transition: border-color var(--slw-transition);
}

.slw-legal-search-result:hover {
    border-color: var(--slw-primary);
}

.slw-legal-search-result-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block-end: 6px;
    flex-wrap: wrap;
}

.slw-legal-search-result-head h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--slw-text-primary);
}

.slw-legal-search-result-score {
    font-size: 11px;
    color: var(--slw-text-secondary);
    white-space: nowrap;
}

.slw-legal-search-result-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--slw-text-secondary);
}

.slw-legal-search-result-meta {
    margin-block-start: 6px;
    font-size: 11px;
    color: var(--slw-text-secondary);
}

.slw-divider {
    border: none;
    border-block-start: 1px solid var(--slw-border);
    margin-block: 24px;
}

/* Modal body for law detail */
.slw-modal-body {
    max-height: 60vh;
    overflow-y: auto;
    margin-block-end: 16px;
}

.slw-law-detail-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    margin-block-end: 16px;
}

.slw-law-detail-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.slw-law-detail-info-item .label {
    font-size: 11px;
    color: var(--slw-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.slw-law-detail-info-item .value {
    font-size: 14px;
    font-weight: 600;
    color: var(--slw-text-primary);
}

.slw-law-articles-list {
    display: grid;
    gap: 8px;
}

.slw-law-article-item {
    padding: 10px 14px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
}

.slw-law-article-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-block-end: 4px;
}

.slw-law-article-item-head strong {
    font-size: 13px;
    color: var(--slw-primary);
}

.slw-law-article-item-text {
    font-size: 13px;
    line-height: 1.6;
    color: var(--slw-text-secondary);
}

/* ==========================================================================
   Legal Templates - Card Grid Layout
   ========================================================================== */
.slw-legal-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
    margin-block-start: 8px;
}

.slw-legal-template-card {
    display: flex;
    flex-direction: column;
    padding: 18px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    background: var(--slw-surface);
    transition: box-shadow var(--slw-transition), border-color var(--slw-transition);
}

.slw-legal-template-card:hover {
    box-shadow: var(--slw-shadow);
    border-color: var(--slw-primary);
}

.slw-legal-template-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-block-end: 10px;
}

.slw-legal-template-card-head h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--slw-text-primary);
    line-height: 1.4;
}

.slw-legal-template-card-desc {
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--slw-text-secondary);
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.slw-legal-template-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-block-end: 12px;
}

.slw-legal-template-card-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-block-start: 12px;
    border-block-start: 1px solid var(--slw-border);
}

/* Document preview modal body */
.slw-document-preview-body {
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px;
    background: var(--slw-surface);
    border-radius: var(--slw-radius-sm);
    border: 1px solid var(--slw-border);
    font-size: 14px;
    line-height: 1.8;
}

.slw-document-preview-body h1,
.slw-document-preview-body h2,
.slw-document-preview-body h3 {
    color: var(--slw-text-primary);
    margin-block: 12px 8px;
}

.slw-document-preview-body p {
    margin-block: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .slw-legal-templates-grid {
        grid-template-columns: 1fr;
    }
    .slw-legal-library-head,
    .slw-legal-templates-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .slw-legal-library-actions,
    .slw-legal-templates-actions {
        width: 100%;
    }
    .slw-legal-library-toolbar,
    .slw-legal-templates-toolbar {
        flex-direction: column;
    }
    .slw-legal-library-search,
    .slw-legal-templates-search,
    .slw-legal-library-category,
    .slw-legal-templates-category {
        flex: 1 1 100%;
    }
}

/* ===========================================================================
   Task Module - Full Page Design (ported from reference app-card style)
   =========================================================================== */

/* Task page header with view toggle */
.slw-task-page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-end: 20px;
}
.slw-task-page-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}
.slw-task-view-toggle {
    display: inline-flex;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    overflow: hidden;
}
.slw-task-view-toggle a {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    color: var(--slw-text-secondary);
    background: var(--slw-surface);
    text-decoration: none;
    transition: all var(--slw-transition);
    display: flex;
    align-items: center;
    gap: 6px;
}
.slw-task-view-toggle a:hover {
    background: var(--slw-surface-hover);
    color: var(--slw-primary);
}
.slw-task-view-toggle a.active {
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
}

/* Task stats row - compact cards */
.slw-task-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-block-end: 20px;
}
.slw-task-stat {
    padding: 14px 16px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: box-shadow var(--slw-transition);
}
.slw-task-stat:hover { box-shadow: var(--slw-shadow); }
.slw-task-stat-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--slw-text-secondary);
    font-weight: 600;
}
.slw-task-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--slw-text-primary);
}
.slw-task-stat.slw-stat-warning .slw-task-stat-value { color: var(--slw-warning); }
.slw-task-stat.slw-stat-info .slw-task-stat-value { color: var(--slw-primary); }
.slw-task-stat.slw-stat-danger .slw-task-stat-value { color: var(--slw-danger); }
.slw-task-stat.slw-stat-success .slw-task-stat-value { color: var(--slw-success); }

/* Task filters bar */
.slw-task-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-block-end: 20px;
    padding: 14px 16px;
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
}
.slw-task-filters select,
.slw-task-filters input[type="text"],
.slw-task-filters input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-xs);
    font-size: 13px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    min-width: 120px;
}
.slw-task-filters label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--slw-text-secondary);
    cursor: pointer;
}

/* Kanban Board */
.slw-kanban-board {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}
.slw-kanban-col {
    border-radius: var(--slw-radius);
    border: 1px solid var(--slw-border);
    background: var(--slw-surface-2);
    display: flex;
    flex-direction: column;
    max-height: 75vh;
    overflow: hidden;
}
.slw-kanban-col-header {
    padding: 12px 14px;
    font-weight: 700;
    font-size: 14px;
    border-block-end: 2px solid var(--slw-border);
    background: var(--slw-surface);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.slw-kanban-col-count {
    background: var(--slw-primary-light);
    color: var(--slw-primary);
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.slw-kanban-drop-zone {
    padding: 12px;
    overflow-y: auto;
    flex-grow: 1;
    min-height: 200px;
    scrollbar-width: thin;
}
.slw-kanban-drop-zone::-webkit-scrollbar { width: 6px; }
.slw-kanban-drop-zone::-webkit-scrollbar-thumb { background: var(--slw-border); border-radius: 3px; }
.slw-kanban-drop-zone.drag-over {
    background: rgba(37, 99, 235, 0.05);
    border: 2px dashed var(--slw-primary);
}
.slw-kanban-task-card {
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    padding: 12px 14px;
    margin-block-end: 10px;
    cursor: grab;
    transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    text-decoration: none;
    display: block;
    color: inherit;
}
.slw-kanban-task-card:hover {
    box-shadow: 0 3px 8px rgba(0,0,0,0.10);
    border-color: var(--slw-primary);
    transform: translateY(-1px);
    text-decoration: none;
}
.slw-kanban-task-card:active { cursor: grabbing; }
.slw-kanban-task-card.dragging { opacity: 0.5; transform: rotate(2deg); }
.slw-kanban-task-card-title {
    font-size: 14px;
    font-weight: 700;
    margin-block-end: 6px;
    line-height: 1.35;
    word-wrap: break-word;
    color: var(--slw-text-primary);
}
.slw-kanban-task-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-block-end: 6px;
}
.slw-kanban-task-card-meta {
    font-size: 12px;
    color: var(--slw-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}
.slw-kanban-task-card-assignees {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-block-start: 8px;
}

/* Avatar circle */
.slw-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
    color: #fff;
    background: var(--slw-primary);
}
.slw-avatar.slw-avatar-sm { width: 28px; height: 28px; font-size: 12px; }
.slw-avatar.slw-avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.slw-avatar.slw-avatar-success { background: var(--slw-success); }
.slw-avatar.slw-avatar-warning { background: var(--slw-warning); }
.slw-avatar.slw-avatar-danger { background: var(--slw-danger); }
.slw-avatar.slw-avatar-info { background: var(--slw-primary); }
.slw-avatar.slw-avatar-secondary { background: var(--slw-text-secondary); }

/* Badge */
.slw-badge-task {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.slw-badge-task.slw-badge-secondary { background: var(--slw-surface-hover); color: var(--slw-text-secondary); }
.slw-badge-task.slw-badge-warning { background: #fef3c7; color: #92400e; }
.slw-badge-task.slw-badge-danger { background: #fee2e2; color: #991b1b; }
.slw-badge-task.slw-badge-success { background: #d1fae5; color: #065f46; }
.slw-badge-task.slw-badge-info { background: var(--slw-primary-light); color: var(--slw-primary); }

/* Task create/edit - 2 column layout */
.slw-task-edit-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .slw-task-edit-layout { grid-template-columns: 1fr; }
}

/* Task section card (app-card equivalent) */
.slw-task-section {
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    margin-block-end: 16px;
    overflow: hidden;
}
.slw-task-section-header {
    padding: 14px 20px;
    border-block-end: 1px solid var(--slw-border);
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
.slw-task-section-body { padding: 20px; }

/* Task form grid */
.slw-task-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}
.slw-task-form-grid .slw-field-full { grid-column: 1 / -1; }
.slw-task-form-grid .slw-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.slw-task-form-grid .slw-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--slw-text-secondary);
}
.slw-task-form-grid .slw-field input,
.slw-task-form-grid .slw-field select,
.slw-task-form-grid .slw-field textarea {
    padding: 8px 12px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-xs);
    font-size: 14px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    font-family: inherit;
}
.slw-task-form-grid .slw-field input:focus,
.slw-task-form-grid .slw-field select:focus,
.slw-task-form-grid .slw-field textarea:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Assignee combo box + table */
.slw-assignee-search-wrap {
    position: relative;
    margin-block-end: 12px;
}
.slw-assignee-search-input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-xs);
    font-size: 14px;
    background: var(--slw-surface);
}
.slw-assignee-search-icon {
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--slw-text-secondary);
}
.slw-assignee-dropdown {
    position: absolute;
    z-index: 1050;
    max-height: 280px;
    overflow-y: auto;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    box-shadow: var(--slw-shadow-lg);
    width: 100%;
    min-width: 300px;
    display: none;
}
.slw-assignee-dropdown.open { display: block; }
.slw-assignee-dropdown-item {
    padding: 10px 14px;
    cursor: pointer;
    border-block-end: 1px solid var(--slw-border);
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background 0.15s;
}
.slw-assignee-dropdown-item:last-child { border-block-end: none; }
.slw-assignee-dropdown-item:hover { background: var(--slw-surface-hover); }
.slw-assignee-dropdown-item.selected { opacity: 0.4; pointer-events: none; }
.slw-assignee-dropdown-item .emp-info { flex-grow: 1; }
.slw-assignee-dropdown-item .emp-info .name { font-weight: 600; font-size: 14px; }
.slw-assignee-dropdown-item .emp-info .meta { font-size: 12px; color: var(--slw-text-secondary); }

/* Assignee table */
.slw-assignee-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.slw-assignee-table th {
    text-align: start;
    padding: 8px 10px;
    background: var(--slw-surface-2);
    border: 1px solid var(--slw-border);
    font-weight: 600;
    font-size: 12px;
}
.slw-assignee-table td {
    padding: 8px 10px;
    border: 1px solid var(--slw-border);
    vertical-align: middle;
}
.slw-assignee-table tr.hidden-row { display: none; }
.slw-assignee-table .assignee-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}
.slw-assignee-table .assignee-cell .name { font-weight: 600; }
.slw-assignee-table .assignee-cell .meta { font-size: 11px; color: var(--slw-text-secondary); }

/* Timeline */
.slw-timeline-feed {
    position: relative;
    padding-inline-start: 0;
}
.slw-timeline-entry {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-block-end: 1px solid var(--slw-border);
}
.slw-timeline-entry:last-child { border-block-end: none; }
.slw-timeline-entry-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
    background: var(--slw-primary);
}
.slw-timeline-entry-content { flex-grow: 1; }
.slw-timeline-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-block-end: 4px;
}
.slw-timeline-entry-header strong { font-size: 14px; }
.slw-timeline-entry-header .time { font-size: 12px; color: var(--slw-text-secondary); }
.slw-timeline-entry-body { font-size: 14px; line-height: 1.6; }
.slw-timeline-entry-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-block-start: 8px;
}
.slw-timeline-entry-attachment {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-xs);
    font-size: 12px;
    text-decoration: none;
    color: var(--slw-text-secondary);
    transition: all var(--slw-transition);
}
.slw-timeline-entry-attachment:hover {
    border-color: var(--slw-primary);
    color: var(--slw-primary);
    text-decoration: none;
}

/* Comment form */
.slw-comment-form {
    margin-block-end: 20px;
}
.slw-comment-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    font-size: 14px;
    resize: vertical;
    min-height: 60px;
    font-family: inherit;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
}
.slw-comment-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: 10px;
}

/* Checklist */
.slw-checklist-row {
    display: flex;
    gap: 8px;
    margin-block-end: 8px;
    align-items: center;
}
.slw-checklist-row input[type="text"] {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-xs);
    font-size: 14px;
}

/* Dependency list */
.slw-dep-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-block-end: 1px solid var(--slw-border);
}
.slw-dep-item:last-child { border-block-end: none; }
.slw-dep-item a { font-size: 13px; }

/* Gantt chart */
.slw-gantt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.slw-gantt-table th {
    text-align: start;
    padding: 10px 14px;
    background: var(--slw-surface-2);
    border: 1px solid var(--slw-border);
    font-weight: 600;
}
.slw-gantt-table td {
    padding: 6px;
    border: 1px solid var(--slw-border);
    vertical-align: middle;
}
.slw-gantt-bar {
    position: absolute;
    border-radius: 4px;
    background: var(--slw-primary);
    color: #fff;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
    transition: background 0.2s;
}
.slw-gantt-bar:hover { background: var(--slw-primary-hover); }
.slw-gantt-bar a { color: #fff; text-decoration: none; }

/* Task detail page */
.slw-task-detail-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 991.98px) {
    .slw-task-detail-layout { grid-template-columns: 1fr; }
}
.slw-task-detail-meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-block-end: 16px;
}
.slw-task-detail-meta-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.slw-task-detail-meta-item .label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--slw-text-secondary);
    font-weight: 600;
}
.slw-task-detail-meta-item .value {
    font-size: 14px;
    font-weight: 600;
}

/* Empty state */
.slw-task-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--slw-text-secondary);
}
.slw-task-empty-icon {
    font-size: 48px;
    margin-block-end: 12px;
    opacity: 0.4;
}

/* Task action buttons */
.slw-task-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-block-end: 16px;
}

/* Print */
@media print {
    .slw-sidebar, .slw-appbar, .slw-task-actions, .slw-task-filters, .slw-task-view-toggle, .no-print,
    .slw-filters, .slw-tabs, .slw-btn, .slw-modal, .slw-alert { display: none !important; }
    .slw-task-edit-layout, .slw-task-detail-layout { grid-template-columns: 1fr !important; }

    .slw-print-header { display: block !important; text-align: center; margin-bottom: 20px; }
    .slw-print-header h2 { font-size: 18px; margin-bottom: 4px; }
    .slw-print-header p { font-size: 12px; color: #666; }

    .slw-table-wrap { border: 1px solid #000; overflow: visible; }
    .slw-table { min-width: auto; font-size: 11px; }
    .slw-table thead th { background: #f0f0f0; color: #000; font-size: 10px; border-block-end: 2px solid #000; }
    .slw-table tbody td { border-block-end: 1px solid #ccc; }
    .slw-table tfoot td { border-block-start: 2px solid #000; font-weight: bold; }

    .slw-chart-card { border: 1px solid #000; page-break-inside: avoid; }
    .slw-chart-bar-fill { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}

/* ===========================================================================
   UI Polish - Unified Card / Form / Button System for HR & All Screens
   Addresses: card headers, form bodies, button alignment, edges, responsive
   =========================================================================== */

/* ---------- Card header & body (used by HR/Payroll/ESS screens) ---------- */
.slw-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
    margin-block-end: 0;
}
.slw-card-head h1,
.slw-card-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--slw-text-primary);
    line-height: 1.3;
}
.slw-card-head .slw-btn { flex-shrink: 0; }

.slw-card-body {
    padding: 24px;
}
.slw-card > .slw-card-body { padding: 24px; }
.slw-card > .slw-card-head + .slw-card-body { padding-block-start: 24px; }

/* When card has head but no explicit body, pad the direct content */
.slw-card > .slw-card-head ~ *:not(.slw-card-body):not(.slw-card-head) {
    padding-inline: 24px;
}
.slw-card > .slw-card-head ~ .slw-table-wrap:first-of-type {
    border-radius: 0;
    border-inline: none;
    border-block-end: none;
}
.slw-card > .slw-card-head + .slw-table-wrap {
    border-radius: 0;
    border-inline: none;
    border-block-start: none;
}

/* ---------- Unified form styling ---------- */
.slw-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 20px;
    row-gap: 16px;
    padding: 24px;
}
.slw-form > .slw-field { min-width: 0; }
.slw-form > .slw-form-row,
.slw-form > .slw-alert,
.slw-form > .slw-modal-actions,
.slw-form > footer,
.slw-form > h2,
.slw-form > .slw-table-wrap,
.slw-form > .slw-payroll-actions,
.slw-form > .slw-form-actions,
.slw-form > .slw-btn,
.slw-form > button,
.slw-form > .slw-form-full {
    grid-column: 1 / -1;
}
.slw-form > input[type="hidden"] { display: none; }

/* Form actions row (bottom buttons) */
.slw-form-actions,
.slw-payroll-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-block-start: 20px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--slw-border);
}
.slw-payroll-actions { justify-content: flex-start; }

/* ---------- Button system polish ---------- */
.slw-btn {
    min-height: 38px;
    padding-block: 9px;
    padding-inline: 18px;
    border-radius: var(--slw-radius-sm);
    font-weight: 600;
    font-size: 14px;
    line-height: 1.2;
    transition: all 0.18s ease;
    white-space: nowrap;
}
.slw-btn:hover:not(:disabled) { transform: translateY(-1px); }
.slw-btn:active:not(:disabled) { transform: translateY(0); }

.slw-btn-primary {
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
    border: 1px solid var(--slw-primary);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
}
.slw-btn-primary:hover:not(:disabled) {
    background: var(--slw-primary-hover);
    border-color: var(--slw-primary-hover);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.slw-btn-secondary {
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    border: 1px solid var(--slw-border);
}
.slw-btn-secondary:hover:not(:disabled) {
    background: var(--slw-surface-hover);
    border-color: var(--slw-primary);
    color: var(--slw-primary);
}

.slw-btn-success {
    background: var(--slw-success);
    color: #fff;
    border: 1px solid var(--slw-success);
    box-shadow: 0 1px 2px rgba(5, 150, 105, 0.15);
}
.slw-btn-success:hover:not(:disabled) {
    background: #047857;
    border-color: #047857;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25);
}

.slw-btn-danger {
    background: var(--slw-danger);
    color: #fff;
    border: 1px solid var(--slw-danger);
    box-shadow: 0 1px 2px rgba(220, 38, 38, 0.15);
}
.slw-btn-danger:hover:not(:disabled) {
    background: #b91c1c;
    border-color: #b91c1c;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.slw-btn-ghost {
    background: transparent;
    border: 1px solid transparent;
    color: var(--slw-text-secondary);
}
.slw-btn-ghost:hover:not(:disabled) {
    background: var(--slw-surface-hover);
    color: var(--slw-text-primary);
    border-color: var(--slw-border);
}

.slw-btn-sm {
    min-height: 30px;
    padding-block: 5px;
    padding-inline: 12px;
    font-size: 13px;
    border-radius: var(--slw-radius-xs);
}

.slw-btn-lg {
    min-height: 46px;
    padding-block: 12px;
    padding-inline: 24px;
    font-size: 15px;
}

/* ---------- Field polish ---------- */
.slw-field input,
.slw-field select,
.slw-field textarea,
.slw-form input,
.slw-form select,
.slw-form textarea {
    min-height: 38px;
    padding-block: 9px;
    padding-inline: 12px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    font: inherit;
    font-size: 14px;
    width: 100%;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.slw-field input:focus,
.slw-field select:focus,
.slw-field textarea:focus,
.slw-form input:focus,
.slw-form select:focus,
.slw-form textarea:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.slw-field label {
    font-weight: 600;
    font-size: 13px;
    color: var(--slw-text-primary);
    margin-block-end: 6px;
}
.slw-field { margin-block-end: 0; }

/* Form row (2-col inside forms) */
.slw-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    grid-column: 1 / -1;
}
.slw-form-row > .slw-field { min-width: 0; }

/* ---------- Toolbar alignment ---------- */
.slw-toolbar,
.slw-emp-filters,
.slw-clients-toolbar,
.slw-cases-toolbar,
.slw-invoices-toolbar,
.slw-journal-toolbar,
.slw-receipts-toolbar,
.slw-vouchers-toolbar,
.slw-branches-toolbar,
.slw-users-toolbar,
.slw-courts-toolbar,
.slw-statement-toolbar,
.slw-accounts-toolbar,
.slw-org-head + .slw-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-end: 20px;
}
.slw-toolbar > .slw-btn,
.slw-toolbar > button { flex-shrink: 0; }
.slw-toolbar > input,
.slw-toolbar > select,
.slw-toolbar > .slw-search-input { flex: 1 1 200px; min-width: 0; }

/* ---------- Page head alignment ---------- */
.slw-page-head,
.slw-emp-head,
.slw-org-head,
.slw-branches-head,
.slw-users-head,
.slw-roles-head,
.slw-clients-head,
.slw-cases-head,
.slw-invoices-head,
.slw-journal-head,
.slw-receipts-head,
.slw-vouchers-head,
.slw-courts-head,
.slw-statement-head,
.slw-accounts-head,
.slw-folders-head,
.slw-files-head,
.slw-trust-head,
.slw-lookups-head,
.slw-cases-head,
.slw-sessions-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-block-end: 20px;
}
.slw-page-head h1,
.slw-emp-head h1,
.slw-org-head h1,
.slw-branches-head h1,
.slw-users-head h1,
.slw-roles-head h1,
.slw-clients-head h1,
.slw-cases-head h1,
.slw-invoices-head h1,
.slw-journal-head h1,
.slw-receipts-head h1,
.slw-vouchers-head h1,
.slw-courts-head h1,
.slw-statement-head h1,
.slw-accounts-head h1,
.slw-folders-head h1,
.slw-files-head h1,
.slw-trust-head h1,
.slw-lookups-head h1,
.slw-sessions-head h1 {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--slw-text-primary);
}

/* ---------- Card padding consistency ---------- */
.slw-card {
    padding: 0;
    overflow: visible;
}
/* Modal dialogs that also carry .slw-card must stay scrollable */
.slw-modal-dialog.slw-card {
    padding: 28px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(86vh, 760px);
}
.slw-card > *:not(.slw-card-head):not(.slw-card-body):not(.slw-table-wrap):not(.slw-modal-dialog) {
    padding-inline: 24px;
}
.slw-card > .slw-alert:first-child { padding: 16px 24px; }

/* Keep explicit padding classes working */
.slw-emp-card,
.slw-org-card,
.slw-branches-card,
.slw-users-card,
.slw-roles-card,
.slw-clients-card,
.slw-cases-card,
.slw-invoices-card,
.slw-journal-card,
.slw-receipts-card,
.slw-vouchers-card,
.slw-courts-card,
.slw-statement-card,
.slw-accounts-card,
.slw-folders-card,
.slw-trust-card,
.slw-lookups-card,
.slw-sessions-card,
.slw-case-expenses-card,
.slw-payroll-card {
    padding: 24px;
}

/* ---------- Table polish ---------- */
.slw-table {
    border-radius: var(--slw-radius-sm);
    overflow: hidden;
}
.slw-table thead th {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--slw-text-secondary);
    background: var(--slw-surface-2);
    padding-block: 14px;
    padding-inline: 16px;
    border-block-end: 2px solid var(--slw-border);
}
.slw-table tbody td {
    padding-block: 14px;
    padding-inline: 16px;
    font-size: 14px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-table tbody tr:last-child td { border-block-end: none; }
.slw-table tbody tr:hover { background: var(--slw-surface-hover); }

/* ---------- Badge polish ---------- */
.slw-badge {
    padding-block: 4px;
    padding-inline: 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}
.slw-badge-pending,
.slw-badge-pendingapproval {
    background: rgba(217, 119, 6, 0.12);
    color: var(--slw-warning);
}
.slw-badge-approved { background: rgba(5, 150, 105, 0.12); color: var(--slw-success); }
.slw-badge-rejected { background: rgba(220, 38, 38, 0.12); color: var(--slw-danger); }
.slw-badge-draft { background: var(--slw-surface-2); color: var(--slw-text-secondary); }
.slw-badge-cancelled { background: var(--slw-surface-2); color: var(--slw-text-secondary); }
.slw-badge-active { background: rgba(5, 150, 105, 0.12); color: var(--slw-success); }

/* ---------- Modal polish ---------- */
.slw-modal-dialog {
    border-radius: var(--slw-radius);
    box-shadow: var(--slw-shadow-lg);
    padding: 28px;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: min(86vh, 760px);
}
.slw-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-block-end: 24px;
    padding-block-end: 16px;
    border-block-end: 1px solid var(--slw-border);
    position: sticky;
    top: -28px;
    background: var(--slw-surface);
    z-index: 2;
    margin: -28px -28px 24px;
    padding: 20px 28px;
}
.slw-modal-head h2 { font-size: 20px; font-weight: 700; margin: 0; }
.slw-modal-actions {
    justify-content: flex-end;
    gap: 12px;
    margin-block-start: 24px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--slw-border);
    position: sticky;
    bottom: -28px;
    background: var(--slw-surface);
    margin-inline: -28px;
    padding-inline: 28px;
    padding-block-end: 4px;
}

/* ---------- Alert polish ---------- */
.slw-alert {
    padding: 14px 16px;
    border-radius: var(--slw-radius-sm);
    margin-block-end: 16px;
    font-size: 14px;
    line-height: 1.5;
    border-inline-start: 4px solid;
}

/* ---------- Content max-width & centering ---------- */
.slw-app-content > .slw-card,
.slw-app-content > .slw-emp-card,
.slw-app-content > .slw-org-card,
.slw-app-content > .slw-branches-card,
.slw-app-content > .slw-users-card,
.slw-app-content > .slw-roles-card,
.slw-app-content > .slw-clients-card,
.slw-app-content > .slw-cases-card,
.slw-app-content > .slw-invoices-card,
.slw-app-content > .slw-journal-card,
.slw-app-content > .slw-receipts-card,
.slw-app-content > .slw-vouchers-card,
.slw-app-content > .slw-courts-card,
.slw-app-content > .slw-statement-card,
.slw-app-content > .slw-accounts-card,
.slw-app-content > .slw-folders-card,
.slw-app-content > .slw-trust-card,
.slw-app-content > .slw-lookups-card,
.slw-app-content > .slw-sessions-card,
.slw-app-content > .slw-case-expenses-card,
.slw-app-content > .slw-payroll-card,
.slw-app-content > .slw-card.slw-payroll-card {
    max-width: 1200px;
    margin-inline: auto;
    margin-block-end: 24px;
}

/* ---------- Responsive form & card ---------- */
@media (max-width: 768px) {
    .slw-form { grid-template-columns: 1fr; padding: 16px; }
    .slw-form-row { grid-template-columns: 1fr; gap: 12px; }
    .slw-card-head { padding: 16px; }
    .slw-card-body { padding: 16px; }
    .slw-card > *:not(.slw-card-head):not(.slw-card-body):not(.slw-table-wrap):not(.slw-modal-dialog) { padding-inline: 16px; }
    .slw-emp-card, .slw-org-card, .slw-branches-card, .slw-users-card, .slw-roles-card,
    .slw-clients-card, .slw-cases-card, .slw-invoices-card, .slw-journal-card,
    .slw-receipts-card, .slw-vouchers-card, .slw-courts-card, .slw-statement-card,
    .slw-accounts-card, .slw-folders-card, .slw-trust-card, .slw-lookups-card,
    .slw-sessions-card, .slw-case-expenses-card, .slw-payroll-card { padding: 16px; }
    .slw-form-actions, .slw-payroll-actions { justify-content: stretch; }
    .slw-form-actions .slw-btn, .slw-payroll-actions .slw-btn { flex: 1 1 auto; }
    .slw-page-head, .slw-emp-head, .slw-org-head, .slw-branches-head, .slw-users-head,
    .slw-roles-head, .slw-clients-head, .slw-cases-head, .slw-invoices-head,
    .slw-journal-head, .slw-receipts-head, .slw-vouchers-head, .slw-courts-head,
    .slw-statement-head, .slw-accounts-head, .slw-folders-head, .slw-trust-head,
    .slw-lookups-head, .slw-sessions-head { flex-direction: column; align-items: stretch; }
    .slw-page-head .slw-btn, .slw-emp-head .slw-btn, .slw-org-head .slw-btn,
    .slw-branches-head .slw-btn, .slw-users-head .slw-btn, .slw-roles-head .slw-btn,
    .slw-clients-head .slw-btn, .slw-cases-head .slw-btn, .slw-invoices-head .slw-btn,
    .slw-journal-head .slw-btn, .slw-receipts-head .slw-btn, .slw-vouchers-head .slw-btn,
    .slw-courts-head .slw-btn, .slw-statement-head .slw-btn, .slw-accounts-head .slw-btn,
    .slw-folders-head .slw-btn, .slw-trust-head .slw-btn, .slw-lookups-head .slw-btn,
    .slw-sessions-head .slw-btn { width: 100%; }
    .slw-modal-dialog { padding: 20px; margin: 16px; }
    .slw-modal-dialog form { grid-template-columns: 1fr; }
    .slw-table thead th, .slw-table tbody td { padding-block: 10px; padding-inline: 10px; font-size: 13px; }
}

@media (max-width: 480px) {
    .slw-form-actions, .slw-payroll-actions { flex-direction: column; }
    .slw-form-actions .slw-btn, .slw-payroll-actions .slw-btn { width: 100%; }
    .slw-btn { width: 100%; }
    .slw-btn-sm { width: auto; }
}

/* ---------- HR Dashboard cards polish ---------- */
.slw-hr-stat-card,
.slw-dash-stat-card {
    border-radius: var(--slw-radius);
    border: 1px solid var(--slw-border);
    background: var(--slw-surface);
    box-shadow: var(--slw-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.slw-hr-stat-card:hover,
.slw-dash-stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--slw-shadow-md);
}

/* ---------- ESS Calendar polish ---------- */
.slw-ess-calendar { border-radius: var(--slw-radius); overflow: hidden; }
.slw-ess-calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--slw-surface-2);
    border-block-end: 1px solid var(--slw-border);
}
.slw-ess-calendar-title { font-size: 18px; font-weight: 700; color: var(--slw-text-primary); }
.slw-ess-calendar-nav { display: flex; gap: 8px; }
.slw-ess-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: var(--slw-border);
}
.slw-ess-calendar-day-header {
    padding: 10px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--slw-text-secondary);
    background: var(--slw-surface-2);
    text-transform: uppercase;
}
.slw-ess-calendar-day {
    padding: 10px;
    min-height: 80px;
    background: var(--slw-surface);
    font-size: 13px;
    transition: background 0.15s;
}
.slw-ess-calendar-day:hover { background: var(--slw-surface-hover); }
.slw-ess-calendar-day.today { background: var(--slw-primary-light); font-weight: 700; }
.slw-ess-calendar-day.other-month { background: var(--slw-surface-2); color: var(--slw-text-secondary); }
.slw-ess-calendar-day-number { font-weight: 600; margin-block-end: 4px; }
.slw-ess-calendar-event {
    display: block;
    padding: 2px 6px;
    margin-block-end: 2px;
    border-radius: 4px;
    font-size: 11px;
    background: var(--slw-primary-light);
    color: var(--slw-primary);
}

@media (max-width: 768px) {
    .slw-ess-calendar-day { min-height: 60px; padding: 6px; font-size: 12px; }
    .slw-ess-calendar-event { font-size: 10px; padding: 1px 4px; }
    .slw-ess-calendar-header { flex-direction: column; align-items: stretch; }
    .slw-ess-calendar-nav { justify-content: space-between; }
}

/* ---------- ESS action buttons grid ---------- */
.slw-ess-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-block-end: 24px;
}
.slw-ess-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    text-decoration: none;
    text-align: center;
    transition: all 0.18s ease;
    cursor: pointer;
    font: inherit;
}
.slw-ess-action-btn:hover {
    border-color: var(--slw-primary);
    background: var(--slw-primary-light);
    transform: translateY(-2px);
    box-shadow: var(--slw-shadow-md);
}
.slw-ess-action-icon { font-size: 28px; }
.slw-ess-action-label { font-size: 14px; font-weight: 600; }

@media (max-width: 480px) {
    .slw-ess-actions { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .slw-ess-action-btn { padding: 14px 8px; }
    .slw-ess-action-icon { font-size: 22px; }
    .slw-ess-action-label { font-size: 12px; }
}

/* ---------- Section title in forms ---------- */
.slw-form h2,
.slw-card-body h2,
.slw-card h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--slw-text-primary);
    margin-block: 20px 12px;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--slw-border);
}

/* ---------- Back link ---------- */
.slw-card-head .slw-btn-ghost,
.slw-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--slw-text-secondary);
    text-decoration: none;
    padding: 8px 14px;
    border-radius: var(--slw-radius-sm);
    border: 1px solid var(--slw-border);
    background: var(--slw-surface);
    transition: all 0.18s ease;
}
.slw-card-head .slw-btn-ghost:hover,
.slw-back-link:hover {
    color: var(--slw-primary);
    border-color: var(--slw-primary);
    background: var(--slw-primary-light);
    text-decoration: none;
}

/* ---------- Empty state ---------- */
.slw-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--slw-text-secondary);
}
.slw-empty-state-icon { font-size: 48px; margin-block-end: 12px; opacity: 0.4; }
.slw-empty-state-text { font-size: 15px; font-weight: 500; }
.slw-empty-state-hint { font-size: 13px; margin-block-start: 4px; opacity: 0.7; }

/* ---------- Dark theme tweaks ---------- */
[data-theme="dark"] .slw-btn-secondary { background: var(--slw-surface-2); border-color: var(--slw-border); }
[data-theme="dark"] .slw-btn-secondary:hover:not(:disabled) { background: var(--slw-surface-hover); border-color: var(--slw-primary); }
[data-theme="dark"] .slw-badge-pending,
[data-theme="dark"] .slw-badge-pendingapproval { background: rgba(217, 119, 6, 0.2); }
[data-theme="dark"] .slw-badge-approved { background: rgba(5, 150, 105, 0.2); }
[data-theme="dark"] .slw-badge-rejected { background: rgba(220, 38, 38, 0.2); }
[data-theme="dark"] .slw-ess-calendar-day { background: var(--slw-surface); }
[data-theme="dark"] .slw-ess-calendar-day.other-month { background: var(--slw-surface-2); }
[data-theme="dark"] .slw-ess-calendar-day.today { background: rgba(59, 130, 246, 0.15); }

/* ===========================================================================
   ESS Screen - Complete Layout System
   =========================================================================== */
.slw-ess-card { max-width: 1400px; margin: 0 auto 24px; overflow: visible; }

.slw-ess-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
    background: var(--slw-surface);
}
.slw-ess-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--slw-text-primary); }

.slw-ess-view-switcher {
    display: inline-flex;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    overflow: hidden;
    background: var(--slw-surface-2);
}
.slw-ess-view-btn {
    padding-block: 8px;
    padding-inline: 16px;
    border: none;
    background: transparent;
    color: var(--slw-text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border-radius: 0;
    min-height: 34px;
}
.slw-ess-view-btn:hover { background: var(--slw-surface-hover); color: var(--slw-text-primary); }
.slw-ess-view-btn.active { background: var(--slw-primary); color: var(--slw-primary-contrast); }

.slw-ess-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 0;
    min-height: 600px;
}
.slw-ess-sidebar {
    padding: 20px;
    border-inline-end: 1px solid var(--slw-border);
    background: var(--slw-surface-2);
}
.slw-ess-sidebar h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--slw-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin: 0 0 12px;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-ess-sidebar h3:not(:first-child) { margin-block-start: 24px; }

.slw-ess-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slw-ess-action-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    text-align: start;
    cursor: pointer;
    transition: all 0.18s ease;
}
.slw-ess-action-btn:hover {
    border-color: var(--slw-primary);
    background: var(--slw-primary-light);
    transform: translateX(2px);
}
[dir="rtl"] .slw-ess-action-btn:hover { transform: translateX(-2px); }
.slw-ess-action-icon {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.slw-ess-balance-card { margin-block-start: 24px; padding-block-start: 16px; border-block-start: 1px solid var(--slw-border); }
.slw-ess-balance-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.slw-ess-balance-head h3 { margin: 0 0 12px; border: 0; padding: 0; }
.slw-ess-balance-year { color: var(--slw-text-secondary); font-size: 11px; }
.slw-ess-balance-list { display: flex; flex-direction: column; gap: 10px; }
.slw-ess-balance-item { padding: 10px; border: 1px solid var(--slw-border); border-radius: var(--slw-radius-sm); background: var(--slw-surface); }
.slw-ess-balance-title { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.slw-ess-balance-title strong { color: var(--slw-primary); font-size: 16px; }
.slw-ess-balance-track { height: 5px; margin-block: 7px 5px; border-radius: 99px; background: var(--slw-surface-2); overflow: hidden; }
.slw-ess-balance-track span { display: block; height: 100%; border-radius: inherit; background: var(--slw-primary); }
.slw-ess-balance-item small, .slw-ess-balance-empty, .slw-ess-balance-loading { color: var(--slw-text-secondary); font-size: 11px; }
.slw-ess-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.slw-ess-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--slw-text-secondary);
}
.slw-ess-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.slw-ess-main { padding: 20px; min-width: 0; }

.slw-ess-cal-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block-end: 16px;
    flex-wrap: wrap;
}
.slw-ess-cal-period {
    font-size: 18px;
    font-weight: 700;
    color: var(--slw-text-primary);
    flex: 1;
    text-align: center;
}

.slw-ess-cal-grid {
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    overflow: hidden;
    margin-block-end: 24px;
}
.slw-ess-cal-daynames {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--slw-surface-2);
    border-block-end: 1px solid var(--slw-border);
}
.slw-ess-cal-daynames span {
    padding: 10px 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--slw-text-secondary);
    text-transform: uppercase;
}
.slw-ess-cal-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--slw-border);
}
.slw-ess-cal-grid[data-view="day"] .slw-ess-cal-body { grid-template-columns: 1fr; }
.slw-ess-cal-grid[data-view="week"] .slw-ess-day-cell { min-height: 180px; }
.slw-ess-cal-grid[data-view="day"] .slw-ess-day-cell { min-height: 280px; }
.slw-ess-cal-grid[data-view="day"] .slw-ess-events { max-width: 720px; }
.slw-ess-day-header small { color: var(--slw-text-secondary); font-size: 10px; margin-inline-start: 5px; }
.slw-ess-cal-day {
    padding: 8px;
    min-height: 90px;
    background: var(--slw-surface);
    font-size: 13px;
    transition: background 0.15s;
    overflow: hidden;
}
.slw-ess-cal-day:hover { background: var(--slw-surface-hover); }
.slw-ess-cal-day.other-month { background: var(--slw-surface-2); color: var(--slw-text-secondary); opacity: 0.6; }
.slw-ess-cal-day.today { background: var(--slw-primary-light); }
.slw-ess-cal-day-num { font-weight: 700; margin-block-end: 4px; font-size: 13px; }
.slw-ess-cal-event {
    display: block;
    padding: 2px 6px;
    margin-block-end: 2px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    background: var(--slw-primary-light);
    color: var(--slw-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slw-payslips-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.slw-payslips-head h1 { margin: 0 0 5px; }
.slw-payslips-head p { margin: 0; color: var(--slw-text-secondary); font-size: 13px; }
.slw-payslips-actions { display: flex; align-items: center; gap: 10px; }
.slw-payslips-actions select { min-width: 220px; }
.slw-ess-requests-section { margin-block-start: 24px; }
.slw-ess-requests-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--slw-text-primary);
    margin: 0 0 12px;
    padding-block-end: 8px;
    border-block-end: 1px solid var(--slw-border);
}

/* ESS Responsive */
@media (max-width: 992px) {
    .slw-ess-layout { grid-template-columns: 220px 1fr; }
}
@media (max-width: 768px) {
    .slw-payslips-head, .slw-payslips-actions { align-items: stretch; flex-direction: column; }
    .slw-payslips-actions select { min-width: 0; }
    .slw-ess-layout { grid-template-columns: 1fr; }
    .slw-ess-sidebar { border-inline-end: none; border-block-end: 1px solid var(--slw-border); }
    .slw-ess-actions { display: grid; grid-template-columns: repeat(2, 1fr); }
    .slw-ess-cal-day { min-height: 60px; padding: 4px; font-size: 12px; }
    .slw-ess-cal-event { font-size: 10px; padding: 1px 4px; }
    .slw-ess-head { flex-direction: column; align-items: stretch; }
    .slw-ess-view-switcher { align-self: stretch; }
    .slw-ess-view-btn { flex: 1; }
}
@media (max-width: 480px) {
    .slw-ess-actions { grid-template-columns: 1fr; }
    .slw-ess-cal-daynames span { font-size: 10px; padding: 6px 2px; }
}

/* ===========================================================================
   Modal Wide & Form Layout for ESS Modals
   =========================================================================== */
.slw-modal-wide { width: min(800px, calc(100vw - 32px)); max-width: 800px; }
.slw-modal-dialog form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    row-gap: 14px;
}
.slw-modal-dialog form > .slw-field { min-width: 0; }
.slw-modal-dialog form > .slw-form-row,
.slw-modal-dialog form > .slw-alert,
.slw-modal-dialog form > .slw-modal-actions,
.slw-modal-dialog form > footer,
.slw-modal-dialog form > h2,
.slw-modal-dialog form > .slw-table-wrap,
.slw-modal-dialog form > input[type="hidden"] {
    grid-column: 1 / -1;
}
.slw-modal-dialog form > input[type="hidden"] { display: none; }
.slw-modal-dialog form .slw-field-full { grid-column: 1 / -1; }

@media (max-width: 600px) {
    .slw-modal-dialog form { grid-template-columns: 1fr; }
    .slw-modal-wide { width: calc(100vw - 32px); }
}

/* ===========================================================================
   HR Dashboard Stats Grid
   =========================================================================== */
.slw-hr-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-block-end: 24px;
}
.slw-hr-stat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    background: var(--slw-surface);
    box-shadow: var(--slw-shadow);
    transition: transform 0.2s, box-shadow 0.2s;
}
.slw-hr-stat:hover { transform: translateY(-2px); box-shadow: var(--slw-shadow-md); }
.slw-hr-stat-icon { font-size: 28px; }
.slw-hr-stat-label { font-size: 13px; color: var(--slw-text-secondary); font-weight: 600; }
.slw-hr-stat-value { font-size: 24px; font-weight: 800; color: var(--slw-primary); }

/* ===========================================================================
   Org Chart Polish
   =========================================================================== */
.slw-orgchart-container {
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    background: var(--slw-surface);
    overflow: hidden;
}
.slw-orgchart-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-block-end: 1px solid var(--slw-border);
    background: var(--slw-surface-2);
    flex-wrap: wrap;
}
.slw-orgchart-canvas { padding: 24px; min-height: 500px; overflow: auto; }

/* ===========================================================================
   Tab System Polish
   =========================================================================== */
.slw-tabs {
    display: flex;
    gap: 0;
    border-block-end: 2px solid var(--slw-border);
    margin-block-end: 20px;
}
.slw-tab {
    padding: 10px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--slw-text-secondary);
    border-block-end: 2px solid transparent;
    margin-block-end: -2px;
    transition: all 0.15s ease;
}
.slw-tab:hover { color: var(--slw-primary); }
.slw-tab-active,
.slw-tab.active {
    color: var(--slw-primary);
    border-block-end-color: var(--slw-primary);
}

/* ===========================================================================
   Payroll-specific classes
   =========================================================================== */
.slw-payroll-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-payroll-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--slw-text-primary); }

.slw-modal-large { width: min(960px, calc(100vw - 32px)); max-width: 960px; }

/* ===========================================================================
   Loans / Penalties / EOS / HRLetters shared list card
   =========================================================================== */
.slw-hr-list-card { max-width: 1200px; margin: 0 auto 24px; overflow: visible; }
.slw-hr-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-hr-list-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--slw-text-primary); }

/* ===========================================================================
   Attendance / Timesheet screens
   =========================================================================== */
.slw-attendance-card { max-width: 1200px; margin: 0 auto 24px; overflow: visible; }
.slw-attendance-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-attendance-head h1 { margin: 0; font-size: 22px; font-weight: 700; color: var(--slw-text-primary); }

/* ===========================================================================
   Employee Profile 360
   =========================================================================== */
.slw-emp-profile { max-width: 1200px; margin: 0 auto 24px; }
.slw-emp-profile-head {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-emp-profile-head h1 { margin: 0; font-size: 22px; font-weight: 700; }
.slw-emp-profile-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--slw-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}
.slw-emp-profile-back:hover { color: var(--slw-primary); }
.slw-emp-profile-info {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}
.slw-emp-profile-info-item { display: flex; flex-direction: column; gap: 4px; }
.slw-emp-profile-info-label { font-size: 12px; color: var(--slw-text-secondary); font-weight: 600; text-transform: uppercase; }
.slw-emp-profile-info-value { font-size: 15px; font-weight: 600; color: var(--slw-text-primary); }
.slw-emp-profile-sections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    padding: 0 24px 24px;
}
.slw-emp-profile-section {
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    overflow: hidden;
}
.slw-emp-profile-section-head {
    padding: 12px 16px;
    border-block-end: 1px solid var(--slw-border);
    background: var(--slw-surface-2);
    font-size: 14px;
    font-weight: 700;
    color: var(--slw-text-primary);
}
.slw-emp-profile-section-body { padding: 16px; }

/* ===========================================================================
   Working Calendar / Holiday screens
   =========================================================================== */
.slw-cal-card { max-width: 1200px; margin: 0 auto 24px; overflow: visible; }
.slw-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-cal-head h1 { margin: 0; font-size: 22px; font-weight: 700; }

/* ===========================================================================
   ESS Approvals / Rules screens
   =========================================================================== */
.slw-approvals-card,
.slw-rules-card { max-width: 1200px; margin: 0 auto 24px; overflow: visible; }
.slw-approvals-head,
.slw-rules-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-approvals-head h1,
.slw-rules-head h1 { margin: 0; font-size: 22px; font-weight: 700; }

/* ===========================================================================
   Leave Balances screen
   =========================================================================== */
.slw-balances-card { max-width: 1000px; margin: 0 auto 24px; overflow: visible; }
.slw-balances-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-balances-head h1 { margin: 0; font-size: 22px; font-weight: 700; }

/* ===========================================================================
   HR Reports screen
   =========================================================================== */
.slw-hr-reports-card { max-width: 1200px; margin: 0 auto 24px; overflow: visible; }
.slw-hr-reports-filters {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
    padding: 20px 24px;
    border-block-end: 1px solid var(--slw-border);
}
.slw-hr-reports-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    padding: 20px 24px;
}
.slw-hr-reports-charts { padding: 0 24px 24px; }

/* ===========================================================================
   Global utility: text muted
   =========================================================================== */
.slw-text-muted,
.slw-muted { color: var(--slw-text-secondary); font-size: 13px; }

/* ===========================================================================
   Fix: Ensure all cards inside app-content have consistent margin
   =========================================================================== */
.slw-app-content > .slw-card:not(.slw-ess-card):not(.slw-emp-profile) {
    margin-inline: auto;
    margin-block-end: 24px;
}

/* ===========================================================================
   Fix: Sidebar nav group items max-height for large menus (HR has sub-groups)
   =========================================================================== */
.slw-nav-group.open .slw-nav-group-items { max-height: 2000px; }

/* ===========================================================================
   Fix: App content padding for HR screens
   =========================================================================== */
.slw-app-content { padding-block-start: 24px; padding-block-end: 32px; }

/* ===========================================================================
   Fix: Table action buttons alignment
   =========================================================================== */
.slw-table tbody td:last-child {
    text-align: end;
    white-space: nowrap;
}
.slw-table tbody td:last-child .slw-btn { margin-inline-start: 4px; }
[dir="rtl"] .slw-table tbody td:last-child { text-align: start; }

/* ===========================================================================
   Fix: Form section heading inside cards
   =========================================================================== */
.slw-card-body h2:first-child,
.slw-card h2:first-child { margin-block-start: 0; }


/* ===========================================================================
   Encyclopedia Chatbot Screen
   =========================================================================== */

.encyclopedia-card {
    max-width: 1200px;
    margin: 0 auto;
    padding: var(--slw-spacing-lg, 24px);
}

.encyclopedia-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.encyclopedia-head-title h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 4px 0;
    color: var(--slw-text-primary, #1a1a2e);
}

.encyclopedia-subtitle {
    color: var(--slw-text-secondary, #6c757d);
    font-size: 0.95rem;
    margin: 0;
}

.encyclopedia-mode-selector {
    display: flex;
    align-items: center;
    gap: 8px;
}

.encyclopedia-mode-label {
    font-size: 0.875rem;
    color: var(--slw-text-secondary, #6c757d);
}

.encyclopedia-mode-select {
    padding: 6px 12px;
    border: 1px solid var(--slw-border, #dee2e6);
    border-radius: 6px;
    background: var(--slw-bg-primary, #fff);
    font-size: 0.875rem;
    cursor: pointer;
}

.encyclopedia-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--slw-bg-secondary, #f8f9fa);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--slw-text-secondary, #6c757d);
    margin-bottom: 16px;
}

.encyclopedia-status-divider { opacity: 0.3; }

.encyclopedia-chat {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.encyclopedia-messages {
    min-height: 400px;
    max-height: 600px;
    overflow-y: auto;
    padding: 16px;
    background: var(--slw-bg-secondary, #f8f9fa);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.encyclopedia-welcome {
    text-align: center;
    padding: 48px 24px;
    color: var(--slw-text-secondary, #6c757d);
}

.encyclopedia-welcome-icon { font-size: 3rem; margin-bottom: 16px; }

.encyclopedia-welcome h2 {
    font-size: 1.5rem;
    color: var(--slw-text-primary, #1a1a2e);
    margin: 0 0 8px 0;
}

.encyclopedia-welcome p { margin: 0 0 24px 0; }

.encyclopedia-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.encyclopedia-suggestion-chip {
    padding: 8px 16px;
    border: 1px solid var(--slw-border, #dee2e6);
    border-radius: 20px;
    background: var(--slw-bg-primary, #fff);
    cursor: pointer;
    font-size: 0.875rem;
    transition: all 0.2s;
}

.encyclopedia-suggestion-chip:hover {
    background: var(--slw-primary, #0d6efd);
    color: #fff;
    border-color: var(--slw-primary, #0d6efd);
}

.encyclopedia-message {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.encyclopedia-message-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    background: var(--slw-bg-primary, #fff);
    border: 1px solid var(--slw-border, #dee2e6);
}

.encyclopedia-message-user { flex-direction: row-reverse; }

.encyclopedia-message-content { flex: 1; min-width: 0; }

.encyclopedia-message-user .encyclopedia-message-content { text-align: right; }

.encyclopedia-message-content p {
    margin: 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: var(--slw-bg-primary, #fff);
    display: inline-block;
    max-width: 100%;
}

.encyclopedia-message-assistant .encyclopedia-message-content {
    background: var(--slw-bg-primary, #fff);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--slw-border, #dee2e6);
}

.encyclopedia-answer { line-height: 1.7; font-size: 0.9375rem; }
.encyclopedia-answer h2, .encyclopedia-answer h3, .encyclopedia-answer h4 { margin: 12px 0 8px 0; }
.encyclopedia-answer strong { color: var(--slw-primary, #0d6efd); }

.encyclopedia-model-info {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--slw-border, #dee2e6);
    font-size: 0.75rem;
    color: var(--slw-text-secondary, #6c757d);
}

.encyclopedia-citations-section { margin-top: 16px; }
.encyclopedia-citations-section h3 { font-size: 1rem; margin: 0 0 12px 0; }
.encyclopedia-citations-list { display: flex; flex-direction: column; gap: 8px; }

.encyclopedia-citation-card {
    padding: 12px;
    border: 1px solid var(--slw-border, #dee2e6);
    border-radius: 8px;
    background: var(--slw-bg-secondary, #f8f9fa);
}

.encyclopedia-citation-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.encyclopedia-citation-number {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--slw-primary, #0d6efd);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.encyclopedia-citation-name { flex: 1; font-weight: 600; font-size: 0.875rem; }

.encyclopedia-citation-type {
    font-size: 0.6875rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--slw-bg-tertiary, #e9ecef);
    color: var(--slw-text-secondary, #6c757d);
}

.encyclopedia-citation-snippet {
    font-size: 0.8125rem;
    color: var(--slw-text-secondary, #6c757d);
    line-height: 1.6;
    max-height: 80px;
    overflow: hidden;
}
.encyclopedia-citation-snippet-full {
    max-height: none;
    overflow: visible;
    white-space: pre-wrap;
    font-size: 0.875rem;
    color: var(--slw-text-primary, #212529);
    background: var(--slw-bg-secondary, #f8f9fa);
    padding: 10px 12px;
    border-radius: 6px;
    margin-top: 6px;
}

.encyclopedia-citation-score {
    margin-top: 4px;
    font-size: 0.6875rem;
    color: var(--slw-success, #198754);
}

.encyclopedia-sources-section { margin-top: 12px; }

.encyclopedia-sources-section summary {
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--slw-text-secondary, #6c757d);
}

.encyclopedia-sources-list {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.encyclopedia-source-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 8px;
    font-size: 0.8125rem;
    background: var(--slw-bg-secondary, #f8f9fa);
    border-radius: 4px;
}

.encyclopedia-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    color: var(--slw-text-secondary, #6c757d);
    font-size: 0.875rem;
}

.encyclopedia-input-form {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.encyclopedia-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--slw-border, #dee2e6);
    border-radius: 12px;
    font-size: 0.9375rem;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    min-height: 48px;
}

.encyclopedia-input:focus {
    outline: none;
    border-color: var(--slw-primary, #0d6efd);
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.encyclopedia-btn-icon { margin-inline-end: 4px; }

.encyclopedia-disclaimer {
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--slw-warning-bg, #fff3cd);
    border: 1px solid var(--slw-warning-border, #ffe69c);
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--slw-warning-text, #664d03);
    text-align: center;
}

@media (max-width: 768px) {
    .encyclopedia-head { flex-direction: column; }
    .encyclopedia-mode-selector { width: 100%; }
    .encyclopedia-mode-select { flex: 1; }
    .encyclopedia-messages { min-height: 300px; max-height: 500px; }
    .encyclopedia-input-form { flex-direction: column; }
    .encyclopedia-input { width: 100%; }
}

/* ================================================================
   Report Chat — Intelligent reporting chat screen
   ================================================================ */

.reportchat-card {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius);
    background: var(--slw-surface);
    box-shadow: var(--slw-shadow-md);
    display: flex;
    flex-direction: column;
    height: calc(100vh - 140px);
    min-height: 600px;
}

/* ── Header ── */
.reportchat-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    background: linear-gradient(135deg, var(--slw-primary), var(--slw-primary-hover));
    color: var(--slw-primary-contrast);
    flex-shrink: 0;
}

.reportchat-head-title h1 {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 2px 0;
    color: var(--slw-primary-contrast);
}

.reportchat-subtitle {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.85;
}

.reportchat-head-actions {
    display: flex;
    gap: 8px;
}

.reportchat-head-btn {
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: var(--slw-radius-sm);
    background: rgba(255,255,255,0.1);
    color: var(--slw-primary-contrast);
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reportchat-head-btn:hover {
    background: rgba(255,255,255,0.2);
    border-color: rgba(255,255,255,0.5);
}

/* ── Status bar ── */
.reportchat-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
    background: var(--slw-surface-2);
    border-bottom: 1px solid var(--slw-border);
    font-size: 0.78rem;
    color: var(--slw-text-secondary);
    flex-shrink: 0;
}

.reportchat-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--slw-success);
    flex-shrink: 0;
}

.reportchat-status-dot.loading {
    background: var(--slw-warning);
    animation: rc-pulse 1s infinite;
}

@keyframes rc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.reportchat-status-divider { opacity: 0.3; }

/* ── Chat area ── */
.reportchat-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reportchat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px 24px;
    background: var(--slw-bg);
    display: flex;
    flex-direction: column;
    gap: 16px;
    scroll-behavior: smooth;
}

.reportchat-messages::-webkit-scrollbar { width: 6px; }
.reportchat-messages::-webkit-scrollbar-track { background: transparent; }
.reportchat-messages::-webkit-scrollbar-thumb {
    background: var(--slw-border);
    border-radius: 3px;
}

/* ── Welcome ── */
.reportchat-welcome {
    text-align: center;
    padding: 40px 24px;
    color: var(--slw-text-secondary);
}

.reportchat-welcome-icon {
    font-size: 3rem;
    margin-bottom: 16px;
}

.reportchat-welcome h2 {
    font-size: 1.35rem;
    color: var(--slw-text-primary);
    margin: 0 0 8px 0;
}

.reportchat-welcome p {
    margin: 0 0 24px 0;
    font-size: 0.9rem;
}

/* ── Suggestion chips ── */
.reportchat-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    max-width: 600px;
    margin: 0 auto;
}

.reportchat-suggestion-chip {
    padding: 8px 16px;
    border: 1px solid var(--slw-border);
    border-radius: 20px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    cursor: pointer;
    font-size: 0.83rem;
    transition: all 0.2s;
    font-family: inherit;
}

.reportchat-suggestion-chip:hover {
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
    border-color: var(--slw-primary);
    transform: translateY(-1px);
    box-shadow: var(--slw-shadow);
}

/* ── Messages ── */
.reportchat-message {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    max-width: 100%;
    animation: rc-fade-in 0.3s ease;
}

@keyframes rc-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.reportchat-message-user {
    flex-direction: row-reverse;
}

.reportchat-avatar {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 600;
}

.reportchat-message-user .reportchat-avatar {
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
}

.reportchat-message-assistant .reportchat-avatar {
    background: var(--slw-surface);
    color: var(--slw-primary);
    border: 2px solid var(--slw-primary);
}

.reportchat-message-content {
    flex: 1;
    min-width: 0;
}

.reportchat-message-user .reportchat-message-content {
    text-align: left;
}

.reportchat-bubble {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 100%;
    word-wrap: break-word;
}

.reportchat-message-user .reportchat-bubble {
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
    border-bottom-right-radius: 4px;
}

.reportchat-message-assistant .reportchat-bubble {
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-bottom-left-radius: 4px;
    box-shadow: var(--slw-shadow);
}

/* ── Assistant result card ── */
.reportchat-result {
    background: var(--slw-surface);
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    overflow: hidden;
    box-shadow: var(--slw-shadow);
}

.reportchat-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--slw-surface-2);
    border-bottom: 1px solid var(--slw-border);
}

.reportchat-result-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--slw-text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.reportchat-result-actions {
    display: flex;
    gap: 4px;
}

.reportchat-action-btn {
    padding: 4px 10px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-xs);
    background: var(--slw-surface);
    color: var(--slw-text-secondary);
    cursor: pointer;
    font-size: 0.75rem;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
}

.reportchat-action-btn:hover {
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
    border-color: var(--slw-primary);
}

.reportchat-result-body {
    padding: 16px;
}

/* ── Answer text ── */
.reportchat-answer-text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--slw-text-primary);
    margin-bottom: 12px;
}

.reportchat-answer-text strong { color: var(--slw-primary); }

/* ── Meta ── */
.reportchat-meta {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed var(--slw-border);
    font-size: 0.72rem;
    color: var(--slw-text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.reportchat-meta-badge {
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--slw-surface-2);
    border: 1px solid var(--slw-border);
}

/* ── KPI cards ── */
.reportchat-kpi-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.reportchat-kpi-card {
    flex: 1;
    min-width: 140px;
    padding: 16px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: linear-gradient(135deg, var(--slw-surface), var(--slw-surface-2));
    text-align: center;
    transition: transform 0.2s;
}

.reportchat-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--slw-shadow-md);
}

.reportchat-kpi-label {
    font-size: 0.75rem;
    color: var(--slw-text-secondary);
    margin-bottom: 6px;
    font-weight: 500;
}

.reportchat-kpi-value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--slw-primary);
    line-height: 1.2;
}

/* ── Table ── */
.reportchat-table-wrap {
    overflow-x: auto;
    border-radius: var(--slw-radius-xs);
    border: 1px solid var(--slw-border);
    margin-bottom: 12px;
}

.reportchat-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.83rem;
}

.reportchat-table thead {
    background: var(--slw-surface-2);
}

.reportchat-table th {
    padding: 10px 14px;
    text-align: right;
    font-weight: 600;
    color: var(--slw-text-primary);
    border-bottom: 2px solid var(--slw-border);
    white-space: nowrap;
}

.reportchat-table td {
    padding: 8px 14px;
    border-bottom: 1px solid var(--slw-border);
    color: var(--slw-text-primary);
}

.reportchat-table tbody tr:hover {
    background: var(--slw-surface-hover);
}

.reportchat-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Chart ── */
.reportchat-chart-container {
    position: relative;
    height: 280px;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    background: var(--slw-surface-2);
}

/* ── Input area ── */
.reportchat-input-area {
    flex-shrink: 0;
    padding: 12px 24px 16px 24px;
    background: var(--slw-surface);
    border-top: 1px solid var(--slw-border);
}

.reportchat-form {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.reportchat-input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--slw-border);
    border-radius: var(--slw-radius-sm);
    font-size: 0.9rem;
    resize: none;
    font-family: inherit;
    line-height: 1.5;
    min-height: 48px;
    max-height: 120px;
    background: var(--slw-surface);
    color: var(--slw-text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.reportchat-input:focus {
    outline: none;
    border-color: var(--slw-primary);
    box-shadow: 0 0 0 3px var(--slw-primary-light);
}

.reportchat-send-btn {
    padding: 12px 24px;
    border: none;
    border-radius: var(--slw-radius-sm);
    background: var(--slw-primary);
    color: var(--slw-primary-contrast);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    min-height: 48px;
}

.reportchat-send-btn:hover:not(:disabled) {
    background: var(--slw-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--slw-shadow-md);
}

.reportchat-send-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.reportchat-loading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.reportchat-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: var(--slw-primary-contrast);
    border-radius: 50%;
    animation: rc-spin 0.8s linear infinite;
}

@keyframes rc-spin {
    to { transform: rotate(360deg); }
}

/* ── Disclaimer ── */
.reportchat-disclaimer {
    padding: 10px 24px;
    background: var(--slw-surface-2);
    border-top: 1px solid var(--slw-border);
    font-size: 0.75rem;
    color: var(--slw-text-secondary);
    text-align: center;
    flex-shrink: 0;
}

/* ── Empty state ── */
.reportchat-empty {
    text-align: center;
    padding: 24px;
    color: var(--slw-text-secondary);
    font-size: 0.85rem;
}

/* ── Error message ── */
.reportchat-message-error .reportchat-bubble {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

[data-theme="dark"] .reportchat-message-error .reportchat-bubble {
    background: rgba(220,38,38,0.1);
    border-color: rgba(220,38,38,0.3);
}

/* ── Print styles ── */
@media print {
    .reportchat-head,
    .reportchat-status,
    .reportchat-input-area,
    .reportchat-disclaimer,
    .reportchat-result-actions,
    .slw-topbar,
    .slw-sidebar { display: none !important; }

    .reportchat-card {
        border: none;
        box-shadow: none;
        height: auto;
        min-height: auto;
    }

    .reportchat-messages {
        overflow: visible;
        background: #fff;
    }

    .reportchat-result {
        break-inside: avoid;
        box-shadow: none;
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .reportchat-card {
        height: calc(100vh - 120px);
        min-height: 500px;
    }

    .reportchat-head {
        padding: 16px;
    }

    .reportchat-head-title h1 {
        font-size: 1.15rem;
    }

    .reportchat-subtitle {
        font-size: 0.78rem;
    }

    .reportchat-messages {
        padding: 12px;
    }

    .reportchat-input-area {
        padding: 10px 12px 12px 12px;
    }

    .reportchat-form {
        flex-direction: column;
    }

    .reportchat-send-btn {
        width: 100%;
        justify-content: center;
    }

    .reportchat-kpi-card {
        min-width: 120px;
    }

    .reportchat-kpi-value {
        font-size: 1.3rem;
    }
}





/* ---- Client portal + staff chat (real-time messaging) ---- */
.slw-chat-panel-inline {
    display: flex;
    flex-direction: column;
    height: 560px;
    overflow: hidden;
    padding: 0;
}
.slw-chat-status {
    padding: 6px 16px;
    font-size: 12px;
    color: #64748b;
    min-height: 26px;
    border-bottom: 1px solid var(--slw-border, #e2e8f0);
}
.slw-chat-layout {
    display: flex;
    gap: 0;
    height: 560px;
    border: 1px solid var(--slw-border, #e2e8f0);
    border-radius: 12px;
    overflow: hidden;
}
.slw-chat-threads {
    width: 280px;
    border-inline-end: 1px solid var(--slw-border, #e2e8f0);
    overflow-y: auto;
    flex-shrink: 0;
    padding: 8px;
}
.slw-chat-thread {
    display: block;
    width: 100%;
    text-align: start;
    background: none;
    border: none;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
}
.slw-chat-thread:hover { background: rgba(30, 64, 175, 0.06); }
.slw-chat-thread-active { background: rgba(30, 64, 175, 0.1); }
.slw-chat-thread-name { display: block; font-weight: 600; font-size: 13.5px; }
.slw-chat-thread-last {
    display: block; font-size: 12px; color: #64748b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.slw-chat-unread {
    position: absolute; top: 10px; inset-inline-end: 10px;
    background: #dc2626; color: #fff; border-radius: 999px;
    min-width: 20px; height: 20px; font-size: 11px;
    display: flex; align-items: center; justify-content: center; padding: 0 5px;
}
.slw-chat-conversation { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.slw-chat-thread-head {
    padding: 12px 16px; font-weight: 700; font-size: 14px;
    border-bottom: 1px solid var(--slw-border, #e2e8f0);
}
.slw-chat-panel-inline .slw-chat-messages,
.slw-chat-conversation .slw-chat-messages {
    flex: 1; overflow-y: auto; padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.slw-chat-row { display: flex; }
.slw-chat-mine { justify-content: flex-end; }
.slw-chat-theirs { justify-content: flex-start; }
.slw-chat-panel-inline .slw-chat-bubble,
.slw-chat-conversation .slw-chat-bubble {
    max-width: 70%;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.55;
    word-wrap: break-word;
}
.slw-chat-mine .slw-chat-bubble {
    background: #1e40af; color: #fff;
    border-bottom-inline-end-radius: 4px;
}
.slw-chat-theirs .slw-chat-bubble {
    background: #fff; color: #0f172a;
    border: 1px solid #cbd5e1;
    border-bottom-inline-start-radius: 4px;
}
[data-theme="dark"] .slw-chat-theirs .slw-chat-bubble {
    background: #1c2330; color: #f1f5f9; border-color: #30363d;
}
.slw-chat-meta {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: 10.5px; opacity: 0.75; margin-bottom: 3px;
}
.slw-chat-read { font-size: 11px; text-align: end; opacity: 0.8; margin-top: 2px; }
.slw-chat-input-row {
    display: flex; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--slw-border, #e2e8f0);
}
.slw-chat-input { flex: 1; }

/* ==================== Client Portal theme ==================== */
/* Public pages (portal login + portal shell) */
.slw-public-body {
    background: var(--slw-bg);
    color: var(--slw-text-primary);
    font-family: var(--slw-font);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---- Public top bar (non-landing pages) ---- */
.slw-public-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 12px 5vw;
    background: color-mix(in srgb, var(--slw-surface) 90%, transparent);
    backdrop-filter: blur(18px);
    border-block-end: 1px solid var(--slw-border);
}
.slw-public-brand { color: var(--slw-text-primary); font-weight: 800; font-size: 16px; text-decoration: none; }
.slw-public-brand:hover { color: var(--slw-primary); text-decoration: none; }
.slw-public-topbar-actions { display: flex; align-items: center; gap: 12px; }
.slw-landing-nav-brand { color: var(--slw-text-primary); font-weight: 800; font-size: 17px; text-decoration: none; white-space: nowrap; }
.slw-landing-nav-brand:hover { color: var(--slw-primary); text-decoration: none; }

/* ---- Top bar ---- */
.slw-portal-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 24px;
    height: 60px;
    background: var(--slw-surface);
    border-bottom: 1px solid var(--slw-border);
    box-shadow: var(--slw-shadow);
}
.slw-portal-brand { display: flex; align-items: baseline; gap: 10px; flex-shrink: 0; }
.slw-portal-logo {
    font-size: 19px;
    font-weight: 800;
    color: var(--slw-primary);
    text-decoration: none;
    letter-spacing: -0.3px;
}
.slw-portal-subtitle { font-size: 12.5px; color: var(--slw-text-secondary); }

.slw-portal-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    overflow-x: auto;
    scrollbar-width: none;
}
.slw-portal-nav::-webkit-scrollbar { display: none; }
.slw-portal-nav-link {
    padding: 8px 14px;
    border-radius: var(--slw-radius-sm);
    color: var(--slw-text-secondary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: var(--slw-transition);
}
.slw-portal-nav-link:hover {
    color: var(--slw-text-primary);
    background: var(--slw-surface-hover);
}
.slw-portal-nav-link.slw-portal-nav-active {
    color: var(--slw-primary);
    background: var(--slw-primary-light);
    font-weight: 600;
}

.slw-portal-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.slw-portal-lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: var(--slw-radius-sm);
    border: 1px solid var(--slw-border);
    color: var(--slw-text-secondary);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    transition: var(--slw-transition);
}
.slw-portal-lang-toggle:hover { color: var(--slw-primary); border-color: var(--slw-primary); }
.slw-portal-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--slw-radius-sm);
    border: 1px solid var(--slw-border);
    background: transparent;
    color: var(--slw-text-secondary);
    cursor: pointer;
    font-size: 15px;
    transition: var(--slw-transition);
}
.slw-portal-theme-toggle:hover { color: var(--slw-primary); border-color: var(--slw-primary); }
.slw-portal-logout-form { margin: 0; }

/* ---- Main content ---- */
.slw-portal-main {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px 24px 48px;
}
.slw-portal-section { display: flex; flex-direction: column; gap: 20px; }
.slw-portal-page-title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: var(--slw-text-primary);
}

/* ---- Stat cards ---- */
.slw-portal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}
.slw-portal-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 20px;
    transition: var(--slw-transition);
}
.slw-portal-card:hover { box-shadow: var(--slw-shadow-md); transform: translateY(-1px); }
.slw-portal-card-icon { font-size: 22px; }
.slw-portal-card-value { font-size: 30px; font-weight: 800; color: var(--slw-text-primary); line-height: 1.1; }
.slw-portal-card-label { font-size: 13px; color: var(--slw-text-secondary); font-weight: 500; }

/* ---- Panels ---- */
.slw-portal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 16px;
}
.slw-portal-panel { padding: 0; overflow: hidden; }
.slw-portal-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    border-bottom: 1px solid var(--slw-border);
}
.slw-portal-panel-title { margin: 0; font-size: 15px; font-weight: 700; }
.slw-portal-panel .slw-table { margin: 0; }
.slw-portal-panel .slw-table th,
.slw-portal-panel .slw-table td { padding: 10px 18px; }
.slw-portal-empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--slw-text-secondary);
    font-size: 14px;
    margin: 0;
}

/* ---- Portal table polish ---- */
.slw-portal-section .slw-table { width: 100%; border-collapse: collapse; }
.slw-portal-section .slw-table th {
    text-align: start;
    font-size: 12px;
    font-weight: 600;
    color: var(--slw-text-secondary);
    padding: 10px 14px;
    border-bottom: 1px solid var(--slw-border);
    background: var(--slw-surface-2);
}
.slw-portal-section .slw-table td {
    padding: 11px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid var(--slw-border);
    color: var(--slw-text-primary);
}
.slw-portal-section .slw-table tbody tr:hover { background: var(--slw-surface-hover); }
.slw-portal-section .slw-table tbody tr:last-child td { border-bottom: none; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .slw-portal-topbar { flex-wrap: wrap; height: auto; padding: 10px 16px; gap: 10px; }
    .slw-portal-nav { order: 3; flex-basis: 100%; }
    .slw-portal-main { padding: 16px; }
    .slw-portal-cards { grid-template-columns: repeat(2, 1fr); }
    .slw-portal-grid { grid-template-columns: 1fr; }
    .slw-chat-layout { flex-direction: column; height: auto; }
    .slw-chat-threads { width: 100%; max-height: 200px; border-inline-end: none; border-bottom: 1px solid var(--slw-border); }
    .slw-chat-conversation { min-height: 380px; }
}

/* ---- In-app notification bell ---- */
.slw-notif-bell { position: relative; }
.slw-notif-btn { position: relative; font-size: 17px; }
.slw-notif-badge {
    position: absolute; top: -2px; inset-inline-end: -2px;
    min-width: 17px; height: 17px; padding: 0 4px;
    border-radius: 9px; background: #dc2626; color: #fff;
    font-size: 10.5px; font-weight: 700; line-height: 17px; text-align: center;
}
.slw-notif-dropdown {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0;
    width: 340px; max-height: 420px; overflow: hidden;
    background: var(--slw-surface); border: 1px solid var(--slw-border);
    border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); z-index: 1000;
    display: flex; flex-direction: column;
}
.slw-notif-head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 14px; border-bottom: 1px solid var(--slw-border);
    font-size: 13.5px; color: var(--slw-text-primary);
}
.slw-notif-markall { background: none; border: none; color: var(--slw-primary, #2563eb); font-size: 12px; cursor: pointer; }
.slw-notif-list { overflow-y: auto; }
.slw-notif-item {
    display: flex; flex-direction: column; gap: 2px; width: 100%;
    padding: 10px 14px; border: none; border-bottom: 1px solid var(--slw-border);
    background: transparent; text-align: start; cursor: pointer; color: var(--slw-text-primary);
}
.slw-notif-item:hover { background: var(--slw-surface-hover); }
.slw-notif-item.unread { background: color-mix(in srgb, var(--slw-primary, #2563eb) 7%, transparent); }
.slw-notif-item.unread .slw-notif-title { font-weight: 700; }
.slw-notif-type { font-size: 10.5px; font-weight: 700; text-transform: uppercase; color: var(--slw-text-secondary); letter-spacing: .4px; }
.slw-notif-title { font-size: 13px; }
.slw-notif-body { font-size: 12px; color: var(--slw-text-secondary); }
.slw-notif-time { font-size: 10.5px; color: var(--slw-text-secondary); }
.slw-notif-empty { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--slw-text-secondary); }

/* ---- Tasks list view ---- */
.slw-task-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; border-top: 1px solid var(--slw-border); }
.slw-sortable { cursor: pointer; user-select: none; }
.slw-sortable:hover { color: var(--slw-primary, #2563eb); }
.slw-sort-ind { font-size: 10px; }