/* ================================
   UNIFIED COLOR SYSTEM
   Black/White based on Background
   ================================ */

:root {
    /* Primary Colors */
    --color-primary-dark: #1f2937;     /* Dark Gray - Almost Black */
    --color-primary-darker: #111827;   /* Darker Gray - For Strong Text */
    --color-primary-light: #ffffff;    /* White - Light Background */
    --color-primary-lighter: #f9fafb;  /* Off White - Secondary Light */
    
    /* Secondary Colors */
    --color-secondary-dark: #374151;   /* Medium Dark Gray */
    --color-secondary-lighter: #e5e7eb; /* Light Gray - Borders */
    
    /* Text Colors */
    --color-text-primary: #1f2937;     /* Main Text - Dark */
    --color-text-secondary: #374151;   /* Secondary Text - Medium */
    --color-text-muted: #6b7280;       /* Muted Text - Light Gray */
    --color-text-light: #ffffff;       /* Light Text - White */
    
    /* Background Colors */
    --color-bg-light: #ffffff;         /* Light Background */
    --color-bg-lighter: #f9fafb;       /* Lighter Background */
    --color-bg-lightest: #f3f4f6;      /* Lightest Background */
    --color-bg-dark: #1f2937;          /* Dark Background */
    --color-bg-darker: #111827;        /* Darker Background */
}

/* ================================
   LIGHT BACKGROUND SECTIONS
   (Default)
   ================================ */

body {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
}

section {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
}

/* All headings on light background */
h1, h2, h3, h4, h5, h6,
.section-title,
.main-heading,
.page-title,
.admin-title,
.admin-heading,
.card-header {
    color: var(--color-text-primary);
    background-color: transparent;
}

/* Description text on light background */
p, .description, .desc-text {
    color: var(--color-text-secondary);
}

/* Secondary text */
.subtitle, .sub-heading, .text-secondary {
    color: var(--color-text-secondary);
}

/* Muted text */
.text-muted, small, .footnote {
    color: var(--color-text-muted);
}

/* Borders on light background */
hr, .border, .divider {
    border-color: var(--color-secondary-lighter);
}

/* Cards on light background */
.card {
    background-color: var(--color-bg-lighter);
    border-color: var(--color-secondary-lighter);
    color: var(--color-text-primary);
}

/* Forms on light background */
input, textarea, select,
.form-control, .form-select {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
    border-color: var(--color-secondary-lighter);
}

input::placeholder, textarea::placeholder {
    color: var(--color-text-muted);
}

/* Labels on light background */
label, .form-label {
    color: var(--color-text-primary);
}

/* Buttons with light background */
.btn-light, .btn-outline-dark {
    color: var(--color-text-primary);
    border-color: var(--color-text-primary);
    background-color: var(--color-bg-lighter);
}

.btn-light:hover, .btn-outline-dark:hover {
    color: var(--color-bg-light);
    background-color: var(--color-text-primary);
}

/* Tables on light background */
table {
    color: var(--color-text-primary);
    background-color: var(--color-bg-light);
}

thead {
    background-color: var(--color-bg-lighter);
    color: var(--color-text-primary);
}

tbody tr {
    border-bottom-color: var(--color-secondary-lighter);
}

tbody tr:hover {
    background-color: var(--color-bg-lighter);
}

/* Navigation on light background */
.navbar, .nav-link {
    color: var(--color-text-primary);
}

.nav-link:hover {
    color: var(--color-primary-dark);
}

/* ================================
   DARK BACKGROUND SECTIONS
   ================================ */

