/* Fluid Enterprise Design System Stylesheet - Dynamic Poppins Font System */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* Color Variables Configuration */
:root {
    /* Default Light Mode */
    --fluid-bg: #f4f6fa;
    --fluid-surface: rgba(255, 255, 255, 0.75);
    --fluid-surface-dim: rgba(240, 244, 248, 0.75);
    --fluid-surface-bright: #ffffff;
    --fluid-on-surface: #1e293b;
    --fluid-on-surface-variant: #64748b;
    --fluid-border: rgba(203, 213, 225, 0.6);
    --fluid-outline: #94a3b8;
    
    --fluid-primary: #005ac2;
    --fluid-on-primary: #ffffff;
    --fluid-primary-container: #d8e2ff;
    --fluid-on-primary-container: #001a42;
    
    --fluid-secondary: #6f00be;
    --fluid-on-secondary: #ffffff;
    --fluid-secondary-container: #f0dbff;
    
    --fluid-success: #00a572;
    --fluid-on-success: #ffffff;
    --fluid-danger: #ef4444;
    
    --fluid-radius-sm: 0.5rem;
    --fluid-radius-md: 1.5rem; /* 24px - Cards */
    --fluid-radius-lg: 2rem;   /* 32px - Modals/Sidebars */
    --fluid-radius-full: 9999px; /* Capsule shape */
    
    --fluid-font-headline: 'Poppins', sans-serif;
    --fluid-font-body: 'Poppins', sans-serif;
    --fluid-font-mono: 'JetBrains Mono', monospace;
}

[data-theme="dark"] {
    /* Dark Mode Counterpart */
    --fluid-bg: #0b1326;
    --fluid-surface: rgba(23, 31, 51, 0.75);
    --fluid-surface-dim: rgba(11, 19, 38, 0.75);
    --fluid-surface-bright: #1e2a3d;
    --fluid-on-surface: #dae2fd;
    --fluid-on-surface-variant: #c2c6d6;
    --fluid-border: rgba(255, 255, 255, 0.1);
    --fluid-outline: #8c909f;
    
    --fluid-primary: #adc6ff;
    --fluid-on-primary: #002e6a;
    --fluid-primary-container: #4d8eff;
    --fluid-on-primary-container: #00285d;
    
    --fluid-secondary: #ddb7ff;
    --fluid-on-secondary: #490080;
    --fluid-secondary-container: #6f00be;
    
    --fluid-success: #4edea3;
    --fluid-on-success: #003824;
    --fluid-danger: #ffb4ab;
}

/* Global Reset */
body {
    background-color: var(--fluid-bg) !important;
    color: var(--fluid-on-surface) !important;
    font-family: var(--fluid-font-body);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, .card-title, .modal-title, .navbar-brand {
    font-family: var(--fluid-font-headline);
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Glassmorphic Cards & Panels */
.card {
    background: var(--fluid-surface);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--fluid-border) !important;
    border-radius: var(--fluid-radius-md) !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.04) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
    overflow: hidden;
}

.card-gradient-primary {
    background: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%) !important;
    border: none !important;
}

.card-gradient-secondary {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border: none !important;
}

.card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 16px 48px 0 rgba(0, 0, 0, 0.08) !important;
}

/* Capsule Form Controls & Buttons */
.btn {
    border-radius: var(--fluid-radius-full) !important;
    font-family: var(--fluid-font-body);
    font-weight: 600;
    padding: 0.6rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary {
    background: var(--fluid-primary) !important;
    border-color: var(--fluid-primary) !important;
    color: var(--fluid-on-primary) !important;
}

.btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(0, 90, 194, 0.4);
    transform: translateY(-1px);
}

.form-control, .form-select, .input-group-text {
    border-radius: var(--fluid-radius-full) !important;
    background-color: var(--fluid-surface-dim) !important;
    border: 1px solid var(--fluid-border) !important;
    color: var(--fluid-on-surface) !important;
    padding: 0.6rem 1.2rem;
    transition: all 0.2s ease;
}

