/* =====================================================================
   Social Wars web design system — Phase 19.
   Single shared stylesheet served as css/account.css (stable URL).
   Sections: 1 tokens · 2 reset/base · 3 layout · 4 components ·
   5 auth pages · 6 utilities · 7 responsive · 8 motion.
   Palette sampled from templates/img/logo.png (SOCIAL blue / WARS
   red-orange on deep navy). Full record: docs/web-design-system.md.
   ===================================================================== */

/* ---- 1. Design tokens ------------------------------------------------ */
:root {
    /* structural surfaces */
    --sw-bg: #0c1026;
    --sw-bg-deep: #070b1d;
    --sw-surface: #141a3a;
    --sw-surface-raised: #1b2247;
    --sw-border: #2c3e84;
    --sw-border-strong: #3d52a3;

    /* brand accents */
    --sw-primary: #27aae1;
    --sw-primary-hover: #1d86c4;
    --sw-primary-active: #166da3;
    --sw-primary-ink: #06121f;
    --sw-cyan: #40d2ff;
    --sw-focus: #40d2ff;

    /* product highlights (reserved uses only) */
    --sw-gold: #fbb040;
    --sw-orange: #f1462c;
    --sw-danger: #ed1c24;

    /* semantic feedback */
    --sw-success: #35b558;
    --sw-success-bg: #0f3520;
    --sw-success-ink: #c9f2d6;
    --sw-danger-bg: #3d1116;
    --sw-danger-ink: #ffd9dc;
    --sw-warning: #fbb040;
    --sw-warning-bg: #3a2a08;
    --sw-warning-ink: #ffe3b3;
    --sw-info: #40d2ff;
    --sw-info-bg: #0e2f45;
    --sw-info-ink: #c9efff;

    /* text */
    --sw-text: #f2f5ff;
    --sw-text-secondary: #b9c2e4;
    --sw-text-muted: #9aa3d1;
    --sw-text-on-light: #101736;

    /* light card (forms sit on light cream for contrast + brand echo) */
    --sw-card-bg: #f4f6ff;
    --sw-card-border: #2c3e84;

    /* spacing scale */
    --sw-space-1: 4px;
    --sw-space-2: 8px;
    --sw-space-3: 12px;
    --sw-space-4: 16px;
    --sw-space-5: 24px;
    --sw-space-6: 32px;

    /* radius scale */
    --sw-radius-sm: 4px;
    --sw-radius-md: 6px;
    --sw-radius-lg: 8px;
    --sw-radius-xl: 12px;

    /* shadow scale (restrained) */
    --sw-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.4);
    --sw-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
    --sw-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);

    /* typography */
    --sw-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --sw-size-title: 26px;
    --sw-size-section: 20px;
    --sw-size-card-title: 18px;
    --sw-size-body: 15px;
    --sw-size-small: 13px;
    --sw-size-meta: 12px;
    --sw-weight-normal: 400;
    --sw-weight-medium: 600;
    --sw-weight-bold: 700;
    --sw-line-normal: 1.45;
    --sw-line-tight: 1.25;

    --sw-transition: 120ms ease-in-out;
}

/* ---- 2. Reset / base -------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--sw-font);
    font-size: var(--sw-size-body);
    line-height: var(--sw-line-normal);
    color: var(--sw-text);
    background-color: var(--sw-bg);
}

a {
    color: var(--sw-cyan);
}

a:hover {
    color: #8fe3ff;
}

:focus-visible {
    outline: 3px solid var(--sw-focus);
    outline-offset: 2px;
    border-radius: var(--sw-radius-sm);
}

img {
    max-width: 100%;
}

/* ---- 3. Layout -------------------------------------------------------- */
.sw-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--sw-space-6) var(--sw-space-4);
    background:
        radial-gradient(ellipse 80% 45% at 50% -5%, rgba(43, 69, 139, 0.55) 0%, rgba(12, 16, 38, 0) 70%),
        linear-gradient(180deg, var(--sw-bg) 0%, var(--sw-bg-deep) 100%);
}

.sw-brand {
    text-align: center;
    margin-bottom: var(--sw-space-5);
}

.sw-brand img {
    width: 100%;
    max-width: 300px;
    height: auto;
}

