/* =====================================================================
   EduTech TVET — portal styles (Bootstrap 5.3 base)
   Direction: "workshop floor" — slate steel, one brand colour (set in
   Settings → Branding), condensed signage type, hazard-stripe accents.
   --brand* variables are injected per request from the theme colour.
   ===================================================================== */
:root {
  --brand: #0f766e; --brand-dark: #0a4d48; --brand-darker: #062f2c; --brand-light: #e7f3f2; --brand-soft: #b7d6d4;
  --steel-900: #111827; --steel-800: #1f2937; --steel-700: #374151; --steel-500: #6b7280;
  --paper: #f4f5f2; --line: #e2e4de; --ink: #161b22;
  --sidebar-w: 256px;
  --font-head: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html, body { overflow-x: hidden; }
body { font-family: var(--font-body); background: var(--paper); color: var(--ink); font-size: 15px; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .brand-font { font-family: var(--font-head); font-weight: 600; letter-spacing: .01em; }

/* ------------------------------------------------------------ brand overrides */
.btn-brand { --bs-btn-color: #fff; --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand-dark); --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-active-bg: var(--brand-darker); --bs-btn-active-color: #fff; --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); }
.btn-outline-brand { --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-color: #fff; }
.text-brand { color: var(--brand) !important; }
.bg-brand { background: var(--brand) !important; color: #fff; }
.bg-brand-light { background: var(--brand-light) !important; }
a { color: var(--brand-dark); }
.form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--brand) 22%, transparent); }
.form-check-input:checked { background-color: var(--brand); border-color: var(--brand); }
.nav-tabs .nav-link.active { border-top: 3px solid var(--brand); font-weight: 600; }
.page-link { color: var(--brand-dark); } .active > .page-link { background: var(--brand); border-color: var(--brand); }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ------------------------------------------------------------ layout */
.app { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; }
.sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w); background: var(--steel-900); color: #cbd5e1;
  display: flex; flex-direction: column; z-index: 1040; transition: transform .2s ease; }
