/* ===== Global UI consistency fixes (post Bootstrap -> Tailwind migration) =====
   Loaded site-wide. Keep selectors scoped/explicit so these rules only touch
   the known problem patterns and don't leak into unrelated components. */

:root {
    --ui-brand-start: var(--brand-500, #3b82f6);
    --ui-brand-end: var(--brand-700, #1d4ed8);
    --ui-brand-start-hover: var(--brand-600, #2563eb);
    --ui-brand-end-hover: var(--brand-800, #1e40af);
    --ui-brand-shadow: rgba(var(--brand-600-rgb, 37, 99, 235), 0.28);
    --ui-brand-shadow-strong: rgba(var(--brand-600-rgb, 37, 99, 235), 0.38);
    --ui-surface-border: #e3e8ef;
    --ui-surface-muted: #f8fafc;
    --ui-text-strong: #121926;
    --ui-text-soft: #dbe4ff;
    --ui-radius-xl: 4px;
    --ui-radius-pill: 9999px;
}

/* -----------------------------------------------------------------------
   1) Label + info-tooltip icon must stay on the same row.
   Several "*-field" wrapper classes (introduced during the tailwind
   conversion) use `display:flex; flex-direction:column` with the label
   and the @show_tooltip() <i> icon as separate flex children, so each one
   takes its own full row in a column flex container - the icon visibly
   drops above/below the label instead of sitting next to it.
   Fix: ONLY for fields that actually contain that icon (`:has()` keeps the
   blast radius tiny - every field without a tooltip icon, which is most of
   them, keeps its original flex-column stacking untouched), switch to a
   2-column grid: label + icon share row 1, everything else (input/select/
   textarea/help text, however many siblings there are) auto-flows onto its
   own full-width row below. */
.expense-field:has(> i.fa-info-circle),
.booking-field:has(> i.fa-info-circle),
.repair-field:has(> i.fa-info-circle),
.stockadj-field:has(> i.fa-info-circle),
.manageuser-field:has(> i.fa-info-circle),
.stocktransfer-field:has(> i.fa-info-circle) {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 0.375rem;
}

.expense-field:has(> i.fa-info-circle) > label,
.booking-field:has(> i.fa-info-circle) > label,
.repair-field:has(> i.fa-info-circle) > label,
.stockadj-field:has(> i.fa-info-circle) > label,
.manageuser-field:has(> i.fa-info-circle) > label,
.stocktransfer-field:has(> i.fa-info-circle) > label {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}

.expense-field:has(> i.fa-info-circle) > i.fa-info-circle,
.booking-field:has(> i.fa-info-circle) > i.fa-info-circle,
.repair-field:has(> i.fa-info-circle) > i.fa-info-circle,
.stockadj-field:has(> i.fa-info-circle) > i.fa-info-circle,
.manageuser-field:has(> i.fa-info-circle) > i.fa-info-circle,
.stocktransfer-field:has(> i.fa-info-circle) > i.fa-info-circle {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
}

.expense-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.booking-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.repair-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.stockadj-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.manageuser-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle),
.stocktransfer-field:has(> i.fa-info-circle) > *:not(label):not(i.fa-info-circle) {
    grid-column: 1 / -1;
}

/* -----------------------------------------------------------------------
   2) Topbar (app-topbar) icons must never overlap the business name or
   each other on very narrow viewports. resources/views/layouts/partials/header.blade.php
   keeps .topbar-actions on a single row (flex-wrap: nowrap !important) and
   hides most action buttons below their breakpoint via `tw-hidden <bp>:tw-inline-flex`,
   but this is a safety net only - if a future icon/button is ever added
   without the matching `tw-hidden`, or enough buttons stay visible at once,
   it falls back to wrapping onto a second line below ~480px instead of
   overlapping the business name/siblings. Does not affect >480px, where
   the existing `flex-wrap: nowrap !important` above still applies. */
@media (max-width: 480px) {
    .app-topbar .topbar-actions {
        flex-wrap: wrap !important;
        row-gap: 0.375rem;
        justify-content: flex-end;
    }
}

/* Above 480px (where topbar-actions stays a single nowrap row), every
   direct child must keep its declared size rather than being squeezed by
   flexbox's default flex-shrink:1 once the row runs out of room - a
   shrunk icon button still draws its full-size <svg> inside a now-smaller
   box, so it visually spills into the next icon / the business name
   instead of being clipped. Forcing flex-shrink:0 here means the
   truncating business name (the only element designed to give up width)
   absorbs all the squeeze, and every icon keeps its own clean slot. */
.app-topbar .topbar-actions > * {
    flex-shrink: 0;
}

/* -----------------------------------------------------------------------
   3) Shared page title section: keep it transparent so screens that use the
   standard AdminLTE/Tailwind heading layout inherit the plain page
   background instead of a colored banner. */
.content-header {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 0 1rem !important;
    padding: 1rem 1.35rem !important;
    border: 0 !important;
    overflow: visible;
}

.content-header h1,
.content-header .row h1 {
    color: #121926 !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.content-header h1 small,
.content-header .row h1 small,
.content-header .breadcrumb,
.content-header .breadcrumb a,
.content-header .breadcrumb > .active,
.content-header .text-muted,
.content-header p,
.content-header .help-block {
    color: #4b5565 !important;
}

.content-header p {
    margin: 0.5rem 0 0 !important;
}

.content-header .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
    margin-top: 0.5rem !important;
}

@media (max-width: 767px) {
    .content-header {
        padding: 0.9rem 1rem !important;
    }

    .content-header h1,
    .content-header .row h1 {
        font-size: 1.35rem !important;
    }
}

/* Unified application page bar.
   Active only on normal app pages through layouts/app.blade.php; Home and
   Superadmin keep their existing page headers. */
main.unified-page-headers > #scrollable-container {
    padding-top: 0.85rem;
}

main.unified-page-headers .content-header {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.35) !important;
    margin: 0 0 1rem !important;
    padding: 1rem 1.35rem !important;
    border: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    flex-wrap: wrap !important;
}

main.unified-page-headers .content-header h1,
main.unified-page-headers .content-header .row h1,
main.unified-page-headers .content-header h2,
main.unified-page-headers .content-header h3 {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    text-align: left !important;
}

main.unified-page-headers .content-header > br {
    display: none !important;
}

main.unified-page-headers .content-header h1 small,
main.unified-page-headers .content-header .row h1 small,
main.unified-page-headers .content-header .breadcrumb,
main.unified-page-headers .content-header .breadcrumb a,
main.unified-page-headers .content-header .breadcrumb > .active,
main.unified-page-headers .content-header .text-muted,
main.unified-page-headers .content-header p,
main.unified-page-headers .content-header .help-block,
main.unified-page-headers .content-header i,
main.unified-page-headers .content-header svg {
    color: rgba(255, 255, 255, 0.86) !important;
}

main.unified-page-headers .content-header .btn,
main.unified-page-headers .content-header .btn-modal,
main.unified-page-headers .content-header .tw-dw-btn,
main.unified-page-headers .content-header button,
main.unified-page-headers .content-header a[role="button"] {
    display: inline-flex !important;
    min-height: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #fff !important;
}

main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"],
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-radius: 4px 4px 0 0 !important;
}

main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h1,
main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h2,
main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h3,
main.unified-page-headers .content > .tw-bg-white > [style*="linear-gradient"] h4,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h1,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h2,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h3,
main.unified-page-headers .content > form > .tw-bg-white > [style*="linear-gradient"] h4 {
    color: #fff !important;
}

main.unified-page-headers:has(> #scrollable-container > .content > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-widget:first-child .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-widget:first-child .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-widget .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-filters):has(> #scrollable-container > .content > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-filters):has(> #scrollable-container > .content > form > .tw-bg-white > [style*="linear-gradient"]:first-child) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-filters):has(> #scrollable-container > .content > .module-shared-widget .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-filters):has(> #scrollable-container > .content > form > .module-shared-widget .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .module-shared-filters):has(> #scrollable-container > .content > .box.box-primary > .box-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .module-shared-filters):has(> #scrollable-container > .content > form > .box.box-primary > .box-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > .row:first-child .module-shared-filters):has(> #scrollable-container > .content > .row .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content > form > .row:first-child .module-shared-filters):has(> #scrollable-container > .content > form > .row .module-shared-widget-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content.expense-tailwind-page .expense-card > .expense-card-header) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content.expense-tailwind-page .expense-card > div:first-child > h2) > #scrollable-container > .content-header:not(.use-global-title-bar),
main.unified-page-headers:has(> #scrollable-container > .content.expense-tailwind-page .expense-card > div:first-child > h4) > #scrollable-container > .content-header:not(.use-global-title-bar) {
    display: none !important;
}

main.unified-page-headers:has(> #scrollable-container > .content-header.use-global-title-bar)
    > #scrollable-container > .content-header.use-global-title-bar {
    display: flex !important;
}

main.unified-page-headers:has(> #scrollable-container > section.no-print nav #mfg-navbar-collapse)
    > #scrollable-container > .content.no-print > .tw-mb-4:has(> h1.tw-text-xl) {
    display: none !important;
}

body.hide-page-print-buttons .buttons-print,
body.hide-page-print-buttons .buttons-pdf {
    display: none !important;
}

/* -----------------------------------------------------------------------
   4) Standardize shared widget/card headers used by listing pages like
   stock transfers, stock adjustments, purchase orders, etc. */
.module-shared-widget,
.box.box-primary,
.box-primary {
    border: 1px solid var(--ui-surface-border) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.22) !important;
    background: #fff !important;
}

