/* Hyper Tracker — Hyper Design clean-modern layer on top of Bootstrap 5 RTL. */
:root {
  /* Brand — placeholders, swap per Hyper Design brand guide */
  --hd-primary: #4F46E5;
  --hd-primary-dark: #4338CA;
  --hd-primary-soft: #EEF2FF;
  --hd-secondary: #10B981;
  --hd-dark: #0F172A;
  --hd-body: #475569;
  --hd-muted: #94A3B8;
  --hd-bg: #F6F7FB;
  --hd-surface: #FFFFFF;
  --hd-border: #E2E8F0;

  --hd-radius: 12px;
  --hd-radius-sm: 8px;
  --hd-shadow: 0 4px 20px rgba(15, 23, 42, .06);
  --hd-font: 'Cairo', system-ui, sans-serif;
  --hd-sidebar: 248px;

  --bs-body-font-family: var(--hd-font);
  --bs-body-color: var(--hd-body);
  --bs-body-bg: var(--hd-bg);
  --bs-border-color: var(--hd-border);
  --bs-border-radius: var(--hd-radius-sm);
  --bs-border-radius-lg: var(--hd-radius);
  --bs-primary: var(--hd-primary);
  --bs-primary-rgb: 79, 70, 229;
  --bs-link-color: var(--hd-primary);
  --bs-link-color-rgb: 79, 70, 229;
  --bs-link-hover-color: var(--hd-primary-dark);
}

body { background: var(--hd-bg); font-size: .95rem; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--hd-dark); font-weight: 700; }
.page-title { font-size: 1.5rem; margin: 0; }
.text-muted { color: var(--hd-muted) !important; }
.tabular { font-variant-numeric: tabular-nums; }

/* Layout */
.app-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; width: var(--hd-sidebar);
  background: var(--hd-dark); color: #CBD5E1; padding: 1.25rem .875rem; overflow-y: auto; z-index: 1030;
}
.app-brand { display: flex; align-items: center; gap: .625rem; color: #fff; font-weight: 700; font-size: 1.125rem; padding: .25rem .5rem 1.25rem; text-decoration: none; }
.app-brand .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--hd-primary); display: grid; place-items: center; color: #fff; }
.app-nav .nav-section { font-size: .75rem; color: #64748B; padding: 1rem .75rem .375rem; }
.app-nav .nav-link { color: #CBD5E1; border-radius: var(--hd-radius-sm); padding: .55rem .75rem; display: flex; align-items: center; gap: .625rem; }
.app-nav .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.app-nav .nav-link.active { background: var(--hd-primary); color: #fff; }
.app-nav .nav-link .bi { font-size: 1.05rem; }
.app-main { margin-inline-start: var(--hd-sidebar); min-height: 100vh; }
.app-topbar { background: var(--hd-surface); border-bottom: 1px solid var(--hd-border); padding: .75rem 1.5rem; position: sticky; top: 0; z-index: 1020; }
.app-content { padding: 1.5rem; }
@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(100%); transition: transform .2s; }
  .app-sidebar.show { transform: none; }
  .app-main { margin-inline-start: 0; }
  .app-content { padding: 1rem; }
}

/* Surfaces */
.card { border: 1px solid var(--hd-border); border-radius: var(--hd-radius); box-shadow: var(--hd-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--hd-border); padding: .875rem 1.25rem; font-weight: 700; color: var(--hd-dark); }
.card-body { padding: 1.25rem; }
.stat { display: flex; align-items: center; gap: 1rem; }
.stat .icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--hd-primary-soft); color: var(--hd-primary); font-size: 1.25rem; }
.stat .value { font-size: 1.5rem; font-weight: 700; color: var(--hd-dark); line-height: 1.1; }
.stat .label { font-size: .8rem; color: var(--hd-muted); }

