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

:root { --ink: #1e293b; --muted: #718096; --line: #e8edf2; --paper: #f7f9fb; --white: #fff; --blue: #1677ff; --blue-soft: #eaf3ff; --orange: #ec8b2e; --orange-soft: #fff4e6; --green: #17a673; --green-soft: #e6f8f1; --red: #dd5b5b; --red-soft: #fff0f0; }
* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', sans-serif; font-size: 14px; }
a { color: inherit; text-decoration: none; }
.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 244px; padding: 29px 20px; background: #102338; color: #b7c7d8; flex-shrink: 0; display: flex; flex-direction: column; }
.brand { display: flex; align-items: center; gap: 11px; color: #fff; font: 700 20px 'Space Grotesk', sans-serif; margin-bottom: 58px; }
.brand-mark { display: grid; place-items: center; width: 32px; height: 32px; color: #102338; background: #f9c74f; border-radius: 8px; font-size: 19px; }
.nav-label, .eyebrow { color: #8799ab; font-size: 10px; font-weight: 700; letter-spacing: 1.5px; }
.nav-label { margin: 0 12px 13px; }
.nav-item { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 3px 0; border-radius: 7px; font-weight: 600; transition: .2s; }
.nav-item span { width: 18px; font-size: 19px; text-align: center; }
.nav-item:hover, .nav-item.active { color: #fff; background: #1b3651; }
.nav-item.active { box-shadow: inset 3px 0 #f9c74f; }
.sidebar-note { margin-top: auto; padding: 15px; border: 1px solid #294057; border-radius: 8px; color: #95aabd; font-size: 12px; line-height: 1.7; }.sidebar-note strong { color: #f9c74f; }
.main-content { flex: 1; min-width: 0; }.topbar { height: 76px; display: flex; align-items: center; justify-content: flex-end; padding: 0 5%; background: var(--white); border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }.topbar-right { display: flex; align-items: center; gap: 9px; }.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }.avatar { display: grid; place-items: center; width: 31px; height: 31px; margin-left: 12px; border-radius: 50%; color: #195f7d; background: #dceff1; font-size: 10px; font-weight: 700; }.mobile-brand { display: none; }
.page-heading { max-width: 1180px; margin: 0 auto; padding: 47px 5% 34px; display: flex; justify-content: space-between; align-items: end; gap: 20px; }.eyebrow { margin: 0 0 9px; color: var(--blue); }.page-heading h1, h2 { font-family: 'Space Grotesk', sans-serif; letter-spacing: -.4px; margin: 0; }.page-heading h1 { font-size: 31px; line-height: 1.15; }.subheading { color: var(--muted); margin: 11px 0 0; }.button { display: inline-block; border: 0; border-radius: 6px; padding: 12px 17px; font: 600 13px 'DM Sans', sans-serif; cursor: pointer; white-space: nowrap; }.button-primary { color: #fff; background: var(--blue); box-shadow: 0 5px 12px #1677ff25; }.stats-grid, .table-wrap, .section-header, .form-section, .alert { max-width: 1180px; margin-left: auto; margin-right: auto; }.stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; padding: 0 5%; }.stat-card { padding: 21px 22px 20px; background: var(--white); border: 1px solid var(--line); border-top: 3px solid; border-radius: 7px; }.accent-blue { border-top-color: var(--blue); }.accent-orange { border-top-color: var(--orange); }.accent-green { border-top-color: var(--green); }.stat-icon { width: 35px; height: 35px; display: grid; place-items: center; margin-bottom: 17px; border-radius: 7px; font-size: 19px; }.accent-blue .stat-icon { color: var(--blue); background: var(--blue-soft); }.accent-orange .stat-icon { color: var(--orange); background: var(--orange-soft); }.accent-green .stat-icon { color: var(--green); background: var(--green-soft); }.stat-card p { color: var(--muted); margin: 0 0 5px; }.stat-card strong { display: block; font: 700 25px 'Space Grotesk', sans-serif; }.stat-meta { display: block; margin-top: 8px; color: #9aa7b5; font-size: 11px; }.section-header { display: flex; justify-content: space-between; align-items: end; padding: 43px 5% 17px; }.section-header h2 { font-size: 20px; }.text-link { color: var(--blue); font-weight: 600; font-size: 12px; }
.table-wrap { overflow-x: auto; margin-bottom: 35px; padding: 0 5%; }.table-wrap table { width: 100%; min-width: 680px; border-collapse: collapse; background: var(--white); border: 1px solid var(--line); }.table-wrap th { padding: 13px 16px; color: #8a98a7; background: #fbfcfd; border-bottom: 1px solid var(--line); text-align: left; font-size: 10px; letter-spacing: .8px; text-transform: uppercase; }.table-wrap td { padding: 17px 16px; border-bottom: 1px solid var(--line); color: #546273; white-space: nowrap; }.table-wrap tr:last-child td { border-bottom: 0; }.table-wrap td strong { color: var(--ink); font-weight: 600; }.table-wrap td small { display: block; color: #9ba8b5; margin-top: 4px; }.code-chip { padding: 5px 7px; border-radius: 4px; color: var(--blue); background: var(--blue-soft); font-size: 11px; font-weight: 700; }.status { display: inline-block; padding: 5px 9px; border-radius: 20px; font-size: 11px; font-weight: 600; }.status-paid { color: var(--green); background: var(--green-soft); }.status-pending { color: #b87916; background: #fff5dc; }.status-late { color: var(--red); background: var(--red-soft); }.empty-state { padding: 35px !important; text-align: center; color: #9ba8b5 !important; }.alert { margin-bottom: 20px; padding: 12px 16px; border: 1px solid #bfeedd; border-radius: 6px; color: var(--green); background: var(--green-soft); }.alert-warning { border-color: #f4d89b; color: #9b6a14; background: #fff8e9; }.form-section { margin-bottom: 50px; padding: 0 5%; }.form-section .section-header { padding-left: 0; padding-right: 0; }.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; padding: 24px; background: var(--white); border: 1px solid var(--line); border-radius: 7px; }.form-grid label { display: flex; flex-direction: column; gap: 8px; color: #536171; font-size: 12px; font-weight: 600; }.form-grid input, .form-grid select, .inline-form select { width: 100%; padding: 11px 12px; border: 1px solid #dfe6ec; border-radius: 5px; color: var(--ink); background: #fff; font: 400 13px 'DM Sans', sans-serif; outline: none; }.form-grid input:focus, .form-grid select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft); }.form-actions { grid-column: 1 / -1; margin-top: 2px; }.icon-button { width: 28px; height: 28px; border: 0; border-radius: 5px; color: var(--red); background: var(--red-soft); cursor: pointer; font-size: 18px; }.inline-form select { padding: 6px 8px; font-size: 11px; }
@media (max-width: 720px) { .app-shell { display: block; }.sidebar { width: 100%; padding: 15px 18px; }.brand { margin-bottom: 14px; }.nav-label, .sidebar-note { display: none; }.sidebar nav { display: flex; gap: 5px; }.nav-item { flex: 1; justify-content: center; padding: 9px 5px; font-size: 11px; }.nav-item span { display: none; }.topbar { height: 53px; padding: 0 18px; justify-content: space-between; }.mobile-brand { display: block; font: 700 15px 'Space Grotesk', sans-serif; }.page-heading { padding: 31px 18px 25px; align-items: start; flex-direction: column; }.page-heading h1 { font-size: 27px; }.stats-grid { grid-template-columns: 1fr; padding: 0 18px; gap: 10px; }.stat-card { padding: 16px; }.stat-icon { display: none; }.section-header { padding: 34px 18px 15px; }.table-wrap { padding: 0 18px; }.form-section { padding: 0 18px; }.form-grid { grid-template-columns: 1fr; padding: 18px; }.form-actions { grid-column: auto; }.alert { margin-left: 18px; margin-right: 18px; } }
.heading-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.button-secondary { color: var(--blue); background: var(--blue-soft); }
@media (max-width: 720px) { .heading-actions { width: 100%; } .heading-actions .button { flex: 1; text-align: center; } }
.accent-red { border-top-color: var(--red); }
.stats-grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
.login-page { display: grid; min-height: 100vh; place-items: center; padding: 20px; background: #eef3f7; }
.login-box { width: min(100%, 410px); padding: 34px; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 15px 35px #10233812; }
.login-brand { color: var(--ink); margin-bottom: 35px; }
.login-form { display: grid; gap: 17px; margin-top: 25px; }
.login-form label { display: grid; gap: 8px; color: #536171; font-size: 12px; font-weight: 600; }
.login-form input { padding: 12px; border: 1px solid #dfe6ec; border-radius: 5px; font: 400 13px 'DM Sans', sans-serif; }
.logout-link { color: var(--blue); font-weight: 600; margin-left: 8px; }
.month-picker { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
.month-picker select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; color: var(--ink); background: var(--white); font: 500 12px 'DM Sans', sans-serif; }
@media (max-width: 720px) {
	.table-wrap { width: 100%; overflow-x: hidden; }
	.table-wrap table { width: 100%; min-width: 0; table-layout: fixed; }
	.table-wrap th, .table-wrap td { padding: 11px 7px; white-space: normal; overflow-wrap: anywhere; font-size: 11px; }
	.table-wrap th { font-size: 9px; letter-spacing: .3px; }
	.table-wrap td strong { overflow-wrap: anywhere; }
	.table-wrap .code-chip { padding: 4px 5px; font-size: 10px; }
	.table-wrap .icon-button { width: 24px; height: 24px; }
}
.alert-error { color: var(--red); background: var(--red-soft); border-color: #f4c5c5; }
.edit-button { display: inline-grid; place-items: center; color: var(--blue); background: var(--blue-soft); margin-right: 5px; }
.button-danger { color: #fff; background: var(--red); margin-left: 5px; }
.inline-form { display: inline; }