/* NOVA SOCIAL CONTROL — base visuelle (JALON 2, révisée).
   Direction validée section 34/55 du master prompt : dark control room,
   technique, premium, accent orange (jamais dominant). Palette et typo
   alignées sur le logo Nova (métal gris + orange), esprit "interface
   industrielle" (panneau de contrôle) plutôt que SaaS générique.
   Le détail des écrans fonctionnels est construit aux jalons dédiés
   (Content, Calendar, Accounts...) dans leurs propres fichiers CSS, qui
   consomment les variables définies ici. */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

:root {
    --sc-bg: #0d0e10;
    --sc-surface: #17181b;
    --sc-surface-2: #1c1e22;
    --sc-border: #2a2c30;
    --sc-border-strong: #3c4046;
    --sc-text: #e8e8ea;
    --sc-text-muted: #9a9ca1;
    --sc-accent: #ff7a1a;
    --sc-accent-soft: rgba(255, 122, 26, 0.16);
    --sc-accent-dim: #b85a12;
    --sc-error: #ff5c5c;
    --sc-radius: 4px;
    --sc-metal: linear-gradient(135deg, #5a5e64 0%, #9a9ea4 35%, #3a3d42 70%, #6b6f75 100%);
    --sc-font: 'Chakra Petch', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--sc-bg); }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(255, 122, 26, 0.05), transparent 60%),
        repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.012) 0px, rgba(255, 255, 255, 0.012) 1px, transparent 1px, transparent 64px),
        var(--sc-bg);
    color: var(--sc-text);
    font-family: var(--sc-font);
    font-weight: 400;
}

h1, h2, h3 {
    font-family: var(--sc-font);
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* --- Connexion --------------------------------------------------------- */

.sc-auth {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.sc-auth-card {
    width: 100%;
    max-width: 380px;
    background: linear-gradient(180deg, var(--sc-surface-2), var(--sc-surface));
    border: 1px solid var(--sc-border-strong);
    border-radius: 10px;
    padding: 32px 32px 28px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 24px 60px -20px rgba(0, 0, 0, 0.7);
    position: relative;
    overflow: hidden;
}

.sc-auth-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sc-accent), transparent);
    opacity: 0.8;
}

.sc-auth-logo {
    display: block;
    width: 168px;
    margin: 0 auto 20px;
}

.sc-auth-card h1 {
    font-size: 0.78rem;
    text-align: center;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sc-text-muted);
    margin: 0 0 22px;
    font-weight: 600;
}

.sc-auth-card label {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sc-text-muted);
    margin: 16px 0 6px;
}

.sc-auth-card input {
    width: 100%;
    padding: 10px 12px;
    background: var(--sc-bg);
    border: 1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    color: var(--sc-text);
    font-family: inherit;
    font-size: 0.95rem;
}

.sc-auth-card input:focus {
    outline: none;
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px var(--sc-accent-soft);
}

/* Apparence industrielle partagée par tous les boutons pleins (bevel métal/orange) */
.sc-auth-card button,
.sc-topbar button,
.sc-btn {
    display: inline-block;
    padding: 11px 14px;
    background: linear-gradient(180deg, #ff8a34, var(--sc-accent) 55%, var(--sc-accent-dim));
    border: 1px solid #ffa155;
    border-radius: var(--sc-radius);
    color: #1a0d00;
    font-family: inherit;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.82rem;
    cursor: pointer;
    text-decoration: none;
    transition: filter 0.15s ease, transform 0.05s ease;
}

.sc-auth-card button:hover,
.sc-topbar button:hover,
.sc-btn:hover { filter: brightness(1.08); }
.sc-auth-card button:active,
.sc-topbar button:active,
.sc-btn:active { transform: translateY(1px); }

/* Le formulaire de connexion garde un bouton pleine largeur */
.sc-auth-card button { width: 100%; margin-top: 20px; }
.sc-topbar button { padding: 8px 16px; font-size: 0.75rem; }
.sc-btn { padding: 8px 16px; margin: 8px 0; }

.sc-error {
    color: var(--sc-error);
    font-size: 0.85rem;
}

/* --- Bandeau applicatif -------------------------------------------------- */

.sc-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 14px 24px;
    background: linear-gradient(180deg, var(--sc-surface-2), var(--sc-surface));
    border-bottom: 1px solid var(--sc-border);
    position: relative;
}

.sc-topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg, transparent 10%, var(--sc-accent) 50%, transparent 90%);
    opacity: 0.55;
}

.sc-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    letter-spacing: 0.05em;
    font-weight: 700;
    white-space: nowrap;
}

.sc-brand img {
    width: 30px;
    height: 30px;
    display: block;
}

.sc-brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.sc-brand-nova { color: var(--sc-text); font-size: 0.92rem; letter-spacing: 0.12em; }
.sc-brand-sub { color: var(--sc-accent); font-size: 0.56rem; letter-spacing: 0.2em; font-weight: 600; }

.sc-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
}

.sc-nav a {
    color: var(--sc-text-muted);
    text-decoration: none;
    font-size: 0.74rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 8px 12px;
    border-radius: var(--sc-radius);
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.sc-nav a:hover {
    color: var(--sc-text);
    background: rgba(255, 255, 255, 0.03);
}

.sc-nav a.sc-nav-active {
    color: var(--sc-accent);
    border-bottom-color: var(--sc-accent);
}

.sc-dashboard {
    padding: 24px;
    color: var(--sc-text-muted);
}

/* Éléments de surface réutilisables par les pages (cartes, tags métal) */
.sc-card {
    background: var(--sc-surface);
    border: 1px solid var(--sc-border);
    border-radius: 8px;
}

.sc-metal-tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: var(--sc-surface-2);
    border: 1px solid var(--sc-border-strong);
    color: var(--sc-text-muted);
}