/* MyBizMan UI Foundation - self contained, no external CSS dependency */
:root {
    --ui-primary: #2563eb;
    --ui-primary-dark: #1d4ed8;
    --ui-secondary: #64748b;
    --ui-success: #16a34a;
    --ui-danger: #dc2626;
    --ui-warning: #d97706;
    --ui-info: #0891b2;
    --ui-bg: #f5f7fb;
    --ui-surface: #fff;
    --ui-border: #e2e8f0;
    --ui-text: #1e293b;
    --ui-muted: #64748b;
    --ui-radius: 10px;
    --ui-shadow: 0 2px 10px rgba(15,23,42,.06);
    --ui-shadow-lg: 0 10px 35px rgba(15,23,42,.12)
}

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

html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--ui-bg);
    color: var(--ui-text);
    font-family: Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    font-size: 1rem;
    line-height: 1.5
}

a {
    color: var(--ui-primary);
    text-decoration: none
}

    a:hover {
        text-decoration: underline
    }

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

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

button {
    cursor: pointer
}

hr {
    border: 0;
    border-top: 1px solid var(--ui-border);
    margin: 1rem 0
}

/* Bootstrap-compatible containers/grid */
.container, .container-fluid {
    width: 100%;
    padding-right: 12px;
    padding-left: 12px;
    margin-right: auto;
    margin-left: auto
}

.container {
    max-width: 1320px
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px
}

    .row > * {
        width: 100%;
        max-width: 100%;
        padding-right: 12px;
        padding-left: 12px
    }

.col {
    flex: 1 0 0%
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-7 {
    flex: 0 0 auto;
    width: 58.333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.666667%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.333333%
}

.col-md-1 {
    flex: 0 0 auto;
    width: 8.333333%
}

.col-md-2 {
    flex: 0 0 auto;
    width: 16.666667%
}

.col-md-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-md-4 {
    flex: 0 0 auto;
    width: 33.333333%
}

.col-md-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-md-8 {
    flex: 0 0 auto;
    width: 66.666667%
}

.col-md-12 {
    flex: 0 0 auto;
    width: 100%
}

.col-md-auto {
    flex: 0 0 auto;
    width: auto
}

.col-sm-2 {
    flex: 0 0 auto;
    width: 16.666667%
}

.col-sm-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-sm-4 {
    flex: 0 0 auto;
    width: 33.333333%
}

.col-sm-5 {
    flex: 0 0 auto;
    width: 41.666667%
}

.col-sm-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-sm-7 {
    flex: 0 0 auto;
    width: 58.333333%
}

.col-sm-8 {
    flex: 0 0 auto;
    width: 66.666667%
}

.col-sm-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-sm-10 {
    flex: 0 0 auto;
    width: 83.333333%
}

.col-lg-8 {
    flex: 0 0 auto;
    width: 66.666667%
}

.col-lg-10 {
    flex: 0 0 auto;
    width: 83.333333%
}

.col-xl-3 {
    flex: 0 0 auto;
    width: 25%
}

/* Spacing */
.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem !important
}

.px-2 {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.py-1 {
    padding-top: .25rem !important;
    padding-bottom: .25rem !important
}

.py-2 {
    padding-top: .5rem !important;
    padding-bottom: .5rem !important
}

.py-3 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important
}

.py-4 {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important
}

.m-0 {
    margin: 0 !important
}

