/* ============================================================================
   chnafi-theme.css -- the Chnafi brand on the CRM shell.

   Loaded LAST (app/Views/includes/head.php), after clinic-design.css, so on equal
   specificity it wins. Three parts:

     1. Brand tokens. porcelain-noir.css and clinic-design.css are driven by the
        --pn-* custom properties, so re-pointing them re-colours every screen
        (buttons, cards, chips, tables) without touching their selectors.
     2. The section rail and the section tabs (Simpler menu design):
        app/Views/includes/left_menu_rail.php, includes/section_tabs.php.
     3. The Today home page: app/Views/today/index.php.

   Colours: navy #10152A (sidebar), #232A45 (active), ink #0E1325, primary
   #2E46F5, highlight #6F82FF, amber #F5A524, mint #34D399.
   Fonts: Geist for Latin, IBM Plex Sans Arabic for Arabic (Geist has no Arabic
   glyphs, so each script falls to its own face), Bricolage Grotesque for display
   numbers.

   RTL: everything positional is written with logical properties
   (inset-inline-start, margin-inline-start, padding-inline-...) so one rule
   serves Arabic and English; the few physical offsets inherited from
   app.all.css / rtl.css are overridden per direction.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. tokens */
body.porcelain-noir {
    --chn-navy: #10152A;
    --chn-navy-active: #232A45;
    --chn-ink: #0E1325;
    --chn-primary: #2E46F5;
    --chn-primary-hover: #1F33C9;
    --chn-highlight: #6F82FF;
    --chn-amber: #F5A524;
    --chn-mint: #34D399;
    --chn-rail-w: 96px;

    --pn-bg: #F5F6FB;
    --pn-surface: #FFFFFF;
    --pn-well: #F5F6FB;
    --pn-border: #E2E5F0;
    --pn-border-strong: #D3D7E6;
    --pn-text-1: #0E1325;
    --pn-text-2: #3B4262;
    --pn-text-3: #5A6180;
    --pn-accent: #2E46F5;
    --pn-accent-hover: #1F33C9;
    --pn-on-accent: #FFFFFF;
    --pn-accent-bg: #EEF0FF;
    --pn-accent-ink: #2E46F5;
    --pn-info: #2E46F5;
    --pn-info-bg: #EEF0FF;
    --pn-warning: #7A4F00;
    --pn-warning-bg: #FFF4DC;
    --pn-success: #0B6B4A;
    --pn-success-bg: #E3F8EF;
    --pn-series-1: #2E46F5;
    --pn-series-2: #6F82FF;

    --pn-sb-bg: #10152A;
    --pn-sb-border: #1C2240;
    --pn-sb-text: #9AA1B9;
    --pn-sb-text-hi: #FFFFFF;
    --pn-sb-active: #232A45;
    --pn-sb-on: #6F82FF;

    --pn-font-ui: "Geist", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
    --pn-font-serif: "Geist", "IBM Plex Sans Arabic", system-ui, sans-serif;
    --chn-font-display: "Bricolage Grotesque", "Geist", "IBM Plex Sans Arabic", sans-serif;

    --pn-radius-card: 20px;
    --pn-radius-control: 12px;
    --pn-shadow-card: none;
}

/* Dark: the same navy family, not an inversion. Mirrors clinic-design.css's two
   selectors so it overrides them on equal specificity. */
