/* ======================================================
   VIBRANT DASHBOARD THEME — CLEAN & FIXED
====================================================== */

/* ===============================
   THEME VARIABLES
================================ */
:root {
  --bg: #0b0f1a;
  --panel: #151a2e;
  --panel-soft: #1b2240;
  --border: #2b3566;
  --text: #eef1ff;
  --muted: #9aa4ff;

  --primary: #7c7cff;
  --secondary: #22d3ee;
  --gradient: linear-gradient(135deg, #7c7cff, #22d3ee);

  --success: #3ecf8e;
  --warning: #fbbf24;
  --danger: #ff5a5f;
}

/* ===============================
   RESET
================================ */
* {
  box-sizing: border-box;
}
div {
    display: block;
    unicode-bidi: isolate;
}
body {
  margin: 0;
  background: radial-gradient(circle at top, #141b3d, var(--bg));
  color: var(--text);
  font-family: system-ui, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;
}

/* ===============================
   CENTERED PAGES (LOGIN / SETUP)
================================ */
.center {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ===============================
   LINKS & BUTTONS
================================ */
a {
  color: inherit;
  text-decoration: none;
}

.btn,
button.primary {
  background: var(--gradient);
  color: #050814;
  font-weight: 700;
  padding: 10px 10px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  transition: transform .15s ease, box-shadow .15s ease;
}

.btn:hover,
button.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.45);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--border);
  padding: 10px 14px;
  border-radius: 12px;
}

/* ===============================
   FORMS
================================ */
label {
  display: block;
  margin: 10px 0 6px;
  opacity: .85;
}

.input,
select,
textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--panel-soft);
  color: var(--text);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
}

/* ===============================
   TOP BAR
================================ */
.topbar {
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: linear-gradient(90deg, #141b3d, #1b2359);
  border-bottom: 1px solid var(--border);
}

.brand {
  font-weight: 800;
}

.topbar .spacer {
  flex: 1;
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 22px;
  color: var(--text);
}

/* ===============================
   MAIN LAYOUT
================================ */
.layout {
  display: flex;
  min-height: calc(100vh - 56px);
}

.sidebar {
  width: 240px;
  background: linear-gradient(180deg, #101634, #0b1026);
  border-right: 1px solid var(--border);
  padding: 16px;
}

.sidebar a {
  display: block;
  padding: 12px 14px;
  margin-bottom: 8px;
  border-radius: 10px;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--border);
  font-weight: 500;
}

.sidebar a:hover {
  background: rgba(255,255,255,.12);
}


/* ===============================
   CONTENT
================================ */
.content {
  flex: 1;
  padding: 24px;
}

/* ===============================
   CARDS & GRID
================================ */
.card {
  background: linear-gradient(180deg, var(--panel), #0f1430);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,.45);
}

.grid {
  display: grid;
  gap: 16px;
}

.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.kpi {
  font-size: 30px;
  font-weight: 800;
}

/* ===============================
   BADGES
================================ */
.badge {
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
}

.badge.ok {
  background: rgba(62,207,142,.2);
  color: var(--success);
}

.badge.warn {
  background: rgba(251,191,36,.2);
  color: var(--warning);
}

.badge.danger {
  background: rgba(255,90,95,.2);
  color: var(--danger);
}

/* ===============================
   TABLES — ALL DASHBOARD TABLES
================================ */
.table,
.attendance-table,
.classes-table,
.schedule-table,
.reports-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px;
}

.table thead th,
.attendance-table thead th,
.classes-table thead th,
.schedule-table thead th,
.reports-table thead th {
  padding: 12px 16px;
  font-size: 0.85rem;
  opacity: 0.85;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

.table tbody tr,
.attendance-table tbody tr,
.classes-table tbody tr,
.schedule-table tbody tr,
.reports-table tbody tr {
  background: #0f1831;
}

.table tbody td,
.attendance-table tbody td,
.classes-table tbody td,
.schedule-table tbody td,
.reports-table tbody td {
  padding: 14px 18px;
  font-size: 0.9rem;
}

.table tbody tr td:first-child {
  border-top-left-radius: 14px;
  border-bottom-left-radius: 14px;
}

.table tbody tr td:last-child {
  border-top-right-radius: 14px;
  border-bottom-right-radius: 14px;
}

.table tbody tr:hover {
  background: #152045;
}

/* ===============================
   ALERTS
================================ */
.error {
  background: rgba(255,90,95,.2);
  color: #ffb0b0;
  padding: 12px;
  border-radius: 12px;
}

.success {
  background: rgba(62,207,142,.2);
  color: #8ff0c3;
  padding: 12px;
  border-radius: 12px;
}

/* ===============================
   MOBILE
================================ */
.backdrop {
  display: none;
}

@media (max-width: 900px) {

  .menu-toggle {
    display: block;
  }

  .sidebar {
    position: fixed;
    left: 0;
    top: 56px;
    height: calc(100vh - 56px);
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 1000;
  }

  body.sidebar-open .sidebar {
    transform: translateX(0);
  }

  .backdrop {
    display: block;
    position: fixed;
    inset: 56px 0 0 0;
    background: rgba(0,0,0,.45);
    z-index: 900;
  }

  .layout {
    display: block;
  }

  .grid.cols-2,
  .grid.cols-3,
  .grid.cols-4 {
    grid-template-columns: 1fr;
  }

  .form-actions {
    flex-direction: column;
  }
}
/* Make grid favor the camera */
.grid.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1.4fr; /* camera wider */
  gap: 24px;
}

/* ===== Camera Preview ===== */
.camera-preview {
  width: 100%;
  height: 480px;              /* ?? increase size */
  background: #000;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.camera-preview video {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* ?? IMPORTANT: fills container */
  border-radius: 14px;
}

/* Optional helper text */
.camera-hint {
  position: absolute;
  bottom: 8px;
  left: 12px;
  right: 12px;
  font-size: 13px;
  color: #e5e7eb;
  background: rgba(0,0,0,0.45);
  padding: 6px 10px;
  border-radius: 8px;
}