.m-1 {
    margin: .25rem !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-4 {
    margin: 1.5rem !important
}

.m-auto {
    margin: auto !important
}

.mt-0 {
    margin-top: 0 !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.g-0 {
    gap: 0 !important
}

.g-1 {
    gap: .25rem !important
}

.g-2 {
    gap: .5rem !important
}

.g-3 {
    gap: 1rem !important
}

.g-4 {
    gap: 1.5rem !important
}

/* Flex & display */
.d-none {
    display: none !important
}

.d-block {
    display: block !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-flex {
    display: flex !important
}

.d-grid {
    display: grid !important
}

.d-table {
    display: table !important
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.flex-grow-1 {
    flex-grow: 1 !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.justify-content-start {
    justify-content: flex-start !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-around !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-center {
    align-items: center !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-self-center {
    align-self: center !important
}

.ms-auto {
    margin-left: auto !important
}

.w-25 {
    width: 25% !important
}

.w-50 {
    width: 50% !important
}

.w-75 {
    width: 75% !important
}

.w-100 {
    width: 100% !important
}

.h-100 {
    height: 100% !important
}

.mw-100 {
    max-width: 100% !important
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.top-0 {
    top: 0 !important
}

.start-0 {
    left: 0 !important
}

.end-0 {
    right: 0 !important
}

.bottom-0 {
    bottom: 0 !important
}

/* Typography */
.small {
    font-size: .875em
}

.lead {
    font-size: 1.25rem;
    font-weight: 300
}

.fw-bold {
    font-weight: 700 !important
}

.fw-semibold {
    font-weight: 600 !important
}

.fw-normal {
    font-weight: 400 !important
}

.fst-italic {
    font-style: italic !important
}

.text-center {
    text-align: center !important
}

.text-start {
    text-align: left !important
}

.text-end, .text-right {
    text-align: right !important
}

.text-left {
    text-align: left !important
}

.text-uppercase {
    text-transform: uppercase !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-wrap {
    white-space: normal !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-break {
    word-wrap: break-word !important;
    word-break: break-word !important
}

.text-muted {
    color: #64748b !important
}

.text-primary {
    color: var(--ui-primary) !important
}

.text-secondary {
    color: var(--ui-secondary) !important
}

.text-success {
    color: var(--ui-success) !important
}

.text-danger {
    color: var(--ui-danger) !important
}

.text-warning {
    color: var(--ui-warning) !important
}

.text-info {
    color: var(--ui-info) !important
}

.text-dark {
    color: #0f172a !important
}

.text-white {
    color: #fff !important
}

.text-gray-500 {
    color: #64748b !important
}

.text-gray-600 {
    color: #475569 !important
}

/* Surfaces, borders, radius, shadows */
.bg-white {
    background: #fff !important
}

.bg-light {
    background: #f8fafc !important
}

.bg-transparent {
    background: transparent !important
}

.bg-primary {
    background: var(--ui-primary) !important
}

.bg-secondary {
    background: var(--ui-secondary) !important
}

.bg-success {
    background: var(--ui-success) !important
}

.bg-danger {
    background: var(--ui-danger) !important
}

.bg-warning {
    background: #f59e0b !important
}

.bg-info {
    background: var(--ui-info) !important
}

.bg-dark {
    background: #0f172a !important
}

.border {
    border: 1px solid var(--ui-border) !important
}

.border-top {
    border-top: 1px solid var(--ui-border) !important
}

.border-bottom {
    border-bottom: 1px solid var(--ui-border) !important
}

.border-start {
    border-left: 1px solid var(--ui-border) !important
}

.border-end {
    border-right: 1px solid var(--ui-border) !important
}

.rounded {
    border-radius: .5rem !important
}

.rounded-2 {
    border-radius: .5rem !important
}

.rounded-3 {
    border-radius: .75rem !important
}

.rounded-circle {
    border-radius: 50% !important
}

.shadow {
    box-shadow: var(--ui-shadow) !important
}

.shadow-sm {
    box-shadow: 0 1px 4px rgba(15,23,42,.06) !important
}

.shadow-lg {
    box-shadow: var(--ui-shadow-lg) !important
}

/* Cards */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #fff;
    background-clip: border-box;
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow);
    word-wrap: break-word
}

.card-body {
    flex: 1 1 auto;
    padding: 1rem
}

.card-header {
    padding: .8rem 1rem;
    margin-bottom: 0;
    background: #f8fafc;
    border-bottom: 1px solid var(--ui-border)
}

.card-footer {
    padding: .8rem 1rem;
    background: #f8fafc;
    border-top: 1px solid var(--ui-border)
}

.card-title {
    margin-bottom: .75rem
}

.card-text:last-child {
    margin-bottom: 0
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border: 1px solid transparent;
    border-radius: .5rem;
    background: #fff;
    color: #334155;
    font-weight: 500;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    transition: .15s ease-in-out;
    min-height: 38px
}

    .btn:hover {
        filter: brightness(.97);
        text-decoration: none;
        transform: translateY(-1px)
    }

    .btn:disabled, .btn.disabled {
        opacity: .55;
        pointer-events: none
    }

.btn-sm {
    padding: .3rem .6rem;
    font-size: .875rem;
    min-height: 32px
}

.btn-lg {
    padding: .7rem 1.1rem;
    font-size: 1.1rem;
    min-height: 44px
}

.btn-primary {
    color: #fff;
    background: var(--ui-primary);
    border-color: var(--ui-primary)
}

    .btn-primary:hover {
        background: var(--ui-primary-dark)
    }

.btn-secondary {
    color: #fff;
    background: #64748b;
    border-color: #64748b
}

.btn-success {
    color: #fff;
    background: var(--ui-success);
    border-color: var(--ui-success)
}

.btn-danger {
    color: #fff;
    background: var(--ui-danger);
    border-color: var(--ui-danger)
}

.btn-warning {
    color: #fff;
    background: #d97706;
    border-color: #d97706
}

.btn-info {
    color: #fff;
    background: var(--ui-info);
    border-color: var(--ui-info)
}

.btn-light {
    color: #334155;
    background: #f8fafc;
    border-color: #e2e8f0
}

.btn-dark {
    color: #fff;
    background: #0f172a;
    border-color: #0f172a
}

.btn-link {
    color: var(--ui-primary);
    background: transparent;
    border-color: transparent
}

.btn-outline-primary {
    color: var(--ui-primary);
    border-color: var(--ui-primary);
    background: transparent
}

.btn-outline-secondary {
    color: #475569;
    border-color: #94a3b8;
    background: transparent
}

.btn-outline-success {
    color: var(--ui-success);
    border-color: var(--ui-success);
    background: transparent
}

.btn-outline-danger {
    color: var(--ui-danger);
    border-color: var(--ui-danger);
    background: transparent
}

.btn-outline-warning {
    color: #b45309;
    border-color: #f59e0b;
    background: transparent
}

.btn-outline-info {
    color: #0369a1;
    border-color: #0891b2;
    background: transparent
}

.btn-outline-dark {
    color: #0f172a;
    border-color: #475569;
    background: transparent
}

.btn-group {
    display: inline-flex;
    vertical-align: middle
}

    .btn-group > .btn {
        border-radius: 0
    }

        .btn-group > .btn:first-child {
            border-radius: .5rem 0 0 .5rem
        }

        .btn-group > .btn:last-child {
            border-radius: 0 .5rem .5rem 0
        }

/* Forms */
.form-label, .col-form-label {
    display: inline-block;
    margin-bottom: .35rem;
    font-weight: 600;
    color: #334155
}

.form-control, .form-select, .form-control-plaintext {
    display: block;
    width: 100%;
    padding: .52rem .72rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #1e293b;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    appearance: none
}

    .form-control:focus, .form-select:focus {
        color: #0f172a;
        background: #fff;
        border-color: #60a5fa;
        outline: 0;
        box-shadow: 0 0 0 .2rem rgba(37,99,235,.12)
    }

    .form-control[disabled], .form-control:disabled, .form-select:disabled {
        background: #f1f5f9;
        opacity: 1
    }

    .form-control::placeholder {
        color: #94a3b8
    }

.form-check {
    display: block;
    min-height: 1.5rem;
    padding-left: 1.5rem
}

.form-check-input {
    float: left;
    margin-left: -1.5rem;
    margin-top: .3rem;
    width: 1rem;
    height: 1rem
}

.form-check-label {
    cursor: pointer
}

.input-group {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    width: 100%
}

    .input-group > .form-control, .input-group > .form-select {
        position: relative;
        flex: 1 1 auto;
        width: 1%;
        min-width: 0;
        border-radius: 0
    }

.input-group-text {
    display: flex;
    align-items: center;
    padding: .52rem .72rem;
    color: #475569;
    background: #f8fafc;
    border: 1px solid #cbd5e1
}

.input-group > :first-child {
    border-radius: .5rem 0 0 .5rem
}

.input-group > :last-child {
    border-radius: 0 .5rem .5rem 0
}

.form-floating {
    position: relative
}

    .form-floating > .form-control {
        height: calc(3.5rem + 2px);
        padding-top: 1.625rem
    }

    .form-floating > label {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        padding: 1rem .75rem;
        color: #64748b;
        pointer-events: none;
        transform-origin: 0 0
    }

/* Tables */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #334155;
    vertical-align: top;
    border-color: var(--ui-border);
    border-collapse: collapse
}

    .table th, .table td {
        padding: .65rem .7rem;
        border-bottom: 1px solid var(--ui-border);
        vertical-align: middle
    }

    .table thead th {
        font-weight: 700;
        color: #334155;
        background: #f8fafc
    }

.table-bordered, .table-bordered th, .table-bordered td {
    border: 1px solid var(--ui-border)
}

.table-striped tbody tr:nth-of-type(odd) {
    background: rgba(248,250,252,.65)
}

.table-hover tbody tr:hover {
    background: #f8fafc
}

.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.align-middle {
    vertical-align: middle !important
}

.align-top {
    vertical-align: top !important
}

.align-bottom {
    vertical-align: bottom !important
}

/* Badges / alerts */
.badge {
    display: inline-flex;
    align-items: center;
    padding: .3rem .55rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap
}

    .badge.bg-primary {
        color: #fff
    }

    .badge.bg-secondary {
        color: #fff
    }

    .badge.bg-success {
        color: #fff
    }

    .badge.bg-danger {
        color: #fff
    }

    .badge.bg-warning {
        color: #fff
    }

    .badge.bg-info {
        color: #fff
    }

.alert {
    position: relative;
    padding: .8rem 1rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: .6rem
}

.alert-primary {
    color: #1e40af;
    background: #dbeafe;
    border-color: #bfdbfe
}

.alert-secondary {
    color: #334155;
    background: #f1f5f9;
    border-color: #e2e8f0
}

.alert-success {
    color: #166534;
    background: #dcfce7;
    border-color: #bbf7d0
}

.alert-danger {
    color: #991b1b;
    background: #fee2e2;
    border-color: #fecaca
}

.alert-warning {
    color: #92400e;
    background: #fef3c7;
    border-color: #fde68a
}

.alert-info {
    color: #155e75;
    background: #cffafe;
    border-color: #a5f3fc
}

.alert-light {
    color: #334155;
    background: #f8fafc;
    border-color: #e2e8f0
}

/* Nav / dropdown / modal / toast */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none
}

.nav-link {
    display: block;
    padding: .5rem .8rem;
    color: #2563eb
}

    .nav-link:hover {
        color: #1d4ed8
    }

.dropdown {
    position: relative
}

.dropdown-toggle::after {
    display: inline-block;
    margin-left: .3em;
    vertical-align: .2em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent
}

.dropdown-menu {
    position: absolute;
    z-index: 1200;
    display: none;
    min-width: 11rem;
    padding: .4rem 0;
    margin: .2rem 0 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: .6rem;
    box-shadow: var(--ui-shadow-lg)
}

    .dropdown-menu.show {
        display: block
    }

.dropdown-item {
    display: block;
    width: 100%;
    padding: .5rem .8rem;
    clear: both;
    color: #334155;
    text-align: inherit;
    white-space: nowrap;
    background: transparent;
    border: 0
}

    .dropdown-item:hover {
        background: #f1f5f9;
        color: #0f172a;
        text-decoration: none
    }

.modal {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0;
    background: rgba(15,23,42,.48)
}

    .modal.show {
        display: block
    }

.modal-dialog {
    position: relative;
    width: auto;
    margin: 1.5rem auto;
    pointer-events: none;
    max-width: 680px
}

    .modal-dialog.modal-lg {
        max-width: 1000px
    }

    .modal-dialog.modal-xl {
        max-width: 1200px
    }

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background: #fff;
    background-clip: padding-box;
    border: 1px solid var(--ui-border);
    border-radius: 1rem;
    outline: 0;
    box-shadow: var(--ui-shadow-lg)
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--ui-border)
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: 1.2rem
}

.modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .5rem;
    padding: .8rem 1.2rem;
    border-top: 1px solid var(--ui-border)
}

.btn-close {
    width: 1.3rem;
    height: 1.3rem;
    padding: 0;
    border: 0;
    background: transparent;
    position: relative
}

    .btn-close::before, .btn-close::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 1.2rem;
        height: 2px;
        background: #64748b
    }

    .btn-close::before {
        transform: translate(-50%,-50%) rotate(45deg)
    }

    .btn-close::after {
        transform: translate(-50%,-50%) rotate(-45deg)
    }

.toast-container {
    position: fixed;
    z-index: 2200
}

.toast {
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: .6rem;
    box-shadow: var(--ui-shadow-lg);
    overflow: hidden
}

.toast-header {
    display: flex;
    align-items: center;
    padding: .5rem .75rem;
    background: #f8fafc;
    border-bottom: 1px solid var(--ui-border)
}

.toast-body {
    padding: .75rem
}

/* Pagination */
.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: .5rem
}

.page-item {
    margin: 0 2px
}

.page-link {
    display: block;
    padding: .45rem .7rem;
    border: 1px solid var(--ui-border);
    border-radius: .4rem;
    background: #fff;
    color: #334155
}

.page-item.active .page-link {
    background: var(--ui-primary);
    border-color: var(--ui-primary);
    color: #fff
}

.page-item.disabled .page-link {
    opacity: .5;
    pointer-events: none
}

/* DataTables */
.dataTables_wrapper {
    color: #334155
}

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        margin-bottom: .75rem
    }

        .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select {
            margin-left: .4rem;
            padding: .35rem .55rem;
            border: 1px solid #cbd5e1;
            border-radius: .45rem;
            background: #fff
        }

    .dataTables_wrapper .dataTables_info {
        padding-top: .75rem;
        color: #64748b
    }

    .dataTables_wrapper .dataTables_paginate {
        padding-top: .5rem
    }

    .dataTables_wrapper table.dataTable thead th {
        border-bottom: 2px solid #cbd5e1
    }

    .dataTables_wrapper table.dataTable.no-footer {
        border-bottom: 1px solid var(--ui-border)
    }

