/* ==========================================================================
   Campus ERP — Design System
   --------------------------------------------------------------------------
   Purpose : Visual restyle layer only. Loaded LAST (after bootstrap.min.css
             and custom.min.css) so it wins the cascade without editing any
             vendor file. Targets existing Bootstrap 4 / Gentelella classes
             already emitted by the app's markup and server controls
             (GridView -> table, sidebar -> left_col/menu_section, etc.).
   Rules   : No new IDs required by code-behind. No JS behavior added.
             Safe to link on any page; unused selectors are inert.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Brand / semantic colors */
    --erp-primary: #2451c4;
    --erp-primary-dark: #1a3a94;
    --erp-primary-light: #eaf0fe;
    --erp-secondary: #64748b;
    --erp-success: #16a34a;
    --erp-warning: #d97706;
    --erp-danger: #dc2626;
    --erp-info: #0891b2;

    /* Neutrals */
    --erp-bg: #f4f6fb;
    --erp-surface: #ffffff;
    --erp-border: #e2e8f0;
    --erp-text: #1e293b;
    --erp-text-muted: #64748b;
    --erp-text-inverse: #f8fafc;

    /* Sidebar */
    --erp-sidebar-bg: #101a34;
    --erp-sidebar-bg-active: #1c2b52;
    --erp-sidebar-text: #c9d3ea;
    --erp-sidebar-text-active: #ffffff;
    --erp-sidebar-accent: #3d7bff;

    /* Spacing scale */
    --erp-space-1: 4px;
    --erp-space-2: 8px;
    --erp-space-3: 12px;
    --erp-space-4: 16px;
    --erp-space-5: 24px;
    --erp-space-6: 32px;

    /* Radii & shadow */
    --erp-radius-sm: 6px;
    --erp-radius-md: 10px;
    --erp-radius-lg: 14px;
    --erp-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --erp-shadow-md: 0 4px 14px rgba(15, 23, 42, 0.08);
    --erp-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.12);

    /* Typography */
    --erp-font: 'Segoe UI', Calibri, Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   2. Base / typography
   -------------------------------------------------------------------------- */
body {
    font-family: var(--erp-font);
    color: var(--erp-text);
    background-color: var(--erp-bg) !important;
    background-image: none !important; /* replace legacy photo backgrounds */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--erp-font);
    color: var(--erp-text);
    font-weight: 600;
}

/* Page-local banner headings (e.g. .xxx-header-text h2) rely on inheriting white
   from their gradient banner parent, but the rule above breaks that inheritance
   by setting color directly on every heading. Restore white for this naming pattern. */
[class*="-header-text"] h1,
[class*="-header-text"] h2,
[class*="-header-text"] h3,
[class*="-header-text"] h4,
[class*="-header-text"] h5,
[class*="-header-text"] h6,
h1[class*="header-title"],
h2[class*="header-title"],
h3[class*="header-title"],
h4[class*="header-title"],
h5[class*="header-title"],
h6[class*="header-title"] {
    color: #ffffff !important;
}

a {
    color: var(--erp-primary);
}
a:hover {
    color: var(--erp-primary-dark);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn {
    border-radius: var(--erp-radius-sm) !important;
    font-weight: 500;
    padding: 8px 16px;
    letter-spacing: 0.01em;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:active {
    transform: translateY(1px);
}
.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px rgba(36, 81, 196, 0.25);
}

.btn-primary,
.btn-success,
.btn-info,
.btn-warning,
.btn-danger,
.btn-secondary {
    border: none;
}

.btn-primary {
    background-color: var(--erp-primary) !important;
    border-color: var(--erp-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--erp-primary-dark) !important;
    border-color: var(--erp-primary-dark) !important;
}

.btn-success { background-color: var(--erp-success) !important; }
.btn-warning {
    background: #2451c4 !important;
    border-color: #2451c4 !important;
    color: #ffffff !important;
}
.btn-warning:hover,
.btn-warning:focus {
    background: #1a3a94 !important;
    border-color: #1a3a94 !important;
    color: #ffffff !important;
}

/* Print/Refresh buttons share the .btn-warning class in markup; distinguish by rendered value/text */
.btn-warning[value="Print"],
.btn-warning[value*="Print"],
.btn-warning[value="Refresh"],
.btn-warning[value*="Refresh"] {
    background: #16a34a !important;
    border-color: #16a34a !important;
    color: #ffffff !important;
}
.btn-warning[value="Print"]:hover,
.btn-warning[value*="Print"]:hover,
.btn-warning[value="Print"]:focus,
.btn-warning[value*="Print"]:focus,
.btn-warning[value="Refresh"]:hover,
.btn-warning[value*="Refresh"]:hover,
.btn-warning[value="Refresh"]:focus,
.btn-warning[value*="Refresh"]:focus {
    background: #128a3e !important;
    border-color: #128a3e !important;
    color: #ffffff !important;
}

.btn-danger  { background-color: var(--erp-danger) !important; }
.btn-info    { background-color: var(--erp-info) !important; }
.btn-secondary { background-color: var(--erp-secondary) !important; }

.btn-outline-primary {
    color: var(--erp-primary);
    border-color: var(--erp-primary);
}
.btn-outline-primary:hover {
    background-color: var(--erp-primary);
    border-color: var(--erp-primary);
}

.btn-outline-warning {
    color: #2451c4 !important;
    border-color: #2451c4 !important;
}
.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background: #2451c4 !important;
    border-color: #2451c4 !important;
    color: #ffffff !important;
}

