/* ──────────────────────────────────────────────────────────────────────────
   Bikwayé CRM — enterprise skin over MudBlazor 9.
   Tokens live in CrmTheme.cs (palette, typography, radius); this file covers what a MudTheme
   cannot express: the screen-locked list layout, the striped grid, the sidebar and the dialogs.
   ────────────────────────────────────────────────────────────────────────── */

:root {
    --crm-sidebar-width: 264px;
    --crm-sidebar-bg: #0b1f3a;
    --crm-sidebar-fg: #c7d2e0;
    --crm-sidebar-muted: #7c8ba1;
    --crm-sidebar-active: rgba(201, 162, 39, 0.16);
    --crm-accent: #c9a227;
    --crm-border: #e3e8ef;
    --crm-radius: 6px;
}

.mud-theme-dark, [data-mud-theme="dark"] {
    --crm-sidebar-bg: #0b1220;
    --crm-border: #273449;
}

html, body { font-family: "Inter", "Segoe UI", Roboto, system-ui, -apple-system, sans-serif; }

/* ── Sidebar ─────────────────────────────────────────────────────────── */
.crm-drawer { background: var(--crm-sidebar-bg) !important; color: var(--crm-sidebar-fg) !important; border-right: 0 !important; }
.crm-drawer .mud-drawer-content { display: flex; flex-direction: column; height: 100%; }
.crm-brand { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.crm-brand-mark {
    width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
    background: linear-gradient(135deg, #c9a227 0%, #e8c766 100%); color: #0b1f3a; font-weight: 700; font-size: 15px;
    box-shadow: 0 6px 16px rgba(201, 162, 39, 0.35);
}
.crm-brand-title { color: #fff; font-weight: 600; font-size: 15px; line-height: 1.1; letter-spacing: .2px; }
.crm-brand-sub { color: var(--crm-sidebar-muted); font-size: 11px; text-transform: uppercase; letter-spacing: 1px; }

.crm-drawer .mud-nav-menu { padding: 4px 10px 12px; flex: 1; overflow-y: auto; }
.crm-drawer .mud-nav-group { margin-top: 6px; }
.crm-drawer .mud-nav-group > .mud-nav-link { color: var(--crm-sidebar-muted) !important; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; padding: 8px 12px; min-height: 32px; }
.crm-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-icon, .crm-drawer .mud-nav-group .mud-nav-link-expand-icon { color: var(--crm-sidebar-muted) !important; }
.crm-drawer .mud-nav-group .mud-navgroup-collapse .mud-nav-link { padding-left: 12px !important; }
.crm-drawer .mud-nav-link { color: var(--crm-sidebar-fg) !important; border-radius: var(--crm-radius); margin: 2px 0; min-height: 38px; font-size: 13.5px; font-weight: 500; }
.crm-drawer .mud-nav-link .mud-nav-link-icon { color: var(--crm-sidebar-fg) !important; opacity: .8; margin-right: 10px; }
.crm-drawer .mud-nav-link:hover { background: rgba(255, 255, 255, 0.06) !important; }
.crm-drawer .mud-nav-link.active { background: var(--crm-sidebar-active) !important; color: #fff !important; box-shadow: inset 3px 0 0 var(--crm-accent); }
.crm-drawer .mud-nav-link.active .mud-nav-link-icon { color: var(--crm-accent) !important; opacity: 1; }
.crm-drawer-footer { padding: 12px 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); color: var(--crm-sidebar-muted); font-size: 11px; }

/* ── App bar ─────────────────────────────────────────────────────────── */
.crm-appbar { border-bottom: 1px solid var(--crm-border); }
.crm-appbar .mud-toolbar { min-height: 60px; }
.crm-user-chip { display: flex; align-items: center; gap: 10px; padding: 4px 6px 4px 4px; border-radius: 999px; }
.crm-user-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #0b1f3a; color: #fff; font-size: 12px; font-weight: 600; }
.crm-user-name { font-size: 13px; font-weight: 600; line-height: 1.1; }
.crm-user-role { font-size: 11px; opacity: .7; line-height: 1.1; }

/* ── Page frame ──────────────────────────────────────────────────────── */
.crm-main { padding: var(--mud-appbar-height) 0 0 0 !important; }
.crm-page { padding: 20px 24px 24px; }
.crm-page-title { font-size: 20px; font-weight: 600; letter-spacing: -.2px; margin: 0; }
.crm-page-subtitle { font-size: 13px; opacity: .72; margin-top: 2px; max-width: 980px; }

/* The list frame: header + filters + grid + pager, locked to the viewport. Only the grid scrolls. */
.crm-list {
    height: calc(100vh - var(--mud-appbar-height));
    display: flex; flex-direction: column; overflow: hidden;
    padding: 16px 24px 12px;
}
.crm-list-head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.crm-list-filters { flex: 0 0 auto; margin-bottom: 12px; }
.crm-list-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.crm-list-foot { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-top: 1px solid var(--crm-border); background: var(--mud-palette-surface); border-radius: 0 0 var(--crm-radius) var(--crm-radius); }

/* ── Filter panel ────────────────────────────────────────────────────── */
.crm-filters .mud-expand-panel { border-radius: var(--crm-radius); }
.crm-filters .mud-expand-panel-header { min-height: 44px; padding: 6px 16px; }
.crm-filters .mud-expand-panel-content { padding: 4px 16px 14px; }

/* ── Data grid ───────────────────────────────────────────────────────── */
.crm-grid { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: var(--crm-radius) var(--crm-radius) 0 0; }
.crm-grid .mud-table-container { flex: 1 1 auto; min-height: 0; overflow: auto; }
.crm-grid .mud-table-root { border-collapse: separate; }
.crm-grid thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; white-space: nowrap; background: var(--mud-palette-background-gray); color: var(--mud-palette-text-primary) !important; }
.crm-grid .mud-table-root { min-width: 100%; }
.crm-grid td { font-size: 13px; }
.crm-grid .mud-table-row:nth-of-type(even) > td { background: rgba(11, 31, 58, 0.025); }
.mud-theme-dark .crm-grid .mud-table-row:nth-of-type(even) > td { background: rgba(255, 255, 255, 0.025); }
.crm-grid .mud-table-row:hover > td { background: rgba(201, 162, 39, 0.08) !important; }
.crm-grid .mud-table-toolbar { min-height: 44px; }
.crm-grid.crm-grid-clickable tbody tr { cursor: pointer; }
.crm-grid code, .crm-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 11.5px; opacity: .85; }
.crm-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 40px 16px; opacity: .7; }
.crm-empty .mud-icon-root { font-size: 40px; opacity: .5; }

