/**
 * MWDPro Design System v1.0
 * ─────────────────────────────────────────────────────────────────────────────
 * Global tokens and shared components for the Members maintenance portal and
 * other data-dense MWD (Measurement While Drilling) operator interfaces.
 *
 * Usage (every members module page):
 *   <link rel="stylesheet" href="/css/mwdpro-design-system.css?v=1">
 *   <link rel="stylesheet" href="/css/members-<module>.css?v=N">
 *
 * See docs/MWDPRO-DESIGN-SYSTEM.md for full guidelines.
 */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto+Mono:wght@400;500;600&family=Poppins:wght@400;600;700;900&display=swap");

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── 8px spacing grid ── */
    --mwd-space-0: 0;
    --mwd-space-1: 8px;
    --mwd-space-2: 16px;
    --mwd-space-3: 24px;
    --mwd-space-4: 32px;
    --mwd-space-5: 40px;
    --mwd-space-6: 48px;

    /* ── Typography ── */
    --mwd-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
    --mwd-font-mono: "Roboto Mono", "SF Mono", ui-monospace, monospace;
    --mwd-font-brand: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;

    --mwd-text-xs: 10px;
    --mwd-text-sm: 12px;
    --mwd-text-base: 13px;
    --mwd-text-md: 14px;
    --mwd-text-lg: 16px;
    --mwd-text-xl: 18px;

    --mwd-weight-normal: 400;
    --mwd-weight-medium: 500;
    --mwd-weight-semibold: 600;
    --mwd-weight-bold: 700;

    --mwd-leading-tight: 1.3;
    --mwd-leading-normal: 1.45;
    --mwd-leading-relaxed: 1.5;

    --mwd-tracking-caps: 0.06em;
    --mwd-tracking-wide: 0.04em;

    /* ── Operations palette (data-dense dashboards) ── */
    --mwd-color-page: #eef1f5;
    --mwd-color-surface: #ffffff;
    --mwd-color-surface-muted: #f8fafc;
    --mwd-color-surface-subtle: #f1f5f9;
    --mwd-color-border: #cbd5e1;
    --mwd-color-border-strong: #94a3b8;
    --mwd-color-text: #0f172a;
    --mwd-color-text-muted: #64748b;
    --mwd-color-text-inverse: #f8fafc;

    --mwd-color-navy: #0f2744;
    --mwd-color-navy-light: #1a365d;
    --mwd-color-accent: #1e4976;
    --mwd-color-accent-hover: #163a5f;
    --mwd-color-accent-focus: rgba(30, 73, 118, 0.2);

    /* ── Status system (use sparingly — badges & accents only) ── */
    --mwd-status-critical: #b42318;
    --mwd-status-critical-bg: #fef3f2;
    --mwd-status-critical-border: #fecaca;

    --mwd-status-warning: #b45309;
    --mwd-status-warning-bg: #fffbeb;
    --mwd-status-warning-border: #fde68a;

    --mwd-status-ready: #15803d;
    --mwd-status-ready-bg: #f0fdf4;
    --mwd-status-ready-border: #bbf7d0;

    --mwd-status-neutral: #64748b;
    --mwd-status-neutral-bg: #f1f5f9;
    --mwd-status-neutral-border: #e2e8f0;

    /* ── APS brand palette (marketing / dashboard hub) ── */
    --mwd-brand-navy: #092249;
    --mwd-brand-blue: #0f2f86;
    --mwd-brand-orange: #e98026;
    --mwd-brand-orange-hover: #d6741f;
    --mwd-brand-gray-bg: #e9e9e9;
    --mwd-brand-gray-light: #f5f5f5;
    --mwd-brand-text: #4d4d4d;
    --mwd-brand-text-dark: #1a1a1a;
    --mwd-brand-white: #ffffff;
    --mwd-brand-panel-border: #d5d5d5;

    /* Legacy aliases — existing dashboard CSS (--aps-*) */
    --aps-navy: var(--mwd-brand-navy);
    --aps-blue: var(--mwd-brand-blue);
    --aps-orange: var(--mwd-brand-orange);
    --aps-gray-bg: var(--mwd-brand-gray-bg);
    --aps-gray-light: var(--mwd-brand-gray-light);
    --aps-text: var(--mwd-brand-text);
    --aps-text-dark: var(--mwd-brand-text-dark);
    --aps-white: var(--mwd-brand-white);
    --aps-panel-border: var(--mwd-brand-panel-border);
    --aps-font: var(--mwd-font-brand);

    /* ── Layout ── */
    --mwd-max-width-ops: 1440px;
    --mwd-max-width-brand: 1400px;
    --mwd-sidebar-width: 260px;
    --mwd-sidebar-width-narrow: 220px;

    /* ── Shape & elevation ── */
    --mwd-radius-sm: 4px;
    --mwd-radius: 6px;
    --mwd-radius-lg: 8px;
    --mwd-shadow-sm: 0 1px 2px rgba(15, 39, 68, 0.04);
    --mwd-shadow: 0 1px 3px rgba(15, 39, 68, 0.08), 0 1px 2px rgba(15, 39, 68, 0.04);
    --mwd-shadow-lg: 0 4px 16px rgba(15, 39, 68, 0.1);

    /* ── Transitions ── */
    --mwd-transition-fast: 0.15s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE — operations pages
   Apply class="mwd-ops-page" on <body> for data-dense module screens.
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-ops-page {
    margin: 0;
    font-family: var(--mwd-font-sans);
    font-size: var(--mwd-text-base);
    line-height: var(--mwd-leading-normal);
    color: var(--mwd-color-text);
    background: var(--mwd-color-page);
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-mono {
    font-family: var(--mwd-font-mono);
    font-variant-numeric: tabular-nums;
}

.mwd-caps {
    font-size: var(--mwd-text-xs);
    font-weight: var(--mwd-weight-semibold);
    letter-spacing: var(--mwd-tracking-caps);
    text-transform: uppercase;
}

.mwd-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-ops-shell {
    max-width: var(--mwd-max-width-ops);
    margin: 0 auto;
    padding: var(--mwd-space-1) var(--mwd-space-2) var(--mwd-space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TOP BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mwd-space-2);
    padding: var(--mwd-space-1) 0;
    font-size: var(--mwd-text-sm);
}

.mwd-topbar__back {
    color: var(--mwd-color-accent);
    text-decoration: none;
    font-weight: var(--mwd-weight-semibold);
}

.mwd-topbar__back:hover {
    text-decoration: underline;
    color: var(--mwd-color-accent-hover);
}

.mwd-topbar__actions {
    display: flex;
    gap: var(--mwd-space-1);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: var(--mwd-text-sm);
    font-weight: var(--mwd-weight-semibold);
    line-height: 1.2;
    border: 1px solid var(--mwd-color-border);
    border-radius: var(--mwd-radius);
    background: var(--mwd-color-surface);
    color: var(--mwd-color-text);
    cursor: pointer;
    transition: background var(--mwd-transition-fast), border-color var(--mwd-transition-fast), color var(--mwd-transition-fast);
}

.mwd-btn:hover {
    background: var(--mwd-color-surface-muted);
    border-color: var(--mwd-color-border-strong);
}

.mwd-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mwd-btn--primary {
    color: var(--mwd-color-text-inverse);
    background: var(--mwd-color-accent);
    border-color: var(--mwd-color-accent);
}

.mwd-btn--primary:hover:not(:disabled) {
    background: var(--mwd-color-accent-hover);
    border-color: var(--mwd-color-accent-hover);
}

.mwd-btn--brand {
    color: var(--mwd-color-text-inverse);
    background: var(--mwd-brand-orange);
    border-color: var(--mwd-brand-orange-hover);
}

.mwd-btn--brand:hover:not(:disabled) {
    background: var(--mwd-brand-orange-hover);
}

.mwd-btn--danger {
    color: var(--mwd-status-critical);
    background: var(--mwd-status-critical-bg);
    border-color: var(--mwd-status-critical-border);
}

.mwd-btn--danger:hover:not(:disabled) {
    background: #fee2e2;
    border-color: #fca5a5;
}

.mwd-btn--caps {
    font-size: 11px;
    font-weight: var(--mwd-weight-bold);
    letter-spacing: var(--mwd-tracking-wide);
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════════
   OPERATIONS HEADER (navy bar)
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-ops-header {
    display: flex;
    align-items: center;
    gap: var(--mwd-space-2);
    min-height: 56px;
    padding: var(--mwd-space-1) var(--mwd-space-2);
    background: var(--mwd-color-navy);
    border-radius: var(--mwd-radius) var(--mwd-radius) 0 0;
    box-shadow: var(--mwd-shadow);
}

.mwd-ops-header__brand {
    display: flex;
    align-items: center;
    gap: var(--mwd-space-2);
    min-width: 0;
}

.mwd-ops-header__logo img {
    display: block;
    height: 40px;
    width: auto;
}

.mwd-ops-header__tag {
    display: block;
    font-size: var(--mwd-text-xs);
    font-weight: var(--mwd-weight-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94a3b8;
}

.mwd-ops-header__title {
    font-size: var(--mwd-text-md);
    font-weight: var(--mwd-weight-semibold);
    color: var(--mwd-color-text-inverse);
    white-space: nowrap;
}

.mwd-ops-header__tools {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--mwd-space-1);
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-card {
    background: var(--mwd-color-surface);
    border: 1px solid var(--mwd-color-border);
    border-radius: var(--mwd-radius);
    box-shadow: var(--mwd-shadow);
    overflow: hidden;
}

.mwd-card__header {
    margin: 0;
    padding: 8px 12px;
    font-size: 11px;
    font-weight: var(--mwd-weight-bold);
    letter-spacing: var(--mwd-tracking-caps);
    text-transform: uppercase;
    text-align: left;
    color: var(--mwd-color-navy);
    background: var(--mwd-color-surface-muted);
    border-bottom: 1px solid var(--mwd-color-border);
}

.mwd-card__body {
    padding: var(--mwd-space-2);
}

.mwd-panel {
    background: var(--mwd-color-surface);
    border: 1px solid var(--mwd-color-border);
    border-top: none;
    border-radius: 0 0 var(--mwd-radius) var(--mwd-radius);
    box-shadow: var(--mwd-shadow);
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STATUS BADGES
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--mwd-text-sm);
    font-weight: var(--mwd-weight-semibold);
}

.mwd-status::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--mwd-status-neutral);
}

