/* ============================================================================
   WINDOWS 3.1 THEME — PROGRAM MANAGER ERA
   ============================================================================
   Authentic Windows 3.1 aesthetic: solid navy (#000080) title bars (NO
   gradient — the gradient is a Win95 thing), flat #c0c0c0 ButtonFace chrome
   with simpler/flatter 1-2px bevels than 95, white client areas with black
   text, and a flat teal (#008080) desktop. NO taskbar, NO Start button, NO
   animated effects — Windows 3.1 was static.

   Sibling of themes/win95/win95.css; mirrors its --tl-* token block and the
   same contract hooks (.card / .content-card / .content-section /
   .stat-card / .collapsible-section / .hero / .section-header / .table /
   .btn / .form-control / .top-row / .sidebar / .badge / .entity-card) but
   makes them 3.1-authentic and flatter.

   KEY CONTRAST RATIOS (all >= WCAG AA):
     black  #000000 on ButtonFace #c0c0c0  ~= 12.6:1  (AAA)
     black  #000000 on white      #ffffff  ~= 21:1    (AAA)
     white  #ffffff on navy       #000080  ~= 16.0:1  (AAA)
     navy   #000080 on white      #ffffff  ~= 13.1:1  (AAA)  (links/headers)
     navy   #000080 on ButtonFace #c0c0c0  ~=  7.9:1  (AAA)  (accent text)
     #4d4d4d (subtle) on #c0c0c0           ~=  4.6:1  (AA)
   ============================================================================ */

:root[data-theme="win31"] {
    /* Windows 3.1 system palette */
    --w31-silver: #c0c0c0;          /* ButtonFace */
    --w31-silver-light: #dfdfdf;    /* light edge */
    --w31-silver-dark: #808080;     /* ButtonShadow */
    --w31-navy: #000080;            /* ActiveTitle / Highlight */
    --w31-teal: #008080;            /* classic flat desktop */
    --w31-white: #ffffff;           /* Window / ButtonHighlight */
    --w31-black: #000000;           /* WindowText / ButtonText */

    /* PRIMARY ACCENT — Program Manager navy (NO bright XP/95 highlight blue) */
    --tl-accent-primary: #000080;
    --tl-accent-primary-light: #0000a0;   /* very slightly lifted navy, still flat */
    --tl-accent-primary-dark: #000060;
    --tl-accent-primary-darker: #000040;

    /* BACKGROUND COLORS — light Program Manager desktop.
       --tl-bg-base is the flat teal desktop behind windows; everything
       elevated is silver ButtonFace / white client areas so fall-through
       surfaces render as light 3.1 chrome, never dark patches. */
    --tl-bg-base: #008080;          /* flat teal desktop */
    --tl-bg-elevated: #c0c0c0;      /* ButtonFace window chrome */
    --tl-bg-elevated-1: #c0c0c0;    /* ButtonFace */
    --tl-bg-elevated-2: #ffffff;    /* white client/content area */
    --tl-bg-elevated-3: #c0c0c0;    /* flat silver raised panel (no d4d0c8 tint) */
    --tl-bg-input: #ffffff;         /* white sunken input field */
    --tl-bg-hover: rgba(0, 0, 128, 0.08);  /* faint navy hover wash */
    --bg-tertiary: #c0c0c0;
    --bg-primary: #c0c0c0;

    /* BORDER COLORS — 3.1 bevel: white highlight / grey shadow.
       Flatter than 95: shadow uses #808080 (no #404040 darker outer ring). */
    --tl-border-subtle: #ffffff;    /* ButtonHighlight (top-left bevel) */
    --tl-border-default: #808080;   /* ButtonShadow (bottom-right bevel) */
    --tl-border-strong: #000000;    /* WindowFrame outline */
    --tl-border-focus: var(--tl-accent-primary);

    /* TEXT COLORS — black on silver/white per 3.1 (WindowText/ButtonText) */
    --tl-text-primary: #000000;     /* ButtonText / WindowText */
    --tl-text-secondary: #000000;   /* keep black for body legibility */
    --tl-text-muted: #404040;       /* dark grey, ~9.4:1 on #c0c0c0 */
    --tl-text-subtle: #4d4d4d;      /* GrayText-ish, ~4.6:1 on #c0c0c0 (AA) */
    --tl-text-inverse: #ffffff;     /* CaptionText — white on navy title bars */

    /* STATE COLORS */
    --tl-success: #008000;
    --tl-error: #800000;
    --tl-error-bg: #ffffff;
    --tl-error-border: #808080;
    --tl-warning: #808000;
    --tl-info: #000080;

    /* COMPONENT-SPECIFIC — SOLID navy header, NO gradient (the 3.1 distinction) */
    --tl-card-bg: #c0c0c0;
    --tl-card-border: #808080;
    --tl-card-header-bg: #000080;

    /* INTERACTIVE ELEMENTS */
    --tl-button-primary-bg: #c0c0c0;
    --tl-button-primary-hover: #c0c0c0;   /* 3.1 buttons don't lighten on hover */
    --tl-button-primary-text: #000000;
    --tl-button-secondary-bg: #c0c0c0;
    --tl-button-secondary-hover: #c0c0c0;
    --tl-button-secondary-text: #000000;

    /* RATING SYSTEM */
    --tl-rating-fill: var(--tl-accent-primary);
    --tl-rating-empty: #ffffff;
    --tl-rating-hover: var(--tl-accent-primary);

    /* SHADOWS — hard 1-2px offset, no soft blur (3.1 has no blur).
       Lighter/flatter than 95 (no large 4px drop). */
    --tl-shadow-sm: 1px 1px 0 rgba(0, 0, 0, 0.30);
    --tl-shadow-md: 1px 1px 0 rgba(0, 0, 0, 0.30);
    --tl-shadow-lg: 2px 2px 0 rgba(0, 0, 0, 0.30);

    /* Square everything — 3.1 has zero rounding */
    --tl-radius-sm: 0;
    --tl-radius-md: 0;
    --tl-radius-lg: 0;
    --tl-radius-full: 0;

    /* ========================================================================
       BACKWARDS COMPATIBILITY MAPPINGS
       ======================================================================== */
    --primary-color: var(--tl-accent-primary);
    --primary-hover: var(--tl-accent-primary);
    --bg-secondary: var(--tl-bg-elevated-2);
    --bg-card: var(--tl-bg-elevated);
    --bg-hover: var(--tl-bg-hover);
    --border-color: var(--tl-border-default);
    --text-primary: var(--tl-text-primary);
    --text-secondary: var(--tl-text-secondary);
    --text-muted: var(--tl-text-muted);

    --ux-bg: var(--tl-bg-base);
    --ux-text: var(--tl-text-primary);
}

