:root {
  --bg: #f4f7fb;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --text: #122033;
  --muted: #64748b;
  --line: #e4eaf2;
  --nav: #0f172a;
  --nav-soft: #1e293b;
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --success: #15803d;
  --warning: #a16207;
  --danger: #b91c1c;
  --radius: 16px;
  --shadow: 0 8px 30px rgba(15, 23, 42, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: var(--bg); color: var(--text); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, .btn, select { min-height: 44px; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; background: var(--nav); color: white; padding: 24px 18px; display: flex; flex-direction: column; z-index: 50; }
.brand { display: flex; align-items: center; gap: 12px; padding: 4px 8px 24px; }
.brand-mark { width: 38px; height: 38px; border-radius: 12px; object-fit: cover; display: block; flex: 0 0 auto; }
.brand strong { display: block; font-size: 18px; letter-spacing: .2px; }
.brand small { color: #94a3b8; display: block; margin-top: 2px; font-size: 11px; }
.nav { display: grid; gap: 8px; }
.nav-link { display: flex; align-items: center; gap: 12px; border-radius: 12px; color: #cbd5e1; padding: 12px 13px; font-weight: 600; font-size: 14px; }
.nav-link:hover, .nav-link.active { background: var(--nav-soft); color: white; }
.nav-icon { width: 22px; text-align: center; }
.sidebar-user { margin-top: auto; border-top: 1px solid #26334a; padding: 18px 4px 0; display: flex; align-items: center; gap: 10px; }
.avatar, .borrower-avatar { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: #dbeafe; color: #1d4ed8; font-weight: 800; flex: 0 0 auto; }
.sidebar .avatar { background: #334155; color: white; }
.sidebar-user-text { min-width: 0; flex: 1; }
.sidebar-user-text strong, .sidebar-user-text small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user-text strong { font-size: 13px; }
.sidebar-user-text small { color: #94a3b8; font-size: 11px; margin-top: 2px; }
.icon-button { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #cbd5e1; }
.icon-button:hover { background: #334155; }
.main-column { min-width: 0; }
.topbar { height: 82px; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 16px; padding: 0 32px; position: sticky; top: 0; z-index: 30; }
.topbar h1 { font-size: 18px; margin: 0; }
.topbar p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.topbar-user { margin-left: auto; }
.role-pill, .status { border-radius: 999px; padding: 6px 9px; font-size: 11px; font-weight: 800; }
.role-pill { background: #eef2ff; color: #4338ca; }
.menu-button { display: none; border: 0; background: transparent; font-size: 22px; cursor: pointer; padding: 8px; }
.content { padding: 30px 32px 44px; max-width: 1600px; margin: 0 auto; }
.footer { color: #94a3b8; text-align: center; font-size: 12px; padding: 10px 20px 28px; }
.hero-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.hero-row.compact { align-items: center; }
.hero-row h2 { margin: 3px 0 5px; font-size: clamp(24px, 2vw, 32px); letter-spacing: -.03em; }
.hero-row p { margin: 0; color: var(--muted); }
.eyebrow { color: var(--primary); font-size: 11px; letter-spacing: .12em; font-weight: 800; }
.back-link { display: inline-block; color: var(--primary); font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 11px; padding: 10px 15px; border: 1px solid transparent; font-weight: 750; font-size: 13px; cursor: pointer; white-space: nowrap; }
.btn-primary { background: var(--primary); color: white; box-shadow: 0 5px 14px rgba(37,99,235,.18); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { background: white; border-color: var(--line); color: var(--text); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-small { min-height: 36px; padding: 7px 11px; font-size: 12px; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 20px; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; min-width: 0; }
.stat-card strong { display: block; font-size: clamp(22px, 2vw, 30px); margin: 8px 0 4px; letter-spacing: -.03em; }
.stat-card small { color: var(--muted); }
.stat-label { color: var(--muted); font-size: 12px; font-weight: 700; }
.admin-stat { background: #f8faff; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; align-items: start; }
.span-2 { grid-column: span 2; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 0; overflow: hidden; }
.panel-header { padding: 19px 20px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.panel-header h3 { margin: 0; font-size: 16px; }
.panel-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; min-width: 690px; }
th, td { text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 12px; vertical-align: middle; }
th { color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-size: 10px; background: #fbfcfe; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdff; }
.table-link { font-weight: 750; color: #1e40af; }
.cell-sub { display: block; color: var(--muted); margin-top: 3px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.empty-cell, .empty-state { color: var(--muted); text-align: center; padding: 32px !important; }
.empty-state { display: grid; gap: 5px; }
.watch-list { padding: 8px; }
.watch-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 11px; }
.watch-item:hover { background: var(--surface-2); }
.watch-item strong, .watch-item small { display: block; }
.watch-item small { color: var(--muted); margin-top: 3px; font-size: 11px; }
.watch-item > span { font-weight: 800; font-size: 12px; }
.filter-bar { padding: 16px; display: flex; gap: 10px; border-bottom: 1px solid var(--line); }
.search-box { flex: 1; min-width: 180px; position: relative; }
.search-box > span { position: absolute; top: 50%; transform: translateY(-50%); left: 13px; color: var(--muted); }
.search-box input { padding-left: 36px; }
input, select, textarea { width: 100%; border: 1px solid #d8e0ea; background: white; color: var(--text); border-radius: 10px; padding: 10px 12px; outline: none; transition: .15s border, .15s box-shadow; }
input:focus, select:focus, textarea:focus { border-color: #93b4ff; box-shadow: 0 0 0 3px rgba(37,99,235,.1); }
textarea { resize: vertical; }
.borrower-card-list { padding: 8px; }
.borrower-card { display: grid; grid-template-columns: minmax(260px, 1.3fr) minmax(360px, 1fr) auto; align-items: center; gap: 18px; padding: 15px; border-bottom: 1px solid var(--line); }
.borrower-card:last-child { border-bottom: 0; }
.borrower-card:hover { background: #fbfdff; }
.borrower-main { display: flex; min-width: 0; gap: 12px; align-items: center; }
.borrower-info { min-width: 0; }
.borrower-title { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.borrower-title strong { font-size: 14px; }
.borrower-info > span, .borrower-info small { display: block; color: var(--muted); margin-top: 4px; font-size: 11px; }
.status { display: inline-block; padding: 4px 7px; }
.status-active { background: #dcfce7; color: #166534; }
.status-paid { background: #dbeafe; color: #1d4ed8; }
.status-inactive { background: #f1f5f9; color: #64748b; }
.borrower-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.borrower-metrics span, .borrower-metrics strong { display: block; }
.borrower-metrics span { color: var(--muted); font-size: 10px; }
.borrower-metrics strong { font-size: 12px; margin-top: 3px; }
.borrower-actions { display: flex; gap: 5px; }
.form-panel { padding: 24px; }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; max-width: 980px; }
.field { display: grid; gap: 7px; color: #334155; font-size: 12px; font-weight: 700; min-width: 0; }
.field span small { color: var(--muted); font-weight: 500; }
.full { grid-column: 1 / -1; }
.form-section-title { grid-column: 1/-1; border-bottom: 1px solid var(--line); padding: 5px 0 10px; margin-top: 8px; }
.form-section-title:first-of-type { margin-top: 0; }
.form-section-title h3 { margin: 0; font-size: 15px; }
.form-section-title p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 6px; }
.alert { border-radius: 11px; padding: 12px 14px; margin-bottom: 16px; font-size: 12px; }
.alert-success { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.alert-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.alert ul { margin: 6px 0 0 18px; padding: 0; }
.account-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.borrower-avatar.large { width: 48px; height: 48px; }
.account-title-row h2 { margin: 0; }
.account-title-row p { margin-top: 2px; }
.account-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; margin-bottom: 20px; }
.account-stat-grid article { background: white; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.account-stat-grid span, .account-stat-grid small { color: var(--muted); font-size: 11px; display: block; }
.account-stat-grid strong { display: block; margin: 6px 0 2px; font-size: 19px; }
.balance-highlight { border-color: #bfdbfe !important; background: #f8fbff !important; }
.payment-layout { grid-template-columns: minmax(280px,.8fr) repeat(2,minmax(0,1fr)); }
.payment-form-panel { grid-row: span 2; }
.payment-form { padding: 20px; display: grid; gap: 14px; }
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.suggestion-chip { min-height: 36px; border: 1px solid #bfdbfe; background: #eff6ff; color: #1d4ed8; border-radius: 10px; padding: 8px 10px; font-size: 11px; font-weight: 700; cursor: pointer; text-align: left; }
.payment-total { background: var(--nav); color: white; border-radius: 12px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; }
.payment-total span { color: #cbd5e1; font-size: 11px; }
.payment-total strong { font-size: 19px; }
.form-note { color: var(--muted); text-align: center; }
.sidebar-overlay { display: none; }
.login-body { background: white; }
.login-layout { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.15fr) minmax(420px,.85fr); }
.login-showcase { background: radial-gradient(circle at 20% 15%, #1e3a8a 0, #0f172a 48%, #08111f 100%); color: white; min-height: 100vh; display: flex; align-items: center; padding: 7vw; }
.showcase-content { max-width: 640px; }
.login-brand { padding-left: 0; }
.login-showcase h1 { font-size: clamp(38px,5vw,68px); line-height: 1.03; letter-spacing: -.05em; margin: 38px 0 18px; }
.login-showcase p { color: #bac7d9; font-size: clamp(15px,1.5vw,18px); line-height: 1.7; max-width: 580px; }
.showcase-stats { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 54px; gap: 20px; }
.showcase-stats div { border-left: 1px solid #334155; padding-left: 14px; }
.showcase-stats strong, .showcase-stats span { display: block; }
.showcase-stats strong { font-size: 14px; }
.showcase-stats span { color: #94a3b8; font-size: 11px; margin-top: 4px; }
.login-panel { display: flex; align-items: center; justify-content: center; padding: 34px; }
.login-card { width: 100%; max-width: 430px; }
.login-heading { margin-bottom: 28px; }
.login-heading h2 { margin: 7px 0; font-size: 28px; letter-spacing: -.03em; }
.login-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.login-card > .field { margin-bottom: 16px; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 65px; }
.password-toggle { position: absolute; right: 5px; top: 5px; min-height: 34px; border: 0; background: transparent; color: var(--primary); font-size: 11px; font-weight: 800; cursor: pointer; }
.demo-box { margin-top: 20px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; padding: 12px; display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.demo-box strong { color: var(--text); }
.demo-box code { color: #1d4ed8; }
.mobile-login-brand { display: none; }

@media (min-width: 1300px) {
  .content { padding-left: 42px; padding-right: 42px; }
  .stat-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}
@media (max-width: 1100px) {
  .stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-stat { grid-column: span 2; }
  .dashboard-grid, .payment-layout { grid-template-columns: 1fr 1fr; }
  .payment-form-panel { grid-row: auto; }
  .payment-layout .span-2 { grid-column: 1/-1; }
  .borrower-card { grid-template-columns: 1fr auto; }
  .borrower-metrics { grid-column: 1/-1; order: 3; padding-left: 50px; }
}
@media (max-width: 820px) {
  .app-shell { display: block; }
  .sidebar { position: fixed; left: 0; top: 0; width: 270px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 40px rgba(15,23,42,.2); }
  .sidebar-open .sidebar { transform: translateX(0); }
  .sidebar-overlay { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.42); z-index: 40; opacity: 0; visibility: hidden; transition: .2s; }
  .sidebar-open .sidebar-overlay { opacity: 1; visibility: visible; }
  .menu-button { display: inline-grid; place-items: center; }
  .topbar { height: 70px; padding: 0 18px; }
  .topbar-user { display: none; }
  .content { padding: 22px 18px 36px; }
  .dashboard-grid, .payment-layout { grid-template-columns: 1fr; }
  .span-2, .payment-layout .span-2 { grid-column: auto; }
  .hero-row { align-items: flex-start; }
  .form-panel { padding: 18px; }
  .login-layout { grid-template-columns: 1fr; }
  .login-showcase { display: none; }
  .login-panel { min-height: 100vh; padding: 24px; background: linear-gradient(180deg,#eff6ff 0,#fff 42%); }
  .mobile-login-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 34px; }
}
@media (max-width: 620px) {
  .hero-row { display: grid; gap: 16px; }
  .hero-row > .btn { width: 100%; }
  .stat-grid, .account-stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .admin-stat { grid-column: span 2; }
  .stat-card { padding: 15px; }
  .filter-bar { display: grid; grid-template-columns: 1fr 1fr; }
  .search-box { grid-column: 1/-1; }
  .borrower-card { grid-template-columns: 1fr; gap: 12px; }
  .borrower-metrics { grid-column: auto; order: initial; padding-left: 50px; grid-template-columns: 1fr 1fr; }
  .borrower-metrics > div:last-child { grid-column: 1/-1; }
  .borrower-actions { padding-left: 50px; }
  .form-grid { grid-template-columns: 1fr; }
  .full, .form-section-title { grid-column: auto; }
  .form-actions { justify-content: stretch; }
  .form-actions .btn { flex: 1; }
  .split-fields { grid-template-columns: 1fr; }
  .account-hero .btn { width: 100%; }
  table { min-width: 640px; }
}
@media (max-width: 390px) {
  .content { padding-left: 12px; padding-right: 12px; }
  .stat-grid, .account-stat-grid { grid-template-columns: 1fr; }
  .admin-stat { grid-column: auto; }
  .filter-bar { grid-template-columns: 1fr; }
  .search-box { grid-column: auto; }
  .borrower-metrics, .borrower-actions { padding-left: 0; }
}

/* Administrator and editing screens */
.users-layout { grid-template-columns: minmax(0, 2fr) minmax(300px, .9fr); }
.user-create-panel { position: sticky; top: 102px; }
.users-table { min-width: 760px; }
.table-action { width: 1%; white-space: nowrap; text-align: right; }
.role-tag { display: inline-block; border-radius: 999px; padding: 5px 8px; font-size: 10px; font-weight: 800; }
.role-administrator { background: #ede9fe; color: #6d28d9; }
.role-user { background: #eef2ff; color: #4338ca; }
.check-field { display: flex; align-items: flex-start; gap: 10px; color: #334155; font-size: 12px; cursor: pointer; }
.check-field input { width: 18px; height: 18px; min-height: 18px; margin: 1px 0 0; flex: 0 0 auto; }
.check-field span, .check-field strong, .check-field small { display: block; }
.check-field small { color: var(--muted); margin-top: 3px; font-weight: 500; }
.field-check-spacer { align-self: end; min-height: 44px; }
.form-error-wrap { padding: 16px 20px 0; }
.stat-link:hover, .stat-link-sub:hover { color: var(--primary); }
.stat-link-sub { color: var(--muted); }
.edit-payment-layout { grid-template-columns: minmax(0, 2fr) minmax(260px, .8fr); }
.edit-note-panel { position: sticky; top: 102px; }
.summary-list { padding: 8px 20px 18px; }
.summary-list > div { padding: 13px 0; border-bottom: 1px solid var(--line); }
.summary-list > div:last-child { border-bottom: 0; }
.summary-list span, .summary-list strong { display: block; }
.summary-list span { color: var(--muted); font-size: 11px; }
.summary-list strong { margin-top: 4px; font-size: 14px; }
.info-field { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.info-field span, .info-field strong, .info-field small { display: block; }
.info-field span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.info-field strong { font-size: 12px; margin-top: 4px; }
.info-field small { color: var(--muted); margin-top: 3px; font-size: 10px; }

@media (max-width: 1100px) {
  .users-layout, .edit-payment-layout { grid-template-columns: 1fr; }
  .users-layout .span-2, .edit-payment-layout .span-2 { grid-column: auto; }
  .user-create-panel, .edit-note-panel { position: static; }
}
@media (max-width: 620px) {
  .users-layout .filter-bar { grid-template-columns: 1fr 1fr; }
  .users-layout .search-box { grid-column: 1/-1; }
  .field-check-spacer { min-height: auto; }
}


/* Payment automatic notes */
.auto-note-cell{min-width:230px}.auto-note-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}.auto-note{display:inline-flex;align-items:center;border-radius:999px;padding:4px 8px;font-size:.72rem;font-weight:700;line-height:1.2;white-space:nowrap;background:#eef2ff;color:#3730a3}.auto-note-warning{background:#fff7ed;color:#c2410c}.auto-note-late{background:#fef2f2;color:#b91c1c}.auto-note-good{background:#ecfdf5;color:#047857}.auto-note-info{background:#eff6ff;color:#1d4ed8}.permission-note{display:flex;flex-direction:column;gap:3px;padding:12px 14px;margin-bottom:18px;border:1px solid #dbeafe;border-radius:12px;background:#eff6ff;color:#1e3a8a}.permission-note span{font-size:.84rem;color:#475569}

/* Administrator audit log */
.audit-hero { align-items: center; }
.audit-summary-cards { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 10px; flex: 0 0 auto; }
.audit-summary-card { min-width: 138px; padding: 13px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.audit-summary-card span, .audit-summary-card strong { display: block; }
.audit-summary-card span { color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.audit-summary-card strong { margin-top: 5px; font-size: 20px; }

.audit-filter-panel { padding: 0; overflow: visible; }
.audit-filter-inner { padding: 24px; }
.audit-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.audit-section-heading h3 { margin: 0; font-size: 16px; }
.audit-section-heading p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.audit-filter-grid { display: grid; grid-template-columns: minmax(220px, 1.65fr) repeat(3, minmax(145px, 1fr)); gap: 14px; align-items: end; }
.audit-filter-grid .field { margin: 0; }
.audit-filter-grid input, .audit-filter-grid select { min-height: 44px; }
.audit-search-field { grid-column: span 2; }
.audit-filter-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; grid-column: span 2; }
.audit-filter-actions .btn { min-width: 118px; }

.audit-panel { margin-top: 20px; }
.audit-panel-header { background: #fbfcfe; }
.audit-list { display: grid; gap: 12px; padding: 16px; background: var(--surface-2); }
.audit-entry { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 2px 10px rgba(15,23,42,.025); }
.audit-entry-main { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 16px; }
.audit-entry-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: #f1f5f9; color: #334155; font-size: 15px; font-weight: 800; }
.audit-entry-content { min-width: 0; }
.audit-entry-topline { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.audit-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; min-width: 0; }
.audit-action, .audit-entity { display: inline-flex; align-items: center; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; line-height: 1.2; }
.audit-action-create { background: #ecfdf5; color: #047857; }
.audit-action-edit { background: #eff6ff; color: #1d4ed8; }
.audit-entity { background: #f1f5f9; color: #475569; }
.audit-entry-topline time { color: var(--muted); font-size: 11px; white-space: nowrap; }
.audit-entry h4 { margin: 8px 0 0; font-size: 14px; line-height: 1.45; }
.audit-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 7px; color: var(--muted); font-size: 11px; }
.audit-meta strong { color: #334155; }
.audit-ip { padding-left: 14px; border-left: 1px solid var(--line); }

.audit-details { border-top: 1px solid var(--line); }
.audit-details > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px 11px 66px; cursor: pointer; color: #475569; background: #fbfcfe; font-size: 11px; font-weight: 800; user-select: none; }
.audit-details > summary::-webkit-details-marker { display: none; }
.audit-details > summary:hover { background: #f8fafc; color: var(--primary); }
.audit-chevron { font-size: 16px; transition: transform .18s ease; line-height: 1; }
.audit-details[open] .audit-chevron { transform: rotate(180deg); }
.audit-changes { padding: 8px 16px 16px 66px; background: #fbfcfe; }
.audit-change-row { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1fr) 26px minmax(0, 1fr); align-items: stretch; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.audit-change-row:first-child { border-top: 0; }
.audit-change-field { display: flex; align-items: center; color: #334155; font-size: 11px; font-weight: 800; padding: 7px 4px 7px 0; }
.audit-change-value { min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 8px 10px; background: var(--surface); }
.audit-change-value span, .audit-change-value strong { display: block; }
.audit-change-value span { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.audit-change-value strong { margin-top: 4px; color: #334155; font-size: 11px; line-height: 1.35; font-weight: 650; overflow-wrap: anywhere; }
.audit-before { background: #fffafa; border-color: #fee2e2; }
.audit-after { background: #f7fef9; border-color: #dcfce7; }
.audit-change-arrow { display: grid; place-items: center; color: #94a3b8; font-size: 13px; }

@media (max-width: 1180px) {
  .audit-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .audit-search-field { grid-column: 1 / -1; }
  .audit-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .audit-hero { align-items: stretch; }
  .audit-summary-cards { width: 100%; }
  .audit-summary-card { min-width: 0; }
  .audit-filter-inner { padding: 18px; }
  .audit-filter-grid { grid-template-columns: 1fr; }
  .audit-search-field, .audit-filter-actions { grid-column: auto; }
  .audit-filter-actions { justify-content: stretch; }
  .audit-filter-actions .btn { flex: 1; min-width: 0; }
  .audit-list { padding: 10px; gap: 10px; }
  .audit-entry-main { grid-template-columns: 34px minmax(0, 1fr); gap: 10px; padding: 14px; }
  .audit-entry-icon { width: 34px; height: 34px; border-radius: 10px; }
  .audit-entry-topline { align-items: flex-start; flex-direction: column; gap: 7px; }
  .audit-entry-topline time { white-space: normal; }
  .audit-ip { padding-left: 0; border-left: 0; }
  .audit-details > summary { padding-left: 58px; }
  .audit-changes { padding: 8px 14px 14px 58px; }
  .audit-change-row { grid-template-columns: 1fr; gap: 6px; padding: 10px 0; }
  .audit-change-field { padding: 0 0 2px; }
  .audit-change-arrow { display: none; }
}
@media (max-width: 430px) {
  .audit-filter-inner { padding: 16px; }
  .audit-summary-cards { grid-template-columns: 1fr 1fr; }
  .audit-summary-card { padding: 11px 12px; }
  .audit-summary-card strong { font-size: 18px; }
  .audit-details > summary { padding-left: 14px; }
  .audit-changes { padding-left: 14px; }
  .audit-entry-main { grid-template-columns: 1fr; }
  .audit-entry-icon { display: none; }
}

/* Phase 1: asynchronous interaction and loading states */
.ajax-result-meta { min-height: 34px; padding: 9px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 10px; background: #fbfcfe; }
.ajax-result-meta > span:first-child { color: #334155; font-weight: 750; }
.search-box input { padding-right: 38px; }
.search-box > .inline-loader { left: auto; right: 13px; width: 14px; height: 14px; border: 2px solid #dbe3ee; border-top-color: var(--primary); border-radius: 50%; opacity: 0; visibility: hidden; transform: translateY(-50%); animation: phase1-spin .7s linear infinite; }
.search-box > .inline-loader.visible { opacity: 1; visibility: visible; }
@keyframes phase1-spin { to { transform: translateY(-50%) rotate(360deg); } }

.async-submit { gap: 8px; position: relative; }
.button-spinner { display: none; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.45); border-top-color: white; border-radius: 50%; animation: phase1-button-spin .7s linear infinite; }
.async-submit.is-loading .button-spinner { display: inline-block; }
@keyframes phase1-button-spin { to { transform: rotate(360deg); } }
.ajax-form-errors[hidden] { display: none !important; }
.payment-form-panel > .ajax-form-errors { margin: 16px 20px 0; }

.payment-history-header { align-items: center; }
.history-refresh-button { gap: 6px; flex: 0 0 auto; }
.history-refresh-button:disabled { opacity: .55; }
.is-refreshing .history-refresh-button > span { display: inline-block; animation: phase1-button-spin .8s linear infinite; }
.history-sync-status { min-height: 0; color: var(--muted); font-size: 10px; text-align: right; padding: 0 16px; transition: .15s; }
.history-sync-status:not(:empty) { padding-top: 7px; }
.payment-history-wrap { transition: opacity .16s ease; }
.payment-history-wrap[aria-busy="true"] { opacity: .5; pointer-events: none; }

.toast-region { position: fixed; right: 20px; bottom: max(20px, env(safe-area-inset-bottom)); z-index: 200; width: min(390px, calc(100vw - 32px)); display: grid; gap: 9px; pointer-events: none; }
.app-toast { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: start; gap: 10px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--line); background: rgba(255,255,255,.97); box-shadow: 0 16px 44px rgba(15,23,42,.17); color: #334155; font-size: 12px; line-height: 1.45; opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .18s ease, transform .18s ease; backdrop-filter: blur(12px); }
.app-toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-icon { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 900; }
.app-toast-success { border-color: #bbf7d0; }
.app-toast-success .toast-icon { background: #dcfce7; color: #166534; }
.app-toast-error { border-color: #fecaca; }
.app-toast-error .toast-icon { background: #fee2e2; color: #991b1b; }
.app-toast-info { border-color: #bfdbfe; }
.app-toast-info .toast-icon { background: #dbeafe; color: #1d4ed8; }

.summary-list .summary-highlight { margin: 4px -8px 0; padding: 13px 8px; border-radius: 10px; border-bottom: 0; background: #f8fbff; }
.edit-save-state { margin: 0 20px 18px; min-height: 18px; color: var(--muted); font-size: 10px; }
.edit-save-state strong, .edit-save-state span { display: block; }
.edit-save-state strong { color: var(--success); font-size: 11px; }
.edit-save-state span { margin-top: 3px; }

@media (max-width: 620px) {
  .ajax-result-meta { align-items: flex-start; }
  .payment-history-header { align-items: flex-start; flex-direction: column; }
  .history-refresh-button { width: 100%; }
  .history-sync-status { text-align: left; }
  .toast-region { right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); width: calc(100vw - 32px); }
}

/* Phase 2: scalable lists, pagination and lazy history */
.pagination-wrap, .audit-pagination { padding: 14px 18px 18px; border-top: 1px solid var(--line); background: #fbfcfe; }
.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.page-link, .page-ellipsis { min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 750; }
.page-link { border: 1px solid var(--line); background: var(--surface); color: #475569; transition: .16s ease; }
.page-link:hover { border-color: #bfdbfe; color: var(--primary); background: #f8fbff; }
.page-link.active { background: var(--primary); border-color: var(--primary); color: white; }
.page-link.disabled { pointer-events: none; opacity: .38; }
.page-ellipsis { color: var(--muted); min-width: 22px; padding: 0; }
.history-load-row { min-height: 55px; padding: 10px 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fbfcfe; color: var(--muted); font-size: 10px; }
.async-history-load { min-width: 150px; gap: 7px; }
.async-history-load .button-spinner { border-color: #cbd5e1; border-top-color: var(--primary); }

/* Phase 3: app-shell navigation, background refresh and transition states */
.app-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 500; pointer-events: none; opacity: 0; overflow: hidden; transition: opacity .12s ease; }
.app-progress span { display: block; height: 100%; width: 38%; background: var(--primary); transform: translateX(-110%); }
.app-navigating .app-progress { opacity: 1; }
.app-navigating .app-progress span { animation: app-progress-slide 1s ease-in-out infinite; }
@keyframes app-progress-slide { 0% { transform: translateX(-110%); } 60% { transform: translateX(180%); } 100% { transform: translateX(300%); } }

.app-content { position: relative; min-height: 55vh; }
.app-navigating > .app-shell .app-content > :not(.app-page-skeleton) { opacity: .58; transition: opacity .14s ease; }
.app-page-skeleton { position: absolute; z-index: 20; inset: 0; padding: inherit; background: rgba(248,250,252,.96); display: grid; align-content: start; gap: 18px; pointer-events: none; }
.skeleton-hero, .skeleton-grid, .skeleton-panel { border-radius: 14px; }
.skeleton-hero { min-height: 100px; display: grid; align-content: center; gap: 10px; }
.skeleton-hero i, .skeleton-panel i, .skeleton-grid span { display: block; border-radius: 8px; background: linear-gradient(90deg,#e8edf4 25%,#f4f7fa 42%,#e8edf4 62%); background-size: 350% 100%; animation: skeleton-shimmer 1.2s ease-in-out infinite; }
.skeleton-hero i:nth-child(1) { width: 90px; height: 10px; }
.skeleton-hero i:nth-child(2) { width: min(390px, 72%); height: 25px; }
.skeleton-hero i:nth-child(3) { width: min(520px, 88%); height: 12px; }
.skeleton-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.skeleton-grid span { height: 96px; }
.skeleton-panel { padding: 20px; border: 1px solid var(--line); background: white; display: grid; gap: 12px; }
.skeleton-panel i { height: 15px; }
.skeleton-panel i:nth-child(1) { width: 35%; }
.skeleton-panel i:nth-child(2) { width: 90%; }
.skeleton-panel i:nth-child(3) { width: 75%; }
.skeleton-panel i:nth-child(4) { width: 82%; }
.skeleton-panel i:nth-child(5) { width: 58%; }
@keyframes skeleton-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

.dashboard-live-tools { display: flex; align-items: center; justify-content: flex-end; gap: 9px; flex-wrap: wrap; }
.live-status { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; white-space: nowrap; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); }
.live-dot-warning { background: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.dashboard-refresh-region { transition: opacity .15s ease; }
.dashboard-refresh-region[aria-busy="true"] { opacity: .48; pointer-events: none; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) { animation: app-old-page .12s ease both; }
  ::view-transition-new(root) { animation: app-new-page .18s ease both; }
  @keyframes app-old-page { to { opacity: .72; } }
  @keyframes app-new-page { from { opacity: 0; transform: translateY(4px); } }
}

@media (max-width: 760px) {
  .pagination-wrap, .audit-pagination { padding: 12px; }
  .page-link { min-width: 32px; height: 32px; }
  .history-load-row { align-items: stretch; flex-direction: column; padding: 12px; }
  .async-history-load { width: 100%; }
  .dashboard-live-tools { width: 100%; justify-content: stretch; }
  .dashboard-live-tools .live-status { margin-right: auto; }
  .dashboard-live-tools .btn { flex: 1; }
  .dashboard-live-tools .btn-primary { flex-basis: 100%; }
  .skeleton-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 430px) {
  .pagination { gap: 4px; }
  .page-link { min-width: 30px; height: 30px; padding: 0 7px; }
  .skeleton-grid { grid-template-columns: 1fr; }
  .skeleton-grid span { height: 78px; }
}

/* Phase 4 — PWA / administrator push notifications */
.notification-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.85fr);gap:20px;margin-top:20px}
.notification-hero{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.notification-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:var(--surface-2,#eef2ff);font-size:24px}
.notification-hero h3{margin:2px 0 5px}
.notification-hero p{margin:0;color:var(--muted,#64748b);line-height:1.5}
.notification-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;padding-top:16px;border-top:1px solid var(--border,#e2e8f0)}
.notification-actions .btn[hidden]{display:none}
.device-list{display:grid;gap:10px}
.device-item{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 0;border-bottom:1px solid var(--border,#e2e8f0)}
.device-item:last-child{border-bottom:0}
.device-item strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.device-item small{display:block;color:var(--muted,#64748b);margin-top:4px}
.notification-rules{margin-top:20px}
.rule-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rule-grid>div{padding:15px;border:1px solid var(--border,#e2e8f0);border-radius:12px;background:var(--surface-soft,#f8fafc)}
.rule-grid strong,.rule-grid span{display:block}.rule-grid span{margin-top:4px;color:var(--muted,#64748b);font-size:.92rem;line-height:1.45}
@media(max-width:800px){.notification-grid{grid-template-columns:1fr}.rule-grid{grid-template-columns:1fr}.notification-hero{grid-template-columns:auto 1fr}.notification-actions{grid-column:1/-1}.notification-actions .btn{flex:1 1 150px}}


/* ============================================================
   LENDING UI REDESIGN — modern dashboard visual system
   Functionality is unchanged; these rules refine the shell,
   cards, tables, forms, navigation, and responsive behavior.
   ============================================================ */

:root{
  --bg:#f5f7f9;
  --surface:#fff;
  --surface-2:#f8fafb;
  --text:#101828;
  --muted:#667085;
  --line:#e6e9ee;
  --nav:#071a2b;
  --nav-2:#0b2438;
  --nav-text:#d4dde7;
  --primary:#16a34a;
  --primary-dark:#12833b;
  --primary-soft:#e9f8ef;
  --blue:#3b82f6;
  --purple:#8b5cf6;
  --orange:#f59e0b;
  --danger:#dc2626;
  --radius:14px;
  --shadow:0 1px 2px rgba(16,24,40,.03),0 7px 24px rgba(16,24,40,.045);
}

body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}

.app-shell{
  grid-template-columns:320px minmax(0,1fr);
  min-height:100vh;
}

.sidebar{
  background:linear-gradient(180deg,#071a2b 0%,#081827 100%);
  padding:28px 20px 22px;
  border-right:1px solid rgba(255,255,255,.04);
  box-shadow:8px 0 28px rgba(4,15,28,.05);
}

.brand{
  gap:14px;
  padding:4px 14px 38px;
  align-items:center;
}

.brand-mark{
  width:64px;
  height:64px;
  border-radius:18px;
  box-shadow:0 7px 18px rgba(0,0,0,.16);
}

.brand strong{
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.03em;
}

.brand small{
  font-size:13px;
  margin-top:7px;
  color:#aebdcb;
}

.nav{
  gap:5px;
}

.nav-section-label{
  color:#9eacbb;
  font-size:12px;
  font-weight:700;
  letter-spacing:.05em;
  padding:13px 14px 9px;
  text-transform:uppercase;
}

.nav-section-label:not(:first-child){
  margin-top:23px;
}

.nav-link{
  min-height:58px;
  border-radius:10px;
  color:#c9d3df;
  padding:12px 15px;
  gap:16px;
  font-size:16px;
  font-weight:500;
  transition:background .15s ease,color .15s ease,transform .15s ease;
}

.nav-link:hover{
  background:rgba(255,255,255,.06);
  color:#fff;
  transform:translateX(1px);
}

.nav-link.active{
  background:linear-gradient(90deg,rgba(22,163,74,.34),rgba(22,163,74,.18));
  color:#fff;
  box-shadow:inset 3px 0 0 #22c55e;
}

.nav-icon{
  width:24px;
  height:24px;
  display:grid;
  place-items:center;
  flex:0 0 24px;
  color:#b7c5d4;
}

.nav-link.active .nav-icon{color:#35d46d}
.nav-icon svg{
  width:23px;
  height:23px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.nav-link:first-of-type .nav-icon svg{fill:currentColor;stroke:none}

.sidebar-user{
  margin-top:auto;
  padding:18px 6px 0;
  border-top:1px solid rgba(255,255,255,.09);
  gap:12px;
}

.sidebar .avatar{
  width:44px;
  height:44px;
  background:#18b957;
  color:#fff;
  font-size:15px;
}

.sidebar-user-text strong{font-size:14px}
.sidebar-user-text small{font-size:12px;color:#9eacbb}

.main-column{min-width:0}

.topbar{
  height:76px;
  padding:0 34px;
  background:#fff;
  border-bottom:1px solid var(--line);
  box-shadow:none;
}

.topbar h1{
  font-size:20px;
  font-weight:700;
  letter-spacing:-.02em;
}

.topbar p{display:none}

.topbar-actions{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:18px;
}

.topbar-user{margin-left:0}

.topbar-icon{
  position:relative;
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  color:#667085;
  border-radius:10px;
}

.topbar-icon:hover{background:#f2f4f7;color:#101828}
.topbar-icon svg{
  width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.notification-dot{
  position:absolute;
  width:8px;height:8px;border-radius:50%;
  background:#16a34a;border:2px solid #fff;
  top:7px;right:7px;
}

.role-pill{
  background:#edf8f1;
  color:#15803d;
  border-radius:999px;
  padding:7px 11px;
  font-size:11px;
}

.content{
  padding:30px 32px 46px;
  max-width:1500px;
}

.hero-row{
  align-items:center;
  margin-bottom:22px;
}

.eyebrow{
  color:#16a34a;
  font-size:11px;
  letter-spacing:.1em;
}

.hero-row h2{
  font-size:30px;
  line-height:1.15;
  margin:5px 0 7px;
}

.hero-row p{
  font-size:14px;
  color:#667085;
}

.dashboard-live-tools{
  display:flex;
  align-items:center;
  gap:9px;
}

.live-status{
  font-size:12px;
  color:#15803d;
  background:#ecfdf3;
  border:1px solid #d1fadf;
  border-radius:999px;
  padding:8px 11px;
}

.live-dot{
  width:7px;height:7px;border-radius:50%;background:#22c55e;
  display:inline-block;margin-right:6px;
}

.btn{
  min-height:42px;
  border-radius:9px;
  padding:9px 15px;
  font-size:13px;
  font-weight:700;
}

.btn-primary{
  background:#16a34a;
  box-shadow:0 3px 9px rgba(22,163,74,.16);
}
.btn-primary:hover{background:#15803d}
.btn-secondary{
  background:#fff;
  border-color:#d9dee5;
}
.btn-ghost{color:#667085}

.stat-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
  margin-bottom:22px;
}

.stat-card{
  min-height:160px;
  border:1px solid #e5e8ec;
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:21px 22px 18px;
  position:relative;
  overflow:hidden;
}

.stat-card::after{
  content:"";
  position:absolute;
  right:-22px;
  bottom:-30px;
  width:105px;
  height:105px;
  border-radius:50%;
  background:rgba(16,185,129,.035);
}

.stat-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.stat-label{
  font-size:14px;
  color:#526173;
  font-weight:650;
}

.stat-card strong{
  font-size:30px;
  line-height:1.1;
  margin:18px 0 7px;
  letter-spacing:-.035em;
  color:#101828;
}

.stat-card small{
  color:#667085;
  font-size:11px;
}

.stat-icon{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:50%;
  flex:0 0 50px;
}

.stat-icon svg{
  width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}

.stat-green .stat-icon{background:#dcfce7;color:#16a34a}
.stat-blue .stat-icon{background:#dbeafe;color:#3b82f6}
.stat-purple .stat-icon{background:#ede9fe;color:#7c3aed}
.stat-orange .stat-icon{background:#fef3c7;color:#d97706}

.dashboard-grid{
  grid-template-columns:minmax(0,2fr) minmax(300px,1fr);
  gap:18px;
}

.panel{
  border-radius:14px;
  border:1px solid #e5e8ec;
  box-shadow:var(--shadow);
}

.panel-header{
  min-height:70px;
  padding:17px 21px;
  background:#fff;
}

.panel-header h3{
  font-size:17px;
  color:#101828;
}

.panel-header p{
  font-size:12px;
  color:#667085;
}

.table-wrap{background:#fff}

table{
  min-width:700px;
}

th,td{
  padding:14px 18px;
  font-size:12px;
  border-bottom:1px solid #edf0f2;
}

th{
  background:#fbfcfd;
  color:#667085;
  font-size:10px;
  font-weight:750;
}

tbody tr:hover{background:#f8fbf9}

.table-link{color:#101828;font-weight:700}

.watch-list{padding:8px}
.watch-item{padding:14px 12px}
.watch-item:hover{background:#f7faf8}

.filter-bar{
  padding:16px;
  gap:10px;
  background:#fff;
}

input,select,textarea{
  border-color:#d9dee5;
  border-radius:9px;
  min-height:44px;
  padding:10px 12px;
}

input:focus,select:focus,textarea:focus{
  border-color:#73c995;
  box-shadow:0 0 0 3px rgba(22,163,74,.10);
}

.borrower-card-list{padding:5px}
.borrower-card{
  padding:16px;
  border-radius:10px;
  margin:2px 0;
}
.borrower-card:hover{background:#f8fbf9}

.borrower-title strong{font-size:14px;color:#101828}

.account-stat-grid{
  gap:14px;
  margin-bottom:20px;
}

.account-stat-grid article{
  border:1px solid #e5e8ec;
  box-shadow:var(--shadow);
  border-radius:14px;
  background:#fff;
  padding:18px;
}

.balance-highlight{
  border-color:#b7e5c7 !important;
  background:#f4fcf6 !important;
}

.form-panel{padding:0}
.payment-form-panel .panel-header{border-bottom:1px solid var(--line)}
.payment-form{
  padding:21px;
}

.payment-total{
  border:1px solid #dcefe2;
  background:#f4fcf6;
  border-radius:11px;
  padding:14px 16px;
}

.payment-total strong{color:#15803d;font-size:20px}

.suggestion-chip{
  border:1px solid #cdebd7;
  background:#f3fbf5;
  color:#15803d;
  border-radius:9px;
  padding:10px 12px;
  font-size:12px;
  text-align:left;
}

.alert{
  border-radius:10px;
}

.pagination-wrap{
  padding:14px 18px 18px;
  background:#fff;
}

.history-load-row{
  padding:14px 18px;
  border-top:1px solid var(--line);
  background:#fff;
}

.ajax-result-meta{
  padding:12px 17px 4px;
  color:#667085;
  font-size:12px;
  display:flex;
  justify-content:space-between;
}

.app-progress span{background:#16a34a}

.footer{
  color:#98a2b3;
}

.mobile-login-brand .brand-mark{
  width:70px;height:70px;border-radius:20px;
}

/* Better login presentation */
.login-body{
  background:#f5f7f9;
}
.login-layout{
  min-height:100vh;
}
.login-showcase{
  background:linear-gradient(160deg,#071a2b 0%,#0a263b 100%);
}
.login-brand .brand-mark{width:60px;height:60px}
.login-brand strong{font-size:27px}
.login-brand small{font-size:13px}
.login-showcase h1{
  font-size:44px;
  letter-spacing:-.04em;
}
.login-showcase p{
  color:#aebdcb;
  font-size:16px;
  line-height:1.7;
  max-width:580px;
}
.login-panel{background:#f8fafb}
.login-card{
  border:1px solid #e3e7eb;
  box-shadow:0 15px 45px rgba(16,24,40,.07);
  border-radius:16px;
}
.login-card .btn-primary{
  min-height:48px;
  font-size:14px;
}
.demo-box{
  background:#f7faf8;
  border-color:#dcefe2;
}

/* Generic admin/user tables and forms */
.form-section-title h3{color:#101828}
.field{color:#344054}
.field span small{color:#98a2b3}

/* Mobile */
@media (max-width:1100px){
  .app-shell{grid-template-columns:260px minmax(0,1fr)}
  .brand strong{font-size:23px}
  .brand-mark{width:56px;height:56px}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:820px){
  .app-shell{display:block}
  .sidebar{
    position:fixed;
    left:0;top:0;
    width:min(310px,88vw);
    transform:translateX(-102%);
    transition:transform .2s ease;
    box-shadow:20px 0 40px rgba(0,0,0,.22);
  }
  body.sidebar-open .sidebar{transform:translateX(0)}
  .menu-button{display:grid;place-items:center}
  .topbar{padding:0 16px;height:64px}
  .topbar h1{font-size:18px}
  .content{padding:22px 15px 34px}
  .hero-row{align-items:flex-start;flex-direction:column}
  .hero-row h2{font-size:25px}
  .dashboard-live-tools{width:100%;flex-wrap:wrap}
  .dashboard-live-tools .btn-primary{margin-left:auto}
  .stat-grid{grid-template-columns:1fr 1fr;gap:12px}
  .stat-card{min-height:145px;padding:17px}
  .stat-card strong{font-size:24px}
  .stat-icon{width:43px;height:43px;flex-basis:43px}
  .dashboard-grid{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .account-stat-grid{grid-template-columns:1fr 1fr}
  .borrower-card{grid-template-columns:1fr;gap:12px}
  .borrower-metrics{grid-template-columns:repeat(3,1fr)}
  .borrower-actions{justify-content:flex-start}
  .filter-bar{flex-wrap:wrap}
  .filter-bar .search-box{flex-basis:100%}
  .filter-bar select{flex:1}
  .topbar-actions .role-pill{display:none}
}

@media (max-width:560px){
  .content{padding:18px 12px 28px}
  .topbar-actions{gap:4px}
  .stat-grid{grid-template-columns:1fr 1fr}
  .stat-card{min-height:132px;padding:14px}
  .stat-label{font-size:12px}
  .stat-card strong{font-size:21px;margin-top:13px}
  .stat-card small{font-size:10px}
  .stat-icon{width:38px;height:38px;flex-basis:38px}
  .stat-icon svg{width:20px;height:20px}
  .account-stat-grid{grid-template-columns:1fr}
  .hero-row .btn-primary{width:100%}
  .dashboard-live-tools .btn-primary{margin-left:0}
  .dashboard-live-tools{gap:7px}
  .live-status{display:none}
  .panel-header{padding:15px}
  .panel-header h3{font-size:15px}
  .payment-form{padding:15px}
  .borrower-metrics{grid-template-columns:1fr 1fr}
  .borrower-actions .btn{flex:1}
  .login-showcase{display:none}
  .login-layout{display:block}
  .login-panel{min-height:100vh;padding:18px}
  .login-card{width:100%;max-width:440px;margin:auto}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* ============================================================
   NOTIFICATIONS PAGE — spacing / border / overflow correction
   Fixes the legacy .panel-head markup used by notifications.php
   without changing any notification functionality.
   ============================================================ */

.notification-grid{
  align-items:stretch;
  grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);
  gap:20px;
  margin-top:20px;
}

.notification-grid > .panel{
  min-width:0;
  overflow:hidden;
}

/* notifications.php uses .panel-head, while the rest of the
   redesigned site uses .panel-header. Give it the same treatment. */
.notification-grid .panel-head,
.notification-rules .panel-head{
  min-height:70px;
  padding:18px 21px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  border-bottom:1px solid var(--line);
  background:#fff;
}

.notification-grid .panel-head > div,
.notification-rules .panel-head > div{
  min-width:0;
}

.notification-grid .panel-head h3,
.notification-rules .panel-head h3{
  margin:4px 0 0;
  color:#101828;
  font-size:19px;
  line-height:1.25;
  letter-spacing:-.02em;
}

.notification-grid .panel-head .eyebrow,
.notification-rules .panel-head .eyebrow{
  display:block;
  color:#16a34a;
  font-size:11px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.12em;
}

.notification-grid .count-badge{
  flex:0 0 auto;
  min-width:32px;
  height:32px;
  padding:0 9px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:#ecfdf3;
  color:#15803d;
  font-size:13px;
  font-weight:750;
}

/* First notification card */
.notification-grid > .notification-hero{
  padding:24px 21px 0;
  grid-template-columns:58px minmax(0,1fr);
  gap:16px;
  align-content:start;
}

.notification-hero .notification-icon{
  width:58px;
  height:58px;
  border-radius:17px;
  background:#f5f7fa;
  border:1px solid #edf0f3;
  font-size:25px;
}

.notification-hero > div:nth-child(2){
  min-width:0;
  padding-top:2px;
}

.notification-hero h3{
  color:#101828;
  font-size:19px;
  line-height:1.25;
  letter-spacing:-.02em;
  margin:0 0 7px;
}

.notification-hero p{
  color:#667085;
  font-size:13px;
  line-height:1.55;
  margin:0;
  max-width:620px;
}

.notification-actions{
  min-width:0;
  margin:22px -21px 0;
  padding:16px 21px;
  border-top:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.notification-actions .btn{
  min-height:42px;
}

.notification-actions .btn-primary{
  min-width:210px;
}

/* Registered devices */
.notification-grid > .panel:not(.notification-hero){
  min-width:0;
}

.notification-grid > .panel:not(.notification-hero) .device-list{
  padding:4px 21px 8px;
  min-width:0;
}

.device-list{
  display:grid;
  gap:0;
}

.device-item{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:17px 0;
  border-bottom:1px solid var(--line);
}

.device-item:last-child{
  border-bottom:0;
}

.device-item > div{
  min-width:0;
}

.device-item strong{
  display:block;
  min-width:0;
  max-width:none;
  color:#101828;
  font-size:13px;
  line-height:1.45;
  font-weight:700;
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

.device-item small{
  display:block;
  margin-top:5px;
  color:#667085;
  font-size:11px;
  line-height:1.4;
}

.device-item .status{
  flex:0 0 auto;
  white-space:nowrap;
}

.notification-rules{
  margin-top:20px;
  overflow:hidden;
}

.notification-rules .rule-grid{
  padding:16px 21px 21px;
  gap:12px;
}

.notification-rules .rule-grid > div{
  min-width:0;
  padding:17px 18px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}

.notification-rules .rule-grid strong{
  color:#101828;
  font-size:14px;
  line-height:1.35;
}

.notification-rules .rule-grid span{
  color:#667085;
  font-size:12px;
  line-height:1.5;
  margin-top:6px;
}

@media (max-width:1100px){
  .notification-grid{
    grid-template-columns:1fr;
  }

  .notification-grid > .panel:not(.notification-hero){
    min-height:0;
  }
}

@media (max-width:700px){
  .notification-grid > .notification-hero{
    padding:18px 15px 0;
    grid-template-columns:50px minmax(0,1fr);
    gap:13px;
  }

  .notification-hero .notification-icon{
    width:50px;
    height:50px;
    border-radius:15px;
  }

  .notification-hero h3{
    font-size:17px;
  }

  .notification-hero p{
    font-size:12px;
  }

  .notification-actions{
    margin:18px -15px 0;
    padding:14px 15px;
  }

  .notification-actions .btn{
    flex:1 1 145px;
  }

  .notification-actions .btn-primary{
    min-width:0;
  }

  .notification-grid .panel-head,
  .notification-rules .panel-head{
    min-height:0;
    padding:15px;
  }

  .notification-grid .panel-head h3,
  .notification-rules .panel-head h3{
    font-size:17px;
  }

  .notification-grid > .panel:not(.notification-hero) .device-list{
    padding:2px 15px 5px;
  }

  .notification-rules .rule-grid{
    grid-template-columns:1fr;
    padding:12px 15px 15px;
  }
}

@media (max-width:430px){
  .device-item{
    grid-template-columns:minmax(0,1fr);
    gap:8px;
  }

  .device-item .status{
    justify-self:start;
  }

  .notification-actions{
    flex-direction:column;
    align-items:stretch;
  }

  .notification-actions .btn{
    width:100%;
    flex:none;
  }
}

/* Payments overview */
.payments-overview-stats .stat-icon{
  font-weight:800;
  font-size:16px;
}
.payments-overview-panel{overflow:hidden}
.payments-filter{
  align-items:center;
  flex-wrap:wrap;
  border-bottom:1px solid var(--line);
}
.payments-filter .search-box{
  flex:1 1 300px;
  min-width:220px;
}
.payments-filter select,
.payments-filter input[type="date"]{
  flex:0 1 170px;
}
.payments-filter .btn{flex:0 0 auto}
.payments-overview-panel .pagination-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}
@media (max-width:700px){
  .payments-filter .search-box,
  .payments-filter select,
  .payments-filter input[type="date"],
  .payments-filter .btn{
    flex:1 1 100%;
    width:100%;
  }
  .payment-overview-stats .stat-card strong{font-size:20px}
}

/* Production safety / overdue / payment calculation / backup */
.overdue-stat .stat-icon{
  background:#fee2e2;
  color:#dc2626;
  font-weight:900;
  font-size:20px;
}
.overdue-panel{
  margin-bottom:18px;
  overflow:hidden;
}
.overdue-list{
  background:#fff;
  display:grid;
}
.overdue-row{
  display:grid;
  grid-template-columns:44px minmax(0,1fr) auto;
  align-items:center;
  gap:13px;
  padding:14px 19px;
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid #edf0f2;
}
.overdue-row:last-child{border-bottom:0}
.overdue-row:hover{background:#fff8f8}
.overdue-avatar{
  width:40px;height:40px;border-radius:50%;
  display:grid;place-items:center;
  background:#fee2e2;color:#b91c1c;
  font-size:11px;font-weight:800;
}
.overdue-main{min-width:0}
.overdue-main strong{display:block;color:#101828;font-size:13px}
.overdue-main small,.overdue-amount small{display:block;color:#667085;font-size:11px;margin-top:4px}
.overdue-amount{text-align:right}
.overdue-amount strong{display:block;color:#b91c1c;font-size:13px}
.compact-empty{padding:18px}

.payment-calculation-hint{
  min-height:18px;
  margin-top:-4px;
  margin-bottom:5px;
  font-size:11px;
  line-height:1.4;
  color:#667085;
}
.payment-calculation-hint.warning{color:#b42318}
.payment-calculation-hint.good{color:#15803d}

.backup-content{
  padding:22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
}
.backup-warning{
  max-width:720px;
  display:grid;
  gap:5px;
  padding:15px 17px;
  border:1px solid #f3d7a5;
  background:#fffbeb;
  border-radius:10px;
  color:#7a4a00;
}
.backup-warning strong{font-size:13px}
.backup-warning span{font-size:12px;line-height:1.5}

@media (max-width:700px){
  .overdue-row{
    grid-template-columns:40px minmax(0,1fr);
  }
  .overdue-amount{
    grid-column:2;
    text-align:left;
    margin-top:-7px;
  }
  .backup-content{
    padding:15px;
    align-items:stretch;
  }
  .backup-content .btn{width:100%}
}

/* Clean Lending logo: the icon artwork provides its own shape. */
.brand-mark {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}