.btn-light {
    background-color: var(--erp-surface) !important;
    border: 1px solid var(--erp-border) !important;
    color: var(--erp-text) !important;
}
.btn-light:hover {
    background-color: #f1f5f9 !important;
}

.btn-sm { border-radius: var(--erp-radius-sm); }
.btn-lg { border-radius: var(--erp-radius-md); }

/* --------------------------------------------------------------------------
   4. Forms
   -------------------------------------------------------------------------- */
.form-control,
select.form-control,
textarea.form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="date"] {
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-sm) !important;
    padding: 8px 12px;
    background-color: var(--erp-surface) !important;
    color: var(--erp-text) !important;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Native <select> vertically centers its text using its own internal
   layout, independent of the OS widget. Setting custom vertical padding
   on it (as the shorthand above does for text inputs) conflicts with
   that centering and pushes the glyph baseline into the clipped region,
   shaving the tops off capital letters (e.g. "B" reading as "R").
   Selects only need horizontal padding customized. */
select.form-control {
    padding-top: 0;
    padding-bottom: 0;
}

.form-control:focus {
    border-color: var(--erp-primary) !important;
    box-shadow: 0 0 0 3px rgba(36, 81, 196, 0.15);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #f1f5f9 !important;
    opacity: 1;
}

label {
    font-weight: 500;
    color: var(--erp-text);
    margin-bottom: var(--erp-space-1);
}

.input-group-text {
    background-color: #f1f5f9;
    border: 1px solid var(--erp-border);
    color: var(--erp-text-muted);
}

.form-control.is-invalid,
.has-error .form-control {
    border-color: var(--erp-danger);
}

/* Native file inputs — the OS-drawn "Choose File" button can't be fully
   restyled without JS, but we can normalize its container so it stops
   looking like a foreign, unstyled control next to Bootstrap buttons. */
input[type="file"] {
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-sm) !important;
    padding: 2px;
    background-color: var(--erp-surface);
    font-size: 0.82rem;
    max-width: 100%;
}

input[type="file"]::file-selector-button {
    border: none;
    border-radius: var(--erp-radius-sm);
    padding: 4px 8px;
    margin-right: var(--erp-space-1);
    background-color: var(--erp-primary);
    color: #ffffff;
    font-weight: 500;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color .15s ease;
}

input[type="file"]::file-selector-button:hover {
    background-color: var(--erp-primary-dark);
}

/* --------------------------------------------------------------------------
   5. Cards / panels
   -------------------------------------------------------------------------- */
.card,
.x_panel {
    background-color: var(--erp-surface) !important;
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-lg) !important;
    box-shadow: var(--erp-shadow-sm) !important;
    margin-bottom: var(--erp-space-5);
}

.card:hover {
    box-shadow: var(--erp-shadow-md) !important;
}

/* Many older pages drop their filter/content fields directly into a plain
   ".container.bg-white" div with no card wrapper, so they render flat and
   unpolished next to pages that use .card. Give that common raw pattern
   the same card treatment automatically, without editing each page. */
.container.bg-white {
    border: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-lg) !important;
    box-shadow: var(--erp-shadow-sm) !important;
    padding: var(--erp-space-5) !important;
    margin-top: var(--erp-space-5);
    margin-bottom: var(--erp-space-5);
}

.card-header,
.x_title {
    background-color: var(--erp-surface) !important;
    border-bottom: 1px solid var(--erp-border) !important;
    border-radius: var(--erp-radius-lg) var(--erp-radius-lg) 0 0 !important;
    font-weight: 600;
    padding: var(--erp-space-4) var(--erp-space-5);
}

