/* WhatsApp app — luxury, minimal theme. Layered over Bootstrap. */
.wa-theme {
  --wa-bg: #f6f7f5;
  --wa-surface: #ffffff;
  --wa-ink: #15201b;
  --wa-muted: #6b7770;
  --wa-green: #1b8f5a;
  --wa-green-dark: #156f47;
  --wa-red: #c0392b;
  --wa-radius: 16px;
  --wa-shadow: 0 6px 24px rgba(20,40,30,.07);
  background: var(--wa-bg);
  color: var(--wa-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.wa-theme main { max-width: 760px; margin: 0 auto; padding: 20px 16px 96px; }

.wa-nav { background: var(--wa-surface); box-shadow: var(--wa-shadow); position: sticky; top: 0; z-index: 100; }
.wa-nav-inner { max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 18px; padding: 12px 16px; }
.wa-brand { font-weight: 700; color: var(--wa-green); text-decoration: none; font-size: 1.1rem; }
.wa-nav-links { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.wa-nav-links a { color: var(--wa-muted); text-decoration: none; padding: 6px 12px; border-radius: 999px; font-weight: 500; transition: background .15s, color .15s; }
.wa-nav-links a:hover { background: rgba(27,143,90,.08); color: var(--wa-green-dark); }
.wa-nav-links a.active { background: var(--wa-green); color: #fff; }
.wa-nav-right { display: flex; align-items: center; gap: 12px; }
.wa-nav-right a { color: var(--wa-muted); text-decoration: none; }
.wa-nav-logout-form { display: inline; margin: 0; }
/* Logout is a POST form button (CSRF-protected) styled to read as the old link. */
.wa-nav-logout {
  font-weight: 600;
  color: var(--wa-muted);
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.wa-nav-logout:hover { color: var(--wa-green-dark); }

/* Layout */
.wa-page { animation: waFade .25s ease both; }
.wa-page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.wa-h1 { font-size:1.6rem; font-weight:700; margin:.2rem 0 .1rem; letter-spacing:-.01em; }
.wa-h2 { font-size:1.1rem; font-weight:600; margin:0 0 .6rem; }
.wa-sub { color:var(--wa-muted); margin:0 0 1.2rem; }
.wa-back { display:inline-block; color:var(--wa-muted); text-decoration:none; margin-bottom:.6rem; font-weight:500; }
.wa-back:hover { color:var(--wa-green-dark); }
.wa-dim { color:var(--wa-muted); font-weight:400; }
.wa-empty { background:var(--wa-surface); border-radius:var(--wa-radius); padding:40px; text-align:center; color:var(--wa-muted); box-shadow:var(--wa-shadow); }

/* Cards & forms */
.wa-card { background:var(--wa-surface); border-radius:var(--wa-radius); box-shadow:var(--wa-shadow); padding:22px; margin:16px 0; }
.wa-label { display:block; font-weight:600; font-size:.9rem; margin:14px 0 6px; }
.wa-input { width:100%; padding:12px 14px; border:1px solid #e3e7e4; border-radius:12px; font-size:1rem; background:#fff; transition:border-color .15s, box-shadow .15s; }
.wa-input:focus { outline:none; border-color:var(--wa-green); box-shadow:0 0 0 3px rgba(27,143,90,.12); }
.wa-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.wa-upload { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.wa-upload .wa-input { width:auto; flex:1; min-width:160px; }
.wa-inline-form { margin:12px 0; }

/* Buttons */
.wa-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:999px; border:none; font-size:1rem; font-weight:600; cursor:pointer; text-decoration:none; transition:transform .08s ease, background .15s, box-shadow .15s; }
.wa-btn:active { transform:scale(.97); }
.wa-btn-primary { background:var(--wa-green); color:#fff; box-shadow:0 4px 14px rgba(27,143,90,.28); }
.wa-btn-primary:hover { background:var(--wa-green-dark); color:#fff; }
.wa-btn-ghost { background:transparent; color:var(--wa-green-dark); border:1px solid #d6ddd8; }
.wa-btn-danger { background:var(--wa-red); color:#fff; }
.wa-danger-card { background:transparent; box-shadow:none; padding:8px 0; }

/* Lists */
.wa-list { display:flex; flex-direction:column; gap:10px; margin-top:8px; }
.wa-list-item { display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--wa-surface); border-radius:14px; padding:16px 18px; box-shadow:var(--wa-shadow); text-decoration:none; color:var(--wa-ink); transition:transform .1s, box-shadow .15s; flex-wrap:wrap; }
a.wa-list-item:hover { transform:translateY(-1px); box-shadow:0 10px 28px rgba(20,40,30,.1); }
.wa-list-title { font-weight:600; }
.wa-list-meta { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:.9rem; }
.wa-ok { color:var(--wa-green-dark); font-weight:600; }
.wa-warn { color:var(--wa-red); font-weight:600; }

/* Badges */
.wa-badge { padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; }
.wa-badge-ok { background:rgba(27,143,90,.12); color:var(--wa-green-dark); }
.wa-badge-bad { background:rgba(192,57,43,.12); color:var(--wa-red); }
.wa-badge-wait { background:rgba(120,120,120,.12); color:#666; }

/* Home tiles */
.wa-card-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; }
.wa-tile { display:flex; flex-direction:column; gap:6px; background:var(--wa-surface); border-radius:var(--wa-radius); padding:24px; box-shadow:var(--wa-shadow); text-decoration:none; color:var(--wa-ink); animation:waRise .3s ease both; transition:transform .12s, box-shadow .15s; }
.wa-tile:hover { transform:translateY(-2px); box-shadow:0 14px 34px rgba(20,40,30,.12); }
.wa-tile-title { font-size:1.15rem; font-weight:700; }
.wa-tile-sub { color:var(--wa-muted); }
.wa-tile-go { color:var(--wa-green-dark); font-weight:600; margin-top:6px; }

/* Mark sheet */
/* Bottom clearance must exceed the fixed send-bar height (+ the phone's
   home-indicator safe area) or the LAST student is hidden behind the bar. */
.wa-students { display:flex; flex-direction:column; gap:8px; margin-bottom:calc(120px + env(safe-area-inset-bottom, 0px)); }
.wa-student { display:flex; align-items:center; gap:12px; background:var(--wa-surface); border-radius:14px; padding:16px 18px; box-shadow:var(--wa-shadow); cursor:pointer; user-select:none; border:2px solid transparent; transition:border-color .15s, background .15s; }
.wa-student:focus { outline:none; box-shadow:0 0 0 3px rgba(27,143,90,.25), var(--wa-shadow); }
.wa-student:focus.is-absent { box-shadow:0 0 0 3px rgba(192,57,43,.25), var(--wa-shadow); }
.wa-student-info { flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.wa-student-name { font-weight:600; }
.wa-student-phone { font-size:.82rem; color:var(--wa-muted); }
.wa-state { font-weight:700; font-size:.85rem; padding:4px 12px; border-radius:999px; }
.wa-state-present { background:rgba(27,143,90,.12); color:var(--wa-green-dark); display:inline-block; }
.wa-state-absent { background:rgba(192,57,43,.14); color:var(--wa-red); display:none; }
.wa-student.is-absent { border-color:var(--wa-red); background:#fff6f5; }
.wa-student.is-absent .wa-state-present { display:none; }
.wa-student.is-absent .wa-state-absent { display:inline-block; }

/* The visible Present/Absent switch (green=present, red=absent, knob slides). */
.wa-switch { flex:0 0 auto; width:50px; height:28px; border-radius:999px; background:var(--wa-green); position:relative; transition:background .2s ease; }
.wa-switch-knob { position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s ease; }
.wa-student.is-absent .wa-switch { background:var(--wa-red); }
.wa-student.is-absent .wa-switch-knob { transform:translateX(22px); }

.wa-sticky-bar { position:fixed; left:0; right:0; bottom:0; background:var(--wa-surface); box-shadow:0 -6px 24px rgba(20,40,30,.1); display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 20px; padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px)); z-index:50; }
.wa-sticky-bar .wa-count { font-weight:700; }
.wa-sticky-bar .wa-btn { flex:0 0 auto; }

/* Result */
.wa-result-counts { display:flex; gap:14px; margin:18px 0; }
.wa-stat { flex:1; background:var(--wa-surface); border-radius:var(--wa-radius); padding:22px; text-align:center; box-shadow:var(--wa-shadow); }
.wa-stat-num { display:block; font-size:2rem; font-weight:800; }
.wa-stat-lbl { color:var(--wa-muted); font-weight:600; font-size:.85rem; }
.wa-progress { height:10px; background:#e7ebe8; border-radius:999px; overflow:hidden; }
.wa-progress-bar { height:100%; width:0; background:var(--wa-green); transition:width .4s ease; }
.wa-result-actions { display:flex; gap:12px; margin-top:20px; }

/* Variable mapping + builder rows */
.wa-var-row, .wa-var-map { display:flex; gap:10px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.wa-var-map .wa-input { flex:1; min-width:120px; width:auto; }
.wa-var-name { font-family:ui-monospace,Menlo,monospace; background:#eef3f0; padding:4px 8px; border-radius:8px; font-weight:600; }

/* User checkbox grid */
.wa-user-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:8px; margin:8px 0; }
.wa-check { display:flex; align-items:center; gap:8px; background:#f1f4f2; border-radius:10px; padding:10px 12px; cursor:pointer; }

/* Table */
.wa-table-wrap { overflow-x:auto; }
.wa-table { width:100%; border-collapse:collapse; font-size:.9rem; }
.wa-table th, .wa-table td { text-align:left; padding:8px 10px; border-bottom:1px solid #eef1ef; white-space:nowrap; }
.wa-table th { color:var(--wa-muted); font-weight:600; }

/* Animations */
@keyframes waFade { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@keyframes waRise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }

/* Phone tweaks */
@media (max-width:560px) {
  .wa-result-counts { gap:8px; }
  .wa-sticky-bar { padding:12px 14px; }
  .wa-sticky-bar .wa-btn { padding:12px 16px; }
}

/* Home tile icon */
.wa-tile-icon { font-size:1.6rem; color:var(--wa-green-dark); margin-bottom:2px; }

/* Attendance segmented toggle */
.wa-seg { display:inline-flex; background:#eef3f0; border-radius:999px; padding:4px; gap:4px; margin:6px 0 18px; }
.wa-seg-btn { border:none; background:transparent; color:var(--wa-muted); font-weight:600; padding:8px 18px; border-radius:999px; cursor:pointer; transition:background .15s, color .15s; }
.wa-seg-btn.is-on { background:var(--wa-surface); color:var(--wa-green-dark); box-shadow:var(--wa-shadow); }
.wa-tile-done { border:1px solid rgba(27,143,90,.25); }

/* Present/absent breakdown pills on a marked tile */
.wa-pill-row { display:flex; gap:8px; flex-wrap:wrap; margin:4px 0 2px; }
.wa-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 12px; border-radius:999px; font-size:.85rem; font-weight:700; }
.wa-pill::before { content:""; width:8px; height:8px; border-radius:50%; }
.wa-pill-present { background:rgba(27,143,90,.12); color:var(--wa-green-dark); }
.wa-pill-present::before { background:var(--wa-green); }
.wa-pill-absent { background:rgba(192,57,43,.14); color:var(--wa-red); }
.wa-pill-absent::before { background:var(--wa-red); }

/* A marked tile whose messages were already sent today: shaded + a "Sent" badge
   so it reads as "done, no action needed" but is still tappable to view/re-send. */
.wa-tile-done { position:relative; }
.wa-tile-sent { background:#eef2ef; box-shadow:none; border-color:rgba(27,143,90,.18); }
.wa-tile-sent .wa-tile-title, .wa-tile-sent .wa-tile-sub { opacity:.62; }
.wa-tile-sent:hover { opacity:1; }
.wa-tile-sent:hover .wa-tile-title, .wa-tile-sent:hover .wa-tile-sub { opacity:.85; }
.wa-sent-badge { position:absolute; top:12px; right:12px; display:inline-flex; align-items:center; gap:5px; background:var(--wa-green); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:4px 10px; border-radius:999px; box-shadow:0 2px 8px rgba(27,143,90,.3); }

/* Send preview */
.wa-preview .wa-bubble-wrap { display:flex; margin:6px 0 18px; }
.wa-bubble { background:#dcf8c6; color:#15201b; border-radius:14px 14px 14px 4px; padding:14px 16px; max-width:520px; white-space:pre-wrap; box-shadow:var(--wa-shadow); line-height:1.45; }
.wa-preview-count { font-size:1.05rem; margin:0 0 14px; }
.wa-preview-actions { display:flex; gap:12px; align-items:center; }

/* Clearer back button (pill, bordered) — the plain text link was easy to miss. */
.wa-back-btn { display:inline-flex; align-items:center; gap:7px; background:var(--wa-surface); color:var(--wa-green-dark); border:1px solid #d6ddd8; padding:8px 16px; border-radius:999px; font-weight:600; box-shadow:var(--wa-shadow); transition:background .15s, border-color .15s, transform .08s; }
.wa-back-btn:hover { background:rgba(27,143,90,.08); border-color:var(--wa-green); color:var(--wa-green-dark); }
.wa-back-btn:active { transform:scale(.97); }

/* Larger present/absent pills on the preview header */
.wa-pill-row-lg { margin:10px 0 16px; }
.wa-pill-row-lg .wa-pill { font-size:1rem; padding:7px 16px; }

/* Absent-students dropdown (native <details>) */
.wa-names { background:var(--wa-surface); border-radius:14px; box-shadow:var(--wa-shadow); margin:0 0 18px; overflow:hidden; }
.wa-names-summary { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 18px; cursor:pointer; font-weight:600; list-style:none; user-select:none; }
.wa-names-summary::-webkit-details-marker { display:none; }
.wa-names-summary span { display:inline-flex; align-items:center; gap:8px; }
.wa-names-chev { transition:transform .2s ease; color:var(--wa-muted); }
.wa-names[open] .wa-names-chev { transform:rotate(180deg); }
.wa-names-list { margin:0; padding:0 18px 16px 40px; display:flex; flex-direction:column; gap:6px; }
.wa-names-list li { color:var(--wa-ink); }

/* History-by-date table */
.wa-hist-table { background:var(--wa-surface); border-radius:14px; box-shadow:var(--wa-shadow); overflow:hidden; }
.wa-hist-table th, .wa-hist-table td { vertical-align:middle; }
.wa-hist-table tbody tr:hover { background:rgba(27,143,90,.04); }
.wa-hist-class { font-weight:600; }
.wa-hist-db { font-size:.8rem; }
.wa-hist-table .wa-pill { font-size:.82rem; padding:3px 12px; }
.wa-link { color:var(--wa-green-dark); font-weight:600; text-decoration:none; white-space:nowrap; }
.wa-link:hover { text-decoration:underline; }

/* Small icon button (e.g. row delete) */
.wa-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; border-radius:50%; border:1px solid #e3e7e4; background:var(--wa-surface); color:var(--wa-muted); cursor:pointer; font-size:1rem; transition:background .15s, color .15s, border-color .15s, transform .08s; }
.wa-icon-btn:hover { background:#f5f7f5; }
.wa-icon-btn:active { transform:scale(.92); }
.wa-icon-btn-danger:hover { background:rgba(192,57,43,.1); color:var(--wa-red); border-color:rgba(192,57,43,.4); }

/* Modal popup (e.g. add authority number) */
.wa-modal-backdrop { position:fixed; inset:0; background:rgba(20,30,25,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:200; animation:waFade .15s ease both; }
.wa-modal-backdrop[hidden] { display:none; }
.wa-modal { background:var(--wa-surface); border-radius:var(--wa-radius); box-shadow:0 20px 60px rgba(20,40,30,.25); padding:24px; width:100%; max-width:420px; animation:waRise .2s ease both; }
.wa-modal-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:18px; }

/* Mobile header: slim bar + hamburger */
.wa-nav-toggle { display:none; background:transparent; border:none; font-size:1.5rem; color:var(--wa-green-dark); cursor:pointer; line-height:1; padding:4px 8px; }
@media (max-width:768px) {
  .wa-nav-inner { flex-wrap:wrap; gap:10px; padding:10px 14px; }
  .wa-brand { font-size:1rem; flex:1; }
  .wa-nav-toggle { display:inline-flex; order:2; }
  .wa-nav-right { order:3; gap:14px; }
  .wa-nav-links { order:4; flex-basis:100%; flex-direction:column; gap:2px; display:none; }
  .wa-nav.open .wa-nav-links { display:flex; }
  .wa-nav-links a { padding:10px 12px; border-radius:10px; }
}

/* ERP integration page — column mapping + generated-code output */
.wa-integration .wa-textarea { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; resize: vertical; }
.wa-hint { font-size:.82rem; color:var(--wa-muted); margin:6px 0 0; }
.wa-varmap { margin: 4px 0; }
.wa-varrow .wa-label { margin-top:10px; }
.wa-out-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }
.wa-out-head strong { font-size:.95rem; }
.wa-code { background:#15201b; color:#e9f3ed; border-radius:12px; padding:14px 16px; overflow-x:auto; font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size:.82rem; line-height:1.5; white-space:pre; margin:0; }

/* Database inline editor */
.wa-dbedit-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.wa-edit-table input.wa-cell { width:100%; min-width:120px; padding:8px 10px; font-size:.92rem; }
.wa-edit-table td { padding:4px; }
.wa-edit-del-col { width:36px; text-align:center; }
.wa-del-row { border:none; background:transparent; color:var(--wa-red); font-size:1rem; cursor:pointer; padding:6px 8px; border-radius:8px; }
.wa-del-row:hover { background:rgba(192,57,43,.1); }
.wa-dbedit-save { display:flex; gap:12px; justify-content:flex-end; margin:16px 0; }
.wa-preview-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:8px; }