/* ==========================================================================
   Fast Print — admin dashboard styles
   --------------------------------------------------------------------------
   A thin layer on top of Tabler 1.6 (public/assets/shared/tabler/).
   Only things Tabler does not give us live here:

     1. the FP brand mark
     2. the collapsible desktop sidebar
     3. small layout helpers used by our views (.fp-*)
     4. RTL corrections Tabler's RTL build does not cover
     5. print styles

   Components (cards, tables, forms, modals, badges, buttons, alerts, tabs,
   dropdowns) come from Tabler — see docs/UI.md for the class reference.
   Brand colours, radius, shadows and fonts come from design-tokens.css.
   Load order:  tabler(.rtl).min.css → design-tokens.css → admin.css
   ========================================================================== */

/* --------------------------------------------------------------- brand --- */

.fp-brand {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-weight: 700;
    color: inherit;
    text-decoration: none;
}

.fp-brand:hover { text-decoration: none; }

.fp-brand-mark {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--fp-radius-sm);
    background: linear-gradient(135deg, var(--fp-brand-primary), #8B7CF0 55%, var(--fp-brand-accent));
    color: #fff;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .5px;
    flex: 0 0 auto;
    box-shadow: var(--fp-shadow-xs);
}

.fp-brand-mark--lg { width: 3.25rem; height: 3.25rem; font-size: 1.25rem; border-radius: var(--fp-radius-md); }
.fp-brand-text { font-size: 1rem; line-height: 1.2; }
.fp-brand-sub { display: block; font-size: .6875rem; font-weight: 500; color: var(--tblr-secondary-color, #6B7280); }

/* User avatar in the topbar: brand gradient instead of Tabler's flat colour. */
.fp-avatar {
    background: linear-gradient(135deg, var(--fp-brand-primary), var(--fp-brand-accent));
    color: #fff;
    font-weight: 700;
}

/* --------------------------------------------------- collapsible sidebar --- */
/* Tabler owns the fold: `data-bs-sidebar="folded"` on <html> makes it remap
   --tblr-sidebar-width to --tblr-sidebar-folded-width, which also moves the
   page-wrapper margin, hides .nav-link-title / .nav-section-title and shrinks
   the brand. admin.js only toggles the attribute and remembers the choice.
   We add the two things Tabler does not know about: our custom section labels
   and the label inside our own footer toggle button. */

@media (min-width: 992px) {
    [data-bs-sidebar="folded"] .navbar-vertical .fp-nav-section,
    [data-bs-sidebar="folded"] .navbar-vertical .fp-nav-badge,
    [data-bs-sidebar="folded"] .navbar-vertical .fp-sidebar-toggle-label {
        display: none;
    }

    [data-bs-sidebar="folded"] .navbar-vertical .fp-sidebar-toggle {
        justify-content: center;
        padding-inline: .25rem;
    }
}

/* The active item uses the brand colour in both expanded and folded modes. */
.navbar-vertical .navbar-nav .nav-link.active {
    background: rgba(var(--fp-primary-rgb), .16);
    color: #fff;
}

.navbar-vertical .navbar-nav .nav-link.active .nav-link-icon { color: var(--fp-brand-accent); }

.navbar-vertical .navbar-nav .nav-link {
    border-radius: var(--fp-radius-sm);
    margin: .0625rem .5rem;
    transition: background var(--fp-transition);
}

.navbar-vertical .navbar-nav .nav-link:hover { background: rgba(255, 255, 255, .06); }

.fp-nav-badge {
    margin-inline-start: auto;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: .125rem .375rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(255, 255, 255, .10);
    color: rgba(255, 255, 255, .72);
}

.fp-nav-section {
    padding: 1rem 1.25rem .375rem;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------------------- topbar --- */

.fp-topbar-search { max-width: 22rem; }

.fp-topbar-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--fp-radius-sm);
    color: var(--tblr-body-color, #1F2937);
    transition: background var(--fp-transition);
}

.fp-topbar-icon:hover { background: rgba(var(--fp-primary-rgb), .10); color: var(--fp-brand-primary); text-decoration: none; }
.fp-topbar-icon .ti { font-size: 1.25rem; }

.fp-topbar-dot {
    position: absolute;
    inset-block-start: .375rem;
    inset-inline-end: .4375rem;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--fp-brand-danger);
    box-shadow: 0 0 0 2px var(--tblr-bg-surface, #fff);
}

/* --------------------------------------------------------- page helpers --- */

.fp-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.fp-page-head__meta { text-align: end; color: var(--tblr-secondary-color, #6B7280); }

/* Key/value list used by the status panels */
.fp-kv {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .375rem 1rem;
    margin: 0;
    font-size: .875rem;
}

.fp-kv dt { color: var(--tblr-secondary-color, #6B7280); font-weight: 500; }
.fp-kv dd { margin: 0; word-break: break-word; }
.fp-kv--tight { gap: .25rem .75rem; }

/* Monospace value chip */
.fp-code {
    font-family: var(--fp-font-mono);
    font-size: .8125rem;
    background: var(--tblr-bg-surface-secondary, rgba(15, 30, 51, .045));
    border: 1px solid var(--tblr-border-color, rgba(15, 30, 51, .10));
    border-radius: var(--fp-radius-xs);
    padding: .0625rem .375rem;
    direction: ltr;
    unicode-bidi: embed;
    white-space: nowrap;
}

.fp-chip-row { display: flex; flex-wrap: wrap; gap: .25rem; }

.fp-chip {
    font-size: .6875rem;
    padding: .0625rem .4375rem;
    border-radius: var(--fp-radius-pill);
    background: rgba(var(--fp-primary-rgb), .10);
    color: var(--fp-brand-primary);
    border: 1px solid rgba(var(--fp-primary-rgb), .18);
    direction: ltr;
    unicode-bidi: embed;
}

.fp-chip.is-ok  { background: rgba(var(--fp-success-rgb), .12); color: var(--fp-success-darken); border-color: rgba(var(--fp-success-rgb), .25); }
.fp-chip.is-bad { background: rgba(var(--fp-danger-rgb), .12);  color: var(--fp-danger-darken);  border-color: rgba(var(--fp-danger-rgb), .25); }

.fp-stat { display: flex; align-items: baseline; gap: .5rem; }
.fp-stat-value { font-size: 1.375rem; font-weight: 700; line-height: 1.1; }
.fp-stat-label { color: var(--tblr-secondary-color, #6B7280); font-size: .8125rem; }

/* Status tile used on the dashboard and the landing page */
.fp-tile {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--tblr-border-color, rgba(15, 30, 51, .10));
    border-radius: var(--fp-radius);
    background: var(--tblr-bg-surface, #fff);
    block-size: 100%;
}

.fp-tile-value { font-weight: 700; font-size: 1.0625rem; }

/* Snippet block */
.fp-snippet { display: flex; align-items: flex-start; gap: .625rem; flex-wrap: wrap; }

.fp-pre {
    flex: 1 1 20rem;
    margin: 0;
    overflow: auto;
    background: #14161F;
    color: #E6E8F0;
    padding: .75rem .875rem;
    border-radius: var(--fp-radius-sm);
    font-family: var(--fp-font-mono);
    font-size: .78125rem;
    line-height: 1.55;
    direction: ltr;
    text-align: left;
}

.fp-pre--trace { max-height: 20rem; }

/* Roadmap / status table helpers */
.fp-table-nowrap td, .fp-table-nowrap th { white-space: nowrap; }
.fp-row-pending td { background: rgba(var(--fp-warning-rgb), .14); }

/* ------------------------------------------------------- auth & errors --- */

.fp-auth-card { max-width: 26rem; margin-inline: auto; }
.fp-auth-card .card-body { padding: 1.75rem; }

.fp-lang-switch {
    display: inline-flex;
    gap: .25rem;
    padding: .1875rem;
    border-radius: var(--fp-radius-pill);
    background: var(--tblr-bg-surface-secondary, rgba(15, 30, 51, .05));
}

.fp-lang-switch a {
    padding: .1875rem .625rem;
    border-radius: var(--fp-radius-pill);
    font-size: .8125rem;
    color: var(--tblr-secondary-color, #6B7280);
    text-decoration: none;
}

.fp-lang-switch a:hover { color: var(--fp-brand-primary); }

.fp-lang-switch a.is-active {
    background: var(--tblr-bg-surface, #fff);
    color: var(--fp-brand-primary);
    font-weight: 600;
    box-shadow: var(--fp-shadow-xs);
}

.fp-error-code {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1;
    background: linear-gradient(135deg, var(--fp-brand-primary), var(--fp-brand-accent));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.fp-error-code--bad {
    background: linear-gradient(135deg, var(--fp-brand-danger), var(--fp-brand-warning));
    -webkit-background-clip: text;
    background-clip: text;
}

/* -------------------------------------------------------------- toasts --- */
/* Bootstrap positions `end-0` logically, so one markup serves both
   directions: top-right in LTR, top-left in RTL. */

.fp-toast-container { z-index: 1080; }

/* --------------------------------------------------------------- modals --- */

.fp-confirm-icon {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-inline: auto;
    font-size: 1.5rem;
    background: rgba(var(--fp-warning-rgb), .18);
    color: var(--fp-warning-darken);
}

.fp-confirm-icon--danger { background: rgba(var(--fp-danger-rgb), .16); color: var(--fp-danger-darken); }

/* ---------------------------------------------------------------- ui kit --- */

.fp-swatch {
    block-size: 3.5rem;
    border-radius: var(--fp-radius-sm);
    border: 1px solid rgba(15, 30, 51, .08);
}

.fp-icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: .5rem;
}

.fp-icon-cell {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
    border: 1px solid var(--tblr-border-color, rgba(15, 30, 51, .1));
    border-radius: var(--fp-radius-sm);
    font-size: .8125rem;
}

.fp-icon-cell .ti { font-size: 1.125rem; color: var(--fp-brand-primary); }

/* ----------------------------------------------------------------- RTL --- */

/* Directional icons must mirror in RTL. */
[dir="rtl"] .fp-mirror { transform: scaleX(-1); }

/* Chips and code stay LTR even inside RTL text. */
[dir="rtl"] .fp-code, [dir="rtl"] .fp-chip, [dir="rtl"] .fp-pre { direction: ltr; text-align: left; }

/* ---------------------------------------------------- conversation monitor --- */

/* The transcript scrolls inside its card so the reply box stays reachable while
   an agent reads a long conversation. */
.fp-transcript-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-height: 34rem;
    overflow-y: auto;
    padding: 1rem;
    background: #f8fafc;
}

.fp-msg {
    max-width: 88%;
    padding: 0.625rem 0.875rem;
    border: 1px solid #e2e8f0;
    border-radius: var(--fp-radius);
    background: #fff;
}

.fp-msg__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    font-size: 0.75rem;
    color: #64748b;
}

.fp-msg__body {
    white-space: pre-wrap;
    word-break: break-word;
}

.fp-msg__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-top: 0.375rem;
}

/* Alignment carries the meaning, so it is kept logical: the visitor sits at the
   start of the line in both LTR and RTL, the agent's own replies at the end. */
.fp-msg--visitor {
    align-self: flex-start;
    border-inline-start: 3px solid var(--fp-brand-primary);
}

.fp-msg--bot {
    align-self: flex-end;
    background: rgba(108, 92, 231, 0.06);
}

.fp-msg--agent {
    align-self: flex-end;
    border-inline-end: 3px solid var(--fp-brand-accent);
    background: rgba(0, 206, 201, 0.10);
}

.fp-msg--note {
    align-self: center;
    max-width: 96%;
    border: 1px dashed var(--fp-brand-warning);
    background: rgba(253, 203, 110, 0.16);
}

.fp-msg--system {
    align-self: center;
    max-width: 96%;
    background: rgba(15, 23, 42, 0.05);
    border-color: transparent;
    font-size: 0.8125rem;
    color: #64748b;
}

.fp-msg--new {
    animation: fp-msg-in 0.35s ease-out;
}

@keyframes fp-msg-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.fp-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.fp-timeline li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.fp-timeline li:last-child {
    border-bottom: 0;
}

.fp-kv__row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid #e2e8f0;
}

.fp-kv__row:last-child {
    border-bottom: 0;
}

.fp-kv__key {
    font-size: 0.8125rem;
    color: #64748b;
    white-space: nowrap;
}

.fp-kv__value {
    text-align: end;
    word-break: break-word;
}

.fp-live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-inline-end: 0.375rem;
    border-radius: 50%;
    background: var(--fp-brand-success);
    box-shadow: 0 0 0 3px rgba(0, 184, 148, 0.18);
}

[data-fp-live-toggle][aria-pressed="false"] .fp-live-dot {
    background: #94a3b8;
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    .fp-msg--new { animation: none; }
}

/* --------------------------------------------------------------- charts --- */

/*
   Hand-rolled SVG charts (App\Support\Chart). No charting library, no JavaScript.

   Two rules matter here:
     • the SVG scales by width, not by the pixel values baked into its viewBox, so a chart
       fills its card at any size without measuring anything in PHP;
     • colours come from CSS variables, so the charts follow the Tabler light/dark switch
       instead of freezing a palette into the markup.
*/

.fp-chart { display: block; width: 100%; height: auto; overflow: visible; }

.fp-chart--line { max-height: 220px; }

.fp-chart__grid { stroke: var(--fp-chart-grid); stroke-width: 1; }

.fp-chart__axis {
    fill: var(--fp-chart-axis);
    font-size: 10px;
    font-family: inherit;
}

/* `direction: auto` on the label keeps a mixed Arabic/Latin question readable. */
.fp-chart__bar-label {
    fill: var(--fp-chart-text);
    font-size: 11px;
    font-family: inherit;
}

.fp-chart__bar-value {
    fill: var(--fp-chart-axis);
    font-size: 11px;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.fp-chart__track { fill: var(--fp-chart-track); }

.fp-chart__donut-total {
    fill: var(--fp-chart-text);
    font-size: 22px;
    font-weight: 700;
    font-family: inherit;
}

.fp-chart__donut-caption {
    fill: var(--fp-chart-axis);
    font-size: 10px;
    font-family: inherit;
}

.fp-chart-donut {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
}

.fp-chart-donut .fp-chart--donut { width: 160px; flex: 0 0 160px; }

.fp-chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 12rem;
    min-width: 0;
}

.fp-chart-legend li {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .125rem 0;
    font-size: .8125rem;
}

.fp-chart-legend__swatch {
    width: .625rem;
    height: .625rem;
    border-radius: 2px;
    flex: 0 0 auto;
}

.fp-chart-legend__label { flex: 1 1 auto; min-width: 0; }

.fp-chart-legend__value { white-space: nowrap; font-variant-numeric: tabular-nums; }

.fp-chart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 7rem;
    font-size: .875rem;
}

.fp-chart-empty .ti { font-size: 1.25rem; opacity: .6; }

@media print {
    .fp-chart-empty { min-height: 0; }
}

/* --------------------------------------------------------------- print --- */

@media print {
    .navbar-vertical, .fp-topbar, .fp-toast-container, .btn { display: none !important; }
    .page { padding: 0 !important; }
    .card { box-shadow: none !important; break-inside: avoid; border-color: #d5d8dd !important; }
    .fp-pre { background: #f5f6f8 !important; color: #14161F !important; }
}