/* WokTrak base styles. Bootstrap 5 does the heavy lifting; this file adds the brand look.
   The app runs in dark mode (html has data-bs-theme="dark"), so this file drives Bootstrap's
   own dark-theme CSS variables with WokTrak's navy palette, instead of leaving Bootstrap's
   generic grey dark theme. That way every stock Bootstrap component - cards, tables, forms,
   dropdowns, modals, alerts, badges - picks up the right colours automatically, and this file
   only has to add what's genuinely WokTrak's own (topbar, sidebar, stat cards, the login page).

   On top of that base, this file leans "HUD/console" - glowing teal edges, translucent glass
   panels floating over a faint circuit-grid backdrop, monospace figures for numbers - using only
   CSS (no new fonts, images or JS), so it stays dependency-free like the rest of the project. */

:root,
[data-bs-theme="dark"] {
    /* ---- WokTrak palette ---- */
    --wt-navy: #1f3a5f;          /* topbar / sidebar / mid-tone accent */
    --wt-navy-dark: #0f2338;     /* sidebar drawer background */
    --wt-teal: #1c7c7d;          /* primary accent (links, primary buttons, highlights) */
    --wt-teal-dark: #17696a;
    --wt-teal-light: #7fd6d6;    /* accent text/icons on dark backgrounds */
    --wt-bg: #0b1726;            /* page background - near-black navy */
    --wt-panel: #13233a;         /* card / panel background - one step lighter than the page */
    --wt-panel-2: #182a44;       /* a further step up, for headers/footers inside a panel */
    --wt-border: #24374f;        /* subtle borders on a dark background */
    --wt-text-muted: #8da2bd;    /* muted/secondary text that stays readable on navy */
    --wt-glow: rgba(127, 214, 214, .35);   /* teal glow used on edges and hover states */
    --wt-mono: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
    --wt-topbar-h: 56px;

    /* ---- drive Bootstrap's own dark-theme variables with the palette above ---- */
    --bs-body-bg: var(--wt-bg);
    --bs-body-bg-rgb: 11, 23, 38;
    --bs-body-color: #e7edf5;
    --bs-body-color-rgb: 231, 237, 245;
    --bs-emphasis-color: #ffffff;
    --bs-secondary-color: var(--wt-text-muted);
    --bs-tertiary-bg: var(--wt-panel-2);
    --bs-secondary-bg: var(--wt-panel);
    --bs-border-color: var(--wt-border);
    --bs-border-color-translucent: var(--wt-border);
    --bs-link-color: var(--wt-teal-light);
    --bs-link-hover-color: #a9e6e6;
    --bs-link-color-rgb: 127, 214, 214;
    --bs-link-hover-color-rgb: 169, 230, 230;
    --bs-primary: var(--wt-teal);
    --bs-primary-rgb: 28, 124, 125;

    --bs-card-bg: var(--wt-panel);
    --bs-card-border-color: var(--wt-border);
    --bs-card-cap-bg: var(--wt-panel-2);

    --bs-table-bg: transparent;
    --bs-table-color: var(--bs-body-color);
    --bs-table-border-color: var(--wt-border);
    --bs-table-striped-bg: rgba(255, 255, 255, .03);
    --bs-table-hover-bg: rgba(127, 214, 214, .07);

    --bs-form-control-bg: var(--wt-panel-2);

    --bs-modal-bg: var(--wt-panel);
    --bs-modal-header-border-color: var(--wt-border);
    --bs-modal-footer-border-color: var(--wt-border);

    --bs-dropdown-bg: var(--wt-panel-2);
    --bs-dropdown-link-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: rgba(255, 255, 255, .06);
    --bs-dropdown-border-color: var(--wt-border);
    --bs-dropdown-divider-bg: var(--wt-border);
}

/* Faint circuit-grid backdrop: two super-low-opacity line grids (fine + coarse) fixed to the
   viewport, sitting behind every panel. It reads as texture, not pattern, so it never competes
   with content - the moment you stop looking for it, you stop seeing it. */
body {
    background-color: var(--wt-bg);
    background-image:
        linear-gradient(rgba(127, 214, 214, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 214, 214, .05) 1px, transparent 1px),
        linear-gradient(rgba(127, 214, 214, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 214, 214, .025) 1px, transparent 1px);
    background-size: 88px 88px, 88px 88px, 22px 22px, 22px 22px;
    background-attachment: fixed;
}

