/* Hide the page until auth/role gate allows it */
/*html.guard body { visibility: hidden; }*/


:root{
  --bg:#0b0d12;--panel:#121621;--muted:#9aa3b2;--text:#e7ecf5;
  --accent:#5ee1a6;--accent-2:#6aa3ff;--danger:#ff6b6b;
}
*{box-sizing:border-box}


html,body{margin:0;padding:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;background:linear-gradient(345deg,#0b0d12,#0c1020 70%);color:var(--text);}

.hero{min-height:65svh;display:grid;place-items:center;padding:48px 16px;position:relative;overflow:hidden}
.hero-content{max-width:960px;text-align:center}
.hero h1{font-size:clamp(28px,5vw,46px);margin:0 0 8px;font-weight:800}
.hero .sub{color:var(--muted);margin:0 0 20px}
.cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.org{margin-top:16px;color:var(--muted);display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.hero-art{position:absolute;inset:-20%;background:
  radial-gradient(600px 300px at 50% -10%,rgba(106,163,255,.25),transparent 70%),
  radial-gradient(500px 250px at -10% 60%,rgba(94,225,166,.2),transparent 70%),
  radial-gradient(500px 250px at 110% 60%,rgba(94,225,166,.1),transparent 70%);filter:blur(20px);pointer-events:none}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:32px 16px;max-width:1100px;margin-inline:auto}
.card{background:rgba(255,255,255,.03);backdrop-filter:blur(6px);border-radius:18px;padding:18px;box-shadow:0 1px 0 rgba(255,255,255,.05) inset,0 10px 30px rgba(0,0,0,.35);transition:transform .08s ease}
.card:hover{transform:translateY(-2px)}
.link-card{position:relative;text-decoration:none;color:inherit}
.link-card .arrow{position:absolute;right:14px;bottom:14px;font-size:20px;opacity:.8}

.btn{border:0;border-radius:14px;padding:10px 16px;font-weight:600;cursor:pointer;transition:transform .06s ease,opacity .2s;background:#1b2130;color:var(--text);box-shadow:0 0 0 1px #25304a inset}
.btn:hover{transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#001f1a}
.btn.ghost{background:transparent;box-shadow:0 0 0 1px #28334d inset;color:var(--muted)}
.btn.danger{background:var(--danger);color:#100}
.flex1{flex:1}
.row{display:flex;gap:12px}
.row.between{justify-content:space-between}
.row.center{align-items:center}
.gap{gap:16px}
.spacer{flex:1}

.topbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid #27304b;background:rgba(0,0,0,.25);backdrop-filter:blur(6px)}
.app{display:grid;grid-template-columns:1fr}
.content{padding:16px}

.progress-wrap{position:relative;width:180px;height:180px;margin:auto}
.ring{width:100%;height:100%;transform:rotate(-90deg)}
.track{fill:none;stroke:#20283d;stroke-width:12}
.meter{fill:none;stroke:linear-gradient(135deg,var(--accent),var(--accent-2));
  stroke-dasharray:339.292;stroke-dashoffset:339.292;stroke-linecap:round;stroke-width:12;filter:drop-shadow(0 8px 20px rgba(94,225,166,.35))}
.progress-text{position:absolute;inset:0;display:grid;place-items:center;font-size:28px}
.progress-text small{display:block;font-size:12px;color:var(--muted)}

.input, select{width:100%;padding:10px 12px;border-radius:12px;border:1px solid #2c3652;background:#0e1525;color:var(--text)}
label{display:grid;gap:6px;margin:8px 0}
label.select{display:flex;gap:8px;align-items:center}

.accordion{display:grid;gap:10px}
.accordion .section{border:1px solid #27304b;border-radius:14px;overflow:hidden}
.section summary{list-style:none;cursor:pointer;padding:14px 16px;background:#121729;font-weight:600}
.section[open] summary{background:#0f1426}
.section .inner{padding:8px 12px}
.video-item{display:grid;grid-template-columns:1fr auto;align-items:center;padding:10px;border-radius:10px}
.video-item:hover{background:#0f1527}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;font-size:12px;background:#1b2133;color:#cfd6ea}
.pill.done{background:rgba(94,225,166,.2);color:#aaffde}
.pill.required{background:rgba(255,215,0,.15);color:#ffe38b}
.pill.locked{background:rgba(255,107,107,.18);color:#ffc5c5}
.pill-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.player{width:100%;max-height:60svh;border-radius:14px;background:#0a0f1d;box-shadow:0 10px 30px rgba(0,0,0,.35)}

.table{display:grid;gap:8px}
.user-row{display:grid;grid-template-columns:1.2fr .8fr .6fr .6fr auto;gap:8px;align-items:center;padding:10px;border:1px solid #27304b;border-radius:10px}
.notes{display:grid;gap:8px;max-height:260px;overflow:auto}
.note{padding:10px;background:#0f1527;border-radius:10px}

.modal{border:none;border-radius:16px;padding:0;background:transparent}
.modal::backdrop{background:rgba(4,7,12,.6);backdrop-filter:blur(3px)}
.modal .card{min-width:min(92vw,520px)}
.card.auth .tabs{display:flex;gap:8px;margin:6px 0 12px}
.tiny{font-size:12px;color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.card.lg{grid-column:span 2}
.grid.forms{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.form-card{display:grid;gap:8px;padding:12px;border:1px solid #27304b;border-radius:12px}
.status{font-size:12px;color:var(--muted)}

.checklist{padding-left:18px}
.checklist li{margin:6px 0}
@media (max-width:880px){ .card.lg{grid-column:span 1} }


/* Auth modal inputs: white text on dark */
.modal .auth input,
.modal .auth select,
.modal .auth textarea {
  color: #fff;
}
.modal .auth input::placeholder,
.modal .auth textarea::placeholder {
  color: rgba(255,255,255,0.75);
}

/* App inputs (cards): black text */
.card input,
.card select,
.card textarea {
  color: #111;
}

/* Password-like masking (for non-admin banking view) */
.masked {
  -webkit-text-security: disc;
  text-security: disc;
}

/* Small two-column details list */
.details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 18px;
}
.details-grid .label { font-weight:600; opacity:.75; }
.details-grid .value { background:#f8fafc; border:1px solid #e5e7eb; border-radius:10px; padding:8px 10px; }

/* ===== Auth modal readability ===== */
.modal .card.auth label {
  color: #e5e7eb; /* light label text on dark card */
}

.modal .card.auth input[type="email"],
.modal .card.auth input[type="password"],
.modal .card.auth input[type="text"] {
  background: #111827;        /* dark slate */
  color: #ffffff;              /* white text */
  border: 1px solid #374151;   /* subtle border */
  border-radius: 10px;
  padding: 10px 12px;
  width: 100%;
  outline: none;
}

.modal .card.auth input::placeholder {
  color: #9ca3af; /* light gray placeholder */
}

.modal .card.auth input:focus {
  border-color: #60a5fa; /* blue focus ring */
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}

/* Make the tab buttons clearer */
.modal .card.auth .tab {
  background: #1f2937;
  color: #e5e7eb;
  border: 1px solid #374151;
  border-radius: 10px;
  padding: 8px 10px;
}
.modal .card.auth .tab.active {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
/* Global input legibility when used on dark cards */
input[type="email"], input[type="password"], input[type="text"], input[type="tel"] {
  background: #111827;
  color: #ffffff;
  border: 1px solid #374151;
}
input::placeholder { color: #9ca3af; }
input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96,165,250,.25);
}
/* Company Docs list layout */
.file-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 10px 12px;
  border: 1px solid var(--line, #1f2937);
  border-radius: 10px;
  background: var(--card, #0b1220);
  margin-bottom: 10px;
}

.file-left {
  min-width: 0; /* let long URLs truncate */
}

.file-left .strong {
  font-weight: 600;
}

.file-left .tiny {
  color: #9ca3af;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 52vw; /* keep a single line on desktop */
}

.file-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;        /* wrap on narrow screens */
}

.file-actions .btn {
  display: inline-flex;   /* avoid block-stacking */
  align-items: center;
  height: 36px;
  padding: 0 12px;
}

/* Company Docs layout (safe/specific) */
#docsList .file-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--line, #1f2937);
  border-radius:10px;
  background:var(--card, #0b1220);
  margin-bottom:10px;
  width:100%;
  box-sizing:border-box;
}

#docsList .file-row .left{
  min-width:0; /* enables ellipsis */
  flex:1 1 auto;
}
#docsList .file-row .left .strong{ font-weight:600; }
#docsList .file-row .left .tiny{
  color:#9ca3af;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

#docsList .file-row .actions{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

#docsList .file-row .btn{ white-space:nowrap; height:36px; padding:0 12px; }

/* Company Docs page - input and button refinements */
#docTitle, #docUrl {
  background: #111827;
  color: #ffffff;
  border: 1px solid #374151;
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  box-sizing: border-box;
}

#docTitle::placeholder,
#docUrl::placeholder {
  color: #9ca3af;
}

/* Fix button text alignment */
#docsList .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* Bring Company Docs list higher on the page */
#companyDocsContainer {
  margin-top: 40px !important;   /* reduce space from the very top */
}

/* Optional: tighten spacing inside the container */
#docsList {
  margin-top: 20px !important;
}


/* ===== Mobile tweaks ===== */
@media (max-width: 720px) {
  .page, .app .content, .card { padding: 12px; }

  /* generic grid to stack */
  .grid { grid-template-columns: 1fr !important; gap: 12px; }

  /* accordion / list spacing */
  .video-item, .user-item, .file-row { padding: 10px 12px; }

  /* admin users table → card list */
  .user-row {
    display: grid;
    grid-template-columns: 1fr;         /* stack */
    gap: 6px;
    padding: 12px;
    border: 1px solid #293241;
    border-radius: 12px;
    margin-bottom: 10px;
  }
  .user-row .btn { width: 100%; text-align: center; }
  .user-row div { font-size: 14px; }

  /* header actions */
  .topbar .btn { padding: 6px 10px; }

  /* player card spacing */
  .player, .video-frame { width: 100%; height: auto; }
}

/* nicer buttons/inputs for touch */
button.btn, .btn { min-height: 40px; }
input.input, select { min-height: 38px; }


.pill.pending { background: #361c1c; color: #ffb3b3; border: 1px solid #a33; }
.pill.done    { background: #15361c; color: #b3ffb3; border: 1px solid #3a3; }

/* ---- Forms layout (fix overlap) ---- */
#formsList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;                 /* space between cards */
  align-items: stretch;      /* make all cards equal height per row */
}

/* Each form is a “card” */
.form-card {
  position: relative;        /* ensure internal absolute children (if any) don’t escape */
  display: flex;
  flex-direction: column;
  padding: 14px 16px;
  border-radius: 14px;
  background: #0f1729;       /* same look as video tiles */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 16px rgba(0,0,0,.15);
  overflow: hidden;          /* prevent pills or labels from spilling out */
}

/* Title + “Required” pill row */
.form-card .pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 6px 0;
}

/* Status chip (green/red) */
.form-card .status {
  margin: 4px 0 10px 0;
  font-weight: 600;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #b91c1c22;     /* default “pending” red-tinted background */
  color: #fecaca;            /* light red text */
}

/* When JS swaps text to 'Completed', also give it green styles */
.form-card .status.done {
  background: #065f4622;
  color: #bbf7d0;
}

/* Button row sticks to bottom of card */
.form-card .row.between.center {
  margin-top: auto;          /* pushes actions to bottom */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Buttons inside cards */
.form-card .btn {
  min-width: 120px;
}

/* Optional: make the “Required” pill match the training look */
.pill.required {
  background: #1e3a8a;
  color: #c7d2fe;
  border: 1px solid #3b82f6;
}

/* Small helper if anything used floats previously */
.clearfix::after { content: ""; display: block; clear: both; }
/* ---- Forms layout: grid + card look ---- */
#formsList {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  align-items: stretch;
}

/* Make each form item look like a proper card */
.card.form-card {
  display: flex;
  flex-direction: column;
  background: #0f1729;                         /* match your dark theme */
  border: 1px solid rgba(255,255,255,.12);
  transition: border-color .12s ease, box-shadow .12s ease;
}

.card.form-card:hover {
  border-color: #3b82f6;
  box-shadow: 0 8px 22px rgba(59,130,246,.12);
}

/* Title + pills row */
.card.form-card .pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 6px 0;
}

/* Status chip colors */
.card.form-card .status {
  margin: 4px 0 10px 0;
  font-weight: 600;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: #b91c1c22;   /* pending (red tint) */
  color: #fecaca;
}

.card.form-card .status.done {
  background: #065f4622;   /* completed (green tint) */
  color: #bbf7d0;
}

/* Action row sticks to bottom */
.card.form-card .row.between.center {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Optional: Required pill styling to match training look */
.pill.required {
  background: #1e3a8a;
  color: #c7d2fe;
  border: 1px solid #3b82f6;
}
/* Admin filter dropdown – make text readable on dark UI */
select#roleFilterAdmin {
  color: #ffffff;                 /* selected value text */
  background-color: #0b1220;      /* dark background to match app */
  border: 1px solid rgba(255,255,255,0.12);
  padding: 8px 10px;
  border-radius: 10px;
  appearance: none;               /* optional: cleaner look */
}

/* dropdown menu items */
select#roleFilterAdmin option {
  color: #ffffff;
  background-color: #0b1220;
}

/* === Force white text in form controls & lists (global) === */
.input,
.select,
.select select,
textarea,
input,
select {
  color: #fff !important;
  background-color: #0b1220;            /* matches your dark theme */
  border-color: rgba(255,255,255,.18);
}

input::placeholder,
textarea::placeholder {
  color: rgba(255,255,255,.65);
}

/* Dropdown list items in <select> */
select,
select option {
  color: #fff !important;
  background-color: #0b1220 !important;
}

/* Disabled still readable */
input:disabled,
select:disabled,
textarea:disabled {
  color: rgba(255,255,255,.6) !important;
}

/* Lists/tables in admin & elsewhere */
.table,
.user-row,
.file-row,
.notes li,
.req-list .row,
#projectsList,
#linksList {
  color: #fff;
}

/* Pills and small labels already themed, but ensure baseline */
.pill { color: #fff; }

/* Chrome/Edge autofill (so it doesn't turn yellow/black) */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  caret-color: #fff;
  box-shadow: 0 0 0px 1000px #0b1220 inset !important;
  transition: background-color 9999s ease-out 0s;
}

/* Make dropdown arrow label wrappers inherit color */
label.select,
label.select > select {
  color: #fff !important;
}
/* Force white text specifically for the Projects card controls */
#projectsCard input,
#projectsCard select,
#projectsCard textarea {
  color: #fff !important;           /* typed text */
  -webkit-text-fill-color: #fff !important; /* Safari/iOS */
  caret-color: #fff;
  background-color: #0b1220;        /* keep dark bg */
  border-color: rgba(255,255,255,.18);
}

/* Keep placeholders white (you already had this) */
#projectsCard input::placeholder,
#projectsCard textarea::placeholder {
  color: rgba(255,255,255,.70);
}

/* Make dropdown items white too */
#projectsCard select,
#projectsCard select option {
  color: #fff !important;
  background-color: #0b1220 !important;
}

/* Beat Chrome/Edge autofill yellow */
#projectsCard input:-webkit-autofill,
#projectsCard textarea:-webkit-autofill,
#projectsCard select:-webkit-autofill {
  -webkit-text-fill-color: #fff !important;
  box-shadow: 0 0 0 1000px #0b1220 inset !important;
  transition: background-color 9999s ease-out 0s;
}
/* Force white text for the Projects card controls */
#projectsCard input,
#projectsCard select,
#projectsCard textarea {
  color:#fff !important;
  -webkit-text-fill-color:#fff !important;
  caret-color:#fff;
  background-color:#0b1220;
  border-color:rgba(255,255,255,.18);
}

#projectsCard input::placeholder,
#projectsCard textarea::placeholder {
  color:rgba(255,255,255,.70);
}

#projectsCard select,
#projectsCard select option {
  color:#fff !important;
  background-color:#0b1220 !important;
}

#projectsCard input:-webkit-autofill,
#projectsCard textarea:-webkit-autofill,
#projectsCard select:-webkit-autofill {
  -webkit-text-fill-color:#fff !important;
  box-shadow:0 0 0 1000px #0b1220 inset !important;
  transition:background-color 9999s ease-out 0s;
}
/* === Field Eligibility Styles === */
.elig-card {
  border-radius: 14px;
  padding: 14px;
  background: #0f172a;                 /* slate-900 */
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
}

.elig-title {
  font-weight: 700;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

.elig-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.elig-item {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 12px;
  padding: 10px 12px;
  background: #0b1220;                 /* deeper panel */
  border: 1px solid rgba(255,255,255,.06);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.elig-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px rgba(0,0,0,.25);
  border-color: rgba(255,255,255,.12);
}

.elig-badge {
  width: 28px; height: 28px; min-width: 28px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-size: 16px; line-height: 1;
  font-weight: 800;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,.2);
}

/* Done = green; Pending = red (colorblind-friendly contrast) */
.elig-badge.done   { background: #064e3b; color: #a7f3d0; border: 1px solid #10b981; }
.elig-badge.pending{ background: #3f1d1d; color: #fecaca; border: 1px solid #ef4444; }

.elig-text { display: grid; }
.elig-name { font-weight: 600; }
.elig-hint { font-size: 12px; opacity: .7; }

/* Overall state pill */
.elig-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid;
  border-radius: 999px;
  font-size: 12px;
  margin-bottom: 8px;
}
.elig-state.ok  { border-color: #10b981; color: #a7f3d0; background:#064e3b; }
.elig-state.bad { border-color: #ef4444; color: #fecaca; background:#3f1d1d; }

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
  .elig-item, .elig-item:hover { transition: none; transform: none; }
}

/* Light mode safety (optional) */
@media (prefers-color-scheme: light) {
  .elig-card { background: #ffffff; border-color: rgba(0,0,0,.08); }
  .elig-item { background: #ffffff; border-color: rgba(0,0,0,.06); }
}
html.guard body { visibility: hidden !important; }