/* Nonner-Weiss-Cockpit — global brand theme (Iteration 1).
   Loaded after bootstrap.min.css and before any page-specific stylesheet in every
   head fragment (fragments/layout.html :: head / headWithCss / headWithCss2).
   Source of truth: docs/nonnerweiss-ui-component-guidelines.md. No webfonts, no CDN
   resources, no foreign icons — text glyphs and CSS shapes only. */

/* ------------------------------------------------------------------ 1. Tokens --- */
:root {
    --nw-yellow: #FFEA51;
    --nw-yellow-hover: #F2DC3A;
    --nw-yellow-tint: #FFF9D6;
    --nw-ink: #000000;
    --nw-text: #1F1F1F;
    --nw-text-muted: #5B6068;
    --nw-bg: #FFFFFF;
    --nw-surface: #F6F7FA;
    --nw-surface-2: #ECEEF3;
    --nw-line: #DFE2E8;
    --nw-line-strong: #858B95;
    /* Motion tokens (guideline §3/§4 Motion, mechanism C6). */
    --nw-dur: 180ms;
    --nw-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------------------------------------------------- 2. Bootstrap overrides --- */
:root, body {
    --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-color: var(--nw-text);
    --bs-body-bg: var(--nw-bg);
    --bs-border-radius: 0;
    --bs-border-radius-sm: 0;
    --bs-border-radius-lg: 0;
    --bs-border-radius-xl: 0;
    --bs-border-radius-xxl: 0;
    --bs-border-radius-pill: 0;
    /* Links stay ink, not Bootstrap blue; --bs-primary itself is untouched because
       bg-primary-subtle still carries the "fully matched" LV status pill. */
    --bs-link-color: var(--nw-ink);
    --bs-link-color-rgb: 0, 0, 0;
    --bs-link-hover-color: var(--nw-ink);
    --bs-link-hover-color-rgb: 0, 0, 0;
    /* Warning moves off Bootstrap amber (too close to brand yellow) to orange (U12). */
    --bs-warning: #E8710A;
    --bs-warning-rgb: 232, 113, 10;
    --bs-warning-bg-subtle: #FFE8D1;
    --bs-warning-border-subtle: #F1B77F;
    --bs-warning-text-emphasis: #8A4B00;
    --bs-success: #0B6B3A;
    --bs-success-rgb: 11, 107, 58;
    --bs-success-bg-subtle: #DFF3E6;
    --bs-success-border-subtle: #BFE5CC;
    --bs-success-text-emphasis: #0B6B3A;
    --bs-danger: #8E1B1B;
    --bs-danger-rgb: 142, 27, 27;
    --bs-danger-bg-subtle: #FADCDC;
    --bs-danger-border-subtle: #F0B3B3;
    --bs-danger-text-emphasis: #8E1B1B;
    --bs-info: #134A75;
    --bs-info-rgb: 19, 74, 117;
    --bs-info-bg-subtle: #DCEBF7;
    --bs-info-border-subtle: #B9D9EE;
    --bs-info-text-emphasis: #134A75;
    --bs-secondary: #3F4650;
    --bs-secondary-rgb: 63, 70, 80;
    --bs-secondary-bg-subtle: #EEF0F4;
    --bs-secondary-border-subtle: #D7DBE2;
    --bs-secondary-text-emphasis: #3F4650;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------- Typography */
h1, h2, h3, h4, h5, h6 { font-weight: 700; color: var(--nw-ink); }

.nw-title,
.nw-pagehead > h1 {
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: .04em;
}

.nw-pagehead > h1 { font-size: 1.5rem; }

.nw-num { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------------- Buttons */
.btn { border-radius: 0; }

.btn-primary {
    background-color: var(--nw-yellow);
    border-color: var(--nw-yellow);
    color: var(--nw-ink);
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--nw-yellow-hover) !important;
    border-color: var(--nw-yellow-hover) !important;
    color: var(--nw-ink) !important;
}

.btn-primary:disabled, .btn-primary.disabled {
    background-color: var(--nw-yellow);
    border-color: var(--nw-yellow);
    color: var(--nw-ink);
    opacity: .45;
}

.btn-secondary, .btn-outline-primary, .btn-outline-secondary {
    background-color: var(--nw-surface);
    border-color: var(--nw-line-strong);
    color: var(--nw-ink);
}

.btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:hover {
    background-color: var(--nw-surface-2);
    border-color: var(--nw-line-strong);
    color: var(--nw-ink);
}

/* Semantic buttons: Bootstrap hard-codes per-class --bs-btn-* colours, so the
   semantic classes are re-pointed at the cockpit palette here (U12: no amber). */
.btn-warning, .btn-outline-warning {
    --bs-btn-color: var(--bs-warning-text-emphasis);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: var(--bs-warning-text-emphasis);
    --bs-btn-hover-bg: var(--bs-warning-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-active-color: var(--bs-warning-text-emphasis);
    --bs-btn-active-bg: var(--bs-warning-bg-subtle);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-disabled-color: var(--bs-warning-text-emphasis);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-warning);
}

.btn-success, .btn-outline-success {
    --bs-btn-color: var(--bs-success-text-emphasis);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-color: var(--bs-success-text-emphasis);
    --bs-btn-hover-bg: var(--bs-success-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-success);
    --bs-btn-active-color: var(--bs-success-text-emphasis);
    --bs-btn-active-bg: var(--bs-success-bg-subtle);
    --bs-btn-active-border-color: var(--bs-success);
    --bs-btn-disabled-color: var(--bs-success-text-emphasis);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-success);
}

.btn-info, .btn-outline-info {
    --bs-btn-color: var(--bs-info-text-emphasis);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--bs-info);
    --bs-btn-hover-color: var(--bs-info-text-emphasis);
    --bs-btn-hover-bg: var(--bs-info-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-info);
    --bs-btn-active-color: var(--bs-info-text-emphasis);
    --bs-btn-active-bg: var(--bs-info-bg-subtle);
    --bs-btn-active-border-color: var(--bs-info);
    --bs-btn-disabled-color: var(--bs-info-text-emphasis);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-info);
}