/* thin teal scrollbar, in keeping with the HUD look (no-op in browsers that don't support it) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wt-bg); }
::-webkit-scrollbar-thumb { background: var(--wt-border); border-radius: 6px; border: 2px solid var(--wt-bg); }
::-webkit-scrollbar-thumb:hover { background: var(--wt-teal); }
* { scrollbar-color: var(--wt-border) var(--wt-bg); scrollbar-width: thin; }

/* Bootstrap's dark theme doesn't repaint every stock-white utility; these are used in a few
   places (card footers, small popovers) as "match the card, not pure white". */
.bg-white { background-color: var(--wt-panel-2) !important; }
/* ...except where white is genuinely the point (a one-time password shown to copy/paste). */
code.bg-white { background-color: #ffffff !important; color: #16304f !important; }

.form-control:disabled, .form-select:disabled { background-color: var(--wt-panel); }
.form-control:focus, .form-select:focus {
    border-color: var(--wt-teal);
    box-shadow: 0 0 0 .2rem var(--wt-glow);
}

/* ---------- top bar ---------- */
.wt-topbar {
    background: linear-gradient(180deg, var(--wt-navy) 0%, #182f4d 100%);
    height: var(--wt-topbar-h);
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    z-index: 1030;
    box-shadow: 0 1px 0 rgba(127, 214, 214, .25), 0 2px 16px rgba(0, 0, 0, .35);
}
.wt-brand {
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
    text-decoration: none;
    letter-spacing: .3px;
}
.wt-brand i {
    color: var(--wt-teal-light);
    margin-right: 4px;
    text-shadow: 0 0 10px rgba(127, 214, 214, .8);
    animation: wt-pulse 3.5s ease-in-out infinite;
}
@keyframes wt-pulse {
    0%, 100% { text-shadow: 0 0 6px rgba(127, 214, 214, .6); }
    50%      { text-shadow: 0 0 14px rgba(127, 214, 214, 1); }
}
.wt-usermenu { color: #fff; border: 0; transition: background-color .15s ease; }
.wt-usermenu:hover, .wt-usermenu:focus, .wt-usermenu.show { color: #fff; background: rgba(127, 214, 214, .12); }
.wt-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--wt-teal); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .85rem;
    box-shadow: 0 0 0 2px rgba(127, 214, 214, .3), 0 0 10px rgba(28, 124, 125, .6);
}

/* ---------- layout shell ---------- */
.wt-shell {
    display: flex;
    min-height: calc(100vh - var(--wt-topbar-h));
}
.wt-main {
    flex: 1 1 auto;
    min-width: 0;               /* lets wide tables scroll instead of stretching the page */
    padding: 1.5rem;
}
.wt-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 1.25rem;
    letter-spacing: .2px;
}
.wt-footer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--wt-border);
    font-size: .8rem;
    color: var(--wt-text-muted);
}

/* ---------- sidebar ---------- */
.wt-sidebar-col {
    background: var(--wt-navy-dark);
    border-right: 1px solid rgba(127, 214, 214, .12);
}
.wt-sidebar {
    --bs-offcanvas-width: 270px;
    --bs-offcanvas-bg: var(--wt-navy-dark);
}
@media (min-width: 992px) {
    .wt-sidebar-col {
        flex: 0 0 260px;
        width: 260px;
        position: sticky;
        top: var(--wt-topbar-h);
        align-self: flex-start;
        height: calc(100vh - var(--wt-topbar-h));
        overflow-y: auto;
    }
}
@media (max-width: 991.98px) {
    /* the drawer is position:fixed, so the column itself takes no space */
    .wt-sidebar-col { flex: 0 0 0; width: 0; }
}

.wt-nav-section {
    color: #8fa6c0;
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
    padding: 1rem 1.25rem .35rem;
}
.wt-nav-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .5rem 1.25rem;
    color: #dbe5f0;
    text-decoration: none;
    font-size: .92rem;
    border-left: 3px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wt-nav-link i { font-size: 1.05rem; width: 1.25rem; text-align: center; }
