/* ====== MiuOne ID — theme variables ====== */

:root {
    color-scheme: light;

    --c-bg: #ffffff;
    --c-bg-soft: #fafafa;
    --c-bg-elev: #ffffff;
    --c-bg-glass: rgba(255, 255, 255, 0.88);

    --c-text: #111111;
    --c-text-mut: #777777;
    --c-text-soft: #aaaaaa;
    --c-text-faint: #cccccc;

    --c-border: #ececec;
    --c-border-soft: #f0f0f0;
    --c-border-strong: #d8d8d8;

    --c-primary: #111111;
    --c-primary-hover: #333333;
    --c-on-primary: #ffffff;

    --c-danger: #b94646;
    --c-danger-hover: #9b3737;

    --c-accent: #0094f6;

    --c-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.12);
    --c-shadow-toast: 0 20px 50px rgba(0, 0, 0, 0.18);

    --c-pill-pending-bg:    #fbf8ec;
    --c-pill-pending-bd:    #efe2b9;
    --c-pill-pending-text:  #8a6b00;
    --c-pill-approved-bg:   #f1faf5;
    --c-pill-approved-bd:   #c9e4d6;
    --c-pill-approved-text: #1f7a4d;
    --c-pill-rejected-bg:   #fff7f7;
    --c-pill-rejected-bd:   #f3d6d6;
    --c-pill-rejected-text: #b94646;
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --c-bg: #0d0e12;
    --c-bg-soft: #14161c;
    --c-bg-elev: #17191f;
    --c-bg-glass: rgba(13, 14, 18, 0.85);

    --c-text: #ededed;
    --c-text-mut: #8d92a0;
    --c-text-soft: #6b6f7a;
    --c-text-faint: #494e58;

    --c-border: #262a32;
    --c-border-soft: #1d2029;
    --c-border-strong: #313641;

    --c-primary: #ffffff;
    --c-primary-hover: #dadada;
    --c-on-primary: #111111;

    --c-danger: #e26060;
    --c-danger-hover: #c34a4a;

    --c-accent: #2ea7ff;

    --c-shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.55);
    --c-shadow-toast: 0 20px 50px rgba(0, 0, 0, 0.5);

    --c-pill-pending-bg:    rgba(239, 196, 47, 0.10);
    --c-pill-pending-bd:    rgba(239, 196, 47, 0.30);
    --c-pill-pending-text:  #efc42f;
    --c-pill-approved-bg:   rgba(63, 200, 132, 0.10);
    --c-pill-approved-bd:   rgba(63, 200, 132, 0.30);
    --c-pill-approved-text: #3fc884;
    --c-pill-rejected-bg:   rgba(232, 96, 96, 0.10);
    --c-pill-rejected-bd:   rgba(232, 96, 96, 0.30);
    --c-pill-rejected-text: #e85959;
}

/* ===== Body & global ===== */
html, body { background: var(--c-bg); color: var(--c-text); }

/* ===== Theme toggle in navbar ===== */
.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid var(--c-border);
    background: var(--c-bg-elev);
    color: var(--c-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    padding: 0;
    margin: 0 4px;
}
.theme-toggle:hover { background: var(--c-bg-soft); border-color: var(--c-border-strong); }
.theme-toggle svg { width: 16px; height: 16px; display: block; }
.theme-toggle .sun  { display: none; }
.theme-toggle .moon { display: block; }
:root[data-theme="dark"] .theme-toggle .sun  { display: block; }
:root[data-theme="dark"] .theme-toggle .moon { display: none; }

/* ===== Dark theme overrides for existing components ===== */
:root[data-theme="dark"] body { background: var(--c-bg); color: var(--c-text); }

:root[data-theme="dark"] .navbar {
    background: var(--c-bg-glass);
    border-bottom: 1px solid var(--c-border-soft);
}
:root[data-theme="dark"] .nav-brand { color: var(--c-text); }
:root[data-theme="dark"] .nav-brand img { filter: invert(1) hue-rotate(180deg); }

:root[data-theme="dark"] .nav-link { color: var(--c-text-mut); }
:root[data-theme="dark"] .nav-link:hover { color: var(--c-text); background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-link.active { color: var(--c-text); background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-burger:hover { background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-burger span { background: var(--c-text); }
:root[data-theme="dark"] .nav-user { border-color: var(--c-border); }
:root[data-theme="dark"] .nav-user:hover { background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-user.active { background: var(--c-bg-soft); }
:root[data-theme="dark"] .nav-avatar { background: #232730; }
:root[data-theme="dark"] .nav-avatar-fallback { color: var(--c-text-mut); }
:root[data-theme="dark"] .nav-username { color: var(--c-text); }
:root[data-theme="dark"] .nav-logout { color: var(--c-text-soft); }
:root[data-theme="dark"] .nav-logout:hover { color: var(--c-danger); background: rgba(232,96,96,0.08); }
@media (max-width: 860px) {
    :root[data-theme="dark"] .nav-right {
        background: var(--c-bg-elev);
        border-bottom: 1px solid var(--c-border-soft);
        box-shadow: 0 14px 32px rgba(0, 0, 0, 0.45);
    }
    :root[data-theme="dark"] .nav-user { background: var(--c-bg-soft); }
}

:root[data-theme="dark"] .dashboard-title { color: var(--c-text); }
:root[data-theme="dark"] .dashboard-sub   { color: var(--c-text-mut); }
:root[data-theme="dark"] .dashboard-meta  { color: var(--c-text-soft); }
:root[data-theme="dark"] .section-title   { color: var(--c-text); }
:root[data-theme="dark"] .section-aside   { color: var(--c-text-soft); }

:root[data-theme="dark"] .project-card,
:root[data-theme="dark"] .api-card,
:root[data-theme="dark"] .block-card,
:root[data-theme="dark"] .profile-fields,
:root[data-theme="dark"] .empty-state {
    background: var(--c-bg-elev);
    border-color: var(--c-border);
    color: var(--c-text);
}
:root[data-theme="dark"] .project-name  { color: var(--c-text); }
:root[data-theme="dark"] .project-desc  { color: var(--c-text-mut); }
:root[data-theme="dark"] .project-tag   { color: var(--c-text-mut); border-color: var(--c-border); }
:root[data-theme="dark"] .project-domain{ color: var(--c-text-soft); }
:root[data-theme="dark"] .project-cta   { color: var(--c-text); }
:root[data-theme="dark"] .project-card:hover { border-color: var(--c-text); }

:root[data-theme="dark"] .profile-field          { border-bottom: 1px solid var(--c-border-soft); }
:root[data-theme="dark"] .profile-field-label    { color: var(--c-text-mut); }
:root[data-theme="dark"] .profile-field-value    { color: var(--c-text); }
:root[data-theme="dark"] .profile-detail-name    { color: var(--c-text); }
:root[data-theme="dark"] .profile-detail-handle  { color: var(--c-text-mut); }
:root[data-theme="dark"] .profile-avatar-large   { background: #232730; border-color: var(--c-border); }
:root[data-theme="dark"] .profile-avatar-large span { color: var(--c-text-mut); }

:root[data-theme="dark"] .modal           { background: var(--c-bg-elev); box-shadow: var(--c-shadow-modal); }
:root[data-theme="dark"] .modal-title     { color: var(--c-text); }
:root[data-theme="dark"] .modal-close     { color: var(--c-text-soft); }
:root[data-theme="dark"] .modal-close:hover { color: var(--c-text); background: var(--c-bg-soft); }
:root[data-theme="dark"] .modal .field input,
:root[data-theme="dark"] .modal .field textarea,
:root[data-theme="dark"] .modal .field select {
    background: var(--c-bg-soft);
    border-color: var(--c-border);
    color: var(--c-text);
}
:root[data-theme="dark"] .modal .field input::placeholder,
:root[data-theme="dark"] .modal .field textarea::placeholder { color: var(--c-text-soft); }
:root[data-theme="dark"] .modal .field input:focus,
:root[data-theme="dark"] .modal .field textarea:focus { border-color: var(--c-primary); }

:root[data-theme="dark"] .verify-disclaimer { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text-mut); }
:root[data-theme="dark"] .verify-disclaimer b { color: var(--c-text); }
:root[data-theme="dark"] .verify-hero-sub { color: var(--c-text-mut); }
:root[data-theme="dark"] .verify-hero-title { color: var(--c-text); }
:root[data-theme="dark"] .mio-upload-drop { background: var(--c-bg-soft); border-color: var(--c-border); }
:root[data-theme="dark"] .mio-upload-drop:hover { border-color: var(--c-text-soft); background: var(--c-bg-elev); }
:root[data-theme="dark"] .mio-upload-zone.has-files .mio-upload-drop { border-color: var(--c-text); }
:root[data-theme="dark"] .mio-upload-icon { background: var(--c-bg-elev); border-color: var(--c-border); color: var(--c-text); }
:root[data-theme="dark"] .mio-upload-title { color: var(--c-text); }
:root[data-theme="dark"] .mio-upload-files li { border-bottom-color: var(--c-border); }
:root[data-theme="dark"] .field-label { color: var(--c-text-mut); }
:root[data-theme="dark"] .field-hint  { color: var(--c-text-soft); }
:root[data-theme="dark"] .field-optional { color: var(--c-text-faint); }

:root[data-theme="dark"] .drop-zone { border-color: var(--c-border); color: var(--c-text-mut); }
:root[data-theme="dark"] .drop-zone:hover,
:root[data-theme="dark"] .drop-zone.drag { background: var(--c-bg-soft); border-color: var(--c-text); color: var(--c-text); }
:root[data-theme="dark"] .cropper-stage  { background: var(--c-bg-soft); border-color: var(--c-border); }
:root[data-theme="dark"] .cropper-stage::after { box-shadow: 0 0 0 9999px rgba(13,14,18,0.92); }
:root[data-theme="dark"] .cropper-mask   { box-shadow: 0 0 0 200px rgba(13,14,18,0.85), inset 0 0 0 1px rgba(255,255,255,0.06); }
:root[data-theme="dark"] .cropper-zoom-label { color: var(--c-text-mut); }
:root[data-theme="dark"] .cropper-zoom input[type="range"] { background: var(--c-border); }

:root[data-theme="dark"] .btn-primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
:root[data-theme="dark"] .btn-secondary { background: transparent; color: var(--c-text); border-color: var(--c-border); }
:root[data-theme="dark"] .btn-secondary:hover { border-color: var(--c-text); color: var(--c-text); }
:root[data-theme="dark"] .btn-ghost    { background: transparent; color: var(--c-text); border-color: var(--c-border); }
:root[data-theme="dark"] .btn-ghost:hover { background: var(--c-bg-soft); border-color: var(--c-border-strong); }
:root[data-theme="dark"] .btn-danger   { background: var(--c-danger); }
:root[data-theme="dark"] .btn-danger:hover { background: var(--c-danger-hover); }

:root[data-theme="dark"] .dashboard-footer { color: var(--c-text-soft); border-top: 1px solid var(--c-border-soft); }
:root[data-theme="dark"] .legal-inline a { color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-inline a:hover { color: var(--c-text); }

:root[data-theme="dark"] .icon-btn { color: var(--c-text-soft); }
:root[data-theme="dark"] .icon-btn:hover { color: var(--c-text); background: var(--c-bg-soft); border-color: var(--c-border); }

:root[data-theme="dark"] .pill { border-color: var(--c-border); color: var(--c-text-mut); }
:root[data-theme="dark"] .pill-pending  { color: var(--c-pill-pending-text); border-color: var(--c-pill-pending-bd); background: var(--c-pill-pending-bg); }
:root[data-theme="dark"] .pill-approved { color: var(--c-pill-approved-text); border-color: var(--c-pill-approved-bd); background: var(--c-pill-approved-bg); }
:root[data-theme="dark"] .pill-rejected { color: var(--c-pill-rejected-text); border-color: var(--c-pill-rejected-bd); background: var(--c-pill-rejected-bg); }

:root[data-theme="dark"] .mio-table { border-color: var(--c-border); }
:root[data-theme="dark"] .mio-table thead th { background: var(--c-bg-soft); color: var(--c-text-mut); border-bottom: 1px solid var(--c-border); }
:root[data-theme="dark"] .mio-table tbody td { color: var(--c-text); border-bottom: 1px solid var(--c-border-soft); }
:root[data-theme="dark"] .mio-table .cell-handle { color: var(--c-text-mut); }
:root[data-theme="dark"] .api-key { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text-mut); }
:root[data-theme="dark"] .api-card-name { color: var(--c-text); }
:root[data-theme="dark"] .api-card-desc { color: var(--c-text-mut); }
:root[data-theme="dark"] .api-card-meta { color: var(--c-text-soft); }

:root[data-theme="dark"] .toast { box-shadow: var(--c-shadow-toast); }
:root[data-theme="dark"] .cookie-banner { background: var(--c-bg-elev); border-color: var(--c-border); box-shadow: 0 20px 60px rgba(0,0,0,0.5); }
:root[data-theme="dark"] .cookie-title { color: var(--c-text); }
:root[data-theme="dark"] .cookie-text  { color: var(--c-text-mut); }
:root[data-theme="dark"] .cookie-text a { color: var(--c-text); border-bottom-color: var(--c-border); }

:root[data-theme="dark"] .form-errors  { background: rgba(232,96,96,0.08); border-color: rgba(232,96,96,0.25); }
:root[data-theme="dark"] .form-errors p { color: var(--c-danger); }

/* Auth pages (login/register) */
:root[data-theme="dark"] .field input { background: var(--c-bg-soft); border-color: var(--c-border); color: var(--c-text); }
:root[data-theme="dark"] .field input::placeholder { color: var(--c-text-soft); }
:root[data-theme="dark"] .field input:focus { border-color: var(--c-text); }
:root[data-theme="dark"] .auth-alt        { color: var(--c-text-mut); }
:root[data-theme="dark"] .auth-alt a      { color: var(--c-text); border-bottom-color: var(--c-border); }
:root[data-theme="dark"] .muted-link      { color: var(--c-text-soft); }
:root[data-theme="dark"] .muted-link:hover{ color: var(--c-text); }
:root[data-theme="dark"] .footer-note     { color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-links a   { color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-links a:hover { color: var(--c-text); }
:root[data-theme="dark"] .legal-links span { color: var(--c-text-faint); }
:root[data-theme="dark"] .subtitle { color: var(--c-text-mut); }
:root[data-theme="dark"] .description { color: var(--c-text); }
:root[data-theme="dark"] h1 { color: var(--c-text); }
:root[data-theme="dark"] .divider { background: var(--c-border); }
:root[data-theme="dark"] .logo { filter: invert(1) hue-rotate(180deg); }

/* Legal pages */
:root[data-theme="dark"] .legal-title       { color: var(--c-text); }
:root[data-theme="dark"] .legal-meta        { color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-date        { color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-divider     { background: var(--c-border); }
:root[data-theme="dark"] .legal-section h2  { color: var(--c-text-mut); }
:root[data-theme="dark"] .legal-section p,
:root[data-theme="dark"] .legal-section ul li { color: var(--c-text); }
:root[data-theme="dark"] .legal-section ul li::before { color: var(--c-text-faint); }
:root[data-theme="dark"] .legal-footer      { border-top: 1px solid var(--c-border-soft); color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-footer a    { color: var(--c-text-soft); }
:root[data-theme="dark"] .legal-footer a:hover { color: var(--c-text); }
:root[data-theme="dark"] .back              { color: var(--c-text-soft); }
:root[data-theme="dark"] .back:hover        { color: var(--c-text); }

/* ===== Light theme — navbar & nav (explicit) ===== */
.nav-brand { color: var(--c-text); }
.nav-link { color: var(--c-text-mut); }
.nav-link:hover { color: var(--c-text); background: var(--c-bg-soft); }
.nav-link.active { color: var(--c-text); background: var(--c-bg-soft); }
.nav-burger:hover { background: var(--c-bg-soft); }
.nav-burger span { background: var(--c-text); }
.nav-user { border-color: var(--c-border); }
.nav-user:hover,
.nav-user.active { background: var(--c-bg-soft); }
.nav-avatar { background: var(--c-bg-soft); }
.nav-avatar-fallback { color: var(--c-text-mut); }
.nav-username { color: var(--c-text); }
.nav-logout { color: var(--c-text-soft); }
.nav-logout:hover { color: var(--c-danger); background: var(--c-pill-rejected-bg); }

/* ===== Dark — profile, users, actions ===== */
:root[data-theme="dark"] .profile-hero,
:root[data-theme="dark"] .user-card,
:root[data-theme="dark"] .action-tile,
:root[data-theme="dark"] .action-tile-status {
    background: var(--c-bg-elev);
    border-color: var(--c-border);
}
:root[data-theme="dark"] .profile-hero-name,
:root[data-theme="dark"] .user-card-name { color: var(--c-text); }
:root[data-theme="dark"] .profile-hero-handle,
:root[data-theme="dark"] .user-card-handle { color: var(--c-text-mut); }
:root[data-theme="dark"] .action-tile-icon { background: #232730; color: var(--c-text); }
:root[data-theme="dark"] .action-tile-title { color: var(--c-text); }
:root[data-theme="dark"] .action-tile-sub { color: var(--c-text-mut); }
:root[data-theme="dark"] .action-tile:hover { background: var(--c-bg-soft); border-color: var(--c-border-strong); }
:root[data-theme="dark"] .profile-fields { background: var(--c-bg-elev); border-color: var(--c-border); }
:root[data-theme="dark"] .user-card-fields { border-top-color: var(--c-border-soft); }
:root[data-theme="dark"] .section-aside { color: var(--c-text-soft); }
:root[data-theme="dark"] .block-card-text { color: var(--c-text-mut); }
:root[data-theme="dark"] .block-card-text b { color: var(--c-text); }


@media (max-width: 860px) {
    .nav-right {
        background: var(--c-bg-elev);
        border-bottom-color: var(--c-border-soft);
    }
}