/* ===================================================================
   Astratek - Site Stylesheet
   The Astratek palette is set once, in :root below, and used everywhere
   from there. No colour is written anywhere else in this file.

   The type is Open Sans, on Leon's word of 20 September 2026, in place
   of the Montserrat the portal started with. PDFs stay on Calibri,
   because wkhtmltopdf uses the fonts installed on the machine.
   =================================================================== */

/* Open Sans is served from the portal, never from Google's servers. */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../lib/fonts/open-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300 800;
    font-display: swap;
    src: url('../lib/fonts/open-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Type. Open Sans throughout, with the system font behind it if it ever fails to load. */
    --astra-font: 'Open Sans', 'Segoe UI', Helvetica, Arial, sans-serif;

    /* The Astratek palette, from www.astratek.co */
    --astra-navy: #040922;            /* headings, menu text, table headers */
    --astra-raspberry: #C33166;       /* primary buttons, links, the active menu item */
    --astra-raspberry-dark: #A3264F;  /* hover and pressed state of the above */
    --astra-green: #719977;           /* status dots only, never text */
    --astra-yellow: #DFC328;          /* status dots only, never text */

    --astra-grey-bg: #EBEEF1;         /* page background */
    --astra-text: #494949;            /* body text */

    /* The thin stripe under the header: the three brand colours, softened so the line
       sits quietly under the menu instead of shouting across the page. */
    --astra-stripe-green: #A3BCA6;
    --astra-stripe-raspberry: #D8799C;
    --astra-stripe-yellow: #EAD873;

    /* Supporting shades */
    --astra-white: #FFFFFF;
    --astra-raspberry-tint: #FBEFF3;  /* table row hover */
    --astra-raspberry-focus: rgba(195, 49, 102, 0.35);
    --astra-border: #D0D4DA;
    --astra-row-border: #E8EAED;
    --astra-card-border: #DEE2E6;
    --astra-muted: #6C757D;
    --astra-secondary-bg: #F0F0F0;
    --astra-secondary-bg-hover: #E0E0E0;
    --astra-secondary-bg-active: #D4D4D4;
    --astra-secondary-border: #CCCCCC;
    --astra-secondary-border-hover: #ADADAD;
    --astra-danger: #D9534F;
    --astra-danger-border: #D43F3A;
    --astra-danger-dark: #C9302C;
    --astra-danger-dark-border: #AC2925;
    --astra-red: #C0392B;             /* figures over budget, overdue days */
    --astra-red-dark: #922B21;
    --astra-amber-text: #8A5A00;      /* warning text, readable on white */
    --astra-amber-bg: #FFF4DB;
    --astra-amber-border: #F0C36D;
    --astra-group-bg: #F4F6F8;        /* group heading rows in the ECC */
    --astra-total-bg: #E4E8ED;        /* totals rows in the ECC */
    --astra-shadow: rgba(4, 9, 34, 0.08);
    --astra-shadow-strong: rgba(4, 9, 34, 0.18);

    /* The shape of every card, panel and table on a page. One hairline, one corner, one
       soft lift, so the pages read as paper rather than boxes drawn inside boxes. */
    --astra-line: #E6E9EE;
    --astra-radius: 8px;
    --astra-radius-sm: 6px;
    --astra-card-lift: 0 1px 2px rgba(4, 9, 34, 0.04), 0 2px 6px rgba(4, 9, 34, 0.05);
    --astra-card-lift-hover: 0 2px 4px rgba(4, 9, 34, 0.05), 0 6px 16px rgba(4, 9, 34, 0.08);

    /* The dark menu, set under Configure, Layout */
    --astra-navy-mid: #0D1738;        /* the softer end of the dark menu */
    --astra-on-dark: rgba(255, 255, 255, 0.82);       /* words on the dark menu */
    --astra-on-dark-soft: rgba(255, 255, 255, 0.65);  /* the role under the name */
    --astra-on-dark-hover: rgba(255, 255, 255, 0.10); /* hover on the dark menu */
    --astra-on-dark-line: rgba(255, 255, 255, 0.16);  /* lines and the fold button */
    --astra-on-dark-line-hover: rgba(255, 255, 255, 0.22);
    --astra-scrim: rgba(4, 9, 34, 0.5);               /* behind the menu on a small screen */

    /* The menu down the side */
    --astra-side-w: 240px;
    --astra-rail-w: 66px;
}

