/*
 * Visual design system pass ("make it feel like a real product, not a
 * template"). The diagnosis, from real screenshots: every surface used a
 * flat 1px border with almost no shadow (cards read as cut-out rather
 * than raised), status/priority/SLA badges were solid, fully-saturated
 * Bootstrap fills with white text (the single biggest "cheap SaaS clone"
 * tell -- every mature product in this space uses a soft background tint
 * + matching darker text instead), the page relied on the system font
 * stack instead of actually loading the Inter family it claimed to use,
 * and there was no shared elevation/radius/shadow vocabulary -- every
 * page that wanted a hover-lift or a shadow invented its own numbers.
 * This section adds that vocabulary as tokens; the rules below it apply
 * those tokens to Bootstrap's own components (cards, badges, buttons,
 * tables, inputs) so the fix cascades to all 26 pages through this one
 * shared stylesheet rather than needing a per-page rewrite.
 */
:root {
    --sidebar-bg: #0f172a; /* Deep slate / navy */
    --sidebar-color: #94a3b8;
    --sidebar-hover: #1e293b;
    --sidebar-active: #2563eb; /* Professional SaaS Blue */
    --sidebar-active-bg: rgba(37, 99, 235, 0.18);
    --body-bg: #f8fafc;
    --card-border: #e2e8f0;
    --space-sm: 0.75rem;
    --space-md: 1.25rem;
    --space-lg: 2rem;
    --sidebar-width: 264px;
    --topbar-height: 60px;

    /* Elevation: two soft, stacked shadows (a tight near-shadow + a
       diffuse far-shadow) reads as "floating" far more convincingly than
       one single shadow value -- the same technique Stripe/Linear/Vercel
       all use. Values are deliberately faint (low alpha) so they suggest
       depth without drawing attention to themselves. */
    --shadow-xs: 0 1px 2px 0 rgba(15, 23, 42, 0.04);
    --shadow-sm: 0 1px 2px 0 rgba(15, 23, 42, 0.04), 0 1px 3px 0 rgba(15, 23, 42, 0.06);
    --shadow-md: 0 2px 4px -1px rgba(15, 23, 42, 0.04), 0 4px 12px -2px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 4px 8px -2px rgba(15, 23, 42, 0.05), 0 12px 24px -4px rgba(15, 23, 42, 0.10);

    /* Radius scale -- one step larger than the old hard-coded 6-8px used
       to be, which reads as noticeably more contemporary without going
       full "bubbly" (that would clash with a dense, data-heavy admin
       tool). */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Shared easing/duration so every hover/press feels like the same
       product responding, not a dozen ad hoc transition values. */
    --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 0.12s;
    --dur-base: 0.18s;
}

* { box-sizing: border-box; }

body {
    background-color: var(--body-bg);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1e293b;
    margin: 0;
    /* Inter is designed with slightly tighter optical spacing at larger
       sizes than the browser default -- this plus the heading
       letter-spacing below is what makes headings look "designed"
       instead of just "bold text". */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/*
 * Design refresh (approved mockups): this app previously had leftover
 * sidebar color tokens (--sidebar-bg/--sidebar-color/etc, above) that were
 * never actually used -- an earlier design direction abandoned in favor of
 * a top navbar, which by the time this app had 17+ nav destinations, had
 * to cram everything into two dropdown overflow menus. This section
 * replaces that with a real, always-visible sidebar those tokens were
 * always meant for. See layout.js's own header comment for how the DOM is
 * assembled (a live move of the existing `.main-content` element, not a
 * rewrite of any page's markup -- zero of the 24 static/*.html pages
 * needed to change).
 */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-width);
    background: var(--sidebar-bg);
    color: var(--sidebar-color);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 20;
    transition: transform 0.2s ease;
}

.sidebar-brand {
    padding: 1.15rem 1.25rem 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 700;
    color: #fff;
    font-size: 0.98rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    flex-shrink: 0;
}

.sidebar-brand .brand-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--sidebar-active);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* The "Current Organisation" chip -- built by layout.js's
   renderTenantSwitcher() into #tenant-switcher-wrap, styled here. Stays
   empty (no chip rendered at all) for a single-tenant user -- see that
   function's own "nothing to switch between" early return. */
