/* App font (Kausar, 2026-10-13): Verdana; Tahoma / the device's sans-serif where Verdana
   isn't installed (Android). PDFs keep their own DejaVu Sans. */
:root {
    --bs-body-font-family: Verdana, Tahoma, Geneva, sans-serif;
    /* Verdana is wide/tall, so 14px reads like the old 16px Segoe UI. */
    --bs-body-font-size: 0.875rem;
}
.form-control,
.form-select,
.input-group-text {
    font-size: 0.875rem;
}
.btn {
    --bs-btn-font-size: 0.875rem;
}

/* Page titles (record name, module name): smaller than Bootstrap's 2.5rem h1 —
   24px on phones, 28px from tablet width up. Classes like .display-1 / .h3 / .fs-4 still win. */
main h1 {
    font-size: 1.5rem;
    font-weight: 600;
}
@media (min-width: 768px) {
    main h1 {
        font-size: 1.75rem;
    }
}

main > .container {
    /* Start below the fixed navbar's real height (set by navbar-autohide.js; 70px fallback). */
    padding: calc(var(--ke-nav-height, 60px) + 10px) 15px 20px;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

/* Every Create/Edit form (User, Item Category/Sub Category, UOM, Item
   Details): capped width so fields stay grouped together on a big
   monitor instead of stretching edge-to-edge with huge dead gaps between
   related fields. Section labels (optional, for forms with several
   logical groups) match the nav dropdown-header's green small-caps look. */
.ke-form-card {
    max-width: 760px;
}

.ke-form-section {
    color: var(--ke-green-mid);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
    margin: 1.5rem 0 .75rem;
}

.ke-form-section:first-child {
    margin-top: 0;
}

.not-set {
    color: var(--bs-danger);
    font-style: italic;
}

/* add sorting icons to gridview sort links */
a.asc:after, a.desc:after {
    content: '';
    left: 3px;
    display: inline-block;
    width: 0;
    height: 0;
    border: solid 5px transparent;
    margin: 4px 4px 2px 4px;
    background: transparent;
}

a.asc:after {
    border-bottom: solid 7px var(--bs-body-color);
    border-top-width: 0;
}

a.desc:after {
    border-top: solid 7px var(--bs-body-color);
    border-bottom-width: 0;
}

.grid-view th {
    white-space: nowrap;
}

.hint-block {
    display: block;
    margin-top: 5px;
    color: var(--bs-secondary-color);
}

.error-summary {
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border-left: 3px solid var(--bs-danger-border-subtle);
    padding: 10px 20px;
    margin: 0 0 15px 0;
}

/* align navbar brand baseline with nav links */
.navbar > .container,
.navbar > .container-fluid {
    align-items: baseline;
}

/* align the logout "link" (button in form) of the navbar */
.nav li > form > button.logout {
    color: var(--bs-navbar-color);
}

@media (max-width: 1399.98px), (max-height: 599.98px) {
    .navbar-nav .nav-link.logout {
        display: block;
        text-align: left;
        width: 100%;
        padding: 10px 0;
    }
}

.navbar-nav .nav-link.logout:focus,
.navbar-nav .nav-link.logout:hover {
    color: var(--bs-navbar-hover-color);
}

/* footer logo: light logo by default (light bg-body-tertiary), dark logo for dark theme */
.footer-logo-dark { display: none; }

[data-bs-theme="dark"] .footer-logo-light { display: none; }
[data-bs-theme="dark"] .footer-logo-dark  { display: inline-block; }

/* login inputs: seamless icon inside input (Volt style) */
.login-split-card .input-group {
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.login-split-card .input-group .input-group-text {
    background: transparent;
    border: 0;
    padding-left: 1rem;
    padding-right: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-split-card .input-group .form-control {
    border: 0;
    background: transparent;
}

.login-split-card .input-group .form-control:focus {
    box-shadow: none;
}

.login-split-card .input-group:focus-within {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

/* validation styles for login split card (browsers with :has()) */
@supports selector(.input-group:has(.is-invalid)) {
    .login-split-card .input-group:has(.is-invalid) ~ .invalid-feedback {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group:has(.is-invalid) {
        border-color: var(--bs-danger);
    }

    .login-split-card .input-group:has(.is-invalid):focus-within {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* fallback validation styles for login split card (browsers without :has()) */
@supports not selector(.input-group:has(.is-invalid)) {
    .login-split-card .invalid-feedback:not(:empty) {
        display: block;
        margin-top: .35rem;
        margin-bottom: .5rem;
    }

    .login-split-card .input-group .form-control.is-invalid {
        border: var(--bs-border-width) solid var(--bs-danger);
    }

    .login-split-card .input-group .form-control.is-invalid:focus {
        box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25);
    }
}

/* login split card */
.login-split-card {
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, .10);
    background-color: var(--bs-gray-100);
    width: 100%;
    max-width: 900px;
}

.login-split-card-wide {
    max-width: 960px;
}

.login-brand-title {
    font-size: 1.75rem;
    line-height: 1.3;
}

.login-brand-text {
    font-size: .9rem;
}

.login-brand-panel {
    background: linear-gradient(135deg, var(--ke-green-mid) 0%, var(--ke-green-deep) 65%, #163019 100%);
    position: relative;
    min-height: 480px;
}

.login-brand-panel::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(220, 232, 214, .18) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(220, 232, 214, .14) 0%, transparent 40%);
    pointer-events: none;
}

.login-logo-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: .6rem;
    padding: .5rem .65rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}

.login-logo-chip-mobile {
    padding: .4rem .55rem;
}

/* The full illustrated badge logo (login page's desktop brand panel only —
   the small flat "KE" monogram stays everywhere else: navbar, favicon,
   mobile login). It's detailed enough to need real size to read well, but
   the panel isn't infinitely tall, so cap it rather than let it dominate. */
.login-badge-logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
}

/* The badge's own darker-green sub-text ("Enterprise", the tagline, the
   Kundasang/Sabah line) reads fine on white but disappears against the
   panel's dark green gradient — its outline halo covers the bright script
   wordmark but not those. Give the whole badge a light plate to sit on,
   same idea as .login-logo-chip, just sized for a much bigger mark. */
.login-badge-plate {
    display: inline-block;
    background: linear-gradient(180deg, #ffffff, #eef4ec);
    border-radius: 1.25rem;
    padding: 1rem 1.25rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}

.login-btn {
    background: linear-gradient(135deg, var(--ke-green-mid), var(--ke-green-deep));
    border: none;
    font-weight: 600;
    letter-spacing: .02em;
    transition: opacity .2s, transform .1s;
}

.login-btn:hover {
    opacity: .9;
    transform: translateY(-1px);
}

.login-btn:active {
    transform: translateY(0);
}

/* dark mode login card */
[data-bs-theme="dark"] .login-split-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 4px 24px rgba(0, 0, 0, .4);
}

/* contact form textarea height */
.site-contact textarea.form-control {
    height: 140px;
}

/* captcha: blend with card background */
.site-contact img[src*="captcha"] {
    border-radius: var(--bs-border-radius);
    mix-blend-mode: multiply;
}

/* dark mode: invert captcha for visibility on dark background */
[data-bs-theme="dark"] .site-contact img[src*="captcha"] {
    mix-blend-mode: screen;
    filter: invert(1) hue-rotate(180deg);
}

/* centered page layout */
.site-login,
.site-contact,
.site-index,
.site-error,
.site-about,
.site-contact-success {
    flex: 1;
}

.site-error .site-error-content,
.site-about .site-about-content,
.site-contact-success .site-contact-success-content {
    width: 100%;
    max-width: 90%;
}

@media (min-width: 576px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 80%;
    }
}

@media (min-width: 768px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 60%;
    }
}