/* --- Header --- */
.navbar-portal {
    background-color: var(--astra-white);
    padding-top: 0;
    padding-bottom: 0;
    min-height: 56px;
    box-shadow: 0 1px 3px var(--astra-shadow);
}

.navbar-portal-brand {
    padding: 8px 20px 8px 0;
    display: flex;
    align-items: center;
}

.navbar-portal-brand img {
    height: 34px;
    width: auto;
}

.navbar-portal-link {
    color: var(--astra-navy) !important;
    font-size: 0.9rem;
    font-weight: 500;
    padding: 17px 12px 15px 12px !important;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
}

.navbar-portal-link:hover,
.navbar-portal-link:focus {
    color: var(--astra-raspberry) !important;
}

.navbar-portal-link.active {
    color: var(--astra-raspberry) !important;
    border-bottom: 2px solid var(--astra-raspberry);
}

.navbar-portal .navbar-toggler {
    border-color: var(--astra-border);
}

.navbar-portal-dropdown {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-border);
    border-radius: 4px;
    min-width: 180px;
    padding: 4px 0;
    margin-top: 0 !important;
    box-shadow: 0 4px 12px var(--astra-shadow);
}

.navbar-portal-dropdown-item {
    color: var(--astra-navy) !important;
    font-size: 0.875rem;
    padding: 8px 16px;
}

.navbar-portal-dropdown-item:hover,
.navbar-portal-dropdown-item:focus {
    color: var(--astra-navy) !important;
    background-color: var(--astra-grey-bg);
}

.navbar-portal-dropdown-item.active {
    color: var(--astra-raspberry) !important;
    background-color: transparent;
}

.navbar-portal-dropdown .dropdown-divider {
    border-color: var(--astra-border);
}

/* The thin brand stripe under the header: green, raspberry, yellow, kept soft */
.brand-stripe {
    display: flex;
    height: 2px;
    width: 100%;
}

.brand-stripe span {
    flex: 1;
}

.brand-stripe .stripe-green {
    background-color: var(--astra-stripe-green);
}

.brand-stripe .stripe-raspberry {
    background-color: var(--astra-stripe-raspberry);
}

.brand-stripe .stripe-yellow {
    background-color: var(--astra-stripe-yellow);
}

/* --- Base --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 15px;
    }
}

body {
    margin-bottom: 60px;
    font-family: var(--astra-font);
    background-color: var(--astra-grey-bg);
    color: var(--astra-text);
}

h1, h2, h3, h4, h5, h6,
.card-title {
    color: var(--astra-navy);
    font-family: var(--astra-font);
    font-weight: 600;
}

h4 {
    font-size: 1.3rem;
}

/* --- Links --- */
a {
    color: var(--astra-raspberry);
}

a:hover {
    color: var(--astra-raspberry-dark);
}

/* --- Focus Styles --- */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem var(--astra-white), 0 0 0 0.25rem var(--astra-raspberry-focus);
}

.form-control, .form-select {
    border-color: var(--astra-border);
    border-radius: var(--astra-radius-sm);
}

.form-control:focus, .form-select:focus {
    border-color: var(--astra-raspberry);
}

.col-form-label {
    color: var(--astra-muted);
    font-weight: 500;
}

.form-check-input:checked {
    background-color: var(--astra-raspberry);
    border-color: var(--astra-raspberry);
}

/* --- Buttons --- */
/* Primary button: the main action on the page (1 Primary, rest Secondary) */
.btn-primary {
    color: var(--astra-white);
    background-color: var(--astra-raspberry);
    border-color: var(--astra-raspberry);
}

.btn-primary:hover {
    color: var(--astra-white);
    background-color: var(--astra-raspberry-dark);
    border-color: var(--astra-raspberry-dark);
}

.btn-primary:active, .btn-primary:focus, .btn-primary:disabled {
    color: var(--astra-white);
    background-color: var(--astra-raspberry-dark);
    border-color: var(--astra-raspberry-dark);
}

/* Secondary button: all other actions */
.btn-secondary {
    color: var(--astra-navy);
    background-color: var(--astra-secondary-bg);
    border-color: var(--astra-secondary-border);
}

.btn-secondary:hover {
    color: var(--astra-navy);
    background-color: var(--astra-secondary-bg-hover);
    border-color: var(--astra-secondary-border-hover);
}

.btn-secondary:active, .btn-secondary:focus {
    color: var(--astra-navy);
    background-color: var(--astra-secondary-bg-active);
    border-color: var(--astra-secondary-border-hover);
}

