/* ---------------------------------------------------------------------
   Acumen Release & Support Portal — app shell + page styling.
   Palette follows the mockup: dark navy sidebar, white cards, blue accent.
   --------------------------------------------------------------------- */

:root {
    --navy-950: #101a2c;
    --navy-900: #16213a;
    --navy-800: #1c2c4a;
    --navy-700: #27385c;
    --blue-600: #2f5fe0;
    --blue-500: #3b6cf0;
    --blue-100: #e8eefd;
    --green-600: #1a9e5c;
    --green-100: #e4f7ec;
    --red-600: #d6403f;
    --red-100: #fbe9e9;
    --amber-600: #c8860a;
    --amber-100: #fbf1de;
    --purple-600: #7c4fd6;
    --purple-100: #efe7fb;
    --grey-50: #f5f6f9;
    --grey-100: #eceef3;
    --grey-200: #dfe3ea;
    --grey-500: #7a8494;
    --grey-700: #475060;
    --grey-900: #1f2430;
    --card-radius: 10px;
    --shadow-card: 0 1px 2px rgba(16, 26, 44, 0.06), 0 1px 8px rgba(16, 26, 44, 0.04);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--grey-50);
    color: var(--grey-900);
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
    font-size: 14px;
}

a { color: var(--blue-600); text-decoration: none; }
a:hover { text-decoration: underline; }

.not-found { padding: 24px; }

/* ---------------------------------------------------------------- shell */

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

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

.app-content {
    flex: 1;
    padding: 24px 28px 40px;
    width: 100%;
}

/* --------------------------------------------------------------- sidebar */

.sidebar {
    width: 232px;
    flex: 0 0 232px;
    background: var(--navy-950);
    color: #cbd5f0;
    display: flex;
    flex-direction: column;
    padding: 18px 0 14px;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 20px 20px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #fff;
}

.brand-mark {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--blue-500);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.brand-name { flex: 1; }
.brand-chevron { opacity: 0.6; }

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    flex: 1;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    color: #aab6d4;
    font-size: 13.5px;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.sidebar-link:hover {
    background: var(--navy-800);
    color: #fff;
    text-decoration: none;
}

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

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 4px;
    border-top: 1px solid var(--navy-800);
    margin-top: 8px;
}

.user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12.5px;
    flex-shrink: 0;
}

.user-avatar--small { width: 30px; height: 30px; }

.user-name { font-size: 13px; font-weight: 600; color: #fff; }
.user-role { font-size: 11.5px; color: #8b96b8; }

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

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    background: #fff;
    border-bottom: 1px solid var(--grey-200);
}

.topbar-title { font-weight: 700; font-size: 15px; color: var(--grey-900); }

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-search {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--grey-100);
    border-radius: 8px;
    padding: 7px 12px;
    color: var(--grey-500);
    min-width: 260px;
}

.topbar-search input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: var(--grey-900);
}

.topbar-icon-btn {
    position: relative;
    border: none;
    background: transparent;
    color: var(--grey-500);
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: inline-flex;
}

.topbar-icon-btn:hover { background: var(--grey-100); }

.topbar-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    background: var(--red-600);
    color: #fff;
    font-size: 9.5px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 8px;
}

/* ------------------------------------------------------------- page bits */

.page-title {
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 18px;
    color: var(--grey-900);
}

.loading-text { color: var(--grey-500); }

.panel {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    padding: 18px 20px;
    margin-bottom: 18px;
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 14px;
    color: var(--grey-900);
}

.panel-header-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--grey-500);
    background: var(--grey-100);
    padding: 4px 10px;
    border-radius: 999px;
}

/* -------------------------------------------------------- summary cards */

.summary-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 18px;
}

