/* ==========================================================================
   Dashboard designs: the shared pieces
   --------------------------------------------------------------------------
   The "Design" button every dashboard design shows, and the picker pop-up
   (App.openDashDesignPicker). Each design keeps its own look in its own file
   (dash-<key>.css), scoped to .dashx-<key>, which renderDashboard puts around
   the page. Primary text is true black; greys no lighter than #475569.
   ========================================================================== */

.dshp-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 36px; min-width: 36px; padding: 0 12px; border-radius: 12px; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 700; color: #0f172a;
    background: #fff; border: 1px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
    transition: border-color .15s ease, background .15s ease;
    white-space: nowrap; flex-shrink: 0;
}
.dshp-btn i { font-size: .95rem; color: #047857; }
.dshp-btn:hover { border-color: #94a3b8; }
.dshp-btn:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
/* On a dark surface (a design's header band). */
.dshp-btn.is-on-dark { color: #fff; background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .25); box-shadow: none; }
.dshp-btn.is-on-dark i { color: #fff; }
.dshp-btn.is-on-dark:hover { background: rgba(255, 255, 255, .2); }

/* Classic keeps its identity strip; the button sits before the plan pill. */
.dsb-strip-side { display: flex; align-items: center; gap: 8px; }
@media (max-width: 520px) {
    .dshp-btn-classic span { display: none; }
    .dshp-btn-classic { padding: 0; width: 36px; }
}

/* A redraw of the design already on screen (period, scope, Sales/Orders)
   does not replay entrance motion. */
.dashx.is-soft, .dashx.is-soft * { animation: none !important; }

/* Setup steps are reachable by keyboard (role=button, tabindex=0). */
.dsb-setup-step:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* ---- The picker ------------------------------------------------------------ */

.dshp-lead { margin: 0 0 14px; font-size: .84rem; font-weight: 500; color: #334155; line-height: 1.5; }
.dshp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.dshp-card {
    display: flex; flex-direction: column; gap: 10px; padding: 10px; text-align: left; cursor: pointer;
    font: inherit; background: #fff; border: 1.5px solid #e2e8f0; border-radius: 18px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.dshp-card:hover { border-color: #94a3b8; box-shadow: 0 10px 24px -18px rgba(15, 23, 42, .5); }
.dshp-card:active { transform: scale(.99); }
.dshp-card:focus-visible { outline: 2px solid #059669; outline-offset: 2px; }
.dshp-card.is-on { border-color: #059669; box-shadow: 0 0 0 3px rgba(5, 150, 105, .14); }
.dshp-thumb {
    position: relative; display: block; height: 128px; overflow: hidden; border-radius: 12px;
    background: #f1f5f9; border: 1px solid #e8edf3;
}
.dshp-copy { display: flex; flex-direction: column; gap: 3px; padding: 0 4px 4px; }
.dshp-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: .95rem; font-weight: 700; color: #000; }
.dshp-name em, .dshp-name i {
    font-style: normal; font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 7px; border-radius: 999px;
}
.dshp-name em { color: #065f46; background: #d1fae5; }
.dshp-name i { color: #334155; background: #f1f5f9; }
.dshp-blurb { font-size: .76rem; font-weight: 500; color: #475569; line-height: 1.45; }

/* Classic thumbnail: the dark card, a shortcut row and three tiles. */
.dshp-t { position: absolute; inset: 0; display: block; padding: 10px; }
.dshp-t-classic b { display: block; width: 62%; height: 52px; border-radius: 9px; background: linear-gradient(135deg, #065f46, #047857 55%, #059669); }
.dshp-t-classic i { display: inline-block; width: 30%; height: 28px; margin: 8px 3% 0 0; border-radius: 7px; background: #fff; border: 1px solid #e2e8f0; }
.dshp-t-classic u { display: inline-block; width: 18%; height: 14px; margin: 8px 3% 0 0; border-radius: 6px; background: #fff; border: 1px solid #e2e8f0; }

@media (max-width: 520px) {
    .dshp-grid { grid-template-columns: 1fr; }
    .dshp-thumb { height: 112px; }
}
@media (prefers-reduced-motion: reduce) {
    .dshp-card, .dshp-btn { transition: none; }
}

/* ---- Classic, tidied ---------------------------------------------------------- */

/* The four tiles cut amounts off beside the side column; two a row there. */
@media (min-width: 1100px) {
    .dashx-classic .dsz-tiles,
    .dashx-classic .dsz-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dashx-classic .dsz-tile-val { font-size: clamp(1rem, 2.2vw, 1.16rem); }

/* Top sellers and Running low (side column). */
.dcl-rank { display: grid; gap: 12px; }
.dcl-rank-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.dcl-rank-n { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: .7rem; font-weight: 700; color: #065f46; background: #ecfdf5; }
.dcl-rank-body { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.dcl-rank-name { font-size: .82rem; font-weight: 600; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcl-rank-bar { display: block; height: 5px; border-radius: 999px; background: #f1f5f9; overflow: hidden; }
.dcl-rank-bar i { display: block; height: 100%; border-radius: 999px; }
.dcl-rank-val { display: flex; flex-direction: column; align-items: flex-end; }
.dcl-rank-val b { font-size: .84rem; font-weight: 700; color: #000; font-variant-numeric: tabular-nums; }
.dcl-rank-val small { font-size: .68rem; font-weight: 600; color: #475569; }
.dcl-low { display: grid; }
.dcl-low-row {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0;
    font: inherit; text-align: left; cursor: pointer; background: none; border: 0; border-top: 1px solid #f1f4f8;
}
.dcl-low-row:first-child { border-top: 0; }
.dcl-low-name { font-size: .82rem; font-weight: 600; color: #000; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dcl-low-qty { flex-shrink: 0; font-size: .72rem; font-weight: 700; color: #92400e; background: #fef3c7; padding: 3px 9px; border-radius: 999px; }
.dcl-low-qty.is-out { color: #991b1b; background: #fee2e2; }

/* Money flow chart style switch (bars | lines), shared by every design */
.dashx .dash-kind { display: inline-flex; flex: none; align-self: flex-start; gap: 2px; padding: 3px; border-radius: 10px; background: #f1f5f9; }
.dashx .dash-kind-btn {
    display: grid; place-items: center; width: 32px; height: 28px; padding: 0; border: 0; border-radius: 8px;
    background: transparent; color: #64748b; font-size: 14px; cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
.dashx .dash-kind-btn.is-on { background: #fff; color: #047857; box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.dashx .dash-kind-btn:not(.is-on):hover { color: #000; }
.dashx .dash-kind-btn:focus-visible { outline: 2px solid #059669; outline-offset: 1px; }
/* bar mode: square legend swatches instead of line ticks */
.dashx .is-bars .dbb-legend i,
.dashx .is-bars .tdc-legend i { width: 10px; height: 10px; border-radius: 3px; }

/* ==========================================================================
   Shared by every design (dash-options.js): the green card's Options button,
   the flag corner and the Options pop-up.
   ========================================================================== */

/* Options: a glass button at the right of the card's name row. */
.dbx-opt-btn {
    position: relative; z-index: 1; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    width: 40px; height: 40px; padding: 0; border-radius: 999px; cursor: pointer;
    background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22);
    color: #fff; font: inherit; font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
    transition: background .15s ease;
}
.dbx-opt-btn:hover { background: rgba(255, 255, 255, .18); }
.dbx-opt-btn:active { transform: scale(.97); }
.dbx-opt-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.dbx-opt-btn::after { content: ""; position: absolute; inset: -4px; }
.dbx-opt-btn i { font-size: 15px; }
.dbx-opt-lbl { display: none; }
.dbx-opt-dot {
    position: absolute; top: -2px; right: -2px; width: 11px; height: 11px; border-radius: 50%;
    background: #fbbf24; box-shadow: 0 0 0 2px #065f46;
}

/* Flag corner: curved stripes of the business country's flag filling the
   card's top-right corner out to its edges. It clips itself to the card's
   corner radius (--dbx-flag-r), so that corner always matches the others. */
.dbx-flag {
    position: absolute; top: 0; right: 0; z-index: 0; pointer-events: none;
    width: var(--dbx-flag-w, 112px); height: var(--dbx-flag-w, 112px);
    -webkit-clip-path: inset(0 round 0 var(--dbx-flag-r, 20px) 0 0);
    clip-path: inset(0 round 0 var(--dbx-flag-r, 20px) 0 0);
}

/* ---- Options panel (pop-up from the band's Options button) ----------------- */

.dbbp { display: flex; flex-direction: column; gap: 14px; }
.dbbp-greet { display: flex; align-items: center; gap: 12px; }
.dbbp-greet > i {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px; font-size: 18px;
    color: #b45309; background: #fef3c7;
}
.dbbp-greet > i.is-moon { color: #4338ca; background: #e0e7ff; }
.dbbp-greet b { display: block; font-size: 16px; font-weight: 700; color: #000; }
.dbbp-greet span span { display: block; margin-top: 2px; font-size: 13px; font-weight: 500; color: #334155; }
.dbbp-lbl { margin-bottom: -6px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #475569; }
.dbbp-controls .dsb-strip-controls { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.dbbp-controls .dsb-scope-toggle {
    display: flex; width: 100%; height: 42px; margin: 0; padding: 3px; gap: 2px;
    background: #eef2ef; border: 0; border-radius: 999px;
}
.dbbp-controls .dsb-scope-toggle button {
    flex: 1 1 0; height: 36px; padding: 0 14px; gap: 6px;
    border: 0; border-radius: 999px; background: transparent; box-shadow: none;
    font: inherit; font-size: 13px; font-weight: 600; color: #334155;
}
.dbbp-controls .dsb-scope-toggle button:hover { color: #000; }
.dbbp-controls .dsb-scope-toggle button.active { background: #fff; color: #000; box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.dbbp-controls .dsb-strip-branch { margin: 0; min-width: 0; }
.dbbp-controls .dsb-strip-branch .branch-select {
    width: 100%; max-width: 100%; height: 44px; min-height: 44px;
    border: 1px solid #e2e8f0; border-radius: 12px; background-color: #fff;
    font-size: 13.5px; font-weight: 600; color: #000;
}
.dbbp-list { display: flex; flex-direction: column; border: 1px solid #e8edf2; border-radius: 16px; overflow: hidden; }
.dbbp-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px;
    border: 0; border-top: 1px solid #eef2f6; background: #fff; cursor: pointer;
    font: inherit; text-align: left; color: #000;
}
.dbbp-row:first-child { border-top: 0; }
.dbbp-row:hover { background: #f8fafc; }
.dbbp-ico {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 11px; font-size: 16px;
}
.dbbp-ico.is-amber { color: #b45309; background: #fef3c7; }
.dbbp-ico.is-gold { color: #78350f; background: #fde68a; }
.dbbp-ico.is-green { color: #047857; background: #d1fae5; }
.dbbp-ico.is-blue { color: #1d4ed8; background: #dbeafe; }
.dbbp-copy { flex: 1 1 auto; min-width: 0; }
.dbbp-copy b { display: block; font-size: 14.5px; font-weight: 700; color: #000; }
.dbbp-copy span { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 500; color: #475569; }
.dbbp-chev { flex-shrink: 0; font-size: 13px; color: #64748b; }

/* ---- Classic: the card leads (Oct 2026) ------------------------------------
   Its first row is the business (tap to switch) and Options; the flag fills
   the top-right corner; alerts and shortcuts follow the card. */
.dsz-hero { --dbx-flag-w: 98px; --dbx-flag-r: 24px; }
.dsz-hero > :not(.dbx-flag):not(.dsz-card-glow) { position: relative; z-index: 1; }
.dsz-hero-id {
    display: flex; align-items: center; gap: 10px; min-width: 0;
    margin-bottom: 14px; padding-right: 40px; cursor: default;
}
.dsz-hero-biz {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px;
    margin: -4px; padding: 4px; border: 0; border-radius: 14px; cursor: pointer;
    background: none; color: #fff; font: inherit; text-align: left;
}
.dsz-hero-biz:hover { background: rgba(255, 255, 255, .08); }
.dsz-hero-logo {
    flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    font-size: 17px; font-weight: 700; color: #065f46;
}
.dsz-hero-logo img { width: 100%; height: 100%; object-fit: cover; }
.dsz-hero-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 16px; font-weight: 700; }
.dsz-hero-name span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dsz-hero-name i { flex-shrink: 0; font-size: 12px; opacity: .8; }
.dsz-hero-head { padding-right: 26px; }
.dsb-main-column > .dsz-hero-wrap > .dsz-alerts,
.dsb-main-column > .dsz-hero-wrap > .dsz-alerts-strip { margin-top: 0; }
@media (min-width: 640px) {
    .dsz-hero { --dbx-flag-w: 116px; }
    .dsz-hero-id { padding-right: 48px; }
    .dsz-hero-head { padding-right: 38px; }
    .dsz-hero .dbx-opt-btn { width: auto; padding: 0 15px; }
    .dsz-hero .dbx-opt-lbl { display: inline; }
}
@media (max-width: 400px) {
    .dsz-hero { --dbx-flag-r: 20px; }
}
/* The alerts ticker and shortcuts now sit inside the main column: never let
   their content widen the column. */
.dsb-dashboard-grid > .dsb-main-column,
.dsb-dashboard-grid > .dsb-side-column,
.dsb-main-column > .dsz-hero-wrap,
.dsz-hero-wrap > * { min-width: 0; max-width: 100%; }
.dsz-hero-wrap > .dsz-alerts,
.dsz-hero-wrap > .db2-quick { width: 100%; margin: 12px 0 0; }

/* ==========================================================================
   Glass dashboard (Oct 2026) — every design.
   A soft wash of colour sits behind the dashboard; white cards are frosted
   glass over it, and the green cards get a glossy sheen, a light rim and a
   touch of translucency. Text stays true black on the white glass.
   ========================================================================== */
.dashx { position: relative; isolation: isolate; }
/* The colour wash behind the dashboard is the app-wide one in glass.css. */

/* White cards: frosted glass. */
.dashx.dashx-brand .dbb-card,
.dashx.dashx-brand .dbb-dock,
.dashx.dashx-counter .tdc-card,
.dashx.dashx-classic .card.dsb-widget,
.dashx.dashx-classic .dsz-tile,
.dashx.dashx-classic .db2-quick,
.dashx.dashx-classic .db2-today,
.dashx.dashx-classic .dsz-streams {
    background: rgba(255, 255, 255, .68);
    border: 1px solid rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(18px) saturate(170%);
    backdrop-filter: blur(18px) saturate(170%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(15, 23, 42, .04), 0 14px 32px -20px rgba(15, 23, 42, .28);
}
/* The shortcut dock floats over the green band's edge: a little more white so the labels stay crisp. */
.dashx.dashx-brand .dbb-dock { background: rgba(255, 255, 255, .80); }

/* Green cards: glossy green glass. */
.dashx.dashx-brand .dbb-band,
.dashx.dashx-counter .tdc-today {
    background: linear-gradient(135deg, rgba(6, 95, 70, .93) 0%, rgba(4, 78, 59, .90) 55%, rgba(5, 104, 76, .92) 100%);
    border: 1px solid rgba(255, 255, 255, .20);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .30), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 20px 44px -24px rgba(4, 78, 59, .6);
}
.dashx.dashx-classic .dsz-hero { border: 1px solid rgba(255, 255, 255, .22); }
.dashx.dashx-brand .dbb-band::after,
.dashx.dashx-counter .tdc-today::after,
.dashx.dashx-classic .dsz-hero::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, .04) 34%, transparent 58%),
        radial-gradient(110% 70% at 0% 0%, rgba(255, 255, 255, .14), transparent 55%);
}
.dashx.dashx-classic .dsz-hero::after { z-index: 0; }

/* ==========================================================================
   Green cards, Oct 2026 refresh — Brand banner (.dbb-band) and Today first
   (.tdc-today). Classic keeps its ATM card.
   Richer green glass: an emerald glow at the top left and a teal one at the
   bottom right over the deep green, a light rim and a glossy top sheen.
   Light stripes: fine pinstripes on the card's diagonal that fade out towards
   the bottom left, and two soft light bands crossing the right side.
   Text stays white; nothing here sits above the content or the flag.
   ========================================================================== */
.dashx.dashx-brand .dbb-band,
.dashx.dashx-counter .tdc-today {
    background:
        radial-gradient(120% 85% at 0% 0%, rgba(52, 211, 153, .26), transparent 55%),
        radial-gradient(95% 75% at 100% 100%, rgba(20, 184, 166, .24), transparent 60%),
        linear-gradient(135deg, rgba(10, 130, 94, .95) 0%, rgba(8, 110, 81, .93) 52%, rgba(10, 124, 95, .95) 100%);
    border: 1px solid rgba(255, 255, 255, .24);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .38),
        inset 0 0 0 1px rgba(255, 255, 255, .05),
        inset 0 -14px 28px -22px rgba(0, 0, 0, .35),
        0 2px 6px -2px rgba(4, 78, 59, .22),
        0 24px 46px -26px rgba(4, 78, 59, .62);
}
/* Fine light pinstripes, strongest at the top right (display: dash-brand.css
   hid the band's old facet layer, which this replaces). */
.dashx.dashx-brand .dbb-band::before,
.dashx.dashx-counter .tdc-today::before {
    display: block; content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background: repeating-linear-gradient(112deg, rgba(255, 255, 255, .12) 0 1px, transparent 1px 10px);
    -webkit-mask-image: radial-gradient(150% 120% at 100% 0%, #000 0%, rgba(0, 0, 0, .6) 48%, transparent 88%);
    mask-image: radial-gradient(150% 120% at 100% 0%, #000 0%, rgba(0, 0, 0, .6) 48%, transparent 88%);
}
/* Glossy sheen and two soft light bands on the same diagonal. */
.dashx.dashx-brand .dbb-band::after,
.dashx.dashx-counter .tdc-today::after {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
    background:
        radial-gradient(150% 62% at 28% -22%, rgba(255, 255, 255, .20), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, transparent 30%),
        linear-gradient(112deg, transparent 0 54%, rgba(255, 255, 255, .085) 54% 64%, transparent 64% 68%, rgba(255, 255, 255, .055) 68% 73%, transparent 73%);
}
/* Glass panels on the green read a touch clearer against the stripes. */
.dashx.dashx-brand .dbb-band :is(.dbb-glass, .dsz-delta),
.dashx.dashx-counter .tdc-today :is(.tdc-count, .tdc-mcell) {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}