/* ==========================================================================
   components.css — runtime-emitted components
   style.css covers the primitives that appear in static markup. This sheet
   covers the composite pieces that only exist once JS has built them: the app
   shell (header tools, account menu, search results), the money affix, and a
   few page-level helpers. Loaded after style.css, before responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sidebar internals
   -------------------------------------------------------------------------- */
.nav-group {
    list-style: none;
}

.nav-group ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* The logout control in the footer is a real <button> wearing .nav-link. */
button.nav-link {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: 600;
    cursor: pointer;
    text-align: start;
}

.sidebar-toggle svg {
    transition: transform var(--motion-base) var(--ease-standard);
}

.sidebar-toggle.is-flipped svg {
    transform: rotate(180deg);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-2) var(--sp-3) var(--sp-3);
    min-width: 0;
}

.sidebar-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-user-name {
    font-size: var(--fs-sm);
    font-weight: 700;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-user-role {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed rail: hide the user block. */
@media (min-width: 901px) {
    :root[data-sidebar="collapsed"] .sidebar-user,
    :root[data-sidebar="collapsed"] .sidebar-user-info {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Header: hamburger, account button, notification dot
   -------------------------------------------------------------------------- */
.nav-toggle {
    display: none;
}

.account-btn {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px var(--sp-2) 4px 4px;
    border: 1px solid transparent;
    border-radius: var(--r-full);
    background: none;
    font: inherit;
    color: var(--on-surface);
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-standard),
                border-color var(--motion-fast) var(--ease-standard);
}

.account-btn:hover {
    background: var(--hover-wash);
    border-color: var(--hairline);
}

.account-btn svg {
    width: 18px;
    height: 18px;
    fill: var(--text-muted);
    flex: none;
}

.account-name {
    font-size: var(--fs-sm);
    font-weight: 600;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1100px) {
    .account-name {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   Menus: richer items + the global-search result panel
   -------------------------------------------------------------------------- */
.menu-wide {
    min-width: 320px;
}

.menu-item-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    background: var(--surface-container);
    color: var(--on-surface-variant);
}

.menu-item-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.menu-item-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.menu-item-title {
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--on-surface);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-item-sub {
    font-size: var(--fs-2xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu-empty {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-4);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    justify-content: center;
}

.menu-empty svg {
    width: 18px;
    height: 18px;
    fill: var(--success);
}

.menu .badge {
    flex: none;
}

.search-results {
    position: absolute;
    top: calc(100% + 6px);
    inset-inline: 0;
    background: var(--surface-container-lowest);
    border: 1px solid var(--hairline);
    border-radius: var(--r-md);
    box-shadow: var(--elevation-3);
    padding: var(--sp-2);
    z-index: 80;
    max-height: 60vh;
    overflow-y: auto;
}

/* --------------------------------------------------------------------------
   Money input affix (the .input-affix shell lives in style.css)
   -------------------------------------------------------------------------- */
.input-affix .affix-text,
.field-box .affix-text {
    position: absolute;
    inset-inline-end: var(--sp-3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: var(--text-muted);
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Shell: shrink permission
   A flex child that contains a horizontally scrollable region (.kanban, a wide
   table) keeps its content's intrinsic width unless it may shrink, which pushes
   the whole shell sideways and shoves the sidebar off-screen.
   -------------------------------------------------------------------------- */
.app-main,
.app-content,
.content-inner {
    min-width: 0;
}

/* --------------------------------------------------------------------------
   Bottom nav
   The tab bar is a small-viewport affordance only. responsive.css reveals it
   inside its <=900px block; without this base rule the <nav> would sit in the
   normal flow under the content on desktop.
   -------------------------------------------------------------------------- */
.bottom-nav {
    display: none;
}

/* --------------------------------------------------------------------------
   Page-level helpers
   -------------------------------------------------------------------------- */

/* Several components set their own `display` (.btn, .icon-button, .field…),
   which would out-specify the UA's [hidden] rule. The markup relies on the
   `hidden` attribute for tabs, the chart/table switch and filter resets, so
   make it authoritative here. */
[hidden] {
    display: none !important;
}

.page-head h2 {
    font-size: var(--fs-h1);
    margin: 0;
}

.card-error {
    border-color: var(--error-container);
    background: var(--error-container);
    color: var(--on-error-container);
}

.card-error strong {
    display: block;
    margin-bottom: var(--sp-1);
}

/* A chart card whose plot is empty must not collapse to nothing. */
.chart-empty {
    display: grid;
    place-items: center;
    min-height: 180px;
}

/* The plot is measured and drawn at real pixel size by js/ui.js, so the SVG
   must not be scaled by CSS — that would soften the axis text. */
.chart-plot svg {
    display: block;
    overflow: visible;
}

/* Field spanning a full row inside .field-grid is .span-full (style.css). */
@media (max-width: 900px) {
    .nav-toggle {
        display: grid;
    }
}

/* On touch there is no drag affordance, so the select moves the card. */
@media (hover: none) {
    .deal-card {
        cursor: default;
    }
}

/* Wide dropdown: anchored to the viewport on mobile. */
@media (max-width: 900px) {
    .menu-wide {
        position: fixed;
        inset-inline: var(--sp-4);
        top: calc(var(--header-height) + 6px);
        width: auto;
        min-width: 0;
        max-height: calc(100dvh - var(--header-height) - var(--sp-8));
        overflow-y: auto;
    }
}

/* ========================================================================
   GLOBAL VOIP CALL BAR

   The bar is absolutely centred in the header. It needs the header to be its
   positioning context, and nothing else in the app relies on the header being
   static, so the header is made relative here — without it the bar resolves
   against the viewport and floats in the middle of the page.
   ======================================================================== */

.app-header {
    position: relative;
}

.header-callbar[hidden] {
    display: none !important;
}

.header-callbar {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 40;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    min-width: 340px;
    max-width: min(540px, 44vw);
    height: 48px;
    padding: 4px 8px;

    border: 1px solid var(--border, #e5e7eb);
    border-radius: 16px;
    background: var(--surface, #fff);
    box-shadow:
        0 8px 28px rgba(15, 23, 42, .10),
        0 2px 8px rgba(15, 23, 42, .05);

    direction: rtl;
}

/* Action clusters stay fixed at the edges while the identity block absorbs
   the slack, so the buttons keep their position between ringing and in-call. */
.header-callbar-group {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-call-person {
    flex: 1 1 auto;
    min-width: 140px;
    max-width: 260px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    text-align: center;
    line-height: 1.2;
}

/* Line 1 — the caller. The primary readable line, on the theme's own text
   colour (--on-surface). --text is not a defined token, so the old
   var(--text, #111827) fell back to near-black and vanished on dark. */
.header-call-person strong {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    color: var(--on-surface, #111827);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
}

/* Second line: number, then the timer or status word. Kept to one line so the
   bar stays within the header height. */
.header-call-person .header-call-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 2px;
    max-width: 100%;
    min-width: 0;

    color: var(--on-surface-variant, #6b7280);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .2px;
}

.header-call-person .header-call-meta > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-call-person small {
    flex: none;
    color: var(--on-surface-variant, #6b7280);
    font-size: 10px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Status may be a full sentence ("a call was cut off by navigation"); let it
   truncate rather than shove the number or the controls out of the bar. */
.header-call-person small[id="globalCallStatus"] {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--primary);
}

.header-call-action {
    flex: 0 0 auto;

    width: 36px;
    height: 36px;
    padding: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;
    cursor: pointer;

    font: inherit;
    font-size: 16px;
    line-height: 1;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        background-color .16s ease,
        opacity .16s ease;
}

.header-call-action[hidden] {
    display: none !important;
}

.header-call-action:hover:not(:disabled) {
    transform: translateY(-1px) scale(1.04);
}

.header-call-action:active:not(:disabled) {
    transform: scale(.96);
}

.header-call-action:disabled {
    cursor: wait;
    opacity: .55;
}

.header-call-answer {
    background: #16a34a;
    color: #fff;
    box-shadow: 0 5px 14px rgba(22, 163, 74, .25);
}

.header-call-answer:hover:not(:disabled) {
    background: #15803d;
    box-shadow: 0 7px 18px rgba(22, 163, 74, .32);
}

.header-call-reject {
    background: #ef4444;
    color: #fff;
    box-shadow: 0 5px 14px rgba(239, 68, 68, .22);
}

.header-call-reject:hover:not(:disabled) {
    background: #dc2626;
    box-shadow: 0 7px 18px rgba(239, 68, 68, .30);
}

.header-call-mute,
.header-call-hold,
.header-call-recall,
.header-call-dismiss {
    width: 32px;
    height: 32px;

    background: var(--surface-2, #f3f4f6);
    color: var(--text, #374151);
    border: 1px solid var(--border, #e5e7eb);
    box-shadow: none;
}

.header-call-mute.is-active,
.header-call-hold.is-active {
    background: #fff7ed;
    border-color: #fdba74;
    color: #c2410c;
}

/* Dark theme */
[data-theme="dark"] .header-call-mute,
[data-theme="dark"] .header-call-hold,
[data-theme="dark"] .header-call-recall,
[data-theme="dark"] .header-call-dismiss {
    background: rgba(255, 255, 255, .06);
}

/* ringing emphasis without making the header visually noisy */
.header-callbar:has(.header-call-answer:not([hidden])) {
    border-color: rgba(22, 163, 74, .25);
}

[data-theme="dark"] .header-callbar {
    background: var(--surface, #111827);
    border-color: var(--border, #374151);
    box-shadow:
        0 10px 32px rgba(0, 0, 0, .28),
        0 2px 8px rgba(0, 0, 0, .20);
}

/* Smaller desktop widths */
@media (max-width: 1180px) {
    .header-callbar {
        min-width: 280px;
        max-width: 40vw;
    }

    .header-call-person {
        min-width: 110px;
    }
}

/* Mobile/tablet: float below the header instead of crushing its tools. The
   header is sticky here, so a fixed bar under it stays put while scrolling. */
@media (max-width: 820px) {
    .header-callbar {
        position: fixed;
        top: calc(var(--header-height) + 8px);
        left: 50%;
        transform: translateX(-50%);

        width: calc(100vw - 24px);
        max-width: 460px;
        min-width: 0;
        height: 54px;

        z-index: 1200;
    }

    .header-call-person {
        max-width: none;
    }

    .header-call-action {
        width: 34px;
        height: 34px;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .header-call-action {
        transition: none;
    }
}

/* ====================================================================== */

/* Notification center uses shared cards, stats, fields and semantic tokens.
   nc-* deliberately avoids the historical notif-* overrides in style.css.
   Kept in the shared sheet so navigation into this page needs no extra CSS. */
.nc-kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.nc-kpi-grid .stat { min-width: 0; }
.nc-kpi-grid .stat-foot { font-size: var(--fs-xs); }
.nc-filter-card > .nc-filter-body,
.nc-item > .card-body-pad { padding: 0; }
.nc-filter-head,
.nc-delay-side-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-3); flex-wrap: wrap;
}
.nc-filter-head { margin-bottom: var(--sp-5); }
.nc-filter-head h3 { font-size: var(--fs-h3); margin: var(--sp-1) 0; }
.nc-filter-head p,
.nc-filter-kicker { color: var(--text-muted); font-size: var(--fs-xs); }
.nc-filter-badge,
.nc-delay-count,
.nc-delay-rank {
    background: var(--primary-subtle); color: var(--primary);
    border-radius: var(--r-full); padding: var(--sp-1) var(--sp-3);
    font-size: var(--fs-xs); white-space: nowrap;
}
.nc-filter-grid.form-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-4); padding: 0;
}
.nc-filter-grid .field { min-width: 0; margin: 0; }
.nc-search-field { grid-column: span 2; }
.nc-search-box { position: relative; }
.nc-search-box input { padding-inline-start: 40px; }
.nc-search-symbol {
    position: absolute; inset-inline-start: 12px; top: 50%;
    transform: translateY(-50%); color: var(--text-muted); pointer-events: none;
    display: flex;
}
.nc-search-symbol svg,
.nc-delay-icon svg { width: 20px; height: 20px; fill: currentColor; }
.nc-filter-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--sp-4); border-top: 1px solid var(--hairline);
    margin-top: var(--sp-5); padding-top: var(--sp-4);
}
.nc-changes-switch { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.nc-changes-switch > input { width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.nc-switch-ui { display: none; }
.nc-switch-text { display: grid; gap: var(--sp-1); }
.nc-switch-text strong { color: var(--on-surface); font-size: var(--fs-sm); font-weight: 600; }
.nc-switch-text small { color: var(--text-muted); font-size: var(--fs-xs); }
.nc-filter-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.nc-delay-card {
    display: flex; align-items: center; gap: var(--sp-5); flex-wrap: wrap;
    background: var(--surface-container-lowest); color: var(--on-surface);
    border: 1px solid var(--hairline); border-radius: var(--r-lg);
    box-shadow: var(--elevation-1); padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.nc-delay-accent { display: none; }
.nc-delay-icon {
    display: grid; place-items: center; width: 40px; height: 40px;
    border-radius: var(--r-sm); background: var(--warning-container);
    color: var(--on-warning-container); flex: none;
}
.nc-delay-title { font-weight: 600; font-size: var(--fs-sm); }
.nc-delay-value { display: flex; align-items: baseline; gap: var(--sp-2); }
.nc-delay-value strong { font-size: var(--fs-h2); }
.nc-delay-value span,
.nc-delay-subtitle,
.nc-delay-empty { color: var(--text-muted); font-size: var(--fs-xs); }
.nc-delay-side { flex: 1 1 300px; min-width: 0; margin-inline-start: auto; }
.nc-delay-side-head { font-size: var(--fs-xs); color: var(--text-muted); margin-bottom: var(--sp-2); }
.nc-delay-users { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.nc-delay-user { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2); background: var(--surface-container-low); border-radius: var(--r-sm); min-width: 0; }
.nc-delay-user-name { overflow-wrap: anywhere; font-size: var(--fs-sm); }
.nc-delay-rank { padding: 2px 7px; }
.nc-items-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); }
.nc-items-grid .nc-item { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.nc-item.is-unread { border-inline-start: 3px solid var(--primary); }
.nc-item .toolbar { flex-wrap: wrap; gap: var(--sp-3); }
.nc-item h3 { font-size: var(--fs-h3); }
.nc-item p { line-height: 1.9; margin-top: var(--sp-2); }
.nc-item-date { font-size: var(--fs-xs); }
.nc-item .nc-severity-warning { background: var(--warning-container); color: var(--on-warning-container); }
.nc-item .nc-severity-critical { background: var(--error-container); color: var(--on-error-container); }
.nc-item .nc-severity-success { background: var(--success-container); color: var(--on-success-container); }
@media (max-width: 1200px) {
    .nc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .nc-filter-grid.form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .nc-filter-grid.form-grid { grid-template-columns: minmax(0, 1fr); }
    .nc-search-field { grid-column: auto; }
    .nc-filter-head { align-items: flex-start; }
    .nc-filter-actions { width: 100%; }
    .nc-filter-actions .btn { flex: 1; }
    .nc-delay-card { gap: var(--sp-3); }
}
@media (max-width: 360px) {
    .nc-kpi-grid { grid-template-columns: minmax(0, 1fr); }
}