/* ══════════════════════════════════════════════════════════════════
   app-layout.css — global layout styles (uses theme-vars.css tokens)
   ══════════════════════════════════════════════════════════════════ */

/* ── Layout structure ───────────────────────────────────────────── */
.dashboard__right { display: flex; flex-direction: column; min-height: 100vh; }
.dashboard-body   { flex: 1; padding-bottom: 80px; }

/* ── Footer ─────────────────────────────────────────────────────── */
.dashboard-footer {
    background: var(--t-footer);
    border-top: 1px solid var(--t-header-bdr);
    padding: 6px 0;
    margin-top: auto;
    position: sticky;
    bottom: 0; width: 100%; z-index: 100;
}
.dashboard-footer__content { text-align: center; color: var(--t-footer-txt); font-size: 13px; }

/* Guest (login) page: full-width content */
.dashboard__inner:not(:has(.sidebar-menu)) .dashboard__right { width: 100%; padding-left: 0; }

/* ── Role / status badges ───────────────────────────────────────── */
.role-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600;
}
html:not([data-theme="light"]) .role-badge.examiner { background: transparent; color: #60a5fa; border: 1px solid #60a5fa; }
html[data-theme="light"]       .role-badge.examiner { background: transparent; color: #2563eb; border: 1px solid #2563eb; }
html:not([data-theme="light"]) .role-badge.scrutinizer { background: transparent; color: #34d399; border: 1px solid #34d399; }
html[data-theme="light"]       .role-badge.scrutinizer { background: transparent; color: #16a34a; border: 1px solid #16a34a; }

.status-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.status-badge.active   { background: var(--t-b-green-bg);  color: var(--t-b-green-txt);  border: 1px solid var(--t-b-green-bdr); }
.status-badge.inactive { background: var(--t-b-grey-bg);   color: var(--t-b-grey-txt);   border: 1px solid var(--t-b-grey-bdr); }
.status-badge.upcoming { background: var(--t-b-amber-bg);  color: var(--t-b-amber-txt);  border: 1px solid var(--t-b-amber-bdr); }
.status-badge.danger   { background: var(--t-b-red-bg);    color: var(--t-b-red-txt);    border: 1px solid var(--t-b-red-bdr); }

/* ── Table-card component ───────────────────────────────────────── */
.table-card {
    background: var(--t-card);
    border: 1px solid var(--t-card-bdr);
    border-radius: 12px;
    box-shadow: var(--t-card-shadow);
    overflow: hidden;
    backdrop-filter: var(--t-blur);
    -webkit-backdrop-filter: var(--t-blur);
}
.table-card__inner { padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--t-card-bdr); }
.table-card__title {
    font-size: 1.05rem; font-weight: 600; margin: 0;
    display: flex; align-items: center; gap: 0.5rem; color: var(--t-txt-h);
}
.table-card__title .icon {
    width: 2rem; height: 2rem;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--t-accent-bg); border-radius: 6px; color: var(--t-accent);
}

/* ── Stat cards ─────────────────────────────────────────────────── */
.stat-card {
    border: 1px solid var(--t-card-bdr) !important;
    border-radius: 12px;
    background: var(--t-card) !important;
    box-shadow: var(--t-card-shadow);
}
.stat-card .card-body    { color: var(--t-txt); }
.stat-card .card-body h3 { font-size: 2rem; font-weight: 700; color: var(--t-txt-h); }

/* .theme-switch is defined in theme-vars.css (shared) */

/* ══════════════════════════════════════════════════════════════════
   SIDEBAR — dark by default, light variant for light theme
   html:not([data-theme="light"]) = dark mode OR no theme set
   ══════════════════════════════════════════════════════════════════ */

/* ── Dark sidebar ───────────────────────────────────────────────── */
html:not([data-theme="light"]) .dashboard .sidebar-menu {
    background: linear-gradient(170deg, #252535 0%, #1c1c28 40%, #131320 100%) !important;
    border-right: 1px solid rgba(59,130,246,0.15) !important;
    box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-menu-list {
    border-top: 1px solid rgba(255,255,255,0.07) !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-menu-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.10) !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__link {
    color: #94a3b8 !important; border-radius: 8px !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__link .icon { color: #64748b !important; }
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__link:hover {
    background-color: rgba(255,255,255,0.06) !important; color: #e2e8f0 !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__link:hover .icon { color: #60a5fa !important; }
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__item.active > a,
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__item.has-dropdown.active > a {
    background: rgba(59,130,246,0.15) !important; color: #f1f5f9 !important;
    border-left: 3px solid #3b82f6; padding-left: 15px !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__item.active > a .icon { color: #60a5fa !important; }
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__item.has-dropdown > a:after { color: #475569 !important; }
html:not([data-theme="light"]) .dashboard .sidebar-menu-list__item.has-dropdown.active > a:after { color: #60a5fa !important; }
html:not([data-theme="light"]) .dashboard .sidebar-submenu-list__link { color: #64748b !important; }
html:not([data-theme="light"]) .dashboard .sidebar-submenu-list__link::before { border-color: rgba(255,255,255,0.15) !important; }
html:not([data-theme="light"]) .dashboard .sidebar-submenu-list__link:hover {
    background-color: rgba(255,255,255,0.05) !important; color: #e2e8f0 !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-submenu-list__item.active > a {
    background-color: rgba(59,130,246,0.12) !important; color: #93c5fd !important;
}
html:not([data-theme="light"]) .dashboard .sidebar-submenu-list__item.active > a::before { border-color: #3b82f6 !important; }
html:not([data-theme="light"]) .user-profile {
    background: #1c1c28 !important; border-top: 1px solid rgba(255,255,255,0.08) !important;
}
html:not([data-theme="light"]) .user-profile-info__name { color: #f1f5f9 !important; }
html:not([data-theme="light"]) .user-profile-info__desc { color: #64748b !important; }
html:not([data-theme="light"]) .user-profile-info__icon { background: rgba(59,130,246,0.18) !important; color: #60a5fa !important; }
html:not([data-theme="light"]) .user-profile-dots { color: #475569 !important; background: transparent !important; }
html:not([data-theme="light"]) .user-profile-dots:hover { color: #f1f5f9 !important; }
html:not([data-theme="light"]) .user-profile .dropdown-menu {
    background: #1e1e2a !important; border: 1px solid rgba(255,255,255,0.1) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
}
html:not([data-theme="light"]) .user-profile .dropdown-item { color: #94a3b8 !important; }
html:not([data-theme="light"]) .user-profile .dropdown-item:hover {
    background: rgba(255,255,255,0.07) !important; color: #f1f5f9 !important;
}
html:not([data-theme="light"]) .user-profile .dropdown-item .icon { color: #60a5fa !important; }
html:not([data-theme="light"]) .dashboard .sidebar-logo {
    border-bottom: 1px solid rgba(255,255,255,0.07); padding-bottom: 16px;
}

/* ── Light sidebar ──────────────────────────────────────────────── */
html[data-theme="light"] .dashboard .sidebar-menu {
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    box-shadow: 2px 0 12px rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] .dashboard .sidebar-menu-list { border-top: 1px solid #f0f2f5 !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list::-webkit-scrollbar-thumb { background: #d1d5db !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__link { color: #64748b !important; border-radius: 8px !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__link .icon { color: #94a3b8 !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__link:hover { background-color: #f0f4ff !important; color: #1e293b !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__link:hover .icon { color: #2563eb !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__item.active > a,
html[data-theme="light"] .dashboard .sidebar-menu-list__item.has-dropdown.active > a {
    background: #eff6ff !important; color: #2563eb !important;
    border-left: 3px solid #2563eb; padding-left: 15px !important;
}
html[data-theme="light"] .dashboard .sidebar-menu-list__item.active > a .icon { color: #2563eb !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__item.has-dropdown > a:after { color: #94a3b8 !important; }
html[data-theme="light"] .dashboard .sidebar-menu-list__item.has-dropdown.active > a:after { color: #2563eb !important; }
html[data-theme="light"] .dashboard .sidebar-submenu-list__link { color: #94a3b8 !important; }
html[data-theme="light"] .dashboard .sidebar-submenu-list__link::before { border-color: #e2e8f0 !important; }
html[data-theme="light"] .dashboard .sidebar-submenu-list__link:hover { background-color: #f0f4ff !important; color: #1e293b !important; }
html[data-theme="light"] .dashboard .sidebar-submenu-list__item.active > a { background-color: #eff6ff !important; color: #2563eb !important; }
html[data-theme="light"] .dashboard .sidebar-submenu-list__item.active > a::before { border-color: #2563eb !important; }
html[data-theme="light"] .user-profile { background: #f8fafc !important; border-top: 1px solid #e2e8f0 !important; }
html[data-theme="light"] .user-profile-info__name { color: #1e293b !important; }
html[data-theme="light"] .user-profile-info__desc { color: #64748b !important; }
html[data-theme="light"] .user-profile-info__icon { background: #eff6ff !important; color: #2563eb !important; }
html[data-theme="light"] .user-profile-dots { color: #94a3b8 !important; background: transparent !important; }
html[data-theme="light"] .user-profile-dots:hover { color: #1e293b !important; }
html[data-theme="light"] .user-profile .dropdown-menu {
    background: #ffffff !important; border: 1px solid #e2e8f0 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] .user-profile .dropdown-item { color: #374151 !important; }
html[data-theme="light"] .user-profile .dropdown-item:hover { background: #f0f4ff !important; color: #1e293b !important; }
html[data-theme="light"] .user-profile .dropdown-item .icon { color: #2563eb !important; }
html[data-theme="light"] .dashboard .sidebar-logo { border-bottom: 1px solid #f0f2f5; padding-bottom: 16px; }

/* ══════════════════════════════════════════════════════════════════
   THEMED CONTENT AREA
   ══════════════════════════════════════════════════════════════════ */

/* ── Page & header ──────────────────────────────────────────────── */
body, .dashboard, .dashboard__inner, .dashboard__right, .dashboard-body {
    background: var(--t-bg); color: var(--t-txt);
}
.dashboard-header {
    background: var(--t-header) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-bottom: 1px solid var(--t-header-bdr) !important;
    box-shadow: var(--t-shadow-sm) !important;
    padding: 12px 24px !important;
    position: sticky !important; top: 0 !important; z-index: 100 !important;
}
.dashboard-header__greetings { color: var(--t-txt-h) !important; font-size: 1rem !important; font-weight: 600; }
.dashboard-header .text-muted { color: var(--t-txt-muted) !important; }
.dashboard-header .badge { background: var(--t-accent-bg) !important; color: var(--t-accent) !important; }

/* ── Global text ────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 { color: var(--t-txt-h) !important; }
p       { color: var(--t-txt-label); }
small   { color: var(--t-txt-muted) !important; }
strong, b { color: inherit; }
li      { color: var(--t-txt); }
.dashboard-body a:not(.btn):not([class*="sidebar"]) { color: var(--t-link); }
.dashboard-body a:not(.btn):not([class*="sidebar"]):hover { color: var(--t-link-hover); }
.table a       { color: var(--t-link) !important; }
.table a:hover { color: var(--t-link-hover) !important; }
.text-muted  { color: var(--t-txt-muted)  !important; }
.text-dark   { color: var(--t-txt)        !important; }
/* Badges that opt into .text-dark sit on light-coloured backgrounds (bg-warning/bg-light),
   so keep their text genuinely dark instead of the light body-text override above. */
.badge.text-dark { color: #212529 !important; }
.text-danger { color: var(--t-b-red-txt)  !important; }
.text-success{ color: var(--t-b-green-txt)!important; }
.text-warning{ color: var(--t-b-amber-txt)!important; }
.text-info   { color: var(--t-link)       !important; }
.text-primary{ color: var(--t-accent)     !important; }

/* ── Tables ─────────────────────────────────────────────────────── */
.table { color: var(--t-txt); --bs-table-border-color: var(--t-row-bdr); }
.table tbody { background-color: transparent !important; }
.table thead tr th {
    background: var(--t-thead) !important;
    color: var(--t-thead-txt) !important;
    border-color: var(--t-row-bdr) !important;
    font-size: .77rem !important; font-weight: 600 !important;
    text-transform: uppercase; letter-spacing: .05em;
    padding: .75rem 1rem !important;
}
.table tbody tr td {
    color: var(--t-txt) !important;
    border-color: var(--t-row-bdr) !important;
    vertical-align: middle !important;
    background-color: transparent;
}
.table tbody tr:nth-child(even) td { background-color: var(--t-row-alt) !important; }
.table tbody tr:hover td { background: var(--t-row-hover) !important; color: var(--t-txt-h) !important; }

/* ── Modals ─────────────────────────────────────────────────────── */
.modal-content {
    background: var(--t-modal) !important;
    border: 1px solid var(--t-card-bdr) !important;
    color: var(--t-txt);
    box-shadow: var(--t-shadow-lg) !important;
    border-radius: 14px !important;
}
.modal-header {
    background: var(--t-modal-hdr) !important;
    border-bottom: 1px solid var(--t-card-bdr) !important;
    border-radius: 14px 14px 0 0 !important;
}
.modal-title, .modal-header h5 { color: var(--t-txt-h) !important; }
.modal-body  { color: var(--t-txt); }
.modal-footer {
    border-top: 1px solid var(--t-card-bdr) !important;
    background: var(--t-modal-ftr) !important;
    border-radius: 0 0 14px 14px !important;
}
.btn-close,
.alert-dismissible .btn-close { filter: var(--t-btn-close-filter) !important; }

/* ── Form controls ──────────────────────────────────────────────── */
.form-control, .form--control, .form-select {
    background-color: var(--t-input) !important;
    border-color: var(--t-input-bdr) !important;
    color: var(--t-txt-h) !important;
    border-radius: 8px !important;
}
.form-control:focus, .form--control:focus, .form-select:focus {
    border-color: var(--t-accent) !important;
    box-shadow: 0 0 0 3px var(--t-accent-bg) !important;
}
.form-control::placeholder, .form--control::placeholder { color: var(--t-txt-muted) !important; }
.form-control option, .form-select option { background: var(--t-modal); color: var(--t-txt); }
.form-control[type="file"]::file-selector-button {
    background: var(--t-accent-bg); color: var(--t-accent);
    border: none; border-radius: 6px; padding: 4px 12px; margin-right: 8px;
}
label, .form-label { color: var(--t-txt-label) !important; font-size: .85rem; font-weight: 500; }

/* ── Form check ─────────────────────────────────────────────────── */
.form-check-input {
    background-color: var(--t-check-bg) !important;
    border-color: var(--t-check-bdr) !important;
}
.form-check-input:checked {
    background-color: var(--t-accent) !important;
    border-color: var(--t-accent) !important;
}
.form-check-label { color: var(--t-txt-label) !important; }

/* ── Alerts ─────────────────────────────────────────────────────── */
.alert-success { background: var(--t-a-success-bg) !important; border-color: var(--t-a-success-bdr) !important; color: var(--t-a-success-txt) !important; }
.alert-danger  { background: var(--t-a-danger-bg)  !important; border-color: var(--t-a-danger-bdr)  !important; color: var(--t-a-danger-txt)  !important; }
.alert-warning { background: var(--t-a-warning-bg) !important; border-color: var(--t-a-warning-bdr) !important; color: var(--t-a-warning-txt) !important; }
.alert-info    { background: var(--t-a-info-bg)    !important; border-color: var(--t-a-info-bdr)    !important; color: var(--t-a-info-txt)    !important; }

/* ── Pagination ─────────────────────────────────────────────────── */
.pagination .page-link          { background: var(--t-pg-bg)   !important; border-color: var(--t-pg-bdr)   !important; color: var(--t-pg-txt)   !important; }
.pagination .page-link:hover    { background: var(--t-pg-h-bg) !important; border-color: var(--t-pg-h-bdr) !important; color: var(--t-pg-h-txt) !important; }
.pagination .page-item.active   .page-link { background: var(--t-pg-act) !important; border-color: var(--t-pg-act) !important; color: #fff !important; }
.pagination .page-item.disabled .page-link { background: var(--t-pg-dis-bg) !important; color: var(--t-pg-dis-txt) !important; }

/* ── Bootstrap cards ────────────────────────────────────────────── */
.card        { background: var(--t-card)      !important; border-color: var(--t-card-bdr) !important; }
.card-body   { color: var(--t-txt); }
.card-header { background: var(--t-modal-hdr) !important; border-color: var(--t-card-bdr) !important; color: var(--t-txt-h) !important; }
.card-footer { background: var(--t-modal-ftr) !important; border-color: var(--t-card-bdr) !important; }

/* ── Input group / buttons / dropdowns ──────────────────────────── */
.input-group-text { background: var(--t-card) !important; border-color: var(--t-input-bdr) !important; color: var(--t-txt-label) !important; }
.btn-secondary {
    background: var(--t-secondary-btn)       !important;
    border-color: var(--t-secondary-btn-bdr) !important;
    color: var(--t-secondary-btn-txt)        !important;
}
.btn-secondary:hover { background: var(--t-dropdown-hover-bg) !important; color: var(--t-txt-h) !important; }
.dropdown-menu {
    background: var(--t-dropdown)      !important;
    border-color: var(--t-dropdown-bdr) !important;
    box-shadow: var(--t-shadow-sm)     !important;
}
.dropdown-item       { color: var(--t-dropdown-item) !important; }
.dropdown-item:hover { background: var(--t-dropdown-hover-bg) !important; color: var(--t-dropdown-hover-txt) !important; }
.dropdown-divider    { border-color: var(--t-card-bdr) !important; }

/* ── Report cards ───────────────────────────────────────────────── */
.report-card {
    background: var(--t-card) !important;
    border: 1px solid var(--t-card-bdr);
    border-top-width: 3px;
    box-shadow: var(--t-card-shadow);
}
.report-card__header { border-bottom-color: var(--t-card-bdr) !important; }
.report-card__title  { color: var(--t-txt-h) !important; }
.report-link { color: var(--t-txt-label) !important; border-bottom-color: var(--t-card-bdr) !important; }
.report-link:hover { background: var(--t-accent-bg) !important; color: var(--t-accent) !important; }
.report-link > i:first-child       { color: var(--t-txt-muted) !important; }
.report-link:hover > i:first-child { color: var(--t-accent)    !important; }