@media (min-width: 992px) {
    .site-error .site-error-content,
    .site-about .site-about-content,
    .site-contact-success .site-contact-success-content {
        max-width: 50%;
    }
}

/* hero banner */
.hero-banner {
    background: linear-gradient(135deg, #83C933 0%, #3a9cbd 40%, #40B3D8 100%);
    position: relative;
}

.hero-lead {
    max-width: 520px;
}

.hero-logo {
    height: 120px;
    opacity: .45;
    right: 2.5rem;
    top: 50%;
    transform: translateY(-50%);
}

.hero-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 15% 85%, rgba(241, 138, 42, .3) 0%, transparent 45%),
        radial-gradient(circle at 85% 15%, rgba(131, 201, 51, .25) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(64, 179, 216, .15) 0%, transparent 60%);
    pointer-events: none;
}

/* extension cards */
.extension-card {
    transition: transform .15s ease-in-out, box-shadow .15s ease-in-out;
}

.extension-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}

.extension-icon {
    font-size: 1.5rem;
    line-height: 1;
}

/* dark mode: extension cards */
[data-bs-theme="dark"] .extension-card {
    background-color: var(--bs-body-bg);
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 2px 8px rgba(0, 0, 0, .3);
}

[data-bs-theme="dark"] .extension-card:hover {
    box-shadow: 0 0 0 1px var(--bs-border-color), 0 8px 24px rgba(0, 0, 0, .4) !important;
}

