/* ============================================================
   VOLBOO — Dashboard layer
   Loads LAST, after css/styles.css, and is linked from
   dashboard.php only.

   The page reads as two rows. The top row carries the four
   overview figures — each on its own pastel stock — beside one
   tall panel holding the collections chart. The bottom row pairs
   the reserved-account list with the recent-transaction table.

   Every colour comes from the tokens below, so a card re-skins by
   changing one pair: its stock and the ink of the note under its
   figure.
   ============================================================ */

/* ------------------------------------------------------------
   0. Page tokens
   ------------------------------------------------------------ */
.dash-page{
  /* card stocks */
  --d-peach:#fcf0e4;
  --d-green:#ecf5e7;
  --d-blue:#ebf0fe;
  --d-mint:#ecf5f4;

  /* the note under each figure, one per stock */
  --d-ink-peach:#b25a06;
  --d-ink-green:#4f882f;
  --d-ink-blue:#022dbd;
  --d-ink-mint:#3b7e76;

  /* a control sitting on a tinted card */
  --d-raised:#ffffff;
  --d-raised-hover:#ffffff;

  /* chart panel — the bars, the newest bar, and the ruled lines.
     Each bar is a two-stop gradient, top then bottom. The stops stay
     close together: the gradient runs the height of the plot, so a
     short bar only ever sees the bottom one. */
  --d-chart-bg:#eff2f0;
  --d-bar:#d3e0d8;
  --d-bar-2:#b8cdc1;
  --d-bar-live:#0c4534;
  --d-bar-live-2:#1a7256;
  --d-grid:rgba(19,26,22,.08);
  --d-axis:#68716c;

  /* panels + table */
  --d-panel-line:#efefef;
  --d-row-line:#f2f2f2;
  --d-head-line:#dedede;
  --d-th:#4d5761;

  /* status tags */
  --d-ok-bg:#d9f2ef;   --d-ok-ink:#00785a;
  --d-warn-bg:#fff1c8; --d-warn-ink:#8a5c00;
  --d-bad-bg:#fdecea;  --d-bad-ink:#b42318;

  /* the one filled control on the page */
  --d-brand:#0c4534;
  --d-brand-hover:#10573f;
  --d-on-brand:#ffffff;
}

/* Dark lifts each hue rather than brightening it, so nothing glows
   on near-black. Keep the two blocks in step. */
[data-theme="dark"] .dash-page{
  --d-peach:#2b211a;
  --d-green:#1c2418;
  --d-blue:#1a1f2e;
  --d-mint:#172321;

  --d-ink-peach:#e3a263;
  --d-ink-green:#8bc96a;
  --d-ink-blue:#93adf7;
  --d-ink-mint:#74bfb2;

  --d-raised:rgba(255,255,255,.10);
  --d-raised-hover:rgba(255,255,255,.16);

  --d-chart-bg:#171e20;
  --d-bar:#2c3a35;
  --d-bar-2:#3b4d46;
  --d-bar-live:#2c9b74;
  --d-bar-live-2:#4fd4a6;
  --d-grid:rgba(255,255,255,.07);
  --d-axis:#9aa7a1;

  --d-panel-line:#232b2e;
  --d-row-line:#202629;
  --d-head-line:#303a3d;
  --d-th:#8c9992;

  --d-ok-bg:#10312a;   --d-ok-ink:#5ccfab;
  --d-warn-bg:#342a10; --d-warn-ink:#e8c46e;
  --d-bad-bg:#3a1f1e;  --d-bad-ink:#f4a6a0;

  --d-brand:#3bb98d;
  --d-brand-hover:#47c89a;
  --d-on-brand:#05231a;
}

/* Breathing room under the sticky header */
.dash-page{padding-top:38px}
@media(max-width:1280px){.dash-page{padding-top:32px}}
@media(max-width:768px){.dash-page{padding-top:20px}}

/* ------------------------------------------------------------
   1. Greeting

   The salutation, the glyph and the chip it sits on all come off the
   clock, so the page opens differently at 8am than it does at 8pm.
   Held to page-title scale rather than display size — it introduces
   the dashboard, it is not the point of it.
   ------------------------------------------------------------ */
