/**
 * RoseBella Typography System — Lusail (official)
 * Font files: public/assets/fonts/lusail/
 * Weights: Regular (400), Medium (500), Bold (700); 600 maps to Medium
 * Fallback stack: Inter, Arial, sans-serif
 */

/* ── @font-face ── */
@font-face {
    font-family: "Lusail";
    src:
        local("Lusail Regular"),
        local("Lusail-Regular"),
        url("../fonts/lusail/Lusail-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lusail";
    src:
        local("Lusail Medium"),
        local("Lusail-Medium"),
        url("../fonts/lusail/Lusail-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lusail";
    src: url("../fonts/lusail/Lusail-Medium.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Lusail";
    src:
        local("Lusail Bold"),
        local("Lusail-Bold"),
        url("../fonts/lusail/Lusail-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ── Design tokens ── */
:root {
    --rb-font-family: "Lusail", "Inter", Arial, sans-serif;

    /* Weights */
    --rb-fw-regular: 400;
    --rb-fw-medium: 500;
    --rb-fw-semibold: 600;
    --rb-fw-bold: 700;

    /* Display — hero only */
    --rb-text-display-size: 2.5rem;
    --rb-text-display-lh: 3rem;
    --rb-text-display-weight: 700;

    /* Page title */
    --rb-text-page-size: 2rem;
    --rb-text-page-lh: 2.5rem;
    --rb-text-page-weight: 700;

    /* Section title */
    --rb-text-section-size: 1.5rem;
    --rb-text-section-lh: 2rem;
    --rb-text-section-weight: 600;

    /* Card title */
    --rb-text-card-size: 1.25rem;
    --rb-text-card-lh: 1.75rem;
    --rb-text-card-weight: 600;

    /* Body large */
    --rb-text-body-lg-size: 1.125rem;
    --rb-text-body-lg-lh: 1.75rem;
    --rb-text-body-lg-weight: 500;

    /* Body */
    --rb-text-body-size: 1rem;
    --rb-text-body-lh: 1.5rem;
    --rb-text-body-weight: 400;

    /* Small */
    --rb-text-sm-size: 0.875rem;
    --rb-text-sm-lh: 1.375rem;
    --rb-text-sm-weight: 400;

    /* Caption */
    --rb-text-caption-size: 0.75rem;
    --rb-text-caption-lh: 1.125rem;
    --rb-text-caption-weight: 400;

    /* KPI numbers */
    --rb-text-kpi-size: 2.25rem;
    --rb-text-kpi-lh: 1.25;
    --rb-text-kpi-weight: 700;

    /* Table */
    --rb-text-table-head-size: 0.875rem;
    --rb-text-table-head-lh: 1.25rem;
    --rb-text-table-head-weight: 600;
    --rb-text-table-cell-size: 0.9375rem;
    --rb-text-table-cell-lh: 1.5rem;
    --rb-text-table-cell-weight: 400;

    /* Buttons */
    --rb-text-btn-size: 1rem;
    --rb-text-btn-lh: 1.5rem;
    --rb-text-btn-weight: 600;

    /* Sidebar */
    --rb-text-sidebar-size: 1.0625rem;
    --rb-text-sidebar-lh: 1.625rem;
    --rb-text-sidebar-weight: 500;
    --rb-text-sidebar-active-weight: 600;

    /* Inputs */
    --rb-text-input-size: 1rem;
    --rb-text-input-lh: 1.5rem;
    --rb-text-input-weight: 400;

    /* Badges */
    --rb-text-badge-size: 0.75rem;
    --rb-text-badge-lh: 1.125rem;
    --rb-text-badge-weight: 600;
    --rb-text-badge-spacing: 0.0125em;

    /* Legacy aliases used by rb-global */
    --rb-font-ui: var(--rb-font-family);
    --rb-font-display: var(--rb-font-family);
    --rb-font-ar: var(--rb-font-family);
}

/* ── Global base ── */
body:not(.pos-page):not(.pos-cashier-mode),
body.rosabella-login-body {
    font-family: var(--rb-font-family) !important;
    font-size: var(--rb-text-body-size) !important;
    line-height: var(--rb-text-body-lh) !important;
    font-weight: var(--rb-text-body-weight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body:not(.pos-page):not(.pos-cashier-mode) h1,
body:not(.pos-page):not(.pos-cashier-mode) .rb-text-display {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-display-size);
    line-height: var(--rb-text-display-lh);
    font-weight: var(--rb-text-display-weight);
    letter-spacing: -0.02em;
}

body:not(.pos-page):not(.pos-cashier-mode) h2,
body:not(.pos-page):not(.pos-cashier-mode) .page-title,
body:not(.pos-page):not(.pos-cashier-mode) .app-page-title .page-title-heading,
body:not(.pos-page):not(.pos-cashier-mode) .header-title {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-page-size);
    line-height: var(--rb-text-page-lh);
    font-weight: var(--rb-text-page-weight);
    letter-spacing: -0.02em;
}

body:not(.pos-page):not(.pos-cashier-mode) h3,
body:not(.pos-page):not(.pos-cashier-mode) .rb-text-section {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-section-size);
    line-height: var(--rb-text-section-lh);
    font-weight: var(--rb-text-section-weight);
    letter-spacing: -0.015em;
}

body:not(.pos-page):not(.pos-cashier-mode) h4,
body:not(.pos-page):not(.pos-cashier-mode) h5,
body:not(.pos-page):not(.pos-cashier-mode) .rb-panel__title,
body:not(.pos-page):not(.pos-cashier-mode) .card-header,
body:not(.pos-page):not(.pos-cashier-mode) .rb-text-card {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-card-size);
    line-height: var(--rb-text-card-lh);
    font-weight: var(--rb-text-card-weight);
    letter-spacing: -0.01em;
}

body:not(.pos-page):not(.pos-cashier-mode) .header-subtitle,
body:not(.pos-page):not(.pos-cashier-mode) .rb-text-body-lg {
    font-size: var(--rb-text-body-lg-size);
    line-height: var(--rb-text-body-lg-lh);
    font-weight: var(--rb-text-body-lg-weight);
}

body:not(.pos-page):not(.pos-cashier-mode) p,
body:not(.pos-page):not(.pos-cashier-mode) li,
body:not(.pos-page):not(.pos-cashier-mode) .form-control,
body:not(.pos-page):not(.pos-cashier-mode) .form-select,
body:not(.pos-page):not(.pos-cashier-mode) .select2-container--default .select2-selection--single .select2-selection__rendered {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-body-size);
    line-height: var(--rb-text-body-lh);
}

body:not(.pos-page):not(.pos-cashier-mode) .form-label,
body:not(.pos-page):not(.pos-cashier-mode) label,
body:not(.pos-page):not(.pos-cashier-mode) .rb-text-sm,
body:not(.pos-page):not(.pos-cashier-mode) small {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-sm-size);
    line-height: var(--rb-text-sm-lh);
    font-weight: var(--rb-text-sm-weight);
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-text-caption,
body:not(.pos-page):not(.pos-cashier-mode) .header-breadcrumb {
    font-size: var(--rb-text-caption-size);
    line-height: var(--rb-text-caption-lh);
    font-weight: var(--rb-text-caption-weight);
}

/* KPI / statistics */
body:not(.pos-page):not(.pos-cashier-mode) .rb-kpi-card__value,
body:not(.pos-page):not(.pos-cashier-mode) .rb-text-kpi {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-kpi-size);
    line-height: var(--rb-text-kpi-lh);
    font-weight: var(--rb-text-kpi-weight);
    letter-spacing: -0.03em;
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-kpi-card__label {
    font-size: var(--rb-text-sm-size);
    line-height: var(--rb-text-sm-lh);
    font-weight: var(--rb-fw-medium);
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-kpi-card__growth {
    font-size: var(--rb-text-sm-size);
    line-height: var(--rb-text-sm-lh);
    font-weight: var(--rb-fw-medium);
}

/* Tables */
body:not(.pos-page):not(.pos-cashier-mode) .table th,
body:not(.pos-page):not(.pos-cashier-mode) .rb-products-table th {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-table-head-size) !important;
    line-height: var(--rb-text-table-head-lh) !important;
    font-weight: var(--rb-text-table-head-weight) !important;
    letter-spacing: 0.04em;
}

body:not(.pos-page):not(.pos-cashier-mode) .table td,
body:not(.pos-page):not(.pos-cashier-mode) .rb-products-table td {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-table-cell-size) !important;
    line-height: var(--rb-text-table-cell-lh) !important;
    font-weight: var(--rb-text-table-cell-weight);
}

/* Buttons */
body:not(.pos-page):not(.pos-cashier-mode) .btn,
body:not(.pos-page):not(.pos-cashier-mode) button,
body:not(.pos-page):not(.pos-cashier-mode) .common-btn {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-btn-size);
    line-height: var(--rb-text-btn-lh);
    font-weight: var(--rb-text-btn-weight);
}

/* Sidebar */
body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .vertical-nav-menu li .menu,
body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .menu-group-items li .menu {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-sidebar-size) !important;
    line-height: var(--rb-text-sidebar-lh) !important;
    font-weight: var(--rb-text-sidebar-weight) !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .vertical-nav-menu li .menu.active,
body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .menu-group-items li .menu.active {
    font-weight: var(--rb-text-sidebar-active-weight) !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .menu-group-toggle {
    font-family: var(--rb-font-family);
    font-size: 0.9375rem !important;
    line-height: 1.375rem !important;
    font-weight: var(--rb-fw-semibold) !important;
    letter-spacing: 0.06em;
}

body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .sidebar-promo-content strong {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-sm-size);
    font-weight: var(--rb-fw-semibold);
}

body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .sidebar-promo-content span {
    font-size: var(--rb-text-caption-size);
    line-height: var(--rb-text-caption-lh);
}

/* Badges & status */
body:not(.pos-page):not(.pos-cashier-mode) .badge,
body:not(.pos-page):not(.pos-cashier-mode) .rb-status-pill,
body:not(.pos-page):not(.pos-cashier-mode) .menu-badge {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-badge-size);
    line-height: var(--rb-text-badge-lh);
    font-weight: var(--rb-text-badge-weight);
    letter-spacing: var(--rb-text-badge-spacing);
}

