/* =========================================================
   FNM-BMS
   FNM Automotive Ltd.
   Main Application Stylesheet
   ========================================================= */


/* =========================================================
   1. VARIABLES
   ========================================================= */

:root {
    --primary: #1769e0;
    --primary-dark: #1254b8;
    --primary-light: #eef5ff;

    --text: #172033;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;

    --background: #f6f8fb;
    --white: #ffffff;

    --border: #e2e8f0;
    --border-light: #edf1f5;

    --danger: #dc2626;
    --success: #16a34a;

    --topbar-height: 64px;
    --footer-height: 48px;
    --sidebar-width: 250px;

    --radius-sm: 7px;
    --radius: 10px;
    --radius-lg: 16px;

    --shadow-sm:
        0 1px 3px rgba(15, 23, 42, 0.05);

    --shadow:
        0 8px 24px rgba(15, 23, 42, 0.08);

    --shadow-lg:
        0 20px 48px rgba(15, 23, 42, 0.14);

    --ring: 0 0 0 3px rgba(23, 105, 224, 0.14);

    --font:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Arial,
        sans-serif;
}


/* =========================================================
   2. RESET
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    width: 100%;
    height: 100%;

    margin: 0;
    padding: 0;

    -webkit-text-size-adjust: 100%;
}


body {
    width: 100%;
    min-height: 100%;

    margin: 0;
    padding: 0;

    color: var(--text);
    background: var(--background);

    font-family: var(--font);
    font-size: 14px;
    line-height: 1.5;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}


button,
input,
select,
textarea {
    font: inherit;
}


button {
    cursor: pointer;
}


a {
    color: inherit;
    text-decoration: none;
}


img {
    max-width: 100%;
    height: auto;
}


ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}


button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(23, 105, 224, 0.18);
    outline-offset: 2px;
}


/* =========================================================
   3. LOGIN PAGE
   ========================================================= */

.bms-login-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 30px 20px;

    background:
        radial-gradient(circle at 0% 0%,
            rgba(23, 105, 224, 0.08),
            transparent 32%),
        var(--background);
}


.bms-login-container {
    width: 100%;
    max-width: 430px;
}


.bms-login-card {
    width: 100%;

    padding: 42px;

    background: var(--white);

    border: 1px solid #e4e9ef;
    border-radius: var(--radius-lg);

    box-shadow:
        0 20px 45px rgba(15, 23, 42, 0.08),
        0 2px 8px rgba(15, 23, 42, 0.03);
}


/* =========================================================
   4. LOGIN BRAND
   ========================================================= */

.bms-login-brand {
    margin-bottom: 38px;
}


.bms-login-logo {
    display: block;

    width: auto;
    height: 52px;

    max-width: 210px;

    margin-bottom: 13px;

    object-fit: contain;
}


.bms-login-system {
    display: flex;
    align-items: center;

    gap: 6px;

    color: #7b8798;

    font-size: 12px;
}


.bms-login-system strong {
    color: var(--text);
    font-weight: 650;
}


.bms-login-system span {
    color: #8b96a6;
}


/* =========================================================
   5. LOGIN HEADING
   ========================================================= */

.bms-login-heading {
    margin-bottom: 27px;
}


.bms-login-heading h1 {
    margin: 0 0 7px;

    color: var(--text);

    font-size: 25px;
    font-weight: 650;

    letter-spacing: -0.45px;
}


.bms-login-heading p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 13.5px;
}


/* =========================================================
   6. LOGIN ERROR
   ========================================================= */

.bms-login-error {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 20px;
    padding: 11px 13px;

    color: #991b1b;

    background: #fff5f5;

    border: 1px solid #fecaca;
    border-radius: 8px;

    font-size: 13px;
}


.bms-error-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 20px;

    width: 20px;
    height: 20px;

    color: #ffffff;

    background: var(--danger);

    border-radius: 50%;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================================
   7. LOGIN FORM
   ========================================================= */

.bms-input-group {
    margin-bottom: 19px;
}


.bms-input-group label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 12.5px;
    font-weight: 600;
}


.bms-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 7px;
}


.bms-label-row label {
    margin: 0;
}


.bms-forgot-link {
    color: var(--primary);

    font-size: 12px;
    font-weight: 600;
}


.bms-forgot-link:hover {
    color: var(--primary-dark);
}


/* =========================================================
   8. LOGIN INPUTS
   ========================================================= */

.bms-input-wrapper {
    position: relative;

    display: flex;
    align-items: center;

    width: 100%;
}


.bms-input-icon {
    position: absolute;
    left: 13px;

    display: flex;
    align-items: center;

    color: #94a3b8;

    pointer-events: none;
}


.bms-login-input {
    width: 100%;
    height: 46px;

    padding: 0 13px 0 42px;

    color: var(--text);

    background: #ffffff;

    border: 1px solid #d6dde6;
    border-radius: 8px;

    outline: none;

    font-size: 13.5px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.bms-login-input::placeholder {
    color: #a4afbd;
}


.bms-login-input:hover {
    border-color: #b7c2d0;
}


.bms-login-input:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, 0.10);
}


.bms-password-input {
    padding-right: 45px;
}


/* =========================================================
   9. PASSWORD TOGGLE
   ========================================================= */

.bms-password-toggle {
    position: absolute;
    right: 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    padding: 0;

    color: #94a3b8;

    background: transparent;

    border: 0;
    border-radius: 6px;
}


.bms-password-toggle:hover {
    color: #475569;
    background: #f1f5f9;
}


/* =========================================================
   10. REMEMBER ME
   ========================================================= */

.bms-login-options {
    margin: 3px 0 22px;
}


.bms-checkbox {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--text-secondary);

    font-size: 12.5px;

    cursor: pointer;
}


.bms-checkbox input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


/* 2026-09-26: "in add remark option highlight checkbox is not properly
   visible" -- the box's 1px #cbd5e1 border was nearly invisible against
   the white/near-white panel backgrounds it's used on (e.g. the "Add
   Remark" panel on invoice_view.php). Darkened the border and added a
   subtle shadow so the unchecked box reads clearly on any of this app's
   light backgrounds; the checked state (filled with var(--primary)) was
   already high-contrast and is unchanged.

   2026-09-26 (follow-up, same day): that contrast fix wasn't the whole
   story for invoice_view.php's Add Remark checkbox specifically -- it
   was still reported "not properly visible" after the above shipped.
   .bms-checkbox is `display: inline-flex`, which is what normally makes
   this span size itself to 16x16 (browsers blockify a flex item
   regardless of the item's own `display`). But inside the Add Remark
   panel, this <label> also matches `.bms-stock-field label`, whose
   `display: block` beats `.bms-checkbox`'s `display: inline-flex` on
   specificity (one class + one element beats one class) -- so on THIS
   panel the label is never flex, this span falls back to its own
   default `display: inline`, and width/height are simply ignored on a
   non-replaced inline element. The box collapsed to nothing but its
   border, i.e. invisible. login.php's "Remember me" checkbox never hit
   this because it isn't nested in a .bms-stock-field. Giving the box
   its own `display: inline-block` makes it keep its 16x16 size on its
   own, independent of whatever the parent label's `display` ends up
   being. */
.bms-checkbox-box {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    flex-shrink: 0;

    width: 16px;
    height: 16px;

    background: #ffffff;

    border: 1.5px solid #94a3b8;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .08);
}


.bms-checkbox input:checked+.bms-checkbox-box {
    background: var(--primary);
    border-color: var(--primary);
}


.bms-checkbox input:checked+.bms-checkbox-box::after {
    content: "";

    position: absolute;

    left: 4px;
    top: 1px;

    width: 5px;
    height: 9px;

    border: solid #ffffff;
    border-width: 0 2px 2px 0;

    transform: rotate(45deg);
}


/* =========================================================
   11. LOGIN BUTTON
   ========================================================= */

.bms-login-submit {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;
    height: 46px;

    color: #ffffff;

    background: var(--primary);

    border: 1px solid var(--primary);
    border-radius: 8px;

    font-size: 13.5px;
    font-weight: 600;

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.05s ease;
}


.bms-login-submit:hover {
    background: var(--primary-dark);

    box-shadow:
        0 6px 15px rgba(23, 105, 224, 0.20);
}


.bms-login-submit:active {
    transform: translateY(1px);
}


.bms-login-submit svg {
    transition: transform 0.18s ease;
}


.bms-login-submit:hover svg {
    transform: translateX(3px);
}


/* =========================================================
   12. LOGIN FOOTER
   ========================================================= */

.bms-login-footer {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-top: 28px;
    padding-top: 20px;

    color: #9aa5b4;

    border-top: 1px solid #eef1f4;

    font-size: 11px;
}


/* =========================================================
   13. APPLICATION BODY
   ========================================================= */

/*
   Only logged-in application pages use this shell.

   Structure:

   body
   ├── topbar
   ├── sidebar
   ├── main
   └── footer

   Main takes remaining height.
*/

body:has(.bms-topbar) {
    width: 100%;

    height: 100vh;
    height: 100dvh;

    min-height: 0;

    display: flex;
    flex-direction: column;

    overflow: hidden;
}


/* =========================================================
   14. TOPBAR
   ========================================================= */

.bms-topbar {
    position: relative;

    z-index: 100;

    flex: 0 0 var(--topbar-height);

    width: 100%;
    height: var(--topbar-height);

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 24px;

    background: var(--white);

    border-bottom: 1px solid var(--border);

    box-shadow: var(--shadow-sm);
}


.bms-topbar-left,
.bms-topbar-right {
    display: flex;
    align-items: center;

    min-width: 0;
}


.bms-topbar-left {
    gap: 16px;
}


.bms-topbar-right {
    gap: 18px;
}


/* ---------------------------------------------
   Quick Invoice Jump

   Sits in the topbar's top-right corner, where Logout used to be
   ("In current logout position (top right corner) move the invoice
   lookup form."); Logout itself moved down to the sidebar footer and
   the page footer -- see SIDEBAR and FOOTER further down. */

.bms-invoice-jump {
    display: flex;
    align-items: stretch;

    width: 100%;
    max-width: 190px;
}


.bms-invoice-jump input {
    flex: 1 1 auto;

    min-width: 0;
    width: 100%;

    height: 32px;

    padding: 0 10px;

    border: 1px solid var(--border);
    border-right: none;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);

    background: var(--white);

    color: var(--text);

    font-size: 12.5px;

    outline: none;
}


.bms-invoice-jump input:focus {
    border-color: var(--primary);
}


.bms-invoice-jump button {
    flex: 0 0 auto;

    height: 32px;
    padding: 0 14px;

    border: 1px solid var(--primary);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;

    background: var(--primary);

    color: var(--white);

    font-size: 12.5px;
    font-weight: 600;

    cursor: pointer;
}


.bms-invoice-jump button:hover {
    filter: brightness(0.92);
}


/* =========================================================
   15. BRAND
   ========================================================= */

.bms-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;

    color: var(--text);

    font-weight: 700;
}


.bms-brand img {
    display: block;

    width: auto;
    height: 31px;

    max-width: 180px;

    object-fit: contain;
}


.bms-brand-divider {
    width: 1px;
    height: 22px;

    flex: 0 0 auto;

    background: var(--border);
}


.bms-brand-name {
    color: var(--primary);

    font-size: 17px;
    font-weight: 700;

    white-space: nowrap;
}


.bms-user-info {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;
}


.bms-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 32px;

    width: 32px;
    height: 32px;

    color: var(--primary);

    background: var(--primary-light);

    border-radius: 50%;

    font-size: 12.5px;
    font-weight: 700;

    text-transform: uppercase;
}


.bms-user-name {
    color: var(--text-secondary);

    font-size: 13px;

    white-space: nowrap;
}


.bms-logout {
    display: inline-flex;
    align-items: center;

    padding: 7px 12px;

    color: var(--danger);

    background: transparent;

    border-radius: var(--radius-sm);

    font-size: 12.5px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.bms-logout:hover {
    color: #b91c1c;

    background: #fef2f2;
}


/* =========================================================
   16. MOBILE MENU BUTTON
   ========================================================= */

.bms-mobile-menu {
    display: none;

    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    padding: 0;

    color: var(--text);

    background: transparent;

    border: 0;
    border-radius: 7px;

    font-size: 21px;
}


.bms-mobile-menu:hover {
    background: #f1f5f9;
}


/* =========================================================
   17. SIDEBAR
   ========================================================= */

.bms-sidebar {
    position: fixed;

    top: var(--topbar-height);
    left: 0;
    bottom: var(--footer-height);

    z-index: 90;

    width: var(--sidebar-width);

    display: flex;
    flex-direction: column;

    background: var(--white);

    border-right: 1px solid var(--border);

    overflow: hidden;

    transition:
        transform 0.25s ease;
}


.bms-sidebar-header {
    flex: 0 0 48px;

    height: 48px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 18px;

    border-bottom: 1px solid var(--border-light);
}


.bms-sidebar-title {
    color: var(--text-muted);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.8px;
}


.bms-sidebar-close {
    display: none;

    align-items: center;
    justify-content: center;

    width: 32px;
    height: 32px;

    padding: 0;

    color: var(--text-secondary);

    background: transparent;

    border: 0;
    border-radius: 6px;

    font-size: 24px;
}


.bms-sidebar-close:hover {
    background: #f1f5f9;
}


.bms-sidebar-content {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    padding: 12px 10px 25px;

    overflow-x: hidden;
    overflow-y: auto;
}


/* Pinned to the bottom of the sidebar, below the scrollable menu
   (2026-09-23, Revision 5): "logged in user name and icon just
   bottom on the left menu item ... logout placed to be next to
   name." .bms-sidebar is already a flex column with
   .bms-sidebar-content as its flexible middle, so this sits flush
   at the bottom with no extra positioning needed. */

.bms-sidebar-footer {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 12px 14px;

    border-top: 1px solid var(--border-light);
}


.bms-sidebar-footer .bms-user-info {
    min-width: 0;
}


.bms-sidebar-footer .bms-user-name {
    flex: 1 1 auto;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
}


.bms-sidebar-footer .bms-logout {
    flex: 0 0 auto;

    padding: 6px 10px;
}


/* =========================================================
   18. SIDEBAR SCROLLBAR
   ========================================================= */

.bms-sidebar-content {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}


.bms-sidebar-content::-webkit-scrollbar {
    width: 7px;
}


.bms-sidebar-content::-webkit-scrollbar-track {
    background: transparent;
}


.bms-sidebar-content::-webkit-scrollbar-thumb {
    background: #cbd5e1;

    border-radius: 10px;
}


.bms-sidebar-content::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* =========================================================
   19. MENU
   ========================================================= */

.bms-sidebar-menu {
    width: 100%;
}


.bms-sidebar-menu ul {
    width: 100%;

    margin: 0;
    padding: 0;

    list-style: none;
}


.bms-menu-item {
    width: 100%;

    margin-bottom: 2px;
}


.bms-menu-link {
    width: 100%;
    min-height: 42px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 12px;

    color: #475569;

    background: transparent;

    border: 0;
    border-radius: 7px;

    font-size: 13px;
    font-weight: 500;

    text-align: left;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.bms-menu-link:hover {
    color: var(--primary);

    background: var(--primary-light);
}


.bms-menu-item.active>.bms-menu-link {
    color: var(--primary);

    background: var(--primary-light);

    box-shadow: inset 3px 0 0 var(--primary);

    font-weight: 600;
}


.bms-menu-title {
    min-width: 0;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;
}


/* =========================================================
   20. MENU ARROW
   ========================================================= */

.bms-menu-arrow {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    margin-left: 10px;

    transition:
        transform 0.2s ease;
}


.bms-menu-arrow svg {
    display: block;
}


.bms-menu-item.open>.bms-menu-link .bms-menu-arrow {
    transform: rotate(90deg);
}


/* =========================================================
   21. SUBMENU
   ========================================================= */

.bms-submenu {
    display: none;

    width: calc(100% - 12px);

    margin: 2px 0 4px 12px !important;
    padding: 2px 0 2px 10px !important;

    border-left: 1px solid #e8edf3;
}


.bms-menu-item.open>.bms-submenu {
    display: block;
}


.bms-submenu-item {
    width: 100%;

    margin: 1px 0;
}


.bms-submenu-link {
    width: 100%;
    min-height: 36px;

    display: flex;
    align-items: center;

    padding: 0 10px;

    color: #64748b;

    border-radius: 6px;

    font-size: 12.5px;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.bms-submenu-link:hover {
    color: var(--primary);

    background: var(--primary-light);
}


.bms-submenu-item.active .bms-submenu-link {
    color: var(--primary);

    background: #f1f6ff;

    font-weight: 600;
}


/* =========================================================
   22. MOBILE SIDEBAR OVERLAY
   ========================================================= */

.bms-sidebar-overlay {
    display: none;
}


/* =========================================================
   23. MAIN CONTENT
   ========================================================= */

.bms-main {
    flex: 1 1 auto;

    min-width: 0;
    min-height: 0;

    width: auto;

    margin-left: var(--sidebar-width);

    padding: 28px 30px;

    overflow-x: hidden;
    overflow-y: auto;

    background: var(--background);

    -webkit-overflow-scrolling: touch;
}


/* =========================================================
   24. MAIN CONTENT SCROLLBAR
   ========================================================= */

.bms-main {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}


.bms-main::-webkit-scrollbar {
    width: 7px;
}


.bms-main::-webkit-scrollbar-track {
    background: transparent;
}


.bms-main::-webkit-scrollbar-thumb {
    background: #cbd5e1;

    border-radius: 10px;
}


.bms-main::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* =========================================================
   25. PAGE HEADER
   ========================================================= */

.bms-page-header {
    margin-bottom: 14px;
    padding-bottom: 10px;

    border-bottom: 1px solid var(--border-light);
}


.bms-page-header h1 {
    margin: 0 0 3px;

    color: var(--text);

    font-size: 20px;
    font-weight: 700;

    letter-spacing: -0.4px;
}


.bms-page-header p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 12.5px;
}

/* 2026-09-23 (Revision 7): invoice_view.php -- the invoice date next to
   the "Invoice #..." heading, replacing the disabled text-box field
   that used to take a whole row in the form grid below ("show date
   with Invoice #30678 area. so page height will be less"). */

/* 2026-09-23 (Revision 7): index.php's today's-invoices table -- the
   invoice number itself is now the link into invoice_view.php ("give
   hyperlink on invoice number"), so it needs to actually look
   clickable against the global `a { color: inherit; }` reset. */

/* 2026-09-23 (Revision 7): invoice_view.php's management panel -- a
   button-shaped label for an operation not wired up yet (currently
   just "Book Pathao", pending real API credentials), so it visually
   matches the other buttons in the panel but reads as unavailable. */

.bms-management-disabled {
    color: var(--text-muted);
    background: #f9fafb;
    cursor: not-allowed;
    opacity: .7;
}

.bms-invoice-link {
    color: var(--primary);
    font-weight: 600;
}

.bms-invoice-link:hover {
    text-decoration: underline;
}

.bms-invoice-date-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 10px;
    vertical-align: middle;
    background: #f3f4f6;
    color: var(--text-secondary);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
}

/* 2026-09-23 (Revision 8, item 8): "make more modern look and clearly
   visible" -- the heading itself is bigger/bolder than a plain
   .bms-page-header h1, and the date badge gets a tinted border + a
   touch more weight instead of flat gray, so it reads as a proper pill
   rather than muted metadata. The status badge reuses .bms-sales-badge
   and just needs spacing next to the date badge. */

.bms-invoice-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.6px;
}