/* ============================================================================
   WINDOWS 3.1 — GLOBAL
   ============================================================================ */

:root[data-theme="win31"] body {
    background: #008080;            /* flat teal desktop, no effects */
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    color: #000000;
}

:root[data-theme="win31"] h1,
:root[data-theme="win31"] h2,
:root[data-theme="win31"] h3,
:root[data-theme="win31"] h4,
:root[data-theme="win31"] h5,
:root[data-theme="win31"] h6 {
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    color: #000000;
    text-shadow: none;
}

/* ============================================================================
   WIN3.1 WINDOW FRAMES — flat ButtonFace panels, simple 2px bevel.
   No #404040 darker ring, no big drop shadow — flatter than 95.
   ============================================================================ */

:root[data-theme="win31"] .card,
:root[data-theme="win31"] .content-card,
:root[data-theme="win31"] .stat-card,
:root[data-theme="win31"] .content-section,
:root[data-theme="win31"] .collapsible-section,
:root[data-theme="win31"] .entity-card,
:root[data-theme="win31"] .hero {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;   /* highlight TL / shadow BR */
    border-radius: 0;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
    color: #000000;
}

/* content-section / collapsible-section are window-like: zero inner padding so
   the navy caption bar can sit flush at the top edge */
:root[data-theme="win31"] .content-section,
:root[data-theme="win31"] .collapsible-section {
    padding: 0;
    overflow: hidden;
}

/* ============================================================================
   TITLE BARS — SOLID navy #000080 with white text. NO gradient.
   This is the single biggest 3.1-vs-95 distinction.
   ============================================================================ */

