/* =========================
   Theme Tokens (Blue/Teal)
   ========================= */
:root{
  --primary-600:#2563EB; /* actions */
  --primary-700:#1D4ED8;
  --primary-800:#1E40AF;
  --primary-100:#DBEAFE;

  --secondary-500:#0EA5A4; /* support */
  --secondary-700:#0F766E;

  --accent-500:#F59E0B; /* small highlights */

  --text-strong:#0F172A;
  --text-muted:#64748B;

  --surface-1:#FFFFFF;   /* card */
  --surface-2:#F8FAFC;   /* page bg / table head */
  --border:#E2E8F0;

  --success:#16A34A; --warning:#D97706; --danger:#DC2626; --info:#0284C7;

  --ring: rgba(37,99,235,.35); /* focus ring from primary */
}

/* ============ Base ============ */
html, body { height: 100%; }
body {
  font-family: system-ui, Arial, sans-serif;
  margin: 24px;
  color: var(--text-strong);
  background: var(--surface-2);
}

.card {
  max-width: 1200px; /* widened so Summary fits 4 columns comfortably */
  padding: 16px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 12px;
  margin: 0 auto 16px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.row {
  display: flex; gap: 12px; align-items: center;
  margin: 8px 0; flex-wrap: wrap;
}

label { font-size: 14px; color: #444; }
select,
input[type="date"], input[type="time"],
input[type="text"], input[type="number"],
input[type="email"], input[type="password"] {
  padding: 10px; font-size: 14px;
  background: var(--surface-1);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-strong);
}

select:focus, input:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-color: var(--primary-600);
}

button {
  padding: 10px 14px; cursor: pointer; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface-1); color: var(--text-strong);
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
button:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

.badge { display:inline-block; padding:4px 8px; border:1px solid var(--border); border-radius: 999px; }
.muted { color: var(--text-muted); }
.hidden { display:none; }

h1 { font-size: 20px; margin: 8px 0 4px; }
h2 { margin: 0 0 8px; }

/* Summary card background override */
#summaryCard.card {
  background: 	#e0f0e3;   /* ← pick your color */
  border-color: #BBF7D0; /* optional, to match the tint */
}

/* Summary card: make the top labels black & bold */
#summaryCard .row:not(.summary-row) .muted {
  color: var(--text-strong);
  font-weight: 700;
}

/* (optional) make the Summary heading extra bold too */
#summaryCard > h2 {
  color: var(--text-strong);
  font-weight: 800;
}


/* Submit to HRD button = success green */
#createSnapshotBtn{
  background: var(--success);       /* #16A34A */
  color: #fff;
  border-color: var(--success);
  font-weight: 700;                 /* bold */
}
#createSnapshotBtn:hover{
  background: #15803D;              /* darker green on hover */
  border-color: #15803D;
}


/* ============ Topbar + Settings dropdown ============ */
.topbar {
  display:none; position: sticky; top: 0;
  background: var(--surface-1);
  border:1px solid var(--border);
  border-radius: 10px; padding: 8px 12px; margin: 0 auto 12px;
  max-width: 1200px;
  box-shadow: 0 2px 0 rgba(0,0,0,0.02);
}
.dropdown { position: relative; display: inline-block; }
.dropdown-menu {
  position: absolute; top: 100%; left: 0; min-width: 220px;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 8px;
  padding: 6px; display: none; box-shadow: 0 8px 24px rgba(0,0,0,.08); z-index: 10;
}
.dropdown-menu button {
  display: block; width: 100%; text-align: left; background: transparent;
  border: 0; padding: 8px 10px; border-radius: 6px; color: var(--text-strong);
}
.dropdown-menu button:hover { background: #F3F4F6; }

/* ============ Dialogs ============ */
dialog { border: 1px solid var(--border); border-radius: 12px; padding: 0; width: 96vw; max-width: 860px; }
dialog::backdrop { background: rgba(0,0,0,.4); }
.dlg-head { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid var(--border); }
.dlg-body { padding: 12px; }
.dlg-foot { display:flex; justify-content:flex-end; gap:8px; padding: 10px 12px; border-top:1px solid var(--border); }
.grid { display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.grid-1 { grid-template-columns: 1fr; }
.right { text-align:right; }
.danger { color:#b91c1c; }
.sunday { color:#b91c1c; font-weight: 600; }
.status-warn { color:#b45309; }

/* ============ Buttons (map to existing IDs) ============ */
/* Primary (filled) */
#runBtn,
#shiftSaveBtn,
#holidaySaveBtn,
#attTypeSaveBtn,
#saveTimesBtn,
#shiftResetBtn:hover { /* hover on reset looks filled to hint action */
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}
#runBtn:hover,
#shiftSaveBtn:hover,
#holidaySaveBtn:hover,
#attTypeSaveBtn:hover,
#saveTimesBtn:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* Outline (secondary actions) */
#recalcBtn,
#toAdmin,
#holidayResetBtn,
#attTypeResetBtn {
  background: transparent;
  color: var(--primary-600);
  border-color: var(--primary-600);
}
#recalcBtn:hover,
#toAdmin:hover,
#holidayResetBtn:hover,
#attTypeResetBtn:hover {
  background: var(--primary-100);
}

/* Ghost / Danger (logout, destructive) */
#logout,
#clearTimesBtn {
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}
#logout:hover,
#clearTimesBtn:hover {
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.25);
}

