/* Custom styles for SCM Demand Dashboard */

/* Deep space-blue radial gradient background */
body {
    background: radial-gradient(circle at 50% 0%, #1e1b4b 0%, #0a0e1a 55%, #020612 100%) !important;
}

/* Glassmorphism card layouts */
.glass-card {
    background: rgba(13, 20, 35, 0.55) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.45);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
    border-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.06);
}

/* Color Accents to visually separate charts and components */
.border-accent-cyan {
    border-top: 3px solid #06b6d4 !important;
}

.border-accent-emerald {
    border-top: 3px solid #10b981 !important;
}

.border-accent-amber {
    border-top: 3px solid #f59e0b !important;
}

.border-accent-purple {
    border-top: 3px solid #a855f7 !important;
}

/* Glassmorphic Sidebar */
aside.glass-sidebar {
    background: rgba(9, 13, 24, 0.4) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-right: 1px solid rgba(255, 255, 255, 0.06) !important;
}

/* Glassmorphic Navbar */
header.glass-header {
    background: rgba(9, 13, 24, 0.25) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* Slick scrollbar for modern lists */
.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.2);
}

/* Category Checkboxes Styling */
#filter-categories input[type="checkbox"]:checked {
    background-color: #06b6d4;
    border-color: #06b6d4;
}

/* Layout animations */
aside {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chart Canvas adjustments */
.apexcharts-canvas {
    margin: 0 auto;
}

/* Data grid styling layout constraints */
th, td {
    white-space: nowrap;
    text-overflow: ellipsis;
}

td {
    max-width: 250px;
    overflow: hidden;
}

/* Query highlight styling */
.highlight {
    background-color: rgba(6, 182, 212, 0.25);
    color: #22d3ee;
    padding: 0.1rem 0.2rem;
    border-radius: 0.25rem;
    font-weight: 600;
}

/* Toggle buttons active look */
.toggle-btn.active {
    background-color: #06b6d4;
    color: #0c101c;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(6, 182, 212, 0.2);
}

/* Table Row Highlights */
tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

tbody tr {
    transition: background-color 0.15s ease;
}

/* Animations */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50% { opacity: .6; }
}

.pulse-indicator {
    animation: pulse-soft 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Form inputs styling */
.form-checkbox {
    appearance: none;
    user-select: none;
    flex-shrink: 0;
    height: 1rem;
    width: 1rem;
    color: #06b6d4;
    background-color: rgba(2, 6, 23, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
    border-width: 1px;
    border-radius: 0.25rem;
    display: inline-block;
    vertical-align: middle;
    background-origin: border-box;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;
}

.form-checkbox:checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='black' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    background-color: currentColor;
    border-color: transparent;
}

/* Table controls scroll custom background */
thead {
    background: rgba(9, 13, 24, 0.7) !important;
}

/* Clean Input layouts */
input[type="text"] {
    background: rgba(2, 6, 23, 0.5) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
}

input[type="text"]:focus {
    border-color: #06b6d4 !important;
    background: rgba(2, 6, 23, 0.8) !important;
}

/* Light Theme overrides for Glassmorphism UI */
body.light-theme {
    background: radial-gradient(circle at 50% 0%, #e0e7ff 0%, #f1f5f9 60%, #f8fafc 100%) !important;
}

body.light-theme .glass-card {
    background: rgba(255, 255, 255, 0.65) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.06) !important;
}

body.light-theme .glass-card:hover {
    border-color: rgba(6, 182, 212, 0.3) !important;
    box-shadow: 0 12px 40px 0 rgba(6, 182, 212, 0.08) !important;
}

body.light-theme aside.glass-sidebar {
    background: rgba(255, 255, 255, 0.45) !important;
    border-right: 1px solid rgba(15, 23, 42, 0.08) !important;
}

body.light-theme header.glass-header {
    background: rgba(255, 255, 255, 0.35) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

body.light-theme input[type="text"] {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(15, 23, 42, 0.1) !important;
    color: #0f172a !important;
}

body.light-theme input[type="text"]::placeholder {
    color: #94a3b8 !important;
}

body.light-theme input[type="text"]:focus {
    border-color: #06b6d4 !important;
    background: #ffffff !important;
}

body.light-theme .text-white {
    color: #0f172a !important;
}

body.light-theme .text-slate-300, 
body.light-theme .text-slate-350,
body.light-theme .text-slate-400 {
    color: #334155 !important;
}

body.light-theme .text-slate-450,
body.light-theme .text-slate-500 {
    color: #64748b !important;
}

body.light-theme .bg-slate-950\/20,
body.light-theme .bg-slate-950\/60,
body.light-theme .bg-slate-950\/65 {
    background: rgba(255, 255, 255, 0.6) !important;
    border-color: rgba(15, 23, 42, 0.08) !important;
}