:root[data-theme="win31"] .section-header,
:root[data-theme="win31"] .content-section .section-header,
:root[data-theme="win31"] .collapsible-header,
:root[data-theme="win31"] .sidebar-header,
:root[data-theme="win31"] .card-header,
:root[data-theme="win31"] .modal-header {
    background: #000080;            /* SOLID navy, not a gradient */
    color: #ffffff;
    padding: 2px 4px;
    margin: 0;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 18px;
    border: none;
    border-radius: 0;
    text-shadow: none;
}

:root[data-theme="win31"] .section-header h2,
:root[data-theme="win31"] .section-header h3,
:root[data-theme="win31"] .section-title,
:root[data-theme="win31"] .sidebar-header h3,
:root[data-theme="win31"] .modal-header h2,
:root[data-theme="win31"] .modal-header h3,
:root[data-theme="win31"] .collapsible-title {
    color: #ffffff;
    font-size: 11px;
    margin: 0;
    text-shadow: none;
}

/* Program Manager control box + min/max arrows.
   LEFT: control-menu box (the long dash).  RIGHT: minimize/maximize arrows.
   Simple flat raised squares — keep it simple per 3.1. */
:root[data-theme="win31"] .content-section .section-header::before {
    content: '\2014';              /* em dash = control-menu box glyph */
    font-size: 11px;
    line-height: 1;
    color: #000000;
    background: #c0c0c0;
    padding: 0 3px;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    margin-right: 4px;
    order: -1;
}

:root[data-theme="win31"] .content-section .section-header::after {
    content: '\25BE \25B4';        /* down arrow (minimize) + up arrow (maximize) */
    font-size: 8px;
    letter-spacing: 3px;
    color: #000000;
    background: #c0c0c0;
    padding: 0 3px;
    border: 1px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    margin-left: auto;
}

/* HERO — Program Manager window. Solid navy caption reading "Program Manager". */
:root[data-theme="win31"] .hero {
    padding: 0;
    overflow: hidden;
}

:root[data-theme="win31"] .hero::before {
    content: 'Program Manager';
    display: block;
    background: #000080;           /* SOLID navy caption, no gradient */
    color: #ffffff;
    padding: 2px 6px;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    font-size: 11px;
    font-weight: bold;
    text-shadow: none;
}

:root[data-theme="win31"] .hero h1 {
    color: #000000;
    font-size: 22px;
    padding: 14px 14px 6px 14px;
    margin: 0;
}

:root[data-theme="win31"] .hero-subtitle,
:root[data-theme="win31"] .hero p {
    color: #000000;
    padding: 0 14px 14px 14px;
    font-size: 12px;
}

/* Sunken white client area inside content windows */
:root[data-theme="win31"] .content-grid,
:root[data-theme="win31"] .content-section > *:not(.section-header) {
    background: #ffffff;
    margin: 3px;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken: shadow TL / highlight BR */
    padding: 6px;
}

/* ============================================================================
   STAT CARDS — flat raised ButtonFace tiles
   ============================================================================ */

:root[data-theme="win31"] .stat-card {
    padding: 12px 8px;
    text-align: center;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
}

:root[data-theme="win31"] .stat-card:hover {
    background: #c0c0c0;           /* no lighten — 3.1 tiles are static */
    transform: none;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
}

:root[data-theme="win31"] .stat-value,
:root[data-theme="win31"] .stat-card .v {
    color: #000080;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    font-size: 22px;
    font-weight: bold;
}

:root[data-theme="win31"] .stat-label,
:root[data-theme="win31"] .stat-card .l {
    color: #000000;
    font-size: 10px;
    text-transform: uppercase;
}

/* ============================================================================
   ENTITY / CONTENT CARDS — flat raised, no hover lift
   ============================================================================ */

:root[data-theme="win31"] .content-card,
:root[data-theme="win31"] .entity-card {
    overflow: hidden;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
    transition: none;
}

:root[data-theme="win31"] .content-card:hover,
:root[data-theme="win31"] .entity-card:hover {
    background: #c0c0c0;
    transform: none;
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.30);
    border-color: #ffffff #808080 #808080 #ffffff;
}

:root[data-theme="win31"] .content-type,
:root[data-theme="win31"] .entity-type {
    color: #000080;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
}

