/* ==========================================================================
   JATIM ERP — Modern Theme Layer
   Loaded AFTER bootstrap.css / bootstrap-responsive.css / plugin CSS.
   Purpose: restyle the existing Bootstrap 2 markup (navbar, buttons, forms,
   tables, tabs, alerts, modals, pagination, select2, datepickers) into a
   cleaner, more elegant, modern look WITHOUT changing any HTML/JS structure,
   so it cascades automatically to every AJAX-loaded fragment
   (views/contents/forms/tabs/searchs) across the app.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');

:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Kelapa sawit — deep frond green + golden CPO (crude palm oil) accent */
    --c-primary: #2D5A3D;
    --c-primary-hover: #234630;
    --c-primary-active: #1A3423;
    --c-primary-light: #eaf3ec;
    --c-primary-border: #b9d7c1;
    --c-sage: #2D5A3D;
    --c-sage-border: #1A3423;

    --c-gold: #C9972C;
    --c-gold-hover: #a67821;
    --c-gold-light: #faf1de;

    --c-slate-900: #221f1b;
    --c-slate-800: #2b2926;
    --c-slate-700: #3a362f;
    --c-slate-600: #4e4940;
    --c-slate-500: #6b655a;
    --c-slate-400: #8a8378;
    --c-slate-300: #d9cfc0;
    --c-slate-200: #e9e3d9;
    --c-slate-100: #f4f0e8;
    --c-slate-50:  #faf8f5;

    --c-success: #4e7a52;
    --c-success-bg: #eff5ef;
    --c-success-border: #cfe0d0;
    --c-danger: #a23e2e;
    --c-danger-bg: #fbefec;
    --c-danger-border: #ebc9c0;
    --c-warning: #b98f1d;
    --c-warning-bg: #fbf6e7;
    --c-warning-border: #e8d9a8;
    --c-info: #4a7a8c;
    --c-info-bg: #eef4f6;
    --c-info-border: #c6dee4;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;

    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow-md: 0 4px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 12px 32px rgba(15, 23, 42, .12);
    --shadow-focus: 0 0 0 3px rgba(45, 90, 61, .18);
}

/* ---------------------------------------------------------------------- */
/* Base / Typography                                                      */
/* ---------------------------------------------------------------------- */

html, body {
    background-color: #f7f5ef;
}