.sw-tagline {
    margin: var(--sw-space-2) 0 0;
    font-size: var(--sw-size-small);
    font-weight: var(--sw-weight-medium);
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--sw-text-secondary);
}

.sw-container {
    width: 100%;
    max-width: 460px;
}

.sw-footer {
    margin-top: var(--sw-space-5);
    font-size: var(--sw-size-meta);
    color: var(--sw-text-muted);
    text-align: center;
}

/* ---- 4. Components ---------------------------------------------------- */

/* Card */
.sw-card {
    background: var(--sw-card-bg);
    color: var(--sw-text-on-light);
    border: 1px solid var(--sw-card-border);
    border-top: 4px solid var(--sw-primary);
    border-radius: var(--sw-radius-lg);
    box-shadow: var(--sw-shadow-md);
    padding: var(--sw-space-5);
}

.sw-card h1 {
    margin: 0 0 var(--sw-space-4);
    font-size: var(--sw-size-card-title);
    line-height: var(--sw-line-tight);
}

/* Buttons: consistent metrics everywhere */
.sw-btn {
    display: inline-block;
    min-height: 42px;
    padding: 10px 18px;
    font-family: inherit;
    font-size: var(--sw-size-body);
    font-weight: var(--sw-weight-medium);
    line-height: var(--sw-line-tight);
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--sw-radius-md);
    cursor: pointer;
    transition: background-color var(--sw-transition), border-color var(--sw-transition);
}

.sw-btn-primary {
    color: var(--sw-primary-ink);
    background-color: var(--sw-primary);
    border-color: var(--sw-primary-active);
}

.sw-btn-primary:hover {
    background-color: var(--sw-primary-hover);
}

.sw-btn-primary:active {
    background-color: var(--sw-primary-active);
}

.sw-btn-secondary {
    color: var(--sw-text);
    background-color: var(--sw-surface-raised);
    border-color: var(--sw-border-strong);
}

.sw-btn-secondary:hover {
    background-color: #242c5c;
}

.sw-btn-ghost {
    color: var(--sw-cyan);
    background-color: transparent;
    border-color: transparent;
}

.sw-btn-ghost:hover {
    background-color: rgba(64, 210, 255, 0.12);
}

.sw-btn-danger {
    color: #fff;
    background-color: #a31219;
    border-color: #6d0b11;
}

.sw-btn-danger:hover {
    background-color: #c01620;
}

.sw-btn-block {
    display: block;
    width: 100%;
}

.sw-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* On light cards, secondary/ghost need dark-readable variants */
.sw-card .sw-btn-secondary {
    color: var(--sw-text-on-light);
    background-color: #dde3fa;
    border-color: var(--sw-border);
}

.sw-card .sw-btn-secondary:hover {
    background-color: #cdd6f5;
}

.sw-card .sw-btn-ghost {
    color: #166da3;
}

.sw-card .sw-btn-ghost:hover {
    background-color: rgba(22, 109, 163, 0.1);
}

/* Form fields */
.sw-field {
    margin-bottom: var(--sw-space-4);
}

.sw-label {
    display: block;
    margin-bottom: var(--sw-space-1);
    font-size: var(--sw-size-small);
    font-weight: var(--sw-weight-medium);
}

.sw-required::after {
    content: " *";
    color: #a31219;
    font-weight: var(--sw-weight-bold);
}

.sw-input,
.sw-select {
    display: block;
    width: 100%;
    min-height: 42px;
    padding: 9px 12px;
    font-family: inherit;
    font-size: var(--sw-size-body);
    color: var(--sw-text-on-light);
    background-color: #fff;
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius-md);
}

.sw-input::placeholder {
    color: #6b74a3;
    opacity: 1;
}

.sw-help {
    margin: var(--sw-space-1) 0 0;
    font-size: var(--sw-size-meta);
    color: #3d4480;
}

.sw-error-text {
    margin: var(--sw-space-1) 0 0;
    font-size: var(--sw-size-small);
    font-weight: var(--sw-weight-medium);
    color: #a31219;
}

