/* ===========================
   Design tokens
   =========================== */
:root {
    /* Brand colors - OKLCH */
    --color-navy:    oklch(17% 0.19 264);    /* Academy Navy  #000088 */
    --color-slate:   oklch(94% 0.008 264);   /* Pale Slate    #EDEEF4 */
    --color-rose:    oklch(64% 0.12 15);     /* Chalk Rose    #DF7474 */
    --color-surface: oklch(99% 0.005 264);   /* Card white    ~#FAFBFF */

    /* Semantic */
    --color-text:          oklch(22% 0.03 264);
    --color-text-secondary: oklch(52% 0.03 264);
    --color-border:        oklch(17% 0.19 264 / 0.15);
    --color-border-alert:  oklch(64% 0.12 15 / 0.3);
    --color-alert-bg:      oklch(97% 0.015 15);
    --color-border-danger: oklch(52% 0.20 25 / 0.5);
    --color-danger-bg:     oklch(96% 0.025 15);

    /* Typography */
    --font-base: 'Signika', sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;

    /* Spacing */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2rem;
    --space-xl: 3rem;

    /* Radius */
    --radius-sm: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 9999px;

    /* Motion */
    --ease-fast: 0.15s ease-out;

    /* Legacy aliases */
    --primary-colour:    var(--color-navy);
    --background-colour: var(--color-slate);
    --warning-colour:    var(--color-rose);
    --font-set:          var(--font-base);
}

/* ===========================
   Base
   =========================== */
* {
    font-family: var(--font-base), sans-serif;
}

body {
    background-color: var(--color-slate);
    color: var(--color-text);
}

.font-mono {
    font-family: var(--font-mono) !important;
    font-size: 0.875em;
}

.bi {
    margin-right: 0.5rem;
}

/* ===========================
   Buttons
   =========================== */
.btn-outline-custom {
    color: var(--color-navy);
    border-color: var(--color-navy);
    background-color: transparent;
    transition: background-color var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}

.btn-outline-custom:hover,
.btn-outline-custom:active {
    color: var(--color-surface);
    background-color: var(--color-navy);
    border-color: var(--color-navy);
}

.btn-outline-custom:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
    box-shadow: none;
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-border-color: oklch(17% 0.19 264 / 0.3);
    --bs-btn-hover-bg: var(--color-slate);
    --bs-btn-hover-color: var(--color-text);
    --bs-btn-hover-border-color: oklch(17% 0.19 264 / 0.5);
    --bs-btn-active-bg: oklch(90% 0.010 264);
    --bs-btn-active-color: var(--color-text);
    --bs-btn-active-border-color: oklch(17% 0.19 264 / 0.5);
}

.btn-outline-secondary:focus-visible {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
    box-shadow: none;
}

/* ===========================
   Navbar
   =========================== */
.navbar {
    background-color: var(--color-navy);
    color: var(--color-surface);
}

.navbar a:not(.btn) {
    color: var(--color-surface);
    transition: opacity var(--ease-fast);
}

.navbar a:not(.btn):hover {
    color: var(--color-surface);
    opacity: 0.8;
}

/* ===========================
   Landing page
   =========================== */
.base-container {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}

.base-card {
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px oklch(0% 0 0 / 0.1);
    overflow: hidden;
    max-width: 1200px;
    width: 70vw;
    min-width: 400px;
}

.left-side {
    background-color: var(--color-navy);
    color: var(--color-surface);
    padding: var(--space-xl);
}

.right-side {
    background-color: var(--color-surface);
    color: var(--color-navy);
    padding: var(--space-xl);
}