/* jQuery UI autocomplete compatibility */
.ui-autocomplete {
    position: absolute;
    z-index: 2500;
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: .25rem 0;
    background: #fff;
    border: 1px solid var(--ui-border);
    border-radius: .6rem;
    box-shadow: var(--ui-shadow-lg);
    list-style: none
}

.ui-menu-item {
    padding: 0
}

.ui-menu-item-wrapper {
    padding: .55rem .75rem;
    cursor: pointer
}

    .ui-menu-item-wrapper:hover, .ui-state-active {
        background: #eff6ff;
        color: #1d4ed8
    }
/* jsTree compatibility */
.jstree ul {
    list-style: none;
    padding-left: 1.25rem;
    margin: 0
}

.jstree li {
    margin: .15rem 0
}

.jstree-anchor {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: .15rem .35rem;
    border-radius: .35rem;
    color: #334155
}

.jstree-clicked {
    background: #dbeafe;
    color: #1d4ed8
}

.jstree-hovered {
    background: #f1f5f9
}

.jstree-checkbox {
    margin-right: .35rem
}

/* Responsive grid baseline: breakpoint-prefixed columns are full-width until their breakpoint.
   This prevents mobile layouts from inheriting desktop widths. */
.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-sm-10,.col-sm-12,.col-sm-auto,
.col-md-1,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-md-10,.col-md-11,.col-md-12,.col-md-auto,
.col-lg-1,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-auto,
.col-xl-1,.col-xl-2,.col-xl-3,.col-xl-4,.col-xl-5,.col-xl-6,.col-xl-7,.col-xl-8,.col-xl-9,.col-xl-10,.col-xl-11,.col-xl-12,.col-xl-auto {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

/* Responsive */
@media (min-width:576px) {
    .container {
        max-width: 540px
    }

    .d-sm-none {
        display: none !important
    }

    .d-sm-inline {
        display: inline !important
    }

    .d-sm-block {
        display: block !important
    }

    .col-sm-12 { width:100% }
    .col-sm-2 {
        width: 16.666667%
    }

    .col-sm-3 {
        width: 25%
    }

    .col-sm-4 {
        width: 33.333333%
    }

    .col-sm-5 {
        width: 41.666667%
    }

    .col-sm-6 {
        width: 50%
    }

    .col-sm-7 {
        width: 58.333333%
    }

    .col-sm-8 {
        width: 66.666667%
    }

    .col-sm-9 {
        width: 75%
    }

    .col-sm-10 {
        width: 83.333333%
    }
}

@media (min-width:768px) {
    .container {
        max-width: 720px
    }

    .d-md-none {
        display: none !important
    }

    .d-md-block {
        display: block !important
    }

    .d-md-flex {
        display: flex !important
    }

    .col-md-5 { width:41.666667% }
    .col-md-7 { width:58.333333% }
    .col-md-9 { width:75% }
    .col-md-10 { width:83.333333% }
    .col-md-11 { width:91.666667% }
    .col-md-1 {
        width: 8.333333%
    }

    .col-md-2 {
        width: 16.666667%
    }

    .col-md-3 {
        width: 25%
    }

    .col-md-4 {
        width: 33.333333%
    }

    .col-md-6 {
        width: 50%
    }

    .col-md-8 {
        width: 66.666667%
    }

    .col-md-12 {
        width: 100%
    }

    .col-md-auto {
        width: auto
    }
}

@media (min-width:992px) {
    .container {
        max-width: 960px
    }

    .col-lg-2 { width:16.666667% }
    .col-lg-3 { width:25% }
    .col-lg-4 { width:33.333333% }
    .col-lg-5 { width:41.666667% }
    .col-lg-6 { width:50% }
    .col-lg-7 { width:58.333333% }
    .col-lg-9 { width:75% }
    .col-lg-12 { width:100% }
    .col-lg-8 {
        width: 66.666667%
    }

    .col-lg-10 {
        width: 83.333333%
    }
}

@media (min-width:1200px) {
    .container {
        max-width: 1140px
    }

    .col-xl-1 { width:8.333333% }
    .col-xl-2 { width:16.666667% }
    .col-xl-3 { width:25% }
    .col-xl-4 { width:33.333333% }
    .col-xl-5 { width:41.666667% }
    .col-xl-6 { width:50% }
    .col-xl-7 { width:58.333333% }
    .col-xl-8 { width:66.666667% }
    .col-xl-9 { width:75% }
    .col-xl-10 { width:83.333333% }
    .col-xl-11 { width:91.666667% }
    .col-xl-12 { width:100% }
    .col-xl-3 {
        width: 25%
    }
}

@media (min-width:1400px) {
    .container {
        max-width: 1320px
    }
}

@media (max-width:430px) {
    .dashboard-page .quick-action {
        min-height: 96px;
        padding: .75rem .5rem;
        gap: .4rem;
        border-radius: 12px;
    }

    .dashboard-page .quick-action-icon {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 1.1rem;
    }

    .dashboard-page .quick-action > span:last-child {
        font-size: .8rem;
    }
}

@media (max-width:767.98px) {
    .row {
        margin-left: -7px;
        margin-right: -7px
    }

        .row > * {
            padding-left: 7px;
            padding-right: 7px
        }

    .container, .container-fluid {
        padding-left: 8px;
        padding-right: 8px
    }

    .modal-dialog {
        margin: .75rem
    }

    .table th, .table td {
        padding: .55rem .5rem
    }

    .btn {
        min-height: 40px
    }

    .form-control, .form-select {
        min-height: 40px
    }

    .table-responsive {
        margin-bottom: .75rem
    }

    .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter {
        float: none !important;
        text-align: left !important;
        margin: .5rem 0
    }

        .dataTables_wrapper .dataTables_filter input {
            max-width: 100%;
            margin-left: 0
        }

    .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        margin: .5rem 0
    }
}

/* Utility helpers used by the existing app */
.gap-1 {
    gap: .25rem !important
}

.gap-2 {
    gap: .5rem !important
}

.gap-3 {
    gap: 1rem !important
}

.gap-4 {
    gap: 1.5rem !important
}

.text-xs {
    font-size: .75rem !important
}

.opacity-50 {
    opacity: .5 !important
}

.bg-opacity-10 {
    background-color: rgba(255,255,255,.1) !important
}

.bg-opacity-25 {
    background-color: rgba(255,255,255,.25) !important
}

/* Self-contained icon fallback. Keeps existing FontAwesome class names usable without external fonts. */
i.fas, i.far, i.fa, i.bi {
    font-family: inherit !important;
    font-style: normal !important;
    display: inline-block;
    min-width: 1em;
    text-align: center
}

i.fa-plus::before {
    content: "+"
}

i.fa-minus::before {
    content: "−"
}

i.fa-times::before, i.fa-times-circle::before {
    content: "×"
}

i.fa-search::before, i.bi-search::before {
    content: "⌕"
}

i.fa-edit::before, i.fa-pen-alt::before {
    content: "✎"
}

i.fa-trash::before, i.fa-trash-alt::before {
    content: "🗑"
}

i.fa-save::before {
    content: "💾"
}

i.fa-print::before {
    content: "🖨"
}

i.fa-eye::before, i.bi-eye::before {
    content: "◉"
}

i.fa-check-circle::before {
    content: "✓"
}

i.fa-exclamation-triangle::before {
    content: "⚠"
}

i.fa-info-circle::before {
    content: "ⓘ"
}

i.fa-lightbulb::before {
    content: "💡"
}

i.fa-arrow-left::before {
    content: "←"
}

i.fa-arrow-right::before {
    content: "→"
}

