/* ─── ERP Global Styles ──────────────────────────────────────────────── */
:root {
  --sidebar-w: 250px;
  --topbar-h: 56px;
  --radius: 0.6rem;
  --transition: .18s ease;
  --erp-accent: #6366f1;
  --erp-accent-rgb: 99,102,241;
  --erp-accent-soft: rgba(var(--erp-accent-rgb), .08);
  --erp-accent-soft-strong: rgba(var(--erp-accent-rgb), .13);
  --erp-topbar-bg: #1a1d23;
  --erp-topbar-dark-bg: #111316;
  --erp-brand-accent: #fbbf24;
  --erp-sidebar-bg: #ffffff;
  --erp-sidebar-dark-bg: #1e2126;
  --erp-page-bg: var(--bs-body-bg);
  --erp-page-dark-bg: #13151a;
}

/* Body */
body { background: var(--erp-page-bg); font-family: 'Segoe UI', system-ui, sans-serif; }

/* ─── Topbar ──────────────────────────────────────────────────────────── */
.erp-topbar {
  height: var(--topbar-h);
  position: sticky; top: 0; z-index: 1030;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.25rem;
  background: var(--erp-topbar-bg);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.erp-topbar .brand { font-weight: 700; font-size: 1rem; color: #fff; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.erp-topbar .brand span { color: var(--erp-brand-accent); }
.topbar-actions { display: flex; align-items: center; gap: .6rem; }
.topbar-actions .user-pill { color: #ccc; font-size: .82rem; display: flex; align-items: center; gap: .3rem; }

/* ─── Layout wrapper ──────────────────────────────────────────────────── */
.erp-layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }

/* ─── Sidebar ─────────────────────────────────────────────────────────── */
.erp-sidebar {
  width: var(--sidebar-w); flex-shrink: 0;
  background: var(--erp-sidebar-bg);
  border-right: 1px solid var(--bs-border-color);
  overflow-y: auto; padding: .75rem 0;
  position: sticky; top: var(--topbar-h); height: calc(100vh - var(--topbar-h));
}
[data-bs-theme="dark"] .erp-sidebar { background: var(--erp-sidebar-dark-bg); border-right-color: #2e3138; }

.sidebar-section { padding: .5rem 1rem .25rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--bs-secondary-color); margin-top: .5rem; }

.erp-sidebar a.nav-link {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem 1.1rem; color: var(--bs-body-color); font-size: .88rem;
  border-left: 3px solid transparent; transition: var(--transition);
  text-decoration: none;
}
.erp-sidebar a.nav-link:hover { background: var(--erp-accent-soft); color: var(--erp-accent); border-left-color: var(--erp-accent); }
.erp-sidebar a.nav-link.active { background: var(--erp-accent-soft-strong); color: var(--erp-accent); font-weight: 600; border-left-color: var(--erp-accent); }
.erp-sidebar a.nav-link i { font-size: 1rem; width: 1.2rem; text-align: center; }

/* Sidebar toggle on mobile */
#sidebarToggle { display: none; }
@media (max-width: 991.98px) {
  #sidebarToggle { display: inline-flex; }
  .erp-sidebar { position: fixed; left: -260px; top: var(--topbar-h); height: calc(100% - var(--topbar-h)); z-index: 1025; transition: left .25s ease; }
  .erp-sidebar.open { left: 0; box-shadow: 4px 0 20px rgba(0,0,0,.2); }
  .erp-main { margin-left: 0 !important; }
}

/* ─── Main content ────────────────────────────────────────────────────── */
.erp-main { flex: 1; padding: 1.5rem 1.75rem; overflow-x: hidden; }

/* ─── Page header ─────────────────────────────────────────────────────── */
.page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--bs-border-color); }
.page-header h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }

/* ─── Stat cards ──────────────────────────────────────────────────────── */
.stat-card { border: none; border-radius: var(--radius); padding: 1.1rem 1.3rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 2px 8px rgba(0,0,0,.07); transition: transform var(--transition); }
.stat-card:hover { transform: translateY(-2px); }
.stat-card .stat-icon { font-size: 2rem; opacity: .85; }
.stat-card .stat-val { font-size: 1.8rem; font-weight: 800; line-height: 1; }
.stat-card .stat-lbl { font-size: .78rem; opacity: .85; margin-top: .1rem; }