.card-body,
.x_content {
    padding: var(--erp-space-5);
}

.card-title {
    font-weight: 600 !important;
    color: var(--erp-text) !important;
}

/* --------------------------------------------------------------------------
   6. Tables / GridView output
   -------------------------------------------------------------------------- */
.table,
.gridview-style {
    background-color: var(--erp-surface) !important;
    border-radius: var(--erp-radius-md);
    overflow: hidden;
}

.table thead th,
.table th {
    background-color: var(--erp-primary-light) !important;
    color: var(--erp-primary-dark) !important;
    font-weight: 600;
    border-bottom: 1px solid var(--erp-border) !important;
    white-space: nowrap;
}

.table td,
.table th {
    padding: 10px 14px;
    vertical-align: middle;
    border-color: var(--erp-border) !important;
}

/* Many GridViews set HeaderStyle-BackColor="#4a6985" inline (server-side
   property), which renders as an inline style attribute — target it
   directly so those headers pick up the same navy-to-blue gradient as
   the page banners, without touching any markup. */
th[style*="4a6985" i],
td[style*="4a6985" i],
tr[style*="4a6985" i] th,
tr[style*="4a6985" i] td {
    background: linear-gradient(135deg, #101a34, #2451c4) !important;
    color: #ffffff !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: #fafbfd !important;
}

.table-hover tbody tr:hover {
    background-color: var(--erp-primary-light) !important;
}

.table-bordered,
.table-bordered th,
.table-bordered td {
    border-color: var(--erp-border) !important;
}

/* --------------------------------------------------------------------------
   7. Badges / alerts
   -------------------------------------------------------------------------- */
.badge {
    font-weight: 500;
    border-radius: var(--erp-radius-sm) !important;
    padding: 4px 10px;
}

.alert {
    border: 1px solid transparent;
    border-radius: var(--erp-radius-md) !important;
}

/* --------------------------------------------------------------------------
   8. Dropdowns / modals
   -------------------------------------------------------------------------- */
.dropdown-menu {
    border: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-md);
    box-shadow: var(--erp-shadow-lg);
    padding: var(--erp-space-2);
}

.dropdown-item {
    border-radius: var(--erp-radius-sm);
    padding: 8px 12px;
}
.dropdown-item:hover {
    background-color: var(--erp-primary-light);
    color: var(--erp-primary-dark);
}

.modal-content {
    border: none;
    border-radius: var(--erp-radius-lg);
    box-shadow: var(--erp-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--erp-border);
    border-radius: var(--erp-radius-lg) var(--erp-radius-lg) 0 0;
}
.modal-footer {
    border-top: 1px solid var(--erp-border);
}

/* --------------------------------------------------------------------------
   9. App shell — sidebar (left_col / menu_section) & top nav
   -------------------------------------------------------------------------- */
.left_col {
    background-color: var(--erp-sidebar-bg) !important;
}

.nav_title,
.site_title {
    background-color: transparent !important;
}

.site_title,
.site_title span {
    color: var(--erp-text-inverse) !important;
    font-weight: 600;
}

.site_title {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.site_title_mark {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 13px;
    background: linear-gradient(135deg, #2563eb, #06b6d4);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.site_title_logo {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.site_title_text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.site_title_name {
    font-family: 'Poppins', 'Segoe UI', Calibri, Arial, sans-serif;
    font-weight: 700;
    font-size: 20px;
    letter-spacing: 0.2px;
    color: #ffffff;
}

.site_title span.site_title_accent {
    color: #ff6b4a !important;
}

.site_title_sub {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.72);
    letter-spacing: 0.4px;
    font-weight: 500;
}

#sidebar-menu .menu_section > ul > li > a,
.main_menu_side a {
    color: var(--erp-sidebar-text) !important;
    border-radius: var(--erp-radius-sm);
    margin: 2px var(--erp-space-2);
}

/* Colored icon badges — cycles a curated palette across top-level sidebar
   items by position, since menu items are generated from DB data and
   cannot be individually color-tagged without a schema change. Uses a
   solid background badge (not a text/icon color) so it can never bleed
   into the adjacent label text. */
.nav.side-menu > li > a > i,
.main_menu_side .nav.side-menu > li > a > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    margin-right: var(--erp-space-2);
    color: #ffffff !important;
    font-size: 13px;
}