.btn-outline-danger {
    --bs-btn-color: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-color: var(--bs-danger);
    --bs-btn-hover-bg: var(--bs-danger-bg-subtle);
    --bs-btn-hover-border-color: var(--bs-danger);
    --bs-btn-active-color: var(--bs-danger);
    --bs-btn-active-bg: var(--bs-danger-bg-subtle);
    --bs-btn-active-border-color: var(--bs-danger);
}

/* Dangerous actions stay outline, never filled solid red. */
.btn-danger {
    background-color: transparent;
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

.btn-danger:hover {
    background-color: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger);
    color: var(--bs-danger);
}

/* --------------------------------------------------------------------- Badges --- */
.badge { border-radius: 0; padding: 0.28em 0.5em; }
.rounded-pill { border-radius: 0 !important; }

/* ---------------------------------------------------------------------- Cards --- */
.card { border-color: var(--nw-line); border-radius: 0; box-shadow: none; }
.card-header { background-color: var(--nw-surface); border-bottom-color: var(--nw-line); }

/* -------------------------------------------------------------------- Forms --- */
.form-control, .form-select { border-radius: 0; border-color: var(--nw-line-strong); }

/* ------------------------------------------------------------- Focus-visible --- */
a:focus-visible, button:focus-visible, .btn:focus-visible, .form-control:focus-visible,
.form-select:focus-visible, .nav-link:focus-visible, [tabindex]:focus-visible {
    outline: 2px solid var(--nw-ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 5px var(--nw-yellow);
}

/* -------------------------------------------------------------------- Navbar --- */
.nw-navbar { background-color: var(--nw-bg) !important; border-bottom: 3px solid var(--nw-ink); }
.nw-navbar .navbar-brand img { height: 28px; width: auto; }

.nw-navbar .nav-link {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 600;
    color: var(--nw-ink);
    border-bottom: 3px solid transparent;
    padding-bottom: .25rem;
}

.nw-navbar .nav-link.active { border-bottom-color: var(--nw-yellow); }

/* Versal subtitle (B5): section headings on batch/handover/approve pages. */
.nw-subtitle {
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--nw-ink);
}

/* Position numbers in tables: proportional with tabular digits (bar W5). */
.nw-pos { font-variant-numeric: tabular-nums; font-weight: 600; }

/* Versal section label (B5): used for pane and detail section headings. */
.nw-section-title {
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--nw-text-muted);
}

/* --------------------------------------------------------------- Page header --- */
.nw-pagehead {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    margin-bottom: 1rem;
}

.nw-pagehead-subtitle { color: var(--nw-text-muted); font-size: .8125rem; }

/* -------------------------------------------------------------------- KPI --- */
.nw-kpi-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: .75rem;
    margin-bottom: 1rem;
}

.nw-kpi {
    position: relative;
    display: block;
    background: var(--nw-bg);
    border: 1px solid var(--nw-line);
    border-top: 4px solid var(--nw-ink);
    padding: .75rem .9rem;
    color: var(--nw-text);
    text-decoration: none;
    transition: background-color var(--nw-dur) var(--nw-ease);
}

