:root {
    /* Luxury minimal identity: single deep green accent */
    --brand-primary: #0f766e; /* teal-700 */
    --brand-primary-rgb: 15, 118, 110;
    --brand-primary-ink: #064e3b; /* deep ink for contrast */
    /* Slightly adjusted shades for interaction states */
    --brand-primary-hover: #0e6b63; /* ~8% darker */
    --brand-primary-active: #0c5a53; /* ~18% darker */
    /* Unify secondary to primary for single-tone design */
    --brand-secondary: var(--brand-primary);
    --brand-secondary-rgb: var(--brand-primary-rgb);
    --brand-secondary-ink: var(--brand-primary-ink);
    --brand-muted: #6b7280; /* neutral slate */
    --brand-bg: #ffffff;
    --brand-ink: #0b1320; /* slightly deeper ink */
    --brand-border: #e5e7eb; /* light neutral border */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 2px 10px rgba(2, 8, 23, 0.06);
    --shadow-md: 0 8px 22px rgba(2, 8, 23, 0.12);
    --brand-font: "Cairo", "Madani", system-ui, -apple-system, Segoe UI, Roboto,
        "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
        "Segoe UI Emoji";
    --line-height-base: 1.75;
    --line-height-heading: 1.4;
    /* Button sizing */
    --btn-h-sm: 36px;
    --btn-h-md: 44px;
    --btn-h-lg: 52px;
}

/* Bootstrap variable bridges */
:root {
    --bs-primary: var(--brand-primary);
    --bs-primary-rgb: var(--brand-primary-rgb);
    --bs-secondary: var(--brand-primary);
    --bs-secondary-rgb: var(--brand-primary-rgb);
}

/* ---------------------------------------------
   Cairo Font (Local) - Arabic optimized
   NOTE: Provide local font files to avoid external Google Fonts requests.
   Place the following files (example naming) in: /public/assets/fonts/
   Recommended weights actually used in the UI: 300,400,500,600,700
   (Remove any weights you don't need to reduce payload.)
   File naming convention assumed:
     Cairo-300.woff2, Cairo-300.woff
     Cairo-400.woff2, Cairo-400.woff
     Cairo-500.woff2, Cairo-500.woff
     Cairo-600.woff2, Cairo-600.woff
     Cairo-700.woff2, Cairo-700.woff
   If you have a variable font file (e.g., Cairo-Variable.woff2) you can
   replace these multiple declarations with a single one using font-weight: 300 700.
---------------------------------------------- */
@font-face {
    font-family: "Cairo";
    src: url("/assets/fonts/Cairo-300.woff2") format("woff2"),
        url("/assets/fonts/Cairo-300.woff") format("woff");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("/assets/fonts/Cairo-400.woff2") format("woff2"),
        url("/assets/fonts/Cairo-400.woff") format("woff");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("/assets/fonts/Cairo-500.woff2") format("woff2"),
        url("/assets/fonts/Cairo-500.woff") format("woff");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("/assets/fonts/Cairo-600.woff2") format("woff2"),
        url("/assets/fonts/Cairo-600.woff") format("woff");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Cairo";
    src: url("/assets/fonts/Cairo-700.woff2") format("woff2"),
        url("/assets/fonts/Cairo-700.woff") format("woff");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Madani Font */
@font-face {
    font-family: "Madani";
    src: url("/assets/fonts/Madani.woff") format("woff");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

body {
    background: var(--brand-bg);
    color: var(--brand-ink);
    font-family: var(--brand-font);
    line-height: var(--line-height-base);
    font-weight: 400;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--brand-font);
    line-height: var(--line-height-heading);
    font-weight: 600;
}

/* Avoid heavy bold - use semibold instead */
strong,
b {
    font-weight: 600;
}

/* Arabic numerals support */
html[lang="ar"] {
    font-feature-settings: normal;
}

/* Eastern Arabic numerals - optional styling */
.arabic-numerals {
    font-variant-numeric: proportional-nums;
}

/* Unified button sizing */
.btn {
    font-weight: 700;
    border-radius: var(--radius-md);
    min-height: var(--btn-h-md);
    padding: 0.55rem 1rem;
}
.btn-sm {
    min-height: var(--btn-h-sm);
    padding: 0.4rem 0.8rem;
    font-size: 0.875rem;
}
.btn-lg {
    min-height: var(--btn-h-lg);
    padding: 0.8rem 1.25rem;
    font-size: 1.05rem;
}

/* Primary/Secondary variants */
.btn-primary,
.btn-brand {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-brand:hover {
    filter: brightness(0.95);
}
/* Secondary maps to primary for single-tone */
.btn-secondary {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-secondary:hover {
    filter: brightness(0.95);
}

/* Outline & soft */
.btn-outline-primary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-primary:hover {
    color: #fff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-secondary {
    color: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-outline-secondary:hover {
    color: #fff;
    background: var(--brand-primary);
    border-color: var(--brand-primary);
}
.btn-primary-soft {
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary-ink);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
}
.btn-primary-soft:hover {
    background: rgba(var(--brand-primary-rgb), 0.16);
}
.btn-secondary-soft {
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary-ink);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.35);
}
.btn-secondary-soft:hover {
    background: rgba(var(--brand-primary-rgb), 0.16);
}

/* --- Button focus / active / state corrections --- */
/* Remove default Bootstrap focus ring and apply custom shadow */
.btn:focus,
.btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--brand-primary-rgb), 0.35) !important;
}

