/* =========================================================
   دوامي | Qatar University Attendance System
   Brand: Maroon #8A1538 | Gold #C9A227
   ========================================================= */

:root {
  --qu-maroon: #8a1538;
  --qu-maroon-dark: #611024;
  --qu-maroon-light: #a83254;
  --qu-gold: #c9a227;
  --qu-gold-light: #e0c15e;
  --bg-page: #f4f5f7;
  --bg-card: #ffffff;
  --text-main: #1f2430;
  --text-muted: #6b7280;
  --border-color: #e5e7eb;
  --shadow-card: 0 2px 10px rgba(0,0,0,.06);
  --radius-lg: 16px;
  --radius-md: 10px;
}

html.dark {
  --bg-page: #14151a;
  --bg-card: #1e2027;
  --text-main: #f0f0f2;
  --text-muted: #9aa0ac;
  --border-color: #2c2f38;
  --shadow-card: 0 2px 14px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-main);
  transition: background .25s ease, color .25s ease;
}

html[dir="ltr"] body { font-family: 'Inter', 'Tajawal', system-ui, sans-serif; }

a { text-decoration: none; color: inherit; }

/* ---------- Login Page ---------- */
.login-wrapper {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--qu-maroon) 0%, var(--qu-maroon-dark) 55%, #2a0a16 100%);
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.login-wrapper::before,
.login-wrapper::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.25) 0%, transparent 70%);
}
.login-wrapper::before { width: 500px; height: 500px; top: -150px; inset-inline-end: -150px; }
.login-wrapper::after { width: 400px; height: 400px; bottom: -120px; inset-inline-start: -120px; }

.login-card {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 420px;
  background: rgba(255,255,255,.98);
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 36px 32px 28px;
  border-top: 5px solid var(--qu-gold);
}

.login-logo-emblem {
  width: 74px; height: 74px;
  margin: 0 auto 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--qu-maroon), var(--qu-maroon-dark));
  display: flex; align-items: center; justify-content: center;
  color: var(--qu-gold-light);
  font-size: 30px;
  box-shadow: 0 8px 20px rgba(138,21,56,.35);
}

.login-title { text-align: center; color: var(--qu-maroon); font-weight: 900; font-size: 22px; margin-bottom: 2px; }
.login-subtitle { text-align: center; color: var(--text-muted); font-size: 13.5px; margin-bottom: 26px; }

.input-group { margin-bottom: 16px; }
.input-group label { display:block; font-size: 13px; font-weight: 700; margin-bottom: 6px; color: var(--text-main); }
.input-field {
  width: 100%; padding: 12px 14px; border: 1.5px solid var(--border-color);
  border-radius: var(--radius-md); font-size: 14.5px; background: #fafafa;
  transition: border-color .2s, box-shadow .2s;
}
.input-field:focus { outline: none; border-color: var(--qu-maroon); box-shadow: 0 0 0 3px rgba(138,21,56,.1); background: #fff; }

.btn-primary {
  width: 100%; padding: 13px; border: none; border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--qu-maroon), var(--qu-maroon-dark));
  color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  box-shadow: 0 6px 16px rgba(138,21,56,.3);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(138,21,56,.4); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; }

.login-error {
  background: #fdecea; color: #b3261e; border: 1px solid #f5c6c3;
  border-radius: 10px; padding: 10px 14px; font-size: 13.5px; margin-bottom: 14px;
  display: none; align-items: center; gap: 8px;
}

.lang-toggle-abs {
  position: absolute; top: 18px; inset-inline-end: 18px; z-index: 3;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  color: #fff; padding: 6px 14px; border-radius: 20px; font-size: 13px;
  cursor: pointer; backdrop-filter: blur(6px);
}