i.fa-arrow-up::before {
    content: "↑"
}

i.fa-arrow-down::before {
    content: "↓"
}

i.fa-angle-left::before {
    content: "‹"
}

i.fa-angle-right::before {
    content: "›"
}

i.fa-angle-double-left::before {
    content: "«"
}

i.fa-angle-double-right::before {
    content: "»"
}

i.fa-home::before {
    content: "⌂"
}

i.fa-user::before {
    content: "👤"
}

i.fa-users::before, i.fa-user-friends::before {
    content: "👥"
}

i.fa-shopping-cart::before, i.bi-cart::before {
    content: "🛒"
}

i.fa-box::before, i.fa-boxes::before, i.fa-cube::before, i.fa-cubes::before {
    content: "▣"
}

i.fa-file-invoice::before, i.fa-file-invoice-dollar::before, i.bi-receipt::before {
    content: "▤"
}

i.fa-receipt::before {
    content: "▥"
}

i.fa-chart-bar::before, i.fa-chart-line::before, i.fa-chart-pie::before {
    content: "▥"
}

i.fa-money-bill-wave::before, i.fa-coins::before {
    content: "₫"
}

i.fa-filter::before, i.fa-sliders-h::before {
    content: "⚲"
}

i.fa-calendar::before, i.fa-calendar-alt::before, i.fa-calendar-day::before {
    content: "◫"
}

i.fa-cog::before, i.fa-cogs::before {
    content: "⚙"
}

i.fa-key::before {
    content: "🔑"
}

i.fa-lock::before {
    content: "🔒"
}

i.fa-unlock-alt::before {
    content: "🔓"
}

i.fa-sign-out-alt::before {
    content: "⇥"
}

i.fa-sync::before, i.fa-sync-alt::before, i.bi-arrow-repeat::before {
    content: "↻"
}

i.fa-redo::before, i.fa-undo::before, i.fa-undo-alt::before {
    content: "↶"
}

i.fa-upload::before {
    content: "↥"
}

i.fa-download::before {
    content: "↧"
}

i.fa-file-excel::before {
    content: "▦"
}

i.fa-file-pdf::before {
    content: "▤"
}

i.fa-envelope::before {
    content: "✉"
}

i.fa-phone::before, i.fa-phone-alt::before {
    content: "☎"
}

i.fa-map-marker-alt::before {
    content: "●"
}

i.fa-truck::before, i.fa-truck-loading::before {
    content: "▰"
}

i.fa-warehouse::before {
    content: "⌂"
}

i.fa-university::before {
    content: "▥"
}

i.fa-building::before {
    content: "▤"
}

i.fa-briefcase::before {
    content: "▣"
}

i.fa-tag::before, i.fa-tags::before {
    content: "◆"
}

i.fa-percent::before {
    content: "%"
}

i.fa-calculator::before {
    content: "⌗"
}

i.fa-bolt::before {
    content: "⚡"
}

i.fa-star::before {
    content: "★"
}

i.fa-trophy::before {
    content: "🏆"
}

i.fa-medal::before {
    content: "🏅"
}

i.fa-award::before {
    content: "✦"
}

i.fa-circle::before {
    content: "●"
}

i.fa-ban::before {
    content: "⊘"
}

i.fa-eraser::before {
    content: "⌫"
}

i.fa-clock::before {
    content: "◷"
}

i.fa-external-link-alt::before {
    content: "↗"
}

i.fa-list::before, i.fa-list-alt::before {
    content: "☷"
}

i.fa-table::before {
    content: "▦"
}

i.fa-store::before {
    content: "⌂"
}

i.fa-tachometer-alt::before {
    content: "▣"
}

i.fa-cash-register::before {
    content: "▥"
}

i.fa-magic::before {
    content: "✧"
}

i.fa-rocket::before {
    content: "➤"
}

i.fa-spinner::before {
    content: "◌"
}

i.fa-plus-circle::before {
    content: "⊕"
}

i.fa-user-plus::before {
    content: "⊕"
}

i.fa-user-edit::before {
    content: "✎"
}

i.fa-user-circle::before {
    content: "●"
}

i.fa-desktop::before {
    content: "▣"
}

i.fa-file-import::before {
    content: "↧"
}

i.fa-sitemap::before {
    content: "⌘"
}

i.fa-plug::before {
    content: "⌁"
}

i.fa-crown::before {
    content: "♛"
}

i.fa-zalo::before {
    content: "Z"
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-xs {
    font-size: .75em
}

.fa-lg {
    font-size: 1.25em
}

.fa-spin {
    animation: ui-spin 1s linear infinite
}

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

@media print {
    body {
        background: #fff
    }

    .no-print {
        display: none !important
    }

    .card {
        box-shadow: none;
        border: 0
    }

    .modal {
        position: static;
        background: #fff
    }
}

/* ========================================================================
   MyBizUI local JavaScript components
   ======================================================================== */
.mydummy {
    display: none
}

body.mybiz-modal-open {
    overflow: hidden
}

.mybiz-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.55);
    z-index: 1040
}

.modal.show {
    z-index: 1050
}

.mybiz-toast-host {
    position: fixed;
    right: 18px;
    top: 18px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: min(420px,calc(100vw - 30px))
}

.mybiz-toast {
    padding: .75rem 1rem;
    border-radius: .65rem;
    background: #111827;
    color: #fff;
    box-shadow: 0 10px 30px rgba(15,23,42,.20);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .18s ease,transform .18s ease
}

    .mybiz-toast.show {
        opacity: 1;
        transform: translateY(0)
    }

.mybiz-toast-success {
    background: #15803d
}

.mybiz-toast-error {
    background: #b91c1c
}

.mybiz-toast-warning {
    background: #b45309
}

.mybiz-toast-info {
    background: #1d4ed8
}

.mybiz-dt-wrap {
    width: 100%;
    position: relative
}

.mybiz-dt-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    margin: 0 0 .7rem
}

.mybiz-dt-search {
    width: min(340px,100%)
}

.mybiz-dt-length {
    width: auto;
    min-width: 90px
}

.mybiz-dt-info {
    font-size: .82rem;
    color: #6b7280;
    margin: .6rem 0
}

.mybiz-dt-pager {
    display: flex;
    gap: .3rem;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: .5rem
}

.mybiz-sortable {
    cursor: pointer;
    user-select: none
}

    .mybiz-sortable:hover {
        background: rgba(37,99,235,.06)
    }

.mybiz-tree-root, .mybiz-tree-root ul {
    list-style: none;
    margin: 0;
    padding-left: 1rem
}

.mybiz-tree-root {
    padding: .5rem
}

.mybiz-tree-children {
    margin-left: .4rem
}

.mybiz-tree-node {
    padding: .05rem 0
}

.mybiz-tree-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    border-radius: .4rem;
    padding: .3rem .45rem;
    cursor: pointer;
    min-height: 34px
}

    .mybiz-tree-row:hover {
        background: #f3f4f6
    }

    .mybiz-tree-row.is-selected {
        background: #dbeafe;
        color: #1d4ed8
    }

.mybiz-tree-toggle {
    border: 0;
    background: transparent;
    width: 22px;
    height: 22px;
    padding: 0;
    cursor: pointer;
    color: #6b7280
}