:root[data-theme="win31"] .content-title,
:root[data-theme="win31"] .entity-name {
    color: #000000;
    font-weight: bold;
    font-size: 12px;
}

:root[data-theme="win31"] .content-desc {
    color: #000000;
    font-size: 11px;
}

/* ============================================================================
   BUTTONS — flat grey raised rectangles, hard 2px bevel, black text.
   No rounding, no gloss, no hover lighten — pressed flips the bevel.
   ============================================================================ */

:root[data-theme="win31"] .btn,
:root[data-theme="win31"] button,
:root[data-theme="win31"] .btn-create,
:root[data-theme="win31"] .btn-secondary,
:root[data-theme="win31"] .btn-small {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
    color: #000000;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    font-weight: normal;
    text-transform: none;
    box-shadow: none;             /* flatter than 95 — no inset double-bevel */
    transition: none;
    padding: 4px 12px;
}

:root[data-theme="win31"] .btn:hover,
:root[data-theme="win31"] button:hover,
:root[data-theme="win31"] .btn-create:hover,
:root[data-theme="win31"] .btn-secondary:hover,
:root[data-theme="win31"] .btn-small:hover {
    background: #c0c0c0;          /* 3.1 buttons do not change colour on hover */
    color: #000000;
    text-shadow: none;
    transform: none;
    filter: none;
}

:root[data-theme="win31"] .btn:active,
:root[data-theme="win31"] button:active,
:root[data-theme="win31"] .btn-create:active,
:root[data-theme="win31"] .btn-secondary:active,
:root[data-theme="win31"] .btn-small:active {
    border-color: #808080 #ffffff #ffffff #808080;   /* invert bevel = pressed */
    box-shadow: none;
    padding: 5px 11px 3px 13px;
}

:root[data-theme="win31"] .btn-primary {
    background: #c0c0c0;
    color: #000000;
    border-color: #ffffff #808080 #808080 #ffffff;
}

/* Default-button heavy black outline (3.1 marks the default with a 1px black ring) */
:root[data-theme="win31"] .btn-primary {
    outline: 1px solid #000000;
    outline-offset: -3px;
}

/* ============================================================================
   FORM CONTROLS — white sunken fields, hard bevel, black text
   ============================================================================ */

:root[data-theme="win31"] input,
:root[data-theme="win31"] textarea,
:root[data-theme="win31"] select,
:root[data-theme="win31"] .form-control {
    background: #ffffff;
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;   /* sunken */
    border-radius: 0;
    color: #000000;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    box-shadow: none;
    padding: 3px 6px;
}

:root[data-theme="win31"] input::placeholder,
:root[data-theme="win31"] textarea::placeholder,
:root[data-theme="win31"] .form-control::placeholder {
    color: #808080;
}

:root[data-theme="win31"] input:focus,
:root[data-theme="win31"] textarea:focus,
:root[data-theme="win31"] select:focus,
:root[data-theme="win31"] .form-control:focus {
    background: #ffffff;
    border-color: #808080 #ffffff #ffffff #808080;
    box-shadow: none;
    outline: 1px dotted #000000;
    outline-offset: -4px;
}

/* ============================================================================
   LINKS / SELECTION — navy accent, navy selection with white text
   ============================================================================ */

:root[data-theme="win31"] a {
    color: #000080;
    text-decoration: underline;
    transition: none;
}

:root[data-theme="win31"] a:hover {
    color: #000080;
    text-shadow: none;
}

:root[data-theme="win31"] a:visited {
    color: #800080;
}

:root[data-theme="win31"] ::selection {
    background: #000080;
    color: #ffffff;
}

/* ============================================================================
   NAV / SIDEBAR — flat ButtonFace, navy active highlight + white text
   ============================================================================ */

:root[data-theme="win31"] .sidebar,
:root[data-theme="win31"] .ww-sidebar,
:root[data-theme="win31"] .top-row,
:root[data-theme="win31"] .ww-topbar {
    background: #c0c0c0;
    border-bottom: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    box-shadow: none;
}

:root[data-theme="win31"] .sidebar {
    border-bottom: none;
    border-right: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
}