.bms-invoice-heading .bms-invoice-date-badge {
    margin-left: 6px;
    padding: 3px 12px;
    background: #eef2ff;
    color: var(--primary);
    border: 1px solid #dbe4ff;
    font-size: 12.5px;
    font-weight: 600;
}

.bms-invoice-heading .bms-invoice-status-badge {
    margin-left: 2px;
}

/* 2026-09-23 (Revision 8): the management panel grew from 4 buttons to
   13 -- flex-wrap so it degrades gracefully on narrower screens instead
   of overflowing, and a small gap-row so wrapped rows don't touch. */

.bms-management-actions {
    flex-wrap: wrap;
    row-gap: 8px;
}

/* "Cancel Invoice" is destructive -- a red tint instead of the neutral
   gray every other panel button uses, so it doesn't blend in. */

.bms-management-danger {
    color: #991b1b;
    background: #fef2f2;
    border-color: #fecaca;
}

.bms-management-danger:hover {
    background: #fee2e2;
}

/* Each management-panel toggle (Transaction/Discount/Status Update/
   Pathao Cost/Add Remark/Cancel Invoice) is its own sibling form/div
   inside the same card as Pay Invoice -- a top border separates it from
   whatever's above when it's open, matching how the charge rows in the
   totals box are already visually grouped. */

.bms-management-panel {
    border-top: 1px solid var(--border-light);
}

.bms-management-panel-title {
    margin: 4px 0 8px;
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
}

.bms-management-panel-title:not(:first-child) {
    margin-top: 18px;
}

.bms-management-panel-remarks {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border-light);
}

.bms-management-panel-remarks p {
    margin: 0 0 6px;
}

/* 2026-09-23 (Revision 8, item 7): "Place update invoice button under
   Grand Total" -- the totals box above is right-aligned (max-width
   420px, margin-left: auto -- see .bms-sales-totals), but
   .bms-stock-form-actions itself is plain/left-aligned by default (it's
   shared with other stock-module forms, so it isn't changed globally).
   This page-specific class matches the totals box's width and
   right-alignment so the button sits directly under it instead of at
   the far left of the page. */

.bms-sales-totals-actions {
    max-width: 420px;
    margin-left: auto;
    text-align: right;
}


/* =========================================================
   26. DASHBOARD
   ========================================================= */

.bms-dashboard-grid {
    width: 100%;
    max-width: 100%;

    display: grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 18px;
}


.bms-card {
    min-width: 0;
    width: 100%;

    padding: 22px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    transition:
        box-shadow 0.15s ease,
        transform 0.15s ease;
}


.bms-card:hover {
    box-shadow: var(--shadow);

    transform: translateY(-1px);
}


.bms-card-label {
    margin-bottom: 8px;

    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 600;
}


.bms-card-value {
    color: var(--text);

    font-size: 23px;
    font-weight: 650;
}


.bms-welcome-card {
    width: 100%;
    max-width: 100%;

    margin-top: 20px;
    padding: 25px;

    background: var(--white);

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);
}


.bms-welcome-card h2 {
    margin: 0 0 5px;

    font-size: 18px;
}


.bms-welcome-card p {
    margin: 0;

    color: var(--text-secondary);
}


/* =========================================================
   27. APPLICATION FOOTER
   ========================================================= */

/* 2026-09-23 (Revision 6): the user name/icon + Logout that briefly
   lived here (Revision 5) are now shown ONLY at the bottom of the
   sidebar ("remove this red circle name and logout part from footer
   as this is now duplicate") -- see app/Views/layout/header.php. The
   footer is back to a plain strip, but laid out as a 3-column grid
   (left spacer / center / right) so the copyright text sits in the
   true horizontal middle of the page rather than pinned to the left
   edge ("place copyright text middle of the page"). */

.bms-footer {
    flex: 0 0 var(--footer-height);

    width: auto;
    height: var(--footer-height);
    min-height: var(--footer-height);

    margin-left: var(--sidebar-width);

    padding: 0 30px;

    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    gap: 20px;

    color: #94a3b8;

    background: var(--white);

    border-top: 1px solid var(--border-light);

    font-size: 11px;
}


.bms-footer-left {
    min-width: 0;
}


.bms-footer-center {
    justify-self: center;

    min-width: 0;

    white-space: nowrap;
}


.bms-footer-right {
    justify-self: end;

    min-width: 0;

    white-space: nowrap;
}


.bms-footer-right span {
    margin: 0 5px;

    color: #cbd5e1;
}


.bms-footer-copyright {
    color: #94a3b8;
}


/* =========================================================
   28. TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .bms-dashboard-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }


    .bms-main {
        padding: 24px;
    }


    .bms-footer {
        padding: 0 24px;
    }

}


/* =========================================================
   29. MOBILE
   ========================================================= */

@media (max-width: 768px) {

    :root {
        --topbar-height: 58px;
        --sidebar-width: 275px;
    }


    /* ---------------------------------------------
       Application viewport
       --------------------------------------------- */

    body:has(.bms-topbar) {

        width: 100%;
        max-width: 100%;

        height: 100vh;
        height: 100dvh;

        min-height: 0;

        display: flex;
        flex-direction: column;

        overflow: hidden;
    }


    /* ---------------------------------------------
       Topbar
       --------------------------------------------- */

    .bms-topbar {

        flex: 0 0 var(--topbar-height);

        width: 100%;
        max-width: 100%;

        height: var(--topbar-height);

        padding: 0 16px;
    }


    .bms-topbar-left {
        flex: 1 1 auto;

        min-width: 0;

        gap: 10px;
    }


    .bms-topbar-right {
        flex: 0 0 auto;

        min-width: 0;
    }


    .bms-mobile-menu {
        display: flex;
    }


    .bms-brand {
        min-width: 0;
        max-width: 100%;

        gap: 8px;
    }


    .bms-brand img {
        height: 29px;

        max-width: 140px;
    }


    .bms-brand-divider {
        display: none;
    }


    .bms-brand-name {
        font-size: 15px;

        white-space: nowrap;
    }


    /* .bms-user-name no longer lives in the topbar as of Revision 5
       (it's in the sidebar footer and page footer now), so it is
       NOT hidden here any more -- doing so would also hide it in
       those other two places, since it's the same class. */

    .bms-invoice-jump {
        max-width: 130px;
    }


    .bms-invoice-jump input {
        padding: 0 8px;

        font-size: 12px;
    }


    .bms-invoice-jump button {
        padding: 0 10px;

        font-size: 12px;
    }


    /* ---------------------------------------------
       Sidebar
       --------------------------------------------- */

    .bms-sidebar {

        top: var(--topbar-height);
        bottom: 0;
        left: 0;

        width: var(--sidebar-width);
        max-width: 85vw;

        transform: translateX(-100%);

        box-shadow:
            8px 0 30px rgba(15, 23, 42, 0.10);
    }


    .bms-sidebar.mobile-open {
        transform: translateX(0);
    }


    .bms-sidebar-close {
        display: flex;
    }


    /* ---------------------------------------------
       Overlay
       --------------------------------------------- */

    .bms-sidebar-overlay {

        position: fixed;

        inset: 0;

        z-index: 80;

        display: block;

        visibility: hidden;

        opacity: 0;

        background: rgba(15, 23, 42, 0.35);

        transition:
            opacity 0.25s ease,
            visibility 0.25s ease;
    }


    .bms-sidebar-overlay.active {

        visibility: visible;

        opacity: 1;
    }


    /* ---------------------------------------------
       Main content
       --------------------------------------------- */

    .bms-main {

        flex: 1 1 auto;

        min-width: 0;
        min-height: 0;

        width: 100%;
        max-width: 100%;

        margin-left: 0;

        padding: 20px 16px;

        overflow-x: hidden;
        overflow-y: auto;

        -webkit-overflow-scrolling: touch;
    }


    /* ---------------------------------------------
       Dashboard
       --------------------------------------------- */

    .bms-dashboard-grid {

        width: 100%;
        max-width: 100%;

        grid-template-columns: 1fr;

        gap: 12px;
    }


    .bms-card {
        width: 100%;
        max-width: 100%;
    }


    .bms-page-header h1 {
        font-size: 18px;
    }


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

    .bms-footer {

        flex: 0 0 auto;

        width: 100%;
        max-width: 100%;

        height: auto;
        min-height: var(--footer-height);

        margin-left: 0;

        padding: 12px 16px;

        display: flex;
        flex-direction: column;

        justify-content: center;

        gap: 4px;

        text-align: center;
    }


    /* the left column is just an empty spacer for centering on desktop;
       on a single-column mobile layout it isn't needed at all */

    .bms-footer-left {
        display: none;
    }


    .bms-footer-center,
    .bms-footer-right {
        justify-self: unset;

        white-space: normal;
    }

}


/* =========================================================
   30. SMALL MOBILE
   ========================================================= */

@media (max-width: 400px) {

    .bms-main {
        padding: 18px 12px;
    }


    .bms-login-page {
        padding: 10px;
    }


    .bms-login-card {
        padding: 28px 18px;
    }


    .bms-login-logo {
        height: 42px;
    }

}


/* =========================================================
   31. REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }

}

/* =========================================================
   PROFILE PAGE
   ========================================================= */

.bms-profile-grid {
    width: 100%;
    max-width: 1100px;

    display: grid;

    grid-template-columns:
        minmax(0, 2fr) minmax(280px, 1fr);

    gap: 20px;
}


.bms-profile-card {
    min-width: 0;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    overflow: hidden;
}


.bms-profile-card-header {
    padding: 22px 24px;

    border-bottom: 1px solid var(--border-light);
}


.bms-profile-card-header h2 {
    margin: 0 0 4px;

    color: var(--text);

    font-size: 16px;
    font-weight: 650;
}


.bms-profile-card-header p {
    margin: 0;

    color: var(--text-secondary);

    font-size: 12.5px;
}


.bms-profile-form {
    padding: 24px;
}


.bms-profile-fields {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px 16px;
}


.bms-profile-field {
    min-width: 0;
}


.bms-profile-field-full {
    grid-column: 1 / -1;
}


.bms-profile-field label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 12.5px;
    font-weight: 600;
}


.bms-profile-field input,
.bms-profile-field select,
.bms-profile-field textarea {
    width: 100%;

    color: var(--text);

    background: #ffffff;

    border: 1px solid #d6dde6;
    border-radius: 8px;

    outline: none;

    font-size: 13.5px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.bms-profile-field input,
.bms-profile-field select {
    height: 44px;

    padding: 0 12px;
}


.bms-profile-field textarea {
    min-height: 100px;

    padding: 11px 12px;

    resize: vertical;
}


.bms-profile-field input:focus,
.bms-profile-field select:focus,
.bms-profile-field textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, 0.10);
}


.bms-profile-field input:disabled {
    color: #64748b;

    background: #f8fafc;

    cursor: not-allowed;
}


.bms-profile-field small {
    display: block;

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 11px;
}


.bms-profile-actions {
    display: flex;

    justify-content: flex-end;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid var(--border-light);
}


.bms-profile-save {
    min-width: 130px;

    height: 42px;

    padding: 0 18px;

    color: #ffffff;

    background: var(--primary);

    border: 1px solid var(--primary);
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;

    transition:
        background 0.18s ease,
        box-shadow 0.18s ease;
}


.bms-profile-save:hover {
    background: var(--primary-dark);

    box-shadow:
        0 5px 14px rgba(23, 105, 224, 0.18);
}


/* =========================================================
   PROFILE ACCOUNT INFORMATION
   ========================================================= */

.bms-profile-account {
    padding: 8px 24px;
}


.bms-profile-account-row {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    min-height: 46px;

    border-bottom: 1px solid var(--border-light);
}


.bms-profile-account-row:last-child {
    border-bottom: 0;
}


.bms-profile-account-row span {
    color: var(--text-secondary);

    font-size: 12px;
}


.bms-profile-account-row strong {
    color: var(--text);

    font-size: 12.5px;

    text-align: right;
}


.bms-profile-status-active {
    color: var(--success) !important;
}


.bms-profile-status-inactive {
    color: var(--danger) !important;
}


.bms-profile-security-link {
    margin: 0 24px 22px;

    padding-top: 18px;

    border-top: 1px solid var(--border-light);
}


.bms-profile-security-link a {
    color: var(--primary);

    font-size: 12.5px;
    font-weight: 600;
}


.bms-profile-security-link a:hover {
    color: var(--primary-dark);
}


/* =========================================================
   PROFILE ALERTS
   ========================================================= */

.bms-profile-alert {
    width: 100%;
    max-width: 1100px;

    margin-bottom: 18px;

    padding: 12px 15px;

    border-radius: 8px;

    font-size: 13px;
}


.bms-profile-success {
    color: #166534;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;
}


.bms-profile-error {
    color: #991b1b;

    background: #fff5f5;

    border: 1px solid #fecaca;
}


/* =========================================================
   PROFILE RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .bms-profile-grid {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .bms-profile-fields {
        grid-template-columns: 1fr;
    }


    .bms-profile-field-full {
        grid-column: auto;
    }


    .bms-profile-card-header,
    .bms-profile-form {
        padding: 18px;
    }


    .bms-profile-account {
        padding: 8px 18px;
    }


    .bms-profile-security-link {
        margin-left: 18px;
        margin-right: 18px;
    }


    .bms-profile-actions {
        justify-content: stretch;
    }


    .bms-profile-save {
        width: 100%;
    }

}

/* =========================================================
   CHANGE PASSWORD
   ========================================================= */

.bms-password-page-card {
    width: 100%;
    max-width: 650px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    overflow: hidden;
}


.bms-password-form {
    padding: 24px;
}


.bms-password-form .bms-profile-field {
    margin-bottom: 20px;
}


.bms-password-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 10px;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid var(--border-light);
}


.bms-password-cancel {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-width: 90px;
    height: 42px;

    padding: 0 16px;

    color: #475569;

    background: #ffffff;

    border: 1px solid #d6dde6;
    border-radius: 8px;

    font-size: 13px;
    font-weight: 600;
}


.bms-password-cancel:hover {
    background: #f8fafc;
}


@media (max-width: 600px) {

    .bms-password-page-card {
        max-width: 100%;
    }


    .bms-password-form {
        padding: 18px;
    }


    .bms-password-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .bms-password-actions .bms-profile-save,
    .bms-password-cancel {
        width: 100%;
    }

}

/* =========================================================
   PASSWORD VALIDATION
   ========================================================= */

.bms-password-input-wrapper {
    position: relative;

    width: 100%;
}


.bms-password-input-wrapper input {
    padding-right: 65px;
}


.bms-password-input-wrapper .bms-password-toggle {
    position: absolute;

    right: 7px;
    top: 50%;

    width: 50px;
    height: 32px;

    padding: 0;

    color: var(--text-secondary);

    background: transparent;

    border: 0;
    border-radius: 5px;

    font-size: 11px;
    font-weight: 600;

    transform: translateY(-50%);
}


.bms-password-input-wrapper .bms-password-toggle:hover {
    color: var(--primary);

    background: var(--primary-light);
}


/* =========================================================
   PASSWORD RULES
   ========================================================= */

.bms-password-requirements {
    margin-top: 9px;

    display: flex;
    flex-direction: column;

    gap: 3px;

    font-size: 11.5px;
}


.password-rule {
    display: flex;
    align-items: center;

    gap: 7px;

    color: #94a3b8;

    transition:
        color 0.15s ease;
}


.password-rule-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 15px;
    height: 15px;

    color: #94a3b8;

    font-size: 11px;
    font-weight: 700;
}


.password-rule.valid {
    color: #15803d;
}


.password-rule.valid .password-rule-icon {
    color: #16a34a;
}


.password-rule.invalid {
    color: #94a3b8;
}


/* =========================================================
   PASSWORD MATCH
   ========================================================= */

.bms-password-match {
    min-height: 18px;

    margin-top: 7px;

    font-size: 11.5px;
}


.bms-password-match.match {
    color: #15803d;
}


.bms-password-match.no-match {
    color: #dc2626;
}

/* =========================================================
   MENU MANAGEMENT
   ========================================================= */

.bms-menu-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.bms-menu-add-button,
.bms-menu-save-button,
.bms-menu-edit-button,
.bms-menu-cancel-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 14px;

    border-radius: 7px;

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}


.bms-menu-add-button {
    color: #ffffff;
    background: var(--primary);
}


.bms-menu-add-button:hover {
    opacity: .92;
}


.bms-menu-add-button.secondary {
    color: var(--primary);
    background: #ffffff;
    border: 1px solid var(--primary);
}


/* =========================================================
   EDITOR CARD
   ========================================================= */

.bms-menu-editor-card,
.bms-menu-list-card {
    width: 100%;

    margin-bottom: 20px;

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    overflow: hidden;
}


.bms-menu-editor-header,
.bms-menu-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 20px 22px;

    border-bottom: 1px solid var(--border-light);
}


.bms-menu-editor-header h2,
.bms-menu-list-header h2 {
    margin: 0;

    font-size: 16px;
    font-weight: 700;

    color: var(--text-primary);
}


.bms-menu-editor-header p,
.bms-menu-list-header p {
    margin: 4px 0 0;

    color: var(--text-muted);

    font-size: 12px;
}


.bms-menu-cancel-link {
    color: var(--text-secondary);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-menu-form {
    padding: 22px;
}


.bms-menu-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 18px;
}


.bms-menu-field {
    min-width: 0;
}


.bms-menu-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--text-primary);

    font-size: 12px;
    font-weight: 600;
}


.bms-menu-field input,
.bms-menu-field select {
    width: 100%;
    height: 40px;

    padding: 0 11px;

    color: var(--text-primary);

    background: #ffffff;

    border: 1px solid var(--border);
    border-radius: 7px;

    outline: none;

    font-family: inherit;
    font-size: 13px;

    box-sizing: border-box;
}


.bms-menu-field input:focus,
.bms-menu-field select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, .08);
}


.bms-menu-type-display {
    display: flex;
    align-items: center;

    height: 40px;

    padding: 0 11px;

    color: var(--text-secondary);

    background: #f8fafc;

    border: 1px solid var(--border);

    border-radius: 7px;

    font-size: 13px;
}


/* =========================================================
   USER ACCESS
   ========================================================= */

.bms-menu-users-section {
    margin-top: 24px;

    padding-top: 22px;

    border-top: 1px solid var(--border-light);
}


.bms-menu-users-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;
}


.bms-menu-users-header h3 {
    margin: 0;

    color: var(--text-primary);

    font-size: 14px;
}


.bms-menu-users-header p {
    margin: 4px 0 0;

    color: var(--text-muted);

    font-size: 11.5px;
}


.bms-menu-user-count {
    white-space: nowrap;

    padding: 5px 9px;

    color: var(--primary);

    background: rgba(23, 105, 224, .08);

    border-radius: 20px;

    font-size: 11px;
    font-weight: 600;
}


.bms-menu-user-actions {
    display: flex;

    gap: 7px;

    margin-top: 12px;
}


.bms-menu-user-action {
    padding: 5px 9px;

    color: var(--text-secondary);

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 5px;

    font-size: 11px;

    cursor: pointer;
}


.bms-menu-user-action:hover {
    color: var(--primary);

    border-color: var(--primary);
}


