@import url('./css/tokens.css');

/* ═══════════════════════════════════════════════════════════════
   MDGRUPPE AI Operating System — Brand Design System
   Gotham Typography · Gold/Charcoal Identity · CC-253
   ═══════════════════════════════════════════════════════════════ */

/* ── Web Fonts ───────────────────────────────────────────────── */
@font-face {
    font-family: 'Gotham';
    src: url('/static/fonts/Gotham-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Gotham';
    src: url('/static/fonts/Gotham-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

/* ── Design Tokens ────────────────────────────────────────────── */
/* ============================================================== *
 *  DEPRECATED ALIASES — scheduled for removal 2026-06-05          *
 *  Source of truth: app/static/css/tokens.css (MD-locked 0fb15a6) *
 *  Per DESIGN-SPEC-2026-04-24-OSUX01 v1.1 § 8.3.                  *
 *                                                                 *
 *  Rules:                                                         *
 *   1. If a token name is identical in tokens.css (e.g.           *
 *      --font-primary, --color-text, --r), it is NOT redeclared   *
 *      here — tokens.css is the single declaration and            *
 *      self-aliasing would cycle.                                 *
 *   2. Tokens whose brand-era name differs from the canonical     *
 *      (e.g. --color-group → --bu-gold) are kept as one-line      *
 *      aliases so legacy call sites keep resolving.               *
 *   3. Brand-era tokens without a canonical equivalent keep their *
 *      original value but are tagged DEPRECATED for sweep.        *
 *  Do NOT add new --color-* tokens here — add them to tokens.css  *
 *  via the governed ADR process.                                  *
 * ============================================================== */
:root {
    /* DEPRECATED aliases — BU palette (brand-era names → canonical --bu-* tokens) */
    --color-group:   var(--bu-gold);      /* was #C9920E — matches */
    --color-mdrtg:   var(--bu-mdrtg);     /* was #1E4488 — matches */
    --color-cempc:   var(--bu-cempc);     /* was #6D2A3C — matches */
    --color-mda:     var(--bu-mda);       /* was #1D5732 — matches */
    --color-rytek:   var(--bu-rytek);     /* was #B83D26 — matches */
    --color-fasti:   var(--bu-fasti);     /* was #2A5F8F (blue) — reconciled to canonical #4CAF50 (green) per recon Finding 2 */
    --color-joyful:  var(--bu-joyful);    /* was #B5502A — matches */

    /* DEPRECATED — no canonical equivalent; kept verbatim until the Week 6 sweep */
    --color-inactive:     var(--warm-400);
    --color-gray:         #84898D;              /* Pantone Cool Gray 8 */
    --color-group-light:  #D9A530;
    --color-group-faint:  rgba(201, 146, 14, 0.08);
    --color-group-border: rgba(201, 146, 14, 0.25);
    --color-green-bg:     rgba(27, 138, 58, 0.08);
    --color-bg:           var(--color-surface); /* brand-era alias for "page background = white" */

    /* DEPRECATED aliases — text/status (brand-era names → canonical tokens) */
    --color-text-secondary: var(--color-text-muted);  /* was #666666 — matches */
    --color-muted:          var(--color-text-subtle); /* was #999999 — matches */
    --color-green:          var(--color-success);     /* was #1B8A3A — matches */
    --color-red:            var(--color-danger);      /* was #C0392B — matches */

    /* Tokens with identical names in tokens.css (--font-primary, --font-mono,
       --color-text, --color-surface, --color-border, --r, --r-lg) are NOT
       redeclared here — self-aliasing cycles and would break them. The brand-
       era values diverged in three cases; tokens.css is canonical and wins:
         --font-primary: was 'Gotham','Montserrat','Arial',sans-serif
                          → now 'Gotham',system-ui,sans-serif (tokens canonical)
         --color-surface: was #F7F7F7 (brand secondary surface)
                          → now #FFFFFF (tokens primary surface)
                          → brand-era callers wanting the grey page background
                            should migrate to var(--color-surface-alt).
         --color-border:  was #E8E8E8 — identical, no behaviour change. */
}

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

body {
    font-family: var(--font-primary);
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Login Screen ─────────────────────────────────────────────── */
.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 48px 40px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
}

.login-brand {
    text-align: center;
    margin-bottom: 36px;
}

/* ── Logo Mark ────────────────────────────────────────────────── */
.logo-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.logo-mark-lg {
    width: 60px;
    height: 60px;
    margin: 0 auto 16px;
    display: block;
}

.login-brand .wordmark {
    font-size: var(--type-xl);
    font-weight: 500;
    letter-spacing: -0.5px;
    margin-bottom: 4px;
}

.login-brand .wordmark .md { color: var(--color-text); }
.login-brand .wordmark .gruppe { color: var(--color-group); }

.login-brand .tagline {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-group);
    letter-spacing: 1px;
}

.login-divider {
    width: 40px;
    height: 2px;
    background: var(--color-group);
    margin: 16px auto 0;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: var(--type-xs);
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.form-group input {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--font-primary);
    font-size: var(--type-md);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--r);
    background: var(--color-bg);
    outline: none;
    transition: border-color 0.2s;
}

.form-group input:focus {
    border-color: var(--color-group);
}

.form-group input::placeholder {
    color: var(--warm-300);
}

.btn-primary {
    width: 100%;
    padding: 13px;
    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--color-bg);
    background: var(--color-group);
    border: none;
    border-radius: var(--r);
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 4px;
}

