:root{
  /* ---------- Light theme (default) ---------- */
  --bg1:#eef2ff;
  --bg2:#f8fafc;

  /* surfaces */
  --card:rgba(255,255,255,.94);
  --card2:rgba(15,23,42,.03);     /* subtle tinted surface */
  --border:rgba(15,23,42,.12);

  /* text */
  --text:#0f172a;
  --muted:#475569;
  --heading:#0b1220;

  /* shadows */
  --shadow:0 18px 40px rgba(2,6,23,.10);
  --shadow2:0 10px 24px rgba(2,6,23,.10);

  /* accents */
  --blue:#2563eb;
  --green:#16a34a;
  --amber:#d97706;
  --red:#dc2626;
  --violet:#7c3aed;
  --teal:#0f766e;
  --slate:#334155;

  /* controls */
  --control-bg:rgba(255,255,255,.92);
  --control-bg2:rgba(15,23,42,.04);
  --control-border:rgba(15,23,42,.14);

  --focus:rgba(37,99,235,.22);
}

/* ---------- Dark mode ---------- */
html[data-theme="dark"]{
  --bg1:#0b1220;
  --bg2:#0f172a;

  --card:rgba(17,24,39,.86);
  --card2:rgba(255,255,255,.06);
  --border:rgba(148,163,184,.22);

  --text:#e5e7eb;
  --muted:#a5b4c3;
  --heading:#f1f5f9;

  --shadow:0 18px 40px rgba(0,0,0,.40);
  --shadow2:0 10px 24px rgba(0,0,0,.30);

  --control-bg:rgba(17,24,39,.70);
  --control-bg2:rgba(255,255,255,.06);
  --control-border:rgba(148,163,184,.22);

  --focus:rgba(96,165,250,.22);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:
    radial-gradient(1200px 700px at 18% 0%, rgba(59,130,246,.10), transparent 55%),
    radial-gradient(1100px 700px at 90% 12%, rgba(16,185,129,.08), transparent 55%),
    radial-gradient(circle at top, var(--bg1), var(--bg2));
  color:var(--text);
}

a{color:inherit}
a:hover{opacity:.96}

.wrap{max-width:1200px;margin:0 auto;padding:18px}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.h1{font-size:22px;font-weight:1000;color:var(--heading)}
.sub{margin-top:4px;color:var(--muted);font-size:13px;font-weight:800}

.pill{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 12px;border-radius:999px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--text);
  backdrop-filter:blur(6px);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 12px;border-radius:14px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--text);
  text-decoration:none;
  font-weight:1000;font-size:13px;
  cursor:pointer;
  transition:all .12s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow2)}
.btn.primary{
  border:0;
  background:linear-gradient(135deg,#2563eb,#60a5fa);
  color:#fff;
  box-shadow:var(--shadow2)
}
.btn.ghost{background:transparent}

/* Cards */
.card{
  margin-top:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  box-shadow:var(--shadow);
}
.hr{border:0;border-top:1px solid var(--border);margin:12px 0}

/* Notices */
.notice{
  margin-top:14px;
  padding:10px 12px;
  border-radius:14px;
  font-weight:900;
  border:1px solid var(--border);
}
.notice.ok{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35);color:#065f46}
html[data-theme="dark"] .notice.ok{color:#a7f3d0}
.notice.bad{background:rgba(244,63,94,.10);border-color:rgba(244,63,94,.30);color:#9f1239}
html[data-theme="dark"] .notice.bad{color:#fecdd3}

/* Form */
label{display:block;font-size:12px;color:var(--muted);font-weight:900;margin:10px 0 6px}

.input, select, textarea{
  width:100%;
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--text);
  font-size:14px;
  outline:none;
}
.input::placeholder, textarea::placeholder{color:var(--muted)}
.input:focus, select:focus, textarea:focus{
  border-color:rgba(37,99,235,.55);
  box-shadow:0 0 0 3px var(--focus);
}

.small{color:var(--muted);font-size:12px;font-weight:800}

/* Grid helpers */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:12px}
.c4{grid-column:span 4}
.c6{grid-column:span 6}
.c12{grid-column:span 12}
@media (max-width:820px){ .c4,.c6{grid-column:span 12} }

/* Tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.tab{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 14px;border-radius:999px;
  border:1px solid var(--control-border);
  background:var(--control-bg2);
  color:var(--text);
  text-decoration:none;
  font-weight:1000;font-size:13px;
  transition:all .12s ease;
}
.tab:hover{transform:translateY(-1px);box-shadow:var(--shadow2)}
.tab.active{
  background:linear-gradient(135deg, rgba(37,99,235,.95), rgba(96,165,250,.95));
  border-color:rgba(37,99,235,.55);
  color:#fff;
}

/* Table */
.tableWrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
table{width:100%;border-collapse:collapse}
th,td{
  padding:12px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
  text-align:left;
  font-size:13px;
  vertical-align:top;
  color:var(--text);
}
th{
  background:var(--card2);
  color:var(--heading);
  font-size:12px;
  font-weight:1000;
}
html[data-theme="dark"] th{
  background:rgba(255,255,255,.06);
  color:var(--heading);
}

/* Badge */
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:4px 10px;border-radius:999px;
  font-weight:1000;font-size:12px;
  color:#fff;
}
.mono{
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

/* Small action buttons (Open/Edit/Delete) */
.openBtn, button.openBtn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 14px;border-radius:14px;
  border:1px solid var(--control-border);
  background:var(--control-bg);
  color:var(--text);
  text-decoration:none;
  font-weight:1000;
  cursor:pointer;
  transition:all .12s ease;
}
.openBtn:hover, button.openBtn:hover{
  transform:translateY(-1px);
  box-shadow:var(--shadow2);
}

/* Better scrollbar visibility (optional) */
.tableWrap::-webkit-scrollbar{height:10px}
.tableWrap::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.40);
  border-radius:999px
}
html[data-theme="dark"] .tableWrap::-webkit-scrollbar-thumb{
  background:rgba(148,163,184,.28);
}

/* Print */
@media print{
  body{background:#fff !important;color:#111 !important}
  .card,.tableWrap{box-shadow:none !important}
  .btn,.tabs,.pill{display:none !important}
}

/* ===== Light theme text visibility fix ===== */
html:not([data-theme="dark"]) .tab{
  color:#0f172a !important;
  text-shadow:none !important;
}
html:not([data-theme="dark"]) .tab.active{
  color:#0f172a !important; /* active tab light purple fill இருந்தாலும் text black */
}

/* Top small texts also more visible in light */
html:not([data-theme="dark"]) .sub,
html:not([data-theme="dark"]) .small{
  color:#334155 !important;
}