.bms-menu-user-list {
    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin-top: 12px;
}


.bms-menu-user-option {
    display: flex;
    align-items: center;

    gap: 9px;

    min-width: 0;

    padding: 9px 10px;

    background: #f8fafc;

    border: 1px solid transparent;
    border-radius: 7px;

    cursor: pointer;

    transition:
        border-color .15s ease,
        background .15s ease;
}


.bms-menu-user-option:hover {
    background: #ffffff;

    border-color: var(--border);
}


.bms-menu-user-option input {
    position: absolute;

    opacity: 0;

    pointer-events: none;
}


.bms-menu-user-check {
    flex: 0 0 auto;

    width: 16px;
    height: 16px;

    border: 1px solid #cbd5e1;
    border-radius: 4px;

    background: #ffffff;

    position: relative;
}


.bms-menu-user-option input:checked+.bms-menu-user-check {
    background: var(--primary);

    border-color: var(--primary);
}


.bms-menu-user-option input:checked+.bms-menu-user-check::after {
    content: '';

    position: absolute;

    left: 4px;
    top: 1px;

    width: 5px;
    height: 9px;

    border:
        solid #ffffff;

    border-width:
        0 2px 2px 0;

    transform:
        rotate(45deg);
}


.bms-menu-user-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.bms-menu-user-info strong {
    overflow: hidden;

    color: var(--text-primary);

    font-size: 12px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


.bms-menu-user-info small {
    margin-top: 2px;

    color: var(--text-muted);

    font-size: 10px;
}


.bms-menu-no-users {
    padding: 15px;

    color: var(--text-muted);

    background: #f8fafc;

    border-radius: 7px;

    font-size: 12px;
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.bms-menu-form-actions {
    display: flex;

    justify-content: flex-end;

    gap: 9px;

    margin-top: 22px;
    padding-top: 18px;

    border-top: 1px solid var(--border-light);
}


.bms-menu-cancel-button {
    color: var(--text-secondary);

    background: #ffffff;

    border: 1px solid var(--border);
}


.bms-menu-save-button {
    color: #ffffff;

    background: var(--primary);

    border: 1px solid var(--primary);
}


/* =========================================================
   MENU TREE
   ========================================================= */

.bms-menu-tree {
    padding: 8px 0;
}


.bms-menu-tree-group {
    border-bottom: 1px solid var(--border-light);
}


.bms-menu-tree-group:last-child {
    border-bottom: 0;
}


.bms-menu-tree-row {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 100px 240px;

    align-items: center;

    gap: 15px;

    padding: 13px 20px;
}


.bms-menu-tree-row.top {
    background: #ffffff;
}


.bms-menu-tree-row.sub {
    padding-left: 48px;

    background: #fafbfd;
}


.bms-menu-tree-main {
    display: flex;
    align-items: center;

    gap: 10px;

    min-width: 0;
}


.bms-menu-tree-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    color: var(--primary);

    background: rgba(23, 105, 224, .08);

    border-radius: 6px;

    font-size: 13px;
}


.bms-menu-sub-line {
    width: 25px;

    color: #94a3b8;

    font-size: 15px;
}


.bms-menu-tree-main strong {
    display: block;

    color: var(--text-primary);

    font-size: 12.5px;
}


.bms-menu-tree-link {
    display: block;

    margin-top: 3px;

    color: var(--text-muted);

    font-size: 10.5px;
}


.bms-menu-tree-access {
    color: var(--text-muted);

    font-size: 10.5px;

    text-align: center;
}


.bms-menu-tree-actions {
    display: flex;

    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;

    gap: 6px;
}


.bms-menu-icon-btn {
    display: inline-flex;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    width: 28px;
    height: 28px;

    padding: 0;

    color: var(--text-secondary);

    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 5px;

    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
}


.bms-menu-icon-btn:hover {
    background: #e5e7eb;
}


.bms-menu-icon-btn:disabled,
.bms-menu-icon-btn.disabled {
    opacity: .35;

    cursor: not-allowed;

    pointer-events: none;
}


.bms-menu-icon-btn.danger {
    color: #991b1b;

    background: #fee2e2;
    border-color: #fecaca;
}


.bms-menu-icon-btn.danger:hover {
    background: #fecaca;
}


.bms-menu-hidden-note {
    display: block;

    margin-top: 2px;

    color: var(--text-muted);

    font-size: 9.5px;
}


.bms-menu-add-child-link {
    display: inline-flex;

    min-height: 30px;

    align-items: center;

    padding: 0 9px;

    color: var(--text-secondary);

    background: #f3f4f6;

    border-radius: 5px;

    font-size: 10.5px;

    white-space: nowrap;
}


.bms-menu-add-child-link:hover {
    background: #e5e7eb;
}


.bms-menu-edit-button {
    min-height: 30px;

    padding: 0 9px;

    color: var(--primary);

    background: rgba(23, 105, 224, .06);

    border-radius: 5px;

    font-size: 10.5px;
}


.bms-menu-edit-button:hover {
    background: rgba(23, 105, 224, .12);
}


.bms-menu-empty {
    padding: 35px 20px;

    color: var(--text-muted);

    text-align: center;

    font-size: 12px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .bms-menu-page-actions {
        width: 100%;
    }


    .bms-menu-add-button {
        flex: 1;
    }


    .bms-menu-form-grid {
        grid-template-columns: 1fr;
    }


    .bms-menu-user-list {
        grid-template-columns: 1fr;
    }


    .bms-menu-tree-row {
        grid-template-columns:
            minmax(0, 1fr) auto;

        gap: 8px;
    }


    .bms-menu-tree-access {
        display: none;
    }


    .bms-menu-tree-actions {
        grid-column: 2;
        grid-row: 1;
    }


    .bms-menu-tree-main {
        grid-column: 1;
        grid-row: 1;
    }


    .bms-menu-tree-row.sub {
        padding-left: 28px;
    }


    .bms-menu-editor-header,
    .bms-menu-list-header {
        align-items: flex-start;

        flex-direction: column;
    }

}


@media (max-width: 480px) {

    .bms-menu-page-actions {
        flex-direction: column;
    }


    .bms-menu-add-button {
        width: 100%;
    }


    .bms-menu-form {
        padding: 16px;
    }


    .bms-menu-tree-row {
        padding:
            11px 14px;
    }


    .bms-menu-tree-row.sub {
        padding-left: 25px;
    }

}

/* =========================================================
   USER MANAGEMENT
   ========================================================= */

.bms-user-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bms-user-add-button,
.bms-user-save-button,
.bms-user-edit-button,
.bms-user-cancel-button,
.bms-user-clear-button,
.bms-user-search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.bms-user-add-button {
    color: #fff;
    background: var(--primary);
}

.bms-user-add-button.secondary {
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--primary);
}


/* =========================================================
   EDITOR
   ========================================================= */

.bms-user-editor-card,
.bms-user-list-card {
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bms-user-editor-header,
.bms-user-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-light);
}

.bms-user-editor-header h2,
.bms-user-list-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.bms-user-editor-header p,
.bms-user-list-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.bms-user-cancel-link {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-user-form {
    padding: 22px;
}

.bms-user-section {
    margin-bottom: 25px;
}

.bms-user-section:last-of-type {
    margin-bottom: 0;
}

.bms-user-section h3 {
    margin: 0 0 15px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-primary);
    font-size: 14px;
}

.bms-user-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.bms-user-field {
    min-width: 0;
}

.bms-user-field.full {
    grid-column: 1 / -1;
}

.bms-user-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.bms-user-field input,
.bms-user-field select,
.bms-user-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-user-field input,
.bms-user-field select {
    height: 40px;
}

.bms-user-field textarea {
    resize: vertical;
    min-height: 80px;
}

.bms-user-field input:focus,
.bms-user-field select:focus,
.bms-user-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-user-field input:disabled {
    background: #f8fafc;
    color: var(--text-muted);
}

.bms-user-field small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10.5px;
}


/* =========================================================
   CHECKBOXES
   ========================================================= */

.bms-user-check-row {
    display: flex;
    align-items: center;
    gap: 20px;
    grid-column: 1 / -1;
    padding-top: 5px;
}

.bms-user-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.bms-user-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}


/* =========================================================
   PASSWORD
   ========================================================= */

.bms-user-password-wrap {
    position: relative;
    display: flex;
}

.bms-user-password-wrap input {
    padding-right: 60px;
}

.bms-user-password-toggle {
    position: absolute;
    right: 5px;
    top: 5px;
    height: 30px;
    padding: 0 8px;
    color: var(--primary);
    background: transparent;
    border: 0;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.bms-user-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}

.bms-user-cancel-button {
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
}

.bms-user-save-button {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
}


/* =========================================================
   SEARCH
   ========================================================= */

.bms-user-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-user-search input {
    flex: 1;
    min-width: 160px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 12px;
}

.bms-user-search select {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    font-family: inherit;
    font-size: 12px;
}

.bms-user-search-button {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
}

.bms-user-clear-button {
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
}


/* =========================================================
   USER TABLE
   ========================================================= */

.bms-user-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-user-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.bms-user-table th {
    padding: 11px 15px;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.bms-user-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-light);
    color: var(--text-secondary);
    font-size: 11.5px;
    vertical-align: middle;
}

.bms-user-table tbody tr:hover {
    background: #fafbfd;
}

.bms-user-name-cell {
    display: flex;
    flex-direction: column;
}

.bms-user-name-cell strong {
    color: var(--text-primary);
    font-size: 12px;
}

.bms-user-name-cell span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 10px;
}

.bms-user-login-cell {
    display: flex;
    flex-direction: column;
}

.bms-user-login-cell small {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9.5px;
}

.bms-user-never-login {
    color: var(--text-muted);
}


/* =========================================================
   STATUS
   ========================================================= */

.bms-user-status {
    display: inline-flex;
    align-items: center;
    margin: 2px 3px 2px 0;
    padding: 4px 7px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 600;
    white-space: nowrap;
}

.bms-user-status.active {
    color: #15803d;
    background: #dcfce7;
}

.bms-user-status.inactive {
    color: #64748b;
    background: #f1f5f9;
}

.bms-user-status.locked {
    color: #b91c1c;
    background: #fee2e2;
}

.bms-user-status.password {
    color: #92400e;
    background: #fef3c7;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.bms-user-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.bms-user-edit-button,
.bms-user-action-button {
    min-height: 29px;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.bms-user-edit-button {
    color: var(--primary);
    background: rgba(23, 105, 224, .07);
}

.bms-user-action-button {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
}

.bms-user-action-button.unlock {
    color: #15803d;
}

.bms-user-action-button.reset {
    color: #92400e;
}


/* =========================================================
   EMPTY
   ========================================================= */

.bms-user-empty {
    padding: 40px !important;
    color: var(--text-muted) !important;
    text-align: center;
}


/* =========================================================
   RESET PASSWORD MODAL
   ========================================================= */

.bms-user-modal[hidden] {
    display: none;
}

.bms-user-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.bms-user-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .45);
}

.bms-user-modal-box {
    position: relative;
    width: min(440px, calc(100% - 30px));
    margin: 10vh auto 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .18);
    overflow: hidden;
}

.bms-user-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-user-modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
}

.bms-user-modal-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.bms-user-modal-close {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    cursor: pointer;
}

.bms-user-modal-body {
    padding: 20px;
}

.bms-user-modal-body>label {
    display: block;
    margin-bottom: 7px;
    font-size: 12px;
    font-weight: 600;
}

.bms-user-password-rules {
    margin-top: 12px;
}

.bms-user-password-rules div {
    margin: 5px 0;
    color: var(--text-muted);
    font-size: 11px;
}

.bms-user-password-rules span {
    display: inline-block;
    width: 18px;
}

.bms-user-password-rules div.valid {
    color: #15803d;
}

.bms-user-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 15px 20px;
    border-top: 1px solid var(--border-light);
}

/* =========================================================
   IFRAME MODAL (2026-09-24) -- generic popup for embedding a
   full standalone page (e.g. invoice_log.php) inside an
   overlay with a close button, instead of a new tab/window.
   ========================================================= */

.bms-iframe-modal[hidden] {
    display: none;
}

.bms-iframe-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.bms-iframe-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .55);
}

.bms-iframe-modal-box {
    position: relative;
    width: min(960px, calc(100% - 30px));
    height: min(88vh, 900px);
    margin: 5vh auto 0;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.bms-iframe-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-light);
    background: #f9fafb;
    flex-shrink: 0;
}

.bms-iframe-modal-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 15px;
}

.bms-iframe-modal-close {
    width: 30px;
    height: 30px;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}

.bms-iframe-modal-close:hover {
    color: var(--text-primary);
}

.bms-iframe-modal-body {
    flex: 1;
    overflow: hidden;
}

.bms-iframe-modal-body iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

@media (max-width: 700px) {
    .bms-iframe-modal-box {
        width: calc(100% - 16px);
        height: calc(100% - 16px);
        margin: 8px auto 0;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .bms-user-page-actions {
        width: 100%;
    }

    .bms-user-add-button {
        flex: 1;
    }

    .bms-user-form-grid {
        grid-template-columns: 1fr;
    }

    .bms-user-field.full {
        grid-column: auto;
    }

    .bms-user-check-row {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bms-user-search {
        flex-wrap: wrap;
    }

    .bms-user-search input {
        width: 100%;
        flex-basis: 100%;
    }

    .bms-user-search select {
        flex: 1;
    }

    .bms-user-search-button,
    .bms-user-clear-button {
        flex: 0 0 auto;
    }

}


@media (max-width: 480px) {

    .bms-user-page-actions {
        flex-direction: column;
    }

    .bms-user-add-button {
        width: 100%;
    }

    .bms-user-editor-header,
    .bms-user-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-user-form {
        padding: 16px;
    }

    .bms-user-search {
        padding: 12px;
    }

    .bms-user-search select {
        width: 100%;
        flex-basis: 100%;
    }

}

/* =========================================================
   BRANCH MANAGEMENT
   ========================================================= */

.bms-branch-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bms-branch-button,
.bms-branch-save-button,
.bms-branch-cancel-button,
.bms-branch-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.bms-branch-button {
    color: #fff;
    background: var(--primary);
}

.bms-branch-button.secondary {
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--primary);
}


/* =========================================================
   EDITOR
   ========================================================= */

.bms-branch-editor-card,
.bms-branch-list-card {
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bms-branch-editor-header,
.bms-branch-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-light);
}

.bms-branch-editor-header h2,
.bms-branch-list-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.bms-branch-editor-header p,
.bms-branch-list-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.bms-branch-cancel-link {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-branch-form {
    padding: 22px;
}

.bms-branch-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.bms-branch-field {
    min-width: 0;
}

.bms-branch-field.full {
    grid-column: 1 / -1;
}

.bms-branch-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.bms-branch-field input,
.bms-branch-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-branch-field input {
    height: 40px;
}

.bms-branch-field textarea {
    min-height: 90px;
    resize: vertical;
}

.bms-branch-field input:focus,
.bms-branch-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}


/* =========================================================
   STATUS
   ========================================================= */

.bms-branch-status-row {
    grid-column: 1 / -1;
    padding-top: 3px;
}

.bms-branch-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.bms-branch-checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.bms-branch-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}

.bms-branch-cancel-button {
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
}

.bms-branch-save-button {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
}


/* =========================================================
   SEARCH
   ========================================================= */

.bms-branch-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-branch-search input {
    flex: 1;
    min-width: 160px;
    height: 38px;
    padding: 0 11px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 12px;
}

.bms-branch-search input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-branch-search select {
    height: 38px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: #fff;
    color: var(--text-primary);
    font-family: inherit;
    font-size: 12px;
}


/* =========================================================
   TABLE
   ========================================================= */

.bms-branch-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-branch-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
}

.bms-branch-table th {
    padding: 11px 15px;
    color: var(--text-muted);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    font-size: 10.5px;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
}

.bms-branch-table td {
    padding: 13px 15px;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-light);
    font-size: 11.5px;
    vertical-align: middle;
}

.bms-branch-table tbody tr:hover {
    background: #fafbfd;
}


/* =========================================================
   BRANCH CELLS
   ========================================================= */

.bms-branch-name-cell {
    display: flex;
    flex-direction: column;
}

.bms-branch-name-cell strong {
    color: var(--text-primary);
    font-size: 12.5px;
}

.bms-branch-name-cell span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9.5px;
}

.bms-branch-address-cell {
    max-width: 280px;
    line-height: 1.5;
}

.bms-branch-contact-cell {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bms-branch-contact-cell span {
    word-break: break-word;
    font-size: 10.5px;
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.bms-branch-status {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 600;
}

.bms-branch-status.active {
    color: #15803d;
    background: #dcfce7;
}

.bms-branch-status.inactive {
    color: #64748b;
    background: #f1f5f9;
}


/* =========================================================
   EDIT BUTTON
   ========================================================= */

.bms-branch-edit-button {
    min-height: 30px;
    padding: 0 10px;
    color: var(--primary);
    background: rgba(23, 105, 224, .07);
    border-radius: 5px;
    font-size: 10.5px;
}

.bms-branch-edit-button:hover {
    background: rgba(23, 105, 224, .12);
}


/* =========================================================
   EMPTY / NO RESULTS
   ========================================================= */

.bms-branch-empty,
.bms-branch-no-results {
    padding: 40px 20px !important;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
}

.bms-branch-no-results[hidden] {
    display: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .bms-branch-page-actions {
        width: 100%;
    }

    .bms-branch-button {
        flex: 1;
    }

    .bms-branch-form-grid {
        grid-template-columns: 1fr;
    }

    .bms-branch-field.full,
    .bms-branch-status-row {
        grid-column: auto;
    }

    .bms-branch-search {
        flex-wrap: wrap;
    }

    .bms-branch-search input {
        width: 100%;
        flex-basis: 100%;
    }

    .bms-branch-search select {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .bms-branch-page-actions {
        flex-direction: column;
    }

    .bms-branch-button {
        width: 100%;
    }

    .bms-branch-editor-header,
    .bms-branch-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-branch-form {
        padding: 16px;
    }

    .bms-branch-search {
        padding: 12px;
    }

}

/* =========================================================
   COMPANY INFORMATION
   ========================================================= */

.bms-company-card {
    width: 100%;
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bms-company-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-light);
}

.bms-company-header h2 {
    margin: 0;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
}

.bms-company-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.bms-company-id {
    padding: 5px 9px;
    color: var(--text-muted);
    background: #f8fafc;
    border-radius: 6px;
    font-size: 10px;
    white-space: nowrap;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-company-form {
    padding: 22px;
}

.bms-company-section {
    margin-bottom: 28px;
}

.bms-company-section:last-of-type {
    margin-bottom: 0;
}

.bms-company-section h3 {
    margin: 0 0 15px;
    padding-bottom: 9px;
    color: var(--text-primary);
    border-bottom: 1px solid var(--border-light);
    font-size: 14px;
}

.bms-company-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.bms-company-field {
    min-width: 0;
}

.bms-company-field.full {
    grid-column: 1 / -1;
}

.bms-company-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
}

.bms-company-field input,
.bms-company-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    color: var(--text-primary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-company-field input {
    height: 40px;
}

.bms-company-field textarea {
    min-height: 85px;
    resize: vertical;
}

.bms-company-field input:focus,
.bms-company-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-company-field small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.5;
}


/* =========================================================
   LOGO
   ========================================================= */

.bms-company-logo-area {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.bms-company-logo-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 150px;
    height: 100px;
    padding: 10px;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.bms-company-logo-preview img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.bms-company-logo-upload {
    flex: 1;
    min-width: 220px;
}

.bms-company-logo-upload input[type="file"] {
    height: auto;
    padding: 8px;
}


/* =========================================================
   PASSWORD
   ========================================================= */

.bms-company-password-wrap {
    position: relative;
    display: flex;
}

.bms-company-password-wrap input {
    padding-right: 60px;
}

.bms-company-password-toggle {
    position: absolute;
    top: 5px;
    right: 5px;
    height: 30px;
    padding: 0 8px;
    color: var(--primary);
    background: transparent;
    border: 0;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}


/* =========================================================
   SAVE
   ========================================================= */

.bms-company-form-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}

.bms-company-save-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 0 17px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-company-save-button:hover {
    opacity: .92;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .bms-company-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-company-grid {
        grid-template-columns: 1fr;
    }

    .bms-company-field.full {
        grid-column: auto;
    }

    .bms-company-form {
        padding: 17px;
    }

    .bms-company-form-actions {
        justify-content: stretch;
    }

    .bms-company-save-button {
        width: 100%;
    }

    .bms-company-logo-area {
        align-items: stretch;
        flex-direction: column;
    }

    .bms-company-logo-preview {
        width: 100%;
    }

}


@media (max-width: 480px) {

    .bms-company-form {
        padding: 15px;
    }

}

/* =========================================================
   GLOBAL COMPANY LOGO
   ========================================================= */

.bms-company-logo {
    display: block;
    width: auto;
    max-width: 150px;
    height: 42px;
    object-fit: contain;
}

@media (max-width: 768px) {

    .bms-company-logo {
        max-width: 120px;
        height: 36px;
    }

}



/* =========================================================
   UPAZILA MANAGEMENT
   ========================================================= */

/* =========================================================
   UPAZILA PAGE
   ========================================================= */

.bms-upazila-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}


.bms-upazila-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}


