[x-cloak] { display: none !important; }

:root {
    --crm-navy: #0a1220;
    --crm-navy-2: #101b2d;
    --crm-navy-3: #17243a;
    --crm-gold: #c8a96b;
    --crm-gold-soft: #e7d5a8;
    --crm-cream: #f7f5ef;
    --crm-ink: #172033;
    --crm-muted: #778196;
    --crm-border: rgba(23,32,51,.09);
    --crm-shadow: 0 16px 45px rgba(15,23,42,.08);
}

html { background: var(--crm-cream); }
body {
    font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(circle at 85% 0%, rgba(200,169,107,.10), transparent 28rem),
        linear-gradient(135deg, #fbfaf7 0%, #f4f5f8 55%, #f7f5ef 100%);
    color: var(--crm-ink);
}
html[dir="ltr"] body { font-family: 'Inter', 'Tajawal', system-ui, -apple-system, sans-serif; }

/* Luxury application shell */
.crm-shell { min-height: 100vh; }
.crm-shell main { position: relative; }
.crm-shell main:before {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    top: -120px;
    inset-inline-end: -160px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(200,169,107,.09), transparent 68%);
    pointer-events: none;
}

/* Sidebar */
.crm-sidebar {
    width: 278px !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(200,169,107,.16), transparent 22rem),
        linear-gradient(180deg, #0b1423 0%, #07101d 100%) !important;
    border-inline-end: 1px solid rgba(255,255,255,.07);
    box-shadow: 18px 0 45px rgba(4,10,20,.16);
}
.crm-brand {
    height: 78px !important;
    padding-inline: 22px !important;
    border-bottom-color: rgba(255,255,255,.08) !important;
}
.crm-brand-mark {
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: linear-gradient(145deg, #e2c98d, #a98245) !important;
    color: #101827 !important;
    box-shadow: 0 10px 25px rgba(200,169,107,.18), inset 0 1px rgba(255,255,255,.35);
    letter-spacing: -.04em;
}
.crm-brand-name { letter-spacing: -.02em; }
.crm-nav { padding: 18px 12px !important; }
.crm-nav a {
    min-height: 44px;
    border: 1px solid transparent;
    border-radius: 13px !important;
    color: #9da9bb !important;
    transition: .18s ease;
}
.crm-nav a:hover {
    color: #fff !important;
    background: rgba(255,255,255,.055) !important;
    border-color: rgba(255,255,255,.06);
    transform: translateX(2px);
}
.crm-nav a.crm-nav-active {
    color: #fff !important;
    background: linear-gradient(90deg, rgba(200,169,107,.20), rgba(200,169,107,.07)) !important;
    border-color: rgba(200,169,107,.18);
    box-shadow: inset 3px 0 0 var(--crm-gold), 0 8px 22px rgba(0,0,0,.10);
}
[dir="rtl"] .crm-nav a.crm-nav-active { box-shadow: inset -3px 0 0 var(--crm-gold), 0 8px 22px rgba(0,0,0,.10); }
.crm-nav-icon {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #9da9bb;
    background: rgba(255,255,255,.045);
}
.crm-nav a.crm-nav-active .crm-nav-icon { color: var(--crm-gold-soft); background: rgba(200,169,107,.12); }
.crm-section-label {
    color: #69768a !important;
    letter-spacing: .13em !important;
    font-size: 10px !important;
}
.crm-sidebar-footer { border-top-color: rgba(255,255,255,.08) !important; color: #69768a !important; }

/* Top bar */
.crm-topbar {
    height: 76px !important;
    background: rgba(255,255,255,.84) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--crm-border) !important;
    box-shadow: 0 8px 30px rgba(15,23,42,.04);
}
.crm-search-wrap { max-width: 520px !important; }
.crm-search {
    background: rgba(247,248,250,.9) !important;
    border-color: rgba(23,32,51,.10) !important;
    border-radius: 14px !important;
    min-height: 44px;
    transition: .18s ease;
}
.crm-search:focus {
    background: #fff !important;
    border-color: rgba(200,169,107,.7) !important;
    box-shadow: 0 0 0 4px rgba(200,169,107,.11) !important;
}
.crm-locale {
    border-color: var(--crm-border) !important;
    border-radius: 11px !important;
    color: #667085 !important;
}
.crm-locale:hover { color: var(--crm-ink) !important; border-color: rgba(200,169,107,.4) !important; }
.crm-icon-btn { color: #596579 !important; }
.crm-icon-btn:hover { color: var(--crm-ink) !important; }
.crm-avatar {
    background: linear-gradient(145deg, #e8d7ad, #c8a96b) !important;
    color: #111827 !important;
    box-shadow: 0 7px 18px rgba(200,169,107,.22);
}
.crm-dropdown {
    border: 1px solid var(--crm-border);
    border-radius: 16px !important;
    box-shadow: 0 24px 60px rgba(15,23,42,.14) !important;
}

/* Main content / cards */
.crm-content { padding: 26px !important; }
.crm-page-title { font-size: 26px !important; letter-spacing: -.035em; }
.crm-page-subtitle { color: var(--crm-muted) !important; }
.crm-section-title { color: #7b8495 !important; letter-spacing: .11em !important; font-size: 10px !important; }

.crm-card,
.crm-shell .bg-white {
    border-color: var(--crm-border) !important;
    box-shadow: var(--crm-shadow);
}
.crm-shell .rounded-xl { border-radius: 18px !important; }
.crm-shell .rounded-2xl { border-radius: 22px !important; }
.crm-shell .ring-1 { --tw-ring-color: var(--crm-border) !important; }

/* Inputs */
.crm-shell input,
.crm-shell select,
.crm-shell textarea {
    border-color: rgba(23,32,51,.12) !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,.82);
    min-height: 42px;
}
.crm-shell input:focus,
.crm-shell select:focus,
.crm-shell textarea:focus {
    border-color: rgba(200,169,107,.72) !important;
    box-shadow: 0 0 0 4px rgba(200,169,107,.10) !important;
    outline: none !important;
}
.crm-shell button,
.crm-shell a[class*="bg-indigo-600"],
.crm-shell a[class*="bg-slate-800"] { border-radius: 12px !important; }
.crm-shell button[class*="bg-indigo-600"],
.crm-shell a[class*="bg-indigo-600"] {
    background: linear-gradient(135deg, #c8a96b, #a98245) !important;
    color: #111827 !important;
    box-shadow: 0 8px 20px rgba(168,130,69,.20);
}
.crm-shell button[class*="bg-indigo-600"]:hover,
.crm-shell a[class*="bg-indigo-600"]:hover { filter: brightness(1.04); transform: translateY(-1px); }

/* Tables */
.crm-table thead { background: #f7f7f5 !important; }
.crm-table th {
    color: #7b8495 !important;
    font-size: 10px !important;
    letter-spacing: .07em;
    font-weight: 700 !important;
}
.crm-table tbody tr { transition: background .15s ease; }
.crm-table tbody tr:hover { background: rgba(200,169,107,.055) !important; }

.badge {
    border-radius: 999px;
    padding: .25rem .65rem;
    font-size: .69rem;
    letter-spacing: .01em;
}

/* Dashboard KPI cards */
.crm-kpi {
    position: relative;
    overflow: hidden;
    min-height: 124px;
    background: linear-gradient(145deg, #fff, #fbfbfa) !important;
}
.crm-kpi:after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 999px;
    inset-inline-end: -48px;
    bottom: -60px;
    background: rgba(200,169,107,.10);
}
.crm-kpi-value { font-size: 28px !important; letter-spacing: -.045em; color: #111827 !important; }
.crm-kpi-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    background: rgba(200,169,107,.12);
    color: #9b773e;
}

/* Charts */
.crm-chart-card { min-height: 330px; }
.crm-chart-card canvas { max-height: 250px; }

/* Login */
.crm-login {
    background:
        radial-gradient(circle at 20% 20%, rgba(200,169,107,.20), transparent 25rem),
        radial-gradient(circle at 85% 85%, rgba(86,111,154,.20), transparent 25rem),
        linear-gradient(135deg, #070d17 0%, #101a2b 52%, #0a1220 100%);
}
.crm-login-panel {
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(255,255,255,.96) !important;
    box-shadow: 0 35px 90px rgba(0,0,0,.30) !important;
}
.crm-login-mark {
    width: 64px !important;
    height: 64px !important;
    border-radius: 20px !important;
    background: linear-gradient(145deg, #e4cc93, #a98245) !important;
    color: #111827 !important;
    box-shadow: 0 15px 35px rgba(200,169,107,.25) !important;
}
.crm-login-title { letter-spacing: -.035em; }
.crm-login-submit {
    background: linear-gradient(135deg, #c8a96b, #a98245) !important;
    color: #101827 !important;
    box-shadow: 0 12px 28px rgba(168,130,69,.24);
}
.crm-login-submit:hover { transform: translateY(-1px); filter: brightness(1.03); }
.crm-login-hint { color: rgba(255,255,255,.42) !important; }

@media (max-width: 1024px) {
    .crm-content { padding: 18px !important; }
    .crm-sidebar { width: 280px !important; }
}
@media (max-width: 640px) {
    .crm-content { padding: 14px !important; }
    .crm-topbar { height: 68px !important; padding-inline: 12px !important; }
    .crm-search-wrap { max-width: none !important; }
    .crm-page-title { font-size: 22px !important; }
}

.sidebar-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 8px; }
table.crm-table th, table.crm-table td { white-space: nowrap; }
@media (max-width: 768px) { table.crm-table th, table.crm-table td { white-space: normal; } }