:root {
    --bg: #F7FAFF;
    --surface: #FFFFFF;
    --surface-2: #F0F5FF;
    --text: #0F172A;
    --muted: #6B7280;
    --accent: #2F6BFF;
    --accent-contrast: #FFFFFF;
    --grid-stripe: #F2F6FF;
}

/* theme presets */
body[data-theme="mint"] {
    --bg: #F6FFFB;
    --surface: #FFF;
    --surface-2: #ECFDF5;
    --text: #06221B;
    --muted: #4B5563;
    --accent: #10B981;
    --accent-contrast: #FFF;
    --grid-stripe: #E6FAF2;
}

body[data-theme="sand"] {
    --bg: #FFFBF5;
    --surface: #FFF;
    --surface-2: #FFF3E6;
    --text: #1F2937;
    --muted: #6B7280;
    --accent: #F59E0B;
    --accent-contrast: #1F2937;
    --grid-stripe: #FFF6EA;
}

body[data-theme="indigo"] {
    --bg: #F8FAFC;
    --surface: #FFF;
    --surface-2: #F1F5F9;
    --text: #0B1220;
    --muted: #64748B;
    --accent: #4F46E5;
    --accent-contrast: #FFF;
    --grid-stripe: #EEF2FF;
}

body[data-theme="dark"] {
    --bg: #0B1220;
    --surface: #111827;
    --surface-2: #0F172A;
    --text: #E5E7EB;
    --muted: #94A3B8;
    --accent: #22D3EE;
    --accent-contrast: #0B1220;
    --grid-stripe: #0C1A2B;
}

/* apply across your inventory page */
body {
    background: var(--bg);
    color: var(--text);
}


.inv-toolbar {
    background: var(--surface);
    border-color: var(--surface-2);
}

.inv-stat {
    background: var(--surface-2);
    border-color: var(--surface-2);
    color: var(--text);
}

#hot {
    background: var(--surface);
}

.ht_master .htCore tr:nth-child(even) td {
    background: var(--grid-stripe);
}

.badge-type {
    background: color-mix(in srgb, var(--accent) 10%, #fff);
    border-color: color-mix(in srgb, var(--accent) 30%, #fff);
    color: var(--text);
}

.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-contrast);
}

a {
    color: var(--accent);
}

.text-muted {
    color: var(--muted) !important;
}


body { padding-top: 70px; }
.home-top .panel-body { padding-bottom: 10px; }
.p-0 { padding:0; }
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
  background-color: #337ab7; border-color: #2e6da4; color: #fff;
}
.table-responsive { -webkit-overflow-scrolling: touch; }
.btn-block { margin-top: 22px; }
.table-hover tbody tr.active > td {
    background-color: #d9edf7 !important;
}

#createUnitForm .modal-body {
    overflow-y: auto;
}
.row.gutter-8 {
    margin-left: -8px;
    margin-right: -8px;
}

    .row.gutter-8 > [class^="col-"], .row.gutter-8 > [class*=" col-"] {
        padding-left: 8px;
        padding-right: 8px;
    }
.row.gutter-4 {
    margin-left: -4px;
    margin-right: -4px;
}

    .row.gutter-4 > [class^="col-"], .row.gutter-4 > [class*=" col-"] {
        padding-left: 4px;
        padding-right: 4px;
    }

.table-hover tbody tr.active > td {
    background-color: #d9edf7 !important;
}

@media (max-width: 480px) {
    .btn-block { margin-top: 24px; } }

@media (max-width: 767px) {
    /* Bootstrap form controls */
    .form-control,
    input,
    select,
    textarea {
        font-size: 16px !important; /* key: >=16px */
    }

    /* Keep buttons aligned with inputs inside input-groups */
    .input-group .btn,
    .btn {
        font-size: 14px;
        line-height: 1.3333; /* matches .form-control default line-height */
    }

    /* If your date/number/tel fields still zoom, target them too */
    input[type="date"],
    input[type="datetime-local"],
    input[type="time"],
    input[type="number"],
    input[type="tel"] {
        font-size: 14px !important;
    }
}

.modal-footer .btn + .btn {
    margin-left:0px !important;
}
/* make overlay position correctly */
.modal-content {
    position: relative;
}

/* button spinner */
.btn-busy {
    pointer-events: none;
    opacity: .85;
}

    .btn-busy .spinner {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-right: 6px;
        border: 2px solid rgba(255,255,255,.4);
        border-top-color: #fff;
        border-radius: 50%;
        animation: spin .8s linear infinite;
        vertical-align: -3px;
    }

/* modal overlay while saving */
.modal-busy {
    position: absolute;
    inset: 0;
    display: none;
    background: rgba(255,255,255,.6);
    z-index: 10;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

    .modal-busy .busy-text {
        margin-top: 8px;
        font-weight: 600;
        color: #333;
    }
    .modal-busy .busy-bar-fill {
        height: 100%;
        width: 0%;
        background: #2F6BFF;
        transition: width .08s linear;
    }

    .modal-busy .busy-bar {
        width: 70%;
        height: 6px;
        background: rgba(0,0,0,.12);
        border-radius: 999px;
        margin-top: 10px;
        overflow: hidden;
        display: none;
    }

    .modal-busy .spinner-lg {
        width: 36px;
        height: 36px;
        border: 3px solid rgba(0,0,0,.2);
        border-top-color: #333;
        border-radius: 50%;
        animation: spin .8s linear infinite;
    }

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

/* Layout */
.inv-wrap {
    padding: 8px 10px 0;
}

.inv-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}

    .inv-toolbar .form-control {
        height: 32px;
    }

    .inv-toolbar .btn {
        height: 32px;
        line-height: 1;
        padding: 6px 10px;
    }