.bms-upazila-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}


.bms-upazila-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}


/* =========================================================
   ALERTS
   ========================================================= */

.bms-upazila-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}


.bms-upazila-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}


.bms-upazila-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-upazila-form {
    padding: 18px 20px;
}


.bms-upazila-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}


.bms-upazila-field {
    min-width: 0;
}


.bms-upazila-field.district {
    width: 260px;
}


.bms-upazila-field.name {
    width: 360px;
}


.bms-upazila-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}


.bms-upazila-field label span {
    color: #dc2626;
}


.bms-upazila-field input,
.bms-upazila-field select {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}


.bms-upazila-field input:focus,
.bms-upazila-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}


.bms-upazila-readonly {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text-secondary);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
}


.bms-upazila-form-button {
    flex-shrink: 0;
}


.bms-upazila-save {
    height: 40px;
    padding: 0 18px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}


.bms-upazila-save:hover {
    opacity: .92;
}


.bms-upazila-cancel {
    padding: 7px 11px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 11px;
    text-decoration: none;
}


.bms-upazila-cancel:hover {
    background: var(--border);
}


/* =========================================================
   SEARCH
   ========================================================= */

.bms-upazila-search {
    display: flex;
    align-items: center;
    gap: 6px;
}


.bms-upazila-search select,
.bms-upazila-search input {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}


.bms-upazila-search select {
    width: 160px;
}


.bms-upazila-search input {
    width: 190px;
}


.bms-upazila-search select:focus,
.bms-upazila-search input:focus {
    border-color: var(--primary);
}


.bms-upazila-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}


.bms-upazila-clear {
    padding: 8px 9px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}


/* =========================================================
   TABLE
   ========================================================= */

.bms-upazila-table-wrap {
    width: 100%;
    overflow-x: auto;
}


.bms-upazila-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}


.bms-upazila-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}


.bms-upazila-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}


.bms-upazila-table tbody tr:last-child td {
    border-bottom: 0;
}


.bms-upazila-table tbody tr:hover {
    background: #fafbfc;
}


.bms-upazila-id {
    width: 55px;
    color: var(--text-muted) !important;
}


.bms-upazila-district {
    width: 180px;
    color: var(--text-secondary) !important;
}


.bms-upazila-name {
    color: var(--text) !important;
    font-weight: 600;
}


/* =========================================================
   STATUS
   ========================================================= */

.bms-upazila-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}


.bms-upazila-status.active {
    color: #166534;
    background: #dcfce7;
}


.bms-upazila-status.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.bms-upazila-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}


.bms-upazila-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}


.bms-upazila-action.edit {
    color: #1d4ed8;
    background: #eff6ff;
}


.bms-upazila-action.edit:hover {
    background: #dbeafe;
}


.bms-upazila-action.deactivate {
    color: #b45309;
    background: #fffbeb;
}


.bms-upazila-action.deactivate:hover {
    background: #fef3c7;
}


.bms-upazila-action.activate {
    color: #166534;
    background: #f0fdf4;
}


.bms-upazila-action.activate:hover {
    background: #dcfce7;
}


.bms-upazila-status-form {
    margin: 0;
}


/* =========================================================
   EMPTY
   ========================================================= */

.bms-upazila-empty {
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}


.bms-upazila-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}


.bms-upazila-empty p {
    margin: 6px 0 12px;
    font-size: 11px;
}


.bms-upazila-empty a {
    color: var(--primary);
    font-size: 11px;
    text-decoration: none;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 850px) {

    .bms-upazila-form-row {
        align-items: stretch;
        flex-wrap: wrap;
    }


    .bms-upazila-field.district,
    .bms-upazila-field.name {
        width: calc(50% - 6px);
    }


    .bms-upazila-form-button {
        width: 100%;
    }


    .bms-upazila-save {
        width: 100%;
    }

}


@media (max-width: 700px) {

    .bms-upazila-card-header {
        align-items: flex-start;
        flex-direction: column;
    }


    .bms-upazila-form-row {
        flex-direction: column;
    }


    .bms-upazila-field.district,
    .bms-upazila-field.name {
        width: 100%;
    }


    .bms-upazila-search {
        width: 100%;
        flex-wrap: wrap;
    }


    .bms-upazila-search select,
    .bms-upazila-search input {
        width: 100%;
    }


    .bms-upazila-table thead {
        display: none;
    }


    .bms-upazila-table,
    .bms-upazila-table tbody,
    .bms-upazila-table tr,
    .bms-upazila-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }


    .bms-upazila-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }


    .bms-upazila-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }


    .bms-upazila-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }


    .bms-upazila-actions {
        justify-content: flex-end;
    }


    .bms-upazila-id,
    .bms-upazila-district {
        width: 100%;
    }

}


@media (max-width: 420px) {

    .bms-upazila-form {
        padding: 15px;
    }


    .bms-upazila-card-header {
        padding: 15px;
    }

}

/* =========================================================
   COURIER MANAGEMENT
   ========================================================= */

.bms-courier-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.bms-courier-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-courier-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-courier-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}


/* Alerts */

.bms-courier-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}

.bms-courier-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bms-courier-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* Form */

.bms-courier-form {
    padding: 18px 20px;
}

.bms-courier-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.bms-courier-field {
    min-width: 0;
}

.bms-courier-field.courier-name {
    width: 280px;
}

.bms-courier-field.tracking-url {
    flex: 1;
}

.bms-courier-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-courier-field label span {
    color: #dc2626;
}

.bms-courier-field input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-courier-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-courier-form-button {
    flex-shrink: 0;
}

.bms-courier-save {
    height: 40px;
    padding: 0 18px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-courier-save:hover {
    opacity: .92;
}

.bms-courier-cancel {
    display: inline-block;
    padding: 7px 11px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border: none;
    border-radius: 6px;
    font-size: 11px;
    font-family: inherit;
    text-decoration: none;
}

/* 2026-09-23 (Revision 7): this class was previously only ever put on
   <a> tags (which have no border/font chrome to begin with), but
   invoice_view.php's new "Pay Invoice" is a real <button> -- without
   the reset above it would show the browser's default button border
   and font on top of this pill styling. */

.bms-courier-cancel:hover {
    background: #e5e7eb;
}


/* Search */

.bms-courier-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-courier-search input {
    width: 210px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-courier-search input:focus {
    border-color: var(--primary);
}

.bms-courier-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bms-courier-clear {
    padding: 8px 9px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}


/* Table */

.bms-courier-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-courier-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-courier-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bms-courier-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-courier-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-courier-table tbody tr:hover {
    background: #fafbfc;
}

.bms-courier-id {
    width: 60px;
    color: var(--text-muted) !important;
}

.bms-courier-name {
    width: 220px;
    color: var(--text) !important;
    font-weight: 600;
}

.bms-courier-tracking {
    color: var(--text-secondary) !important;
}


/* Tracking */

.bms-courier-track-link {
    display: inline-flex;
    align-items: center;
    padding: 5px 9px;
    color: #1d4ed8;
    background: #eff6ff;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.bms-courier-track-link:hover {
    background: #dbeafe;
}

.bms-courier-no-tracking {
    color: var(--text-muted);
}


/* Status */

.bms-courier-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.bms-courier-status.active {
    color: #166534;
    background: #dcfce7;
}

.bms-courier-status.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}


/* Actions */

.bms-courier-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-courier-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bms-courier-action.edit {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-courier-action.edit:hover {
    background: #dbeafe;
}

.bms-courier-action.deactivate {
    color: #b45309;
    background: #fffbeb;
}

.bms-courier-action.deactivate:hover {
    background: #fef3c7;
}

.bms-courier-action.activate {
    color: #166534;
    background: #f0fdf4;
}

.bms-courier-action.activate:hover {
    background: #dcfce7;
}

.bms-courier-status-form {
    margin: 0;
}


/* Empty */

.bms-courier-empty {
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.bms-courier-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.bms-courier-empty p {
    margin: 6px 0 12px;
    font-size: 11px;
}

.bms-courier-empty a {
    color: var(--primary);
    font-size: 11px;
    text-decoration: none;
}


/* Mobile */

@media (max-width: 850px) {

    .bms-courier-form-row {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .bms-courier-field.courier-name {
        width: calc(50% - 6px);
    }

    .bms-courier-field.tracking-url {
        width: calc(50% - 6px);
        flex: none;
    }

    .bms-courier-form-button {
        width: 100%;
    }

    .bms-courier-save {
        width: 100%;
    }
}


@media (max-width: 700px) {

    .bms-courier-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-courier-form-row {
        flex-direction: column;
    }

    .bms-courier-field.courier-name,
    .bms-courier-field.tracking-url {
        width: 100%;
    }

    .bms-courier-search {
        width: 100%;
        flex-wrap: wrap;
    }

    .bms-courier-search input {
        width: 100%;
    }

    .bms-courier-table thead {
        display: none;
    }

    .bms-courier-table,
    .bms-courier-table tbody,
    .bms-courier-table tr,
    .bms-courier-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bms-courier-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    .bms-courier-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }

    .bms-courier-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .bms-courier-actions {
        justify-content: flex-end;
    }
}


@media (max-width: 420px) {

    .bms-courier-form {
        padding: 15px;
    }

    .bms-courier-card-header {
        padding: 15px;
    }
}

/* =========================================================
   HEAD TYPE MANAGEMENT
   ========================================================= */

.bms-headtype-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.bms-headtype-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-headtype-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-headtype-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}


/* Alerts */

.bms-headtype-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}

.bms-headtype-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bms-headtype-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* Form */

.bms-headtype-form {
    padding: 18px 20px;
}

.bms-headtype-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.bms-headtype-field {
    width: 360px;
}

.bms-headtype-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-headtype-field label span {
    color: #dc2626;
}

.bms-headtype-field input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-headtype-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-headtype-form-button {
    flex-shrink: 0;
}

.bms-headtype-save {
    height: 40px;
    padding: 0 18px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-headtype-save:hover {
    opacity: .92;
}

.bms-headtype-cancel {
    padding: 7px 11px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 11px;
    text-decoration: none;
}

.bms-headtype-cancel:hover {
    background: #e5e7eb;
}


/* Search */

.bms-headtype-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-headtype-search input {
    width: 210px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-headtype-search input:focus {
    border-color: var(--primary);
}

.bms-headtype-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bms-headtype-clear {
    padding: 8px 9px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}


/* Table */

.bms-headtype-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-headtype-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-headtype-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bms-headtype-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-headtype-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-headtype-table tbody tr:hover {
    background: #fafbfc;
}

.bms-headtype-id {
    width: 60px;
    color: var(--text-muted) !important;
}

.bms-headtype-name {
    color: var(--text) !important;
    font-weight: 600;
}


/* Status */

.bms-headtype-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.bms-headtype-status.active {
    color: #166534;
    background: #dcfce7;
}

.bms-headtype-status.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}


/* Actions */

.bms-headtype-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-headtype-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bms-headtype-action.edit {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-headtype-action.edit:hover {
    background: #dbeafe;
}

.bms-headtype-action.deactivate {
    color: #b45309;
    background: #fffbeb;
}

.bms-headtype-action.deactivate:hover {
    background: #fef3c7;
}

.bms-headtype-action.activate {
    color: #166534;
    background: #f0fdf4;
}

.bms-headtype-action.activate:hover {
    background: #dcfce7;
}

.bms-headtype-status-form {
    margin: 0;
}


/* Empty */

.bms-headtype-empty {
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.bms-headtype-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.bms-headtype-empty p {
    margin: 6px 0 12px;
    font-size: 11px;
}

.bms-headtype-empty a {
    color: var(--primary);
    font-size: 11px;
    text-decoration: none;
}


/* Mobile */

@media (max-width: 700px) {

    .bms-headtype-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-headtype-form-row {
        flex-direction: column;
        align-items: stretch;
    }

    .bms-headtype-field {
        width: 100%;
    }

    .bms-headtype-form-button,
    .bms-headtype-save {
        width: 100%;
    }

    .bms-headtype-search {
        width: 100%;
        flex-wrap: wrap;
    }

    .bms-headtype-search input {
        width: 100%;
    }

    .bms-headtype-table thead {
        display: none;
    }

    .bms-headtype-table,
    .bms-headtype-table tbody,
    .bms-headtype-table tr,
    .bms-headtype-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bms-headtype-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    .bms-headtype-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }

    .bms-headtype-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .bms-headtype-actions {
        justify-content: flex-end;
    }
}


@media (max-width: 420px) {

    .bms-headtype-form {
        padding: 15px;
    }

    .bms-headtype-card-header {
        padding: 15px;
    }
}

/* =========================================================
   PRODUCT TYPE MANAGEMENT
   ========================================================= */

.bms-product-type-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.bms-product-type-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-product-type-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-product-type-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}


/* Alerts */

.bms-product-type-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}

.bms-product-type-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bms-product-type-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* Form */

.bms-product-type-form {
    padding: 18px 20px;
}

.bms-product-type-form-row {
    display: flex;
    align-items: flex-end;
    gap: 14px;
}

.bms-product-type-field {
    width: 360px;
}

.bms-product-type-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-product-type-field label span {
    color: #dc2626;
}

.bms-product-type-field input[type="text"] {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-product-type-field input[type="text"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}


/* Checkbox */

.bms-product-type-checkbox {
    height: 40px;
    display: flex;
    align-items: center;
}

.bms-product-type-checkbox label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}

.bms-product-type-checkbox input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}


/* Button */

.bms-product-type-form-button {
    flex-shrink: 0;
}

.bms-product-type-save {
    height: 40px;
    padding: 0 18px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-product-type-save:hover {
    opacity: .92;
}

.bms-product-type-cancel {
    padding: 7px 11px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 11px;
    text-decoration: none;
}

.bms-product-type-cancel:hover {
    background: #e5e7eb;
}


/* Search */

.bms-product-type-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-product-type-search input {
    width: 210px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-product-type-search input:focus {
    border-color: var(--primary);
}

.bms-product-type-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bms-product-type-clear {
    padding: 8px 9px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}


/* Table */

.bms-product-type-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-product-type-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-product-type-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bms-product-type-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-product-type-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-product-type-table tbody tr:hover {
    background: #fafbfc;
}

.bms-product-type-id {
    width: 60px;
    color: var(--text-muted) !important;
}

.bms-product-type-name {
    color: var(--text) !important;
    font-weight: 600;
}


/* Website */

.bms-product-type-web,
.bms-product-type-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.bms-product-type-web.visible {
    color: #166534;
    background: #dcfce7;
}

.bms-product-type-web.hidden {
    color: var(--text-secondary);
    background: #f3f4f6;
}


/* Status */

.bms-product-type-status.active {
    color: #166534;
    background: #dcfce7;
}

.bms-product-type-status.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}


/* Actions */

.bms-product-type-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-product-type-inline-form {
    margin: 0;
}

.bms-product-type-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bms-product-type-action.edit {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-product-type-action.edit:hover {
    background: #dbeafe;
}

.bms-product-type-action.hide-web {
    color: #b45309;
    background: #fffbeb;
}

.bms-product-type-action.hide-web:hover {
    background: #fef3c7;
}

.bms-product-type-action.show-web {
    color: #166534;
    background: #f0fdf4;
}

.bms-product-type-action.show-web:hover {
    background: #dcfce7;
}

.bms-product-type-action.deactivate {
    color: #b45309;
    background: #fffbeb;
}

.bms-product-type-action.deactivate:hover {
    background: #fef3c7;
}

.bms-product-type-action.activate {
    color: #166534;
    background: #f0fdf4;
}

.bms-product-type-action.activate:hover {
    background: #dcfce7;
}


/* Empty */

.bms-product-type-empty {
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.bms-product-type-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.bms-product-type-empty p {
    margin: 6px 0 12px;
    font-size: 11px;
}

.bms-product-type-empty a {
    color: var(--primary);
    font-size: 11px;
    text-decoration: none;
}


/* Mobile */

@media (max-width: 850px) {

    .bms-product-type-form-row {
        flex-wrap: wrap;
    }

    .bms-product-type-field {
        width: calc(100% - 140px);
    }

    .bms-product-type-checkbox {
        width: 110px;
    }

}


@media (max-width: 700px) {

    .bms-product-type-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-product-type-form-row {
        align-items: stretch;
        flex-direction: column;
    }

    .bms-product-type-field {
        width: 100%;
    }

    .bms-product-type-checkbox {
        width: 100%;
        height: auto;
    }

    .bms-product-type-form-button,
    .bms-product-type-save {
        width: 100%;
    }

    .bms-product-type-search {
        width: 100%;
        flex-wrap: wrap;
    }

    .bms-product-type-search input {
        width: 100%;
    }

    .bms-product-type-table thead {
        display: none;
    }

    .bms-product-type-table,
    .bms-product-type-table tbody,
    .bms-product-type-table tr,
    .bms-product-type-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bms-product-type-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    .bms-product-type-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }

    .bms-product-type-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .bms-product-type-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }
}


@media (max-width: 420px) {

    .bms-product-type-form {
        padding: 15px;
    }

    .bms-product-type-card-header {
        padding: 15px;
    }

    .bms-product-type-actions {
        justify-content: flex-start;
    }
}

/* =========================================================
   PRODUCT MANAGEMENT
   ========================================================= */

.bms-product-alert {
    margin-bottom: 16px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}

.bms-product-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bms-product-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-product-form {
    width: 100%;
}

.bms-product-section,
.bms-product-list-section {
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.bms-product-section-header,
.bms-product-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-product-section-header h2,
.bms-product-list-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-product-section-header p,
.bms-product-list-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.bms-product-id {
    padding: 7px 10px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-radius: 6px;
    font-size: 11px;
}

.bms-product-id strong {
    color: var(--text);
}


/* =========================================================
   GRID
   ========================================================= */

.bms-product-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.bms-product-grid.pricing {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.bms-product-field {
    min-width: 0;
}

.bms-product-field.full {
    grid-column: 1 / -1;
}

.bms-product-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 11px;
    font-weight: 600;
}

.bms-product-field label span {
    color: #dc2626;
}

.bms-product-field input[type="text"],
.bms-product-field input[type="number"],
.bms-product-field select,
.bms-product-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 12px;
}

.bms-product-field input[type="text"],
.bms-product-field input[type="number"],
.bms-product-field select {
    height: 40px;
}

.bms-product-field textarea {
    resize: vertical;
    line-height: 1.5;
}

.bms-product-field input:focus,
.bms-product-field select:focus,
.bms-product-field textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-product-field small {
    display: block;
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 10px;
}

.bms-product-field small strong {
    color: var(--primary);
}


/* =========================================================
   PRICE
   ========================================================= */

.bms-product-price {
    display: flex;
    align-items: stretch;
}

.bms-product-price span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    color: var(--text-secondary);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 7px 0 0 7px;
    font-size: 12px;
}

