/* رسوم لوحة التحكم v29 — مخطط اتجاهي مرن ومقارنة فروع عمودية قابلة للقراءة. */
/* The chart includes its period totals: the legacy 170px chart height must not
   clip either the SVG or the summary. Only the plot scrolls horizontally. */
#salesChart.dashboard-chart{display:block!important;align-items:initial!important;width:100%;height:auto!important;min-height:0!important;padding:8px 0 0;overflow:visible}
.dash-trend-shell{width:100%;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--brand) 45%,transparent) transparent}
/* Override the global responsive SVG cap so dates and amounts remain readable.
   The renderer supplies a wider plot for periods containing more data points. */
body.ui-v19 #page-dashboard .dash-trend-svg{display:block;width:max(100%,var(--dash-trend-width,760px));max-width:none;height:258px;overflow:visible}
.dash-trend-shell:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.dash-trend-grid{stroke:color-mix(in srgb,var(--ink) 11%,transparent);stroke-width:1;stroke-dasharray:4 7}
.dash-trend-area{fill:url(#dashTrendArea)}
.dash-trend-line{fill:none;stroke:var(--brand);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.dash-trend-point circle{fill:var(--surface);stroke:var(--brand);stroke-width:4;transition:transform .16s ease;transform-box:fill-box;transform-origin:center}
.dash-trend-point:hover circle{transform:scale(1.25)}
.dash-trend-value{fill:var(--ink);font-size:12px;font-weight:900;text-anchor:middle;paint-order:stroke;stroke:var(--surface);stroke-width:5px;stroke-linejoin:round}
.dash-trend-label{fill:var(--ink-soft);font-size:11px;font-weight:750;text-anchor:middle}
.dash-trend-summary{display:flex;flex-wrap:wrap;gap:7px;margin-top:4px}
.dash-trend-summary>span{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 10px;min-width:0;min-height:44px;flex:1 1 145px;border:1px solid var(--line);border-radius:11px;background:color-mix(in srgb,var(--surface) 92%,var(--brand-tint));padding:7px 10px}
.dash-trend-summary small{color:var(--ink-faint);font-size:calc(10/14*var(--app-font-size));font-weight:750}.dash-trend-summary b{color:var(--brand-dark);font-size:calc(10.5/14*var(--app-font-size));white-space:nowrap}

.dash-branch-performance{min-height:170px}
.dash-branch-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:-2px 0 14px;padding:10px 12px;border:1px solid var(--line);border-radius:13px;background:color-mix(in srgb,var(--surface) 90%,var(--brand-tint))}
.dash-branch-legend{display:flex;align-items:center;flex-wrap:wrap;gap:8px 15px;color:var(--ink-soft);font-size:calc(10.5/14*var(--app-font-size));font-weight:750}
.dash-branch-legend span{display:flex;align-items:center;gap:6px}.dash-branch-legend i,.dash-branch-column-card footer i{display:inline-block;width:12px;height:12px;border-radius:4px;background:var(--brand);box-shadow:0 2px 7px color-mix(in srgb,var(--brand) 24%,transparent)}
.dash-branch-legend i.profit,.dash-branch-column-card footer i.profit{background:#0f8f80;box-shadow:0 2px 7px rgba(15,143,128,.22)}
.dash-branch-legend i.negative,.dash-branch-column-card footer i.negative{background:#c24152;box-shadow:0 2px 7px rgba(194,65,82,.22)}
.dash-branch-overview{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dash-branch-overview>span{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px;min-width:0;max-width:100%;min-height:34px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink-faint);padding:5px 8px;font-size:calc(9.5/14*var(--app-font-size));font-weight:700}
.dash-branch-overview b{color:var(--ink);font-size:calc(10.5/14*var(--app-font-size));white-space:nowrap}.dash-branch-overview .negative b{color:#b42336}
.dash-branch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.dash-branch-column-card{container-type:inline-size;container-name:dash-branch-card;display:grid;grid-template-rows:auto 150px auto;gap:10px;min-width:0;border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:13px;outline:none;box-shadow:0 8px 22px rgba(15,35,70,.055);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.dash-branch-column-card:hover,.dash-branch-column-card:focus-visible{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 45%,var(--line));box-shadow:0 12px 28px color-mix(in srgb,var(--brand) 12%,transparent)}
.dash-branch-column-card>header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;min-width:0}.dash-branch-column-card>header>div{min-width:0}.dash-branch-column-card>header strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:calc(11.5/14*var(--app-font-size));font-weight:900}.dash-branch-column-card>header small{display:block;margin-top:3px;color:var(--ink-faint);font-size:calc(9.5/14*var(--app-font-size))}
.dash-branch-margin{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;white-space:nowrap;min-height:34px;border:1px solid rgba(15,143,128,.24);border-radius:9px;background:rgba(15,143,128,.09);color:#087065;padding:4px 8px;font-size:calc(10/14*var(--app-font-size));font-weight:900}.dash-branch-margin.negative{border-color:rgba(194,65,82,.22);background:rgba(194,65,82,.08);color:#b42336}
.dash-branch-column-plot{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:22px;min-height:150px;padding:10px 16px 24px;border-radius:12px;background:color-mix(in srgb,var(--paper) 82%,transparent);overflow:hidden}
.dash-branch-baseline{position:absolute;inset-inline:12px;bottom:23px;height:1px;background:color-mix(in srgb,var(--ink) 18%,transparent)}
.dash-branch-column-wrap{position:relative;z-index:1;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;width:50px;height:116px;gap:5px}.dash-branch-column-wrap>span{position:absolute;top:122px;color:var(--ink-faint);font-size:9px;font-weight:750;white-space:nowrap}
.dash-branch-column{display:block;width:38px;height:max(6px,var(--bar-height,0%));border-radius:10px 10px 4px 4px;background:var(--brand);box-shadow:0 7px 16px color-mix(in srgb,var(--brand) 20%,transparent);transform-origin:bottom;animation:dashColumnRise .48s ease both}.dash-branch-column.profit{background:#0f8f80;box-shadow:0 7px 16px rgba(15,143,128,.18)}.dash-branch-column.profit.negative{background:#c24152;box-shadow:0 7px 16px rgba(194,65,82,.17)}
.dash-branch-column-card>footer{display:grid;grid-template-columns:1fr 1fr;gap:7px}.dash-branch-column-card>footer>span{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:6px;min-width:0;border:1px solid var(--line);border-radius:10px;padding:7px 8px}.dash-branch-column-card>footer i{grid-row:1/3}.dash-branch-column-card>footer small{color:var(--ink-faint);font-size:9px;font-weight:700}.dash-branch-column-card>footer b{overflow:hidden;text-overflow:ellipsis;color:var(--ink);font-size:10px;white-space:nowrap}.dash-branch-column-card>footer b.negative{color:#b42336}
@keyframes dashColumnRise{from{transform:scaleY(.05);opacity:.3}to{transform:scaleY(1);opacity:1}}
/* A tablet may show several narrow branch cards. Stack their financial figures
   by available card width, not only by the width of the whole screen. */
@container dash-branch-card (max-width:280px){.dash-branch-column-card>footer{grid-template-columns:minmax(0,1fr)}}
/* Financial values must remain whole when long names use the next line. */
#page-dashboard .dash-list-row,
#page-dashboard #dashPaymentMethods>div{flex-wrap:wrap;gap:6px 12px}
#page-dashboard .dash-list-row>span:first-child,
#page-dashboard #dashPaymentMethods>div>span:first-child{flex:1 1 160px;min-width:0}
#page-dashboard .dash-list-row>.num,
#page-dashboard #dashPaymentMethods>div>.num{flex:0 0 auto;max-width:100%;white-space:nowrap;direction:ltr}
#page-dashboard .dashboard-title-block>div:last-child{min-width:0}
@media(max-width:980px){
  /* The compact layer pads both the widget wrapper and its card. Keep a single
     inset on small screens so the data receives the available working width. */
  body.ui-v19 #page-dashboard .dashboard-widget{padding:0!important}
  body.ui-v19 #page-dashboard .dashboard-widget-head{flex-wrap:wrap;align-items:flex-start}
  body.ui-v19 #page-dashboard .dashboard-widget-title{flex:1 1 180px}
  body.ui-v19 #page-dashboard .dashboard-widget-sub{max-width:100%;white-space:normal}
  body.ui-v19 #page-dashboard .dashboard-actions{min-width:0}
  body.ui-v19 #page-dashboard .dashboard-actions select{min-width:0;max-width:100%}
  body.ui-v19 #page-dashboard .dashboard-updated{white-space:normal}
}
@media(max-width:760px){
  body.ui-v19 #page-dashboard .dash-period-bar input[type="date"]{min-width:0;width:100%;min-height:44px!important;max-width:100%;font-size:max(16px,var(--app-font-size,14px))!important;box-sizing:border-box}
  body.ui-v19 #page-dashboard .dash-period-toggle{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,6em),1fr));min-width:0;overflow:visible}
  body.ui-v19 #page-dashboard .dash-period-btn{min-width:0;min-height:44px;white-space:normal;padding-inline:6px}
  .dash-branch-chart-toolbar{align-items:stretch}.dash-branch-legend,.dash-branch-overview{width:100%;justify-content:center}.dash-branch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-branch-column-card{grid-template-rows:auto 132px auto}.dash-branch-column-plot{min-height:132px}.dash-branch-column-wrap{height:98px}.dash-branch-column-wrap>span{top:104px}
}
@media(max-width:520px){.dash-branch-grid{grid-template-columns:1fr}.dash-branch-overview>span{flex:1 1 120px;justify-content:center}.dash-trend-summary>span{flex-basis:120px}}
@media(max-width:380px){
  body.ui-v19 #page-dashboard .dash-period-bar{grid-template-columns:minmax(0,1fr)!important}
  body.ui-v19 #page-dashboard .dash-period-toggle{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-branch-column-card>footer{grid-template-columns:minmax(0,1fr)}
}
@media(prefers-reduced-motion:reduce){.dash-trend-point circle,.dash-branch-column-card{transition:none}.dash-branch-column{animation:none}}