.dash-hello{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.dash-hello-icon{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  background:var(--bg-input);color:var(--text3);
}
.dash-hello-icon svg{width:21px;height:21px}
.dash-hello-icon.is-peach{background:var(--d-peach);color:var(--d-ink-peach)}
.dash-hello-icon.is-mint {background:var(--d-mint); color:var(--d-ink-mint)}
.dash-hello-icon.is-blue {background:var(--d-blue); color:var(--d-ink-blue)}
.dash-hello-text{min-width:0}
.dash-hello h1{
  font-size:1.375rem;font-weight:600;letter-spacing:-.03em;
  line-height:1.2;color:var(--text);
}
.dash-hello p{
  margin-top:5px;font-size:.8125rem;color:var(--text3);
}

/* Phone-only row above the cards; empty and hidden on desktop */
.dash-mode-row{display:none}

/* ------------------------------------------------------------
   2. Top row — the four figures, side by side

   #dashboard-stats keeps .stats-grid because the page script
   toggles it to display:grid.
   ------------------------------------------------------------ */
#dashboard-stats.dash-top{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:minmax(145px,auto);
  gap:18px;
  margin-bottom:20px;
}

/* ---- the cards --------------------------------------------- */
.dstat{
  position:relative;display:flex;flex-direction:column;
  border-radius:16px;padding:17px 15px 14px;
  background:var(--d-stock);
  --d-note:var(--text3);
}
.dstat--peach{--d-stock:var(--d-peach);--d-note:var(--d-ink-peach)}
.dstat--green{--d-stock:var(--d-green);--d-note:var(--d-ink-green)}
.dstat--blue {--d-stock:var(--d-blue); --d-note:var(--d-ink-blue)}
.dstat--mint {--d-stock:var(--d-mint); --d-note:var(--d-ink-mint)}

.dstat-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:8px;
}
.dstat-label{
  font-size:.9375rem;font-weight:400;line-height:1.25;
  letter-spacing:-.015em;color:var(--text);padding-top:7px;
}
.dstat-tools{display:flex;align-items:center;gap:6px;flex-shrink:0}

/* The eye rides beside the arrow rather than beside the label, so
   every card keeps the same label line. */
.dash-page .stat-eye{
  width:28px;height:28px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:transparent;border:none;padding:0;margin-top:5px;
  color:var(--text3);font-size:.75rem;transition:var(--transition);
}
.dash-page .stat-eye:hover{background:var(--d-raised);color:var(--text)}

/* Arrow-out button: the card's own white chip */
.dstat-btn{
  width:37px;height:37px;flex:0 0 37px;border-radius:13px;
  display:flex;align-items:center;justify-content:center;
  background:var(--d-raised);color:var(--text);
  transition:transform .18s ease,background-color .18s ease;
}
.dstat-btn:hover{transform:translate(1px,-1px);background:var(--d-raised-hover)}
.dstat-btn svg{width:18px;height:18px}

/* ---- the figure --------------------------------------------
   The count that the page script appends inside .stat-value is an
   <h3>; flex-basis drops it onto its own line under the number,
   where it reads as the card's note. */
.dash-page .dstat .stat-value{
  display:flex;flex-wrap:wrap;align-items:baseline;align-content:space-between;
  gap:0 10px;flex:1 1 auto;margin-top:9px;
  font-size:1.53125rem;font-weight:600;letter-spacing:-.03em;
  line-height:1.1;color:var(--text);word-break:break-word;
}
.dash-page .dstat .stat-value .fig{display:inline-flex;align-items:baseline;min-width:0}
.dash-page .dstat .stat-value .cur{
  font-size:.78em;font-weight:600;color:inherit;opacity:.72;
  letter-spacing:0;margin-right:4px;
}
.dash-page .dstat .stat-value h3{
  flex-basis:100%;margin:11px 0 0;padding:0;border:0;background:none;
  font-size:.75rem;font-weight:500;letter-spacing:-.01em;line-height:1;
  color:var(--d-note);text-transform:none;
}

