/* MPA PostDoc Portal — shared stylesheet
   Modern design system layered over w3.css, in the same spirit as
   guests/hiring's mpa-guest-portal.css — same palette/tokens for a
   consistent MPA look, adapted here to pd2026's own markup (fixed
   .w3-bar top navbar, w3-card-1 containers, w3-theme-* header bars)
   rather than copied wholesale, since this app doesn't share markup
   with the guests/hiring apps.
   Referenced as: <link rel="stylesheet" href="css/mpa-pd-portal.css">
*/

:root {
    --primary-slate: #0f172a;
    --primary-hover: #334155;
    --text-main: #1e293b;
    --text-muted: #64748b;
    --border-color: #e2e8f0;
    --focus-ring: rgba(15, 23, 42, 0.12);
    /* Blue/red match the app's own original brand colors (previously
       css/w3-theme-teal.css's .w3-theme-blue / .w3-theme-red, and still
       used as-is for the disability-flag row border in admin.php/
       committee.php/ext/*.php) — hover/tint shades are derived from them. */
    --link-color: #005085;
    --link-hover: #003e67;
    --success-green: #166534;
    --danger-red: #85000d;
    --danger-red-hover: #67000a;
    /* Fixed light design — without this, OS/browser dark mode re-themes
       native form controls with a dark palette our own CSS never asked for. */
    color-scheme: light;
}

body {
    background-color: #f8fafc !important;
    font-family: 'Inter', -apple-system, sans-serif !important;
    color: var(--text-main);
}

/* ---------------------------------------------------------------------
   Masthead (output_mpa_header() in functions.php)
--------------------------------------------------------------------- */
.mpa-masthead {
    border-bottom: 2px solid var(--primary-slate);
    padding-bottom: 20px !important;
    margin-bottom: 8px;
}
.mpa-masthead-title {
    color: var(--primary-slate) !important;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 6px;
}
.mpa-masthead-subtitle {
    color: var(--text-muted);
    font-size: 1.1rem !important;
    line-height: 1.4;
}
.mpa-logo { max-height: 90px; width: auto; }