/* ============================================================
   Kausar Enterprise brand — green & white
   Same palette as the KEERP Field Guide reference page, so the
   ERP itself and the reference docs read as one system.
   ============================================================ */
:root {
    --ke-green-deep: #234a2e;
    --ke-green-mid: #3e7a46;
    --ke-green-pale: #dce8d6;
    --ke-navbar-bg: #234a2e;
}

.ke-navbar {
    background-color: var(--ke-navbar-bg) !important;
}

.ke-navbar .navbar-brand {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.ke-brand-logo {
    height: 34px;
    width: auto;
    display: block;
    padding: .2rem;
    border-radius: .4rem;
    background: #ffffff;
}

.ke-brand-text {
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ke-navbar .nav-link:hover,
.ke-navbar .nav-link:focus,
.ke-navbar .navbar-brand:hover,
.ke-navbar .navbar-brand:focus {
    color: var(--ke-green-pale) !important;
}

.ke-navbar .dropdown-menu {
    --bs-dropdown-link-active-bg: var(--ke-green-mid);
    --bs-dropdown-link-hover-bg: var(--ke-green-pale);
}

.ke-navbar .dropdown-header {
    color: var(--ke-green-mid);
    font-weight: 600;
    text-transform: uppercase;
    font-size: .72rem;
    letter-spacing: .04em;
}

/* Fixed navbar + a long Admin dropdown (User Management, Item Master...):
   on mobile the expanded menu can be taller than the viewport. Since the
   navbar is fixed-top, the open menu is fixed-positioned too, so ordinary
   page scrolling can't reach the lower items — give the menu its own
   scroll region instead. Bootstrap also renders a nav dropdown as an
   absolutely-positioned overlay by default, which the same page scroll
   can't reach either; forcing it static lets it flow inline inside the
   already-scrollable collapse area. */
@media (max-width: 1399.98px), (max-height: 599.98px) {
    .ke-navbar .navbar-collapse.show,
    .ke-navbar .navbar-collapse.collapsing {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }

    .ke-navbar .navbar-nav .dropdown-menu {
        position: static;
    }
}

/* A wide but SHORT screen (e.g. a small laptop window) also gets the ☰ button —
   Bootstrap's navbar-expand-xxl only looks at width, so force the collapsed
   layout here when the height is under 600px. */
@media (min-width: 1400px) and (max-height: 599.98px) {
    .ke-navbar.navbar-expand-xxl {
        flex-wrap: wrap;
    }
    .ke-navbar.navbar-expand-xxl .navbar-toggler {
        display: block;
    }
    .ke-navbar.navbar-expand-xxl .navbar-collapse {
        flex-basis: 100%;
    }
    .ke-navbar.navbar-expand-xxl .navbar-collapse:not(.show):not(.collapsing) {
        display: none !important;
    }
    .ke-navbar.navbar-expand-xxl .navbar-nav {
        flex-direction: column;
    }
}

/* Hide-on-scroll (web/js/navbar-autohide.js): the bar slides up while
   scrolling down and comes back on any scroll up. --ke-nav-offset is the space
   the bar currently takes, used by sticky elements (e.g. .ke-assign-search). */
.ke-navbar {
    transition: transform .25s ease;
}
.ke-navbar.ke-navbar-hidden {
    transform: translateY(-100%);
}

/* Full (wide-screen) menu: tighter spacing so all 14 groups fit on one line. */
@media (min-width: 1400px) and (min-height: 600px) {
    .ke-navbar .navbar-nav .nav-link {
        padding-left: .45rem !important;
        padding-right: .45rem !important;
        font-size: .95rem;
    }
    .ke-navbar .ke-brand-text {
        font-size: 1.05rem;
    }
}

/* LOA badges, used in the User list */
.ke-loa-badge {
    display: inline-block;
    padding: .25em .6em;
    border-radius: .35rem;
    font-size: .8rem;
    font-weight: 600;
    background: var(--ke-green-pale);
    color: var(--ke-green-deep);
}

.ke-status-active {
    color: var(--ke-green-mid);
    font-weight: 600;
}

.ke-status-inactive {
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Small pulsing dot next to the footer's "N people online now" count. */
.ke-online-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ke-green-mid);
    margin-right: 4px;
    animation: ke-online-pulse 2s ease-in-out infinite;
}

@keyframes ke-online-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
    .ke-online-dot {
        animation: none;
    }
}

