/**
 * Modern States email-change tool — shared styles.
 *
 * All PHP pages link to this file rather than carrying inline <style> blocks.
 * Brand colors and typography are defined as CSS custom properties and
 * referenced everywhere, so future brand adjustments require editing only
 * the :root block below.
 */

:root {
    /* Modern States brand */
    --ms-blue: #126f9a;
    --ms-blue-dark: #0e5677;
    --ms-green: #66b10f;
    --ms-green-dark: #528c0c;
    --ms-orange: #f66f21;
    --ms-orange-dark: #d55a15;

    /* UI neutrals */
    --ms-error-red: #a83232;
    --ms-error-red-dark: #8a2828;
    --ms-dark: #2a2a2a;
    --ms-text: #222;
    --ms-text-muted: #666;
    --ms-text-mute-2: #888;
    --ms-border: #bbb;
    --ms-border-light: #e4e4e4;
    --ms-bg-card: #f4f4f4;
    --ms-bg-light: #f8f8f8;
    --ms-bg-success: #e6f4ea;
    --ms-bg-success-ink: #0a4a0a;
    --ms-bg-error: #fde8e8;
    --ms-bg-error-ink: #6b1a1a;
    --ms-bg-dev-note: #fff6eb;
    --ms-bg-dev-note-border: var(--ms-orange);

    /* Typography */
    --ms-font: "Open Sans", -apple-system, system-ui, "Helvetica Neue", Arial, sans-serif;
}

/* ---------------------------------------------------------------
 * Base
 * ------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--ms-font);
    color: var(--ms-text);
    background: white;
    line-height: 1.5;
}
a { color: var(--ms-blue); }
a:hover { color: var(--ms-blue-dark); }
code { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; }

/* ---------------------------------------------------------------
 * Top banner (on every page, both learner + admin)
 * ------------------------------------------------------------- */
.ms-topbar {
    background: white;
    border-bottom: 4px solid var(--ms-green);
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.ms-topbar .ms-topbar-logo img {
    height: 36px;
    width: auto;
    display: block;
}
.ms-topbar .ms-topbar-tool-name {
    font-size: 0.85rem;
    color: var(--ms-text-muted);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------
 * Page containers
 * ------------------------------------------------------------- */
.ms-container-narrow {
    max-width: 560px;
    margin: 2rem auto;
    padding: 0 1rem;
}
.ms-container-wide {
    max-width: 1280px;
    margin: 1.5rem auto;
    padding: 0 1rem;
}
.ms-container-center {
    max-width: 560px;
    margin: 4rem auto;
    padding: 0 1rem;
    text-align: center;
}

/* ---------------------------------------------------------------
 * Headings
 * ------------------------------------------------------------- */
h1 { color: var(--ms-blue); font-size: 1.4rem; margin-bottom: 0.5rem; font-weight: 600; }
h2 { color: var(--ms-blue); font-size: 1.1rem; font-weight: 600; margin-top: 0; }
.ms-h1-success { color: var(--ms-green); font-size: 1.5rem; }
.ms-h1-error { color: var(--ms-error-red); font-size: 1.25rem; }

/* ---------------------------------------------------------------
 * Learner form (form.php)
 * ------------------------------------------------------------- */
.ms-current-email {
    background: var(--ms-bg-card);
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}
.ms-current-email strong { color: var(--ms-blue); }
.ms-form label { display: block; margin-top: 0.8rem; font-weight: 600; }
.ms-form input[type="email"],
.ms-form input[type="text"],
.ms-form input[type="date"],
.ms-form input[type="number"],
.ms-form select {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid var(--ms-border);
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
    margin-top: 0.3rem;
}
.ms-note {
    font-size: 0.85rem;
    color: var(--ms-text-muted);
    margin-top: 1rem;
    line-height: 1.4;
}

/* ---------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------- */
.ms-btn,
button.ms-btn,
a.ms-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    background: var(--ms-blue);
    color: white;
    border: 0;
    border-radius: 4px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    font-weight: 600;
    font-family: inherit;
}
.ms-btn:hover { background: var(--ms-blue-dark); color: white; }
.ms-btn:disabled { background: var(--ms-text-mute-2); cursor: not-allowed; }
.ms-btn.ms-btn-success { background: var(--ms-green); }
.ms-btn.ms-btn-success:hover { background: var(--ms-green-dark); }
.ms-btn.ms-btn-accent { background: var(--ms-orange); color: var(--ms-dark); }
.ms-btn.ms-btn-accent:hover { background: var(--ms-orange-dark); color: white; }
.ms-btn.ms-btn-danger { background: var(--ms-error-red); }
.ms-btn.ms-btn-danger:hover { background: var(--ms-error-red-dark); }
.ms-btn.ms-btn-secondary { background: #ddd; color: var(--ms-text); }
.ms-btn.ms-btn-secondary:hover { background: #ccc; }

.ms-btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
    font-weight: 600;
}

/* ---------------------------------------------------------------
 * Back links (in rejection pages)
 * ------------------------------------------------------------- */
.ms-back {
    margin-top: 1.5rem;
}
.ms-back a {
    color: var(--ms-blue);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

/* ---------------------------------------------------------------
 * Success-page specifics
 * ------------------------------------------------------------- */
.ms-success-check {
    font-size: 3rem;
    color: var(--ms-green);
    line-height: 1;
}
.ms-success-email {
    background: var(--ms-bg-card);
    padding: 0.6rem 1rem;
    border-radius: 4px;
    display: inline-block;
    font-family: monospace;
    margin: 1rem 0;
}
.ms-success-body p {
    text-align: left;
    max-width: 440px;
    margin: 1rem auto;
}

/* ---------------------------------------------------------------
 * Admin "box" at top of learner form for qualifying admins
 * ------------------------------------------------------------- */
.ms-admin-box {
    background: var(--ms-dark);
    color: white;
    padding: 0.9rem 1.1rem;
    border-radius: 6px;
    margin-bottom: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
}
.ms-admin-box .ms-admin-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #aaa;
}
.ms-admin-box .ms-admin-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: 0.2rem;
}
.ms-admin-box a.ms-btn {
    background: var(--ms-blue);
    color: white;
    white-space: nowrap;
}
.ms-admin-box a.ms-btn:hover {
    background: var(--ms-blue-dark);
    color: white;
}

/* ---------------------------------------------------------------
 * Admin dashboard
 * ------------------------------------------------------------- */
.ms-admin-header {
    background: var(--ms-dark);
    color: white;
    padding: 1rem 1.2rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ms-admin-header .ms-admin-header-left {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}
.ms-admin-header img.ms-admin-header-logo {
    height: 28px;
    width: auto;
    display: block;
}
.ms-admin-header h1 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: white;
}
.ms-admin-header .ms-admin-meta {
    font-size: 0.8rem;
    color: #aaa;
    font-family: monospace;
}

.ms-admin-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #eee;
}
.ms-admin-nav a {
    padding: 0.6rem 1rem;
    text-decoration: none;
    color: #444;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.ms-admin-nav a:hover { color: var(--ms-blue); }
.ms-admin-nav a.ms-active {
    color: var(--ms-blue);
    border-bottom-color: var(--ms-blue);
}
.ms-admin-nav a.ms-back-to-form { margin-left: auto; color: var(--ms-text-muted); }

/* Admin cards */
.ms-card {
    background: var(--ms-bg-light);
    border: 1px solid var(--ms-border-light);
    border-radius: 6px;
    padding: 1.2rem;
    margin-bottom: 1rem;
}

/* Flash messages */
.ms-flash {
    padding: 0.8rem 1rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.ms-flash.ms-flash-success {
    background: var(--ms-bg-success);
    border-left: 3px solid var(--ms-green);
    color: var(--ms-bg-success-ink);
}
.ms-flash.ms-flash-error {
    background: var(--ms-bg-error);
    border-left: 3px solid var(--ms-error-red);
    color: var(--ms-bg-error-ink);
}

/* Filter rows */
.ms-filters {
    background: var(--ms-bg-card);
    padding: 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.8rem 1rem;
    align-items: end;
}
.ms-filters label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #444;
    margin-bottom: 0.25rem;
}
.ms-filters input,
.ms-filters select {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--ms-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}
.ms-filters .ms-checkbox-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.ms-filters .ms-checkbox-row input { width: auto; }
.ms-filters .ms-actions {
    display: flex;
    gap: 0.5rem;
    grid-column: 1 / -1;
}

/* Summary and badges */
.ms-summary {
    font-size: 0.85rem;
    color: var(--ms-text-muted);
    margin: 0.5rem 0 1rem 0;
}
.ms-badges {
    margin: 0.5rem 0 1rem 0;
    display: flex;
    gap: 1rem;
    font-size: 0.85rem;
    color: var(--ms-text-muted);
    flex-wrap: wrap;
}
.ms-badges .ms-badge {
    background: #eee;
    padding: 0.25rem 0.6rem;
    border-radius: 12px;
}

/* Tables */
.ms-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.ms-table th,
.ms-table td {
    padding: 0.55rem 0.7rem;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: top;
}
.ms-table th {
    background: var(--ms-bg-light);
    font-weight: 600;
    color: #444;
}
.ms-table tr:hover { background: #fafafa; }
.ms-table td.ms-mono,
.ms-table .ms-mono {
    font-family: monospace;
    font-size: 0.8rem;
    word-break: break-all;
}

/* Event-type colorings in audit log */
.ms-event-submit_ok,
.ms-event-confirm_ok { color: var(--ms-green-dark); font-weight: 600; }
.ms-event-confirm_failed { color: var(--ms-error-red); font-weight: 600; }
.ms-event-submit_attempted { color: var(--ms-text-mute-2); }
.ms-event-admin_viewed_audit_log,
.ms-event-admin_viewed_rate_limits,
.ms-event-admin_viewed_pending,
.ms-event-admin_viewed_blocklist,
.ms-event-token_probe_ok { color: var(--ms-text-mute-2); font-style: italic; }

/* Status pills (pending changes page) */
.ms-pill {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}
.ms-pill-active   { background: var(--ms-bg-success); color: var(--ms-bg-success-ink); }
.ms-pill-expired  { background: #f4f4f4; color: var(--ms-text-mute-2); }
.ms-pill-consumed { background: #e8eef4; color: var(--ms-blue); }
.ms-pill-seed     { background: #eef; color: #44a; }
.ms-pill-admin    { background: #ffeadc; color: var(--ms-orange-dark); }

/* Details/summary (collapsed metadata in audit log) */
.ms-table details summary {
    cursor: pointer;
    color: var(--ms-blue);
    font-size: 0.8rem;
}
.ms-table details pre {
    background: var(--ms-bg-card);
    padding: 0.5rem;
    border-radius: 3px;
    font-size: 0.75rem;
    max-width: 40ch;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Rate-limit usage bar */
.ms-bar {
    display: inline-block;
    vertical-align: middle;
    height: 10px;
    background: #e6e6e6;
    border-radius: 5px;
    width: 80px;
    overflow: hidden;
    margin-right: 0.4rem;
}
.ms-bar > span {
    display: block;
    height: 100%;
    background: var(--ms-green);
}
.ms-bar.ms-bar-over > span { background: var(--ms-error-red); }
.ms-over-limit { color: var(--ms-error-red); font-weight: 600; }
.ms-under-limit { color: var(--ms-green-dark); }

/* Pagination */
.ms-pagination {
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ms-pagination form { display: inline; }
.ms-pagination button {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--ms-border);
    background: white;
    cursor: pointer;
    border-radius: 4px;
    font-size: 0.85rem;
    font-family: inherit;
}
.ms-pagination button:hover { background: var(--ms-bg-card); }
.ms-pagination button:disabled {
    color: var(--ms-border);
    cursor: not-allowed;
}
.ms-pagination .ms-current {
    font-size: 0.85rem;
    color: var(--ms-text-muted);
}

/* Add-card on blocklist page */
.ms-add-row {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}
.ms-add-row input {
    flex: 1;
    padding: 0.5rem;
    border: 1px solid var(--ms-border);
    border-radius: 4px;
    font-size: 0.9rem;
    font-family: inherit;
}

/* Stats grid (overview page) */
.ms-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}
.ms-stat {
    background: white;
    border: 1px solid var(--ms-border-light);
    border-radius: 4px;
    padding: 1rem;
    text-align: center;
}
.ms-stat .ms-stat-value {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--ms-blue);
}
.ms-stat .ms-stat-label {
    font-size: 0.8rem;
    color: var(--ms-text-muted);
    margin-top: 0.3rem;
}

/* Dev note (yellow-ish in debug mode) */
.ms-dev-note {
    margin-top: 1.5rem;
    padding: 0.8rem 1rem;
    background: var(--ms-bg-dev-note);
    border-left: 3px solid var(--ms-bg-dev-note-border);
    font-size: 0.85rem;
    line-height: 1.5;
}
.ms-dev-note dl { margin: 0.5rem 0 0 0; background: transparent; padding: 0; }
.ms-dev-note dt { font-weight: 600; margin-top: 0.4rem; }
.ms-dev-note dd { margin-left: 0; font-family: monospace; word-break: break-all; font-size: 0.85rem; }

/* "Coming soon" placeholders */
.ms-coming-soon {
    background: var(--ms-bg-dev-note);
    border-left: 3px solid var(--ms-orange);
    padding: 0.8rem 1rem;
    font-size: 0.9rem;
    color: #555;
    margin: 2rem 0;
}

/* PHP-1 phase-1 scaffolding root page */
.ms-phase-banner {
    color: var(--ms-green-dark);
    font-weight: bold;
}