/* Imperium font picker — independent from colour themes (TKT-2026-0691) */

:root,
html[data-font="nunito"] {
    --imperium-font-family: "Nunito", sans-serif;
}

html[data-font="inter"] {
    --imperium-font-family: "Inter", system-ui, sans-serif;
}

html[data-font="roboto"] {
    --imperium-font-family: "Roboto", system-ui, sans-serif;
}

html[data-font="open-sans"] {
    --imperium-font-family: "Open Sans", system-ui, sans-serif;
}

html[data-font="source-sans-3"] {
    --imperium-font-family: "Source Sans 3", system-ui, sans-serif;
}

html[data-font="plus-jakarta-sans"] {
    --imperium-font-family: "Plus Jakarta Sans", system-ui, sans-serif;
}

html[data-font="poppins"] {
    --imperium-font-family: "Poppins", system-ui, sans-serif;
}

html[data-font="work-sans"] {
    --imperium-font-family: "Work Sans", system-ui, sans-serif;
}

html[data-font="dm-sans"] {
    --imperium-font-family: "DM Sans", system-ui, sans-serif;
}

html[data-font="outfit"] {
    --imperium-font-family: "Outfit", system-ui, sans-serif;
}

html[data-font="atkinson-hyperlegible"] {
    --imperium-font-family: "Atkinson Hyperlegible", system-ui, sans-serif;
}

html[data-font-size="small"] {
    font-size: 93.75%;
}

html[data-font-size="default"],
html:not([data-font-size]) {
    font-size: 100%;
}

html[data-font-size="large"] {
    font-size: 112.5%;
}

body,
body .btn,
body .form-control,
body .form-select,
body .dropdown-menu,
body .table,
body .card,
body .modal,
body .alert,
body .breadcrumb,
body .nav-link,
body .page-link,
body .dataTables_wrapper,
body .dropdown-item,
body .list-group-item,
body .toast {
    font-family: var(--imperium-font-family), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Two-tier font picker panel (TKT-2026-0747) */
:root {
    --imperium-font-picker-ui-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

#fontPickerWrap {
    position: relative;
}

/* Picker chrome stays legible — only #fontPreviewPanel shows the candidate font */
.font-picker-panel,
.font-picker-panel-inner,
.font-picker-panel .font-picker-label,
.font-picker-panel .form-label,
.font-picker-panel .form-select,
.font-picker-panel .form-select option,
#fontPickerWrap > .dropdown-toggle {
    font-family: var(--imperium-font-picker-ui-family) !important;
}

#fontPickerWrap .font-picker-menu.show {
    display: block;
    z-index: 1060;
}

.font-picker-menu {
    min-width: 13rem;
    max-height: min(70vh, 24rem);
    overflow-y: auto;
    padding: 0.35rem;
}

.font-picker-panel {
    min-width: min(20rem, 92vw);
    max-width: 22rem;
    padding: 0.75rem;
}

.font-picker-panel-inner {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.font-picker-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.font-picker-label {
    margin-bottom: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--bs-body-color, #212529);
}

.font-preview-panel {
    margin-top: 0.15rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    background: var(--bs-body-bg, #fff);
    color: var(--bs-body-color, #212529);
}

.font-preview-heading {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.35rem;
}

.font-preview-pangram {
    margin: 0 0 0.45rem;
    font-size: 0.9rem;
    line-height: 1.35;
}

.font-preview-alphabet {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    word-break: break-all;
}

.font-preview-upper {
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .font-picker-panel {
        min-width: min(18rem, 94vw);
    }

    .font-preview-heading {
        font-size: 1rem;
    }
}

#fontSizePickerWrap {
    position: relative;
}

#fontSizePickerWrap .font-size-picker-menu.show {
    display: block;
    z-index: 1060;
}

.font-size-picker-menu {
    min-width: 11rem;
    padding: 0.35rem;
}

.font-size-picker-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border-radius: 0.375rem;
    padding: 0.45rem 0.65rem;
}

.font-size-picker-sample {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 0.35rem;
    border: 1px solid var(--bs-border-color, #ccc);
    background: var(--bs-body-bg, #fff);
    flex-shrink: 0;
    font-weight: 600;
    line-height: 1;
    color: var(--bs-body-color, #212529);
}

.font-size-picker-sample-small { font-size: 0.62rem; }
.font-size-picker-sample-default { font-size: 0.72rem; }
.font-size-picker-sample-large { font-size: 0.84rem; }

.font-size-picker-item.active {
    font-weight: 600;
    background-color: var(--bs-secondary-bg, rgba(0, 0, 0, 0.05));
}

.font-size-picker-item.active .bi-check-lg {
    opacity: 1;
}

.font-size-picker-item .bi-check-lg {
    margin-left: auto;
    opacity: 0;
    color: var(--bs-primary, #41b782);
}

.header-appearance-controls {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* Slice 2 — logistics / stores / returns module shells (TKT-2026-0691) */
.main-container,
.main-container .form-control,
.main-container .form-select,
.main-container .btn,
.main-container .table,
.main-container .dropdown-menu,
.main-container .modal,
.main-container .planner-topbar,
.main-container .planner-control,
.main-container .planner-select-summary,
.main-container .dataTables_wrapper,
.roster-scope,
.roster-scope .form-control,
.roster-scope .form-select,
.roster-scope .btn,
.roster-scope .table,
.roster-scope .nav-link,
.roster-scope .dataTables_wrapper,
.roster-scope .modal,
.vehicle-capacity-scope,
.vehicle-capacity-scope .form-control,
.vehicle-capacity-scope .btn,
.show-routes-address-page,
.show-routes-address-page .form-control,
.show-routes-address-page .btn,
.faulties-options-scope,
.faulties-options-scope .btn,
.faulties-options-scope .card,
#root,
#delivery-dashboard-heatmaps,
.delivery-dashboard-shell {
    font-family: var(--imperium-font-family), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.analytics-dashboard-shell,
.track-order-page,
.logistics-report-scope,
.epos-faq-shell,
.logout-shell {
    font-family: var(--imperium-font-family), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.login-shell .form-control,
.login-shell .btn,
.login-shell label,
.login-shell p,
.login-shell h1:not(.imperium-logo-wordmark),
.login-shell h2,
.login-shell .card,
.verify-2fa-shell .form-control,
.verify-2fa-shell .btn,
.verify-2fa-shell label,
.verify-2fa-shell p,
.verify-2fa-shell h2,
.sl-table-section .tooltip {
    font-family: var(--imperium-font-family), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* Slice 3 — cards, slide panels, planner batch/manifest, menu tiles (TKT-2026-0691) */
body .card-header,
body .card-body,
body .card-title,
body .card-text,
body .card-footer,
.batch-route-panel,
.batch-route-panel *,
.batch-panel,
.batch-panel *,
#planner-manifest-panel,
#planner-manifest-panel *,
#routes-table-container,
#routes-table-container *,
.invoice-panel,
.invoice-panel *,
#slideDivView,
#slideDivEdit,
#slideDivMaster,
#buildpfView,
#buildpfEdit,
#buildpfMaster,
.invoice-panel-inner,
.manifest-container,
.manifest-container *,
.change-delivery-panel,
.admin-history-notes-panel,
.master-panel-header,
.master-panel-body,
.master-notes-box,
.warehouse-menu-classic,
.warehouse-menu-mount,
.warehouse-tile-card,
.warehouse-hub-card,
.logistics-menu-classic,
.logistics-tile-card,
.option-btn,
.dd-variant-panel,
.dd-variant-panel * {
    font-family: var(--imperium-font-family), system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}