@media (prefers-color-scheme: dark) {
    body.porcelain-noir:not([data-theme="light"]) {
        --pn-bg: #0A0D1A;
        --pn-surface: #121731;
        --pn-well: #0E1226;
        --pn-border: #232A45;
        --pn-border-strong: #2F3758;
        --pn-text-1: #EEF0F8;
        --pn-text-2: #C3C8DC;
        --pn-text-3: #9AA1B9;
        --pn-accent: #6F82FF;
        --pn-accent-hover: #8FA0FF;
        --pn-on-accent: #080B15;
        --pn-accent-bg: #1C2350;
        --pn-accent-ink: #AEB9FF;
        --pn-info: #8FA0FF;
        --pn-info-bg: #1C2350;
        --pn-warning: #F5C56B;
        --pn-warning-bg: #3A2A0A;
        --pn-success: #6EE7B7;
        --pn-success-bg: #0F2E24;
        --pn-sb-bg: #080B15;
        --pn-sb-border: #161B33;
        --pn-sb-active: #232A45;
        --pn-sb-on: #8FA0FF;
    }
}
body.porcelain-noir[data-theme="dark"] {
    --pn-bg: #0A0D1A;
    --pn-surface: #121731;
    --pn-well: #0E1226;
    --pn-border: #232A45;
    --pn-border-strong: #2F3758;
    --pn-text-1: #EEF0F8;
    --pn-text-2: #C3C8DC;
    --pn-text-3: #9AA1B9;
    --pn-accent: #6F82FF;
    --pn-accent-hover: #8FA0FF;
    --pn-on-accent: #080B15;
    --pn-accent-bg: #1C2350;
    --pn-accent-ink: #AEB9FF;
    --pn-info: #8FA0FF;
    --pn-info-bg: #1C2350;
    --pn-warning: #F5C56B;
    --pn-warning-bg: #3A2A0A;
    --pn-success: #6EE7B7;
    --pn-success-bg: #0F2E24;
    --pn-sb-bg: #080B15;
    --pn-sb-border: #161B33;
    --pn-sb-active: #232A45;
    --pn-sb-on: #8FA0FF;
}

body.porcelain-noir,
body.porcelain-noir .modal,
body.porcelain-noir input,
body.porcelain-noir select,
body.porcelain-noir textarea,
body.porcelain-noir button {
    font-family: var(--pn-font-ui);
}

/* Buttons: pills, the brand primary. */
body.porcelain-noir .btn {
    border-radius: 999px;
    font-weight: 600;
}
body.porcelain-noir .btn-primary,
body.porcelain-noir .btn-info {
    background-color: var(--pn-accent) !important;
    border-color: var(--pn-accent) !important;
    color: var(--pn-on-accent) !important;
}
body.porcelain-noir .btn-primary:hover,
body.porcelain-noir .btn-primary:focus {
    background-color: var(--pn-accent-hover) !important;
    border-color: var(--pn-accent-hover) !important;
}

/* Cards. */
body.porcelain-noir .card {
    border: 1px solid var(--pn-border);
    border-radius: var(--pn-radius-card);
    box-shadow: none !important;
}

/* Header: white, 68px, a wide rounded search. */
body.porcelain-noir .navbar-custom {
    min-height: 68px;
    background: var(--pn-surface) !important;
    border-bottom: 1px solid var(--pn-border);
}
body.porcelain-noir .pn-search {
    height: 44px;
    max-width: 640px;
    border-radius: 14px;
    background: var(--pn-well);
}