/* ---- the flag ----------------------------------------------
   The balance is the one figure that belongs to a currency rather
   than to a count, so it carries the flag. Painted as a gradient
   rather than an image: three stripes need no asset, no request and
   no second file to keep in sync, and it stays crisp at any size.
   ------------------------------------------------------------ */
.dstat-figure{
  display:flex;align-items:center;gap:10px;min-width:0;
  flex:1 1 auto;margin-top:8px;
}
.dash-page .dstat .dstat-figure .stat-value{margin-top:0;flex:0 1 auto}

.dstat-flag{
  width:26px;height:26px;flex:0 0 26px;border-radius:50%;
  background:linear-gradient(90deg,
    #008751 0 33.34%, #ffffff 33.34% 66.66%, #008751 66.66% 100%);
  /* A hairline, so the white stripe does not bleed into the card */
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);
}
[data-theme="dark"] .dstat-flag{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}

/* ---- the foot ----------------------------------------------
   Balance only: the withdrawable note on the left, the one filled
   control on the page opposite it. */
.dstat-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:13px;
}
.dash-page .dstat .stat-pill{
  display:inline-flex;align-items:center;gap:5px;min-width:0;
  background:none;border:0;padding:0;margin:0;border-radius:0;
  font-size:.75rem;font-weight:500;letter-spacing:-.01em;line-height:1;
  color:var(--d-note);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dash-page .dstat .stat-pill b{font-weight:600;color:inherit}

.dstat-cta{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  height:28px;padding:0 13px;border-radius:999px;
  background:var(--d-brand);color:var(--d-on-brand);
  font-size:.78125rem;font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;transition:var(--transition);
}
.dstat-cta:hover{background:var(--d-brand-hover);color:var(--d-on-brand)}
.dstat-cta:active{transform:translateY(1px)}

/* ------------------------------------------------------------
   3. Collections chart

   Its own stock rather than a white card, so the top row reads as
   two blocks of colour and not as four cards plus a panel.
   ------------------------------------------------------------ */
.dchart{
  display:flex;flex-direction:column;min-width:0;
  border-radius:17px;padding:18px 18px 16px 20px;
  background:var(--d-chart-bg);
}
.dchart-head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:14px;flex-wrap:wrap;flex-shrink:0;
}
.dchart-head-left{min-width:0}
.dchart-title{
  font-size:1.375rem;font-weight:400;letter-spacing:-.02em;
  line-height:1.1;color:var(--text);
}
.dchart-meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.dchart-sub{
  display:inline-flex;align-items:center;height:24px;padding:0 9px;
  border-radius:8px;background:var(--d-raised);
  font-size:.71875rem;font-weight:500;line-height:1;color:var(--text3);
  white-space:nowrap;
}

/* ---- period selector ----------------------------------------
   A menu on the panel's own stock. It names the range it is showing,
   which a row of pills could only imply by which one was filled. */
.dchart-range{position:relative;flex-shrink:0;margin-top:2px}

.dchart-range-btn{
  display:inline-flex;align-items:center;gap:8px;
  height:35px;padding:0 13px;border-radius:999px;
  background:var(--d-raised);border:1px solid transparent;color:var(--text);
  font-size:.8125rem;font-weight:600;letter-spacing:-.01em;line-height:1;
  white-space:nowrap;transition:var(--transition);
}
.dchart-range-btn:hover{background:var(--d-raised-hover)}
.dchart-range-btn .ico{width:16px;height:16px;color:var(--text3);flex-shrink:0}
.dchart-range-btn .caret{
  width:12px;height:12px;color:var(--text3);flex-shrink:0;
  transition:transform .2s ease;
}
.dchart-range.is-open .dchart-range-btn{background:var(--d-raised-hover)}
.dchart-range.is-open .caret{transform:rotate(180deg)}

.dchart-range-menu{
  position:absolute;top:calc(100% + 8px);right:0;z-index:20;
  min-width:186px;padding:6px;
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:15px;box-shadow:var(--shadow-lg);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease,visibility .16s;
}
.dchart-range.is-open .dchart-range-menu{opacity:1;visibility:visible;transform:none}

