:root{
  --glass-bg: rgba(255,255,255,.14);
  --glass-brd: rgba(255,255,255,.28);
  --fg:#0f1222; --muted:#5b6070; --accent:#4e7cff; --ok:#0e6a46;
  --bg1:#f6f7fb; --bg2:#eef1f8;
  --danger:#cc2a3a; --danger-bg:#ffe8e8;
  --row-bg: rgba(255,255,255,.78);
  --row-bg-hover: rgba(255,255,255,.92);
}
html[data-theme="dark"]{
  --glass-bg: rgba(17,23,34,.5);
  --glass-brd: rgba(255,255,255,.12);
  --fg:#e6e9ef; --muted:#9aa3b2; --accent:#6c8dff; --ok:#37d49e;
  --bg1:#0e141f; --bg2:#101621;
  --danger:#ff8a9a; --danger-bg:rgba(255,0,0,.1);
  --row-bg: rgba(255,255,255,.10);
  --row-bg-hover: rgba(255,255,255,.16);
}
*{box-sizing:border-box}
html,body{ height:100%; }
body{
  margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--fg);
  background:
    radial-gradient(1200px 600px at 10% -10%, #e8f0ff 0, transparent 60%),
    radial-gradient(1000px 800px at 110% 10%, #ffe6f1 0, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0, var(--bg2) 100%);
}

/* ===== Fixed screen controls (top-right of SCREEN) ===== */
.screen-controls{
  position: fixed; top:12px; right:12px; z-index:10000;
  display:flex; gap:8px; align-items:center; flex-wrap:wrap;
  padding:8px; border-radius:14px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.45);
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
}
html[data-theme="dark"] .screen-controls{ background:rgba(255,255,255,.12); }
.screen-controls form{ margin:0; }
.theme-toggle{
  padding:8px 12px; border-radius:12px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.45); color:#111; cursor:pointer;
}
html[data-theme="dark"] .theme-toggle{ background:rgba(255,255,255,.12); color:#e6e9ef; }
.switch{ position:relative; width:56px; height:32px; flex:0 0 auto; }
.switch input{ display:none; }
.switch .slider{
  position:absolute; inset:0; border-radius:999px; border:1px solid var(--glass-brd);
  background:rgba(0,0,0,.18); transition:.2s ease;
}
.switch .slider::before{
  content:""; position:absolute; top:50%; left:3px; width:26px; height:26px; transform:translateY(-50%);
  border-radius:50%; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.25); transition:.2s ease;
}
.switch input:checked + .slider{ background:var(--accent); }
.switch input:checked + .slider::before{ transform:translate(27px, -50%); }

/* Layout shells */
.shell{ min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:24px; }
.page{ max-width: 1200px; margin: 24px auto; padding: 0 20px; }
.logo-wrap{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.logo-wrap img{ width:88px; height:88px; object-fit:contain; display:block; }
.logo-wrap .tagline{ font-weight:700; font-size:14px; opacity:.9; }

/* Glass card */
.glass{
  background:var(--glass-bg); border:1px solid var(--glass-brd);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,.10);
}
.card{
  width: 100%; max-width: 1120px;
  margin: 0 auto; padding: 20px;
  overflow: hidden;
}