/* ------------------------------------------------------------ 2. the rail */
body.porcelain-noir .sidebar.chn-rail {
    width: var(--chn-rail-w) !important;
    background: var(--pn-sb-bg);
    overflow: visible;
    box-shadow: none !important;
}
.chn-rail .chn-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 0 10px;
    color: #EEF0F8;
    text-decoration: none;
}
.chn-rail .chn-brand span {
    font-family: var(--chn-font-display);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.03em;
}
.chn-rail .chn-brand:hover { color: #FFFFFF; }

body.porcelain-noir .chn-rail .chn-rail-scroll {
    overflow: visible !important;
    background: transparent;
}
#sidebar-menu.chn-rail-menu {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-height: 100%;
    padding: 6px 0 14px;
    margin: 0;
}
#sidebar-menu.chn-rail-menu > li.chn-rail-item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}
#sidebar-menu.chn-rail-menu > li.is_footer {
    margin-top: auto;
    padding-top: 10px;
}
#sidebar-menu .chn-rail-link {
    width: 78px;
    min-height: 58px;
    margin: 0;
    padding: 8px 4px;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: var(--pn-sb-text) !important;
    background: transparent !important;
    text-align: center;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
}
#sidebar-menu .chn-rail-link svg { width: 20px; height: 20px; margin: 0 !important; }
#sidebar-menu .chn-rail-link span { margin: 0 !important; }
#sidebar-menu .chn-rail-item:hover > .chn-rail-link,
#sidebar-menu .chn-rail-link:focus-visible {
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, .06) !important;
}
#sidebar-menu .chn-rail-item.active > .chn-rail-link {
    color: #FFFFFF !important;
    background: var(--pn-sb-active) !important;
    box-shadow: inset 0 0 0 1px #3A4470;
}
#sidebar-menu .chn-rail-item.active > .chn-rail-link svg { color: var(--pn-sb-on); }

/* The pop-out: every page of the section, on hover or keyboard focus. */
#sidebar-menu .chn-flyout {
    position: absolute;
    top: 0;
    inset-inline-start: calc(100% - 6px);
    z-index: 1100;
    min-width: 230px;
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    padding: 10px;
    border-radius: 16px;
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    box-shadow: 0 16px 40px rgba(14, 19, 37, .18);
    visibility: hidden;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s 120ms;
}
[dir="rtl"] #sidebar-menu .chn-flyout { transform: translateX(4px); }
#sidebar-menu .chn-rail-item.is_footer .chn-flyout { top: auto; bottom: 0; }
#sidebar-menu .chn-rail-item:hover .chn-flyout,
#sidebar-menu .chn-rail-item:focus-within .chn-flyout {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 120ms ease-out, transform 120ms ease-out;
}
#sidebar-menu .chn-flyout-title {
    padding: 4px 10px 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--pn-text-3);
}
#sidebar-menu .chn-flyout ul {
    max-height: none !important;
    overflow: visible !important;
    list-style: none;
    margin: 0;
    padding: 0;
}
#sidebar-menu .chn-flyout li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    padding: 8px 10px;
    border-radius: 10px;
    color: var(--pn-text-1) !important;
    background: transparent !important;
    font-size: 14px;
    font-weight: 500;
}
#sidebar-menu .chn-flyout li a span { margin: 0 !important; }
#sidebar-menu .chn-flyout li a:hover,
#sidebar-menu .chn-flyout li a:focus-visible { background: var(--pn-well) !important; }
#sidebar-menu .chn-flyout li.active > a {
    color: var(--pn-accent) !important;
    background: var(--pn-accent-bg) !important;
    font-weight: 600;
}
#sidebar-menu .chn-flyout-alt li a {
    padding-inline-start: 24px;
    font-size: 13px;
    color: var(--pn-text-3) !important;
}

.chn-badge {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--chn-amber);
    color: #080B15;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

/* Desktop: the rail is always open; the old collapse toggle has nothing to do. */
@media (min-width: 991px) {
    body.porcelain-noir:has(.chn-rail) .page-container { margin-left: var(--chn-rail-w) !important; margin-right: 0 !important; }
    body.porcelain-noir:has(.chn-rail) .navbar-custom { left: var(--chn-rail-w) !important; right: 0 !important; }
    [dir="rtl"] body.porcelain-noir:has(.chn-rail) .page-container { margin-left: 0 !important; margin-right: var(--chn-rail-w) !important; }
    [dir="rtl"] body.porcelain-noir:has(.chn-rail) .navbar-custom { left: 0 !important; right: var(--chn-rail-w) !important; }
    body.porcelain-noir:has(.chn-rail) .sidebar-toggle-btn-li { display: none !important; }
    body.porcelain-noir.sidebar-toggled .sidebar.chn-rail { position: fixed; height: 100vh; }
}
/* Phones and narrow windows keep the app's slide-in sidebar, at rail width. */
@media (max-width: 990px) {
    body.porcelain-noir .sidebar-off.chn-rail { left: calc(-1 * var(--chn-rail-w) - 10px); }
    [dir="rtl"] body.porcelain-noir .sidebar-off.chn-rail { left: auto; right: calc(-1 * var(--chn-rail-w) - 10px); }
    body.porcelain-noir.sidebar-toggled .sidebar-off.chn-rail { left: 0; }
    [dir="rtl"] body.porcelain-noir.sidebar-toggled .sidebar-off.chn-rail { left: auto; right: 0; }
}

