/* =====================================================
   Training Center admin — Filament v3 dark theme look
   ===================================================== */
:root{
  --bg:#0b0b0d;
  --topbar:#131316;
  --panel:#18181b;
  --panel-2:#1f1f23;
  --input:#111114;
  --border:rgba(255,255,255,.09);
  --border-soft:rgba(255,255,255,.06);
  --text:#fafafa;
  --text-2:#d4d4d8;
  --muted:#a1a1aa;
  --faint:#71717a;
  --primary:#1e3a6e;
  --primary-hover:#274b8d;
  --link:#93b4e6;
  --danger:#f87171;
  --amber:#fbbf24;
  --green:#4ade80;
  --ring:#3b82f6;
  --radius:10px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  font-family:'Inter',system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit; text-decoration:none;}
button{font-family:inherit;}

/* ---------- top bar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; height:60px; z-index:50;
  background:var(--topbar); border-bottom:1px solid var(--border-soft);
  display:flex; align-items:center; padding:0 24px; gap:16px;
}
.topbar .brand{font-size:19px; font-weight:800; letter-spacing:-.01em; color:var(--text);}
.topbar .avatar{
  margin-left:auto; width:36px; height:36px; border-radius:50%;
  background:#27272a; color:var(--text-2); font-size:12.5px; font-weight:700;
  display:grid; place-items:center; border:1px solid var(--border);
  cursor:default;
}

/* ---------- layout ---------- */
.shell{display:flex; min-height:100vh; padding-top:60px;}
.sidebar{
  width:280px; flex-shrink:0; position:fixed; top:60px; bottom:0; left:0;
  background:var(--bg); border-right:1px solid var(--border-soft);
  overflow-y:auto; padding:16px 12px 40px;
}
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-thumb{background:#27272a; border-radius:8px;}
.main{flex:1; margin-left:280px; padding:40px 44px 70px; min-width:0;}

/* sidebar items */
.sb-item{
  display:flex; align-items:center; gap:12px;
  padding:10px 14px; border-radius:9px; margin-bottom:2px;
  color:var(--muted); font-weight:500; font-size:14px;
  cursor:pointer; transition:background .12s,color .12s;
}
.sb-item svg{width:20px; height:20px; flex-shrink:0; stroke:currentColor;}
.sb-item:hover{background:rgba(255,255,255,.05); color:var(--text-2);}
.sb-item.active{background:rgba(255,255,255,.07); color:var(--text);}
.sb-item.active svg{color:var(--link);}
.sb-group{margin-top:22px;}
.sb-group-label{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px 8px; color:var(--faint); font-size:12.5px; font-weight:600;
  letter-spacing:.02em;
}
.sb-group-label .chev{font-size:10px; opacity:.7;}

/* ---------- page header ---------- */
.page-h{display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:28px;}
.page-h h1{font-size:30px; font-weight:800; letter-spacing:-.02em;}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-size:14px; font-weight:600; border-radius:9px; cursor:pointer;
  padding:9px 16px; border:1px solid transparent; transition:.15s;
  white-space:nowrap;
}
.btn-primary{background:var(--primary); color:#fff;}
.btn-primary:hover{background:var(--primary-hover);}
.btn-ghost{background:var(--panel-2); color:var(--text-2); border-color:var(--border);}
.btn-ghost:hover{background:#2a2a30;}
.btn-danger-ghost{background:transparent; color:var(--danger); border-color:transparent;}

/* ---------- cards ---------- */
.card{
  background:var(--panel); border:1px solid var(--border-soft);
  border-radius:12px;
}

/* welcome card */
.welcome{
  display:flex; align-items:center; gap:16px; padding:18px 22px; margin-bottom:24px;
}
.welcome .avatar{
  width:44px; height:44px; border-radius:50%; background:#27272a; color:var(--text-2);
  font-weight:700; font-size:14px; display:grid; place-items:center; border:1px solid var(--border);
}
.welcome .who b{display:block; font-size:16px; font-weight:700;}
.welcome .who span{color:var(--muted); font-size:13.5px;}
.welcome .btn{margin-left:auto;}

/* stat grid */
.stat-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:26px;}
.stat-card{padding:20px 22px;}
.stat-card .k{color:var(--muted); font-size:13.5px; font-weight:500;}
.stat-card .v{font-size:30px; font-weight:800; letter-spacing:-.02em; margin:4px 0 6px;}
.stat-card .d{color:var(--faint); font-size:12.5px;}
.stat-card .d.gold{color:var(--amber);}

/* ---------- table widget ---------- */
.tbl-card{overflow:hidden;}
.tbl-title{padding:18px 22px; font-size:17px; font-weight:700; border-bottom:1px solid var(--border-soft);}
.tbl-toolbar{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--border-soft);
}
.tbl-toolbar .sorticon{color:var(--faint); font-size:15px; padding:0 6px;}
.search{
  margin-left:auto; display:flex; align-items:center; gap:8px;
  background:var(--input); border:1px solid var(--border); border-radius:9px;
  padding:8px 12px; width:220px; color:var(--muted);
}
.search input{
  background:none; border:none; outline:none; color:var(--text);
  font-size:13.5px; width:100%; font-family:inherit;
}
.search input::placeholder{color:var(--faint);}
table{width:100%; border-collapse:collapse; font-size:14px;}
thead th{
  text-align:left; padding:12px 16px; color:var(--text-2); font-weight:600;
  background:rgba(255,255,255,.025); border-bottom:1px solid var(--border-soft);
  white-space:nowrap;
}
tbody td{padding:14px 16px; border-bottom:1px solid var(--border-soft); color:var(--text-2); vertical-align:middle;}
tbody tr:hover{background:rgba(255,255,255,.02);}
.cb{width:16px; height:16px; accent-color:var(--ring); background:var(--input);}
th.w-cb, td.w-cb{width:44px;}
.sort-h{cursor:pointer; user-select:none;}
.sort-h .car{font-size:10px; color:var(--faint); margin-left:4px;}

