/* Dementia Tunnels — Modern UI */

/* ========== Theme System ========== */
:root {
  --c-body: #f0f4f8;
  --c-card: #ffffff;
  --c-text-primary: #1e293b;
  --c-text-secondary: #475569;
  --c-text-muted: #64748b;
  --c-border: #e2e8f0;
  --c-surface: #f8fafc;
  --c-hover: #f1f5f9;
  --c-shadow: rgba(0,0,0,0.08);
  --c-shadow-hover: rgba(0,0,0,0.07);
  --c-modal-bg: rgba(0, 0, 0, 0.5);
  --c-input-bg: #ffffff;
  --c-btn-secondary: #f1f5f9;
  --c-btn-secondary-hover: #e2e8f0;
  --c-scrollbar-track: #f1f1f1;
  --c-scrollbar-thumb: #c1c1c1;
  --c-scrollbar-thumb-hover: #a8a8a8;
  --c-table-even: #fafbfc;
  --c-table-hover: #f0f4ff;
  color-scheme: light;
}

[data-theme="dark"] {
  --c-body: #1a1d23;
  --c-card: #242830;
  --c-text-primary: #e2e8f0;
  --c-text-secondary: #94a3b8;
  --c-text-muted: #64748b;
  --c-border: #334155;
  --c-surface: #2d3139;
  --c-hover: #2d3139;
  --c-shadow: rgba(0,0,0,0.3);
  --c-shadow-hover: rgba(0,0,0,0.4);
  --c-modal-bg: rgba(0, 0, 0, 0.7);
  --c-input-bg: #2d3139;
  --c-btn-secondary: #2d3139;
  --c-btn-secondary-hover: #3a3f4a;
  --c-scrollbar-track: #2d3139;
  --c-scrollbar-thumb: #4a4f5a;
  --c-scrollbar-thumb-hover: #5a5f6a;
  --c-table-even: #262a32;
  --c-table-hover: #2d3139;
  color-scheme: dark;
}

/* Global overrides */
body.bg-gray-100 {
  background-color: var(--c-body) !important;
}

[data-theme="dark"] .bg-white {
  background-color: var(--c-card) !important;
}
[data-theme="dark"] .bg-gray-50 {
  background-color: var(--c-surface) !important;
}
[data-theme="dark"] .bg-gray-100 {
  background-color: var(--c-hover) !important;
}
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] .text-gray-700 {
  color: var(--c-text-primary) !important;
}
[data-theme="dark"] .text-gray-600 {
  color: var(--c-text-secondary) !important;
}
[data-theme="dark"] .text-gray-500,
[data-theme="dark"] .text-gray-400 {
  color: var(--c-text-muted) !important;
}
[data-theme="dark"] .border,
[data-theme="dark"] .border-gray-200,
[data-theme="dark"] .border-gray-300 {
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .border-b,
[data-theme="dark"] .border-t,
[data-theme="dark"] .border-l,
[data-theme="dark"] .border-r {
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .divide-gray-200 > * {
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .hover\:bg-gray-50:hover {
  background-color: var(--c-hover) !important;
}
[data-theme="dark"] .shadow-md {
  box-shadow: 0 4px 6px var(--c-shadow), 0 2px 4px var(--c-shadow-hover) !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--c-input-bg) !important;
  color: var(--c-text-primary) !important;
  border-color: var(--c-border) !important;
}
[data-theme="dark"] .bg-black.bg-opacity-50 {
  background-color: var(--c-modal-bg) !important;
}

/* Smooth transitions on theme switch */
body, .bg-white, .bg-gray-50, .bg-gray-100,
.text-gray-800, .text-gray-700, .text-gray-600, .text-gray-500, .text-gray-400,
input, select, textarea, .shadow-md, .border, .border-gray-200, .border-b, .border-t {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ========== End Theme System ========== */

/* Reset focus: no blue outlines, use subtle ring instead */
*:focus {
    outline: none !important;
}
input:focus-visible, button:focus-visible, select:focus-visible {
    ring: 2px solid #93c5fd;
    ring-offset: 1px;
}
button, a, input, select {
    -webkit-tap-highlight-color: transparent;
}

/* Buttons */
button {
    transition: all 0.15s ease;
}
button:hover:not(:disabled) {
    transform: translateY(-1px);
}
button:active:not(:disabled) {
    transform: translateY(0);
}

/* Links */
a {
    transition: color 0.15s ease;
}

/* Input fields */
input, select {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
input:focus, select:focus {
    border-color: #93c5fd;
    box-shadow: 0 0 0 1px #93c5fd;
}

/* Cards */
.bg-white.rounded-lg, .bg-white.rounded-xl {
    box-shadow: 0 1px 3px var(--c-shadow), 0 1px 2px var(--c-shadow-hover);
    transition: box-shadow 0.2s ease;
}
.bg-white.rounded-lg:hover, .bg-white.rounded-xl:hover {
    box-shadow: 0 4px 6px var(--c-shadow-hover), 0 2px 4px var(--c-shadow);
}

/* Table */
table tbody tr {
    transition: background-color 0.1s ease;
}
table tbody tr:nth-child(even) {
    background-color: var(--c-table-even);
}
table tbody tr:hover {
    background-color: var(--c-table-hover);
}

/* Tab buttons */
.tab-btn {
    transition: all 0.2s ease;
}

/* Loading animation */
.loading {
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: var(--c-scrollbar-track); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb { background: var(--c-scrollbar-thumb); border-radius: 3px; }
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--c-scrollbar-thumb-hover); }

/* Smooth transitions */
.smooth-transition {
    transition: all 0.3s ease-in-out;
}

/* Modal animations */
.modal-backdrop { background-color: var(--c-modal-bg); }
.modal-container { animation: modalFadeIn 0.2s ease-out; }
@keyframes modalFadeIn {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Config preview scrollbar */
.config-preview { scrollbar-width: thin; scrollbar-color: #4B5563 #1F2937; }
.config-preview::-webkit-scrollbar { width: 8px; }
.config-preview::-webkit-scrollbar-track { background: #1F2937; border-radius: 4px; }
.config-preview::-webkit-scrollbar-thumb { background: #4B5563; border-radius: 4px; }
.config-preview::-webkit-scrollbar-thumb:hover { background: #6B7280; }

/* Print */
@media print {
    .no-print { display: none !important; }
}

/* Chart bars */
#trafficChart > div {
    transition: opacity 0.2s ease;
}
#trafficChart > div:hover {
    opacity: 0.85;
}

/* Ping animation for status dot */
.status-dot {
    transition: background-color 0.3s ease;
}

/* Touch-friendly targets */
@media (max-width: 639px) {
    button, a, select, input[type="checkbox"] {
        min-height: 36px;
    }
    .top-subtab, .log-subtab {
        padding: 6px 10px !important;
        font-size: 13px !important;
    }
    #trafficChart {
        height: 14rem;
        overflow: hidden;
    }
    table tbody td, table thead th {
        padding: 8px 6px !important;
    }
}