/* PASS · Verde bosque, marfil y latón. */
:root {
  --ink: #243b35; --muted: #727b73; --line: #e2e4da;
  --paper: #f6f5f0; --green: #23584a; --green-dark: #173f35;
  --mint: #edf3ec; --navy: #183f35; --cyan: #b69a62;
  --shadow: 0 5px 24px rgb(31 53 43 / 4%);
}
body { font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; }
.sidebar { background: #183d33; border-right: 0; padding: 25px 17px 18px; }
.sidebar .brand { margin: 0 7px 23px; padding: 13px 15px; background: #fff; border-radius: 8px; }
.sidebar .brand-logo { max-height: 64px; object-position: center; }
.nav-label { color: #a9bcb1; letter-spacing: 1.9px; font-size: 9px; margin-top: 23px; }
.nav-link { color: #d7e2da; border-radius: 6px; padding: 11px 13px; font-size: 12px; margin-bottom: 3px; }
.nav-link span { color: #afc2b7; }
.nav-link:hover { background: #244b3f; color: #fff; transform: none; }
.nav-link.selected { background: #315648; color: #fff; box-shadow: inset 3px 0 #c7ae78; }
.nav-link.selected span { color: #e5c98e; }
.sidebar-bottom { border-color: #3a574b; }
.user-box b { color: #f4f4ea; }
.user-box small { color: #acbeb2; }
.avatar { background: #b69a62; color: #183d33; }
.sidebar .icon-button { color: #d6e0d6; background: #2a4c3f; }
.main { background: var(--paper); }
.topbar { background: #fbfaf6; border-bottom: 1px solid var(--line); height: 70px; }
.breadcrumb { color: #56675d; font-size: 12px; }
.top-date { color: #7c8479; font-size: 11px; }
.content { padding-top: 40px; }
.page-heading { margin-bottom: 28px; align-items: center; }
.eyebrow { color: #8b744a; letter-spacing: 2.4px; font-size: 10px; font-weight: 700; }
.page-heading h1, .dashboard-hero h1, .login-card h1 {
  font-family: Georgia, "Times New Roman", serif; font-weight: 400;
  letter-spacing: -1px; font-size: 38px; line-height: 1.2; margin: 9px 0 10px;
}
.muted { color: var(--muted); font-size: 13px; line-height: 1.7; }
.button { min-height: 42px; padding: 11px 17px; border-radius: 6px; font-size: 12px; font-weight: 600; }
.button:hover { transform: none; box-shadow: 0 4px 12px rgb(24 61 51 / 10%); }
.primary { background: #23584a; color: #fff; border: 1px solid #23584a; }
.primary:hover { background: #173f35; }
.secondary { background: #fff; color: #36584a; border-color: #d7ddd2; }
.secondary:hover { background: #f2f4ed; }
.panel, .stat-card { background: #fffefa; border: 1px solid #e1e3d8; border-radius: 10px; box-shadow: var(--shadow); }
.panel { padding: 25px; }
.panel h2 { color: #294c3f; font-size: 16px; font-weight: 600; }
.stat-card { padding: 23px; }
.dashboard-stats a.stat-card { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease; }
.dashboard-stats a.stat-card:hover { border-color: #98b09a; box-shadow: 0 7px 22px rgb(32 63 46 / 10%); }
.dashboard-stats a.stat-card:focus-visible { outline: 3px solid #a9905a; outline-offset: 3px; }
.dashboard-stats a.stat-card .stat-foot::after { content: ' ↗'; color: #52765c; }
.stat-card::after { display: none; }
.stat-icon { background: #edf1e8; color: #6e7852; border-radius: 50%; }
.dashboard-stats .stat-icon { width: 43px; height: 43px; border-radius: 13px; background: linear-gradient(145deg, #f6f8ef, #e5ecdd); border: 1px solid #dce5d2; box-shadow: inset 0 1px 0 #fff, 0 3px 8px rgb(32 63 46 / 4%); }
.dashboard-stats .stat-icon .nav-icon { width: 23px; height: 23px; color: #416853; flex-basis: 23px; }
.dashboard-stats .stat-icon.icon-overdue { background: #faf4e6; border-color: #ebdfbf; }
.dashboard-stats .stat-icon.icon-overdue .nav-icon { color: #957335; }
.dashboard-stats .stat-icon.icon-late_fee { background: #f4efdf; border-color: #e7dcc0; }
.dashboard-stats .stat-icon.icon-late_fee .nav-icon { color: #88703f; }
@media (max-width: 650px) {
  .dashboard-stats .stat-icon { width: 32px; height: 32px; border-radius: 10px; }
  .dashboard-stats .stat-icon .nav-icon { width: 19px; height: 19px; }
}
.stat-value { color: #254d3e; font-weight: 500; font-variant-numeric: tabular-nums; }
.stat-label { color: #727e70; }
.text-link, .table-link, .client-list-name { color: #23584a; }
.search-bar { padding: 0 0 23px; gap: 12px; }
.search-bar input { max-width: 440px; }
.form-stack input, .form-stack select, .form-stack textarea, .search-bar input {
  background: #fff; border: 1px solid #d9dfd3; border-radius: 6px;
  font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; min-height: 45px;
}
.form-stack label { color: #3b5144; font-size: 13px; gap: 8px; }
.help { font-size: 12px; line-height: 1.6; }
.form-stack input:focus, .form-stack select:focus, .form-stack textarea:focus, .search-bar input:focus {
  border-color: #5b8065; box-shadow: 0 0 0 3px rgb(77 118 83 / 12%);
}
.form-panel { max-width: 800px; padding: 32px; }
.form-stack { gap: 22px; }
.table-wrap { border-radius: 0; }
.table-wrap th { background: #f0f2e9; color: #6a7868; border-color: #e1e5d9; padding: 14px 18px; font-size: 10px; letter-spacing: 1.2px; }
.table-wrap td { padding: 18px; font-size: 13px; color: #526154; border-color: #eceee6; }
.table-wrap td .table-link, .client-list-name, .text-link { font-size: 13px; }
.table-wrap tbody tr:hover { background: #f5f6ee; }
.client-list-name { gap: 13px; font-weight: 600; }
.client-list-photo { width: 40px; height: 40px; flex-basis: 40px; background: #edf0e4; color: #60754c; font-size: 15px; border: 1px solid #dfe5d1; }
.client-profile-photo { background: #edf0e4; color: #60754c; border-color: #dfe5d1; }
.amount, .due-amount { color: #254d3e !important; }
.details, .loan-row, .payment-row, .client-loan-main { font-size: 13px; }
.details dd { color: #365245; }
.badge { padding: 5px 10px; font-size: 10px; }
.badge.active, .badge.paid { background: #eaf1e5; color: #39613f; }
.dashboard-hero { background: #214d3e; border-radius: 10px; padding: 32px; box-shadow: none; border-bottom: 3px solid #b69a62; }
.dashboard-hero .eyebrow { color: #ddc58d; }
.dashboard-hero .muted { color: #d1ded3; }
.dashboard-hero .button { color: #234d3e; background: #faf7ed; border-color: #faf7ed; }
.due-day { color: #476745; background: #ecf1e4; }
.chart-bar.collected { background: #4b8060; }
.collected-key::before { background: #4b8060; }
.chart-bar.expected, .expected-key::before { background: #d5d8bc; }
.notice { background: #eef3e8; color: #365b3b; border-color: #d8e3cd; }
.notice.error { background: #fff0ed; color: #9b3838; border-color: #efd5cf; }
.field-error, .errorlist { font-size: 12px; }
.login-wrap { background: radial-gradient(ellipse at top, #e6ebdf, transparent 65%); }
.login-card { border-radius: 12px; background: #fffefa; border-color: #dce1d2; padding: 40px; box-shadow: 0 18px 60px rgb(31 53 43 / 9%); }
.login-card h1 { color: #234d3e; font-size: 36px; text-align: center; }
.login-card > .muted { text-align: center; }
.login-card a { color: #315e46; }
.password-toggle { background: #eff2e9; color: #426149; }
.password-toggle:hover { background: #e3eadb; }
.login-security span { color: #6c8753; }
.footer { color: #8a8c7c; font-size: 11px; border-color: #e1e4d8; }
:focus-visible { outline: 3px solid #a9905a; outline-offset: 3px; }
@media (max-width: 1000px) { .content { padding-top: 28px; } }
@media (max-width: 650px) {
  .sidebar { padding: 13px 12px; }
  .sidebar .brand { width: 164px; margin: 0 0 12px; padding: 7px 12px; }
  .sidebar .brand-logo { max-width: 140px; max-height: 45px; }
  .nav-link { padding: 9px 12px; }
  .topbar { height: 48px; }
  .content { padding: 25px 15px; }
  .page-heading { gap: 14px; flex-wrap: wrap; margin-bottom: 23px; }
  .page-heading h1, .dashboard-hero h1 { font-size: 31px; }
  .page-heading .button { font-size: 12px; }
  .panel { padding: 18px; }
  .table-wrap th, .table-wrap td { padding: 12px 0; }
  .table-wrap tbody tr { background: #fffefa; border-color: #e1e5d9; padding: 8px 14px; }
  .table-wrap td::before { color: #727e70; }
  .form-panel { padding: 23px 18px; }
  .search-bar { gap: 8px; }
  .search-bar input { min-width: 0; }
  .dashboard-hero { padding: 24px; }
  .login-card { padding: 28px 22px; }
}
.sidebar .nav-link {
  gap: 12px; border: 1px solid transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.nav-icon {
  display: block; width: 21px; height: 21px; flex: 0 0 21px;
  color: #a9c7bb; transition: color .18s ease, filter .18s ease;
}
.sidebar .nav-link:hover { border-color: #446a5c; background: #224b3e; }
.sidebar .nav-link:hover .nav-icon { color: #c2f0df; }
.sidebar .nav-link.selected {
  background: linear-gradient(100deg, #365e50, #244b3e);
  border-color: #557669; border-radius: 8px;
  box-shadow: inset 3px 0 #d5bd85, 0 3px 12px rgb(5 25 18 / 10%);
}
.sidebar .nav-link.selected .nav-icon {
  color: #e6ce98; filter: drop-shadow(0 0 5px rgb(226 206 156 / 22%));
}
@media (max-width: 650px) {
  .sidebar .nav-link { gap: 8px; }
  .nav-icon { width: 18px; height: 18px; flex-basis: 18px; }
}
.route-assignment { margin: 24px 0; }
.about-hero { padding: 34px; border-top: 3px solid #b69a62; }
.about-brand { display: flex; align-items: center; gap: 25px; flex-wrap: wrap; }
.about-brand img { width: 145px; max-height: 90px; object-fit: contain; }
.about-hero h1 { font: 400 40px Georgia, serif; color: #214d3e; margin: 24px 0 12px; }
.about-intro { font-size: 19px; color: #42604f; line-height: 1.6; max-width: 700px; }
.about-credit { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.about-credit h2 { font-size: 21px; margin: 10px 0 0; line-height: 1.5; }
.about-grid { margin-top: 22px; }
.about-features { list-style: none; padding: 0; margin: 20px 0 0; }
.about-features li { padding: 14px 0; border-top: 1px solid var(--line); }
.about-features strong, .about-features span { display: block; }
.about-features strong { color: #315548; font-size: 14px; }
.about-features span { margin-top: 5px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.about-details { line-height: 1.7; grid-template-columns: 120px minmax(0,1fr); }
.about-details code { font-size: 12px; overflow-wrap: anywhere; }
.about-details + .help { margin: 22px 0; line-height: 1.7; }
.footer a { color: #476751; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
@media(max-width:650px) { .about-hero { padding: 24px; }.about-hero h1 { font-size: 33px; }.about-credit h2 { font-size: 19px; } }
.topbar { gap: 12px; }
.update-button { background: #fffefa; border: 1px solid #d8dfcf; color: #315548; padding: 8px 12px; border-radius: 8px; font: 600 12px "Segoe UI", sans-serif; cursor: pointer; }
.update-button:hover { border-color: #91ac95; background: #edf2e7; }
.update-button:disabled { cursor: progress; opacity: .65; }
.update-dialog { width: min(460px, calc(100% - 30px)); padding: 30px; border: 1px solid #d9dfce; border-radius: 14px; color: #243b35; background: #fffefa; box-shadow: 0 25px 80px rgb(0 0 0 / 20%); }
.update-dialog::backdrop { background: rgb(12 30 23 / 55%); backdrop-filter: blur(4px); }
.update-dialog h2 { font: 400 27px Georgia, serif; margin: 12px 0; }
.update-dialog p { font-size: 14px; line-height: 1.7; }
.update-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.update-actions [hidden] { display: none; }
.update-status { position: fixed; right: 20px; bottom: 20px; z-index: 30; max-width: min(420px, calc(100vw - 40px)); background: #214d3e; color: #fff; padding: 16px 20px; border-radius: 10px; box-shadow: var(--shadow); }
.update-status[hidden] { display: none; }
@media(max-width:650px) { .topbar { flex-wrap: wrap; height: auto; min-height: 55px; padding: 10px 14px; }.topbar .top-date { display: none; }.update-button { font-size: 11px; padding: 7px 9px; } }
.branding-upload { padding: 16px; border: 1px solid var(--line); border-radius: 8px; overflow-wrap: anywhere; }
.branding-preview { display: block; max-width: 100%; width: 260px; max-height: 160px; object-fit: contain; margin: 12px 0; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: #f1f1ec; }
.branding-preview[hidden] { display: none; }
.login-wrap.login-wallpaper { background-image: linear-gradient(rgb(18 42 33 / 30%), rgb(18 42 33 / 48%)), var(--login-wallpaper); background-position: center; background-size: cover; }
.login-wallpaper .login-card { box-shadow: 0 24px 70px rgb(0 0 0 / 22%); }
.topbar .alerts-link { display: inline-flex; align-items: center; gap: 8px; color: #315548; text-decoration: none; font-size: 12px; padding: 8px 12px; border: 1px solid #d8dfcf; border-radius: 8px; }
.alerts-link b { border-radius: 20px; background: #245645; color: #fff; min-width: 22px; padding: 2px 6px; text-align: center; }
.loan-notification-list { display: grid; gap: 16px; }
.loan-notification { border-left: 4px solid #6a9370; }
.loan-notification.review { border-left-color: #b35442; }
.loan-notification.overdue { border-left-color: #b89143; }
.loan-notification p { font-size: 13px; line-height: 1.7; }
.loan-assignment-picker { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 16px; }
.loan-assignment-picker legend { font-size: 13px; font-weight: 600; padding: 0 5px; }
.loan-assignment-options { max-height: 270px; overflow-y: auto; margin-top: 14px; }
.loan-assignment-options label { flex-direction: row; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); }
.loan-assignment-options input[type=checkbox] { width: 18px; min-height: 18px; height: 18px; flex-shrink: 0; accent-color: var(--green); }
.loan-assignment-options [hidden] { display: none; }
@media print { .main { background: #fff; } }