/* DB8 Platform Theme Styles */

/* Root variables for light mode */
:root {
    --color-primary: rgb(59 130 246);
    --color-secondary: rgb(100 116 139);
    --color-muted: rgb(148 163 184);
    --color-app: rgb(248 250 252);
    --color-card: rgb(255 255 255);
    --color-surface-50: rgb(248 250 252);
    --color-surface-100: rgb(241 245 249);
    --color-surface-200: rgb(226 232 240);
    --color-surface-700: rgb(51 65 85);
    --color-surface-800: rgb(30 41 59);
    --color-border-default: rgb(226 232 240);
    --color-text-primary: rgb(17 24 39);
    --color-text-secondary: rgb(75 85 99);
    --color-text-muted: rgb(107 114 128);
}

/* Dark mode variables */
.dark {
    --color-primary: rgb(147 197 253);
    --color-secondary: rgb(203 213 225);
    --color-muted: rgb(148 163 184);
    --color-app: rgb(15 23 42);
    --color-card: rgb(30 41 59);
    --color-surface-50: rgb(30 41 59);
    --color-surface-100: rgb(51 65 85);
    --color-surface-200: rgb(71 85 105);
    --color-surface-700: rgb(148 163 184);
    --color-surface-800: rgb(15 23 42);
    --color-border-default: rgb(51 65 85);
    --color-text-primary: rgb(243 244 246);
    --color-text-secondary: rgb(209 213 219);
    --color-text-muted: rgb(156 163 175);
}

/* Apply theme colors */
.bg-app { 
    background-color: var(--color-app) !important; 
}
.bg-card { 
    background-color: var(--color-card) !important; 
}
.text-primary { 
    color: var(--color-text-primary) !important; 
}
.text-secondary { 
    color: var(--color-text-secondary) !important; 
}
.text-muted { 
    color: var(--color-text-muted) !important; 
}
.border-default { 
    border-color: var(--color-border-default) !important; 
}

/* Button styles with dark mode support */
.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: rgb(37 99 235);
    border: 1px solid transparent;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.75rem;
    color: rgb(255 255 255);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    cursor: pointer;
}

.btn-primary:hover {
    background-color: rgb(29 78 216);
}

.btn-primary:focus {
    background-color: rgb(29 78 216);
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
}

.btn-primary:active {
    background-color: rgb(30 58 138);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid;
    border-radius: 0.375rem;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--color-card);
    color: var(--color-text-primary);
    border-color: var(--color-border-default);
}

.btn-secondary:hover {
    background-color: var(--color-surface-50);
}

.btn-secondary:focus {
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
}

.btn-secondary:disabled {
    opacity: 0.25;
}

.btn-ghost {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: colors 0.15s ease-in-out;
    color: var(--color-text-secondary);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: transparent;
}

.btn-ghost:hover {
    color: var(--color-text-primary);
    background-color: var(--color-surface-100);
}

/* Card styles with proper dark mode */
.card {
    background-color: var(--color-card) !important;
    border: 1px solid var(--color-border-default) !important;
    overflow: hidden;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border-radius: 0.5rem;
}

@media (min-width: 640px) {
    .card {
        border-radius: 0.5rem;
    }
}

.card-header {
    background-color: var(--color-surface-50) !important;
    border-bottom: 1px solid var(--color-border-default) !important;
    padding: 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    background-color: var(--color-surface-50) !important;
    border-top: 1px solid var(--color-border-default) !important;
    padding: 1.5rem;
}

/* Form styles with dark mode */
.input-field, .form-input {
    background-color: var(--color-card) !important;
    color: var(--color-text-primary) !important;
    border-color: var(--color-border-default) !important;
    display: block;
    width: 100%;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 0.5rem 0.75rem;
    border: 1px solid;
    transition: all 0.15s ease-in-out;
}

.input-field:focus, .form-input:focus {
    border-color: rgb(59 130 246);
    outline: 2px solid rgb(59 130 246);
    outline-offset: 2px;
}

/* Ensure all text elements follow theme */
.card .text-primary,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.text-primary {
    color: var(--color-text-primary) !important;
}

.card .text-secondary,
.card p,
.text-secondary {
    color: var(--color-text-secondary) !important;
}

.card .text-muted,
.card small,
.text-muted {
    color: var(--color-text-muted) !important;
}

/* Override any Tailwind classes that might interfere */
.bg-white {
    background-color: var(--color-card) !important;
}

.dark .bg-white {
    background-color: var(--color-card) !important;
}

.text-gray-800, .text-gray-900 {
    color: var(--color-text-primary) !important;
}

.text-gray-500, .text-gray-600 {
    color: var(--color-text-secondary) !important;
}

.border-gray-200, .border-gray-100 {
    border-color: var(--color-border-default) !important;
}

/* Force all backgrounds to respect theme */
.dark .bg-gray-50, .dark .bg-gray-100, .dark .bg-gray-200 {
    background-color: var(--color-surface-50) !important;
}

.dark .text-black, .dark .text-gray-900, .dark .text-gray-800 {
    color: var(--color-text-primary) !important;
}

/* Alpine.js cloak utility */
[x-cloak] { 
    display: none !important; 
}

/* Search Styles */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Search dropdown shadow */
.search-dropdown {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Additional theme support for colored backgrounds */
.dark .bg-yellow-100 {
    background-color: rgb(113 63 18) !important; /* yellow-900 equivalent */
}

.dark .text-yellow-800 {
    color: rgb(254 240 138) !important; /* yellow-200 equivalent */
}

.dark .bg-red-100 {
    background-color: rgb(127 29 29) !important; /* red-900 equivalent */
}

.dark .text-red-700 {
    color: rgb(252 165 165) !important; /* red-300 equivalent */
}

.dark .bg-green-100 {
    background-color: rgb(20 83 45) !important; /* green-900 equivalent */
}

.dark .text-green-700 {
    color: rgb(134 239 172) !important; /* green-300 equivalent */
}

.dark .bg-blue-100 {
    background-color: rgb(30 58 138) !important; /* blue-900 equivalent */
}

.dark .text-blue-800 {
    color: rgb(147 197 253) !important; /* blue-300 equivalent */
}

.dark .bg-indigo-100 {
    background-color: rgb(49 46 129) !important; /* indigo-900 equivalent */
}

.dark .text-indigo-800 {
    color: rgb(165 180 252) !important; /* indigo-300 equivalent */
}

.dark .bg-purple-100 {
    background-color: rgb(88 28 135) !important; /* purple-900 equivalent */
}

.dark .text-purple-600 {
    color: rgb(196 181 253) !important; /* purple-300 equivalent */
}

/* Force consistent theming across all pages */
.dark .bg-gray-50 {
    background-color: var(--color-surface-50) !important;
}

.dark .bg-gray-100 {
    background-color: var(--color-surface-100) !important;
}

.dark .bg-gray-200 {
    background-color: var(--color-surface-200) !important;
}

.dark .border-gray-200 {
    border-color: var(--color-border-default) !important;
}

.dark .border-gray-300 {
    border-color: var(--color-surface-200) !important;
}

.dark .text-gray-500 {
    color: var(--color-text-muted) !important;
}

.dark .text-gray-600 {
    color: var(--color-text-secondary) !important;
}

.dark .text-gray-700 {
    color: var(--color-text-secondary) !important;
}

.dark .text-gray-800 {
    color: var(--color-text-primary) !important;
}

.dark .text-gray-900 {
    color: var(--color-text-primary) !important;
}