@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
    --blue-950: #071c35;
    --blue-900: #0d2d52;
    --blue-800: #124b7d;
    --blue-700: #1769aa;
    --blue-600: #2783c6;
    --blue-100: #dceefa;
    --blue-50: #f1f8fd;
    --page: #eef6fc;
    --surface: #ffffff;
    --surface-muted: #f6fbff;
    --ink: #102a43;
    --muted: #4d6b88;
    --line: #c9dceb;
    --success: #1769aa;
}

* { box-sizing: border-box; }

html {
    background: var(--page);
    font-family: "DM Sans", "Segoe UI", sans-serif;
}

body {
    margin: 0;
    background: var(--page) !important;
    background-image: radial-gradient(rgba(23, 105, 170, .055) 1px, transparent 1px) !important;
    background-size: 18px 18px !important;
    color: var(--ink) !important;
    font-size: 15px;
    line-height: 1.6;
}

body::before { display: none; }

a { color: var(--blue-700); }

button,
a { transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, filter .2s ease !important; }

button,
input,
select,
textarea { border-radius: 8px !important; }

input,
select,
textarea {
    width: 100%;
    border: 1px solid #b8d0e4 !important;
    background: var(--surface-muted) !important;
    box-shadow: none !important;
    color: var(--ink) !important;
    font-size: 15px !important;
}

input::placeholder,
textarea::placeholder { color: #7891aa !important; }

input:focus,
select:focus,
textarea:focus {
    border-color: var(--blue-600) !important;
    outline: 3px solid rgba(39, 131, 198, .18) !important;
}

button,
a[class*="bg-"],
button[class*="bg-"] {
    border: 1px solid transparent !important;
    box-shadow: 0 4px 12px rgba(16, 42, 67, .12) !important;
    font-weight: 600;
}

button:hover,
a[class*="bg-"]:hover,
button[class*="bg-"]:hover {
    filter: brightness(1.06);
    transform: translateY(-1px);
}

button:disabled { filter: none; transform: none; }

.shadow,
.shadow-sm,
.shadow-md,
.shadow-lg,
.shadow-xl,
.shadow-2xl { box-shadow: 0 8px 22px rgba(16, 42, 67, .1) !important; }

.rounded-lg,
.rounded-xl,
.rounded-2xl,
.rounded-3xl { border-radius: 12px !important; }

.bg-gradient-to-b,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-r { background-image: none !important; }

[class*="from-blue-600"],
[class*="from-[#0d69b8]"] {
    background-color: var(--blue-700) !important;
    color: #ffffff !important;
}

[class*="from-blue-600"]:hover,
[class*="from-[#0d69b8]"]:hover { background-color: var(--blue-600) !important; }

/* Sidebar: one dark surface, one readable active state. */
aside {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, var(--blue-800), var(--blue-950)) !important;
    border-right: 1px solid #0a3158 !important;
}

aside.bg-gradient-to-b {
    background-image: linear-gradient(180deg, var(--blue-800), var(--blue-950)) !important;
}

aside::before {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    top: 88px;
    height: 1px;
    background: rgba(220, 238, 250, .28);
}

aside > div,
aside > nav,
aside > form { position: relative; z-index: 1; }

aside a {
    border: 1px solid transparent;
    color: #eaf4fc !important;
}

aside a:hover,
aside a.bg-white\/20 {
    background: rgba(39, 131, 198, .38) !important;
    border-color: rgba(220, 238, 250, .3) !important;
    color: #ffffff !important;
    transform: translateX(2px);
}

/* Shared content surfaces. */
.bg-white {
    background: var(--surface) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
}

[class*="bg-slate-50"] { background: var(--surface-muted) !important; }
[class*="bg-slate-100"],
.dashboard-simple,
.dashboard-page main,
.reports-page { background: var(--page) !important; }

[class*="border-slate-100"],
[class*="border-slate-200"],
[class*="border-slate-300"] { border-color: var(--line) !important; }

h1,
h2,
h3,
h4,
b,
strong { color: var(--ink) !important; }

h1,
h2,
h3 { line-height: 1.3; }

label { color: var(--ink) !important; font-weight: 600; }

small,
.text-xs { font-size: 13px !important; line-height: 1.45; }
.text-sm { line-height: 1.55; }

[class*="text-slate-900"],
[class*="text-slate-800"],
[class*="text-slate-700"],
[class*="text-gray-900"] { color: var(--ink) !important; }

