/**
 * Admin Typography — Inter (self-host) + type scale.
 * Load 1 lần từ Admin.Master / trang Auth (Login…).
 * Không đụng Website / Widget Chat (SUPPORT/style).
 *
 * Font files: ~/Admin/style/fonts/inter/InterVariable*.woff2
 */
@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable-Italic.woff2") format("woff2");
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --ola-font:
        "Inter",
        "Segoe UI",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        Roboto,
        Arial,
        sans-serif;

    --ola-sw-font: var(--ola-font);
    --font-sans: var(--ola-font);
    --font-inter: var(--ola-font);

    /* Type scale — chuẩn Admin */
    --ola-fs-body: 14px;
    --ola-fs-input: 14px;
    --ola-fs-btn: 14px;
    --ola-fs-menu: 14px;
    --ola-fs-table: 14px;
    --ola-fs-label: 14px;
    --ola-fs-badge: 12px;
    --ola-fs-meta: 12px;
    --ola-fs-card-title: 18px;
    --ola-fs-header: 18px;
    --ola-fs-h6: 15px;
    --ola-fs-h5: 16px;
    --ola-fs-h4: 18px;
    --ola-fs-h3: 20px;
    --ola-fs-h2: 24px;
    --ola-fs-h1: 28px;

    --ola-fs-title: var(--ola-fs-card-title);
    --ola-fs-title-lg: var(--ola-fs-h3);
    --ola-fs-title-xl: var(--ola-fs-h2);

    --ola-fw-normal: 400;
    --ola-fw-medium: 500;
    --ola-fw-semibold: 600;
    --ola-fw-bold: 600; /* tránh 700 trừ khi thật sự cần */

    --ola-lh-body: 1.5;
    --ola-lh-title: 1.3;

    --ola-text: #222222;
    --ola-text-title: #111827;
    --ola-text-muted: #6B7280;
    --ola-text-disabled: #9CA3AF;

    --ola-icon-gap: 7px;

    /* Bootstrap bridge */
    --bs-body-font-family: var(--ola-font);
    --bs-font-sans-serif: var(--ola-font);
    --bs-body-font-size: var(--ola-fs-body);
    --bs-body-line-height: var(--ola-lh-body);
    --bs-body-color: var(--ola-text);
    --bs-heading-color: var(--ola-text-title);

    /* Alias Admin form / DataTable */
    --admin-fs-base: var(--ola-fs-body);
    --admin-fs-th: var(--ola-fs-label);
    --admin-fs-body: var(--ola-fs-body);
    --admin-fs-small: var(--ola-fs-meta);
    --admin-fs-badge: var(--ola-fs-badge);
    --admin-fs-btn: var(--ola-fs-btn);
    --admin-fs-muted: var(--ola-fs-meta);
    --admin-fs-label: var(--ola-fs-label);
    --admin-control-fs: var(--ola-fs-input);
    --admin-control-fw: var(--ola-fw-normal);
    --admin-control-ff: var(--ola-font);
}

