/* UI Foundation phase — Portal's own remaining stylesheet, now built on the shared
   News.DesignSystem tokens/primitives (linked before this file in _Layout.cshtml) instead of its
   own hardcoded W28A placeholder colors. Two jobs only:
     1. The app-shell layout pieces specific to Portal (the pre-auth centered card wrapper — the
        authenticated sidebar/topbar shell itself lives entirely in primitives.css's .fc-app-shell
        family, reused as-is).
     2. Base-element defaults + the pre-existing .error/.notice/.warning/.container class names —
        every existing Portal page (Customers, Sites, Credentials, Usage, Billing, Team,
        Invitations — none of them redesigned this phase, per Task 8's own scope boundary) already
        uses these exact class names and bare <button>/<input>/<label> elements, so restyling them
        HERE, once, gives all fifteen-plus existing pages the new coherent look with zero markup
        changes and zero regression risk to their tested logic. */

body {
    margin: 0;
    background: var(--fc-bg);
    color: var(--fc-text);
    font-family: var(--fc-font-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--fc-primary); }

h1 { font-family: var(--fc-font-display); font-size: 1.5rem; margin: 0 0 var(--fc-space-2); }
h2 { font-family: var(--fc-font-display); font-size: 1.2rem; margin: var(--fc-space-5) 0 var(--fc-space-2); }

/* ---- pre-auth centered card (Login/Signup/Forgot/Reset/VerifyEmail/Invitation-Accept) --------- */
/* .fc-auth-shell/.fc-auth-card/.fc-auth-wordmark now live in the shared News.DesignSystem
   primitives.css (loaded before this file — see this file's own header comment), since
   News.Admin's own auth pages need the exact same rules and previously had no real definition
   for them at all. Kept out of this file to avoid two copies drifting apart. */

/* Legacy container (still referenced by a couple of pages outside the auth flow) — same card
   treatment, standalone rather than shell-centered. */
.container {
    max-width: 30rem; margin: var(--fc-space-7) auto; padding: var(--fc-space-5);
    background: var(--fc-surface-raised); border: 1px solid var(--fc-border);
    border-radius: var(--fc-radius-md); box-shadow: var(--fc-shadow-sm);
}

/* ---- base element defaults (bare elements, no class, used throughout the un-redesigned pages) - */

label { display: block; margin-top: var(--fc-space-4); font-size: 0.85rem; font-weight: 600; }

input[type="email"], input[type="password"], input[type="text"], input[type="number"], textarea, select {
    width: 100%; box-sizing: border-box; padding: 0.55rem 0.7rem; margin-top: var(--fc-space-1);
    border: 1px solid var(--fc-border-strong); border-radius: var(--fc-radius-sm);
    background: var(--fc-surface); color: var(--fc-text); font: inherit; font-size: 0.92rem;
}
input:focus, textarea:focus, select:focus { outline: none; box-shadow: var(--fc-focus-ring); border-color: var(--fc-primary); }

button, .fc-btn-like {
    margin-top: var(--fc-space-5); padding: 0.6rem 1.2rem; background: var(--fc-primary);
    color: var(--fc-text-on-accent); border: none; border-radius: var(--fc-radius-sm); font: inherit;
    font-weight: 600; font-size: 0.9rem; cursor: pointer;
}
button:hover { background: var(--fc-primary-strong); }
button:focus-visible { outline: none; box-shadow: var(--fc-focus-ring); }
/* A <button> immediately following another (inline action pairs, e.g. Team's Resend/Revoke) reads
   better without repeating the same large top margin every time. */
button + button { margin-left: var(--fc-space-2); }

table { border-collapse: collapse; width: 100%; margin: var(--fc-space-4) 0; font-size: 0.88rem; }
th, td { text-align: left; padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--fc-border); }
th { background: var(--fc-surface-sunken); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fc-text-faint); }

.error {
    color: var(--fc-danger); background: var(--fc-danger-soft); border: 1px solid color-mix(in srgb, var(--fc-danger) 30%, var(--fc-border));
    padding: 0.65rem 0.9rem; border-radius: var(--fc-radius-sm); margin-top: var(--fc-space-4); font-size: 0.88rem;
}
.notice {
    color: var(--fc-success); background: var(--fc-success-soft); border: 1px solid color-mix(in srgb, var(--fc-success) 30%, var(--fc-border));
    padding: 0.65rem 0.9rem; border-radius: var(--fc-radius-sm); margin-top: var(--fc-space-4); font-size: 0.88rem;
}
.warning {
    color: var(--fc-warning); background: var(--fc-warning-soft); border: 1px solid color-mix(in srgb, var(--fc-warning) 30%, var(--fc-border));
    padding: 0.65rem 0.9rem; border-radius: var(--fc-radius-sm); margin-top: var(--fc-space-4); font-size: 0.88rem;
}