:root[data-theme="win31"] .nav-link,
:root[data-theme="win31"] .ww-sidebar-link,
:root[data-theme="win31"] .ww-nav-link {
    color: #000000;
    border-radius: 0;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    text-shadow: none;
}

:root[data-theme="win31"] .nav-link:hover,
:root[data-theme="win31"] .ww-sidebar-link:hover,
:root[data-theme="win31"] .ww-nav-link:hover {
    background: #c0c0c0;
    color: #000080;
    text-shadow: none;
}

:root[data-theme="win31"] .nav-link.active,
:root[data-theme="win31"] .ww-sidebar-link.active,
:root[data-theme="win31"] .ww-nav-link.active {
    background: #000080;          /* navy selection bar */
    color: #ffffff;
    border-radius: 0;
    text-shadow: none;
}

/* ============================================================================
   TABLES — white grid, SOLID navy header row with white text
   ============================================================================ */

:root[data-theme="win31"] table,
:root[data-theme="win31"] .table,
:root[data-theme="win31"] .data-table {
    border: 2px solid;
    border-color: #808080 #ffffff #ffffff #808080;
    border-radius: 0;
    background: #ffffff;
    border-collapse: collapse;
}

:root[data-theme="win31"] th,
:root[data-theme="win31"] .table th {
    background: #000080;          /* SOLID navy header, no gradient */
    color: #ffffff;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    font-weight: bold;
    text-transform: none;
    border-bottom: 1px solid #808080;
    padding: 3px 8px;
}

:root[data-theme="win31"] td,
:root[data-theme="win31"] .table td {
    background: #ffffff;
    color: #000000;
    border-bottom: 1px solid #c0c0c0;
    padding: 3px 8px;
}

:root[data-theme="win31"] tr:hover td,
:root[data-theme="win31"] .table tr:hover td {
    background: #000080;          /* navy row selection */
    color: #ffffff;
}

/* ============================================================================
   BADGES — flat navy chips, square, white text
   ============================================================================ */

:root[data-theme="win31"] .badge,
:root[data-theme="win31"] .pillar-badge,
:root[data-theme="win31"] .collapsible-count {
    background: #000080;
    color: #ffffff;
    font-family: 'MS Sans Serif', 'Pixelated MS Sans Serif', 'Segoe UI', Tahoma, sans-serif;
    font-weight: bold;
    border-radius: 0;
    border: 1px solid;
    border-color: #808080 #000040 #000040 #808080;
    box-shadow: none;
    text-transform: none;
}

:root[data-theme="win31"] .badge-success { background: #008000; color: #ffffff; }
:root[data-theme="win31"] .badge-error   { background: #800000; color: #ffffff; }
:root[data-theme="win31"] .badge-warning { background: #808000; color: #ffffff; }

/* ============================================================================
   COLLAPSIBLE SECTIONS — navy caption header, chevron in white
   ============================================================================ */

:root[data-theme="win31"] .collapsible-header:hover {
    background: #000080;          /* stays navy; 3.1 captions don't recolour */
}

:root[data-theme="win31"] .collapsible-header:hover .collapsible-title {
    color: #ffffff;
    text-shadow: none;
}

:root[data-theme="win31"] .collapsible-chevron {
    color: #ffffff;
}

/* ============================================================================
   SCROLLBARS — flat 3.1 grey, square thumb with simple bevel
   ============================================================================ */

:root[data-theme="win31"] ::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

:root[data-theme="win31"] ::-webkit-scrollbar-track {
    background: #ffffff;
    border: 1px solid #808080;
}

:root[data-theme="win31"] ::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    border-radius: 0;
}

:root[data-theme="win31"] ::-webkit-scrollbar-thumb:hover {
    background: #c0c0c0;
}

:root[data-theme="win31"] ::-webkit-scrollbar-button {
    background: #c0c0c0;
    border: 2px solid;
    border-color: #ffffff #808080 #808080 #ffffff;
    height: 16px;
    width: 16px;
}

/* ============================================================================
   FOCUS — 3.1 dotted focus rectangle (no glow, no animation)
   ============================================================================ */

:root[data-theme="win31"] *:focus-visible {
    outline: 1px dotted #000000;
    outline-offset: 2px;
    box-shadow: none;
}

/* No images filter, no scanlines, no pulse, no animated effects — 3.1 is static. */