#tenant-switcher-wrap {
    margin: 0.85rem 1rem;
    flex-shrink: 0;
}

.org-switcher-btn {
    width: 100%;
    text-align: left;
    padding: 0.6rem 0.75rem;
    background: var(--sidebar-hover);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    color: var(--sidebar-color);
    cursor: pointer;
}

.org-switcher-btn:hover, .org-switcher-btn:focus {
    background: #263449;
    color: #fff;
}

.org-switcher-btn .org-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin-bottom: 2px;
}

.org-switcher-btn .org-name {
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
}

.org-switcher-btn .org-role {
    font-size: 0.7rem;
    color: var(--sidebar-color);
    margin-top: 2px;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 0.3rem 0.75rem 1rem;
}

.nav-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #475569;
    font-weight: 700;
    padding: 0.85rem 0.6rem 0.3rem;
    display: block;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.48rem 0.6rem;
    border-radius: var(--radius-sm);
    color: var(--sidebar-color);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 2px;
    position: relative;
    transition: background-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.sidebar-link i {
    font-size: 0.92rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

.sidebar-link:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

/* Active-item accent bar -- a small colored tab hugging the left edge,
   the same "you are here" language most professional admin consoles use
   (Linear, Vercel, GitHub's settings nav) instead of relying on the
   background tint alone to carry it. */
.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    border-radius: 0 3px 3px 0;
    background: var(--sidebar-active);
}

.sidebar-link.active {
    background: var(--sidebar-active-bg);
    color: #fff;
}

.sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.sidebar-footer .avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #334155;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.76rem;
    font-weight: 700;
    flex-shrink: 0;
}

.sidebar-footer .who {
    flex: 1;
    min-width: 0;
}

.sidebar-footer .who .name {
    font-size: 0.82rem;
    color: #fff;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-footer .who .role {
    font-size: 0.7rem;
    color: var(--sidebar-color);
}

.footer-icons {
    display: flex;
    gap: 0.2rem;
    flex-shrink: 0;
}

.footer-icon-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-color);
    background: none;
    border: none;
    text-decoration: none;
    font-size: 0.9rem;
}

.footer-icon-btn:hover {
    background: var(--sidebar-hover);
    color: #fff;
}

.main-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.topbar {
    height: var(--topbar-height);
    background: #fff;
    border-bottom: 1px solid var(--card-border);
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
    position: sticky;
    top: 0;
    z-index: 15;
    flex-shrink: 0;
}

.topbar-spacer {
    flex: 1;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.topbar-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    position: relative;
}

.topbar-icon-btn:hover {
    background: #f8fafc;
}

/* Bootstrap's .dropdown-toggle adds a caret by ::after -- suppressed here
   since these are icon-only buttons (bell), not text+caret buttons. */
.topbar-icon-btn.dropdown-toggle::after {
    display: none;
}

.sidebar-toggle-btn {
    display: none;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--card-border);
    background: #fff;
    align-items: center;
    justify-content: center;
    color: #475569;
    font-size: 1.1rem;
}

/* `.main-content` is the exact same element every one of the 24 pages
 * already renders -- layout.js just moves it (a live DOM move, not a
 * rewrite) into `.main-col` under the topbar instead of prepending a
 * navbar inside it. Most pages nest a Bootstrap `.container`/
 * `.container-fluid` inside `.main-content` for their actual horizontal
 * rhythm; tickets.html is the one page that deliberately stays full-width
 * for its data-dense queue table, so it relies on this base padding
 * directly rather than a nested container.
 */
.main-content {
    width: 100%;
    padding: 1.25rem 1.75rem 2.5rem;
}

/* Tablet and below: sidebar becomes an off-canvas drawer, toggled by the
   hamburger button that appears in the topbar at this breakpoint. */
@media (max-width: 991.98px) {
    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-100%);
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .app-shell.sidebar-open .sidebar {
        transform: translateX(0);
        box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.45);
    }

    .sidebar-toggle-btn {
        display: flex;
    }

    .main-content {
        padding: 1rem 1.1rem 2rem;
    }
}

/* Enterprise Cards -- a faint border (barely-there, mostly for crisp
   edges on non-retina displays) plus a real two-layer shadow instead of
   the old single 1px-border-does-all-the-work look. */