.nav.side-menu > li:nth-of-type(8n+1) > a > i { background-color: #3b82f6; }
.nav.side-menu > li:nth-of-type(8n+2) > a > i { background-color: #10b981; }
.nav.side-menu > li:nth-of-type(8n+3) > a > i { background-color: #f59e0b; }
.nav.side-menu > li:nth-of-type(8n+4) > a > i { background-color: #ec4899; }
.nav.side-menu > li:nth-of-type(8n+5) > a > i { background-color: #8b5cf6; }
.nav.side-menu > li:nth-of-type(8n+6) > a > i { background-color: #06b6d4; }
.nav.side-menu > li:nth-of-type(8n+7) > a > i { background-color: #f97316; }
.nav.side-menu > li:nth-of-type(8n+8) > a > i { background-color: #22c55e; }

/* Label text always stays the standard sidebar text color, unaffected by icon badges */
.nav.side-menu > li > a {
    color: var(--erp-sidebar-text) !important;
}

#sidebar-menu .menu_section > ul > li > a:hover,
.main_menu_side a:hover {
    background-color: var(--erp-sidebar-bg-active) !important;
    color: var(--erp-sidebar-text-active) !important;
}

#sidebar-menu .menu_section > ul > li.active > a,
#sidebar-menu .menu_section > ul > li.current-page > a {
    background-color: var(--erp-sidebar-bg-active) !important;
    color: var(--erp-sidebar-text-active) !important;
    border-left: 3px solid var(--erp-sidebar-accent);
}

/* Flyout submenu (collapsed sidebar) — match the main sidebar's navy
   background instead of the vendor theme's default slate-gray (#3E5367) */
.nav.child_menu,
.nav-sm ul.nav.child_menu {
    background: var(--erp-sidebar-bg) !important;
}

.nav.child_menu li:hover,
.nav.child_menu li.active {
    background-color: var(--erp-sidebar-bg-active) !important;
}

.nav.child_menu li:before {
    background: var(--erp-sidebar-bg-active) !important;
}

.nav.child_menu li:after {
    border-left-color: var(--erp-sidebar-bg-active) !important;
}

.top_nav {
    background-color: var(--erp-surface) !important;
    border-bottom: 1px solid var(--erp-border);
    box-shadow: var(--erp-shadow-sm);
}

/* Financial-year / clock badges in the top header bar */
.header-info-badge {
    background: var(--erp-primary-light) !important;
    color: var(--erp-primary-dark) !important;
    border: 1px solid rgba(36, 81, 196, 0.16) !important;
    border-radius: 20px !important;
    padding: 8px 14px !important;
    font-size: 12.5px;
    font-weight: 600;
}

.header-info-badge-icon {
    color: var(--erp-primary) !important;
}

/* Header row (financial-year badge, clock, avatar) mixes floated spans with
   a plain inline avatar link, so they don't share a baseline — align them
   on one flex row instead. */
.top_nav .nav_menu li.nav-item.dropdown {
    display: flex !important;
    align-items: center;
    gap: 10px;
}

.top_nav .nav_menu li.nav-item.dropdown .header-info-badge {
    float: none;
}

.top_nav .nav_menu li.nav-item.dropdown .user-profile {
    padding-bottom: 0 !important;
    display: flex;
    align-items: center;
    order: 3;
}

/* .top_nav's children (financial-year badge, clock, avatar) are floated
   (Bootstrap pull-right) with no clearfix, so the parent collapses to ~1px
   in the document flow. The floated content still paints on screen, but
   normal-flow content right after .top_nav starts immediately below that
   1px box and visually slides up underneath it. Clear the floats so
   .top_nav reports its real rendered height. */
.top_nav::after,
.top_nav .nav_menu::after {
    content: "";
    display: table;
    clear: both;
}

.top_nav .nav_menu {
    background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   10. Page content area
   -------------------------------------------------------------------------- */
.right_col {
    background-image: none !important;
    background-color: var(--erp-bg) !important;
    padding-bottom: 70px; /* clearance so page content never sits under the fixed chat icon */
}

/* Vendor theme (styleDashboard.css) adds an unwanted top gap here; pages already get spacing from .right_col */
.page-wrapper .content {
    margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   11. Footer
   -------------------------------------------------------------------------- */
footer .footer-nav {
    background-color: var(--erp-surface) !important;
    border-top: 1px solid var(--erp-border) !important;
}

/* --------------------------------------------------------------------------
   12. Focus-visible accessibility outline (keyboard nav)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--erp-primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   13. Responsive tweaks
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .card-body,
    .x_content {
        padding: var(--erp-space-4);
    }
    .table td,
    .table th {
        padding: 8px 10px;
    }
}