.bms-product-price input {
    width: 100%;
    min-width: 0;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 0 7px 7px 0;
    outline: none;
    font-family: inherit;
    font-size: 12px;
    text-align: right;
}

.bms-product-price input:focus {
    border-color: var(--primary);
}


/* =========================================================
   TEXTAREA GRID
   ========================================================= */

.bms-product-textarea-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}


/* =========================================================
   READONLY CANONICAL
   ========================================================= */

.bms-product-readonly {
    min-height: 40px;
    box-sizing: border-box;
    padding: 11px;
    color: var(--text-secondary);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 11px;
    word-break: break-all;
}

.bms-product-readonly span {
    color: var(--primary);
    font-weight: 600;
}


/* =========================================================
   VISIBILITY
   ========================================================= */

.bms-product-visibility {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
}

.bms-product-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    color: var(--text-secondary);
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 11px;
    cursor: pointer;
}

.bms-product-toggle input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
}


/* =========================================================
   FORM BUTTONS
   ========================================================= */

.bms-product-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-bottom: 20px;
}

.bms-product-save {
    min-height: 40px;
    padding: 0 20px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-product-save:hover {
    opacity: .92;
}

.bms-product-cancel {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 15px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border-radius: 7px;
    font-size: 11px;
    text-decoration: none;
}


/* =========================================================
   PRODUCT LIST
   ========================================================= */

.bms-product-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-product-search input {
    width: 240px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-product-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bms-product-search a {
    padding: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}

.bms-product-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
}

.bms-product-table th {
    padding: 10px 12px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.bms-product-table td {
    padding: 11px 12px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-product-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-product-table tbody tr:hover {
    background: #fafbfc;
}

.bms-product-name strong {
    display: block;
    font-size: 11px;
}

.bms-product-name small {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9px;
}

.bms-product-badge {
    display: inline-flex;
    padding: 4px 7px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 600;
}

.bms-product-badge.visible,
.bms-product-badge.active {
    color: #166534;
    background: #dcfce7;
}

.bms-product-badge.hidden,
.bms-product-badge.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}

.bms-product-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.bms-product-edit,
.bms-product-view {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
}

.bms-product-edit {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-product-view {
    color: #166534;
    background: #f0fdf4;
}

.bms-product-empty {
    padding: 40px !important;
    color: var(--text-muted) !important;
    text-align: center;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .bms-product-grid.pricing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 850px) {

    .bms-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 650px) {

    .bms-product-section-header,
    .bms-product-list-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-product-grid,
    .bms-product-grid.pricing,
    .bms-product-textarea-grid {
        grid-template-columns: 1fr;
    }

    .bms-product-field.full {
        grid-column: auto;
    }

    .bms-product-search {
        width: 100%;
    }

    .bms-product-search input {
        width: 100%;
    }

    .bms-product-form-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .bms-product-save,
    .bms-product-cancel {
        width: 100%;
        justify-content: center;
    }

    .bms-product-table thead {
        display: none;
    }

    .bms-product-table,
    .bms-product-table tbody,
    .bms-product-table tr,
    .bms-product-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bms-product-table tr {
        padding: 12px;
        border-bottom: 1px solid var(--border);
    }

    .bms-product-table td {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }

    .bms-product-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 9px;
        font-weight: 600;
    }

    .bms-product-actions {
        justify-content: flex-end;
    }

}

/* =========================================================
   SMS GATEWAY MANAGEMENT
   ========================================================= */

.bms-sms-gateway-page-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.bms-sms-gateway-button,
.bms-sms-gateway-save-button,
.bms-sms-gateway-cancel-button,
.bms-sms-gateway-edit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;
    padding: 0 14px;

    border-radius: 7px;

    font-family: inherit;
    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.bms-sms-gateway-button {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
}

.bms-sms-gateway-button:hover,
.bms-sms-gateway-save-button:hover {
    opacity: .92;
}

.bms-sms-gateway-button.secondary {
    color: var(--primary);
    background: #fff;
    border: 1px solid var(--primary);
}


/* =========================================================
   CARD
   ========================================================= */

.bms-sms-gateway-card {
    width: 100%;
    margin-bottom: 18px;

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 9px;

    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);

    overflow: hidden;
}


.bms-sms-gateway-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 18px;

    padding: 18px 20px;

    border-bottom: 1px solid var(--border-light);
}


.bms-sms-gateway-card-header h2 {
    margin: 0;

    color: var(--text);

    font-size: 15px;
    font-weight: 700;
}


.bms-sms-gateway-card-header p {
    margin: 4px 0 0;

    color: var(--text-muted);

    font-size: 11px;
}


.bms-sms-gateway-id {
    padding: 5px 9px;

    color: var(--text-muted);

    background: #f8fafc;

    border-radius: 6px;

    font-size: 10px;

    white-space: nowrap;
}


/* =========================================================
   ALERTS
   ========================================================= */

.bms-sms-gateway-alert {
    margin-bottom: 15px;

    padding: 11px 14px;

    border-radius: 7px;

    font-size: 12px;
}


.bms-sms-gateway-alert.success {
    color: #166534;

    background: #f0fdf4;

    border: 1px solid #bbf7d0;
}


.bms-sms-gateway-alert.error {
    color: #991b1b;

    background: #fef2f2;

    border: 1px solid #fecaca;
}


/* =========================================================
   FORM
   ========================================================= */

.bms-sms-gateway-form {
    padding: 20px;
}


.bms-sms-gateway-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 17px;
}


.bms-sms-gateway-field {
    min-width: 0;
}


.bms-sms-gateway-field.full {
    grid-column: 1 / -1;
}


.bms-sms-gateway-field label {
    display: block;

    margin-bottom: 7px;

    color: var(--text);

    font-size: 12px;
    font-weight: 600;
}


.bms-sms-gateway-field label span {
    color: #dc2626;
}


.bms-sms-gateway-field input,
.bms-sms-gateway-field select,
.bms-sms-gateway-field textarea {
    width: 100%;

    box-sizing: border-box;

    padding: 9px 11px;

    color: var(--text);

    background: #fff;

    border: 1px solid var(--border);
    border-radius: 7px;

    outline: none;

    font-family: inherit;
    font-size: 13px;
}


.bms-sms-gateway-field input,
.bms-sms-gateway-field select {
    height: 40px;
}


.bms-sms-gateway-field textarea {
    min-height: 85px;

    resize: vertical;
}


.bms-sms-gateway-field input:focus,
.bms-sms-gateway-field select:focus,
.bms-sms-gateway-field textarea:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 3px rgba(23, 105, 224, .08);
}


.bms-sms-gateway-field input:disabled {
    color: var(--text-muted);

    background: #f8fafc;
}


.bms-sms-gateway-field small {
    display: block;

    margin-top: 5px;

    color: var(--text-muted);

    font-size: 10.5px;

    line-height: 1.5;
}


/* =========================================================
   CHECKBOXES
   ========================================================= */

.bms-sms-gateway-check-row {
    display: flex;
    align-items: center;

    gap: 20px;

    grid-column: 1 / -1;

    padding-top: 3px;
}


.bms-sms-gateway-checkbox {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    color: var(--text-secondary);

    font-size: 12px;

    cursor: pointer;
}


.bms-sms-gateway-checkbox input {
    width: 16px;
    height: 16px;

    margin: 0;

    accent-color: var(--primary);
}


/* =========================================================
   FORM ACTIONS
   ========================================================= */

.bms-sms-gateway-form-actions {
    display: flex;
    justify-content: flex-end;

    gap: 9px;

    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid var(--border-light);
}


.bms-sms-gateway-cancel-button {
    color: var(--text-secondary);

    background: #fff;

    border: 1px solid var(--border);
}


.bms-sms-gateway-save-button {
    color: #fff;

    background: var(--primary);

    border: 1px solid var(--primary);
}


/* =========================================================
   GATEWAY TABLE
   ========================================================= */

.bms-sms-gateway-table-wrap {
    width: 100%;

    overflow-x: auto;
}


.bms-sms-gateway-table {
    width: 100%;

    min-width: 900px;

    border-collapse: collapse;

    font-size: 12px;
}


.bms-sms-gateway-table th {
    padding: 10px 14px;

    color: var(--text-secondary);

    background: #f8fafc;

    border-bottom: 1px solid var(--border);

    text-align: left;

    font-size: 10px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .03em;

    white-space: nowrap;
}


.bms-sms-gateway-table td {
    padding: 11px 14px;

    color: var(--text);

    border-bottom: 1px solid var(--border-light);

    vertical-align: middle;
}


.bms-sms-gateway-table tbody tr:last-child td {
    border-bottom: 0;
}


.bms-sms-gateway-table tbody tr:hover {
    background: #fafbfc;
}


/* =========================================================
   GATEWAY CELLS
   ========================================================= */

.bms-sms-gateway-name {
    display: flex;
    flex-direction: column;
}


.bms-sms-gateway-name strong {
    color: var(--text);

    font-size: 12.5px;
}


.bms-sms-gateway-name span {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 9.5px;
}


.bms-sms-gateway-url {
    max-width: 300px;

    color: var(--text-secondary);

    font-size: 10.5px;

    word-break: break-all;
}


.bms-sms-gateway-masks {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;
}


.bms-sms-gateway-mask {
    display: inline-flex;
    align-items: center;

    padding: 4px 7px;

    color: var(--primary);

    background: #eff6ff;

    border-radius: 5px;

    font-size: 9.5px;
    font-weight: 600;

    white-space: nowrap;
}


/* =========================================================
   STATUS BADGES
   ========================================================= */

.bms-sms-gateway-status,
.bms-sms-gateway-default {
    display: inline-flex;
    align-items: center;

    padding: 4px 8px;

    border-radius: 20px;

    font-size: 9.5px;
    font-weight: 600;

    white-space: nowrap;
}


.bms-sms-gateway-status.active {
    color: #166534;

    background: #dcfce7;
}


.bms-sms-gateway-status.inactive {
    color: var(--text-secondary);

    background: #f3f4f6;
}


.bms-sms-gateway-default.yes {
    color: #1d4ed8;

    background: #eff6ff;
}


.bms-sms-gateway-default.no {
    color: var(--text-secondary);

    background: #f3f4f6;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.bms-sms-gateway-actions {
    display: flex;
    align-items: center;

    gap: 6px;

    flex-wrap: wrap;
}


.bms-sms-gateway-edit-button {
    min-height: 29px;

    padding: 0 9px;

    color: #1d4ed8;

    background: #eff6ff;

    border: 0;

    border-radius: 5px;

    font-size: 10px;
}


.bms-sms-gateway-edit-button:hover {
    background: #dbeafe;
}


.bms-sms-gateway-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 29px;

    padding: 0 9px;

    border: 0;
    border-radius: 5px;

    font-family: inherit;

    font-size: 10px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;
}


.bms-sms-gateway-action.deactivate {
    color: #b45309;

    background: #fffbeb;
}


.bms-sms-gateway-action.deactivate:hover {
    background: #fef3c7;
}


.bms-sms-gateway-action.activate {
    color: #166534;

    background: #f0fdf4;
}


.bms-sms-gateway-action.activate:hover {
    background: #dcfce7;
}


.bms-sms-gateway-action.default {
    color: #1d4ed8;

    background: #eff6ff;
}


.bms-sms-gateway-action.default:hover {
    background: #dbeafe;
}


/* =========================================================
   BALANCE
   ========================================================= */

.bms-sms-gateway-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 18px 20px;
}


.bms-sms-gateway-balance-label {
    color: var(--text-secondary);

    font-size: 11px;
}


.bms-sms-gateway-balance-value {
    color: var(--text);

    font-size: 22px;
    font-weight: 700;
}


.bms-sms-gateway-balance-value span {
    margin-left: 4px;

    color: var(--text-muted);

    font-size: 11px;
    font-weight: 500;
}


.bms-sms-gateway-balance-meta {
    margin-top: 3px;

    color: var(--text-muted);

    font-size: 10px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.bms-sms-gateway-empty {
    padding: 40px 20px;

    color: var(--text-secondary);

    text-align: center;

    font-size: 12px;
}


.bms-sms-gateway-empty strong {
    display: block;

    color: var(--text);

    font-size: 13px;
}


.bms-sms-gateway-empty p {
    margin: 6px 0 12px;

    font-size: 11px;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 800px) {

    .bms-sms-gateway-form-grid {
        grid-template-columns: 1fr;
    }


    .bms-sms-gateway-field.full,
    .bms-sms-gateway-check-row {
        grid-column: auto;
    }


    .bms-sms-gateway-check-row {
        flex-direction: column;

        align-items: flex-start;

        gap: 10px;
    }


    .bms-sms-gateway-card-header {
        align-items: flex-start;

        flex-direction: column;
    }


    .bms-sms-gateway-page-actions {
        width: 100%;
    }


    .bms-sms-gateway-button {
        flex: 1;
    }

}


@media (max-width: 600px) {

    .bms-sms-gateway-form {
        padding: 16px;
    }


    .bms-sms-gateway-card-header {
        padding: 15px;
    }


    .bms-sms-gateway-page-actions {
        flex-direction: column;
    }


    .bms-sms-gateway-button {
        width: 100%;
    }


    .bms-sms-gateway-form-actions {
        flex-direction: column-reverse;

        align-items: stretch;
    }


    .bms-sms-gateway-save-button,
    .bms-sms-gateway-cancel-button {
        width: 100%;
    }


    .bms-sms-gateway-balance {
        align-items: flex-start;

        flex-direction: column;

        gap: 8px;
    }

}

/* =========================================================
   SMS LOG
   Add this section to the existing app.css
   ========================================================= */

.sms-log-alert {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 14px;
}

.sms-log-alert-success {
    background: #eaf7ee;
    color: #237a3b;
    border: 1px solid #b9e4c5;
}

.sms-log-alert-error {
    background: #fdecec;
    color: #a52828;
    border: 1px solid #f1bcbc;
}


/* Filter / Search Panel */
.sms-log-panel {
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 20px;
}

.sms-log-filter-form {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-end;
}

.sms-log-filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sms-log-filter-group label {
    font-size: 12px;
    font-weight: 600;
    color: #555;
}

.sms-log-filter-group input,
.sms-log-filter-group select {
    height: 38px;
    padding: 7px 10px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
    min-width: 150px;
}

.sms-log-filter-group input:focus,
.sms-log-filter-group select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(23, 105, 224, 0.10);
}

.sms-log-filter-group.sms-log-search {
    flex: 1;
    min-width: 220px;
}

.sms-log-filter-group.sms-log-search input {
    width: 100%;
}

.sms-log-filter-actions {
    display: flex;
    gap: 8px;
}


/* Buttons */
.bms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 14px;
    border-radius: 5px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.bms-btn-primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
}

.bms-btn-primary:hover {
    opacity: 0.9;
}

.bms-btn-secondary {
    background: #fff;
    color: #444;
    border-color: #ced4da;
}

.bms-btn-secondary:hover {
    background: #f5f6f8;
}

.bms-btn-small {
    height: 30px;
    padding: 0 9px;
    font-size: 12px;
}


/* Summary */
.sms-log-summary {
    margin-bottom: 12px;
    color: #666;
    font-size: 13px;
}


/* Table */
.sms-log-table-wrapper {
    width: 100%;
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e3e7ed;
    border-radius: 8px;
}

.sms-log-table {
    width: 100%;
    min-width: 1050px;
    border-collapse: collapse;
    font-size: 13px;
}

.sms-log-table th {
    background: #f6f8fa;
    color: #444;
    font-weight: 600;
    text-align: left;
    padding: 11px 10px;
    border-bottom: 1px solid #dfe3e8;
    white-space: nowrap;
}

.sms-log-table td {
    padding: 10px;
    border-bottom: 1px solid #edf0f2;
    vertical-align: top;
}

.sms-log-table tbody tr:hover {
    background: #fafbfc;
}

.sms-log-table tbody tr:last-child td {
    border-bottom: 0;
}


/* Date / Text */
.sms-log-date {
    white-space: nowrap;
    color: #333;
}

.sms-log-subtext {
    display: block;
    margin-top: 3px;
    color: #888;
    font-size: 11px;
}

.sms-log-muted {
    color: #999;
}

