/* ================================================================
   backendfirst.css — shared UI styles for the backendfirst template
   ================================================================ */

/* ─── Filter Toolbar ─────────────────────────────────────────── */
.filter-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.search-box { position: relative; flex: 1; min-width: 200px; max-width: 320px; }
.search-box .bi-search {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: #9ca3af; font-size: .9rem; pointer-events: none;
}
.search-box input {
    padding-left: 36px;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb;
    font-size: .87rem;
    height: 36px;
}
.search-box input:focus { border-color: #3d7ff5; box-shadow: 0 0 0 3px rgba(61,127,245,.1); }

.btn-filter {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    border-radius: 12px; border: 1px solid #e5e7eb;
    background: #fff; color: #374151;
    font-size: .85rem; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
    white-space: nowrap;
}
.btn-filter:hover { border-color: #3d7ff5; color: #3d7ff5; }
.btn-filter.has-filter { border-color: #3d7ff5; background: #eef3ff; color: #3d7ff5; }

.filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; border-radius: 50%;
    background: #3d7ff5; color: #fff;
    font-size: .68rem; font-weight: 700; line-height: 1;
}

/* ─── Filter Panel ───────────────────────────────────────────── */
.filter-panel {
    display: none; position: absolute; z-index: 1050;
    background: #fff; border-radius: 16px; border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,.14);
    width: 380px; padding: 0; overflow: hidden;
}
.filter-panel.show { display: block; }

@media (max-width: 575.98px) {
    .filter-panel {
        position: fixed !important;
        left: 16px !important;
        right: 16px !important;
        width: auto !important;
        max-width: none !important;
    }
}
.filter-panel-header { padding: 14px 18px 10px; border-bottom: 1px solid #f0f2f5; }
.filter-panel-header h6 { margin: 0; font-size: .88rem; font-weight: 600; color: #1a2332; }
.filter-panel-body { padding: 14px 18px; max-height: 420px; overflow-y: auto; }
.filter-row {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 10px; padding: 8px 12px;
    background: #f8fafc; border-radius: 10px;
}
.filter-row-label {
    font-size: .75rem; color: #9ca3af; font-weight: 600;
    min-width: 90px; text-transform: uppercase; letter-spacing: .04em;
}
.filter-row .form-control,
.filter-row .form-select {
    border-radius: 8px !important; font-size: .83rem;
    border-color: #e5e7eb; height: 32px; padding: 4px 10px; flex: 1;
}
.filter-panel-footer {
    padding: 10px 18px; border-top: 1px solid #f0f2f5;
    display: flex; justify-content: space-between; align-items: center;
}
.filter-panel-footer .form-label { font-size: .78rem; color: #6b7280; margin-bottom: 3px; font-weight: 500; }

/* ─── App DataTable ──────────────────────────────────────────── */
.app-datatable thead th {
    font-size: .78rem; font-weight: 600; color: #313131;
    text-transform: uppercase; letter-spacing: .04em;
    border-bottom: 2px solid #f0f2f5; padding: 10px 14px; white-space: nowrap;
}
.app-datatable tbody td {
    font-size: .87rem; padding: 12px 14px;
    vertical-align: middle; border-color: #f5f6fa; white-space: nowrap;
}
.app-datatable tbody tr:hover > td { background: #f8fafc; }
.app-datatable tbody tr.cancelled > td { color: #ef4444; text-decoration: line-through; opacity: .7; }

/* ─── Badge Status ───────────────────────────────────────────── */
.badge-qt {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 8px; font-size: .75rem; font-weight: 500;
}
.badge-qt-normal   { background: #d1fae5; color: #065f46; }
.badge-qt-cancel   { background: #fee2e2; color: #991b1b; }
.badge-invoice-yes { background: #dbeafe; color: #1e40af; text-decoration: none; }
.badge-invoice-no  { background: #f3f4f6; color: #6b7280; }

/* badge-soft-* — used by ManageParam::convertStatusSpan across all pages */
.badge-soft-success   { background: #d1fae5; color: #065f46; }
.badge-soft-danger    { background: #fee2e2; color: #991b1b; }
.badge-soft-warning   { background: #fef3c7; color: #92400e; }
.badge-soft-primary   { background: #dbeafe; color: #1e40af; }
.badge-soft-info      { background: #e0f2fe; color: #0369a1; }
.badge-soft-secondary { background: #f1f5f9; color: #475569; }

[data-bs-theme="dark"] .badge-soft-success   { background: rgba(16,185,129,.15); color: #6ee7b7; }
[data-bs-theme="dark"] .badge-soft-danger    { background: rgba(239,68,68,.15);  color: #fca5a5; }
[data-bs-theme="dark"] .badge-soft-warning   { background: rgba(245,158,11,.15); color: #fcd34d; }
[data-bs-theme="dark"] .badge-soft-primary   { background: rgba(61,127,245,.15); color: #93c5fd; }
[data-bs-theme="dark"] .badge-soft-info      { background: rgba(14,165,233,.15); color: #7dd3fc; }
[data-bs-theme="dark"] .badge-soft-secondary { background: rgba(100,116,139,.15); color: #cbd5e1; }

/* ─── Table scroll wrapper ───────────────────────────────────── */
.dt-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── Action column ──────────────────────────────────────────── */
.dt-action-col { width: 48px !important; white-space: nowrap; }
.app-datatable tbody .dt-action-col { padding: 8px 10px; }

/* ─── Dropdown item states ───────────────────────────────────── */
.dropdown-item:active, .dropdown-item:focus {
    background-color: #f0f4ff !important;
    color: #374151 !important;
}
.dropdown-item.text-danger:active, .dropdown-item.text-danger:focus {
    background-color: #fee2e2 !important;
    color: #991b1b !important;
}

/* ─── DataTables controls ────────────────────────────────────── */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info { font-size: .82rem; color: #6b7280; margin-top: 0 !important; }
.dataTables_wrapper .dataTables_length select { min-width: 85px; }

/* ─── Pagination ─────────────────────────────────────────────── */
.dataTables_wrapper .dataTables_paginate .pagination {
    display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item { margin: 0 !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.page-item:not(.first):not(.previous):not(.next):not(.last) {
    display: none !important;
}
.dataTables_wrapper .dataTables_paginate .page-link {
    width: 36px; height: 36px; padding: 0 !important;
    border-radius: 10px !important; border: 1px solid #e5e7eb !important;
    background: #fff !important; color: #3d7ff5 !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    font-size: .85rem; transition: background .15s, border-color .15s;
}
.dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: #f0f4ff !important; border-color: #3d7ff5 !important;
}
.dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background: #f8f9fa !important; color: #d1d5db !important; border-color: #f0f2f5 !important;
}

/* ================================================================
   Dark mode overrides
   ================================================================ */

/* Filter toolbar */
[data-bs-theme="dark"] .search-box input { background: #1e2235; border-color: #2a2f4a; color: #e2e8f0; }
[data-bs-theme="dark"] .search-box input::placeholder { color: #64748b; }
[data-bs-theme="dark"] .search-box .bi-search { color: #64748b; }

[data-bs-theme="dark"] .btn-filter { background: #1e2235; border-color: #2a2f4a; color: #94a3b8; }
[data-bs-theme="dark"] .btn-filter:hover { border-color: #3d7ff5; color: #93c5fd; }
[data-bs-theme="dark"] .btn-filter.has-filter { background: rgba(61,127,245,.15); border-color: #3d7ff5; color: #93c5fd; }

/* Filter panel */
[data-bs-theme="dark"] .filter-panel { background: #252839; border: 1px solid #2a2f4a; box-shadow: 0 8px 32px rgba(0,0,0,.45); }
[data-bs-theme="dark"] .filter-panel-header { border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .filter-panel-header h6 { color: #e2e8f0; }
[data-bs-theme="dark"] .filter-panel-footer { border-top-color: #2a2f4a; }
[data-bs-theme="dark"] .filter-row { background: #1e2235; }
[data-bs-theme="dark"] .filter-row-label { color: #64748b; }
[data-bs-theme="dark"] .filter-row .form-control,
[data-bs-theme="dark"] .filter-row .form-select { background: #252839; border-color: #2a2f4a; color: #e2e8f0; }

/* Table */
[data-bs-theme="dark"] .app-datatable thead th { color: #94a3b8; border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .app-datatable tbody td { border-color: #2a2f4a; }
[data-bs-theme="dark"] .app-datatable tbody tr:hover > td { background: #2a2f4a; }
[data-bs-theme="dark"] .app-datatable tbody tr.cancelled > td { color: #f87171; }

/* Badges */
[data-bs-theme="dark"] .badge-invoice-no { background: #1e2235; color: #64748b; }

/* DataTables controls */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_length,
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_info { color: #64748b; }

/* Pagination */
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link {
    background: #252839 !important; border-color: #2a2f4a !important; color: #93c5fd !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-link:hover {
    background: #2a2f4a !important; border-color: #3d7ff5 !important;
}
[data-bs-theme="dark"] .dataTables_wrapper .dataTables_paginate .page-item.disabled .page-link {
    background: #1e2235 !important; color: #2a2f4a !important; border-color: #1e2235 !important;
}

/* Dropdown */
[data-bs-theme="dark"] .dropdown-item:active,
[data-bs-theme="dark"] .dropdown-item:focus { background-color: #2a2f4a !important; color: #e2e8f0 !important; }
[data-bs-theme="dark"] .dropdown-item.text-danger:active,
[data-bs-theme="dark"] .dropdown-item.text-danger:focus { background-color: rgba(239,68,68,.15) !important; color: #f87171 !important; }
[data-bs-theme="dark"] .btn-light { background: #2a2f4a !important; border-color: #2a2f4a !important; color: #94a3b8 !important; }
[data-bs-theme="dark"] .btn-light:hover { background: #313756 !important; }

/* ================================================================
   Page Card — shared layout for create / edit forms
   ================================================================ */

/* ─── Card shell ─────────────────────────────────────────────── */
.page-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
    /* overflow:hidden removed — it clips dropdowns inside the card */
}

/* ─── Card header ────────────────────────────────────────────── */
.page-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 20px 20px 0 0;
    padding: 20px 28px;
    border-bottom: 1px solid #f0f2f5;
}
.page-card-header .page-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a2332;
    margin: 0;
}
.page-card-header .page-card-subtitle {
    font-size: .8rem;
    color: #9ca3af;
    margin-top: 2px;
}

/* ─── Card section ───────────────────────────────────────────── */
.page-card-section {
    padding: 22px 28px;
    border-bottom: 1px solid #f0f2f5;
}
.page-card-section:last-child { border-bottom: none; border-radius: 0 0 20px 20px; }

.page-card-section-label {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 14px;
}

/* ─── Field helpers ──────────────────────────────────────────── */
.field-label {
    font-size: .8rem;
    color: #6b7280;
    margin-bottom: 5px;
    font-weight: 500;
}

.field-group-title {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 8px;
}

.form-control,
.form-select {
    font-size: .9rem;
    color: #4b5563;
}
.form-control::placeholder { color: #c4c9d4; opacity: 1; }

/* ─── Form control focus ─────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
    border-color: #3d7ff5;
    box-shadow: 0 0 0 3px rgba(61,127,245,.15);
    outline: none;
}

/* select using form-control — add dropdown arrow like form-select */
select.form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem;
}

/* ─── Dark mode — form inputs ────────────────────────────────── */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: #1e2235;
    border-color: #2a2f4a;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    background-color: #1e2235;
    border-color: #3d7ff5;
    box-shadow: 0 0 0 3px rgba(61,127,245,.2);
    color: #e2e8f0;
}
[data-bs-theme="dark"] .form-control::placeholder { color: #4b5563; }
[data-bs-theme="dark"] select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
[data-bs-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* ─── Status chip ────────────────────────────────────────────── */
.status-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    background: #eef3ff;
    color: #3d7ff5;
    border-radius: 50px;
    font-size: .82rem;
    font-weight: 500;
}
.status-chip i { font-size: .7rem; }

/* ─── Info blocks ────────────────────────────────────────────── */
.info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.info-block .info-key {
    font-size: .78rem;
    color: #9ca3af;
    margin-bottom: 2px;
}
.info-block .info-val {
    font-size: .92rem;
    font-weight: 500;
    color: #1a2332;
}

/* ─── Inline form table ──────────────────────────────────────── */
.form-table { width: 100%; border-collapse: collapse; }
.form-table th {
    font-size: .78rem;
    font-weight: 600;
    color: #111827;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f2f5;
}
.form-table td { padding: 10px 12px; vertical-align: middle; }
.form-table tbody tr:not(:last-child) td { border-bottom: 1px solid #f8f9fb; }

/* ─── Row action buttons ─────────────────────────────────────── */
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1.5px dashed #3d7ff5;
    background: none;
    color: #3d7ff5;
    border-radius: 12px;
    padding: 7px 18px;
    font-size: .85rem;
    cursor: pointer;
    transition: background .15s;
    font-family: 'Kanit', sans-serif;
}
.btn-add-row:hover { background: #eef3ff; }

.btn-remove-row {
    border: none;
    background: none;
    color: #d1d5db;
    cursor: pointer;
    border-radius: 8px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s;
    font-size: 1rem;
}
.btn-remove-row:hover { background: #fee2e2; color: #ef4444; }

/* ─── Card action buttons ────────────────────────────────────── */
.btn-action-cancel {
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #4b5563;
    border-radius: 50px !important;
    padding: 7px 22px;
    font-size: .88rem;
    transition: background .15s;
    font-family: 'Kanit', sans-serif;
    text-decoration: none;
    display: inline-flex; align-items: center;
}
.btn-action-cancel:hover { background: #f3f4f6; }

.btn-action-save {
    background: linear-gradient(135deg,#3d7ff5,#5994fa);
    border: none;
    color: #fff;
    border-radius: 50px !important;
    padding: 7px 22px;
    font-size: .88rem;
    transition: opacity .15s;
    font-family: 'Kanit', sans-serif;
}
.btn-action-save:hover { opacity: .88; color: #fff; }

/* ─── Dark mode — page card ──────────────────────────────────── */
[data-bs-theme="dark"] .page-card                   { background: #252839; }
[data-bs-theme="dark"] .page-card-header            { border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .page-card-header .page-card-title { color: #e2e8f0; }
[data-bs-theme="dark"] .page-card-section           { border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .bill-box                    { background: #1e2235; border-color: #2a2f4a; }
[data-bs-theme="dark"] .bill-box .bill-box-title    { color: #64748b; }
[data-bs-theme="dark"] .form-table th               { border-bottom-color: #2a2f4a; color: #fff; }
[data-bs-theme="dark"] .form-table tbody tr:not(:last-child) td { border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .info-block .info-val        { color: #e2e8f0; }
[data-bs-theme="dark"] .btn-action-cancel           { border-color: #2a2f4a; background: #1e2235; color: #94a3b8; }
[data-bs-theme="dark"] .btn-action-cancel:hover     { background: #2a2f4a; color: #e2e8f0; }

/* ================================================================
   Select2 — custom UI styling
   ================================================================ */

/* ─── Control (closed state) ─────────────────────────────────── */
.select2-container--default .select2-selection--single {
    height: 38px;
    border: 1px solid #dee2e6;
    border-radius: 12px !important;
    display: flex;
    align-items: center;
    transition: border-color .15s, box-shadow .15s;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 2.25rem 0 .75rem;
    line-height: normal;
    color: #2d3748;
    font-family: 'Kanit', sans-serif;
    font-size: .9rem;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #c4c9d4;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px;
    right: 10px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #6b7280 transparent transparent transparent;
}

/* ─── Control (open / focus state) ──────────────────────────── */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: #3d7ff5 !important;
    box-shadow: 0 0 0 3px rgba(61,127,245,.15) !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #3d7ff5 transparent !important;
    border-width: 0 5px 5px 5px !important;
}

/* ─── Dropdown panel ─────────────────────────────────────────── */
.select2-dropdown {
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.13) !important;
    padding: 6px !important;
    overflow: hidden;
    font-family: 'Kanit', sans-serif;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
    border: 1px solid #e5e7eb;
    border-radius: 10px !important;
    padding: 6px 10px;
    font-family: 'Kanit', sans-serif;
    font-size: .87rem;
    outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: #3d7ff5;
    box-shadow: 0 0 0 2px rgba(61,127,245,.12);
}

/* ─── Options ────────────────────────────────────────────────── */
.select2-container--default .select2-results__option {
    border-radius: 10px !important;
    padding: 8px 12px;
    font-size: .87rem;
    color: #374151;
    transition: background .12s;
    position: relative;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: #f0f4ff !important;
    color: #3d7ff5 !important;
}
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option--selected {
    background: #eef3ff !important;
    color: #3d7ff5 !important;
    font-weight: 500;
}
.select2-container--default .select2-results__option[aria-selected="true"]::after {
    content: '\2713';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: #3d7ff5;
}

/* ─── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .select2-container--default .select2-selection--single {
    background: #1e2235;
    border-color: #2a2f4a;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #e2e8f0;
}
[data-bs-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #94a3b8 transparent transparent transparent;
}
[data-bs-theme="dark"] .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #93c5fd transparent !important;
}
[data-bs-theme="dark"] .select2-dropdown {
    background: #252839 !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.45) !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field {
    background: #1e2235;
    border-color: #2a2f4a;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option {
    background: #252839;
    color: #e2e8f0;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: rgba(61,127,245,.2) !important;
    color: #93c5fd !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"],
[data-bs-theme="dark"] .select2-container--default .select2-results__option--selected {
    background: rgba(61,127,245,.15) !important;
    color: #93c5fd !important;
}
[data-bs-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"]::after {
    color: #93c5fd;
}

/* ================================================================
   Doc Tab — underline tab bar
   ================================================================ */
.doc-tab-nav {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #f0f2f5;
    padding: 0 28px;
    overflow-x: auto;
}
.doc-tab-nav::-webkit-scrollbar { height: 0; }

.doc-tab-btn {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 18px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: #6b7280;
    font-size: .88rem;
    font-family: 'Kanit', sans-serif;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    white-space: nowrap;
    margin-bottom: -1px;
}
.doc-tab-btn:hover  { color: #3d7ff5; }
.doc-tab-btn.active { color: #3d7ff5; border-bottom-color: #3d7ff5; font-weight: 500; }

/* ─── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .doc-tab-nav             { border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .doc-tab-btn             { color: #64748b; }
[data-bs-theme="dark"] .doc-tab-btn:hover       { color: #93c5fd; }
[data-bs-theme="dark"] .doc-tab-btn.active      { color: #93c5fd; border-bottom-color: #3d7ff5; }

/* ─── Tab pane ───────────────────────────────────────────────── */
.doc-tab-pane { overflow-x: auto; }

/* ================================================================
   Icon Buttons — reusable across all pages
   Square icon-only button with hover effects
   Usage: <button class="btn-icon">         → neutral grey
          <button class="btn-icon btn-icon-primary"> → blue
          <button class="btn-icon btn-icon-danger">  → red
          <button class="btn-icon btn-icon-success"> → green
          <button class="btn-icon btn-icon-warning"> → amber
   ================================================================ */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: #f3f4f6;
    color: #6b7280;
    font-size: .9rem;
    cursor: pointer;
    transition: background .15s, color .15s;
    text-decoration: none;
    flex-shrink: 0;
}
.btn-icon:hover                    { background: #e5e7eb; color: #374151; }
.btn-icon.btn-icon-primary         { background: #eef3ff; color: #3d7ff5; }
.btn-icon.btn-icon-primary:hover   { background: #dbeafe; color: #1d4ed8; }
.btn-icon.btn-icon-danger          { background: #fee2e2; color: #ef4444; }
.btn-icon.btn-icon-danger:hover    { background: #fecaca; color: #dc2626; }
.btn-icon.btn-icon-success         { background: #d1fae5; color: #10b981; }
.btn-icon.btn-icon-success:hover   { background: #a7f3d0; color: #059669; }
.btn-icon.btn-icon-warning         { background: #fef3c7; color: #f59e0b; }
.btn-icon.btn-icon-warning:hover   { background: #fde68a; color: #d97706; }

/* Smaller variant */
.btn-icon-sm {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    font-size: .78rem;
}

/* ─── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-icon                          { background: #2a2f4a; color: #94a3b8; }
[data-bs-theme="dark"] .btn-icon:hover                    { background: #313756; color: #e2e8f0; }
[data-bs-theme="dark"] .btn-icon.btn-icon-primary         { background: rgba(61,127,245,.18); color: #93c5fd; }
[data-bs-theme="dark"] .btn-icon.btn-icon-primary:hover   { background: rgba(61,127,245,.28); color: #bfdbfe; }
[data-bs-theme="dark"] .btn-icon.btn-icon-danger          { background: rgba(239,68,68,.18); color: #f87171; }
[data-bs-theme="dark"] .btn-icon.btn-icon-danger:hover    { background: rgba(239,68,68,.28); color: #fca5a5; }
[data-bs-theme="dark"] .btn-icon.btn-icon-success         { background: rgba(16,185,129,.18); color: #6ee7b7; }
[data-bs-theme="dark"] .btn-icon.btn-icon-success:hover   { background: rgba(16,185,129,.28); color: #a7f3d0; }
[data-bs-theme="dark"] .btn-icon.btn-icon-warning         { background: rgba(245,158,11,.18); color: #fcd34d; }
[data-bs-theme="dark"] .btn-icon.btn-icon-warning:hover   { background: rgba(245,158,11,.28); color: #fde68a; }

/* ================================================================
   Doc Card — invoice/receipt-style layout (header + rows + totals)
   Reusable across create/update/detail pages
   ================================================================ */
.doc-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,.08);
}

.doc-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 22px 32px;
    border-bottom: 1px solid #eef0f4;
}
.doc-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1a2332;
    margin: 0;
}
.doc-card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

/* ─── Row (two/three column with right-side alignment helper) ── */
.doc-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 28px;
    padding: 22px 32px;
    border-bottom: 1px solid #eef0f4;
}
.doc-card-row:last-child { border-bottom: none; border-radius: 0 0 20px 20px; }

.doc-card-col {
    flex: 1 1 0;
    min-width: 200px;
}
.doc-card-col-right { text-align: right; }
.doc-card-col-full { flex: 1 1 100%; }

/* ─── Label / value (read-only display) ──────────────────────── */
.doc-label {
    font-size: .88rem;
    font-weight: 600;
    color: #1a2332;
    margin-bottom: 6px;
}
.doc-value {
    font-size: .88rem;
    color: #3d7ff5;
    line-height: 1.65;
    word-break: break-word;
}
.doc-value-dark { color: #1a2332; }
.doc-hint {
    font-size: .75rem;
    color: #9ca3af;
    margin-top: 4px;
}
.doc-hint-danger { color: #ef4444; }

/* ─── Pill buttons (header actions) ──────────────────────────── */
.btn-doc-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #3d7ff5;
    background: #fff;
    color: #3d7ff5;
    border-radius: 50px;
    padding: 7px 22px;
    font-size: .88rem;
    font-family: 'Kanit', sans-serif;
    text-decoration: none;
    transition: background .15s;
}
.btn-doc-outline:hover { background: #eef3ff; color: #3d7ff5; }

.btn-doc-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    background: #3d7ff5;
    color: #fff;
    border-radius: 50px;
    padding: 8px 24px;
    font-size: .88rem;
    font-family: 'Kanit', sans-serif;
    text-decoration: none;
    transition: background .15s, opacity .15s;
}
.btn-doc-primary:hover { background: #5994fa; color: #fff; }

/* ─── Items table ────────────────────────────────────────────── */
.doc-card-table-wrap { padding: 4px 32px 0; }
.doc-card-table {
    width: 100%;
    border-collapse: collapse;
}
.doc-card-table thead th {
    background: transparent;
    font-size: .82rem;
    font-weight: 600;
    color: #1a2332;
    text-align: left;
    padding: 12px 12px;
    border-bottom: 1px solid #eef0f4;
}
.doc-card-table tbody td {
    font-size: .88rem;
    color: #4b5563;
    padding: 14px 12px;
    border-bottom: 1px solid #f5f6fa;
    vertical-align: middle;
}
.doc-card-table tbody tr:last-child td { border-bottom: none; }

/* ─── Totals (right-aligned summary) ─────────────────────────── */
.doc-card-totals {
    padding: 18px 32px 22px;
    text-align: right;
}
.doc-card-totals-line {
    font-size: .92rem;
    color: #1a2332;
    margin-bottom: 6px;
}
.doc-card-totals-grand {
    font-size: 1.05rem;
    font-weight: 600;
    color: #1a2332;
    padding-top: 14px;
    border-top: 1px solid #eef0f4;
    margin-top: 12px;
}

/* ─── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .doc-card                            { background: #252839; }
[data-bs-theme="dark"] .doc-card-header,
[data-bs-theme="dark"] .doc-card-row                        { border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .doc-card-title,
[data-bs-theme="dark"] .doc-label,
[data-bs-theme="dark"] .doc-value-dark                      { color: #e2e8f0; }
[data-bs-theme="dark"] .doc-value                           { color: #93c5fd; }
[data-bs-theme="dark"] .doc-hint                            { color: #64748b; }
[data-bs-theme="dark"] .doc-hint-danger                     { color: #f87171; }
[data-bs-theme="dark"] .btn-doc-outline                     { background: #1e2235; border-color: #3d7ff5; color: #93c5fd; }
[data-bs-theme="dark"] .btn-doc-outline:hover               { background: rgba(61,127,245,.15); color: #93c5fd; }
[data-bs-theme="dark"] .doc-card-table thead th             { color: #e2e8f0; border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .doc-card-table tbody td             { color: #94a3b8; border-bottom-color: #2a2f4a; }
[data-bs-theme="dark"] .doc-card-totals-line,
[data-bs-theme="dark"] .doc-card-totals-grand               { color: #e2e8f0; }
[data-bs-theme="dark"] .doc-card-totals-grand               { border-top-color: #2a2f4a; }

/* ================================================================
   Stat Boxes — summary metric cards (used on detail pages)
   Usage: <div class="stat-box stat-box-primary">
            <div class="stat-box-label">Label</div>
            <div class="stat-box-value">Value</div>
          </div>
   Variants: stat-box-primary | stat-box-success | stat-box-danger | stat-box-warning
   ================================================================ */
.stat-box {
    flex: 1;
    min-width: 160px;
    background: #f8fafc;
    border-radius: 14px;
    padding: 18px 24px;
    text-align: center;
}
.stat-box-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #9ca3af;
    margin-bottom: 8px;
}
.stat-box-value {
    font-size: 1.3rem;
    font-weight: 600;
    color: #1a2332;
    line-height: 1.2;
}
.stat-box-primary                       { background: #eef3ff; }
.stat-box-primary .stat-box-value       { color: #3d7ff5; }
.stat-box-success                       { background: #d1fae5; }
.stat-box-success .stat-box-value       { color: #065f46; }
.stat-box-danger                        { background: #fee2e2; }
.stat-box-danger  .stat-box-value       { color: #991b1b; }
.stat-box-warning                       { background: #fef3c7; }
.stat-box-warning .stat-box-value       { color: #92400e; }

.stat-row { gap: 16px; }

/* ================================================================
   Doc Info Row — 2-group split layout with vertical divider
   Used on document detail pages (invoice, receipt, etc.)
   ================================================================ */
.doc-info-row { align-items: stretch; }

.doc-info-group {
    flex: 1 1 0;
    min-width: 260px;
}

.doc-info-divider {
    width: 1px;
    background: #eef0f4;
    flex-shrink: 0;
    align-self: stretch;
    margin: 0 4px;
}

[data-bs-theme="dark"] .doc-info-divider { background: #2a2f4a; }

/* ─── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .stat-box                          { background: #1e2235; }
[data-bs-theme="dark"] .stat-box-value                    { color: #e2e8f0; }
[data-bs-theme="dark"] .stat-box-primary                  { background: rgba(61,127,245,.12); }
[data-bs-theme="dark"] .stat-box-primary .stat-box-value  { color: #93c5fd; }
[data-bs-theme="dark"] .stat-box-success                  { background: rgba(16,185,129,.12); }
[data-bs-theme="dark"] .stat-box-success .stat-box-value  { color: #6ee7b7; }
[data-bs-theme="dark"] .stat-box-danger                   { background: rgba(239,68,68,.12); }
[data-bs-theme="dark"] .stat-box-danger  .stat-box-value  { color: #f87171; }
[data-bs-theme="dark"] .stat-box-warning                  { background: rgba(245,158,11,.12); }
[data-bs-theme="dark"] .stat-box-warning .stat-box-value  { color: #fcd34d; }

/* ================================================================
   Info Stack — vertical key/value list inside doc-card-col
   Usage: <div class="info-stack">
            <div class="info-stack-item">
              <span class="doc-hint">Label</span>
              <span class="doc-value-dark">Value</span>
            </div>
          </div>
   ================================================================ */
.info-stack { display: flex; flex-direction: column; gap: 10px; }
.info-stack-item { display: flex; flex-direction: column; gap: 2px; }
.info-stack-item .doc-hint  { font-size: .75rem; }
.info-stack-item .doc-value-dark { font-size: .88rem; }

/* ================================================================
   Tab Pane Toolbar — header row inside a tab pane
   ================================================================ */
.tab-pane-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px 12px;
    border-bottom: 1px solid #eef0f4;
}

[data-bs-theme="dark"] .tab-pane-toolbar { border-bottom-color: #2a2f4a; }

/* ================================================================
   Tab Pane Empty State
   ================================================================ */
.tab-pane-empty {
    padding: 40px 32px;
    text-align: center;
    color: #9ca3af;
    font-size: .88rem;
}
.tab-pane-empty-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 10px;
    color: #d1d5db;
}

[data-bs-theme="dark"] .tab-pane-empty       { color: #64748b; }
[data-bs-theme="dark"] .tab-pane-empty-icon  { color: #374151; }

/* ================================================================
   btn-doc-outline color variants
   ================================================================ */
.btn-doc-outline-warning {
    border-color: #f59e0b;
    color: #f59e0b;
}
.btn-doc-outline-warning:hover { background: #fef3c7; color: #f59e0b; }

.btn-doc-outline-info {
    border-color: #06b6d4;
    color: #06b6d4;
}
.btn-doc-outline-info:hover { background: #e0f2fe; color: #06b6d4; }

.btn-doc-outline-danger,
.btn-doc-outline.btn-doc-outline-danger {
    border-color: #ef4444 !important;
    color: #ef4444 !important;
}
.btn-doc-outline-danger:hover,
.btn-doc-outline.btn-doc-outline-danger:hover { background: #fee2e2 !important; color: #ef4444 !important; }

/* ================================================================
   btn-doc-primary color variants
   ================================================================ */
.btn-doc-warning {
    background: #f59e0b;
}
.btn-doc-warning:hover { background: #d97706; color: #fff; }

.btn-doc-info {
    background: #06b6d4;
}
.btn-doc-info:hover { background: #0891b2; color: #fff; }

/* ─── Dark mode ──────────────────────────────────────────────── */
[data-bs-theme="dark"] .btn-doc-outline-warning { background: #1e2235; border-color: #f59e0b; color: #fcd34d; }
[data-bs-theme="dark"] .btn-doc-outline-warning:hover { background: rgba(245,158,11,.15); color: #fcd34d; }
[data-bs-theme="dark"] .btn-doc-outline-info { background: #1e2235; border-color: #06b6d4; color: #67e8f9; }
[data-bs-theme="dark"] .btn-doc-outline-info:hover { background: rgba(6,182,212,.15); color: #67e8f9; }
[data-bs-theme="dark"] .btn-doc-outline-danger,
[data-bs-theme="dark"] .btn-doc-outline.btn-doc-outline-danger { background: #1e2235 !important; border-color: #ef4444 !important; color: #fca5a5 !important; }
[data-bs-theme="dark"] .btn-doc-outline-danger:hover,
[data-bs-theme="dark"] .btn-doc-outline.btn-doc-outline-danger:hover { background: rgba(239,68,68,.15) !important; color: #fca5a5 !important; }