body {
    font-family: var(--font-body);
    color: var(--c-slate-700);
    font-size: 12.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.form-signin-heading {
    font-family: var(--font-heading);
    color: var(--c-slate-900);
    font-weight: 700;
    letter-spacing: -0.01em;
}

a {
    color: var(--c-primary);
}
a:hover, a:focus {
    color: var(--c-primary-hover);
}

hr {
    border-top-color: var(--c-slate-200);
}

::selection {
    background: var(--c-primary-border);
    color: var(--c-slate-900);
}

/* thin modern scrollbars (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--c-slate-300); border-radius: 10px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--c-slate-400); background-clip: content-box; }

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .01em;
    padding: 7px 16px;
    border-radius: var(--radius-md);
    border: 1px solid var(--c-slate-300);
    background: #fff;
    background-image: none;
    color: var(--c-slate-700);
    text-shadow: none;
    box-shadow: var(--shadow-sm);
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease;
}
.btn:hover {
    background: var(--c-slate-50);
    border-color: var(--c-slate-400);
    color: var(--c-slate-900);
    box-shadow: var(--shadow-md);
}
.btn:active,
.btn.active {
    transform: translateY(1px);
    box-shadow: none;
}
.btn:focus {
    outline: none;
    box-shadow: var(--shadow-focus);
}
.btn .caret { border-top-color: currentColor; }

.btn-large { padding: 10px 20px; font-size: 14px; border-radius: var(--radius-md); }
.btn-small { padding: 4px 10px; font-size: 11.5px; border-radius: var(--radius-sm); }
.btn-mini  { padding: 2px 7px; font-size: 11px; border-radius: var(--radius-sm); }
.btn-block { width: 100%; }

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active {
    background: var(--c-primary);
    background-image: none;
    border-color: var(--c-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-primary:active { background: var(--c-primary-active); border-color: var(--c-primary-active); }

.btn-success, .btn-success:hover, .btn-success:focus {
    background: var(--c-success); background-image: none; border-color: var(--c-success); color: #fff;
}
.btn-success:hover { background: #15803d; border-color: #15803d; }

.btn-danger, .btn-danger:hover, .btn-danger:focus,
.btn-warning.btn-danger {
    background: var(--c-danger); background-image: none; border-color: var(--c-danger); color: #fff;
}
.btn-danger:hover { background: #b91c1c; border-color: #b91c1c; }

.btn-warning, .btn-warning:hover, .btn-warning:focus {
    background: var(--c-warning); background-image: none; border-color: var(--c-warning); color: #fff;
}
.btn-warning:hover { background: #b45309; border-color: #b45309; }

.btn-info, .btn-info:hover, .btn-info:focus {
    background: var(--c-info); background-image: none; border-color: var(--c-info); color: #fff;
}
.btn-info:hover { background: #0369a1; border-color: #0369a1; }

.btn-inverse, .btn-inverse:hover, .btn-inverse:focus {
    background: var(--c-slate-800); background-image: none; border-color: var(--c-slate-800); color: #fff;
}
.btn-inverse:hover { background: var(--c-slate-900); border-color: var(--c-slate-900); }

.btn-link {
    border-color: transparent;
    box-shadow: none;
    background: transparent;
    color: var(--c-primary);
}
.btn-link:hover { background: var(--c-primary-light); border-color: transparent; box-shadow: none; }

.btn.disabled, .btn[disabled] {
    opacity: .55;
    box-shadow: none;
}

.btn-navbar {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.18);
    box-shadow: none;
    border-radius: var(--radius-sm);
}
.btn-navbar .icon-bar { background-color: #fff; }

/* ---------------------------------------------------------------------- */
/* Forms                                                                   */
/* ---------------------------------------------------------------------- */

label {
    font-weight: 600;
    color: var(--c-slate-700);
    font-size: 12.5px;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="file"],
textarea,
select,
.uneditable-input {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--c-slate-800);
    background-color: #fff;
    border: 1px solid var(--c-slate-300);
    border-radius: var(--radius-md);
    padding: 7px 11px;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
select { padding: 6px 11px; }

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus,
.uneditable-input:focus {
    border-color: var(--c-primary);
    outline: none;
    box-shadow: var(--shadow-focus);
}

input::placeholder,
textarea::placeholder {
    color: var(--c-slate-400);
}

input[disabled], select[disabled], textarea[disabled],
input[readonly], select[readonly], textarea[readonly] {
    background-color: #ccc;
    color: var(--c-slate-500);
}

.input-block-level { width: 100%; }

.control-group { margin-bottom: 14px; }

/* legacy "row-fluid > span2/span4.lightblue" label+field layout (used across
   most forms instead of .control-group) has no vertical gap between rows,
   making stacked dropdowns look stuck together. Give each label/field cell
   the same breathing room .control-group gets. */
.row-fluid > .lightblue { margin-bottom: 14px; }
.control-group.error input,
.control-group.error select,
.control-group.error textarea {
    border-color: var(--c-danger);
}
.control-group.error .help-inline,
.control-group.error .help-block,
label.error {
    color: var(--c-danger);
    font-size: 11.5px;
}
.control-group.success input { border-color: var(--c-success); }

.checkbox, .radio { font-weight: 400; }

fieldset legend {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--c-slate-900);
    border-bottom-color: var(--c-slate-200);
}

/* combobox / bootstrap-combobox */
.combobox-container .add-on {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--c-slate-50);
    border-color: var(--c-slate-300);
}

/* select2 — many pages initialize this with an inline "width: 300%/400%/
   500%" (assets/js option) left over from when their search panel was a
   narrow offset/span column; now that panel is full width (see the
   "Legacy grid panels" rule below), that inline percentage massively
   overshoots and forces the whole card to scroll sideways. Pin it back to
   the field's own column width everywhere, like a normal input. */
.select2-container {
    width: 100% !important;
}