.sms-log-purpose {
    font-size: 11px;
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

.sms-log-message {
    max-width: 280px;
    line-height: 1.45;
    word-break: break-word;
}

.sms-log-uid {
    font-family: monospace;
    font-size: 11px;
    color: #555;
    word-break: break-all;
}

.sms-log-actions {
    white-space: nowrap;
}

.sms-log-checked {
    margin-top: 4px;
    color: #888;
    font-size: 10px;
}


/* Status */
.sms-log-status {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.sms-status-success {
    background: #e8f6ed;
    color: #237a3b;
}

.sms-status-failed {
    background: #fdeaea;
    color: #a52828;
}

.sms-status-submitted {
    background: #eaf2ff;
    color: #245da8;
}

.sms-status-queued {
    background: #fff6df;
    color: #8a6500;
}

.sms-status-pending {
    background: #f0f1f3;
    color: #666;
}

.sms-status-default {
    background: #f0f1f3;
    color: #555;
}


/* Expanded Details */
.sms-log-detail-row td {
    padding: 0;
    background: #fafbfc;
}

.sms-log-details {
    padding: 14px 16px;
    border-top: 1px solid #edf0f2;
}

.sms-log-details summary {
    cursor: pointer;
    font-weight: 600;
    color: #555;
    font-size: 12px;
}

.sms-log-details summary:hover {
    color: var(--primary);
}

.sms-log-full-message {
    margin-top: 10px;
    padding: 10px;
    background: #fff;
    border: 1px solid #e2e6ea;
    border-radius: 5px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 12px;
    line-height: 1.5;
}


/* Empty State */
.sms-log-empty {
    padding: 35px 20px;
    text-align: center;
    color: #888;
}


/* Pagination */
.sms-log-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.sms-log-page-numbers {
    display: flex;
    align-items: center;
    gap: 4px;
}

.sms-log-page-link,
.sms-log-page-current {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 13px;
    text-decoration: none;
}

.sms-log-page-link {
    color: #444;
    background: #fff;
    border: 1px solid #d7dce1;
}

.sms-log-page-link:hover {
    background: #f5f7f9;
}

.sms-log-page-current {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
}


/* Responsive */
@media (max-width: 1100px) {

    .sms-log-filter-form {
        align-items: stretch;
    }

    .sms-log-filter-group {
        flex: 1 1 180px;
    }

    .sms-log-filter-group.sms-log-search {
        flex: 1 1 100%;
    }

    .sms-log-filter-actions {
        flex: 1 1 auto;
        align-items: flex-end;
    }
}


@media (max-width: 768px) {

    .sms-log-panel {
        padding: 14px;
    }

    .sms-log-filter-form {
        display: block;
    }

    .sms-log-filter-group {
        width: 100%;
        margin-bottom: 12px;
    }

    .sms-log-filter-group input,
    .sms-log-filter-group select {
        width: 100%;
    }

    .sms-log-filter-actions {
        width: 100%;
    }

    .sms-log-filter-actions .bms-btn {
        flex: 1;
    }

    .sms-log-pagination {
        justify-content: center;
    }
}


@media (max-width: 480px) {

    .sms-log-table {
        min-width: 950px;
    }

    .sms-log-panel {
        padding: 12px;
    }

    .sms-log-alert {
        font-size: 13px;
    }
}

/* =========================================================
   EMAIL GATEWAY MANAGEMENT
   Append this block to the existing app.css.
   ========================================================= */

.bms-email-gateway-alert {
    margin-bottom: 18px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
    line-height: 1.5;
}

.bms-email-gateway-alert.success {
    color: #166534;
    background: #dcfce7;
    border: 1px solid #bbf7d0;
}

.bms-email-gateway-alert.error {
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
}

.bms-email-gateway-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.bms-email-gateway-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-email-gateway-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-email-gateway-card-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.bms-email-gateway-id {
    color: var(--text-muted);
    font-size: 10px;
    white-space: nowrap;
}

.bms-email-gateway-id strong {
    color: var(--text);
}

.bms-email-gateway-form {
    padding: 20px;
}

.bms-email-gateway-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.bms-email-gateway-field {
    min-width: 0;
}

.bms-email-gateway-field.full {
    grid-column: 1 / -1;
}

.bms-email-gateway-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-email-gateway-field label span {
    color: #dc2626;
}

.bms-email-gateway-field input,
.bms-email-gateway-field select {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 9px 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-email-gateway-field input:focus,
.bms-email-gateway-field select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}


.bms-email-gateway-password-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.bms-email-gateway-password-wrap input {
    padding-right: 42px;
}

.bms-email-gateway-password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    width: 28px;
    height: 28px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 15px;
    cursor: pointer;
}

.bms-email-gateway-password-toggle:hover {
    color: var(--text);
}

.bms-email-gateway-field small {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 10.5px;
    line-height: 1.5;
}

.bms-email-gateway-check-row {
    display: flex;
    align-items: center;
    gap: 20px;
    grid-column: 1 / -1;
    padding-top: 3px;
}

.bms-email-gateway-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    cursor: pointer;
}

.bms-email-gateway-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
}

.bms-email-gateway-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-light);
}

.bms-email-gateway-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.bms-email-gateway-save-button {
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
}

.bms-email-gateway-save-button:hover {
    opacity: .92;
}

.bms-email-gateway-cancel-button {
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
}

.bms-email-gateway-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-email-gateway-table {
    width: 100%;
    min-width: 1000px;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-email-gateway-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

.bms-email-gateway-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-email-gateway-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-email-gateway-table tbody tr:hover {
    background: #fafbfc;
}

.bms-email-gateway-name,
.bms-email-gateway-smtp,
.bms-email-gateway-sender {
    display: flex;
    flex-direction: column;
}

.bms-email-gateway-name strong,
.bms-email-gateway-smtp strong,
.bms-email-gateway-sender strong {
    color: var(--text);
    font-size: 12px;
}

.bms-email-gateway-name span,
.bms-email-gateway-smtp span,
.bms-email-gateway-sender span {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 9.5px;
}

.bms-email-gateway-status,
.bms-email-gateway-default {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 9.5px;
    font-weight: 600;
    white-space: nowrap;
}

.bms-email-gateway-status.active {
    color: #166534;
    background: #dcfce7;
}

.bms-email-gateway-status.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}

.bms-email-gateway-default.yes {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-email-gateway-default.no {
    color: var(--text-secondary);
    background: #f3f4f6;
}

.bms-email-gateway-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bms-email-gateway-inline-form {
    display: inline;
    margin: 0;
}

.bms-email-gateway-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 27px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bms-email-gateway-action.edit {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-email-gateway-action.default {
    color: #166534;
    background: #f0fdf4;
}

.bms-email-gateway-action.activate {
    color: #166534;
    background: #dcfce7;
}

.bms-email-gateway-action.deactivate {
    color: #991b1b;
    background: #fee2e2;
}

.bms-email-gateway-action-label {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    color: var(--text-muted);
    background: #f3f4f6;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 600;
}

.bms-email-gateway-empty {
    padding: 40px;
    color: var(--text-muted);
    text-align: center;
    font-size: 12px;
}

@media (max-width: 650px) {

    .bms-email-gateway-form-grid {
        grid-template-columns: 1fr;
    }

    .bms-email-gateway-field.full {
        grid-column: auto;
    }

    .bms-email-gateway-check-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .bms-email-gateway-form-actions {
        flex-direction: column;
    }

    .bms-email-gateway-button {
        width: 100%;
    }

    .bms-email-gateway-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

}

/* =========================================================
   SSLCommerz Management
   ========================================================= */

.bms-sslcommerz-alert {
    padding: 12px 16px;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
}

.bms-sslcommerz-alert.success {
    background: #edf8f0;
    color: #216e39;
    border: 1px solid #b7dfc1;
}

.bms-sslcommerz-alert.error {
    background: #fff1f1;
    color: #a12622;
    border: 1px solid #f0b8b5;
}


/* Card */

.bms-sslcommerz-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 24px;
    overflow: hidden;
}

.bms-sslcommerz-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    background: #fafafa;
    border-bottom: 1px solid #e5e7eb;
}

.bms-sslcommerz-card-header h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #111827;
}

.bms-sslcommerz-card-header p {
    margin: 5px 0 0;
    font-size: 13px;
    color: #6b7280;
}

.bms-sslcommerz-id {
    font-size: 12px;
    color: #6b7280;
    white-space: nowrap;
}

.bms-sslcommerz-id strong {
    color: #111827;
}


/* Form */

.bms-sslcommerz-form {
    padding: 20px;
}

.bms-sslcommerz-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.bms-sslcommerz-field {
    min-width: 0;
}

.bms-sslcommerz-field.full {
    grid-column: 1 / -1;
}

.bms-sslcommerz-field label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}

.bms-sslcommerz-field label span {
    color: #dc2626;
}

.bms-sslcommerz-field input,
.bms-sslcommerz-field select {
    width: 100%;
    height: 40px;
    padding: 8px 11px;
    box-sizing: border-box;
    border: 1px solid #d1d5db;
    border-radius: 5px;
    background: #fff;
    color: #111827;
    font-size: 14px;
}

.bms-sslcommerz-field input:focus,
.bms-sslcommerz-field select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.10);
}

.bms-sslcommerz-field small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #6b7280;
}


/* Password */

.bms-sslcommerz-password-wrap {
    position: relative;
    width: 100%;
}

.bms-sslcommerz-password-wrap input {
    padding-right: 45px;
}

.bms-sslcommerz-password-toggle {
    position: absolute;
    top: 1px;
    right: 1px;
    width: 39px;
    height: 38px;
    padding: 0;
    border: 0;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    font-size: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bms-sslcommerz-password-toggle:hover {
    color: #111827;
}


/* Checkbox */

.bms-sslcommerz-check-row {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
    grid-column: 1 / -1;
    padding-top: 2px;
}

.bms-sslcommerz-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.bms-sslcommerz-checkbox input {
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
}


/* Form buttons */

.bms-sslcommerz-form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #eef0f2;
}

.bms-sslcommerz-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 16px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-sizing: border-box;
}

.bms-sslcommerz-save-button {
    border: 1px solid #2563eb;
    background: #2563eb;
    color: #fff;
}

.bms-sslcommerz-save-button:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.bms-sslcommerz-cancel-button {
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
}

.bms-sslcommerz-cancel-button:hover {
    background: #f9fafb;
}


/* Table */

.bms-sslcommerz-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bms-sslcommerz-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
    font-size: 13px;
}

.bms-sslcommerz-table th {
    padding: 11px 14px;
    text-align: left;
    white-space: nowrap;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    color: #374151;
    font-weight: 600;
}

.bms-sslcommerz-table td {
    padding: 12px 14px;
    vertical-align: middle;
    border-bottom: 1px solid #eef0f2;
    color: #374151;
}

.bms-sslcommerz-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-sslcommerz-table tbody tr:hover {
    background: #fafafa;
}


/* Gateway name */

.bms-sslcommerz-name strong {
    color: #111827;
    font-weight: 600;
}

.bms-sslcommerz-store-id {
    font-family: monospace;
    font-size: 12px;
    color: #374151;
}


/* Mode */

.bms-sslcommerz-mode {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.bms-sslcommerz-mode.sandbox {
    background: #fff7ed;
    color: #c2410c;
}

.bms-sslcommerz-mode.live {
    background: #ecfdf5;
    color: #047857;
}


/* Status */

.bms-sslcommerz-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.bms-sslcommerz-status.active {
    background: #ecfdf3;
    color: #15803d;
}

.bms-sslcommerz-status.inactive {
    background: #f3f4f6;
    color: #6b7280;
}


/* Default */

.bms-sslcommerz-default {
    display: inline-flex;
    align-items: center;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.bms-sslcommerz-default.yes {
    background: #eff6ff;
    color: #1d4ed8;
}

.bms-sslcommerz-default.no {
    background: #f3f4f6;
    color: #6b7280;
}


/* Actions */

.bms-sslcommerz-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.bms-sslcommerz-inline-form {
    display: inline;
    margin: 0;
    padding: 0;
}

.bms-sslcommerz-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #374151;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
}

.bms-sslcommerz-action:hover {
    background: #f9fafb;
}

.bms-sslcommerz-action.edit {
    color: #2563eb;
    border-color: #bfdbfe;
}

.bms-sslcommerz-action.edit:hover {
    background: #eff6ff;
}

.bms-sslcommerz-action.default {
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.bms-sslcommerz-action.default:hover {
    background: #eff6ff;
}

.bms-sslcommerz-action.activate {
    color: #15803d;
    border-color: #bbf7d0;
}

.bms-sslcommerz-action.activate:hover {
    background: #f0fdf4;
}

.bms-sslcommerz-action.deactivate {
    color: #dc2626;
    border-color: #fecaca;
}

.bms-sslcommerz-action.deactivate:hover {
    background: #fef2f2;
}

.bms-sslcommerz-action-label {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 6px 10px;
    border-radius: 4px;
    background: #eff6ff;
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 600;
}


/* Empty */

.bms-sslcommerz-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}


/* Responsive */

@media (max-width: 768px) {

    .bms-sslcommerz-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-sslcommerz-form {
        padding: 15px;
    }

    .bms-sslcommerz-form-grid {
        grid-template-columns: 1fr;
    }

    .bms-sslcommerz-field.full {
        grid-column: auto;
    }

    .bms-sslcommerz-check-row {
        grid-column: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .bms-sslcommerz-form-actions {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {

    .bms-sslcommerz-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .bms-sslcommerz-button {
        width: 100%;
    }

    .bms-sslcommerz-actions {
        align-items: flex-start;
    }
}

/* ==========================================================================
   EMAIL LOG
   ========================================================================== */

.email-log-panel {
    margin-bottom: 20px;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    padding: 18px;
}

.email-log-filter-form {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr auto;
    gap: 14px;
    align-items: end;
}

.email-log-filter-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.email-log-filter-group label {
    font-size: 13px;
    font-weight: 600;
}

.email-log-filter-group input,
.email-log-filter-group select {
    width: 100%;
    box-sizing: border-box;
    padding: 9px 11px;
    border: 1px solid #cfd5dc;
    border-radius: 5px;
    background: #fff;
    font-size: 14px;
}

.email-log-filter-group input:focus,
.email-log-filter-group select:focus {
    outline: none;
    border-color: #4a78c2;
    box-shadow: 0 0 0 2px rgba(74, 120, 194, 0.12);
}

.email-log-filter-actions {
    display: flex;
    gap: 8px;
}

.email-log-summary {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.email-log-summary>div {
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    padding: 14px 16px;
}

.email-log-summary strong {
    display: block;
    font-size: 20px;
    line-height: 1.2;
}

.email-log-summary span {
    display: block;
    margin-top: 4px;
    color: #6b7280;
    font-size: 13px;
}

.email-log-table-wrapper {
    overflow-x: auto;
    background: #fff;
    border: 1px solid #e1e5ea;
    border-radius: 8px;
}

.email-log-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

.email-log-table th {
    padding: 12px 14px;
    background: #f7f8fa;
    border-bottom: 1px solid #e1e5ea;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.email-log-table td {
    padding: 13px 14px;
    border-bottom: 1px solid #edf0f3;
    vertical-align: top;
    font-size: 14px;
}

.email-log-table tbody tr:last-child td {
    border-bottom: none;
}

.email-log-date {
    white-space: nowrap;
    font-weight: 500;
}

.email-log-subtext {
    margin-top: 4px;
    color: #7a828c;
    font-size: 12px;
}

.email-log-recipient {
    font-weight: 500;
    word-break: break-word;
}

.email-log-subject {
    max-width: 300px;
    word-break: break-word;
}

.email-log-gateway {
    white-space: nowrap;
}

.email-log-status {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}

.email-status-sent {
    background: #eaf7ee;
    color: #236b36;
}

.email-status-failed {
    background: #fdecec;
    color: #a12626;
}

.email-status-queued {
    background: #fff6df;
    color: #8a6500;
}

.email-status-default {
    background: #eef1f4;
    color: #5f6872;
}

.email-log-actions {
    min-width: 80px;
}

.email-log-actions details {
    position: relative;
}

.email-log-actions summary {
    cursor: pointer;
    color: #3569ad;
    font-size: 13px;
    font-weight: 600;
    list-style: none;
}

.email-log-actions summary::-webkit-details-marker {
    display: none;
}

.email-log-actions summary::after {
    content: " ▾";
}

.email-log-actions details[open] summary::after {
    content: " ▴";
}

.email-log-details {
    margin-top: 12px;
    padding: 16px;
    min-width: 420px;
    max-width: 700px;
    background: #f8f9fb;
    border: 1px solid #e1e5ea;
    border-radius: 6px;
}

.email-log-detail-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid #e7eaee;
    font-size: 13px;
}

.email-log-detail-row:last-of-type {
    border-bottom: none;
}

.email-log-detail-row strong {
    color: #555e68;
}

.email-log-detail-row span {
    word-break: break-word;
}

.email-log-message-heading {
    margin-top: 16px;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.email-log-message {
    background: #fff;
    border: 1px solid #dfe3e8;
    border-radius: 5px;
    overflow: hidden;
}

.email-log-message-note {
    padding: 7px 10px;
    background: #f4f6f8;
    border-bottom: 1px solid #dfe3e8;
    color: #6b7280;
    font-size: 11px;
}

.email-log-message-content {
    padding: 14px;
    max-height: 400px;
    overflow: auto;
}

.email-log-plain-message {
    white-space: normal;
    font-family: inherit;
}

.email-log-error-box {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fdecec;
    border: 1px solid #efb7b7;
    border-radius: 5px;
    color: #a12626;
    font-size: 13px;
}

.email-log-empty {
    padding: 40px 20px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.email-log-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.email-log-page-numbers {
    display: flex;
    gap: 5px;
}

.email-log-page-link,
.email-log-page-current {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    box-sizing: border-box;
    padding: 0 9px;
    border: 1px solid #d5dae0;
    border-radius: 5px;
    text-decoration: none;
    font-size: 13px;
}

.email-log-page-link {
    color: #3569ad;
    background: #fff;
}

.email-log-page-link:hover {
    background: #f5f7fa;
}

.email-log-page-current {
    background: #3569ad;
    border-color: #3569ad;
    color: #fff;
    font-weight: 600;
}

@media (max-width: 1000px) {
    .email-log-filter-form {
        grid-template-columns: repeat(2, 1fr);
    }

    .email-log-filter-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .email-log-filter-form {
        grid-template-columns: 1fr;
    }

    .email-log-filter-actions {
        grid-column: auto;
    }

    .email-log-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .email-log-details {
        min-width: 0;
        width: calc(100vw - 70px);
        max-width: none;
        box-sizing: border-box;
    }
}

/* =========================================================
   CUSTOMER REGISTRATION
   ========================================================= */

.bms-customer-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.bms-customer-card-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    background: var(--white);
}

.bms-customer-card-header h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
}

.bms-customer-card-header p {
    margin: 5px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* FORM */

.bms-customer-form {
    padding: 24px;
}

/* SECTIONS */

.bms-customer-section {
    margin-bottom: 28px;
}

.bms-customer-section:last-child {
    margin-bottom: 0;
}

.bms-customer-section-header {
    margin-bottom: 16px;
}

.bms-customer-section-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
}

.bms-customer-help {
    margin: 4px 0 0;
    font-size: 12px;
    color: var(--text-secondary);
}

/* GRID */

.bms-customer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

/* INPUT FIELDS */

.bms-customer-input {
    min-width: 0;
}

.bms-customer-full {
    grid-column: 1 / -1;
}

.bms-customer-input label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.bms-customer-input input,
.bms-customer-input select,
.bms-customer-input textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--white);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    outline: none;
    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.bms-customer-input input,
.bms-customer-input select {
    height: 40px;
    padding: 0 11px;
}

.bms-customer-input textarea {
    min-height: 90px;
    padding: 10px 11px;
    resize: vertical;
}

.bms-customer-input input:focus,
.bms-customer-input select:focus,
.bms-customer-input textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, 0.10);
}

.bms-customer-input input::placeholder,
.bms-customer-input textarea::placeholder {
    color: var(--text-muted);
}

/* REQUIRED */

.bms-customer-required {
    color: var(--danger);
}

/* LOCKED DELIVERY FIELDS */

.bms-customer-input input[readonly],
.bms-customer-input select.bms-customer-locked {
    background: #f8fafc;
    color: var(--text-secondary);
    cursor: not-allowed;
}

/* SAME AS BILLING */

.bms-customer-check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--text);
}

.bms-customer-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}

/* ACTION BUTTONS */

.bms-customer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 20px;
    margin-top: 8px;
    border-top: 1px solid var(--border-light);
}

.bms-customer-reset,
.bms-customer-save {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 16px;
    border-radius: 5px;
    font-family: var(--font);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all .15s ease;
}

.bms-customer-reset {
    border: 1px solid #ced4da;
    background: var(--white);
    color: #444;
}

.bms-customer-reset:hover {
    background: #f5f6f8;
}

.bms-customer-save {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #fff;
}

.bms-customer-save:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

/* ALERTS */

