/* ============================================================================
   Bootstrap 3 / AppUI -> Bootstrap 5 (Minia) compatibility layer
   Lets legacy content markup render correctly inside the Minia shell without
   editing each screen. Loaded AFTER Minia's app.min.css.
   ============================================================================ */

/* ---- Page background vs. card contrast ----
   FIXED 2026-10-01, per user request: the page background and every .block/.panel card were
   both plain white, so cards had no visual separation from the page behind them. Rather than
   touch every module's card background individually, overriding the single shared --bs-body-bg
   token gives the whole app a page background in one place — .block/.panel/.card already set
   their own explicit white background (see below), so they keep popping against it with zero
   other changes needed.
   COLOR CHOSEN 2026-10-01, per user request for a background that actually matches the theme's
   primary (--bs-primary: #5156be, hue ~238° blue-violet/indigo) rather than a generic neutral:
   #eef1fa is analogous (same blue/blue-violet family, ~20-30° off primary) washed out to near-
   white — reads as "a whisper of the brand color" rather than a random grey, and stays cohesive
   with the dashboard's existing cool-toned widget colors (info/primary/etc.) instead of fighting
   them the way a warm off-white would. */
:root, [data-bs-theme=light] { --bs-body-bg: #eef1fa; }
body { background-color: var(--bs-body-bg); }

/* ---- AppUI structural blocks -> Minia card ---- */
.block,
.widget {
    position: relative;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background-color: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #eff0f2);
    border-radius: .25rem;
    box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.03);
}
.block.full { padding: 1.25rem; }
.block .block { box-shadow: none; }

/* AppUI block title -> card header */
.block-title {
    margin: -1.25rem -1.25rem 1.25rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #eff0f2);
    background: transparent;
}
.block-title h1, .block-title h2, .block-title h3,
.block-title h4, .block-title h5, .block-title h6 {
    display: inline-block;
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
}
.block-content-full { margin: -1.25rem; }

/* ---- Bootstrap 3 panel -> Minia card ---- */
.panel {
    margin-bottom: 1.5rem;
    background-color: #fff;
    border: 1px solid var(--bs-border-color, #eff0f2);
    border-radius: .25rem;
    box-shadow: 0 .75rem 1.5rem rgba(18,38,63,.03);
}
.panel-heading {
    padding: .85rem 1.25rem;
    border-bottom: 1px solid var(--bs-border-color, #eff0f2);
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background-color: #fff;
}
.panel-title { margin: 0; font-size: 15px; font-weight: 600; }
.panel-body { padding: 1.25rem; }
.panel-footer {
    padding: .75rem 1.25rem;
    border-top: 1px solid var(--bs-border-color, #eff0f2);
    background-color: #fff;
}
.panel-default > .panel-heading { color: inherit; }

/* ---- Bootstrap 3 grid: col-xs-* (BS5 dropped the xs infix) ---- */
.col-xs-1,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,
.col-xs-7,.col-xs-8,.col-xs-9,.col-xs-10,.col-xs-11,.col-xs-12 {
    position: relative; width: 100%; padding-right: .75rem; padding-left: .75rem; float: left;
}
.col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; }
.col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; }
.col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; }
.col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; }
.col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; }
.col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; }

/* ---- Boxed-layout content width ----
   FIXED 2026-10-01, reported: the dashboard (and every other page) still leaves a lot of
   whitespace on wider screens even after blocks were widened to col-sm-12. Root cause: Minia's
   boxed+horizontal layout CSS caps `.container-fluid` (the wrapper admin.php puts around BOTH
   the topnav's menu bar AND `.main-content`'s actual page content) at a flat 1300px, centered —
   on anything wider than ~1300px the page content stops well short of the screen edge no matter
   how wide the blocks inside it are set. Overriding only `.main-content .container-fluid` (not
   the bare `.container-fluid` selector) keeps the topnav menu bar itself capped at 1300px so it
   doesn't stretch awkwardly wide, while letting actual page content use the full available width. */
body[data-layout=horizontal][data-layout-size=boxed] .main-content .container-fluid {
    max-width: 100%;
}

