/*! public/css/layout/root.css */

/* ---------------------------------------------------------
   🎨 CSS Variables (Colors, Typography, Radius)
--------------------------------------------------------- */
:root {
    /* Typography */
    --font-base: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-heading: 'Segoe UI Semibold', var(--font-base);

    /* Color palette */
    --color-brand: #da1a1a;
    --color-brand-hover: #ff0000;

    --color-primary: #0054a6;
    --color-secondary: #00bcd4;
    --color-accent: #ffc107;

    --color-background-lighter: #f8f9fa;
    --color-background-light: #c9d1da;
    --color-text: #212529;

    /* Border radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
}

/* ---------------------------------------------------------
   🔤 Global Page Styles
--------------------------------------------------------- */
body {
    font-family: var(--font-base);
    background-color: var(--color-background-lighter);
    color: var(--color-text);
}

h2 {
    color: var(--color-primary);
}

/* ---------------------------------------------------------
   🎨 Shared Brand Styling
--------------------------------------------------------- */
.text-brand {
    color: var(--color-brand);
    transition: color 0.5s ease;
}

.text-brand:hover {
    color: var(--color-brand-hover);
}

/* ---------------------------------------------------------
   🧱 Background Utilities
--------------------------------------------------------- */
.bg-light-custom {
    background-color: var(--color-background-light);
}

.bg-lighter-custom {
    background-color: var(--color-background-lighter);
}

/* ---------------------------------------------------------
   📦 Border Helpers
--------------------------------------------------------- */
.border-custom {
    border-color: var(--color-primary);
}

/* ---------------------------------------------------------
   📐 Main Layout Spacing (offset for fixed navbar)
--------------------------------------------------------- */
main {
    margin-top: 77px;
    min-height: calc(100vh - 153px);
    overflow-x: hidden;
}

/* ---------------------------------------------------------
   🇦🇪 RTL Adjustments
--------------------------------------------------------- */
html[dir="rtl"] .modal-header .btn-close {
    margin-left: calc(-.5 * var(--bs-modal-header-padding-x));
    margin-right: auto;
}

/* RTL text utilities (Bootstrap handles most) */
html[dir="rtl"] .text-start {
    text-align: right !important;
}
html[dir="rtl"] .text-end {
    text-align: left !important;
}