/* badges */
.badge{
  display:inline-block; font-size:12px; font-weight:600; border-radius:7px;
  padding:2.5px 9px; border:1px solid var(--border); background:rgba(255,255,255,.04);
  color:var(--text-2);
}
.badge.published{color:var(--green); border-color:rgba(74,222,128,.3); background:rgba(74,222,128,.06);}
.badge.type{color:var(--link); border-color:rgba(147,180,230,.25); background:rgba(147,180,230,.06);}

/* row actions */
.acts{display:flex; gap:16px; justify-content:flex-end; white-space:nowrap;}
.act{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; font-weight:600; cursor:pointer; background:none; border:none;}
.act.edit{color:var(--text-2);}
.act.edit:hover{color:#fff;}
.act.del{color:var(--danger);}
.act.del:hover{color:#fca5a5;}

/* status icons on dashboard table */
.xicon{color:var(--danger); font-size:16px;}
.vicon{color:var(--green); font-size:15px;}

/* table footer */
.tbl-foot{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:14px 16px; color:var(--muted); font-size:13.5px;
}
.perpage{display:flex; align-items:center; gap:10px;}
.perpage select{
  background:var(--input); color:var(--text); border:1px solid var(--border);
  border-radius:8px; padding:6px 10px; font-family:inherit; font-size:13.5px;
}

/* empty state */
.empty{
  padding:64px 20px; text-align:center; color:var(--text-2);
}
.empty .ic{
  width:44px; height:44px; margin:0 auto 14px; border-radius:50%;
  background:#27272a; display:grid; place-items:center; color:var(--faint); font-size:17px;
}
.empty p{font-weight:600; font-size:15px;}

/* ---------- modal ---------- */
.modal-back{
  position:fixed; inset:0; z-index:90; background:rgba(0,0,0,.6);
  display:none; align-items:flex-start; justify-content:center;
  padding:60px 20px 30px; overflow-y:auto;
}
.modal-back.show{display:flex;}
.modal{
  background:var(--panel); border:1px solid var(--border);
  border-radius:14px; width:100%; max-width:880px;
  padding:26px 28px 28px; box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.modal.narrow{max-width:860px;}
.m-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px;}
.m-head h2{font-size:19px; font-weight:700;}
.m-x{background:none; border:none; color:var(--faint); font-size:20px; cursor:pointer; padding:4px;}
.m-x:hover{color:var(--text);}
.m-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px 28px;}
.m-grid .full{grid-column:1 / -1;}
.f-label{display:block; font-size:13.5px; font-weight:500; color:var(--text-2); margin-bottom:7px;}
.f-label .req{color:var(--danger); margin-left:2px;}
.f-input, .f-select, .f-textarea{
  width:100%; background:var(--input); border:1px solid var(--border);
  color:var(--text); border-radius:9px; padding:10px 12px; font-size:14px;
  font-family:inherit; outline:none; transition:border .15s, box-shadow .15s;
}
.f-input:focus, .f-select:focus, .f-textarea:focus{border-color:var(--ring); box-shadow:0 0 0 1px var(--ring);}
.f-textarea{resize:vertical; min-height:74px;}
.f-textarea.tall{min-height:150px;}
.f-help{font-size:12.5px; color:var(--faint); margin-top:6px;}
.f-select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center;}

/* dropzone */
.dropzone{
  border:1px dashed var(--border); background:var(--input); border-radius:10px;
  padding:26px 16px; text-align:center; color:var(--muted); font-size:13.5px;
  cursor:pointer; transition:.15s;
}
.dropzone:hover{border-color:var(--ring); color:var(--text-2);}
.dropzone b{color:var(--text);}

/* checkboxes group */
.check-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; padding-top:2px;}
.check-item{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--text-2); cursor:pointer;}
.check-item input{width:17px; height:17px; accent-color:var(--ring); background:var(--input);}

/* toggle */
.toggle-row{display:flex; align-items:center; gap:12px; cursor:pointer; user-select:none;}
.toggle-row .lab{font-size:14px; color:var(--text-2); font-weight:500;}
.tgl{
  position:relative; width:44px; height:24px; border-radius:99px; flex-shrink:0;
  background:#3f3f46; transition:.18s; border:1px solid var(--border);
}
.tgl::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:.18s;
}
.toggle-row.on .tgl{background:var(--primary-hover);}
.toggle-row.on .tgl::after{left:22px;}

.m-foot{display:flex; gap:10px; margin-top:26px;}

/* ---------- toast ---------- */
#toast{
  position:fixed; bottom:26px; right:26px; z-index:200;
  background:var(--panel-2); border:1px solid var(--border);
  color:var(--text); font-size:13.5px; font-weight:500;
  padding:12px 18px; border-radius:10px; box-shadow:0 12px 34px rgba(0,0,0,.45);
  opacity:0; transform:translateY(16px); transition:.25s; pointer-events:none;
}
#toast.show{opacity:1; transform:translateY(0);}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .sidebar{display:none;}
  .main{margin-left:0; padding:26px 18px 60px;}
  .stat-grid{grid-template-columns:1fr;}
  .m-grid{grid-template-columns:1fr;}
}