/* ---------------------------------------------------------------------------
   Junior's CRM — application styles on top of Bootstrap 5.

   Bootstrap supplies the components (grid, cards, tables, dropdowns, offcanvas,
   forms). This file supplies the things Bootstrap has no opinion about and that
   carry the product's identity: the brand palette, the app shell (fixed topbar +
   sidebar + scrolling main), and the soft-tint badges used for ticket status,
   priority, call direction and role.

   Everything here uses CSS logical properties (inline-start/end, margin-inline)
   rather than left/right, so the Arabic RTL layout comes out mirrored correctly
   alongside Bootstrap's own RTL stylesheet instead of needing a second set of
   overrides.
--------------------------------------------------------------------------- */

:root {
    /* Junior's brand */
    --brand-red: #d92d27;
    --brand-red-dark: #b8231e;
    --brand-yellow: #ffc836;
    --brand-yellow-dark: #e0aa1f;

    --app-bg: #f8fafc;
    --app-fg: #0f172a;
    --app-border: #e2e8f0;
    --app-muted: #64748b;

    --topbar-height: 3.5rem;
    --sidebar-width: 16rem;

    /* Motion system — every entrance/press/hover in the app draws from this
       one easing and duration set instead of each component inventing its own. */
    --ease-app: cubic-bezier(0.16, 1, 0.3, 1);

    /* Bootstrap variable overrides so its own components pick up the brand
       colour without needing .btn-brand on every single button. */
    --bs-primary: var(--brand-red);
    --bs-primary-rgb: 217, 45, 39;
    --bs-link-color: var(--brand-red-dark);
    --bs-link-hover-color: var(--brand-red);
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-fg);
    --bs-border-color: var(--app-border);
}

body {
    background: var(--app-bg);
    color: var(--app-fg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
        Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
}

::selection {
    background: var(--brand-yellow);
    color: var(--brand-red-dark);
}

/* --------------------------------- Shell -------------------------------- */

.app-shell {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    height: var(--topbar-height);
    padding-inline: 1rem;
    background: #fff;
    border-bottom: 1px solid var(--app-border);
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: inherit;
}

.app-brand img {
    border-radius: 0.375rem;
    object-fit: contain;
}

.app-brand-text strong {
    display: block;
    font-size: 0.9375rem;
    line-height: 1.1;
    color: var(--brand-red);
}

.app-brand-text small {
    display: block;
    font-size: 0.6875rem;
    color: var(--app-muted);
}

.btn-topbar {
    border: 1px solid transparent;
    background: transparent;
    color: var(--app-fg);
}

.btn-topbar:hover {
    background: #f1f5f9;
    border-color: var(--app-border);
}

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--brand-red);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 600;
}

.app-body {
    display: flex;
    flex: 1;
    min-height: 0;
}

.app-sidebar {
    width: var(--sidebar-width);
    flex-shrink: 0;
    background: #fff;
    border-inline-end: 1px solid var(--app-border);
}

.app-main {
    flex: 1;
    min-width: 0;
    padding: 1rem;
    animation: fade-in-up 0.32s var(--ease-app) both;
}

.app-main:focus {
    outline: none;
}

@media (min-width: 576px) {
    .app-main { padding: 1.5rem; }
}

@media (min-width: 992px) {
    .app-main { padding: 2rem; }
}

/* ------------------------------ Navigation ------------------------------ */

.app-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem;
}

.app-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border-inline-start: 2px solid transparent;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    text-decoration: none;
    transition: background-color 0.15s var(--ease-app), color 0.15s var(--ease-app);
}

.app-nav-link:hover {
    background: #f1f5f9;
    color: var(--app-fg);
}

.app-nav-link.active {
    border-inline-start-color: var(--brand-yellow);
    background: rgba(217, 45, 39, 0.1);
    color: var(--brand-red);
}

/* Keyboard users get to the content without tabbing the whole sidebar; the
   link only becomes visible once it actually has focus. */
.skip-link {
    position: absolute;
    inset-inline-start: -9999px;
    z-index: 1080;
}

