/* ============================================================
   1. GLOBAL VARIABLES (ROOT)
   ============================================================ */
:root {
    --color-primary: #ea580c;
    --color-primary-rgb: 234, 88, 12;
    --color-secondary: #64748b;
    --color-bg: #f8fafc;
    --color-content-bg: #ffffff;
    --color-sidebar: #ffffff;
    --color-text-main: #0f172a;
    --color-text-muted: #94a3b8;
    --color-text-placeholder: #cbd5e1;
    --theme-border: rgba(71, 85, 105, 0.2) !important;
    --theme-radius: 0.75rem;
    --table-header-bg: #f8fafc;
    --table-header-text: #334155;
    --table-border: #e2e8f0;
    --card-header-bg: rgba(0, 0, 0, 0.02);
}

/* ============================================================
   2. GLOBAL BASE STYLES (SHARED)
   ============================================================ */
body {
    background-color: var(--color-bg) !important;
    color: var(--color-text-main) !important;
    transition: background 0.3s, color 0.3s;
}

header {
    border-bottom: 1px solid var(--theme-border) !important;
}

aside#sidebar {
    background-color: var(--color-sidebar) !important;
    border-right: 1px solid var(--theme-border) !important;
    transition: all 0.3s;
}

#sidebar-logo-area {
    border-bottom: 1px solid var(--theme-border) !important;
    background-color: var(--color-sidebar) !important;
}

/* Global Radius - Elements that follow theme setting */
button,
.nav-link,
.nav-item,
input,
select,
textarea,
.theme-radius {
    border-radius: var(--theme-radius) !important;
}

/* Card Logic - Prevents cards from becoming "Pills" */
.theme-card,
.bg-white,
.card {
    background-color: var(--color-content-bg) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: min(var(--theme-radius), 1.2rem) !important;
    transition: background 0.3s, border 0.3s;
}

/* ============================================================
   3. COMPONENT STYLES (LIGHT MODE DEFAULT)
   ============================================================ */
.nav-link,
.submenu-link {
    color: var(--color-text-muted) !important;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s;
}

.nav-link:hover,
.submenu-link:hover {
    background-color: rgba(var(--color-primary-rgb), 0.05) !important;
    color: var(--color-primary) !important;
}

.nav-link.active,
.submenu-link.active {
    background-color: rgba(var(--color-primary-rgb), 0.12) !important;
    color: var(--color-primary) !important;
    font-weight: 600;
}

.nav-item.parent-active>.nav-link {
    background-color: rgba(var(--color-primary-rgb), 0.08) !important;
    color: var(--color-primary) !important;
}

.nav-link:hover i,
.nav-link.active i,
.parent-active i {
    color: var(--color-primary) !important;
}

.parent-active .chevron-icon {
    transform: rotate(180deg);
}

.theme-primary-btn {
    background-color: var(--color-primary) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(var(--color-primary-rgb), 0.2);
    transition: all 0.2s;
}

.theme-reset-btn {
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: transparent;
}

.global-table {
    border-collapse: collapse;
    width: 100%;
}

.global-table thead {
    background-color: var(--table-header-bg) !important;
}

.global-table th {
    color: var(--table-header-text) !important;
    border: 1px solid var(--table-border) !important;
}

.global-table td {
    border: 1px solid var(--table-border) !important;
}

/* Landing Fields Fixed UI */
.landing-field-fixed {
    border-radius: 8px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    color: #0f172a !important;
}

.landing-field-fixed:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.1);
}

/* Radius Control UI */
.radius-container {
    background-color: #f1f5f9 !important;
}

.radius-option {
    color: #64748b !important;
}

.radius-option.selected {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Mode Switcher UI */
#mode-toggle-container {
    background-color: #f1f5f9;
}

#mode-slider {
    background-color: white;
}

.mode-light-active #btn-light {
    color: var(--color-primary) !important;
}

.mode-dark-active #mode-slider {
    transform: translateX(36px);
    background-color: var(--color-primary) !important;
}

/* Guru */

.typo-preview-card {
    background-color: #fefefe;
    border: 1px solid var(--theme-border);
}

.btn-preview-card {
    border: 2px solid #f1f5f9;
    transition: all 0.2s;
    cursor: pointer;
}

.btn-preview-card.selected {
    border-color: var(--color-primary) !important;
    background-color: rgba(var(--color-primary-rgb), 0.05);
}

.top-border {
    border-color: var(--theme-border) !important;
}

.theme-card-header {
    background-color: var(--card-header-bg) !important;
    border-bottom: 1px solid var(--theme-border) !important;
}

/* View Toggle Buttons Fix */
.view-toggle-container {
    background-color: var(--color-bg) !important;
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius);
}