.mwd-status--critical {
    color: var(--mwd-status-critical);
    background: var(--mwd-status-critical-bg);
}

.mwd-status--critical::before {
    background: var(--mwd-status-critical);
}

.mwd-status--warning {
    color: var(--mwd-status-warning);
    background: var(--mwd-status-warning-bg);
}

.mwd-status--warning::before {
    background: var(--mwd-status-warning);
}

.mwd-status--ready {
    color: var(--mwd-status-ready);
    background: var(--mwd-status-ready-bg);
}

.mwd-status--ready::before {
    background: var(--mwd-status-ready);
}

.mwd-status--neutral {
    color: var(--mwd-status-neutral);
    background: var(--mwd-status-neutral-bg);
}

.mwd-status--neutral::before {
    background: var(--mwd-status-neutral);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-field-label {
    display: block;
    padding: 4px 8px;
    font-size: var(--mwd-text-xs);
    font-weight: var(--mwd-weight-semibold);
    letter-spacing: var(--mwd-tracking-caps);
    text-transform: uppercase;
    color: var(--mwd-color-text-muted);
    background: var(--mwd-color-surface-muted);
    border-bottom: 1px solid var(--mwd-color-border);
}

.mwd-input,
.mwd-select {
    width: 100%;
    height: 32px;
    padding: 0 12px;
    font-family: inherit;
    font-size: var(--mwd-text-sm);
    color: var(--mwd-color-text);
    background: var(--mwd-color-surface);
    border: 1px solid var(--mwd-color-border);
    border-radius: var(--mwd-radius);
    outline: none;
}

.mwd-input:focus,
.mwd-select:focus {
    border-color: var(--mwd-color-accent);
    box-shadow: 0 0 0 2px var(--mwd-color-accent-focus);
}

.mwd-input--mono {
    font-family: var(--mwd-font-mono);
    font-variant-numeric: tabular-nums;
}

.mwd-input--search {
    height: 32px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DATA TABLES (engineering ledger)
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-table-wrap {
    overflow-x: auto;
}

.mwd-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: var(--mwd-color-surface);
    font-size: var(--mwd-text-sm);
    line-height: var(--mwd-leading-tight);
}

.mwd-table th,
.mwd-table td {
    border-bottom: 1px solid var(--mwd-color-border);
    border-right: 1px solid var(--mwd-color-surface-subtle);
    padding: 6px 10px;
    text-align: left;
}

.mwd-table th:last-child,
.mwd-table td:last-child {
    border-right: none;
}

.mwd-table thead th {
    font-size: var(--mwd-text-xs);
    font-weight: var(--mwd-weight-bold);
    letter-spacing: var(--mwd-tracking-wide);
    text-transform: uppercase;
    color: var(--mwd-color-text-muted);
    background: #e2e8f0;
}

.mwd-table tbody tr:nth-child(even) {
    background: var(--mwd-color-surface-muted);
}

.mwd-table tbody tr:last-child td {
    border-bottom: none;
}

.mwd-table .mwd-table__num {
    font-family: var(--mwd-font-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.mwd-table tfoot td {
    background: #e2e8f0;
    font-weight: var(--mwd-weight-bold);
    border-top: 2px solid var(--mwd-color-border-strong);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CSS-ONLY TABS
   Place radio inputs + .mwd-tabs nav as siblings before the panel container.
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-tab-control {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mwd-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--mwd-space-2);
    background: var(--mwd-color-navy-light);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.mwd-tabs__tab {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: var(--mwd-weight-semibold);
    letter-spacing: var(--mwd-tracking-wide);
    text-transform: uppercase;
    color: #94a3b8;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--mwd-transition-fast), border-color var(--mwd-transition-fast), background var(--mwd-transition-fast);
    user-select: none;
}

.mwd-tabs__tab:hover {
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.05);
}

.mwd-tab-panel {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SPLIT DASHBOARD GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-split {
    display: grid;
    grid-template-columns: var(--mwd-sidebar-width) 1fr;
    min-height: 480px;
}

.mwd-split__sidebar {
    background: var(--mwd-color-surface-muted);
    border-right: 1px solid var(--mwd-color-border);
    padding: var(--mwd-space-1);
    overflow-y: auto;
}

.mwd-split__main {
    padding: var(--mwd-space-2);
    background: var(--mwd-color-page);
    overflow-y: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12-COLUMN GRID
   ═══════════════════════════════════════════════════════════════════════════ */

.mwd-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--mwd-space-1);
}

.mwd-col-span-3 { grid-column: span 3; }
.mwd-col-span-4 { grid-column: span 4; }
.mwd-col-span-6 { grid-column: span 6; }
.mwd-col-span-12 { grid-column: span 12; }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE — shared breakpoints
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
    .mwd-split {
        grid-template-columns: var(--mwd-sidebar-width-narrow) 1fr;
    }

    .mwd-col-span-3 {
        grid-column: span 4;
    }
}

@media (max-width: 900px) {
    .mwd-split {
        grid-template-columns: 1fr;
    }

    .mwd-split__sidebar {
        border-right: none;
        border-bottom: 1px solid var(--mwd-color-border);
    }

    .mwd-ops-header {
        flex-wrap: wrap;
    }

    .mwd-ops-header__tools {
        width: 100%;
        margin-left: 0;
        flex-wrap: wrap;
        padding-top: var(--mwd-space-1);
    }

    .mwd-tabs {
        overflow-x: auto;
    }

    .mwd-tabs__tab {
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .mwd-col-span-3,
    .mwd-col-span-4,
    .mwd-col-span-6 {
        grid-column: span 12;
    }
}

@media print {
    .mwd-tabs,
    .mwd-topbar,
    .mwd-ops-header__tools {
        display: none !important;
    }

    .mwd-tab-panel {
        display: block !important;
    }
}