.mybiz-tree-label {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.mybiz-tree-context {
    position: fixed;
    z-index: 1200;
    min-width: 160px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: .55rem;
    box-shadow: 0 15px 35px rgba(15,23,42,.18);
    padding: .25rem
}

    .mybiz-tree-context button {
        display: block;
        width: 100%;
        border: 0;
        background: #fff;
        text-align: left;
        padding: .45rem .65rem;
        border-radius: .35rem;
        cursor: pointer
    }

        .mybiz-tree-context button:hover {
            background: #f3f4f6
        }

@media(max-width:767.98px) {
    .mybiz-toast-host {
        right: 10px;
        top: 10px
    }

    .mybiz-dt-controls {
        align-items: stretch
    }

    .mybiz-dt-search, .mybiz-dt-length {
        width: 100%
    }

    .mybiz-dt-pager {
        justify-content: center
    }

    .mybiz-tree-label {
        font-size: .92rem
    }
}

.ui-autocomplete {
    position: absolute;
    z-index: 1150;
    max-height: 320px;
    overflow: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: .5rem;
    box-shadow: 0 12px 32px rgba(15,23,42,.15)
}

.ui-menu-item-wrapper {
    padding: .45rem .6rem;
    border-radius: .35rem;
    cursor: pointer
}

    .ui-menu-item-wrapper:hover, .ui-state-active {
        background: #eff6ff;
        color: #1d4ed8
    }

.ui-helper-hidden-accessible {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0
}

/* -------------------------------------------------------------------------
   MyBizMan UI refinement v2
   - Correct Bootstrap-like row gutters (no flex-wrap caused by gap + width)
   - Complete responsive column utilities used by dashboard/forms
   - Functional tab panes
   - Cleaner dropdown alignment and form presentation
   ------------------------------------------------------------------------- */
.row {
    column-gap: 0 !important;
    row-gap: 0 !important
}

.g-1, .g-2, .g-3, .g-4 {
    gap: 0 !important
}

.g-1 {
    --ui-gutter: 0.25rem
}

.g-2 {
    --ui-gutter: 0.5rem
}

.g-3 {
    --ui-gutter: 1rem
}

.g-4 {
    --ui-gutter: 1.5rem
}

.row.g-1 {
    margin-left: calc(var(--ui-gutter)/-2);
    margin-right: calc(var(--ui-gutter)/-2)
}

.row.g-2 {
    margin-left: calc(var(--ui-gutter)/-2);
    margin-right: calc(var(--ui-gutter)/-2)
}

.row.g-3 {
    margin-left: calc(var(--ui-gutter)/-2);
    margin-right: calc(var(--ui-gutter)/-2)
}

.row.g-4 {
    margin-left: calc(var(--ui-gutter)/-2);
    margin-right: calc(var(--ui-gutter)/-2)
}

.row.g-1 > * {
    padding-left: calc(var(--ui-gutter)/2);
    padding-right: calc(var(--ui-gutter)/2)
}

.row.g-2 > * {
    padding-left: calc(var(--ui-gutter)/2);
    padding-right: calc(var(--ui-gutter)/2)
}

.row.g-3 > * {
    padding-left: calc(var(--ui-gutter)/2);
    padding-right: calc(var(--ui-gutter)/2)
}

.row.g-4 > * {
    padding-left: calc(var(--ui-gutter)/2);
    padding-right: calc(var(--ui-gutter)/2)
}

.dropdown-menu-end {
    right: 0;
    left: auto
}

.text-md-start {
    text-align: left !important
}

.text-md-end {
    text-align: right !important
}

.progress {
    display: flex;
    height: 1rem;
    overflow: hidden;
    background: #e2e8f0;
    border-radius: 999px
}

.progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    background: var(--ui-primary);
    transition: width .3s ease
}

.progress-thin {
    height: 6px
}

.dropdown-menu-start {
    left: 0;
    right: auto
}

.nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: .25rem;
    border-bottom: 1px solid var(--ui-border);
    padding-bottom: 0;
    scrollbar-width: thin
}

    .nav-tabs .nav-item {
        margin-bottom: -1px;
        flex: 0 0 auto
    }

    .nav-tabs .nav-link {
        border: 1px solid transparent;
        border-bottom: 0;
        border-radius: .65rem .65rem 0 0;
        color: #64748b;
        background: #f1f5f9;
        padding: .65rem 1rem;
        font-weight: 600;
        white-space: nowrap
    }

        .nav-tabs .nav-link:hover {
            background: #eaf0f8;
            color: #1d4ed8;
            text-decoration: none
        }

        .nav-tabs .nav-link.active {
            color: #1d4ed8;
            background: #fff;
            border-color: var(--ui-border);
            border-bottom-color: #fff;
            box-shadow: 0 -2px 0 #2563eb inset
        }

.tab-content {
    width: 100%
}

    .tab-content > .tab-pane {
        display: none
    }

        .tab-content > .tab-pane.active {
            display: block
        }

.tab-pane.fade {
    opacity: 1
}

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    align-items: center;
    margin: 0;
    padding: .25rem 0;
    list-style: none;
    font-size: .88rem;
    color: #64748b
}

.breadcrumb-item {
    display: flex;
    align-items: center
}

    .breadcrumb-item + .breadcrumb-item::before {
        content: '›';
        padding-right: .35rem;
        color: #94a3b8
    }

    .breadcrumb-item.active {
        color: #475569;
        font-weight: 600
    }

@media (min-width:992px) {
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.333333%
    }

    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.666667%
    }

    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.333333%
    }

    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.666667%
    }

    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.333333%
    }

    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.666667%
    }

    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.333333%
    }

    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.666667%
    }

    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

@media (min-width:1200px) {
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.333333%
    }

    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.666667%
    }

    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }

    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.333333%
    }

    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.666667%
    }

    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }

    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.333333%
    }

    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.666667%
    }

    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }

    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.333333%
    }

    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.666667%
    }

    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }
}

/* Dashboard cards */
.dashboard-page .page-header {
    border-bottom: 0;
    padding-bottom: .25rem;
    margin-bottom: 1rem
}

    .dashboard-page .page-header h1 {
        font-size: 1.8rem;
        letter-spacing: -.01em
    }

.dashboard-stat-grid .stat-card {
    height: 100%;
    margin-bottom: 0;
    padding: 1.25rem 1.3rem;
    border: 1px solid var(--ui-border);
    border-left-width: 4px
}

    .dashboard-stat-grid .stat-card h3 {
        font-size: 1.4rem;
        color: #0f172a;
        margin-top: .2rem
    }

    .dashboard-stat-grid .stat-card .card-icon {
        opacity: .8
    }

.dashboard-card {
    height: 100%;
    overflow: hidden
}

    .dashboard-card .card-header {
        min-height: 52px;
        display: flex;
        align-items: center
    }

.dashboard-chart-wrap {
    position: relative;
    height: 320px;
    width: 100%
}

    .dashboard-chart-wrap canvas {
        width: 100% !important;
        height: 100% !important
    }

.dashboard-page .quick-action {
    min-height: 92px
}

/* Invoice editor */
.invoice-page .page-header {
    background: transparent;
    border-bottom: 0;
    padding-bottom: .25rem;
    margin-bottom: 1rem
}

    .invoice-page .page-header h1 {
        font-size: 1.7rem;
        letter-spacing: -.01em
    }

.invoice-card {
    border: 1px solid #dbe3ee;
    box-shadow: 0 6px 24px rgba(15,23,42,.06);
    overflow: hidden
}

    .invoice-card > .card-header {
        padding: .9rem 1.15rem;
        background: linear-gradient(180deg,#fff,#f8fafc)
    }

    .invoice-card > .card-body {
        padding: 1.15rem
    }

.invoice-section {
    border: 1px solid #e3e8f0;
    border-radius: .75rem;
    padding: 1rem;
    background: #fbfcfe;
    margin-bottom: 1rem
}

.invoice-section-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .85rem;
    font-size: .95rem;
    font-weight: 750;
    color: #334155
}

    .invoice-section-title::before {
        content: '';
        width: 4px;
        height: 18px;
        border-radius: 4px;
        background: #2563eb
    }

.invoice-section .row:last-child {
    margin-bottom: 0 !important
}

.invoice-tools {
    border: 1px solid #e3e8f0;
    border-radius: .75rem;
    padding: .9rem 1rem;
    background: #fff;
    margin-bottom: 1rem
}

    .invoice-tools .form-check {
        padding-top: .45rem
    }

.invoice-product-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1rem 0 .65rem
}

    .invoice-product-header h5 {
        margin: 0;
        font-size: 1rem
    }

.invoice-table-wrap {
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    overflow: auto;
    background: #fff;
    box-shadow: 0 2px 10px rgba(15,23,42,.03)
}

    .invoice-table-wrap #detailsTable {
        margin: 0;
        min-width: 980px
    }

        .invoice-table-wrap #detailsTable thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #f6f8fb;
            border-bottom: 1px solid #d8e0eb;
            font-size: .82rem;
            white-space: nowrap
        }

        .invoice-table-wrap #detailsTable tbody td {
            padding: .45rem .5rem
        }

        .invoice-table-wrap #detailsTable input, .invoice-table-wrap #detailsTable select {
            font-size: .84rem;
            min-height: 36px;
            padding: .35rem .5rem
        }

        .invoice-table-wrap #detailsTable .readonly-amount {
            background: #f1f5f9;
            font-weight: 650
        }

.invoice-summary {
    display: flex;
    justify-content: flex-end;
    margin-top: .85rem
}

.invoice-summary-inner {
    min-width: 320px;
    max-width: 440px;
    border: 1px solid #dfe5ee;
    border-radius: .75rem;
    background: #f8fafc;
    padding: .75rem 1rem
}

    .invoice-summary-inner .summary-row {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: .25rem 0;
        color: #475569
    }

        .invoice-summary-inner .summary-row.total {
            font-size: 1.05rem;
            font-weight: 800;
            color: #0f172a;
            border-top: 1px solid #dbe3ee;
            margin-top: .35rem;
            padding-top: .55rem
        }

.invoice-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e3e8f0
}

    .invoice-actions .primary-actions {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap
    }

