/* =============================================================================
   Marooj — Global theme (single source of truth)
   Component CSS (NavMenu, MainLayout, etc.) uses var(--marooj-*) only.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@300;400;500;700;800&display=swap');

/* -------------------------------------------------------------------------- */
/* Design tokens                                                              */
/* -------------------------------------------------------------------------- */
:root {
    /* Brand */
    --marooj-primary: #1a7a4a;
    --marooj-primary-rgb: 26, 122, 74;
    --marooj-primary-dark: #156339;
    --marooj-secondary: #c9a227;
    --marooj-secondary-rgb: 201, 162, 39;
    --marooj-on-primary: #ffffff;

    /* Surfaces */
    --marooj-body-bg: #f4f6f5;
    --marooj-body-color: #1f2937;
    --marooj-surface: #ffffff;
    --marooj-border: #e5e7eb;
    --marooj-muted: #6b7280;

    /* Sidebar shell */
    --marooj-sidebar-bg: #0f4d2e;
    --marooj-sidebar-bg-end: #0a3d24;
    --marooj-sidebar-width: 260px;
    --marooj-sidebar-text: #ffffff;
    --marooj-sidebar-brand: var(--marooj-secondary);

    /* Sidebar navigation */
    --marooj-nav-link: rgba(232, 245, 237, 0.94);
    --marooj-nav-icon: rgba(var(--marooj-secondary-rgb), 0.9);
    --marooj-nav-hover-text: #ffffff;
    --marooj-nav-hover-bg: rgba(var(--marooj-primary-rgb), 0.5);
    --marooj-nav-active-bg: var(--marooj-primary);
    --marooj-nav-active-text: var(--marooj-on-primary);
    --marooj-nav-active-hover-bg: var(--marooj-primary-dark);
    --marooj-nav-active-accent: var(--marooj-secondary);
    --marooj-nav-focus-ring: rgba(var(--marooj-secondary-rgb), 0.6);
    --marooj-nav-badge-bg: var(--marooj-secondary);
    --marooj-nav-badge-text: #1a3328;

    /* Top bar */
    --marooj-topbar-bg: var(--marooj-surface);
    --marooj-topbar-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

    /* Account manage nav (light panel) */
    --marooj-nav-manage-link: #374151;
    --marooj-nav-manage-hover-bg: rgba(var(--marooj-primary-rgb), 0.1);
    --marooj-nav-manage-hover-text: var(--marooj-primary);
    --marooj-nav-manage-active-bg: var(--marooj-primary);
    --marooj-nav-manage-active-text: var(--marooj-on-primary);
    --marooj-nav-manage-active-hover-bg: var(--marooj-primary-dark);
    --marooj-nav-manage-focus-ring: rgba(var(--marooj-primary-rgb), 0.35);

    /* Motion & shape */
    --marooj-radius-sm: 0.375rem;
    --marooj-radius-md: 0.5rem;
    --marooj-transition: 0.2s ease;
    --marooj-nav-min-height: 2.75rem;
}

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */
html {
    direction: rtl;
}

body {
    font-family: 'Tajawal', sans-serif;
    direction: rtl;
    text-align: right;
    margin: 0;
    background-color: var(--marooj-body-bg);
    color: var(--marooj-body-color);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--marooj-primary);
}

a:hover {
    color: var(--marooj-primary-dark);
}

h1:focus {
    outline: none;
}

/* -------------------------------------------------------------------------- */
/* Marooj utilities                                                           */
/* -------------------------------------------------------------------------- */
.marooj-login-logo {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--marooj-primary);
    line-height: 1.2;
}

.text-marooj-primary {
    color: var(--marooj-primary) !important;
}

.bg-marooj-light {
    background-color: var(--marooj-nav-manage-hover-bg) !important;
}

.btn-marooj-primary {
    background-color: var(--marooj-primary);
    border-color: var(--marooj-primary);
    color: var(--marooj-on-primary);
}

.btn-marooj-primary:hover,
.btn-marooj-primary:focus {
    background-color: var(--marooj-primary-dark);
    border-color: var(--marooj-primary-dark);
    color: var(--marooj-on-primary);
}

.btn-marooj-primary:disabled {
    background-color: var(--marooj-primary);
    border-color: var(--marooj-primary);
    opacity: 0.65;
}

.dropdown-toggle-no-caret::after {
    display: none;
}

.notification-dropdown-menu {
    max-height: 400px;
    overflow-y: auto;
}

.report-card-hover {
    transition: transform var(--marooj-transition), box-shadow var(--marooj-transition);
}

.report-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1) !important;
}

/* Top bar (used by TopBar.razor via class marooj-topbar) */
.marooj-topbar {
    min-height: var(--marooj-nav-min-height);
    background-color: var(--marooj-topbar-bg) !important;
    box-shadow: var(--marooj-topbar-shadow);
    z-index: 1030;
}

.marooj-topbar .breadcrumb-item a {
    color: var(--marooj-muted);
}

.marooj-topbar .breadcrumb-item a:hover {
    color: var(--marooj-primary);
}

.marooj-topbar .breadcrumb-item.active {
    color: var(--marooj-body-color);
}

/* -------------------------------------------------------------------------- */
/* Bootstrap focus — brand-aligned                                             */
/* -------------------------------------------------------------------------- */
.btn:focus,
.btn:active:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.15rem var(--marooj-surface), 0 0 0 0.25rem rgba(var(--marooj-primary-rgb), 0.35);
}

/* -------------------------------------------------------------------------- */
/* Forms & Blazor validation                                                  */
/* -------------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--marooj-primary);
}

.invalid,
.validation-message {
    color: #b91c1c;
}

.invalid {
    outline: 1px solid #b91c1c;
}

.blazor-error-boundary {
    background: #b91c1c;
    color: var(--marooj-on-primary);
    padding: 1rem 1.25rem;
}

.blazor-error-boundary::after {
    content: 'حدث خطأ في التطبيق.';
}