/* Primary & brand active states */
.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-brand:active,
.btn-brand.active,
.show > .btn-brand.dropdown-toggle,
.btn-secondary:active,
.btn-secondary.active,
.show > .btn-secondary.dropdown-toggle {
    background: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
    color: #fff !important;
    box-shadow: 0 0 0 0.18rem rgba(var(--brand-primary-rgb), 0.28) !important;
}

/* Outline variants active */
.btn-outline-primary:active,
.btn-outline-primary.active,
.show > .btn-outline-primary.dropdown-toggle,
.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show > .btn-outline-secondary.dropdown-toggle {
    background: var(--brand-primary-active) !important;
    border-color: var(--brand-primary-active) !important;
    color: #fff !important;
}

/* Soft variants active (slightly stronger tint) */
.btn-primary-soft:active,
.btn-primary-soft.active,
.show > .btn-primary-soft.dropdown-toggle,
.btn-secondary-soft:active,
.btn-secondary-soft.active,
.show > .btn-secondary-soft.dropdown-toggle {
    background: rgba(var(--brand-primary-rgb), 0.22) !important;
    color: var(--brand-primary-ink) !important;
}

/* Disabled state clarity */
.btn.disabled,
.btn:disabled {
    opacity: 0.55;
    box-shadow: none !important;
    cursor: not-allowed;
}

/* Ensure no unwanted translate effects from browsers */
.btn:active {
    transform: translateY(0) !important;
}

.badge-brand {
    background: rgba(var(--brand-primary-rgb), 0.12);
    color: var(--brand-primary-ink);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.3);
    border-radius: var(--radius-sm);
}

/* Status color modifiers (keep same badge style, change palette) */
.badge-brand[class*="badge-brand--"] {
    border-width: 1px;
    border-style: solid;
    border-radius: var(--radius-sm);
}

/* pending: amber */
.badge-brand--pending {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.35);
    color: #92400e;
}
/* approved: brand/teal */
.badge-brand--approved {
    background: rgba(var(--brand-primary-rgb), 0.12);
    border-color: rgba(var(--brand-primary-rgb), 0.35);
    color: var(--brand-primary-ink);
}
/* contract signed: indigo */
.badge-brand--contract_signed {
    background: rgba(67, 56, 202, 0.12);
    border-color: rgba(67, 56, 202, 0.35);
    color: #312e81;
}
/* sent to embassy: blue */
.badge-brand--sent_to_embassy {
    background: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.35);
    color: #1e3a8a;
}
/* visa issued: green */
.badge-brand--visa_issued {
    background: rgba(22, 163, 74, 0.12);
    border-color: rgba(22, 163, 74, 0.35);
    color: #065f46;
}
/* ticket booked: cyan */
.badge-brand--ticket_booked {
    background: rgba(6, 182, 212, 0.12);
    border-color: rgba(6, 182, 212, 0.35);
    color: #155e75;
}
/* arrived: emerald */
.badge-brand--arrived {
    background: rgba(5, 150, 105, 0.12);
    border-color: rgba(5, 150, 105, 0.35);
    color: #064e3b;
}
/* canceled: red */
.badge-brand--canceled {
    background: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.35);
    color: #7f1d1d;
}

.tag {
    background: rgba(var(--brand-primary-rgb), 0.08);
    color: var(--brand-primary-ink);
    border: 1px solid rgba(var(--brand-primary-rgb), 0.25);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 12px;
}

.link-muted {
    color: var(--brand-muted);
}
.link-muted:hover {
    color: var(--brand-primary);
}

.card {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

/* ---------------------------------------------
     NOTE: Ensure Cairo font files exist under /public/assets/fonts/
     If they are missing, download Cairo from Google Fonts, convert (if needed)
     to .woff2 / .woff and name as:
         Cairo-300.woff2 / .woff
         Cairo-400.woff2 / .woff
         Cairo-500.woff2 / .woff
         Cairo-600.woff2 / .woff
         Cairo-700.woff2 / .woff
     Remove any unused weights to save bandwidth. After adding files, clear
     caches (Laravel + browser) to ensure local fonts are served.
---------------------------------------------- */