@media (max-width:767.98px) {
    .dashboard-page .page-header h1 {
        font-size: 1.35rem
    }

    .dashboard-chart-wrap {
        height: 240px
    }

    .invoice-card > .card-body {
        padding: .75rem
    }

    .invoice-page .page-header h1 {
        font-size: 1.35rem
    }

    .invoice-section {
        padding: .8rem;
        border-radius: .65rem
    }

    .invoice-tools {
        padding: .75rem
    }

    .invoice-product-header {
        align-items: flex-start;
        flex-direction: column
    }

    .invoice-actions {
        align-items: stretch
    }

        .invoice-actions .primary-actions, .invoice-actions > a {
            width: 100%
        }

            .invoice-actions .primary-actions .btn, .invoice-actions > a.btn {
                flex: 1 1 auto
            }

    .invoice-summary {
        justify-content: stretch
    }

    .invoice-summary-inner {
        min-width: 0;
        max-width: none;
        width: 100%
    }
}

/* ========================================================================
   MyBizMan UI refinement v3 - consistent actions / mobile spacing
   ======================================================================== */
.action-toolbar, .report-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    flex-wrap: wrap;
    width: 100%
}

    .action-toolbar-group, .report-filter-actions > div {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-wrap: wrap
    }

    .action-toolbar .btn, .report-filter-actions .btn {
        min-width: 108px
    }

.btn-group {
    display: inline-flex;
    align-items: stretch;
    vertical-align: middle
}

    .btn-group .btn {
        border-radius: 0;
        margin-left: -1px
    }

        .btn-group .btn:first-child {
            margin-left: 0;
            border-radius: .5rem 0 0 .5rem
        }

        .btn-group .btn:last-child {
            border-radius: 0 .5rem .5rem 0
        }

    .table-actions, .btn-group.btn-group-sm {
        display: inline-flex;
        align-items: center;
        gap: .25rem
    }

        .table-actions .btn, .btn-group.btn-group-sm .btn {
            min-width: 36px;
            min-height: 34px;
            padding: .35rem .55rem
        }

.report-stat-card .stat-card {
    height: 100%;
    margin-bottom: 0
}

.dashboard-page .dashboard-stat-grid {
    margin-bottom: .25rem
}

    .dashboard-page .dashboard-stat-grid > [class*="col-"] {
        margin-bottom: 1rem
    }

.dashboard-page .dashboard-card .card-header {
    padding: .8rem 1rem
}

.dashboard-page .dashboard-card .list-group-item {
    padding: .65rem 1rem;
    line-height: 1.45
}

.dashboard-page .dashboard-card .card-body:not(.p-0) {
    padding: 1rem
}

.dashboard-page .quick-action {
    padding: 1rem .75rem;
    min-height: 108px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    background: #fff;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-page .quick-action:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
    border-color: #cbd5e1;
}

.dashboard-page .quick-action > span:last-child {
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
}

.dashboard-page .quick-action-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9;
    color: #334155;
    font-size: 1.25rem;
}

.dashboard-page .quick-action-icon--sales { color: #16a34a; background: #f0fdf4; }
.dashboard-page .quick-action-icon--purchase { color: #2563eb; background: #eff6ff; }
.dashboard-page .quick-action-icon--product { color: #7c3aed; background: #f5f3ff; }
.dashboard-page .quick-action-icon--debt { color: #dc2626; background: #fef2f2; }
.dashboard-page .quick-action-icon--report { color: #0891b2; background: #ecfeff; }
.dashboard-page .quick-action-icon--attendance { color: #d97706; background: #fffbeb; }

.report-filter-card .card-body {
    padding: 1rem
}

.report-filter-card .form-label {
    margin-bottom: .35rem;
    font-weight: 600;
    color: #334155
}

.report-filter-actions {
    padding-top: .25rem
}

@media (max-width:767.98px) {
    .action-toolbar, .report-filter-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
        gap: .5rem
    }

        .action-toolbar-group, .report-filter-actions > div {
            display: grid;
            grid-template-columns: 1fr;
            gap: .5rem
        }

            .action-toolbar-group:last-child, .report-filter-actions > div:last-child {
                grid-column: 1/-1
            }

        .action-toolbar .btn, .report-filter-actions .btn {
            width: 100%;
            min-width: 0;
            min-height: 42px
        }

    .table-actions, .btn-group.btn-group-sm {
        gap: .3rem
    }

        .table-actions .btn, .btn-group.btn-group-sm .btn {
            min-width: 40px;
            min-height: 38px
        }

    .report-stat-card .row > [class*="col-"] {
        margin-bottom: .65rem
    }

        .report-stat-card .row > [class*="col-"]:last-child {
            margin-bottom: 0
        }

    .dashboard-page .dashboard-stat-grid > [class*="col-"] {
        margin-bottom: .75rem
    }

    .dashboard-page .dashboard-card .list-group-item {
        padding: .75rem .9rem
    }

    .page-header {
        padding-left: 0;
        padding-right: 0
    }
}

.action-page-size {
    display: flex;
    align-items: center;
    gap: .45rem
}

    .action-page-size .form-label {
        white-space: nowrap
    }

@media (max-width:767.98px) {
    .action-page-size {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 120px;
        align-items: center
    }

        .action-page-size .form-label {
            margin: 0
        }
}

/* Tree refinement */
.mybiz-tree-root {
    padding: .75rem !important
}

.mybiz-tree-node {
    margin: .12rem 0
}

.mybiz-tree-children {
    padding-left: 1.25rem !important
}

.mybiz-tree-row {
    min-height: 38px;
    padding: .35rem .55rem
}

.mybiz-tree-toggle {
    font-size: 16px;
    font-weight: 700
}

    .mybiz-tree-toggle.is-leaf {
        cursor: default;
        color: #94a3b8
    }

.mybiz-tree-node.is-expanded > .mybiz-tree-row {
    background: #f8fafc
}

.mybiz-tree-label {
    font-size: 14px
}

/* Cash / bank summary */
.quy-summary-grid {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 14px
}

.quy-summary-card {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 4px 16px rgba(15,23,42,.05);
    border-left: 4px solid #2563eb
}

    .quy-summary-card.cash {
        border-left-color: #16a34a
    }

    .quy-summary-card.bank {
        border-left-color: #2563eb
    }

    .quy-summary-card.total {
        border-left-color: #7c3aed
    }

.quy-summary-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: .03em
}

.quy-summary-card strong {
    display: block;
    font-size: 24px;
    color: #172033;
    margin: 7px 0
}

.quy-summary-card small {
    color: #64748b
}

@media(max-width:767.98px) {
    .quy-summary-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .quy-summary-card {
        padding: 15px
    }

        .quy-summary-card strong {
            font-size: 21px
        }
}

.product-copy-link {
    border: 0;
    background: transparent;
    padding: 0;
    text-align: left;
    color: #1d4ed8;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none
}

    .product-copy-link:hover {
        text-decoration: underline;
        color: #1e40af
    }

    .product-copy-link:focus {
        outline: 2px solid #93c5fd;
        outline-offset: 2px;
        border-radius: 3px
    }
/* Shared professional document detail layout */
.document-detail-page {
    max-width: 1500px;
    margin: auto;
    padding-bottom: 28px
}

.document-detail-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start
}

.document-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .12em;
    color: #64748b
}

.document-detail-header h1 {
    margin: .15rem 0 .35rem
}

.document-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end
}

.document-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 14px;
    margin: 18px 0
}

.document-summary {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-left: 4px solid #64748b;
    border-radius: 14px;
    padding: 17px;
    box-shadow: 0 4px 16px rgba(15,23,42,.05)
}

    .document-summary.primary {
        border-left-color: #2563eb
    }

    .document-summary.success {
        border-left-color: #16a34a
    }

    .document-summary.danger {
        border-left-color: #dc2626
    }

    .document-summary.neutral {
        border-left-color: #7c3aed
    }

    .document-summary span {
        display: block;
        color: #64748b;
        font-size: 12px;
        font-weight: 700
    }

    .document-summary strong {
        display: block;
        color: #172033;
        font-size: 24px;
        margin: 7px 0
    }

    .document-summary small {
        color: #64748b
    }

.document-progress {
    height: 6px;
    background: #e8eef5;
    border-radius: 99px;
    overflow: hidden
}

    .document-progress i {
        display: block;
        height: 100%;
        background: #16a34a
    }

.document-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px
}

.document-panel {
    background: #fff;
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(15,23,42,.04);
    overflow: hidden;
    margin-top: 14px
}

    .document-panel > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 18px;
        border-bottom: 1px solid #e7edf5;
        background: #fbfcfe;
        color: #1e293b
    }

        .document-panel > header small {
            display: block;
            color: #64748b;
            font-weight: 400;
            margin-top: 3px
        }

