/* styles.css - Core CSS Styles for Semseo Admin Template v0.32 */

/* ============================================================
   CSS VARIABLES - THEME COLOURS
   ============================================================ */
:root {
    --color-primary-50: 248 250 252;
    --color-primary-100: 241 245 249;
    --color-primary-200: 226 232 240;
    --color-primary-300: 203 213 225;
    --color-primary-400: 148 163 184;
    --color-primary-500: 100 116 139;
    --color-primary-600: 71 85 105;
    --color-primary-700: 51 65 85;
    --color-primary-800: 30 41 59;
    --color-primary-900: 15 23 42;
    --accent-color: 59 130 246;
    --header-height: 102px;
}

/* Theme: Slate (default) */
.theme-slate {
    --color-primary-50: 248 250 252;
    --color-primary-100: 241 245 249;
    --color-primary-200: 226 232 240;
    --color-primary-300: 203 213 225;
    --color-primary-400: 148 163 184;
    --color-primary-500: 100 116 139;
    --color-primary-600: 71 85 105;
    --color-primary-700: 51 65 85;
    --color-primary-800: 30 41 59;
    --color-primary-900: 15 23 42;
    --accent-color: 59 130 246;
}

/* Theme: Steel */
.theme-steel {
    --color-primary-50: 250 250 250;
    --color-primary-100: 244 244 245;
    --color-primary-200: 228 228 231;
    --color-primary-300: 212 212 216;
    --color-primary-400: 161 161 170;
    --color-primary-500: 113 113 122;
    --color-primary-600: 82 82 91;
    --color-primary-700: 63 63 70;
    --color-primary-800: 39 39 42;
    --color-primary-900: 24 24 27;
    --accent-color: 99 102 241;
}

/* Theme: Ocean */
.theme-ocean {
    --color-primary-50: 240 249 255;
    --color-primary-100: 224 242 254;
    --color-primary-200: 186 230 253;
    --color-primary-300: 125 211 252;
    --color-primary-400: 56 189 248;
    --color-primary-500: 14 165 233;
    --color-primary-600: 2 132 199;
    --color-primary-700: 3 105 161;
    --color-primary-800: 7 89 133;
    --color-primary-900: 12 74 110;
    --accent-color: 6 182 212;
}

/* Theme: Forest */
.theme-forest {
    --color-primary-50: 240 253 244;
    --color-primary-100: 220 252 231;
    --color-primary-200: 187 247 208;
    --color-primary-300: 134 239 172;
    --color-primary-400: 74 222 128;
    --color-primary-500: 34 197 94;
    --color-primary-600: 22 163 74;
    --color-primary-700: 21 128 61;
    --color-primary-800: 22 101 52;
    --color-primary-900: 20 83 45;
    --accent-color: 16 185 129;
}

/* Theme: Burgundy */
.theme-burgundy {
    --color-primary-50: 254 242 242;
    --color-primary-100: 254 226 226;
    --color-primary-200: 254 202 202;
    --color-primary-300: 252 165 165;
    --color-primary-400: 248 113 113;
    --color-primary-500: 239 68 68;
    --color-primary-600: 185 28 28;
    --color-primary-700: 153 27 27;
    --color-primary-800: 127 29 29;
    --color-primary-900: 69 10 10;
    --accent-color: 244 63 94;
}

/* ============================================================
   GLOBAL STYLES
   ============================================================ */
body {
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

code, pre, .font-mono {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}

/* Accent colour utilities */
.bg-accent { background-color: rgb(var(--accent-color)); }
.text-accent { color: rgb(var(--accent-color)); }
.border-accent { border-color: rgb(var(--accent-color)); }
.ring-accent { --tw-ring-color: rgb(var(--accent-color)); }

/* Global transitions */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.15s ease;
}

/* Scrollbar styling */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgb(var(--color-primary-100)); }
.dark ::-webkit-scrollbar-track { background: rgb(var(--color-primary-800)); }
::-webkit-scrollbar-thumb { background: rgb(var(--color-primary-400)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--color-primary-500)); }

/* ============================================================
   FORM COMPONENTS
   ============================================================ */