.demo-hint {
  margin-top: 18px; padding: 10px 14px; border-radius: 10px;
  background: #fff8e6; border: 1px dashed var(--qu-gold);
  font-size: 12px; color: #7a5c00; line-height: 1.7;
}
html.dark .demo-hint { background: #2a2410; color: #e0c15e; }

/* ---------- App Shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
  width: 260px; background: linear-gradient(180deg, var(--qu-maroon), var(--qu-maroon-dark));
  color: #fff; flex-shrink: 0; display: flex; flex-direction: column;
  position: fixed; top: 0; inset-inline-start: 0; height: 100vh; z-index: 40;
  transition: transform .25s ease;
}
.sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px; border-bottom: 1px solid rgba(255,255,255,.12); }
.sidebar-brand .emblem { width: 42px; height: 42px; border-radius: 10px; background: rgba(201,162,39,.25); display:flex; align-items:center; justify-content:center; color: var(--qu-gold-light); font-size:18px; }
.sidebar-brand .name { font-weight: 800; font-size: 15px; line-height: 1.3; }
.sidebar-brand .name small { display:block; font-size: 11px; font-weight: 400; opacity:.75; }

.sidebar-nav { flex: 1; padding: 14px 12px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.82); cursor: pointer; margin-bottom: 4px;
  transition: background .15s;
}
.nav-item i { width: 20px; text-align: center; font-size: 15px; }
.nav-item:hover { background: rgba(255,255,255,.08); }
.nav-item.active { background: var(--qu-gold); color: #3a2c00; }

.sidebar-footer { padding: 16px; border-top: 1px solid rgba(255,255,255,.12); }
.sidebar-user { display:flex; align-items:center; gap:10px; margin-bottom: 10px; }
.sidebar-user .avatar { width: 38px; height:38px; border-radius:50%; background: var(--qu-gold); color:#3a2c00; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; }
.sidebar-user .info { line-height:1.3; }
.sidebar-user .info .n { font-size:13px; font-weight:700; }
.sidebar-user .info .r { font-size:11px; opacity:.7; }
.logout-btn { width:100%; padding:9px; border-radius:8px; background: rgba(255,255,255,.1); color:#fff; border:none; font-size:13px; cursor:pointer; font-weight:600; }
.logout-btn:hover { background: rgba(255,255,255,.18); }

.main-area { flex: 1; margin-inline-start: 260px; display:flex; flex-direction:column; min-width:0; }

.topbar {
  height: 64px; background: var(--bg-card); border-bottom: 1px solid var(--border-color);
  display:flex; align-items:center; justify-content: space-between; padding: 0 24px;
  position: sticky; top:0; z-index: 30; box-shadow: var(--shadow-card);
}
.topbar .page-title { font-size: 17px; font-weight: 800; }
.topbar .actions { display:flex; align-items:center; gap: 10px; }
.icon-btn { width:38px; height:38px; border-radius:10px; border:1px solid var(--border-color); background: var(--bg-page); display:flex; align-items:center; justify-content:center; cursor:pointer; color: var(--text-main); position:relative; }
.icon-btn:hover { background: var(--qu-maroon); color:#fff; border-color: var(--qu-maroon); }
.badge-dot { position:absolute; top:-4px; inset-inline-end:-4px; width:9px; height:9px; border-radius:50%; background:#e53935; border:2px solid var(--bg-card); }

.content-area { padding: 22px 24px 40px; flex:1; }

.menu-toggle { display:none; }

/* ---------- Cards ---------- */
.card { background: var(--bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border-color); }
.card-pad { padding: 20px; }

.stat-card { padding: 20px; display:flex; align-items:center; gap:14px; }
.stat-card .icon { width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.stat-card .val { font-size: 24px; font-weight: 900; line-height:1.1; }
.stat-card .lbl { font-size: 12.5px; color: var(--text-muted); margin-top:2px; }

/* ---------- Buttons ---------- */
.btn { padding: 10px 18px; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; border: none; display:inline-flex; align-items:center; gap:8px; transition: all .15s; }
.btn-maroon { background: var(--qu-maroon); color: #fff; }
.btn-maroon:hover { background: var(--qu-maroon-dark); }
.btn-gold { background: var(--qu-gold); color: #3a2c00; }
.btn-gold:hover { background: var(--qu-gold-light); }
.btn-outline { background: transparent; border: 1.5px solid var(--border-color); color: var(--text-main); }
.btn-outline:hover { border-color: var(--qu-maroon); color: var(--qu-maroon); }
.btn-danger { background: #fdecea; color: #b3261e; }
.btn-danger:hover { background: #f8d7d4; }
.btn:disabled { opacity:.55; cursor:not-allowed; }
.btn-sm { padding: 6px 12px; font-size: 12.5px; }

/* ---------- Badges ---------- */
.pill { display:inline-flex; align-items:center; gap:6px; padding: 4px 11px; border-radius: 20px; font-size: 11.5px; font-weight: 700; }
.pill-present { background:#e6f4ea; color:#1e7e34; }
.pill-late { background:#fff3e0; color:#b26a00; }
.pill-absent { background:#fdecea; color:#b3261e; }
.pill-leave { background:#e8eaf6; color:#3949ab; }
.pill-pending { background:#fff8e1; color:#8a6d00; }
.pill-approved { background:#e6f4ea; color:#1e7e34; }
.pill-rejected { background:#fdecea; color:#b3261e; }
html.dark .pill-present { background:#123b21; color:#4caf6f; }
html.dark .pill-late { background:#3a2a05; color:#e0a133; }
html.dark .pill-absent { background:#3a1512; color:#f0645d; }
html.dark .pill-leave { background:#1f2246; color:#8c9eff; }
html.dark .pill-pending { background:#3a3005; color:#e0c15e; }
html.dark .pill-approved { background:#123b21; color:#4caf6f; }
html.dark .pill-rejected { background:#3a1512; color:#f0645d; }

/* ---------- Table ---------- */
.qu-table { width:100%; border-collapse: collapse; font-size: 13.5px; }
.qu-table th { text-align: start; padding: 10px 14px; color: var(--text-muted); font-weight:700; font-size:12px; border-bottom: 1.5px solid var(--border-color); white-space:nowrap; }
.qu-table td { padding: 12px 14px; border-bottom: 1px solid var(--border-color); }
.qu-table tbody tr:hover { background: var(--bg-page); }

/* ---------- Calendar ---------- */
.cal-grid { display:grid; grid-template-columns: repeat(7,1fr); gap:6px; }
.cal-head { text-align:center; font-size:11.5px; font-weight:700; color:var(--text-muted); padding-bottom:6px; }
.cal-cell { min-height: 74px; border-radius:10px; border:1px solid var(--border-color); padding:6px 8px; font-size:12px; position:relative; background: var(--bg-card); }
.cal-cell.empty { background: transparent; border: none; }
.cal-cell .d { font-weight:800; font-size:13px; }
.cal-cell .status-dot { position:absolute; bottom:6px; inset-inline-end:6px; width:8px; height:8px; border-radius:50%; }
.cal-cell.today { border: 2px solid var(--qu-gold); }
.cal-cell.weekend { background: repeating-linear-gradient(45deg, var(--bg-page), var(--bg-page) 8px, var(--border-color) 8px, var(--border-color) 9px); opacity:.65; }

/* ---------- Toast ---------- */
#toast-container { position: fixed; bottom: 24px; inset-inline-end: 24px; z-index: 200; display:flex; flex-direction:column; gap:10px; }
.toast { min-width: 240px; max-width: 340px; padding: 13px 16px; border-radius: 12px; background: var(--bg-card); box-shadow: 0 8px 24px rgba(0,0,0,.18); border-inline-start: 4px solid var(--qu-maroon); font-size: 13.5px; display:flex; align-items:flex-start; gap:10px; animation: toastIn .25s ease; }
.toast.success { border-inline-start-color: #1e7e34; }
.toast.error { border-inline-start-color: #b3261e; }
@keyframes toastIn { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } }

/* ---------- Modal ---------- */
.modal-overlay { position: fixed; inset:0; background: rgba(0,0,0,.5); z-index:150; display:flex; align-items:center; justify-content:center; padding:20px; }
.modal-box { background: var(--bg-card); border-radius: var(--radius-lg); width:100%; max-width: 480px; box-shadow: 0 20px 60px rgba(0,0,0,.3); max-height: 90vh; overflow-y:auto; }
.modal-header { padding: 18px 22px; border-bottom: 1px solid var(--border-color); display:flex; align-items:center; justify-content:space-between; }
.modal-header h3 { margin:0; font-size:16px; font-weight:800; }
.modal-body { padding: 20px 22px; }
.modal-footer { padding: 16px 22px; border-top:1px solid var(--border-color); display:flex; gap:10px; justify-content:flex-end; }

/* ---------- Misc ---------- */
.loader { border:3px solid rgba(255,255,255,.3); border-top-color:#fff; border-radius:50%; width:18px; height:18px; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.big-clock { font-size: 44px; font-weight: 900; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.hijri-note { font-size:12px; color:var(--text-muted); }

.checkin-btn {
  width: 100%; padding: 16px; border-radius: 14px; font-size: 16px; font-weight: 800;
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:10px;
  background: linear-gradient(135deg, #1e7e34, #145c25); color:#fff; box-shadow: 0 8px 20px rgba(30,126,52,.3);
}
.checkin-btn.checkout { background: linear-gradient(135deg, var(--qu-maroon), var(--qu-maroon-dark)); box-shadow: 0 8px 20px rgba(138,21,56,.3); }
.checkin-btn:disabled { background:#9aa0ac; box-shadow:none; cursor:not-allowed; }

@media (max-width: 900px) {
  #dash-top-grid, #profile-grid { grid-template-columns: 1fr !important; }
  .sidebar { transform: translateX(100%); }
  html[dir="ltr"] .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-area { margin-inline-start: 0; }
  .menu-toggle { display:flex; }
  .sidebar-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:39; }
  .sidebar-overlay.show { display:block; }
}

.skeleton { background: linear-gradient(90deg, var(--border-color) 25%, var(--bg-page) 37%, var(--border-color) 63%); background-size: 400% 100%; animation: skeleton 1.4s ease infinite; border-radius: 8px; }
@keyframes skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }