/**
 * CRM System Styles
 * Modern, Clean, Responsive Design
 */

/* ============================================
   CSS VARIABLES
   ============================================ */
:root {
    /* Colors */
    --color-primary: #4f46e5;
    --color-primary-dark: #4338ca;
    --color-primary-light: #6366f1;
    --color-primary-bg: #eef2ff;
    
    --color-success: #10b981;
    --color-success-bg: #d1fae5;
    --color-warning: #f59e0b;
    --color-warning-bg: #fef3c7;
    --color-danger: #ef4444;
    --color-danger-bg: #fee2e2;
    --color-info: #3b82f6;
    --color-info-bg: #dbeafe;
    
    /* Grays */
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    
    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --header-height: 64px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition: 200ms ease;
    --transition-slow: 300ms ease;
}

/* ============================================
   RESET & BASE
   ============================================ */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-gray-800);
    background-color: var(--color-gray-50);
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

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

img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
    color: var(--color-gray-900);
}

h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

p {
    margin-bottom: 1rem;
}

.text-muted { color: var(--color-gray-500); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-primary { color: var(--color-primary); }

/* ============================================
   BUTTONS
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.btn svg {
    width: 1rem;
    height: 1rem;
}

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

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    color: white;
}

.btn-secondary {
    background-color: var(--color-gray-600);
    color: white;
}

.btn-secondary:hover {
    background-color: var(--color-gray-700);
    color: white;
}

.btn-outline {
    background-color: transparent;
    border-color: var(--color-gray-300);
    color: var(--color-gray-700);
}

.btn-outline:hover {
    background-color: var(--color-gray-100);
    border-color: var(--color-gray-400);
    color: var(--color-gray-900);
}

.btn-ghost {
    background-color: transparent;
    color: var(--color-gray-600);
}

.btn-ghost:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-900);
}

.btn-danger {
    background-color: var(--color-danger);
    color: white;
}

.btn-danger:hover {
    background-color: #dc2626;
    color: white;
}

.btn-lg {
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
}

.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
}

.btn-block {
    width: 100%;
}

/* ============================================
   FORMS
   ============================================ */
.form-group {
    margin-bottom: 1.25rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--color-gray-900);
    background-color: white;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.form-input::placeholder {
    color: var(--color-gray-400);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

.form-hint {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.form-error {
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: var(--color-danger);
}

.form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-check input[type="checkbox"],
.form-check input[type="radio"] {
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-primary);
}

.form-check-label {
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

/* ============================================
   CARDS
   ============================================ */
.card {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.card-header h2,
.card-header h3 {
    margin: 0;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    padding: 1rem 1.5rem;
    background-color: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
}

/* Inline Status Form (Settings - Tasks/Projects) */
.inline-status-form .inline-form-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}

.inline-status-form .inline-form-group-name {
    flex: 1 1 200px;
    min-width: 120px;
}

.inline-status-form .inline-form-group-color {
    flex: 0 0 50px;
    width: 50px;
}

.inline-status-form .inline-form-group-order {
    flex: 0 0 70px;
    width: 70px;
}

.inline-status-form .inline-form-group-checkbox {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.inline-status-form .inline-form-group-actions {
    flex: 0 0 auto;
    display: flex;
    gap: 0.5rem;
}

.inline-status-form .checkbox-inline {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    white-space: nowrap;
}

.inline-status-form .checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.inline-status-form .form-control {
    width: 100%;
    height: 38px;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background: white;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.inline-status-form .form-control:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}

.inline-status-form .form-control-color {
    padding: 4px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .inline-status-form .inline-form-row {
        flex-wrap: wrap;
    }
    
    .inline-status-form .inline-form-group-name {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .inline-status-form .inline-form-group-color,
    .inline-status-form .inline-form-group-order {
        flex: 0 0 auto;
    }
    
    .inline-status-form .inline-form-group-actions {
        margin-left: auto;
    }
}

/* ============================================
   ALERTS
   ============================================ */
.flash-messages {
    padding: 0 1.5rem;
    margin-bottom: 1rem;
}

.alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.875rem 1rem;
    margin-bottom: 0.75rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    transition: opacity var(--transition);
}

.alert-success {
    background-color: var(--color-success-bg);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background-color: var(--color-danger-bg);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning {
    background-color: var(--color-warning-bg);
    color: #92400e;
    border: 1px solid #fde68a;
}

.alert-info {
    background-color: var(--color-info-bg);
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

.alert-close {
    background: none;
    border: none;
    font-size: 1.25rem;
    line-height: 1;
    color: inherit;
    opacity: 0.7;
    cursor: pointer;
}

.alert-close:hover {
    opacity: 1;
}

/* ============================================
   SIDEBAR
   ============================================ */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background-color: var(--color-gray-900);
    color: white;
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width var(--transition-slow);
}

.sidebar.collapsed {
    width: var(--sidebar-collapsed-width);
}

.sidebar.collapsed .sidebar-header {
    padding: 1rem 0.5rem;
    justify-content: center;
}

.sidebar.collapsed .logo {
    justify-content: center;
}

.sidebar.collapsed .logo-text {
    display: none;
}

.sidebar.collapsed .logo-icon,
.sidebar.collapsed .logo-img {
    width: 32px;
    height: 32px;
}

.sidebar.collapsed .nav-section-title,
.sidebar.collapsed .nav-item span,
.sidebar.collapsed .user-info,
.sidebar.collapsed .dropdown-arrow {
    display: none;
}

.sidebar.collapsed .nav-item {
    justify-content: center;
    padding: 0.75rem;
    margin: 0.25rem 0.5rem;
}

.sidebar.collapsed .nav-item svg {
    margin: 0;
}

.sidebar.collapsed .sidebar-footer {
    padding: 0.75rem 0.5rem;
}

.sidebar.collapsed .user-menu-trigger {
    justify-content: center;
    padding: 0.75rem;
}

.sidebar.collapsed .user-menu-dropdown {
    left: 100%;
    bottom: 0;
    right: auto;
    margin-bottom: 0;
    margin-left: 0.5rem;
    min-width: 200px;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1rem;
    border-bottom: 1px solid var(--color-gray-700);
    position: relative;
}

.mobile-sidebar-close {
    display: none;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.mobile-sidebar-close:hover {
    color: white;
    background-color: var(--color-gray-700);
}

.mobile-sidebar-close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: white;
    text-decoration: none;
}

.logo-icon {
    width: 2rem;
    height: 2rem;
    color: var(--color-primary-light);
}

.logo-img {
    max-height: 2rem;
    max-width: 2.5rem;
    object-fit: contain;
}

.logo-text {
    font-size: 1.125rem;
    font-weight: 600;
}

.sidebar-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: var(--color-gray-500);
    cursor: pointer;
    padding: 0.5rem;
    border-radius: var(--radius);
    transition: color var(--transition-fast), background-color var(--transition-fast);
}

.sidebar-toggle:hover {
    color: var(--color-gray-700);
    background-color: var(--color-gray-100);
}

.sidebar-toggle svg {
    width: 1.25rem;
    height: 1.25rem;
}

.sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: 1rem 0;
}

.nav-section {
    margin-bottom: 1.5rem;
}

.nav-section-title {
    display: block;
    padding: 0 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    margin: 0 0.5rem;
    color: var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.nav-item:hover {
    color: white;
    background-color: var(--color-gray-800);
}

.nav-item.active {
    color: white;
    background-color: var(--color-primary);
}

.nav-item svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 0.6875rem;
    font-weight: 600;
    background: #EF4444;
    color: white;
    border-radius: 9px;
    margin-left: auto;
}

.sidebar-footer {
    padding: 1rem;
    border-top: 1px solid var(--color-gray-700);
}

.user-menu {
    position: relative;
}

.user-menu-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.user-menu-trigger:hover {
    background-color: var(--color-gray-800);
}

.user-avatar {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    flex-shrink: 0;
    overflow: hidden;
}

.user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.user-info {
    flex: 1;
    min-width: 0;
}

.user-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-email {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dropdown-arrow {
    width: 1rem;
    height: 1rem;
    color: var(--color-gray-400);
    transition: transform var(--transition-fast);
}

.user-menu-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin-bottom: 0.5rem;
    background-color: var(--color-gray-800);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all var(--transition-fast);
}

.user-menu-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    color: var(--color-gray-300);
    transition: all var(--transition-fast);
}

.dropdown-item:hover {
    color: white;
    background-color: var(--color-gray-700);
}

.dropdown-item svg {
    width: 1rem;
    height: 1rem;
}

.dropdown-divider {
    height: 1px;
    margin: 0.5rem 0;
    background-color: var(--color-gray-700);
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-left var(--transition-slow);
    display: flex;
    flex-direction: column;
}

.main-content .content-body {
    flex: 1;
}

.main-content.expanded {
    margin-left: var(--sidebar-collapsed-width);
}

.content-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: var(--header-height);
    padding: 0 1.5rem;
    background-color: white;
    border-bottom: 1px solid var(--color-gray-200);
    position: sticky;
    top: 0;
    z-index: 50;
}

.content-header .header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-gray-600);
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu-toggle svg {
    width: 1.5rem;
    height: 1.5rem;
}

.page-title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.header-icon-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: var(--radius);
    color: var(--color-gray-500);
    transition: all var(--transition-fast);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.header-icon-btn:hover {
    background-color: var(--color-gray-100);
    color: var(--color-gray-700);
}

.header-icon-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--color-primary-bg);
}

.header-icon-btn:focus-visible {
    box-shadow: 0 0 0 2px var(--color-primary);
}

.header-icon-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.notification-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 1.125rem;
    height: 1.125rem;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 600;
    color: white;
    background-color: var(--color-danger);
    border-radius: 999px;
    border: 2px solid white;
}

/* Search Container */
.search-container {
    position: relative;
}

.search-box {
    position: relative;
    width: 280px;
}

.search-box svg {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1rem;
    height: 1rem;
    color: var(--color-gray-400);
    pointer-events: none;
}

.search-box input {
    width: 100%;
    padding: 0.5rem 3rem 0.5rem 2.25rem;
    font-size: 0.875rem;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    background-color: var(--color-gray-50);
    transition: all var(--transition-fast);
}

.search-box input:focus {
    outline: none;
    background-color: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-bg);
}

.search-shortcut {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    padding: 0.125rem 0.375rem;
    font-size: 0.6875rem;
    font-family: inherit;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    color: var(--color-gray-400);
    pointer-events: none;
}

.search-box input:focus + .search-shortcut {
    display: none;
}

/* Search Results Dropdown */
.search-results {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;
    width: 400px;
    max-height: 70vh;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    overflow: hidden;
    z-index: 1000;
}

.search-results-inner {
    max-height: calc(70vh - 40px);
    overflow-y: auto;
}

.search-category {
    padding: 0.5rem 0;
}

.search-category:not(:first-child) {
    border-top: 1px solid var(--color-gray-100);
}

.search-category-title {
    padding: 0.375rem 1rem;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-400);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 1rem;
    text-decoration: none;
    color: inherit;
    transition: background var(--transition-fast);
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--color-gray-50);
}

.search-result-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}

.search-result-icon svg {
    width: 1rem;
    height: 1rem;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background: #FEF08A;
    color: inherit;
    padding: 0 0.125rem;
    border-radius: 2px;
}

.search-result-subtitle {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-badge {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-full);
    flex-shrink: 0;
}

.search-no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: var(--color-gray-400);
    text-align: center;
}

.search-no-results svg {
    opacity: 0.5;
}

.search-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
    color: var(--color-gray-400);
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-100);
}

.search-footer-hint {
    display: flex;
    gap: 0.75rem;
}

.content-body {
    padding: 1.5rem;
}

/* ============================================
   PUBLIC LAYOUT (LOGIN/REGISTER)
   ============================================ */
.public-layout {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background-color: white;
    border-bottom: 1px solid var(--color-gray-200);
}

.public-header .logo {
    color: var(--color-gray-900);
}

.public-header .logo-icon {
    color: var(--color-primary);
}

.public-nav {
    display: flex;
    gap: 0.75rem;
}

.public-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.public-footer {
    padding: 1.5rem 2rem;
    text-align: center;
    color: var(--color-gray-500);
    font-size: 0.875rem;
    border-top: 1px solid var(--color-gray-200);
}

.app-footer {
    margin-top: auto;
    padding: 1rem 1.5rem;
    text-align: center;
    color: var(--color-gray-400);
    font-size: 0.75rem;
    border-top: 1px solid var(--color-gray-200);
    background: var(--color-gray-50);
}

/* ============================================
   AUTH FORMS
   ============================================ */
.auth-container {
    width: 100%;
    max-width: 420px;
}

.auth-card {
    background-color: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 2.5rem;
}

.auth-header {
    text-align: center;
    margin-bottom: 2rem;
}

.auth-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--color-primary-bg);
    color: var(--color-primary);
    border-radius: var(--radius-lg);
    margin-bottom: 1rem;
}

.auth-header h1 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.auth-header p {
    color: var(--color-gray-500);
    margin: 0;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 1.5rem 0;
    color: var(--color-gray-400);
    font-size: 0.8125rem;
}

.auth-divider::before,
.auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-gray-200);
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.auth-footer a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.password-toggle {
    position: relative;
}

.password-toggle input {
    padding-right: 2.5rem;
}

.password-toggle button {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-gray-400);
    cursor: pointer;
}

/* ============================================
   DASHBOARD
   ============================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.stat-card {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}

.stat-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.stat-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.stat-icon.primary {
    background-color: var(--color-primary-bg);
    color: var(--color-primary);
}

.stat-icon.success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.stat-icon.warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

.stat-icon.info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
}

.stat-value {
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-top: 0.25rem;
}

.stat-change {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.5rem;
}

.stat-change.positive {
    color: var(--color-success);
}

.stat-change.negative {
    color: var(--color-danger);
}

/* ============================================
   ACCOUNT PAGES
   ============================================ */
.account-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 1.5rem;
}

.account-sidebar {
    background-color: white;
    border-radius: var(--radius-lg);
    padding: 1rem;
    height: fit-content;
    box-shadow: var(--shadow);
}

.account-nav {
    list-style: none;
}

.account-nav li {
    margin-bottom: 0.25rem;
}

.account-nav a {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.875rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.account-nav a:hover {
    color: var(--color-gray-900);
    background-color: var(--color-gray-100);
}

.account-nav a.active {
    color: var(--color-primary);
    background-color: var(--color-primary-bg);
}

.account-nav svg {
    width: 1.125rem;
    height: 1.125rem;
}

.account-content {
    background-color: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.account-section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.account-section:last-child {
    border-bottom: none;
}

.account-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.account-section-desc {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 1.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* ============================================
   ACTIVITY LOG
   ============================================ */
.activity-list {
    list-style: none;
}

.activity-item {
    display: flex;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon svg {
    width: 1rem;
    height: 1rem;
    color: var(--color-gray-500);
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.activity-time {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    margin-top: 0.25rem;
}

/* ============================================
   TABLES
   ============================================ */
.table-container {
    overflow-x: auto;
}

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

.table th,
.table td {
    padding: 0.875rem 1rem;
    text-align: left;
    border-bottom: 1px solid var(--color-gray-200);
}

.table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    background-color: var(--color-gray-50);
}

.table tbody tr:hover {
    background-color: var(--color-gray-50);
}

/* ============================================
   BADGES
   ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.badge-primary {
    background-color: var(--color-primary);
    color: white;
}

.badge-success {
    background-color: var(--color-success-bg);
    color: #065f46;
}

.badge-warning {
    background-color: var(--color-warning-bg);
    color: #92400e;
}

.badge-danger {
    background-color: var(--color-danger-bg);
    color: #991b1b;
}

.badge-gray {
    background-color: var(--color-gray-100);
    color: var(--color-gray-600);
}

/* ============================================
   EMPTY STATES
   ============================================ */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
}

.empty-state-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: var(--color-gray-300);
}

.empty-state-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.empty-state-desc {
    color: var(--color-gray-500);
    margin-bottom: 1.5rem;
}

/* ============================================
   COMING SOON
   ============================================ */
.coming-soon {
    text-align: center;
    padding: 4rem 2rem;
}

.coming-soon-icon {
    width: 5rem;
    height: 5rem;
    margin: 0 auto 1.5rem;
    color: var(--color-gray-300);
}

.coming-soon h2 {
    font-size: 1.5rem;
    margin-bottom: 0.75rem;
}

.coming-soon p {
    color: var(--color-gray-500);
    max-width: 400px;
    margin: 0 auto;
}

/* ============================================
   UTILITIES
   ============================================ */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

.grid {
    display: grid;
    gap: 1.5rem;
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }

.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
    .account-layout {
        grid-template-columns: 1fr;
    }
    
    .account-sidebar {
        display: flex;
        overflow-x: auto;
        padding: 0.5rem;
    }
    
    .account-nav {
        display: flex;
        gap: 0.5rem;
    }
    
    .account-nav li {
        margin-bottom: 0;
    }
    
    .account-nav a {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    
    .sidebar.mobile-open {
        transform: translateX(0);
    }
    
    .main-content {
        margin-left: 0;
    }
    
    .sidebar-toggle {
        display: none;
    }
    
    .mobile-sidebar-close {
        display: flex;
    }
    
    .mobile-menu-toggle {
        display: block;
    }
    
    .search-container {
        position: static;
    }
    
    .search-box {
        width: 44px;
        overflow: hidden;
    }
    
    .search-box input {
        opacity: 0;
        cursor: pointer;
    }
    
    .search-box:focus-within {
        position: fixed;
        top: 0.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
        z-index: 1001;
    }
    
    .search-box:focus-within input {
        opacity: 1;
        cursor: text;
    }
    
    .search-shortcut {
        display: none;
    }
    
    .search-results {
        position: fixed;
        top: 3.5rem;
        left: 0.5rem;
        right: 0.5rem;
        width: auto;
    }
    
    .form-row {
        grid-template-columns: 1fr;
    }
    
    .auth-card {
        padding: 1.5rem;
    }
    
    .public-header {
        padding: 1rem;
    }
    
    .public-nav .btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.8125rem;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   PAGE HEADER STYLES (for module pages)
   ============================================ */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header-content {
    flex: 1;
    min-width: 200px;
}

.page-header .page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin: 0 0 0.25rem 0;
}

.page-header .page-subtitle {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.page-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
    flex-wrap: wrap;
}

.breadcrumb a {
    color: var(--color-gray-500);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-separator {
    color: var(--color-gray-400);
}

@media (max-width: 640px) {
    .page-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .page-actions {
        width: 100%;
    }
    
    .page-actions .btn {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   SETTINGS MODULE
   ============================================ */
.settings-nav {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 1rem;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
    color: var(--color-gray-600);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all var(--transition-fast);
}

.settings-nav-item:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.settings-nav-item.active {
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.info-box {
    display: flex;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: #1E40AF;
}

.info-box svg {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.menu-links-list {
    display: flex;
    flex-direction: column;
}

.menu-link-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.menu-link-item:last-child { 
    border-bottom: none; 
}

.menu-link-item:hover { 
    background: var(--color-gray-50); 
}

.menu-link-item.inactive { 
    opacity: 0.6; 
}

.menu-link-drag {
    cursor: grab;
    color: var(--color-gray-400);
    padding: 0.25rem;
    margin-top: 0.25rem;
}

.menu-link-drag:hover { 
    color: var(--color-gray-600); 
}

.menu-link-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.menu-link-info { 
    flex: 1; 
    min-width: 0; 
}

.menu-link-label {
    font-weight: 600;
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.status-badge {
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.125rem 0.375rem;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
}

.status-badge.inactive { 
    background: var(--color-gray-200); 
    color: var(--color-gray-600); 
}

.menu-link-meta {
    display: flex;
    gap: 1rem;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: 0.5rem;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.text-warning { 
    color: #D97706; 
}

.menu-link-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.group-chip {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

.menu-link-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.inline-form { 
    display: inline; 
}

/* Settings Form Styles */
.form-container { 
    max-width: 640px; 
}

.menu-form {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.form-section {
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.form-section:last-of-type { 
    border-bottom: none; 
}

.form-section-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.form-section-desc {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 1.25rem;
}

.form-label.required::after {
    content: '*';
    color: var(--color-danger);
    margin-left: 0.25rem;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-top: 0.375rem;
}

.static-value {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-weight: 500;
}

.icon-selector {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 0.5rem;
}

.icon-option {
    cursor: pointer;
}

.icon-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.icon-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 0.5rem;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    color: var(--color-gray-500);
    gap: 0.375rem;
}

.icon-option input:checked + .icon-preview {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
    color: var(--color-primary);
}

.icon-option:hover .icon-preview {
    border-color: var(--color-gray-300);
}

.icon-label {
    display: block;
    text-align: center;
    font-size: 0.6875rem;
    color: inherit;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.group-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.group-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.group-checkbox:hover {
    border-color: var(--color-gray-300);
    background: var(--color-gray-50);
}

.group-checkbox:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-bg);
}

.group-checkbox input {
    margin-top: 0.125rem;
}

.group-checkbox-content {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.group-name {
    font-weight: 500;
    font-size: 0.9375rem;
}

.group-name .admin-badge {
    display: inline-flex;
    padding: 0.125rem 0.375rem;
    background: var(--color-warning-bg);
    color: #B45309;
    border-radius: var(--radius-sm);
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 0.5rem;
    vertical-align: middle;
}

.group-desc {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
}

@media (max-width: 640px) {
    .menu-link-item { 
        flex-wrap: wrap; 
    }
    
    .menu-link-actions { 
        width: 100%; 
        margin-top: 0.5rem; 
    }
}

/* ============================================
   SECURITY SETTINGS - IP WHITELIST
   ============================================ */
.ip-code {
    background: var(--color-gray-100);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
}

.ip-status {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
}

.ip-status.whitelisted {
    color: var(--color-success);
}

.ip-status.not-whitelisted {
    color: var(--color-danger);
}

.toggle-form {
    padding: 1.25rem;
}

.toggle-setting {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
}

.toggle-info {
    flex: 1;
}

.toggle-title {
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.25rem;
}

.toggle-desc {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.5;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--color-gray-300);
    transition: var(--transition);
    border-radius: 28px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: var(--transition);
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--color-primary);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

.toggle-status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.toggle-status.enabled {
    background: var(--color-success-bg);
    color: #065F46;
}

.toggle-status.disabled {
    background: var(--color-gray-100);
    color: var(--color-gray-600);
}

.quick-add-form {
    display: inline-flex;
}

.ip-form {
    padding: 1.25rem;
}

.form-row {
    display: flex;
    gap: 1rem;
}

.form-row .form-group {
    margin-bottom: 1rem;
}

.form-actions-inline {
    display: flex;
    justify-content: flex-start;
    padding-top: 0.5rem;
}

.ip-list {
    display: flex;
    flex-direction: column;
}

.ip-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--color-gray-100);
    transition: background var(--transition-fast);
}

.ip-item:last-child {
    border-bottom: none;
}

.ip-item:hover {
    background: var(--color-gray-50);
}

.ip-item.inactive {
    opacity: 0.6;
}

.ip-item.current {
    background: #F0FDF4;
}

.ip-item.current:hover {
    background: #DCFCE7;
}

.ip-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--color-gray-500);
}

.ip-item.current .ip-icon {
    background: #BBF7D0;
    color: #166534;
}

.ip-info {
    flex: 1;
    min-width: 0;
}

.ip-address {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.ip-address code {
    font-family: 'Monaco', 'Consolas', monospace;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-gray-900);
}

.ip-tag {
    display: inline-flex;
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ip-tag.current {
    background: #BBF7D0;
    color: #166534;
}

.ip-tag.inactive {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

.ip-label {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    margin-bottom: 0.25rem;
}

.ip-meta {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.meta-sep {
    margin: 0 0.375rem;
}

.ip-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}

.empty-state-small {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--color-gray-500);
}

.empty-state-small svg {
    margin-bottom: 0.75rem;
    opacity: 0.5;
}

.empty-state-small p {
    margin: 0;
    font-size: 0.875rem;
}

@media (max-width: 640px) {
    .form-row {
        flex-direction: column;
        gap: 0;
    }
    
    .toggle-setting {
        flex-direction: column;
        gap: 1rem;
    }
    
    .ip-item {
        flex-wrap: wrap;
    }
    
    .ip-actions {
        width: 100%;
        margin-top: 0.5rem;
        justify-content: flex-end;
    }
}

/* ============================================
   ACTIVITY LOGS
   ============================================ */
.filters-card {
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.filters-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: flex-end;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 180px;
}

.filter-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

.filter-actions {
    display: flex;
    gap: 0.5rem;
    margin-left: auto;
}

.logs-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.logs-count strong {
    color: var(--color-gray-900);
}

.log-datetime {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.log-date {
    font-weight: 500;
    color: var(--color-gray-900);
}

.log-time {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.log-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.log-user-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.log-user-info {
    display: flex;
    flex-direction: column;
    gap: 0.0625rem;
    min-width: 0;
}

.log-user-name {
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-gray-900);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-user-email {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.log-type {
    display: inline-flex;
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.log-type-auth {
    background: #DBEAFE;
    color: #1E40AF;
}

.log-type-security {
    background: #FEE2E2;
    color: #991B1B;
}

.log-type-general {
    background: var(--color-gray-100);
    color: var(--color-gray-700);
}

.log-description {
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.log-ip {
    font-family: 'SF Mono', Monaco, 'Courier New', monospace;
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    cursor: help;
}

/* Pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-gray-200);
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: white;
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.pagination-btn:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-400);
}

.pagination-pages {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.pagination-page {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    text-decoration: none;
    border-radius: var(--radius);
    transition: all var(--transition-fast);
}

.pagination-page:hover {
    background: var(--color-gray-100);
}

.pagination-page.active {
    background: var(--color-primary);
    color: white;
}

.pagination-ellipsis {
    padding: 0 0.25rem;
    color: var(--color-gray-400);
}

@media (max-width: 768px) {
    .filters-form {
        flex-direction: column;
    }
    
    .filter-group {
        width: 100%;
    }
    
    .filter-actions {
        margin-left: 0;
        width: 100%;
    }
    
    .filter-actions .btn {
        flex: 1;
    }
    
    .pagination {
        flex-wrap: wrap;
    }
    
    .pagination-pages {
        order: -1;
        width: 100%;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
}

/* ============================================
   HTML FIELD TYPE
   ============================================ */

/* HTML Editor in Form */
.html-editor-wrapper {
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius);
    overflow: hidden;
}

.html-editor-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-200);
}

.html-editor-label {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.html-editor-hint {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.html-code-editor {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    background: #1e1e2e;
    color: #cdd6f4;
    border: none;
    border-radius: 0;
    resize: vertical;
    tab-size: 2;
}

.html-code-editor:focus {
    outline: none;
    box-shadow: none;
}

.html-field-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--color-gray-50);
    border-top: 1px solid var(--color-gray-200);
}

.html-field-tags-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-right: 0.25rem;
}

.html-field-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    font-family: 'Monaco', 'Menlo', monospace;
    font-size: 0.6875rem;
    color: var(--color-primary);
    background: var(--color-primary-light);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.html-field-tag:hover {
    background: var(--color-primary);
    color: white;
}

/* HTML Field Output in View */
.html-field-output {
    padding: 1rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
    overflow: auto;
    max-height: 400px;
}

.html-field-output img {
    max-width: 100%;
    height: auto;
}

/* HTML Field in List View */
.html-field-list-output {
    max-height: 60px;
    overflow: hidden;
    font-size: 0.8125rem;
}

.html-field-list-output img {
    max-width: 80px;
    max-height: 50px;
    object-fit: contain;
    vertical-align: middle;
}

/* HTML Options Box in Field Settings */
.html-options-box {
    padding: 1rem;
    background: var(--color-gray-50);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius);
}

.html-options-box .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.html-options-box .form-check input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
}

.html-default-value-group {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-gray-200);
}

/* ============================================
   COLORED PAGE HEADER (Tickets, LiveChat style)
   ============================================ */
.colored-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: var(--radius-lg);
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
}

.colored-page-header .page-header-content {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.colored-page-header .page-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    color: white;
    backdrop-filter: blur(4px);
}

.colored-page-header .page-header-text h1 {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.025em;
}

.colored-page-header .page-header-text .breadcrumbs {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
}

.colored-page-header .page-header-text .breadcrumbs a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.colored-page-header .page-header-text .breadcrumbs a:hover {
    color: white;
}

.colored-page-header .page-header-text .breadcrumbs .separator {
    color: rgba(255, 255, 255, 0.5);
}

.colored-page-header .page-header-text .breadcrumbs .current {
    color: white;
    font-weight: 500;
}

.colored-page-header .page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.colored-page-header .btn-header {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: white;
    color: var(--color-primary);
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-fast);
    cursor: pointer;
}

.colored-page-header .btn-header:hover {
    background: var(--color-primary-bg);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.colored-page-header .btn-header svg {
    stroke-width: 2.5;
}

.colored-page-header .btn-header-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.colored-page-header .btn-header-outline:hover {
    background: rgba(255, 255, 255, 0.25);
    color: white;
    transform: translateY(-1px);
}

.colored-page-header .btn-header-outline svg {
    stroke-width: 2;
}

.colored-page-header .dropdown {
    position: relative;
}

.colored-page-header .dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
}

.colored-page-header .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
}

.colored-page-header .dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5rem;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    min-width: 200px;
    z-index: 100;
    display: none;
    padding: 0.5rem 0;
}

.colored-page-header .dropdown-menu.show {
    display: block;
}

.colored-page-header .dropdown-section {
    padding: 0.25rem 0;
}

.colored-page-header .dropdown-section-title {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.colored-page-header .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--color-gray-700);
    text-decoration: none;
    transition: all var(--transition-fast);
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.colored-page-header .dropdown-item:hover {
    background: var(--color-gray-100);
    color: var(--color-gray-900);
}

.colored-page-header .dropdown-item svg {
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.colored-page-header .dropdown-item-danger {
    color: var(--color-danger);
}

.colored-page-header .dropdown-item-danger:hover {
    background: #FEE2E2;
    color: #991B1B;
}

.colored-page-header .dropdown-item-danger svg {
    color: var(--color-danger);
}

.colored-page-header .dropdown-divider {
    height: 1px;
    background: var(--color-gray-200);
    margin: 0.5rem 0;
}

/* Header Stats for LiveChat */
.colored-page-header .header-stats {
    display: flex;
    gap: 0.75rem;
}

.colored-page-header .stat-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

.colored-page-header .stat-badge .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4ADE80;
}

.colored-page-header .stat-badge.pending .pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #FCD34D;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@media (max-width: 640px) {
    .colored-page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.25rem;
    }
    
    .colored-page-header .page-header-icon {
        width: 48px;
        height: 48px;
    }
    
    .colored-page-header .page-header-text h1 {
        font-size: 1.25rem;
    }
    
    .colored-page-header .page-header-actions {
        width: 100%;
    }
    
    .colored-page-header .btn-header {
        flex: 1;
        justify-content: center;
    }
}