/* ============ Tables ============ */
table { width: 100%; border-collapse: collapse; margin-top: 8px; background: var(--surface-1); }
thead th {
  font-size: 14px; text-align: left; padding: 10px 8px;
  background: var(--surface-2); color: #334155; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 1; /* nice-to-have when table scrolls */
}
th, td { padding: 8px; border-bottom: 1px solid #eee; text-align: left; font-size: 14px; white-space: nowrap; }
tbody tr:nth-child(odd) td { background: #FBFDFF; }
tbody tr:hover td { background: 	#bae1ff; }

/* ============ Summary lists row ============ */
/* You already render this as: <div class="row summary-row" ...> */
.summary-row > div {
  flex: 1 1 260px;
  min-width: 260px;
}
.summary-row .muted { line-height: 1.5; }

/* Keep the Summary card roomy */
#summaryCard.card { max-width: 1200px; }

/* ============ Utilities ============ */
.chip { display:inline-block; padding:2px 8px; border-radius: 999px; font-size: 12px; }
.chip--success { background: rgba(22,163,74,0.1); color: var(--success); }
.chip--warn    { background: rgba(217,119,6,0.1); color: var(--warning); }
.chip--danger  { background: rgba(220,38,38,0.1); color: var(--danger); }

/* Responsive tweaks */
@media (max-width: 640px){
  .card { margin: 0 8px 16px; }
}

/* =========================
   Attendance Report: sticky columns + horizontal scroll
   ========================= */

/* Adjust these to fit your first 2 columns */
:root{
  --col-branch: 220px; /* Branch column width */
  --col-date:   140px; /* Date column width */
}

#adminReport .table-scroll{
  overflow: auto;
  max-width: 100%;
  border-radius: 8px;
  -webkit-overflow-scrolling: touch;
}

/* Give the table enough width so it can scroll if needed */
#reportTable{
  border-collapse: separate; /* better with sticky cells */
  border-spacing: 0;
  min-width: 1400px; /* tweak as you wish */
  table-layout: auto;
}

#reportTable th, #reportTable td{
  white-space: nowrap;
}

/* Sticky header */
#reportTable thead th{
  position: sticky;
  top: 0;
  z-index: 3; /* below sticky left cells for corners we raise below */
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
}

/* Sticky left col #1: Branch */
#reportTable th:nth-child(1),
#reportTable td:nth-child(1){
  position: sticky;
  left: 0;
  z-index: 2; /* header corners get a higher z later */
  background: var(--surface-1);
  min-width: var(--col-branch);
  width: var(--col-branch);
  box-shadow: 1px 0 0 var(--border); /* vertical divider on the right */
}

/* Sticky left col #2: Date */
#reportTable th:nth-child(2),
#reportTable td:nth-child(2){
  position: sticky;
  left: var(--col-branch);
  z-index: 2;
  background: var(--surface-1);
  min-width: var(--col-date);
  width: var(--col-date);
  box-shadow: 1px 0 0 var(--border);
}

/* Make the two header cells sit on top at the top-left corner */
#reportTable thead th:nth-child(1),
#reportTable thead th:nth-child(2){
  z-index: 4;
}

/* Optional: keep zebra & hover nice under sticky columns */
#reportTable tbody tr:nth-child(odd) td{
  background: #FBFDFF;
}
#reportTable tbody tr:hover td{
  background: #bae1ff;
}

/* ========= Shared container & auth layout ========= */
.container { max-width: 1200px; margin: 0 auto; }
.auth-layout { min-height: calc(100vh - 48px); display: flex; align-items: center; justify-content: center; }
.auth-card { width: 100%; max-width: 480px; }

