/* paybar.css — live clock + Light/Dark/Auto for payments.html & payments2.html */

/* ---------- the bar (sits inside the blue header) ---------- */
.paybar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 8px 14px; margin: 10px auto 0; max-width: 560px;
}
.paybar-clock {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
  color: #fff; white-space: nowrap;
}
.paybar-time { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .5px; }
.paybar-date { font-size: .85rem; opacity: .9; }
.paybar-theme {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.28);
}
.paybar-theme button {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; margin: 0; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.85);
  font-size: .8rem; font-weight: 600; cursor: pointer; line-height: 1;
  transition: background .2s, color .2s;
}
.paybar-theme button:hover { background: rgba(255,255,255,.18); }
.paybar-theme button.on { background: #fff; color: #0052cc; }
.paybar-theme svg { width: 15px; height: 15px; flex: 0 0 15px; }
@media (max-width: 500px) {
  .paybar { gap: 6px; }
  .paybar-clock { padding: 5px 12px; }
  .paybar-time { font-size: .95rem; }
  .paybar-date { font-size: .78rem; }
  .paybar-theme button span { display: none; }   /* icons only on phones */
  .paybar-theme button { padding: 6px 9px; }
}

/* smooth switch */
body, header, .container, .dashboard-container, .card, canvas, th, td, input, select, textarea {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* =================== DARK MODE =================== */
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #0b1220; color: #e2e8f0; }
html[data-theme="dark"] header { background: #0f1b33; border-bottom: 1px solid #1e2b45; }
html[data-theme="dark"] .paybar-theme button.on { color: #0f1b33; }

html[data-theme="dark"] .container,
html[data-theme="dark"] .dashboard-container {
  background: #111a2b; color: #e2e8f0; box-shadow: 0 0 0 1px #1e2b45, 0 6px 18px rgba(0,0,0,.35);
}
html[data-theme="dark"] .card { background: #172238; color: #e2e8f0; }
html[data-theme="dark"] .summary-grid { box-shadow: none; }
html[data-theme="dark"] canvas { background: #0f1828; }
html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3,
html[data-theme="dark"] h4, html[data-theme="dark"] label, html[data-theme="dark"] p { color: inherit; }

/* tables */
html[data-theme="dark"] th, html[data-theme="dark"] td { border-color: #24324d; }
html[data-theme="dark"] th { background: #1d3f80; color: #fff; }
/* row hover: only tint plain cells — coloured cells (paid status, external/hybrid/chef names) keep their colour */
html[data-theme="dark"] tbody tr:hover > td:not([class]),
html[data-theme="dark"] tbody tr:hover > td[class=""],
html[data-theme="dark"] tbody tr:hover > td.exempt-payment { background: #1a2740; }
@media (max-width: 768px) {
  html[data-theme="dark"] tr { border-color: #24324d; }
}

/* inputs */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: #0f1828; color: #e2e8f0; border-color: #33425f;
}
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #7d8aa3; }
html[data-theme="dark"] input:focus, html[data-theme="dark"] select:focus, html[data-theme="dark"] textarea:focus {
  outline: 2px solid #3b82f6; outline-offset: 0;
}

/* buttons */
html[data-theme="dark"] nav button { background: #334155; }
html[data-theme="dark"] nav button.active { background: #1d4ed8; }

/* text helpers */
html[data-theme="dark"] .small-text { color: #94a3b8; }
html[data-theme="dark"] .green-text { color: #4ade80; }
html[data-theme="dark"] .red-text { color: #f87171; }
html[data-theme="dark"] .blue-label { color: #7aa7ff; }
html[data-theme="dark"] .purple-label { color: #c4a3ff; }
html[data-theme="dark"] .male-gender { color: #7aa7ff; }
html[data-theme="dark"] .female-gender { color: #ff7ac3; }
html[data-theme="dark"] .exempt-payment { color: #ff8a8a; }
html[data-theme="dark"] .insurance-fees-grid .insurance-children { border-left-color: #33425f; }

/* coloured name highlights keep their colours → keep text dark on them */
html[data-theme="dark"] .external-student-name,
html[data-theme="dark"] .hybrid-student-name,
html[data-theme="dark"] .chef-child-name { color: #1a1a1a; }

/* legend panel + language switcher */
html[data-theme="dark"] .status-container {
  background: rgba(17,26,43,.85); border-color: #2b3a57; color: #e2e8f0;
}
html[data-theme="dark"] .status-container h3 { color: #e2e8f0; }
html[data-theme="dark"] .legend-box.inner { border-color: #94a3b8; }
@media (max-width: 500px) {
  html[data-theme="dark"] .status-container { background: rgba(17,26,43,.92); }
  html[data-theme="dark"] .burger { background: rgba(17,26,43,.85); color: #e2e8f0; border-color: #475569; box-shadow: none; }
}
html[data-theme="dark"] .language-switcher select { background: #0f1828; color: #e2e8f0; border: 1px solid #33425f; border-radius: 6px; }

/* links */
html[data-theme="dark"] .container a:not(.back-button),
html[data-theme="dark"] .dashboard-container a { color: #7aa7ff; }

/* phones: keep long Khmer labels + selects inside the screen (no sideways scroll) */
@media (max-width: 600px) {
  #app label { max-width: 100%; }
  #app select { max-width: 100%; }
}

/* all-black icons → white in dark mode (siblings, teacher's child, search, show/hide password) */
html[data-theme="dark"] img[src*="2nd-Siblings"],
html[data-theme="dark"] img[src*="teacher-Child"],
html[data-theme="dark"] img[src*="/icons/search.png"],
html[data-theme="dark"] img[src*="/icons/hide.png"],
html[data-theme="dark"] img[src*="/icons/witness.png"] { filter: invert(1) brightness(.92); }

/* …but keep them black on the light coloured name cells (external / hybrid / chef's child) */
html[data-theme="dark"] .external-student-name img,
html[data-theme="dark"] .hybrid-student-name img,
html[data-theme="dark"] .chef-child-name img { filter: none; }

/* Tuition Scholarship 100% icon: black outline → white version in dark mode (colours kept) */
html[data-theme="dark"] img[src*="/icons/scholarship.png"] { content: url("/icons/scholarship-dark.png"); }
html[data-theme="dark"] .external-student-name img[src*="/icons/scholarship.png"],
html[data-theme="dark"] .hybrid-student-name img[src*="/icons/scholarship.png"],
html[data-theme="dark"] .chef-child-name img[src*="/icons/scholarship.png"] { content: normal; }

/* ---- Status Details on phones (≤500px): the same clear glass as the desktop card,
        but it fits the screen, keeps the title fixed and scrolls the list inside. Desktop is unchanged. ---- */
@media (max-width: 500px) {
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  .status-container {
    top: 118px; right: 10px;
    width: min(270px, calc(100vw - 92px));
    box-sizing: border-box;
    max-height: calc(100vh - 138px); max-height: calc(100dvh - 138px);
    flex-direction: column; overflow: hidden;
    padding: 0 12px 8px;
    /* same glass as desktop */
    background: rgba(255, 255, 255, 0.07);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);   /* a little more blur than desktop: on a phone the card covers text */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    transform: translateX(calc(100% + 16px)); opacity: 0;
    visibility: hidden;
    transition: transform .35s ease-in-out, opacity .25s ease, visibility 0s linear .35s;
  }
  .status-container.open {
    transform: none; opacity: 1; visibility: visible;
    transition: transform .35s ease-in-out, opacity .25s ease, visibility 0s;
  }
  /* the page shows the card with an inline display:block → keep it a column so only the list scrolls */
  .status-container:not([style*="none"]) { display: flex !important; }
  .status-container h3 { flex: 0 0 auto; margin: 0; padding: 12px 0 8px; font-size: 18px; text-align: center; }
  .status-container .status-legend {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-width: none;
    gap: 10px; margin: 0; padding: 2px 0 6px; font-size: 14px;
  }
  .status-container .status-legend::-webkit-scrollbar { display: none; }
  .status-container .status-legend > div { display: flex; align-items: center; gap: 8px; line-height: 1.35; }
  .status-container .status-legend > div > img,
  .status-container .status-legend > div > .legend-box { flex: 0 0 22px; width: 22px !important; height: 22px !important; margin: 0; box-sizing: border-box; }
  .status-container .status-legend .lg2t { white-space: normal; min-width: 0; }
  .overlay { background: transparent; }

  html[data-theme="dark"] .status-container { background: rgba(17, 26, 43, .85); border-color: #2b3a57; color: #e2e8f0; }
}

/* Login button while checking the code: grey, spinner, not clickable (all screens, light + dark) */
#login-form button[type="submit"] { transition: background-color .2s ease, opacity .2s ease; }
#login-form button[type="submit"].is-loading,
#login-form button[type="submit"]:disabled {
  background: #9ca3af !important; color: #f9fafb !important; cursor: not-allowed !important; opacity: 1;
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
}
html[data-theme="dark"] #login-form button[type="submit"].is-loading,
html[data-theme="dark"] #login-form button[type="submit"]:disabled { background: #4b5563 !important; color: #e5e7eb !important; }
.btn-spin {
  width: 18px; height: 18px; flex: 0 0 18px; box-sizing: border-box;
  border: 2.5px solid rgba(255, 255, 255, .45); border-top-color: #fff; border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn-spin { animation-duration: 1.6s; } }