.btn-primary:hover { background: var(--color-group-light); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.login-error {
    padding: 10px 14px;
    border-radius: var(--r);
    font-size: 13px;
    font-weight: 500;
    color: var(--color-red);
    background: rgba(192, 57, 43, 0.06);
    border: 1px solid rgba(192, 57, 43, 0.15);
    margin-bottom: 20px;
    display: none;
}

/* ── Header ───────────────────────────────────────────────────── */
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--color-bg);
    border-bottom: 2px solid var(--color-group);
    padding: 0 40px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.header .wordmark {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.header .wordmark .md { color: var(--color-text); }
.header .wordmark .gruppe { color: var(--color-group); }

.header .sys-label {
    font-size: var(--type-xs);
    font-weight: 500;
    color: var(--color-group);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    padding-left: 20px;
    border-left: 1px solid var(--color-border);
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.header-right .user-info {
    text-align: right;
    line-height: 1.35;
}

.header-right .user-name {
    font-weight: 500;
    color: var(--color-text);
}

.header-right .user-role {
    font-size: var(--type-xs);
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.header-right .datetime {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    font-family: var(--font-mono);
    padding-left: 20px;
    border-left: 1px solid var(--color-border);
}

.btn-signout {
    padding: 6px 16px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 500;
    color: var(--color-muted);
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--r);
    cursor: pointer;
    transition: all 0.2s;
}

.btn-signout:hover {
    color: var(--color-red);
    border-color: var(--color-red);
}

/* ── Main Content ─────────────────────────────────────────────── */
.main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 40px 60px;
}

/* ── Radar Strip (Chairman vital signs) ──────────────────────── */
.radar-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.radar-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 24px 28px;
    position: relative;
    overflow: hidden;
}

.radar-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-group);
}

.radar-label {
    font-size: var(--type-xs);
    font-weight: 500;
    color: var(--color-muted);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.radar-value {
    font-size: var(--type-2xl);
    font-weight: 500;
    color: var(--color-text);
    letter-spacing: -1.5px;
    line-height: 1.1;
}

.radar-value.gold { color: var(--color-group); }

.radar-detail {
    font-size: 12px;
    color: var(--color-muted);
    margin-top: 6px;
    font-weight: 400;
}

.radar-mono {
    font-size: 16px;
    font-weight: 500;
    font-family: var(--font-mono);
    color: var(--color-text);
    letter-spacing: -0.3px;
    line-height: 1.2;
    margin-top: 2px;
}

/* ── Section ──────────────────────────────────────────────────── */
.section {
    margin-bottom: 40px;
}

.section-header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
}

.section-gold .section-header {
    border-bottom-color: var(--color-group);
}