.form-input,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="search"] {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    border: 1px solid rgb(var(--color-primary-300));
    border-radius: 0.375rem;
    background-color: white;
    color: rgb(var(--color-primary-900));
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.form-input:focus,
input:focus {
    border-color: rgb(var(--accent-color));
    box-shadow: 0 0 0 3px rgb(var(--accent-color) / 0.15);
}

.form-input:disabled,
input:disabled {
    background-color: rgb(var(--color-primary-100));
    cursor: not-allowed;
    opacity: 0.7;
}

.dark .form-input,
.dark input[type="text"],
.dark input[type="email"],
.dark input[type="number"],
.dark input[type="password"] {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-600));
    color: rgb(var(--color-primary-100));
}

.form-select,
select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid rgb(var(--color-primary-300));
    border-radius: 0.375rem;
    background-color: white;
    color: rgb(var(--color-primary-900));
    outline: none;
}

.form-select:focus,
select:focus {
    border-color: rgb(var(--accent-color));
    box-shadow: 0 0 0 3px rgb(var(--accent-color) / 0.15);
}

.dark .form-select,
.dark select {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-600));
    color: rgb(var(--color-primary-100));
}

.form-textarea,
textarea {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid rgb(var(--color-primary-300));
    border-radius: 0.375rem;
    background-color: white;
    color: rgb(var(--color-primary-900));
    resize: vertical;
    min-height: 100px;
    outline: none;
}

.form-textarea:focus,
textarea:focus {
    border-color: rgb(var(--accent-color));
    box-shadow: 0 0 0 3px rgb(var(--accent-color) / 0.15);
}

.dark .form-textarea,
.dark textarea {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-600));
    color: rgb(var(--color-primary-100));
}

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

.form-label,
label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(var(--color-primary-700));
    margin-bottom: 0.25rem;
}
.dark .form-label,
.dark label {
    color: rgb(var(--color-primary-300));
}

.form-group { margin-bottom: 1rem; }
.form-help { font-size: 0.75rem; color: rgb(var(--color-primary-500)); margin-top: 0.25rem; }
.form-error { font-size: 0.75rem; color: #dc2626; margin-top: 0.25rem; }
.form-input.is-invalid, input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: #dc2626; }

/* ============================================================
   BUTTON COMPONENTS
   ============================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    cursor: pointer;
    outline: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary { background-color: rgb(var(--accent-color)); color: white; }
.btn-primary:hover:not(:disabled) { filter: brightness(0.9); }

.btn-secondary { background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-800)); }
.btn-secondary:hover:not(:disabled) { background-color: rgb(var(--color-primary-300)); }
.dark .btn-secondary { background-color: rgb(var(--color-primary-700)); color: rgb(var(--color-primary-200)); }

.btn-success { background-color: #16a34a; color: white; }
.btn-success:hover:not(:disabled) { background-color: #15803d; }

.btn-danger { background-color: #dc2626; color: white; }
.btn-danger:hover:not(:disabled) { background-color: #b91c1c; }

.btn-warning { background-color: #d97706; color: white; }
.btn-warning:hover:not(:disabled) { background-color: #b45309; }

.btn-outline { background-color: transparent; border-color: rgb(var(--color-primary-300)); color: rgb(var(--color-primary-700)); }
.btn-outline:hover:not(:disabled) { background-color: rgb(var(--color-primary-100)); }
.dark .btn-outline { border-color: rgb(var(--color-primary-600)); color: rgb(var(--color-primary-300)); }

.btn-ghost { background-color: transparent; color: rgb(var(--color-primary-700)); }
.btn-ghost:hover:not(:disabled) { background-color: rgb(var(--color-primary-100)); }
.dark .btn-ghost { color: rgb(var(--color-primary-300)); }

.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; }
.btn-icon { padding: 0.5rem; }

.btn-group { display: flex; align-items: center; gap: 0.5rem; }
.buttonArea { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 0; }

/* ============================================================
   TABLE COMPONENTS
   ============================================================ */
.table-modern { width: 100%; border-collapse: collapse; font-size: 0.875rem; }

.table-modern thead th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgb(var(--color-primary-600));
    background-color: rgb(var(--color-primary-100));
    border-bottom: 1px solid rgb(var(--color-primary-200));
}
.dark .table-modern thead th {
    color: rgb(var(--color-primary-400));
    background-color: rgb(var(--color-primary-800));
    border-bottom-color: rgb(var(--color-primary-700));
}

.table-modern tbody td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgb(var(--color-primary-200));
    color: rgb(var(--color-primary-900));
}
.dark .table-modern tbody td {
    border-bottom-color: rgb(var(--color-primary-700));
    color: rgb(var(--color-primary-100));
}