/* Titles & forms */
.title{ text-align:center; margin:2px 0 12px; font-size:22px; font-weight:700; letter-spacing:.2px; }
label{ display:block; font-weight:600; margin:6px 0; }
input[type="text"], textarea, select{
  width:100%; padding:12px; border:1px solid var(--glass-brd); border-radius:12px; background:rgba(255,255,255,.75); outline:none; color:inherit;
}
textarea{ min-height:180px; resize:vertical; }
.actions{ display:flex; gap:10px; margin-top:6px; justify-content:center; flex-wrap:wrap; }
button,.btn{
  padding:10px 16px; border:0; border-radius:12px; background:var(--accent); color:#fff; font-weight:700; cursor:pointer;
  box-shadow:0 6px 18px rgba(78,124,255,.25);
}
.btn-plain{ background:rgba(255,255,255,.25); color:#111; border:1px solid var(--glass-brd); }
html[data-theme="dark"] .btn-plain{ background:rgba(255,255,255,.10); color:#e6e9ef; }
.bar{ width:100%; display:flex; gap:12px; align-items:center; margin-bottom:12px; flex-wrap:wrap; }
.search{ display:flex; gap:10px; align-items:center; flex: 1 1 340px; min-width:260px; }
.searchbox{ width:100%; }

/* ===== Grid "table" (header + rows share same template) ===== */
.gt{ display:grid; grid-template-columns: 1fr; gap:10px; width:100%; }
.gt-cols{ grid-template-columns: 60px 180px 1fr 160px 180px 120px 80px; }

.gt-header{
  display:grid; align-items:center; width:100%;
  padding:0 0; /* no inner padding to align borders */
  color:var(--muted); text-transform:uppercase; font-size:14px; font-weight: 600 !important; letter-spacing:.06em;
}
.gt-header > div{
  padding:12px 10px; background:transparent; border-left:1px solid var(--glass-brd);
}
.gt-header > div:first-child{ border-left:none; text-align:center; }

/* Row cards */
.gt-row{
  display:grid; align-items:center; width:100%;
  background:var(--row-bg); border:1px solid var(--glass-brd); border-radius:12px;
  transition: background .15s ease, box-shadow .15s ease, transform .05s ease;
  cursor:pointer;
}
.gt-row:hover{ background:var(--row-bg-hover); box-shadow:0 6px 18px rgba(0,0,0,.08); }
.gt-row > div{
  padding:12px 10px; border-left:1px solid var(--glass-brd);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gt-row > div:first-child{ border-left:none; text-align:center; }

/* Cells */
.cell.subject{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; background:rgba(0,0,0,.06); font-size:12px; }
html[data-theme="dark"] .badge{ background:rgba(255,255,255,.12); color:var(--fg); }

/* Resolve pill */
.status-pill{
  display:inline-block; min-width:60px; text-align:center; padding:6px 10px; border-radius:999px; font-weight:700;
  border:1px solid var(--glass-brd); cursor:pointer; user-select:none;
}
.status-pill.no{ background:var(--danger-bg); color:var(--danger); }
.status-pill.yes{ background:rgba(0,200,120,.12); color:var(--ok); }

/* Delete button */
.delete-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.85); cursor:pointer; font-weight:900; line-height:1; font-size:20px;
  color: var(--danger);
}
.delete-btn:hover{ background:var(--danger-bg); color:var(--danger); }

/* Pagination */
.pagination{ display:flex; gap:8px; margin-top:12px; justify-content:center; }
.page-link{ padding:8px 12px; border-radius:10px; background:rgba(255,255,255,.5); border:1px solid var(--glass-brd); text-decoration:none; color:#1a1d2d; }
.page-link.active{ background:#4e7cff; color:#fff; border-color:transparent; }

/* Modal (details + confirm) */
.modal-backdrop{ position:fixed; inset:0; background:rgba(10,12,20,.35); display:none; align-items:center; justify-content:center; z-index:9999; padding:18px; }
.modal{ width:min(860px, 96vw); max-height:88vh; overflow:hidden; }
.modal.small{ width:min(420px, 92vw); }
.modal header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--glass-brd); }
.modal header h2{ margin:0; font-size:18px; }
.modal .close{ background:transparent; border:0; font-size:24px; cursor:pointer; color:inherit; }
.modal .content{ padding:16px; overflow:auto; max-height: calc(88vh - 110px); }
.form-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap:14px 16px; }
.full{ grid-column: 1 / -1; }
.modal label{ display:block; font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin:0 0 6px; }
.modal input,.modal textarea{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--glass-brd); background:rgba(255,255,255,.75); outline:none; color:inherit; }
html[data-theme="dark"] .modal input, html[data-theme="dark"] .modal textarea{ background:rgba(255,255,255,.12); }
.modal textarea{ min-height:200px; resize:vertical; }
.modal footer{ padding:12px 16px; border-top:1px solid var(--glass-brd); display:flex; justify-content:flex-end; gap:8px; }