/* Danger button */
.btn-danger {
    color: var(--astra-white);
    background-color: var(--astra-danger);
    border-color: var(--astra-danger-border);
}

.btn-danger:hover {
    color: var(--astra-white);
    background-color: var(--astra-danger-dark);
    border-color: var(--astra-danger-dark-border);
}

.btn {
    border-radius: var(--astra-radius-sm);
    font-weight: 500;
}

/* Button transition for smooth hover effect */
.btn {
    transition: all 0.2s ease-in-out;
}

/* --- Layout --- */
.border-top {
    border-top: 1px solid var(--astra-row-border);
}

.border-bottom {
    border-bottom: 1px solid var(--astra-row-border);
}

.box-shadow {
    box-shadow: 0 .25rem .75rem var(--astra-shadow);
}

.footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    white-space: nowrap;
    line-height: 60px;
    font-size: 0.85rem;
}

/* --- Navbar --- */
.navbar-brand {
    white-space: normal;
    display: flex;
    align-items: center;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: var(--astra-white);
    background-color: var(--astra-raspberry);
    border-color: var(--astra-raspberry);
}

/* Tabs: the active tab is underlined in raspberry */
.nav-tabs {
    border-bottom: 1px solid var(--astra-line);
    gap: 2px;
}

.nav-tabs .nav-link {
    color: var(--astra-muted);
    font-weight: 500;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
}

.nav-tabs .nav-link:hover {
    color: var(--astra-navy);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    color: var(--astra-raspberry);
    background-color: transparent;
    border: none;
    border-bottom: 2px solid var(--astra-raspberry);
}

/* --- Tables --- */
.table {
    font-size: 0.82rem;
    border-collapse: collapse;
    margin-bottom: 0;
    background-color: var(--astra-white);
}

/* Table header: navy, bold, tight */
.table thead th {
    background-color: var(--astra-navy);
    color: var(--astra-white);
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border: none;
    padding: 10px 12px;
    vertical-align: middle;
    white-space: nowrap;
}

.table thead th a {
    color: var(--astra-white);
    text-decoration: none;
}

.table thead th a:hover {
    color: var(--astra-raspberry-tint);
    text-decoration: underline;
}

/* Body rows: compact, clean */
.table tbody td {
    padding: 9px 12px;
    vertical-align: middle;
    border-top: 1px solid var(--astra-line);
    border-bottom: none;
    color: var(--astra-text);
}

/* Stripe: disabled, all rows white */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
    background-color: var(--astra-white);
}

/* Hover: a very light raspberry tint */
.table-hover > tbody > tr:hover > * {
    background-color: var(--astra-raspberry-tint) !important;
    color: var(--astra-navy);
}

/* Wrap the table for a card-like border */
.table-responsive,
.table-wrapper {
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    overflow: hidden;
    background-color: var(--astra-white);
}

/* A table inside a card or a window already has the card's frame around it, so it drops
   its own. Borders within borders make a page look boxed in. */
.page-section .table-wrapper,
.tab-body .table-wrapper,
.modal-body .table-wrapper {
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Sortable table styles */
.sortable th {
    cursor: pointer;
    position: relative;
    user-select: none;
}

.sortable th:hover {
    background-color: var(--astra-raspberry-dark);
}

.sortable th::after {
    content: '\2195';
    position: absolute;
    right: 8px;
    opacity: 0.35;
    font-size: 0.7rem;
}

.sortable th.sort-asc::after {
    content: '\2191';
    opacity: 1;
}

.sortable th.sort-desc::after {
    content: '\2193';
    opacity: 1;
}

/* No-sort column: hide the sort indicator */
.sortable th.no-sort {
    cursor: default;
}

.sortable th.no-sort:hover {
    background-color: var(--astra-navy);
}

.sortable th.no-sort::after {
    content: '';
}

/* --- Action Links in Tables --- */
.table-action-link {
    color: var(--astra-raspberry);
    text-decoration: none;
    font-size: 0.78rem;
    white-space: nowrap;
}

.table-action-link:hover {
    color: var(--astra-raspberry-dark);
    text-decoration: underline;
}

/* A posted action that looks the same as the text links beside it */
.table-action-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
}

.table-action-delete {
    color: var(--astra-red);
}

.table-action-delete:hover {
    color: var(--astra-red-dark);
}

/* A row you can click: the whole row opens the record, as the Open link does. */
.row-clickable {
    cursor: pointer;
}

/* --- Action Icons in Tables --- */
.action-icon {
    width: 18px;
    height: 18px;
    margin: 0 4px;
    opacity: 0.7;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
}

