/* ============================================================
   ELEGANCIA BRAND CSS - elegancia.menamarketing.cloud
   Brand Colors: Red #E31E24 | Black #1A1A1A | White #FFFFFF
   Primary Font: Gotham (fallback: Montserrat)
   Secondary Font: Tajawal
   Version: 2.0 | Updated: 2026-04-12
   ============================================================ */

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

/* === CSS VARIABLES === */
:root {
  --brand-red: #E31E24;
  --brand-darkred: #B01519;
  --brand-black: #1A1A1A;
  --brand-white: #FFFFFF;
  --main-bg: #F5F5F5;
  --card-bg: #FFFFFF;
  --card-border: #E5E5E5;
  --sidebar-bg: #1A1A1A;
  --text-primary: #1A1A1A;
  --text-light: #666666;
  --text-muted: #888888;
}

/* === SELECTION === */
::selection {
  background: var(--brand-red) !important;
  color: var(--brand-white) !important;
}

/* === BASE === */
body {
  background-color: var(--main-bg) !important;
  color: var(--text-primary) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */

aside {
  background-color: var(--sidebar-bg) !important;
  border-right: 2px solid var(--brand-red) !important;
}

/* Sidebar Header */
aside > div:first-child {
  background-color: #111111 !important;
  border-bottom: 2px solid var(--brand-red) !important;
  padding: 16px !important;
}

/* Brand Name */
aside .text-lg.font-bold,
aside h1,
aside .uppercase.text-lg,
aside [class*="text-lg"] {
  color: #FFFFFF !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  text-transform: lowercase !important;
  font-size: 1.4rem !important;
}

/* Brand Subtitle */
aside .text-xs.text-gray-400 {
  color: rgba(255, 255, 255, 0.55) !important;
  font-family: 'Tajawal', sans-serif !important;
  font-size: 0.68rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* Nav Buttons (section headers) */
aside button {
  color: #BBBBBB !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  transition: all 0.2s ease !important;
}

aside button:hover {
  background-color: rgba(227, 30, 36, 0.12) !important;
  color: #FFFFFF !important;
}

aside button.text-purple-300,
aside button[class*="purple"] {
  color: var(--brand-red) !important;
  background-color: rgba(227, 30, 36, 0.1) !important;
}

/* Sidebar Links */
aside a {
  color: rgba(255,255,255,0.88) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-size: 0.8125rem !important;
  transition: all 0.2s ease !important;
}

aside a:hover {
  color: #FFFFFF !important;
  background-color: rgba(227, 30, 36, 0.15) !important;
}

/* Dashboard Link */
aside a[href="dashboard.php"] {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

/* Active Link */
aside a.bg-purple-600\/20,
aside a[class*="bg-purple"],
aside a.text-purple-300 {
  color: #FFFFFF !important;
  background-color: rgba(227, 30, 36, 0.25) !important;
  border-left: 3px solid var(--brand-red) !important;
  padding-left: 10px !important;
  font-weight: 600 !important;
}

/* Active sub-link */
aside nav a.block.text-purple-300,
aside nav a.bg-purple-600\/20 {
  color: #FFFFFF !important;
  background-color: rgba(227, 30, 36, 0.25) !important;
  border-left: 3px solid var(--brand-red) !important;
  font-weight: 600 !important;
}

/* Sidebar Footer */
aside > div:last-child {
  background-color: #111111 !important;
  border-top: 1px solid #2A2A2A !important;
}

aside > div:last-child .text-sm,
aside .font-medium {
  color: #FFFFFF !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
}

aside > div:last-child .text-xs {
  color: rgba(255, 255, 255, 0.5) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

/* User Avatar */
aside .rounded-full.bg-purple-600,
aside div[class*="bg-purple"][class*="rounded-full"],
.rounded-full.bg-purple-600 {
  background-color: var(--brand-red) !important;
  color: #FFFFFF !important;
  font-weight: 700 !important;
}

/* ============================================================
   MOBILE TOP BAR
   ============================================================ */

.md\:hidden {
  background-color: var(--sidebar-bg) !important;
  border-bottom: 2px solid var(--brand-red) !important;
}

/* ============================================================
   MAIN LAYOUT
   ============================================================ */

main {
  background-color: var(--main-bg) !important;
}

.flex.h-screen,
.min-h-screen,
.bg-gray-900 {
  background-color: var(--main-bg) !important;
}

/* Welcome Heading */
main h1 {
  color: var(--brand-black) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.65rem !important;
  letter-spacing: -0.01em !important;
}

main > div:first-child p,
main > div:first-child span {
  color: var(--text-muted) !important;
  font-size: 0.82rem !important;
}

/* ============================================================
   STAT CARDS
   ============================================================ */

.grid .bg-gray-800,
.bg-gray-800.border.rounded-xl,
.bg-gray-800.border.border-gray-700.rounded-xl {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}

.grid .bg-gray-800:hover {
  box-shadow: 0 4px 16px rgba(227, 30, 36, 0.10) !important;
  border-color: rgba(227, 30, 36, 0.3) !important;
}

/* Stat Numbers */
.bg-gray-800 p.text-2xl,
p.text-2xl.font-bold,
.text-2xl.font-bold {
  color: var(--brand-red) !important;
  font-weight: 800 !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-size: 1.9rem !important;
}

/* Stat Labels */
.bg-gray-800 p.text-xs,
p.text-xs.text-gray-400 {
  color: var(--text-muted) !important;
  font-size: 0.65rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}

/* ============================================================
   MODULE CARDS (Dashboard section cards)
   ============================================================ */

.rounded-xl.p-5 {
  background-color: var(--card-bg) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}

.rounded-xl.p-5:hover {
  border-color: rgba(227, 30, 36, 0.35) !important;
  box-shadow: 0 4px 20px rgba(227, 30, 36, 0.08) !important;
}

/* Card Headings */
.rounded-xl.p-5 h2 {
  color: var(--brand-black) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
}

/* Card Links */
a.block.text-xs.text-gray-400,
a.block.text-xs,
.rounded-xl.p-5 a {
  color: #666666 !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 2px 0 !important;
  display: block !important;
}

a.block.text-xs.text-gray-400:hover,
a.block.text-xs:hover,
a.hover\:text-purple-300:hover,
.rounded-xl.p-5 a:hover {
  color: var(--brand-red) !important;
}

/* "+X more" badge */
p.text-xs.text-gray-500,
span.text-xs.text-gray-500 {
  color: var(--brand-red) !important;
  font-weight: 600 !important;
  font-size: 0.72rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* ============================================================
   RECENT ACTIVITY
   ============================================================ */

h2.text-sm.font-medium {
  color: var(--brand-black) !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}

.border-gray-700\/50,
.border-b.border-gray-700\/50 {
  border-color: #EEEEEE !important;
}

.text-gray-300 {
  color: #333333 !important;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.bg-purple-600,
a.bg-purple-600,
button.bg-purple-600 {
  background-color: var(--brand-red) !important;
  color: #FFFFFF !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 600 !important;
}

.bg-purple-600:hover,
button.bg-purple-600:hover,
.hover\:bg-purple-700:hover {
  background-color: var(--brand-darkred) !important;
}

/* ============================================================
   TEXT COLOR OVERRIDES
   ============================================================ */

.text-purple-400,
.text-purple-300 {
  color: var(--brand-red) !important;
}

.text-red-400 {
  color: var(--brand-red) !important;
  font-weight: 600 !important;
}

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

.bg-purple-600\/10,
.bg-purple-600\/20 {
  background-color: rgba(227, 30, 36, 0.08) !important;
}

/* ============================================================
   BORDERS
   ============================================================ */

.border-gray-700,
.border-gray-600 {
  border-color: #E0E0E0 !important;
}

/* ============================================================
   TABLES
   ============================================================ */

table {
  background-color: var(--card-bg) !important;
}

thead tr {
  background-color: var(--brand-black) !important;
  border-bottom: 2px solid var(--brand-red) !important;
}

th,
thead th {
  color: #FFFFFF !important;
  background-color: var(--brand-black) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  padding: 12px 16px !important;
}

tbody tr {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid #F0F0F0 !important;
}

tbody tr:hover {
  background-color: #FFF5F5 !important;
}

td {
  color: var(--text-primary) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-size: 0.82rem !important;
  padding: 10px 16px !important;
}

.rounded-xl.overflow-hidden,
.overflow-hidden.rounded-xl {
  background-color: #FFFFFF !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05) !important;
}

/* ============================================================
   FORMS & INPUTS
   ============================================================ */

input[type="text"],
input[type="email"],
input[type="date"],
input[type="number"],
input[type="password"],
select,
textarea {
  background-color: #FFFFFF !important;
  color: var(--brand-black) !important;
  border: 1px solid #DDDDDD !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  border-radius: 6px !important;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-red) !important;
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.12) !important;
  outline: none !important;
}

label {
  color: #444444 !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 500 !important;
}

/* Dark input overrides */
.bg-gray-700.border.border-gray-600,
input.bg-gray-700,
select.bg-gray-700,
textarea.bg-gray-700 {
  background-color: #FFFFFF !important;
  border-color: #DDDDDD !important;
  color: var(--brand-black) !important;
}

/* ============================================================
   SECTION PAGE ELEMENTS
   ============================================================ */

/* Breadcrumb */
.text-xs.font-semibold.uppercase {
  color: var(--brand-red) !important;
  font-size: 0.65rem !important;
  letter-spacing: 0.1em !important;
}

/* Section Page Heading */
main h2.text-xl,
main h2.text-2xl {
  color: var(--brand-black) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
  font-weight: 800 !important;
}

/* ============================================================
   MODAL / OVERLAY
   ============================================================ */

.fixed.inset-0.bg-black\/50,
.fixed.inset-0[class*="bg-black"] {
  background-color: rgba(26, 26, 26, 0.7) !important;
}

.fixed.inset-0 .bg-gray-800 {
  background-color: #FFFFFF !important;
  border-top: 4px solid var(--brand-red) !important;
  color: var(--brand-black) !important;
}

.fixed.inset-0 h2,
.fixed.inset-0 h3,
.fixed.inset-0 label {
  color: var(--brand-black) !important;
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
}

.fixed.inset-0 .text-gray-400 {
  color: #444444 !important;
}

/* ============================================================
   STATUS BADGES
   ============================================================ */

span.bg-blue-600\/20 {
  background-color: rgba(37, 99, 235, 0.1) !important;
}

span.text-blue-400 {
  color: #2563EB !important;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: #F0F0F0;
}

::-webkit-scrollbar-thumb {
  background: var(--brand-red);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--brand-darkred);
}

/* ============================================================
   LOGIN PAGE
   ============================================================ */

.min-h-screen.flex.items-center {
  background: linear-gradient(135deg, #1A1A1A 0%, #2A0000 60%, #1A1A1A 100%) !important;
}

.min-h-screen.flex.items-center .bg-gray-800 {
  background-color: #FFFFFF !important;
  border-top: 4px solid var(--brand-red) !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

.min-h-screen.flex.items-center h1 {
  color: var(--brand-black) !important;
}

.min-h-screen.flex.items-center .text-gray-400 {
  color: #666666 !important;
}

.min-h-screen.flex.items-center label {
  color: #333333 !important;
}

/* ============================================================
   TYPOGRAPHY - GLOBAL FONT ASSIGNMENTS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
}

p, span, div, li, td, th, a, button, input, select, textarea {
  font-family: 'Montserrat', 'Gotham', sans-serif !important;
}

/* Arabic text - Tajawal */
[lang="ar"], .ar, .arabic {
  font-family: 'Tajawal', sans-serif !important;
}


/* === BRAND NAME OVERRIDE - GOTHAM BLACK LOWERCASE === */
aside > div:first-child .text-lg,
aside > div:first-child [class*="font-bold"],
aside > div:first-child h1,
aside > div:first-child span.text-lg {
  text-transform: lowercase !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: 1.4rem !important;
  color: #FFFFFF !important;
}


/* ============================================================
   SIDEBAR — WHITE TEXT (must be last in file)
   aside a.block beats a.block.text-xs because same specificity
   but appears LATER in stylesheet (cascade wins)
   ============================================================ */
aside a.block.text-xs,
aside a.block.text-xs.text-gray-400,
aside a.block.text-xs.text-gray-100,
aside .sidebar-section a {
    color: rgba(255, 255, 255, 0.88) !important;
    font-size: 0.8125rem !important;
    padding: 9px 12px 9px 20px !important;
    font-weight: 500 !important;
}

aside a.block.text-xs:hover,
aside .sidebar-section a:hover {
    color: #FFFFFF !important;
    background-color: rgba(255, 255, 255, 0.08) !important;
}

aside nav > div > button,
aside nav > div > button.text-gray-300 {
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
}

aside nav > div {
    margin-bottom: 4px !important;
}