.bms-customer-alert {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    line-height: 1.5;
}

.bms-customer-alert.error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.bms-customer-alert.success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .bms-customer-form {
        padding: 18px;
    }

    .bms-customer-card-header {
        padding: 18px;
    }

    .bms-customer-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .bms-customer-full {
        grid-column: auto;
    }

    .bms-customer-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .bms-customer-reset,
    .bms-customer-save {
        width: 100%;
    }
}

@media (max-width: 480px) {

    .bms-customer-form {
        padding: 14px;
    }

    .bms-customer-card-header {
        padding: 16px;
    }

    .bms-customer-section {
        margin-bottom: 22px;
    }
}
/* =========================================================
   STOCK MODULE (Receive Stock / Transfer Stock / Stock List)
   ========================================================= */

.bms-stock-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: visible;
}

.bms-stock-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-stock-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-stock-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}


/* Alerts */

.bms-stock-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}

.bms-stock-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bms-stock-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}

/* 2026-09-23 (Revision 6): used by invoice_view.php for the "this
   invoice is Locked/Cancelled, view-only" banner and for the
   stock-could-not-be-auto-adjusted warning shown after an edit. */

.bms-stock-alert.warning {
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
}


/* Form */

.bms-stock-form {
    padding: 18px 20px;
}

.bms-stock-form-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

/*
 * 2026-09-26: "2 amount & 2 payment date showing which will confuse
 * staff" -- invoice_view.php's Pay Invoice panel toggles the "Available
 * Payment" and "Record a new payment" field groups via the `hidden`
 * attribute (existingPaymentFields / newPaymentFields), but `.bms-stock-
 * form-grid`'s own `display: grid` outranks the UA stylesheet's
 * `[hidden] { display: none }` default, so a "hidden" group stayed
 * visually laid out as an (empty-looking, disabled) grid right next to
 * the visible one -- two Amount fields, two Payment Date fields on
 * screen at once. Same fix already applied to .bms-user-modal,
 * .bms-iframe-modal and .bms-branch-no-results below for the same
 * reason -- any element whose own CSS sets `display` needs its own
 * `[hidden]` override to actually hide.
 */
.bms-stock-form-grid[hidden] {
    display: none;
}

/*
 * 2026-09-23 (Revision 8): "From + to + branch & apply button should be
 * one line." index.php's filter has 4 fields (From, To, Branch, Apply),
 * one more than .bms-stock-form-grid's 3-column layout, so it gets its
 * own 4-column variant rather than wrapping to a second row on desktop.
 */
