/* /assets/style.css - Premium & Elegant Modern Stylesheet */

/* Global Typography & Core System */
* {
    font-family: 'Open Sans', sans-serif;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

:root {
    --shell-max-width: 1920px;
    --shell-padding-min: 1.25rem;
    --shell-padding-max: 3rem;
    --theme-color: #0A2540;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --font-heading: 'Open Sans', sans-serif;
}

/* Elegant Scrollbars */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.05);
}

body.dark-mode ::-webkit-scrollbar-track {
    background: rgba(15, 23, 42, 0.4);
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 99px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
}

/* Beautiful Background Gradients */
body {
    background: radial-gradient(circle at 10% 20%, #f8fafc 0%, #f1f5f9 45%, #e2e8f0 100%);
    min-height: 100vh;
    transition: background 0.4s ease;
}

body.dark-mode {
    background: radial-gradient(circle at 10% 20%, #0b0f19 0%, #0f172a 50%, #1e293b 100%) !important;
    color: #e2e8f0 !important;
}

/* Layout Shells & Surfaces (Glassmorphism) */
.app-shell {
    width: min(94vw, var(--shell-max-width));
    margin-left: auto;
    margin-right: auto;
    padding-left: clamp(var(--shell-padding-min), 2.5vw, var(--shell-padding-max));
    padding-right: clamp(var(--shell-padding-min), 2.5vw, var(--shell-padding-max));
}

.app-surface {
    background-color: rgba(255, 255, 255, 0.82);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px -30px rgba(15, 23, 42, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.7);
    padding: clamp(1.5rem, 3vw, 3rem);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
}

body.dark-mode .app-surface {
    background-color: rgba(30, 41, 59, 0.65) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 25px 70px -35px rgba(2, 6, 23, 0.8) !important;
}

.modern-nav, .app-body nav.modern-nav, .app-body .shadow-md.bg-white.modern-nav {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
    border-radius: 0px !important;
}

body.dark-mode .modern-nav, body.dark-mode nav.modern-nav {
    background: rgba(15, 23, 42, 0.8) !important;
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    border-radius: 0px !important;
}

/* Beautiful Sidebar & Cards */
.card,
.app-body .card,
.app-body .shadow-md.bg-white,
.app-body .shadow-lg.bg-white {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
    background-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.1) !important;
    transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover,
.app-body .card:hover,
.app-body .shadow-md.bg-white:hover,
.app-body .shadow-lg.bg-white:hover {
    transform: none !important;
    box-shadow: 0 10px 30px -15px rgba(15, 23, 42, 0.1) !important;
}

body.dark-mode .card,
body.dark-mode .shadow-md.bg-white,
body.dark-mode .shadow-lg.bg-white {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: rgba(255, 255, 255, 0.06) !important;
    box-shadow: 0 15px 40px -25px rgba(2, 6, 23, 0.9) !important;
}

body.dark-mode .card:hover,
body.dark-mode .shadow-md.bg-white:hover,
body.dark-mode .shadow-lg.bg-white:hover {
    box-shadow: 0 25px 50px -25px rgba(2, 6, 23, 0.95) !important;
}

/* Tables Customizations */
table {
    border-collapse: separate;
    border-spacing: 0 6px;
}

th {
    font-family: var(--font-heading);
    letter-spacing: 0.05em;
    font-weight: 600 !important;
}

td {
    border-top: 1px solid transparent;
    border-bottom: 1px solid transparent;
}

tr:hover td {
    background-color: rgba(148, 163, 184, 0.04) !important;
}

body.dark-mode tr:hover td {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

/* Premium Status Badges */
.status-badge, .rounded-full {
    font-family: var(--font-heading);
    font-weight: 600 !important;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-size: 0.72rem !important;
    padding: 0.25rem 0.75rem !important;
}

/* Forms & Inputs */
input, select, textarea {
    border-radius: var(--radius-sm) !important;
    border: 1px solid rgba(148, 163, 184, 0.3) !important;
    background-color: rgba(255, 255, 255, 0.8) !important;
    padding: 0.625rem 0.875rem !important;
    transition: all 0.2s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--theme-color) !important;
    box-shadow: 0 0 0 3px rgba(10, 37, 64, 0.1) !important;
}

body.dark-mode input, body.dark-mode select, body.dark-mode textarea {
    background-color: rgba(15, 23, 42, 0.6) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #f8fafc !important;
}

body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus {
    border-color: #8b5cf6 !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2) !important;
}

/* Buttons Design */
.btn, .button, a.bg-blue-600, button.bg-blue-600 {
    font-family: var(--font-heading);
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
}

.btn:hover, .button:hover, a.bg-blue-600:hover, button.bg-blue-600:hover {
    transform: none !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25) !important;
}

/* Dark mode specific elements */
body.dark-mode .text-gray-800,
body.dark-mode .text-slate-800 {
    color: #f8fafc !important;
}

body.dark-mode .text-gray-700,
body.dark-mode .text-gray-600,
body.dark-mode .text-slate-600 {
    color: #cbd5e1 !important;
}

body.dark-mode .bg-gray-100,
body.dark-mode .bg-slate-100,
body.dark-mode .bg-gray-50 {
    background-color: rgba(15, 23, 42, 0.4) !important;
}

body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300,
body.dark-mode .divide-gray-200 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}