/* ============================================
   DARK MODE
   ============================================ */

/* Theme Toggle Button - icon switching */
.theme-toggle .icon-sun {
    display: block;
}

.theme-toggle .icon-moon {
    display: none;
}

body.dark-mode .theme-toggle .icon-sun {
    display: none;
}

body.dark-mode .theme-toggle .icon-moon {
    display: block;
}

/* Smooth transition for theme switch */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.sidebar,
.main-content,
.content-header,
.card,
.form-input,
.form-select,
.form-textarea,
.table,
.dropdown-menu,
.user-menu-dropdown,
.modal-content {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Variables */
body.dark-mode {
    --color-gray-50: #1a1a2e;
    --color-gray-100: #16213e;
    --color-gray-200: #1f2937;
    --color-gray-300: #374151;
    --color-gray-400: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-600: #9ca3af;
    --color-gray-700: #d1d5db;
    --color-gray-800: #e5e7eb;
    --color-gray-900: #f3f4f6;
    
    --color-primary-bg: rgba(99, 102, 241, 0.15);
    --color-success-bg: rgba(16, 185, 129, 0.15);
    --color-warning-bg: rgba(245, 158, 11, 0.15);
    --color-danger-bg: rgba(239, 68, 68, 0.15);
    --color-info-bg: rgba(59, 130, 246, 0.15);
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
}

/* Dark Mode Body & Main Layout */
html.dark-mode,
body.dark-mode {
    background-color: #0f0f1a;
    color: #e5e7eb;
}

body.dark-mode .sidebar {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    border-right-color: #2d2d44;
}

body.dark-mode .sidebar-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .logo-text {
    color: #f3f4f6;
}

body.dark-mode .nav-item {
    color: #9ca3af;
}

body.dark-mode .nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f3f4f6;
}

body.dark-mode .nav-item.active {
    background: rgba(99, 102, 241, 0.15);
    color: #818cf8;
}

body.dark-mode .nav-section-title {
    color: #6b7280;
}

body.dark-mode .sidebar-footer {
    border-top-color: #2d2d44;
}

body.dark-mode .user-menu-trigger {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .user-menu-trigger:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.dark-mode .user-name {
    color: #f3f4f6;
}

body.dark-mode .user-email {
    color: #9ca3af;
}

body.dark-mode .user-menu-dropdown {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .user-menu-dropdown .dropdown-item {
    color: #d1d5db;
}

body.dark-mode .user-menu-dropdown .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .user-menu-dropdown .dropdown-divider {
    border-color: #374151;
}

/* Dark Mode Main Content */
body.dark-mode .main-content {
    background-color: #0f0f1a;
}

body.dark-mode .content-header {
    background-color: #1a1a2e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .header-icon-btn {
    color: #9ca3af;
}

body.dark-mode .header-icon-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #f3f4f6;
}

body.dark-mode .header-icon-btn:focus {
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.3);
}

body.dark-mode .search-box {
    background: #16213e;
    border-color: #374151;
}

body.dark-mode .search-box input {
    color: #f3f4f6;
}

body.dark-mode .search-box input::placeholder {
    color: #6b7280;
}

body.dark-mode .search-shortcut {
    background: #374151;
    color: #9ca3af;
}

body.dark-mode .search-results {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .search-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Cards & Content */
body.dark-mode .card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .card-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .card-title {
    color: #f3f4f6;
}

body.dark-mode .card-footer {
    border-top-color: #2d2d44;
    background: rgba(0, 0, 0, 0.2);
}

/* Dark Mode Forms */
body.dark-mode .form-label {
    color: #d1d5db;
}

body.dark-mode .form-input,
body.dark-mode .form-select,
body.dark-mode .form-textarea {
    background: #16213e;
    border-color: #374151;
    color: #f3f4f6;
}

body.dark-mode .form-input:focus,
body.dark-mode .form-select:focus,
body.dark-mode .form-textarea:focus {
    border-color: var(--color-primary);
    background: #1a1a2e;
}

body.dark-mode .form-input::placeholder,
body.dark-mode .form-textarea::placeholder {
    color: #6b7280;
}

body.dark-mode .form-hint {
    color: #6b7280;
}

body.dark-mode .form-section-title {
    color: #e5e7eb;
    border-bottom-color: #2d2d44;
}

/* Dark Mode Tables */
body.dark-mode .table {
    background: #1a1a2e;
}

body.dark-mode .table th {
    background: #16213e;
    color: #9ca3af;
    border-bottom-color: #2d2d44;
}

body.dark-mode .table td {
    border-bottom-color: #2d2d44;
    color: #d1d5db;
}

body.dark-mode .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

body.dark-mode .clickable-row:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Dark Mode Buttons */
body.dark-mode .btn-outline {
    border-color: #374151;
    color: #d1d5db;
}

body.dark-mode .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #4b5563;
}

/* Dark Mode Alerts */
body.dark-mode .alert {
    border-color: transparent;
}

/* Dark Mode Badges */
body.dark-mode .badge {
    background: #374151;
    color: #d1d5db;
}

/* Dark Mode Empty State */
body.dark-mode .empty-state {
    color: #9ca3af;
}

body.dark-mode .empty-state-icon {
    color: #4b5563;
}

/* Dark Mode Page Header (non-colored) */
body.dark-mode .page-header {
    background: #1a1a2e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .page-title {
    color: #f3f4f6;
}

body.dark-mode .page-subtitle {
    color: #9ca3af;
}

/* Dark Mode Breadcrumbs (non-colored header) */
body.dark-mode .breadcrumb a {
    color: #9ca3af;
}

body.dark-mode .breadcrumb a:hover {
    color: var(--color-primary-light);
}

body.dark-mode .breadcrumb-separator {
    color: #4b5563;
}