.skip-link:focus-visible {
    inset-inline-start: 1rem;
    top: 1rem;
    padding: 0.625rem 1rem;
    border-radius: 0.375rem;
    background: var(--brand-red);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* ------------------------------- Badges --------------------------------- */
/* Soft tint: pale fill, saturated text, hairline ring. Reproduces the look the
   ticket badges had before the move to Bootstrap, including the two colours
   that carry brand meaning — HIGH priority and OPEN status both use brand
   yellow so "needs someone soon" reads as one consistent colour language. */

.badge-soft-red,
.badge-soft-brand,
.badge-soft-blue,
.badge-soft-slate,
.badge-soft-purple,
.badge-soft-sky,
.badge-soft-emerald {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.25;
    white-space: nowrap;
}

.badge-soft-red     { background: #fef2f2; color: #b91c1c; box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.2); }
.badge-soft-brand   { background: rgb(255 200 54 / 0.2); color: #78350f; box-shadow: inset 0 0 0 1px rgb(224 170 31 / 0.4); }
.badge-soft-blue    { background: #eff6ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px rgb(37 99 235 / 0.2); }
.badge-soft-slate   { background: #f1f5f9; color: #475569; box-shadow: inset 0 0 0 1px rgb(100 116 139 / 0.2); }
.badge-soft-purple  { background: #faf5ff; color: #7e22ce; box-shadow: inset 0 0 0 1px rgb(147 51 234 / 0.2); }
.badge-soft-sky     { background: #f0f9ff; color: #0369a1; box-shadow: inset 0 0 0 1px rgb(2 132 199 / 0.2); }
.badge-soft-emerald { background: #ecfdf5; color: #047857; box-shadow: inset 0 0 0 1px rgb(5 150 105 / 0.2); }

.dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-red    { background: #dc2626; }
.dot-brand  { background: var(--brand-yellow-dark); }
.dot-blue   { background: #3b82f6; }
.dot-slate  { background: #94a3b8; }

/* An overdue ticket is flagged the same way everywhere it appears. */
.is-overdue {
    color: #b91c1c;
    font-weight: 600;
}

/* ------------------------------- Surfaces ------------------------------- */

.stat-card {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 0.625rem;
    padding: 1rem 1.125rem;
    height: 100%;
}

.stat-card .stat-label {
    font-size: 0.8125rem;
    color: var(--app-muted);
    margin-bottom: 0.25rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.1;
}

.panel {
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 0.625rem;
}

.panel-header {
    padding: 0.875rem 1.125rem;
    border-bottom: 1px solid var(--app-border);
    font-weight: 600;
}

.panel-body {
    padding: 1.125rem;
}

.page-title {
    font-size: 1.375rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.page-subtitle {
    color: var(--app-muted);
    font-size: 0.9375rem;
}

.btn-brand {
    background: var(--brand-red);
    border-color: var(--brand-red);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background: var(--brand-red-dark);
    border-color: var(--brand-red-dark);
    color: #fff;
}

/* ------------------------------ Login page ------------------------------ */

.auth-page {
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #fff 0%, var(--app-bg) 55%, rgb(255 200 54 / 0.18) 100%);
}

.auth-card {
    width: 100%;
    max-width: 25rem;
    background: #fff;
    border: 1px solid var(--app-border);
    border-radius: 0.75rem;
    padding: 1.75rem;
    box-shadow: 0 10px 30px -12px rgb(15 23 42 / 0.18);
    animation: fade-in-up 0.32s var(--ease-app) both;
}

/* ------------------------------- Motion --------------------------------- */

@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Respect the OS-level motion preference. This belongs in the same file as the
   animations above, not bolted on later. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ------------------------------ Timeline -------------------------------- */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    border-inline-start: 2px solid var(--app-border);
}

.timeline-item {
    position: relative;
    padding: 0 0 1rem 1rem;
    padding-inline-start: 1rem;
}

.timeline-item::before {
    content: "";
    position: absolute;
    inset-inline-start: -0.3125rem;
    top: 0.375rem;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--brand-red);
}

.timeline-item:last-child {
    padding-bottom: 0;
}

/* Internal notes are visually set apart from customer- and agent-facing
   entries, so whoever writes one can see at a glance that it is private. */
.timeline-item-note {
    background: #f8fafc;
    border-radius: 0.375rem;
    padding-block: 0.5rem;
}

.timeline-item-note::before {
    background: var(--app-muted);
}

/* -------------------------------- Charts -------------------------------- */
/* Bars are plain elements rather than a canvas: they print, they mirror for RTL
   with everything else, and screen readers get real text instead of an image. */

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chart-row {
    display: grid;
    grid-template-columns: minmax(6rem, 40%) 1fr auto;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
}

.chart-label {
    color: var(--app-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chart-track {
    height: 0.5rem;
    border-radius: 999px;
    background: #f1f5f9;
    overflow: hidden;
}

.chart-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--brand-red);
    /* Zero-count rows still show a sliver, so an empty category reads as
       "present, none" rather than as a missing row. */
    min-width: 2px;
}

.chart-value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.legend-swatch {
    display: inline-block;
    width: 0.75rem;
    height: 0.25rem;
    border-radius: 999px;
}

.trend-wrap {
    width: 100%;
    overflow: hidden;
}

/* Fixed height with a scaling viewBox — the chart fills its column without the
   page needing to measure anything. */
.trend-svg {
    width: 100%;
    height: 180px;
    display: block;
}

.csat-score {
    font-size: 1.125rem;
    font-weight: 600;
    padding-block: 0.625rem;
}