/* styles.css */

body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 900px;
    margin: 40px auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

h1 {
    text-align: center;
    margin-bottom: 10px;
}

p.subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
}

.forms-wrapper {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    justify-content: center;
}

.form-box {
    flex: 1 1 300px;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
}

.form-box h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Small helper text under inputs (e.g., password requirements) */
.hint {
    display: block;
    margin-top: -4px;
    margin-bottom: 12px;
    font-size: 0.85em;
    color: #666;
}

input[type="email"],
input[type="password"],
input[type="text"] {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

input[list] {
    width: 100%;
    padding: 8px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}


button {
    padding: 10px 16px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

select {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
}


button.primary {
    background: #007bff;
    color: white;
}

button.secondary {
    background: #6c757d;
    color: white;
}

.message {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    font-size: 0.9rem;
}

.message.error {
    background: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.message.success {
    background: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}


.banner {
    display: block;
    width: 100%;
    max-width: 860px;
    height: auto;
    margin: 15px auto 25px auto;
    border-radius: 8px;
}

/* --- App layout: left sidebar (collapsible) --- */
.app-body {
    background: #f4f4f4;
}

.app {
    min-height: 100vh;
    display: flex;
}

/* Checkbox toggle (CSS-only) */
.nav-toggle {
    position: absolute;
    left: -9999px;
}

/* Sidebar */
.sidebar {
    width: 250px;
    background: #ffffff;
    border-right: 1px solid #e7e7e7;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    z-index: 30;
}

.sidebar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px;
    border-bottom: 1px solid #efefef;
}

.brand {
    font-weight: bold;
    text-decoration: none;
    color: #111;
    white-space: nowrap;
}

.nav-toggle-btn {
    margin-left: auto;
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    line-height: 1;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid #e3e3e3;
    background: #fafafa;
}

.nav-toggle-btn:hover {
    background: #f2f2f2;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    padding: 10px;
    gap: 6px;
}

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    text-decoration: none;
    color: #222;
    border-radius: 10px;
}

.sidebar-nav a:hover {
    background: #f2f2f2;
}

.sidebar-nav a.active {
    background: #e9f1ff;
    font-weight: bold;
}

.sidebar-nav a.logout {
    background: #fff5f5;
}

.sidebar-nav a.logout:hover {
    background: #ffe9e9;
}

.nav-icon {
    width: 22px;
    text-align: center;
    flex: 0 0 22px;
}

.nav-text {
    white-space: nowrap;
}

/* Small red notification badge (e.g., for open applications) */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    border-radius: 50%;
    background: #d11a2a;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.sidebar-spacer {
    flex: 1 1 auto;
}

/* Main area */
.main {
    flex: 1 1 auto;
    padding: 24px 18px;
}
}


/* Mobile top bar (shows menu button when sidebar is off-canvas) */
.mobile-topbar {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.mobile-menu-btn {
    cursor: pointer;
    user-select: none;
    font-size: 18px;
    line-height: 1;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    background: #fafafa;
}

.mobile-menu-btn:hover {
    background: #f2f2f2;
}

.mobile-title {
    font-weight: 700;
}

.main-content {
    max-width: 900px;
    margin: 0 auto;
    background: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* Collapsed sidebar on desktop */
@media (min-width: 769px) {
    .nav-backdrop { display: none; }

    .nav-toggle:checked ~ .app .sidebar {
        width: 72px;
    }

    .nav-toggle:checked ~ .app .sidebar .brand {
        display: none;
    }

    .nav-toggle:checked ~ .app .sidebar .nav-text {
        display: none;
    }

    .nav-toggle:checked ~ .app .sidebar-nav a {
        justify-content: center;
        padding: 12px 10px;
    }
}

/* Mobile: off-canvas sidebar */
.nav-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .app {
        display: block;
    }

    .mobile-topbar {
        display: flex;
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        transform: translateX(-105%);
        transition: transform 0.2s ease;
        width: 260px;
    }

    .main {
        padding: 18px 12px;
    }

    .main-content {
        padding: 22px;
        border-radius: 8px;
    }

    /* When toggled, show sidebar + backdrop */
    .nav-toggle:checked ~ .app .sidebar {
        transform: translateX(0);
    }

    .nav-toggle:checked ~ .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 20;
    }
}

.card {
    background: #fff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    padding: 18px;
}

.placeholder-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