/* Alerts (also the Admin Panel pattern) */
.sw-alert {
    margin: 0 0 var(--sw-space-4);
    padding: 10px 12px;
    font-size: var(--sw-size-small);
    border: 1px solid;
    border-radius: var(--sw-radius-md);
}

.sw-alert-error {
    color: var(--sw-danger-ink);
    background-color: var(--sw-danger-bg);
    border-color: var(--sw-danger);
}

.sw-alert-success {
    color: var(--sw-success-ink);
    background-color: var(--sw-success-bg);
    border-color: var(--sw-success);
}

.sw-alert-warning {
    color: var(--sw-warning-ink);
    background-color: var(--sw-warning-bg);
    border-color: var(--sw-warning);
}

.sw-alert-info {
    color: var(--sw-info-ink);
    background-color: var(--sw-info-bg);
    border-color: var(--sw-info);
}

/* On light cards, alerts use light tints with dark text */
.sw-card .sw-alert-error {
    color: #6d0b11;
    background-color: #fbe3e4;
    border-color: #a31219;
}

.sw-card .sw-alert-success {
    color: #0f3520;
    background-color: #dcf3e2;
    border-color: #1e7a3c;
}

.sw-card .sw-alert-warning {
    color: #4a2f04;
    background-color: #fdf0d3;
    border-color: #9a6a10;
}

.sw-card .sw-alert-info {
    color: #0e2f45;
    background-color: #d9f0fc;
    border-color: #166da3;
}

/* Badge */
.sw-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: var(--sw-size-meta);
    font-weight: var(--sw-weight-medium);
    border-radius: 999px;
    border: 1px solid var(--sw-border-strong);
    background-color: var(--sw-surface-raised);
    color: var(--sw-text-secondary);
}

.sw-badge-gold {
    color: #3a2a08;
    background-color: var(--sw-gold);
    border-color: #9a6a10;
}

.sw-badge-danger {
    color: #fff;
    background-color: #a31219;
    border-color: #6d0b11;
}

.sw-badge-success {
    color: #062b16;
    background-color: var(--sw-success);
    border-color: #1e7a3c;
}

/* Divider */
.sw-divider {
    margin: var(--sw-space-4) 0;
    border: 0;
    border-top: 1px solid var(--sw-border);
}

.sw-card .sw-divider {
    border-top-color: #c3c9ea;
}

/* Modal / dialog foundation */
.sw-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(4, 7, 20, 0.65);
}

.sw-modal {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 50;
    width: min(440px, calc(100vw - 32px));
    max-height: 85vh;
    overflow: auto;
    background: var(--sw-surface);
    border: 1px solid var(--sw-border-strong);
    border-radius: var(--sw-radius-xl);
    box-shadow: var(--sw-shadow-lg);
    padding: var(--sw-space-5);
}

/* Tabs foundation */
.sw-tabs {
    display: flex;
    gap: var(--sw-space-1);
    border-bottom: 2px solid var(--sw-border);
    margin-bottom: var(--sw-space-4);
}

.sw-tab {
    padding: 8px 14px;
    font-size: var(--sw-size-small);
    font-weight: var(--sw-weight-medium);
    color: var(--sw-text-secondary);
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
}

.sw-tab[aria-selected="true"] {
    color: var(--sw-cyan);
    border-bottom-color: var(--sw-cyan);
}

/* Table foundation (admin reuse) */
.sw-table-wrap {
    overflow-x: auto;
}

.sw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--sw-size-small);
}

.sw-table th,
.sw-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid var(--sw-border);
}

.sw-table th {
    font-weight: var(--sw-weight-medium);
    color: var(--sw-text-secondary);
    text-transform: uppercase;
    font-size: var(--sw-size-meta);
    letter-spacing: 0.5px;
}

.sw-table-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Empty state */
.sw-empty {
    padding: var(--sw-space-6) var(--sw-space-4);
    text-align: center;
    color: var(--sw-text-secondary);
}

.sw-empty p {
    margin: var(--sw-space-2) 0 0;
    font-size: var(--sw-size-small);
}

/* Page header (admin reuse) */
.sw-page-header {
    width: 100%;
    max-width: 960px;
    margin-bottom: var(--sw-space-4);
}

.sw-page-header h1 {
    margin: 0;
    font-size: var(--sw-size-title);
}