.dchart-range-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  width:100%;height:37px;padding:0 11px;border-radius:10px;
  background:none;border:0;color:var(--text2);
  font-size:.8125rem;font-weight:500;letter-spacing:-.01em;text-align:left;
  white-space:nowrap;transition:var(--transition);
}
.dchart-range-item:hover{background:var(--bg-hover);color:var(--text)}
.dchart-range-item .check{width:15px;height:15px;flex-shrink:0;opacity:0;color:var(--accent)}
.dchart-range-item.is-selected{color:var(--text);font-weight:600}
.dchart-range-item.is-selected .check{opacity:1}

.dchart-body{position:relative;flex:1;min-height:230px;margin-top:14px}
.dchart-body canvas{position:absolute;inset:0;width:100%!important;height:100%!important}

/* ------------------------------------------------------------
   4. Bottom row — the chart beside the transactions

   Two equal halves, both stretching to the taller of the pair so the
   row has one baseline rather than a ragged edge.
   ------------------------------------------------------------ */
#dashboard-main-grid.dash-bottom{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px;align-items:stretch;
}

.dpanel{
  display:flex;flex-direction:column;min-width:0;
  background:var(--bg-card);border:1px solid var(--d-panel-line);
  border-radius:17px;
}
.dpanel-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:21px 20px 0;flex-shrink:0;
}
.dpanel-title{
  font-size:1.1875rem;font-weight:600;letter-spacing:-.025em;
  line-height:1.2;color:var(--text);
}
.dpanel-link{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  height:31px;padding:0 13px;border-radius:999px;
  border:1px solid var(--border);background:transparent;
  font-size:.75rem;font-weight:600;letter-spacing:-.01em;color:var(--text2);
  transition:var(--transition);
}
.dpanel-link:hover{
  background:var(--text);border-color:var(--text);color:var(--bg);
}
.dpanel-link svg{width:12px;height:12px}

/* ---- recent transactions table ------------------------------ */
.dtable-card{padding:0 20px}
.dtable-card .dpanel-head{padding:21px 0 0}

.dtable{margin-top:20px;display:flex;flex-direction:column;flex:1}
.dtable-row{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.95fr) minmax(0,.9fr) minmax(0,.62fr) minmax(0,.9fr);
  align-items:center;gap:10px;
  min-height:58px;padding:8px 0;
  border-bottom:1px solid var(--d-row-line);
}
.dtable-row--head{
  min-height:34px;padding:0 0 10px;
  border-bottom:1px solid var(--d-head-line);
  font-size:.78125rem;font-weight:500;letter-spacing:-.01em;color:var(--d-th);
}
.dtable-row--head > div:last-child{text-align:right}
#recent-transactions-list{display:flex;flex-direction:column;flex:1}
#recent-transactions-list .dtable-row:last-child{border-bottom:0}

a.dtable-row{color:inherit;transition:var(--transition)}
a.dtable-row:hover{background:var(--bg-hover)}
a.dtable-row:hover .dcell-name{padding-left:6px}

