/* Shared admin theme. Existing Web Forms controls and page logic are preserved. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');
@font-face {
    font-family: 'bootstrap-icons';
    font-display: block;
    src: url('./fonts/bootstrap-iconsafdf.woff2') format('woff2'),
         url('./fonts/bootstrap-iconsafdf.woff') format('woff');
}
:root {
    --primary: #0f6b78;
    --secondary: #3f5a64;
    --accent: #047857;
    --bg: #f3f6f8;
    --surface: #ffffff;
    --surface-2: #eef3f5;
    --text: #102a33;
    --text-muted: #56707b;
    --ink: var(--text);
    --ink-2: var(--secondary);
    --muted: var(--text-muted);
    --line: #dde6ea;
    --primary-2: #0b5560;
    --primary-color: var(--primary);
    --secondary-color: var(--secondary);
    --success-color: var(--accent);
    --crm-success-soft: #ecfdf5;
    --crm-warning: #92400e;
    --crm-warning-soft: #fffbeb;
    --crm-error: #b91c1c;
    --crm-error-soft: #fef2f2;
    --crm-info: #0369a1;
    --crm-info-soft: #f0f9ff;
    --crm-nav-text: #cfe3e8;
    --crm-nav-bg: #0c3b44;
    --crm-nav-mark: #6ee7b7;
    --crm-nav-active: #d1fae5;
    --crm-radius: 14px;
    --crm-radius-sm: 8px;
    --crm-shadow: 0 1px 2px rgb(16 42 51 / 4%), 0 4px 14px rgb(16 42 51 / 4%);
    --crm-space: 24px;
    --crm-sidebar: 276px;
    --crm-focus: 0 0 0 3px rgb(4 120 87 / 18%);
    --bs-primary: var(--primary);
    --bs-primary-rgb: 15, 107, 120;
    --bs-success-rgb: 4, 120, 87;
    --bs-body-font-family: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
}
body.crm-admin {
    background: var(--bg);
    color: var(--text);
    font-family: var(--bs-body-font-family);
    font-size: 16px;
    line-height: 1.6;
    min-height: 100vh;
    text-align: start;
}
.crm-admin *, .crm-admin *::before, .crm-admin *::after { box-sizing: border-box; }
.crm-admin h1, .crm-admin h2, .crm-admin h3, .crm-admin h4, .crm-admin h5, .crm-admin h6 { font-family: inherit; }
.crm-admin img, .crm-admin canvas, .crm-admin svg { max-width: 100%; }
.crm-admin .row > * { min-width: 0; }
.crm-admin .breadcrumb { --bs-breadcrumb-divider: "/"; }
.crm-admin .num, .crm-admin .stat-value, .crm-admin .k-value { font-variant-numeric: tabular-nums; }
.crm-admin a:focus-visible, .crm-admin button:focus-visible, .crm-admin input:focus-visible,
.crm-admin select:focus-visible, .crm-admin textarea:focus-visible, .crm-admin [tabindex]:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}
.crm-admin .crm-navbar, .crm-admin form > .navbar {
    background: var(--primary);
    box-shadow: none;
    border-bottom: 1px solid var(--primary-2);
    min-height: 76px;
    padding: 12px 20px;
}
.crm-admin .navbar-brand {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    color: var(--surface) !important;
    padding: 0;
    white-space: normal;
}
.crm-admin .brand-icon {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: var(--accent);
    color: var(--surface);
    flex: 0 0 auto;
    font-size: 20px;
}
.crm-admin .brand-copy { display: grid; gap: 2px; line-height: 1.3; }
.crm-admin .brand-copy strong { font-size: 21px; letter-spacing: 1px; }
.crm-admin .brand-copy small { font-size: 12px; color: var(--crm-nav-text); font-weight: 400; }
.crm-admin .crm-navbar .nav-link, .crm-admin form > .navbar .nav-link {
    color: var(--crm-nav-text) !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: var(--crm-radius-sm);
    padding: 10px 12px !important;
    font-size: 14px;
    font-weight: 500;
    min-height: 44px;
    transition: background-color .18s, color .18s;
}
.crm-admin .crm-navbar .nav-link i { font-size: 18px; width: 22px; text-align: center; }
.crm-admin .crm-navbar .nav-link:hover, .crm-admin form > .navbar .nav-link:hover { background: var(--primary-2); color: var(--surface) !important; }
.crm-admin .crm-navbar .nav-link.active, .crm-admin form > .navbar .nav-link.active {
    background: var(--crm-nav-active);
    color: var(--accent) !important;
    font-weight: 600;
}
.crm-admin .user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid var(--secondary);
    border-radius: 10px;
    color: var(--surface);
    background: var(--primary-2);
    font-family: inherit;
    font-size: 14px;
    min-height: 44px;
    max-width: 100%;
}
.crm-admin .user-avatar { width: 32px; height: 32px; display: grid; place-items: center; background: var(--secondary); border-radius: 50%; flex-shrink: 0; }
.crm-admin .user-btn i[id] { font-style: normal; overflow-wrap: anywhere; }
.crm-admin .logout-inner-btn { border: 0; background: transparent; color: inherit; padding: 8px 0; font: inherit; cursor: pointer; }
.crm-admin .dropdown-menu { border: 1px solid var(--line); box-shadow: 0 8px 24px rgb(15 23 42 / 10%); padding: 6px; border-radius: 10px; font-size: 14px; }
.crm-admin .dropdown-item { border-radius: 6px; padding: 10px 12px; color: var(--secondary); }
.crm-admin .dropdown-item:hover, .crm-admin .dropdown-item:focus { color: var(--primary); background: var(--surface-2); }
.crm-admin .dropdown-item.logout { color: var(--crm-error); }
.crm-admin .navbar-toggler { min-width: 44px; min-height: 44px; border-color: var(--secondary); }
.crm-admin .crm-navbar .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
.crm-admin form > .container, .crm-admin form > .container-fluid, .crm-admin form > div > .container-fluid {
    padding-inline: clamp(16px, 2.5vw, 40px) !important;
    padding-block: 28px !important;
}
.crm-admin .page-header, .crm-admin .page-title, .crm-admin .page-header-bar {
    margin-bottom: 24px;
    gap: 16px;
}
.crm-admin .page-header-bar { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--crm-radius); padding: 20px 24px; }
.crm-admin .page-header h2, .crm-admin .page-title h2 { color: var(--text); font-size: clamp(23px, 2.1vw, 30px); font-weight: 600; line-height: 1.4; letter-spacing: 0; }
.crm-admin .page-header p, .crm-admin .page-title p, .crm-admin .page-header-bar p { font-size: 14px; color: var(--text-muted); }
.crm-admin .workspace-eyebrow { display: block; font-size: 12px; color: var(--accent); font-weight: 600; margin-bottom: 8px; }
.crm-admin .card, .crm-admin .stat-card, .crm-admin .kpi, .crm-admin .frame,
.crm-admin .main-card, .crm-admin .table-card, .crm-admin .filter-bar, .crm-admin .filter-card,
.crm-admin .section-card, .crm-admin .command-bar, .crm-admin .toolbar, .crm-admin .ai-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow);
    min-width: 0;
}
.crm-admin .stat-card { height: 100%; text-align: start; padding: 0; }
.crm-admin .stat-card:hover, .crm-admin .kpi:hover, .crm-admin .ai-card:hover { transform: none; box-shadow: var(--crm-shadow); }
.crm-admin .stat-card .card-body { padding: 22px; }
.crm-admin .stat-card h3, .crm-admin .kpi .k-value { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.crm-admin .stat-card .stat-label, .crm-admin .kpi .k-label { color: var(--text-muted); font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.crm-admin .stat-card .stat-icon { width: 44px; height: 44px; font-size: 20px; border-radius: 12px; background: var(--surface-2); color: var(--secondary); }
.crm-admin .stat-green .stat-icon { background: var(--crm-success-soft); color: var(--accent); }
.crm-admin .stat-orange .stat-icon, .crm-admin .stat-gold .stat-icon { background: var(--crm-warning-soft); color: var(--crm-warning); }
.crm-admin .stat-card .accent-bar, .crm-admin .stat-card .border-top-accent { height: 3px; background: var(--line); }
.crm-admin .stat-green .accent-bar, .crm-admin .stat-green .border-top-accent { background: var(--accent); }
.crm-admin .stat-growth { padding-top: 6px; font-size: 12px; }
.crm-admin .card-header, .crm-admin .table-card .card-header, .crm-admin .main-card .card-header,
.crm-admin .section-card-header, .crm-admin .frame .ch {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-bottom: 1px solid var(--line);
    padding: 18px 22px;
}
.crm-admin .card-header h5, .crm-admin .card-header h6, .crm-admin .frame .ch h6 { color: var(--text) !important; font-size: 15px !important; font-weight: 600 !important; }
.crm-admin .card-header .badge, .crm-admin .frame .ch .pill { color: var(--secondary); background: var(--surface-2) !important; border: 1px solid var(--line); }
.crm-admin .card-header .btn-outline-light { color: var(--secondary); border-color: var(--line); }
.crm-admin .card-body, .crm-admin .section-card-body, .crm-admin .frame .cb { padding: 22px; }
.crm-admin .filter-bar, .crm-admin .filter-card, .crm-admin .toolbar { padding: 18px 22px; }
.crm-admin .table { --bs-table-hover-bg: var(--surface-2); --bs-table-border-color: var(--line); margin-bottom: 0; }
.crm-admin .table thead th, .crm-admin .table-card .table thead th, .crm-admin .table-card thead th {
    background: var(--surface-2);
    color: var(--secondary);
    font-size: 13px;
    font-weight: 600;
    border-bottom: 1px solid var(--line);
    padding: 14px 18px;
    white-space: nowrap;
}
.crm-admin .table td, .crm-admin .table-card .table td, .crm-admin .table-card tbody td { padding: 14px 18px; font-size: 14px; vertical-align: middle; color: var(--text); }
.crm-admin .table-responsive { max-width: 100%; overscroll-behavior-inline: contain; }
.crm-admin .form-label, .crm-admin .filter-bar .form-label, .crm-admin .filter-card .form-label { color: var(--secondary); font-size: 14px; font-weight: 500; }
.crm-admin .form-control, .crm-admin .form-select, .crm-admin .toolbar input, .crm-admin .toolbar select { min-height: 44px; border-color: var(--line); border-radius: var(--crm-radius-sm); color: var(--text); font-family: inherit; font-size: 14px; background-color: var(--surface); }
.crm-admin .form-control:focus, .crm-admin .form-select:focus, .crm-admin .filter-bar .form-select:focus { border-color: var(--accent); box-shadow: var(--crm-focus); }
.crm-admin .input-group-text { background: var(--surface-2); border-color: var(--line); color: var(--text-muted); }
.crm-admin .btn { border-radius: var(--crm-radius-sm); font-size: 14px; font-weight: 500; padding: 10px 16px; min-height: 44px; font-family: inherit; }
.crm-admin .btn-sm { padding: 6px 10px; min-height: 36px; font-size: 13px; }
.crm-admin .btn-primary, .crm-admin .btn-add, .crm-admin .btn-search, .crm-admin .btn-refresh, .crm-admin .btn-grad, .crm-admin .qa-primary {
    --bs-btn-bg: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary-2); --bs-btn-hover-border-color: var(--primary-2);
    background: var(--primary); border-color: var(--primary); color: var(--surface) !important; box-shadow: none;
}
.crm-admin .btn-add:hover, .crm-admin .btn-search:hover, .crm-admin .btn-refresh:hover, .crm-admin .btn-grad:hover, .crm-admin .qa-primary:hover { background: var(--primary-2); transform: none; opacity: 1; }
.crm-admin .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); }
.crm-admin .btn-success { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); }
.crm-admin .section-heading { margin-block: 26px 14px; }
.crm-admin .section-heading h5 { font-size: 16px; font-weight: 600; color: var(--text); }
.crm-admin .ai-pos, .crm-admin .ai-tip { border-inline-start: 3px solid var(--accent); }
.crm-admin .ai-warn { border-inline-start: 3px solid var(--crm-warning); }
.crm-admin .ai-card .ai-icon { background: var(--surface-2); color: var(--secondary); }
.crm-admin .modal-content { border: 1px solid var(--line); border-radius: var(--crm-radius); box-shadow: 0 16px 48px rgb(15 23 42 / 16%); }
.crm-admin .modal-header-gradient { background: var(--primary); }
.crm-admin .modal-section-card .sec-header { background: var(--surface-2); color: var(--secondary); }
.crm-admin .rise { animation: none; }
.crm-admin .qa-btn:hover { transform: none; }
body.crm-login { background: var(--crm-nav-bg); display: flex; align-items: center; justify-content: center; }
.crm-login form { width: 100%; }
.crm-login .login-card { border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 24px 64px rgb(0 0 0 / 20%); max-width: 440px; }
.crm-login .login-header { background: var(--primary); padding: 32px; }
.crm-login .login-header .logo-circle { background: var(--accent); border-radius: 18px; width: 60px; height: 60px; font-size: 26px; }
.crm-login .login-body { padding: 30px; }
.crm-login .btn-login { background: var(--accent); color: var(--surface); min-height: 48px; box-shadow: none; }
.crm-login .btn-login:hover { background: var(--primary-2); transform: none; }
@media (max-width: 575px) {
    .crm-admin form > .container, .crm-admin form > .container-fluid, .crm-admin form > div > .container-fluid { padding: 20px 16px !important; }
    .crm-admin .page-header { align-items: stretch; }
    .crm-admin .page-header > *, .crm-admin .page-header-bar > * { width: 100%; }
    .crm-admin .stat-card .card-body, .crm-admin .card-body, .crm-admin .frame .cb { padding: 16px; }
    .crm-admin .stat-card .card-body > .d-flex { flex-wrap: wrap; gap: 12px; }
    .crm-admin .stat-card .stat-icon { width: 36px; height: 36px; font-size: 18px; }
    .crm-admin .filter-bar, .crm-admin .filter-card, .crm-admin .toolbar { padding: 16px; }
    .crm-admin .toolbar > input, .crm-admin .toolbar > select { max-width: 100%; flex: 1 1 100%; }
    .crm-admin .card-header, .crm-admin .frame .ch { flex-wrap: wrap; gap: 10px; padding: 16px; }
    .crm-admin .command-bar .search { flex-basis: 100%; }
    .crm-login .login-body { padding: 24px; }
}
@media (prefers-reduced-motion: reduce) {
    .crm-admin *, .crm-admin *::before, .crm-admin *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media print {
    body.crm-admin { background: white; }
    .crm-shell form { padding-inline-start: 0; }
    .crm-admin form > .navbar, .crm-admin .crm-navbar { display: none; }
    .crm-admin .card, .crm-admin .frame { box-shadow: none; break-inside: avoid; }
}

/* Operational workspace actions share one accessible, quiet accent. */
.crm-admin [data-workspace-module] .btn-section { background: var(--primary); color: #fff; border: 1px solid var(--primary); }
.crm-admin [data-workspace-module] .btn-section:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.crm-admin [data-workspace-module] .btn-section:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ==========================================================================
   Unified layer (2026-10-05). One look for every admin page, whatever style
   sheet it was written with: the side menu and footer, the page header, cards,
   tables, forms, messages. It only restyles; no control, ID or event changes.
   ========================================================================== */
body.crm-admin {
    /* The page style sheets (finance, booking, platform) read their own names: here they all point at the one palette. */
    --primary-color: var(--primary);
    --secondary-color: var(--crm-success-soft);
    --text-color: var(--text);
    --bg-color: var(--bg);
    --finance-border: var(--line);
    --finance-radius: var(--crm-radius);
    --finance-shadow: var(--crm-shadow);
    --finance-space: clamp(16px, 2vw, 24px);
    --platform-border: var(--line);
    --platform-radius: var(--crm-radius);
    --platform-shadow: var(--crm-shadow);
    --platform-space: clamp(16px, 2vw, 24px);
    --calendar-border: var(--line);
    --calendar-ink: var(--text);
    --calendar-primary: var(--primary);
    --calendar-radius: var(--crm-radius);
    font: 400 15px/1.7 var(--bs-body-font-family);
    color: var(--text);
    background: var(--bg);
    margin: 0;
}

/* ---------- Shell: the menu on top (small screens) or at the side (wide screens), the footer last ---------- */
.crm-admin form.crm-has-nav { display: flex; flex-direction: column; min-height: 100vh; }
.crm-admin form.crm-has-nav > .no-print { display: contents; }
.crm-admin form.crm-has-nav > main, .crm-admin form.crm-has-nav > .platform-main { margin-block: 0; }
/* A page that carried its own copy of the old top bar or its own footer shows the shared ones only. */
.crm-admin form.crm-has-nav > nav.navbar:not(.crm-nav-main), .crm-admin form.crm-has-nav footer:not(.crm-footer) { display: none; }

.crm-admin nav.crm-nav-main {
    display: block;
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 0;
    padding: 10px 16px;
    border: 0;
    background: var(--crm-nav-bg);
    color: var(--crm-nav-text);
}
.crm-admin .crm-nav-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.crm-admin .crm-nav-check { position: absolute; top: 10px; inset-inline-end: 16px; width: 104px; height: 44px; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.crm-admin .crm-nav-burger { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 10px; color: #fff; font-size: 14px; font-weight: 500; }
.crm-admin .crm-nav-burger i { font-size: 20px; line-height: 1; }
.crm-admin .crm-nav-check:focus-visible ~ .crm-nav-top .crm-nav-burger { outline: 3px solid var(--crm-nav-mark); outline-offset: 2px; }
.crm-admin .crm-nav-check:checked ~ .crm-nav-top .crm-nav-burger { background: rgb(255 255 255 / 12%); }
.crm-admin .crm-nav-body { display: none; padding-top: 12px; max-height: calc(100vh - 76px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 30%) transparent; }
.crm-admin .crm-nav-check:checked ~ .crm-nav-body { display: block; }

.crm-admin .crm-nav-list, .crm-admin .crm-nav-list ul, .crm-admin .crm-user-menu { list-style: none; margin: 0; padding: 0; }
.crm-admin .crm-nav-group { margin-bottom: 2px; }
.crm-admin .crm-nav-group > details > summary {
    display: flex; align-items: center; gap: 10px;
    min-height: 44px; padding: 9px 12px;
    border-radius: var(--crm-radius-sm);
    color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; list-style: none; user-select: none;
    transition: background-color .18s;
}
.crm-admin .crm-nav-group > details > summary::-webkit-details-marker { display: none; }
.crm-admin .crm-nav-group > details > summary > i { font-size: 18px; width: 22px; text-align: center; color: var(--crm-nav-mark); flex: 0 0 auto; }
.crm-admin .crm-nav-group > details > summary::after {
    content: ""; width: 8px; height: 8px; margin-inline-start: auto; flex: 0 0 auto;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg); opacity: .7; transition: transform .18s;
}
.crm-admin .crm-nav-group > details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
.crm-admin .crm-nav-group > details > summary:hover { background: rgb(255 255 255 / 8%); }
.crm-admin .crm-nav-group > details > ul { padding: 2px 0 8px; padding-inline-start: 22px; margin-inline-start: 22px; border-inline-start: 1px solid rgb(255 255 255 / 14%); }
.crm-admin nav.crm-nav-main .nav-link {
    display: flex; align-items: center; gap: 10px;
    min-height: 40px; padding: 8px 12px !important;
    border-radius: var(--crm-radius-sm);
    color: var(--crm-nav-text) !important; font-size: 14px; font-weight: 400;
    text-decoration: none; border-inline-start: 3px solid transparent;
}
.crm-admin nav.crm-nav-main .nav-link:hover { background: rgb(255 255 255 / 8%); color: #fff !important; }
.crm-admin nav.crm-nav-main .nav-link.active { background: rgb(255 255 255 / 14%); color: #fff !important; font-weight: 600; border-inline-start-color: var(--crm-nav-mark); }
.crm-admin .crm-nav-home .nav-link { font-weight: 600; color: #fff !important; }
.crm-admin .crm-nav-home .nav-link i { font-size: 18px; width: 22px; text-align: center; color: var(--crm-nav-mark); }
.crm-admin nav.crm-nav-main a:focus-visible, .crm-admin nav.crm-nav-main summary:focus-visible { outline: 3px solid var(--crm-nav-mark); outline-offset: 2px; }

.crm-admin .crm-user { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgb(255 255 255 / 14%); }
.crm-admin .crm-user > summary.user-btn { width: 100%; justify-content: flex-start; list-style: none; cursor: pointer; background: rgb(255 255 255 / 8%); border: 1px solid rgb(255 255 255 / 16%); color: #fff; }
.crm-admin .crm-user > summary.user-btn::-webkit-details-marker { display: none; }
.crm-admin .crm-user .user-avatar { background: rgb(255 255 255 / 16%); color: #fff; }
.crm-admin .crm-user-menu { padding-top: 6px; }
.crm-admin .crm-user-menu .dropdown-item { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border-radius: var(--crm-radius-sm); color: var(--crm-nav-text); font-size: 14px; background: transparent; }
.crm-admin .crm-user-menu .dropdown-item:hover, .crm-admin .crm-user-menu .dropdown-item:focus-within { background: rgb(255 255 255 / 8%); color: #fff; }
.crm-admin .crm-user-menu .dropdown-item.logout { color: #fecaca; }
.crm-admin .crm-user-menu .logout-inner-btn { padding: 0; min-height: 24px; text-align: start; flex: 1; }

.crm-admin .crm-footer {
    order: 1000; margin-top: auto;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 24px;
    padding: 14px clamp(16px, 2.5vw, 40px);
    border-top: 1px solid var(--line); background: var(--surface);
    color: var(--text-muted); font-size: 13px;
}
.crm-admin .crm-footer strong { color: var(--text); letter-spacing: .5px; margin-inline-end: 6px; }
.crm-admin .crm-footer-links { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.crm-admin .crm-footer a { color: var(--secondary); text-decoration: none; }
.crm-admin .crm-footer a:hover { color: var(--primary); text-decoration: underline; }

@media (min-width: 1200px) {
    .crm-admin form.crm-has-nav { padding-inline-start: var(--crm-sidebar); }
    .crm-admin nav.crm-nav-main {
        position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--crm-sidebar);
        display: flex; flex-direction: column; padding: 20px 12px 14px; overflow: hidden;
    }
    .crm-admin .crm-nav-top { padding: 0 8px 16px; border-bottom: 1px solid rgb(255 255 255 / 14%); }
    .crm-admin .crm-nav-check, .crm-admin .crm-nav-burger { display: none; }
    .crm-admin .crm-nav-body, .crm-admin .crm-nav-check:checked ~ .crm-nav-body { display: flex; flex-direction: column; flex: 1; min-height: 0; max-height: none; overflow: visible; padding-top: 14px; }
    .crm-admin .crm-nav-list { flex: 1; min-height: 0; overflow-y: auto; padding-inline-end: 4px; scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 30%) transparent; }
}

/* ---------- Page area ---------- */
.crm-admin form > main, .crm-admin form > .no-print ~ main, .crm-admin .platform-main {
    width: 100%; max-width: none; min-width: 0;
    padding: clamp(16px, 2vw, 28px) clamp(16px, 2.5vw, 40px) !important;
}
.crm-admin h1, .crm-admin h1.h3, .crm-admin .platform-page-header h1 {
    font-size: clamp(22px, 1.2vw + 14px, 28px); font-weight: 700; line-height: 1.45; letter-spacing: 0; margin: 0; color: var(--text);
}
.crm-admin h2, .crm-admin h2.h5 { font-size: 17px; font-weight: 600; line-height: 1.5; color: var(--text); margin: 0 0 14px; }
.crm-admin h3 { font-size: 15px; font-weight: 600; color: var(--text); }
.crm-admin p { color: inherit; }
/* The sign-in card keeps light text on its coloured band. */
.crm-login .login-header h1, .crm-login .login-header h2, .crm-login .login-header h3, .crm-login .login-header h4, .crm-login .login-header p { color: #fff; }
.crm-admin .text-muted, .crm-admin .platform-caption { color: var(--text-muted) !important; }
.crm-admin a { color: var(--primary); }
.crm-admin a:hover { color: var(--primary-2); }
.crm-admin .platform-eyebrow { color: var(--accent); font-size: 13px; font-weight: 600; margin-bottom: 6px; }

/* The header of a page: its title at the start, its links at the end. Links written as plain anchors look like the outline buttons of the other pages. */
.crm-admin .platform-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; margin-bottom: 20px; }
.crm-admin .platform-page-header nav, .crm-admin .platform-main > nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0; }
.crm-admin .platform-page-header nav a, .crm-admin .platform-main > nav a {
    display: inline-flex; align-items: center; min-height: 40px; padding: 8px 14px;
    border: 1px solid var(--line); border-radius: var(--crm-radius-sm); background: var(--surface);
    color: var(--secondary); font-size: 14px; font-weight: 500; text-decoration: none;
    transition: background-color .18s, border-color .18s, color .18s;
}
.crm-admin .platform-page-header nav a:hover, .crm-admin .platform-main > nav a:hover { border-color: var(--primary); color: var(--primary); background: var(--surface); }
.crm-admin .platform-page-header nav a.btn-primary, .crm-admin .platform-main > nav a.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.crm-admin .platform-page-header nav a.btn-primary:hover, .crm-admin .platform-main > nav a.btn-primary:hover { background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
.crm-admin .btn-outline-secondary { --bs-btn-color: var(--secondary); --bs-btn-border-color: var(--line); --bs-btn-bg: var(--surface); --bs-btn-hover-bg: var(--surface); --bs-btn-hover-color: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-active-bg: var(--surface-2); --bs-btn-active-color: var(--primary); --bs-btn-active-border-color: var(--primary); }
.crm-admin .platform-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.crm-admin .platform-primary:hover, .crm-admin .platform-primary:focus { background: var(--primary-2); border-color: var(--primary-2); color: #fff; }
/* Pages that write their buttons one after another with nothing between them. */
.crm-admin .platform-main .btn + .btn, .crm-admin .platform-main .btn + a.btn { margin-inline-start: 8px; }
.crm-admin .platform-card .table-responsive, .crm-admin .platform-main > .table-responsive { margin-top: 14px; }
.crm-admin .platform-card > p, .crm-admin .platform-card > div + p { margin-block: 8px 12px; }

/* ---------- Cards ---------- */
.crm-admin .finance-card, .crm-admin .platform-card, .crm-admin .calendar-day {
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--crm-radius);
    box-shadow: var(--crm-shadow); padding: clamp(16px, 2vw, 24px); margin-bottom: 20px; min-width: 0;
}
.crm-admin .workspace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; }
.crm-admin .workspace-grid > .finance-card { display: flex; flex-direction: column; gap: 6px; margin-bottom: 0; }
.crm-admin .workspace-grid > .finance-card .btn { align-self: flex-start; margin-top: auto; }
.crm-admin .workspace-figure { display: block; direction: inherit; unicode-bidi: normal; font-size: clamp(26px, 2vw, 34px); font-weight: 700; line-height: 1.3; color: var(--primary); font-variant-numeric: tabular-nums; }
.crm-admin .finance-summary div { background: var(--surface-2); color: var(--text); }
.crm-admin dl.crm-facts { margin: 0; }
.crm-admin dl.crm-facts dt { margin-top: 12px; color: var(--text-muted); font-size: 13px; font-weight: 500; }
.crm-admin dl.crm-facts dt:first-child { margin-top: 0; }
.crm-admin dl.crm-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.crm-admin .finance-badge { background: var(--crm-success-soft); color: var(--accent); }

/* ---------- Tables (a GridView writes its header cells in the body, so the cell itself is styled) ---------- */
.crm-admin table.table { border: 0; border-collapse: collapse; width: 100%; }
.crm-admin .table th { background: var(--surface-2); color: var(--secondary); font-size: 13px; font-weight: 600; white-space: nowrap; padding: 12px 16px; border: 0; border-bottom: 1px solid var(--line); text-align: start; }
.crm-admin .table td { padding: 12px 16px; font-size: 14px; vertical-align: middle; color: var(--text); border: 0; border-bottom: 1px solid var(--line); overflow-wrap: break-word; }
.crm-admin .table tr:last-child > td { border-bottom: 0; }
.crm-admin .table tr:hover > td { background: var(--surface-2); }
.crm-admin .table-responsive { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.crm-admin .table-responsive:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.crm-admin .table a { font-weight: 500; text-decoration: none; }
.crm-admin .table a:hover { text-decoration: underline; }

/* ---------- Forms ---------- */
.crm-admin .calendar-filters { gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.crm-admin .calendar-filters label, .crm-admin .platform-card label, .crm-admin .finance-card label, .crm-admin .form-label {
    display: inline-block; margin-bottom: 6px; color: var(--secondary); font-size: 14px; font-weight: 500;
}
.crm-admin .form-check-label, .crm-admin input[type="checkbox"] + label, .crm-admin input[type="radio"] + label { margin-bottom: 0; margin-inline-start: 6px; font-weight: 400; }
.crm-admin .form-control, .crm-admin .form-select { padding: 9px 12px; }
.crm-admin textarea.form-control { min-height: 96px; }
.crm-admin .form-control[readonly], .crm-admin .form-control:disabled, .crm-admin .form-select:disabled { background: var(--surface-2); color: var(--secondary); }
.crm-admin .form-control::placeholder { color: #8aa0aa; }
.crm-admin .btn { cursor: pointer; transition: background-color .18s, border-color .18s, color .18s; }
.crm-admin .btn:disabled, .crm-admin .btn.disabled, .crm-admin input[type="submit"]:disabled { opacity: .55; cursor: not-allowed; }
.crm-admin .btn-outline-primary { --bs-btn-color: var(--primary); --bs-btn-border-color: var(--primary); --bs-btn-hover-bg: var(--primary); --bs-btn-hover-border-color: var(--primary); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--primary-2); --bs-btn-active-border-color: var(--primary-2); }
.crm-admin .btn-outline-danger { --bs-btn-color: var(--crm-error); --bs-btn-border-color: #f1c4c4; --bs-btn-hover-bg: var(--crm-error); --bs-btn-hover-border-color: var(--crm-error); }

/* ---------- Messages: a label that carries text reads as a notice ---------- */
.crm-admin span[role="status"]:not(:empty), .crm-admin span[role="alert"]:not(:empty), .crm-admin .platform-message:not(:empty), .crm-admin .platform-error:not(:empty) {
    display: block; padding: 12px 16px; border: 1px solid #bfe3ee; border-inline-start: 4px solid var(--crm-info);
    border-radius: var(--crm-radius-sm); background: var(--crm-info-soft); color: #0b4a5c; font-size: 14px; overflow-wrap: anywhere;
}
/* Many pages use one label for "saved" and for "refused", so a label is never red by its role alone; only a dedicated error element is. */
.crm-admin .platform-error:not(:empty), .crm-admin span.text-danger[role]:not(:empty) { border-color: #f3c7c7; border-inline-start-color: var(--crm-error); background: var(--crm-error-soft); color: #7f1d1d; }
.crm-admin .alert { border-radius: var(--crm-radius-sm); font-size: 14px; }

@media (max-width: 575px) {
    .crm-admin .platform-page-header { align-items: stretch; }
    .crm-admin .table th, .crm-admin .table td { padding: 10px 12px; }
    .crm-admin .crm-footer { justify-content: flex-start; }
}
@media print {
    .crm-admin form.crm-has-nav { display: block; padding-inline-start: 0; min-height: 0; }
    .crm-admin nav.crm-nav-main, .crm-admin .crm-footer { display: none !important; }
    .crm-admin .table-responsive { border: 0; }
}