/* ============================================================
   WIN95 BASE DESIGN SYSTEM
   The complete Windows 95 visual language in CSS
   ============================================================ */

/* Load W95FA — a free pixel-perfect MS Sans Serif replica
   Loaded via CDNFonts <link> in index.html for reliability */

:root {
    /* Core Colors */
    --win95-bg: #c0c0c0;
    --win95-text: #000000;
    --win95-desktop: #008080;
    --win95-white: #ffffff;
    --win95-light: #dfdfdf;
    --win95-gray: #808080;
    --win95-dark: #404040;
    --win95-black: #0a0a0a;

    /* Accent Colors */
    --win95-navy: #000080;
    --win95-navy-light: #1084d0;
    --win95-highlight: #000080;
    --win95-highlight-text: #ffffff;
    --win95-title-inactive: #808080;
    --win95-title-inactive-end: #b5b5b5;

    /* Misc */
    --win95-tooltip-bg: #ffffe1;
    --win95-link: #0000ff;
    --win95-visited-link: #800080;

    /* Font */
    --win95-font: "W95FA", "MS Sans Serif", "Microsoft Sans Serif", Arial, Helvetica, sans-serif;
    --win95-font-size: 11px;
    --win95-font-mono: "Fixedsys", "Lucida Console", "Courier New", monospace;

    /* Taskbar */
    --taskbar-height: 28px;
}

/* ---- Global Reset ---- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    color: var(--win95-text);
    background: var(--win95-bg);
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeSpeed;
}

/* ============================================================
   3D BORDER SYSTEM
   The heart of Win95's visual language
   ============================================================ */

/* Raised surface (buttons, toolbars, window frames) */
.raised {
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
}

/* Sunken surface (input fields, status bars, wells) */
.sunken {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
}

/* Simple raised (outer bevel only) */
.raised-outer {
    box-shadow:
        inset -1px -1px var(--win95-gray),
        inset 1px 1px var(--win95-white);
}

/* Status bar field */
.status-field {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray);
}

/* Etched/groove border (for group boxes) */
.etched {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray);
}

/* Window outer frame */
.window-frame {
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-light),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-white);
}

/* ============================================================
   BUTTONS
   ============================================================ */

.win95-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--win95-bg);
    border: none;
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    min-width: 75px;
    min-height: 23px;
    padding: 1px 12px;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    color: var(--win95-text);
    cursor: default;
    outline: none;
    white-space: nowrap;
}

.win95-btn:active:not(:disabled) {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-black),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-gray);
    padding: 2px 11px 0px 13px;
}

.win95-btn:focus-visible {
    outline: 1px dotted var(--win95-black);
    outline-offset: -4px;
}

.win95-btn:disabled {
    color: var(--win95-gray);
    text-shadow: 1px 1px 0 var(--win95-white);
}

/* Default button (extra border) */
.win95-btn-default {
    border: 2px solid var(--win95-black);
    box-shadow:
        inset -1px -1px var(--win95-gray),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-dark),
        inset 2px 2px var(--win95-light);
}

/* Small toolbar button */
.win95-btn-sm {
    min-width: 23px;
    min-height: 23px;
    padding: 2px;
}

/* Icon-only button (title bar buttons, toolbar) */
.win95-btn-icon {
    min-width: 16px;
    min-height: 14px;
    padding: 0;
    width: 16px;
    height: 14px;
}

/* ============================================================
   TEXT INPUTS
   ============================================================ */

.win95-input,
.win95-textarea,
.win95-select {
    background: var(--win95-white);
    border: none;
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    padding: 3px 4px;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    color: var(--win95-text);
    outline: none;
    resize: none;
}

.win95-input::selection,
.win95-textarea::selection {
    background: var(--win95-navy);
    color: var(--win95-white);
}

.win95-input:disabled,
.win95-textarea:disabled {
    background: var(--win95-bg);
    color: var(--win95-gray);
}

/* ============================================================
   CHECKBOX & RADIO
   ============================================================ */

.win95-checkbox,
.win95-radio {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
}

.win95-checkbox input,
.win95-radio input {
    appearance: none;
    -webkit-appearance: none;
    width: 13px;
    height: 13px;
    background: var(--win95-white);
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    margin: 0;
    cursor: default;
    position: relative;
    flex-shrink: 0;
}

