/* Sun Electric dashboard: calm, readable cards and real business figures. */
.se-dashboard {
  --se-navy: #132b3b; --se-amber: #f7bc4a; --se-paper: #f5f6f2;
  --se-line: #e0e5df; --se-muted: #65736f;
  display: flex; flex-direction: column; gap: 22px; min-width: 0;
}
.se-dashboard > * { min-width: 0; }
.se-dashboard .db-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 4px 0 2px; }
.se-dashboard .db-hello { min-width: 0; }
.se-eyebrow { color: #718078; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .09em; }
.se-dashboard .db-name { margin: 7px 0 3px; font-size: 26px; line-height: 1.4; letter-spacing: -.025em; color: var(--se-navy); overflow-wrap: break-word; }
.se-dashboard .db-shop { font-size: 13px; color: var(--se-muted); }
.se-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; }
.se-dashboard .db-date { display: flex; align-items: center; gap: 7px; color: var(--se-muted); font-size: 12px; line-height: 1.5; }
.se-dashboard .se-new-sale { --h: 44px; border: 1px solid var(--se-amber); background: var(--se-amber); color: var(--se-navy); font-weight: 700; border-radius: 10px; padding: 0 19px; box-shadow: none; }
.se-dashboard .se-new-sale:hover { background: #efad30; border-color: #efad30; }
.se-primary-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.se-primary-metrics.n1 { grid-template-columns: minmax(0, 1fr); }
.se-primary-metrics.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.se-primary-metrics.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.se-metric { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 19px 20px 17px; background: #fff; border: 1px solid var(--se-line); border-radius: 14px; color: var(--se-navy); text-decoration: none; }
a.se-metric:hover { border-color: #aab9b2; color: var(--se-navy); }
.se-metric-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.se-metric-label { font-size: 13px; font-weight: 600; line-height: 1.5; }
.se-metric-icon { display: flex; flex: none; color: #637d7a; }
.se-metric-value { font: 700 28px/1.25 var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -.025em; overflow-wrap: break-word; }
.se-metric-note { margin-top: auto; color: var(--se-muted); font-size: 11.5px; line-height: 1.5; }
.se-metric-feature, a.se-metric-feature:hover { background: var(--se-navy); border-color: var(--se-navy); color: #fff; }
.se-metric-feature .se-metric-icon { color: var(--se-amber); }
.se-metric-feature .se-metric-label { color: #e1e9e8; }
.se-metric-feature .se-metric-note { color: #b7cacd; }
.se-dashboard .db-qa { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; }
.se-dashboard .db-qa-i { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; min-height: 68px; min-width: 0; padding: 12px; border: 1px solid var(--se-line); border-radius: 12px; background: #fff; color: var(--se-navy); text-decoration: none; }
.se-dashboard .db-qa-i:hover { background: #edf1ea; border-color: #c7d1c8; }
.se-dashboard .db-qa-ic { display: flex; align-items: center; justify-content: center; flex: none; width: 32px; height: 32px; background: #f0f3ee; border-radius: 9px; color: #335d62; }
.se-dashboard .db-qa-i.tone-blue .db-qa-ic { background: #fff0cf; color: #785414; }
.se-dashboard .db-qa-l { font-size: 12px; line-height: 1.4; font-weight: 600; overflow-wrap: break-word; }
.se-dashboard .db-qa.n1 { grid-template-columns: minmax(0, 1fr); }
.se-dashboard .db-qa.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.se-dashboard .db-qa.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.se-dashboard .db-qa.n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.se-dashboard .db-qa.n5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.se-dashboard .db-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.se-dashboard .db-grid > * { min-width: 0; }
.se-dashboard .se-chart-grid { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); align-items: stretch; }
.se-dashboard .db-card { min-width: 0; border: 1px solid var(--se-line); border-radius: 14px; background: #fff; box-shadow: none; overflow: hidden; }
.se-dashboard .db-card .card-head { gap: 8px; min-height: 58px; padding: 12px 18px; border-bottom: 1px solid #edf0e9; }
.se-dashboard .db-card .card-title { font-size: 14px; font-weight: 600; min-width: 0; line-height: 1.5; }
.se-dashboard .db-more { display: inline-flex; align-items: center; justify-content: center; gap: 3px; min-height: 40px; padding: 6px 0 6px 5px; flex: none; font-size: 11.5px; font-weight: 600; color: #3b665e; text-decoration: none; border-radius: 6px; }
.se-dashboard .db-count { background: #eef2ed; color: #51685f; padding: 2px 7px; border-radius: 6px; font: 600 11px/1.5 var(--font-num); }
.se-dashboard .db-chart-body { padding: 16px 18px; }
.se-dashboard .db-chart-sum { display: flex; flex-wrap: wrap; gap: 7px 16px; margin-bottom: 18px; color: var(--se-muted); font-size: 11.5px; }
.se-dashboard .db-chart-sum b { font-family: var(--font-num); font-weight: 600; color: var(--se-navy); }
.se-dashboard .db-combo { min-width: 0; }
.se-dashboard .db-combo .c-bar { opacity: .75; }
.se-dashboard .db-combo .db-bar-last { opacity: 1; }
.se-dashboard .db-combo .chart-legend { font-size: 12px; }
.se-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: #edf0e9; border: 1px solid #dde3d9; border-radius: 12px; padding: 6px 0; }
.se-summary-item { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 18px; text-decoration: none; color: var(--se-navy); border-right: 1px solid #d8dfd5; }
.se-summary-item:last-child { border-right: 0; }
a.se-summary-item:hover { color: var(--se-navy); background: #e4e9df; }
.se-summary-item > span { font-size: 12px; color: #56645d; }
.se-summary-item > strong { font: 650 19px/1.35 var(--font-num); letter-spacing: -.015em; overflow-wrap: break-word; }
.se-summary-item > small { font-size: 10.5px; color: var(--se-muted); line-height: 1.4; }
.se-dashboard .db-list { display: flex; flex-direction: column; }
.se-dashboard .db-li { display: flex; align-items: center; gap: 12px; min-height: 69px; padding: 12px 18px; color: var(--se-navy); text-decoration: none; border-bottom: 1px solid #edf0e9; }
.se-dashboard .db-li:last-child { border-bottom: 0; }
.se-dashboard a.db-li:hover { background: #f8f9f5; }
.se-dashboard .db-li-lead { display: flex; flex: none; }
.se-dashboard .db-av { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: #edf2ed; color: #466858; font: 600 12px/1 var(--font-num); }
.se-dashboard .db-av.tone-red { background: #fbedeb; color: #a74437; }
.se-dashboard .db-av.tone-amber { background: #fff2d6; color: #89621a; }
.se-dashboard .db-li-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.se-dashboard .db-li-t { font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-dashboard .db-li-s { font-size: 11px; line-height: 1.4; color: var(--se-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.se-dashboard .db-li-r { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; max-width: 45%; min-width: 0; }
.se-dashboard .db-li-v { font: 600 13px/1.35 var(--font-num); font-variant-numeric: tabular-nums; overflow-wrap: break-word; text-align: right; }
.se-dashboard .db-li-n .badge { font-size: 10px; }
.se-dashboard .se-invoice-due { display: block; color: #65736f; font-size: 10.5px; text-align: right; }
.se-dashboard .db-li-chev { display: flex; flex: none; color: #86958c; margin-left: -6px; }
.se-dashboard .db-li.is-void .db-li-t, .se-dashboard .db-li.is-void .db-li-v { text-decoration: line-through; color: #829187; }
.se-dashboard .db-collect { font-size: 11px; color: #317460; }
.se-dashboard .db-rank { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: #edf1e9; color: #526b54; font: 600 12px/1 var(--font-num); }
.se-dashboard .db-empty { padding: 30px 20px; color: var(--se-muted); text-align: center; font-size: 13px; line-height: 1.65; }
.se-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 216px; padding: 27px 22px; text-align: center; }
.se-empty-icon { display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; margin-bottom: 15px; border-radius: 16px; background: #f0f3ec; color: #647c64; }
.se-empty h3 { margin: 0; color: var(--se-navy); font-size: 15px; font-weight: 600; line-height: 1.5; }
.se-empty p { margin: 7px 0 0; max-width: 285px; color: var(--se-muted); font-size: 12px; line-height: 1.7; }
.se-empty .btn { margin-top: 16px; --h: 42px; font-size: 12px; border-radius: 9px; }
.db-chart-body .se-empty { min-height: 205px; padding-top: 14px; }
.se-dashboard .db-hbars { display: flex; flex-direction: column; gap: 18px; padding: 20px 18px; }
.se-dashboard .db-hb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.se-dashboard .db-hb-name { min-width: 0; overflow-wrap: break-word; font-size: 12px; color: #425b50; }
.se-dashboard .db-hb-val { font: 600 12px/1.4 var(--font-num); flex: none; }
.se-dashboard .db-hb-pct { font-size: 10px; color: var(--se-muted); margin-left: 6px; }
.se-dashboard .db-hb-track { height: 5px; margin-top: 8px; background: #edf1e9; border-radius: 3px; overflow: hidden; }
.se-dashboard .db-hb-track > span { display: block; height: 100%; border-radius: 3px; }
.se-dashboard .db-golive { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 22px; padding: 17px 20px; border: 1px solid #eadab6; border-radius: 12px; background: #fff9ec; box-shadow: none; }
.se-dashboard .db-gl-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.se-dashboard .db-gl-ic { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: #ffebc1; border-radius: 10px; color: #956617; flex: none; }
.se-dashboard .db-gl-text { min-width: 0; }
.se-dashboard .db-gl-t { font-size: 13px; font-weight: 600; color: #634e26; }
.se-dashboard .db-gl-s { font-size: 12px; margin-top: 3px; line-height: 1.5; color: #83714d; }
.se-dashboard .db-gl-btn { grid-column: 2; grid-row: 1; align-self: center; --h: 40px; background: #fff; color: #775819; border: 1px solid #dec48e; border-radius: 8px; font-size: 12px; }
.se-dashboard .db-gl-bar { grid-column: 1 / -1; height: 4px; border-radius: 3px; background: #ede2c7; overflow: hidden; }
.se-dashboard .db-gl-bar > span { display: block; height: 100%; background: #d5a23e; border-radius: 3px; }
.se-dashboard .db-backup { display: flex; align-items: center; gap: 12px; border: 1px solid var(--se-line); border-radius: 10px; padding: 13px 16px; background: #f0f3ed; }
.se-dashboard .db-bk-ic { color: #557764; display: flex; flex: none; }
.se-dashboard .db-bk-t { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.se-dashboard .db-bk-t b { font-size: 12px; font-weight: 600; }
.se-dashboard .db-bk-t span { color: var(--se-muted); font-size: 11px; line-height: 1.5; }
.se-dashboard .db-bk-btn { --h: 40px; flex: none; font-size: 11px; color: #325b48; }
@media (max-width: 1150px) {
  .se-metric { padding: 16px; }
  .se-metric-value { font-size: 25px; }
  .se-dashboard .db-qa-i { flex-direction: column; text-align: center; gap: 8px; }
  .se-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .se-summary-item:nth-child(3) { border-right: 0; }
}
@media (max-width: 767.98px) {
  .se-dashboard { gap: 17px; }
  .se-dashboard .db-hero { align-items: flex-start; gap: 12px; flex-direction: column; padding-top: 2px; }
  .se-dashboard .db-name { margin-top: 5px; font-size: 23px; }
  .se-dashboard .db-shop { font-size: 12px; }
  .se-eyebrow { font-size: 10px; }
  .se-head-actions { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 10px; }
  .se-dashboard .db-date { min-width: 0; font-size: 10.5px; gap: 5px; }
  .se-dashboard .db-date .icon { width: 15px; height: 15px; }
  .se-dashboard .se-new-sale { --h: 42px; padding: 0 12px; font-size: 12px; white-space: nowrap; }
  .se-primary-metrics, .se-primary-metrics.n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .se-metric { padding: 14px 13px 13px; gap: 12px; border-radius: 12px; }
  .se-metric-label { font-size: 12.5px; }
  .se-metric-icon .icon { width: 17px; height: 17px; }
  .se-metric-value { font-size: 23px; }
  .se-metric-note { font-size: 10px; }
  .se-dashboard .db-qa, .se-dashboard .db-qa.n4, .se-dashboard .db-qa.n5 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .se-dashboard .db-qa-i { min-height: 83px; padding: 11px 6px; gap: 8px; }
  .se-dashboard .db-qa-l { font-size: 12px; }
  .se-dashboard .db-grid, .se-dashboard .se-chart-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .se-dashboard .db-card .card-head { padding: 10px 14px; min-height: 54px; }
  .se-dashboard .db-card .card-title { font-size: 13px; }
  .se-dashboard .db-more { font-size: 11px; min-height: 44px; }
  .se-dashboard .db-chart-body { padding: 14px; }
  .se-dashboard .db-chart-sum { gap: 6px 12px; font-size: 11px; }
  .se-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 4px 0; }
  .se-summary-item { padding: 12px 14px; }
  .se-summary-item:nth-child(3) { border-right: 1px solid #d8dfd5; }
  .se-summary-item:nth-child(2n), .se-summary-item:last-child { border-right: 0; }
  .se-summary-item > span { font-size: 11px; }
  .se-summary-item > strong { font-size: 17px; }
  .se-summary-item > small { font-size: 10px; }
  .se-dashboard .db-li { gap: 9px; padding: 12px 14px; }
  .se-dashboard .db-li-t { font-size: 12.5px; }
  .se-dashboard .db-li-v { font-size: 12px; }
  .se-empty { min-height: 210px; padding: 24px 18px; }
  .se-dashboard .db-golive { padding: 15px; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .se-dashboard .db-gl-top { align-items: flex-start; }
  .se-dashboard .db-gl-t { font-size: 12.5px; }
  .se-dashboard .db-gl-btn { grid-column: 1; grid-row: auto; justify-self: stretch; --h: 44px; }
  .se-dashboard .db-gl-bar { grid-row: 2; }
  .se-dashboard .db-backup { padding: 12px; align-items: flex-start; gap: 10px; }
  .se-dashboard .db-bk-btn { --h: 44px; }
}
@media (max-width: 380px) {
  .se-metric-value { font-size: 21px; }
  .se-metric { padding: 13px 11px; }
  .se-metric-label { font-size: 12px; }
  .se-dashboard .db-date { font-size: 10px; }
  .se-dashboard .db-date .icon { display: none; }
}
@media print {
  .se-dashboard .se-new-sale, .se-dashboard .db-qa, .se-dashboard .db-golive, .se-dashboard .db-backup { display: none; }
  .se-metric-feature { background: #fff; color: #000; border-color: #ccc; }
  .se-metric-feature .se-metric-label, .se-metric-feature .se-metric-note { color: #333; }
}
/* Counts represent distinct active products, never mixed stock units. */
.se-shelves { margin: 24px 0; }
.se-shelves-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.se-shelves-head h2 { margin: 0 0 4px; font-size: 17px; font-weight: 600; color: #193c50; }
.se-shelves-head p { margin: 0; font-size: 11px; color: #68786d; }
.se-shelves-head .btn { --h: 42px; font-size: 11px; }
.se-shelves-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.se-shelf { display: flex; flex-direction: column; min-width: 0; padding: 16px; gap: 6px; background: #fff; border: 1px solid #e0e5df; border-radius: 12px; text-decoration: none; color: #193c50; }
.se-shelf:hover { border-color: #d5a23e; background: #fffaf0; }
.se-shelf-art { display: block; margin-bottom: 5px; color: #356376; }
.se-shelf b { font-size: 12px; font-weight: 600; overflow-wrap: break-word; }
.se-shelf > span:last-child { font-size: 10px; color: #68786d; }
@media (max-width: 1100px) { .se-shelves-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) {
  .se-shelves-head { align-items: flex-start; flex-direction: column; gap: 10px; }
  .se-shelves-grid { gap: 8px; }
  .se-shelf { padding: 12px 10px; }
  .se-shelf b { font-size: 11px; }
}