.section-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.section-subtitle {
    font-size: 13px;
    color: var(--color-muted);
    font-weight: 400;
}

/* ── Company Grid ─────────────────────────────────────────────── */
.company-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.company-card {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    display: flex;
    overflow: hidden;
    transition: box-shadow 0.2s, border-color 0.2s;
}

.company-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
    border-color: #D0D0D0;
}

.company-card.inactive {
    opacity: 0.5;
}

.company-card.inactive:hover {
    opacity: 0.65;
}

.card-stripe {
    width: 8px;
    flex-shrink: 0;
}

.card-logo {
    max-height: 48px;
    max-width: 160px;
    object-fit: contain;
    display: block;
    margin-bottom: 12px;
}

.card-body {
    padding: 18px 20px;
    flex: 1;
    min-width: 0;
}

.card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 6px;
}

.card-code {
    font-size: var(--type-md);
    font-weight: 500;
    letter-spacing: 0.5px;
    line-height: 1;
}

.card-name {
    font-size: 13px;
    color: var(--color-text-secondary);
    line-height: 1.4;
    margin-bottom: 14px;
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 3px;
    font-size: var(--type-xs);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.badge-status-active {
    color: var(--color-green);
    background: var(--color-green-bg);
}

.badge-status-inactive {
    color: var(--color-inactive);
    background: rgba(136,136,136,0.1);
}

.badge-type {
    color: var(--color-text-secondary);
    background: var(--color-surface);
}

.badge-peza {
    color: var(--color-group);
    background: var(--color-group-faint);
    border: 1px solid var(--color-group-border);
}

.badge-currency {
    color: var(--color-text);
    background: var(--color-surface);
}

.card-stat {
    font-size: var(--type-xs);
    color: var(--color-muted);
    font-weight: 500;
}

.card-stat strong {
    color: var(--color-text);
    font-weight: 500;
}

/* ── GGOB Scorecard ───────────────────────────────────────────── */
.ggob-list {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--r-lg);
    padding: 4px 24px;
}

.ggob-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
}

.ggob-row:last-child {
    border-bottom: none;
}

.ggob-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ggob-name {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.3px;
    min-width: 70px;
}

.ggob-count {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 400;
    flex: 1;
}

.badge-ready {
    color: var(--color-green);
    background: var(--color-green-bg);
    font-size: var(--type-xs);
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Cutover Banner ──────────────────────────────────────────── */
.cutover-banner {
    background: var(--color-group);
    color: var(--color-bg);
    font-family: var(--font-primary);
    font-weight: 500;
    text-align: center;
    padding: 16px 24px;
    font-size: var(--type-md);
    letter-spacing: 0.3px;
}

/* ── Footer ───────────────────────────────────────────────────── */
.footer {
    background: var(--color-surface);
    border-top: 1px solid var(--color-border);
    padding: 24px 40px;
    text-align: center;
}

.footer-line {
    font-size: 12px;
    color: var(--color-muted);
    font-weight: 400;
}

/* ── Loading ──────────────────────────────────────────────────── */
.loading-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--color-muted);
    font-size: 14px;
}

.spinner {
    width: 28px;
    height: 28px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-group);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 900px) {
    .radar-strip {
        grid-template-columns: repeat(2, 1fr);
    }
    .company-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .header {
        padding: 0 20px;
        height: auto;
        min-height: 56px;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .header .sys-label { display: none; }
    .header-right .datetime { display: none; }

    .main { padding: 20px; }

    .radar-strip {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .radar-value { font-size: var(--type-xl); }
    .radar-card { padding: 16px 18px; }

    .company-grid { grid-template-columns: 1fr; }

    .login-card { padding: 32px 24px; }
    .footer { padding: 20px; }
}

/* ==========================================================================
   Phase 0 Path A — Universal :focus-visible safety net
   Locked 2026-04-17 per TOKEN-PROPOSAL-2026-04-17 Decision #4 (MD approved).
   Every keyboard-focused interactive element gets the gold --focus-ring.
   Specific selectors may override. This rule fills the a11y gap flagged
   in Phase 0 recon (only 8 focus rules existed across the whole OS).
   ========================================================================== */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}