.win95-checkbox input:checked::after {
    content: '';
    position: absolute;
    left: 2px;
    top: 0px;
    width: 7px;
    height: 7px;
    border-left: 2px solid var(--win95-black);
    border-bottom: 2px solid var(--win95-black);
    transform: rotate(-45deg);
    top: 0px;
}

.win95-radio input {
    border-radius: 50%;
}

.win95-radio input:checked::after {
    content: '';
    position: absolute;
    left: 3px;
    top: 3px;
    width: 5px;
    height: 5px;
    background: var(--win95-black);
    border-radius: 50%;
}

/* ============================================================
   SCROLLBARS (Webkit only)
   ============================================================ */

::-webkit-scrollbar {
    width: 16px;
    height: 16px;
    background: var(--win95-bg);
}

::-webkit-scrollbar-track {
    background:
        repeating-conic-gradient(var(--win95-bg) 0% 25%, var(--win95-white) 0% 50%)
        50% / 2px 2px;
}

::-webkit-scrollbar-thumb {
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
}

::-webkit-scrollbar-button {
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    display: block;
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-corner {
    background: var(--win95-bg);
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.win95-progress {
    height: 16px;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    padding: 2px;
    position: relative;
}

.win95-progress-fill {
    height: 100%;
    background: repeating-linear-gradient(
        to right,
        var(--win95-navy) 0px,
        var(--win95-navy) 8px,
        transparent 8px,
        transparent 10px
    );
    transition: width 0.3s linear;
}

/* ============================================================
   TABS — Authentic Win95 tab control
   ============================================================ */

.win95-tabs {
    display: flex;
    padding: 0 0 0 3px;
    gap: 0;
    position: relative;
    /* Sit just above the tab body so active tab covers its top border */
    margin-bottom: 0;
    align-items: flex-end;
}

.win95-tab {
    background: var(--win95-bg);
    border: none;
    padding: 3px 10px 2px;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    cursor: default;
    outline: none;
    position: relative;
    /* Win95 raised border: white top-left, dark bottom-right */
    border-top: 1px solid var(--win95-white);
    border-left: 1px solid var(--win95-white);
    border-right: 1px solid var(--win95-black);
    border-bottom: none;
    /* Outer light shadow lines */
    box-shadow:
        1px 0 0 var(--win95-gray),    /* right outer */
        0 -1px 0 var(--win95-light);  /* top outer */
    border-radius: 2px 2px 0 0;
    margin-right: 2px;
    color: var(--win95-text);
    /* Inactive tabs are slightly shorter — active tab pops up */
    margin-bottom: 0;
    height: 20px;
    display: flex;
    align-items: center;
}

.win95-tab.active {
    height: 22px;
    padding: 3px 10px 4px;
    z-index: 2;
    font-weight: bold;
    /* Active tab extends above the row */
    margin-top: -2px;
    background: var(--win95-bg);
    /* Cover bottom line of tab body */
    border-bottom: 1px solid var(--win95-bg);
}

.win95-tab-body {
    background: var(--win95-bg);
    border: none;
    /* Win95 raised panel borders */
    border-top: 1px solid var(--win95-white);
    border-left: 1px solid var(--win95-white);
    border-right: 1px solid var(--win95-black);
    border-bottom: 1px solid var(--win95-black);
    box-shadow:
        1px 1px 0 var(--win95-gray),
        -1px -1px 0 var(--win95-light);
    padding: 8px;
    position: relative;
    z-index: 1;
}

/* ============================================================
   GROUP BOX (Fieldset)
   ============================================================ */

.win95-group {
    border: none;
    padding: 16px 8px 8px;
    position: relative;
    box-shadow:
        inset 1px 1px var(--win95-gray),
        inset -1px -1px var(--win95-white);
    margin: 8px 0;
}

.win95-group legend {
    background: var(--win95-bg);
    padding: 0 4px;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    margin-left: 8px;
}

/* ============================================================
   DROPDOWN / SELECT
   ============================================================ */

.win95-dropdown {
    display: inline-flex;
    align-items: stretch;
    height: 21px;
}

.win95-dropdown-text {
    flex: 1;
    background: var(--win95-white);
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    padding: 2px 4px;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 15px;
}

.win95-dropdown-arrow {
    width: 17px;
    background: var(--win95-bg);
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
}

.win95-dropdown-arrow::after {
    content: '';
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid var(--win95-black);
}

/* ============================================================
   TOOLTIP
   ============================================================ */

.win95-tooltip {
    position: absolute;
    background: var(--win95-tooltip-bg);
    border: 1px solid var(--win95-black);
    padding: 2px 4px;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
    white-space: nowrap;
    z-index: 10000;
    pointer-events: none;
}

/* ============================================================
   SEPARATOR
   ============================================================ */

.win95-separator-h {
    height: 2px;
    background: none;
    box-shadow:
        inset 0 1px var(--win95-gray),
        inset 0 -1px var(--win95-white);
    margin: 4px 0;
    border: none;
}

.win95-separator-v {
    width: 2px;
    align-self: stretch;
    box-shadow:
        inset 1px 0 var(--win95-gray),
        inset -1px 0 var(--win95-white);
    margin: 0 4px;
}

/* ============================================================
   TREE VIEW
   ============================================================ */

.win95-tree {
    background: var(--win95-white);
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    padding: 2px;
    overflow: auto;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
}

.win95-tree ul {
    list-style: none;
    padding-left: 16px;
}

.win95-tree > ul {
    padding-left: 4px;
}

.win95-tree li {
    position: relative;
    padding: 1px 0;
}

.win95-tree .tree-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 2px;
    cursor: default;
}

.win95-tree .tree-item.selected {
    background: var(--win95-navy);
    color: var(--win95-white);
}

.win95-tree .tree-toggle {
    width: 9px;
    height: 9px;
    border: 1px solid var(--win95-gray);
    background: var(--win95-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    cursor: default;
    margin-right: 2px;
    flex-shrink: 0;
}

/* ============================================================
   LIST VIEW (Details mode)
   ============================================================ */

.win95-listview {
    background: var(--win95-white);
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-gray),
        inset -2px -2px var(--win95-light),
        inset 2px 2px var(--win95-dark);
    overflow: auto;
    font-family: var(--win95-font);
    font-size: var(--win95-font-size);
}

.win95-listview-header {
    display: flex;
    background: var(--win95-bg);
    position: sticky;
    top: 0;
    z-index: 1;
}

.win95-listview-col {
    padding: 2px 6px;
    box-shadow:
        inset -1px -1px var(--win95-black),
        inset 1px 1px var(--win95-white),
        inset -2px -2px var(--win95-gray),
        inset 2px 2px var(--win95-light);
    cursor: default;
    white-space: nowrap;
    overflow: hidden;
}

.win95-listview-row {
    display: flex;
    align-items: center;
    cursor: default;
}

.win95-listview-row.selected {
    background: var(--win95-navy);
    color: var(--win95-white);
}

.win95-listview-cell {
    padding: 1px 6px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* ============================================================
   TOOLBAR
   ============================================================ */

.win95-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    background: var(--win95-bg);
    box-shadow:
        inset 0 -1px var(--win95-gray),
        inset 0 1px var(--win95-white);
}

.win95-toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--win95-bg);
    border: none;
    width: 24px;
    height: 22px;
    padding: 0;
    cursor: default;
    outline: none;
    box-shadow: none;
    color: var(--win95-text);
    font-size: 12px;
}

.win95-toolbar-btn:active:not(:disabled) {
    box-shadow:
        inset -1px -1px var(--win95-white),
        inset 1px 1px var(--win95-black);
    padding: 1px 0 0 1px;
}

.win95-toolbar-btn:disabled {
    color: var(--win95-gray);
    text-shadow: 1px 1px 0 var(--win95-white);
}

/* ============================================================
   UTILITIES
   ============================================================ */

.text-ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.no-select {
    user-select: none;
    -webkit-user-select: none;
}

.flex-row { display: flex; flex-direction: row; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.gap-4 { gap: 4px; }
.gap-8 { gap: 8px; }
.p-4 { padding: 4px; }
.p-8 { padding: 8px; }
.mt-4 { margin-top: 4px; }
.mt-8 { margin-top: 8px; }
.mb-4 { margin-bottom: 4px; }
.mb-8 { margin-bottom: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.text-center { text-align: center; }
.text-right { text-align: right; }
.bold { font-weight: bold; }
.relative { position: relative; }
.absolute { position: absolute; }
.w-full { width: 100%; }
.h-full { height: 100%; }