.bg-dark, .dark-section,
section.dark, .section-dark {
    background-color: var(--color-bg-dark);
    color: var(--color-text-light);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6,
.dark-section h1, .dark-section h2, .dark-section h3, .dark-section h4, .dark-section h5, .dark-section h6,
.dark-section .section-title,
.dark-section .main-heading,
.dark-section .page-title,
section.dark h1, section.dark h2, section.dark h3, section.dark h4, section.dark h5, section.dark h6,
.section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark h5, .section-dark h6 {
    color: var(--color-text-light);
}

.bg-dark p, .dark-section p, section.dark p, .section-dark p,
.bg-dark .description, .dark-section .description, section.dark .description, .section-dark .description {
    color: var(--color-text-light);
    opacity: 0.95;
}

.bg-dark .subtitle, .dark-section .subtitle, section.dark .subtitle, .section-dark .subtitle,
.bg-dark .text-secondary, .dark-section .text-secondary, section.dark .text-secondary, .section-dark .text-secondary {
    color: var(--color-text-light);
    opacity: 0.85;
}

.bg-dark .text-muted, .dark-section .text-muted, section.dark .text-muted, .section-dark .text-muted {
    color: var(--color-text-light);
    opacity: 0.7;
}

/* Borders on dark background */
.bg-dark hr, .dark-section hr, section.dark hr, .section-dark hr,
.bg-dark .border, .dark-section .border, section.dark .border, .section-dark .border {
    border-color: rgba(255, 255, 255, 0.2);
}

/* Cards on dark background */
.bg-dark .card, .dark-section .card, section.dark .card, .section-dark .card {
    background-color: rgba(0, 0, 0, 0.3);
    border-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

/* Forms on dark background */
.bg-dark input, .bg-dark textarea, .bg-dark select,
.dark-section input, .dark-section textarea, .dark-section select,
section.dark input, section.dark textarea, section.dark select,
.section-dark input, .section-dark textarea, .section-dark select,
.bg-dark .form-control, .dark-section .form-control, section.dark .form-control, .section-dark .form-control {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    border-color: rgba(255, 255, 255, 0.2);
}

.bg-dark input::placeholder, .dark-section input::placeholder,
section.dark input::placeholder, .section-dark input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

/* Labels on dark background */
.bg-dark label, .dark-section label, section.dark label, .section-dark label {
    color: var(--color-text-light);
}

/* Tables on dark background */
.bg-dark table, .dark-section table, section.dark table, .section-dark table {
    color: var(--color-text-light);
    background-color: transparent;
}

.bg-dark thead, .dark-section thead, section.dark thead, .section-dark thead {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-text-light);
}

.bg-dark tbody tr, .dark-section tbody tr, section.dark tbody tr, .section-dark tbody tr {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

.bg-dark tbody tr:hover, .dark-section tbody tr:hover, 
section.dark tbody tr:hover, .section-dark tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ================================
   HOVER & INTERACTIVE STATES
   ================================ */

.btn:hover, .btn-primary:hover {
    opacity: 0.9;
}

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

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

.bg-dark a, .dark-section a, section.dark a, .section-dark a {
    color: var(--color-text-light);
}

.bg-dark a:hover, .dark-section a:hover, section.dark a:hover, .section-dark a:hover {
    opacity: 0.8;
}

/* ================================
   SPECIAL ELEMENTS
   ================================ */

/* Alerts */
.alert {
    background-color: var(--color-bg-lighter);
    color: var(--color-text-primary);
    border-color: var(--color-secondary-lighter);
}

.bg-dark .alert, .dark-section .alert, section.dark .alert, .section-dark .alert {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Badges */
.badge {
    background-color: var(--color-bg-lighter);
    color: var(--color-text-primary);
}

.bg-dark .badge, .dark-section .badge, section.dark .badge, .section-dark .badge {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-text-light);
}

/* Modals */
.modal-content {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
}

.modal-header {
    background-color: var(--color-bg-lighter);
    color: var(--color-text-primary);
    border-bottom-color: var(--color-secondary-lighter);
}

.modal-footer {
    background-color: var(--color-bg-lighter);
    border-top-color: var(--color-secondary-lighter);
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--color-bg-light);
    color: var(--color-text-primary);
    border-color: var(--color-secondary-lighter);
}

.dropdown-item {
    color: var(--color-text-primary);
}

.dropdown-item:hover {
    background-color: var(--color-bg-lighter);
    color: var(--color-text-primary);
}

/* ================================
   RTL ADJUSTMENTS
   ================================ */

html[lang="ar"] {
    direction: rtl;
    text-align: right;
}

html[lang="ar"] .text-end {
    text-align: left;
}

html[lang="ar"] .text-start {
    text-align: right;
}