.select2-container .select2-choice {
    border: 1px solid var(--c-slate-300);
    border-radius: var(--radius-md);
    background: #fff;
    background-image: none;
    height: 34px;
    line-height: 32px;
    color: var(--c-slate-800);
    box-shadow: none;
}
.select2-container-active .select2-choice,
.select2-dropdown-open .select2-choice {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-focus);
}
.select2-drop {
    border-radius: var(--radius-md);
    border-color: var(--c-slate-200);
    box-shadow: var(--shadow-lg);
}
.select2-results .select2-highlighted {
    background: var(--c-primary);
}
.select2-search input {
    border-radius: var(--radius-sm);
    border-color: var(--c-slate-300);
}

/* datepicker / datetimepicker */
.datepicker,
.datetimepicker,
.bootstrap-datetimepicker-widget {
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-slate-200);
    box-shadow: var(--shadow-lg);
    padding: 8px;
}
.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.today {
    background: var(--c-primary) !important;
    background-image: none !important;
    color: #fff !important;
    text-shadow: none !important;
    border-radius: var(--radius-sm);
}
.datepicker table tr td, .datepicker table tr th {
    border-radius: var(--radius-sm);
}

/* fileupload */
.fileupload .uneditable-input {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

/* ---------------------------------------------------------------------- */
/* Tables                                                                  */
/* ---------------------------------------------------------------------- */

table {
    font-family: var(--font-body);
}

.table {
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--c-slate-200);
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

/* JS (assets/js/theme-modern.js) wraps every .table in this on load and
   after each AJAX content swap, so a wide table scrolls horizontally on
   its own — without dragging the rest of the page/panel with it — while a
   narrow table still stretches to fill the available width. A plain CSS
   "display:block + overflow-x" on the table itself can't do both at once:
   once a table's outer display isn't "table", its columns stop honoring
   width:100% and leave dead space for narrow content. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 20px;
}
.table-scroll > .table {
    margin-bottom: 0;
}

.table th,
.table td {
    padding: 7px 11px;
    vertical-align: middle;
    border-top: 1px solid var(--c-slate-100);
    font-size: 12.5px;
    color: var(--c-slate-700);
}

.table thead th,
.tablesorter-bootstrap .tablesorter-header,
.tablesorter-bootstrap tfoot th,
.tablesorter-bootstrap tfoot td {
    background: var(--c-slate-50) !important;
    background-image: none !important;
    box-shadow: none !important;
    border-top: none;
    border-bottom: 2px solid var(--c-slate-200);
    color: var(--c-slate-600);
    font-family: var(--font-body) !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.table-bordered {
    border: 1px solid var(--c-slate-200);
}
.table-bordered th, .table-bordered td {
    border-left: 1px solid var(--c-slate-100);
}
.table-bordered th:first-child, .table-bordered td:first-child {
    border-left: none;
}

.table-striped tbody tr:nth-child(odd) td,
.tablesorter-bootstrap tr.odd td {
    background-color: var(--c-slate-50);
}
.tablesorter-bootstrap tr.even td {
    background-color: #fff;
}

.table tbody tr:hover td,
.tablesorter-bootstrap tbody > .odd:hover > td,
.tablesorter-bootstrap tbody > .even:hover > td {
    background-color: var(--c-primary-light) !important;
}

.table img[src*="assets/ico"] {
    opacity: .75;
    transition: opacity .15s ease, transform .1s ease;
}
.table a:hover img[src*="assets/ico"] {
    opacity: 1;
    transform: scale(1.08);
}

/* pager (tablesorter pager plugin) */
.pager {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin: 14px 0;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    font-size: 12px;
    color: var(--c-slate-600);
}
.pager .btn {
    padding: 4px 9px;
    border-radius: var(--radius-sm);
}
.pager .btn:hover:not(.disabled) {
    background-color: var(--c-slate-50);
    border-color: var(--c-slate-400);
}
.pager .btn.disabled {
    opacity: .45;
    cursor: default;
}
.pager select {
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-slate-300);
}
/* the plugin renders each nav action twice: a bare <i> (direct child of .pager,
   used by older skins) and the same icon again inside a <button class="btn">.
   Hide only the bare direct-child copy — the descendant selector used to also
   catch (and blank out) the icon nested inside the button. */
.pager > i[class*="icon-"] {
    display: none;
}
.pagedisplay {
    flex: 1;
    text-align: center;
    margin: 0 4px;
    font-weight: 600;
    color: var(--c-slate-700);
}

/* pagination */
.pagination ul {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}
.pagination ul > li > a,
.pagination ul > li > span {
    border-color: var(--c-slate-200);
    color: var(--c-slate-700);
}
.pagination ul > .active > a {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
}

/* ---------------------------------------------------------------------- */
/* Navbar (top, horizontal)                                                */
/* The menu has 15-20+ top-level items with deep dropdowns, which overflows */
/* a single Bootstrap 2 navbar row. Rather than clipping/scrolling, the    */
/* item row is allowed to wrap onto extra lines (like a pill toolbar), and */
/* the bar is "sticky" (not "fixed") so its height can vary per user's     */
/* permissions without ever overlapping page content.                     */
/* ---------------------------------------------------------------------- */

.navbar.navbar-fixed-top {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.navbar .navbar-inner {
    /* sage green header base, with the menu items themselves reading in the
       darker green (see .navbar .nav > li > a below) */
    background: var(--c-sage);
    background-image: none;
    border: none;
    border-bottom: 1px solid var(--c-sage-border);
    box-shadow: 0 2px 16px rgba(15, 23, 42, .12);
    padding: 0;
}

.navbar .brand {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 18px;
    line-height: 1.2;
    letter-spacing: -.01em;
    color: var(--c-gold) !important;
    padding-top: 10px;
    padding-bottom: 8px;
}

.navbar .navbar-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--c-primary-active);
    font-size: 11px;
    font-weight: 600;
    margin: 0 10px;
    padding: 1px 10px;
    background: #fff;
    border: 1px solid var(--c-sage-border);
    border-radius: var(--radius-md);
}
.navbar .navbar-text > [class^="icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
}
.navbar .navbar-text .navbar-link {
    color: var(--c-primary-active);
    font-weight: 600;
}
.navbar .navbar-text .navbar-link:hover {
    color: var(--c-primary-hover);
}

/* item row wraps onto extra lines instead of overflowing/clipping */
.navbar .nav-collapse {
    clear: both;
}
.navbar .nav {
    float: none;
    margin: 0;
    padding: 2px 10px 6px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 3px;
}
.navbar .nav > li {
    float: none;
}
.navbar .nav > li > a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.92);
    font-weight: 600;
    font-size: 11px;
    padding: 6px 10px;
    /* darker purple pill on the purple header, echoing Odoo's navbar look */
    background: var(--c-primary-active);
    border: 1px solid var(--c-primary-active);
    border-radius: var(--radius-md);
    text-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.navbar .nav > li > a .caret {
    border-top-color: rgba(255,255,255,.8);
    transition: transform .15s ease;
}
.navbar .nav > li.open > a .caret {
    transform: rotate(180deg);
}
.navbar .nav > li > a:hover,
.navbar .nav > li.open > a,
.navbar .nav > li > a:focus {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: #fff;
}
.navbar .nav > li.active > a {
    background: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
    color: #fff;
}

/* Bootstrap's own .navbar-inverse styling (bootstrap.css) sets an open
   dropdown's toggle to a near-black background with a selector specific
   enough to beat the lighter ".navbar .nav > li.open > a" rule above —
   match it here so an open menu gets the same subtle light pill instead
   of a plain black one. */
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle {
    color: #fff;
    background-color: var(--c-primary-hover);
    border-color: var(--c-primary-hover);
}
.navbar-inverse .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar-inverse .nav li.dropdown.open.active > .dropdown-toggle .caret {
    border-top-color: #fff;
    border-bottom-color: #fff;
}

/* pills always sit on a dark green background, so menu icons stay on the
   white glyphicon sprite in every state. */
.navbar .nav > li > a > [class^="icon-"] {
    background-image: url("../img/glyphicons-halflings-white.png");
}

.navbar .nav .badge-info {
    /* the bar itself is now in the --c-primary family (see .navbar-inner
       above), so the badge needs a color outside that family to still pop
       instead of blending into its own background */
    background: var(--c-slate-900);
    vertical-align: middle;
}

/* dropdowns open as normal floating cards below their item, same treatment
   as any other dropdown-menu in the app (see generic rules below) */
.navbar .dropdown-menu {
    margin-top: 4px;
}

.dropdown-menu {
    border: 1px solid var(--c-slate-200);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 6px;
    margin-top: 6px;
}
.dropdown-menu li > a {
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    font-size: 12.5px;
    color: var(--c-slate-700);
    font-weight: 500;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus {
    background: var(--c-primary-light) !important;
    background-image: none !important;
    color: var(--c-primary-active) !important;
}
.dropdown-menu .divider {
    background-color: var(--c-slate-100);
    border-bottom: none;
    margin: 5px 0;
}
.dropdown-menu .nav-header {
    color: var(--c-slate-400);
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 700;
    padding: 6px 12px 2px;
}
.dropdown-submenu > .dropdown-menu {
    border-radius: var(--radius-md);
}
.dropdown-submenu > a:after {
    border-left-color: var(--c-slate-400);
}

@media (min-width: 980px) {
    .navbar .nav-collapse.collapse {
        height: auto !important;
        overflow: visible !important;
    }
}

/* ---------------------------------------------------------------------- */
/* Tabs                                                                    */
/* ---------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 2px solid var(--c-slate-200);
}
.nav-tabs > li > a {
    border: none;
    border-radius: 0;
    color: var(--c-slate-500);
    font-weight: 600;
    font-size: 12.5px;
    padding: 9px 16px;
    margin-right: 2px;
    background: transparent;
}
.nav-tabs > li > a:hover {
    background: var(--c-slate-100);
    border-color: transparent;
    color: var(--c-slate-800);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    color: var(--c-primary);
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--c-primary);
    margin-bottom: -2px;
}

/* ---------------------------------------------------------------------- */
/* Alerts / Badges / Labels                                                */
/* ---------------------------------------------------------------------- */

.alert {
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    border-left-width: 4px;
    box-shadow: var(--shadow-sm);
    padding: 12px 16px;
    font-size: 12.5px;
}
.alert-success { background: var(--c-success-bg); border-color: var(--c-success-border); border-left-color: var(--c-success); color: #14532d; }
.alert-error, .alert-danger { background: var(--c-danger-bg); border-color: var(--c-danger-border); border-left-color: var(--c-danger); color: #7f1d1d; }
.alert-info { background: var(--c-info-bg); border-color: var(--c-info-border); border-left-color: var(--c-info); color: #0c4a6e; }
.alert-warning { background: var(--c-warning-bg); border-color: var(--c-warning-border); border-left-color: var(--c-warning); color: #78350f; }

.badge {
    border-radius: 999px;
    font-weight: 700;
    font-size: 10.5px;
    padding: 3px 8px;
}
.badge-info { background: var(--c-primary); }
.badge-success { background: var(--c-success); }
.badge-warning { background: var(--c-warning); }
.badge-important { background: var(--c-danger); }

.label {
    border-radius: var(--radius-sm);
    font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Modals / Well / Panels                                                  */
/* ---------------------------------------------------------------------- */

.modal-backdrop {
    background: var(--c-slate-900);
}
.modal-backdrop.in { opacity: .55; }

.modal {
    border: none;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--c-slate-100);
    padding: 16px 20px;
}
.modal-header h3 {
    font-size: 16px;
}
.modal-body { padding: 20px; }
.modal-footer {
    background: var(--c-slate-50);
    border-top: 1px solid var(--c-slate-100);
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.well {
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------------------------------- */
/* Breadcrumbs                                                             */
/* ---------------------------------------------------------------------- */

.breadcrumb {
    background: var(--c-slate-50);
    border: 1px solid var(--c-slate-200);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    margin: 0 0 16px;
    font-size: 13px;
}
.breadcrumb .divider,
.breadcrumb li + li:before {
    color: var(--c-slate-400);
}
.breadcrumb .active {
    color: var(--c-slate-500);
    font-weight: 600;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

footer p {
    color: var(--c-slate-400);
    font-size: 11.5px;
    text-align: center;
}

/* ---------------------------------------------------------------------- */
/* Login page                                                              */
/* ---------------------------------------------------------------------- */

body.auth-body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background:
        radial-gradient(circle at 15% 15%, rgba(201, 151, 44, .3), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(45, 90, 61, .3), transparent 45%),
        linear-gradient(135deg, #1b1917 0%, #2b2926 45%, #3a362f 100%);
    background-attachment: fixed;
}

.auth-card {
    width: 100%;
    max-width: 380px;
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
    padding: 40px 36px 32px;
    text-align: center;
}

.auth-logo {
    width: 52px;
    height: 52px;
    margin: 0 auto 18px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--c-gold), var(--c-primary));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    box-shadow: 0 8px 20px rgba(201, 151, 44, .35);
}

.auth-card h2.form-signin-heading {
    font-size: 20px;
    margin: 0 0 2px;
}

.auth-subtitle {
    color: var(--c-slate-500);
    font-size: 12.5px;
    margin-bottom: 26px;
}

.auth-card .control-group {
    text-align: left;
    margin-bottom: 14px;
}
.auth-card label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--c-slate-500);
    margin-bottom: 5px;
}
.auth-card input[type="text"],
.auth-card input[type="password"] {
    width: 100%;
    padding: 10px 13px;
    font-size: 13.5px;
}

.auth-card .btn-primary {
    width: 100%;
    padding: 11px;
    font-size: 13.5px;
    border-radius: var(--radius-md);
    margin-top: 6px;
    box-shadow: 0 8px 20px rgba(45, 90, 61, .3);
}

.auth-footer {
    margin-top: 22px;
    font-size: 11px;
    color: var(--c-slate-400);
}

/* ---------------------------------------------------------------------- */
/* Legacy grid panels (search/filter bars)                                 */
/* Most of searchs/*.php wrap their filter fields in a Bootstrap 2         */
/* ".row > .offsetN.spanN" column, which only occupies a narrow, indented  */
/* slice of the row — leaving the panel misaligned with the full-width     */
/* table below it. Straightened out globally so both line up.             */
/* ---------------------------------------------------------------------- */

#pageContent .row {
    margin-left: 0;
    margin-right: 0;
}
.row > div[class*="offset"][class*="span"] {
    float: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center;
}
.row > div[class*="offset"][class*="span"] > form {
    display: inline-block;
    text-align: left;
}
#pageContent .row[style*="f5f5f5"] {
    background-color: var(--c-slate-50) !important;
    border: 1px solid var(--c-slate-200) !important;
}

/* ---------------------------------------------------------------------- */
/* Alertify.js (alert / confirm dialogs + toast notifications)             */
/* ---------------------------------------------------------------------- */

.alertify-cover {
    background: var(--c-slate-900) !important;
    opacity: .55 !important;
    filter: alpha(opacity=55) !important;
}

.alertify {
    top: 18%;
    background: #fff !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-lg) !important;
    background-clip: padding-box;
}

.alertify-dialog {
    padding: 30px 30px 24px;
}

.alertify-inner {
    text-align: center;
}

.alertify-text {
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--c-slate-800);
    margin-bottom: 22px;
}

/* when .alertify-text is an actual <input>/<textarea> (alertify.prompt) */
input.alertify-text,
textarea.alertify-text {
    width: 100%;
    text-align: left;
    border: 1px solid var(--c-slate-300);
    border-radius: var(--radius-md);
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--c-slate-800);
    box-sizing: border-box;
    margin-bottom: 18px;
}
input.alertify-text:focus,
textarea.alertify-text:focus {
    outline: none;
    border-color: var(--c-primary);
    box-shadow: var(--shadow-focus);
}

.alertify-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.alertify-button,
.alertify-button:hover,
.alertify-button:focus,
.alertify-button:active,
.alertify-button:visited {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .01em;
    padding: 9px 20px;
    margin-left: 0;
    border-radius: var(--radius-md);
    text-shadow: none !important;
    box-shadow: none !important;
    background-image: none !important;
    transition: background-color .15s ease, transform .05s ease;
}
.alertify-button:active { transform: translateY(1px); }
.alertify-button:focus { box-shadow: var(--shadow-focus) !important; }

.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus {
    background-color: var(--c-primary) !important;
    border: 1px solid var(--c-primary) !important;
    color: #fff !important;
}
.alertify-button-ok:hover { background-color: var(--c-primary-hover) !important; border-color: var(--c-primary-hover) !important; }

.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus {
    background-color: #fff !important;
    border: 1px solid var(--c-slate-300) !important;
    color: var(--c-slate-600) !important;
}
.alertify-button-cancel:hover { background-color: var(--c-slate-50) !important; border-color: var(--c-slate-400) !important; color: var(--c-slate-800) !important; }

.alertify-logs {
    z-index: 99999;
}
.alertify-log {
    font-family: var(--font-body);
    font-size: 12.5px;
    background: var(--c-slate-900) !important;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    box-shadow: var(--shadow-lg);
    text-shadow: none !important;
}
.alertify-log-error {
    background: var(--c-danger) !important;
}
.alertify-log-success {
    background: var(--c-success) !important;
}