.module-shared-widget .module-shared-widget-header,
.module-shared-widget .box-header,
.box.box-primary > .box-header,
.box-primary > .box-header,
.box-header.module-shared-widget-header {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-bottom: none !important;
    min-height: 66px;
    padding: 1rem 1.35rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.module-shared-widget .module-shared-widget-title-wrap,
.box-header.module-shared-widget-header .module-shared-widget-title-wrap {
    display: inline-flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: center;
    gap: 0.65rem;
}

.module-shared-widget .module-shared-widget-icon,
.box-header.module-shared-widget-header .module-shared-widget-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    color: #fff !important;
}

.module-shared-widget .module-shared-widget-icon i,
.box-header.module-shared-widget-header .module-shared-widget-icon i {
    color: #fff !important;
    font-size: 1rem;
    line-height: 1;
}

.module-shared-widget .module-shared-widget-title-copy,
.box-header.module-shared-widget-header .module-shared-widget-title-copy {
    display: inline-flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.15rem;
}

.module-shared-widget .module-shared-widget-header .box-title,
.module-shared-widget .box-header .box-title,
.box.box-primary > .box-header .box-title,
.box-primary > .box-header .box-title,
.box-header.module-shared-widget-header .box-title {
    color: #fff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.module-shared-widget .module-shared-widget-header small,
.module-shared-widget .box-header small,
.box.box-primary > .box-header small,
.box-primary > .box-header small,
.box-header.module-shared-widget-header small {
    color: rgba(255, 255, 255, 0.86) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

.module-shared-widget .module-shared-widget-body,
.box.box-primary > .box-body,
.box-primary > .box-body {
    background: #fff !important;
}

.module-shared-widget .box-tools,
.box.box-primary > .box-header .box-tools,
.box-primary > .box-header .box-tools {
    margin-left: auto;
    float: none !important;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

@media (max-width: 767px) {
    .module-shared-widget .module-shared-widget-header,
    .module-shared-widget .box-header,
    .box.box-primary > .box-header,
    .box-primary > .box-header,
    .box-header.module-shared-widget-header {
        min-height: 60px;
        padding: 0.9rem 1rem !important;
        border-radius: 16px 16px 0 0 !important;
    }

    .module-shared-widget,
    .box.box-primary,
    .box-primary {
        border-radius: 16px !important;
    }
}

/* -----------------------------------------------------------------------
   5) Standardize primary/action buttons.
   Scope to the common primary/add/submit patterns while explicitly avoiding
   small quick-add icon launchers that still rely on their compact legacy
   shape inside product forms. */
.btn.btn-primary,
.btn-primary,
.tw-dw-btn.tw-dw-btn-primary,
button.btn-modal.btn-primary,
.box-tools .btn.btn-primary,
.box-tools .btn-modal,
.content-header .btn,
.content-header .btn-modal,
.content-header .tw-dw-btn,
.content-header .tw-dw-btn-primary,
.module-shared-widget .box-tools .btn,
.module-shared-widget .box-tools .btn-modal,
.module-shared-widget .box-tools .tw-dw-btn,
.module-shared-widget .box-tools .tw-dw-btn-primary,
.box-primary > .box-header .btn,
.box-primary > .box-header .btn-modal,
.box-primary > .box-header .tw-dw-btn,
.box-primary > .box-header .tw-dw-btn-primary {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: 0 12px 28px -18px var(--ui-brand-shadow-strong) !important;
    font-weight: 600 !important;
    letter-spacing: 0.01em;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.btn.btn-primary:hover,
.btn-primary:hover,
.btn.btn-primary:focus,
.btn-primary:focus,
.tw-dw-btn.tw-dw-btn-primary:hover,
.tw-dw-btn.tw-dw-btn-primary:focus,
button.btn-modal.btn-primary:hover,
button.btn-modal.btn-primary:focus,
.box-tools .btn.btn-primary:hover,
.box-tools .btn.btn-primary:focus,
.box-tools .btn-modal:hover,
.box-tools .btn-modal:focus,
.content-header .btn:hover,
.content-header .btn:focus,
.content-header .btn-modal:hover,
.content-header .btn-modal:focus,
.content-header .tw-dw-btn:hover,
.content-header .tw-dw-btn:focus,
.content-header .tw-dw-btn-primary:hover,
.content-header .tw-dw-btn-primary:focus,
.module-shared-widget .box-tools .btn:hover,
.module-shared-widget .box-tools .btn:focus,
.module-shared-widget .box-tools .btn-modal:hover,
.module-shared-widget .box-tools .btn-modal:focus,
.module-shared-widget .box-tools .tw-dw-btn:hover,
.module-shared-widget .box-tools .tw-dw-btn:focus,
.module-shared-widget .box-tools .tw-dw-btn-primary:hover,
.module-shared-widget .box-tools .tw-dw-btn-primary:focus,
.box-primary > .box-header .btn:hover,
.box-primary > .box-header .btn:focus,
.box-primary > .box-header .btn-modal:hover,
.box-primary > .box-header .btn-modal:focus,
.box-primary > .box-header .tw-dw-btn:hover,
.box-primary > .box-header .tw-dw-btn:focus,
.box-primary > .box-header .tw-dw-btn-primary:hover,
.box-primary > .box-header .tw-dw-btn-primary:focus {
    background: linear-gradient(135deg, var(--ui-brand-start-hover) 0%, var(--ui-brand-end-hover) 100%) !important;
    color: #fff !important;
    box-shadow: 0 18px 30px -20px var(--ui-brand-shadow-strong) !important;
    transform: translateY(-1px);
}

.content-header .btn,
.content-header .btn-modal,
.content-header .tw-dw-btn,
.content-header .tw-dw-btn-primary,
.module-shared-widget .box-tools .btn,
.module-shared-widget .box-tools .btn-modal,
.module-shared-widget .box-tools .tw-dw-btn,
.module-shared-widget .box-tools .tw-dw-btn-primary,
.box-primary > .box-header .btn,
.box-primary > .box-header .btn-modal,
.box-primary > .box-header .tw-dw-btn,
.box-primary > .box-header .tw-dw-btn-primary {
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > a.btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > .btn-modal {
    background: rgba(255, 255, 255, 0.18) !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #fff !important;
}

.content .tw-bg-white .tw-justify-end > a.btn-modal,
.content .tw-bg-white .tw-justify-end > .btn-modal {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    background-image: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: 1px solid var(--ui-brand-end) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    color: #fff !important;
}

.module-shared-widget .box-tools .btn,
.module-shared-widget .box-tools .btn-modal,
.module-shared-widget .box-tools .tw-dw-btn,
.module-shared-widget .box-tools .tw-dw-btn-primary,
.contact-tailwind-page > .tw-bg-white > .no-print a.btn-modal,
.contact-tailwind-page > .tw-bg-white > .no-print .btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > a.btn-modal,
.content .tw-bg-white > [style*="linear-gradient"] > .btn-modal,
.content .tw-bg-white .tw-justify-end > a.btn-modal,
.content .tw-bg-white .tw-justify-end > .btn-modal,
.box-header.module-shared-widget-header .box-tools .btn,
.box-header.module-shared-widget-header .box-tools .btn-modal,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn-primary,
.box-primary > .box-header .box-tools .btn,
.box-primary > .box-header .box-tools .btn-modal,
.box-primary > .box-header .box-tools .tw-dw-btn,
.box-primary > .box-header .box-tools .tw-dw-btn-primary {
    display: inline-flex !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 6px 16px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    gap: 6px !important;
    align-items: center !important;
    justify-content: center !important;
}

.contact-tailwind-page .report-print-block > .no-print .btn,
.contact-tailwind-page .report-print-block > .no-print .tw-dw-btn {
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons .dt-button {
    border-radius: 4px !important;
}

.discount-list-card,
.discount-list-card .tw-flow-root,
.discount-list-card .dataTables_wrapper {
    max-width: 100% !important;
}

.discount-list-card .dataTables_wrapper > .row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.discount-list-card .discount-table-scroll {
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

.content .tw-bg-white > [style*="linear-gradient"] > a.btn-modal svg,
.content .tw-bg-white > [style*="linear-gradient"] > .btn-modal svg,
.content .tw-bg-white .tw-justify-end > a.btn-modal svg,
.content .tw-bg-white .tw-justify-end > .btn-modal svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}

.module-shared-widget .box-tools .btn svg,
.module-shared-widget .box-tools .btn-modal svg,
.module-shared-widget .box-tools .tw-dw-btn svg,
.module-shared-widget .box-tools .tw-dw-btn-primary svg,
.box-header.module-shared-widget-header .box-tools .btn svg,
.box-header.module-shared-widget-header .box-tools .btn-modal svg,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn svg,
.box-header.module-shared-widget-header .box-tools .tw-dw-btn-primary svg,
.box-primary > .box-header .box-tools .btn svg,
.box-primary > .box-header .box-tools .btn-modal svg,
.box-primary > .box-header .box-tools .tw-dw-btn svg,
.box-primary > .box-header .box-tools .tw-dw-btn-primary svg {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 14px !important;
}

.content-header .btn:hover,
.content-header .btn:focus,
.content-header .btn-modal:hover,
.content-header .btn-modal:focus,
.content-header .tw-dw-btn:hover,
.content-header .tw-dw-btn:focus,
.content-header .tw-dw-btn-primary:hover,
.content-header .tw-dw-btn-primary:focus,
.module-shared-widget .box-tools .btn:hover,
.module-shared-widget .box-tools .btn:focus,
.module-shared-widget .box-tools .btn-modal:hover,
.module-shared-widget .box-tools .btn-modal:focus,
.module-shared-widget .box-tools .tw-dw-btn:hover,
.module-shared-widget .box-tools .tw-dw-btn:focus,
.module-shared-widget .box-tools .tw-dw-btn-primary:hover,
.module-shared-widget .box-tools .tw-dw-btn-primary:focus,
.box-primary > .box-header .btn:hover,
.box-primary > .box-header .btn:focus,
.box-primary > .box-header .btn-modal:hover,
.box-primary > .box-header .btn-modal:focus,
.box-primary > .box-header .tw-dw-btn:hover,
.box-primary > .box-header .tw-dw-btn:focus,
.box-primary > .box-header .tw-dw-btn-primary:hover,
.box-primary > .box-header .tw-dw-btn-primary:focus {
    background: rgba(255, 255, 255, 0.26) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

/* Report Setup button: white content-header bg makes the glass overlay
   invisible — restore the brand gradient so it's actually visible. */
#btn-report-setup {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: none !important;
    color: #fff !important;
}
#btn-report-setup:hover,
#btn-report-setup:focus {
    background: linear-gradient(135deg, var(--ui-brand-start-hover) 0%, var(--ui-brand-end-hover) 100%) !important;
    color: #fff !important;
}

.btn.btn-primary.btn-xs,
.btn-primary.btn-xs,
.tw-dw-btn.tw-dw-btn-primary.tw-dw-btn-xs {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
}

.module-shared-widget .crm-lead-header-tools {
    gap: 0.5rem !important;
}

.module-shared-widget .crm-lead-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.module-shared-widget .crm-lead-view-choice {
    margin: 0 !important;
    white-space: nowrap;
}

.module-shared-widget .crm-lead-view-choice.active {
    background: rgba(255, 255, 255, 0.32) !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
}

/* Keep module top menus on one row on desktop. If permissions expose many
   menu items, the row scrolls horizontally instead of wrapping taller. */
@media (min-width: 768px) {
    .accounting-nav,
    .crm-nav,
    .repair-module-nav {
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scrollbar-width: thin;
    }

    .accounting-nav details > div {
        display: flex !important;
        align-items: center !important;
        gap: 0.5rem !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .accounting-nav details > div > a {
        flex: 0 0 auto !important;
    }

    .accounting-nav ul {
        flex: 0 0 auto !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        white-space: nowrap !important;
    }

    .accounting-nav ul > li {
        flex: 0 0 auto !important;
    }

    .crm-nav > .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .crm-nav .navbar-header {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .crm-nav .navbar-collapse {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        border-top: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .crm-nav .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        float: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .crm-nav .navbar-nav > li {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .repair-module-nav > .container-fluid {
        display: flex !important;
        align-items: center !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        white-space: nowrap !important;
    }

    .repair-module-nav .navbar-header {
        flex: 0 0 auto !important;
        float: none !important;
    }

    .repair-module-nav .navbar-collapse {
        display: block !important;
        width: auto !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
        border-top: 0 !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
    }

    .repair-module-nav .navbar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        float: none !important;
        margin: 0 !important;
        white-space: nowrap !important;
    }

    .repair-module-nav .navbar-nav > li {
        flex: 0 0 auto !important;
        float: none !important;
    }
}

/* -----------------------------------------------------------------------
   6) Standardize add/edit modal shell, header, spacing, and footer actions.
   Several modal blade templates still hardcode different inline
   `border-radius` values (or none at all), which makes "Add" dialogs look
   inconsistent from page to page. Apply one shared modal shell radius site-
   wide so every normal Bootstrap modal uses the same rounded corners.
   `!important` is required here because many legacy modal templates set
   radius/overflow inline on `.modal-content`. */
.modal .modal-content,
.modal-dialog .modal-content,
body .modal .modal-dialog .modal-content {
    border-radius: var(--ui-radius-xl) !important;
    overflow: hidden !important;
    border: none !important;
    box-shadow: 0 28px 60px -28px rgba(15, 23, 42, 0.45) !important;
    background: #fff !important;
}

.modal .modal-header,
.modal-dialog .modal-header,
body .modal .modal-dialog .modal-header {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border-top-left-radius: var(--ui-radius-xl) !important;
    border-top-right-radius: var(--ui-radius-xl) !important;
    border-bottom: none !important;
    padding: 1rem 4.2rem 1rem 1.4rem !important;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.875rem;
    position: relative !important;
}

.modal .modal-header::before,
.modal .modal-header::after,
.modal-dialog .modal-header::before,
.modal-dialog .modal-header::after,
body .modal .modal-dialog .modal-header::before,
body .modal .modal-dialog .modal-header::after {
    content: none !important;
    display: none !important;
}

.modal .modal-header .modal-title,
.modal-dialog .modal-header .modal-title,
.modal .modal-header h3,
.modal-dialog .modal-header h3,
.modal .modal-header h4,
.modal-dialog .modal-header h4,
.modal .modal-header h5,
.modal-dialog .modal-header h5 {
    color: #fff !important;
    font-size: 1.35rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    order: 1 !important;
    flex: 1 1 auto !important;
    margin: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
    text-align: left !important;
}

.modal .modal-header > svg,
.modal-dialog .modal-header > svg,
.modal .modal-header > i,
.modal-dialog .modal-header > i,
.modal .modal-header .modal-title svg,
.modal-dialog .modal-header .modal-title svg,
.modal .modal-header .modal-title i,
.modal-dialog .modal-header .modal-title i,
.modal .modal-header h3 svg,
.modal-dialog .modal-header h3 svg,
.modal .modal-header h3 i,
.modal-dialog .modal-header h3 i,
.modal .modal-header h4 svg,
.modal-dialog .modal-header h4 svg,
.modal .modal-header h4 i,
.modal-dialog .modal-header h4 i,
.modal .modal-header h5 svg,
.modal-dialog .modal-header h5 svg,
.modal .modal-header h5 i,
.modal-dialog .modal-header h5 i {
    display: none !important;
}

.modal .modal-header .close,
.modal-dialog .modal-header .close,
.modal .modal-header button.close,
.modal-dialog .modal-header button.close,
.modal .modal-header .btn-close,
.modal-dialog .modal-header .btn-close,
.modal .modal-header .contact-modal-close,
.modal-dialog .modal-header .contact-modal-close,
.contact-tailwind-modal .contact-modal-header .contact-modal-close {
    color: #fff !important;
    opacity: 0.92 !important;
    text-shadow: none !important;
    font-size: 2rem !important;
    order: 2 !important;
    position: absolute !important;
    top: 50% !important;
    right: 1.4rem !important;
    transform: translateY(-50%) !important;
    float: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.modal .modal-header .close:hover,
.modal-dialog .modal-header .close:hover,
.modal .modal-header button.close:hover,
.modal-dialog .modal-header button.close:hover,
.modal .modal-header .btn-close:hover,
.modal-dialog .modal-header .btn-close:hover,
.modal .modal-header .contact-modal-close:hover,
.modal-dialog .modal-header .contact-modal-close:hover,
.contact-tailwind-modal .contact-modal-header .contact-modal-close:hover {
    opacity: 1 !important;
}

.modal .modal-body,
.modal-dialog .modal-body {
    padding: 1.4rem !important;
    background: #fff !important;
}

.contact-tailwind-page #login .contact-view-add-toolbar,
.contact-tailwind-page .tab-pane#login .contact-view-add-toolbar {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    clear: both;
}

.contact-tailwind-page #login .contact-view-add-toolbar .contact-login-add,
.contact-tailwind-page .tab-pane#login .contact-view-add-toolbar .contact-login-add {
    float: none !important;
    margin-left: auto !important;
}

.modal .modal-footer,
.modal-dialog .modal-footer,
body .modal .modal-dialog .modal-footer {
    border-bottom-left-radius: var(--ui-radius-xl) !important;
    border-bottom-right-radius: var(--ui-radius-xl) !important;
    padding: 1rem 1.4rem 1.25rem !important;
    background: var(--ui-surface-muted) !important;
    border-top: 1px solid var(--ui-surface-border) !important;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.modal .modal-footer .btn,
.modal .modal-footer .tw-dw-btn {
    border-radius: var(--ui-radius-pill) !important;
    font-weight: 600 !important;
    order: 1;
}

.modal .modal-footer .global-save-button {
    order: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.modal .modal-footer .global-close-button,
.modal .modal-footer [data-dismiss="modal"]:not(.global-save-button),
.modal .modal-footer [data-bs-dismiss="modal"]:not(.global-save-button) {
    order: 2 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.modal .modal-footer .global-save-button i,
.modal .modal-footer .global-save-button svg,
.modal .modal-footer .global-close-button i,
.modal .modal-footer .global-close-button svg {
    display: none !important;
}

.modal .modal-footer .btn-default,
.modal .modal-footer .btn-secondary,
.modal .modal-footer .tw-dw-btn-neutral,
.modal .modal-footer .global-close-button {
    background: #2f3a4a !important;
    border: none !important;
    color: #fff !important;
}

@media (max-width: 767px) {
    .modal .modal-header,
    .modal-dialog .modal-header {
        padding: 0.95rem 3.4rem 0.95rem 1rem !important;
        min-height: 64px;
    }

    .modal .modal-body,
    .modal-dialog .modal-body,
    .modal .modal-footer,
    .modal-dialog .modal-footer {
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* -----------------------------------------------------------------------
   7) Shared filter panels: Tailwind-based global filter surface used by
   components.filters across listing/report pages. */
.report-filters-block,
.module-shared-filters {
    border: 1px solid var(--ui-surface-border) !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    box-shadow: 0 10px 24px -22px rgba(15, 23, 42, 0.22) !important;
    background: #fff !important;
}

.module-shared-filters-header {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    background: #fff !important;
    border-bottom: 1px solid #e5e7eb !important;
    min-height: 64px;
    padding: 1rem 1.35rem !important;
    color: #111827 !important;
    user-select: none;
}

.module-shared-filters-title,
.module-shared-filters-title i,
.module-shared-filters-title svg {
    color: #111827 !important;
}

.module-shared-filters-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.module-shared-filters-chevron {
    color: #64748b;
}

.module-shared-filters[data-filter-expanded='true'] .module-shared-filters-chevron {
    transform: rotate(180deg);
}

.module-shared-filters-body {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1rem !important;
    padding: 1.2rem 1.35rem 1.55rem !important;
    background: #fff !important;
    align-items: end !important;
}

.module-shared-filters-body[hidden] {
    display: none !important;
}

.module-shared-filters:not([data-filter-component]) > .panel-collapse {
    display: none !important;
}

.module-shared-filters:not([data-filter-component]).legacy-filter-expanded > .panel-collapse {
    display: block !important;
}

.module-shared-filters:not([data-filter-component]) .module-shared-filters-body {
    padding: 1.2rem 1.35rem 1.55rem !important;
}

.module-shared-filters-body > form {
    display: contents;
}

.module-shared-filters-body > .row,
.module-shared-filters-body > form > .row {
    display: contents;
}

.module-shared-filters-body > [class*='col-'],
.module-shared-filters-body > form > [class*='col-'],
.module-shared-filters-body > .row > [class*='col-'],
.module-shared-filters-body > form > .row > [class*='col-'] {
    float: none !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 !important;
    grid-column: auto / span 1 !important;
}

.module-shared-filters-body .form-group,
.module-shared-filters-body .ess-field {
    margin-bottom: 0 !important;
    min-width: 0;
}

.module-shared-filters-body label {
    display: block;
    margin: 0 0 0.4rem !important;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25rem;
}

.module-shared-filters-body .form-control,
.module-shared-filters-body .ess-input,
.module-shared-filters-body .ess-select,
.module-shared-filters-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']),
.module-shared-filters-body select,
.module-shared-filters-body textarea,
.module-shared-filters-body .select2-container {
    width: 100% !important;
}

.module-shared-filters-body .form-control,
.module-shared-filters-body .ess-input,
.module-shared-filters-body .ess-select,
.module-shared-filters-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']),
.module-shared-filters-body select,
.module-shared-filters-body textarea,
.module-shared-filters-body .select2-container--default .select2-selection--single,
.module-shared-filters-body .select2-container--default .select2-selection--multiple {
    min-height: 42px !important;
    border: 1px solid #cdd5df !important;
    border-radius: 10px !important;
    background-color: #fff !important;
    color: #121926 !important;
    font-size: 0.875rem !important;
    box-shadow: none !important;
}

.module-shared-filters-body textarea {
    min-height: 5.5rem !important;
}

.module-shared-filters-body .form-control:focus,
.module-shared-filters-body .ess-input:focus,
.module-shared-filters-body .ess-select:focus,
.module-shared-filters-body input:not([type='checkbox']):not([type='radio']):not([type='hidden']):not([type='submit']):not([type='button']):focus,
.module-shared-filters-body select:focus,
.module-shared-filters-body textarea:focus,
.module-shared-filters-body .select2-container--default.select2-container--focus .select2-selection--single,
.module-shared-filters-body .select2-container--default.select2-container--focus .select2-selection--multiple,
.module-shared-filters-body .select2-container--default.select2-container--open .select2-selection--single,
.module-shared-filters-body .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--ui-brand-start) !important;
    box-shadow: 0 0 0 3px var(--ui-brand-shadow) !important;
    outline: none !important;
}

.module-shared-filters-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
}

.module-shared-filters-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}

.module-shared-filters-body .input-group,
.module-shared-filters-body .tw-input-group-standard,
.module-shared-filters-body .ess-input-group {
    width: 100% !important;
}

@media (max-width: 767px) {
    .report-filters-block,
    .module-shared-filters {
        border-radius: 16px !important;
    }

    .module-shared-filters-header {
        min-height: 58px;
        padding: 0.9rem 1rem !important;
    }
}

@media (min-width: 768px) {
    .module-shared-filters-body {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (min-width: 1280px) {
    .module-shared-filters-body {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
}

.essentials-tailwind-module .report-filters-block,
.essentials-tailwind-module .module-shared-filters {
    border-color: #dfe6ef !important;
    border-radius: 18px !important;
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05) !important;
}

.essentials-tailwind-module .module-shared-filters-header {
    background: #fff !important;
    border-bottom: 1px solid #e7edf4 !important;
}

.essentials-tailwind-module .module-shared-filters-title {
    color: #1f2937 !important;
    font-size: 15px !important;
}

/* -----------------------------------------------------------------------
   8) Baseline brand skin for plain DataTables listing tables/pagination
   that aren't wrapped in one of the existing per-module page classes
   (.product-tailwind-page, .contact-tailwind-page, .manageuser-tailwind-page,
   .role-tailwind-page, .repair-tailwind-page, .essentials-tailwind-module,
   .gym-module, .booking-tailwind-page, .clinic-tailwind-page,
   .expense-tailwind-page, .recruitment-tailwind-page, .stockadj-tailwind-page,
   .stocktransfer-tailwind-page, .tailorpro-tailwind-page,
   .warehouse-tailwind-page - all 14 already ship their own near-identical
   skin and must keep winning on their own pages).

   No !important anywhere here, and every selector is deliberately ONE class
   shallower than those modules' (e.g. `.dataTables_filter input` vs their
   `.xxx-page .dataTables_wrapper .dataTables_filter input`), so this loses
   on specificity wherever a module skin already exists, and only fills in
   the gap elsewhere (Superadmin, Crm, Hms, Cms, Project, AssetManagement,
   the e-commerce connectors, and most of resources/views/* listing pages).
   Bare `.pagination` also matches Laravel's native (non-DataTables)
   paginator markup - intentional, it gets the same brand treatment too. */
.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
    margin: 0.5rem 0;
    color: #4b5565;
}

.dataTables_length select,
.dataTables_filter input {
    min-height: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    padding: 0.375rem 0.625rem;
    outline: none;
}

table.dataTable thead th {
    background: #f8fafc;
    color: #364152;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    white-space: nowrap;
}

table.dataTable tbody tr:hover {
    background: #f8fafc;
}

table.dataTable tfoot td {
    border-top: 1px solid #cdd5df;
    background: #f8fafc;
    color: #121926;
    font-weight: 600;
}

.pagination {
    display: flex;
    gap: 0.25rem;
    margin: 0;
    flex-wrap: wrap;
}

.pagination > li > a,
.pagination > li > span {
    min-width: 2.25rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    color: #364152;
    padding: 0.45rem 0.7rem;
    text-align: center;
}

.pagination > .active > a,
.pagination > .active > span {
    border-color: var(--brand-600);
    background: var(--brand-600);
    color: #fff;
}

/* -----------------------------------------------------------------------
   9) Baseline brand skin for plain Bootstrap form controls (.form-group/
   .form-control/label/.help-block/.input-group-addon) and Select2 dropdowns
   that aren't wrapped in one of the existing per-module form classes.
   Audited before writing this: product.css, contact.css, manage_user.css
   and essentials.css already hand-copy this *exact* same design token set
   (#cdd5df border / 0.5rem radius / 2.625rem height / #364152+600+0.875rem
   labels / indigo focus ring) onto `.product-tailwind-form`/
   `.contact-tailwind-form`/etc. - confirming it's the established system,
   not a new invention. Repair, Expense, Booking, and Stock Adjustment/
   Transfer were converted to their own custom semantic classes instead
   (`.repair-input`, `.expense-input`, etc.) and don't use these Bootstrap
   class names at all anymore, so this has zero effect on them either way.
   Confirmed-real gaps via live browser testing: Add Purchase
   (resources/views/purchase/create.blade.php) and Superadmin > Add Business
   (business/partials/register_form.blade.php, also shared with the public
   self-registration page) - both still render plain default-Bootstrap
   tokens (~34px input height, #ccc border, 4px radius) despite looking
   "fine" at a glance, just visibly inconsistent with the rest of the app.

   No !important, and every selector is bare (one class/type, no module
   qualifier), so it loses by specificity wherever a module skin already
   exists. Source order (this file loads after vendor.css) breaks the tie
   against vendor.css's own bare `.form-control`/`.input-group-addon`/
   `.help-block`/`label`/`.radio label`/`.checkbox label` defaults. */
.form-group {
    margin-bottom: 1.1rem;
}

label {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.checkbox label,
.radio label {
    font-weight: 500;
}

.form-control,
.input-group-addon {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
    color: #121926;
    font-size: 0.875rem;
    box-shadow: none;
}

.form-control {
    padding: 0.55rem 0.75rem;
}

.form-control:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

textarea.form-control {
    min-height: 5rem;
}

.input-group-addon {
    padding: 0 0.75rem;
    background: #f8fafc;
    color: #697586;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child) {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-addon:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.help-block {
    color: #697586;
    font-size: 0.8rem;
}

.select2-container {
    width: 100% !important;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 2.625rem;
    border: 1px solid #cdd5df;
    border-radius: 0.5rem;
    background: #fff;
}

.select2-selection--single .select2-selection__rendered {
    height: 2.5rem;
    color: #121926;
    line-height: 2.5rem;
    padding-left: 0.75rem;
}

.select2-selection--single .select2-selection__arrow {
    height: 2.5rem;
    right: 0.5rem;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

/* -----------------------------------------------------------------------
   10) A second, unrelated "brand button" pattern exists across ~20 views
   (resources/views/{expense,discount,backup,barcode,purchase_order,...}/
   index.blade.php, sale_pos/partials/pos_sidebar.blade.php, etc.): a literal
   `tw-from-indigo-600 tw-to-blue-500` gradient utility-class pair, instead of
   the `.tw-dw-btn-primary` class section (8) already retargets. Tailwind
   utility classes are static (this build has no live JIT/rebuild step), so
   instead of hand-editing every view, override the two CSS variables those
   utilities set (--tw-gradient-from/--tw-gradient-to) wherever both classes
   land on the same element. The compound selector (0,2,0 specificity) beats
   the plain single-class utility rules (0,1,0 each) without needing
   `!important`. Scoped to the exact pair so it can't affect any other
   element that happens to use tw-to-blue-500/tw-from-indigo-600 alone for
   an unrelated reason. */
.tw-from-indigo-600.tw-to-blue-500 {
    --tw-gradient-from: var(--brand-600) var(--tw-gradient-from-position);
    --tw-gradient-to: var(--brand-500) var(--tw-gradient-to-position);
}

/* -----------------------------------------------------------------------
   11) Legacy purple compatibility layer.
   Older admin/module blades still hardcode the retired purple theme via
   inline styles (#6366f1 / #4338ca / #7c3aed / #a855f7) or Tailwind
   purple/violet utility classes. Repaint those legacy surfaces with the
   active business brand color so the selected theme applies consistently
   across list headers, modal headers, page action buttons, and old cards
   without needing to hand-edit every historical template. */
[style*="linear-gradient(135deg, #6366f1 0%, #4338ca 100%)"],
[style*="linear-gradient(135deg,#6366f1 0%,#4338ca 100%)"],
[style*="linear-gradient(135deg, #6366f1, #4338ca)"],
[style*="linear-gradient(135deg,#6366f1,#4338ca)"],
[style*="linear-gradient(135deg, #7c3aed, #a855f7)"],
[style*="linear-gradient(135deg,#7c3aed,#a855f7)"],
[style*="linear-gradient(135deg,#7c3aed,#a855f7)"],
[style*="linear-gradient(135deg, #4338ca 0%, #2563eb 50%, #1d4ed8 100%)"] {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
}

[style*="color: #6366f1"],
[style*="color:#6366f1"],
[style*="color: #4338ca"],
[style*="color:#4338ca"],
[style*="color: #4f46e5"],
[style*="color:#4f46e5"],
[style*="color: #7c3aed"],
[style*="color:#7c3aed"],
[stroke="#6366f1"],
[stroke="#4f46e5"],
[stroke="#8b5cf6"] {
    color: var(--brand-600) !important;
    stroke: var(--brand-600) !important;
}

[style*="border-left: 3px solid #6366f1"],
[style*="border-left: 3px solid #4f46e5"],
[style*="border-left:3px solid #6366f1"],
[style*="border-left:3px solid #4f46e5"] {
    border-left-color: var(--brand-600) !important;
}

[style*="border-color: #6366f1"],
[style*="border-color:#6366f1"],
[style*="border-color: #4f46e5"],
[style*="border-color:#4f46e5"] {
    border-color: var(--brand-500) !important;
}

[style*="background: #6366f1"],
[style*="background:#6366f1"],
[style*="background: #4f46e5"],
[style*="background:#4f46e5"] {
    background: var(--brand-500) !important;
}

/* -----------------------------------------------------------------------
   12) Global subtle button corners.
   Keep existing button sizes, colors, shadows, and labels intact, but replace
   capsule button corners with one gently rounded app-wide radius. */
:root {
    --ui-radius-xl: 4px;
    --rounded-btn: 4px;
    --ui-radius-pill: 4px;
    --global-save-button-green: #16a34a;
    --global-save-button-green-hover: #15803d;
    --global-edit-button-blue: #075985;
    --global-edit-button-blue-hover: #0c4a6e;
}

button,
[role="button"],
input[type="button"],
input[type="submit"],
input[type="reset"],
.btn,
.btn-modal,
.tw-dw-btn,
.ladda-button,
.btn-group > .btn,
.btn-group > .dropdown-toggle,
.input-group-btn > .btn,
.product-image-fileinput .input-group-btn .btn-file,
.modal .modal-footer .btn,
.modal .modal-footer .tw-dw-btn,
.modifier_modal .btn-group > .btn,
.modifier_modal .btn-group > label.btn,
#modal_payment #add-payment-row,
#recent_transactions_modal .table td.col-md-6 > .tw-dw-btn,
button[class*="tw-rounded"],
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button,
.dt-buttons .btn,
.dt-buttons .dt-button,
a[style*="border-radius: 20px"],
a[style*="border-radius:20px"],
a[style*="border-radius: 999px"],
a[style*="border-radius:999px"],
a[style*="border-radius: 9999px"],
a[style*="border-radius:9999px"],
button[style*="border-radius: 20px"],
button[style*="border-radius:20px"],
button[style*="border-radius: 999px"],
button[style*="border-radius:999px"],
button[style*="border-radius: 9999px"],
button[style*="border-radius:9999px"],
a[class*="tw-rounded"].btn,
a[class*="tw-rounded"].tw-dw-btn,
[role="button"][style*="border-radius: 20px"],
[role="button"][style*="border-radius:20px"],
[role="button"][style*="border-radius: 999px"],
[role="button"][style*="border-radius:999px"],
[role="button"][style*="border-radius: 9999px"],
[role="button"][style*="border-radius:9999px"],
[role="button"][class*="tw-rounded"],
input[type="button"][class*="tw-rounded"],
input[type="submit"][class*="tw-rounded"],
input[type="reset"][class*="tw-rounded"] {
    border-radius: 4px !important;
}

.global-save-button,
button.global-save-button,
input.global-save-button,
.btn.global-save-button,
.btn.btn-primary.global-save-button,
.tw-dw-btn.global-save-button,
.tw-dw-btn.tw-dw-btn-primary.global-save-button,
.modal .modal-footer .global-save-button,
.modal .modal-footer .tw-dw-btn.global-save-button,
.modal .modal-footer .tw-dw-btn.tw-dw-btn-primary.global-save-button,
.global-save-button:hover,
.global-save-button:focus,
.btn-group > .global-save-button,
.btn-group > .tw-dw-btn.global-save-button,
.btn-group > .tw-dw-btn.tw-dw-btn-primary.global-save-button,
.btn-group > .global-save-button:hover,
.btn-group > .global-save-button:focus {
    background: var(--global-save-button-green) !important;
    background-image: none !important;
    border-color: var(--global-save-button-green) !important;
    color: #fff !important;
}

.global-save-button:hover,
.global-save-button:focus,
.btn.global-save-button:hover,
.btn.global-save-button:focus,
.btn.btn-primary.global-save-button:hover,
.btn.btn-primary.global-save-button:focus,
.tw-dw-btn.global-save-button:hover,
.tw-dw-btn.global-save-button:focus,
.tw-dw-btn.tw-dw-btn-primary.global-save-button:hover,
.tw-dw-btn.tw-dw-btn-primary.global-save-button:focus,
.modal .modal-footer .global-save-button:hover,
.modal .modal-footer .global-save-button:focus,
.modal .modal-footer .tw-dw-btn.global-save-button:hover,
.modal .modal-footer .tw-dw-btn.global-save-button:focus,
.modal .modal-footer .tw-dw-btn.tw-dw-btn-primary.global-save-button:hover,
.modal .modal-footer .tw-dw-btn.tw-dw-btn-primary.global-save-button:focus,
.btn-group > .global-save-button:hover,
.btn-group > .global-save-button:focus,
.btn-group > .tw-dw-btn.global-save-button:hover,
.btn-group > .tw-dw-btn.global-save-button:focus,
.btn-group > .tw-dw-btn.tw-dw-btn-primary.global-save-button:hover,
.btn-group > .tw-dw-btn.tw-dw-btn-primary.global-save-button:focus {
    background: var(--global-save-button-green-hover) !important;
    border-color: var(--global-save-button-green-hover) !important;
}

.global-action-button,
button.global-action-button,
input.global-action-button,
.btn.global-action-button,
.tw-dw-btn.global-action-button,
.btn-group > .global-action-button,
.btn-group > .tw-dw-btn.global-action-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.global-action-button i,
.global-action-button svg {
    flex: 0 0 auto !important;
    line-height: 1 !important;
}

.global-edit-button,
button.global-edit-button,
input.global-edit-button,
.btn.global-edit-button,
.btn.btn-primary.global-edit-button,
.btn.btn-info.global-edit-button,
.tw-dw-btn.global-edit-button,
.tw-dw-btn.tw-dw-btn-primary.global-edit-button,
.tw-dw-btn.tw-dw-btn-info.global-edit-button,
.tw-dw-btn.tw-dw-btn-outline.global-edit-button,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary.global-edit-button,
.btn-group > .global-edit-button,
.btn-group > .tw-dw-btn.global-edit-button,
.btn-group > .tw-dw-btn.tw-dw-btn-outline.global-edit-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-height: 28px !important;
    height: 28px !important;
    padding: 5px 12px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    background: #fff !important;
    background-image: none !important;
    border: 1px solid var(--global-edit-button-blue) !important;
    color: var(--global-edit-button-blue) !important;
    box-shadow: none !important;
}

.global-edit-button:hover,
.global-edit-button:focus,
.btn.global-edit-button:hover,
.btn.global-edit-button:focus,
.btn.btn-primary.global-edit-button:hover,
.btn.btn-primary.global-edit-button:focus,
.btn.btn-info.global-edit-button:hover,
.btn.btn-info.global-edit-button:focus,
.tw-dw-btn.global-edit-button:hover,
.tw-dw-btn.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-primary.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-primary.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-info.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-info.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-outline.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-outline.global-edit-button:focus,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary.global-edit-button:hover,
.tw-dw-btn.tw-dw-btn-outline.tw-dw-btn-primary.global-edit-button:focus,
.btn-group > .global-edit-button:hover,
.btn-group > .global-edit-button:focus,
.btn-group > .tw-dw-btn.global-edit-button:hover,
.btn-group > .tw-dw-btn.global-edit-button:focus,
.btn-group > .tw-dw-btn.tw-dw-btn-outline.global-edit-button:hover,
.btn-group > .tw-dw-btn.tw-dw-btn-outline.global-edit-button:focus {
    background: var(--global-edit-button-blue-hover) !important;
    border-color: var(--global-edit-button-blue-hover) !important;
    color: #fff !important;
}

.crm-lead-detail-select {
    min-width: 260px;
}

.crm-lead-detail-select .select2-container,
.crm-lead-detail-select .form-control {
    min-width: 260px;
}

.crm-nav .navbar-brand {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: #0d8fc5 !important;
}

.crm-nav .navbar-nav > li > a:hover {
    background: #edf6fb !important;
    color: #0b79ad !important;
}

.crm-nav .navbar-nav > li.active > a,
.crm-nav .navbar-nav > li.active > a:hover,
.crm-nav .navbar-nav > li.active > a:focus {
    background: #eaf4ff !important;
    background-image: none !important;
    color: #0050ff !important;
    box-shadow: none !important;
}

@media (max-width: 767px) {
    .crm-lead-detail-select,
    .crm-lead-detail-select .select2-container,
    .crm-lead-detail-select .form-control {
        min-width: 100%;
        width: 100% !important;
    }
}

/* -----------------------------------------------------------------------
   13) Unified form fields with inline icons/actions.
   Bootstrap input-groups, Select2 fields, file browse controls, and the
   newer module-specific groups now use one visual container: the group owns
   the border/radius/focus ring, while icons and buttons become internal
   field segments instead of separate attachments. */
:root {
    --ui-field-height: 2.625rem;
    --ui-field-border: #cdd5df;
    --ui-field-bg: #fff;
    --ui-field-muted-bg: #f8fafc;
    --ui-field-text: #121926;
    --ui-field-icon: #4b5565;
    --ui-field-radius: 0.5rem;
}

.input-group {
    width: 100%;
    min-height: var(--ui-field-height);
    border: 1px solid var(--ui-field-border);
    border-collapse: separate;
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    box-shadow: none;
    overflow: hidden;
}

.input-group:focus-within,
.input-group:has(.select2-container--open),
.input-group:has(.select2-container--focus) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.input-group > .form-control,
.input-group > select.form-control,
.input-group > textarea.form-control,
.input-group > .select2-container,
.input-group > .input-group-addon,
.input-group > .input-group-btn,
.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .btn-modal,
.input-group > .input-group-btn > button,
.input-group > .input-group-btn > a,
.input-group .file-caption,
.input-group .btn-file {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.input-group > .form-control,
.input-group > select.form-control,
.input-group > textarea.form-control,
.input-group .file-caption {
    height: auto;
    background: transparent;
    color: var(--ui-field-text);
    padding: 0.55rem 0.75rem;
}

.input-group > textarea.form-control {
    min-height: 5rem;
}

.input-group > .form-control:focus,
.input-group > select.form-control:focus,
.input-group > textarea.form-control:focus,
.input-group .file-caption:focus {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none;
}

.input-group > .form-control:not(:first-child),
.input-group > .input-group-addon:not(:first-child),
.input-group > .select2-container:not(:first-child) .select2-selection--single,
.input-group > .select2-container:not(:first-child) .select2-selection--multiple {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.input-group > .form-control:not(:last-child),
.input-group > .input-group-addon:not(:last-child),
.input-group > .select2-container:not(:last-child) .select2-selection--single,
.input-group > .select2-container:not(:last-child) .select2-selection--multiple {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.input-group > .input-group-addon {
    width: 2.625rem;
    padding: 0 0.75rem;
    background: var(--ui-field-muted-bg);
    color: var(--ui-field-icon);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.input-group > .input-group-addon:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.input-group > .input-group-addon:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.input-group > .input-group-addon i,
.input-group > .input-group-addon svg {
    color: inherit;
    line-height: 1;
    vertical-align: middle;
}

.input-group > .input-group-btn {
    background: var(--ui-field-muted-bg);
    vertical-align: stretch;
    white-space: nowrap;
}

.input-group > .input-group-btn:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.input-group > .input-group-btn:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.input-group > .input-group-btn > .btn,
.input-group > .input-group-btn > .btn-modal,
.input-group > .input-group-btn > button,
.input-group > .input-group-btn > a,
.input-group .btn-file {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    height: 100% !important;
    min-width: 2.625rem;
    padding: 0.55rem 0.8rem !important;
    background: var(--ui-field-muted-bg) !important;
    background-image: none !important;
    color: var(--ui-field-icon) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
}

.input-group > .input-group-btn > .btn:hover,
.input-group > .input-group-btn > .btn:focus,
.input-group > .input-group-btn > .btn-modal:hover,
.input-group > .input-group-btn > .btn-modal:focus,
.input-group > .input-group-btn > button:hover,
.input-group > .input-group-btn > button:focus,
.input-group > .input-group-btn > a:hover,
.input-group > .input-group-btn > a:focus,
.input-group .btn-file:hover,
.input-group .btn-file:focus {
    background: #eef2f6 !important;
    color: var(--brand-700) !important;
    outline: none !important;
}

.input-group > .select2-container .select2-selection--single,
.input-group > .select2-container .select2-selection--multiple {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.input-group > .select2-container .select2-selection--single .select2-selection__rendered {
    height: calc(var(--ui-field-height) - 2px);
    line-height: calc(var(--ui-field-height) - 2px);
}

.input-group > .select2-container .select2-selection--single .select2-selection__arrow {
    height: calc(var(--ui-field-height) - 2px);
}

.input-group > .select2-container--focus .select2-selection--single,
.input-group > .select2-container--focus .select2-selection--multiple,
.input-group > .select2-container--open .select2-selection--single,
.input-group > .select2-container--open .select2-selection--multiple {
    box-shadow: none !important;
}

.product-tailwind-form .input-group,
.contact-tailwind-form .input-group,
.contact-tailwind-modal .input-group,
.manageuser-tailwind-form .input-group,
.repair-tailwind-page .input-group,
.repair-tailwind-modal .input-group {
    border-radius: var(--ui-field-radius) !important;
}

.product-tailwind-form .input-group .form-control,
.contact-tailwind-form .input-group .form-control,
.contact-tailwind-modal .input-group .form-control,
.manageuser-tailwind-form .input-group .form-control {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.product-tailwind-form .input-group-btn .btn,
.product-tailwind-form .input-group-btn .btn-modal,
.contact-tailwind-modal .input-group-addon,
.manageuser-tailwind-form .input-group-addon {
    border-radius: 0 !important;
}

.product-image-fileinput .input-group {
    align-items: stretch !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    gap: 0.5rem !important;
    overflow: visible !important;
    width: 100% !important;
}

.product-image-fileinput .input-group .form-control.file-caption {
    align-items: center !important;
    border: 1px solid var(--ui-field-border) !important;
    border-radius: var(--ui-field-radius) !important;
    box-shadow: none !important;
    display: flex !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: auto !important;
}

.product-image-fileinput .input-group-btn {
    display: flex !important;
    flex: 0 0 auto !important;
    width: auto !important;
}

.product-image-fileinput .input-group-btn .btn-file {
    align-items: center !important;
    background: var(--brand-600) !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: var(--ui-radius-xl, 4px) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    color: #fff !important;
    display: inline-flex !important;
    flex-shrink: 0 !important;
    font-weight: 600 !important;
    gap: 0.4rem !important;
    height: 2.625rem !important;
    justify-content: center !important;
    min-height: 2.625rem !important;
    padding: 0 0.9rem !important;
    white-space: nowrap !important;
}

.product-image-fileinput .input-group-btn .btn-file:hover,
.product-image-fileinput .input-group-btn .btn-file:focus {
    background: var(--brand-700) !important;
    color: #fff !important;
}

.repair-input-group,
.booking-customer-control {
    gap: 0 !important;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    box-shadow: none;
    overflow: hidden;
}

.repair-input-group:focus-within,
.booking-customer-control:focus-within {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.repair-input-group > .repair-input-icon,
.repair-input-group > .repair-input,
.repair-input-group > .repair-select,
.booking-customer-control > .booking-input {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.repair-input-group > .repair-input-icon > .repair-input,
.repair-input-group > .repair-input-icon > .repair-select {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.repair-input-group > button,
.repair-input-group > a.tw-dw-btn,
.booking-customer-control > .booking-add-customer {
    min-height: calc(var(--ui-field-height) - 2px) !important;
    border: 0 !important;
    border-left: 1px solid #e3e8ef !important;
    border-radius: 0 !important;
    background: var(--ui-field-muted-bg) !important;
    background-image: none !important;
    color: var(--brand-700) !important;
    box-shadow: none !important;
}

.repair-input-group > button:hover,
.repair-input-group > button:focus,
.repair-input-group > a.tw-dw-btn:hover,
.repair-input-group > a.tw-dw-btn:focus,
.booking-customer-control > .booking-add-customer:hover,
.booking-customer-control > .booking-add-customer:focus {
    background: #eef2f6 !important;
    color: var(--brand-800) !important;
    outline: none !important;
}

/* -----------------------------------------------------------------------
   14) Bootstrap-to-Tailwind form bridge.
   A small site-wide script adds these semantic `tw-*` classes to legacy
   Bootstrap form markup so the styling system targets Tailwind-named form
   primitives. The original Bootstrap classes are left in the DOM only as
   compatibility hooks for Select2, fileinput, validation, and legacy JS. */
.tw-form-grid {
    display: flex;
    flex-wrap: wrap;
    margin-right: -0.5rem;
    margin-left: -0.5rem;
}

.tw-form-grid > .tw-form-col {
    min-width: 0;
    width: 100%;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

.tw-form-field {
    margin-bottom: 1.1rem;
}

.tw-form-field > label,
.tw-form-field label:not(.radio-inline):not(.checkbox-inline) {
    color: #364152;
    font-size: 0.875rem;
    font-weight: 600;
}

.tw-form-control-standard {
    width: 100%;
    min-height: var(--ui-field-height);
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    color: var(--ui-field-text);
    font-size: 0.875rem;
    padding: 0.55rem 0.75rem;
    box-shadow: none;
}

.tw-form-control-standard:focus {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
    outline: none;
}

textarea.tw-form-control-standard {
    min-height: 5rem;
}

.tw-input-group-standard {
    width: 100%;
    min-height: var(--ui-field-height);
    border: 1px solid var(--ui-field-border);
    border-collapse: separate;
    border-radius: var(--ui-field-radius);
    background: var(--ui-field-bg);
    box-shadow: none;
    overflow: hidden;
}

/* The eonasdan datetimepicker inserts its calendar popup as a child of the
   input-group (right after the <input>). The overflow:hidden above - which
   exists only to clip the group's own rounded corners - was cropping that
   popup down to the field's height, so the date/time calendar was invisible
   and unusable (e.g. Add Payment modal). While a picker is open inside the
   group, allow overflow so the calendar renders in full; it reverts to
   clipped once the popup is removed on close. Verified in-browser as the
   sole clip (modal-content does not crop the popup). */
.tw-input-group-standard:has(.bootstrap-datetimepicker-widget) {
    overflow: visible;
}

.content .module-shared-widget:has(.bootstrap-datetimepicker-widget),
.content .box:has(.bootstrap-datetimepicker-widget) {
    overflow: visible !important;
    position: relative;
    z-index: 20000;
}

.content .module-shared-widget:has(.bootstrap-datetimepicker-widget) .module-shared-widget-shell,
.content .module-shared-widget:has(.bootstrap-datetimepicker-widget) .module-shared-widget-body,
.content .box:has(.bootstrap-datetimepicker-widget) .box-body {
    overflow: visible !important;
}

.bootstrap-datetimepicker-widget.dropdown-menu,
.bootstrap-datetimepicker-widget {
    z-index: 20001 !important;
}

.tw-input-group-standard:focus-within,
.tw-input-group-standard:has(.select2-container--open),
.tw-input-group-standard:has(.select2-container--focus) {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--ui-focus-ring);
}

.tw-input-group-standard > .tw-form-control-standard,
.tw-input-group-standard > .select2-container,
.tw-input-group-standard > .tw-input-addon,
.tw-input-group-standard > .tw-input-action,
.tw-input-group-standard > .tw-input-action > .tw-input-button {
    min-height: calc(var(--ui-field-height) - 2px);
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tw-input-group-standard > .tw-form-control-standard {
    background: transparent;
}

.tw-input-addon {
    width: 2.625rem;
    padding: 0 0.75rem;
    background: var(--ui-field-muted-bg);
    color: var(--ui-field-icon);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.tw-input-addon:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.tw-input-addon:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.tw-input-action {
    background: var(--ui-field-muted-bg);
    vertical-align: stretch;
    white-space: nowrap;
}

.tw-input-action:not(:first-child) {
    border-left: 1px solid #e3e8ef !important;
}

.tw-input-action:not(:last-child) {
    border-right: 1px solid #e3e8ef !important;
}

.tw-input-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.4rem !important;
    height: 100% !important;
    min-width: 2.625rem;
    padding: 0.55rem 0.8rem !important;
    background: var(--ui-field-muted-bg) !important;
    background-image: none !important;
    color: var(--ui-field-icon) !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.tw-input-button:hover,
.tw-input-button:focus {
    background: #eef2f6 !important;
    color: var(--brand-700) !important;
    outline: none !important;
}

@media (min-width: 768px) {
    .tw-form-grid > .tw-form-col-md-3,
    .tw-form-grid > .tw-form-col-sm-3 {
        width: 25%;
    }

    .tw-form-grid > .tw-form-col-md-4,
    .tw-form-grid > .tw-form-col-sm-4 {
        width: 33.333333%;
    }

    .tw-form-grid > .tw-form-col-md-6,
    .tw-form-grid > .tw-form-col-sm-6 {
        width: 50%;
    }

    .tw-form-grid > .tw-form-col-md-8,
    .tw-form-grid > .tw-form-col-sm-8 {
        width: 66.666667%;
    }

    .tw-form-grid > .tw-form-col-md-12,
    .tw-form-grid > .tw-form-col-sm-12 {
        width: 100%;
    }
}

/* -----------------------------------------------------------------------
   Datetimepicker popup trapped behind Bootstrap modals.
   bootstrap-datetimepicker-widget reuses Bootstrap's plain .dropdown-menu
   (z-index: 1000), which sits BELOW an open .modal (z-index: 1050). Any
   date/time field inside a modal (payment forms, register close, etc.)
   opened its picker invisibly behind the modal, so clicking the field just
   selected its readonly text instead of showing a calendar. ----------------- */
.modal .bootstrap-datetimepicker-widget {
    z-index: 20001 !important;
}

.modal .select2-container--open,
.modal .select2-dropdown {
    z-index: 1070 !important;
}

.schedule .crm-follow-up-modal,
.edit_schedule .crm-follow-up-modal {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    overflow: visible;
}

.schedule .crm-follow-up-header,
.edit_schedule .crm-follow-up-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%);
}

.schedule .crm-follow-up-header h4,
.edit_schedule .crm-follow-up-header h4 {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}

.schedule .crm-follow-up-header button,
.edit_schedule .crm-follow-up-header button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.5rem;
    line-height: 1;
}

.schedule .crm-follow-up-header button:hover,
.edit_schedule .crm-follow-up-header button:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.schedule .crm-follow-up-body,
.edit_schedule .crm-follow-up-body {
    padding: 1rem 1.5rem 1.25rem;
}

.schedule .crm-follow-up-grid,
.edit_schedule .crm-follow-up-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.schedule .crm-follow-up-col-12,
.edit_schedule .crm-follow-up-col-12 {
    grid-column: span 12 / span 12;
}

.schedule .crm-follow-up-col-8,
.edit_schedule .crm-follow-up-col-8 {
    grid-column: span 8 / span 8;
}

.schedule .crm-follow-up-col-6,
.edit_schedule .crm-follow-up-col-6 {
    grid-column: span 6 / span 6;
}

.schedule .crm-follow-up-col-4,
.edit_schedule .crm-follow-up-col-4 {
    grid-column: span 4 / span 4;
}

.schedule .crm-follow-up-body .tw-mb-4,
.edit_schedule .crm-follow-up-body .tw-mb-4 {
    margin-bottom: 0.65rem;
}

.schedule .crm-follow-up-body .allow_notification_elements,
.edit_schedule .crm-follow-up-body .allow_notification_elements {
    grid-column: span 12 / span 12;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.schedule .crm-follow-up-body .allow_notification_elements.hide,
.schedule .crm-follow-up-body .allow_notification_elements.tw-hidden,
.edit_schedule .crm-follow-up-body .allow_notification_elements.hide,
.edit_schedule .crm-follow-up-body .allow_notification_elements.tw-hidden {
    display: none !important;
}

.schedule .crm-follow-up-body label,
.edit_schedule .crm-follow-up-body label {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.schedule .crm-follow-up-notification-row,
.edit_schedule .crm-follow-up-notification-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 32px;
}

.schedule .crm-follow-up-notification-row label,
.edit_schedule .crm-follow-up-notification-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.schedule .crm-follow-up-notification-row .fa,
.schedule .crm-follow-up-notification-row .fas,
.edit_schedule .crm-follow-up-notification-row .fa,
.edit_schedule .crm-follow-up-notification-row .fas {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.schedule .crm-follow-up-body .tw-form-control-standard,
.edit_schedule .crm-follow-up-body .tw-form-control-standard {
    min-height: 42px;
}

.schedule .crm-follow-up-body .select2-container,
.edit_schedule .crm-follow-up-body .select2-container {
    width: 100% !important;
}

.schedule .crm-follow-up-body .select2-container--default .select2-selection--single,
.edit_schedule .crm-follow-up-body .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
}

.schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__rendered,
.edit_schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 0.75rem;
}

.schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__arrow,
.edit_schedule .crm-follow-up-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.schedule .crm-follow-up-body .tox.tox-tinymce,
.edit_schedule .crm-follow-up-body .tox.tox-tinymce {
    height: 220px !important;
    border-radius: 8px;
}

.schedule .crm-follow-up-footer,
.edit_schedule .crm-follow-up-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

@media (max-width: 767px) {
    .schedule .crm-follow-up-col-8,
    .schedule .crm-follow-up-col-6,
    .schedule .crm-follow-up-col-4,
    .edit_schedule .crm-follow-up-col-8,
    .edit_schedule .crm-follow-up-col-6,
    .edit_schedule .crm-follow-up-col-4 {
        grid-column: span 12 / span 12;
    }
}

.contact_login_modal .crm-contact-login-modal {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.18);
    overflow: visible;
}

.contact_login_modal .crm-contact-login-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-bottom: 0;
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%);
}

.contact_login_modal .crm-contact-login-header h4 {
    margin: 0;
    color: #fff;
    font-size: 1.125rem;
    font-weight: 700;
}

.contact_login_modal .crm-contact-login-header button {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: rgba(255, 255, 255, 0.86);
    font-size: 1.5rem;
    line-height: 1;
}

.contact_login_modal .crm-contact-login-header button:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.contact_login_modal .crm-contact-login-body {
    padding: 1rem 1.5rem 1.25rem;
}

.contact_login_modal .crm-contact-login-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.contact_login_modal #crm_login_div.hide,
.contact_login_modal #crm_login_div.tw-hidden {
    display: none !important;
}

.contact_login_modal .crm-contact-login-col-2 {
    grid-column: span 2 / span 2;
}

.contact_login_modal .crm-contact-login-col-4 {
    grid-column: span 4 / span 4;
}

.contact_login_modal .crm-contact-login-col-5 {
    grid-column: span 5 / span 5;
}

.contact_login_modal .crm-contact-login-col-6 {
    grid-column: span 6 / span 6;
}

.contact_login_modal .crm-contact-login-body .tw-mb-4 {
    margin-bottom: 0.75rem;
}

.contact_login_modal .crm-contact-login-body label {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.contact_login_modal .crm-contact-login-body .tw-form-control-standard {
    min-height: 42px;
}

.contact_login_modal .crm-contact-login-body .select2-container {
    width: 100% !important;
}

.contact_login_modal .crm-contact-login-body .select2-container--default .select2-selection--single {
    height: 42px;
    border: 1px solid var(--ui-field-border);
    border-radius: var(--ui-field-radius);
}

.contact_login_modal .crm-contact-login-body .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px;
    padding-left: 0.75rem;
}

.contact_login_modal .crm-contact-login-body .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}

.contact_login_modal .crm-contact-login-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
}

.contact_login_modal .crm-contact-login-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.contact_login_modal .crm-contact-login-check-row .fa,
.contact_login_modal .crm-contact-login-check-row .fas {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.contact_login_modal .crm-contact-login-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f8fafc;
}

@media (max-width: 767px) {
    .contact_login_modal .crm-contact-login-col-2,
    .contact_login_modal .crm-contact-login-col-4,
    .contact_login_modal .crm-contact-login-col-5,
    .contact_login_modal .crm-contact-login-col-6 {
        grid-column: span 12 / span 12;
    }
}

.crm-contact-person-wrapper {
    margin-top: 1rem;
}

.crm-contact-person-content {
    margin-top: 0.85rem;
}

.crm-contact-person-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.8rem 1rem;
}

.crm-contact-person-panel.hide {
    display: none !important;
}

.crm-contact-person-col-12 {
    grid-column: span 12 / span 12;
}

.crm-contact-person-col-2 {
    grid-column: span 2 / span 2;
}

.crm-contact-person-col-4 {
    grid-column: span 4 / span 4;
}

.crm-contact-person-col-5 {
    grid-column: span 5 / span 5;
}

.crm-contact-person-col-6 {
    grid-column: span 6 / span 6;
}

.crm-contact-person-divider {
    margin: 0.25rem 0 1rem;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

.crm-contact-person-wrapper .tw-mb-4 {
    margin-bottom: 0.75rem;
}

.crm-contact-person-wrapper label {
    display: block;
    margin-bottom: 0.35rem;
    color: #334155;
    font-size: 0.875rem;
    font-weight: 600;
}

.crm-contact-person-wrapper .tw-form-control-standard {
    min-height: 42px;
}

.crm-contact-person-check-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 42px;
}

.crm-contact-person-check-row label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
}

.crm-contact-person-check-row .fa,
.crm-contact-person-check-row .fas {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

@media (max-width: 767px) {
    .crm-contact-person-col-2,
    .crm-contact-person-col-4,
    .crm-contact-person-col-5,
    .crm-contact-person-col-6 {
        grid-column: span 12 / span 12;
    }
}

/* -----------------------------------------------------------------------
   Form action buttons — "below-card" pattern (global)
   -----------------------------------------------------------------------
   A companion script in app.blade.php (processWidget) adds a
   `widget-action-bar` class, IN PLACE, to the trailing row of a
   .module-shared-widget slot that holds the submit button (it never moves
   the row in the DOM — see the script comment for why). This just gives
   that row a small top gap so it reads as sitting below the white card,
   on the plain page background — no background color, border, or boxed
   "footer strip" of its own; the card keeps its normal rounded corners
   all the way around since nothing sits flush against it anymore.

   Pages where the button is already outside the widget DOM
   (e.g. business/settings.blade.php .bs-update-bar) are unaffected.
   Modals are excluded by the script (skip if inside .modal). */

.widget-action-bar {
    margin-top: 1rem;
    text-align: center;
}

/* -----------------------------------------------------------------------
   Cart quantity-unit label (sell.product_row / sale_pos.product_row)
   -----------------------------------------------------------------------
   Single-unit products print the unit name as bare text under the quantity
   stepper (no wrapper, no styling) while multi-unit products get a proper
   .tw-form-control-standard <select>. The label now carries that same
   tw-form-control-standard class directly (the established pattern for
   hardcoding the bridge class - see sell/create.blade.php's transaction_date
   field) so it renders as the identical bordered field, just centered under
   the stepper at the same fixed width as the sibling .sub_unit select. */
#pos_table td .sub_unit,
#pos_table td .pos-unit-label {
    width: 132px;
    max-width: 100%;
    margin: 6px auto 0;
}

#pos_table td .pos-unit-label {
    display: flex;
    align-items: center;
}

/* -----------------------------------------------------------------------
   Global: Clickable reference links (invoice numbers, payment numbers, etc.)
   Remove any background/button appearance; show as plain light-blue text.
   Context-specific overrides (box-tools, content-header, etc.) remain higher
   specificity and continue to render those links as styled buttons.
   ----------------------------------------------------------------------- */
a.btn-modal,
a.view_payment_modal,
a.view_purchase_payment_modal,
a.view_purchase_return_payment_modal,
a.view_sell_return_payment_modal,
a.view_expense_payment_modal,
td a.btn-modal,
td a[data-container=".view_modal"],
td a[data-container=".view_modal_lg"],
td a[data-container=".view_modal_xl"] {
    background: none !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-weight: inherit !important;
    color: #0ea5e9 !important;
    text-decoration: none !important;
    display: inline !important;
    letter-spacing: normal !important;
    transition: color 0.15s ease !important;
}

a.btn-modal:hover,
a.btn-modal:focus,
a.view_payment_modal:hover,
a.view_payment_modal:focus,
a.view_purchase_payment_modal:hover,
a.view_purchase_payment_modal:focus,
a.view_purchase_return_payment_modal:hover,
a.view_purchase_return_payment_modal:focus,
a.view_sell_return_payment_modal:hover,
a.view_sell_return_payment_modal:focus,
a.view_expense_payment_modal:hover,
a.view_expense_payment_modal:focus,
td a.btn-modal:hover,
td a.btn-modal:focus,
td a[data-container=".view_modal"]:hover,
td a[data-container=".view_modal"]:focus,
td a[data-container=".view_modal_lg"]:hover,
td a[data-container=".view_modal_lg"]:focus,
td a[data-container=".view_modal_xl"]:hover,
td a[data-container=".view_modal_xl"]:focus {
    background: none !important;
    color: #0284c7 !important;
    text-decoration: underline !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Preserve button appearance for links rendered specifically in button-context areas */
.box-tools a.btn-modal,
.content-header a.btn-modal,
.module-shared-widget .box-tools a.btn-modal,
.box-primary > .box-header a.btn-modal,
.box-header.module-shared-widget-header .box-tools a.btn-modal,
.modal-footer a.btn-modal,
.action-btn a.btn-modal {
    background: linear-gradient(135deg, var(--ui-brand-start) 0%, var(--ui-brand-end) 100%) !important;
    border: none !important;
    color: #fff !important;
    border-radius: var(--ui-radius-pill) !important;
    box-shadow: 0 12px 28px -18px var(--ui-brand-shadow-strong) !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.35rem 1.1rem !important;
    text-decoration: none !important;
    transform: none !important;
}