/* Six cards on one row (Pipelines) so Original Estimate and Time Entered sit side by side. */
.summary-row--six {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.summary-card {
    background: #fff;
    border-radius: var(--card-radius);
    box-shadow: var(--shadow-card);
    padding: 16px 18px;
}

.summary-card-label {
    font-size: 12.5px;
    color: var(--grey-500);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.summary-card-value {
    font-size: 28px;
    font-weight: 700;
    margin-top: 6px;
    color: var(--grey-900);
}

.summary-card-sub {
    font-size: 12px;
    color: var(--grey-500);
    margin-top: 2px;
}

.trend-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.trend-up { color: var(--green-600); }
.trend-down { color: var(--red-600); }

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

.dashboard-charts-row {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 18px;
}

/* State, Priority and Time Allocated sit side by side. */
.dashboard-charts-row--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Full-width row for grids. */
.dashboard-full-row {
    display: block;
    width: 100%;
}
.dashboard-full-row .portal-grid { width: 100%; }

.dashboard-lower-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 18px;
}

.doughnut-wrap {
    position: relative;
    height: 240px;
}

.doughnut-chart, .bar-chart {
    height: 260px;
    width: 100%;
    overflow: hidden;
}

.doughnut-center {
    position: absolute;
    top: 50%;
    left: 38%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.doughnut-center-value { font-size: 24px; font-weight: 700; }
.doughnut-center-label { font-size: 11.5px; color: var(--grey-500); }

/* ---------------------------------------------------------- activity feed */

.activity-feed {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Icon | text | created | touches | when - a light grid so the columns line up. */
.activity-item {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr) 92px 62px 92px;
    align-items: center;
    gap: 10px;
    font-size: 13px;
}

.activity-item--head {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--grey-500);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--grey-200, #e6e8ec);
}

.activity-item .num { text-align: right; font-variant-numeric: tabular-nums; }
.activity-created { color: var(--grey-700, #444c58); font-size: 12px; white-space: nowrap; }
.activity-touches { color: var(--grey-900); }

a.activity-icon--link { text-decoration: none; cursor: pointer; transition: filter 0.12s ease; }
a.activity-icon--link:hover { filter: brightness(0.92); outline: 2px solid currentColor; outline-offset: 1px; }

.activity-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon--statuschange { background: var(--blue-100); color: var(--blue-600); }
.activity-icon--ticketlink { background: var(--amber-100); color: var(--amber-600); }
.activity-icon--deployment { background: var(--green-100); color: var(--green-600); }
.activity-icon--featureswitch { background: var(--purple-100); color: var(--purple-600); }

.activity-text { min-width: 0; color: var(--grey-900); overflow: hidden; text-overflow: ellipsis; }
.activity-time { color: var(--grey-500); font-size: 12px; white-space: nowrap; }

/* -------------------------------------------------------------- tables */

.simple-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.simple-table th {
    text-align: left;
    color: var(--grey-500);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 6px 4px 10px;
    border-bottom: 1px solid var(--grey-200);
}

.simple-table td {
    padding: 9px 4px;
    border-bottom: 1px solid var(--grey-100);
    color: var(--grey-900);
}

.simple-table tr:last-child td { border-bottom: none; }

/* --------------------------------------------------------- release centre */

.release-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.release-version-picker {
    display: flex;
    align-items: center;
    gap: 10px;
}

.release-version-picker label {
    font-size: 12.5px;
    color: var(--grey-500);
    font-weight: 600;
}

.version-select, .move-select {
    border: 1px solid var(--grey-200);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    background: #fff;
    color: var(--grey-900);
}

.release-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.release-actions--secondary { margin-top: 4px; }

.release-grid-footer {
    display: flex;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 1px solid var(--grey-200);
    font-size: 12.5px;
    color: var(--grey-500);
    font-weight: 600;
}

/* ------------------------------------------------------------------ btns */

.btn {
    border: none;
    border-radius: 8px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.12s ease, background-color 0.12s ease;
}

.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--blue-600); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--blue-500); }

.btn-secondary { background: var(--grey-100); color: var(--grey-900); }
.btn-secondary:hover:not(:disabled) { background: var(--grey-200); }

.btn-success { background: var(--green-600); color: #fff; }
.btn-success:hover:not(:disabled) { opacity: 0.9; }

/* ------------------------------------------------------------------ pills */

.type-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.type-pill--bug { background: var(--red-100); color: var(--red-600); }
.type-pill--task { background: var(--blue-100); color: var(--blue-600); }
.type-pill--feature { background: var(--purple-100); color: var(--purple-600); }

.status-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
}

.status-badge--closed { background: var(--green-100); color: var(--green-600); }
.status-badge--resolved { background: var(--blue-100); color: var(--blue-600); }
.status-badge--in-progress { background: var(--amber-100); color: var(--amber-600); }
.status-badge--open { background: var(--grey-100); color: var(--grey-700); }
.status-badge--warning { background: var(--amber-100); color: var(--amber-600); }
.status-badge--default { background: var(--grey-100); color: var(--grey-700); }