a.wt-nav-link:hover { background: rgba(127, 214, 214, .08); color: #fff; border-left-color: rgba(127, 214, 214, .4); }
a.wt-nav-link.active {
    background: linear-gradient(90deg, rgba(28, 124, 125, .38) 0%, rgba(28, 124, 125, .08) 100%);
    border-left-color: var(--wt-teal-light);
    box-shadow: inset 0 0 14px rgba(28, 124, 125, .25);
    color: #fff;
}
.wt-nav-link.disabled { opacity: .5; cursor: default; }
.wt-soon {
    margin-left: auto;
    font-style: normal;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: rgba(255, 255, 255, .15);
    padding: 1px 6px;
    border-radius: 8px;
}

/* ---------- buttons and cards ---------- */
.wt-btn-primary {
    background: linear-gradient(135deg, var(--wt-teal) 0%, var(--wt-teal-dark) 100%);
    border-color: var(--wt-teal);
    color: #fff;
    transition: box-shadow .15s ease, filter .15s ease;
}
.wt-btn-primary:hover, .wt-btn-primary:focus {
    background: linear-gradient(135deg, var(--wt-teal-dark) 0%, var(--wt-teal) 100%);
    border-color: var(--wt-teal-dark);
    color: #fff;
    box-shadow: 0 0 0 .18rem var(--wt-glow), 0 0 16px rgba(28, 124, 125, .55);
}

.wt-stat {
    border: 1px solid var(--wt-border);
    border-top: 2px solid var(--wt-teal);
    background: linear-gradient(180deg, rgba(127, 214, 214, .05) 0%, transparent 60%), var(--wt-panel);
    box-shadow: 0 0 0 1px rgba(127, 214, 214, .06), 0 4px 18px rgba(0, 0, 0, .35);
    backdrop-filter: blur(6px);
    transition: transform .15s ease, box-shadow .15s ease;
}
a:hover > .wt-stat, .wt-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(127, 214, 214, .18), 0 10px 26px rgba(0, 0, 0, .45), 0 0 18px rgba(28, 124, 125, .25);
}
.wt-stat.border-success { border-top-color: #34c37a; }
.wt-stat.border-warning { border-top-color: #e0a93d; }
.wt-stat.border-danger  { border-top-color: #e2544f; }
.wt-stat-label { font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: var(--wt-text-muted); font-weight: 600; }
.wt-stat-value {
    font-family: var(--wt-mono);
    font-size: 1.22rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: #ffffff;
    margin-top: .25rem;
    text-shadow: 0 0 14px rgba(127, 214, 214, .18);
}

/* Dashboard stat strip (dashboard/_cards.php): one slim horizontal bar per section, all stats
   in a row separated by dividers, a coloured dot instead of a border for tone - the compact
   replacement for the old full-size .wt-stat cards on the dashboard specifically. Other pages
   that still use .wt-stat directly (Budgets, Workload, Tasks, etc.) are untouched by this. */
.wt-strip {
    display: flex; flex-wrap: wrap;
    border: 1px solid var(--wt-border);
    border-radius: .5rem;
    background: var(--wt-panel);
    margin-bottom: 1.25rem;
    overflow: hidden;
}
.wt-strip-item {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .6rem 1.1rem;
    flex: 1 1 auto;
    border-right: 1px solid var(--wt-border);
    text-decoration: none;
    color: inherit;
    transition: background .15s ease;
}
.wt-strip-item:last-child { border-right: none; }
.wt-strip-item:hover { background: rgba(127, 214, 214, .07); color: inherit; }
.wt-strip-value {
    font-family: var(--wt-mono);
    font-weight: 700;
    font-size: 1.05rem;
    color: #ffffff;
}
.wt-strip-value.dot::before {
    content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
    margin-right: .45rem; background: var(--wt-text-muted); vertical-align: middle;
}
.wt-strip-item.tone-success .wt-strip-value.dot::before { background: #34c37a; }
.wt-strip-item.tone-warning .wt-strip-value.dot::before { background: #e0a93d; }
.wt-strip-item.tone-danger  .wt-strip-value.dot::before { background: #e2544f; }
.wt-strip-label {
    font-size: .68rem; text-transform: uppercase; letter-spacing: .06em;
    color: var(--wt-text-muted); font-weight: 600; white-space: nowrap;
}

.card {
    border: 1px solid var(--wt-border) !important;
    box-shadow: 0 0 0 1px rgba(127, 214, 214, .04), 0 4px 16px rgba(0, 0, 0, .35) !important;
    backdrop-filter: blur(6px);
}
.shadow-sm { box-shadow: 0 0 0 1px rgba(127, 214, 214, .04), 0 4px 16px rgba(0, 0, 0, .35) !important; }
.card-header { letter-spacing: .02em; }

/* ---------- login page ---------- */
.wt-login-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background:
        linear-gradient(rgba(127, 214, 214, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(127, 214, 214, .06) 1px, transparent 1px),
        linear-gradient(135deg, var(--wt-navy) 0%, var(--wt-teal) 100%);
    background-size: 48px 48px, 48px 48px, cover;
}
.wt-login-logo {
    font-size: 3rem;
    line-height: 1;
    color: #bfe9e9;
    text-shadow: 0 0 24px rgba(191, 233, 233, .7);
}