/*
 * Virii8 OS Theme — Built-In Design System CSS
 * Loaded on ALL pages when Virii8 plugin is active.
 * Token values are overridden by inline CSS vars from inject_global_css_vars().
 */

/* ── Reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }

/* ── Tokens (defaults — overridden by plugin via <style> in <head>) ── */
:root {
    --vos-primary:      #0369a1;
    --vos-primary-h:    #0284c7;
    --vos-accent:       #0ea5e9;
    --vos-bg:           #f8fafc;
    --vos-surface:      #ffffff;
    --vos-border:       #e2e8f0;
    --vos-text:         #1e293b;
    --vos-text-muted:   #64748b;
    --vos-success:      #16a34a;
    --vos-warning:      #d97706;
    --vos-danger:       #dc2626;
    --vos-radius:       8px;
    --vos-radius-sm:    4px;
    --vos-radius-lg:    12px;
    --vos-shadow:       0 1px 3px rgba(0,0,0,.1);
    --vos-shadow-lg:    0 4px 16px rgba(0,0,0,.1);
    --vos-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --vos-font-mono:    "SF Mono", "Fira Code", "Fira Mono", monospace;
    --vos-trans:        all .15s ease;
}

/* ── Dark mode ───────────────────────────────────────────────────── */
[data-theme="dark"], .v8e-dark {
    --vos-bg:           #0f172a;
    --vos-surface:      #1e293b;
    --vos-border:       #334155;
    --vos-text:         #e2e8f0;
    --vos-text-muted:   #94a3b8;
}

/* ── Matrix mode ─────────────────────────────────────────────────── */
[data-theme="matrix"] {
    --vos-bg:           #000;
    --vos-surface:      #001100;
    --vos-border:       #003300;
    --vos-text:         #00FF41;
    --vos-text-muted:   #33aa33;
    --vos-primary:      #00FF41;
    --vos-font:         "Courier New", monospace;
}

/* ── Base typography ──────────────────────────────────────────────── */
body {
    font-family: var(--vos-font);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--vos-text);
    background: var(--vos-bg);
    transition: background .2s, color .2s;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
h1,h2,h3,h4,h5,h6 { font-weight: 700; line-height: 1.3; color: var(--vos-text); margin-bottom: .5em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }
p  { margin-bottom: 1rem; }
a  { color: var(--vos-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
strong { font-weight: 700; }
img  { max-width: 100%; height: auto; display: block; }
ul,ol { padding-left: 1.5rem; margin-bottom: 1rem; }
li   { margin-bottom: .25rem; }
code { font-family: var(--vos-font-mono); background: var(--vos-border); padding: 2px 6px; border-radius: 4px; font-size: .88em; }
pre  { background: var(--vos-surface); border: 1px solid var(--vos-border); padding: 1rem; border-radius: var(--vos-radius); overflow-x: auto; }
blockquote { border-left: 3px solid var(--vos-primary); padding-left: 1rem; color: var(--vos-text-muted); margin: 1rem 0; }
hr { border: none; border-top: 1px solid var(--vos-border); margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; }
th,td { padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--vos-border); font-size: .9rem; }
th   { font-weight: 600; background: var(--vos-bg); text-transform: uppercase; font-size: .74rem; letter-spacing: .05em; color: var(--vos-text-muted); }
input,textarea,select {
    font-family: var(--vos-font);
    font-size: .9rem;
    color: var(--vos-text);
    background: var(--vos-surface);
    border: 1px solid var(--vos-border);
    border-radius: var(--vos-radius-sm);
    padding: .45rem .75rem;
    width: 100%;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
input:focus,textarea:focus,select:focus {
    border-color: var(--vos-primary);
    box-shadow: 0 0 0 3px rgba(3,105,161,.15);
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.vos-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem 1rem;
    border-radius: var(--vos-radius-sm);
    font-size: .85rem;
    font-weight: 700;
    cursor: pointer;
    border: 1px solid transparent;
    text-decoration: none;
    transition: var(--vos-trans);
    white-space: nowrap;
}
.vos-btn-primary { background: var(--vos-primary); color: #fff; border-color: var(--vos-primary); }
.vos-btn-primary:hover { background: var(--vos-primary-h); border-color: var(--vos-primary-h); text-decoration: none; color: #fff; }
.vos-btn-secondary { background: var(--vos-surface); color: var(--vos-text); border-color: var(--vos-border); }
.vos-btn-secondary:hover { background: var(--vos-bg); text-decoration: none; color: var(--vos-text); }
.vos-btn-ghost { background: transparent; color: var(--vos-text-muted); border-color: transparent; }
.vos-btn-ghost:hover { background: var(--vos-bg); color: var(--vos-text); text-decoration: none; }
.vos-btn-danger { background: var(--vos-danger); color: #fff; border-color: var(--vos-danger); }
.vos-btn-sm { padding: .25rem .6rem; font-size: .78rem; }
.vos-btn-lg { padding: .65rem 1.5rem; font-size: .95rem; }

/* ── Cards ───────────────────────────────────────────────────────── */
.vos-card {
    background: var(--vos-surface);
    border: 1px solid var(--vos-border);
    border-radius: var(--vos-radius);
    box-shadow: var(--vos-shadow);
    overflow: hidden;
}
.vos-card-header { padding: .85rem 1rem; border-bottom: 1px solid var(--vos-border); display: flex; align-items: center; justify-content: space-between; }
.vos-card-title  { font-size: .9rem; font-weight: 700; margin: 0; }
.vos-card-body   { padding: 1rem; }

/* ── Badges ──────────────────────────────────────────────────────── */
.v8e-badge { display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:9999px;font-size:.72rem;font-weight:700;letter-spacing:.02em; }
.v8e-badge-success { background:#dcfce7;color:#166534; }
.v8e-badge-warning { background:#fef9c3;color:#854d0e; }
.v8e-badge-danger  { background:#fee2e2;color:#991b1b; }
.v8e-badge-info    { background:#e0f2fe;color:#075985; }
.v8e-badge-neutral { background:var(--vos-border);color:var(--vos-text-muted); }

/* ── Tables ──────────────────────────────────────────────────────── */
.v8e-table { width:100%;border-collapse:collapse;font-size:.85rem; }
.v8e-table th { background:var(--vos-bg);font-size:.73rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--vos-text-muted);padding:.65rem .85rem; }
.v8e-table td { padding:.65rem .85rem;border-bottom:1px solid var(--vos-border);vertical-align:middle; }
.v8e-table tr:last-child td { border-bottom: none; }
.v8e-table tr:hover td { background: var(--vos-bg); }

/* ── Portal layout ───────────────────────────────────────────────── */
.v8e-portal { font-family: var(--vos-font); }
.v8e-portal-org { padding: 0; }
.vos-app-root { font-family: var(--vos-font); color: var(--vos-text); }

/* ── Notices ─────────────────────────────────────────────────────── */
.vos-notice { display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border-radius:var(--vos-radius-sm);font-size:.85rem;margin-bottom:.75rem;border:1px solid; }
.vos-notice-success { background:#f0fdf4;border-color:#bbf7d0;color:#166534; }
.vos-notice-warning { background:#fffbeb;border-color:#fde68a;color:#92400e; }
.vos-notice-danger  { background:#fef2f2;border-color:#fecaca;color:#991b1b; }
.vos-notice-info    { background:#eff6ff;border-color:#bfdbfe;color:#1e40af; }

/* ── Forms ───────────────────────────────────────────────────────── */
.vos-label { display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--vos-text-muted);margin-bottom:.3rem; }
.vos-input { width:100%;padding:.45rem .75rem;border:1px solid var(--vos-border);border-radius:var(--vos-radius-sm);background:var(--vos-surface);color:var(--vos-text);font-size:.88rem;font-family:var(--vos-font);transition:border-color .15s; }
.vos-input:focus { outline:none;border-color:var(--vos-primary);box-shadow:0 0 0 3px rgba(3,105,161,.12); }

/* ── Empty state ─────────────────────────────────────────────────── */
.vos-empty { text-align:center;padding:3rem 2rem;color:var(--vos-text-muted); }
.vos-empty-icon { font-size:2.5rem;margin-bottom:.75rem; }
.vos-empty-title { font-size:1rem;font-weight:700;color:var(--vos-text);margin-bottom:.4rem; }

/* ── Nav (portal) ────────────────────────────────────────────────── */
.v8e-nav-items { display:flex;align-items:center;gap:.1rem;list-style:none;padding:0;margin:0; }
.v8e-nav-items li a { padding:.4rem .7rem;border-radius:6px;font-size:.84rem;font-weight:600;color:var(--vos-text-muted);text-decoration:none;transition:var(--vos-trans);white-space:nowrap;display:block; }
.v8e-nav-items li a:hover { background:var(--vos-bg);color:var(--vos-primary); }
.v8e-nav-items li.current-menu-item > a { color:var(--vos-primary);background:var(--vos-bg); }

/* ── Stat grid ───────────────────────────────────────────────────── */
.v8e-stat-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.75rem; }
.v8e-stat-card { background:var(--vos-surface);border:1px solid var(--vos-border);border-radius:var(--vos-radius);padding:1rem;text-align:center; }
.v8e-stat-icon { font-size:1.6rem;margin-bottom:.4rem; }
.v8e-stat-val  { font-size:1.5rem;font-weight:800;color:var(--vos-primary); }
.v8e-stat-label{ font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--vos-text-muted);margin-top:.2rem; }

/* ── Accessibility ───────────────────────────────────────────────── */
:focus-visible { outline:2px solid var(--vos-primary);outline-offset:2px; }
.screen-reader-text { position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
    h1 { font-size:1.6rem; }
    h2 { font-size:1.25rem; }
    #v8e-site-header { padding:0 1rem; }
    .v8e-nav-items li a { padding:.3rem .5rem;font-size:.78rem; }
    .v8e-stat-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width:480px) {
    .v8e-stat-grid { grid-template-columns:1fr 1fr; }
    .vos-btn { padding:.4rem .75rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition-duration:.01ms!important;animation-duration:.01ms!important; } }