.bms-index-filter-grid {
    display: grid;
    /* 2026-09-25: "index.php page please show a column called courier and
       allow to filter using courier also" -- From/To/Branch/Courier/Apply
       is 5 fields now, was 4. */
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

@media (max-width: 900px) {
    .bms-index-filter-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .bms-index-filter-grid {
        grid-template-columns: 1fr;
    }
}

.bms-stock-field {
    position: relative;
    min-width: 0;
}

.bms-stock-field-wide {
    grid-column: span 3;
}

.bms-stock-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-stock-field label span {
    color: #dc2626;
}

.bms-stock-field input,
.bms-stock-field select {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-stock-field input:focus,
.bms-stock-field select:focus {
    border-color: var(--primary);
    box-shadow: var(--ring, 0 0 0 3px rgba(23, 105, 224, .08));
}

.bms-stock-form-actions {
    padding: 16px 20px 20px;
}

.bms-stock-save {
    height: 40px;
    padding: 0 20px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-stock-save:hover {
    opacity: .92;
}


/* Typeahead */

.bms-stock-typeahead-results {
    position: absolute;
    z-index: 20;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    margin-top: 4px;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    box-shadow: var(--shadow, 0 8px 24px rgba(15, 23, 42, .08));
}

.bms-stock-typeahead-results.open {
    display: block;
}

.bms-stock-typeahead-item {
    padding: 9px 12px;
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
}

.bms-stock-typeahead-item:hover {
    background: var(--border-light);
}

/* Highlighted "no results, register a new customer" prompt shown
   inside the typeahead dropdown itself when a customer search comes
   up empty -- not just the static hint text under the search box. */
.bms-stock-typeahead-empty {
    display: block;
    color: var(--text-secondary);
    background: var(--primary-light);
    border-top: 1px solid var(--border-light);
}

.bms-stock-typeahead-empty strong {
    color: var(--primary);
}

.bms-stock-typeahead-empty:hover {
    background: #e0ecff;
}


/* Lot picker (Transfer Stock) */

.bms-stock-lot-picker {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 7px;
}

.bms-stock-lot-placeholder {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
}

.bms-stock-lot-option {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text);
    font-size: 12.5px;
    cursor: pointer;
}

.bms-stock-lot-option input {
    accent-color: var(--primary);
}


/* Search / Filters */

.bms-stock-search {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.bms-stock-search input[type="search"],
.bms-stock-search input[type="text"] {
    width: 200px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-stock-search select {
    height: 36px;
    box-sizing: border-box;
    padding: 0 8px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
}

.bms-stock-search input:focus,
.bms-stock-search select:focus {
    border-color: var(--primary);
}

.bms-stock-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bms-stock-clear {
    padding: 8px 9px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}

.bms-stock-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.bms-stock-checkbox input {
    accent-color: var(--primary);
}


/* Table */

.bms-stock-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-stock-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-stock-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bms-stock-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-stock-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-stock-table tbody tr:hover {
    background: #fafbfc;
}

/* Stock List (2026-09-25): the Product cell spans every branch row for
   that product via rowspan instead of repeating the name on each row --
   this top border on the first row of a new product group is the only
   remaining visual cue separating one product's branches from the next,
   since the repeated name isn't there to do it anymore. Not applied to
   the very first row (nothing above it to separate from). */
.bms-stock-row-group-start:not(:first-child) td {
    border-top: 1px solid var(--border);
}

.bms-stock-row-low td {
    background: #fffbeb;
}

.bms-stock-row-low:hover td {
    background: #fef3c7 !important;
}


/* Reorder level inline form */

.bms-stock-reorder-form {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

.bms-stock-reorder-input {
    width: 64px;
    height: 30px;
    box-sizing: border-box;
    padding: 0 8px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-family: inherit;
    font-size: 12px;
}

.bms-stock-reorder-form button {
    height: 30px;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border: 0;
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

.bms-stock-reorder-form button:hover {
    background: #e5e7eb;
}


/* Status pills */

.bms-stock-status {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.bms-stock-status.ok {
    color: #166534;
    background: #dcfce7;
}

.bms-stock-status.low {
    color: #b45309;
    background: #fef3c7;
}

.bms-stock-status.out {
    color: #991b1b;
    background: #fee2e2;
}


/* Lots drill-down */

.bms-stock-view-lots {
    padding: 5px 10px;
    color: #1d4ed8;
    background: #eff6ff;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.bms-stock-view-lots:hover {
    background: #dbeafe;
}

.bms-stock-no-lots {
    color: var(--text-muted);
}

.bms-stock-lot-detail-row td {
    padding: 12px 14px;
    background: #f8fafc;
}

.bms-stock-lot-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.bms-stock-lot-table th {
    padding: 6px 10px;
    color: var(--text-muted);
    text-align: left;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.bms-stock-lot-table td {
    padding: 6px 10px;
    color: var(--text);
    border-top: 1px solid var(--border-light);
}


/* Empty */

.bms-stock-empty {
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.bms-stock-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.bms-stock-empty p {
    margin: 6px 0 0;
    font-size: 11px;
}


/* Mobile */

@media (max-width: 850px) {

    .bms-stock-form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bms-stock-field-wide {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {

    .bms-stock-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-stock-form-grid {
        grid-template-columns: 1fr;
    }

    .bms-stock-field-wide {
        grid-column: auto;
    }

    .bms-stock-search {
        width: 100%;
    }

    .bms-stock-search input[type="search"],
    .bms-stock-search input[type="text"],
    .bms-stock-search select {
        width: 100%;
    }

    .bms-stock-table thead {
        display: none;
    }

    .bms-stock-table,
    .bms-stock-table tbody,
    .bms-stock-table tr,
    .bms-stock-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bms-stock-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    .bms-stock-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }

    .bms-stock-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .bms-stock-lot-detail-row td::before {
        content: none;
    }
}

@media (max-width: 420px) {

    .bms-stock-form {
        padding: 15px;
    }

    .bms-stock-card-header {
        padding: 15px;
    }
}


/* =========================================================
   PURCHASE ORDERS (order detail view / status pills / notes)
   ========================================================= */

.bms-stock-status.active {
    color: #166534;
    background: #dcfce7;
}

.bms-stock-status.cancelled {
    color: #991b1b;
    background: #fee2e2;
}

.bms-stock-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 20px;
}

.bms-stock-detail-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.bms-stock-detail-wide {
    grid-column: span 3;
}

.bms-stock-detail-item .label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bms-stock-detail-item .value {
    color: var(--text);
    font-size: 13px;
    font-weight: 600;
}

.bms-stock-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 0 20px 20px;
}

.bms-stock-actions form {
    margin: 0;
}

.bms-stock-btn-secondary {
    height: 40px;
    padding: 0 18px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-stock-btn-secondary:hover {
    background: #e5e7eb;
}

.bms-stock-btn-danger {
    height: 40px;
    padding: 0 18px;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-stock-btn-danger:hover {
    background: #fecaca;
}

.bms-stock-field textarea {
    width: 100%;
    min-height: 90px;
    box-sizing: border-box;
    padding: 10px 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    resize: vertical;
    font-family: inherit;
    font-size: 13px;
}

.bms-stock-field textarea:focus {
    border-color: var(--primary);
    box-shadow: var(--ring, 0 0 0 3px rgba(23, 105, 224, .08));
}

.bms-stock-table tfoot td {
    padding: 11px 14px;
    color: var(--text);
    background: #f8fafc;
    border-top: 2px solid var(--border);
    border-bottom: 0;
    font-weight: 700;
}

.bms-stock-value-summary {
    margin: 14px 2px 4px;
    padding-top: 14px;
    color: var(--text-secondary);
    border-top: 1px solid var(--border);
    font-size: 13px;
}

.bms-stock-value-summary strong {
    color: var(--text);
    font-size: 15px;
}

.bms-stock-search input[type="date"] {
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-stock-search input[type="date"]:focus {
    border-color: var(--primary);
}

@media (max-width: 850px) {

    .bms-stock-detail-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bms-stock-detail-wide {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {

    .bms-stock-detail-grid {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .bms-stock-detail-wide {
        grid-column: auto;
    }

    .bms-stock-actions {
        flex-direction: column-reverse;
        align-items: stretch;
        padding: 0 16px 16px;
    }

    .bms-stock-actions a.bms-stock-save,
    .bms-stock-actions .bms-stock-btn-secondary,
    .bms-stock-actions .bms-stock-btn-danger {
        width: 100%;
        text-align: center;
    }

    .bms-stock-search input[type="date"] {
        width: 100%;
    }
}
/* =========================================================
   RECEIVE STOCK: multi-line-item rows (Product/Qty/Cost/Date
   in one line, with an "Add Another Product" / remove button)
   ========================================================= */

.bms-stock-line-items {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px 20px 4px;
}

.bms-stock-line-item {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 110px) minmax(0, 150px) minmax(0, 150px) 36px;
    gap: 10px;
    align-items: end;
}

.bms-stock-line-item .bms-stock-field {
    margin: 0;
}

.bms-stock-line-remove {
    width: 36px;
    height: 40px;
    box-sizing: border-box;
    color: #991b1b;
    background: #fee2e2;
    border: 1px solid #fecaca;
    border-radius: 7px;
    font-family: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.bms-stock-line-remove:hover {
    background: #fecaca;
}

.bms-stock-form-actions-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}

@media (max-width: 850px) {

    .bms-stock-line-item {
        grid-template-columns: 1fr 1fr;
    }

    .bms-stock-line-remove {
        grid-column: span 2;
        width: 100%;
    }
}

@media (max-width: 700px) {

    .bms-stock-line-item {
        grid-template-columns: 1fr;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border-light);
    }

    .bms-stock-line-items {
        gap: 6px;
    }

    .bms-stock-line-remove {
        grid-column: auto;
        width: 100%;
    }

    .bms-stock-form-actions-split {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .bms-stock-form-actions-split .bms-stock-save,
    .bms-stock-form-actions-split .bms-stock-btn-secondary {
        width: 100%;
    }
}

/* =========================================================
   PURCHASE ORDER: unified Products Purchased grid (Product /
   Quantity / Cost Price / Line Value on one line, existing
   lines prefilled and editable, "+ Add Another Product" for
   new ones, live per-row Line Value + running Total). The X on
   a row only marks it pending removal (see
   .bms-purchase-row-pending-removal below) -- nothing commits
   until the single Save Changes button is pressed.
   ========================================================= */

.bms-purchase-line-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 130px) minmax(0, 90px) minmax(0, 110px) minmax(0, 110px) 36px;
    gap: 10px;
    padding: 0 20px;
    margin-bottom: -6px;
    color: var(--text-muted, #6b7280);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.bms-purchase-line-item {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 130px) minmax(0, 90px) minmax(0, 110px) minmax(0, 110px) 36px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    transition: opacity 0.15s ease;
}

.bms-purchase-line-item .bms-stock-field {
    margin: 0;
}

.bms-purchase-line-value {
    display: flex;
    align-items: center;
    height: 40px;
}

.bms-purchase-line-value-amount {
    color: var(--text);
    font-size: 14px;
    font-weight: 600;
}

/* A row marked pending-removal (existing line, X clicked) dims and
   strikes through instead of disappearing -- it's still sitting right
   there in the form, unsaved, until Save Changes or another click on
   the same button (now an undo) reverses it. The quantity/cost inputs
   are deliberately left enabled (not `disabled`): a disabled input is
   dropped from form submission entirely, which would desync the
   line_id[]/product_id[]/quantity[]/cost_price[]/removed[] arrays'
   row-for-row alignment the backend depends on. */
.bms-purchase-row-pending-removal {
    opacity: 0.45;
}

.bms-purchase-row-pending-removal .bms-purchase-line-value-amount {
    text-decoration: line-through;
}

.bms-purchase-row-pending-removal .bms-stock-line-remove {
    opacity: 1;
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a;
}

.bms-purchase-row-pending-removal .bms-stock-line-remove:hover {
    background: #fde68a;
}

/* Per-field labels inside a row are redundant on wide screens (the
   .bms-purchase-line-header row above already labels each column), so
   they're hidden there and only shown once that header row itself
   hides below the 850px breakpoint. The extra `.bms-stock-field`
   qualifier matches the specificity of the general `.bms-stock-field
   label` rule (which this would otherwise lose to). */
.bms-stock-field .bms-purchase-field-label {
    display: none;
}

/* Grid-aligned with .bms-purchase-line-header/.bms-purchase-line-item so
   the Total sits directly under the Line Value column, not just floated
   to the card's right edge (which overshoots Line Value by the width of
   the trailing remove-button column). */
.bms-purchase-running-total {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 130px) minmax(0, 90px) minmax(0, 110px) minmax(0, 110px) 36px;
    gap: 10px;
    align-items: center;
    padding: 10px 20px 0;
    font-size: 14px;
}

.bms-purchase-running-total span {
    grid-column: 4;
    text-align: right;
}

.bms-purchase-running-total strong {
    grid-column: 5;
    font-size: 16px;
}

@media (max-width: 850px) {

    .bms-purchase-line-header {
        display: none;
    }

    .bms-stock-field .bms-purchase-field-label {
        display: block;
    }

    .bms-purchase-line-item {
        grid-template-columns: 1fr 1fr;
        align-items: start;
        padding-bottom: 10px;
    }

    .bms-purchase-line-value {
        grid-column: span 2;
        flex-direction: column;
        align-items: flex-start;
        height: auto;
    }

    .bms-purchase-line-item .bms-stock-line-remove {
        grid-column: span 2;
        width: 100%;
    }

    /* The header row (with it, the Line Value column it aligns under)
       is hidden below this breakpoint, so go back to a simple flex row
       floated to the right instead of grid-aligning under a column
       that's no longer there. */
    .bms-purchase-running-total {
        display: flex;
        justify-content: flex-end;
    }
}

@media (max-width: 700px) {

    .bms-purchase-line-item {
        grid-template-columns: 1fr;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--border-light);
    }

    .bms-purchase-line-value {
        grid-column: auto;
    }

    .bms-purchase-line-item .bms-stock-line-remove {
        grid-column: auto;
        width: 100%;
    }

    .bms-purchase-running-total {
        justify-content: space-between;
    }
}

/* =========================================================
   TRANSFER STOCK: multi-line-item rows (Product + Lot select
   + Quantity all on one line, with an "Add Another Product" /
   remove button, sharing the destination branch/date/notes
   section above)
   ========================================================= */

.bms-stock-line-items-label {
    margin: 0;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-stock-line-items-label span {
    color: #dc2626;
}

.bms-stock-transfer-line {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.bms-stock-transfer-line-top {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1.6fr) minmax(0, 100px) 36px;
    gap: 10px;
    align-items: end;
}

.bms-stock-transfer-line-top .bms-stock-field,
.bms-stock-transfer-line > .bms-stock-field {
    margin: 0;
}

.bms-stock-lot-select {
    text-overflow: ellipsis;
}

@media (max-width: 850px) {

    .bms-stock-transfer-line-top {
        grid-template-columns: 1fr 1fr;
    }

    .bms-stock-transfer-line-top .bms-stock-line-remove {
        grid-column: span 2;
        width: 100%;
    }
}

@media (max-width: 700px) {

    .bms-stock-transfer-line-top {
        grid-template-columns: 1fr;
    }

    .bms-stock-transfer-line-top .bms-stock-line-remove {
        grid-column: auto;
        width: 100%;
    }
}

/* =========================================================
   STATUS MANAGEMENT
   ========================================================= */

.bms-statusmgmt-card {
    width: 100%;
    margin-bottom: 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 9px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    overflow: hidden;
}

.bms-statusmgmt-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-light);
}

.bms-statusmgmt-card-header h2 {
    margin: 0;
    color: var(--text);
    font-size: 15px;
    font-weight: 700;
}

.bms-statusmgmt-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}


/* Alerts */

.bms-statusmgmt-alert {
    margin-bottom: 15px;
    padding: 11px 14px;
    border-radius: 7px;
    font-size: 12px;
}

.bms-statusmgmt-alert.success {
    color: #166534;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.bms-statusmgmt-alert.error {
    color: #991b1b;
    background: #fef2f2;
    border: 1px solid #fecaca;
}


/* Form */

.bms-statusmgmt-form {
    padding: 18px 20px;
}

.bms-statusmgmt-form-row {
    display: flex;
    align-items: flex-end;
    gap: 12px;
}

.bms-statusmgmt-field {
    min-width: 0;
    flex: 1;
}

.bms-statusmgmt-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text);
    font-size: 12px;
    font-weight: 600;
}

.bms-statusmgmt-field label span {
    color: #dc2626;
}

.bms-statusmgmt-field input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 11px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 7px;
    outline: none;
    font-family: inherit;
    font-size: 13px;
}

.bms-statusmgmt-field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(23, 105, 224, .08);
}

.bms-statusmgmt-form-button {
    flex-shrink: 0;
}

.bms-statusmgmt-save {
    height: 40px;
    padding: 0 18px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 7px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.bms-statusmgmt-save:hover {
    opacity: .92;
}

.bms-statusmgmt-cancel {
    padding: 7px 11px;
    color: var(--text-secondary);
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 11px;
    text-decoration: none;
}

.bms-statusmgmt-cancel:hover {
    background: #e5e7eb;
}


/* Search */

.bms-statusmgmt-search {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-statusmgmt-search input {
    width: 210px;
    height: 36px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text-secondary);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    font-family: inherit;
    font-size: 11px;
}

.bms-statusmgmt-search input:focus {
    border-color: var(--primary);
}

.bms-statusmgmt-search button {
    height: 36px;
    padding: 0 12px;
    color: #fff;
    background: var(--primary);
    border: 1px solid var(--primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 11px;
    cursor: pointer;
}

.bms-statusmgmt-clear {
    padding: 8px 9px;
    color: var(--text-secondary);
    font-size: 11px;
    text-decoration: none;
}


/* Table */

.bms-statusmgmt-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.bms-statusmgmt-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.bms-statusmgmt-table th {
    padding: 10px 14px;
    color: var(--text-secondary);
    background: #f8fafc;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.bms-statusmgmt-table td {
    padding: 11px 14px;
    color: var(--text);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}

.bms-statusmgmt-table tbody tr:last-child td {
    border-bottom: 0;
}

.bms-statusmgmt-table tbody tr:hover {
    background: #fafbfc;
}

.bms-statusmgmt-id {
    width: 60px;
    color: var(--text-muted) !important;
}

.bms-statusmgmt-name {
    width: 220px;
    color: var(--text) !important;
    font-weight: 600;
}

.bms-statusmgmt-description {
    color: var(--text-secondary) !important;
}

.bms-statusmgmt-muted {
    color: var(--text-muted);
}


/* State */

.bms-statusmgmt-state {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.bms-statusmgmt-state.active {
    color: #166534;
    background: #dcfce7;
}

.bms-statusmgmt-state.inactive {
    color: var(--text-secondary);
    background: #f3f4f6;
}

/* 2026-09-26: cancellation_reason.php's "Type" column (Admin/Customer) --
   a separate pill style from .bms-statusmgmt-state's active/inactive so
   "which list this reason belongs to" isn't visually confused with
   "whether it's currently active". Same pill shape, distinct hues. */
.bms-statusmgmt-type {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
}

.bms-statusmgmt-type.admin {
    color: #1e40af;
    background: #dbeafe;
}

.bms-statusmgmt-type.customer {
    color: #6d28d9;
    background: #ede9fe;
}


/* Actions */

.bms-statusmgmt-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.bms-statusmgmt-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 9px;
    border: 0;
    border-radius: 5px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.bms-statusmgmt-action.edit {
    color: #1d4ed8;
    background: #eff6ff;
}

.bms-statusmgmt-action.edit:hover {
    background: #dbeafe;
}

.bms-statusmgmt-action.deactivate {
    color: #b45309;
    background: #fffbeb;
}

.bms-statusmgmt-action.deactivate:hover {
    background: #fef3c7;
}

.bms-statusmgmt-action.activate {
    color: #166534;
    background: #f0fdf4;
}

.bms-statusmgmt-action.activate:hover {
    background: #dcfce7;
}

.bms-statusmgmt-state-form {
    margin: 0;
}


/* Empty */

.bms-statusmgmt-empty {
    padding: 40px 20px;
    color: var(--text-secondary);
    text-align: center;
}

.bms-statusmgmt-empty strong {
    display: block;
    color: var(--text);
    font-size: 13px;
}

.bms-statusmgmt-empty p {
    margin: 6px 0 12px;
    font-size: 11px;
}

.bms-statusmgmt-empty a {
    color: var(--primary);
    font-size: 11px;
    text-decoration: none;
}


/* Mobile */

@media (max-width: 850px) {

    .bms-statusmgmt-form-row {
        align-items: stretch;
        flex-wrap: wrap;
    }

    .bms-statusmgmt-form-button {
        width: 100%;
    }

    .bms-statusmgmt-save {
        width: 100%;
    }
}


@media (max-width: 700px) {

    .bms-statusmgmt-card-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .bms-statusmgmt-form-row {
        flex-direction: column;
    }

    .bms-statusmgmt-field {
        width: 100%;
    }

    .bms-statusmgmt-search {
        width: 100%;
        flex-wrap: wrap;
    }

    .bms-statusmgmt-search input {
        width: 100%;
    }

    .bms-statusmgmt-table thead {
        display: none;
    }

    .bms-statusmgmt-table,
    .bms-statusmgmt-table tbody,
    .bms-statusmgmt-table tr,
    .bms-statusmgmt-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .bms-statusmgmt-table tr {
        padding: 12px 14px;
        border-bottom: 1px solid var(--border);
    }

    .bms-statusmgmt-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 6px 0;
        border: 0;
    }

    .bms-statusmgmt-table td::before {
        content: attr(data-label);
        flex-shrink: 0;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 600;
    }

    .bms-statusmgmt-actions {
        justify-content: flex-end;
    }
}


@media (max-width: 420px) {

    .bms-statusmgmt-form {
        padding: 15px;
    }

    .bms-statusmgmt-card-header {
        padding: 15px;
    }
}


/* =========================================================
   SALES (New Invoice): customer card + always-rendered invoice
   form. Line items are single-row (Product / Stock / Warranty /
   Serial / Qty / Rate / Line Total / Remove) with an immediate
   per-line total, and the totals box lists Delivery/Bank/
   Installation/VAT/Grand Total as separate stacked rows.
   Everything that depends on a selected customer (addresses,
   the line items block, every field inside a line) carries
   .bms-sales-locked / .bms-sales-guarded and is dimmed + blocked
   until a customer is picked. Reuses the .bms-stock-* /
   .bms-courier-* form, typeahead, card and table system built
   for Stock/Special Price/Courier; only sales-specific pieces
   get their own classes here.
   ========================================================= */

.bms-sales-ledger-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 20px 18px;
}

.bms-sales-ledger-summary > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
    padding: 12px 16px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.bms-sales-ledger-summary span {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bms-sales-ledger-summary strong {
    color: var(--text);
    font-size: 17px;
}

.bms-sales-ledger-summary-balance {
    border-color: var(--primary) !important;
}

.bms-sales-ledger-summary-balance strong {
    color: var(--primary);
}

.bms-sales-customer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.bms-sales-new-customer {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.bms-sales-customer-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.bms-sales-badge {
    display: inline-block;
    padding: 2px 10px;
    background: #eef2ff;
    color: #3730a3;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
}

.bms-sales-no-address {
    grid-column: 1 / -1;
    margin: -4px 0 4px;
    color: #92400e;
    font-size: 12px;
}

.bms-sales-no-address a {
    color: inherit;
    text-decoration: underline;
}

/* -- locked / guarded state, before a customer is selected.
   Deliberately NOT pointer-events: none -- a click still needs to
   reach the form's delegated .bms-sales-guarded handler so it can
   show the "select a customer first" warning, so locking here is
   visual only (dimmed + not-allowed cursor); the JS guard does the
   actual blocking. -- */

.bms-stock-field.bms-sales-locked,
.bms-stock-line-items.bms-sales-locked {
    position: relative;
    opacity: 0.55;
}

.bms-stock-field.bms-sales-locked select,
.bms-stock-field.bms-sales-locked input,
.bms-stock-line-items.bms-sales-locked select,
.bms-stock-line-items.bms-sales-locked input,
.bms-stock-line-items.bms-sales-locked textarea {
    cursor: not-allowed;
}

.bms-stock-line-items.bms-sales-locked::after {
    content: "Select a customer above to unlock the invoice items";
    display: block;
    margin: -4px 0 4px;
    padding: 8px 12px;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 7px;
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
}

/* -- line item rows -- */

/* Product is the only flexible column (minmax(160px, 1fr)) -- it
   absorbs whatever width is left after the others claim their fixed
   widths, so the row always fills the card edge-to-edge instead of
   leaving a dead gap on wide screens. Every other column is a plain
   fixed px width, which is what keeps Stock/Warranty/Serial/Qty/Rate/
   Line Total compact per feedback.

   NOTE: an earlier version of this tried minmax(0, min(1fr, Npx)) for
   the non-Product columns, to have them behave like a flexible track
   that freezes once it hits Npx. That is invalid CSS -- the `fr` unit
   cannot appear inside min()/max()/clamp(), only directly as
   minmax()'s own second argument -- so the whole grid-template-columns
   declaration was dropped, the grid fell back to a single implicit
   column, and every field stacked full-width top to bottom. Plain
   fixed-px tracks avoid that trap entirely. */

.bms-sales-line-header {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        170px
        90px
        140px
        60px
        90px
        110px
        36px;
    gap: 10px;
    margin: 2px 0 -4px;
    padding: 0 2px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.bms-sales-line {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.bms-sales-line-row {
    display: grid;
    grid-template-columns:
        minmax(160px, 1fr)
        170px
        90px
        140px
        60px
        90px
        110px
        36px;
    gap: 10px;
    /* start, not center -- a cell with a caption underneath it (Stock,
       Rate) is taller than a plain single-line cell (Product, Warranty,
       Qty, Line Total); centering would sink the shorter cells' inputs
       down to the middle of the row instead of keeping every input/
       select lined up along one flat top edge. */
    align-items: start;
}

.bms-sales-line-row .bms-stock-field {
    margin: 0;
}

.bms-sales-warranty-display {
    background: #f4f4f5;
    color: var(--text-muted);
    text-align: center;
}

/* .bms-stock-field textarea (the generic rule) sets min-height: 90px,
   which otherwise wins over a plain .bms-sales-serials class on
   specificity -- so this row-matching height needs the same
   "field + tag" shape to actually override it and line up with the
   40px-tall inputs/selects beside it in the line-item row. */
.bms-stock-field textarea.bms-sales-serials {
    min-height: 40px;
    height: 40px;
    padding: 9px 11px;
    resize: none;
    overflow-y: auto;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.3;
}

.bms-sales-serial-status {
    min-height: 14px;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
}

.bms-sales-serial-status.warning {
    color: #92400e;
}

.bms-sales-line-total {
    padding: 9px 10px;
    background: #f4f4f5;
    border: 1px solid var(--border-light);
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: right;
    white-space: nowrap;
}

/* Small caption lines under the Stock and Rate fields (item quantity on
   hand, which price list was loaded) and under a field elsewhere on the
   form (Execution Branch) -- informational only, never interactive. */

.bms-sales-field-caption {
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2026-09-23 (Revision 6): invoice_view.php's edit mode -- shown under a
   line's Stock field when that line's original source lot couldn't be
   resolved automatically (see sales_resolve_source_lot() in
   app/Helpers/sales_shared.php), so staff know they need to explicitly
   pick stock for that one line before saving. The markup wraps this
   text in a nested <span class="warning"> rather than putting the
   class on .bms-sales-field-caption itself (that element also carries
   the "total in stock" caption in the non-warning case), so this has
   to be a descendant selector, not a compound one -- confirmed live
   (2026-09-23) that ".bms-sales-field-caption.warning" never matched
   and the warning rendered in the default muted/nowrap caption style
   instead of standing out. */

.bms-sales-field-caption .warning {
    color: #92400e;
    white-space: normal;
    display: inline-block;
}

.bms-sales-field-hint {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.4;
}

/* -- totals summary -- */

.bms-sales-totals {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 420px;
    margin: 18px 20px 4px auto;
    padding: 14px 18px;
    background: #fafbfc;
    border: 1px solid var(--border-light);
    border-radius: 10px;
}

.bms-sales-totals-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: var(--text-muted);
}

.bms-sales-totals-row.grand {
    padding-top: 8px;
    border-top: 1px solid var(--border-light);
    color: var(--text);
    font-size: 16px;
    font-weight: 700;
}

/* Delivery/Bank/Installation/VAT rows inside the totals box carry
   their own editable input (instead of a separate field grid above
   it), so each charge sits directly under the last line item and
   stays lined up on the right side of the page with the rest of
   the totals. */

.bms-sales-totals-row.bms-sales-totals-charge label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 400;
}

.bms-sales-charge {
    width: 130px;
    height: 32px;
    box-sizing: border-box;
    padding: 0 10px;
    color: var(--text);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    text-align: right;
    font-family: inherit;
    font-size: 13px;
}

.bms-sales-charge:focus {
    border-color: var(--primary);
    box-shadow: var(--ring, 0 0 0 3px rgba(23, 105, 224, .08));
}

/* Items Subtotal / Total Weight / Grand Total: read-only text boxes,
   same look as a Line Total cell, instead of plain text. */

.bms-sales-totals-box {
    width: 130px;
    box-sizing: border-box;
    font-family: inherit;
    cursor: default;
}

.bms-sales-totals-box:focus {
    outline: none;
}

.bms-sales-totals-box-grand {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    background: #fff;
}

/* "+ Add Item" sits flush at the left edge under the line items by
   default (a single flex child under justify-content: space-between
   collapses to flex-start); nudge it right so it doesn't look like
   it's stuck to the product column. It's now a small icon-only "+"
   button (title attribute gives the "add another item" tooltip on
   hover) rather than a wide labeled button. */

.bms-sales-additem-row {
    justify-content: flex-start;
}

.bms-sales-additem-btn {
    width: 32px;
    height: 32px;
    margin-left: 14px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    font-family: inherit;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.bms-sales-additem-btn:hover {
    background: #e0e7ff;
}

@media (max-width: 950px) {

    .bms-sales-line-header {
        display: none;
    }

    .bms-sales-line-row {
        grid-template-columns: 1fr 1fr;
    }

    .bms-sales-line-row .bms-stock-line-remove {
        grid-column: span 2;
        width: 100%;
    }

    .bms-sales-line-total {
        text-align: left;
    }

    .bms-sales-totals {
        max-width: none;
        margin: 18px 20px 4px;
    }
}

@media (max-width: 700px) {

    .bms-sales-line-row {
        grid-template-columns: 1fr;
    }

    .bms-sales-line-row .bms-stock-line-remove {
        grid-column: auto;
        width: 100%;
    }
}

/* =========================================================
   MONEY VALUES: right-aligned everywhere, site-wide (2026-09-24;
   extended 2026-09-25 to cover column TITLES too, not just values --
   a right-aligned amount under a left-aligned header reads as
   misaligned even though each rule taken alone was "correct". The
   fix mirrors the same [data-label="X"] (or .bms-money) match onto
   the <th> for that column, using :is(td, th) so both the header
   and every body/footer cell in that column right-align together --
   including a totals/footer row's own <td>, AS LONG AS it also
   carries the matching data-label or .bms-money (see each page for
   where that's been added to <tfoot> cells that used to lack it).
   Numeric/currency columns read faster when they're right-aligned
   and stacked, so any table cell, input, or display span holding a
   money amount gets text-align: right here -- scoped per table
   class + data-label (or an explicit .bms-money class, added in the
   markup, for the handful of plain cells that don't carry a
   data-label) rather than a blanket td/th selector, since these
   tables mix text and money columns. On the sub-850px responsive
   layout these same <td>s switch to a flex row (label via ::before,
   value after) via justify-content -- text-align is inert there,
   so it's safe to apply unconditionally instead of gating this by
   a min-width media query; <thead> (and therefore every <th>) is
   hidden outright below that width, so the added th selectors have
   no effect there either way. invoice_print.php's table.items td.num
   already does the equivalent for the printable invoice. */

.bms-stock-table :is(td, th)[data-label="Stock Value"],
.bms-stock-table :is(td, th)[data-label="Cost Price"],
.bms-stock-table :is(td, th)[data-label="Cost / Unit"],
.bms-stock-table :is(td, th)[data-label="Debit"],
.bms-stock-table :is(td, th)[data-label="Credit"],
.bms-stock-table :is(td, th)[data-label="Balance"],
.bms-stock-table :is(td, th)[data-label="Rate"],
.bms-stock-table :is(td, th)[data-label="Grand Total"],
.bms-stock-table :is(td, th)[data-label="Paid"],
.bms-stock-table :is(td, th)[data-label="Due"],
.bms-stock-table :is(td, th).bms-money,
.bms-product-table :is(td, th)[data-label="Retail"],
.bms-product-table :is(td, th)[data-label="Wholesale"],
.bms-product-table :is(td, th)[data-label="Intermediate"],
.bms-product-table :is(td, th)[data-label="Distributor"] {
    text-align: right;
}

.bms-sales-rate {
    text-align: right;
}

.bms-purchase-cost-input,
.bms-money-input {
    text-align: right;
}

/* Line Value / Total are <span>/<strong> inside a flex cell, not form
   inputs -- an inline element has no spare width of its own to align
   text within (it shrink-wraps to its content), so the fix is to push
   the flex item itself to the column's right edge instead. */
.bms-purchase-line-value {
    justify-content: flex-end;
}

.bms-purchase-running-total strong {
    text-align: right;
}

/* Transfer Stock (2026-09-24 rewrite, branch_product_stock): the
   per-branch balance list shown under the form once a product is
   picked, the quantity-available hint, and the small "source" badge
   (e.g. "mir_migration") on a Recent Transfers row. */
.bms-stock-field-hint {
    display: block;
    margin-top: 5px;
    color: var(--text-muted);
    font-size: 11px;
}

.bms-stock-branch-balances {
    margin: 0 20px 16px;
}

.bms-stock-branch-balances-title {
    margin-bottom: 8px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.bms-stock-branch-balances-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bms-stock-branch-balances-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 12.5px;
}

.bms-stock-branch-balances-list li span {
    color: var(--text-muted);
}

.bms-stock-branch-balances-list li strong {
    color: var(--text);
}

.bms-stock-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
}

/* Cancelled transfer (2026-09-25 Revert feature): the badge next to the
   route, and a muted row so a cancelled row reads as "no longer active"
   at a glance in Recent Transfers without needing its own column. */
.bms-stock-badge-danger {
    background: #fee2e2;
    color: #b91c1c;
}

.bms-stock-row-cancelled td {
    color: var(--text-muted);
    background: #fafafa;
}

.bms-stock-row-cancelled .bms-stock-badge-danger {
    color: #b91c1c;
}

.bms-stock-cancel-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    text-decoration: none;
}


/* 2026-09-25: invoice_view.php's Highlighted Remarks banner -- "I want
   this remark to be displayed somewhere invoice_view.php page ... this
   way if we add a remark and want that to be noticed by colleague is
   possible." Deliberately more attention-grabbing than the plain
   .bms-stock-alert family above (amber, left accent bar) -- a colleague
   opening this invoice should see it right under the page header,
   without having to open the Manage panel or the Log. */

.bms-remark-highlight-banner {
    margin-bottom: 15px;
    padding: 14px 16px;
    background: #fffbeb;
    border: 1px solid #f59e0b;
    border-left: 4px solid #f59e0b;
    border-radius: 7px;
}

.bms-remark-highlight-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #78350f;
}

.bms-remark-highlight-item + .bms-remark-highlight-item {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #fde68a;
}

.bms-remark-highlight-badge {
    flex-shrink: 0;
    display: inline-block;
    padding: 2px 8px;
    background: #f59e0b;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

.bms-remark-highlight-text {
    flex: 1;
}

.bms-remark-highlight-meta {
    display: block;
    margin-top: 3px;
    color: #92400e;
    font-size: 11px;
}