/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* ================================================================
   DESIGN TOKENS — Global Theme Variables
================================================================ */
:root {
    --color-primary: #155c86; /* Main action / Theme brand */
    --color-success: #3B6D11; /* Save / Submit / Add New */
    --color-warning: #BA7517; /* Edit / Modify / Cancel / Reset */
    --color-danger: #A32D2D; /* Delete / Reset Leave / Critical */
    --color-info: #155c86; /* Search / Export / Download / Print */
    --color-neutral: #888780; /* Back / Close / Preview / Icons */
    /* Utility Shades */
    --color-amber-bg: #FFBF00;
    --color-amber-text: #7a5c00;
    --color-amber-border: #c8a400;
    --color-gray-bg: #f0f0f0;
    --color-gray-text: #333333;
}

/* ================================================================
   SEMANTIC CLASSES — Recommended for NEW development (Step 2)
================================================================ */
.btn-primary-custom {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
}

.btn-success-custom {
    background-color: var(--color-success) !important;
    color: #ffffff !important;
    border-color: var(--color-success) !important;
}

.btn-warning-custom {
    background-color: var(--color-warning) !important;
    color: #ffffff !important;
    border-color: var(--color-warning) !important;
}

.btn-danger-custom {
    background-color: var(--color-danger) !important;
    color: #ffffff !important;
    border-color: var(--color-danger) !important;
}

.btn-info-custom {
    background-color: var(--color-info) !important;
    color: #ffffff !important;
    border-color: var(--color-info) !important;
}

.btn-neutral-custom {
    background-color: var(--color-neutral) !important;
    color: #ffffff !important;
    border-color: var(--color-neutral) !important;
}

/* ================================================================
   LEGACY MAPPING — Overriding 42+ existing classes (Step 3)
================================================================ */

/* SUCCESS — Save, Submit, Confirm, Process, Add New, Update */
html body .w3-green,
html body .w3-light-green,
html body .w3-teal,
html body .btn-success,
html body .btn-dropbox,
html body .btn-eimsaddnew,
html body .btn-eimsprocess,
html body .btn-pf-save-lg,
html body .panel-success > .panel-heading {
    background-color: var(--color-success) !important;
    color: #ffffff !important;
    border-color: var(--color-success) !important;
}

/* PRIMARY / INFO — Search, Prepare, Download, Export, Info, Print */
html body .w3-cyan,
html body .w3-blue,
html body .w3-light-blue,
html body .w3-blue-grey,
html body .w3-dark-blue,
html body .w3-aqua,
html body .btn-primary,
html body .btn-info,
html body .btn-edd,
html body .btn-eimsprepare,
html body .btn-flat,
html body .btn-report-header,
html body .cbtn,
html body .out-btn,
html body .panel-info > .panel-heading,
html body .panel-customBlue {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) !important;
}

/* DANGER — Delete, Critical actions, Withdraw */
html body .w3-red,
html body .w3-deep-orange,
html body .btn-danger {
    background-color: var(--color-danger) !important;
    color: #ffffff !important;
    border-color: var(--color-danger) !important;
}

/* WARNING / AMBER — Refresh, Back, Clear, Edit, Modify, Reset */
html body .w3-amber,
html body .w3-orange,
html body .w3-yellow,
html body .btn-warning,
html body .panel-customYellow {
    background-color: var(--color-amber-bg) !important;
    color: #ffffff !important;
    border: 1px solid var(--color-amber-border) !important;
}

/* NEUTRAL / GRAY — Back, Close, Secondary actions */
html body .w3-gray,
html body .w3-grey,
html body .btn-default,
html body .btn-eimsclose {
    background-color: var(--color-gray-bg) !important;
    color: var(--color-gray-text) !important;
    border: 1px solid #cccccc !important;
}

/* OTHER UI ELEMENTS */
html body .badge.pull-right {
    background-color: #d0e4f0 !important;
    color: var(--color-primary) !important;
}

html body .nav-tabs > li.active > a,
html body .nav-tabs > li.active > a:focus,
html body .nav-tabs > li.active > a:hover {
    background-color: var(--color-primary) !important;
    color: #ffffff !important;
    border-color: var(--color-primary) var(--color-primary) transparent !important;
}


/* ================================================================
   CENTRALIZED ERP BRANDING SYSTEM - DYNAMIC OVERRIDES
================================================================ */

/* Specific override for the "circular table" (panel-success header) and #efecf1 headers to match BrandingSkin */
html body .panel-success > .panel-heading,
.panel-heading[style*="background-color: #efecf1"],
.panel-footer[style*="background-color: #efecf1"] {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* Dynamic color for Legend/Label headers to match BrandingSkin */
html body .label-header {
    color: var(--color-primary) !important;
}

/* Global override for ANY element with hardcoded mediumblue text (Remember Selections, etc.) */
[style*="color:mediumblue"], [style*="color: mediumblue"] {
    color: var(--color-primary) !important;
}

/* Global dynamic color for Radio Buttons and Checkboxes (the "circular" parts) */
input[type="radio"], input[type="checkbox"], .w3-check, .w3-radio {
    accent-color: var(--color-primary) !important;
}

/* Dynamic Table Header Color - targeting ALL major data tables globally */
.table.table-bordered thead tr th, 
#tableImportStudent thead tr th, 
#tableIdCardDelivery thead tr th,
#dataTable thead tr th, 
#dataTableCrs thead tr th, 
#dataTablePreEdu thead tr th,
.branded-table thead tr th {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* Standard Design System: Force Refresh buttons/icons to Amber regardless of theme */
[id*="btnRefresh"], [id*="btnReset"], .w3-orange, .w3-amber, .btn-warning {
    background-color: #BA7517 !important; 
    color: white !important;
    border-color: #BA7517 !important;
}
[id*="btnRefresh"] i, [id*="btnReset"] i, .w3-orange i, .w3-amber i, .btn-warning i,
i.fa-refresh[style*="color:red"], i.fa-refresh[style*="color: red"] {
    color: white !important;
}

/* Ensure "Add" buttons, Status Indicators, and Summary Buttons follow the primary branding skin */
#btnAddCourse, #btnSelected2, #btnSelectedTotalAmount2, 
#btnTS, #btnAS, #btnIS, #Button1, #Button2, #Button3, #Button4,
.btn-primary, .btn-info, .w3-blue, .w3-cyan, .w3-teal {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* Dynamic Badges (the small circular counters) */
.badge {
    background-color: white !important;
    color: var(--color-primary) !important;
    font-weight: bold !important;
}

/* Specific Alert summaries and Panel Headers that should be branded globally */
.alert-danger, .alert-success, 
.panel-primary > .panel-heading, 
.panel-success > .panel-heading, 
.panel-warning > .panel-heading, 
.panel-info > .panel-heading, 
.panel-danger > .panel-heading {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}

/* Ensure text inside branded panel headers and footers is white, but EXCLUDE datepickers and widgets */
.panel-primary > .panel-heading label, .panel-primary > .panel-heading span:not(.badge), .panel-primary > .panel-heading a, .panel-primary > .panel-heading .control-label,
.panel-success > .panel-heading label, .panel-success > .panel-heading span:not(.badge), .panel-success > .panel-heading a, .panel-success > .panel-heading .control-label,
.panel-warning > .panel-heading label, .panel-warning > .panel-heading span:not(.badge), .panel-warning > .panel-heading a, .panel-warning > .panel-heading .control-label,
.panel-info > .panel-heading label, .panel-info > .panel-heading span:not(.badge), .panel-info > .panel-heading a, .panel-info > .panel-heading .control-label,
.panel-danger > .panel-heading label, .panel-danger > .panel-heading span:not(.badge), .panel-danger > .panel-heading a, .panel-danger > .panel-heading .control-label,
.panel-primary > .panel-footer label, .panel-primary > .panel-footer span:not(.badge), .panel-primary > .panel-footer a, .panel-primary > .panel-footer .control-label,
.panel-success > .panel-footer label, .panel-success > .panel-footer span:not(.badge), .panel-success > .panel-footer a, .panel-success > .panel-footer .control-label,
.panel-warning > .panel-footer label, .panel-warning > .panel-footer span:not(.badge), .panel-warning > .panel-footer a, .panel-warning > .panel-footer .control-label,
.panel-info > .panel-footer label, .panel-info > .panel-footer span:not(.badge), .panel-info > .panel-footer a, .panel-info > .panel-footer .control-label,
.panel-danger > .panel-footer label, .panel-danger > .panel-footer span:not(.badge), .panel-danger > .panel-footer a, .panel-danger > .panel-footer .control-label {
    color: white !important;
}

/* Keep badges readable inside branded panel headings */
.panel-heading .badge,
.panel-footer .badge {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
}

/* Ensure visible table header cell dividers for Dues Register */
#tblDuesRegister.table-bordered > thead > tr > th {
    border-color: rgba(255, 255, 255, 0.7) !important;
}

/* Explicitly protect Datepickers from any forced branding colors that might hide them */
.datepicker, .ui-datepicker {
    background-color: white !important;
    border: 1px solid #ccc !important;
    padding: 5px !important;
}
.datepicker *, .ui-datepicker * {
    color: #333 !important; 
}

/* High-Definition Calendar Navigation (FontAwesome) */
.datepicker .prev, .datepicker .next, .ui-datepicker-prev, .ui-datepicker-next {
    background-color: transparent !important;
    cursor: pointer !important;
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: FontAwesome, "Source Sans Pro", sans-serif !important;
    font-size: 0 !important; 
}
.datepicker .prev:before, .ui-datepicker-prev:before {
    content: "\f053" !important; 
    font-family: FontAwesome !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #000 !important;
}
.datepicker .next:before, .ui-datepicker-next:before {
    content: "\f054" !important; 
    font-family: FontAwesome !important;
    font-size: 18px !important;
    font-weight: bold !important;
    color: #000 !important;
}
.datepicker .prev:hover, .datepicker .next:hover {
    background-color: #f5f5f5 !important;
}





/* ================================================================
   FORCE EXCEL BUTTON BRANDING - DYNAMIC OVERRIDES
================================================================ */
html body button[name="submit"][value*="excel"],
html body button[value*="excel"],
html body #btnDetailsExcel,
html body .w3-button.w3-gray[value*="excel"],
html body .w3-button.w3-green[value*="excel"] {
    background-color: var(--color-primary) !important;
    color: white !important;
    border-color: var(--color-primary) !important;
}