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

:root{
  --bg:#f5f7fa;
  --surface:#ffffff;
  --surface-soft:#f8fafc;
  --ink:#17212b;
  --muted:#64748b;
  --line:#e2e8f0;
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --success:#087443;
  --danger:#b42318;
  --warning:#b54708;
  --radius:16px;
  --radius-sm:10px;
  --sidebar:#101820;
  --sidebar-hover:#192735;
  --sidebar-active:#1d2935;
  --sidebar-text:#dbe5ef;
}

/* ---------- GLOBAL ---------- */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

a{
  color:inherit;
  text-decoration:none;
}

button,
input,
select,
textarea{
  font:inherit;
}

button{
  cursor:pointer;
}

::selection{
  background:#dbeafe;
  color:#17212b;
}

/* ---------- APP SHELL ---------- */

.app-shell{
  display:flex;
  min-height:100vh;
}

/* ---------- SIDEBAR ---------- */

.sidebar{
  width:245px;
  background:var(--sidebar);
  color:#fff;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  position:fixed;
  inset:0 auto 0 0;
  z-index:30;
  padding:22px 14px;
  transition:transform .25s ease;
}

.brand{
  display:flex;
  gap:12px;
  align-items:center;
  padding:4px 10px 28px;
}

.brand-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  background:#fff;
  color:#101820;
  display:grid;
  place-items:center;
  font-weight:800;
  font-size:18px;
  flex:none;
  box-shadow:0 4px 12px rgba(0,0,0,.12);
}

.brand small{
  display:block;
  color:#9aafc2;
  font-size:12px;
  margin-top:2px;
}

.sidebar nav{
  display:grid;
  gap:5px;
}

.sidebar nav a{
  color:#b9c8d6;
  padding:12px 13px;
  border-radius:10px;
  display:flex;
  gap:12px;
  align-items:center;
  min-height:46px;
  transition:
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.sidebar nav a span{
  width:18px;
  text-align:center;
  flex:none;
}

.sidebar nav a:hover{
  background:var(--sidebar-hover);
  color:#fff;
  transform:translateX(2px);
}

.sidebar nav a.active{
  background:var(--sidebar-active);
  color:#fff;
  box-shadow:inset 3px 0 0 var(--primary);
}

.sidebar-footer{
  margin-top:auto;
  border-top:1px solid #283846;
  padding:15px 10px 4px;
}

.sidebar-footer a{
  display:block;
  color:#fff;
  margin-top:8px;
  font-weight:600;
}

.sidebar-footer .muted{
  color:#9aafc2;
  font-weight:500;
}

/* ---------- MAIN AREA ---------- */

.main-area{
  margin-left:245px;
  width:calc(100% - 245px);
  min-height:100vh;
  position:relative;
  z-index:1;
}

/* ---------- TOPBAR ---------- */

.topbar{
  height:92px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:0 34px;
  position:sticky;
  top:0;
  z-index:20;
}

.topbar h1{
  margin:2px 0 0;
  font-size:26px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:-.025em;
}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.09em;
  color:#8b949e;
  font-size:10px;
  font-weight:700;
}

.content{
  padding:28px 34px 50px;
  max-width:1500px;
  margin:0 auto;
}

/* ---------- BUTTONS ---------- */

.menu-btn{
  display:none;
  border:0;
  background:transparent;
  color:var(--ink);
  font-size:22px;
  padding:8px;
  border-radius:10px;
}

.menu-btn:hover{
  background:var(--surface-soft);
}

.btn{
  appearance:none;
  border:1px solid transparent;
  border-radius:10px;
  min-height:42px;
  padding:10px 16px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.btn:active{
  transform:translateY(1px);
}

.btn-primary{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
  box-shadow:0 4px 10px rgba(37,99,235,.16);
}

.btn-primary:hover{
  background:var(--primary-dark);
  border-color:var(--primary-dark);
  box-shadow:0 6px 16px rgba(37,99,235,.22);
}

.btn-secondary{
  background:#fff;
  border-color:var(--line);
  color:var(--ink);
}

.btn-secondary:hover{
  background:var(--surface-soft);
  border-color:#cbd5e1;
}

.btn-danger{
  background:#fff5f5;
  border-color:#fecaca;
  color:var(--danger);
}

.btn-danger:hover{
  background:#fee2e2;
}

/* ---------- DASHBOARD HEADER ---------- */

.page-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  margin-bottom:18px;
}

.page-head h2,
.section-head h2{
  margin:0;
  font-size:18px;
  font-weight:750;
  letter-spacing:-.015em;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-bottom:14px;
}

/* ---------- STAT CARDS ---------- */

.stat-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.stat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 22px;
  box-shadow:0 4px 18px rgba(16,24,40,.035);
  transition:
    transform .18s ease,
    box-shadow .18s ease;
}

.stat:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(16,24,40,.07);
}

.stat-label{
  color:var(--muted);
  font-size:12px;
  font-weight:600;
}

.stat-value{
  font-size:27px;
  line-height:1.15;
  font-weight:800;
  margin-top:8px;
  letter-spacing:-.025em;
}

.stat-note{
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}

.positive{
  color:var(--success);
}

.negative{
  color:var(--danger);
}

/* ---------- CARDS ---------- */

.card,
.table-card,
.form-card,
.report-sheet,
.account-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 4px 18px rgba(16,24,40,.035);
}

.card{
  padding:20px;
}

.account-card{
  padding:18px;
}

.account-card h3{
  margin:0 0 4px;
  font-size:16px;
}

.muted{
  color:var(--muted);
}

/* ---------- DASHBOARD LAYOUT ---------- */

.dashboard-grid{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(300px,.8fr);
  gap:18px;
  margin-top:18px;
}

.hero-balance{
  padding:24px;
}

.hero-balance .big{
  font-size:36px;
  font-weight:800;
  letter-spacing:-.035em;
}

/* ---------- CHART ---------- */

.chart-wrap{
  height:220px;
  padding:18px;
}

.bars{
  display:flex;
  align-items:flex-end;
  gap:8px;
  height:170px;
}

.bar-col{
  flex:1;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  align-items:center;
  gap:6px;
}

.bar{
  width:100%;
  max-width:28px;
  min-height:3px;
  border-radius:7px 7px 2px 2px;
  background:var(--primary);
}

.bar-label,
.bar-value{
  font-size:9px;
  color:var(--muted);
}

/* ---------- TABLES ---------- */

.table-card{
  overflow:hidden;
}

.table-card table{
  width:100%;
  border-collapse:collapse;
}

.table thead th,
.table-card thead th{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#7b8490;
  background:#fafbfc;
  border-bottom:1px solid var(--line);
  padding:12px 14px;
  text-align:left;
  font-weight:700;
}

.table td,
.table-card td{
  padding:13px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:middle;
}

.table tbody tr:last-child td,
.table-card tbody tr:last-child td{
  border-bottom:0;
}

.table tbody tr:hover,
.table-card tbody tr:hover{
  background:#fafcff;
}

/* ---------- RESPONSIVE TABLE ---------- */

.table-responsive{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.table-responsive table{
  min-width:700px;
}

/* ---------- PILLS ---------- */

.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  padding:4px 9px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.pill-credit{
  background:#ecfdf3;
  color:#087443;
}

.pill-debit{
  background:#fff0ef;
  color:#b42318;
}

/* ---------- FORMS ---------- */

.form-card{
  padding:22px;
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
}

.form-group{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.form-group.full{
  grid-column:1/-1;
}

.form-label,
.form-card label{
  color:#48515b;
  font-size:12px;
  font-weight:650;
}

.form-control,
.form-select,
.form-card input,
.form-card select,
.form-card textarea{
  width:100%;
  border:1px solid #dfe5ec;
  background:#fff;
  color:var(--ink);
  border-radius:10px;
  padding:10px 12px;
  min-height:42px;
  outline:none;
  transition:
    border-color .18s ease,
    box-shadow .18s ease,
    background .18s ease;
}

.form-card textarea,
textarea.form-control{
  min-height:100px;
  resize:vertical;
}

.form-control::placeholder,
.form-card input::placeholder,
.form-card textarea::placeholder{
  color:#94a3b8;
}

.form-control:hover,
.form-select:hover,
.form-card input:hover,
.form-card select:hover,
.form-card textarea:hover{
  border-color:#cbd5e1;
}

.form-control:focus,
.form-select:focus,
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  border-color:#93b4f8;
  box-shadow:0 0 0 3px rgba(37,99,235,.10);
}

/* ---------- QUICK ADD ---------- */

.quick-add{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.quick-add button{
  min-height:42px;
}

/* ---------- SUMMARY ---------- */

.summary-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin:20px 0;
}

.summary-item{
  border:1px solid var(--line);
  padding:14px;
  border-radius:12px;
  background:#fff;
}

.summary-item small{
  display:block;
  color:var(--muted);
  font-size:10px;
  text-transform:uppercase;
}

.summary-item strong{
  display:block;
  margin-top:5px;
}

/* ---------- EXPENSE CATEGORIES ---------- */

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

.category-list .category-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}

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

/* ---------- REPORTS ---------- */

.report-sheet{
  padding:30px;
}

.report-title{
  font-size:25px;
  font-weight:800;
  letter-spacing:-.025em;
}

.report-sheet .summary-grid{
  margin-top:20px;
}

/* ---------- EMPTY / ALERT ---------- */

.empty{
  padding:55px 20px;
  text-align:center;
  color:var(--muted);
}

.alert{
  padding:12px 14px;
  border-radius:10px;
  margin-bottom:14px;
  border:1px solid var(--line);
}

.alert-success{
  background:#ecfdf3;
  border-color:#bbf7d0;
  color:#087443;
}

.alert-danger{
  background:#fff0ef;
  border-color:#fecaca;
  color:#b42318;
}

/* ---------- MOBILE COMPONENTS ---------- */

.mobile-fab{
  display:none;
}

.mobile-cards{
  display:none;
}

.actions{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

/* ---------- FOCUS ACCESSIBILITY ---------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(37,99,235,.20);
  outline-offset:2px;
}

/* ---------- MOBILE SIDEBAR OVERLAY ---------- */

.sidebar-overlay{
  display:none;
}

/* ---------- TABLET ---------- */

@media (max-width:1100px){

  .stat-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .dashboard-grid{
    grid-template-columns:1fr;
  }

  .summary-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .content{
    padding-left:24px;
    padding-right:24px;
  }

  .topbar{
    padding-left:24px;
    padding-right:24px;
  }
}

/* ---------- MOBILE ---------- */

@media (max-width:900px){

  .sidebar{
    transform:translateX(-100%);
    box-shadow:12px 0 30px rgba(0,0,0,.18);
  }

  .sidebar.open{
    transform:translateX(0);
  }

  .sidebar-overlay{
    position:fixed;
    inset:0;
    background:rgba(15,23,42,.42);
    z-index:25;
    backdrop-filter:blur(2px);
  }

  .sidebar.open + .sidebar-overlay{
    display:block;
  }

  .main-area{
    margin-left:0;
    width:100%;
  }

  .menu-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .topbar{
    height:76px;
    padding:0 18px;
  }

  .topbar h1{
    font-size:20px;
  }

  .content{
    padding:20px 18px 90px;
  }

  .page-head{
    align-items:flex-start;
  }

  .stat{
    padding:17px;
  }

  .stat-value{
    font-size:23px;
  }

  .mobile-fab{
    display:grid;
    position:fixed;
    right:18px;
    bottom:18px;
    width:54px;
    height:54px;
    border-radius:50%;
    place-items:center;
    background:var(--primary);
    color:#fff;
    font-size:25px;
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    z-index:25;
    border:0;
  }

  .mobile-fab:active{
    transform:scale(.96);
  }
}

/* ---------- SMALL MOBILE ---------- */

@media (max-width:650px){

  body{
    font-size:13px;
  }

  .topbar{
    height:68px;
    padding:0 14px;
  }

  .topbar h1{
    font-size:18px;
  }

  .eyebrow{
    font-size:9px;
  }

  .content{
    padding:16px 14px 86px;
  }

  .stat-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

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

  .stat-value{
    font-size:24px;
  }

  .dashboard-grid{
    gap:12px;
    margin-top:12px;
  }

  .card,
  .account-card,
  .form-card{
    padding:16px;
    border-radius:14px;
  }

  .section-head{
    margin-bottom:10px;
  }

  .section-head h2,
  .page-head h2{
    font-size:16px;
  }

  .page-head{
    gap:10px;
    flex-direction:column;
  }

  .page-head .btn,
  .page-head button{
    width:100%;
  }

  .form-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

  .form-group.full{
    grid-column:auto;
  }

  .summary-grid{
    grid-template-columns:1fr;
    gap:8px;
    margin:14px 0;
  }

  .summary-item{
    padding:12px;
  }

  .report-sheet{
    padding:18px;
    border-radius:14px;
  }

  .report-title{
    font-size:20px;
  }

  .hero-balance{
    padding:18px;
  }

  .hero-balance .big{
    font-size:30px;
  }

  .actions{
    width:100%;
  }

  .actions .btn{
    flex:1;
  }

  .quick-add{
    width:100%;
  }

  .quick-add .btn{
    width:100%;
  }

  .table-card{
    border-radius:14px;
  }

  .table-card td,
  .table-card th{
    padding:10px 11px;
  }

  .mobile-cards{
    display:grid;
    gap:10px;
  }

  .table-responsive{
    display:none;
  }
}

/* ---------- VERY SMALL PHONES ---------- */

@media (max-width:400px){

  .content{
    padding-left:11px;
    padding-right:11px;
  }

  .topbar{
    padding-left:11px;
    padding-right:11px;
  }

  .stat-value{
    font-size:22px;
  }

  .mobile-fab{
    right:14px;
    bottom:14px;
  }
}

/* =========================================================
   FINAL MOBILE POLISH
   Added without changing desktop layout
   ========================================================= */

@media (max-width:900px){
  .topbar{
    height:72px;
    min-height:72px;
    padding:0 14px;
    gap:10px;
  }

  .topbar .menu-btn{
    width:42px;
    height:42px;
    min-width:42px;
    padding:0;
    border-radius:10px;
    flex:none;
  }

  .topbar .page-head{
    min-width:0;
    flex:1;
    margin:0;
  }

  .topbar .page-head h2,
  .topbar h1{
    margin:0;
    line-height:1.15;
  }

  .topbar > .btn,
  .topbar > button{
    display:none !important;
  }

  .page-head{
    width:100%;
    gap:8px;
    margin-bottom:14px;
  }

  .page-head h2{
    line-height:1.2;
  }

  .content{
    padding:16px 14px 88px;
  }

  .cardx form > .d-flex.mb-4{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px !important;
    width:100%;
    margin-bottom:18px !important;
  }

  .cardx form > .d-flex.mb-4 .btn{
    width:100%;
    min-height:50px;
    margin:0 !important;
    padding:10px 8px;
    font-size:14px;
    border-radius:12px;
  }

  .cardx{
    width:100%;
    margin:0;
    border-radius:16px;
    padding:16px !important;
  }

  .cardx .row.g-3{
    row-gap:12px !important;
    margin-left:0;
    margin-right:0;
  }

  .cardx .row.g-3 > [class*="col-"]{
    width:100%;
    max-width:100%;
    flex:0 0 100%;
    padding-left:0;
    padding-right:0;
  }

  .cardx .form-label,
  .cardx label{
    font-size:12px;
    line-height:1.25;
    margin-bottom:6px;
  }

  .cardx .form-control,
  .cardx .form-select,
  .cardx input,
  .cardx select,
  .cardx textarea{
    min-height:48px;
    height:auto;
    width:100%;
    border-radius:11px;
    padding:11px 13px;
    font-size:15px;
  }

  .cardx textarea{
    min-height:104px;
    line-height:1.45;
  }

  .cardx input[type="file"]{
    min-height:48px;
    padding:7px 9px;
    font-size:13px;
  }

  .cardx form > .d-flex.gap-2.mt-4{
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:9px !important;
    width:100%;
    margin-top:8px !important;
  }

  .cardx form > .d-flex.gap-2.mt-4 .btn{
    width:100%;
    min-height:48px;
    margin:0 !important;
  }

  .mobile-fab{
    display:grid !important;
    width:54px;
    height:54px;
    right:16px;
    bottom:16px;
    border-radius:50%;
    font-size:25px;
    z-index:30;
  }

  .sidebar{
    width:min(82vw,320px);
    max-width:320px;
    padding:18px 12px;
  }

  .sidebar nav a{
    min-height:48px;
    padding:12px 13px;
  }

  .sidebar-overlay{
    z-index:29;
  }

  .sidebar.open{
    z-index:30;
  }
}

@media (max-width:650px){
  body{
    overflow-x:hidden;
  }

  .topbar{
    height:68px;
    min-height:68px;
    padding:0 12px;
  }

  .topbar .menu-btn{
    width:40px;
    height:40px;
    min-width:40px;
  }

  .content{
    padding:14px 12px 84px;
  }

  .page-head h2,
  .topbar h1{
    font-size:18px;
  }

  .cardx{
    padding:14px !important;
    border-radius:14px;
  }

  .cardx form > .d-flex.mb-4 .btn{
    min-height:48px;
    font-size:13px;
  }

  .cardx .form-control,
  .cardx .form-select,
  .cardx input,
  .cardx select,
  .cardx textarea{
    font-size:14px;
  }

  .mobile-fab{
    width:52px;
    height:52px;
    right:14px;
    bottom:14px;
    font-size:24px;
  }
}

@media (max-width:400px){
  .topbar{
    padding-left:9px;
    padding-right:9px;
  }

  .content{
    padding-left:9px;
    padding-right:9px;
  }

  .cardx{
    padding:12px !important;
  }

  .cardx form > .d-flex.mb-4{
    gap:6px !important;
  }

  .cardx form > .d-flex.mb-4 .btn{
    font-size:12px;
    padding-left:5px;
    padding-right:5px;
  }

  .mobile-fab{
    right:12px;
    bottom:12px;
  }
}


/* =========================================================
   MOBILE MENU FIX
   Keep hamburger visible; hide only the header action button
   ========================================================= */

@media (max-width:900px){
  .topbar > .menu-btn{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    visibility:visible !important;
    opacity:1 !important;
    position:relative;
    z-index:40;
  }

  .topbar > .btn,
  .topbar > button:not(.menu-btn){
    display:none !important;
  }
}


/* =========================================================
   TRANSACTIONS PAGE — MOBILE POLISH
   ========================================================= */

@media (max-width:650px){

  /* Transactions page top action row */
  .main-area > .d-flex.justify-content-between.align-items-center.mb-3{
    align-items:center !important;
    gap:10px;
    margin-bottom:12px !important;
  }

  .main-area > .d-flex.justify-content-between.align-items-center.mb-3 .muted{
    font-size:11px;
    line-height:1.35;
  }

  .main-area > .d-flex.justify-content-between.align-items-center.mb-3 > div:last-child{
    display:flex;
    gap:6px;
  }

  .main-area > .d-flex.justify-content-between.align-items-center.mb-3 > div:last-child .btn{
    min-height:40px;
    padding:8px 10px;
    font-size:11px;
    white-space:nowrap;
  }

  /* Filter card */
  .filter-card{
    padding:13px !important;
    border-radius:14px;
  }

  .filter-card form{
    row-gap:10px !important;
  }

  .filter-card .form-label{
    font-size:10px;
    margin-bottom:5px;
  }

  .filter-card .form-control,
  .filter-card .form-select{
    min-height:44px;
    font-size:13px;
    padding:9px 10px;
  }

  .filter-card .btn{
    min-height:44px;
    font-size:12px;
  }

  /* Desktop table stays hidden on mobile */
  .table-card > .table-responsive{
    display:none !important;
  }

  /* Mobile transaction cards */
  .mobile-cards{
    display:block !important;
    padding:0 !important;
  }

  .mobile-card{
    padding:14px !important;
    margin-bottom:11px;
    border-radius:14px;
  }

  .mobile-card-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:10px;
  }

  .mobile-date{
    font-size:11px;
    color:var(--muted);
    font-weight:600;
  }

  .mobile-card-top .pill{
    font-size:9px;
    padding:5px 8px;
  }

  /* Description + amount */
  .mobile-card-main{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-bottom:11px;
    border-bottom:1px solid var(--line);
  }

  .mobile-description{
    min-width:0;
    font-size:14px;
    line-height:1.4;
    font-weight:600;
    overflow-wrap:anywhere;
  }

  .mobile-amount{
    flex-shrink:0;
    font-size:15px;
    white-space:nowrap;
  }

  /* Account / category / vendor / payment */
  .mobile-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px 12px;
    padding:11px 0;
  }

  .mobile-meta span{
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:3px;
    font-size:11px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }

  .mobile-meta b{
    font-size:8px;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--muted);
  }

  /* Action buttons */
  .mobile-card-actions{
    display:flex;
    align-items:center;
    gap:6px;
    padding-top:10px;
    border-top:1px solid var(--line);
  }

  .mobile-card-actions .btn{
    min-height:35px;
    padding:7px 10px;
    border-radius:8px;
    font-size:11px;
  }

  .mobile-card-actions form{
    margin:0;
  }

  /* Pagination */
  .pagination{
    justify-content:center;
    gap:3px;
  }

  .pagination .page-link{
    min-width:36px;
    min-height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:6px 9px;
    font-size:12px;
  }
}


/* =========================================================
   DASHBOARD — MOBILE POLISH
   ========================================================= */

@media (max-width:650px){

  /* Dashboard summary cards */
  .dashboard-grid,
  .stats-grid,
  .summary-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* Generic dashboard cards */
  .dashboard-card,
  .stat-card,
  .summary-card{
    width:100%;
    min-width:0;
  }

  /* Tables on dashboard */
  .dashboard .table-responsive{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  /* Dashboard headings */
  .dashboard h2,
  .dashboard h3{
    font-size:17px;
  }

  /* Account cards */
  .account-card{
    padding:13px !important;
    border-radius:14px;
  }

  /* Amounts */
  .dashboard .amount,
  .dashboard .balance{
    font-size:17px;
  }

  /* Dashboard action buttons */
  .dashboard .btn{
    min-height:42px;
  }

  /* Prevent horizontal overflow */
  .dashboard{
    width:100%;
    max-width:100%;
    overflow:hidden;
  }
}