.dcell-name{
  display:flex;align-items:center;gap:9px;min-width:0;
  transition:padding-left .18s ease;
}
.dcell-icon{
  width:30px;height:30px;flex:0 0 30px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:.65rem;
}
.dcell-icon.collection{background:var(--d-green);color:var(--d-ink-green)}
.dcell-icon.withdrawal{background:var(--d-peach);color:var(--d-ink-peach)}
.dcell-icon.transfer{background:var(--d-blue);color:var(--d-ink-blue)}
.dcell-text{display:flex;flex-direction:column;gap:3px;min-width:0}
.dcell-type{
  font-size:.9375rem;font-weight:500;letter-spacing:-.015em;line-height:1.2;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.dcell-ref{
  font-size:.6875rem;line-height:1.2;color:var(--text4);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dcell-date,
.dcell-time{
  font-size:.78125rem;font-weight:400;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.dcell-time{font-variant-numeric:tabular-nums}
/* Shown only once the Time column itself has been dropped */
.dcell-time-inline{display:none}
.dash-page .dcell-amount{
  text-align:right;font-size:1rem;font-weight:600;letter-spacing:-.025em;
  color:var(--text);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.dash-page .dcell-amount.amount-in{color:var(--text)}
.dash-page .dcell-amount.amount-out{color:var(--text)}

.dtag{
  display:inline-flex;align-items:center;justify-content:center;
  height:28px;padding:0 9px;border-radius:9px;
  font-size:.75rem;font-weight:500;line-height:1;white-space:nowrap;
}
.dtag--done{background:var(--d-ok-bg);color:var(--d-ok-ink)}
.dtag--progress{background:var(--d-warn-bg);color:var(--d-warn-ink)}
.dtag--failed{background:var(--d-bad-bg);color:var(--d-bad-ink)}

/* Both of these ride under the reference and each one appears only at
   the width where its own column has been dropped. */
.dcell-state,
.dcell-when{display:none}
.dcell-when{
  font-size:.6875rem;line-height:1.2;color:var(--text4);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

/* ------------------------------------------------------------
   5. Empty, error and loading states

   Both panels use the same three shapes, so a panel that is
   waiting, empty or broken never changes the page's rhythm.
   ------------------------------------------------------------ */
.dstate{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:9px;padding:38px 16px;color:var(--text4);text-align:center;
}
.dstate i{font-size:1.25rem;opacity:.5}
.dstate p{font-size:.8125rem;font-weight:600;color:var(--text2);margin:0}
.dstate span{font-size:.71875rem;color:var(--text4)}
.dstate.is-error i{color:var(--red);opacity:.8}

.dskel-row--table{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(0,.95fr) minmax(0,.9fr) minmax(0,.62fr) minmax(0,.9fr);
  gap:10px;align-items:center;min-height:58px;padding:8px 0;
  border-bottom:1px solid var(--d-row-line);
}
.sk{
  background:linear-gradient(90deg,var(--bg-input) 25%,var(--bg-hover) 37%,var(--bg-input) 63%);
  background-size:400% 100%;animation:sk-shimmer 1.4s ease infinite;border-radius:6px;
}
.sk-circle--sm{width:30px;height:30px;border-radius:50%;flex-shrink:0}
.dskel-name{display:flex;align-items:center;gap:9px;min-width:0}
.dskel-name .sk-line{flex:1 1 auto}
.sk-line{height:9px}
.sk-line.short{width:52%}
.sk-line.tag{height:22px;border-radius:8px;width:74%}
.sk-line.amount{width:70%;margin-left:auto}
@keyframes sk-shimmer{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.sk{animation:none}}

/* ------------------------------------------------------------
   6. Hidden figures

   Every money value on the page is covered by a row of stars.

   The stars are painted OVER the real text rather than replacing
   it: the text stays in the layout at visibility:hidden, so it
   still sets the width and nothing around it moves, while the star
   row sits absolutely on top, clipped to exactly that width.

   The state lives on <body>, not on the individual numbers, so
   anything rendered later — a refreshed stat, new transaction
   rows, a recalculated chart total — comes out masked the moment
   it lands. Nothing has to be re-applied. The chart paints its own
   labels to canvas, so it is redrawn instead.
   ------------------------------------------------------------ */
body.figures-hidden .num,
body.figures-hidden #withdrawable_balance,
body.figures-hidden .txn-amount{
  visibility:hidden;position:relative;
}
body.figures-hidden .num::after,
body.figures-hidden #withdrawable_balance::after,
body.figures-hidden .txn-amount::after{
  content:'********************';
  visibility:visible;
  position:absolute;inset:0;overflow:hidden;
  display:flex;align-items:center;
  color:currentColor;letter-spacing:.06em;
  pointer-events:none;
}
/* Right-aligned cells keep their stars against the right edge */
body.figures-hidden .dcell-amount::after{justify-content:flex-end}

/* The star row is clipped to the width of the value it covers, so a
   short figure — a balance of 0, an empty day — would mask down to a
   single star and read as damage rather than as a hidden number. A
   floor on the masked width keeps every covered figure legible as a
   row of stars. It only applies while masked, so nothing moves when
   the amounts are showing. */
body.figures-hidden .dash-page .stat-value .num{min-width:4.5ch}
body.figures-hidden .dash-page #withdrawable_balance{min-width:4ch}
body.figures-hidden .dash-page .dcell-amount{min-width:7ch}

/* ------------------------------------------------------------
   7. Business status states (pending / review / rejected)
   ------------------------------------------------------------ */
#business-status-container{margin-bottom:22px}
.business-status-card{
  width:100%;display:flex;align-items:flex-start;gap:20px;
  padding:30px;border-radius:var(--radius-xl);
  background:var(--bg-card);border:1px solid var(--border);
}
.status-icon-wrapper{
  width:44px;height:44px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);
}
.status-icon-wrapper i{font-size:.9375rem}
.business-status-card.pending .status-icon-wrapper{color:var(--accent)}
.business-status-card.review .status-icon-wrapper{color:var(--blue)}
.business-status-card.rejected .status-icon-wrapper{color:var(--red)}
.status-content{max-width:560px;text-align:left}
.status-badge{
  display:inline-flex;padding:3px 9px;border-radius:999px;
  font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:10px;
}
.business-status-card.pending .status-badge{background:var(--accent-light);color:var(--accent)}
.business-status-card.review .status-badge{background:var(--blue-light);color:var(--blue)}
.business-status-card.rejected .status-badge{background:var(--red-light);color:var(--red)}
.status-title{font-size:1.125rem;font-weight:600;letter-spacing:-.03em;margin:0 0 6px;line-height:1.3}
.status-message{font-size:.8125rem;color:var(--text3);line-height:1.6;margin:0 0 18px;max-width:520px}
.status-action-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 18px;border-radius:999px;
  font-weight:600;font-size:.78125rem;border:none;cursor:pointer;
  transition:var(--transition);
}
.status-action-btn i{font-size:.6875rem}
.business-status-card.pending .status-action-btn{background:var(--text);color:var(--bg)}
.business-status-card.rejected .status-action-btn{background:var(--red);color:#fff}
.status-action-btn:hover{opacity:.88}

/* ============================================================
   8. Responsive

   Desktop is the two-row layout above. Below it the page degrades
   in four steps: the chart drops under the cards, the rows stack,
   the table sheds columns, the cards tighten.
   ============================================================ */

/* --- 1280px: four across becomes 2x2, and the row below stacks ---
   A five-column table and a plot cannot share a row much under this:
   the table would be squeezed to the point of dropping columns while
   the window is still plainly a desktop. */
@media(max-width:1280px){
  #dashboard-stats.dash-top{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:16px 18px;
  }
  .dstat{min-height:145px}

  #dashboard-main-grid.dash-bottom{grid-template-columns:minmax(0,1fr)}
  .dchart-body{min-height:250px}
}

/* --- The table sheds columns on its own width ------------------
   Now that it holds half the row rather than two thirds, the window
   width no longer says anything useful about how much room the table
   actually has: at 1300px wide it gets ~480px, at 1000px stacked it
   gets ~700px. So the thresholds below are container queries — they
   measure the panel, not the viewport, and a dropped column always
   reappears somewhere the row can still carry it.
   -------------------------------------------------------------- */
.dtable-card{container-type:inline-size}

/* A container query measures the panel's CONTENT box, so these
   thresholds sit inside its 20px side padding — 520 here is a panel
   about 560 wide. Below that the five columns start crowding the
   amount, which is the one that must never wrap. */

/* Time folds into the Date cell */
@container (max-width:520px){
  .dtable-row,
  .dskel-row--table{
    grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.9fr);
  }
  .dtable-row > *:nth-child(4),
  .dskel-row--table > *:nth-child(4){display:none}
  .dtable-row--head > div:nth-child(4){display:none}

  /* The date cell becomes two stacked lines rather than losing the clock */
  .dcell-date{
    display:flex;flex-direction:column;gap:3px;
    white-space:nowrap;line-height:1.2;
  }
  .dcell-time-inline{
    display:block;font-size:.6875rem;color:var(--text4);
    font-variant-numeric:tabular-nums;
  }
}

/* Only what identifies the payment, and the amount */
@container (max-width:400px){
  .dtable-row,
  .dskel-row--table{grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr)}
  .dtable-row > *:nth-child(2),
  .dtable-row > *:nth-child(3),
  .dskel-row--table > *:nth-child(2),
  .dskel-row--table > *:nth-child(3){display:none}
  .dtable-row--head > div:nth-child(2),
  .dtable-row--head > div:nth-child(3){display:none}
  a.dtable-row:hover .dcell-name{padding-left:0}

  .dcell-when{display:block;margin-top:4px}
  .dcell-state{
    display:block;margin-top:3px;
    font-size:.6875rem;font-weight:500;line-height:1.2;
  }
  .dcell-state.done{color:var(--d-ok-ink)}
  .dcell-state.progress{color:var(--d-warn-ink)}
  .dcell-state.failed{color:var(--d-bad-ink)}
}

/* --- 768px: phone ---------------------------------------------
   The cards come down to a tighter 2x2 and both panels lose their
   frame, so the page reads as one column of content rather than a
   stack of boxes. */
@media(max-width:768px){
  .dash-hello{gap:11px;margin-bottom:16px}
  .dash-hello-icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px}
  .dash-hello-icon svg{width:18px;height:18px}
  .dash-hello h1{font-size:1.125rem}
  .dash-hello p{margin-top:3px;font-size:.75rem}

  .dash-mode-row{display:flex;justify-content:flex-end;margin-bottom:12px}

  #dashboard-stats.dash-top{gap:12px;margin-bottom:16px}
  .dstat{min-height:132px;padding:13px 13px 12px;border-radius:15px}
  .dstat-label{font-size:.8125rem;font-weight:500;padding-top:6px}
  .dstat-btn{width:32px;height:32px;flex:0 0 32px;border-radius:11px}
  .dstat-btn svg{width:15px;height:15px}
  .dash-page .stat-eye{width:26px;height:26px;margin-top:3px;font-size:.6875rem}
  .dash-page .dstat .stat-value{font-size:1.1875rem;margin-top:8px}
  .dstat-figure{gap:8px;margin-top:8px}
  .dstat-flag{width:22px;height:22px;flex:0 0 22px}
  .dash-page .dstat .stat-value h3{margin-top:9px;font-size:.6875rem}
  .dstat-foot{padding-top:10px;flex-direction:column;align-items:flex-start;gap:8px}
  .dash-page .dstat .stat-pill{font-size:.6875rem}
  .dstat-cta{height:27px;padding:0 12px;font-size:.71875rem}

  .dchart{padding:16px 14px 14px;border-radius:16px}
  .dchart-title{font-size:1.1875rem}
  .dchart-meta{margin-top:9px;gap:8px}
  .dchart-sub{height:22px;font-size:.6875rem}
  .dchart-body{min-height:212px;margin-top:14px}
  .dchart-range-btn{height:33px;padding:0 11px;gap:7px;font-size:.75rem}
  .dchart-range-btn .ico{width:14px;height:14px}
  .dchart-range-menu{min-width:168px}
  .dchart-range-item{height:34px;font-size:.78125rem}

  #dashboard-main-grid.dash-bottom{gap:16px}

  .dpanel{background:none;border:0;border-radius:0}
  .dpanel-head{padding:0}
  .dpanel-title{font-size:1.0625rem}
  .dpanel-link{height:28px;padding:0 11px;font-size:.71875rem}
  .dtable-card{padding:0}
  .dtable-card .dpanel-head{padding:0}

  .dtable{margin-top:12px}
  .dtable-row{min-height:52px}
  .dcell-type{font-size:.875rem}
  .dash-page .dcell-amount{font-size:.875rem}
  .dtag{height:24px;padding:0 7px;font-size:.6875rem}

  .business-status-card{flex-direction:column;gap:16px;padding:22px 18px}
}

/* --- 520px: smallest phones ------------------------------------ */
@media(max-width:520px){
  #dashboard-stats.dash-top{gap:10px}
  .dstat{min-height:124px;padding:12px 12px 11px}
  .dash-page .dstat .stat-value{font-size:1.0625rem}
  .dstat-label{font-size:.78125rem}
  .dstat-flag{width:20px;height:20px;flex:0 0 20px}
}