/* ===== لوحة المبيعات ===== */
.sd { display: flex; flex-direction: column; gap: 16px; }
.sd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; box-shadow: var(--shadow); }
.sd-bar__sp { flex: 1; }
.sd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sd-chip { border: 1.5px solid var(--line); background: #fff; border-radius: 999px; padding: .35rem .85rem; font-weight: 800; font-size: .82rem; color: var(--ink); transition: background .18s, border-color .18s, color .18s; }
.sd-chip:hover { border-color: var(--orange); }
.sd-chip.is-on { background: var(--dark); border-color: var(--dark); color: #fff; }
.sd-chip:focus-visible, .sd-table--click tr:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.sd-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.sd-range[hidden] { display: none; }
.sd-range label { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: .82rem; }
.sd-range input { border: 1.5px solid var(--line); border-radius: 10px; padding: .35rem .6rem; font-family: inherit; }
.sd-range-l { margin: -6px 2px 0; color: var(--muted); font-size: .82rem; }
.sd-range-l b { color: var(--ink); }

.sd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sd-kpi { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); border-top: 4px solid var(--line); min-width: 0; }
.sd-kpi > span { display: block; color: var(--muted); font-weight: 800; font-size: .8rem; }
.sd-kpi > b { display: block; margin-top: 4px; font-size: 1.45rem; font-weight: 900; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-kpi > b small { font-size: .7rem; color: var(--muted); font-weight: 800; }
.sd-kpi__s { margin-top: 4px; color: var(--muted); font-size: .76rem; font-weight: 700; line-height: 1.6; }
.sd-kpi.is-main { border-top-color: var(--orange); background: linear-gradient(180deg, #fff8ee, #fff 70%); }
.sd-kpi.is-good { border-top-color: var(--green); }
.sd-kpi.is-warn { border-top-color: var(--yellow); }
.sd-kpi.is-bad { border-top-color: var(--red); }
.sd-delta { font-weight: 900; }
.sd-delta.is-up { color: var(--green); }
.sd-delta.is-down { color: var(--red); }
.sd-delta small { color: var(--muted); font-weight: 700; }
.sd-note { background: #fff8e6; border: 1px solid #fde68a; color: #92400e; border-radius: 10px; padding: 8px 12px; font-weight: 700; font-size: .84rem; }
.sd-kpi.is-click { cursor: pointer; transition: transform .18s, box-shadow .18s, border-color .18s; }
.sd-kpi.is-click:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(24,32,54,.13); }
.sd-kpi.is-click:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

/* the detail dialog behind every card (sales-detail.js) */
#modal.sdd .modal__card { width: min(980px, 100%); }
.sdd .modal__h h3 small.sdd-range { color: var(--muted); font-size: .78rem; font-weight: 700; margin-inline-start: 6px; }
.sdd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.sdd-stat { border: 1px solid var(--line); border-top: 3px solid var(--line); border-radius: 12px; padding: 8px 12px; background: #fff; }
.sdd-stat > span { display: block; color: var(--muted); font-size: .76rem; font-weight: 800; }
.sdd-stat > b { font-size: 1.1rem; font-weight: 900; }
.sdd-stat.is-main { border-top-color: var(--orange); } .sdd-stat.is-good { border-top-color: var(--green); }
.sdd-stat.is-bad { border-top-color: var(--red); } .sdd-stat.is-warn { border-top-color: var(--yellow); }
.sdd-h { margin: 14px 0 8px; font-size: .95rem; font-weight: 900; }
.sdd-h small { color: var(--muted); font-weight: 700; font-size: .76rem; margin-inline-start: 6px; }
.sdd-miss { color: #92400e; background: #fff8e6; border-radius: 6px; padding: 1px 6px; font-weight: 700; }
.sdd-table tbody tr[data-sdd-open] { cursor: pointer; }
.sdd-table tbody tr[data-sdd-open]:hover { background: #fff8ee; }
.sdd-c { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; background: #fff; transition: border-color .18s; }
.sdd-c[open] { border-color: var(--orange); }
.sdd-c.is-cancel { border-inline-start: 4px solid var(--red); }
.sdd-c > summary { display: flex; align-items: center; gap: 12px; padding: 10px 14px; cursor: pointer; list-style: none; }
.sdd-c > summary::-webkit-details-marker { display: none; }
.sdd-c > summary:hover { background: #fffaf3; border-radius: 12px; }
.sdd-c > summary:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; border-radius: 12px; }
.sdd-c__ref { font-weight: 900; color: var(--orange-d); white-space: nowrap; }
.sdd-c__who { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sdd-c__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdd-c__who small { color: var(--muted); font-weight: 700; }
.sdd-c__amt { font-weight: 900; white-space: nowrap; }
.sdd-c__amt small { color: var(--muted); font-weight: 700; }
.sdd-c > :not(summary) { margin-inline: 14px; }
.sdd-c > :last-child { margin-bottom: 12px; }
.sdd-reason { background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 8px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 2px; }
.sdd-reason span { color: var(--red); font-size: .74rem; font-weight: 900; }
.sdd-reason b { color: #7f1d1d; }
.sdd-reason small { color: var(--muted); font-weight: 700; }
.sdd-c__why { color: var(--red); font-style: normal; font-weight: 800; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sdd-c__dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px 12px; margin-top: 0; margin-bottom: 10px; }
.sdd-c__dl dt { color: var(--muted); font-size: .74rem; font-weight: 800; }
.sdd-c__dl dd { margin: 0; font-weight: 800; }
.sdd-sup { list-style: none; padding: 0; margin-top: 0; margin-bottom: 10px; border: 1px dashed var(--line); border-radius: 10px; }
.sdd-sup li { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; flex-wrap: wrap; }
.sdd-sup li + li { border-top: 1px dashed var(--line); }
.sdd-sup li small { color: var(--muted); flex: 1; }
.sdd-sup li span { font-weight: 900; white-space: nowrap; }
.sdd-none { color: var(--muted); font-weight: 700; }

.sd-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sd-grid--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sd-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sd-panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; box-shadow: var(--shadow); min-width: 0; }
.sd-panel > header { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.sd-panel > header h3 { font-size: 1rem; font-weight: 900; color: var(--ink); }
.sd-panel > header small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.sd-empty { color: var(--muted); text-align: center; padding: 28px 8px; font-weight: 700; }

.sd-svg { width: 100%; height: auto; display: block; }
.sd-grid line.sd-grid, .sd-svg .sd-grid { stroke: #eef1f5; stroke-width: 1; }
.sd-ax { fill: var(--muted); font-size: 11px; font-weight: 700; font-family: "Cairo", sans-serif; }
.sd-col { fill: var(--orange); transition: fill .15s; }
.sd-col:hover { fill: var(--orange-d); }
.sd-line { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-linejoin: round; }
.sd-dot { fill: #fff; stroke: var(--blue); stroke-width: 2; }
.sd-legend { display: flex; gap: 16px; justify-content: center; margin-top: 6px; font-size: .8rem; font-weight: 800; color: var(--muted); }
.sd-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-inline-end: 6px; vertical-align: -1px; }
.sd-legend .is-sale { background: var(--orange); }
.sd-legend .is-col { background: var(--blue); border-radius: 50%; }

.sd-donut { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.sd-donut__svg { width: 150px; height: 150px; flex: 0 0 auto; }
.sd-donut__c { font-size: 26px; font-weight: 900; fill: var(--ink); font-family: "Cairo", sans-serif; }
.sd-donut__s { font-size: 12px; font-weight: 700; fill: var(--muted); font-family: "Cairo", sans-serif; }
.sd-keys { list-style: none; display: flex; flex-direction: column; gap: 6px; min-width: 150px; flex: 1; }
.sd-keys li { display: grid; grid-template-columns: 12px 1fr auto; gap: 4px 8px; align-items: center; font-size: .84rem; font-weight: 700; }
.sd-keys i { width: 12px; height: 12px; border-radius: 3px; }
.sd-keys small { grid-column: 2 / -1; color: var(--muted); font-size: .74rem; margin-top: -4px; }

.sd-bars { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.sd-bars li { display: flex; gap: 10px; align-items: flex-start; }
.sd-bars__n { flex: 0 0 24px; height: 24px; border-radius: 50%; background: #f4f6fa; color: var(--muted); font-weight: 900; font-size: .78rem; display: grid; place-items: center; }
.sd-bars li:first-child .sd-bars__n { background: var(--grad); color: #231a08; }
.sd-bars__b { flex: 1; min-width: 0; }
.sd-bars__h { display: flex; justify-content: space-between; gap: 8px; font-size: .86rem; }
.sd-bars__h b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-bars__h span { font-weight: 800; white-space: nowrap; }
.sd-bars__t { height: 8px; background: #f1f3f7; border-radius: 99px; margin-top: 5px; overflow: hidden; }
.sd-bars__t > div { height: 100%; border-radius: 99px; background: var(--grad); }
.sd-bars small { color: var(--muted); font-size: .74rem; font-weight: 700; }

.sd-table { width: 100%; margin-top: 12px; }
.sd-table th { white-space: nowrap; }
.sd-table td.sd-n { white-space: nowrap; }
.sd-bars--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
@media (max-width: 760px) { .sd-bars--2 { grid-template-columns: minmax(0, 1fr); } }
.sd-rank { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #f4f6fa; font-size: .74rem; font-weight: 900; color: var(--muted); }
.sd-warn { color: #b45309; font-weight: 800; }
.sd-table--click tbody tr { cursor: pointer; }
.sd-table--click tbody tr:hover { background: #fffaf2; }
.sd-foot { color: var(--muted); font-size: .76rem; text-align: center; }

@media (max-width: 1100px) {
  .sd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sd-grid, .sd-grid--wide, .sd-grid--3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .sd-hide-sm, .sd-hide-sm + .xlsx-bar { display: none !important; }
  #modal.sdd .sdd-table--sup tbody tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px 10px; padding: 8px 12px; }
  #modal.sdd .sdd-table--sup tbody td { display: block; padding: 0 !important; border: none !important; font-size: .84rem; }
  #modal.sdd .sdd-table--sup tbody td:first-child { grid-column: 1 / -1; }
  #modal.sdd .sdd-table--sup tbody td[data-label]::before { display: block; margin: 0; font-size: .7rem; }
  #modal.sdd .sdd-table--sup tbody td:first-child[data-label]::before { display: none; }
  .sdd-c > summary { flex-wrap: wrap; gap: 4px 10px; }
  .sdd-c__who { order: 3; flex-basis: 100%; }
  .sdd-c__amt { margin-inline-start: auto; }
}
@media (max-width: 520px) {
  .sd-kpi > b { font-size: 1.2rem; }
  .sd-bar__sp { display: none; }
}
@media print {
  #print.sd { position: static; display: block; }
  #print .sd-bar, #print .xlsx-bar { display: none !important; }
  #print .sd-kpis { grid-template-columns: repeat(4, 1fr); }
  #print .sd-panel, #print .sd-kpi { box-shadow: none; break-inside: avoid; margin-bottom: 10px; }
}