.view-btn.active {
    background-color: var(--color-content-bg) !important;
    color: var(--color-primary) !important;
    border-radius: var(--theme-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.theme-btn {
    color: var(--color-primary);
}

/* ============================================================
   4. DARK MODE OVERRIDES (HTML.DARK)
   ============================================================ */
html.dark {
    --color-bg: #0f172a;
    --color-content-bg: #1e293b;
    --color-sidebar: #111827;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --theme-border: rgba(255, 255, 255, 0.08) !important;
    --card-header-bg: rgba(255, 255, 255, 0.03);
}

html.dark .text-slate-900,
html.dark .text-slate-800,
html.dark .text-slate-700 {
    color: var(--color-text-main) !important;
}

html.dark .text-slate-600,
html.dark .text-slate-500,
html.dark .text-slate-400 {
    color: var(--color-text-muted) !important;
}

html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4 {
    color: var(--color-text-main) !important;
}

html.dark #mode-toggle-container {
    background-color: #1e293b;
    border-color: #334155;
}

html.dark #btn-dark {
    color: white !important;
}

html.dark .radius-container {
    background-color: rgba(30, 41, 59, 0.5) !important;
}

html.dark .radius-option {
    color: #e2e8f0 !important;
}

html.dark .radius-option.selected {
    background-color: var(--color-primary) !important;
    color: white !important;
}

html.dark .landing-field-fixed {
    background-color: rgba(30, 41, 59, 0.6) !important;
    /* Better contrast */
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

html.dark .landing-field-fixed:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
    /* Dark mode ke liye better visibility */
}



html.dark #typography-preview-box {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

/* Force correct visibility for Color Picker boxes in Dark Mode */
html.dark .color-bar-input {
    border: 1px solid #334155 !important;
}

html.dark .typo-preview-card {
    border: 1px solid var(--theme-border) !important;
}

html.dark .radius-container,
html.dark .btn-preview-card {
    border: 1px solid var(--theme-border) !important;
}

html.dark #typography-preview-box {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}





/* Welcome Banner Dynamic Gradient */
.theme-welcome-banner {
    /* Left side: Pure Primary Color | Right side: 70% Opacity Variant */
    background: linear-gradient(135deg,
            var(--color-primary) 0%,
            rgba(var(--color-primary-rgb), 0.5) 100%) !important;
}

/* Banner ke andar ka Primary Text (Buttons ke liye) */
.banner-btn-text {
    color: var(--color-primary) !important;
}

/* Banner ke andar ka Secondary Button */
.banner-btn-outline {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.banner-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.25) !important;
}

/* --- Welcome Banner Global Logic --- */

.theme-welcome-banner {
    /* Dynamic Gradient based on Primary Color */
    background: linear-gradient(135deg,
            var(--color-primary) 0%,
            rgba(var(--color-primary-rgb), 0.8) 100%) !important;
    border-radius: min(var(--theme-radius), 1.5rem) !important;
    /* Cards ke liye limited radius */
    color: #ffffff !important;
}

/* Dark Mode Banner Adjustment (Thoda deep color) */
html.dark .theme-welcome-banner {
    background: linear-gradient(135deg,
            rgba(var(--color-primary-rgb), 0.9) 0%,
            rgba(var(--color-primary-rgb), 0.5) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

/* Button 1: White background, Primary Text */
.banner-btn-primary {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
    border-radius: var(--theme-radius) !important;
    /* Global Radius Sync */
    transition: all 0.3s ease;
}

.banner-btn-primary:hover {
    background-color: #f8fafc !important;
    transform: translateY(-1px);
}

/* Button 2: Translucent background, White Border */
.banner-btn-secondary {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--theme-radius) !important;
    /* Global Radius Sync */
    transition: all 0.3s ease;
}

.banner-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

/* Banner Text Colors */
.banner-title {
    color: #ffffff !important;
}

.banner-subtitle {
    color: rgba(255, 255, 255, 0.85) !important;
}





/* Status Card Icon Containers */
.status-icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
    /* Icon ko dabne se rokta hai */
}

/* Status colors fix for Dark Mode */
html.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

html.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

html.dark .bg-purple-50 {
    background-color: rgba(168, 85, 247, 0.1) !important;
}

html.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

html.dark .bg-orange-50 {
    background-color: rgba(249, 115, 22, 0.1) !important;
}

/* Desktop hover fix */
.status-card:hover {
    transform: translateY(-2px);
    border-color: var(--color-primary) !important;
}


/* Table UI Enhancements */
.global-table tbody tr {
    border-bottom: 1px solid var(--theme-border) !important;
}

.global-table tbody tr:hover {
    background-color: rgba(var(--color-primary-rgb), 0.04) !important;
}

/* Card View specific adjustments */
#leads-card-view .theme-card {
    border: 1px solid var(--theme-border) !important;
    border-radius: 12px !important;
}



/* Task Item Base Style */
.task-item {
    background-color: var(--color-bg) !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease;
}

.task-item:hover {
    background-color: rgba(var(--color-primary-rgb), 0.05) !important;
    border-color: var(--theme-border) !important;
}

/* Checkbox Style */
.task-checkbox {
    border: 2px solid var(--color-text-placeholder);
    transition: all 0.2s;
}

/* Completed/Checked State Logic */
.task-item.completed {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
}

.task-item.completed .task-checkbox {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    opacity: 0.5;
}

/* Add Task Dashed Button */
.btn-add-task {
    border: 1px dashed var(--theme-border) !important;
    color: var(--color-text-muted) !important;
    transition: all 0.2s;
}

.btn-add-task:hover {
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
    background-color: rgba(var(--color-primary-rgb), 0.05) !important;
}