/* Force at most 2 columns for onboarding/info grids */
.placeholder-grid.two-col {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

@media (max-width: 640px) {
    .placeholder-grid.two-col {
        grid-template-columns: 1fr;
    }
}

/* Simple data tables (Admin pages, etc.) */
.table-wrap {
    overflow-x: auto;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.data-table th,
.data-table td {
    padding: 10px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

.data-table thead th {
    position: sticky;
    top: 0;
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(6px);
    z-index: 1;
}

html.theme-dark .data-table thead th,
body.dark-mode .data-table thead th {
    background: rgba(30,30,30,0.9);
}

/* Admin applications table: add a bit more spacing between columns */
.apps-table th,
.apps-table td {
    padding: 12px 16px;
}

/* Allow long content (like positions) to wrap instead of visually colliding */
.apps-table td {
    white-space: normal;
}

/* Keep e-mail readable on one line */
.apps-table td:nth-child(3) {
    white-space: nowrap;
}

.placeholder-tile {
    background: #fafafa;
    border: 1px dashed #d6d6d6;
    border-radius: 8px;
    padding: 14px;
}

.placeholder-tile h3 {
    margin-top: 0;
}


/* Hide the mobile top bar on desktop */
@media (min-width: 769px) {
  .mobile-topbar {
    display: none !important;
  }
}
/* Theme toggle button (top-right inside the main content box) */
.container,
.main-content {
    position: relative;
}

.theme-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #e3e3e3;
    background: #fafafa;
    color: #111;
    text-decoration: none;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

.theme-toggle:hover {
    background: #f2f2f2;
}

/* Links (global) */
a:not(.btn) {
    color: #0b66c3;
}

a:not(.btn):visited {
    color: #6b2fb3;
}

a:not(.btn):hover,
a:not(.btn):focus {
    color: #084c92;
    text-decoration: underline;
}


/* Dark theme (applies when <html> has class="theme-dark") */
html.theme-dark body {
    background: #0f1216;
    color: #e6e6e6;
}


html.theme-dark a:not(.btn),
body.dark-mode a:not(.btn),
html.theme-dark .main-content a:not(.btn),
html.theme-dark .card a:not(.btn),
html.theme-dark .form-box a:not(.btn) {
    color: #9ecbff;
}

html.theme-dark a:not(.btn):visited,
body.dark-mode a:not(.btn):visited,
html.theme-dark .main-content a:not(.btn):visited,
html.theme-dark .card a:not(.btn):visited,
html.theme-dark .form-box a:not(.btn):visited {
    color: #d7a6ff;
}

html.theme-dark a:not(.btn):hover,
html.theme-dark a:not(.btn):focus,
body.dark-mode a:not(.btn):hover,
body.dark-mode a:not(.btn):focus,
html.theme-dark .main-content a:not(.btn):hover,
html.theme-dark .card a:not(.btn):hover,
html.theme-dark .form-box a:not(.btn):hover {
    color: #cfe6ff;
    text-decoration: underline;
}
html.theme-dark .container,
html.theme-dark .main-content,
html.theme-dark .card,
html.theme-dark .mobile-topbar,
html.theme-dark .sidebar {
    background: #151a21;
    color: #e6e6e6;
}

html.theme-dark .form-box {
    border-color: #2a2f3a;
}

html.theme-dark input,
html.theme-dark select {
    background: #0f1216;
    color: #e6e6e6;
    border-color: #2a2f3a;
}

html.theme-dark .hint {
    color: #b7bcc6;
}

html.theme-dark .sidebar {
    border-right-color: #2a2f3a;
}

html.theme-dark .sidebar-header {
    border-bottom-color: #2a2f3a;
}

html.theme-dark .brand {
    color: #e6e6e6;
}

html.theme-dark .sidebar-nav a {
    color: #e6e6e6;
}

html.theme-dark .sidebar-nav a:hover {
    background: #1b2230;
}

html.theme-dark .sidebar-nav a.active {
    background: #223049;
}

html.theme-dark .sidebar-nav a.logout {
    background: #2a1b1b;
}

html.theme-dark .sidebar-nav a.logout:hover {
    background: #3a2222;
}

html.theme-dark .placeholder-tile {
    background: #11161d;
    border-color: #2a2f3a;
}

html.theme-dark .message.error {
    background: #3a1f23;
    border-color: #5a2a33;
    color: #ffd6db;
}

html.theme-dark .message.success {
    background: #1f3a2a;
    border-color: #2a5a3a;
    color: #d6ffe4;
}

html.theme-dark .theme-toggle,
html.theme-dark .nav-toggle-btn,
html.theme-dark .mobile-menu-btn {
    background: #11161d;
    border-color: #2a2f3a;
    color: #e6e6e6;
}

html.theme-dark .theme-toggle:hover,
html.theme-dark .nav-toggle-btn:hover,
html.theme-dark .mobile-menu-btn:hover {
    background: #1b2230;
}


/* Announcements */
.announcement-meta{
  font-size: 0.9em;
  opacity: 0.85;
}
.announcement-body{
  margin-top: 8px;
  line-height: 1.45;
}
.audience-box{
  border: 1px solid rgba(0,0,0,0.12);
  padding: 10px;
  border-radius: 12px;
}
html.theme-dark .audience-box{
  border-color: rgba(255,255,255,0.18);
}
.audience-hint{
  font-size: 0.9em;
  opacity: 0.9;
  margin-bottom: 8px;
}
.audience-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}
@media (max-width: 640px){
  .audience-grid{ grid-template-columns: 1fr; }
}
.audience-item{
  display: flex;
  gap: 8px;
  align-items: center;
}


/* --- Link color consistency (light + dark) --- */
/* Keep buttons unchanged (we exclude .btn). */

/* Light mode: readable links on light backgrounds */
.container a:not(.btn),
.main-content a:not(.btn),
.card a:not(.btn),
.form-box a:not(.btn),
.placeholder-tile a:not(.btn) {
  color: #0b66c3;
}
.container a:not(.btn):visited,
.main-content a:not(.btn):visited,
.card a:not(.btn):visited,
.form-box a:not(.btn):visited,
.placeholder-tile a:not(.btn):visited {
  color: #6b21a8;
}
.container a:not(.btn):hover,
.container a:not(.btn):focus,
.main-content a:not(.btn):hover,
.main-content a:not(.btn):focus,
.card a:not(.btn):hover,
.card a:not(.btn):focus,
.form-box a:not(.btn):hover,
.form-box a:not(.btn):focus,
.placeholder-tile a:not(.btn):hover,
.placeholder-tile a:not(.btn):focus {
  text-decoration: underline;
}

/* Dark mode: cover both mechanisms used across pages */
html.theme-dark .container a:not(.btn),
html.theme-dark .main-content a:not(.btn),
html.theme-dark .card a:not(.btn),
html.theme-dark .form-box a:not(.btn),
html.theme-dark .placeholder-tile a:not(.btn),
body.dark-mode .container a:not(.btn),
body.dark-mode .main-content a:not(.btn),
body.dark-mode .card a:not(.btn),
body.dark-mode .form-box a:not(.btn),
body.dark-mode .placeholder-tile a:not(.btn) {
  color: #8ab4f8;
}

html.theme-dark .container a:not(.btn):visited,
html.theme-dark .main-content a:not(.btn):visited,
html.theme-dark .card a:not(.btn):visited,
html.theme-dark .form-box a:not(.btn):visited,
html.theme-dark .placeholder-tile a:not(.btn):visited,
body.dark-mode .container a:not(.btn):visited,
body.dark-mode .main-content a:not(.btn):visited,
body.dark-mode .card a:not(.btn):visited,
body.dark-mode .form-box a:not(.btn):visited,
body.dark-mode .placeholder-tile a:not(.btn):visited {
  color: #c58af9;
}

html.theme-dark .container a:not(.btn):hover,
html.theme-dark .container a:not(.btn):focus,
html.theme-dark .main-content a:not(.btn):hover,
html.theme-dark .main-content a:not(.btn):focus,
html.theme-dark .card a:not(.btn):hover,
html.theme-dark .card a:not(.btn):focus,
html.theme-dark .form-box a:not(.btn):hover,
html.theme-dark .form-box a:not(.btn):focus,
html.theme-dark .placeholder-tile a:not(.btn):hover,
html.theme-dark .placeholder-tile a:not(.btn):focus,
body.dark-mode .container a:not(.btn):hover,
body.dark-mode .container a:not(.btn):focus,
body.dark-mode .main-content a:not(.btn):hover,
body.dark-mode .main-content a:not(.btn):focus,
body.dark-mode .card a:not(.btn):hover,
body.dark-mode .card a:not(.btn):focus,
body.dark-mode .form-box a:not(.btn):hover,
body.dark-mode .form-box a:not(.btn):focus,
body.dark-mode .placeholder-tile a:not(.btn):hover,
body.dark-mode .placeholder-tile a:not(.btn):focus {
  color: #a5c9ff;
  text-decoration: underline;
}

/* --- Link colors: consistent readability in both light and dark mode --- */
/* Keep button-like links styled by their button classes */
a:not(.btn) {
  color: #1a73e8;
}
a:not(.btn):visited {
  color: #6f42c1;
}
a:not(.btn):hover,
a:not(.btn):focus {
  color: #1558b0;
  text-decoration: underline;
}

/* Dark mode: support both html.theme-dark and body.dark-mode toggles */
html.theme-dark a:not(.btn),
body.dark-mode a:not(.btn) {
  color: #8ab4f8;
}
html.theme-dark a:not(.btn):visited,
body.dark-mode a:not(.btn):visited {
  color: #c58af9;
}
html.theme-dark a:not(.btn):hover,
html.theme-dark a:not(.btn):focus,
body.dark-mode a:not(.btn):hover,
body.dark-mode a:not(.btn):focus {
  color: #a5c9ff;
  text-decoration: underline;
}


/* =========================================================
   Link colors override in dark mode (container pages)
   Fixes light-mode .container link rules overriding dark mode.
   ========================================================= */
html.theme-dark .container a:not(.btn),
body.dark-mode .container a:not(.btn) {
    color: #9ecbff;
}

html.theme-dark .container a:not(.btn):visited,
body.dark-mode .container a:not(.btn):visited {
    color: #c58af9;
}

html.theme-dark .container a:not(.btn):hover,
html.theme-dark .container a:not(.btn):focus,
body.dark-mode .container a:not(.btn):hover,
body.dark-mode .container a:not(.btn):focus {
    color: #cfe6ff;
    text-decoration: underline;
}
/* =========================================================
   Global link colors (consistent across all pages & wrappers)
   - Applies to ALL regular links, excludes .btn
   - Works for both html.theme-dark and body.dark-mode
   ========================================================= */

:root {
  --link-color: #0645ad;
  --link-visited-color: #551a8b;
  --link-hover-color: #0b63d1;
}

html.theme-dark,
body.dark-mode {
  --link-color: #8ab4f8;
  --link-visited-color: #c58af9;
  --link-hover-color: #a5c9ff;
}

/* Force consistency even when other selectors (e.g. .container a) exist */
a:not(.btn) {
  color: var(--link-color) !important;
}

a:not(.btn):visited {
  color: var(--link-visited-color) !important;
}

a:not(.btn):hover,
a:not(.btn):focus {
  color: var(--link-hover-color) !important;
  text-decoration: underline;
}

/* ==========================================================
   GLOBAL LINK THEMING (plain <a> without class)
   Ensures consistent readable links in light & dark mode
   ========================================================== */

/* Light mode */
a:not([class]) {
    color: #0b5ed7;
    text-decoration: underline;
}

a:not([class]):visited {
    color: #6f42c1;
}

a:not([class]):hover,
a:not([class]):focus {
    color: #084298;
}

/* Dark mode (supports both mechanisms used in the app) */
html.theme-dark a:not([class]),
body.dark-mode a:not([class]) {
    color: #8ab4f8;
}

html.theme-dark a:not([class]):visited,
body.dark-mode a:not([class]):visited {
    color: #c58af9;
}

html.theme-dark a:not([class]):hover,
html.theme-dark a:not([class]):focus,
body.dark-mode a:not([class]):hover,
body.dark-mode a:not([class]):focus {
    color: #a5c9ff;
}

/* ==========================================================
   Footer
   ========================================================== */

.site-footer {
    margin-top: 24px;
    padding: 14px 16px;
    font-size: 13px;
    text-align: center;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: #f7f7f9;
}

.site-footer__inner {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.site-footer__sep {
    opacity: 0.65;
}

html.theme-dark .site-footer,
body.dark-mode .site-footer {
    border-top-color: rgba(255, 255, 255, 0.10);
    background: #151b24;
}



/* Application positions checkbox grid */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 18px;
}
@media (max-width: 560px) {
    .checkbox-grid { grid-template-columns: 1fr; }
}




/* Apply Official – primary/secondary layout helpers */
.positions-section .field-label {
    display: block;
    text-align: left;
    margin-bottom: 6px;
}

.primary-position select {
    width: 100%;
}

.secondary-heading {
    display: block;
    text-align: left;
}