.card {
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    background-color: #ffffff;
}

.card-body {
    padding: var(--space-md);
}

.card + .card {
    margin-top: var(--space-md);
}

.card-header {
    padding: 0.85rem var(--space-md);
    background-color: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

/* Tables -- lighter row separators (was --card-border at full strength,
   which combined with the header's 2px underline to read as a
   spreadsheet grid) and a touch more row height so dense data doesn't
   feel cramped. */
.table th {
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    background-color: #f8fafc;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
}

.table td {
    border-bottom-color: rgba(15, 23, 42, 0.06);
    vertical-align: middle;
    font-size: 0.95rem;
}

.table > :not(caption) > * > * {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

.table-hover > tbody > tr:hover > * {
    background-color: #f8fafc;
    transition: background-color var(--dur-fast) var(--ease-standard);
}

/*
 * Shared page-header pattern -- icon + title + one-line subtitle, used at
 * the top of every interior page. Centralizing the spacing/typography here
 * means every page reads at a consistent size/rhythm without each page
 * hand-tuning its own margins.
 */
.page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.page-header h3, .page-header h2 {
    font-weight: 700;
    margin: 0;
    /* Slight negative tracking on large bold text is what makes a
       heading read as deliberately typeset rather than just "bold" --
       browsers' default letter-spacing was tuned for body copy, not
       700-weight display sizes. */
    letter-spacing: -0.015em;
}

.page-header .page-subtitle {
    color: #64748b;
    font-size: 0.87rem;
    margin: 0.2rem 0 0 0;
    line-height: 1.5;
}

.page-header .page-header-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* Consistent primary-action button sizing across pages */
.page-header-actions .btn,
.card-header .btn {
    white-space: nowrap;
}

/* Administration hub: category grouping */
.admin-section-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    margin: var(--space-lg) 0 0.75rem 0;
}

.admin-section-title:first-of-type {
    margin-top: 0;
}

.admin-card {
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

.admin-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* -------------------- Responsive breakpoints -------------------- */

/* Tablet and below: tighten page padding, stack page-header actions */
@media (max-width: 991.98px) {
    .container, .container-fluid {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .page-header {
        flex-direction: column;
        align-items: stretch;
        margin-bottom: var(--space-md);
    }

    .page-header .page-header-actions {
        justify-content: flex-start;
    }
}

/* Phones: reflow multi-column summary/stat rows to a single column, and
   give cards a little less internal padding so content isn't cramped. */
@media (max-width: 767.98px) {
    .card-body {
        padding: 1rem;
    }

    .page-header h3, .page-header h2 {
        font-size: 1.25rem;
    }

    /* Row-based stat/summary strips (dashboard, contracts, teams, etc. all
       use plain Bootstrap `.row` + `.col-md-*` for these) collapse to one
       column per row instead of Bootstrap's default 2-up at `sm`. */
    .stat-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .table td, .table th {
        font-size: 0.85rem;
    }
}

@media (max-width: 575.98px) {
    .card-header, .card-body {
        padding: 0.85rem;
    }
}

/* Priority badges get their own reserved 4-color ramp (gray -> blue ->
   orange -> red for Low/Medium/High/Critical) so they never share a hue
   with Status badges (blue/yellow/gray/green/dark) or SLA badges
   (cyan/yellow/red/green). "High" uses a dedicated orange since Bootstrap
   5's default palette has no orange utility class.
   Softened from solid saturated fills to tint-background + matching
   darker text (design system pass) -- same reasoning as the global
   .badge.bg-* overrides just below: solid white-on-saturated pill badges
   are the single most recognizable "cheap template" tell in SaaS UI,
   soft tints are what virtually every shipped product in this space
   actually uses (GitHub labels, Linear priority chips, Notion status). */
.badge-priority-low {
    background-color: #f1f5f9;
    color: #475569;
}
.badge-priority-medium {
    background-color: #dbeafe;
    color: #1e40af;
}
.badge-priority-high {
    background-color: #ffedd5;
    color: #c2410c;
}
.badge-priority-critical {
    background-color: #fee2e2;
    color: #b91c1c;
}

/* -------------------- Global badge softening -------------------- */
/* Bootstrap's .badge defaults to --bs-badge-color:#fff, so any
   .bg-primary/.bg-success/etc combo renders as a solid, fully-saturated
   fill with white text -- fine for a single urgent alert dot, but used
   pervasively (as this app does, for every ticket/tenant/subscription
   status pill on ~20 pages) it's exactly what makes an interface read as
   an unstyled template. Overriding the combined `.badge.bg-*` selector
   (2 classes, so it beats the single-class Bootstrap utility on
   specificity without needing the cascade to save us) swaps every one of
   them to a soft tint + matching darker text, app-wide, from this one
   file. `!important` matches this app's existing pattern (see
   .admin-card:hover above) and is needed here because some call sites
   also add Bootstrap's own `.text-dark`/`.text-white` utilities, which
   are themselves !important. */
.badge {
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--radius-sm);
    padding: 0.32em 0.62em;
}
.badge.bg-primary { background-color: #dbeafe !important; color: #1e40af !important; }
.badge.bg-secondary { background-color: #e2e8f0 !important; color: #475569 !important; }
.badge.bg-success { background-color: #dcfce7 !important; color: #15803d !important; }
.badge.bg-warning { background-color: #fef3c7 !important; color: #92400e !important; }
.badge.bg-danger { background-color: #fee2e2 !important; color: #b91c1c !important; }
.badge.bg-info { background-color: #cffafe !important; color: #155e75 !important; }
.badge.bg-dark { background-color: #e2e8f0 !important; color: #1e293b !important; }
.badge.bg-light { background-color: #f8fafc !important; color: #475569 !important; }

/* Exception: notification-bell unread-count dots and similar small
   attention badges are deliberately NOT softened -- their whole job is
   to grab the eye, which a pastel tint would undermine. Distinguished by
   the `.position-absolute` positioning every such "corner dot" badge in
   this app uses (see layout.js's notification bell); higher selector
   specificity (3 classes) wins over the soft-tint rule above. */
.badge.bg-danger.position-absolute {
    background-color: #dc3545 !important;
    color: #fff !important;
}

/* Dashboard "Recent Activity" feed rows (Visual UX Audit, Finding 8). */
.activity-feed-row:hover {
    background-color: var(--bs-light, #f8f9fa);
}
.activity-feed-row:last-child {
    border-bottom: none !important;
}

/*
 * Dashboard restyle round: shared stat-tile + status-pill primitives used
 * by the Platform Admin dashboard (replacing its old ad-hoc inline card
 * markup) and by the new Client Portal dashboard below. Kept generic/
 * reusable rather than dashboard-specific so other pages (reports, etc.)
 * can adopt the same classes later without new CSS.
 */
.stat-tile {
    background: #fff;
    border: 1px solid rgba(15, 23, 42, 0.06);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: 1rem 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    height: 100%;
    transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.stat-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.stat-tile .stat-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    background: rgba(37, 99, 235, 0.1);
    color: var(--sidebar-active);
}

/* Semantic tint variants -- dashboard.html's tile definitions already
   carried a `color` field per stat (warning for Open Tickets, danger for
   Unresolved Alerts, etc.) that was never actually wired up in the
   markup, so every tile silently fell back to the same blue chip
   regardless of what it meant. Fixed in dashboard.html (adds
   `stat-icon-${t.color}` alongside the base class); these are the tint
   pairs that class resolves to, same palette family as the badge system
   above so a "danger" stat tile and a "danger" badge read as the same
   color language. */
/* Chained with .stat-icon (2 classes) to match .stat-tile .stat-icon's
   own specificity (also 2 classes) -- a single-class .stat-icon-warning
   selector would silently lose to that base rule regardless of source
   order, since specificity is compared before source order. */
.stat-icon.stat-icon-primary { background: #dbeafe; color: #1e40af; }
.stat-icon.stat-icon-secondary { background: #e2e8f0; color: #475569; }
.stat-icon.stat-icon-success { background: #dcfce7; color: #15803d; }
.stat-icon.stat-icon-warning { background: #fef3c7; color: #92400e; }
.stat-icon.stat-icon-danger { background: #fee2e2; color: #b91c1c; }
.stat-icon.stat-icon-info { background: #cffafe; color: #155e75; }
.stat-icon.stat-icon-dark { background: #e2e8f0; color: #1e293b; }

.stat-tile .stat-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 0.1rem;
}

.stat-tile .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

/* Status pills -- one shared vocabulary for ticket/tenant status across the
   Platform Admin table, the Tenant queue, and the Client Portal cards. */
.status-pill {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    border-radius: 20px;
    white-space: nowrap;
    line-height: 1;
}

.status-pill.status-open { background: #fef3c7; color: #92400e; }
.status-pill.status-in-progress { background: #dbeafe; color: #1e40af; }
.status-pill.status-pending { background: #ede9fe; color: #5b21b6; }
.status-pill.status-resolved { background: #dcfce7; color: #15803d; }
.status-pill.status-closed { background: #e2e8f0; color: #475569; }
.status-pill.status-active { background: #dcfce7; color: #15803d; }
.status-pill.status-suspended { background: #fee2e2; color: #b91c1c; }

/* -------------------- Client Portal dashboard -------------------- */

.client-welcome-banner {
    background: linear-gradient(135deg, #eff6ff, #f5f3ff);
    border: 1px solid #e0e7ff;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.client-welcome-banner h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
}

.client-welcome-banner p {
    font-size: 0.85rem;
    color: #64748b;
    margin: 0;
}

.client-section-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #64748b;
    margin: 1.5rem 0 0.75rem;
}

.client-ticket-card {
    background: #fff;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1rem 1.2rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s;
}

.client-ticket-card:hover {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
    color: inherit;
}

.client-ticket-card .ct-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.client-ticket-card .ct-icon.open { background: #fef3c7; color: #92400e; }
.client-ticket-card .ct-icon.progress { background: #dbeafe; color: #1e40af; }
.client-ticket-card .ct-icon.resolved { background: #dcfce7; color: #15803d; }

.client-ticket-card .ct-body {
    flex: 1;
    min-width: 0;
}

.client-ticket-card .ct-subject {
    font-weight: 700;
    font-size: 0.93rem;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-ticket-card .ct-meta {
    font-size: 0.78rem;
    color: #64748b;
}

/* -------------------- Buttons, inputs, dropdowns, modals -------------------- */
/* Bootstrap's defaults here were untouched -- flat fills, instant (0ms)
   hover swaps, sharp-ish 6px corners. Same design-system pass as the
   cards/badges above: a soft lift on hover for filled buttons (the
   "this is clickable and alive" cue almost every modern web app uses),
   consistent transition timing, and the same radius scale as everything
   else so buttons/inputs/cards/badges all feel like one family instead
   of each defaulting to Bootstrap's own slightly-different corner
   roundings. */
.btn {
    border-radius: var(--radius-sm);
    font-weight: 600;
    transition: background-color var(--dur-fast) var(--ease-standard),
                border-color var(--dur-fast) var(--ease-standard),
                box-shadow var(--dur-fast) var(--ease-standard),
                transform var(--dur-fast) var(--ease-standard);
}

.btn-primary {
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
}

.btn-primary:hover, .btn-primary:focus {
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.25);
    transform: translateY(-1px);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.15);
}

.btn-outline-secondary:hover, .btn-outline-primary:hover, .btn-outline-danger:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.btn:active {
    transform: translateY(0) !important;
}

.btn-sm {
    border-radius: var(--radius-sm);
}

/* Form controls -- softer border, and a focus ring that matches the
   sidebar's accent blue instead of Bootstrap's default (slightly
   different, slightly duller) blue, so focus states feel like part of
   the same palette as everything else on screen. */
.form-control, .form-select {
    border-color: #cbd5e1;
    border-radius: var(--radius-sm);
    transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}

.form-control:focus, .form-select:focus {
    border-color: var(--sidebar-active);
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.15);
}

/* Dropdown menus and modals get the same elevation language as cards --
   previously Bootstrap's own default (a slightly heavier, flatter
   shadow with a hard-edged border) made them look like a different,
   less-refined component than everything else on the page. */
.dropdown-menu {
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 0.4rem;
}

.dropdown-item {
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.65rem;
    font-size: 0.85rem;
    transition: background-color var(--dur-fast) var(--ease-standard);
}

.modal-content {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.modal-header {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.modal-footer {
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}