/* ==========================================================================
   Oman Real Estate — Design System
   ==========================================================================

   The single source of truth for the platform's visual identity. Nothing
   anywhere else in the project may hard-code a colour, radius or shadow:
   it comes from a token here, or it is a bug.

   There is no build step. Bootstrap is loaded from its distributed CSS,
   and this file re-themes it by overriding Bootstrap's own `--bs-*`
   custom properties. That is what stops the platform from looking like a
   stock Bootstrap template without recompiling the framework.

   Load order: bootstrap(.rtl).min.css -> bootstrap-icons -> fonts -> this.
   ========================================================================== */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* ---- Palette -------------------------------------------------------
       Deep navy reads as authoritative and trustworthy at large sizes.
       Champagne gold is the accent, used sparingly: on a page where
       everything is gold, nothing is premium. */

    --navy-950: #060d1a;
    --navy-900: #0a1628;
    --navy-800: #10233e;
    --navy-700: #17325a;
    --navy-600: #1f4275;
    --navy-500: #2a5490;
    --navy-400: #4d77b5;
    --navy-300: #85a3cf;
    --navy-200: #bfd0e6;
    --navy-100: #e3ebf5;
    --navy-050: #f2f6fb;

    --gold-800: #8f6a1e;
    --gold-700: #b3862a;
    --gold-600: #c9a038;
    --gold-500: #d4b25c;
    --gold-400: #e0c684;
    --gold-100: #faf5e8;

    --emerald-700: #14684f;
    --emerald-600: #1a8264;
    --emerald-100: #e2f3ed;

    --rust-600: #b03c2b;
    --rust-100: #fbeae7;

    --amber-600: #bd8114;
    --amber-100: #fdf3e0;

    /* Warm neutrals. A hint of warmth keeps property photography looking
       natural; a cold grey makes interiors look clinical. */
    --stone-950: #16151a;
    --stone-900: #24232b;
    --stone-700: #4f4d57;
    --stone-600: #6b6874;
    --stone-500: #8b8894;
    --stone-300: #cdcbd3;
    --stone-200: #e4e2e8;
    --stone-100: #f1f0f3;
    --stone-050: #f8f7f9;

    /* ---- Semantic roles ------------------------------------------------
       Components reference these, never the palette above, so a rebrand
       means editing this block alone. */

    --brand: var(--navy-900);
    --brand-soft: var(--navy-050);
    --accent: var(--gold-600);
    --accent-soft: var(--gold-100);

    --state-success: var(--emerald-600);
    --state-warning: var(--amber-600);
    --state-danger: var(--rust-600);
    --state-info: var(--navy-500);

    --text-strong: var(--stone-950);
    --text-body: var(--stone-700);
    --text-muted: var(--stone-500);
    --text-inverse: #fff;

    --surface: #fff;
    --surface-sunken: var(--stone-050);
    --border-subtle: var(--stone-200);
    --border-strong: var(--stone-300);

    /* ---- Typography ----
       One family throughout. Display type is separated by weight rather
       than by a second typeface, so the identity stays consistent across
       languages and the page downloads one family instead of two. */
    --font-sans: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display: var(--font-sans);

    /* ---- Shape and depth ----
       Shadows are tinted with the brand hue rather than pure black. That
       tint is a large part of why a card stops looking like a default
       framework component. */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 24px;

    --shadow-sm: 0 2px 8px rgba(6, 13, 26, .06);
    --shadow-md: 0 6px 20px rgba(6, 13, 26, .08);
    --shadow-lg: 0 16px 40px rgba(6, 13, 26, .12);
    --shadow-xl: 0 28px 64px rgba(6, 13, 26, .16);

    --transition-fast: 140ms cubic-bezier(.4, 0, .2, 1);
    --transition-base: 240ms cubic-bezier(.4, 0, .2, 1);

    --header-height: 76px;
}

/* ==========================================================================
   2. Bootstrap re-theme

   Bootstrap 5.3 exposes its theme through custom properties, so the whole
   framework can be re-skinned here without recompiling any Sass.
   ========================================================================== */

