/* HCES – adaptation of the AppDashboard template for the school admin panel and student exam portal.
   Works together with main.css (template). Uses the template's colour variables so light/dark theme both work. */

/* --- legacy variable names used by older admin pages --- */
:root { --navy: var(--accent-color); --gold: var(--warning-color); --red: var(--danger-color); }

/* --- avatar (initial letter, no photo needed) --- */
.hces-avatar { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; min-width:34px; border-radius:50%;
  background:var(--accent-color); color:var(--contrast-color); font-weight:700; font-size:14px; flex-shrink:0; }
.hces-avatar-lg { width:56px; height:56px; font-size:22px; margin-bottom:8px; }
.dropdown-header .hces-avatar-lg { display:flex; margin:0 auto 8px; }
.hces-auth-logo { display:inline-flex; width:44px; height:44px; align-items:center; justify-content:center; border-radius:12px; overflow:hidden; background:var(--surface-color); color:var(--accent-color); }
.hces-auth-logo img { width:100%; height:100%; object-fit:contain; }
.header-logo-mark img, .sidebar-logo-mark img, .footer-brand-mark img { object-fit:contain; }
.header-logo-mark, .footer-brand-mark { color:var(--accent-color); }

/* --- page header with action buttons --- */
.hces-ph { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:space-between; gap:14px; }
.hces-ph .hces-sub { color:var(--muted-color); margin:-4px 0 8px; font-size:.9rem; }
.hces-ph-actions { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.main-content .page-header h2 { font-size:1.5rem; font-weight:600; color:var(--heading-color); margin:0 0 6px; }
.main-content .page-header > p, .main-content .page-header .page-sub, .page-sub { color:var(--muted-color); font-size:.9rem; margin:0 0 6px; }
.page-title { font-family:var(--heading-font); }

/* --- legacy admin classes (older pages keep working inside the new shell) --- */
.card-admin, .admin-card { background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-xl); box-shadow:var(--card-shadow); color:var(--default-color); }
.card-admin > .card-header, .admin-card-header { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:16px 22px; font-weight:600; color:var(--heading-color); background:transparent; border-bottom:1px solid var(--border-color-light); }
.admin-card-body { padding:22px; }
.card-admin .p-4, .card-admin .p-3 { color:var(--default-color); }
.btn-navy, .btn-admin-primary, .btn-gold, .btn-danger-sm, .btn-admin-secondary { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.875rem; border-radius:var(--radius-md); padding:.5rem 1rem; border:1px solid transparent; text-decoration:none; cursor:pointer; transition:all var(--transition-fast); line-height:1.4; }
.btn-navy, .btn-admin-primary { background:var(--accent-color); color:var(--contrast-color); }
.btn-navy:hover, .btn-admin-primary:hover { filter:brightness(1.1); color:var(--contrast-color); }
.btn-gold { background:var(--warning-color-light); color:var(--warning-color); border-color:color-mix(in srgb, var(--warning-color), transparent 70%); }
.btn-gold:hover { background:var(--warning-color); color:#fff; }
.btn-danger-sm { background:var(--danger-color); color:#fff; padding:.3rem .7rem; font-size:.8125rem; }
.btn-danger-sm:hover { filter:brightness(1.1); color:#fff; }
.btn-admin-secondary { background:transparent; color:var(--accent-color); border-color:var(--accent-color); }
.btn-admin-secondary:hover { background:var(--accent-color); color:var(--contrast-color); }
.badge-active, .badge-inactive { display:inline-block; font-size:.72rem; font-weight:700; padding:.28rem .7rem; border-radius:50px; }
.badge-active { background:var(--success-color-light); color:var(--success-color); }
.badge-inactive { background:var(--danger-color-light); color:var(--danger-color); }
.stat-card-mini { display:flex; align-items:center; gap:14px; background:var(--card-bg); border:1px solid var(--card-border); border-radius:var(--radius-xl); box-shadow:var(--card-shadow); padding:18px; }
.stat-card-mini .icon { width:48px; height:48px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:21px; flex-shrink:0; }
.stat-card-mini .info .value { font-size:1.7rem; font-weight:700; line-height:1; }
.stat-card-mini .info .label { font-size:.8rem; color:var(--muted-color); margin-top:4px; }
.admin-table { width:100%; font-size:.9rem; border-collapse:collapse; color:var(--default-color); }
.admin-table th { background:var(--table-header-bg); color:var(--muted-color); font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; padding:12px 16px; text-align:left; }
.admin-table td { padding:12px 16px; border-bottom:1px solid var(--border-color-light); vertical-align:middle; }
.main-content table th { font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; }
.main-content .table-responsive { border-radius:0 0 var(--radius-xl) var(--radius-xl); }
.fw-600 { font-weight:600; }
.main-content .alert { border-radius:var(--radius-lg); font-size:.9rem; }
.main-content .form-control, .main-content .form-select { color:var(--default-color); }
.main-content code { color:var(--accent-color); }

/* --- exam portal components (variable based => dark mode ready) --- */
.req { color:var(--danger-color); }
.upper { text-transform:uppercase; }
.err-msg { color:var(--danger-color); font-size:.8rem; margin-top:4px; font-weight:600; }
.is-invalid { border-color:var(--danger-color) !important; }
.notice-box { background:var(--warning-color-light); border-left:4px solid var(--warning-color); border-radius:var(--radius-md); padding:12px 16px; font-size:.9rem; color:var(--default-color); }
.notice-box.red { background:var(--danger-color-light); border-left-color:var(--danger-color); }
.notice-box.blue { background:var(--info-color-light); border-left-color:var(--info-color); }
.notice-box.green { background:var(--success-color-light); border-left-color:var(--success-color); }
.notice-box ul { padding-left:18px; }
.stat-line { display:flex; flex-wrap:wrap; gap:14px; }
.stat-line > div { background:var(--table-header-bg); border:1px solid var(--border-color-light); border-radius:var(--radius-lg); padding:10px 16px; min-width:150px; }
.stat-line small { display:block; color:var(--muted-color); text-transform:uppercase; font-size:.68rem; letter-spacing:.5px; font-weight:700; }
.stat-line b { color:var(--heading-color); font-size:.95rem; }

.subj-list { display:flex; flex-direction:column; gap:8px; }
.subj-row { display:flex; align-items:center; gap:12px; background:var(--table-header-bg); border:1.5px solid var(--border-color); border-radius:var(--radius-lg); padding:11px 14px; cursor:pointer; margin:0; font-size:.95rem; color:var(--default-color); transition:all var(--transition-fast); }
.subj-row:hover { border-color:var(--accent-color); }
.subj-row input { width:20px; height:20px; accent-color:var(--accent-color); flex-shrink:0; cursor:pointer; }
.subj-row.on { background:color-mix(in srgb, var(--accent-color), transparent 90%); border-color:var(--accent-color); font-weight:600; color:var(--heading-color); }
.subj-row.dis { opacity:.45; cursor:not-allowed; } .subj-row.dis input { cursor:not-allowed; }
.subj-num { color:var(--light-color); font-weight:700; min-width:26px; }
.subj-counter { margin-top:12px; font-weight:700; color:var(--accent-color); font-size:.9rem; }
.subj-counter.full { color:var(--danger-color); }

.photo-box { display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.photo-box .pb-col { flex:1 1 220px; }
.photo-frame { width:170px; border:2px solid var(--accent-color); border-radius:8px; overflow:hidden; background:#fff; }
.photo-frame img, .photo-frame svg { display:block; width:100%; height:auto; }
.photo-cap { font-size:.75rem; color:var(--muted-color); text-align:center; margin-top:6px; }
.rules { font-size:.85rem; color:var(--default-color); padding-left:18px; margin:0; } .rules li { margin-bottom:5px; }

table.review { width:100%; font-size:.9rem; }
table.review th { width:34%; background:var(--table-header-bg); color:var(--muted-color); font-weight:600; padding:9px 12px; vertical-align:top; border-bottom:1px solid var(--border-color-light); text-transform:none; letter-spacing:0; font-size:.82rem; }
table.review td { padding:9px 12px; border-bottom:1px solid var(--border-color-light); color:var(--default-color); word-break:break-word; }
.tick-list div { padding:3px 0; font-size:.9rem; } .tick-list .t-on { font-weight:700; color:var(--heading-color); }
.check-list { list-style:none; padding:0; margin:0; } .check-list li { padding:8px 0; font-size:.9rem; border-bottom:1px dashed var(--border-color-light); }
.check-list .no { color:var(--danger-color); } .check-list .ok { color:var(--success-color); }

/* class cards on the registration landing page */
.class-card { background:var(--card-bg); border:1.5px solid var(--card-border); border-radius:var(--radius-xl); padding:22px 16px; text-align:center; height:100%; transition:all var(--transition-base); }
.class-card:hover { border-color:var(--accent-color); transform:translateY(-3px); box-shadow:var(--card-shadow); }
.class-card .cc-icon { width:56px; height:56px; border-radius:50%; background:color-mix(in srgb, var(--accent-color), transparent 88%); color:var(--accent-color); display:flex; align-items:center; justify-content:center; font-size:26px; margin:0 auto 12px; }
.class-card h4 { font-weight:700; color:var(--heading-color); font-size:1.15rem; margin-bottom:4px; }
.class-card p { color:var(--muted-color); font-size:.85rem; margin-bottom:14px; }
.class-card.off { opacity:.6; } .class-card.off:hover { transform:none; border-color:var(--card-border); box-shadow:none; }

/* progress steps on the student dashboard */
.hces-steps { display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.hces-steps li { flex:1 1 120px; display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border-color); border-radius:var(--radius-lg); font-size:.82rem; font-weight:600; color:var(--muted-color); background:var(--card-bg); }
.hces-steps li .n { width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:var(--table-header-bg); font-size:.75rem; flex-shrink:0; }
.hces-steps li.done { color:var(--success-color); border-color:color-mix(in srgb, var(--success-color), transparent 65%); } .hces-steps li.done .n { background:var(--success-color); color:#fff; }
.hces-steps li.now { color:var(--accent-color); border-color:var(--accent-color); background:color-mix(in srgb, var(--accent-color), transparent 93%); } .hces-steps li.now .n { background:var(--accent-color); color:#fff; }

/* auth pages */
.auth-main-inner.hces-wide { width:min(100%, 760px); } .auth-main-inner.hces-wide .auth-card { max-width:none; }
.card-title i { margin-right:6px; color:var(--accent-color); }
.auth-card .hces-otp { letter-spacing:8px; font-size:1.4rem; font-weight:700; text-align:center; }
.hces-inline-form { display:inline; }
.auth-card .form-label { font-weight:600; }
.auth-card.hces-card-wide { max-width:none; }

/* modal (registration pop-up) */
.modal-content { background:var(--card-bg); color:var(--default-color); border:1px solid var(--card-border); border-radius:var(--radius-xl); }
.modal-header { border-bottom:1px solid var(--border-color-light); } .modal-footer { border-top:1px solid var(--border-color-light); }

.hces-section-title { text-transform:uppercase; letter-spacing:1.2px; font-size:.72rem; font-weight:700; color:var(--muted-color); margin:6px 0 12px; }
.card-header .card-title { margin:0; }
.main-content .card-header { justify-content:flex-start; gap:8px; }
.main-content .card-header .card-title { flex:1 1 auto; }

.admin-card-header > a, .admin-card-header > button, .admin-card-header > form, .admin-card-header > .badge, .card-admin > .card-header > a:last-child, .card-admin > .card-header > .btn-navy { margin-left:auto; }
.admin-card-header > i { color:var(--accent-color); }