/* ------------------------------------------------------- the section tabs */
.chn-tabs {
    background: var(--pn-surface);
    border-bottom: 1px solid var(--pn-border);
    padding: 0 24px;
}
.chn-tabs-row {
    display: flex;
    align-items: stretch;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}
.chn-tabs-title {
    display: flex;
    align-items: center;
    padding-inline-end: 14px;
    margin-inline-end: 6px;
    border-inline-end: 1px solid var(--pn-border);
    font-weight: 700;
    font-size: 15px;
    color: var(--pn-text-1);
    white-space: nowrap;
}
.chn-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 12px 12px;
    border-bottom: 2px solid transparent;
    color: var(--pn-text-3);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    text-decoration: none;
}
.chn-tab:hover { color: var(--pn-text-1); }
.chn-tab.active {
    color: var(--pn-accent);
    border-bottom-color: var(--pn-accent);
}
.chn-tabs-alt {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0 12px;
}
.chn-pill {
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid var(--pn-border-strong);
    color: var(--pn-text-2);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}
.chn-pill:hover { color: var(--pn-text-1); border-color: var(--pn-text-3); }
.chn-pill.active {
    background: var(--chn-navy);
    border-color: var(--chn-navy);
    color: #FFFFFF;
}

/* ----------------------------------------------------------- 3. Today page */
.chn-today {
    padding: 28px 32px 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    color: var(--pn-text-1);
}
.chn-today-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.chn-today-date { font-size: 14px; font-weight: 600; color: var(--pn-text-3); }
.chn-today h1 {
    margin: 4px 0 0;
    font-size: 30px;
    font-weight: 700;
    color: var(--pn-text-1);
    font-family: var(--pn-font-ui);
}
.chn-today-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.chn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    padding: 0 20px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.chn-btn-primary { background: var(--pn-accent); color: var(--pn-on-accent) !important; border: 0; }
.chn-btn-primary:hover { background: var(--pn-accent-hover); }
.chn-btn-ghost { background: var(--pn-surface); color: var(--pn-text-1) !important; border: 1px solid var(--pn-border-strong); }
.chn-btn-ghost:hover { border-color: var(--pn-text-3); }

.chn-today-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}
.chn-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 22px;
    border-radius: 20px;
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
    color: var(--pn-text-1) !important;
    text-decoration: none !important;
    transition: border-color 120ms ease-out;
}
.chn-card:hover { border-color: var(--pn-border-strong); }
.chn-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--pn-text-2);
}
.chn-card-num {
    font-family: var(--chn-font-display);
    font-size: 44px;
    font-weight: 700;
    line-height: 1;
}
.chn-card-sub { font-size: 13px; color: var(--pn-text-3); min-height: 1.4em; }
.chn-card-cta {
    margin-top: 6px;
    height: 44px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    background: var(--chn-highlight);
    color: #080B15;
}
.chn-card-cta-ghost { background: transparent; border: 1px solid var(--pn-border-strong); color: var(--pn-text-1); }
.chn-card:hover .chn-card-cta-ghost { border-color: var(--pn-text-3); }