/* Toasts */
.toast{
  position: fixed; left:50%; bottom:16px; transform:translateX(-50%);
  z-index: 12000;
  min-width: 260px; max-width: 92vw;
  display:flex; align-items:center; gap:10px;
  padding:12px 14px;
  border-radius:14px; border:1px solid var(--glass-brd);
  background:rgba(255,255,255,.9); color:var(--fg);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease;
}
.toast.show{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.toast.success{ border-color: rgba(18,140,98,.35); }
.toast.error{ border-color: rgba(204,42,58,.35); }
.toast .close{ margin-left:auto; background:transparent; border:0; font-size:18px; cursor:pointer; color:inherit; }

/* ===== Responsive: hide IP/Machine columns consistently ===== */
@media (max-width: 1120px){
  .gt-cols{ grid-template-columns: 60px 180px 1fr 120px 80px; } /* remove IP + Machine */
  .gt-header > .col-ip, .gt-header > .col-machine,
  .gt-row > .col-ip, .gt-row > .col-machine { display:none; }
}
@media (max-width: 560px){
  .card{ max-width: 96vw; padding:16px; }
  .title{ font-size:20px; }
}

/* ====== SAFE ADDITIONS / OVERRIDES ====== */

/* Never underline buttons */
button, .btn, .btn-plain, a.btn {
  text-decoration: none !important;
}

/* Top-right control bar (reuse existing .glass look) */
.screen-controls {
  position: fixed;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 20;
}

/* Icon-like buttons for theme + 24Hrs */
.icon-btn {
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  font: inherit;
}
.icon-btn:hover {
  filter: brightness(1.05);
}

/* Danger style (24Hrs when enabled, logout, delete confirm) */
.danger {
  background: rgba(220, 53, 69, 0.15);
  color: #dc3545;
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.35) inset;
}
.danger:hover {
  box-shadow: 0 0 0 1px rgba(220, 53, 69, 0.55) inset;
}

/* Neutral "24Hrs" label base — visible on light theme */
.badge-24 {
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  color: #000;
}

/* Theme icon visibility: yellow sun on light; softer on dark */
.theme-icon { color: #f5c518; }
[data-theme="dark"] .theme-icon { color: #ffd24d; }

/* (Optional) ensure modal small variant looks compact */
.modal.small {
  max-width: 420px;
}

/* Keep delete button looking like an icon button in grid */
.delete-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 8px;
}

/* Status pills stick to your existing design — ensure pointer */
.status-pill {
  cursor: pointer;
}


/* ==== Toasts (non-intrusive) ==== */
.toast-area {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  min-width: 280px;
  max-width: 90vw;
  padding: 12px 14px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.95);
  color: inherit;
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.toast.success {
  background: rgba(25,135,84,.12);
  color: #198754;
  box-shadow: inset 0 0 0 1px rgba(25,135,84,.3);
}
.toast.error {
  background: rgba(220,53,69,.12);
  color: #dc3545;
  box-shadow: inset 0 0 0 1px rgba(220,53,69,.3);
}
.toast .close {
  margin-left: auto;
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Keep 24Hrs text black when not enabled */
#timeLimitBtn {
    color: #000 !important;
}


/* Make login password field match text input size/style */
input[type="password"]{
  width:100%;
  padding:12px;
  border:1px solid var(--glass-brd);
  border-radius:12px;
  background:rgba(255,255,255,.75);
  outline:none;
  color:inherit;
  font:inherit;      /* keep same font sizing as text */
  line-height:1.45;  /* match overall form rhythm */
}

/* --- Toast icons (animated) --- */
.toast .ico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  align-items: center;
  justify-content: center;
  animation: toast-pop 250ms ease-out both;
}

.toast .ico svg {
  display: block;
  width: 22px;
  height: 22px;
  stroke: currentColor;   /* inherits green/red from .toast.success/.error */
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* draw animation */
.toast .ico .path {
  stroke-dasharray: 36;
  stroke-dashoffset: 36;
  animation: toast-draw 600ms ease forwards;
}

/* error cross uses a bit shorter stroke (two lines) */
.toast .ico .path-small {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  animation: toast-draw 450ms ease forwards;
}

@keyframes toast-draw { to { stroke-dashoffset: 0; } }
@keyframes toast-pop  { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }


/* === Admin table header tweaks (div-based header, not <th>) === */


/* === Logo slightly smaller === */
.card .logo-wrap img {
  width: 150px !important;          /* was 88px */
  height: 150px !important;
}


/* stack panels with a small gap */
.stack-panels {
  display: flex;
  flex-direction: column;
  gap: 14px; /* subtle spacing between search panel and table panel */
}

/* keep table panel compact */
.table-card { padding-top: 14px; }

#pre_error .alert.error { font-weight: 700; }