/* ============================================
Dynamic System Styles
Generated from system_settings table
============================================ */

:root {
/* Primary Colors */
--primary-color:
#334155;
--primary-light:
#3d4e66;
--primary-dark:
#283444;
--secondary-color:
#b2b2b3;
--accent-color:
#3b82f6;

/* Status Colors */
--success-color:
#10b981;
--warning-color:
#f59e0b;
--error-color:
#ef4444;

/* Component Colors */
--sidebar-bg:
#1f2937;
--header-bg:
#ffffff;

/* Text Colors */
--text-primary:
#7c8088;
--text-secondary:
#3e4041;

/* Typography */
--font-family:
Inter, system-ui, sans-serif;

/* Border Radius */
--radius-sm:
4px;
--radius-md:
8px;
--radius-lg:
12px;
--radius-xl:
16px;
--radius-full: 9999px;

/* Gradients */
--gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
--gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, var(--primary-color) 100%);
}

/* Apply font family globally */
body {
font-family: var(--font-family);
}

/* Primary Buttons */
.btn-primary {
background: var(--primary-color);
border-color: var(--primary-color);
}

.btn-primary:hover {
background: var(--primary-dark);
border-color: var(--primary-dark);
}

/* Gradient Backgrounds */
.bg-gradient-primary,
.gradient-primary {
background: var(--gradient-primary);
}

/* Links */
a {
color: var(--primary-color);
}

a:hover {
color: var(--primary-dark);
}

/* Badges */
.badge-primary {
    background: #33415515;
    color: #334155;
}

.badge-success {
    background: #10b98115;
    color: #10b981;
}

.badge-warning {
    background: #f59e0b15;
    color: #f59e0b;
}

.badge-info {
    background: #b2b2b315;
    color: #b2b2b3;
}

.badge-error,
.badge-danger {
    background: #ef444415;
    color: #ef4444;
}

/* Alerts */
.alert-success {
background:
#1cffe8;
border-left-color: var(--success-color);
color:
#096f4d;
}

.alert-warning {
background:
#ffff13;
border-left-color: var(--warning-color);
color:
#935e06;
}

.alert-error {
background:
#ff7a7a;
border-left-color: var(--error-color);
color:
#8f2828;
}

/* Sidebar */
.sidebar {
background: var(--sidebar-bg);
}

/* Header */
.header {
background: var(--header-bg);
}

/* Form Controls Focus */
.form-control:focus,
input:focus,
textarea:focus,
select:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 3px
#33415520;
}

/* Checkboxes and Radio Buttons */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}

/* Progress Bars */
.progress-bar {
background-color: var(--primary-color);
}

/* Tabs */
.tab-button.active {
color: var(--primary-color);
border-bottom-color: var(--primary-color);
}

/* Cards */
.card {
border-radius: var(--radius-lg);
}

/* Modals */
.modal-content {
border-radius: var(--radius-xl);
}

/* Tooltips */
.tooltip {
background: var(--primary-color);
}

/* Loading Spinner */
.spinner {
border-top-color: var(--primary-color);
}

/* Custom Scrollbar */
::-webkit-scrollbar-thumb {
background: var(--primary-color);
}

::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}

/* Selection */
::selection {
background: var(--primary-color);
color: white;
}

::-moz-selection {
background: var(--primary-color);
color: white;
}

/* ============================================
Responsive Adjustments
============================================ */

@media (max-width: 768px) {
:root {
--radius-sm:
6px;
--radius-md:
6px;
--radius-lg:
8px;
--radius-xl:
12px;
}
}

/* ============================================
Print Styles
============================================ */

@media print {
.sidebar,
.header,
.btn,
.no-print {
display: none !important;
}
}