.action-icon:hover {
    opacity: 1;
    transform: scale(1.15);
}

/* --- Cards --- */
.card {
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    background-color: var(--astra-white);
}

/* --- Forms --- */
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* --- Alerts --- */
.alert {
    font-size: 0.9rem;
}

/* --- Login Page --- */
.login-container {
    max-width: 400px;
    margin: 0 auto;
}

.login-card {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    overflow: hidden;
    box-shadow: 0 10px 30px var(--astra-shadow);
}

.login-card .login-logo {
    max-width: 200px;
    height: auto;
}

/* --- Money and status --- */
.money {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.figure-over {
    color: var(--astra-red) !important;
    font-weight: 600;
}

.text-amber {
    color: var(--astra-amber-text) !important;
}

.note-amber {
    color: var(--astra-amber-text);
    background-color: var(--astra-amber-bg);
    border: 1px solid var(--astra-amber-border);
    border-radius: 4px;
    padding: 6px 10px;
    font-size: 0.85rem;
}

.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: middle;
}

.status-dot.dot-green {
    background-color: var(--astra-green);
}

.status-dot.dot-yellow {
    background-color: var(--astra-yellow);
}

.status-dot.dot-raspberry {
    background-color: var(--astra-raspberry);
}

.status-dot.dot-grey {
    background-color: var(--astra-muted);
}

/* --- Project summary strip --- */
.summary-strip {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    padding: 16px 20px;
}

.summary-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 28px;
    font-size: 0.85rem;
    color: var(--astra-muted);
    padding-bottom: 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--astra-line);
}

.summary-facts strong {
    color: var(--astra-navy);
    font-weight: 600;
}

.summary-figures {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 0;
}

.summary-figure {
    flex: 1 1 150px;
    padding: 0 18px;
    border-left: 1px solid var(--astra-line);
}

.summary-figure:first-child {
    padding-left: 0;
    border-left: none;
}

.summary-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--astra-muted);
    margin-bottom: 2px;
}

.summary-value {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--astra-navy);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.summary-note {
    font-size: 0.75rem;
    color: var(--astra-muted);
}

/* --- Dashboard cards --- */
.dash-card {
    display: block;
    height: 100%;
    background-color: var(--astra-white);
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    padding: 16px 20px;
    color: var(--astra-text);
    text-decoration: none;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

a.dash-card:hover {
    border-color: var(--astra-raspberry);
    box-shadow: var(--astra-card-lift-hover);
}

a.dash-card:hover {
    background-color: var(--astra-raspberry-tint);
    color: var(--astra-text);
}

.dash-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--astra-muted);
}

.dash-value {
    font-size: 1.8rem;
    font-weight: 600;
    color: var(--astra-navy);
    line-height: 1.2;
}

.dash-sub {
    font-size: 1rem;
    font-weight: 600;
    margin-left: 8px;
}

.dash-note {
    font-size: 0.8rem;
    color: var(--astra-muted);
}

/* --- The ECC grid --- */
/* Seven columns that fit the page, so the table needs no scrollbar of its own.
   Everything else about a line opens in a modal when the row is clicked. */
.ecc-grid td.ecc-description {
    min-width: 240px;
}

.ecc-grid tbody tr[data-row-modal] {
    cursor: pointer;
}

/* A Work Category heading: not a grey band but a rule across the table with the name in
   navy above it, so the eye reads the groups without another block of grey. */
.ecc-grid tr.ecc-group-row > td {
    background-color: var(--astra-white);
    color: var(--astra-navy);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.05em;
    border-top: 2px solid var(--astra-navy);
    padding-top: 14px;
    padding-bottom: 10px;
}

.ecc-grid tr.ecc-group-row:hover > * {
    background-color: var(--astra-white) !important;
}

.ecc-grid tr.ecc-total-row > td {
    background-color: var(--astra-total-bg);
    color: var(--astra-navy);
    font-weight: 700;
    border-top: 2px solid var(--astra-navy);
}

/* --- Documents on a record: the files kept with it, and the box to add one --- */
.doc-list {
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

.doc-item {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    padding: 10px 14px;
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius-sm);
    margin-bottom: 8px;
}

.doc-item + .doc-item {
    margin-top: 0;
}

.doc-name {
    font-weight: 500;
}

.doc-meta {
    font-size: 0.78rem;
    color: var(--astra-muted);
    margin-left: auto;
    white-space: nowrap;
}