.main { grid-column: 2; min-width: 0; display: flex; flex-direction: column; }
.sidebar .brand { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; border-bottom: 1px solid rgba(255,255,255,.06); text-decoration: none; color: #fff; }
.sidebar .brand-mark { width: 38px; height: 38px; border-radius: 8px; background: var(--brand); display: grid; place-items: center; font-family: var(--font-head);
  font-weight: 700; font-size: 1.05rem; color: #fff; flex: 0 0 auto; overflow: hidden; }
.sidebar .brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.sidebar .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; line-height: 1.05; }
.sidebar .brand-sub { font-size: .72rem; color: #94a3b8; text-transform: uppercase; letter-spacing: .08em; }
.sidebar nav { overflow-y: auto; flex: 1; padding: .5rem 0 1rem; }
.sidebar .nav-section { font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: #64748b; padding: 1rem 1.25rem .35rem; font-weight: 600; }
.sidebar .nav-link { color: #cbd5e1; padding: .5rem 1.25rem; display: flex; align-items: center; gap: .7rem; font-size: .93rem; border-left: 3px solid transparent; }
.sidebar .nav-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; opacity: .85; }
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.04); }
.sidebar .nav-link.active { color: #fff; background: rgba(255,255,255,.07); border-left-color: var(--brand); }
.sidebar .nav-link.active i { color: var(--brand-soft); opacity: 1; }
.sidebar .user-box { border-top: 1px solid rgba(255,255,255,.06); padding: .85rem 1.1rem; display: flex; gap: .6rem; align-items: center; }
.avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center;
  font-weight: 600; font-size: .85rem; overflow: hidden; flex: 0 0 auto; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-lg { width: 84px; height: 84px; font-size: 1.6rem; }

.topbar { position: sticky; top: 0; z-index: 1020; background: #fff; border-bottom: 1px solid var(--line); height: 60px;
  display: flex; align-items: center; gap: .75rem; padding: 0 1.5rem; }
.topbar .page-title { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.content { padding: 1.5rem; flex: 1; }
.menu-toggle { display: none; }
.backdrop { display: none; }

/* hazard stripe — the signature accent */
.stripe { height: 5px; background: repeating-linear-gradient(-45deg, var(--brand) 0 10px, var(--steel-900) 10px 20px); }
.stripe-thin { height: 3px; }

/* ------------------------------------------------------------ cards & tables */
.card { border: 1px solid var(--line); border-radius: 10px; box-shadow: none; }
.card-header { background: #fff; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; padding: .8rem 1rem; }
.stat { padding: 1rem 1.1rem; display: flex; gap: .9rem; align-items: center; height: 100%; }
.stat .icon { width: 46px; height: 46px; border-radius: 10px; display: grid; place-items: center; font-size: 1.3rem; background: var(--brand-light); color: var(--brand-dark); flex: 0 0 auto; }
.stat .value { font-family: var(--font-head); font-size: 1.65rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.stat .label { color: var(--steel-500); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; margin-top: .2rem; }
.table { --bs-table-hover-bg: #f6f8f5; margin-bottom: 0; }
.table > thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--steel-500); font-weight: 600;
  background: #fafbf8; border-bottom: 2px solid var(--brand-soft); white-space: nowrap; }
.table td { vertical-align: middle; font-variant-numeric: tabular-nums; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--steel-500); }
.small-label { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--steel-500); font-weight: 600; }
.empty { text-align: center; padding: 2.5rem 1rem; color: var(--steel-500); }
.empty i { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }
.filters .form-control, .filters .form-select { min-width: 140px; }
.kv dt { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--steel-500); font-weight: 600; }
.kv dd { margin-bottom: .7rem; }
.check-ok { color: #15803d; } .check-no { color: #b91c1c; }
.code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
.credentials { background: #fffbeb; border: 1px dashed #d97706; border-radius: 8px; padding: 1rem; }

/* assessment sheet */
.sheet input.score { width: 82px; text-align: right; }
.sheet input.remark { min-width: 150px; }
.sheet tr.saving td { background: #fffbeb; }
.sheet tr.saved td { background: #f0fdf4; transition: background 1s; }
.sheet tr.locked input { background: #f3f4f6; }

/* attendance pills */
.att-group .btn { min-width: 42px; }
.btn-check:checked + .btn-att-Present { background: #15803d; color: #fff; border-color: #15803d; }
.btn-check:checked + .btn-att-Absent  { background: #b91c1c; color: #fff; border-color: #b91c1c; }
.btn-check:checked + .btn-att-Late    { background: #d97706; color: #fff; border-color: #d97706; }
.btn-check:checked + .btn-att-Excused { background: #0369a1; color: #fff; border-color: #0369a1; }

/* notifications dropdown */
.notif-menu { width: 340px; max-height: 420px; overflow-y: auto; }
.notif-menu .dropdown-item { white-space: normal; font-size: .88rem; border-bottom: 1px solid var(--line); }
.notif-menu .unread { background: var(--brand-light); }

/* modals: only the body scrolls */
.modal-dialog-scrollable .modal-content { max-height: 92vh; }
.modal-content > form { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.modal-content > form > .modal-body { overflow-y: auto; }
.modal-content > form > .modal-header, .modal-content > form > .modal-footer { flex: 0 0 auto; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1024px) {
  .app { grid-template-columns: 1fr; }
  .main { grid-column: 1; }
  .sidebar { transform: translateX(-100%); }
  body.nav-open .sidebar { transform: none; }
  body.nav-open .backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 1035; }
  body.nav-open { overflow: hidden; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 640px) {
  .content { padding: 1rem; }
  .topbar { padding: 0 1rem; }
  .form-control, .form-select { font-size: 16px; }
  .stat .value { font-size: 1.35rem; }
  .notif-menu { width: 92vw; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
@media print {
  .sidebar, .topbar, .no-print, .backdrop { display: none !important; }
  .app { display: block; } .content { padding: 0; } .card { border: none; }
}

/* ------------------------------------------------------------ auth page */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.auth-hero { background: var(--steel-900); color: #e2e8f0; padding: 3rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.auth-hero::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 320px; height: 320px; border-radius: 50%;
  background: repeating-linear-gradient(-45deg, var(--brand) 0 14px, transparent 14px 28px); opacity: .35; }
.auth-hero h1 { font-size: 2.6rem; color: #fff; line-height: 1.05; }
.auth-form { display: grid; place-items: center; padding: 2rem; background: #fff; }
.auth-form form { width: 100%; max-width: 380px; }
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-hero { padding: 2rem; min-height: auto; } .auth-hero h1 { font-size: 1.9rem; } }
/* stat tiles are .card (flex-column in Bootstrap) — keep icon beside the value */
.card.stat { flex-direction: row; }