:root {
    --bs-primary: var(--brand);
    --bs-primary-rgb: 10, 22, 40;
    --bs-secondary: var(--accent);
    --bs-secondary-rgb: 201, 160, 56;
    --bs-success: var(--state-success);
    --bs-success-rgb: 26, 130, 100;
    --bs-info: var(--state-info);
    --bs-info-rgb: 42, 84, 144;
    --bs-warning: var(--state-warning);
    --bs-warning-rgb: 189, 129, 20;
    --bs-danger: var(--state-danger);
    --bs-danger-rgb: 176, 60, 43;
    --bs-light: var(--surface-sunken);
    --bs-dark: var(--stone-950);

    --bs-body-font-family: var(--font-sans);
    --bs-body-color: var(--text-body);
    --bs-body-bg: var(--surface);
    --bs-secondary-color: var(--text-muted);
    --bs-emphasis-color: var(--text-strong);
    --bs-heading-color: var(--text-strong);

    --bs-border-color: var(--border-subtle);
    --bs-border-radius: var(--radius-md);
    --bs-border-radius-sm: var(--radius-sm);
    --bs-border-radius-lg: var(--radius-lg);
    --bs-border-radius-xl: var(--radius-xl);

    --bs-link-color: var(--brand);
    --bs-link-color-rgb: 10, 22, 40;
    --bs-link-hover-color: var(--navy-600);
    --bs-link-decoration: none;

    --bs-box-shadow-sm: var(--shadow-sm);
    --bs-box-shadow: var(--shadow-md);
    --bs-box-shadow-lg: var(--shadow-lg);
}

/* Bootstrap's contextual button and badge classes read their own
   variables, which the block above has already redefined. These fill the
   gaps the framework leaves for the primary and secondary pair. */
.btn-primary {
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--navy-700);
    --bs-btn-hover-border-color: var(--navy-700);
    --bs-btn-active-bg: var(--navy-800);
    --bs-btn-active-border-color: var(--navy-800);
    --bs-btn-disabled-bg: var(--navy-300);
    --bs-btn-disabled-border-color: var(--navy-300);
}

.btn-secondary {
    --bs-btn-color: #1a1205;
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--accent);
    --bs-btn-hover-color: #1a1205;
    --bs-btn-hover-bg: var(--gold-500);
    --bs-btn-hover-border-color: var(--gold-500);
    --bs-btn-active-bg: var(--gold-700);
    --bs-btn-active-border-color: var(--gold-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-bg: var(--brand);
    --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-bg: var(--navy-800);
}

.text-bg-primary {
    color: #fff !important;
    background-color: var(--brand) !important;
}

.text-bg-secondary {
    color: #1a1205 !important;
    background-color: var(--accent) !important;
}

.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-padding-y: .625rem;
    --bs-btn-padding-x: 1.5rem;
    --bs-btn-border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.card {
    --bs-card-border-color: var(--border-subtle);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-spacer-y: 1.5rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-cap-bg: transparent;
}

.form-control,
.form-select {
    --bs-border-radius: var(--radius-sm);
    padding: .625rem 1rem;
    border-color: var(--border-strong);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--navy-400);
    box-shadow: 0 0 0 3px rgba(10, 22, 40, .12);
}

.form-label {
    font-weight: 500;
    color: var(--text-strong);
    margin-bottom: .5rem;
}

.modal-content {
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}

.dropdown-menu {
    --bs-dropdown-border-color: var(--border-subtle);
    --bs-dropdown-border-radius: var(--radius-md);
    --bs-dropdown-link-hover-bg: var(--brand-soft);
    --bs-dropdown-link-active-bg: var(--brand-soft);
    --bs-dropdown-link-active-color: var(--brand);
    box-shadow: var(--shadow-md);
}

.badge {
    --bs-badge-font-weight: 500;
    --bs-badge-border-radius: 999px;
    --bs-badge-padding-y: .375em;
    --bs-badge-padding-x: .75em;
}

.table {
    --bs-table-border-color: var(--border-subtle);
    --bs-table-hover-bg: var(--surface-sunken);
}

.page-item.active .page-link {
    background-color: var(--brand);
    border-color: var(--brand);
}

.page-link {
    color: var(--text-body);
}

.page-link:hover {
    background-color: var(--brand-soft);
    color: var(--brand);
}

/* ==========================================================================
   3. Base layer
   ========================================================================== */

html {
    scroll-behavior: smooth;
    /* Leaves room for the sticky header when jumping to an anchor. */
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
    font-family: var(--font-sans);
    line-height: 1.7;
    color: var(--text-body);
    background-color: var(--surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--text-strong);
}

/* ==========================================================================
   4. Bidirectional support

   Arabic is not an afterthought here: it is the default locale. These
   rules correct the places where a Latin-tuned default actively harms it.
   ========================================================================== */