.document-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 4px 14px 12px
}

    .document-fields > div {
        padding: 12px 8px;
        border-bottom: 1px solid #eef2f7;
        min-width: 0
    }

    .document-fields .wide {
        grid-column: span 2
    }

    .document-fields span {
        display: block;
        font-size: 12px;
        color: #64748b;
        margin-bottom: 4px
    }

    .document-fields strong {
        font-size: 14px;
        overflow-wrap: anywhere
    }

.document-count {
    background: #eff6ff;
    color: #2563eb;
    border-radius: 99px;
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 700
}

.document-table-wrap {
    padding: 12px
}

.document-table {
    min-width: 920px;
    margin: 0
}

    .document-table th {
        white-space: nowrap;
        background: #f5f8fc;
        font-size: 12px
    }

    .document-table td {
        font-size: 13px;
        vertical-align: middle
    }

.document-totals {
    display: flex;
    justify-content: flex-end;
    gap: 18px;
    align-items: center;
    padding: 16px;
    border-top: 1px solid #e7edf5
}

    .document-totals > div {
        display: flex;
        gap: 20px;
        padding: 8px 0
    }

    .document-totals .grand {
        background: #eff6ff;
        color: #1e40af;
        border-radius: 12px;
        padding: 13px 18px
    }

        .document-totals .grand strong {
            font-size: 20px
        }

.document-note {
    padding: 18px;
    line-height: 1.65;
    color: #334155
}

.document-empty {
    text-align: center;
    padding: 40px;
    color: #64748b
}

@media(max-width:767.98px) {
    .document-detail-page {
        padding: 0 2px 18px
    }

    .document-detail-header {
        display: block
    }

    .document-actions {
        justify-content: stretch;
        margin-top: 12px
    }

        .document-actions .btn {
            flex: 1 1 calc(50% - 8px);
            min-height: 42px
        }

            .document-actions .btn:last-child {
                flex-basis: 100%
            }

    .document-summary-grid, .document-info-grid {
        grid-template-columns: 1fr;
        gap: 10px
    }

    .document-summary {
        padding: 15px
    }

    .document-fields {
        grid-template-columns: 1fr
    }

        .document-fields .wide {
            grid-column: auto
        }

    .document-totals {
        display: block;
        padding: 14px
    }

        .document-totals > div {
            justify-content: space-between
        }

        .document-totals .grand {
            justify-content: space-between
        }

    .document-table-wrap {
        padding: 10px
    }
}


/* ========================================================================
   MyBizMan document editor consistency - Create / Edit / Return / Import
   ======================================================================== */
.invoice-page-header {
    background: transparent;
    border-bottom: 0;
    padding-bottom: .25rem;
    margin-bottom: 1rem
}

    .invoice-page-header h1 {
        font-size: 1.7rem;
        letter-spacing: -.01em
    }

.invoice-card {
    border: 1px solid #dbe3ee;
    box-shadow: 0 6px 24px rgba(15,23,42,.06);
    overflow: hidden;
    border-radius: .8rem
}

    .invoice-card > .card-header {
        padding: .9rem 1.15rem;
        background: linear-gradient(180deg,#fff,#f8fafc);
        border-bottom: 1px solid #e3e8f0
    }

    .invoice-card > .card-body {
        padding: 1.15rem
    }

    .invoice-card .invoice-section {
        border: 1px solid #e3e8f0;
        border-radius: .75rem;
        padding: 1rem;
        background: #fbfcfe;
        margin-bottom: 1rem
    }

        .invoice-card .invoice-section .row {
            margin-bottom: 0 !important
        }

    .invoice-card .form-label {
        font-weight: 650;
        color: #334155;
        margin-bottom: .38rem;
        line-height: 1.25
    }

    .invoice-card .form-control, .invoice-card .form-select {
        min-height: 38px;
        border-color: #cbd5e1;
        border-radius: .55rem
    }

    .invoice-card .invoice-tools {
        border: 1px solid #e3e8f0;
        border-radius: .75rem;
        padding: .9rem 1rem;
        background: #fff;
        margin-bottom: 1rem
    }

    .invoice-card .invoice-product-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin: 1rem 0 .65rem
    }

        .invoice-card .invoice-product-header h5 {
            margin: 0;
            font-size: 1rem;
            font-weight: 750;
            color: #1e293b
        }

    .invoice-card .invoice-table-wrap {
        border: 1px solid #dfe5ee;
        border-radius: .75rem;
        overflow: auto;
        background: #fff;
        box-shadow: 0 2px 10px rgba(15,23,42,.03)
    }

        .invoice-card .invoice-table-wrap #detailsTable {
            margin: 0;
            min-width: 980px
        }

            .invoice-card .invoice-table-wrap #detailsTable thead th {
                background: #f6f8fb;
                border-bottom: 1px solid #d8e0eb;
                font-size: .82rem;
                white-space: nowrap;
                vertical-align: middle
            }

            .invoice-card .invoice-table-wrap #detailsTable tbody td {
                padding: .45rem .5rem;
                vertical-align: middle
            }

            .invoice-card .invoice-table-wrap #detailsTable input, .invoice-card .invoice-table-wrap #detailsTable select {
                font-size: .84rem;
                min-height: 36px;
                padding: .35rem .5rem
            }

    .invoice-card .invoice-actions {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: .55rem;
        flex-wrap: wrap;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid #e3e8f0
    }

        .invoice-card .invoice-actions .btn {
            min-height: 38px
        }

@media (max-width:767.98px) {
    .invoice-page-header h1 {
        font-size: 1.35rem
    }

    .invoice-card > .card-body {
        padding: .75rem
    }

    .invoice-card .invoice-section {
        padding: .8rem;
        border-radius: .65rem
    }

    .invoice-card .invoice-product-header {
        align-items: flex-start;
        flex-direction: column;
        gap: .25rem
    }

        .invoice-card .invoice-product-header .small {
            display: none
        }

    .invoice-card .invoice-actions {
        align-items: stretch
    }

        .invoice-card .invoice-actions .btn {
            flex: 1 1 100%;
            width: 100%
        }

    .invoice-card .invoice-tools {
        padding: .75rem
    }
}

/* Shared invoice UI contract - Create/Edit/Return/Purchase */
.shared-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px
}

    .shared-invoice-actions .btn {
        min-height: 40px
    }

@media (max-width:767.98px) {
    .shared-invoice-actions {
        display: grid;
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 8px
    }

        .shared-invoice-actions .btn {
            width: 100%
        }

            .shared-invoice-actions .btn:last-child {
                grid-column: 1/-1
            }
}


/* ==========================================================================
   MyBizMan Invoice Editor Foundation
   Shared visual contract for Create / Edit / Return / Purchase documents.
   No business logic or form behavior is defined here.
   ========================================================================== */
.invoice-editor-shell,
.invoice-editor-card {
    width: 100%;
    max-width: 100%
}

.invoice-editor-header {
    padding: 0 0 .85rem;
    margin: 0 0 1rem;
}

    .invoice-editor-header h1 {
        margin: 0 0 .35rem;
        font-weight: 750;
        color: #1e293b;
    }

    .invoice-editor-header .breadcrumb {
        margin: 0;
    }