/* ========== Base ========== */
html {
    font-family: var(--ola-font);
    font-size: var(--ola-fs-body);
    line-height: var(--ola-lh-body);
    letter-spacing: 0;
    color: var(--ola-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    letter-spacing: 0;
    font-weight: var(--ola-fw-normal);
    color: var(--ola-text);
}

/* inherit — không đè icon fonts */
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
p, span, label, legend, small, strong, em, b,
a, li, td, th, dt, dd,
nav, header, footer, aside, main, section, article,
.btn, .form-control, .form-select, .input-group-text,
.dropdown-menu, .dropdown-item, .modal, .modal-title, .modal-body, .modal-footer,
.pagination, .page-link, .breadcrumb, .breadcrumb-item, .badge, .alert,
.tooltip, .popover, .toast, .accordion, .accordion-button, .nav, .nav-link,
.card, .card-title, .card-body, .card-header, .table, .list-group-item,
.admin-sidebar, .admin-nav, .admin-nav-link, .admin-brand, .admin-text,
.mobile-header, .admin-content, .main-body,
.dataTables_wrapper, .dataTable,
.select2-container, .select2-selection, .select2-results,
.note-editor, .note-editable, .note-toolbar,
.flatpickr-calendar, .flatpickr-input,
.tox, .tox-tinymce, .cke, .ck-editor,
.jstree, .context-menu-list,
.swal2-popup, .ui-widget, .ui-datepicker {
    font-family: inherit;
    letter-spacing: 0;
}

/* Icon fonts — KHÔNG ép Inter (giữ Font Awesome / Bootstrap Icons / Summernote) */

/* ========== Headings ========== */
h1, h2, h3, h4, h5, h6,
.modal-title, .card-title, .ola-title,
.page-header-title, .ola-header-title {
    font-family: inherit;
    font-weight: var(--ola-fw-semibold);
    line-height: var(--ola-lh-title);
    letter-spacing: 0;
    color: var(--ola-text-title);
}

h1 { font-size: var(--ola-fs-h1); }
h2 { font-size: var(--ola-fs-h2); }
h3 { font-size: var(--ola-fs-h3); }
h4, .page-header-title, .ola-header-title { font-size: var(--ola-fs-h4); }
h5 { font-size: var(--ola-fs-h5); }
h6 { font-size: var(--ola-fs-h6); }
.modal-title, .card-title, .ola-title { font-size: var(--ola-fs-card-title); }

/* ========== Form / controls ========== */
button, .btn,
input, .form-control, .form-select,
select, textarea {
    font-family: inherit;
    font-size: var(--ola-fs-input);
    line-height: var(--ola-lh-body);
    letter-spacing: 0;
}

input::placeholder,
textarea::placeholder,
.form-control::placeholder {
    font-family: inherit;
    font-size: var(--ola-fs-input);
    color: var(--ola-text-muted);
    opacity: 1;
}

.btn,
button.btn,
input[type="submit"],
input[type="button"] {
    font-weight: var(--ola-fw-medium);
    font-size: var(--ola-fs-btn);
}

label, .form-label, .col-form-label,
.form-check-label {
    font-size: var(--ola-fs-label);
    font-weight: var(--ola-fw-medium);
    letter-spacing: 0;
    color: var(--ola-text);
}

/* ========== Menu / nav ========== */
.nav-link, .dropdown-item,
.admin-nav-link, .sidebar-menu a,
.admin-brand .admin-text {
    font-size: var(--ola-fs-menu);
    font-weight: var(--ola-fw-medium);
    letter-spacing: 0;
}

.admin-nav .nav-label,
.admin-nav .menu-header {
    font-weight: var(--ola-fw-semibold);
    letter-spacing: 0;
}

/* ========== Table / DataTables ========== */
.table, .table td, .table th,
.list-group-item,
.dataTables_wrapper,
table.dataTable {
    font-size: var(--ola-fs-table);
    font-family: inherit;
}

.table thead th,
.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td {
    font-weight: var(--ola-fw-semibold);
    letter-spacing: 0;
}

.table > :not(caption) > * > * {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
}

/* ========== Bootstrap UI ========== */
.badge {
    font-size: var(--ola-fs-badge);
    font-weight: var(--ola-fw-medium);
    letter-spacing: 0;
}

.alert, .toast, .toast-body {
    font-family: inherit;
    font-size: var(--ola-fs-body);
}

.breadcrumb, .pagination, .page-link,
.accordion-button, .nav-tabs .nav-link {
    font-family: inherit;
    font-size: var(--ola-fs-body);
    font-weight: var(--ola-fw-medium);
}

.tooltip, .popover, .popover-body {
    font-family: var(--ola-font);
    font-size: var(--ola-fs-meta);
}

.modal-footer .btn {
    font-weight: var(--ola-fw-medium);
}

.text-muted, .form-text, small, .small,
.ola-meta, .msg-time, .time, .timestamp {
    font-size: var(--ola-fs-meta);
    color: var(--ola-text-muted);
}

:disabled, .disabled, [disabled] {
    color: var(--ola-text-disabled);
}

/* ========== Select2 ========== */
.select2-container,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered,
.select2-container .select2-results__option,
.select2-dropdown {
    font-family: var(--ola-font) !important;
    letter-spacing: 0;
}

#NAT .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: inherit;
    font-size: var(--ola-fs-input);
    font-weight: var(--ola-fw-medium);
}

#NAT .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--ola-text-muted) !important;
    font-weight: var(--ola-fw-normal) !important;
}

#NAT .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    top: 0;
}

#NAT .select2-results__option {
    font-size: var(--ola-fs-input);
    font-weight: var(--ola-fw-normal);
}

/* ========== Editors / plugins ========== */
.note-editor .note-editable,
.note-editor .note-toolbar,
.note-editor .note-statusbar {
    font-family: var(--ola-font);
}

.note-editable {
    font-size: var(--ola-fs-input);
    line-height: var(--ola-lh-body);
}

.flatpickr-calendar,
.flatpickr-calendar .flatpickr-month,
.flatpickr-calendar .flatpickr-weekday,
.flatpickr-calendar .flatpickr-day {
    font-family: var(--ola-font);
}

.tox .tox-tbtn__select-label,
.tox .tox-collection__item-label,
.ck-editor__editable,
.cke_editable {
    font-family: var(--ola-font) !important;
}

/* ========== Icon + text gap ========== */
.btn > .fa, .btn > .fas, .btn > .far, .btn > .fab,
.btn > [class^="fa-"], .btn > [class*=" fa-"],
.btn > .bi,
.admin-nav-link > .fa, .admin-nav-link > [class^="fa-"],
.dropdown-item > .fa, .nav-link > .fa {
    margin-inline-end: var(--ola-icon-gap);
}

.btn.d-inline-flex,
.btn.d-flex {
    gap: var(--ola-icon-gap);
}

.admin-nav-link i,
.admin-brand .logo-icon {
    margin-inline-end: var(--ola-icon-gap);
}