.inv-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.inv-stat {
    background: #f7faf7;
    color: #134;
    border: 1px solid #e6f0e6;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
}

/* Grid */
#hot {
    height: calc(100vh - 210px);
    overflow: hidden;
}

.htCenterMiddle {
    text-align: center;
    vertical-align: middle;
}

.hot .currentRow {
    background: #fffef2 !important;
}

.badge-type {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
    line-height: 1.2;
    background: #eef6ff;
    border: 1px solid #cfe6ff;
    color: #124a8a;
    width:100%;
}

/* Link renderer */
.pic-link {
    text-decoration: underline;
}

/* Toasts */
.toast-holder {
    position: fixed;
    right: 10px;
    bottom: 12px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    background: #111;
    color: #fff;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,.15);
    opacity: .95;
}

    .toast.toast-ok {
        background: #0c7a43;
    }

    .toast.toast-warn {
        background: #b55d00;
    }

    .toast.toast-err {
        background: #b3261e;
    }

.page-header {
    text-align: center;
}

/* Mobile tweaks */
@media (max-width: 600px) {
    .inv-toolbar .row > [class*=col-] {
        margin-top: 6px;
    }

    #hot {
        height: calc(100vh - 260px);
    }
}

@media (max-width: 767px) {
    #createOrderModal .form-control,
    #createOrderModal .btn {
        font-size: 16px;
        line-height: 1.4;
    }
}

/* Extra safety for iOS only */
@supports (-webkit-overflow-scrolling: touch) {
    #createOrderModal input,
    #createOrderModal select,
    #createOrderModal textarea {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    #grid {
        height: calc(100vh - 260px);
    }
}


.inv-wrap {
    padding: 8px 10px 0;
}

.inv-toolbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 10px;
    box-shadow: 0 4px 16px rgba(0,0,0,.04);
}

.inv-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.inv-stat {
    background: #f7faf7;
    color: #134;
    border: 1px solid #e6f0e6;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
}

.text-muted {
    color: #6b7280;
}

/* Grid container must have a fixed height for Tabulator virtual DOM */
#grid {
    height: calc(100vh - 210px);
}

    /* --- Handsontable-ish look for Tabulator --- */
    #grid .tabulator {
        font-size: 13px;
        border: 1px solid #e6e6e6; /* outer border */
        border-radius: 6px;
        /*overflow: hidden;*/
    }

    /* Header: light gray, medium weight, bottom border */
    #grid .tabulator-header {
        background: #f5f6fa;
        border-bottom: 1px solid #e6e6e6;
    }

        #grid .tabulator-header .tabulator-col {
            border-right: 1px solid #eaeaea; /* vertical header dividers */
            padding: 6px 8px;
        }

            #grid .tabulator-header .tabulator-col .tabulator-col-title {
                font-weight: 600;
                color: #263238;
            }

    #grid .tabulator .tabulator-header .tabulator-col .tabulator-arrow {
        border-top-color: #9aa4af; /* softer sort arrow */
        opacity: .8;
    }

    /* Row & cell: compact height, full gridlines */
    #grid .tabulator-row {
        min-height: 30px; /* compact rows */
    }

        #grid .tabulator-row .tabulator-cell {
            padding: 6px 8px;
            border-right: 1px solid #f0f0f0;
            border-bottom: 1px solid #f0f0f0;
            vertical-align: middle;
        }

        /* Zebra striping like HT (very subtle) */
        #grid .tabulator-row:nth-child(even) {
            background: #fafbff;
        }

        /* Hover highlight similar to HT */
        #grid .tabulator-row:hover {
            background: #f3f8ff;
        }

    /* Editing state (blue outline reminiscent of HT selection) */
    #grid .tabulator-cell.tabulator-editing {
        box-shadow: inset 0 0 0 2px #4f83ff;
        background: #fff;
    }

    /* Link cells keep underline & readable color */
    #grid .pic-link {
        color: #1f6fff;
        text-decoration: underline;
    }

    #grid .tabulator-cell:focus {
        outline: 2px solid #4f83ff; /* HT-like blue */
        outline-offset: -2px;
    }

/* Unit type badge tweak to match */
.badge-type {
    background: #eef6ff;
    border: 1px solid #dbe9ff;
    color: #164c88;
    padding: 2px 6px;
    border-radius: 999px;
    font-size: 11px;
}

/* Make Tabulator headers wrap (show full titles) */
#grid .tabulator-header .tabulator-col {
    height: auto !important; /* let header grow */
}

    #grid .tabulator-header .tabulator-col .tabulator-col-content {
        height: auto !important;
        padding: 6px 8px; /* keep HT-like tight padding */
        display: flex;
        align-items: center; /* center title vertically */
    }

    #grid .tabulator-header .tabulator-col .tabulator-col-title {
        white-space: normal !important; /* wrap text */
        line-height: 1.2;
        overflow: visible;
        text-overflow: clip;
        word-break: break-word; /* safety for long words */
    }

    #grid .tabulator-header .tabulator-col .tabulator-arrow {
        margin-left: 6px; /* space after title */
        flex: 0 0 auto;
    }


.pic-link {
    text-decoration: underline;
}