/* Header compact title (toolbar context) */
body:not(.pos-page):not(.pos-cashier-mode) .app-header .header-text .header-title {
    font-size: var(--rb-text-card-size) !important;
    line-height: var(--rb-text-card-lh) !important;
    font-weight: var(--rb-fw-semibold) !important;
}

body:not(.pos-page):not(.pos-cashier-mode) .app-header .header-text .header-subtitle {
    font-size: var(--rb-text-sm-size) !important;
    line-height: var(--rb-text-sm-lh) !important;
    font-weight: var(--rb-fw-regular) !important;
}

/* Profile & lang */
body:not(.pos-page):not(.pos-cashier-mode) .nav-profile-box .name {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-sm-size);
    font-weight: var(--rb-fw-semibold);
}

body:not(.pos-page):not(.pos-cashier-mode) .nav-profile-box .role {
    font-size: var(--rb-text-caption-size);
    line-height: var(--rb-text-caption-lh);
}

body:not(.pos-page):not(.pos-cashier-mode) .lang-segment-toggle__btn {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-caption-size);
    font-weight: var(--rb-fw-semibold);
}

/* Product names & order details */
body:not(.pos-page):not(.pos-cashier-mode) .rb-product-cell__name,
body:not(.pos-page):not(.pos-cashier-mode) .rb-recent-order__id,
body:not(.pos-page):not(.pos-cashier-mode) .rb-order-show-page .order-code,
body:not(.pos-page):not(.pos-cashier-mode) .rb-grand-total__value {
    font-family: var(--rb-font-family);
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-product-cell__name {
    font-size: var(--rb-text-body-size);
    font-weight: var(--rb-fw-medium);
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-recent-order__meta,
body:not(.pos-page):not(.pos-cashier-mode) .rb-recent-order__time {
    font-size: var(--rb-text-sm-size);
    line-height: var(--rb-text-sm-lh);
}

/* Inputs explicit */
body:not(.pos-page):not(.pos-cashier-mode) .form-control,
body:not(.pos-page):not(.pos-cashier-mode) .form-select,
body:not(.pos-page):not(.pos-cashier-mode) .searchingBox .form-control {
    font-size: var(--rb-text-input-size);
    line-height: var(--rb-text-input-lh);
    font-weight: var(--rb-text-input-weight);
}

/* Third-party overlays */
.swal2-popup,
#toast-container > div,
.select2-results__option {
    font-family: var(--rb-font-family) !important;
}

/* Login page */
body.rosabella-login-body,
body.rosabella-login-body .rosabella-login {
    font-family: var(--rb-font-family);
}

body.rosabella-login-body .login-title,
body.rosabella-login-body h1,
body.rosabella-login-body h2 {
    font-family: var(--rb-font-family);
    font-weight: var(--rb-fw-bold);
}

body.rosabella-login-body .form-control,
body.rosabella-login-body .btn {
    font-family: var(--rb-font-family);
    font-size: var(--rb-text-input-size);
}

body.rosabella-login-body .btn {
    font-weight: var(--rb-text-btn-weight);
}

/* Arabic balance — avoid heavy body text */
[dir="rtl"] body:not(.pos-page):not(.pos-cashier-mode),
[dir="rtl"] body.rosabella-login-body {
    font-weight: var(--rb-fw-regular);
}

[dir="rtl"] body:not(.pos-page):not(.pos-cashier-mode) .table td,
[dir="rtl"] body:not(.pos-page):not(.pos-cashier-mode) p {
    font-weight: var(--rb-fw-regular);
}

[dir="rtl"] body:not(.pos-page):not(.pos-cashier-mode) .btn,
[dir="rtl"] body:not(.pos-page):not(.pos-cashier-mode) .app-sidebar .vertical-nav-menu li .menu {
    font-weight: var(--rb-fw-medium);
}

/* Spacing between headings and content */
body:not(.pos-page):not(.pos-cashier-mode) .page-title,
body:not(.pos-page):not(.pos-cashier-mode) .app-page-title {
    margin-bottom: 1.25rem;
}

body:not(.pos-page):not(.pos-cashier-mode) .rb-panel__header {
    margin-bottom: 1rem;
}

body:not(.pos-page):not(.pos-cashier-mode) .card-header + .card-body {
    padding-top: 0.5rem;
}

@media (max-width: 991px) {
    :root {
        --rb-text-page-size: 1.75rem;
        --rb-text-page-lh: 2.25rem;
        --rb-text-kpi-size: 2rem;
        --rb-text-kpi-lh: 2.5rem;
    }
}

@media (max-width: 767px) {
    :root {
        --rb-text-display-size: 2rem;
        --rb-text-display-lh: 2.5rem;
        --rb-text-page-size: 1.5rem;
        --rb-text-page-lh: 2rem;
        --rb-text-section-size: 1.25rem;
        --rb-text-section-lh: 1.75rem;
    }
}