.table-modern tbody tr:hover { background-color: rgb(var(--color-primary-50)); }
.dark .table-modern tbody tr:hover { background-color: rgb(var(--color-primary-800) / 0.5); }

.table-card {
    background-color: white;
    border: 1px solid rgb(var(--color-primary-200));
    border-radius: 0.5rem;
    overflow: hidden;
}
.dark .table-card {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-700));
}

/* ============================================================
   CARD COMPONENTS
   ============================================================ */
.card {
    background-color: white;
    border: 1px solid rgb(var(--color-primary-200));
    border-radius: 0.5rem;
    overflow: hidden;
}
.dark .card {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-700));
}

.card-header { padding: 1rem 1.25rem; border-bottom: 1px solid rgb(var(--color-primary-200)); font-weight: 600; }
.dark .card-header { border-bottom-color: rgb(var(--color-primary-700)); }

.card-body { padding: 1.25rem; }

.card-footer { padding: 1rem 1.25rem; border-top: 1px solid rgb(var(--color-primary-200)); background-color: rgb(var(--color-primary-50)); }
.dark .card-footer { border-top-color: rgb(var(--color-primary-700)); background-color: rgb(var(--color-primary-900)); }

.card-hover { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.card-hover:hover { transform: translateY(-2px); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1); }

/* ============================================================
   BADGE COMPONENTS
   ============================================================ */
.badge { display: inline-flex; align-items: center; padding: 0.125rem 0.5rem; font-size: 0.75rem; font-weight: 500; border-radius: 9999px; }