@media (max-width: 480px) {
    .ke-brand-text {
        display: none;
    }
}

/* Grid row actions (view/edit/deactivate) — sized as real tap targets
   so they're easy to hit on a phone/tablet, not just a mouse cursor. */
.ke-actions-cell {
    white-space: nowrap;
}

/* Row buttons (view / edit / deactivate …): line icon in a soft oval (Kausar, 2026-10-13).
   Icons come from app\helpers\Icon (inline SVG, currentColor). */
.ke-grid-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 2.25rem;
    margin: .15rem;
    border-radius: 999px;
    border: 1px solid var(--bs-border-color);
    background: var(--bs-tertiary-bg);
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none;
    color: var(--bs-secondary-color);
    transition: background .15s, color .15s, border-color .15s;
}
.ke-grid-action .ke-icon {
    width: 1.15rem;
    height: 1.15rem;
}

.ke-grid-action:hover,
.ke-grid-action:focus {
    background: var(--ke-green-pale);
    border-color: var(--ke-green-mid);
    color: var(--ke-green-deep);
}

.ke-grid-action-danger {
    color: var(--bs-danger);
}
/* Generate Invoice on a Ready order (Order Dashboard) — filled green so it stands out. */
.ke-grid-action-go {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}
.ke-grid-action-go:hover,
.ke-grid-action-go:focus {
    background: var(--bs-success-text-emphasis);
    border-color: var(--bs-success-text-emphasis);
    color: #fff;
}
.ke-grid-action-danger:hover,
.ke-grid-action-danger:focus {
    background: var(--bs-danger-bg-subtle);
    border-color: var(--bs-danger-border-subtle);
    color: var(--bs-danger);
}

/* Type-to-filter combobox — see web/js/searchable-select.js. Swaps in over
   a long <select> (e.g. "Same Product As") once the item list gets big
   enough that scrolling through a plain dropdown becomes impractical. */
.ke-searchable-select {
    position: relative;
}

.ke-searchable-select-list {
    position: absolute; /* searchable-select.js moves it to <body> and places it in page coordinates when it opens */
    z-index: 1025; /* above tables/cards, just below the fixed navbar (1030) */
    top: 100%;
    left: 0;
    right: 0;
    max-height: 280px;
    overflow-y: auto;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    margin-top: .25rem;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}

.ke-searchable-select-item {
    padding: .5rem .85rem;
    cursor: pointer;
}

.ke-searchable-select-item.active,
.ke-searchable-select-item:hover {
    background: var(--ke-green-pale);
    color: var(--ke-green-deep);
}

.ke-searchable-select-empty-option {
    color: var(--bs-secondary-color);
    border-bottom: 1px solid var(--bs-border-color);
}

.ke-searchable-select-more {
    padding: .5rem .85rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
    font-style: italic;
}

/* Yii2's default LinkPager markup predates Bootstrap 5's .page-link/.page-item
   pattern, so its plain <a> tags get none of Bootstrap 5's pagination styling
   out of the box — this reproduces a button-like, easy-to-tap look for it
   directly, site-wide, without touching every GridView's pager config. */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding-left: 0;
    margin: 1rem 0;
    list-style: none;
}

.pagination li {
    list-style: none;
}

.pagination li > a,
.pagination li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5rem;
    height: 2.5rem;
    padding: 0 .6rem;
    border: 1px solid #d7ded9;
    border-radius: .5rem;
    color: var(--ke-green-deep);
    text-decoration: none;
    font-weight: 500;
}

.pagination li > a:hover,
.pagination li > a:focus {
    background: var(--ke-green-pale);
    border-color: var(--ke-green-mid);
}

.pagination li.active > a,
.pagination li.active > span {
    background: var(--ke-green-deep);
    border-color: var(--ke-green-deep);
    color: #fff;
}

.pagination li.disabled > a,
.pagination li.disabled > span {
    color: #aaa;
    border-color: #eee;
    pointer-events: none;
}

