/* ==========================================================================
   Gurukul UX layer — loaded after the theme on every page.
   1. Accessible colour palette (all text ≥ 4.5:1 contrast, WCAG 2.1 AA)
   2. Readable type
   3. High-visibility navigation & focus
   4. Clear state: busy buttons, loading bar, offline banner, alerts
   5. Inclusive defaults: targets, required fields, reduced motion
   ========================================================================== */

:root {
    --ux-navy:    #041562;   /* brand */
    --ux-accent:  #2d3db4;   /* links, outline buttons, pills  (8.6:1) */
    --ux-success: #047a70;   /* 5.2:1 */
    --ux-info:    #1565a6;   /* 6.1:1 */
    --ux-warning: #975700;   /* 5.7:1 */
    --ux-danger:  #c42a41;   /* 5.6:1 */
    --ux-muted:   #5f6b76;   /* secondary text 5.5:1 */
    --ux-focus:   #1d4ed8;
    --ux-focus-on-dark: #f5b700;
}

/* ── 1. Palette ──────────────────────────────────────────────────────────── */
.text-muted        { color: var(--ux-muted) !important; }
.text-primary      { color: var(--ux-accent) !important; }
.text-success      { color: var(--ux-success) !important; }
.text-info         { color: var(--ux-info) !important; }
.text-warning      { color: var(--ux-warning) !important; }
.text-danger       { color: var(--ux-danger) !important; }

.bg-success { background-color: var(--ux-success) !important; }
.bg-info    { background-color: var(--ux-info) !important; }
.bg-warning { background-color: var(--ux-warning) !important; }
.bg-danger  { background-color: var(--ux-danger) !important; }