.badge-primary { background-color: rgb(var(--accent-color) / 0.15); color: rgb(var(--accent-color)); }
.badge-success { background-color: #dcfce7; color: #16a34a; }
.dark .badge-success { background-color: #14532d; color: #4ade80; }
.badge-warning { background-color: #fef3c7; color: #d97706; }
.dark .badge-warning { background-color: #451a03; color: #fbbf24; }
.badge-danger { background-color: #fee2e2; color: #dc2626; }
.dark .badge-danger { background-color: #450a0a; color: #f87171; }
.badge-info { background-color: #dbeafe; color: #2563eb; }
.dark .badge-info { background-color: #1e3a5f; color: #60a5fa; }
.badge-neutral { background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-700)); }
.dark .badge-neutral { background-color: rgb(var(--color-primary-700)); color: rgb(var(--color-primary-300)); }

/* ============================================================
   ALERT COMPONENTS
   ============================================================ */
.alert { padding: 1rem; border-radius: 0.375rem; border: 1px solid; margin-bottom: 1rem; }
.alert-success { background-color: #dcfce7; border-color: #86efac; color: #166534; }
.dark .alert-success { background-color: #14532d; border-color: #166534; color: #bbf7d0; }
.alert-warning { background-color: #fef3c7; border-color: #fcd34d; color: #92400e; }
.dark .alert-warning { background-color: #451a03; border-color: #92400e; color: #fde68a; }
.alert-danger { background-color: #fee2e2; border-color: #fca5a5; color: #991b1b; }
.dark .alert-danger { background-color: #450a0a; border-color: #991b1b; color: #fecaca; }
.alert-info { background-color: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.dark .alert-info { background-color: #1e3a5f; border-color: #1e40af; color: #bfdbfe; }

/* ============================================================
   EVENT STATUS INDICATORS
   ============================================================ */
.event-status { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.status-icon { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.status-confirmed { background-color: #22c55e; }
.status-inprogress { background-color: #3b82f6; }
.status-review { background-color: #f59e0b; }
.status-pending { background-color: #a855f7; }
.status-cancelled { background-color: #6b7280; }
.status-holiday { background-color: #f43f5e; }

/* ============================================================
   SIDEBAR & NAVIGATION
   ============================================================ */
.sidebar-transition { transition: width 0.3s ease, transform 0.3s ease; }

.dropdown-enter { animation: dropdownIn 0.15s ease-out; }
@keyframes dropdownIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.submenu-bar { background: linear-gradient(to bottom, rgb(var(--color-primary-100)), rgb(var(--color-primary-50))); }
.dark .submenu-bar { background: linear-gradient(to bottom, rgb(var(--color-primary-800)), rgb(var(--color-primary-900))); }

.submenu-item {
    display: flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500;
    border-radius: 0.375rem; background-color: white; color: rgb(var(--color-primary-700));
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); white-space: nowrap;
}
.dark .submenu-item { background-color: rgb(var(--color-primary-700)); color: rgb(var(--color-primary-300)); }
.submenu-item:hover { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); transform: translateY(-1px); }

/* ============================================================
   EVENT LIST STYLES
   ============================================================ */
.event-item { padding: 6px 10px; border-bottom: 1px solid rgb(var(--color-primary-200)); font-size: 0.8125rem; cursor: pointer; }
.dark .event-item { border-bottom-color: rgb(var(--color-primary-700)); }
.event-item:last-child { border-bottom: none; }
.event-item:hover { background-color: rgb(var(--color-primary-100)); }
.dark .event-item:hover { background-color: rgb(var(--color-primary-700) / 0.5); }

.event-row-1 { display: grid; grid-template-columns: 20px 65px 1fr; gap: 6px; align-items: center; }
.event-row-2 { display: grid; grid-template-columns: 20px 1fr; gap: 6px; font-size: 0.75rem; color: rgb(var(--color-primary-500)); margin-top: 2px; }
.event-list-container { max-height: 280px; overflow-y: auto; }

/* ============================================================
   DATATABLES OVERRIDES
   ============================================================ */
.dataTables_wrapper { font-size: 0.875rem; }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    padding: 0.375rem 0.75rem;
    border: 1px solid rgb(var(--color-primary-300));
    border-radius: 0.375rem;
    background-color: white;
}
.dataTables_wrapper .dataTables_info { font-size: 0.75rem; color: rgb(var(--color-primary-500)); }

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 0.375rem 0.75rem; margin: 0 0.125rem; border-radius: 0.375rem;
    border: 1px solid rgb(var(--color-primary-200)); background-color: white;
    color: rgb(var(--color-primary-700)) !important; cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgb(var(--color-primary-100)) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: rgb(var(--accent-color)) !important;
    border-color: rgb(var(--accent-color)) !important;
    color: white !important;
}

/* DataTables dark mode */
.dark .dataTables_wrapper { color: rgb(var(--color-primary-100)); }
.dark .dataTables_wrapper .dataTables_length select,
.dark .dataTables_wrapper .dataTables_filter input {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-600));
    color: rgb(var(--color-primary-100));
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: rgb(var(--color-primary-800));
    border-color: rgb(var(--color-primary-600));
    color: rgb(var(--color-primary-300)) !important;
}
.dark .dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background-color: rgb(var(--accent-color)) !important;
    color: white !important;
}

/* ============================================================
   LEGACY CLASS MAPPINGS (backwards compatibility)
   ============================================================ */
.table_semseo, .table_semseo_border { width: 100%; border-collapse: collapse; }
.table_semseo th, .table_semseo_border th {
    padding: 0.75rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; color: rgb(var(--color-primary-600));
    background-color: rgb(var(--color-primary-100)); border-bottom: 1px solid rgb(var(--color-primary-200));
}
.table_semseo td, .table_semseo_border td { padding: 0.75rem 1rem; border-bottom: 1px solid rgb(var(--color-primary-200)); }

.button {
    display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    font-size: 0.875rem; font-weight: 500; border-radius: 0.375rem;
    background-color: rgb(var(--accent-color)); color: white; border: none; cursor: pointer;
}
.button:hover { filter: brightness(0.9); }
.button_related_info { padding: 0.25rem 0.5rem; font-size: 0.75rem; background-color: rgb(var(--color-primary-200)); color: rgb(var(--color-primary-800)); border-radius: 0.375rem; }

.dropdown, .dropdown_long, .dropdown_xlen { padding: 0.5rem 0.75rem; border: 1px solid rgb(var(--color-primary-300)); border-radius: 0.375rem; background-color: white; }

.heading_crm { font-size: 1.125rem; font-weight: 600; color: rgb(var(--color-primary-900)); }
.dark .heading_crm { color: rgb(var(--color-primary-100)); }

.email_function_box { background-color: white; border: 1px solid rgb(var(--color-primary-200)); border-radius: 0.5rem; padding: 1rem; margin: 1rem 0; }
.dark .email_function_box { background-color: rgb(var(--color-primary-800)); border-color: rgb(var(--color-primary-700)); }

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }