/* RESPONSIVE */

@media (max-width: 1050px) {
  .modern-stats {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 700px) {
  .main {
    padding-bottom: 95px;
  }

  .modern-top {
    padding: 13px 14px;
    border-radius: 14px;
    margin-bottom: 18px;
  }

  .modern-top h1 {
    font-size: 19px;
  }

  .top-subtitle {
    font-size: 11px;
  }

  .top-icon {
    width: 36px;
    height: 36px;
  }

  .welcome-panel {
    align-items: flex-start;
  }

  .welcome-panel h2 {
    font-size: 18px;
  }

  .welcome-panel > button {
    font-size: 12px;
    padding: 10px;
    white-space: nowrap;
  }

  .modern-stats {
    gap: 10px;
  }

  .modern-stats .stat {
    padding: 14px;
    border-radius: 15px;
  }

  .modern-stats .stat strong {
    font-size: 19px;
  }

  .modern-list-row {
    grid-template-columns: minmax(0,1fr) auto 35px;
    gap: 9px;
  }

  .modern-person {
    grid-column: 1;
    grid-row: 1 / 3;
  }

  .modern-amount {
    grid-column: 2;
    grid-row: 1;
    font-size: 13px;
  }

  .modern-date {
    grid-column: 2;
    grid-row: 2;
    font-size: 11px;
  }

  .more-wrap {
    grid-column: 3;
    grid-row: 1 / 3;
  }

  .bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: #fff;
    border-top: 1px solid var(--modern-border);
    padding: 8px 8px max(8px,env(safe-area-inset-bottom));
    z-index: 90;
    box-shadow: 0 -5px 25px rgba(0,0,0,.05);
  }

  .bottom-nav button {
    border: 0;
    background: transparent;
    color: #7d8899;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 9px;
    cursor: pointer;
  }

  .bottom-nav button span {
    font-size: 23px;
  }

  .bottom-nav button.active {
    color: var(--modern-blue);
  }

  .bottom-nav .bottom-create span {
    background: var(--modern-blue);
    color: white;
    border-radius: 13px;
    padding: 3px 12px;
  }
}

@media print {
  .modern-top,
  .bottom-nav,
  .more-wrap,
  .modern-debit-actions,
  .debit-detail-toolbar {
    display: none !important;
  }
}



/* Invoice Generator reference: compact mobile navigation */
@media (max-width:800px) {
 .main { padding-bottom:calc(100px + env(safe-area-inset-bottom))!important; }
 .bottom-nav { position:fixed!important; inset:auto 0 0!important; height:auto!important; min-height:68px!important; display:grid!important; grid-template-columns:repeat(5,minmax(0,1fr))!important; align-items:end!important; gap:0!important; padding:7px 5px calc(7px + env(safe-area-inset-bottom))!important; background:rgba(255,255,255,.97)!important; border:0!important; border-top:1px solid #e6eaf0!important; border-radius:0!important; overflow:visible!important; box-shadow:0 -5px 20px rgba(16,24,40,.08)!important; z-index:1100!important; box-sizing:border-box!important; backdrop-filter:blur(12px); }
 .bottom-nav .bottom-nav-item { position:relative!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:4px!important; min-width:0!important; min-height:53px!important; padding:5px 2px!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:#7b8798!important; font-family:inherit!important; box-sizing:border-box!important; }
 .bottom-nav .bottom-nav-item>svg { display:block!important; width:22px!important; height:22px!important; flex-shrink:0!important; fill:none!important; stroke:currentColor!important; stroke-width:1.8!important; stroke-linecap:round!important; stroke-linejoin:round!important; }
 .bottom-nav .bottom-nav-item>span:last-child { display:block!important; width:100%!important; font-size:10px!important; font-weight:600!important; line-height:1.15!important; text-align:center!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; background:transparent!important; padding:0!important; margin:0!important; color:inherit!important; border-radius:0!important; }
 .bottom-nav .bottom-nav-item.active {color:#204da7!important;}
 .bottom-nav .bottom-nav-item.active:after {content:''!important;position:absolute!important;bottom:0!important;left:50%!important;transform:translateX(-50%)!important;width:20px!important;height:2px!important;border-radius:5px!important;background:#204da7!important;}
 .bottom-nav .bottom-create {margin-top:-20px!important;justify-content:center!important;}
 .bottom-nav .bottom-create-circle {position:static!important;transform:none!important;display:flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:48px!important;box-sizing:content-box!important;margin:0 auto 1px!important;padding:0!important;border:4px solid #fff!important;border-radius:50%!important;background:#204da7!important;color:#fff!important;box-shadow:0 5px 15px rgba(32,77,167,.3)!important;}
 .bottom-nav .bottom-create-circle svg {display:block!important;width:24px!important;height:24px!important;stroke:#fff!important;stroke-width:2.2!important;fill:none!important;stroke-linecap:round!important;}
 .bottom-nav .bottom-create.active:after {display:none!important;}
 .modern-top {min-height:60px!important;padding:12px 14px!important;gap:8px!important;}
 .modern-top .mobile-top {min-width:0!important;display:flex!important;align-items:center!important;gap:10px!important;}
 .modern-top h1 {font-size:19px!important;line-height:1.2!important;margin:2px 0!important;}
 .modern-top .top-eyebrow {font-size:9px!important;}
 .modern-top .top-subtitle {font-size:11px!important;line-height:1.25!important;}
 .modern-top .top-actions {gap:6px!important;flex-shrink:0!important;}
 .modern-top .top-icon {width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;padding:0!important;display:grid!important;place-items:center!important;font-size:18px!important;line-height:1!important;}
 .modern-top .hamburger {width:34px!important;height:34px!important;min-width:34px!important;padding:0!important;font-size:20px!important;}
}
@media(max-width:360px){.bottom-nav .bottom-nav-item>span:last-child{font-size:9px!important}.bottom-nav .bottom-nav-item>svg{width:20px!important;height:20px!important}.bottom-nav .bottom-create-circle{width:45px!important;height:45px!important}}
@media(min-width:801px){.bottom-nav{display:none!important}}


/* =====================================================
   INVOICE-INSPIRED DASHBOARD AND HEADER — v0.0.05
   ===================================================== */
.modern-top .mobile-top {display:flex;align-items:center;gap:14px;min-width:0}
.modern-top .header-copy{min-width:0}
.modern-top .hamburger{display:grid;place-items:center;flex-shrink:0}
.modern-top .hamburger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.modern-top .top-subtitle{display:block;color:#7b8596}
.welcome-panel{display:block;margin-bottom:23px}
.welcome-panel h2{font-size:clamp(22px,3vw,30px);font-weight:800;margin:0 0 5px;letter-spacing:-.7px;color:#17243b}
.welcome-panel p{font-size:14px;line-height:1.45;color:#778397;margin:0}
.modern-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.modern-stats .stat{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;min-height:170px;padding:20px 18px 18px;border:1px solid #e7ebf1;border-top:4px solid transparent;border-radius:18px;background:#fff;box-shadow:0 5px 20px rgba(22,38,64,.035);gap:0}
.modern-stats .stat small{display:block;max-width:calc(100% - 43px);font-size:14px;line-height:1.35;font-weight:700;color:#69788d}
.modern-stats .stat strong{display:block;margin-top:auto;padding-top:25px;font-size:clamp(19px,2.5vw,29px);font-weight:800;letter-spacing:-.5px;color:#17243b;line-height:1.2;overflow-wrap:anywhere}
.modern-stats .stat .stat-note{display:block;margin-top:20px;font-size:12px;color:#8c98a9;line-height:1.3}
.modern-stats .stat .stat-icon{position:absolute;top:17px;right:17px;width:38px;height:38px;display:grid;place-items:center;margin:0;border-radius:11px}
.modern-stats .stat-icon svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.modern-stats .stat-debt{background:linear-gradient(145deg,#2450a6,#3266c2);border-color:transparent;color:#fff}
.modern-stats .stat-debt small,.modern-stats .stat-debt strong{color:#fff}
.modern-stats .stat-debt .stat-note{color:#d5e2ff}
.modern-stats .stat-debt .stat-icon{background:rgba(255,255,255,.18);color:#fff}
.modern-stats .stat-paid{border-top-color:#24a45b}
.modern-stats .stat-paid .stat-icon{background:#dff9e9;color:#138b48}
.modern-stats .stat-outstanding{border-top-color:#f1a21c}
.modern-stats .stat-outstanding .stat-icon{background:#fff3c9;color:#a85b0d}
.modern-stats .stat-customers{border-top-color:#ed4a50}
.modern-stats .stat-customers .stat-icon{background:#fde4e5;color:#d92d36}
.dashboard-create{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;min-height:54px;margin-top:18px;border-radius:15px;font-size:16px;font-weight:750;background:#204da7;color:#fff}
.dashboard-create span{font-size:25px;font-weight:400;line-height:1}
.recent-card{margin-top:22px}
@media(max-width:800px){
  body{background:#f4f6fb}
  .modern-top{position:relative;min-height:76px!important;margin:-16px -16px 23px!important;padding:14px 16px!important;border:0!important;border-bottom:1px solid #e6eaf0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  .modern-top .mobile-top{gap:15px!important}
  .modern-top .hamburger{width:33px!important;height:38px!important;min-width:33px!important;background:transparent!important;border:0!important;color:#111827!important;padding:0!important}
  .modern-top .hamburger svg{width:27px!important;height:27px!important}
  .modern-top h1{font-size:21px!important;line-height:1.15!important;font-weight:800!important;margin:0 0 4px!important}
  .modern-top .top-subtitle{font-size:12px!important;line-height:1.25!important}
  .modern-top .top-actions{display:none!important}
  .welcome-panel{margin-bottom:23px}
  .welcome-panel h2{font-size:24px}
  .welcome-panel p{font-size:14px}
  .modern-stats{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:11px!important}
  .modern-stats .stat{min-height:166px!important;padding:17px 13px 15px!important;border-radius:16px!important}
  .modern-stats .stat small{font-size:13px!important;max-width:calc(100% - 34px)}
  .modern-stats .stat strong{font-size:clamp(17px,4.6vw,24px)!important;padding-top:25px!important}
  .modern-stats .stat .stat-note{font-size:11px!important;margin-top:18px!important}
  .modern-stats .stat .stat-icon{top:15px!important;right:13px!important;width:33px!important;height:33px!important}
  .modern-stats .stat-icon svg{width:20px!important;height:20px!important}
  .dashboard-create{min-height:52px;margin-top:15px;font-size:15px}
}
@media(max-width:370px){.modern-stats .stat{padding:14px 11px!important}.modern-stats .stat small{font-size:12px!important}.modern-stats .stat strong{font-size:17px!important}}

/* v0.0.06 — keep the four dashboard colors consistent with Invoice Generator */
.modern-stats .stat-debt { background: linear-gradient(145deg,#2450a6,#3266c2) !important; border-top-color: transparent !important; }
.modern-stats .stat-debt small, .modern-stats .stat-debt strong { color: #fff !important; }
.modern-stats .stat-debt .stat-note { color: #d5e2ff !important; }
.modern-stats .stat-paid { border-top: 4px solid #24a45b !important; }
.modern-stats .stat-outstanding { border-top: 4px solid #f1a21c !important; }
.modern-stats .stat-customers { border-top: 4px solid #ed4a50 !important; }

/* v0.0.07 — Debit Book distinct card palette and consistent action spacing */
.modern-stats .stat-debt {background:linear-gradient(140deg,#113f54,#087e88)!important;border:1px solid #126c7a!important;border-top:4px solid #0b9b9e!important;color:#fff!important;}
.modern-stats .stat-debt small,.modern-stats .stat-debt strong{color:#fff!important;}
.modern-stats .stat-debt .stat-note{color:#d4f3f2!important;}
.modern-stats .stat-debt .stat-icon{background:rgba(255,255,255,.16)!important;color:#fff!important;}
.modern-stats .stat-paid{border-top:4px solid #6c56c8!important;background:#fff!important;}
.modern-stats .stat-paid .stat-icon{background:#eeeaff!important;color:#6249bc!important;}
.modern-stats .stat-outstanding{border-top:4px solid #dd7950!important;background:#fff!important;}
.modern-stats .stat-outstanding .stat-icon{background:#fff0e8!important;color:#b65c32!important;}
.modern-stats .stat-customers{border-top:4px solid #2696a3!important;background:#fff!important;}
.modern-stats .stat-customers .stat-icon{background:#e1f5f6!important;color:#187f8a!important;}
/* Reserve a dedicated action column; don't let amount touch the ellipsis. */
.modern-list-row{column-gap:18px!important;}
.modern-list-row > .modern-amount{padding-right:7px!important;}
.modern-list-row > .more-wrap{margin-left:8px!important;}
@media(max-width:700px){
  .modern-list-row{grid-template-columns:minmax(0,1fr) minmax(92px,auto) 35px!important;column-gap:13px!important;row-gap:5px!important;}
  .modern-list-row > .modern-amount{padding-right:4px!important;}
  .modern-list-row > .more-wrap{margin-left:5px!important;}
}
@media(max-width:365px){
  .modern-list-row{grid-template-columns:minmax(0,1fr) minmax(80px,auto) 32px!important;column-gap:10px!important;}
}

/* v0.0.08 — Rich colored dashboard cards, distinct from Invoice */
.modern-stats .stat-paid {
  background:linear-gradient(145deg,#f2edff 0%,#e5ddff 100%)!important;
  border:1px solid #d8cafa!important;
  border-top:4px solid #7656c8!important;
  box-shadow:0 8px 22px rgba(104,78,176,.10)!important;
}
.modern-stats .stat-paid small,.modern-stats .stat-paid strong{color:#392769!important;}
.modern-stats .stat-paid .stat-note{color:#74668e!important;}
.modern-stats .stat-paid .stat-icon{background:#d9cbff!important;color:#6242af!important;}
.modern-stats .stat-outstanding {
  background:linear-gradient(145deg,#fff3e8 0%,#ffe2d0 100%)!important;
  border:1px solid #f4cdb6!important;
  border-top:4px solid #dc7950!important;
  box-shadow:0 8px 22px rgba(191,107,66,.09)!important;
}
.modern-stats .stat-outstanding small,.modern-stats .stat-outstanding strong{color:#703b25!important;}
.modern-stats .stat-outstanding .stat-note{color:#956c59!important;}
.modern-stats .stat-outstanding .stat-icon{background:#ffd4bb!important;color:#aa512d!important;}
.modern-stats .stat-customers {
  background:linear-gradient(145deg,#eafafa 0%,#d2f2f0 100%)!important;
  border:1px solid #b8e3e2!important;
  border-top:4px solid #2696a3!important;
  box-shadow:0 8px 22px rgba(36,137,145,.09)!important;
}
.modern-stats .stat-customers small,.modern-stats .stat-customers strong{color:#18535b!important;}
.modern-stats .stat-customers .stat-note{color:#57818a!important;}
.modern-stats .stat-customers .stat-icon{background:#bce9e8!important;color:#167b86!important;}