.nw-kpi:hover { background: var(--nw-surface); color: var(--nw-text); text-decoration: none; }
.nw-kpi:hover .nw-kpi-label { text-decoration: underline; text-decoration-thickness: 2px; }
/* Click affordance (C2): every tile is a filter link, so every tile carries an arrow. */
.nw-kpi::after {
    content: "\2192";
    position: absolute;
    right: .9rem;
    top: .7rem;
    font-size: 18px;
    line-height: 1;
    color: var(--nw-text-muted);
    transition: transform var(--nw-dur) var(--nw-ease);
}
.nw-kpi:hover::after { transform: translateX(3px); color: var(--nw-ink); }
.nw-kpi--zero .nw-kpi-number { color: var(--nw-text-muted); }
.nw-kpi--alert { border-top-color: var(--bs-danger); }
.nw-kpi--warn { border-top-color: var(--bs-warning); }
.nw-kpi-number { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.nw-kpi-label {
    display: block;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    margin-top: .1rem;
}

.nw-kpi-sub { display: block; font-size: 13px; color: var(--nw-text-muted); }

/* ------------------------------------------------------------------- Alerts --- */
.nw-alerts {
    /* Sticky wrapper so feedback stays in view even when the page scrolls to a selected row (C3);
       the wrapper (not the alert) is sticky because sticky positioning is bounded by the parent box. */
    position: sticky;
    top: .5rem;
    z-index: 1020;
}

.nw-alert {
    position: relative;
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    background: var(--nw-bg);
    border: 1px solid var(--nw-line);
    border-left: 4px solid var(--nw-text-muted);
    border-radius: 0;
    padding: .65rem .9rem;
    overflow: hidden;
}

.nw-alert-success { border-left-color: var(--bs-success); }
.nw-alert-danger { border-left-color: var(--bs-danger); }
.nw-alert-info { border-left-color: var(--bs-info); }
.nw-alert-warning { border-left-color: var(--bs-warning); }
.nw-alert-glyph { font-weight: 700; line-height: 1.4; }
.nw-alert-title { font-weight: 600; font-size: 14px; margin-right: .35rem; }
.nw-alert--autodismiss { animation: nw-alert-fade-out var(--nw-dur) var(--nw-ease) 6s forwards; }

.nw-alert--autodismiss::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    background: currentColor;
    opacity: .35;
    width: 100%;
    animation: nw-alert-progress 6s linear forwards;
}

@keyframes nw-alert-progress { from { width: 100%; } to { width: 0%; } }
@keyframes nw-alert-fade-out { to { opacity: 0; pointer-events: none; display: none; } }

/* -------------------------------------------------------------------- States --- */
.nw-skeleton {
    background: linear-gradient(90deg, var(--nw-surface-2) 25%, var(--nw-surface) 37%, var(--nw-surface-2) 63%);
    background-size: 400% 100%;
    animation: nw-skeleton-pulse 1.4s ease infinite;
    height: 1rem;
}

@keyframes nw-skeleton-pulse { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.nw-empty { background: var(--nw-bg); border: 1px solid var(--nw-line); padding: 2rem 1.5rem; text-align: center; }
.nw-empty-title { font-weight: 700; margin-bottom: .25rem; }
.nw-empty-text { color: var(--nw-text-muted); margin-bottom: 1rem; }
.nw-narrow { max-width: 720px; }
.nw-narrow-sm { max-width: 560px; }

/* ------------------------------------------------------------------ Progress --- */
.progress { border-radius: 0; background-color: var(--nw-surface-2); }
.progress-bar { background-color: var(--nw-ink); }

/* -------------------------------------------------------------------- Tables --- */
.table { font-size: 14px; }
.table > tbody > tr:hover { background-color: var(--nw-surface); }

.nw-table-sticky thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--nw-surface);
}

/* ----------------------------------------------------------------------- Hex --- */
.nw-hex {
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
    background-color: var(--nw-ink);
}

/* ------------------------------------------------------------- Clipboard --- */
.nw-copy { padding: 0 .4rem; font-size: 12px; margin-left: .4rem; vertical-align: baseline; }
.nw-copy .nw-copy-done { display: none; }
.nw-copy.nw-copied .nw-copy-label { display: none; }
.nw-copy.nw-copied .nw-copy-done { display: inline; }
.nw-copy.nw-copied { border-color: var(--bs-success); color: var(--bs-success-text-emphasis); background: var(--bs-success-bg-subtle); }

/* ------------------------------------------------------------ Kbd / trigger --- */
.nw-kbd {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    color: var(--nw-text-muted);
    background: var(--nw-surface);
    border: 1px solid var(--nw-line);
    border-radius: 0;
    padding: 1px 5px;
    margin-left: .35rem;
}
.nw-palette-trigger { text-transform: none; font-weight: 500; white-space: nowrap; }
.nw-navbar .nav-link, .nw-navbar .navbar-nav .nav-item { white-space: nowrap; }
@media (max-width: 1399.98px) { .nw-palette-trigger .nw-kbd { display: none; } }

/* --------------------------------------------------------- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
    .nw-kpi, .nw-kpi::after, a, .btn { transition: none !important; }
    .nw-alert--autodismiss { animation: none !important; }
    .nw-alert--autodismiss::after { animation: none !important; width: 0 !important; }
    .nw-skeleton { animation: none !important; background: var(--nw-surface-2) !important; }
}