:root {
    --ec-red: #c91f3a;
    --ec-red-dark: #9d1830;
    --ec-navy: #102844;
    --ec-navy-2: #183957;
    --ec-ink: #182536;
    --ec-muted: #6f7c8d;
    --ec-sand: #f7f2e9;
    --ec-teal: #197c7b;
    --ec-gold: #d4a04a;
    --ec-border: #e7ebf0;
    --ec-shadow: 0 14px 36px rgba(16, 40, 68, .08);
}

html, body {
    background: #f7f9fc;
    color: var(--ec-ink);
}

body, .form-control, .btn, .table, .dropdown-menu {
    font-family: Inter, "Segoe UI", Tahoma, Arial, sans-serif;
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto 0;
    height: 4px;
    z-index: 1100;
    background: linear-gradient(90deg, var(--ec-red) 0 48%, var(--ec-gold) 48% 52%, var(--ec-navy) 52% 100%);
}

.aside-menu-container {
    background: linear-gradient(180deg, var(--ec-navy) 0%, #0d2038 100%) !important;
    border-right: 0 !important;
    box-shadow: 14px 0 32px rgba(10, 28, 49, .12);
}

.aside-menu-container .aside-menu-container__header,
.aside-menu-container .aside-menu-container__sidebar-header {
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.aside-menu-container .text-gray-900,
.aside-menu-container .aside-menu-title,
.aside-menu-container .menu-icon,
.aside-menu-container .btn,
.aside-menu-container i {
    color: rgba(255,255,255,.86) !important;
}

.aside-menu-container .nav-link {
    margin: 3px 12px;
    border-radius: 12px;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}

.aside-menu-container .nav-link:hover {
    background: rgba(255,255,255,.09);
    transform: translateX(2px);
}

.aside-menu-container .nav-item.active > .nav-link,
.aside-menu-container .nav-link.active {
    background: linear-gradient(135deg, var(--ec-red), var(--ec-red-dark));
    box-shadow: 0 9px 20px rgba(201,31,58,.23);
}

.aside-menu-container .image-mini {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,.12);
    padding: 3px;
}

.aside-menu-container__aside-menu .menu-icon {
    width: 30px;
}

.header,
.header-toolbar,
.content-wrapper,
.content {
    background: transparent;
}

.content {
    padding-bottom: 36px;
}

.card {
    border: 1px solid rgba(16, 40, 68, .06) !important;
    border-radius: 18px !important;
    box-shadow: var(--ec-shadow);
}

.card-header {
    border-bottom: 1px solid var(--ec-border) !important;
    background: transparent;
}

.btn-primary,
.bg-primary {
    background-color: var(--ec-red) !important;
    border-color: var(--ec-red) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--ec-red-dark) !important;
    border-color: var(--ec-red-dark) !important;
}

.btn-outline-primary {
    color: var(--ec-red) !important;
    border-color: var(--ec-red) !important;
}

.btn-outline-primary:hover {
    color: #fff !important;
    background-color: var(--ec-red) !important;
}

.form-control,
.form-select,
.select2-container--bootstrap5 .select2-selection {
    border-color: var(--ec-border) !important;
    border-radius: 10px !important;
    min-height: 42px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ec-red) !important;
    box-shadow: 0 0 0 .2rem rgba(201,31,58,.12) !important;
}

.table thead th {
    color: var(--ec-navy);
    font-weight: 700;
    background: #fbfcfe;
    border-bottom: 1px solid var(--ec-border);
}

.badge.bg-primary,
.badge-primary {
    background: var(--ec-red) !important;
}

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

a {
    color: var(--ec-red);
}

a:hover {
    color: var(--ec-red-dark);
}

.alert-info {
    color: var(--ec-navy);
    background: #e9f5f4;
    border-color: #c7e5e1;
}

/* Brand surfaces used by authentication and landing pages. */
.auth-card, .login-card, .authentication-page .card {
    border-radius: 22px !important;
    box-shadow: 0 20px 55px rgba(16,40,68,.13);
}

[dir="rtl"] .aside-menu-container .nav-link:hover {
    transform: translateX(-2px);
}

@media (max-width: 991.98px) {
    .aside-menu-container {
        box-shadow: 8px 0 24px rgba(10, 28, 49, .18);
    }
    .card {
        border-radius: 14px !important;
    }
}
.header-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

.brand-wordmark {
    color: var(--ec-navy);
    font-size: 1.12rem;
    font-weight: 800;
    letter-spacing: -.02em;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .brand-wordmark { display: none; }
}

[dir="rtl"] body {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .aside-menu-container {
    direction: rtl;
}

[dir="rtl"] .header-nav .nav {
    justify-content: flex-start !important;
}

[dir="rtl"] .banner-left,
[dir="rtl"] .banner-left p,
[dir="rtl"] .app-features-right,
[dir="rtl"] .contact-section,
[dir="rtl"] .footer-section {
    text-align: right;
}

[dir="rtl"] .form-control,
[dir="rtl"] textarea,
[dir="rtl"] select {
    text-align: right;
}

@media (max-width: 767.98px) {
    .container-fluid, .container { padding-left: 18px; padding-right: 18px; }
    .table-responsive { border-radius: 12px; }
    .btn { white-space: nowrap; }
}