/* Global no-roundness and dark tweaks */
/* This stylesheet is intended to be loaded on all pages. */

/* 1) Remove all border radius across the app */
*, *::before, *::after {
	border-radius: 0 !important;
}

/* 2) Common components – double down to override framework utilities */
input, select, textarea, button,
.glass-card, .card, .modal, .dropdown-menu,
nav, header, footer, aside,
.chip, .kpi, .image-item,
.btn, .badge, .alert,
.form-control {
	border-radius: 0 !important;
}

/* 3) Utility classes from popular frameworks */
.rounded, .rounded-0, .rounded-1, .rounded-2, .rounded-3,
.rounded-sm, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl,
.rounded-full, .rounded-pill, .pill {
	border-radius: 0 !important;
}

/* 4) Optional: make card internals align with the flat style */
.glass-card {
	background: #ffffff !important;
	border: 1px solid #e5e7eb !important;
}

/* 5) Light theme palette overrides */
:root {
	--app-bg: #f1f0f3;
	--app-title: #464746; /* headings */
	--app-text: #979696;  /* body text */
	--app-card: #ffffff;
	--app-border: #e5e7eb;
}

body {
	background: var(--app-bg) !important;
	color: var(--app-text) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6 { color: var(--app-title) !important; }

/* Common text utility remaps to requested palette */
.text-slate-200, .text-slate-300, .text-gray-800, .text-gray-900 { color: var(--app-title) !important; }
.text-slate-400, .text-slate-500, .text-gray-600, .text-gray-700, .text-slate-600 { color: var(--app-text) !important; }

/* Card-like elements on light UI */
.card, .modal, .dropdown-menu, .kpi, .chip, .session-item, .glass-card-hover {
	background: var(--app-card) !important;
	border: 1px solid var(--app-border) !important;
	box-shadow: none !important;
}

/* Replace frequent dark backgrounds used earlier */
.bg-\[\#10151d\] { background: var(--app-card) !important; }
.bg-slate-900\/50 { background: rgba(0,0,0,0.04) !important; }
.bg-slate-800\/50 { background: rgba(0,0,0,0.04) !important; }
.text-slate-300 { color: var(--app-text) !important; }
.text-slate-200 { color: var(--app-title) !important; }

/* Handle all variations of the dark background class */
[class*="bg-[#10151d]"] { background: var(--app-card) !important; }

/* All slate background overrides */
.bg-slate-800\/40, .bg-slate-800\/50, .bg-slate-900\/50, .bg-slate-800\/30 { 
  background: rgba(0,0,0,0.04) !important; 
}

/* Dark border and text color overrides */
.border-slate-600, .border-slate-700\/50 { border-color: var(--app-border) !important; }
.text-slate-400 { color: var(--app-text) !important; }
.placeholder-slate-400::placeholder { color: #b0b0b0 !important; }

/* Focus states for light theme */
.focus\:ring-blue-500:focus { 
  --tw-ring-color: rgba(59, 130, 246, 0.3) !important; 
}
.focus\:border-blue-500:focus { 
  border-color: #3b82f6 !important; 
}

/* Lighten image overlay for light theme */
.image-overlay { background: linear-gradient(0deg, rgba(0,0,0,0.2) 0%, transparent 60%) !important; }

/* Inputs on light theme */
input, select, textarea { background: #ffffff !important; border: 1px solid var(--app-border) !important; color: var(--app-text) !important; }
::placeholder { color: #b0b0b0 !important; }

/* Borders */
.border-slate-600, .border-slate-100, .border-gray-200 { border-color: var(--app-border) !important; }

.btn-primary {
            background: linear-gradient(to right, #3b82f6, #60a5fa);
            color: white;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            transition: all 0.3s ease;
        }
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px -5px rgba(59, 130, 246, 0.4);
        }
        .btn-success {
            background: linear-gradient(to right, #059669, #10b981);
            color: white;
            box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
            transition: all 0.3s ease;
        }
        .btn-success:hover {
            transform: translateY(-2px);
            box-shadow: 0 7px 14px -5px rgba(5, 150, 105, 0.4);
        }