/* ---------- Tokens ----------
   The ground is the sky over the hilltop at dusk: indigo running into
   deep teal. Brass gold, the colour of the desk bell, means "act here"
   or "you are here" and nothing else. The rest of the colour belongs to
   the tickets, which are printed on coloured stock by status, the way
   the copies of a paper work order are. */
:root {
    --navy: #2c318f;
    --navy-dark: #1a1c4f;
    --gold: #e6b53c;
    --gold-dark: #b98b1d;

    /* Ticket stock, one colour per status */
    --stock-open: #cfe4fb;
    --stock-assigned: #fbefae;
    --stock-in_progress: #ffd6a3;
    --stock-resolved: #c9ecd3;
    --stock-closed: #e3e4ec;
    --stock-ran-out: #ffcfca;
    /* The page is dark, so the eye rests. Content sits on soft-white
       sheets, a little off pure white so they do not glare against it. */
    --ground: linear-gradient(140deg, #201d5e 0%, #1b2d75 42%, #0f4d63 100%);
    --paper: #1b2d75;
    --bar: #121238;
    --on-page: #ffffff;
    --on-page-muted: #c3cbea;
    --sheet: #f7f7fb;
    --field: #ffffff;
    --rule: #c9cbe0;
    --rule-soft: #e3e4ef;
    --ink: #1b1d3a;
    --muted: #595d7b;

    --red: #b3261e;
    --red-tint: #fbe9e7;
    --amber: #a34a05;
    --amber-tint: #fdf0dc;
    --green: #1e7b34;
    --green-tint: #e4f3e7;
    --blue-tint: #e4e6fb;
    --grey-tint: #e9eaf2;
    --gold-tint: #fbf1cf;

    /* Names the older rules used, kept so nothing falls back to nothing */
    --white: var(--sheet);
    --line: var(--rule-soft);

    --font: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --display: "Zilla Slab", "Rockwell", Georgia, serif;

    --bar-height: 56px;
    --column: 1160px;
    /* Only things that float above the page cast a shadow */
    --shadow-float: 0 14px 34px rgba(5, 43, 110, 0.2);
}

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

.base-body {
    margin: 0;
    min-height: 100vh;
    background: var(--paper);
    background-image: var(--ground);
    background-attachment: fixed;
    color: var(--ink);
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.page {
    max-width: var(--column);
    margin: 0 auto;
    padding: calc(var(--bar-height) + 32px) 24px 72px;
}

h1, h2, h3 {
    font-family: var(--display);
    font-weight: 700;
    color: var(--navy-dark);
    line-height: 1.15;
    margin: 0;
}
h1 { font-size: 32px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }

p { margin: 0 0 12px; }
a { color: var(--navy); }

/* One focus ring everywhere, in two bands: the white one shows on the
   navy page, the navy one shows on a sheet */
:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 1px;
    box-shadow: 0 0 0 5px var(--navy);
    border-radius: 4px;
}

.skip-link {
    position: fixed;
    top: -60px;
    left: 12px;
    z-index: 100;
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 700;
    padding: 10px 14px;
    border-radius: 6px;
}
.skip-link:focus { top: 8px; }

/* User-typed text can be one long unbroken string. Wrap it wherever it
   is shown so it never widens the page. */
.card, .profile-card, .incident-col, .profile-incident, .team-panel,
.field-value, .detail-title, .tl-body, .pi-title, .notice, .calendar-table td,
.notification-text {
    overflow-wrap: anywhere;
    min-width: 0;
}
/* In a table, break a word only when it cannot fit its column at all */
.incident-table td { overflow-wrap: break-word; }

/* ---------- Top bar ---------- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--bar-height);
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    background: var(--bar);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    z-index: 50;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-right: 14px;
    color: #ffffff;
    text-decoration: none;
    font-family: var(--display);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
}
.brand svg { width: 30px; height: 30px; fill: var(--gold); flex-shrink: 0; }
.brand .brand-base { fill: #ffffff; }

.nav-links,
.nav-user-section {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-user-section { margin-left: auto; }

.logout-form { margin: 0; display: flex; }

/* A nav item is a quiet text link. The page you are on gets a gold bar
   along the bottom edge of the top bar. */
.navbar .nav-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #d9dcf5;
    font-family: var(--font);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.12s, color 0.12s;
}
.navbar .nav-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.navbar .nav-btn:hover { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.navbar .nav-btn[aria-current="page"] { color: #ffffff; font-weight: 700; }
.navbar .nav-btn[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -8px;
    height: 4px;
    background: var(--gold);
    border-radius: 3px 3px 0 0;
}

/* The one filled button in the bar: the thing this visitor most likely came to do */
.navbar .nav-cta {
    background: var(--gold);
    color: var(--navy-dark);
    font-weight: 700;
    margin-right: 6px;
}
.navbar .nav-cta:hover { background: #f0c95f; color: var(--navy-dark); }
/* On a phone the button says the same thing in one word, so Log out still fits */
.cta-short { display: none; }

.nav-avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    object-fit: cover;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ---------- Notifications ---------- */
.nav-notification-wrapper { position: relative; display: flex; align-items: center; }

.notification-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e5484d;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 9px;
    line-height: 1;
}

/* The bell's list is a short stack of ticket stubs. Each one carries
   the ticket number on a stub in the colour of what happened, then what
   happened, which ticket it is, and what to do about it. */
.notification-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(450px, calc(100vw - 24px));
    background: var(--sheet);
    border: 1px solid var(--rule);
    border-radius: 12px;
    box-shadow: var(--shadow-float);
    color: var(--ink);
    overflow: hidden;
    z-index: 60;
}
.notification-dropdown.active { display: flex; flex-direction: column; }

.notification-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 14px;
    background: #ffffff;
    border-bottom: 1px solid var(--rule-soft);
}
.notification-heading { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.notification-title {
    font-family: var(--display);
    font-weight: 700;
    font-size: 21px;
    line-height: 1.1;
    color: var(--navy-dark);
}
.notification-count { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.notification-read-all { margin: 0; }
/* A quiet text button: clearing the list is not the main thing to do here */
.notification-clear {
    margin-right: -8px;
    padding: 6px 8px;
    background: none;
    border: 0;
    border-radius: 6px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
    cursor: pointer;
}
.notification-clear:hover { background: var(--blue-tint); }

.notification-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: min(62vh, 540px);
    padding: 10px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
}

/* One notification. --stock is the stub's paper, --stub-ink what is printed on it. */
.notification-item {
    --stock: var(--stock-assigned);
    --stub-ink: var(--navy-dark);
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    flex: none;
    background: #ffffff;
    border: 1px solid var(--rule-soft);
    border-radius: 8px;
    color: inherit;
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.12s;
}
.notification-item:hover { border-color: var(--navy); }
.notification-item:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }

.notification-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 4px;
    background: var(--stock);
    border-right: 2px dashed rgba(27, 29, 58, 0.28);
    color: var(--stub-ink);
}
.notification-no { font-size: 11px; line-height: 1; opacity: 0.75; }
.notification-number { font-family: var(--display); font-size: 22px; font-weight: 700; line-height: 1; }

.notification-body { display: block; min-width: 0; padding: 11px 14px 12px; }
.notification-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.notification-kind { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--navy-dark); }
.notification-time {
    flex: none;
    font-size: 12.5px;
    color: var(--muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.notification-text { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink); }

/* The two lines the script lays a solver's message out in */
.notification-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
}
.notification-sev { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.notification-sev::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sev, #8a8fa8);
}
.notification-detail { display: block; margin-top: 5px; font-size: 13.5px; color: var(--muted); }

/* What happened decides the stub: the paper of the status the ticket is in,
   and red when its escalation ran out, as on the incident list */
.notification-escalated { --stock: var(--stock-in_progress); --stub-ink: #5e2a00; }
.notification-queued { --stock: var(--stock-open); }
.notification-work_started { --stock: var(--stock-in_progress); }
.notification-resolved { --stock: var(--stock-resolved); --stub-ink: #14532a; }
.notification-final_escalation,
.notification-administration { --stock: var(--red); --stub-ink: #ffffff; }
:is(.notification-final_escalation, .notification-administration) .notification-stub { border-right-color: rgba(255, 255, 255, 0.55); }
:is(.notification-final_escalation, .notification-administration) .notification-kind { color: var(--red); }

.notification-empty { padding: 34px 18px; text-align: center; color: var(--muted); font-size: 15px; }
.notification-foot {
    padding: 10px 18px;
    background: #ffffff;
    border-top: 1px solid var(--rule-soft);
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ---------- Small screens ---------- */
@media (max-width: 980px) {
    .brand-name { display: none; }
    .brand { margin-right: 4px; }
    .navbar { padding: 0 10px; gap: 2px; }
    .navbar .nav-btn { padding: 0 9px; }
    .nav-links .nav-label,
    .nav-user .nav-label,
    .nav-notification-btn .nav-label,
    .logout-btn .nav-label { display: none; }
}
@media (max-width: 640px) {
    /* On a phone the bell's list spans the screen instead of hanging off its edge */
    .notification-dropdown {
        position: fixed;
        top: calc(var(--bar-height) + 6px);
        left: 10px;
        right: 10px;
        width: auto;
    }
    .page { padding: calc(var(--bar-height) + 20px) 14px 56px; }
    h1 { font-size: 27px; }
    .navbar .nav-cta { padding: 0 10px; font-size: 14px; }
    .cta-long { display: none; }
    .cta-short { display: inline; }
}