.external-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ----------------------------------------------------------------- misc */

.toast {
    position: fixed;
    bottom: 24px;
    right: 28px;
    background: var(--navy-950);
    color: #fff;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 13px;
    box-shadow: 0 4px 16px rgba(16, 26, 44, 0.25);
}

.not-built-panel { color: var(--grey-500); }
.not-built-sub { font-size: 12.5px; margin-top: 6px; }

/* --------------------------------------------------------------- mobile */

@media (max-width: 1100px) {
    .summary-row, .summary-row--six { grid-template-columns: repeat(2, 1fr); }
    .dashboard-charts-row, .dashboard-charts-row--three, .dashboard-lower-row { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .sidebar { display: none; }
    .summary-row, .summary-row--six { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------------
   DevExpress icon sizing fallback.

   DevExpress renders its chevrons, expanders and editor buttons as inline SVG
   with no intrinsic size - the theme stylesheet is what constrains them. If
   that stylesheet fails to load, every icon renders at the container's full
   size, which is where the giant arrows came from.

   These rules are scoped to DevExpress elements (dxbl-* classes) and are a
   safety net only: when the theme loads correctly it sizes the icons itself
   and these do no harm.
   --------------------------------------------------------------------------- */
/* Charts are also inline SVG inside dxbl-* elements, so they are excluded here - the chart
   sizes its own SVG from the Width/Height parameters and must not be touched by CSS. */
[class^="dxbl-"] svg:not(.pie-wrap svg):not(.bar-chart svg):not([class*="dxbl-chart"] svg):not([class*="dxbl-pie"] svg),
[class*=" dxbl-"] svg:not(.pie-wrap svg):not(.bar-chart svg):not([class*="dxbl-chart"] svg):not([class*="dxbl-pie"] svg) {
    width: 1rem;
    height: 1rem;
    flex: 0 0 auto;
}

/* Detail-row expand/collapse and grid command icons sit slightly smaller. */
[class^="dxbl-grid"] .dxbl-grid-detail-cell svg,
[class*=" dxbl-grid"] .dxbl-grid-detail-cell svg {
    width: 0.875rem;
    height: 0.875rem;
}


/* ---------------------------------------------------------------------------
   Shared grid styling (.portal-grid)

   The DevExpress theme does the heavy lifting; these rules only add the quiet
   polish the demos have - a light container, restrained header, roomier rows
   and clear numeric alignment. Kept deliberately small so theme updates keep
   working.
   --------------------------------------------------------------------------- */
.portal-grid {
    border: 1px solid var(--grey-200, #e6e8ec);
    border-radius: 8px;
    overflow: hidden;
    font-size: 13px;
}

/* Header: subtle tint, no shouting. */
.portal-grid .dxbl-grid-header-content,
.portal-grid thead th {
    background-color: #fafbfc;
    font-weight: 600;
    color: var(--grey-900, #24292f);
    letter-spacing: 0.01em;
}

/* Rows: horizontal separators only - vertical gridlines are what make a grid
   look busy. */
.portal-grid td {
    border-left: none !important;
    border-right: none !important;
    padding-top: 9px;
    padding-bottom: 9px;
}

.portal-grid th {
    border-left: none !important;
    border-right: none !important;
}

.portal-grid tbody tr:hover td {
    background-color: #f6f9ff;
}

/* Nested (master-detail) grids sit inset and slightly quieter. */
.portal-grid--nested {
    border-color: var(--grey-200, #eceef1);
    background-color: #fcfcfd;
}

/* Numeric columns read better right-aligned and tabular. */
.portal-grid .dxbl-grid-text-align-end,
.portal-grid td[style*="text-align: right"] {
    font-variant-numeric: tabular-nums;
}

/* Action buttons inside cells should not inflate row height. */
.portal-grid td .btn-sm {
    padding: 2px 8px;
    font-size: 12px;
    line-height: 1.4;
}

/* Pie panels on the Dashboard. The old .doughnut-center overlay printed a total on top of a
   solid pie; the total now lives in the panel header instead. */
.pie-wrap {
    position: relative;
    height: 260px;
    overflow: hidden;
    padding: 6px 4px 10px;
}

/* The chart is drawn with InnerDiameter, so this sits in a genuine hole rather than on top of
   a solid pie - which is what the old .doughnut-center did. The legend is pinned right, so the
   plot area is centred nearer 38% than 50%. */
.donut-center {
    position: absolute;
    /* Legend now sits along the bottom, so the ring is horizontally centred and
       vertically centred on the plot area above the legend. */
    top: 44%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.donut-center-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--grey-900, #24292f);
}

.donut-center-label {
    font-size: 11.5px;
    color: var(--grey-500, #5b6470);
}

.pie-chart {
    height: 250px;
    width: 100%;
}

/* Time-entry detail grid inside the Dashboard's Open Bugs grid. */
.time-entries-grid {
    margin: 4px 0 8px;
    font-size: 13px;
}

/* Aged-ticket list can run long; keep the panel in line with Recent Activity and scroll. */
.activity-feed--scroll {
    max-height: 420px;
    overflow-y: auto;
    padding-right: 6px;
}

/* ---------------------------------------------------------------- Desk Reports */

/* Indented child links under Reports (Team Analysis, ZenDesk Trends). */
.sidebar-link.sidebar-sublink {
    padding: 8px 12px 8px 32px;
    font-size: 13px;
}

.report-group-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--grey-900, #24292f);
    margin: 8px 0 12px;
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.report-group-source {
    font-size: 12px;
    font-weight: 500;
    color: var(--grey-500, #5b6470);
}

.pie-wrap--empty {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Donut with a vertical legend alongside (Team Analysis). */
.donut-side {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 230px;
}

.donut-side-chart {
    position: relative;
    flex: 0 0 55%;
    max-width: 240px;
    height: 220px;
    overflow: hidden;
}

.donut-side-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    min-width: 0;
    max-height: 220px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 12.5px;
}

.donut-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.donut-legend-swatch {
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.donut-legend-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--grey-900, #24292f);
}

.donut-legend-count {
    color: var(--grey-500, #5b6470);
    font-variant-numeric: tabular-nums;
}

/* Zendesk ticket status and priority (Tickets screen). */
/* Zendesk's own status colours (New orange, Open red, Pending blue, Solved grey); Hold is our purple. */
.ticket-status--new     { background: #fff0db; color: #a35a00; }
.ticket-status--open    { background: #fae1e3; color: #cc3340; }
.ticket-status--pending { background: #e1eefc; color: #1f73c9; }
.ticket-status--hold    { background: #efe6f8; color: #6b3fa0; }
.ticket-status--solved  { background: #eceef0; color: #5f6a75; }
.ticket-status--default { background: var(--grey-100); color: var(--grey-700); }

.ticket-priority { font-weight: 500; }
.ticket-priority--urgent { color: var(--red-600); font-weight: 700; }
.ticket-priority--high   { color: var(--red-600); }
.ticket-priority--normal { color: var(--blue-600); }
.ticket-priority--low,
.ticket-priority--default { color: var(--grey-900); }

/* ---------------------------------------------------------------- ZenDesk Trends */

.summary-row--five {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1100px) {
    .summary-row--five { grid-template-columns: repeat(2, 1fr); }
}

.year-toggles {
    display: inline-flex;
    gap: 4px;
}

.year-toggle {
    border: 1px solid var(--grey-200, #e6e8ec);
    background: #fff;
    color: var(--grey-500, #5b6470);
    border-radius: 6px;
    padding: 3px 10px;
    font-size: 12px;
    cursor: pointer;
}

.year-toggle--on {
    background: var(--grey-100, #f1f3f5);
    color: var(--grey-900, #1f2430);
    font-weight: 600;
}

.trend-tooltip {
    padding: 6px 8px;
    font-size: 12.5px;
    line-height: 1.5;
}

.trend-tooltip-title {
    font-weight: 700;
    margin-bottom: 2px;
}

.muted-range {
    font-size: 12.5px;
    color: var(--grey-500, #5b6470);
}

/* Dashboard: title with sync status and Full reload button. */
.dashboard-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.sync-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sync-last {
    font-size: 12.5px;
    color: var(--grey-500, #5b6470);
}

.sync-message {
    margin: 0 0 14px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.sync-message--ok { background: var(--green-100); color: var(--green-600); }
.sync-message--error { background: var(--red-100); color: var(--red-600); }

/* ---------------------------------------------------------------- Data Sync */

.sync-actions {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.sync-action {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 16px;
    align-items: start;
}

.sync-action .btn { width: 100%; }

.sync-action-help {
    font-size: 13px;
    color: var(--grey-700, #444c58);
    line-height: 1.5;
    padding-top: 4px;
}

.sync-last-run {
    font-size: 13px;
    color: var(--grey-700, #444c58);
    margin: 0 0 10px;
}

.sync-steps .num { text-align: right; }
.sync-step-message { font-size: 12px; color: var(--red-600); }

.sync-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
}
.sync-status--succeeded { background: var(--green-100); color: var(--green-600); }
.sync-status--failed { background: var(--red-100); color: var(--red-600); }
.sync-status--none { background: var(--grey-100); color: var(--grey-700); }

a.sync-last { text-decoration: none; }
a.sync-last:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- Client Portal: login */

.login-shell {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, var(--navy-950), var(--navy-800));
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 32px 32px 24px;
}

.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 22px;
}

.login-brand-name { font-weight: 700; font-size: 16px; color: var(--grey-900); }

.login-title { font-size: 20px; font-weight: 700; margin: 0 0 6px; }
.login-help { color: var(--grey-500); font-size: 13px; margin: 0 0 18px; line-height: 1.5; }

.login-form { display: flex; flex-direction: column; gap: 6px; }
.login-form label { font-size: 12.5px; font-weight: 600; color: var(--grey-700); margin-top: 8px; }
.login-form .form-control { padding: 9px 12px; border-radius: 8px; }
.login-code { font-family: Consolas, monospace; font-size: 20px; letter-spacing: 6px; text-align: center; }
.login-validation, .login-form .validation-message { color: var(--red-600); font-size: 12px; }

.login-button { margin-top: 16px; padding: 10px; border-radius: 8px; font-weight: 600; }

.login-error, .login-info {
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 12px;
}
.login-error { background: var(--red-100); color: var(--red-600); }
.login-info { background: var(--green-100); color: var(--green-600); }

.login-resend { margin-top: 16px; font-size: 12.5px; color: var(--grey-500); }
.login-resend .btn-link { padding: 0; font-size: 12.5px; vertical-align: baseline; }

.topbar-org { font-size: 12.5px; color: var(--grey-500); margin-right: 10px; }

.change-password-panel { max-width: 460px; }

/* Priority as a coloured badge, matching the Status badges. */
.status-badge.ticket-priority--urgent { background: var(--red-100); color: #b3261e; font-weight: 700; }
.status-badge.ticket-priority--high   { background: var(--amber-100); color: var(--amber-600); }
.status-badge.ticket-priority--normal { background: var(--blue-100); color: var(--blue-600); }
.status-badge.ticket-priority--low,
.status-badge.ticket-priority--default { background: var(--grey-100); color: var(--grey-700); }

/* Client Portal doughnuts - 30% smaller than the main portal's (260px -> 182px). */
.pie-wrap.pie-wrap--small { height: 182px; padding: 4px 4px 6px; }
.pie-wrap--small .donut-center-value { font-size: 20px; }
.pie-wrap--small .donut-center-label { font-size: 10.5px; }

/* Current Tickets: KPI card then the three doughnuts in one row; legends on the right. */
.ct-top-row { display: grid; grid-template-columns: 200px repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; align-items: stretch; }
.ct-top-row > .panel { margin-bottom: 0; }
/* With the legend on the right the ring sits in the left part of the chart, so move the total there. */
.pie-wrap--small .donut-center { left: 32%; top: 50%; }
@media (max-width: 1300px) { .ct-top-row { grid-template-columns: 200px repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ct-top-row { grid-template-columns: 1fr; } }
.donut-tip { padding: 2px 4px; font-size: 12.5px; }
.donut-tip-label { font-weight: 600; color: var(--grey-900); }
.donut-tip-value { color: var(--grey-700); }

/* Doughnut + own legend: fixed ring box so the total is always centred in the hole. */
.donut-row { display: flex; align-items: center; gap: 16px; padding: 4px 4px 8px; }
.donut-box { position: relative; width: 150px; height: 150px; flex: 0 0 150px; }
.donut-box-centre { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.donut-box-centre .donut-center-value { font-size: 20px; }
.donut-box-centre .donut-center-label { font-size: 10.5px; }
.donut-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; min-width: 0; }
.donut-legend li { display: flex; align-items: center; gap: 7px; color: var(--grey-900); overflow-wrap: anywhere; }
.donut-swatch { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; }
/* Current Tickets KPI: number centred in the card (label stays at the top, Zendesk under the number). */
.ct-top-row > .summary-card { display: flex; flex-direction: column; }
.ct-top-row > .summary-card .summary-card-value { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.ct-top-row > .summary-card .summary-card-sub { text-align: center; }
/* Two KPI cards stacked in the first column. */
.ct-kpis { display: flex; flex-direction: column; gap: 16px; }
.ct-kpis > .summary-card { flex: 1 1 0; display: flex; flex-direction: column; margin-bottom: 0; }
.ct-kpis > .summary-card .summary-card-value { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; font-size: 34px; }
.ct-kpis > .summary-card .summary-card-sub { text-align: center; }
/* Clickable KPI cards: the selected one is highlighted and drives the charts. */
.summary-card--clickable { cursor: pointer; border: 2px solid transparent; transition: border-color .15s, background-color .15s; user-select: none; }
.summary-card--clickable:hover { border-color: var(--grey-200, #dde2e8); }
.summary-card--clickable:focus-visible { outline: 2px solid #2f5fe0; outline-offset: 2px; }
.summary-card--selected { border-color: #2f5fe0; background: #eef3fd; }
.summary-card--selected .summary-card-label, .summary-card--selected .summary-card-value { color: #1d4ed8; }
.summary-card-hint { font-size: 11px; color: var(--grey-500); }
.summary-card-sep { margin: 0 4px; color: var(--grey-500); }
.summary-card--clickable:not(.summary-card--selected) .summary-card-hint { color: #2f5fe0; text-decoration: underline; text-underline-offset: 2px; }
.summary-card--selected .summary-card-hint { color: #1d4ed8; font-weight: 600; }

/* Compact header row on Current Tickets (about 25% shorter) so more grid rows fit on screen. */
.ct-top-row { gap: 12px; margin-bottom: 12px; }
.ct-top-row > .panel { padding: 10px 14px; }
.ct-top-row > .panel .panel-header { font-size: 13px; margin-bottom: 4px; }
.ct-top-row .donut-row { gap: 12px; padding: 0 2px 2px; }
.ct-top-row .donut-legend { gap: 4px; font-size: 12px; }
.ct-top-row .donut-swatch { width: 10px; height: 10px; flex-basis: 10px; }
.ct-kpis { gap: 10px; }
.ct-kpis > .summary-card { padding: 8px 12px; }
.ct-kpis > .summary-card .summary-card-label { font-size: 10.5px; letter-spacing: 0; line-height: 1.25; }
.ct-kpis > .summary-card .summary-card-value { font-size: 26px; margin-top: 2px; }
.ct-kpis > .summary-card .summary-card-sub { font-size: 11px; margin-top: 0; }
.ct-kpis > .summary-card .summary-card-hint { font-size: 11px; }
.ct-kpis > .summary-card .summary-card-sub { white-space: nowrap; }

/* Status / Priority as slim segmented bars (TicketBar), as on SupportPortal's Zendesk Tickets screen. */
.ct-bars { display: flex; flex-direction: column; gap: 12px; }
.tb { display: flex; flex-direction: column; gap: 6px; }
.tb-title { font-size: 12.5px; font-weight: 600; color: var(--grey-700); }
.tb-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--grey-100); }
.tb-seg { display: block; height: 100%; min-width: 3px; }
.tb-seg + .tb-seg { border-left: 2px solid #fff; }
.tb-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; }
.tb-legend li { display: flex; align-items: center; gap: 6px; color: var(--grey-900); white-space: nowrap; }
.tb-legend b { font-weight: 600; color: var(--grey-700); }
.tb-empty { font-size: 13px; color: var(--grey-700); }

/* Page title with its caption on the same line (Current Support Items). */
.page-title-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin: 4px 0 12px; }
.page-title-row .page-title { margin: 0; }
.page-title-row .page-description { margin: 0; }