.chn-card-dark {
    background: var(--chn-navy);
    border-color: var(--chn-navy);
    color: #EEF0F8 !important;
}
.chn-card-dark:hover { border-color: #3A4470; }
.chn-card-dark .chn-card-top { color: #D8DCF0; }
.chn-card-dark .chn-card-sub { color: #9AA1B9; }

.chn-chip {
    flex: none;
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.chn-chip-amber { background: #FFF4DC; color: #7A4F00; }
.chn-card-dark .chn-chip-amber { background: var(--chn-amber); color: #080B15; }
.chn-chip-blue { background: #EEF0FF; color: #2E46F5; }
.chn-chip-mint { background: #E3F8EF; color: #0B6B4A; }
.chn-chip-red { background: #FDE4E4; color: #B91C1C; }

.chn-today-lists { display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-start; }
.chn-panel {
    flex: 2 1 320px;
    min-width: 0;
    padding: 20px;
    border-radius: 20px;
    background: var(--pn-surface);
    border: 1px solid var(--pn-border);
}
.chn-panel-wide { flex: 3 1 460px; }
.chn-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}
.chn-panel-head h2 { margin: 0; font-size: 18px; font-weight: 700; color: var(--pn-text-1); font-family: var(--pn-font-ui); }
.chn-panel-head a { font-size: 13px; font-weight: 700; color: var(--pn-accent); }
.chn-empty { margin: 8px 0 4px; color: var(--pn-text-3); font-size: 14px; }

.chn-row, .chn-todo {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-top: 1px solid var(--pn-border);
    color: var(--pn-text-1) !important;
    text-decoration: none !important;
}
.chn-row:hover b, .chn-todo:hover b { color: var(--pn-accent); }
.chn-row-time { width: 76px; flex: none; font-size: 14px; font-weight: 700; }
.chn-row-bar { width: 4px; height: 38px; flex: none; border-radius: 2px; background: var(--pn-border-strong); }
.chn-row-bar.tone-mint { background: var(--chn-mint); }
.chn-row-bar.tone-blue { background: var(--chn-primary); }
.chn-row-bar.tone-amber { background: var(--chn-amber); }
.chn-row-bar.tone-red { background: #EF4444; }
.chn-row-main, .chn-todo > span { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chn-row-main b, .chn-todo b { font-size: 15px; font-weight: 600; }
.chn-row-main small, .chn-todo small { font-size: 12px; color: var(--pn-text-3); }
.chn-todo { align-items: flex-start; gap: 12px; }
.chn-todo svg { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--pn-accent); }
.chn-todo small.is-late { color: #B45309; }
.chn-todo-more b { font-size: 13px; color: var(--pn-accent); }

@media (max-width: 640px) {
    .chn-today { padding: 18px 16px 32px; }
    .chn-tabs { padding: 0 12px; }
}

/* ------------------------------------------------- header controls, rail extras */
#default-navbar .navbar-nav { align-items: center; }
#default-navbar .container-fluid { min-height: 68px; }
#default-navbar .pn-new-li .pn-new-btn {
    height: 44px;
    padding: 0 18px !important;
    border-radius: 999px;
    font-size: 14px;
}

/* The branch switcher, folded to the rail's width: the pin and a short name. */
.chn-rail .pn-branch { padding: 0 9px 8px; }
.chn-rail .pn-branch-toggle {
    width: 78px;
    flex-direction: column;
    gap: 2px;
    padding: 6px 4px;
    margin: 0 auto;
    border-radius: 12px;
    font-size: 11px;
    text-align: center;
}
.chn-rail .pn-branch-toggle .pn-branch-name {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.chn-rail .pn-branch-chevron { display: none; }
.chn-rail .pn-branch-menu {
    position: absolute;
    inset-inline-start: calc(100% - 6px);
    top: 0;
    min-width: 240px;
    z-index: 1100;
}
/* porcelain-noir paints nested sidebar lists; the pop-out is a light panel. */
#sidebar-menu .chn-flyout ul,
#sidebar-menu .chn-flyout li { background: transparent !important; }