/* Tables */
.table { --bs-table-bg: transparent; margin: 0; }
.table > thead th { font-size: .78rem; font-weight: 600; color: var(--hd-muted); background: #F8FAFC; border-bottom-width: 1px; white-space: nowrap; }
.table > :not(caption) > * > * { padding: .75rem 1rem; vertical-align: middle; }

/* Buttons & forms */
.btn { --bs-btn-border-radius: var(--hd-radius-sm); --bs-btn-font-weight: 600; --bs-btn-padding-x: 1rem; }
.btn-primary {
  --bs-btn-bg: var(--hd-primary); --bs-btn-border-color: var(--hd-primary);
  --bs-btn-hover-bg: var(--hd-primary-dark); --bs-btn-hover-border-color: var(--hd-primary-dark);
  --bs-btn-active-bg: var(--hd-primary-dark); --bs-btn-active-border-color: var(--hd-primary-dark);
  --bs-btn-disabled-bg: var(--hd-primary); --bs-btn-disabled-border-color: var(--hd-primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--hd-primary); --bs-btn-border-color: var(--hd-primary);
  --bs-btn-hover-bg: var(--hd-primary); --bs-btn-hover-border-color: var(--hd-primary);
  --bs-btn-active-bg: var(--hd-primary-dark);
}
.btn-soft { background: var(--hd-primary-soft); color: var(--hd-primary); border: 0; }
.btn-soft:hover { background: var(--hd-primary); color: #fff; }
.form-control, .form-select { border-radius: var(--hd-radius-sm); border-color: var(--hd-border); padding: .55rem .85rem; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--hd-primary); box-shadow: 0 0 0 .2rem rgba(79, 70, 229, .15); }
.form-check-input:checked { background-color: var(--hd-primary); border-color: var(--hd-primary); }
.form-label { font-weight: 600; color: var(--hd-dark); font-size: .875rem; }

/* Badges */
.badge { font-weight: 600; padding: .4em .7em; border-radius: 999px; }
.badge-soft-primary { background: var(--hd-primary-soft); color: var(--hd-primary); }
.badge-soft-success { background: #ECFDF5; color: #047857; }
.badge-soft-warning { background: #FFFBEB; color: #B45309; }
.badge-soft-danger { background: #FEF2F2; color: #B91C1C; }
.badge-soft-secondary { background: #F1F5F9; color: #475569; }
.badge-soft-info { background: #F0F9FF; color: #0369A1; }
.badge-soft-dark { background: #E2E8F0; color: #0F172A; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* Avatars */
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--hd-primary-soft); color: var(--hd-primary); display: inline-grid; place-items: center; font-weight: 700; flex-shrink: 0; }

/* Kanban */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: 1rem; overflow-x: auto; }
.kanban-col { background: #EEF0F6; border-radius: var(--hd-radius); padding: .75rem; min-height: 120px; }
.kanban-col h6 { font-size: .85rem; margin-bottom: .75rem; }
.task-card { background: var(--hd-surface); border-radius: var(--hd-radius-sm); padding: .75rem; box-shadow: 0 1px 3px rgba(15,23,42,.06); margin-bottom: .625rem; }
.task-card .title { font-weight: 600; color: var(--hd-dark); }

/* Progress / activity */
.progress { height: 8px; border-radius: 999px; background: #EEF0F6; }
.slot-strip { display: flex; gap: 2px; flex-wrap: wrap; }
.slot-strip .slot { width: 14px; height: 22px; border-radius: 3px; background: #E2E8F0; }

/* Screenshots */
.shot { display: block; border-radius: var(--hd-radius-sm); overflow: hidden; border: 1px solid var(--hd-border); aspect-ratio: 16 / 10; background: #F1F5F9; }
.shot img { width: 100%; height: 100%; object-fit: cover; }

/* Auth */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at 20% 0%, #E0E7FF 0, transparent 45%), var(--hd-bg); }
.auth-card { width: 100%; max-width: 420px; }

.timer-live { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--hd-dark); }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--hd-muted); }
.empty .bi { font-size: 2rem; display: block; margin-bottom: .5rem; }