/* ---------------------------------------------------------------------
   Fixed top navigation (admin_navbar.php, committee_navbar.php,
   admin_speedreaders.php, createtokens.php, ...). All of these render a
   <div class="w3-bar w3-theme-red|w3-theme|w3-theme-blue"> with
   <a class="w3-bar-item w3-button"> children — style by that combination
   so every page gets this without editing each navbar file individually.
--------------------------------------------------------------------- */
.w3-bar.w3-theme-red,
.w3-bar.w3-theme,
.w3-bar.w3-theme-blue {
    background-color: #f8fafc !important; /* blend with the page — no solid color band; the links carry the visual weight */
    border-bottom: 1px solid var(--border-color);
    display: flex !important;
    align-items: center;
    flex-wrap: wrap;
}
.w3-bar-item.w3-button {
    background: transparent !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    padding: 14px 16px !important;
    border-radius: 0 !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.w3-bar-item.w3-button:hover {
    background-color: #eef2f7 !important;
    color: var(--primary-slate) !important;
}
.w3-bar-item.w3-button.w3-right { color: var(--danger-red) !important; }
.w3-bar-item.w3-button.w3-right:hover { background-color: #fef2f2 !important; color: var(--danger-red-hover) !important; }

/* Greeting line directly under the fixed navbar */
.w3-text-theme, .w3-container.w3-padding-16.w3-text-theme {
    color: var(--text-muted) !important;
}

/* Page/section headings previously used raw w3.css teal (#009688) —
   migrated to the app's slate brand color for consistency with
   header.w3-theme-*, card borders, etc. Scoped to heading tags only:
   w3-text-teal is also used on a few pieces of status text (e.g.
   admin.php's "Letter Submitted" indicator) where the teal-vs-red color
   is a meaningful signal, not a leftover — those are left alone. */
h1.w3-text-teal, h2.w3-text-teal, h3.w3-text-teal, h4.w3-text-teal, h5.w3-text-teal, h6.w3-text-teal {
    color: var(--primary-slate) !important;
}

/* ---------------------------------------------------------------------
   Card containers (w3-card-1, used everywhere for content blocks)
--------------------------------------------------------------------- */
.w3-card-1 {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid var(--border-color) !important;
}

/* Card section headers: header.w3-theme-red / w3-theme / w3-theme-blue.
   Flatten the previously-solid, saturated color blocks into a subtle
   tinted header with a colored accent border instead. */
header.w3-theme-red, header.w3-theme, header.w3-theme-blue {
    color: var(--primary-slate) !important;
    font-weight: 600;
    border-bottom: 2px solid var(--border-color);
    padding: 14px 16px !important;
}
header.w3-theme-red { background-color: #fef2f2 !important; border-bottom-color: #ce999e; }
header.w3-theme      { background-color: #f8fafc !important; border-bottom-color: var(--primary-slate); }
header.w3-theme-blue  { background-color: #eff6ff !important; border-bottom-color: #99b9ce; }
header.w3-theme-red h4, header.w3-theme h4, header.w3-theme-blue h4 {
    margin: 0;
    font-size: 1.05rem;
}

/* ---------------------------------------------------------------------
   Notification / status panels (w3-panel)
--------------------------------------------------------------------- */
.w3-panel {
    border-radius: 6px;
    border-left: 4px solid var(--primary-slate) !important;
    background-color: #f1f5f9 !important;
    color: var(--text-main) !important;
    padding: 16px !important;
}
.w3-panel.w3-theme-red, .w3-panel.w3-red {
    border-left-color: var(--danger-red) !important;
    background-color: #fef2f2 !important;
    color: var(--danger-red-hover) !important;
}
.w3-panel.w3-theme, .w3-panel.w3-blue {
    border-left-color: var(--link-color) !important;
    background-color: #eff6ff !important;
    color: var(--link-hover) !important;
}
.w3-panel.w3-yellow {
    border-left-color: #ca8a04 !important;
    background-color: #fefce8 !important;
    color: #854d0e !important;
}
.w3-panel.w3-pale-green, .w3-panel.w3-green {
    border-left-color: var(--success-green) !important;
    background-color: #f0fdf4 !important;
    color: #14532d !important;
}
.w3-panel a { color: var(--link-color); text-decoration: underline; }
.w3-panel a:hover { color: var(--link-hover); }

/* ---------------------------------------------------------------------
   Buttons — each w3.css color modifier keeps a distinct, meaningful
   treatment (this app actually uses them semantically: e.g. admin.php's
   Mark Invite/Mark Waitlist/Mark Reject row is w3-theme/w3-theme-brown/
   w3-theme-red, and comments.php's Save/Save Note Only/Delete row is
   w3-theme/w3-light-blue/w3-theme-red) — collapsing them all to one solid
   near-black lost that distinction, which is why "Save Note Only" stopped
   reading as different from "Save".
--------------------------------------------------------------------- */
.w3-button {
    /* base/primary: also covers .w3-theme and .w3-theme-blue below */
    background-color: var(--link-color) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    padding: 10px 20px !important;
    font-size: 0.9rem !important;
    transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
}
.w3-button:hover { background-color: var(--link-hover) !important; color: #ffffff !important; }

/* Danger (Mark Reject, Delete, ...) */
.w3-button.w3-theme-red, .w3-button.w3-red { background-color: var(--danger-red) !important; }
.w3-button.w3-theme-red:hover, .w3-button.w3-red:hover { background-color: var(--danger-red-hover) !important; }

/* Pending/warning (Mark Waitlist) */
.w3-button.w3-theme-brown {
    background-color: #b45309 !important;
}
.w3-button.w3-theme-brown:hover { background-color: #92400e !important; }

/* Secondary save-style action, distinct from the primary button next to it
   (comments.php: "Save Note Only" vs. "Save") — outlined instead of solid. */
.w3-button.w3-light-blue {
    background-color: #ffffff !important;
    color: var(--link-color) !important;
    border: 1px solid #bfd3e0 !important;
}
.w3-button.w3-light-blue:hover {
    background-color: #eff6ff !important;
    color: var(--link-hover) !important;
}

/* Neutral (Clear/Back/Cancel-style actions) */
.w3-button.w3-grey, .w3-button.w3-light-grey {
    background-color: #ffffff !important;
    color: #475569 !important;
    border: 1px solid var(--border-color) !important;
}
.w3-button.w3-grey:hover, .w3-button.w3-light-grey:hover {
    background-color: #f8fafc !important;
    color: var(--primary-slate) !important;
}

/* ---------------------------------------------------------------------
   Form elements
--------------------------------------------------------------------- */
.w3-input, .w3-select, textarea {
    font-size: 14px !important;
    padding: 10px 12px !important;
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    transition: all 0.15s ease-in-out;
}
.w3-input:focus, .w3-select:focus, textarea:focus {
    border-color: var(--primary-slate) !important;
    box-shadow: 0 0 0 3px var(--focus-ring) !important;
    outline: none;
}
.w3-check, .w3-radio { accent-color: var(--primary-slate); }
label { color: #475569; }

/* ---------------------------------------------------------------------
   Tables
--------------------------------------------------------------------- */
.w3-table {
    border-collapse: separate;
    border-spacing: 0;
}
.w3-table th {
    background-color: #f8fafc !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 10px 14px !important;
    border-bottom: 2px solid var(--border-color) !important;
}
.w3-table td {
    padding: 10px 14px !important;
    border-bottom: 1px solid var(--border-color) !important;
    font-size: 14px;
    vertical-align: middle !important;
}
.w3-table.w3-striped tr:nth-child(even) { background-color: #f8fafc !important; }
.w3-table a { color: var(--link-color); text-decoration: none; }
.w3-table a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   Misc small helpers shared across pages
--------------------------------------------------------------------- */
.w3-text-red { color: var(--danger-red) !important; }
.w3-tag { border-radius: 6px !important; font-weight: 500 !important; }