/* ---------------------------------------------------------------------- */
/* App shell body padding                                                  */
/* the navbar is position:sticky (in normal flow), so it always reserves  */
/* exactly its own height — no fixed offset needed regardless of how many */
/* rows the menu wraps onto.                                              */
/* ---------------------------------------------------------------------- */

body:not(.auth-body) {
    padding-top: 0;
}

/* Bootstrap 2's .container is a fixed 940/1170px column — widen it (both
   the navbar's inner row and the page content/footer below it) so pages
   use more of the available screen width instead of leaving large empty
   margins on wider monitors. */
.navbar .container,
body:not(.auth-body) > .container {
    width: auto;
    /* 1920x1080 at Windows' common 125% display scaling renders as an
       effective ~1536px-wide viewport (1920 / 1.25), not the full 1920 —
       so this is sized to sit comfortably within that, not the raw panel
       resolution. */
    max-width: 1320px;
    padding-left: 20px;
    padding-right: 20px;
}

body:not(.auth-body) > .container {
    padding-top: 20px;
    padding-bottom: 14px;
}

#pageContent {
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
    padding: 20px 24px 24px;
}

#pageContent:empty {
    display: none;
}

#loading {
    filter: none;
}

/* ---------------------------------------------------------------------- */
/* blockUI ("Please wait...") — see assets/js/theme-modern.js for the      */
/* inline-style overrides this pairs with (border/background/shadow/font) */
/* ---------------------------------------------------------------------- */

.blockMsg {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.blockMsg:before {
    content: "";
    width: 26px;
    height: 26px;
    border: 3px solid var(--c-slate-200);
    border-top-color: var(--c-primary);
    border-radius: 50%;
    animation: theme-spin .7s linear infinite;
}
.blockMsg h1,
.blockMsg h4 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--c-slate-700);
    text-transform: none;
    letter-spacing: normal;
}

@keyframes theme-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .blockMsg:before {
        animation-duration: 1.6s;
    }
}

/* ---------------------------------------------------------------------- */
/* Print (voucher/invoice-style forms with a "Print" button, printed via   */
/* printThis.js — it clones the target container into an iframe and       */
/* copies over this stylesheet, so these rules apply there too)           */
/* ---------------------------------------------------------------------- */

@media print {
    /* no "size" here on purpose — declaring one makes Chrome hide the
       Layout (portrait/landscape) picker and collapse "More settings" in
       the print dialog, since it treats the page's own paper size as
       already fixed. Margin alone doesn't trigger that. */
    @page {
        margin: 12mm;
    }

    body {
        background: #fff !important;
        padding: 0 !important;
    }

    .navbar,
    .breadcrumb,
    .btn,
    .pager,
    #loading,
    .alert {
        display: none !important;
    }

    #pageContent {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
    }

    /* the on-screen horizontal-scroll wrapper (assets/js/theme-modern.js)
       must not clip/scroll content when printed — let it flow and fit the
       printed page width instead */
    .table-scroll {
        overflow: visible !important;
        width: auto !important;
        margin-bottom: 12px !important;
    }
    .table-scroll > .table,
    .table {
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100% !important;
    }
}