/* ─── Table card ──────────────────────────────────────────────────────── */
.table-card { border: none; border-radius: var(--radius); box-shadow: 0 2px 8px rgba(0,0,0,.07); overflow: hidden; }
.table-card .table { margin: 0; }
.table-card .table thead th { background: #f8f9fa; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; border-bottom: 2px solid var(--bs-border-color); padding: .75rem 1rem; }
[data-bs-theme="dark"] .table-card .table thead th { background: #2a2d35; }
.table-card .table tbody td { padding: .7rem 1rem; vertical-align: middle; font-size: .88rem; }
.table-card .table tbody tr:hover { background: rgba(var(--erp-accent-rgb), .04); }

/* ─── Badges ──────────────────────────────────────────────────────────── */
.badge-status-active  { background:#d1fae5; color:#065f46; }
.badge-status-inactive{ background:#fee2e2; color:#991b1b; }
.badge-status-alumni  { background:#e0e7ff; color:#3730a3; }
[data-bs-theme="dark"] .badge-status-active  { background:#064e3b; color:#6ee7b7; }
[data-bs-theme="dark"] .badge-status-inactive{ background:#7f1d1d; color:#fca5a5; }
[data-bs-theme="dark"] .badge-status-alumni  { background:#312e81; color:#a5b4fc; }

/* ─── Buttons ─────────────────────────────────────────────────────────── */
.btn-icon { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; }

/* ─── Forms ───────────────────────────────────────────────────────────── */
.form-label { font-size: .82rem; font-weight: 600; color: var(--bs-secondary-color); }
.form-control, .form-select { border-radius: 6px; font-size: .88rem; }
.form-control:focus, .form-select:focus { border-color: var(--erp-accent); box-shadow: 0 0 0 .2rem rgba(var(--erp-accent-rgb), .18); }

/* ─── Alert toast ─────────────────────────────────────────────────────── */
.flash-bar { border-radius: 0; border-left: 4px solid; margin: 0; }

/* ─── Pagination ──────────────────────────────────────────────────────── */
.pagination-sm .page-link { font-size: .8rem; }

/* ─── Dark mode specifics ─────────────────────────────────────────────── */
[data-bs-theme="dark"] .erp-topbar { background: var(--erp-topbar-dark-bg); }
[data-bs-theme="dark"] .table-card { box-shadow: 0 2px 8px rgba(0,0,0,.35); }
[data-bs-theme="dark"] body { background: var(--erp-page-dark-bg); }

body.training-theme {
  --erp-accent: #0f766e;
  --erp-accent-rgb: 15,118,110;
  --erp-accent-soft: rgba(var(--erp-accent-rgb), .08);
  --erp-accent-soft-strong: rgba(var(--erp-accent-rgb), .14);
  --erp-topbar-bg: #123230;
  --erp-topbar-dark-bg: #0d2423;
  --erp-brand-accent: #34d399;
  --erp-sidebar-bg: #f7fffc;
  --erp-sidebar-dark-bg: #102523;
  --erp-page-bg: #f2fbf8;
  --erp-page-dark-bg: #0f1717;
  --bs-primary: #0f766e;
  --bs-primary-rgb: 15,118,110;
  --bs-link-color: #0f766e;
  --bs-link-hover-color: #115e59;
  --training-content-max-w: 1600px;
  overflow-x: hidden;
}

body.training-theme .erp-topbar {
  gap: .75rem;
}

body.training-theme .erp-main {
  max-width: var(--training-content-max-w);
  width: 100%;
  margin-inline: auto;
}

body.training-theme #erpSidebar.offcanvas-start {
  width: var(--sidebar-w);
}

body.training-theme .erp-main > .p-4,
body.training-theme .erp-main > .training-page-body {
  padding: .25rem .25rem 1rem !important;
}

body.training-theme .page-header {
  margin-bottom: 1.1rem;
  padding-bottom: .85rem;
}

body.training-theme .table-responsive {
  max-width: 100%;
  border-radius: .75rem;
  scrollbar-width: thin;
}

body.training-theme .table-responsive > .table {
  margin-bottom: 0;
}

body.training-theme .trainer-assignee-select {
  min-width: 280px;
  max-width: min(92vw, 420px);
}

body.training-theme .trainer-check-item,
body.training-theme .allocation-check-item {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem .8rem;
  min-height: 2.6rem;
}

body.training-theme .trainer-check-item .form-check-input,
body.training-theme .allocation-check-item .form-check-input {
  position: static;
  margin: .2rem 0 0;
  float: none;
  flex-shrink: 0;
}

body.training-theme .trainer-check-item .form-check-label,
body.training-theme .allocation-check-item .form-check-label {
  margin: 0;
}

body.training-theme .allocation-action-stack {
  min-width: 190px;
}

.training-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1.3rem;
  border-radius: 1rem;
  border: 1px solid rgba(var(--erp-accent-rgb), .16);
  background:
    radial-gradient(circle at top right, rgba(var(--erp-accent-rgb), .14), transparent 34%),
    linear-gradient(135deg, rgba(var(--erp-accent-rgb), .1), rgba(var(--erp-accent-rgb), .03));
}

.training-hero-copy {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.training-hero-icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: rgba(var(--erp-accent-rgb), .12);
  color: var(--erp-accent);
  font-size: 1.4rem;
  flex-shrink: 0;
}

.training-hero-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--erp-accent);
  margin-bottom: .25rem;
}

.training-hero h1 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 .25rem;
}

.training-hero-actions {
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-wrap: wrap;
}

.training-mini-panel {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: 1rem 1.1rem;
  border-radius: .95rem;
  background: var(--bs-body-bg);
  border: 1px solid rgba(var(--erp-accent-rgb), .12);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
  height: 100%;
}

.training-mini-icon {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: .85rem;
  background: rgba(var(--erp-accent-rgb), .12);
  color: var(--erp-accent);
  font-size: 1.1rem;
  flex-shrink: 0;
}

.training-mini-label {
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}

.training-mini-value {
  font-size: 1.2rem;
  font-weight: 700;
  margin-top: .15rem;
}

[data-bs-theme="dark"] .training-hero,
[data-bs-theme="dark"] .training-mini-panel {
  box-shadow: none;
}

@media (max-width: 768px) {
  .training-hero,
  .training-hero-copy {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 1199.98px) {
  body.training-theme .erp-main {
    padding: 1rem 1rem 1.2rem;
  }
}

@media (max-width: 991.98px) {
  body.training-theme .erp-main {
    padding: .85rem .85rem 1rem;
  }

  body.training-theme .erp-main > .p-4,
  body.training-theme .erp-main > .training-page-body {
    padding: 0 !important;
  }

  body.training-theme .erp-topbar {
    padding: 0 .7rem;
  }

  body.training-theme .erp-topbar .brand {
    max-width: min(44vw, 205px);
    font-size: .93rem;
  }

  body.training-theme .topbar-actions {
    gap: .35rem;
  }

  body.training-theme .topbar-actions .btn {
    padding: .25rem .42rem;
  }

  body.training-theme .card .card-body {
    padding: 1rem !important;
  }

  body.training-theme .table {
    font-size: .85rem;
  }

  body.training-theme .table > :not(caption) > * > * {
    padding: .55rem .6rem;
  }

  body.training-theme .trainer-assignee-select,
  body.training-theme .allocation-action-stack {
    min-width: 0;
    width: 100%;
    max-width: none;
  }

  body.training-theme #erpSidebar.offcanvas-start {
    width: min(86vw, 300px);
  }
}

@media (max-width: 575.98px) {
  body.training-theme .erp-main {
    padding: .7rem .65rem .9rem;
  }

  body.training-theme .page-header {
    margin-bottom: .85rem;
  }

  body.training-theme .page-header p {
    font-size: .82rem;
  }

  body.training-theme .erp-topbar .brand {
    max-width: min(40vw, 170px);
  }

  body.training-theme .trainer-assignee-select {
    min-width: 0 !important;
    width: 100%;
  }

  body.training-theme .trainer-check-item,
  body.training-theme .allocation-check-item {
    padding: .6rem .65rem;
    gap: .5rem;
  }

  body.training-theme .table {
    font-size: .8rem;
  }
}

/* ─── Timetable grid ──────────────────────────────────────────────────── */
.timetable-grid td, .timetable-grid th { min-width: 120px; vertical-align: middle; }
.timetable-slot { font-size: .75rem; line-height: 1.3; }
.timetable-slot select, .timetable-slot input { font-size: .75rem; padding: .15rem .3rem; }

/* ─── Progress ────────────────────────────────────────────────────────── */
.progress-thin { height: 6px; border-radius: 3px; }

/* ─── Attendance mark buttons ─────────────────────────────────────────── */
.att-btn { width: 70px; font-size: .8rem; padding: .25rem .5rem; }
.att-btn.present-active { background: #10b981; color: #fff; border-color: #10b981; }
.att-btn.absent-active  { background: #ef4444; color: #fff; border-color: #ef4444; }

/* ─── Print ───────────────────────────────────────────────────────────── */
@media print {
  .erp-topbar, .erp-sidebar, .no-print { display: none !important; }
  .erp-main { padding: 0; }
}