/* Assign-items screens: search box stays pinned under the fixed navbar while the long item list scrolls. */
/* Action buttons pinned to the bottom of the screen on long tick lists (Assign Items) */
.ke-sticky-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.6rem 0;
    background: var(--bs-body-bg);
    border-top: 1px solid var(--bs-border-color);
    box-shadow: 0 -6px 10px -8px rgba(0, 0, 0, .25);
}

.ke-assign-search {
    position: sticky;
    top: var(--ke-nav-offset, 70px); /* follows the navbar as it hides/shows */
    transition: top .25s ease;
    z-index: 5;
    background: var(--bs-body-bg);
    padding: 0.5rem 0;
    margin-bottom: 0.75rem;
}

/* KEERP's own confirmation box (web/js/ke-confirm.js) — replaces the browser's confirm() pop-up. */
.ke-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1060; /* above the navbar (1030) and dropdowns */
    background: rgba(20, 35, 24, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.ke-confirm-backdrop[hidden] {
    display: none;
}
.ke-confirm-box {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    border-radius: .75rem;
    box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .3);
    width: 100%;
    max-width: 440px;
    padding: 1.25rem 1.25rem 1rem;
    border-top: 5px solid var(--ke-green-mid);
}
.ke-confirm-title {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .5rem;
    color: var(--ke-green-deep);
}
[data-bs-theme="dark"] .ke-confirm-title {
    color: var(--ke-green-pale);
}
.ke-confirm-message {
    margin-bottom: 1.1rem;
    line-height: 1.45;
    white-space: pre-line;
}
.ke-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: .5rem;
    flex-wrap: wrap;
}
.ke-confirm-actions .btn {
    min-width: 6.5rem;
    min-height: 2.75rem; /* easy to tap on a phone */
}
body.ke-confirm-open {
    overflow: hidden;
}
/* KE logo in the confirmation box header — same white "chip" as the navbar logo. */
.ke-confirm-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: .6rem;
}
.ke-confirm-head .ke-confirm-title {
    margin-bottom: 0;
}
.ke-confirm-logo {
    display: inline-flex;
    flex: 0 0 auto;
    padding: .2rem;
    border-radius: .45rem;
    background: #ffffff;
    box-shadow: 0 0 0 1px var(--bs-border-color);
}
.ke-confirm-logo[hidden] {
    display: none;
}
.ke-confirm-logo img {
    height: 30px;
    width: auto;
    display: block;
}
/* Bigger emoji icon inside a button (e.g. 🛒 New Order on the customer page). */
.ke-btn-icon-lg {
    font-size: 1.35rem;
    line-height: 1;
}

/* Order page: "weigh it" note for a biji / ikat line — its own row under the line, from Qty across to
   the buttons, red text in a light red box (Kausar, 2026-10-14). */
.ke-has-weigh > td { border-bottom-width: 0; }
/* Order lines are striped per LINE (not per table row), so a weigh row shares its item row's colour (Kausar 2026-10-17). */
.ke-lines > tbody > tr.ke-stripe > * { --bs-table-bg-type: var(--bs-table-striped-bg); }
.ke-weigh-row > td { padding-top: 0; }
.ke-weigh-note {
    display: inline-block;
    color: var(--bs-danger-text-emphasis);
    background: var(--bs-danger-bg-subtle);
    border: 1px solid var(--bs-danger-border-subtle);
    border-radius: .375rem;
    padding: .2rem .6rem;
    font-weight: 600;
    font-size: .8125rem;
}
/* # row number on line tables (2026-10-18): <table class="ke-numbered"> + a first <td class="ke-rownum"> per row; renumbers itself when JS adds/removes rows. */
.ke-numbered tbody { counter-reset: ke-row; }
.ke-numbered tbody tr { counter-increment: ke-row; }
.ke-numbered td.ke-rownum { color: var(--bs-secondary-color); font-size: .8125rem; }
.ke-numbered td.ke-rownum::before { content: counter(ke-row); }

