/* Seagull custom styles */

/* Dark mode surface variables */
:root {
    --bg-page: #f9fafb;
    --bg-card: #ffffff;
    --text-primary: #111827;
    --text-muted: #6b7280;
    --border: #e5e7eb;
}
html.dark {
    --bg-page: #0f172a;
    --bg-card: #1e293b;
    --text-primary: #f1f5f9;
    --text-muted: #94a3b8;
    --border: #334155;
}

/* HTMX loading indicator */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    display: inline-block;
}

/* Smooth transitions for sidebar */
[x-cloak] {
    display: none !important;
}

/* Responsive sidebar: on mobile, sidebar overlays content */
@media (max-width: 767px) {
    .sidebar-aside {
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
    }
}

/* On desktop, sidebar is part of layout flow */
@media (min-width: 768px) {
    .sidebar-aside {
        position: relative !important;
    }
}

/* Column config width slider */
input[type=range].accent-accent {
    -webkit-appearance: none;
    appearance: none;
    background: #e5e7eb;
    border-radius: 9999px;
    outline: none;
}
input[type=range].accent-accent::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #64748b;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
input[type=range].accent-accent::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #64748b;
    cursor: pointer;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Table responsiveness for mobile/small screens */
/* Table responsiveness for mobile/small screens */
@media (max-width: 767px) {
    table[id$="-table"] th, 
    table[id$="-table"] td {
        position: static !important;
        right: auto !important;
        left: auto !important;
        width: auto !important;
        min-width: max-content !important;
        background-color: transparent !important;
        border-left: none !important;
        z-index: 1 !important;
    }
}