.sw-page-header p {
    margin: var(--sw-space-1) 0 0;
    color: var(--sw-text-secondary);
}

/* Navigation item (admin sidebar reuse) */
.sw-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sw-nav-item {
    display: block;
    padding: 9px 12px;
    border-radius: var(--sw-radius-md);
    color: var(--sw-text-secondary);
    text-decoration: none;
    font-size: var(--sw-size-small);
    font-weight: var(--sw-weight-medium);
}

.sw-nav-item:hover {
    background-color: var(--sw-surface-raised);
    color: var(--sw-text);
}

.sw-nav-item[aria-current="page"] {
    background-color: rgba(39, 170, 225, 0.16);
    color: var(--sw-cyan);
}

/* Icon button */
.sw-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    min-height: 42px;
    padding: 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--sw-radius-md);
    color: var(--sw-text-secondary);
    cursor: pointer;
}

.sw-icon-btn:hover {
    background-color: var(--sw-surface-raised);
    color: var(--sw-text);
}

.sw-icon-btn img {
    width: 20px;
    height: 20px;
}

/* Checkbox row */
.sw-check {
    display: flex;
    gap: var(--sw-space-2);
    align-items: flex-start;
    font-size: var(--sw-size-small);
}

.sw-check input {
    width: 18px;
    height: 18px;
    margin-top: 1px;
    accent-color: var(--sw-primary);
}

/* ---- 5. Auth pages ---------------------------------------------------- */
.auth-body {
    margin: 0;
}

.auth-card-footer {
    margin-top: var(--sw-space-4);
    text-align: center;
    font-size: var(--sw-size-small);
}

.auth-card-footer a {
    color: #166da3;
    font-weight: var(--sw-weight-medium);
}

.auth-locale {
    margin-top: var(--sw-space-4);
    padding-top: var(--sw-space-3);
    border-top: 1px solid #c3c9ea;
    display: flex;
    gap: var(--sw-space-2);
    align-items: flex-end;
}

.auth-locale .sw-field {
    flex: 1;
    margin-bottom: 0;
}

.auth-locale .sw-label {
    color: var(--sw-text-secondary);
}

.auth-locale .sw-input,
.auth-locale .sw-btn {
    min-height: 38px;
}

/* File upload control: real input, styled trigger */
.sw-file {
    position: relative;
}

.sw-file input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sw-file input[type="file"]:focus-visible + .sw-file-trigger {
    outline: 3px solid var(--sw-focus);
    outline-offset: 2px;
}

.sw-file-name {
    margin: var(--sw-space-1) 0 0;
    font-size: var(--sw-size-meta);
    color: #3d4480;
    overflow-wrap: anywhere;
}

.sw-avatar-current {
    display: flex;
    gap: var(--sw-space-3);
    align-items: center;
    margin-bottom: var(--sw-space-4);
    padding: var(--sw-space-3);
    background: #e7ebfb;
    border: 1px solid #c3c9ea;
    border-radius: var(--sw-radius-md);
}

.sw-avatar-current img {
    width: 68px;
    height: 68px;
    border-radius: var(--sw-radius-md);
    border: 1px solid var(--sw-border);
    image-rendering: auto;
}

.sw-avatar-current .sw-avatar-name {
    font-weight: var(--sw-weight-medium);
    overflow-wrap: anywhere;
}

.sw-help-block {
    margin-bottom: var(--sw-space-4);
}

/* ---- 6. Utilities (minimal) -------------------------------------------- */
.sw-mt-0 { margin-top: 0; }
.sw-mt-4 { margin-top: var(--sw-space-4); }
.sw-text-center { text-align: center; }
.sw-text-muted { color: var(--sw-text-muted); }

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

/* ---- 7. Responsive ------------------------------------------------------ */
@media (max-width: 480px) {
    .sw-page {
        padding: var(--sw-space-4) var(--sw-space-3);
    }

    .sw-brand img {
        max-width: 220px;
    }

    .sw-card {
        padding: var(--sw-space-4) var(--sw-space-3);
    }

    .sw-card h1 {
        font-size: var(--sw-size-section);
    }

    .auth-locale {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ---- 8. Motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition: none;
        animation: none;
    }
}