/* ========= Admin toolbar (filters/actions) ========= */
.toolbar {
  display: flex; gap: 12px; align-items: flex-end; justify-content: space-between;
  background: var(--surface-1); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; position: sticky; top: 12px; z-index: 4;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* ========= Admin tables: horizontal scroll + sticky columns ========= */
.admin-table-wrap { overflow: auto; max-width: 100%; border-radius: 8px; -webkit-overflow-scrolling: touch; }

:root{
  --admin-col-1: 220px; /* first sticky column width */
  --admin-col-2: 200px; /* second sticky column width */
}

.admin-table{
  border-collapse: separate; border-spacing: 0;
  min-width: 1000px; /* widen if your table needs more space */
  table-layout: auto;
}
.admin-table th, .admin-table td{ white-space: nowrap; }

/* sticky header */
.admin-table thead th{
  position: sticky; top: 0; z-index: 3;
  background: var(--surface-2); border-bottom: 1px solid var(--border);
}

/* sticky first column */
.admin-table th:nth-child(1),
.admin-table td:nth-child(1){
  position: sticky; left: 0; z-index: 2; background: var(--surface-1);
  min-width: var(--admin-col-1); width: var(--admin-col-1);
  box-shadow: 1px 0 0 var(--border);
}
/* sticky second column */
.admin-table th:nth-child(2),
.admin-table td:nth-child(2){
  position: sticky; left: var(--admin-col-1); z-index: 2; background: var(--surface-1);
  min-width: var(--admin-col-2); width: var(--admin-col-2);
  box-shadow: 1px 0 0 var(--border);
}
/* top-left header corners on top */
.admin-table thead th:nth-child(1),
.admin-table thead th:nth-child(2){ z-index: 4; }


/* =========================
   Button theming for INDEX + ADMIN
   (no HTML changes needed)
   ========================= */

/* Generic disabled look */
button:disabled { opacity: .6; cursor: not-allowed; }

/* Link-style tiny buttons (used on index for "Forgot password?" etc.) */
.link{
  color: var(--primary-600);
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: underline;
}
.link:hover{ color: var(--primary-700); }

/* ---------- INDEX (sign-in/register/reset) ---------- */
/* Primary, filled */
#btnLogin,
#btnRegister,
#btnReset {
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}
#btnLogin:hover,
#btnRegister:hover,
#btnReset:hover {
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* If your older index still has this button id, give it outline styling */
#signupBtn{
  background: transparent;
  color: var(--primary-600);
  border-color: var(--primary-600);
}
#signupBtn:hover{ background: var(--primary-100); }

/* ---------- ADMIN page ---------- */
/* Login button (on the login card) = primary filled */
#loginBtn{
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}
#loginBtn:hover{
  background: var(--primary-700);
  border-color: var(--primary-700);
}

/* Outline actions in the admin toolbar */
#refreshClaimsBtn,
#reloadBtn,
#loadMoreBtn{
  background: transparent;
  color: var(--primary-600);
  border-color: var(--primary-600);
}
#refreshClaimsBtn:hover,
#reloadBtn:hover,
#loadMoreBtn:hover{
  background: var(--primary-100);
}

/* Logout buttons = subtle danger ghost */
#logoutBtn1,
#logoutBtn2{
  background: transparent;
  color: var(--danger);
  border-color: var(--border);
}
#logoutBtn1:hover,
#logoutBtn2:hover{
  background: rgba(220,38,38,0.08);
  border-color: rgba(220,38,38,0.25);
}

/* 'Update' buttons inside the Users table = primary filled */
.admin-table td button{
  background: var(--primary-600);
  color: #fff;
  border-color: var(--primary-600);
}
.admin-table td button:hover{
  background: var(--primary-700);
  border-color: var(--primary-700);
}


/* --- Toast (success/error) --- */
.toast {
  position: fixed; right: 24px; bottom: 24px;
  background: var(--surface-1); color: var(--text-strong);
  border: 1px solid var(--border); border-left: 4px solid var(--success);
  padding: 12px 14px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  z-index: 9999; display: none;
}
.toast--error { border-left-color: var(--danger); }


/* allow full-width pages */

/* ===== Auth pages: standard-sized inputs ===== */
.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="number"],
.auth-card input[type="date"],
.auth-card input[type="time"],
.auth-card select {
  width: 100%;
  font-size: 16px;        /* avoids iOS zoom & looks standard */
  padding: 14px 12px;     /* comfy padding */
  min-height: 44px;       /* recommended touch target */
  border-radius: 10px;    /* slight upgrade for feel */
}


/* ===== Auth pages: standard-sized inputs ===== */
.auth-card input,
.auth-card select {
  width: 100%;
  font-size: 16px;        /* avoids mobile zoom; looks standard */
  padding: 14px 12px;     /* comfy padding */
  min-height: 44px;       /* recommended touch target */
  border-radius: 10px;
}

.kv {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 12px;
  margin: 4px 0 8px;
}
.kv-label { color: #64748b; }
.kv-value { font-weight: 600; }
.sep {
  border: none; border-top: 1px solid var(--border, #E2E8F0);
  margin: 10px 0 12px;
}

/* --- Settings dropdown visibility fix (welcome.html specific) --- */
#topbar,
.site-header,
.site-header .nav {
  position: relative;
  z-index: 1000; /* keep header above main content */
}

/* The menu itself must sit above everything on the page */
#settingsMenu {
  position: absolute;
  top: 100%;
  right: 0;
  display: none;            /* stays hidden until toggled */
  z-index: 2147483000;      /* basically "always on top" */
}

/* If any main container clips the menu, let it overflow */
.main, .content, .content-wrapper, .container, .page {
  overflow: visible !important;
}