/* Arabic sits lower on the line and needs more leading than Latin at the
   same size. Without this, Arabic headings and body copy look cramped. */
[dir="rtl"] body {
    line-height: 1.75;
}

/* Letter-spacing tightening is a Latin typographic device. In Arabic the
   letters join, so negative tracking pulls connected forms into each
   other and damages legibility. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] .h1, [dir="rtl"] .h2, [dir="rtl"] .h3 {
    letter-spacing: 0;
}

/* Prices, phone numbers, areas and coordinates stay left-to-right even
   inside an Arabic sentence. Without isolation a price renders reversed. */
.ltr-numerals {
    direction: ltr;
    unicode-bidi: isolate;
    font-feature-settings: 'tnum' 1;
}

/* Tabular figures keep price columns aligned in tables and cards. */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* Mirrors a directional icon when the layout flips. Applied to arrows and
   chevrons only: a phone or a camera icon must never be mirrored. */
[dir="rtl"] .icon-flip {
    transform: scaleX(-1);
}

/* ==========================================================================
   5. Accessibility
   ========================================================================== */

/* A visible focus ring is a requirement, not a decoration. It is styled
   to match the brand rather than removed. */
:focus-visible {
    outline: 3px solid rgba(10, 22, 40, .35);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* Only hide the ring for pointer users, never for keyboard users. */
:focus:not(:focus-visible) {
    outline: none;
}

.skip-to-content {
    position: absolute;
    inset-inline-start: 1rem;
    top: -100px;
    z-index: 1080;
    padding: .75rem 1.5rem;
    background: var(--brand);
    color: var(--text-inverse);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    transition: top var(--transition-fast);
}

.skip-to-content:focus {
    top: 0;
}

/* Respect a visitor who has asked their system for less motion. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   6. Media and utilities
   ========================================================================== */

img,
video {
    max-width: 100%;
    height: auto;
}

/* Property photography is the product. A neutral placeholder while an
   image loads avoids the layout jump that makes a page feel cheap. */
.media-frame {
    position: relative;
    overflow: hidden;
    background-color: var(--stone-100);
    border-radius: var(--radius-md);
}

.media-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.text-balance {
    text-wrap: balance;
}

.line-clamp-1,
.line-clamp-2,
.line-clamp-3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
.line-clamp-3 { -webkit-line-clamp: 3; }

.surface-sunken {
    background-color: var(--surface-sunken);
}

.border-subtle {
    border-color: var(--border-subtle) !important;
}

/* ==========================================================================
   Toasts
   ==========================================================================
   Shared by the public site and both dashboards, so the confirmation of
   a save looks the same wherever it happens.

   The auto-hide is a CSS animation rather than a timer: no JavaScript is
   needed for the common case, and hovering pauses it so a message is
   never snatched away mid-read. Under prefers-reduced-motion the toast
   simply stays until it is dismissed.
   ========================================================================== */

.toast-stack {
    position: fixed;
    inset-block-start: 1.25rem;
    inset-inline-end: 1.25rem;
    z-index: 1090;
    display: grid;
    gap: .625rem;
    width: min(24rem, calc(100vw - 2.5rem));
    pointer-events: none;
}

.app-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: var(--radius-sm);
    border-inline-start: 4px solid currentColor;
    background: #fff;
    box-shadow: 0 12px 32px rgba(8, 32, 48, .16);
    font-size: .9375rem;
    line-height: 1.6;
}

.app-toast > .bi:first-child {
    flex-shrink: 0;
    margin-top: .15rem;
    font-size: 1.05rem;
}

.app-toast-body {
    flex: 1;
    min-width: 0;
    color: var(--text-strong);
}

.app-toast.is-success { color: var(--state-success); }
.app-toast.is-danger { color: var(--state-danger); }
.app-toast.is-warning { color: var(--state-warning); }
.app-toast.is-info { color: var(--state-info); }

.app-toast-close {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
}

.app-toast-close:hover {
    color: var(--text-strong);
}

@media (prefers-reduced-motion: no-preference) {
    .app-toast {
        animation: toast-in 260ms ease-out, toast-out 400ms ease-in 6s forwards;
    }

    /* Reading it keeps it. */
    .app-toast:hover,
    .app-toast:focus-within {
        animation-play-state: paused;
    }
}

@keyframes toast-in {
    from { opacity: 0; transform: translateY(-.5rem); }
    to { opacity: 1; transform: none; }
}

@keyframes toast-out {
    to { opacity: 0; transform: translateY(-.5rem); visibility: hidden; }
}