/* ── Cards / stats ───────────────────────────────────────────────────── */
.crm-card { border: 1px solid var(--crm-border); border-radius: var(--crm-radius); }
.crm-stat { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
.crm-stat:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(11, 31, 58, 0.08); }
.crm-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; opacity: .65; }
.crm-stat-value { font-size: 28px; font-weight: 600; line-height: 1.1; margin-top: 4px; }
.crm-stat-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; }

/* ── Dialogs (MudBlazor.Extensions) ──────────────────────────────────── */
.crm-dialog .mud-dialog-title { padding: 14px 20px; border-bottom: 1px solid var(--crm-border); font-size: 15px; font-weight: 600; cursor: move; }
.crm-dialog .mud-dialog-content { padding: 18px 20px; }
.crm-dialog .mud-dialog-actions { padding: 12px 20px; border-top: 1px solid var(--crm-border); gap: 8px; }
.crm-dialog-note { font-size: 12.5px; opacity: .75; margin-bottom: 14px; }
.crm-perm-module { border: 1px solid var(--crm-border); border-radius: var(--crm-radius); padding: 10px 14px; margin-bottom: 10px; }
.crm-perm-module-head { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; margin-bottom: 4px; }

/* ── Login ───────────────────────────────────────────────────────────── */
.crm-login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.crm-login-hero { background: radial-gradient(1200px 600px at 20% 10%, #163a66 0%, #0b1f3a 55%, #071528 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 48px; }
.crm-login-hero h1 { font-size: 34px; font-weight: 700; letter-spacing: -.5px; margin: 0 0 12px; }
.crm-login-hero p { opacity: .8; max-width: 440px; font-size: 15px; line-height: 1.5; }
.crm-login-form { display: flex; align-items: center; justify-content: center; padding: 32px; }
@media (max-width: 900px) { .crm-login { grid-template-columns: 1fr; } .crm-login-hero { display: none; } }

/* ── Misc ────────────────────────────────────────────────────────────── */
.crm-kv { display: grid; grid-template-columns: 140px 1fr; row-gap: 6px; column-gap: 12px; font-size: 13px; }
.crm-kv dt { opacity: .65; }
.crm-kv dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }
.crm-section-title { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; opacity: .6; margin: 14px 0 6px; }
.crm-markdown p:last-child { margin-bottom: 0; }

/* MudBlazor.Extensions moves the dialog to <body> with an inline width:auto before measuring it,
   so a form dialog would shrink to its title. The min-width restores MudBlazor's size classes;
   resizing (enlarging) stays available above it. */
.mud-dialog.crm-dialog { min-width: min(calc(100vw - 48px), var(--crm-dialog-width, 600px)); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.crm-dialog.mud-dialog-width-xs { --crm-dialog-width: 444px; }
.crm-dialog.mud-dialog-width-sm { --crm-dialog-width: 600px; }
.crm-dialog.mud-dialog-width-md { --crm-dialog-width: 960px; }
.crm-dialog.mud-dialog-width-lg { --crm-dialog-width: 1280px; }
.crm-dialog .mud-dialog-content { flex: 1 1 auto; min-height: 0; overflow: auto; }
.crm-dialog .mud-dialog-title, .crm-dialog .mud-dialog-actions { flex: 0 0 auto; }