/* Dark Mode Filters */
body.dark-mode .filters-form {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .filter-label {
    color: #9ca3af;
}

/* Dark Mode Pagination */
body.dark-mode .pagination-btn {
    background: #1a1a2e;
    border-color: #374151;
    color: #d1d5db;
}

body.dark-mode .pagination-btn:hover:not(:disabled) {
    background: #16213e;
    border-color: #4b5563;
}

body.dark-mode .pagination-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

/* Dark Mode Dropdowns */
body.dark-mode .dropdown-menu {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .dropdown-item {
    color: #d1d5db;
}

body.dark-mode .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .dropdown-divider {
    border-color: #374151;
}

/* Dark Mode Modals */
body.dark-mode .modal-overlay {
    background: rgba(0, 0, 0, 0.75);
}

body.dark-mode .modal-content {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .modal-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3 {
    color: #f3f4f6;
}

body.dark-mode .modal-footer {
    border-top-color: #2d2d44;
    background: rgba(0, 0, 0, 0.2);
}

/* Dark Mode Tabs */
body.dark-mode .settings-tabs {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .settings-tab {
    color: #9ca3af;
}

body.dark-mode .settings-tab:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .settings-tab.active {
    background: var(--color-primary);
    color: white;
}

body.dark-mode .settings-tab svg {
    opacity: 0.8;
}

body.dark-mode .settings-tab.active svg {
    opacity: 1;
}

/* Dark Mode Status Badges */
body.dark-mode .status-badge {
    background: rgba(107, 114, 128, 0.2);
}

/* Dark Mode Toggle Switch */
body.dark-mode .toggle-switch {
    background: #374151;
}

body.dark-mode .toggle-switch.active {
    background: var(--color-primary);
}

/* Dark Mode Text Colors */
body.dark-mode .text-muted {
    color: #6b7280 !important;
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
    color: #f3f4f6;
}

/* Dark Mode Field Values */
body.dark-mode .field-value-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .field-label {
    color: #9ca3af;
}

body.dark-mode .field-value {
    color: #e5e7eb;
}

/* Dark Mode Sidebar Collapsed */
body.dark-mode .sidebar.collapsed .nav-item-tooltip {
    background: #1f2937;
    color: #f3f4f6;
}

/* Dark Mode Mobile Sidebar */
@media (max-width: 768px) {
    body.dark-mode .sidebar {
        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
    }
}

/* Dark Mode Scrollbar */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1a1a2e;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Dark Mode Selection */
body.dark-mode ::selection {
    background: var(--color-primary);
    color: white;
}

/* Dark Mode Colored Page Header */
body.dark-mode .colored-page-header {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
}

/* Dark Mode Colored Page Header Buttons */
body.dark-mode .colored-page-header .btn-header {
    background: rgba(255, 255, 255, 0.95) !important;
    color: var(--color-primary) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

body.dark-mode .colored-page-header .btn-header:hover {
    background: #ffffff !important;
    color: var(--color-primary-dark) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    transform: translateY(-3px) scale(1.02) !important;
}

body.dark-mode .colored-page-header .btn-header-outline {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: white !important;
}

body.dark-mode .colored-page-header .btn-header-outline:hover {
    background: rgba(255, 255, 255, 0.3) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: white !important;
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .colored-page-header .page-header-actions .btn,
body.dark-mode .colored-page-header .page-header-actions button {
    transition: all 0.2s ease !important;
}

body.dark-mode .colored-page-header .page-header-actions .btn:hover,
body.dark-mode .colored-page-header .page-header-actions button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .colored-page-header .dropdown-toggle {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

body.dark-mode .colored-page-header .dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .colored-page-header .dropdown-menu {
    background: #1a1a2e;
    border-color: #2d2d44;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .colored-page-header .dropdown-section-title {
    color: #6b7280;
}

body.dark-mode .colored-page-header .dropdown-item {
    color: #e5e7eb;
}

body.dark-mode .colored-page-header .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

body.dark-mode .colored-page-header .dropdown-item svg {
    color: #9ca3af;
}

body.dark-mode .colored-page-header .dropdown-item:hover svg {
    color: #e5e7eb;
}

body.dark-mode .colored-page-header .dropdown-item-danger {
    color: #F87171;
}

body.dark-mode .colored-page-header .dropdown-item-danger:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #FCA5A5;
}

body.dark-mode .colored-page-header .dropdown-item-danger svg {
    color: #F87171;
}

body.dark-mode .colored-page-header .dropdown-divider {
    border-color: #2d2d44;
}

/* Dark Mode Stats */
body.dark-mode .stats-grid .stat-card,
body.dark-mode .stat-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .stat-label {
    color: #9ca3af;
}

body.dark-mode .stat-value {
    color: #f3f4f6;
}

/* Dark Mode Chat Layout */
body.dark-mode .chat-layout,
body.dark-mode .sessions-panel,
body.dark-mode .chat-detail-panel {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .session-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .session-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .messages-area {
    background: #0f0f1a;
}

body.dark-mode .message-bubble {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .message-bubble.agent {
    background: var(--color-primary);
    color: white;
}

/* Dark Mode Ticket Layout */
body.dark-mode .ticket-layout,
body.dark-mode .ticket-sidebar {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .ticket-meta-bar .status-badge,
body.dark-mode .ticket-meta-bar .priority-badge {
    background: rgba(107, 114, 128, 0.3);
}

/* Dark Mode Survey/KB Cards */
body.dark-mode .survey-card,
body.dark-mode .kb-article-card,
body.dark-mode .kb-category-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .survey-card:hover,
body.dark-mode .kb-article-card:hover,
body.dark-mode .kb-category-card:hover {
    border-color: var(--color-primary);
    background: #1f2937;
}

/* Dark Mode Calendar */
body.dark-mode .calendar-container {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .calendar-day {
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .calendar-day:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .calendar-day.other-month {
    color: #4b5563;
}

body.dark-mode .calendar-day.today {
    background: var(--color-primary-bg);
}

/* Dark Mode Kanban */
body.dark-mode .kanban-column {
    background: #1a1a2e;
}

body.dark-mode .kanban-card {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .kanban-card:hover {
    border-color: var(--color-primary);
}

/* Dark Mode Webmail - Comprehensive */
body.dark-mode .webmail-layout {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .webmail-sidebar {
    background: #16213e;
    border-right-color: #2d2d44;
}

body.dark-mode .webmail-nav-item {
    color: #9ca3af;
}

body.dark-mode .webmail-nav-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #e5e7eb;
}

body.dark-mode .webmail-nav-item.active {
    background: var(--color-primary);
    color: white;
}

body.dark-mode .webmail-main {
    background: #1a1a2e;
}

body.dark-mode .webmail-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .webmail-header h1 {
    color: #f3f4f6;
}

body.dark-mode .bulk-actions-bar {
    background: #16213e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .selected-count {
    color: #e5e7eb;
}

body.dark-mode .email-list {
    background: #1a1a2e;
}

body.dark-mode .email-item {
    border-bottom-color: #2d2d44;
    color: #9ca3af;
}

body.dark-mode .email-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .email-item.unread {
    background: rgba(99, 102, 241, 0.15);
}

body.dark-mode .email-item.unread .email-sender,
body.dark-mode .email-item.unread .email-subject {
    color: #f3f4f6;
}

body.dark-mode .email-sender {
    color: #e5e7eb;
}

body.dark-mode .email-subject {
    color: #d1d5db;
}

body.dark-mode .email-preview {
    color: #6b7280;
}

body.dark-mode .email-meta {
    color: #6b7280;
}

body.dark-mode .email-star {
    color: #4b5563;
}

body.dark-mode .email-star.starred {
    color: #F59E0B;
}

body.dark-mode .email-view {
    background: #1a1a2e;
}

body.dark-mode .email-subject-title {
    color: #f3f4f6;
}

body.dark-mode .email-from-name {
    color: #f3f4f6;
}

body.dark-mode .email-from-address {
    color: #9ca3af;
}

body.dark-mode .email-to-info {
    color: #9ca3af;
}

body.dark-mode .email-date-info {
    color: #6b7280;
}

body.dark-mode .email-body {
    border-top-color: #2d2d44;
}

body.dark-mode .email-body-text {
    color: #d1d5db;
}

body.dark-mode .email-body-html {
    color: #d1d5db;
}

body.dark-mode .email-body-html blockquote {
    border-left-color: #4b5563;
    color: #9ca3af;
}

body.dark-mode .email-body-html pre,
body.dark-mode .email-body-html code {
    background: #16213e;
    color: #e5e7eb;
}

body.dark-mode .email-attachments {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .attachment-item {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .attachment-item:hover {
    border-color: var(--color-primary);
}

body.dark-mode .attachment-size {
    color: #6b7280;
}

body.dark-mode .back-link {
    color: #9ca3af;
}

body.dark-mode .back-link:hover {
    color: var(--color-primary-light);
}

/* Dark Mode Compose Form */
body.dark-mode .compose-form {
    background: #1a1a2e;
}

body.dark-mode .compose-fields {
    border-bottom-color: #2d2d44;
}

body.dark-mode .compose-field {
    border-bottom-color: #2d2d44;
}

body.dark-mode .compose-label {
    color: #9ca3af;
}

body.dark-mode .compose-input {
    background: transparent;
    color: #e5e7eb;
    border-color: transparent;
}

body.dark-mode .compose-input::placeholder {
    color: #6b7280;
}

body.dark-mode .compose-body {
    background: #1a1a2e;
}

body.dark-mode .compose-textarea {
    background: transparent;
    color: #e5e7eb;
}

body.dark-mode .compose-textarea::placeholder {
    color: #6b7280;
}

body.dark-mode .compose-footer {
    background: #16213e;
    border-top-color: #2d2d44;
}

/* Dark Mode Empty State */
body.dark-mode .empty-state {
    color: #9ca3af;
}

body.dark-mode .empty-icon {
    color: #4b5563;
}

body.dark-mode .empty-state h3 {
    color: #e5e7eb;
}

body.dark-mode .empty-state p {
    color: #9ca3af;
}

/* Dark Mode Rich Text Editor */
body.dark-mode .editor-toolbar {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .editor-content {
    background: #1a1a2e;
    border-color: #2d2d44;
    color: #e5e7eb;
}

/* Dark Mode Toolbar Buttons */
body.dark-mode .toolbar-btn {
    color: #9ca3af;
}

body.dark-mode .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body.dark-mode .toolbar-divider {
    background: #4b5563;
}

body.dark-mode .toolbar-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .toolbar-color {
    border-color: #4b5563;
}

/* Dark Mode HTML Editor */
body.dark-mode .html-editor {
    background: #1a1a2e;
    color: #e5e7eb;
}

body.dark-mode .html-editor:focus {
    background: #16213e;
}

/* Dark Mode Attachments Section */
body.dark-mode .attachments-section {
    background: #16213e;
    border-top-color: #2d2d44;
}

body.dark-mode .attachments-header {
    color: #9ca3af;
}

body.dark-mode .attachments-header svg {
    color: #6b7280;
}

body.dark-mode .forwarded-attachments-section {
    background: rgba(245, 158, 11, 0.15);
    border-top-color: #2d2d44;
}

body.dark-mode .forwarded-attachments-section .attachments-header {
    color: #FCD34D;
}

body.dark-mode .forwarded-attachments-section .attachments-header svg {
    color: #F59E0B;
}

/* Dark Mode Compose Actions */
body.dark-mode .compose-actions {
    background: #16213e;
    border-top-color: #2d2d44;
}

/* Dark Mode Compose Field Labels */
body.dark-mode .compose-field label {
    color: #9ca3af;
}

/* Dark Mode Compose Body Border */
body.dark-mode .compose-body {
    border-bottom-color: #2d2d44;
}

/* Dark Mode Color Picker */
body.dark-mode .color-presets button {
    border-color: #2d2d44;
}

/* Dark Mode Inline Forms */
body.dark-mode .inline-status-form input,
body.dark-mode .inline-status-form select {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

/* Dark Mode Questions List */
body.dark-mode .question-item {
    background: #1a1a2e;
    border-color: #2d2d44;
}

/* Dark Mode Empty State */
body.dark-mode .empty-state-icon svg {
    stroke: #4b5563;
}

/* Dark Mode Breadcrumbs in non-colored headers */
body.dark-mode .breadcrumb a {
    color: #9ca3af;
}

body.dark-mode .breadcrumb a:hover {
    color: var(--color-primary-light);
}

/* Dark Mode Priority Badges */
body.dark-mode .priority-badge {
    background: rgba(107, 114, 128, 0.2);
}

/* Dark Mode Activity Log */
body.dark-mode .activity-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .activity-icon {
    background: #1f2937;
}

/* Dark Mode User Avatar */
body.dark-mode .user-avatar {
    border-color: #2d2d44;
}

/* Dark Mode Notification Items */
body.dark-mode .notification-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .notification-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .notification-item.unread {
    background: rgba(99, 102, 241, 0.1);
}

/* Dark Mode Code/Mono text */
body.dark-mode code,
body.dark-mode .font-mono {
    background: #1f2937;
    color: #e5e7eb;
}

/* Dark Mode Links */
body.dark-mode a {
    color: var(--color-primary-light);
}

body.dark-mode a:hover {
    color: var(--color-primary);
}

/* Ensure buttons stay correct */
body.dark-mode .btn-primary {
    background: var(--color-primary);
    color: white;
}

body.dark-mode .btn-danger {
    background: var(--color-danger);
    color: white;
}

/* Dark Mode Webmail Pagination */
body.dark-mode .pagination {
    background: #16213e;
    border-top-color: #2d2d44;
}

body.dark-mode .pagination-btn {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .pagination-btn:hover {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .pagination-info {
    color: #9ca3af;
}

/* Dark Mode Email Toolbar */
body.dark-mode .email-toolbar {
    background: #16213e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .select-all-checkbox {
    color: #9ca3af;
}

body.dark-mode .email-count {
    color: #6b7280;
}

/* Dark Mode Webmail Actions */
body.dark-mode .webmail-actions .btn-outline {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .webmail-actions .btn-outline:hover {
    background: #374151;
    border-color: #4b5563;
}

/* Dark Mode Badge Count (active state) */
body.dark-mode .webmail-nav-item.active .badge-count {
    background: rgba(255, 255, 255, 0.2);
}

/* Dark Mode Compose Button */
body.dark-mode .btn-compose {
    background: var(--color-primary);
    color: white;
}

/* Dark Mode Checkbox */
body.dark-mode .email-select {
    accent-color: var(--color-primary);
}

/* ============================================
   DARK MODE - OBJECTS MODULE
   ============================================ */

/* Objects List Page */
body.dark-mode .filters-bar {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .stat-chip {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .stat-label {
    color: #9ca3af;
}

body.dark-mode .stat-value {
    color: #f3f4f6;
}

body.dark-mode .instance-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .instance-card:hover {
    border-color: #4b5563;
}

body.dark-mode .instance-name {
    color: #f3f4f6;
}

body.dark-mode .instance-slug {
    color: #6b7280;
}

body.dark-mode .instance-desc {
    color: #9ca3af;
}

body.dark-mode .instance-card-footer {
    background: #16213e;
    border-top-color: #2d2d44;
}

body.dark-mode .stat-item {
    color: #9ca3af;
}

body.dark-mode .access-general {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

body.dark-mode .access-read {
    background: rgba(245, 158, 11, 0.2);
    color: #FCD34D;
}

body.dark-mode .access-edit {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

/* Objects Table Container */
body.dark-mode .table-container {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .data-table th {
    background: #16213e;
    border-bottom-color: #2d2d44;
    color: #9ca3af;
}

body.dark-mode .data-table td {
    border-bottom-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .data-table tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .sort-link {
    color: #9ca3af;
}

body.dark-mode .sort-link:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .record-link {
    color: #f3f4f6;
}

body.dark-mode .ref-list-link {
    color: #e5e7eb;
}

body.dark-mode .ref-list-link svg {
    color: #6b7280;
}

body.dark-mode .ref-list-default {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Objects View/Detail Page */
body.dark-mode .object-layout .card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .card-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .card-title {
    color: #f3f4f6;
}

body.dark-mode .field-value-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .field-label {
    color: #9ca3af;
}

body.dark-mode .field-type-badge {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

body.dark-mode .field-value {
    color: #e5e7eb;
}

body.dark-mode .text-value {
    background: #16213e;
    color: #e5e7eb;
}

body.dark-mode .multi-value {
    background: #1f2937;
    color: #e5e7eb;
}

body.dark-mode .file-display {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .file-display-action {
    color: #6b7280;
}

body.dark-mode .image-display-link {
    border-color: #2d2d44;
}

body.dark-mode .image-display-link:hover {
    border-color: var(--color-primary);
}

body.dark-mode .linked-meta {
    color: #6b7280;
}

/* Objects Fields Page */
body.dark-mode .fields-layout .card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .field-item {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .field-item:hover {
    border-color: #4b5563;
}

body.dark-mode .field-drag {
    color: #6b7280;
}

body.dark-mode .field-drag:hover {
    color: #9ca3af;
}

body.dark-mode .field-name {
    color: #f3f4f6;
}

body.dark-mode .field-type {
    color: #9ca3af;
}

body.dark-mode .field-slug {
    color: #6b7280;
}

body.dark-mode .field-badge.required {
    background: rgba(220, 38, 38, 0.2);
    color: #F87171;
}

body.dark-mode .field-badge.unique {
    background: rgba(37, 99, 235, 0.2);
    color: #60A5FA;
}

body.dark-mode .field-visibility-badge {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Objects Attributes Page */
body.dark-mode .attribute-item {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .attribute-item:hover {
    border-color: #4b5563;
}

body.dark-mode .attribute-name {
    color: #f3f4f6;
}

body.dark-mode .attribute-key {
    color: #6b7280;
}

/* Objects Categories Page */
body.dark-mode .category-item {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .category-item:hover {
    border-color: #4b5563;
}

body.dark-mode .category-name {
    color: #f3f4f6;
}

/* Objects Form Pages */
body.dark-mode .object-form .card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .form-hint {
    color: #6b7280;
}

/* Dark Mode Pagination */
body.dark-mode .pagination-container {
    background: transparent;
}

body.dark-mode .pagination-info {
    color: #9ca3af;
}

body.dark-mode .pagination-btn {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .pagination-btn:hover:not(.disabled):not(.active) {
    background: #374151;
    border-color: #4b5563;
}

body.dark-mode .pagination-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

body.dark-mode .pagination-ellipsis {
    color: #6b7280;
}

/* Dark Mode Filter Group */
body.dark-mode .filter-group label {
    color: #9ca3af;
}

/* Dark Mode Boolean Badges */
body.dark-mode .boolean-badge.yes {
    background: rgba(5, 150, 105, 0.2);
    color: #34D399;
}

body.dark-mode .boolean-badge.no {
    background: rgba(220, 38, 38, 0.2);
    color: #F87171;
}

/* Dark Mode Card Danger */
body.dark-mode .card-danger {
    border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .card-danger .card-header {
    background: rgba(239, 68, 68, 0.1);
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

body.dark-mode .card-danger .card-title {
    color: #F87171;
}

/* Dark Mode Generic Badge */
body.dark-mode .badge {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Dark Mode Form Section Title */
body.dark-mode .form-section-title {
    color: #f3f4f6;
    border-bottom-color: #2d2d44;
}

/* Dark Mode Action Buttons in Cards */
body.dark-mode .field-actions .btn-icon,
body.dark-mode .instance-actions .btn-icon {
    color: #9ca3af;
}

body.dark-mode .field-actions .btn-icon:hover,
body.dark-mode .instance-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

/* Dark Mode Text Colors */
body.dark-mode .text-muted {
    color: #6b7280 !important;
}

body.dark-mode .text-gray-500 {
    color: #9ca3af !important;
}

body.dark-mode .text-gray-400 {
    color: #6b7280 !important;
}

/* Dark Mode Object Forms */
body.dark-mode .object-form {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .form-section-title {
    color: #f3f4f6;
}

body.dark-mode .form-actions {
    background: #16213e;
    border-top-color: #2d2d44;
}

body.dark-mode .toggle-slider {
    background-color: #4b5563;
}

body.dark-mode .toggle-label {
    color: #9ca3af;
}

/* Dark Mode File/Image Upload */
body.dark-mode .file-upload-area,
body.dark-mode .image-upload-area {
    border-color: #4b5563;
    background: #16213e;
}

body.dark-mode .file-upload-area:hover,
body.dark-mode .image-upload-area:hover {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
}

body.dark-mode .file-upload-area.has-file,
body.dark-mode .image-upload-area.has-image {
    border-color: #2d2d44;
}

body.dark-mode .file-upload-placeholder,
body.dark-mode .image-upload-placeholder {
    color: #6b7280;
}

body.dark-mode .file-upload-text,
body.dark-mode .image-upload-text {
    color: #9ca3af;
}

body.dark-mode .file-upload-hint,
body.dark-mode .image-upload-hint {
    color: #6b7280;
}

body.dark-mode .file-preview {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .file-hint {
    color: #6b7280;
}

body.dark-mode .image-preview {
    border-color: #2d2d44;
}

/* Dark Mode Reference Box */
body.dark-mode .ref-empty-box {
    background: #16213e;
    border-color: #4b5563;
    color: #9ca3af;
}

body.dark-mode .ref-error-box {
    background: rgba(220, 38, 38, 0.1);
    border-color: rgba(220, 38, 38, 0.3);
    color: #F87171;
}

body.dark-mode .ref-open-btn {
    background: rgba(99, 102, 241, 0.1);
}

/* Dark Mode Connection Items */
body.dark-mode .connection-item {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .connection-item:hover {
    border-color: #4b5563;
}

/* Dark Mode Select Dropdown */
body.dark-mode .form-select option {
    background: #1f2937;
    color: #e5e7eb;
}

/* Dark Mode Color Input */
body.dark-mode input[type="color"] {
    background: #1f2937;
    border-color: #2d2d44;
}

/* Dark Mode HTML Editor */
body.dark-mode .html-editor-container {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .html-editor-toolbar {
    background: #16213e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .html-editor-content {
    background: #1a1a2e;
    color: #e5e7eb;
}

/* Dark Mode Modal */
body.dark-mode .modal-content {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .modal-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .modal-header h2,
body.dark-mode .modal-header h3 {
    color: #f3f4f6;
}

body.dark-mode .modal-body {
    color: #e5e7eb;
}

body.dark-mode .modal-footer {
    background: #16213e;
    border-top-color: #2d2d44;
}

/* ============================================
   DARK MODE - PROJECTS & TASKS MODULES
   ============================================ */

/* Projects/Tasks List Container */
body.dark-mode .task-list-container,
body.dark-mode .project-list-container {
    background: #1a1a2e;
    border-color: #2d2d44;
}

/* Task/Project Tables */
body.dark-mode .task-table th,
body.dark-mode .project-table th {
    background: #16213e;
    border-bottom-color: #2d2d44;
    color: #9ca3af;
}

body.dark-mode .task-table td,
body.dark-mode .project-table td {
    border-bottom-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .task-row:hover,
body.dark-mode .project-row:hover {
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .task-link,
body.dark-mode .project-link {
    color: #f3f4f6;
}

body.dark-mode .task-link:hover,
body.dark-mode .project-link:hover {
    color: var(--color-primary-light);
}

/* Task/Project View Layout */
body.dark-mode .task-layout .card,
body.dark-mode .project-layout .card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .task-header-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .task-title {
    color: #f3f4f6;
}

body.dark-mode .task-title.completed {
    color: #6b7280;
}

body.dark-mode .task-description,
body.dark-mode .project-description {
    color: #d1d5db;
}

/* Priority Badges Dark Mode */
body.dark-mode .priority-urgent {
    background: rgba(220, 38, 38, 0.2);
    color: #F87171;
}

body.dark-mode .priority-high {
    background: rgba(217, 119, 6, 0.2);
    color: #FBBF24;
}

body.dark-mode .priority-medium {
    background: rgba(37, 99, 235, 0.2);
    color: #60A5FA;
}

body.dark-mode .priority-low {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Status Select */
body.dark-mode .status-select {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .status-select:focus {
    border-color: var(--color-primary);
}

/* Task Stats Overview */
body.dark-mode .task-status-overview {
    background: #16213e;
}

body.dark-mode .status-label {
    color: #9ca3af;
}

body.dark-mode .status-num {
    color: #f3f4f6;
}

/* Task/Subtask Items */
body.dark-mode .task-item,
body.dark-mode .subtask-item {
    border-color: #2d2d44;
    background: transparent;
}

body.dark-mode .task-item:hover,
body.dark-mode .subtask-item:hover {
    border-color: #4b5563;
    background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .task-content .task-title,
body.dark-mode .subtask-title {
    color: #e5e7eb;
}

body.dark-mode .task-due {
    color: #9ca3af;
}

body.dark-mode .task-due.overdue {
    color: #F87171;
}

/* Subtask Progress */
body.dark-mode .subtask-progress-bar {
    background: #2d2d44;
}

body.dark-mode .subtask-progress-text {
    color: #9ca3af;
}

/* Project Details Grid */
body.dark-mode .project-details-grid .detail-label {
    color: #9ca3af;
}

body.dark-mode .project-details-grid .detail-value {
    color: #e5e7eb;
}

/* Member List */
body.dark-mode .member-item .member-name {
    color: #f3f4f6;
}

body.dark-mode .member-item .member-role {
    color: #9ca3af;
}

/* Avatar Dark Mode */
body.dark-mode .avatar {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-primary-light);
}

/* Parent Task Notice */
body.dark-mode .parent-task-notice {
    background: #16213e;
    color: #9ca3af;
}

body.dark-mode .parent-task-notice svg {
    color: #6b7280;
}

/* Record Subtitle */
body.dark-mode .record-subtitle {
    color: #6b7280;
}

/* Progress Bar Small */
body.dark-mode .progress-bar-small {
    background: #2d2d44;
}

body.dark-mode .progress-text-small {
    color: #9ca3af;
}

/* Date Cell */
body.dark-mode .date-cell {
    color: #9ca3af;
}

/* Row Actions */
body.dark-mode .row-actions .btn-icon {
    color: #9ca3af;
}

body.dark-mode .row-actions .btn-icon:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

/* Task Stats Chips */
body.dark-mode .task-stats .stat-chip {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .stat-success .stat-value {
    color: #34D399;
}

body.dark-mode .stat-danger .stat-value {
    color: #F87171;
}

body.dark-mode .stat-primary .stat-value {
    color: var(--color-primary-light);
}

/* Form Select Small */
body.dark-mode .form-select-sm {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

/* Form Label Inline */
body.dark-mode .form-label-inline {
    color: #9ca3af;
}

/* Card Footer */
body.dark-mode .card-footer {
    border-top-color: #2d2d44;
    background: #16213e;
}

/* Quick Actions */
body.dark-mode .task-quick-actions .btn-outline {
    background: transparent;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .task-quick-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #6b7280;
}

/* Activity Items in Tasks/Projects */
body.dark-mode .activity-list .activity-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .activity-content {
    color: #d1d5db;
}

body.dark-mode .activity-time {
    color: #6b7280;
}

/* Comment Section */
body.dark-mode .comment-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .comment-author {
    color: #f3f4f6;
}

body.dark-mode .comment-time {
    color: #6b7280;
}

body.dark-mode .comment-content {
    color: #d1d5db;
}

/* Customer Link in Projects/Tasks */
body.dark-mode .customer-link {
    color: var(--color-primary-light);
}

body.dark-mode .customer-link:hover {
    color: var(--color-primary);
}

/* Text Danger/Success/Muted overrides */
body.dark-mode .text-danger {
    color: #F87171 !important;
}

body.dark-mode .text-success {
    color: #34D399 !important;
}

/* Detail Item */
body.dark-mode .detail-item .detail-label {
    color: #9ca3af;
}

body.dark-mode .detail-item .detail-value {
    color: #e5e7eb;
}

/* Project/Task Form Dark Mode */
body.dark-mode .project-form,
body.dark-mode .task-form {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .form-section {
    border-bottom-color: #2d2d44;
}

body.dark-mode .form-section-title {
    color: #f3f4f6;
}

body.dark-mode .form-section-desc {
    color: #9ca3af;
}

/* Group Access Item */
body.dark-mode .group-access-item {
    background: #16213e;
}

body.dark-mode .group-name {
    color: #f3f4f6;
}

body.dark-mode .group-desc {
    color: #9ca3af;
}

/* Customers Selection */
body.dark-mode .customers-search-box {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .customers-search-results {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .customer-result-item {
    border-bottom-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .customer-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .customer-result-company {
    color: #9ca3af;
}

/* User Selection / Assignee Dropdown */
body.dark-mode .assignee-dropdown {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .assignee-option {
    color: #e5e7eb;
}

body.dark-mode .assignee-option:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Empty State Small */
body.dark-mode .empty-state-sm {
    color: #9ca3af;
}

body.dark-mode .empty-state-sm p {
    color: #9ca3af;
}

/* ============================================
   DARK MODE - KANBAN BOARD
   ============================================ */

/* Kanban Filters */
body.dark-mode .kanban-filters {
    background: #1a1a2e;
    border-color: #2d2d44;
}

/* Kanban Board */
body.dark-mode .kanban-board {
    background: transparent;
}

/* Kanban Column */
body.dark-mode .kanban-column {
    background: #16213e;
}

/* Column Header */
body.dark-mode .column-header {
    background: #1a1a2e;
}

body.dark-mode .column-title {
    color: #e5e7eb;
}

/* Task Count Badge */
body.dark-mode .task-count {
    background: #2d2d44;
    color: #9ca3af;
}

/* Column Body */
body.dark-mode .column-body {
    background: #16213e;
}

body.dark-mode .column-body.drag-over {
    background: rgba(99, 102, 241, 0.15);
}

/* Kanban Card */
body.dark-mode .kanban-card {
    background: #1a1a2e;
    border-color: #2d2d44;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

body.dark-mode .kanban-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: #4b5563;
}

body.dark-mode .kanban-card.drag-preview {
    border-color: var(--color-primary);
    background: rgba(99, 102, 241, 0.1);
}

/* Card Title */
body.dark-mode .kanban-card .card-title {
    color: #f3f4f6;
}

body.dark-mode .kanban-card .card-title:hover {
    color: var(--color-primary-light);
}

/* Project Tag */
body.dark-mode .project-tag {
    background: #2d2d44;
    color: #9ca3af;
}

/* Due Date */
body.dark-mode .due-date {
    color: #9ca3af;
}

body.dark-mode .due-date.overdue {
    color: #F87171;
}

body.dark-mode .due-date.due-soon {
    color: #FBBF24;
}

/* Kanban Empty State */
body.dark-mode .kanban-empty {
    color: #6b7280;
}

body.dark-mode .kanban-empty-icon {
    color: #4b5563;
}

/* Card Priority Badges (Kanban specific) */
body.dark-mode .kanban-card .priority-badge.priority-urgent {
    background: rgba(220, 38, 38, 0.2);
    color: #F87171;
}

body.dark-mode .kanban-card .priority-badge.priority-high {
    background: rgba(217, 119, 6, 0.2);
    color: #FBBF24;
}

body.dark-mode .kanban-card .priority-badge.priority-medium {
    background: rgba(37, 99, 235, 0.2);
    color: #60A5FA;
}

body.dark-mode .kanban-card .priority-badge.priority-low {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Card Footer */
body.dark-mode .kanban-card .card-footer {
    border-top-color: #2d2d44;
}

/* Assignee Avatar */
body.dark-mode .assignee {
    border-color: #2d2d44;
}

/* Column Add Button */
body.dark-mode .add-task-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
    border-color: #2d2d44;
}

body.dark-mode .add-task-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border-color: #4b5563;
}

/* ============================================
   DARK MODE - CALENDAR MODULE
   ============================================ */

/* Calendar Title */
body.dark-mode .calendar-title {
    color: #f3f4f6;
}

/* Calendar Legend */
body.dark-mode .legend-item {
    color: #9ca3af;
}

/* Calendar Grid */
body.dark-mode .calendar-grid {
    background: #1a1a2e;
    border-color: #2d2d44;
}

/* Calendar Weekdays Header */
body.dark-mode .calendar-weekdays {
    background: #16213e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .weekday {
    color: #9ca3af;
}

/* Calendar Days */
body.dark-mode .calendar-day {
    border-right-color: #2d2d44;
    border-bottom-color: #2d2d44;
}

body.dark-mode .calendar-day.empty {
    background: #16213e;
}

body.dark-mode .calendar-day.today {
    background: rgba(99, 102, 241, 0.15);
}

body.dark-mode .day-number {
    color: #e5e7eb;
}

/* Event Items */
body.dark-mode .event-item.meeting {
    background-color: rgba(59, 130, 246, 0.2);
}

body.dark-mode .event-item.task {
    background-color: rgba(245, 158, 11, 0.2);
}

body.dark-mode .event-item.project {
    background-color: rgba(16, 185, 129, 0.2);
}

body.dark-mode .event-time {
    color: #9ca3af;
}

body.dark-mode .event-title {
    color: #e5e7eb;
}

body.dark-mode .event-more {
    color: #6b7280;
}

/* ============================================
   DARK MODE - MEETINGS MODULE
   ============================================ */

/* Meetings Toolbar */
body.dark-mode .meetings-toolbar {
    color: #e5e7eb;
}

/* Filter Tabs */
body.dark-mode .filter-tabs {
    background: #16213e;
}

body.dark-mode .filter-tab {
    color: #9ca3af;
}

body.dark-mode .filter-tab:hover {
    color: #e5e7eb;
}

body.dark-mode .filter-tab.active {
    background: #1a1a2e;
    color: #f3f4f6;
    box-shadow: none;
}

/* Search Input */
body.dark-mode .search-input {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .search-input::placeholder {
    color: #6b7280;
}

/* Date Header */
body.dark-mode .date-label {
    color: #e5e7eb;
}

body.dark-mode .date-count {
    color: #6b7280;
}

/* Meeting Card */
body.dark-mode .meeting-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .meeting-card:hover {
    border-color: var(--color-primary);
}

body.dark-mode .meeting-time {
    color: #f3f4f6;
}

body.dark-mode .meeting-time-end {
    color: #6b7280;
}

body.dark-mode .meeting-title {
    color: #f3f4f6;
}

body.dark-mode .meeting-meta {
    color: #9ca3af;
}

body.dark-mode .meeting-type {
    color: #6b7280;
}

/* Meeting View Page */
body.dark-mode .meeting-card-large {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .meeting-date-large {
    background: #16213e;
}

body.dark-mode .date-day {
    color: #f3f4f6;
}

body.dark-mode .date-month {
    color: #9ca3af;
}

body.dark-mode .date-weekday {
    color: #6b7280;
}

body.dark-mode .meeting-time-large {
    color: #e5e7eb;
}

/* Meeting Status Badges Dark Mode */
body.dark-mode .meeting-status.status-scheduled {
    background: rgba(29, 78, 216, 0.2);
    color: #60A5FA;
}

body.dark-mode .meeting-status.status-in_progress {
    background: rgba(217, 119, 6, 0.2);
    color: #FBBF24;
}

body.dark-mode .meeting-status.status-completed {
    background: rgba(5, 150, 105, 0.2);
    color: #34D399;
}

body.dark-mode .meeting-status.status-cancelled {
    background: rgba(220, 38, 38, 0.2);
    color: #F87171;
}

body.dark-mode .meeting-description {
    color: #d1d5db;
}

/* Section Card */
body.dark-mode .section-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .section-title {
    color: #f3f4f6;
}

/* Attendees List */
body.dark-mode .attendee-name {
    color: #f3f4f6;
}

body.dark-mode .attendee-email {
    color: #6b7280;
}

/* Attendee Response Badges Dark Mode */
body.dark-mode .attendee-response.response-accepted {
    background: rgba(5, 150, 105, 0.2);
    color: #34D399;
}

body.dark-mode .attendee-response.response-declined {
    background: rgba(220, 38, 38, 0.2);
    color: #F87171;
}

body.dark-mode .attendee-response.response-tentative {
    background: rgba(217, 119, 6, 0.2);
    color: #FBBF24;
}

body.dark-mode .attendee-response.response-pending {
    background: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

body.dark-mode .meeting-notes {
    color: #d1d5db;
}

/* Detail List */
body.dark-mode .detail-list .detail-label {
    color: #6b7280;
}

body.dark-mode .detail-list .detail-value {
    color: #e5e7eb;
}

/* Back Link */
body.dark-mode .back-link {
    color: #9ca3af;
}

body.dark-mode .back-link:hover {
    color: var(--color-primary-light);
}

/* Meeting Form */
body.dark-mode .meeting-form {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .meeting-form .form-section {
    border-bottom-color: #2d2d44;
}

body.dark-mode .meeting-form .form-section-title {
    color: #f3f4f6;
}

body.dark-mode .meeting-form .form-actions {
    background: #16213e;
    border-top-color: #2d2d44;
}

/* Form Section (generic) */
body.dark-mode .form-section {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .form-section .form-section-title {
    color: #f3f4f6;
    border-bottom-color: #2d2d44;
}

/* Color Picker */
body.dark-mode .color-option input:checked + .color-swatch {
    border-color: #f3f4f6;
}

/* Attendees Selector */
body.dark-mode .attendees-selector {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .attendee-checkbox {
    background: #1f2937;
}

body.dark-mode .attendee-checkbox:hover {
    background: #374151;
}

body.dark-mode .attendee-checkbox .attendee-name {
    color: #f3f4f6;
}

body.dark-mode .attendee-checkbox .attendee-email {
    color: #6b7280;
}

/* ============================================
   DARK MODE - TICKETS MODULE
   ============================================ */

/* Ticket List */
body.dark-mode .ticket-number {
    color: var(--color-primary-light);
}

body.dark-mode .ticket-subject {
    color: #f3f4f6;
}

body.dark-mode .customer-name {
    color: #f3f4f6;
}

body.dark-mode .customer-email {
    color: #9ca3af;
}

body.dark-mode .clickable-row:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

/* Ticket View Header */
body.dark-mode .ticket-header-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .ticket-title {
    color: #f3f4f6;
}

body.dark-mode .ticket-number-badge {
    background-color: rgba(99, 102, 241, 0.2);
    color: var(--color-primary-light);
}

body.dark-mode .ticket-meta {
    border-top-color: #2d2d44;
}

/* Source Badges */
body.dark-mode .source-badge.source-email {
    background-color: rgba(29, 78, 216, 0.2);
    color: #60A5FA;
}

body.dark-mode .source-badge.source-livechat {
    background-color: rgba(4, 120, 87, 0.2);
    color: #34D399;
}

body.dark-mode .source-badge.source-manual {
    background-color: rgba(107, 114, 128, 0.2);
    color: #9ca3af;
}

/* Ticket Messages */
body.dark-mode .message-item {
    background-color: #16213e;
    border-left-color: var(--color-primary);
}

body.dark-mode .message-item.internal {
    background-color: rgba(245, 158, 11, 0.15);
    border-left-color: #F59E0B;
}

body.dark-mode .message-item.customer-message {
    background-color: rgba(59, 130, 246, 0.15);
    border-left-color: #3B82F6;
}

body.dark-mode .author-name {
    color: #f3f4f6;
}

body.dark-mode .internal-badge {
    background-color: rgba(253, 230, 138, 0.2);
    color: #FCD34D;
}

body.dark-mode .customer-badge {
    background-color: rgba(219, 234, 254, 0.2);
    color: #60A5FA;
}

body.dark-mode .message-time {
    color: #6b7280;
}

body.dark-mode .message-body {
    color: #d1d5db;
}

/* Add Message Form */
body.dark-mode .add-message-form {
    border-top-color: #2d2d44;
}

body.dark-mode .add-message-form .form-group label {
    color: #e5e7eb;
}

body.dark-mode .checkbox-label {
    color: #9ca3af;
}

/* Ticket Description */
body.dark-mode .ticket-description {
    color: #d1d5db;
}

/* Card Header */
body.dark-mode .card-header h3 {
    color: #e5e7eb;
}

/* Pagination Wrapper */
body.dark-mode .pagination-wrapper {
    border-top-color: #2d2d44;
}

body.dark-mode .pagination-current {
    color: #9ca3af;
}

/* Sort Header */
body.dark-mode .sort-header {
    color: #9ca3af;
}

body.dark-mode .sort-header:hover {
    color: #e5e7eb;
}

body.dark-mode .sort-header.active {
    color: var(--color-primary-light);
}

/* ============================================
   DARK MODE - SETTINGS MODULE
   ============================================ */

/* Settings Section Header */
body.dark-mode .settings-section-header h2 {
    color: #f3f4f6;
}

body.dark-mode .settings-section-header p {
    color: #9ca3af;
}

/* Settings Card */
body.dark-mode .settings-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .settings-card-header {
    background: #16213e;
    border-bottom-color: #2d2d44;
}

body.dark-mode .settings-card-header h3 {
    color: #f3f4f6;
}

body.dark-mode .settings-card-body {
    background: #1a1a2e;
}

/* Logo/Favicon Preview */
body.dark-mode .logo-preview,
body.dark-mode .favicon-preview {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .logo-preview.empty,
body.dark-mode .favicon-preview.empty {
    color: #6b7280;
}

/* Color Picker Wrapper */
body.dark-mode .color-picker-wrapper input[type="color"] {
    background: #1f2937;
    border-color: #4b5563;
}

body.dark-mode .color-picker-wrapper .color-text {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

/* Color Presets */
body.dark-mode .color-preset {
    border-color: #1a1a2e;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
}

body.dark-mode .color-preset.active {
    box-shadow: 0 0 0 2px #1a1a2e, 0 0 0 4px currentColor;
}

/* Color Preview Box */
body.dark-mode .color-preview-box {
    background: #16213e;
}

body.dark-mode .preview-item {
    color: #e5e7eb;
}

/* Info Box */
body.dark-mode .info-box {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: #60A5FA;
}

body.dark-mode .info-box svg {
    color: #3B82F6;
}

/* Settings Form Group */
body.dark-mode .settings-form .form-group label {
    color: #e5e7eb;
}

body.dark-mode .settings-form .form-hint {
    color: #6b7280;
}

/* Settings Menu Page */
body.dark-mode .menu-item {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .menu-item:hover {
    border-color: #4b5563;
}

body.dark-mode .menu-item-name {
    color: #f3f4f6;
}

body.dark-mode .menu-item-slug {
    color: #6b7280;
}

body.dark-mode .menu-item-meta {
    color: #9ca3af;
}

/* Settings Logs Page */
body.dark-mode .log-item {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .log-item:hover {
    background: rgba(255, 255, 255, 0.02);
}

body.dark-mode .log-action {
    color: #f3f4f6;
}

body.dark-mode .log-meta {
    color: #9ca3af;
}

body.dark-mode .log-time {
    color: #6b7280;
}

/* Settings Email Page */
body.dark-mode .email-template-item {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .email-template-item:hover {
    border-color: #4b5563;
}

body.dark-mode .template-name {
    color: #f3f4f6;
}

body.dark-mode .template-subject {
    color: #9ca3af;
}

/* Settings Status List */
body.dark-mode .status-item {
    background: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .status-item:hover {
    border-color: #4b5563;
}

body.dark-mode .status-name {
    color: #f3f4f6;
}

/* Settings Toggle */
body.dark-mode .toggle-item {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .toggle-item-title {
    color: #f3f4f6;
}

body.dark-mode .toggle-item-desc {
    color: #9ca3af;
}

/* Settings Tab Navigation */
body.dark-mode .settings-tabs {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .settings-tab {
    color: #9ca3af;
}

body.dark-mode .settings-tab:hover {
    color: #e5e7eb;
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .settings-tab.active {
    background: var(--color-primary);
    color: white;
}

/* Settings Table */
body.dark-mode .settings-table th {
    background: #16213e;
    border-bottom-color: #2d2d44;
    color: #9ca3af;
}

body.dark-mode .settings-table td {
    border-bottom-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .settings-table tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

/* Danger Zone Card */
body.dark-mode .settings-card.danger-zone {
    border-color: rgba(239, 68, 68, 0.3);
}

body.dark-mode .settings-card.danger-zone .settings-card-header {
    background: rgba(239, 68, 68, 0.1);
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

body.dark-mode .settings-card.danger-zone .settings-card-header h3 {
    color: #F87171;
}

/* Webmail Settings */
body.dark-mode .connection-status {
    color: #9ca3af;
}

body.dark-mode .connection-status.connected {
    color: #34D399;
}

body.dark-mode .connection-status.disconnected {
    color: #F87171;
}

/* ============================================
   DARK MODE - TICKETS MODULE (ADDITIONAL)
   ============================================ */

/* Ticket Detail Items */
body.dark-mode .details-list .detail-item dt {
    color: #9ca3af;
}

body.dark-mode .details-list .detail-item dd {
    color: #e5e7eb;
}

/* Ticket Activity List */
body.dark-mode .activity-list .activity-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .activity-list .activity-content {
    color: #d1d5db;
}

body.dark-mode .activity-list .activity-time {
    color: #6b7280;
}

/* Ticket Editor Toolbar */
body.dark-mode .editor-toolbar {
    background-color: #16213e;
    border-color: #2d2d44;
}

body.dark-mode .toolbar-btn {
    color: #9ca3af;
}

body.dark-mode .toolbar-btn:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body.dark-mode .toolbar-divider {
    background-color: #4b5563;
}

/* Ticket HTML Editor */
body.dark-mode .html-editor {
    background: #1a1a2e;
    border-color: #2d2d44;
    color: #e5e7eb;
}

body.dark-mode .html-editor:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

body.dark-mode .html-editor:empty:before {
    color: #6b7280;
}

/* Ticket HTML Content Display */
body.dark-mode .html-content {
    color: #d1d5db;
}

body.dark-mode .html-content a {
    color: var(--color-primary-light);
}

body.dark-mode .html-content blockquote {
    border-left-color: #4b5563;
    color: #9ca3af;
}

/* Ticket Bulk Actions */
body.dark-mode .bulk-actions {
    background-color: #16213e;
    border-top-color: #2d2d44;
}

body.dark-mode .bulk-count {
    color: #e5e7eb;
}

/* Ticket Empty State */
body.dark-mode .empty-state {
    color: #9ca3af;
}

body.dark-mode .empty-state svg {
    color: #4b5563;
}

body.dark-mode .empty-state h3 {
    color: #e5e7eb;
}

/* Ticket Sidebar Cards */
body.dark-mode .ticket-sidebar .section-card,
body.dark-mode .ticket-sidebar .card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .ticket-sidebar .card-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .ticket-sidebar .card-body {
    background: #1a1a2e;
}

/* Ticket Card */
body.dark-mode .ticket-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .ticket-card:hover {
    border-color: var(--color-primary);
}

/* Ticket Form */
body.dark-mode .ticket-form {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .ticket-form .form-section {
    border-bottom-color: #2d2d44;
}

body.dark-mode .ticket-form .form-section-title {
    color: #f3f4f6;
}

body.dark-mode .ticket-form .form-actions {
    background: #16213e;
    border-top-color: #2d2d44;
}

/* Message Avatar in Tickets */
body.dark-mode .message-avatar {
    border-color: #2d2d44;
}

/* Ticket Conversation Card */
body.dark-mode .conversation-card {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .conversation-card .card-header {
    border-bottom-color: #2d2d44;
}

/* Ticket Status Update Form */
body.dark-mode .status-update-form select {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

/* Link in Ticket Messages */
body.dark-mode .message-body a {
    color: var(--color-primary-light);
}

/* Ticket Toolbar Select */
body.dark-mode .toolbar-select {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

/* Ticket Toolbar Color Picker */
body.dark-mode .toolbar-color {
    border-color: #4b5563;
}

/* Ticket Form Actions */
body.dark-mode .ticket-form .form-actions {
    border-top-color: #2d2d44;
}

/* Ticket Form Grid Labels */
body.dark-mode .ticket-form .form-label {
    color: #e5e7eb;
}

/* Ticket Customer Select */
body.dark-mode .customer-select-wrapper {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .customer-search-input {
    background: transparent;
    color: #e5e7eb;
}

body.dark-mode .customer-search-input::placeholder {
    color: #6b7280;
}

body.dark-mode .customer-results {
    background: #1f2937;
    border-color: #2d2d44;
}

body.dark-mode .customer-result-item {
    color: #e5e7eb;
    border-bottom-color: #2d2d44;
}

body.dark-mode .customer-result-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

/* Priority & Status Select in Ticket Forms */
body.dark-mode .ticket-form select.form-select {
    background: #1f2937;
    border-color: #2d2d44;
    color: #e5e7eb;
}

/* ============================================
   DARK MODE - ACCOUNT SECURITY PAGE
   ============================================ */

/* Password Toggle */
body.dark-mode .password-toggle button {
    color: #9ca3af;
    background: transparent;
}

body.dark-mode .password-toggle button:hover {
    color: #e5e7eb;
}

/* Password Strength Indicator */
body.dark-mode .password-strength {
    background-color: #2d2d44;
}

/* Form Actions Border */
body.dark-mode .settings-card .form-actions,
body.dark-mode .settings-card-body .form-actions {
    border-top-color: #2d2d44;
}

/* ============================================
   DARK MODE - TICKETS PAGE (COMPREHENSIVE)
   ============================================ */

/* Tickets Filter Form */
body.dark-mode .filters-form {
    background: #1a1a2e !important;
    border-color: #2d2d44 !important;
}

body.dark-mode .filters-form .filter-group {
    color: #e5e7eb;
}

body.dark-mode .filters-form .filter-label {
    color: #9ca3af !important;
}

body.dark-mode .filters-form .form-input,
body.dark-mode .filters-form .form-select {
    background: #1f2937 !important;
    border-color: #2d2d44 !important;
    color: #e5e7eb !important;
}

body.dark-mode .filters-form .form-input::placeholder {
    color: #6b7280;
}

body.dark-mode .filters-form .form-input:focus,
body.dark-mode .filters-form .form-select:focus {
    border-color: var(--color-primary) !important;
}

body.dark-mode .filter-actions .btn-outline {
    background: transparent;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .filter-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: #6b7280;
}

/* Tickets Table Card */
body.dark-mode .card {
    background: #1a1a2e !important;
    border-color: #2d2d44 !important;
}

/* Table Container */
body.dark-mode .table-responsive {
    background: #1a1a2e;
}

/* Tickets Table */
body.dark-mode .table {
    background: #1a1a2e;
}

body.dark-mode .table thead {
    background: #16213e;
}

body.dark-mode .table th {
    background: #16213e !important;
    border-bottom-color: #2d2d44 !important;
    color: #9ca3af !important;
}

body.dark-mode .table td {
    border-bottom-color: #2d2d44 !important;
    color: #e5e7eb !important;
}

body.dark-mode .table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Clickable Row */
body.dark-mode .clickable-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Ticket Info */
body.dark-mode .ticket-info .ticket-number {
    color: var(--color-primary-light) !important;
}

body.dark-mode .ticket-info .ticket-subject {
    color: #f3f4f6 !important;
}

/* Customer Info */
body.dark-mode .customer-info .customer-name {
    color: #f3f4f6 !important;
}

body.dark-mode .customer-info .customer-email {
    color: #6b7280 !important;
}

/* Sort Header */
body.dark-mode .sort-header {
    color: #9ca3af !important;
}

body.dark-mode .sort-header:hover {
    color: #e5e7eb !important;
}

body.dark-mode .sort-header.active {
    color: var(--color-primary-light) !important;
}

/* Status Badge in Tickets */
body.dark-mode .status-badge {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #9ca3af !important;
}

/* Priority Badge in Tickets */
body.dark-mode .priority-badge {
    background: rgba(107, 114, 128, 0.2) !important;
}

/* Bulk Actions Bar */
body.dark-mode .bulk-actions {
    background: #16213e !important;
    border-top-color: #2d2d44 !important;
}

body.dark-mode .bulk-count {
    color: #e5e7eb !important;
}

/* Pagination Wrapper */
body.dark-mode .pagination-wrapper {
    background: #1a1a2e;
    border-top-color: #2d2d44 !important;
}

body.dark-mode .pagination-info {
    color: #9ca3af !important;
}

body.dark-mode .pagination-current {
    color: #9ca3af !important;
}

/* Assignee Badge */
body.dark-mode .assignee-badge {
    background: rgba(99, 102, 241, 0.2);
    color: var(--color-primary-light);
}

/* Unassigned Text */
body.dark-mode .text-muted {
    color: #6b7280 !important;
}

/* Form Checkbox */
body.dark-mode .form-checkbox {
    background: #1f2937;
    border-color: #4b5563;
}

/* Empty State in Table */
body.dark-mode .card .empty-state {
    background: #1a1a2e;
}

body.dark-mode .card .empty-state svg {
    color: #4b5563 !important;
}

body.dark-mode .card .empty-state h3 {
    color: #f3f4f6 !important;
}

body.dark-mode .card .empty-state p {
    color: #9ca3af !important;
}

/* ============================================
   DARK MODE - TICKETS VIEW PAGE
   ============================================ */

/* Ticket Layout */
body.dark-mode .ticket-layout {
    background: transparent;
}

body.dark-mode .ticket-main,
body.dark-mode .ticket-sidebar {
    background: transparent;
}

/* Ticket Meta Bar */
body.dark-mode .ticket-meta-bar {
    color: #e5e7eb;
}

/* Card in Tickets */
body.dark-mode .ticket-layout .card {
    background: #1a1a2e !important;
    border-color: #2d2d44 !important;
}

body.dark-mode .ticket-layout .card-header {
    background: #16213e !important;
    border-bottom-color: #2d2d44 !important;
}

body.dark-mode .ticket-layout .card-header h3 {
    color: #f3f4f6 !important;
}

body.dark-mode .ticket-layout .card-body {
    background: #1a1a2e;
}

/* Ticket Description */
body.dark-mode .ticket-description {
    color: #d1d5db !important;
}

/* Messages List */
body.dark-mode .messages-list .message-item {
    background: #16213e !important;
    border-left-color: var(--color-primary) !important;
}

body.dark-mode .messages-list .message-item.internal {
    background: rgba(245, 158, 11, 0.1) !important;
    border-left-color: #F59E0B !important;
}

body.dark-mode .messages-list .message-item.customer-message {
    background: rgba(59, 130, 246, 0.1) !important;
    border-left-color: #3B82F6 !important;
}

body.dark-mode .message-header .author-name {
    color: #f3f4f6 !important;
}

body.dark-mode .message-time {
    color: #6b7280 !important;
}

body.dark-mode .message-body {
    color: #d1d5db !important;
}

/* Badges in Messages */
body.dark-mode .internal-badge {
    background: rgba(253, 230, 138, 0.2) !important;
    color: #FCD34D !important;
}

body.dark-mode .customer-badge {
    background: rgba(219, 234, 254, 0.2) !important;
    color: #60A5FA !important;
}

/* Add Message Form */
body.dark-mode .add-message-form {
    border-top-color: #2d2d44 !important;
}

body.dark-mode .add-message-form label {
    color: #e5e7eb !important;
}

body.dark-mode .add-message-form .checkbox-label {
    color: #9ca3af !important;
}

/* Editor in Tickets */
body.dark-mode .editor-toolbar {
    background: #16213e !important;
    border-color: #2d2d44 !important;
}

body.dark-mode .toolbar-btn {
    color: #9ca3af !important;
}

body.dark-mode .toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #e5e7eb !important;
}

body.dark-mode .toolbar-divider {
    background: #4b5563 !important;
}

body.dark-mode .html-editor {
    background: #1a1a2e !important;
    border-color: #2d2d44 !important;
    color: #e5e7eb !important;
}

body.dark-mode .html-editor:focus {
    border-color: var(--color-primary) !important;
}

body.dark-mode .html-editor:empty:before {
    color: #6b7280 !important;
}

/* Ticket Sidebar Details */
body.dark-mode .details-list .detail-item dt {
    color: #6b7280 !important;
}

body.dark-mode .details-list .detail-item dd {
    color: #e5e7eb !important;
}

/* Activity List in Sidebar */
body.dark-mode .activity-list .activity-item {
    border-bottom-color: #2d2d44 !important;
}

body.dark-mode .activity-list .activity-content {
    color: #d1d5db !important;
}

body.dark-mode .activity-list .activity-time {
    color: #6b7280 !important;
}

/* Ticket Sidebar Card */
body.dark-mode .ticket-sidebar .card {
    background: #1a1a2e !important;
    border-color: #2d2d44 !important;
}

body.dark-mode .ticket-sidebar .card-header {
    background: #16213e !important;
    border-bottom-color: #2d2d44 !important;
}

body.dark-mode .ticket-sidebar .card-header h3 {
    color: #f3f4f6 !important;
}

/* HTML Content */
body.dark-mode .html-content {
    color: #d1d5db !important;
}

body.dark-mode .html-content a {
    color: var(--color-primary-light) !important;
}

body.dark-mode .html-content blockquote {
    border-left-color: #4b5563 !important;
    color: #9ca3af !important;
}

/* ============================================
   DARK MODE - TICKETS ADDITIONAL STYLES
   ============================================ */

/* Links in Detail Items */
body.dark-mode .detail-item dd a {
    color: var(--color-primary-light) !important;
}

body.dark-mode .detail-item dd a:hover {
    color: #a5b4fc !important;
}

/* Text Small */
body.dark-mode .text-sm {
    color: #9ca3af !important;
}

body.dark-mode .text-sm.text-muted {
    color: #6b7280 !important;
}

/* Form Select in Sidebar (Change Status) */
body.dark-mode .ticket-sidebar .form-select,
body.dark-mode .ticket-sidebar select {
    background: #1f2937 !important;
    border-color: #2d2d44 !important;
    color: #e5e7eb !important;
}

body.dark-mode .ticket-sidebar .form-select:focus {
    border-color: var(--color-primary) !important;
}

/* Button Outline in Cards */
body.dark-mode .card .btn-outline,
body.dark-mode .card .btn.btn-outline {
    background: transparent !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

body.dark-mode .card .btn-outline:hover,
body.dark-mode .card .btn.btn-outline:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: #6b7280 !important;
}

/* Ticket Form Card */
body.dark-mode .ticket-form {
    background: transparent;
}

body.dark-mode .ticket-form .form-label {
    color: #e5e7eb !important;
}

body.dark-mode .ticket-form .form-input,
body.dark-mode .ticket-form .form-select,
body.dark-mode .ticket-form textarea {
    background: #1f2937 !important;
    border-color: #2d2d44 !important;
    color: #e5e7eb !important;
}

body.dark-mode .ticket-form .form-input::placeholder,
body.dark-mode .ticket-form textarea::placeholder {
    color: #6b7280 !important;
}

body.dark-mode .ticket-form .form-input:focus,
body.dark-mode .ticket-form .form-select:focus,
body.dark-mode .ticket-form textarea:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

body.dark-mode .ticket-form .required {
    color: #F87171 !important;
}

body.dark-mode .ticket-form .form-actions {
    border-top-color: #2d2d44 !important;
}

/* Toolbar Select in Tickets */
body.dark-mode .toolbar-select {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* Form Grid */
body.dark-mode .form-grid .form-group {
    color: #e5e7eb;
}

/* Activity Strong */
body.dark-mode .activity-content strong {
    color: #f3f4f6 !important;
}

/* Source Badges Dark Mode */
body.dark-mode .source-badge.source-email {
    background: rgba(29, 78, 216, 0.2) !important;
    color: #60A5FA !important;
}

body.dark-mode .source-badge.source-livechat {
    background: rgba(4, 120, 87, 0.2) !important;
    color: #34D399 !important;
}

body.dark-mode .source-badge.source-manual {
    background: rgba(107, 114, 128, 0.2) !important;
    color: #9ca3af !important;
}

/* Pagination Button */
body.dark-mode .pagination-btn {
    background: #1a1a2e !important;
    border-color: #2d2d44 !important;
    color: #9ca3af !important;
}

body.dark-mode .pagination-btn:hover {
    background: #16213e !important;
    border-color: #4b5563 !important;
    color: #e5e7eb !important;
}

/* Card Body padding/bg */
body.dark-mode .card-body {
    background: #1a1a2e !important;
}

/* Quick Status Form */
body.dark-mode .card-body form select {
    background: #1f2937 !important;
    border-color: #2d2d44 !important;
    color: #e5e7eb !important;
}

/* Select Option */
body.dark-mode select option {
    background: #1f2937;
    color: #e5e7eb;
}

/* ============================================
   CHAT TRANSCRIPT STYLES (Light Mode)
   ============================================ */

.chat-transcript {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    max-width: 100%;
}

.transcript-header {
    background: var(--color-gray-100);
    padding: 1rem;
    border-radius: var(--radius-md);
    margin-bottom: 1.25rem;
}

.transcript-title {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-800);
}

.transcript-meta {
    margin: 0.375rem 0;
    color: var(--color-gray-600);
    font-size: 0.875rem;
}

.transcript-meta strong {
    color: var(--color-gray-700);
}

.transcript-messages {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.transcript-message {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--color-gray-200);
}

.transcript-message:last-child {
    border-bottom: none;
}

.transcript-message.system {
    background: var(--color-gray-50);
    text-align: center;
    color: var(--color-gray-500);
    font-size: 0.8125rem;
    padding: 0.5rem 1rem;
}

.transcript-message.system .message-time {
    color: var(--color-gray-400);
}

.transcript-message.visitor {
    background: white;
}

.transcript-message.agent {
    background: #eff6ff;
}

.message-sender {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: 0.25rem;
}

.message-sender.agent-name {
    color: #3b82f6;
}

.message-content {
    color: var(--color-gray-700);
    line-height: 1.5;
}

/* ============================================
   CHAT TRANSCRIPT STYLES (Dark Mode)
   ============================================ */

body.dark-mode .transcript-header {
    background: #16213e;
}

body.dark-mode .transcript-title {
    color: #f3f4f6;
}

body.dark-mode .transcript-meta {
    color: #9ca3af;
}

body.dark-mode .transcript-meta strong {
    color: #e5e7eb;
}

body.dark-mode .transcript-messages {
    border-color: #2d2d44;
}

body.dark-mode .transcript-message {
    border-bottom-color: #2d2d44;
}

body.dark-mode .transcript-message.system {
    background: #16213e;
    color: #9ca3af;
}

body.dark-mode .transcript-message.system .message-time {
    color: #6b7280;
}

body.dark-mode .transcript-message.visitor {
    background: #1a1a2e;
}

body.dark-mode .transcript-message.agent {
    background: rgba(59, 130, 246, 0.1);
}

body.dark-mode .message-sender {
    color: #9ca3af;
}

body.dark-mode .message-sender.agent-name {
    color: #60A5FA;
}

body.dark-mode .message-content {
    color: #e5e7eb;
}

/* ============================================
   DARK MODE - LIVECHAT MODULE
   ============================================ */

/* LiveChat List Page */
body.dark-mode .sessions-panel {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .sessions-header {
    border-bottom-color: #2d2d44;
}

body.dark-mode .sessions-header h3 {
    color: #f3f4f6;
}

body.dark-mode .filter-btn {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .filter-btn:hover {
    border-color: #6b7280;
    background: #374151;
}

body.dark-mode .filter-btn.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

body.dark-mode .session-item {
    border-bottom-color: #2d2d44;
}

body.dark-mode .session-item:hover {
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode .session-item.pending {
    background: rgba(245, 158, 11, 0.15);
}

body.dark-mode .session-item.pending:hover {
    background: rgba(245, 158, 11, 0.25);
}

body.dark-mode .visitor-name {
    color: #f3f4f6;
}

body.dark-mode .session-time {
    color: #6b7280;
}

body.dark-mode .session-preview {
    color: #9ca3af;
}

body.dark-mode .meta-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

body.dark-mode .meta-badge.assigned {
    background: rgba(59, 130, 246, 0.2);
    color: #60A5FA;
}

body.dark-mode .status-dot {
    border-color: #1a1a2e;
}

body.dark-mode .empty-sessions {
    color: #6b7280;
}

body.dark-mode .empty-sessions p {
    color: #9ca3af;
}

body.dark-mode .empty-sessions svg {
    color: #4b5563;
}

/* Chat Panel (empty state) */
body.dark-mode .chat-panel {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .empty-icon {
    background: #16213e;
    color: #4b5563;
}

body.dark-mode .empty-chat-state h2 {
    color: #f3f4f6;
}

body.dark-mode .empty-chat-state p {
    color: #9ca3af;
}

body.dark-mode .stat-card {
    background: #16213e;
}

body.dark-mode .stat-number {
    color: #f3f4f6;
}

body.dark-mode .stat-label {
    color: #6b7280;
}

/* Header Stats */
body.dark-mode .stat-badge {
    background: rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
}

body.dark-mode .stat-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

body.dark-mode .stat-badge.online {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

/* LiveChat Chat Page */
body.dark-mode .chat-main {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .messages-area {
    background: #1a1a2e;
}

body.dark-mode .chat-started {
    color: #6b7280;
}

body.dark-mode .system-message {
    background: #16213e;
    color: #9ca3af;
}

body.dark-mode .message.visitor .message-bubble {
    background: #16213e;
    color: #e5e7eb;
}

body.dark-mode .message.agent .message-bubble {
    background: var(--color-primary);
    color: white;
}

body.dark-mode .message-text {
    color: inherit;
}

body.dark-mode .message-input-area {
    background: #16213e;
    border-top-color: #2d2d44;
}

body.dark-mode .message-form textarea {
    background: #1f2937;
    border-color: #4b5563;
    color: #e5e7eb;
}

body.dark-mode .message-form textarea::placeholder {
    color: #6b7280;
}

body.dark-mode .message-form textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

body.dark-mode .message-form textarea:disabled {
    background: #374151;
    color: #6b7280;
}

body.dark-mode .send-btn:disabled {
    background: #4b5563;
}

body.dark-mode .input-hint {
    color: #6b7280;
}

body.dark-mode .chat-closed-notice {
    background: #16213e;
    color: #9ca3af;
}

/* Chat Sidebar */
body.dark-mode .chat-sidebar {
    background: #1a1a2e;
    border-color: #2d2d44;
}

body.dark-mode .sidebar-section {
    border-bottom-color: #2d2d44;
}

body.dark-mode .sidebar-section h4 {
    color: #6b7280;
}

body.dark-mode .info-label {
    color: #6b7280;
}

body.dark-mode .info-value {
    color: #f3f4f6;
}

body.dark-mode .page-link {
    color: var(--color-primary-light);
}

body.dark-mode .status-badge.pending {
    background: rgba(245, 158, 11, 0.2);
    color: #FBBF24;
}

body.dark-mode .status-badge.active {
    background: rgba(16, 185, 129, 0.2);
    color: #34D399;
}

body.dark-mode .status-badge.closed {
    background: #2d2d44;
    color: #9ca3af;
}

body.dark-mode .assigned-info {
    color: #9ca3af;
}

body.dark-mode .browser-info {
    color: #9ca3af;
}