.upload-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius-sm);
    background-color: var(--astra-white);
}

.upload-box .form-control {
    max-width: 360px;
}

.upload-box .form-text {
    flex-basis: 100%;
    margin: 0;
}

/* --- Everything about one record, in a modal --- */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.detail-card {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    padding: 14px 16px;
}

.detail-card h6 {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--astra-muted);
    border-bottom: 1px solid var(--astra-line);
    padding-bottom: 8px;
    margin-bottom: 12px;
}

.detail-card dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.85rem;
}

.detail-card dt {
    color: var(--astra-muted);
    font-weight: 400;
}

.detail-card dd {
    margin: 0;
    text-align: right;
    color: var(--astra-navy);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.detail-card .detail-strong {
    font-weight: 700;
    color: var(--astra-navy);
}

.badge-added {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--astra-white);
    background-color: var(--astra-raspberry);
    border-radius: 3px;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}

/* --- Read-only figures beside a form --- */
.figure-panel {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    padding: 16px 18px;
}

.figure-panel dl {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 12px;
    margin: 0;
    font-size: 0.85rem;
}

.figure-panel dt {
    font-weight: 400;
    color: var(--astra-muted);
}

.figure-panel dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--astra-navy);
    white-space: nowrap;
}

.form-section-title {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--astra-muted);
    border-bottom: 1px solid var(--astra-line);
    padding-bottom: 8px;
    margin: 18px 0 16px 0;
}

.page-section,
.tab-body {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-line);
    border-radius: var(--astra-radius);
    box-shadow: var(--astra-card-lift);
    padding: 18px 20px;
    margin-bottom: 16px;
}


/* ===================================================================
   Layout, set under Configure, Layout: the menu light or dark, along
   the top or down the side. The body carries astra-menu-light or
   astra-menu-dark, and astra-layout-top or astra-layout-side.
   =================================================================== */

/* The logo only ever sits on white, so on the dark menu it keeps a white plate. */
.brand-plate {
    display: inline-flex;
    align-items: center;
}

.astra-menu-dark .brand-plate {
    background-color: var(--astra-white);
    border-radius: 4px;
    padding: 5px 9px;
}

/* --- Dark Mode, the bar along the top --- */
.navbar-portal.navbar-portal-dark {
    background-color: var(--astra-navy);
    box-shadow: 0 2px 10px var(--astra-shadow-strong);
}

.navbar-portal-dark .navbar-portal-link {
    color: var(--astra-on-dark) !important;
}

.navbar-portal-dark .navbar-portal-link:hover,
.navbar-portal-dark .navbar-portal-link:focus {
    color: var(--astra-white) !important;
}

.navbar-portal-dark .navbar-portal-link.active {
    color: var(--astra-white) !important;
    border-bottom-color: var(--astra-raspberry);
}

.navbar-portal-dark .navbar-toggler {
    border-color: var(--astra-on-dark-line);
}

.navbar-portal-dark .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.82%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- Side Layout, the frame --- */
body.astra-layout-side {
    margin-bottom: 0;
}

.astra-layout-side .astra-shell {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
}

.astra-layout-side .astra-main {
    flex: 1 1 auto;
    min-width: 0;
    margin-left: var(--astra-side-w);
    position: relative;
    min-height: 100vh;
    padding-top: 1.5rem;
    padding-bottom: 64px;
    transition: margin-left 0.2s ease;
}

/* --- The side menu, Dark Mode first --- */
.astra-sidebar {
    width: var(--astra-side-w);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-direction: column;
    background: linear-gradient(170deg, var(--astra-navy) 0%, var(--astra-navy-mid) 100%);
    box-shadow: 2px 0 14px var(--astra-shadow-strong);
    /* Visible, so the Configure and name menus can open out of the foot. The list of
       items scrolls on its own. */
    overflow: visible;
    transition: width 0.2s ease;
}

/* The brand stripe runs down the edge of the menu instead of under the top bar. */
.astra-sidebar::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 2px;
    background: linear-gradient(180deg, var(--astra-stripe-green) 0%, var(--astra-stripe-green) 33%, var(--astra-stripe-raspberry) 33%, var(--astra-stripe-raspberry) 66%, var(--astra-stripe-yellow) 66%, var(--astra-stripe-yellow) 100%);
}

.astra-side-brand-row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 64px;
    padding: 12px 12px 12px 16px;
    flex-shrink: 0;
    position: relative;
    border-bottom: 1px solid var(--astra-on-dark-line);
}