.invoice-editor-card {
    border: 1px solid #dbe3ee;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 5px 20px rgba(15,23,42,.055);
}

    .invoice-editor-card > .card-header {
        min-height: 56px;
        padding: 12px 18px;
        background: linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
        border-bottom: 1px solid #e3e8f0;
    }

        .invoice-editor-card > .card-header h5 {
            margin: 0;
            font-size: 16px;
            font-weight: 750;
            color: #1e293b;
        }

    .invoice-editor-card > .card-body {
        padding: 18px;
    }

    .invoice-editor-card .invoice-section {
        margin: 0 0 16px;
        padding: 16px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fbfcfe;
    }

        .invoice-editor-card .invoice-section:last-child {
            margin-bottom: 0
        }

        .invoice-editor-card .invoice-section::before {
            min-height: 2.1rem;
            margin: 0 0 12px;
            padding-left: 10px;
            border-left: 4px solid #2563eb;
            color: #334155;
            font-size: 15px;
            font-weight: 750;
            line-height: 1.35;
        }

    .invoice-editor-card .row {
        row-gap: 12px;
    }

    .invoice-editor-card .form-label {
        display: flex;
        align-items: flex-start;
        min-height: 2.5rem;
        margin: 0 0 5px;
        color: #334155;
        font-size: 13px;
        font-weight: 650;
        line-height: 1.25;
    }

    .invoice-editor-card .form-control,
    .invoice-editor-card .form-select {
        width: 100%;
        min-height: 40px;
        border: 1px solid #cbd5e1;
        border-radius: 8px;
        background: #fff;
        color: #1e293b;
        box-shadow: none;
    }

    .invoice-editor-card textarea.form-control {
        min-height: 88px;
        resize: vertical;
    }

    .invoice-editor-card .form-control:focus,
    .invoice-editor-card .form-select:focus {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37,99,235,.10);
    }

    .invoice-editor-card .input-group > .form-control,
    .invoice-editor-card .input-group > .form-select {
        min-height: 40px;
    }

    .invoice-editor-card .invoice-tools {
        margin: 0 0 16px;
        padding: 14px;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
    }

    .invoice-editor-card .invoice-product-header {
        margin: 4px 0 10px;
        min-height: 38px;
    }

        .invoice-editor-card .invoice-product-header h5 {
            margin: 0;
            font-size: 15px;
            font-weight: 750;
            color: #1e293b;
        }

    .invoice-editor-card .invoice-table-wrap {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        border: 1px solid #dbe3ee;
        border-radius: 10px;
        background: #fff;
        -webkit-overflow-scrolling: touch;
    }

        .invoice-editor-card .invoice-table-wrap #detailsTable {
            min-width: 980px;
            margin: 0;
        }

            .invoice-editor-card .invoice-table-wrap #detailsTable th {
                height: 44px;
                padding: 8px 10px;
                background: #f5f8fc;
                color: #334155;
                font-size: 12px;
                font-weight: 750;
                white-space: nowrap;
                vertical-align: middle;
            }

            .invoice-editor-card .invoice-table-wrap #detailsTable td {
                padding: 7px 8px;
                vertical-align: middle;
            }

            .invoice-editor-card .invoice-table-wrap #detailsTable input,
            .invoice-editor-card .invoice-table-wrap #detailsTable select {
                min-height: 38px;
                border-radius: 8px;
            }

    .invoice-editor-card .invoice-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: 1px solid #e2e8f0;
    }

        .invoice-editor-card .invoice-actions .btn {
            min-height: 40px;
            border-radius: 8px;
            font-weight: 650;
        }

    .invoice-editor-card .text-danger {
        display: block;
        margin-top: 4px;
        font-size: 12px;
        line-height: 1.3;
    }

@media (min-width:768px) {
    .invoice-editor-card .invoice-section .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
    }
}

@media (max-width:767.98px) {
    .invoice-editor-header {
        padding-bottom: .65rem;
        margin-bottom: .75rem;
    }

        .invoice-editor-header h1 {
            font-size: 1.35rem
        }

    .invoice-editor-card {
        border-radius: 12px;
        box-shadow: 0 3px 14px rgba(15,23,42,.05);
    }

        .invoice-editor-card > .card-header {
            padding: 11px 14px
        }

        .invoice-editor-card > .card-body {
            padding: 12px
        }

        .invoice-editor-card .invoice-section {
            margin-bottom: 12px;
            padding: 12px;
            border-radius: 10px;
        }

            .invoice-editor-card .invoice-section::before {
                margin-bottom: 10px;
                font-size: 14px;
            }

        .invoice-editor-card .form-label {
            min-height: 2.35rem;
            font-size: 13px;
        }

        .invoice-editor-card .form-control,
        .invoice-editor-card .form-select {
            min-height: 42px;
            font-size: 14px;
        }

        .invoice-editor-card .invoice-tools {
            padding: 10px;
            margin-bottom: 12px
        }

        .invoice-editor-card .invoice-table-wrap {
            border-radius: 9px;
        }

            .invoice-editor-card .invoice-table-wrap #detailsTable {
                min-width: 980px;
            }

        .invoice-editor-card .invoice-actions {
            display: grid;
            grid-template-columns: repeat(2,minmax(0,1fr));
            gap: 8px;
        }

            .invoice-editor-card .invoice-actions .btn {
                width: 100%;
                min-height: 44px;
            }

                .invoice-editor-card .invoice-actions .btn:last-child {
                    grid-column: 1/-1;
                }
}

/* ========================================================================
   FIX: Invoice editor information layout (canonical)
   - Do not render a pseudo title on .invoice-section.
   - The visible title is .invoice-section-title and owns its blue marker.
   - Keep desktop 4-column / mobile 1-column layout.
   ======================================================================== */
.invoice-editor-card .invoice-section::before {
    content: none !important;
    display: none !important;
}

.invoice-editor-card .invoice-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    min-height: 18px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 750;
    color: #334155;
}

    .invoice-editor-card .invoice-section-title::before {
        content: "";
        flex: 0 0 4px;
        width: 4px;
        height: 18px;
        border-radius: 4px;
        background: #2563eb;
    }

.invoice-editor-card .invoice-section .row {
    margin-bottom: 0 !important;
    row-gap: 14px;
}

.invoice-editor-card .form-label {
    display: block;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 6px !important;
    padding: 0 !important;
    font-size: 13px;
    line-height: 1.3;
    font-weight: 650;
    color: #334155;
}

.invoice-editor-card .form-control,
.invoice-editor-card .form-select {
    width: 100%;
    min-height: 40px;
}

.invoice-editor-card textarea.form-control {
    min-height: 88px;
}

@media (min-width:768px) {
    .invoice-editor-card .invoice-section .row > [class*="col-"] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }
}

@media (max-width:767.98px) {
    .invoice-editor-card .invoice-section {
        margin-bottom: 12px;
        padding: 12px;
    }

    .invoice-editor-card .invoice-section-title {
        margin-bottom: 12px;
        font-size: 14px;
    }

    .invoice-editor-card .form-label {
        min-height: 0 !important;
        margin-bottom: 6px !important;
    }
}

/*
 MyBizMan - Final Create/Edit invoice layout correction
 Purpose: fix customer quick-create button, warehouse/apply alignment,
 and the extra vertical gap between invoice sections.
 Load after app-ui.css, or append these rules to app-ui.css.
*/

/* 1) Self-contained grid: app-ui.css did not define col-md-5. */
@media (min-width: 768px) {
    .invoice-editor-card .col-md-5,
    .invoice-tools .col-md-5 {
        flex: 0 0 41.666667% !important;
        width: 41.666667% !important;
        max-width: 41.666667% !important;
    }
}

/* 2) Any invoice input-group must keep its button on the same row. */
.invoice-editor-card .invoice-section .input-group,
.invoice-editor-card .invoice-tools .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
}

    .invoice-editor-card .invoice-section .input-group > .form-control,
    .invoice-editor-card .invoice-section .input-group > .form-select,
    .invoice-editor-card .invoice-tools .input-group > .form-control,
    .invoice-editor-card .invoice-tools .input-group > .form-select {
        flex: 1 1 auto !important;
        width: 1% !important;
        min-width: 0 !important;
    }

/* 3) Quick-create customer button: fixed compact width, never wraps. */
.invoice-editor-card #openCustomerModalBtn {
    flex: 0 0 46px !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    min-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* 4) Warehouse Apply button: compact, stable width. */
.invoice-editor-card #applyWarehouseBtn {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 82px !important;
    min-height: 38px !important;
    padding: .45rem .8rem !important;
    white-space: nowrap !important;
}

/* 5) Remove the extra mb-3 from the last row inside information sections.
      The section itself already owns the vertical spacing. */
.invoice-editor-card .invoice-section .row.mb-3 {
    margin-bottom: 0 !important;
}

/* 6) Keep section -> tools spacing visually identical to section -> section. */
.invoice-editor-card #invoiceInfoFields > .invoice-section:last-child {
    margin-bottom: 10px !important;
}

.invoice-editor-card .invoice-tools {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

@media (max-width: 767.98px) {
    /* Mobile keeps the breakpoint grid at one column; invoice-specific controls retain their compact widths. */
    .invoice-editor-card .col-md-5,
    .invoice-tools .col-md-5 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .invoice-editor-card .invoice-section .input-group,
    .invoice-editor-card .invoice-tools .input-group {
        flex-wrap: nowrap !important;
    }

    .invoice-editor-card #openCustomerModalBtn {
        flex-basis: 44px !important;
        width: 44px !important;
        min-width: 44px !important;
        max-width: 44px !important;
        min-height: 36px !important;
    }

    .invoice-editor-card #applyWarehouseBtn {
        min-width: 76px !important;
        min-height: 36px !important;
        padding: .4rem .65rem !important;
    }

    .invoice-editor-card #invoiceInfoFields > .invoice-section:last-child {
        margin-bottom: 9px !important;
    }

    .invoice-editor-card .invoice-tools {
        margin-bottom: 10px !important;
    }
}