/* ---- Bootstrap 3 grid: col-*-offset-* (BS5 renamed these to offset-*-*) ----
   FIXED 2026-10-01, reported: form "blocks" (e.g. the Parameter module) render flush-left
   instead of centered. Root cause: 78 views across this app use BS3's `col-sm-offset-N` /
   `col-md-offset-N` to center a column (e.g. `col-sm-8 col-sm-offset-2`), but BS5 renamed these
   to `offset-sm-N` / `offset-md-N` and this app's loaded CSS (Minia's BS5 bundle) never defines
   the old BS3 names — a legacy bootstrap.min.css that DOES define them still ships under
   public/backend/css/ but was never linked in admin.php, so the class has silently done
   nothing on every one of these 78 pages. Same fix pattern as the .col-xs-* block above: define
   the BS3 names directly rather than touch every view. Breakpoints match BS5's own grid
   (sm:576px, md:768px) so these align with the surrounding `.col-sm-*`/`.col-md-*` classes. */
@media (min-width: 576px) {
    .col-sm-offset-1  { margin-left: 8.33333333%; }
    .col-sm-offset-2  { margin-left: 16.66666667%; }
    .col-sm-offset-3  { margin-left: 25%; }
    .col-sm-offset-4  { margin-left: 33.33333333%; }
    .col-sm-offset-5  { margin-left: 41.66666667%; }
    .col-sm-offset-6  { margin-left: 50%; }
    .col-sm-offset-7  { margin-left: 58.33333333%; }
    .col-sm-offset-8  { margin-left: 66.66666667%; }
    .col-sm-offset-9  { margin-left: 75%; }
    .col-sm-offset-10 { margin-left: 83.33333333%; }
    .col-sm-offset-11 { margin-left: 91.66666667%; }
    .col-sm-offset-0  { margin-left: 0; }
}
@media (min-width: 768px) {
    .col-md-offset-1  { margin-left: 8.33333333%; }
    .col-md-offset-2  { margin-left: 16.66666667%; }
    .col-md-offset-3  { margin-left: 25%; }
    .col-md-offset-4  { margin-left: 33.33333333%; }
    .col-md-offset-5  { margin-left: 41.66666667%; }
    .col-md-offset-6  { margin-left: 50%; }
    .col-md-offset-7  { margin-left: 58.33333333%; }
    .col-md-offset-8  { margin-left: 66.66666667%; }
    .col-md-offset-9  { margin-left: 75%; }
    .col-md-offset-10 { margin-left: 83.33333333%; }
    .col-md-offset-11 { margin-left: 91.66666667%; }
    .col-md-offset-0  { margin-left: 0; }
}
@media (min-width: 992px) {
    .col-lg-offset-1  { margin-left: 8.33333333%; }
    .col-lg-offset-2  { margin-left: 16.66666667%; }
    .col-lg-offset-3  { margin-left: 25%; }
    .col-lg-offset-4  { margin-left: 33.33333333%; }
    .col-lg-offset-5  { margin-left: 41.66666667%; }
    .col-lg-offset-6  { margin-left: 50%; }
    .col-lg-offset-7  { margin-left: 58.33333333%; }
    .col-lg-offset-8  { margin-left: 66.66666667%; }
    .col-lg-offset-9  { margin-left: 75%; }
    .col-lg-offset-10 { margin-left: 83.33333333%; }
    .col-lg-offset-11 { margin-left: 91.66666667%; }
    .col-lg-offset-0  { margin-left: 0; }
}

/* ---- Bootstrap 3 horizontal forms ----
   FIXED 2026-09-01, real layout bug found via live testing (reported: fields/radio buttons
   misaligned with their labels — confirmed throughout every `.form-horizontal` screen, not just
   the one reported): BS5's grid only applies column gutters/padding via a `.row > *` direct-child
   selector, and only cancels that padding out via `.row`'s own negative margins — neither of
   which ever matched `.form-group` (a BS3 pattern, not `.row`), even though every screen nests
   real `.col-md-*`/`.col-sm-*` label+field pairs directly inside `.form-group`. So every one of
   these columns got its BS5 WIDTH (that part IS a plain class rule, `.col-md-3{width:25%}` etc.)
   but NONE of BS5's gutter padding or offsetting margin — labels and fields sat flush against
   each other with no gutter, and the whole row sat unindented relative to every real `.row` on
   the same page (block titles, breadcrumbs, etc.), reading as "misaligned". Fixed by giving
   `.form-group` the real `.row` treatment (gutter var + offsetting negative margin) and its
   direct `col-*` children the real `.row > *` gutter padding — same mechanism BS5 itself uses,
   just pointed at this BS3-shaped selector instead of `.row`. One shared, global fix (this file
   loads on every admin screen) rather than 100+ individual view edits. */
.form-group { margin-bottom: 1rem; }
.form-horizontal .form-group {
    display: flex; flex-wrap: wrap; align-items: center;
    --bs-gutter-x: 1.5rem;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
}
.form-horizontal .form-group > [class*="col-"] {
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left: calc(var(--bs-gutter-x) * .5);
}
/* FIXED 2026-10-01, reported: the "Add Child" button (and other lone centered buttons/headings
   inside a `.form-horizontal` form, e.g. the Salary/Pay Items panel titles above) rendered
   flush-left instead of centered. Root cause: `.form-horizontal .form-group` above forces
   `display:flex`, and flexbox ignores a child's own `text-align:center` when positioning it as a
   flex item — `.text-center`'s `text-align` only centers INLINE content inside a box, not the
   box itself within its flex parent. Needs `justify-content:center` on the flex container
   instead, scoped to `.text-center` so plain two-column field rows (which rely on the flex
   layout for their label+input columns) are untouched. */
.form-horizontal .form-group.text-center {
    justify-content: center;
}
.control-label { font-weight: 500; margin-bottom: .3rem; }
@media (min-width: 768px) {
    .form-horizontal .control-label { text-align: right; margin-bottom: 0; padding-top: calc(.375rem + 1px); }
}
.help-block { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--bs-secondary-color, #74788d); }
.radio, .checkbox { margin-bottom: .5rem; }
/* BS3 inline radio/checkbox labels — BS5 dropped these entirely, so a `.radio-inline` group
   (e.g. LeaveSetting's Rounding options) rendered as unstyled stacked/cramped labels with no
   spacing, part of the same reported misalignment. */
.radio-inline, .checkbox-inline {
    display: inline-block; position: relative;
    padding-left: 20px; margin-bottom: 0; margin-right: 1rem;
    font-weight: 400; vertical-align: middle; cursor: pointer;
}
.radio-inline input, .checkbox-inline input { position: absolute; left: 0; margin-top: 3px; }
.radio-inline + .radio-inline, .checkbox-inline + .checkbox-inline { margin-top: 0; }

/* ---- Role module's permission-matrix checkbox grid ----
   FIXED 2026-10-01, reported: the Role add/edit permission checkboxes "look a bit messy". Root
   cause: `.checkbox-inline` above is plain `display:inline-block` with ragged text-flow wrapping
   — items of different label lengths (e.g. "My Overtime" vs. "Attendance List") land at
   inconsistent positions line to line, with no column alignment. Scoped to `.permission-grid`
   (only used by role/_access_matrix.php) rather than changing `.checkbox-inline` itself, which is
   also used elsewhere (e.g. LeaveSetting's Rounding options) where the plain inline-flow is fine. */
.permission-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .5rem 1rem;
}
.permission-grid .checkbox-inline {
    display: flex; align-items: center;
    margin: 0; padding-left: 22px;
}
.permission-grid .checkbox-inline input { position: absolute; left: 0; margin-top: 0; }

/* BS3 input-group-addon -> BS5 input-group-text */
.input-group-addon {
    display: flex; align-items: center;
    padding: .47rem .75rem;
    font-size: .8125rem;
    color: #495057;
    background-color: #eff2f7;
    border: 1px solid #ced4da;
    border-radius: .25rem;
}

/* ---- Buttons removed / renamed in BS5 ---- */
.btn-default {
    color: #495057; background-color: #fff; border-color: #ced4da;
}
.btn-default:hover { background-color: #f8f9fa; border-color: #ced4da; }
.btn-xs { padding: .1rem .4rem; font-size: .7rem; border-radius: .2rem; }

/* ---- Bootstrap 3 utilities dropped in BS5 ---- */
.pull-right { float: right !important; }
.pull-left  { float: left  !important; }
.text-right { text-align: right !important; }
.text-left  { text-align: left  !important; }
.well {
    padding: 1rem; margin-bottom: 1.25rem;
    background-color: #f8f9fa; border: 1px solid #e9ebf0; border-radius: .25rem;
}
.img-circle { border-radius: 50% !important; }
.img-rounded { border-radius: .25rem !important; }

/* BS3 .label -> BS5 badge look (avoid clashing with <label>) */
span.label, a.label {
    display: inline-block; padding: .25em .6em; font-size: 75%;
    font-weight: 600; line-height: 1; color: #fff; text-align: center;
    white-space: nowrap; vertical-align: baseline; border-radius: .25rem;
}
.label-success { background-color: #34c38f; } .label-danger { background-color: #f46a6a; }
.label-warning { background-color: #f1b44c; } .label-info { background-color: #50a5f1; }
.label-primary { background-color: #556ee6; } .label-default { background-color: #74788d; }

/* ---- Tables ---- */
.table-vcenter td, .table-vcenter th { vertical-align: middle; }

/* BS3 close button (×) -> BS5 look */
.close {
    float: right; font-size: 1.3rem; font-weight: 700; line-height: 1;
    color: #000; opacity: .5; background: transparent; border: 0;
}
.close:hover { opacity: .75; }

/* keep legacy modal backdrop stacking sane */
.modal-backdrop { z-index: 1050; }
.modal { z-index: 1055; }

/* ---- Fixed header/topnav stacking ----
   FIXED 2026-10-01, reported: dashboard calendar + module action buttons render IN FRONT OF
   the fixed top header/topnav on scroll, not underneath it. Root cause: Minia's own
   #page-topbar (z-index:1) and .topnav (z-index:100) are both low relative to normal page
   content — the calendar grid and other in-page elements use their own low-but-nonzero
   z-index (e.g. FullCalendar's .fc-view sets z-index:1), so on a tie, whichever element comes
   LATER in DOM order (always the page content, never the header) wins the paint order and
   sits visually on top of the fixed header/topnav, regardless of position:fixed.

   #page-topbar MUST outrank .topnav (not just match it): #page-topbar is a stacking context
   (it has position+z-index), so ALL of its descendants — including its own user-avatar dropdown
   (Change Password / Logout) — are painted as one unit at #page-topbar's z-index. Giving the
   dropdown itself a bigger z-index can't escape that containment; only raising #page-topbar's
   own z-index above .topnav's lets the dropdown clear the topnav strip below it. First attempt
   (both at 1001, dropdown bumped to 1002 inside #page-topbar) still lost to .topnav because
   .topnav comes later in the DOM and ties go to later elements — confirmed broken by further
   live testing. */
#page-topbar { z-index: 1002; }
.topnav { z-index: 1001; }

/* ---- AppUI clickable stat widgets -> button-like Minia cards ---- */
a.widget, a.block { text-decoration: none; color: inherit; }
a.widget:hover, a.block:hover { text-decoration: none; color: inherit; }
a.widget {
    display: block;
    padding: 0;                 /* header/body provide the padding */
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #e3e7ef;
    border-radius: .375rem;
    box-shadow: 0 2px 6px rgba(18, 38, 63, .10);
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
a.widget:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(85, 110, 230, .22);
    border-color: #b7c3f3;
}
.widget-content { padding: 1rem 1.25rem; }
.widget-content-mini { padding: .55rem 1.25rem; font-weight: 600; }
/* colored header strips — distinct color per widget, matching the legacy theme
   (Clock Status=success/danger, Total Clock In=default/primary, On Leave=warning,
    Annual Leave=info). Dark-colored strips use white text. */
.themed-background,
.themed-background-primary { background-color: #556ee6 !important; color: #fff !important; } /* blue  */
.themed-background-success { background-color: #34c38f !important; color: #fff !important; } /* green */
.themed-background-danger  { background-color: #f46a6a !important; color: #fff !important; } /* red   */
.themed-background-warning { background-color: #f1b44c !important; color: #fff !important; } /* amber */
.themed-background-info    { background-color: #4ba6ef !important; color: #fff !important; } /* cyan  */
.themed-background-default { background-color: #74788d !important; color: #fff !important; } /* grey  */
.themed-background-dark    { background-color: #343a40 !important; color: #fff !important; } /* dark  */
/* muted strip: DARK text on transparent background (used ~70x, e.g. "Apply Leave") */
.themed-background-muted   { background-color: transparent !important; color: #495057 !important; }
.text-light-op { color: #fff !important; }
/* explicit text-dark in the markup must win (many muted action widgets set it) */
.text-dark, .text-dark * { color: #343a40 !important; }
.widget-heading { margin: .15rem 0 0; font-size: 1.65rem; font-weight: 600; line-height: 1.2; }
.widget-icon { font-size: 2rem; opacity: .25; }

/* ---- BS3 breadcrumb (uses <li>, not .breadcrumb-item) -> BS5 spacing + separators ---- */
.breadcrumb {
    display: flex; flex-wrap: wrap; align-items: center;
    padding: .25rem 0; margin: 0 0 1rem; list-style: none;
    background-color: transparent; font-size: .875rem;
}
.breadcrumb > li { display: inline-flex; align-items: center; }
.breadcrumb > li + li::before {
    content: "/"; display: inline-block; padding: 0 .5rem; color: #adb5bd;
}
.breadcrumb > li a { color: var(--bs-primary, #556ee6); text-decoration: none; }
.breadcrumb > li a:hover { text-decoration: underline; }
.breadcrumb > li:last-child { color: #74788d; }
.breadcrumb.breadcrumb-top { margin-bottom: 1rem; justify-content: flex-end; }

/* ---- DataTables 1.10 pagination -> Minia-styled, theme-aware buttons ---- */
.dataTables_wrapper .dataTables_paginate { padding-top: .5rem; text-align: right; }
.dataTables_paginate .paginate_button {
    display: inline-block !important; min-width: 1.9rem; box-sizing: border-box;
    padding: .35rem .65rem !important; margin-left: 4px !important; text-align: center; line-height: 1.2;
    border: 1px solid #dee2e6 !important; border-radius: .25rem !important;
    color: #495057 !important; background: #fff; cursor: pointer; text-decoration: none !important;
}
.dataTables_paginate .paginate_button:hover {
    background-color: #eff2f7; border-color: #dee2e6; color: #495057 !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
    background-color: var(--bs-primary, #556ee6) !important;
    border-color: var(--bs-primary, #556ee6) !important;
    color: #fff !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
    color: #c5c9d3 !important; background-color: #fff; cursor: default; opacity: .65;
}
.dataTables_paginate span { display: inline-flex; }
.dataTables_wrapper .dataTables_info { padding-top: .85rem; color: #74788d; }

/* ---- Legacy status colour utilities (from custom.css, not loaded under Minia) ---- */
/* Used by the dashboard calendar legend + status indicators app-wide. */
.color-pending  { color: orange !important; }
.color-approve,
.color-approved { color: green  !important; }
.color-reject,
.color-rejected { color: red    !important; }
.color-cancel,
.color-cancelled { color: #74788d !important; }

/* Sidebar brand logo: allow a slightly larger logo while guaranteeing full, undistorted display */
.navbar-brand-box { overflow: visible; }
.navbar-brand-box .logo img { width: auto; max-width: 100%; max-height: 46px; object-fit: contain; }

/* Modal dialog: BS5 shown-state transform reset (.modal.show .modal-dialog{transform:none}) was
   being overridden by Minia's .modal-dialog{transform:scale(1.02)}, leaving the dialog stuck 50px
   up (clipped, looks broken). Force the reset so openView / all modals render in place. */
.modal.show .modal-dialog { transform: none !important; }

/* ---- Form field background: editable vs disabled/readonly ----
   FIXED 2026-09-23, per user request (found while working on the IRAS Employee Details table,
   confirmed app-wide — present on every form-control, on every screen, not scoped to IRAS): Minia's
   base .form-control rule uses `background-color: var(--bs-tertiary-bg)` (#f8f9fa, a light grey)
   for every field regardless of state, and INVERTS disabled fields to
   `var(--bs-secondary-bg)` (#fff, white) — backwards from the conventional editable=white /
   disabled=grey convention. In a dense data-entry table (exactly the IRAS screens), every field
   looking the same shade of grey makes it impossible to tell which ones actually accept input.
   Overridden app-wide here rather than per-screen, per explicit user confirmation. */
.form-control,
select.form-control {
    background-color: #fff;
}
.form-control:disabled,
.form-control[readonly],
select.form-control:disabled {
    background-color: #e9ecef;
    opacity: 1;
}