.astra-side-brand {
    flex: 1;
    min-width: 0;
    padding: 0;
    text-decoration: none;
}

.astra-side-brand img {
    height: 28px;
    width: auto;
}

.astra-rail-toggle {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: var(--astra-on-dark-line);
    color: var(--astra-on-dark);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.astra-rail-toggle:hover {
    background-color: var(--astra-on-dark-line-hover);
    color: var(--astra-white);
}

.astra-rail-toggle svg {
    width: 15px;
    height: 15px;
    transition: transform 0.2s ease;
}

.astra-side-nav {
    flex: 1 1 auto;
    padding: 14px 10px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
}

.astra-side-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px;
    margin-bottom: 2px;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: var(--astra-on-dark);
    font-family: var(--astra-font);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.astra-side-item:hover,
.astra-side-item:focus-visible {
    background-color: var(--astra-on-dark-hover);
    color: var(--astra-white);
}

.astra-side-item.active,
.astra-side-item.active:hover {
    background-color: var(--astra-white);
    color: var(--astra-navy);
    font-weight: 600;
    box-shadow: 0 2px 10px var(--astra-shadow-strong);
}

.astra-side-item.active .astra-side-icon {
    color: var(--astra-raspberry);
    opacity: 1;
}

.astra-side-icon {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
    opacity: 0.85;
}

.astra-side-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
}

.astra-side-caret {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.55;
    transition: transform 0.18s ease;
}

[aria-expanded="true"] > .astra-side-caret {
    transform: rotate(180deg);
}

.astra-side-foot {
    flex-shrink: 0;
    padding: 8px 10px 12px;
}

.astra-side-configure {
    margin-bottom: 8px;
}

.astra-side-user {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 8px;
    border: none;
    border-top: 1px solid var(--astra-on-dark-line);
    background: transparent;
    text-align: left;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}

.astra-side-user:hover {
    background-color: var(--astra-on-dark-hover);
}

.astra-avatar {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    background-color: var(--astra-raspberry);
    color: var(--astra-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.astra-side-user-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.astra-side-user-name {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--astra-white);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.astra-side-user-role {
    display: block;
    font-size: 0.68rem;
    color: var(--astra-on-dark-soft);
}

/* The menus that open upward out of the foot. */
.astra-side-menu {
    min-width: 220px;
    max-height: calc(100vh - 140px);
    overflow-y: auto;
    border: 1px solid var(--astra-border);
    border-radius: 6px;
    box-shadow: 0 6px 20px var(--astra-shadow-strong);
    padding: 8px;
}

.astra-side-menu-head {
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--astra-muted);
    padding: 4px 10px 8px;
}

.astra-side-menu .dropdown-item {
    border-radius: 4px;
    font-size: 0.85rem;
    padding: 8px 10px;
    color: var(--astra-navy);
}

.astra-side-menu .dropdown-item:hover,
.astra-side-menu .dropdown-item:focus,
.astra-side-menu .dropdown-item.active {
    background-color: var(--astra-raspberry-tint);
    color: var(--astra-raspberry-dark);
}

.astra-side-menu .dropdown-item.active {
    font-weight: 600;
}

/* --- The side menu in Light Mode --- */
/* White, with a shadow down its edge and dark words. */
.astra-menu-light .astra-sidebar {
    background: var(--astra-white);
    box-shadow: 1px 0 0 var(--astra-border), 4px 0 18px var(--astra-shadow);
}

.astra-menu-light .astra-side-brand-row {
    border-bottom-color: var(--astra-border);
}

.astra-menu-light .astra-rail-toggle {
    background-color: var(--astra-grey-bg);
    color: var(--astra-muted);
}

.astra-menu-light .astra-rail-toggle:hover {
    background-color: var(--astra-border);
    color: var(--astra-navy);
}

.astra-menu-light .astra-side-item {
    color: var(--astra-text);
}

.astra-menu-light .astra-side-item:hover,
.astra-menu-light .astra-side-item:focus-visible {
    background-color: var(--astra-grey-bg);
    color: var(--astra-navy);
}

.astra-menu-light .astra-side-item.active,
.astra-menu-light .astra-side-item.active:hover {
    background-color: var(--astra-raspberry-tint);
    color: var(--astra-raspberry-dark);
    box-shadow: inset 3px 0 0 var(--astra-raspberry);
}

.astra-menu-light .astra-side-user {
    border-top-color: var(--astra-border);
}

.astra-menu-light .astra-side-user:hover {
    background-color: var(--astra-grey-bg);
}

.astra-menu-light .astra-side-user-name {
    color: var(--astra-navy);
}

.astra-menu-light .astra-side-user-role {
    color: var(--astra-muted);
}

/* --- Folded to its icons --- */
.astra-shell.astra-rail .astra-sidebar,
.astra-pre-collapsed .astra-sidebar {
    width: var(--astra-rail-w);
}

.astra-layout-side .astra-shell.astra-rail .astra-main,
.astra-pre-collapsed .astra-layout-side .astra-main {
    margin-left: var(--astra-rail-w);
}

/* The logo is a wide wordmark, so folded the menu shows the arrow on its own. */
.astra-shell.astra-rail .astra-side-brand,
.astra-shell.astra-rail .astra-side-label,
.astra-shell.astra-rail .astra-side-caret,
.astra-shell.astra-rail .astra-side-user-text,
.astra-pre-collapsed .astra-side-brand,
.astra-pre-collapsed .astra-side-label,
.astra-pre-collapsed .astra-side-caret,
.astra-pre-collapsed .astra-side-user-text {
    display: none;
}

.astra-shell.astra-rail .astra-side-brand-row,
.astra-pre-collapsed .astra-side-brand-row {
    justify-content: center;
    padding: 14px 8px 12px;
}

.astra-shell.astra-rail .astra-rail-toggle svg,
.astra-pre-collapsed .astra-rail-toggle svg {
    transform: rotate(180deg);
}

.astra-shell.astra-rail .astra-side-nav,
.astra-shell.astra-rail .astra-side-foot,
.astra-pre-collapsed .astra-side-nav,
.astra-pre-collapsed .astra-side-foot {
    padding-left: 8px;
    padding-right: 8px;
}

.astra-shell.astra-rail .astra-side-item,
.astra-shell.astra-rail .astra-side-user,
.astra-pre-collapsed .astra-side-item,
.astra-pre-collapsed .astra-side-user {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
    gap: 0;
}

/* Folded, each icon names itself on hover. Placed by site.js against the window. */
.astra-rail-tip {
    position: fixed;
    transform: translateY(-50%);
    background-color: var(--astra-navy);
    color: var(--astra-white);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 11px;
    border-radius: 4px;
    box-shadow: 0 6px 20px var(--astra-shadow-strong);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.12s ease;
    z-index: 1200;
}

.astra-rail-tip.show {
    opacity: 1;
}

/* --- The bar that opens the side menu on a small screen --- */
.astra-appbar,
.astra-appbar-stripe,
.astra-scrim {
    display: none;
}

@media (max-width: 991.98px) {
    .astra-appbar {
        display: flex;
        align-items: center;
        gap: 14px;
        min-height: 58px;
        padding: 0 16px;
        background-color: var(--astra-white);
        box-shadow: 0 1px 3px var(--astra-shadow);
    }

    .astra-menu-dark .astra-appbar {
        background-color: var(--astra-navy);
        box-shadow: 0 2px 10px var(--astra-shadow-strong);
    }

    .astra-appbar-stripe {
        display: flex;
    }

    .astra-appbar-brand img {
        height: 30px;
        width: auto;
    }

    .astra-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 34px;
        flex-shrink: 0;
        background: transparent;
        border: 1px solid var(--astra-border);
        border-radius: 4px;
        color: var(--astra-navy);
    }

    .astra-menu-dark .astra-hamburger {
        border-color: var(--astra-on-dark-line);
        color: var(--astra-white);
    }

    .astra-hamburger svg {
        width: 18px;
        height: 18px;
    }

    .astra-scrim {
        position: fixed;
        inset: 0;
        background-color: var(--astra-scrim);
        z-index: 1035;
    }

    .astra-drawer-open .astra-scrim {
        display: block;
    }

    /* The menu slides in over the page, always at full width. Folding is a desktop idea. */
    .astra-sidebar,
    .astra-shell.astra-rail .astra-sidebar,
    .astra-pre-collapsed .astra-sidebar {
        width: var(--astra-side-w);
        transform: translateX(-100%);
        transition: transform 0.22s ease-in-out;
    }

    .astra-shell.astra-drawer-open .astra-sidebar {
        transform: translateX(0);
    }

    .astra-rail-toggle {
        display: none;
    }

    .astra-shell.astra-rail .astra-side-brand,
    .astra-shell.astra-rail .astra-side-label,
    .astra-shell.astra-rail .astra-side-caret,
    .astra-shell.astra-rail .astra-side-user-text,
    .astra-pre-collapsed .astra-side-brand,
    .astra-pre-collapsed .astra-side-label,
    .astra-pre-collapsed .astra-side-caret,
    .astra-pre-collapsed .astra-side-user-text {
        display: block;
    }

    .astra-shell.astra-rail .astra-side-brand,
    .astra-pre-collapsed .astra-side-brand {
        flex: 1;
    }

    .astra-shell.astra-rail .astra-side-brand-row,
    .astra-pre-collapsed .astra-side-brand-row {
        justify-content: flex-start;
        padding: 12px 12px 12px 16px;
    }

    .astra-shell.astra-rail .astra-side-item,
    .astra-shell.astra-rail .astra-side-user,
    .astra-pre-collapsed .astra-side-item,
    .astra-pre-collapsed .astra-side-user {
        justify-content: flex-start;
        gap: 11px;
        padding-left: 10px;
        padding-right: 10px;
    }

    .astra-layout-side .astra-main,
    .astra-layout-side .astra-shell.astra-rail .astra-main,
    .astra-pre-collapsed .astra-layout-side .astra-main {
        margin-left: 0;
        padding-top: 0;
    }

    .astra-layout-side .astra-main > .container,
    .astra-layout-side .astra-main > .container-fluid {
        margin-top: 1.25rem;
    }
}

@media print {
    .astra-sidebar,
    .astra-appbar,
    .astra-scrim {
        display: none !important;
    }

    .astra-layout-side .astra-main {
        margin-left: 0 !important;
    }
}

/* --- The choices on the Layout page --- */
.astra-choice-card {
    background-color: var(--astra-white);
    border: 1px solid var(--astra-border);
    border-radius: 6px;
    padding: 16px;
    margin-bottom: 16px;
    max-width: 640px;
}

.astra-choice-heading {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--astra-raspberry);
    border-bottom: 1px solid var(--astra-border);
    padding-bottom: 4px;
    margin-bottom: 14px;
}

.astra-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 575.98px) {
    .astra-choice-grid {
        grid-template-columns: 1fr;
    }
}

.astra-choice-input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.astra-choice {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px;
    border: 1px solid var(--astra-border);
    border-radius: 6px;
    background-color: var(--astra-white);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.astra-choice:hover {
    border-color: var(--astra-raspberry);
}

.astra-choice-input:checked + .astra-choice {
    border-color: var(--astra-raspberry);
    box-shadow: 0 0 0 3px var(--astra-raspberry-focus);
}

.astra-choice-input:focus-visible + .astra-choice {
    outline: 2px solid var(--astra-raspberry);
    outline-offset: 2px;
}

.astra-choice-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--astra-navy);
    margin-top: 6px;
}

.astra-choice-input:checked + .astra-choice .astra-choice-name::after {
    content: ' \2713';
    color: var(--astra-raspberry);
}

.astra-choice-note {
    font-size: 0.8rem;
    color: var(--astra-muted);
}

/* The small picture: a page with the menu drawn on it, across the top or down the side,
   white or navy. */
.astra-choice-picture {
    position: relative;
    display: block;
    height: 92px;
    border-radius: 4px;
    background-color: var(--astra-grey-bg);
    border: 1px solid var(--astra-border);
    overflow: hidden;
}

.astra-choice-menu {
    position: absolute;
    background-color: var(--astra-white);
    box-shadow: 0 2px 8px var(--astra-shadow-strong);
}

.astra-choice-picture.is-dark .astra-choice-menu {
    background: linear-gradient(170deg, var(--astra-navy), var(--astra-navy-mid));
    box-shadow: none;
}

.astra-choice-picture.is-top .astra-choice-menu {
    left: 0;
    right: 0;
    top: 0;
    height: 18px;
}

.astra-choice-picture.is-side .astra-choice-menu {
    left: 0;
    top: 0;
    bottom: 0;
    width: 34px;
}

/* A white card on the page, standing for the content. */
.astra-choice-page {
    position: absolute;
    background-color: var(--astra-white);
    border-radius: 3px;
    box-shadow: 0 1px 3px var(--astra-shadow);
}

.astra-choice-picture.is-top .astra-choice-page {
    left: 14px;
    right: 14px;
    top: 30px;
    bottom: 10px;
}

.astra-choice-picture.is-side .astra-choice-page {
    left: 46px;
    right: 12px;
    top: 12px;
    bottom: 10px;
}