@media (max-width: 992px) {
    .left-side {
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .right-side {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
}

/* ===========================
   Content blocks
   =========================== */
.content-block {
    background-color: var(--color-surface);
    padding: var(--space-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.content-block-fill {
    background-color: var(--color-navy);
    color: var(--color-surface);
    border-color: var(--color-navy);
}

.content-block-fill .text-muted {
    color: oklch(80% 0.01 264) !important;
}

.content-block-fill .btn-outline-light {
    color: var(--color-surface);
    border-color: oklch(99% 0.005 264 / 0.5);
    background-color: transparent;
    transition: background-color var(--ease-fast), border-color var(--ease-fast);
}

.content-block-fill .btn-outline-light:hover,
.content-block-fill .btn-outline-light:active {
    color: var(--color-navy);
    background-color: var(--color-surface);
    border-color: var(--color-surface);
}

.content-block-warning {
    background-color: var(--color-alert-bg);
    border-color: var(--color-border-alert);
}

.content-block-danger {
    background-color: var(--color-danger-bg);
    border-color: var(--color-border-danger);
}

/* ===========================
   Accordion
   =========================== */
.accordion {
    --bs-accordion-active-bg: var(--color-slate);
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000088'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}

.accordion-item {
    background-color: transparent;
    border: none;
    border-radius: 0;
}

.accordion-item:not(:last-of-type) {
    border-bottom: 1px solid var(--color-border);
}

.accordion-button {
    background-color: transparent;
    color: var(--color-text);
    padding: var(--space-sm);
}

.accordion-button:not(.collapsed) {
    color: var(--color-navy);
    font-weight: 600;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
}

.accordion-body {
    padding: 0 var(--space-sm) var(--space-sm);
}

/* ===========================
   Tables
   =========================== */
#basketTotalRow {
    background-color: var(--color-navy);
    color: var(--color-surface);
    border: 1px solid var(--color-navy) !important;
}

.btn.active:not(.tab-pane) {
    background-color: var(--color-navy) !important;
    color: var(--color-surface);
    border: 1px solid var(--color-navy) !important;
}

.btn.active:not(.tab-pane) .text-muted {
    color: oklch(80% 0.01 264) !important;
}

.table,
table.dataTable {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-active-bg: transparent;
    --bs-table-hover-bg: transparent;
}

.table,
table.dataTable,
table.dataTable > :not(caption) > * > * {
    background-color: transparent !important;
    box-shadow: none !important;
}

table.dataTable tbody tr,
table.dataTable.display tbody tr.odd,
table.dataTable.display tbody tr.even,
table.dataTable.display tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.stripe tbody tr.odd,
table.dataTable.order-column tbody tr > .sorting_1,
table.dataTable.order-column tbody tr > .sorting_2,
table.dataTable.order-column tbody tr > .sorting_3 {
    background-color: transparent !important;
}

/* ===========================
   Badges & utility overrides
   =========================== */

.bg-primary {
    background-color: var(--color-navy) !important;
}

.text-primary {
    color: var(--color-navy) !important;
}

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

.text-xs {
    font-size: 0.72rem;
}

.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.status-dot-ok   { background-color: oklch(42% 0.12 160); }
.status-dot-warn { background-color: oklch(52% 0.18 25); }

.cell-detail {
    max-width: 400px;
    word-break: break-word;
}

.action-bar-sticky {
    position: sticky;
    bottom: 0;
    z-index: 100;
    margin-bottom: 0;
    box-shadow: 0 -2px 10px oklch(0% 0 0 / 0.08);
}

.border-left-subtle {
    border-left: 1px solid var(--color-border) !important;
}

.bg-slate {
    background-color: var(--color-slate) !important;
}

/* ===========================
   Timeline
   =========================== */

.border-light {
    --bs-border-color: oklch(86% 0.008 264) !important;
}

/* ===========================
   Footer
   =========================== */
.site-footer {
    background-color: var(--color-navy);
}

.site-footer,
.site-footer p {
    color: oklch(85% 0.008 264);
    margin-bottom: 0;
}

.site-footer a {
    color: oklch(78% 0.01 264);
    text-decoration: none;
    transition: color var(--ease-fast);
}

.site-footer a:hover {
    color: var(--color-surface);
}

/* ===========================
   Details / summary
   =========================== */
details summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    cursor: pointer;
    user-select: none;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::before {
    content: '›';
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    transition: transform var(--ease-fast);
}

details[open] summary::before {
    transform: rotate(90deg);
}

/* ===========================
   Order timeline
   =========================== */
.timeline-step-label {
    font-size: 0.72rem;
}

.timeline-step-circle {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.timeline-step-circle .bi {
    font-size: 0.85rem;
    line-height: 1;
    margin-right: 0;
}

/* ===========================
   Signature pad
   =========================== */
.signature-pad-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    border: 2px solid var(--color-navy);
    border-radius: var(--radius-sm);
    background: oklch(98% 0.008 264);
    overflow: hidden;
    cursor: crosshair;
}

.signature-pad-wrapper canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
}

.signature-pad-wrapper::after {
    content: "Sign here";
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    color: oklch(17% 0.19 264 / 0.18);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    pointer-events: none;
    white-space: nowrap;
}

.signature-line {
    position: absolute;
    bottom: 32px;
    left: 10%;
    right: 10%;
    border-bottom: 1px dashed oklch(17% 0.19 264 / 0.2);
    pointer-events: none;
}

.signature-pad-wrapper.has-signature::after {
    display: none;
}