.dashboard-bi { max-width: 1480px; margin: 0 auto; color: #18343a; }
.dashboard-bi-head, .dashboard-bi-filters, .dashboard-bi-card, .dashboard-kpi { border: 1px solid #dbe8e8; box-shadow: 0 10px 28px rgba(19, 68, 72, .06); }
.dashboard-bi-head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; padding: 28px 30px; border-radius: var(--radius); background: var(--surface); }
.dashboard-bi .eyebrow { margin: 0 0 7px; color: #188075; font-weight: 800; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-bi h2, .dashboard-bi h3 { margin: 0; letter-spacing: -.025em; }
.dashboard-bi h2 { font-size: clamp(1.5rem, 2.7vw, 2.1rem); }
.dashboard-bi h3 { font-size: 1.04rem; }
.dashboard-bi-note { margin: 9px 0 0; color: #61787b; font-size: .88rem; }
.dashboard-refresh { min-height: 40px; padding: 0 14px; border: 1px solid #b8d9d5; border-radius: 10px; background: rgba(255,255,255,.76); color: #176b64; font-weight: 750; cursor: pointer; }
.dashboard-refresh:hover, .dashboard-refresh:focus-visible { background: #fff; border-color: #258b80; outline: 3px solid rgba(36, 160, 143, .18); }
.dashboard-bi-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 18px 0; padding: 12px; border-radius: var(--radius); background: #fff; }
.dashboard-period-tabs { display: flex; padding: 3px; border-radius: 10px; background: #edf4f3; }
.dashboard-period-tabs button, .dashboard-date-control button { min-height: 34px; border: 0; border-radius: 8px; background: transparent; color: #527075; font-weight: 750; cursor: pointer; }
.dashboard-period-tabs button { min-width: 42px; }
.dashboard-period-tabs button.is-active { background: #176e67; color: #fff; box-shadow: 0 2px 6px rgba(17, 88, 82, .2); }
.dashboard-date-control { display: flex; align-items: center; gap: 4px; padding: 3px; border: 1px solid #d8e6e5; border-radius: 10px; }
.dashboard-date-control button { min-width: 32px; padding: 0 8px; }
.dashboard-date-control button:hover, .dashboard-date-control button:focus-visible { background: #eaf7f5; outline: none; }
.dashboard-date-control input { height: 32px; min-width: 133px; border: 0; border-radius: 6px; color: #28474b; font: inherit; font-size: .84rem; }
.dashboard-date-range { color: #597478; font-size: .76rem; font-weight: 700; }
.dashboard-store-control { display: flex; align-items: center; gap: 8px; margin-left: auto; color: #587075; font-size: .82rem; font-weight: 750; }
.dashboard-store-control select { min-height: 35px; min-width: 142px; border: 1px solid #d5e3e1; border-radius: 8px; background: #fff; color: #24434a; font: inherit; }
.dashboard-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.dashboard-kpi { position: relative; min-height: 140px; padding: 19px 18px; overflow: hidden; border-radius: var(--radius); text-align: left; background: #fff; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.dashboard-kpi::after { content: ""; position: absolute; inset: auto -14px -24px auto; width: 85px; height: 85px; border-radius: 50%; opacity: .65; }
.dashboard-kpi:hover, .dashboard-kpi:focus-visible { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(20, 75, 79, .14); outline: 3px solid rgba(33, 146, 132, .2); }
.dashboard-kpi span { display: block; color: #647d80; font-size: .84rem; font-weight: 750; }
.dashboard-kpi strong { display: block; margin-top: 10px; font-size: clamp(1.45rem, 2.5vw, 2.15rem); line-height: 1; color: #173a40; letter-spacing: -.05em; }
.dashboard-kpi small { display: block; margin-top: 13px; color: #58807c; font-size: .75rem; }
.kpi-orders { border-top: 4px solid #1c9387; }.kpi-orders::after { background: #d4f4ee; }
.kpi-customers { border-top: 4px solid #5477c9; }.kpi-customers::after { background: #e0e8ff; }
.kpi-rent { border-top: 4px solid #d39131; }.kpi-rent::after { background: #fff0d4; }
.kpi-pending { border-top: 4px solid #d05f57; }.kpi-pending::after { background: #ffe3e0; }
.dashboard-secondary-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin-top: 14px; }
.dashboard-secondary-kpi { min-height: 88px; padding: 13px 14px; border: 1px solid #dce9e7; border-radius: var(--radius); background: #fff; color: #26494d; text-align: left; cursor: pointer; }.dashboard-secondary-kpi:hover, .dashboard-secondary-kpi:focus-visible { border-color: #54a99e; background: #f2fbf9; outline: 3px solid rgba(33,146,132,.16); }.dashboard-secondary-kpi:disabled { cursor: default; opacity: .8; }.dashboard-secondary-kpi span, .dashboard-secondary-kpi small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.dashboard-secondary-kpi span { color: #607b7e; font-size: .76rem; font-weight: 700; }.dashboard-secondary-kpi strong { display: block; margin: 5px 0; font-size: 1.2rem; letter-spacing: -.03em; }.dashboard-secondary-kpi small { color: #809496; font-size: .7rem; }
.dashboard-bi-grid { display: grid; grid-template-columns: 1.35fr .95fr; gap: 16px; margin-top: 16px; }
.dashboard-bi-card { min-width: 0; min-height: 268px; padding: 20px; border-radius: var(--radius); background: #fff; }
.dashboard-bi-card > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.dashboard-card-caption { color: #789093; font-size: .76rem; white-space: nowrap; }
.dashboard-trend { display: grid; grid-template-columns: repeat(var(--points, 1), minmax(0, 1fr)); overflow-x: auto; align-items: end; gap: clamp(4px, .8vw, 10px); min-height: 188px; padding: 12px 0 4px; border-bottom: 1px solid #deebea; }
.dashboard-trend-point { display: grid; grid-template-rows: 1fr auto auto; gap: 4px; height: 180px; min-width: 0; border: 0; background: none; cursor: pointer; }
.dashboard-trend-bar { align-self: end; min-height: 0; border-radius: 8px 8px 2px 2px; background: linear-gradient(180deg, #55c5b8, #13766d); transition: filter .15s, transform .15s; }
.dashboard-trend-point:hover .dashboard-trend-bar, .dashboard-trend-point:focus-visible .dashboard-trend-bar { filter: brightness(.88); transform: scaleY(1.04); transform-origin: bottom; }
.dashboard-trend-point:disabled { cursor: not-allowed; opacity: .58; }.dashboard-trend-point:disabled .dashboard-trend-bar { background: #c9d7d6; }.dashboard-trend-value { overflow: visible; color: #24585a; font-size: clamp(.42rem, .7vw, .71rem); text-align: center; white-space: nowrap; }.dashboard-trend-point small { overflow: hidden; color: #71888a; font-size: .69rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-ranking { display: grid; gap: 10px; }
.dashboard-ranking-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 7px 4px; border: 0; border-radius: 8px; background: transparent; color: #24454a; text-align: left; cursor: pointer; }
.dashboard-ranking-row:hover, .dashboard-ranking-row:focus-visible { background: #eef9f7; outline: none; }
.dashboard-rank { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: #eaf4f2; color: #187a70; font-weight: 800; font-size: .78rem; }
.dashboard-rank-name { display: flex; justify-content: space-between; gap: 8px; font-size: .85rem; font-weight: 750; }.dashboard-rank-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.dashboard-rank-name small { color: #7a9294; font-weight: 600; }
.dashboard-rank-track { height: 7px; margin-top: 6px; overflow: hidden; border-radius: 8px; background: #e7f0ef; }.dashboard-rank-fill { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #55c5b8, #168076); }
.dashboard-ranking-row > strong { color: #26494d; font-size: .85rem; }
.dashboard-distribution { display: grid; gap: 8px; }
.dashboard-distribution-row { display: grid; grid-template-columns: minmax(72px, .8fr) minmax(70px, 1.7fr) auto; align-items: center; gap: 9px; width: 100%; padding: 6px 0; border: 0; border-radius: 7px; background: none; color: #29494d; text-align: left; cursor: pointer; }
.dashboard-distribution-row:hover, .dashboard-distribution-row:focus-visible { background: #eff9f7; outline: none; }
.dashboard-distribution-row span:first-child { overflow: hidden; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }.dashboard-distribution-row strong { font-size: .82rem; }
.dashboard-distribution-track { height: 8px; overflow: hidden; border-radius: 99px; background: #e7eeee; }.dashboard-distribution-fill { display: block; height: 100%; border-radius: inherit; background: var(--bar-color, #278e84); }
.dashboard-empty { display: grid; min-height: 145px; place-items: center; color: #8aa0a1; font-size: .87rem; text-align: center; }
.dashboard-feedback { min-height: 20px; margin: 12px 2px 0; color: #71878a; font-size: .82rem; }.dashboard-feedback.is-error { color: #b64742; }
.dashboard-definitions { margin-top: 15px; border: 1px solid #dce9e7; border-radius: var(--radius); background: #f9fcfc; color: #587276; font-size: .8rem; }.dashboard-definitions summary { padding: 11px 14px; color: #35575b; font-weight: 750; cursor: pointer; }.dashboard-definitions ul { margin: 0; padding: 0 28px 13px; }.dashboard-definitions li + li { margin-top: 5px; }
.dashboard-detail-modal { position: fixed; z-index: 99; inset: 0; display: grid; place-items: center; padding: 22px; background: rgba(12, 36, 39, .44); }.dashboard-detail-modal.hidden { display: none; }
.dashboard-detail-dialog { display: flex; flex-direction: column; width: min(940px, 100%); max-height: min(82vh, 780px); overflow: hidden; border-radius: 14px; background: #fff; box-shadow: 0 28px 80px rgba(6, 34, 37, .32); }.dashboard-detail-head { display: flex; flex: 0 0 auto; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 20px 22px 14px; border-bottom: 1px solid #e4eeee; background: #fff; }.dashboard-detail-head p { margin: 5px 0 0; color: #708a8c; font-size: .82rem; }.dashboard-detail-close { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #eef5f4; color: #385b5e; font-size: 1.3rem; cursor: pointer; }.dashboard-detail-body { min-height: 0; padding: 0 22px 20px; }.dashboard-detail-table-scroll { max-height: min(48vh, 430px); overflow: auto; overscroll-behavior: contain; outline-offset: -3px; }.dashboard-detail-table { width: 100%; border-collapse: collapse; font-size: .83rem; }.dashboard-detail-table th { position: sticky; top: 0; z-index: 1; background: #f5faf9; color: #607a7d; text-align: left; }.dashboard-detail-table th, .dashboard-detail-table td { padding: 12px 8px; border-bottom: 1px solid #ecf1f1; white-space: nowrap; }.dashboard-detail-pager { display: flex; justify-content: flex-end; align-items: center; gap: 10px; padding-top: 16px; }.dashboard-detail-pager button { border: 1px solid #d3e3e1; border-radius: 7px; background: #fff; min-height: 32px; padding: 0 10px; cursor: pointer; }.dashboard-detail-pager button:disabled { opacity: .45; cursor: not-allowed; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
@media (max-width: 900px) { .dashboard-bi-grid { grid-template-columns: 1fr; }.dashboard-ranking-card { min-height: auto; }.dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-store-control { margin-left: 0; } }
@media (max-width: 560px) { .dashboard-bi-head { padding: 21px 18px; border-radius: var(--radius); }.dashboard-refresh span { display: none; }.dashboard-bi-filters { align-items: stretch; padding: 9px; gap: 9px; }.dashboard-period-tabs { width: 100%; }.dashboard-period-tabs button { flex: 1; }.dashboard-date-control { width: 100%; justify-content: space-between; }.dashboard-date-range { width: 100%; padding-left: 4px; }.dashboard-date-control input { min-width: 0; width: 125px; }.dashboard-store-control { justify-content: space-between; width: 100%; }.dashboard-store-control select { width: 68%; }.dashboard-kpis { gap: 9px; }.dashboard-kpi { min-height: 118px; padding: 15px 12px; border-radius: var(--radius); }.dashboard-kpi strong { font-size: 1.45rem; }.dashboard-kpi small { margin-top: 9px; font-size: .67rem; }.dashboard-secondary-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }.dashboard-bi-card { min-height: 235px; padding: 16px; border-radius: var(--radius); }.dashboard-card-caption { white-space: normal; text-align: right; }.dashboard-trend { min-height: 158px; }.dashboard-trend-point { height: 150px; }.dashboard-trend-point small { font-size: .6rem; }.dashboard-detail-modal { padding: 8px; }.dashboard-detail-dialog { max-height: 92vh; border-radius: 14px; }.dashboard-detail-head, .dashboard-detail-body { padding-left: 14px; padding-right: 14px; }.dashboard-detail-table-scroll { max-height: 56vh; }.dashboard-detail-table { font-size: .75rem; } }