.form-control:focus, .form-select:focus {
    background-color: var(--fluid-surface-bright) !important;
    border-color: var(--fluid-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(0, 90, 194, 0.15) !important;
    outline: none;
}

/* Table Enhancements */
.table {
    color: var(--fluid-on-surface) !important;
}

.table th {
    font-family: var(--fluid-font-headline);
    font-weight: 600;
    color: var(--fluid-on-surface-variant);
    border-bottom: 2px solid var(--fluid-border);
}

.table td {
    border-bottom: 1px solid var(--fluid-border);
    vertical-align: middle;
}

/* Badges / Labels */
.badge {
    font-family: var(--fluid-font-mono) !important;
    font-weight: 500;
    letter-spacing: 0.05em;
    border-radius: var(--fluid-radius-full) !important;
    padding: 0.4em 0.8em !important;
}

.bg-success {
    background-color: var(--fluid-success) !important;
    color: var(--fluid-on-success) !important;
}

.bg-danger {
    background-color: var(--fluid-danger) !important;
    color: #ffffff !important;
}

/* Horizontal Glassmorphic Top Navbar */
.navbar-fluid {
    background: var(--fluid-surface) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--fluid-border) !important;
    padding: 0.6rem 2rem !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
    z-index: 1000;
}

.navbar-fluid .navbar-brand {
    font-weight: 800;
    color: var(--fluid-primary) !important;
}

.navbar-fluid .nav-link {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0.5rem 1.2rem !important;
    border-radius: var(--fluid-radius-full);
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.navbar-fluid .nav-link:hover, 
.navbar-fluid .nav-link.active {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.18) !important;
}

.navbar-fluid .dropdown-menu {
    background: var(--fluid-surface-bright) !important;
    border: 1px solid var(--fluid-border) !important;
    border-radius: var(--fluid-radius-md) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
    padding: 0.6rem !important;
}

.navbar-fluid .dropdown-item {
    border-radius: var(--fluid-radius-full) !important;
    color: var(--fluid-on-surface) !important;
    padding: 0.5rem 1rem !important;
    transition: all 0.2s ease;
}

.navbar-fluid .dropdown-item:hover {
    background-color: var(--fluid-primary-container) !important;
    color: var(--fluid-primary) !important;
}

/* Modals */
.modal-content {
    background: var(--fluid-surface) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--fluid-border) !important;
    border-radius: var(--fluid-radius-lg) !important;
    color: var(--fluid-on-surface) !important;
}

/* Checkboxes Super-Ellipses */
.form-check-input {
    border-radius: 0.35rem !important; /* Slightly rounded squircle */
    border: 1.5px solid var(--fluid-outline) !important;
    background-color: var(--fluid-surface-dim);
}

.form-check-input:checked {
    background-color: var(--fluid-primary) !important;
    border-color: var(--fluid-primary) !important;
}

/* Footer Styling */
footer {
    background: var(--fluid-surface) !important;
    border-top: 1px solid var(--fluid-border) !important;
    color: var(--fluid-on-surface-variant) !important;
}

/* Mesh Gradient Background Animation for Login viewport */
@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.mesh-gradient-bg {
    background: linear-gradient(-45deg, #0b1326, #161c33, #3b82f6, #0ea5e9);
    background-size: 400% 400%;
    animation: gradientMove 12s ease infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 0;
}

/* Custom V2 Card Header overrides to enforce glassmorphism */
.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--fluid-border) !important;
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
}

.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.card-header .h1, .card-header .h2, .card-header .h3, .card-header .h4, .card-header .h5, .card-header .h6 {
    color: var(--fluid-on-surface) !important;
    font-weight: 700 !important;
}

/* Premium Table overrides globally */
.table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 0 !important;
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background-color: rgba(0, 90, 194, 0.04) !important;
}

[data-theme="dark"] .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.02) !important;
}

.table th {
    background-color: var(--fluid-surface-dim) !important;
    border-bottom: 1px solid var(--fluid-outline) !important;
    padding: 1rem 0.75rem !important;
    font-size: 0.8rem !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table td {
    padding: 1rem 0.75rem !important;
    border-bottom: 1px solid var(--fluid-border) !important;
}

/* Override bootstrap default badge background classes */
.badge.bg-success, .badge.badge-success {
    background-color: rgba(16, 185, 129, 0.1) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.badge.bg-danger, .badge.badge-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #ef4444 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
}

.badge.bg-warning, .badge.badge-warning {
    background-color: rgba(245, 158, 11, 0.1) !important;
    color: #f59e0b !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.badge.bg-primary, .badge.badge-primary {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #3b82f6 !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.badge.bg-info, .badge.badge-info {
    background-color: rgba(6, 182, 212, 0.1) !important;
    color: #06b6d4 !important;
    border: 1px solid rgba(6, 182, 212, 0.3) !important;
}

.badge.bg-secondary, .badge.badge-secondary {
    background-color: rgba(107, 114, 128, 0.1) !important;
    color: #6b7280 !important;
    border: 1px solid rgba(107, 114, 128, 0.3) !important;
}