[class*="text-slate-600"],
[class*="text-slate-500"],
[class*="text-slate-400"],
[class*="text-gray-500"] { color: var(--muted) !important; }

[class*="text-blue-100"],
[class*="text-blue-600"],
[class*="text-blue-700"] { color: var(--blue-700) !important; }

/* Light status surfaces always use dark blue text. */
[class*="bg-blue-100"],
[class*="bg-emerald"],
[class*="bg-green"],
[class*="bg-amber"],
[class*="bg-red"] {
    background: var(--blue-100) !important;
    border-color: #b8d4e8 !important;
}

[class*="text-emerald"],
[class*="text-green"],
[class*="text-amber"],
[class*="text-red"],
[class*="text-yellow"] { color: var(--blue-700) !important; }

/* Action colors are always dark enough for white labels. */
.bg-blue-600,
button.bg-blue-600,
a.bg-blue-600,
[class*="bg-[#0d69b8]"],
[class*="bg-indigo-600"],
a[class*="bg-amber"],
a[class*="bg-red"],
button[class*="bg-amber"],
button[class*="bg-red"],
button[class*="bg-emerald"] {
    background: var(--blue-700) !important;
    color: #ffffff !important;
    border-color: var(--blue-700) !important;
}

.bg-blue-600:hover,
button.bg-blue-600:hover,
a.bg-blue-600:hover,
[class*="bg-[#0d69b8]"]:hover,
a[class*="bg-amber"]:hover,
a[class*="bg-red"]:hover,
button[class*="bg-amber"]:hover,
button[class*="bg-red"]:hover,
button[class*="bg-emerald"]:hover {
    background: var(--blue-600) !important;
}

.bg-gray-600,
.bg-slate-800,
.bg-slate-900,
a.bg-slate-800,
a.bg-slate-900 {
    background: var(--blue-900) !important;
    color: #ffffff !important;
}

/* Ledger tables. */
table {
    color: var(--ink) !important;
    font-size: 14px;
    line-height: 1.5;
}

thead,
table thead,
table thead tr {
    background: #eaf3fa !important;
    color: var(--blue-900) !important;
}

tbody tr { border-color: var(--line) !important; }
tbody tr:hover { background: var(--blue-50) !important; }
tbody tr:last-child { border-bottom-width: 0 !important; }

/* Dashboard and report cards. */
.dashboard-page main > header {
    background: rgba(255, 255, 255, .95) !important;
    border-bottom: 1px solid var(--line) !important;
    box-shadow: 0 4px 14px rgba(16, 42, 67, .06) !important;
}

.dashboard-page section > div,
.reports-page section > div {
    position: relative;
    background: var(--surface) !important;
    border: 1px solid var(--line) !important;
    box-shadow: 0 10px 26px rgba(16, 42, 67, .08) !important;
}

.dashboard-page section > div:hover,
.reports-page section > div:hover { transform: translateY(-2px); }

.dashboard-page [class*="bg-[#0d69b8]"],
.reports-page [class*="bg-[#0d69b8]"] {
    background: linear-gradient(135deg, var(--blue-800), var(--blue-600)) !important;
    color: #ffffff !important;
}

.dashboard-page [class*="bg-slate-900"],
.reports-page [class*="bg-slate-900"] {
    background: linear-gradient(135deg, var(--blue-950), var(--blue-900)) !important;
    color: #ffffff !important;
}

.dashboard-page [class*="bg-[#0d69b8]"] p,
.dashboard-page [class*="bg-[#0d69b8]"] span,
.dashboard-page [class*="bg-slate-900"] p,
.dashboard-page [class*="bg-slate-900"] span,
.reports-page [class*="bg-[#0d69b8]"] p,
.reports-page [class*="bg-[#0d69b8]"] span,
.reports-page [class*="bg-slate-900"] p,
.reports-page [class*="bg-slate-900"] span { color: #dceefa !important; }

.dashboard-page [class*="bg-[#0d69b8]"] b,
.dashboard-page [class*="bg-slate-900"] b,
.reports-page [class*="bg-[#0d69b8]"] b,
.reports-page [class*="bg-slate-900"] b { color: #ffffff !important; }

body > div > div.mx-auto > div:first-child,
body > div.mx-auto > div:first-child { border-bottom: 1px solid var(--line); }

@media (max-width: 640px) {
    body { padding: 12px !important; }
    table { min-width: 620px; }
    h1.text-3xl { font-size: 1.6rem !important; }
}