/*
 * Winbox theme — system-wide.
 *
 * A flat, compact, light grey-blue desktop-style interface: dense rows,
 * hairline borders, small type, and a quiet chrome so data carries the page.
 * Loaded after premium_global.css, so it intentionally overrides the rounded
 * "premium" look. Remove this one file from config/adminlte.php to revert.
 *
 * Primary: #007bc0 (Winbox blue)
 *
 * Deliberate departure from the reference system: icons inside page content
 * keep their own colours. Veteran uses colour to carry meaning there — green
 * for credit, red for arrears — and flattening it all to blue would lose
 * information. Only the chrome (sidebar, navbar) is recoloured.
 */

/* ==========================================
 * Global typography
 * ========================================== */
body,
html {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 13px !important;
    color: #1e293b !important;
    background-color: #f8fafc !important;
}

.content-wrapper,
.content-header,
.content,
.card,
.card-header,
.card-title,
.card-body,
.form-control,
.form-select,
.btn,
.modal-content,
.dropdown-menu,
.dropdown-item,
.main-header,
.navbar,
.nav-link {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif !important;
}

h1, .h1 { font-size: 18px !important; font-weight: 600 !important; color: #0f172a !important; }
h2, .h2 { font-size: 16px !important; font-weight: 600 !important; color: #1e293b !important; }
h3, .h3 { font-size: 15px !important; font-weight: 600 !important; color: #1e293b !important; }
h4, .h4 { font-size: 14px !important; font-weight: 600 !important; color: #334155 !important; }
h5, .h5 { font-size: 13px !important; font-weight: 600 !important; color: #334155 !important; }
h6, .h6 { font-size: 12px !important; font-weight: 600 !important; color: #475569 !important; }

.content-header { padding: 8px 12px !important; }
.content-header h1 { margin: 0 !important; }
.content { padding: 0 12px 12px !important; }

/* ==========================================
 * Cards — flat panels instead of rounded cards
 * ========================================== */
.card,
.card-clean,
.table-card {
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    margin-bottom: 10px !important;
}

.card-header,
.card-header-clean {
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 6px 12px !important;
    min-height: 0 !important;
}

.card-title {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 !important;
}

.card-body { padding: 10px 12px !important; }
.card-body.p-0 { padding: 0 !important; }
.card-footer { background-color: #f8fafc !important; border-top: 1px solid #cbd5e1 !important; padding: 6px 12px !important; }

/* Stat / KPI tiles: flat with a blue top stripe */
.stats-card,
.stat-card,
.small-box,
.info-box {
    border: 1px solid #cbd5e1 !important;
    border-radius: 3px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    position: relative;
    overflow: hidden;
    padding: 10px 12px !important;
    transition: box-shadow .12s ease, transform .12s ease;
}

.stats-card::before,
.stat-card::before,
.info-box::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: #007bc0;
}

.stats-card:hover,
.stat-card:hover,
.info-box:hover {
    box-shadow: 0 4px 14px rgba(0, 123, 192, .18) !important;
    transform: translateY(-2px);
}

.stats-label,
.stat-label {
    font-size: 10px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    color: #64748b !important;
}

.stats-value,
.stat-value {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
}

/* ==========================================
 * Tables — compact rows, alternating shading,
 * hairline separators, sticky header
 * ========================================== */
.table,
.table-clean,
.table-winbox {
    width: 100%;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
    font-family: "Segoe UI", sans-serif !important;
    font-size: 12.5px !important;
    color: #1a2332 !important;
    background-color: #ffffff !important;
    margin-bottom: 0 !important;
}

.table thead th,
.table > thead > tr > th {
    background-color: #d5dde6 !important;
    color: #1a2332 !important;
    font-weight: 700 !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .02em;
    padding: 6px 8px !important;
    border-top: 1px solid #b0bcc8 !important;
    border-bottom: 2px solid #b0bcc8 !important;
    border-right: 1px solid #c8d0d8 !important;
    white-space: nowrap;
    text-align: left !important;
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 5;
}

.table thead th:last-child { border-right: none !important; }

.table tbody tr {
    border-bottom: 1px solid #dde3e9 !important;
    transition: background-color .08s ease;
}

/* Shading is set on the cells: premium_global paints td backgrounds
   with !important and would otherwise win over a row-level rule. */
.table tbody tr:nth-child(odd) > td { background-color: #ffffff !important; }
.table tbody tr:nth-child(even) > td { background-color: #f0f4f8 !important; }
.table tbody tr:hover > td { background-color: #d6e8f7 !important; }

.table tbody td,
.table > tbody > tr > td {
    padding: 4px 8px !important;
    vertical-align: middle !important;
    border-right: 1px solid #dde3e9 !important;
    border-top: none !important;
    border-bottom: none !important;
    color: #1a2332;
    font-size: 12.5px !important;
    line-height: 1.35 !important;
}

.table tbody td:last-child { border-right: none !important; }

.table tbody tr.selected > td,
.table tbody tr.table-active > td { background-color: #b8d4ec !important; }

.clickable-row { cursor: pointer; }

/* Figures line up when digits share a width */
.table .num,
.table .text-right,
.table .text-end { font-variant-numeric: tabular-nums; }

.scrollable-table-container { max-height: 620px; overflow: auto; }

/* ==========================================
 * Forms
 * ========================================== */
.form-control,
.form-control-clean,
.custom-select,
.form-select {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    font-size: 12.5px !important;
    padding: 4px 8px !important;
    height: auto !important;
    min-height: 28px !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color: #1e293b !important;
}

.form-control:focus,
.form-control-clean:focus,
.form-select:focus {
    border-color: #007bc0 !important;
    box-shadow: 0 0 0 2px rgba(0, 123, 192, .15) !important;
}

.form-control-sm { min-height: 25px !important; padding: 2px 6px !important; }

label,
.form-label-clean {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 2px !important;
}

.input-group-text {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    background-color: #eef2f6 !important;
    font-size: 12.5px !important;
    padding: 4px 8px !important;
}

/* Select2 alignment with the flat inputs */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    min-height: 28px !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 26px !important;
    font-size: 12.5px !important;
    color: #1e293b !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow { height: 26px !important; }
.select2-dropdown { border: 1px solid #cbd5e1 !important; border-radius: 2px !important; }
.select2-results__option { font-size: 12.5px !important; padding: 4px 8px !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #007bc0 !important; }

/* ==========================================
 * Buttons and badges
 * ========================================== */
.btn {
    border-radius: 2px !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    box-shadow: none !important;
    transition: background-color .1s ease, border-color .1s ease;
}

.btn-sm { font-size: 11.5px !important; padding: 2px 8px !important; }
.btn-lg { font-size: 13px !important; padding: 6px 16px !important; }

.btn-primary,
.btn-clean-primary {
    background-color: #007bc0 !important;
    border-color: #007bc0 !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-clean-primary:hover {
    background-color: #005a8e !important;
    border-color: #005a8e !important;
}

.btn-light {
    background-color: #eef2f6 !important;
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
}

.btn-light:hover { background-color: #dce8f0 !important; color: #0f172a !important; }

.badge {
    border-radius: 2px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    padding: 2px 6px !important;
}

/* ==========================================
 * Top navbar
 * ========================================== */
.main-header.navbar {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-top: none !important;
    box-shadow: none !important;
}

.main-header.navbar .navbar-nav { align-items: center !important; height: 100% !important; }

.main-header.navbar .nav-link {
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 10px !important;
    border-radius: 2px !important;
    color: #334155 !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    transition: background-color .1s ease, color .1s ease;
}

.main-header.navbar .nav-link:hover { background-color: #e2e8f0 !important; color: #000000 !important; }
.main-header.navbar .nav-link i { color: #007bc0 !important; margin-right: 4px; font-size: 13px !important; }

/* ==========================================
 * Sidebar
 * ========================================== */
.main-sidebar,
.main-sidebar .sidebar {
    background-color: #eef2f6 !important;
    box-shadow: none !important;
    border-right: 1px solid #cbd5e1 !important;
}

.brand-link {
    height: 40px !important;
    line-height: 40px !important;
    padding: 0 14px !important;
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

.brand-link .brand-text {
    font-weight: 600 !important;
    font-size: 13px !important;
    color: #1e293b !important;
    line-height: 1 !important;
}

.brand-link .brand-image { max-height: 24px !important; margin-top: 0 !important; }

.user-panel {
    border-bottom: 1px solid #cbd5e1 !important;
    background-color: #eef2f6 !important;
    padding: 8px 14px !important;
    margin-bottom: 0 !important;
}

.user-panel .info a { color: #334155 !important; font-size: 13px !important; font-weight: 500 !important; }

.sidebar .nav-sidebar { padding: 0 !important; }
.nav-sidebar .nav-item { margin: 0 !important; padding: 0 !important; }

.nav-sidebar .nav-link {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 6px 14px !important;
    color: #2c3e50 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center;
    border-bottom: 1px solid rgba(203, 213, 225, .4) !important;
    transition: background-color .1s ease, color .1s ease;
}

.nav-sidebar .nav-link i.nav-icon,
.nav-sidebar .nav-link > i:first-child {
    color: #007bc0 !important;
    font-size: 14px !important;
    margin-right: 10px !important;
    width: 20px !important;
    text-align: center !important;
    display: inline-block !important;
}

.nav-sidebar .nav-link:hover { background-color: #e2e8f0 !important; color: #000000 !important; }

.nav-sidebar .nav-link.active,
.nav-sidebar .menu-open > .nav-link {
    background-color: #cbd5e1 !important;
    color: #000000 !important;
    font-weight: 600 !important;
}

.nav-sidebar .nav-link > p > i.right {
    transform: rotate(180deg) !important;
    color: #64748b !important;
    font-size: 10px !important;
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    margin-top: -5px !important;
    transition: transform .15s ease-in-out !important;
}

.nav-item.menu-open > .nav-link > p > i.right { transform: rotate(270deg) !important; color: #334155 !important; }

.nav-sidebar .nav-treeview {
    background-color: #f8fafc !important;
    border-left: 2px solid #cbd5e1 !important;
    margin-left: 18px !important;
    padding: 0 !important;
}

.nav-sidebar .nav-treeview .nav-link {
    padding: 5px 14px 5px 12px !important;
    font-size: 12.5px !important;
    color: #475569 !important;
    border-bottom: 1px solid rgba(203, 213, 225, .2) !important;
}

.nav-sidebar .nav-treeview .nav-link i.nav-icon,
.nav-sidebar .nav-treeview .nav-link > i:first-child {
    color: #007bc0 !important;
    font-size: 12px !important;
}

.form-control-sidebar {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #1e293b !important;
    border-radius: 2px !important;
    font-size: 13px !important;
    padding: 4px 8px !important;
}

.btn-sidebar {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    border-radius: 2px !important;
}

.btn-sidebar:hover { background-color: #e2e8f0 !important; color: #1e293b !important; }

/* ==========================================
 * Modals, dropdowns, pagination, alerts
 * ========================================== */
.modal-content,
.modal-content-clean {
    border: 1px solid #94a3b8 !important;
    border-radius: 3px !important;
    box-shadow: 0 10px 40px rgba(15, 23, 42, .3) !important;
}

.modal-header,
.modal-header-clean {
    background-color: #eef2f6 !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
}

.modal-title,
.modal-title-clean { font-size: 13px !important; font-weight: 700 !important; color: #1e293b !important; }

.modal-body,
.modal-body-clean { padding: 14px !important; }

.modal-footer,
.modal-footer-clean {
    background-color: #f8fafc !important;
    border-top: 1px solid #cbd5e1 !important;
    border-radius: 0 !important;
    padding: 8px 14px !important;
}

.dropdown-menu {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .12) !important;
    font-size: 12.5px !important;
    padding: 2px 0 !important;
}

.dropdown-item { padding: 5px 12px !important; font-size: 12.5px !important; }
.dropdown-item:hover { background-color: #e2e8f0 !important; }

.page-link {
    border: 1px solid #cbd5e1 !important;
    border-radius: 2px !important;
    color: #334155 !important;
    background-color: #eef2f6 !important;
    font-size: 12px !important;
    padding: 3px 9px !important;
    margin-left: 2px !important;
}

.page-item.active .page-link,
.page-link:hover {
    background-color: #007bc0 !important;
    border-color: #007bc0 !important;
    color: #ffffff !important;
}

.alert { border-radius: 2px !important; font-size: 12.5px !important; padding: 8px 12px !important; }

/* Semantic icon colours are preserved inside alerts */
.alert-success i { color: #15803d !important; }
.alert-danger i { color: #b91c1c !important; }
.alert-warning i { color: #b45309 !important; }
.alert-info i { color: #0369a1 !important; }

/* ==========================================
 * Scrollbars
 * ========================================== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }
::-webkit-scrollbar-track { background: #f0f4f8; }

.main-sidebar ::-webkit-scrollbar { width: 6px !important; }
.main-sidebar ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; }
.main-sidebar ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; }
.main-sidebar ::-webkit-scrollbar-track { background: transparent !important; }

/* ==========================================
 * Print — the thermal receipt must stay plain
 * ========================================== */
@media print {
    .modal-receipt-print,
    .modal-receipt-print * {
        font-family: monospace !important;
        background: #fff !important;
        color: #000 !important;
        border-color: #000 !important;
    }

    .modal-receipt-print .thermal-row { border: none !important; }
}

/* --------------------------------------------------------------------------
   Coloured tiles on a white ground

   The rule above deliberately forces every stat tile white so they sit flat
   on the page. What it did not account for is that the AdminLTE colour
   classes it overrides - bg-info, bg-success, bg-primary, bg-danger - also
   set the TEXT to white. That text was left behind: white on white, so the
   figure and its label vanished. Only bg-warning stayed readable, because
   AdminLTE gives it dark text to sit on yellow.

   The fix keeps the flat white design and brings the text back to the body
   colour. The variant's colour moves to the icon and the top stripe, where
   it still tells the tiles apart without needing a coloured background.
   -------------------------------------------------------------------------- */

.info-box[class*="bg-"],
.small-box[class*="bg-"] {
    color: #1f2d3d !important;
}

.info-box[class*="bg-"] .info-box-text,
.info-box[class*="bg-"] .info-box-number,
.info-box[class*="bg-"] .progress-description,
.small-box[class*="bg-"] h3,
.small-box[class*="bg-"] p {
    color: #1f2d3d !important;
}

.info-box[class*="bg-"] .info-box-text,
.small-box[class*="bg-"] p {
    color: #64748b !important;
}

.small-box[class*="bg-"] .small-box-footer {
    color: #64748b !important;
    background: rgba(15, 23, 42, .03) !important;
}

/* The icon block carried the colour as a background; on a white tile it needs
   to carry it as the icon's own colour instead. */
.info-box[class*="bg-"] .info-box-icon,
.small-box[class*="bg-"] .icon {
    background: transparent !important;
    color: #007bc0 !important;
}

.info-box.bg-info .info-box-icon,
.info-box.bg-gradient-info .info-box-icon,
.small-box.bg-info .icon,
.small-box.bg-gradient-info .icon            { color: #0ea5e9 !important; }

.info-box.bg-success .info-box-icon,
.info-box.bg-gradient-success .info-box-icon,
.small-box.bg-success .icon,
.small-box.bg-gradient-success .icon         { color: #16a34a !important; }

.info-box.bg-warning .info-box-icon,
.info-box.bg-gradient-warning .info-box-icon,
.small-box.bg-warning .icon,
.small-box.bg-gradient-warning .icon         { color: #d97706 !important; }

.info-box.bg-danger .info-box-icon,
.info-box.bg-gradient-danger .info-box-icon,
.small-box.bg-danger .icon,
.small-box.bg-gradient-danger .icon          { color: #dc2626 !important; }

.info-box.bg-secondary .info-box-icon,
.small-box.bg-secondary .icon                { color: #64748b !important; }

/* The stripe along the top picks up the same colour, so the tile still reads
   as "the green one" at a glance. */
.info-box.bg-success::before,
.info-box.bg-gradient-success::before        { background-color: #16a34a !important; }
.info-box.bg-warning::before,
.info-box.bg-gradient-warning::before        { background-color: #d97706 !important; }
.info-box.bg-danger::before,
.info-box.bg-gradient-danger::before         { background-color: #dc2626 !important; }
.info-box.bg-info::before,
.info-box.bg-gradient-info::before           { background-color: #0ea5e9 !important; }

/* Badges and buttons inside a tile keep their own colouring - they are not
   affected by the white ground and should stay legible. */
.info-box .badge,
.small-box .badge {
    color: #ffffff !important;
}