/* Sampo Labs house style — "2009 Java admin console".
   Tahoma 11px, steel-blue window chrome (#336699), gradient title bars,
   fieldset legends, beveled buttons. Extracted from Backlog Map's app.css;
   class names match it so the two stay drop-in compatible.

   Usage: <link rel="stylesheet" href="sampo-labs.css">
   Components: .window, .topbar + .brand, fieldset.set, .chip[-late|-gap|-warn|-good|-ok],
   .btn, .stat-strip, table.data. Page layout is yours. */

:root {
    --chrome: #e6e8ea;          /* app background behind panels */
    --panel: #ffffff;
    --panel-tint: #f4f6f8;      /* fieldset / toolbar fill */
    --grid: #d7dce1;            /* light row rules */
    --grid-strong: #c3cad1;     /* header cell separators */
    --border: #b9bfc6;          /* panel borders */
    --border-dark: #8f979f;     /* button / input borders */
    --ink: #1a1a1a;
    --ink-2: #444444;
    --ink-3: #6f7780;

    --blue: #336699;            /* the 2009 Java blue */
    --bar-top: #4a7dae;         /* title-bar gradient */
    --bar-bot: #2f5d8c;
    --bar-text: #ffffff;
    --link: #235e9e;

    /* severity semantics: gap/missing = red, late = yellow */
    --late: #8a6d00;
    --late-bg: #fff6c8;
    --gap: #c00000;
    --gap-bg: #ffdede;
    --warn: #8a6d00;
    --warn-bg: #fff6c8;
    --good: #1e7a1e;
    --good-bg: #ddf0dd;
    --select: #ffffcc;          /* classic selected-row yellow */

    --sans: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
    /* the "data" font: forum-classic Verdana, not actually monospace */
    --mono: Verdana, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--chrome);
    color: var(--ink);
    font: 11px/1.5 var(--sans);
}

a { color: var(--link); }
a:focus-visible, button:focus-visible { outline: 1px dotted var(--ink); outline-offset: 1px; }

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* old-school chunky scrollbars */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: #eef0f2; border-left: 1px solid var(--grid); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #d9dde1, #bac1c8);
    border: 1px solid var(--border-dark);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #cdd2d7, #a9b1b9); }

/* ---------- window: a bordered panel with drop shadow ---------- */

.window {
    border: 1px solid var(--border-dark);
    background: var(--panel);
    box-shadow: 2px 2px 6px rgba(20, 40, 60, 0.25);
}

/* ---------- title bar ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    background: linear-gradient(var(--bar-top), var(--bar-bot));
    border-bottom: 1px solid #22456a;
    color: var(--bar-text);
}

.brand {
    color: var(--bar-text);
    font: bold 12px var(--sans);
    letter-spacing: 0.1em;
    text-decoration: none;
    text-shadow: 0 1px 0 #1e3f61;
}

.topbar .dim { font-size: 10px; color: #cfe0f0; }

/* ---------- fieldset panel ---------- */

fieldset.set {
    margin: 0;
    padding: 4px 10px 9px;
    border: 1px solid var(--border);
    background: var(--panel-tint);
}

fieldset.set legend {
    font: bold 11px var(--sans);
    color: var(--blue);
    padding: 0 4px;
}

/* ---------- chips (status lozenges) ---------- */

.chip {
    display: inline-block;
    padding: 0 4px;
    border: 1px solid currentColor;
    font: bold 11px var(--mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: 1px;
}

.chip-late { color: var(--late); background: var(--late-bg); }
.chip-gap { color: var(--gap); background: var(--gap-bg); }
.chip-warn { color: var(--warn); background: var(--warn-bg); }
.chip-good { color: var(--good); background: var(--good-bg); }
.chip-ok { color: var(--ink-3); border-color: var(--border); background: none; }

/* ---------- buttons ---------- */

.btn {
    display: inline-flex;
    align-items: center;
    height: 20px;
    padding: 0 8px;
    border: 1px solid var(--border-dark);
    background: linear-gradient(#ffffff, #dcdfe3);
    font: 11px var(--sans);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
}

.btn:hover { border-color: var(--blue); color: var(--blue); }
.btn:active { background: linear-gradient(#d5d8dc, #e8ebee); }

/* toggle buttons: pressed-in when the feature is on */
.btn.active {
    background: linear-gradient(#cfdded, #e2ecf6);
    border-color: var(--blue);
    box-shadow: inset 0 1px 2px rgba(9, 37, 64, 0.25);
}

/* ---------- stat / status strip ---------- */

.stat-strip {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 4px 10px;
    border-top: 1px solid var(--border);
    background: var(--panel-tint);
    font-size: 10px;
    color: var(--ink-3);
}

.stat-strip .right { margin-left: auto; }

/* ---------- data table: gradient headers, zebra rows, yellow selection ---------- */

table.data {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

table.data th {
    position: sticky;
    top: 0;
    background: linear-gradient(#fcfcfc, #e0e4e8);
    text-align: left;
    font: bold 10px var(--sans);
    letter-spacing: 0.04em;
    color: var(--ink-2);
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-dark);
    white-space: nowrap;
}

table.data th + th { border-left: 1px solid var(--grid-strong); }

table.data td {
    padding: 2px 6px;
    border-bottom: 1px solid var(--grid);
}

table.data td + td { border-left: 1px solid #edf0f3; }

table.data td.num, table.data th.num { text-align: right; }

table.data tbody tr:nth-child(even) { background: #f3f6f9; }
table.data tbody tr:hover { background: #e6eef6; }

table.data tbody tr.selected {
    background: var(--select);
    outline: 1px solid #c9b95e;
    outline-offset: -1px;
}