/* Section bar under the breadcrumb — the other pages of this menu group (2026-10-18). */
.ke-section-nav { font-size: .8125rem; display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; margin-top: -.5rem; }
.ke-section-nav .ke-section-label { color: var(--bs-secondary-color); }
.ke-section-nav .ke-section-link { display: inline-block; padding: .25rem .7rem; border: 1px solid var(--bs-border-color); border-radius: 50rem; background: var(--bs-tertiary-bg); color: var(--bs-body-color); text-decoration: none; line-height: 1.4; }
.ke-section-nav a.ke-section-link:not(.active):hover { border-color: var(--ke-green-mid); color: var(--ke-green-deep); background: var(--ke-green-pale); }
.ke-section-nav .ke-section-link.active { background: var(--ke-green-mid); border-color: var(--ke-green-mid); color: #fff; font-weight: 600; }

/* Cash Sale till (views/cash-sale/_form.php + js/cash-sale-till.js, 2026-10-21) */
.ke-till kbd { font-size: .65em; padding: .05rem .3rem; opacity: .75; }
.ke-till-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: .4rem; }
.ke-till-qbtn {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; text-align: left;
    padding: .35rem .5rem; line-height: 1.2;
    border: 1px solid var(--bs-border-color); background: var(--bs-tertiary-bg);
}
.ke-till-qbtn:hover, .ke-till-qbtn:focus { border-color: var(--bs-success); background: var(--bs-success-bg-subtle); }
.ke-till-qbtn.pinned { border-left: 3px solid var(--bs-success); }
.ke-till-qname { font-weight: 600; font-size: .85rem; max-width: 100%; padding-right: .6rem; overflow-wrap: anywhere; } /* full name, wraps — grades must show */
.ke-till-unpin { position: absolute; top: 0; right: .3rem; color: var(--bs-secondary-color); font-size: .9rem; }
.ke-till-unpin:hover { color: var(--bs-danger); }
.ke-till-list {
    position: absolute; z-index: 1025; left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5);
    min-width: min(460px, 90vw); max-height: 340px; overflow-y: auto;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: .5rem;
    margin-top: .25rem; box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.ke-till-opt { display: flex; align-items: center; gap: .5rem; padding: .35rem .6rem; cursor: pointer; }
.ke-till-opt:hover, .ke-till-opt.active { background: var(--bs-success-bg-subtle); }
.ke-till-star { border: 0; background: none; padding: 0 .15rem; color: var(--bs-warning); font-size: 1.05rem; line-height: 1; }
.ke-till-total { font-size: 2.3rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ke-till-change { font-size: 1.5rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ke-till-lines input { min-width: 70px; }
@media (max-width: 767.98px) { .ke-till kbd { display: none; } }

/* Cash Sale till: note-style cash buttons in each Ringgit note's colour (not pictures of real notes) */
.ke-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; }
.ke-note {
    position: relative; height: 2.4rem; border: 0; border-radius: .3rem; color: #fff; font-weight: 700; font-size: 1.05rem;
    letter-spacing: .02em; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .25);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .35);
}
.ke-note small { font-size: .65em; font-weight: 600; margin-right: .15em; opacity: .9; }
.ke-note:hover { filter: brightness(1.08); }
.ke-note:active { transform: scale(.96); }
.ke-note-1 { background: #2563a8; }
.ke-note-5 { background: #2f8a4c; }
.ke-note-10 { background: #c0392b; }
.ke-note-20 { background: #e07b1a; }
.ke-note-50 { background: #1f7f86; }
.ke-note-100 { background: #6c3fa8; }

/* Every printed page (Kausar 2026-10-24, dot-matrix): Verdana 8pt, pure black — sharper and more professional; titles
   10pt (headings and anything set at 14–19px or 10pt inline in the document bodies). The thermal cash receipt keeps its
   own Lucida Console sizes (.ke-thermal). Browser printing only — the Dompdf PDFs don't load this file. */
@media print {
    /* :where() keeps these at the lowest weight so the 10pt title rule below wins */
    body, body :where(:not(.ke-thermal, .ke-thermal *)) { font-family: Verdana, Tahoma, sans-serif !important; color: #000 !important; }
    body :where(:not(.ke-thermal, .ke-thermal *)) { font-size: 8pt !important; }
    body h1:not(.ke-thermal *), body h2:not(.ke-thermal *), body h3:not(.ke-thermal *), body h4:not(.ke-thermal *),
    [style*="font-size:10pt"], [style*="font-size:14px"], [style*="font-size: 14px"], [style*="font-size:15px"],
    [style*="font-size: 15px"], [style*="font-size:16px"], [style*="font-size: 16px"], [style*="font-size:18px"],
    [style*="font-size: 18px"], [style*="font-size:19px"], [style*="font-size: 19px"] { font-size: 10pt !important; }
}