*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --primary-color: #0a8f80;
    --primary-indigo: #0fb5a0;
    --primary-indigo-hover: #0a8f80;
    --secondary-color: #0fb5a0;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --warning-color: #f59e0b;
    --background-color: #f4f7fa;
    --background-gradient: linear-gradient(175deg, #fafdfc 0%, #f1f6f5 40%, #e7eef0 100%);
    --text-color: #0f1729;
    --text-primary: #1e293b;
    --text-secondary: #5e6b85;
    --border-color: #e9edf4;
    --sidebar-bg: #0f172a;
    --sidebar-text: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 255, 255, 0.5);
    --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 14px 30px -22px rgba(16, 24, 40, 0.28);
}

body {
    background: #f4f7fa;
    background-image: radial-gradient(700px 340px at 84% -8%, rgba(15,181,160,.08), transparent 60%), radial-gradient(620px 320px at 8% -6%, rgba(124,92,255,.06), transparent 60%);
    min-height: 100vh;
    margin: 0;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* Layout */
.app-container {
    display: flex;
    min-height: 100vh;
    overflow-x: hidden;      /* the content slides under the expanded rail */
}

/* The gutter is reserved ONLY on pages that actually render the rail. The sidebar is
   position:fixed, so it takes no space of its own and something has to hold its 76px open.
   Putting that on .app-container unconditionally also indented the signed-out pages, which have
   no sidebar in the DOM: login, password reset and SSO pending were all left with an empty strip
   down the left. base.html sets .has-rail from the same {% if user.is_authenticated %} that
   renders the rail, so the two can never disagree. */
.app-container.has-rail {
    padding-left: 76px;
}

/* ===== Light hover-expanding icon rail (desktop) ===== */
.sidebar {
    width: 76px;
    flex-shrink: 0;
    background: #ffffff;
    color: var(--text-primary);
    display: flex;
    flex-direction: column;
    height: 100vh;
    border-right: 1px solid var(--border-color);
    /* Out of flow: the rail's width animation then touches nothing else on the page. */
    position: fixed;
    left: 0;
    top: 0;
    z-index: 200;
    overflow: hidden;
    white-space: nowrap;
    /* The original timing, restored. Shortening it to 0.14s read as "the animation is gone",
       and the lag it was meant to hide is fixed at the source instead: the content slides
       rather than resizing (cards never reflow), cards are layout/paint contained, and the
       card-reconciling polls now wait for the rail to settle instead of freezing it mid-slide. */
    transition: width 0.26s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.26s;
}

.sidebar:hover {
    width: 248px;
    box-shadow: 30px 0 60px -34px rgba(16, 24, 40, 0.4);
}

/* The content simply follows the rail, re-flowing as it goes: one property, animated by the
   same curve and duration, so the whole layout moves as one piece.

   This replaces a transform-then-handover trick. That version slid a composited layer during
   the animation and swapped to real layout at the end, which avoided per-frame re-flow but
   left a visible pop as every card re-wrapped at once — the "quick fit to page" stick.
   Measured in isolation, that re-flow costs ~20ms under 6x CPU throttling, i.e. ~3ms of real
   work: cheap enough to do on every frame. The 90-108ms frames that motivated the trick were
   never the re-flow at all; they came from a content-visibility rule that has since been
   removed, and it cost ~474ms of style recalc on its own. With that gone, animating layout
   directly is both smooth and free of the handover pop. */
/* The content moves with the rail and re-flows into the space, exactly as it originally did.
   The whole board stays on screen, and nothing is clipped or held at a fixed size.

   This is the expensive shape, and it is affordable only because of the companion rule on
   .pm-cards > .pm-card in project_management_dashboard.html, which keeps cards that are scrolled
   out of view out of layout. The columns are 1fr, so opening the rail makes every card ~57px
   narrower and re-wraps its text: with all 28 cards laid out that measured 642ms of layout and
   42 dropped frames of 128, and with the off-screen ones skipped it is 0 dropped frames.
   If that rule is ever removed, this animation becomes the lag again.

   The alternatives were each tried and each lost something the other two keep. A transform slides
   the content for free but clips the right edge of the board while the rail is open. Capping the
   card width stops the resize but strands 250-400px of dead space. Leaving the page still and
   letting the rail overlay it is free, but then the content does not move at all. */
/* The layout change happens ONCE, on the first frame, and the content then slides into its new
   position on the compositor. The board still moves with the rail and stays fully visible, and
   nothing about the design changes.

   Animating the padding instead re-flows the board on every frame, and on a Retina display that
   is not affordable: measured in the live app at 1440px/dpr2 with 29 cards, 33 dropped frames of
   273 and a worst frame of 122ms. The cost is repainting roughly 750 shadowed elements (24 ticks
   per card plus the cards themselves plus inner chips), and it is spread across all of them, so
   there is no single shadow to cheapen: removing the tick shadows alone measured 44 dropped, the
   card shadow alone 63, other inner elements alone 55, all no better than the baseline. Removing
   every shadow measured 0 dropped / 23ms, which is what proves paint is the whole story - but
   that is a design change, and the design is fixed.

   So the re-flow is paid once rather than sixteen times. It lands on the first frame of the
   animation, where the eye is picking up motion, rather than at the end where it has settled -
   an earlier version put it at the end and it read as a snap. */
.app-container.rail-open {
    padding-left: 248px;
}
.app-container.rail-open .main-content {
    animation: railSlideIn 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.app-container.rail-closing .main-content {
    animation: railSlideOut 0.26s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes railSlideIn  { from { transform: translateX(-172px); } to { transform: none; } }
@keyframes railSlideOut { from { transform: translateX(172px); }  to { transform: none; } }

/* ===== Collapsed = icons only; hover reveals text (exactly like demo) ===== */
/* All label text hidden while collapsed... */
.sidebar-link { color: transparent; }
.sidebar-signout { color: transparent !important; }
.sidebar .nav-label,
.sidebar .user-dept,
.brand-tt { opacity: 0; transition: opacity 0.2s; }
/* ...and revealed once the rail is hovered/expanded */
.sidebar:hover .sidebar-link { color: #5e6b85; }
.sidebar:hover .sidebar-link:hover { color: #0f1729; }
.sidebar:hover .sidebar-link.active { color: #067a6c; }
.sidebar:hover .sidebar-signout { color: #f43f5e !important; }
.sidebar:hover .nav-label,
.sidebar:hover .user-dept,
.sidebar:hover .brand-tt { opacity: 1; }

.main-content {
    flex: 1;
    width: auto;
    max-width: none;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #f4f7fa;
}

.layout-container {
    width: 100%;
    max-width: none;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    flex: 1;
    /* Full-width like Project Management; fills the page on large screens / zoom-out */
}

@media (max-width: 768px) {
    .layout-container {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Glassmorphism Utilities */
.glass-panel {
    background: white;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    padding: 2rem;
}

.dashboard-card {
    background: white;
    border-radius: 20px;
    padding: 1.75rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
    z-index: 1;
}

.stat-card {
    background: white;
    border-radius: 20px;
    padding: 1.75rem;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

/* Typography */
h1,
h2,
h3 {
    margin: 0;
    font-weight: 700;
    color: #111827;
}

/* Sidebar Elements */
.logo-container {
    padding: 20px 0 14px;            /* collapsed: no side padding so the logo centers in the full 76px */
}
.sidebar:hover .logo-container { padding: 20px 18px 14px 26px; }   /* expanded: align logo with nav icon column (14px nav + 12px link) */

.logo-text {
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;   /* collapsed: logo perfectly centered (any aspect ratio) */
    width: 100%;
    gap: 7px;
}
.sidebar:hover .logo-text { justify-content: flex-start; }  /* expanded: logo left, wordmark right */
.brand-logo {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    display: block;
}
.brand-tt { white-space: nowrap; display: none; }   /* collapsed: fully removed (no gap offset) */
.sidebar:hover .brand-tt { display: block; }        /* expanded: wordmark shown */
.brand-name { font-size: 0.96rem; font-weight: 800; color: #0f1729; line-height: 1.15; }
.brand-sub { font-size: 0.58rem; color: #8b7cf7; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; }

/* Demo rail has no section headers — hide them */
.user-dept { display: none; }

.nav-section {
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nav-section::-webkit-scrollbar {
    display: none;
}

.nav-label { display: none; }

.sidebar-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s;
    font-weight: 600;
    font-size: 13.5px;
    /* color is intentionally NOT set here: collapsed = transparent (icons only),
       revealed to #5e6b85 only when the rail is hovered/expanded */
    white-space: nowrap;
    margin-bottom: 2px;
}

.sidebar-link:hover {
    background: #F4F7FA;
    color: #0f1729;
}

.sidebar-link.active {
    background: #EDF7F5;
    font-weight: 700;
}
.sidebar-link.active::before {
    content: "";
    position: absolute;
    left: -14px;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: #067a6c;
}
.sidebar-link i { color: #8593AB; width: 19px; text-align: center; font-size: 14px; flex-shrink: 0; }
.sidebar-link.active i { color: #067a6c; }
.sidebar-link:hover i { color: #0f1729; }

/* "Back to Main" chip (Design A rail) */
.sidebar-link.back { background: #F4F7FA; margin-bottom: 12px; font-size: 12.5px; }

/* Sign Out: plain red link (demo .rfoot .ri), no pill */
.sidebar-signout {
    background: transparent !important;
    font-weight: 700;
    width: 100% !important;
    margin: 0;
}
.sidebar-signout:hover {
    background: #f7f9fc !important;
}
.sidebar-signout i {
    color: #f43f5e !important;
    opacity: 1;
}

.sidebar-link i {
    width: 19px;
    text-align: center;
    flex-shrink: 0;
}

.nav-unread-badge {
    position: absolute;
    right: 8px;
    top: 6px;
    align-items: center;
    justify-content: center;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 0.58rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: #f43f5e;
    border-radius: 99px;
}
/* collapsed: badge is a corner dot; expanded: inline at the row end */
.sidebar:hover .nav-unread-badge { position: static; margin-left: auto; top: auto; right: auto; }

/* ===== v7 demo: card surface ===== */
.card { background: #fff; border: 1px solid #e9edf4; border-radius: 16px; box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(16,24,40,.28); }
.pad { padding: 18px 20px; }
.panel-h { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid #e9edf4; }
.panel-h h3 { font-size: .9rem; margin: 0; font-weight: 800; color: #0f1729; }
.chip0 { font-size: .6rem; font-weight: 800; color: #9aa6bd; border: 1px solid #dde3ee; border-radius: 99px; padding: 3px 9px; }

/* ===== v7 demo: toolbar ===== */
.toolbar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; border-bottom: 1px solid #e9edf4; flex-wrap: nowrap; overflow-x: auto; }
.ctl { display: flex; align-items: center; gap: 7px; background: #f7f9fc; border: 1px solid #e9edf4; border-radius: 9px; padding: 8px 10px; color: #5e6b85; font-size: .78rem; flex-shrink: 0; }
.ctl select, .ctl input { border: none; background: none; outline: none; color: #0f1729; font-size: .78rem; font-family: inherit; }
.ctl input[type=date] { width: 108px; }
/* toolbar-scoped btn so we don't touch global .btn */
.toolbar .btn { flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; text-decoration: none; border: none; border-radius: 9px; padding: 9px 14px; font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.toolbar .btn-p { background: linear-gradient(135deg, #0fb5a0, #0a8f80); color: #fff !important; box-shadow: 0 8px 18px -8px rgba(15,181,160,.6); }
.toolbar .btn-o { background: #f7f9fc !important; border: 1px solid #dde3ee !important; color: #5e6b85 !important; box-shadow: none !important; }
.toolbar .btn-o:hover,
.toolbar .btn-o:focus,
.toolbar .btn-o:active { background: #e9edf4 !important; border-color: #c4d0e0 !important; color: #0f1729 !important; box-shadow: none !important; transform: none !important; }
.toolbar .btn-p:hover { transform: translateY(-1px); box-shadow: 0 10px 22px -8px rgba(15,181,160,.7); }
@keyframes toolbar-refresh-spin { to { transform: rotate(360deg); } }
.toolbar-refresh-icon { display: inline-block; }

/* ===== v7 demo: ticket table ===== */
.tbl { width: 100%; border-collapse: collapse; }
.tbl thead th { font-size: .58rem; text-transform: uppercase; letter-spacing: .09em; color: #9aa6bd; text-align: left; padding: 12px 10px; font-weight: 800; white-space: nowrap; background: #f7f9fc; border-bottom: 1px solid #e9edf4; }
.tbl tbody td { padding: 13px 10px; border-top: 1px solid #f0f3f8; border-bottom: none; font-size: .8rem; vertical-align: middle; transition: background .14s; color: #0f1729; }
.tbl tbody tr:nth-child(even) td { background: #fcfdfe; }
.tbl tbody tr:hover td { background: #f1f9f7; }
.tbl thead th:first-child, .tbl tbody td:first-child { padding-left: 20px; }
.tbl thead th:last-child, .tbl tbody td:last-child { padding-right: 18px; }
.tbl tbody td:first-child { border-left: 3px solid transparent; }
.tbl tr.s-open td:first-child { border-left-color: #3b82f6; }
.tbl tr.s-pending td:first-child { border-left-color: #f59e0b; }
.tbl tr.s-unassigned td:first-child { border-left-color: #f43f5e; }
.tbl tr.s-closed td:first-child { border-left-color: #cbd5e1; }
/* ticket cell classes */
.tid { font-family: ui-monospace, Menlo, monospace; color: #6366f1; font-weight: 800; font-size: .78rem; text-decoration: none; }
.subj { font-weight: 700; color: #0f1729; text-decoration: none; display: block; }
/* Subject column: give the title room and clamp it to 2 lines instead of breaking one word per line */
.tbl thead th:nth-child(2), .tbl tbody td:nth-child(2) { min-width: 260px; max-width: 340px; }
.subj .subj-t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.32; }
.subj small { display: block; color: #9aa6bd; font-weight: 500; font-size: .7rem; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.av2 { width: 28px; height: 28px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .62rem; font-weight: 800; color: #fff; flex-shrink: 0; box-shadow: 0 0 0 2px #fff, 0 2px 5px -1px rgba(16,24,40,.25); }
.person { display: flex; align-items: center; gap: 8px; }
.person .pi { min-width: 0; line-height: 1.25; }
.person .pn { font-weight: 700; color: #334155; font-size: .78rem; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.person .pe { font-size: .66rem; color: #9aa6bd; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.rt { color: #5e6b85; font-size: .78rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash { color: #9aa6bd; }
.tbl tbody td:nth-child(9),
.tbl tbody td:nth-child(10),
.tbl tbody td:nth-child(11),
.tbl tbody td:nth-child(12) { white-space: nowrap; }
.pri { display: inline-flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 800; padding: 3px 9px 3px 7px; border-radius: 99px; }
.pri::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.pri.low { background: #e4f7f1; color: #0a8f6e; }
.pri.med { background: #fff3df; color: #b46a09; }
.pri.high { background: #ffeee0; color: #c2570c; }
.pri.crit { background: #fde7ea; color: #d11a39; }
.st { display: inline-flex; align-items: center; gap: 6px; font-size: .68rem; font-weight: 800; padding: 4px 11px; border-radius: 99px; }
.st .sd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.st.open { background: #dcfce7; color: #15803d; }
.st.pending { background: #fef9c3; color: #a16207; }
.st.unassigned { background: #fde7ea; color: #dc2626; }
.st.closed { background: #eef1f6; color: #475569; }

/* Scrollbars shown globally with a white track + light-grey thumb. */
*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: #ffffff; }
*::-webkit-scrollbar-thumb { background: #e5e7eb; border-radius: 8px; border: 3px solid #ffffff; }
*::-webkit-scrollbar-thumb:hover { background: #d1d5db; }
*::-webkit-scrollbar-corner { background: #ffffff; }
/* Firefox */
* { scrollbar-color: #e5e7eb #ffffff; }
.od { font-size: .58rem; font-weight: 800; color: #f43f5e; background: #fde7ea; padding: 2px 6px; border-radius: 5px; margin-left: 4px; display: inline-block; }
.od.warn { color: #b45309; background: #fef3c7; }
.od.ok { color: #166534; background: #dcfce7; }

/* ===== v7 demo: pager ===== */
.pager { display: flex; justify-content: space-between; align-items: center; padding: 13px 18px; border-top: 1px solid #e9edf4; font-size: .75rem; color: #9aa6bd; }
.pager a,.pager a:visited,.pager a:link { color: #067a6c !important; text-decoration: none !important; font-weight: 700; }
.pager a:hover { color: #0fb5a0 !important; }
.pager .off { color: #9aa6bd; opacity: .5; }

/* Buttons */
.btn {
    background: var(--primary-indigo);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(15, 181, 160, 0.3);
    transition: all 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
}

.btn:hover {
    background: var(--primary-indigo-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -1px rgba(15, 181, 160, 0.4);
}

.btn-secondary {
    background: white;
    border: 1.5px solid var(--primary-indigo);
    color: var(--primary-indigo);
    font-weight: 600;
}

.btn-secondary:hover {
    background: white;
    border-color: var(--primary-indigo);
    color: var(--primary-indigo);
}

/* Tables */
table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

th {
    text-align: left;
    padding: 1rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #6b7280;
    letter-spacing: 0.05em;
    border-bottom: 1px solid #e5e7eb;
}

td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
    color: #374151;
}

tr:hover td {
    background: #f9fafb;
}

.spiceworks-table {
    background: transparent;
}

.spiceworks-table thead {
    background: #ffffff;
}

/* Ticket Toolbar */
.ticket-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff;
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    gap: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1000 !important;
}

.toolbar-left,
.toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.toolbar-center {
    flex: 1;
    max-width: 500px;
}

.ticket-title-link:hover {
    color: var(--primary-indigo) !important;
}

.search-form {
    display: flex;
    align-items: center;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 0.25rem 0.75rem;
    transition: all 0.2s;
}

.search-form:focus-within {
    border-color: var(--primary-indigo);
    box-shadow: 0 0 0 2px rgba(15, 181, 160, 0.15);
}

.search-form input {
    border: none;
    background: transparent;
    padding: 0.5rem;
    width: 100%;
    outline: none;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.search-form button {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.5rem;
}

/* Dropdown */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-btn {
    background: white;
    border: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dropdown-content {
    display: none;
    position: absolute;
    background: white;
    min-width: 160px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 10;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    margin-top: 4px;
}

.dropdown.active .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: #374151;
    padding: 0.75rem 1rem;
    text-decoration: none;
    display: block;
    font-size: 0.9rem;
}

.dropdown-content a:hover {
    background: #f9fafb;
    border-radius: 8px;
}

/* User avatar dropdown (top-right on dashboards) – ensure it appears above cards/tickets */
.user-avatar-dropdown {
    position: relative;
    z-index: 9999 !important;
}

.user-avatar-dropdown-menu {
    z-index: 10000 !important;
}

.user-avatar-dropdown-item:hover {
    background: #f3f4f6 !important;
}

/* Badges & Indicators */
.badge {
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    background: #f1f5f9;
    color: #475569;
}

.status-badge {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.status-open {
    background: #dcfce7;
    color: #15803d;
}

.status-pending {
    background: #fef9c3;
    color: #854d0e;
}

.status-closed {
    background: #f1f5f9;
    color: #475569;
}

.priority-indicator {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 800;
    padding: 3px 9px 3px 8px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.priority-indicator::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.priority-critical {
    color: #d11a39;
    background: #fde7ea;
}

.priority-high {
    color: #c2570c;
    background: #ffeee0;
}

.priority-medium {
    color: #b46a09;
    background: #fff3df;
}

.priority-low {
    color: #0a8f6e;
    background: #e4f7f1;
}

.user-avatar-sm {
    width: 28px;
    height: 28px;
    min-width: 28px;
    min-height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #0f172a;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    overflow: hidden;
}

/* Stat Cards Grid - original solid look */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    width: 100%;
    margin-bottom: 2.5rem;
}

.stat-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 1.75rem;
    border: 1px solid var(--border-color);
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease;
}

.stat-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.stat-label {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.stat-value {
    font-size: 2.5rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
    margin-bottom: 0.75rem;
}

.stat-meta {
    font-weight: 500;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* Dialogue Box / Modal (Glass) */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(4px);
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    z-index: 50;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: white;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-overlay.active .modal-content {
    transform: scale(1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.modal-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #111827;
}

.close-modal {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6B7280;
    font-size: 1.25rem;
}

/* Form inputs in Glass Modal */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.75rem;
    border-radius: 10px;
    border: 1px solid #d1d5db;
    background: #f9fafb;
    color: var(--text-primary);
    transition: all 0.2s;
}

.form-input:focus {
    background: white;
    border-color: var(--primary-indigo);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 181, 160, 0.1);
}


/* Inline Assignee Dropdown */
.assignee-cell {
    position: relative;
    cursor: pointer;
}

.assignee-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    z-index: 1000;
    padding: 1.25rem;
    margin-top: 0.5rem;
}

.assignee-dropdown.active {
    display: block;
    animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.assignee-dropdown label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.assignee-dropdown select,
.assignee-dropdown input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-bottom: 1rem;
    outline: none;
    box-sizing: border-box;
}

.assignee-dropdown select:focus,
.assignee-dropdown input:focus {
    border-color: #0fb5a0;
    box-shadow: 0 0 0 3px rgba(15, 181, 160, 0.1);
}

.assignee-dropdown .btn-group {
    display: flex;
    gap: 0.5rem;
}

.assignee-dropdown .btn-group button {
    flex: 1;
    padding: 0.6rem;
    font-size: 0.85rem;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.2s;
}

.assignee-dropdown .btn-save {
    background: #0fb5a0;
    color: white;
    border: none;
}

.assignee-dropdown .btn-save:hover {
    background: #0a8f80;
}

.assignee-dropdown .btn-cancel {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
}

.assignee-dropdown .btn-cancel:hover {
    background: #e2e8f0;
}

/* Ticket management: assignee section – larger font */
.assignee-cell-name {
    font-size: 0.95rem;
    color: #475569;
    font-weight: 500;
}

.assignee-cell .assignee-cell-avatar {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
    flex-shrink: 0 !important;
    font-size: 0.8rem !important;
    overflow: hidden;
}

.assignee-cell .assignee-assign-btn {
    font-size: .7rem !important;
    padding: 5px 10px !important;
    background: #e8f1fe !important;
    color: #2563eb !important;
    border: none !important;
    box-shadow: none !important;
}

/* ── Assignee dropdown: compact premium light panel ── */
.assignee-dropdown-detail-style {
    width: 288px;
    padding: 0;
    border-radius: 16px;
    background: #fff;
    border: 1px solid #dde5f2;
    box-shadow:
        0 2px 8px rgba(15,23,42,.07),
        0 12px 32px rgba(15,23,42,.11);
    overflow: hidden;
    animation: adpIn .18s cubic-bezier(.22,.68,0,1.2) both;
}
@keyframes adpIn {
    from { opacity:0; transform:scale(.96) translateY(-6px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}
.assignee-dropdown-detail-style::before {
    content:'';
    display:block;
    height:3px;
    background:linear-gradient(90deg,#0fb5a0 0%,#3b82f6 55%,#7c5cff 100%);
}
.assignee-dropdown-detail-style .assignee-dropdown-header {
    padding: 0.6rem 0.85rem 0.5rem;
    background: linear-gradient(135deg,#f0fdfa,#eff6ff 70%,#fff 100%);
    border-bottom: 1px solid #e8f0fb;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .16em;
    color: #0d9488;
}

/* Side-by-side action buttons */
.assignee-dropdown-detail-style .adp-acts {
    display: flex;
    gap: 0.4rem;
    padding: 0.65rem 0.65rem 0;
}
.assignee-dropdown-detail-style .assignee-dropdown-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.5rem 0.4rem;
    font-size: 0.77rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: 9px;
    cursor: pointer;
    transition: box-shadow .14s, transform .11s, background .13s;
}
.assignee-dropdown-detail-style .assignee-dropdown-btn-primary {
    color: #fff;
    background: linear-gradient(135deg,#0fb5a0,#3b82f6);
    border: none;
    box-shadow: 0 2px 8px rgba(15,181,160,.28);
}
.assignee-dropdown-detail-style .assignee-dropdown-btn-primary:hover {
    background: linear-gradient(135deg,#0aa090,#2563eb);
    box-shadow: 0 4px 14px rgba(15,181,160,.38);
    transform: translateY(-1px);
}
.assignee-dropdown-detail-style .assignee-dropdown-btn-danger {
    color: #dc2626;
    background: #fff5f5;
    border: 1.5px solid #fecaca;
}
.assignee-dropdown-detail-style .assignee-dropdown-btn-danger:hover {
    background: #fee2e2;
    border-color: #fca5a5;
    transform: translateY(-1px);
}

/* Fields */
.assignee-dropdown-detail-style .assignee-dropdown-field {
    margin: 0.55rem 0.7rem 0;
}
.assignee-dropdown-detail-style .assignee-dropdown-field label {
    display: block;
    font-size: 0.55rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #94a3b8;
    margin-bottom: 0.25rem;
}
.assignee-dropdown-detail-style .assignee-dropdown-input {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid #e4eaf4;
    border-radius: 8px;
    font-size: 0.79rem;
    font-family: inherit;
    outline: none;
    background: #f8fafc;
    color: #1e293b;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.assignee-dropdown-detail-style .assignee-dropdown-input:focus {
    border-color: #0fb5a0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15,181,160,.11);
}

/* Search */
.assignee-dropdown-detail-style .adp-search-wrap {
    position: relative;
    margin: 0.6rem 0.65rem 0;
    background: #f8fafc;
    border: 1.5px solid #e4eaf4;
    border-radius: 99px;
    transition: border-color .15s, box-shadow .15s, background .15s;
    overflow: hidden;
}
.assignee-dropdown-detail-style .adp-search-wrap:focus-within {
    border-color: #0fb5a0;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(15,181,160,.09);
}
/* icon spans full height of wrapper, flex-centers the glyph inside */
.assignee-dropdown-detail-style .adp-search-wrap i {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}
.assignee-dropdown-detail-style .adp-search {
    display: block !important;
    width: 100% !important;
    padding: 7px 10px 7px 30px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 12px !important;
    font-family: inherit !important;
    outline: none !important;
    color: #1e293b !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}
.assignee-dropdown-detail-style .adp-search::placeholder { color: #b0bdd0; }

/* Divider */
.assignee-dropdown-detail-style .assignee-dropdown-divider {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0.6rem 0.7rem 0.25rem;
    font-size: .52rem;
    font-weight: 900;
    letter-spacing: .13em;
    color: #b0bdd0;
}
.assignee-dropdown-detail-style .assignee-dropdown-divider::before { content:'TEAM'; }
.assignee-dropdown-detail-style .assignee-dropdown-divider::after {
    content:'';
    flex:1;
    height:1px;
    background:#e8edf5;
}

/* Employee list */
.assignee-dropdown-detail-style .assignee-dropdown-employees {
    max-height: 168px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 0.45rem 0.1rem;
}
.assignee-dropdown-detail-style .assignee-dropdown-employees::-webkit-scrollbar { width:3px; }
.assignee-dropdown-detail-style .assignee-dropdown-employees::-webkit-scrollbar-track { background:transparent; }
.assignee-dropdown-detail-style .assignee-dropdown-employees::-webkit-scrollbar-thumb { background:#dde3ef; border-radius:99px; }

/* Employee row */
.assignee-dropdown-detail-style .assignee-dropdown-emp-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.5rem;
    width: 100%;
    background: none;
    border: none;
    border-radius: 9px;
    color: #334155;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    text-align: left;
    position: relative;
    transition: background .13s, color .13s;
}
.assignee-dropdown-detail-style .assignee-dropdown-emp-btn:hover {
    background: #f0fdf9;
    color: #0d9488;
}
.assignee-dropdown-detail-style .assignee-dropdown-emp-btn:hover .assignee-dropdown-emp-avatar {
    border-color: #5eead4;
    box-shadow: 0 0 0 2px rgba(15,181,160,.15);
}

/* Avatar */
.assignee-dropdown-detail-style .assignee-dropdown-emp-avatar {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg,#7c5cff,#3b82f6);
    border: 2px solid #e8edf5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 800;
    color: #fff;
    overflow: hidden;
    flex-shrink: 0;
    transition: border-color .13s, box-shadow .13s;
}

/* Assigned check */
.assignee-dropdown-detail-style .assignee-dropdown-check {
    margin-left: auto;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #0fb5a0;
    color: #fff;
    font-size: 0.52rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Footer */
.assignee-dropdown-detail-style .assignee-dropdown-actions {
    padding: 0.5rem 0.65rem 0.6rem;
    margin-top: 0.4rem;
    border-top: 1px solid #eef2f9;
}
.assignee-dropdown-detail-style .assignee-dropdown-cancel {
    width: 100%;
    padding: 0.46rem 0.6rem;
    font-size: 0.78rem;
    font-weight: 700;
    font-family: inherit;
    color: #64748b;
    background: #f8fafc;
    border: 1.5px solid #e4eaf4;
    border-radius: 9px;
    cursor: pointer;
    transition: background .13s, color .13s, border-color .13s;
}
.assignee-dropdown-detail-style .assignee-dropdown-cancel:hover {
    background: #eef2f9;
    color: #334155;
    border-color: #c9d5e8;
}

/* ========== DASHBOARD ONLY: Premium Glassmorphism (blue) ========== */
.dashboard-page {
    position: relative;
    min-height: 100vh;
    margin: -2.5rem -2rem 0;
    padding: 2.5rem 2rem 3rem;
    background: #f4f7fa;
    border-radius: 0;
}

.dashboard-page .dashboard-header {
    position: relative;
    z-index: 100;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: 22px;
    padding: 1.35rem 1.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.5) inset, 0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.dashboard-page .dashboard-header h1 {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.dashboard-page .dashboard-header .btn,
.dashboard-page .dashboard-header a.btn {
    background: linear-gradient(135deg, rgba(15, 181, 160, 0.95), rgba(79, 70, 229, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 4px 14px rgba(15, 181, 160, 0.35);
    color: white !important;
}

.dashboard-page .dashboard-header .btn:hover,
.dashboard-page .dashboard-header a.btn:hover {
    box-shadow: 0 6px 20px rgba(15, 181, 160, 0.45);
}

.dashboard-page .stats-grid {
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}

/* Keep five KPI cards on one aligned row for dashboard headers. */
.dashboard-page .stats-grid.stats-grid-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
    .dashboard-page .stats-grid.stats-grid-5 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 980px) {
    .dashboard-page .stats-grid.stats-grid-5 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .dashboard-page .stats-grid.stats-grid-5 {
        grid-template-columns: 1fr;
    }
}

.dashboard-page .stat-card {
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 2px rgba(16,24,40,.05), 0 14px 30px -22px rgba(16,24,40,.22);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100%;
    position: relative;
    overflow: hidden;
}

.dashboard-page .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px -20px rgba(16,24,40,.32);
    border-color: #dde3ee;
}
/* colored left accent per KPI card */
.dashboard-page .stats-grid.stats-grid-5 > .stat-card::before {
    content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 3px; background: #94a3b8;
}
.dashboard-page .stats-grid.stats-grid-5 > .stat-card:nth-child(1)::before { background: #3b82f6; }
.dashboard-page .stats-grid.stats-grid-5 > .stat-card:nth-child(2)::before { background: #f43f5e; }
.dashboard-page .stats-grid.stats-grid-5 > .stat-card:nth-child(3)::before { background: #f59e0b; }
.dashboard-page .stats-grid.stats-grid-5 > .stat-card:nth-child(4)::before { background: #0fb5a0; }
.dashboard-page .stats-grid.stats-grid-5 > .stat-card:nth-child(5)::before { background: #7c5cff; }

.dashboard-page .stat-label {
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.dashboard-page .stat-value {
    font-size: 3.05rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.04em;
    line-height: 1.1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.dashboard-page .stat-meta {
    font-weight: 600;
    font-size: 0.85rem;
}

/* Five KPI cards: compact fixed bands so digits line up; no forced stretch (taller dead space) */
.dashboard-page .stats-grid.stats-grid-5 > .stat-card {
    display: grid;
    grid-template-rows: 2.8rem 3.45rem auto;
    row-gap: 0.25rem;
    column-gap: 0;
    align-content: start;
    min-height: unset;
    height: auto;
    padding: 1.375rem 1.5rem;
}

.dashboard-page .stats-grid.stats-grid-5 > .stat-card .stat-label {
    height: 2.8rem;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    line-height: 1.3;
    box-sizing: border-box;
    align-self: stretch;
    text-align: left;
}

.dashboard-page .stats-grid.stats-grid-5 > .stat-card .stat-value {
    /* Same clamp for every card → digits stay aligned; shrinks on narrow viewports so 6+ digits fit */
    font-size: clamp(1.5rem, 1.7vw + 1.05rem, 3.05rem);
    letter-spacing: -0.045em;
    height: 3.45rem;
    margin: 0;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    line-height: 1;
    flex: unset;
    white-space: nowrap;
    /* Large figures sit low in the font box; nudge up for better balance with label + meta */
    transform: translateY(-0.28rem);
}

.dashboard-page .stats-grid.stats-grid-5 > .stat-card .stat-meta {
    margin: 0;
    align-self: stretch;
    padding-top: 0;
    width: 100%;
    text-align: left;
}

.dashboard-page .dashboard-card {
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 26px;
    padding: 2rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    overflow: visible;
}

/* Theme consistency: any .glass-panel inside dashboard-page uses same glass as .dashboard-card */
.dashboard-page .glass-panel {
    background: rgba(255, 255, 255, 0.45) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-page .dashboard-card h2 {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.dashboard-page .ticket-toolbar {
    flex-wrap: wrap;
    gap: 1rem;
    background: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.toolbar-btn-refresh:hover .toolbar-refresh-icon {
    display: inline-block;
    animation: toolbar-refresh-spin 0.6s ease;
}

@keyframes toolbar-refresh-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.dashboard-page .ticket-toolbar .search-form,
.dashboard-page .ticket-toolbar .dropdown-btn {
    background: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dashboard-page .ticket-toolbar .search-form:focus-within,
.dashboard-page .ticket-toolbar .dropdown-btn:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 1);
}

.dashboard-page .ticket-toolbar .btn {
    background: linear-gradient(135deg, rgba(15, 181, 160, 0.95), rgba(79, 70, 229, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 4px 14px rgba(15, 181, 160, 0.35);
}

.dashboard-page .ticket-toolbar .btn:hover {
    box-shadow: 0 6px 20px rgba(15, 181, 160, 0.45);
}

/* Outline toolbar buttons (Apply / Refresh / Clear) stay neutral grey — never green/gradient. */
.dashboard-page .ticket-toolbar .btn.btn-o,
.ticket-toolbar .btn.btn-o,
.toolbar .btn.btn-o {
    background: #f7f9fc !important;
    border: 1px solid #dde3ee !important;
    color: #5e6b85 !important;
    box-shadow: none !important;
}
.dashboard-page .ticket-toolbar .btn.btn-o:hover,
.dashboard-page .ticket-toolbar .btn.btn-o:focus,
.ticket-toolbar .btn.btn-o:hover,
.toolbar .btn.btn-o:hover,
.toolbar .btn.btn-o:focus {
    background: #e9edf4 !important;
    border-color: #c4d0e0 !important;
    color: #0f1729 !important;
    box-shadow: none !important;
    transform: none !important;
}

.dashboard-page #search-results {
    border-top: 1px solid rgba(255, 255, 255, 0.4) !important;
    padding-top: 1rem !important;
    margin-top: 0.5rem;
}

.dashboard-page .spiceworks-table {
    border-radius: 16px;
    overflow: hidden;
}

.dashboard-page .spiceworks-table thead {
    background: #f7f9fc;
    border-bottom: 1px solid var(--border-color);
}

.dashboard-page .spiceworks-table thead th {
    font-weight: 800;
    font-size: 0.62rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #94a3b8;
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

.dashboard-page .spiceworks-table tbody tr {
    transition: background 0.15s ease;
}

.dashboard-page .spiceworks-table tbody tr:nth-child(even) td {
    background: #fcfdfe;
}

.dashboard-page .spiceworks-table tbody tr:hover td {
    background: #f1f9f7;
}

.dashboard-page .spiceworks-table tbody td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #f0f3f8;
    border-top: none;
}

.dashboard-page .empty-state-box {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 2.5rem;
    color: #64748b;
    font-weight: 500;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* ========== CHATBOT TRAINING (CEO/Admin) – Premium glassmorphism ========== */
.dashboard-page.chatbot-training-page,
.chatbot-training-page {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Force premium background even if .dashboard-page is not applied */
    background: #e2f6f3;
    background-image:
        radial-gradient(ellipse 120% 70% at 5% 0%, rgba(15, 181, 160, 0.28), transparent 50%),
        radial-gradient(ellipse 80% 55% at 98% 5%, rgba(139, 92, 246, 0.22), transparent 48%),
        radial-gradient(ellipse 70% 50% at 50% 105%, rgba(59, 130, 246, 0.18), transparent 45%),
        linear-gradient(175deg, #fafbff 0%, #f1f5f9 38%, #e2e8f0 100%);
    margin: -2.5rem -2rem 0;
    padding: 2.5rem 2rem 3rem;
    border-radius: 0;
    min-height: 100%;
    position: relative;
}
.dashboard-page.chatbot-training-page .ct-header,
.chatbot-training-page .ct-header {
    margin-bottom: 2rem;
}
.dashboard-page.chatbot-training-page .ct-header .dashboard-header,
.chatbot-training-page .ct-header .dashboard-header {
    display: block;
    padding: 1.5rem 2rem;
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 22px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.dashboard-page.chatbot-training-page .ct-header h1,
.chatbot-training-page .ct-header h1 {
    margin: 0;
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.dashboard-page.chatbot-training-page .ct-header-subtitle,
.chatbot-training-page .ct-header-subtitle {
    color: #64748b;
    font-size: 0.9375rem;
    line-height: 1.55;
    margin: 0.5rem 0 0 0;
    max-width: 36rem;
}

/* Cards – strong frosted glass */
.dashboard-page.chatbot-training-page .ct-card,
.chatbot-training-page .ct-card {
    margin-bottom: 2rem;
    padding: 2rem 2.25rem;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    border-radius: 24px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.dashboard-page.chatbot-training-page .ct-card-title,
.chatbot-training-page .ct-card-title {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 1.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.dashboard-page.chatbot-training-page .ct-card-title i,
.chatbot-training-page .ct-card-title i {
    color: var(--primary-indigo);
    font-size: 1.1rem;
}

/* Form – arranged layout (single column for clarity) */
.dashboard-page.chatbot-training-page .ct-form-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.dashboard-page.chatbot-training-page .ct-form-group {
    margin-bottom: 0;
}
.dashboard-page.chatbot-training-page .ct-form-group.ct-form-full {
    width: 100%;
}
.dashboard-page.chatbot-training-page .ct-label {
    display: block;
    font-weight: 600;
    color: #334155;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}
.dashboard-page.chatbot-training-page .ct-input,
.dashboard-page.chatbot-training-page .ct-textarea,
.chatbot-training-page .ct-input,
.chatbot-training-page .ct-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 14px;
    font-size: 0.9375rem;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
}
.dashboard-page.chatbot-training-page .ct-input:focus,
.dashboard-page.chatbot-training-page .ct-textarea:focus,
.chatbot-training-page .ct-input:focus,
.chatbot-training-page .ct-textarea:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 0 0 3px rgba(15, 181, 160, 0.25), inset 0 1px 0 rgba(255, 255, 255, 1);
}
.dashboard-page.chatbot-training-page .ct-textarea,
.chatbot-training-page .ct-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Upload zone – frosted glass */
.dashboard-page.chatbot-training-page .ct-upload-zone,
.chatbot-training-page .ct-upload-zone {
    border: 2px dashed rgba(15, 181, 160, 0.55);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 2rem;
    text-align: center;
    transition: all 0.25s ease;
    margin-top: 0.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.dashboard-page.chatbot-training-page .ct-upload-zone:hover,
.dashboard-page.chatbot-training-page .ct-upload-zone.has-file,
.chatbot-training-page .ct-upload-zone:hover,
.chatbot-training-page .ct-upload-zone.has-file {
    border-color: var(--primary-indigo);
    background: rgba(15, 181, 160, 0.1);
    box-shadow: 0 0 0 1px rgba(15, 181, 160, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.dashboard-page.chatbot-training-page .ct-upload-zone label,
.chatbot-training-page .ct-upload-zone label {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}
.dashboard-page.chatbot-training-page .ct-upload-icon,
.chatbot-training-page .ct-upload-icon {
    width: 56px;
    height: 56px;
    border-radius: 18px;
    background: rgba(15, 181, 160, 0.18);
    color: var(--primary-indigo);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 4px 16px rgba(15, 181, 160, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.dashboard-page.chatbot-training-page .ct-upload-text,
.chatbot-training-page .ct-upload-text {
    font-weight: 600;
    color: #334155;
    font-size: 0.9375rem;
}
.dashboard-page.chatbot-training-page .ct-upload-hint,
.chatbot-training-page .ct-upload-hint {
    color: #64748b;
    font-size: 0.8125rem;
}
.dashboard-page.chatbot-training-page .ct-file-name,
.chatbot-training-page .ct-file-name {
    font-size: 0.8125rem;
    color: var(--primary-indigo);
    font-weight: 600;
    display: none;
}
.dashboard-page.chatbot-training-page .ct-file-name.show,
.chatbot-training-page .ct-file-name.show {
    display: block;
    margin-top: 0.25rem;
}
.dashboard-page.chatbot-training-page .ct-upload-zone input[type="file"],
.chatbot-training-page .ct-upload-zone input[type="file"] {
    position: absolute;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
    z-index: -1;
}

/* Form actions */
.dashboard-page.chatbot-training-page .ct-form-actions,
.chatbot-training-page .ct-form-actions {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.5);
}
/* Primary CTA – solid gradient, never outline */
.dashboard-page.chatbot-training-page .ct-btn-submit,
.chatbot-training-page .ct-btn-submit {
    background: linear-gradient(135deg, #0fb5a0 0%, #0a8f80 100%) !important;
    color: #fff !important;
    padding: 0.875rem 1.75rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(15, 181, 160, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: box-shadow 0.2s, transform 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    -webkit-appearance: none;
    appearance: none;
}
.dashboard-page.chatbot-training-page .ct-btn-submit:hover,
.chatbot-training-page .ct-btn-submit:hover {
    background: linear-gradient(135deg, #5558e3 0%, #067a6c 100%) !important;
    color: #fff !important;
    box-shadow: 0 8px 28px rgba(15, 181, 160, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

/* Knowledge base table card – frosted glass */
.dashboard-page.chatbot-training-page .ct-table-card,
.chatbot-training-page .ct-table-card {
    padding-bottom: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(28px);
    -webkit-backdrop-filter: blur(28px);
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}
.dashboard-page.chatbot-training-page .ct-table-card .ct-card-title {
    margin-bottom: 1rem;
}
.dashboard-page.chatbot-training-page .ct-table-scroll {
    min-height: 280px;
    max-height: calc(100vh - 380px);
    overflow-y: auto;
    overflow-x: auto;
    margin: 0 -2.25rem -2rem;
    border-radius: 0 0 26px 26px;
    -webkit-overflow-scrolling: touch;
}
.dashboard-page.chatbot-training-page .ct-table-scroll .spiceworks-table {
    margin: 0;
    border-radius: 0;
}
.dashboard-page.chatbot-training-page .ct-table-scroll .spiceworks-table thead th {
    padding: 1rem 2rem;
}
.dashboard-page.chatbot-training-page .ct-table-scroll .spiceworks-table tbody td {
    padding: 1rem 2rem;
    vertical-align: top;
}
.dashboard-page.chatbot-training-page .ct-cell-title {
    font-weight: 600;
    color: #1e293b;
    max-width: 180px;
    word-wrap: break-word;
}
.dashboard-page.chatbot-training-page .ct-cell-preview {
    color: #475569;
    max-width: 400px;
    min-width: 200px;
    line-height: 1.5;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-height: 8em;
    overflow-y: auto;
}
.dashboard-page.chatbot-training-page .ct-cell-date {
    color: #94a3b8;
    font-size: 0.875rem;
}
.dashboard-page.chatbot-training-page .ct-btn-delete {
    color: #dc2626;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}
.dashboard-page.chatbot-training-page .ct-btn-delete:hover {
    color: #b91c1c;
}
.dashboard-page.chatbot-training-page .ct-empty-state {
    padding: 3rem 2rem;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9375rem;
    line-height: 1.5;
}
.dashboard-page.chatbot-training-page .ct-th-action {
    width: 90px;
}

@media (max-width: 768px) {
    .dashboard-page {
        margin: -1.5rem -1.5rem 0;
        padding: 1.5rem 1.5rem 2rem;
    }
}

/* ==========================
   Mobile-only layout layer
   Desktop UI remains unchanged
   ========================== */
.mobile-sidebar-toggle,
.mobile-sidebar-overlay {
    display: none;
}

@media (max-width: 980px) {
    /* Drawer overlays the page on mobile: the content must never follow the rail. The JS bails
       out below 980px, but keep these as a guard in case the window is resized across it. */
    .app-container,
    .app-container.has-rail,
    .app-container.rail-open {
        padding-left: 0;
    }
    .app-container.rail-open .main-content,
    .app-container.rail-closing .main-content {
        animation: none;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh;
        width: min(82vw, 300px);
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: 1200;
        box-shadow: 8px 0 30px rgba(0, 0, 0, 0.25);
    }

    .sidebar:hover { width: min(82vw, 300px); } /* don't let hover shrink the open drawer */

    /* Mobile drawer is full-width: always show labels/text (hover can't fire on touch) */
    .sidebar-link { color: #5e6b85; }
    .sidebar-link.active { color: #067a6c; }
    .sidebar-signout { color: #f43f5e !important; }
    .sidebar .nav-label,
    .sidebar .user-dept,
    .brand-tt { opacity: 1; }
    .nav-unread-badge { position: static; margin-left: auto; top: auto; right: auto; }

    .main-content {
        width: 100%;
        max-width: 100%;
    }

    .layout-container {
        padding: 4.5rem 1rem 1.25rem;
    }

    .mobile-sidebar-toggle {
        position: fixed;
        top: 12px;
        left: 12px;
        width: 42px;
        height: 42px;
        border-radius: 10px;
        border: 1px solid #dbe3f3;
        background: rgba(255, 255, 255, 0.96);
        color: #0f172a;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        z-index: 1210;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.15);
    }

    .mobile-sidebar-overlay {
        position: fixed;
        inset: 0;
        background: rgba(2, 6, 23, 0.5);
        z-index: 1190;
    }

    body.mobile-sidebar-open {
        overflow: hidden;
    }

    body.mobile-sidebar-open .sidebar {
        transform: translateX(0);
    }

    body.mobile-sidebar-open .mobile-sidebar-overlay {
        display: block;
    }

    .dashboard-page {
        margin: -1.25rem -1rem 0;
        padding: 1.25rem 1rem 1.5rem;
    }

    .dashboard-page .dashboard-header {
        padding: 1rem;
        border-radius: 16px;
    }

    .dashboard-page .dashboard-header h1 {
        font-size: 1.3rem;
    }

    .stats-grid,
    .dashboard-page .stats-grid {
        grid-template-columns: 1fr !important;
        gap: 0.9rem !important;
    }

    .stat-card,
    .dashboard-page .stat-card,
    .dashboard-card {
        border-radius: 14px;
        padding: 1rem;
    }

    .ticket-toolbar {
        padding: 0.75rem;
    }

    .toolbar-left,
    .toolbar-right,
    .toolbar-center {
        width: 100%;
        max-width: 100%;
    }

    .search-form {
        width: 100%;
    }

    th,
    td {
        padding: 0.6rem 0.5rem;
        font-size: 0.8rem;
    }

    #chatbot-widget {
        right: 14px !important;
        bottom: 14px !important;
    }
    #chatbot-panel {
        width: min(94vw, 380px) !important;
        max-width: 94vw !important;
        height: min(72dvh, 500px) !important;
    }
    #team-chat-launcher {
        right: 14px !important;
        bottom: 86px !important;
    }

    /* ===== Global mobile layer: keeps desktop unchanged ===== */
    .dashboard-page {
        margin: -1rem -1rem 0 !important;
        padding: 1rem 1rem 1.25rem !important;
    }

    .layout-container {
        padding: 4.5rem 1rem 1.25rem !important;
        max-width: 100% !important;
    }

    .dashboard-header {
        padding: 1rem !important;
        border-radius: 14px !important;
    }

    .dashboard-header h1 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        word-break: break-word;
    }

    .dashboard-header p {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }

    .stats-grid,
    .dashboard-page .stats-grid,
    [style*="grid-template-columns: repeat(5"],
    [style*="grid-template-columns: repeat(4"],
    [style*="grid-template-columns: repeat(3"],
    [style*="grid-template-columns: repeat(2"] {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    .dashboard-card,
    .stat-card,
    .glass-panel {
        padding: 1rem !important;
        border-radius: 14px !important;
    }

    .ticket-toolbar {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.6rem !important;
        padding: 0.75rem !important;
    }
    .toolbar-left,
    .toolbar-right,
    .toolbar-center {
        width: 100% !important;
        max-width: 100% !important;
    }

    .search-form {
        width: 100% !important;
    }

    .btn,
    .btn-secondary {
        min-height: 40px;
    }

    /* Table usability on phone: horizontal scroll instead of clipped columns */
    .dashboard-card > div[style*="overflow-x: auto"],
    .dashboard-page div[style*="overflow-x: auto"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    table {
        min-width: 680px;
    }
    th,
    td {
        font-size: 0.8rem !important;
        padding: 0.55rem 0.5rem !important;
        white-space: nowrap;
    }

    /* Forms and filter bars */
    form[method="GET"][style*="display: flex"],
    form[style*="display: flex"] {
        flex-wrap: wrap !important;
        align-items: stretch !important;
        gap: 0.5rem !important;
    }

    input[type="text"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    input[type="email"],
    select,
    textarea {
        max-width: 100% !important;
        font-size: 16px !important; /* prevent mobile zoom */
    }

    /* Dropdown panels / popovers / assignment menus */
    .dropdown-content,
    .assignee-dropdown,
    #assignDropdown {
        max-width: 95vw !important;
        width: 100% !important;
        left: 0 !important;
        right: auto !important;
    }

    /* Modal readability on mobile */
    .modal-content {
        max-width: 94vw !important;
        max-height: 84dvh !important;
        padding: 1rem !important;
        border-radius: 14px !important;
    }

    /* Chat widgets should not block controls */
    #chatbot-widget {
        right: 12px !important;
        bottom: 12px !important;
        z-index: 950 !important;
    }
    #chatbot-panel {
        width: min(94vw, 380px) !important;
        max-width: 94vw !important;
        height: min(72dvh, 500px) !important;
    }
    #team-chat-launcher {
        right: 12px !important;
        bottom: 84px !important;
        z-index: 951 !important;
    }

    /* Ticket detail: mobile usability overrides only */
    .ticket-detail-shell {
        padding-bottom: 1rem !important;
    }
    .ticket-detail-header-card {
        padding: 1rem !important;
    }
    .ticket-detail-header-row {
        flex-direction: column !important;
        gap: 0.75rem !important;
        margin-bottom: 0.9rem !important;
    }
    .ticket-detail-header-row h1 {
        font-size: 1.25rem !important;
        line-height: 1.35 !important;
        word-break: break-word;
    }
    .ticket-detail-status-row {
        width: 100%;
        justify-content: flex-start !important;
    }
    .ticket-detail-meta-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
        margin-top: 0.85rem !important;
        padding-top: 0.85rem !important;
    }

    .ticket-detail-body-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    .ticket-detail-main-col,
    .ticket-sidebar-col {
        min-width: 0 !important;
    }
    .ticket-detail-main-col {
        order: 1;
    }
    .ticket-sidebar-col {
        order: 2;
    }

    .ticket-tab-btn {
        white-space: nowrap;
        font-size: 0.88rem !important;
        padding: 0.65rem 0.75rem !important;
    }
    .ticket-detail-tabs-row {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 0.5rem 0.6rem 0 !important;
        gap: 0.35rem !important;
    }
    .ticket-detail-tabs-body {
        padding: 0.9rem !important;
    }
    .ticket-detail-description-row,
    .ticket-detail-reply-head,
    .ticket-detail-reply-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.65rem !important;
    }

    /* Ticket detail cards/controls are mostly inline-styled; override only on mobile */
    .ticket-detail-main-col .dashboard-card,
    .ticket-sidebar-col .dashboard-card {
        padding: 1rem !important;
        border-radius: 14px !important;
    }

    #replyForm .form-input,
    #replyForm textarea,
    #replyForm input[type="text"] {
        font-size: 16px !important; /* prevent iOS zoom on focus */
    }

    #assignDropdown {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    #pending-remark-modal > div {
        max-width: 94vw !important;
    }
}

@media (max-width: 640px) {
    .ticket-detail-body-grid {
        gap: 0.85rem !important;
    }

    .ticket-detail-main-col .dashboard-card,
    .ticket-sidebar-col .dashboard-card {
        padding: 0.85rem !important;
    }
    .ticket-detail-reply-card {
        padding: 0.85rem !important;
    }

    /* Keep tab row usable on narrow screens */
    .ticket-detail-main-col .dashboard-card > div[style*="display: flex"][style*="border-bottom"] {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-left: 0.65rem !important;
        padding-right: 0.65rem !important;
    }

    /* Attachments become single column for readability */
    .attachment-card-grid {
        grid-template-columns: 1fr !important;
        gap: 0.85rem !important;
    }

    /* Full-width primary action buttons in sidebar/reply areas */
    .ticket-sidebar-col .btn,
    #replyForm .btn {
        width: 100%;
    }
    .ticket-sidebar-col [style*="max-height: 340px"] {
        max-height: 240px !important;
    }

    .layout-container {
        padding: 4.25rem 0.75rem 1rem !important;
    }
    .dashboard-page {
        margin: -0.75rem -0.75rem 0 !important;
        padding: 0.75rem 0.75rem 1rem !important;
    }
    .dashboard-header {
        padding: 0.85rem !important;
    }
    .dashboard-header h1 {
        font-size: 1.1rem !important;
    }
    .dashboard-card,
    .stat-card,
    .glass-panel {
        padding: 0.85rem !important;
        border-radius: 12px !important;
    }
    .btn,
    .btn-secondary {
        width: 100%;
    }
    table {
        min-width: 620px;
    }
}