.badge-success { background-color: var(--ux-success); color: #fff; }
.badge-info    { background-color: var(--ux-info);    color: #fff; }
.badge-warning { background-color: #ffe08a;           color: #4a3200; }   /* 9:1 */
.badge-danger  { background-color: var(--ux-danger);  color: #fff; }
.badge-primary { background-color: var(--ux-accent);  color: #fff; }
.badge-secondary { background-color: #5f6b76; color: #fff; }
.badge-light   { background-color: #e9ecef; color: #343a40; }

.btn-success { background-color: var(--ux-success); border-color: var(--ux-success); }
.btn-success:hover, .btn-success:focus { background-color: #03665e; border-color: #03665e; }
.btn-info    { background-color: var(--ux-info); border-color: var(--ux-info); }
.btn-info:hover, .btn-info:focus { background-color: #115591; border-color: #115591; }
.btn-danger  { background-color: var(--ux-danger); border-color: var(--ux-danger); }
.btn-danger:hover, .btn-danger:focus { background-color: #a82236; border-color: #a82236; }
.btn-warning { background-color: #ffc53d; border-color: #ffc53d; color: #3d2a00; }
.btn-warning:hover { color: #3d2a00; }

.btn-outline-primary { color: var(--ux-accent); border-color: var(--ux-accent); }
.btn-outline-primary:hover, .btn-outline-primary.active,
.btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--ux-accent); border-color: var(--ux-accent); color: #fff; }
.btn-outline-success { color: var(--ux-success); border-color: var(--ux-success); }
.btn-outline-success:hover { background-color: var(--ux-success); border-color: var(--ux-success); color: #fff; }
.btn-outline-info    { color: var(--ux-info); border-color: var(--ux-info); }
.btn-outline-info:hover { background-color: var(--ux-info); border-color: var(--ux-info); color: #fff; }
.btn-outline-danger  { color: var(--ux-danger); border-color: var(--ux-danger); }
.btn-outline-danger:hover { background-color: var(--ux-danger); border-color: var(--ux-danger); color: #fff; }
.btn-outline-warning { color: var(--ux-warning); border-color: var(--ux-warning); }
.btn-outline-warning:hover { background-color: var(--ux-warning); border-color: var(--ux-warning); color: #fff; }
.btn-outline-secondary { color: #495057; border-color: #6c757d; }

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background: var(--ux-accent); color: #fff; }
.nav-pills .nav-link:not(.active) { color: var(--ux-accent); }
.nav-tabs .nav-link { color: #3a4450; }
.nav-tabs .nav-link.active { color: var(--ux-navy); font-weight: 600; border-bottom: 3px solid var(--ux-navy); }
a { color: var(--ux-accent); }
.page-item.active .page-link { background-color: var(--ux-accent); border-color: var(--ux-accent); }
.page-link { color: var(--ux-accent); }
.breadcrumb-item.active { color: #495057; }

/* Links inside running text are underlined, not colour-only */
p a:not(.btn), .alert a:not(.btn), small a:not(.btn), .text-muted a:not(.btn),
.card-text a:not(.btn), li > a.alert-link { text-decoration: underline; text-underline-offset: 2px; }

.footer a { text-decoration: underline; text-underline-offset: 2px; color: #1f2d8a; }
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #6b7580 !important; }

/* ── 2. Readable type ────────────────────────────────────────────────────── */
small, .small { font-size: 0.875em; }             /* no compounding: muted text keeps its size */
.text-muted   { font-size: inherit; }
.form-control::placeholder { color: #6b7580; opacity: 1; }
label { color: #343a40; }

/* ── 3. Navigation & focus ───────────────────────────────────────────────── */
:focus { outline: none; }
:focus-visible,
.btn:focus-visible, .form-control:focus-visible, .custom-select:focus-visible,
.nav-link:focus-visible, .page-link:focus-visible, .dropdown-item:focus-visible {
    outline: 3px solid var(--ux-focus) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}
.form-control:focus { border-color: var(--ux-focus); box-shadow: 0 0 0 .2rem rgba(29, 78, 216, .2); }
.left.side-menu :focus-visible, .topbar :focus-visible { outline-color: var(--ux-focus-on-dark) !important; }

/* Skip link: first thing keyboard users reach */
.skip-link {
    position: absolute; left: 12px; top: -60px; z-index: 3000;
    background: var(--ux-navy); color: #fff !important; padding: 10px 16px; border-radius: 0 0 6px 6px;
    font-weight: 600; text-decoration: none; transition: top .15s;
}
.skip-link:focus { top: 0; outline: 3px solid var(--ux-focus-on-dark); }
#main-content:focus { outline: none; }

/* Sidebar: readable sub-items, unmistakable current page */
#sidebar-menu .submenu li a { color: #cfd8f2; font-size: 14px; padding-top: 9px; padding-bottom: 9px; }
#sidebar-menu .submenu li a:hover { color: #fff; }
#sidebar-menu .submenu li.mm-active > a,
#sidebar-menu > ul > li > a.mm.active,
#sidebar-menu > ul > li > a.active {
    color: #fff !important; font-weight: 600;
    box-shadow: inset 4px 0 0 var(--ux-focus-on-dark);
    background-color: rgba(255, 255, 255, .10) !important;
}
#sidebar-menu .menu-title { color: #b8c3e6 !important; }
/* Open dropdown heading (Students, Exams): no theme red; the current page inside it carries the highlight */
#sidebar-menu > ul > li > a.mm-active:not(.active),
#sidebar-menu > ul > li.mm-active > a[href^="javascript"] {
    background-color: transparent !important;
    color: #fff !important;
    box-shadow: none;
}
#sidebar-menu > ul > li > a.mm-active:not(.active):hover { background-color: rgba(255, 255, 255, .06) !important; }

/* ── 4. Clear state ──────────────────────────────────────────────────────── */
/* Busy submit button */
.btn.is-busy { position: relative; pointer-events: none; opacity: .85; }
.btn.is-busy .ux-spinner {
    display: inline-block; width: 1em; height: 1em; margin-right: .4em; vertical-align: -.15em;
    border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
    animation: ux-spin .7s linear infinite;
}
@keyframes ux-spin { to { transform: rotate(360deg); } }

/* Page loading bar */
#ux-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 4000;
    background: var(--ux-focus-on-dark); box-shadow: 0 0 6px rgba(245, 183, 0, .7);
    transition: width 8s cubic-bezier(.1, .7, .2, 1), opacity .3s;
    opacity: 0; pointer-events: none;
}
#ux-progress.is-active { width: 85%; opacity: 1; }

/* Offline banner */
#ux-offline {
    position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 4000;
    background: #3d2a00; color: #fff; padding: 10px 18px; border-radius: 6px; font-weight: 500;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); display: none;
}
#ux-offline.is-visible { display: block; }

/* Alerts: stronger left edge so state is obvious at a glance */
.alert { border-left-width: 5px; }
.alert-danger  { border-left-color: var(--ux-danger); }
.alert-success { border-left-color: var(--ux-success); }
.alert-warning { border-left-color: var(--ux-warning); }
.alert-info    { border-left-color: var(--ux-info); }
.alert:focus   { outline: 3px solid var(--ux-focus); outline-offset: 2px; }

/* Disabled controls look disabled */
.btn:disabled, .btn.disabled, .form-control:disabled { cursor: not-allowed; }

/* ── Action buttons: one look for View / Edit / Delete / Print / Pay everywhere ── */
.btn.btn-act {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    min-width: 30px; height: 30px; padding: 0 7px; margin: 1px;
    font-size: 13px; line-height: 1; font-weight: 500; vertical-align: middle;
    border: 1px solid; border-radius: 6px; background: #fff;
    transition: background-color .12s, color .12s;
}
.btn.btn-act i { font-size: 14px; margin: 0 !important; line-height: 1; }
.btn.btn-act.has-label { padding: 0 11px; }
.btn.btn-act.act-view   { color: var(--ux-info);    border-color: var(--ux-info); }
.btn.btn-act.act-edit   { color: var(--ux-accent);  border-color: var(--ux-accent); }
.btn.btn-act.act-delete { color: var(--ux-danger);  border-color: var(--ux-danger); }
.btn.btn-act.act-print  { color: #3a4450;           border-color: #6c757d; }
.btn.btn-act.act-pay    { color: var(--ux-success); border-color: var(--ux-success); }
.btn.btn-act.act-view:hover,   .btn.btn-act.act-view:focus-visible   { background: var(--ux-info);    color: #fff; }
.btn.btn-act.act-edit:hover,   .btn.btn-act.act-edit:focus-visible   { background: var(--ux-accent);  color: #fff; }
.btn.btn-act.act-delete:hover, .btn.btn-act.act-delete:focus-visible { background: var(--ux-danger);  color: #fff; }
.btn.btn-act.act-print:hover,  .btn.btn-act.act-print:focus-visible  { background: #3a4450;           color: #fff; }
.btn.btn-act.act-pay:hover,    .btn.btn-act.act-pay:focus-visible    { background: var(--ux-success); color: #fff; }
.btn.btn-act:disabled { opacity: .45; }
/* Keep a row's actions together on one line */
td form.d-inline, td > form { display: inline-block; margin: 0; }

/* ── 5. Inclusive defaults ───────────────────────────────────────────────── */
/* Icon-only buttons get a comfortable target */
.btn.ux-icon-btn { min-width: 30px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; }

/* Required fields: marked automatically when the label doesn't already say so */
label.ux-required::after { content: " *"; color: var(--ux-danger); font-weight: 600; }

/* Dashboard tiles on the warning colour keep white text readable */
.tile.bg-warning { background-color: var(--ux-warning) !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    #ux-progress { transition: none; }
}

@media print {
    #ux-progress, #ux-offline, .skip-link { display: none !important; }
}