/* =============================================================
   Inoquos Base — per-app token aliasing
   -------------------------------------------------------------
   Every dashboard (production, warehouse, quality, operations,
   RH) declares its own CSS variable set with a short prefix:

       --pd-* (production)
       --wd-* (warehouse)
       --qd-* (quality)
       --od-* (operations)
       --hr-* (RH / human resources)

   This stylesheet re-points every one of those variables to the
   unified --ino-* tokens from inoquos-tokens.css.

   As long as this file loads AFTER the app's own stylesheet,
   the app keeps all its existing layout, spacing and component
   styles — only the colors snap to the unified brand.

   No layout changes. No markup changes. No class renames.
   ============================================================= */

:root,
[data-theme="dark"] {
    /* ─── Background / surfaces ─────────────────────────────── */
    --pd-bg: var(--ino-bg);
    --wd-bg: var(--ino-bg);
    --qd-bg: var(--ino-bg);
    --od-bg: var(--ino-bg);
    --hr-bg: var(--ino-bg);

    --pd-card: var(--ino-surface);
    --wd-card: var(--ino-surface);
    --qd-card: var(--ino-surface);
    --od-card: var(--ino-surface);
    --hr-card: var(--ino-surface);

    /* ─── Borders ───────────────────────────────────────────── */
    --pd-border: var(--ino-border);
    --wd-border: var(--ino-border);
    --qd-border: var(--ino-border);
    --od-border: var(--ino-border);
    --hr-border: var(--ino-border);

    /* ─── Primary accent (unified across all dashboards) ────── */
    --pd-primary: var(--ino-accent);
    --wd-primary: var(--ino-accent);
    --qd-primary: var(--ino-accent);
    --od-primary: var(--ino-accent);
    --hr-primary: var(--ino-accent);

    --pd-primary-light: var(--ino-accent-soft);
    --wd-primary-light: var(--ino-accent-soft);
    --qd-primary-light: var(--ino-accent-soft);
    --od-primary-light: var(--ino-accent-soft);
    --hr-primary-light: var(--ino-accent-soft);

    /* Primary hover (was hardcoded #1a4a5c in several dashboards) */
    --pd-primary-hover: var(--ino-accent-hover);
    --wd-primary-hover: var(--ino-accent-hover);
    --qd-primary-hover: var(--ino-accent-hover);
    --od-primary-hover: var(--ino-accent-hover);
    --hr-primary-hover: var(--ino-accent-hover);

    /* ─── Text ──────────────────────────────────────────────── */
    --pd-text: var(--ino-text);
    --wd-text: var(--ino-text);
    --qd-text: var(--ino-text);
    --od-text: var(--ino-text);
    --hr-text: var(--ino-text);

    --pd-text-muted: var(--ino-text-muted);
    --wd-text-muted: var(--ino-text-muted);
    --qd-text-muted: var(--ino-text-muted);
    --od-text-muted: var(--ino-text-muted);
    --hr-text-muted: var(--ino-text-muted);

    /* ─── Semantic colors ───────────────────────────────────── */
    --pd-success: var(--ino-success);
    --wd-success: var(--ino-success);
    --qd-success: var(--ino-success);
    --od-success: var(--ino-success);
    --hr-success: var(--ino-success);

    --pd-success-light: var(--ino-success-soft);
    --wd-success-light: var(--ino-success-soft);
    --qd-success-light: var(--ino-success-soft);
    --od-success-light: var(--ino-success-soft);
    --hr-success-light: var(--ino-success-soft);

    --pd-warning: var(--ino-warning);
    --wd-warning: var(--ino-warning);
    --qd-warning: var(--ino-warning);
    --od-warning: var(--ino-warning);
    --hr-warning: var(--ino-warning);

    --pd-warning-light: var(--ino-warning-soft);
    --wd-warning-light: var(--ino-warning-soft);
    --qd-warning-light: var(--ino-warning-soft);
    --od-warning-light: var(--ino-warning-soft);
    --hr-warning-light: var(--ino-warning-soft);

    --pd-danger: var(--ino-danger);
    --wd-danger: var(--ino-danger);
    --qd-danger: var(--ino-danger);
    --od-danger: var(--ino-danger);
    --hr-danger: var(--ino-danger);

    --pd-danger-light: var(--ino-danger-soft);
    --wd-danger-light: var(--ino-danger-soft);
    --qd-danger-light: var(--ino-danger-soft);
    --od-danger-light: var(--ino-danger-soft);
    --hr-danger-light: var(--ino-danger-soft);

    /* ─── Layout (keep existing 56px header contract) ───────── */
    --pd-header-h: var(--ino-header-h);
    --wd-header-h: var(--ino-header-h);
    --qd-header-h: var(--ino-header-h);
    --od-header-h: var(--ino-header-h);
    --hr-header-h: var(--ino-header-h);
}

/* -------------------------------------------------------------
   Dark-mode adjustments specific to per-app body classes.

   The dashboards set body {background:var(--xx-bg); color:var(--xx-text)}
   via their app CSS — these already pick up --ino-* through the
   aliases above. But a few fixed colors need a nudge for dark mode.
   ------------------------------------------------------------- */
[data-theme="dark"] img[alt*="logo" i],
[data-theme="dark"] .ino-logo {
    /* Logo uses dark ink on transparent — invert for dark mode */
    filter: brightness(0) invert(1);
    opacity: 0.92;
}

.ino-header-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    min-width: 0;
}

.ino-header-logo {
    width: 92px;
    max-height: 48px;
    height: auto;
    display: block;
    object-fit: contain;
    flex-shrink: 0;
}

/* ─── Typographic brand wordmark (Option C) ──────────────
   Use in place of <img class="ino-header-logo"> when a
   header-friendly logo asset is not available:

       <span class="ino-brand" aria-label="Inoquos">
           INO<span class="ino-brand-accent">QUOS</span>
       </span>
*/
.ino-brand {
    display: inline-flex;
    align-items: center;
    font-family: var(--ino-font);
    font-weight: 800;
    font-size: 22px;
    letter-spacing: -0.01em;
    line-height: 1;
    color: #9ca3af;          /* warm gray for "INO" */
    user-select: none;
    flex-shrink: 0;
    white-space: nowrap;
    text-decoration: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}
a.ino-brand:hover {
    opacity: 0.85;
}
a.ino-brand:focus-visible {
    outline: none;
    box-shadow: var(--ino-focus-ring);
    border-radius: 4px;
}
.ino-brand-accent {
    color: #84b840;          /* brand green for "QUOS" */
}
.ino-brand-lg { font-size: 38px; letter-spacing: -0.015em; }
.ino-brand-xl { font-size: 56px; letter-spacing: -0.02em; }

[data-theme="dark"] .ino-brand        { color: #cbd5e1; }
[data-theme="dark"] .ino-brand-accent { color: #9ec96b; }

/* Subtle separator between the brand and the section title */
.ino-header-brand .ino-brand + h1 {
    position: relative;
    padding-left: 14px;
    margin-left: 2px;
}
.ino-header-brand .ino-brand + h1::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 18px;
    background: var(--ino-border-strong);
}

@media (max-width: 768px) {
    .ino-header-brand {
        gap: 8px;
    }

    .ino-header-logo {
        width: 74px;
        max-height: 40px;
    }

    .ino-brand { font-size: 18px; }
    .ino-header-brand .ino-brand + h1 {
        padding-left: 10px;
    }
    .ino-header-brand .ino-brand + h1::before {
        height: 14px;
    }
}