.sales-page { display:grid; gap:18px; }
.sales-toolbar { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(140px,1fr)); gap:10px; padding:14px; border:1px solid #4a3218; border-radius:14px; background:linear-gradient(145deg,#17110b,#0b0907); }
.sales-toolbar label { display:grid; gap:6px; color:#b9a78c; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
.sales-toolbar input, .sales-toolbar select { min-width:0; padding:11px 12px; border:1px solid #65431b; border-radius:8px; background:#0b0a08; color:#ead7bd; font:inherit; text-transform:none; }
.sales-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.sales-kpis article { min-height:112px; padding:17px; border:1px solid #4a3218; border-radius:14px; background:linear-gradient(145deg,#1b120a,#0b0907); }
.sales-kpis span, .sales-kpis small { display:block; color:#ad9a81; font-size:.78rem; }
.sales-kpis strong { display:block; margin:9px 0 5px; color:#f0c77e; font:500 clamp(1.25rem,2.2vw,1.9rem) 'Playfair Display',serif; }
.sales-main-grid { display:grid; grid-template-columns:1.35fr .9fr; gap:18px; }
.sales-panel { min-width:0; padding:20px; border:1px solid #4a3218; border-radius:14px; background:linear-gradient(145deg,#17110b,#0b0907); }
.sales-panel-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:18px; }
.sales-panel-heading h3 { margin:4px 0 0; color:#ead8bf; font:500 1.35rem 'Playfair Display',serif; }
.sales-panel-heading > span { color:#9e907e; font-size:.78rem; }
.sales-bars { display:flex; align-items:end; gap:12px; height:205px; padding:14px 5px 0; border-bottom:1px solid #392817; }
.sales-bar-item { display:grid; grid-template-rows:22px 1fr 22px; align-items:end; justify-items:center; flex:1; height:100%; min-width:0; }
.sales-bar-item span { overflow:hidden; max-width:100%; color:#bba789; font-size:.64rem; text-overflow:ellipsis; white-space:nowrap; }
.sales-bar-item i { width:min(30px,70%); min-height:2px; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#f0b657,#7d4d18); box-shadow:0 0 18px rgba(210,145,45,.15); }
.sales-bar-item small { color:#8f806d; font-size:.68rem; }
.sales-top-products { display:grid; gap:16px; }
.sales-product-row { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:center; padding-bottom:13px; border-bottom:1px solid #2d2116; }
.sales-product-row strong, .sales-product-row b { display:block; color:#ead8bf; }
.sales-product-row small { display:block; margin-top:4px; color:#9e907e; }
.sales-product-row i { display:block; width:110px; height:5px; margin-top:8px; overflow:hidden; border-radius:99px; background:#2b1b0d; }
.sales-product-row i span { display:block; height:100%; border-radius:inherit; background:#c88a2b; }
.sales-table-panel { padding-bottom:8px; }
.sales-table-wrap { overflow:auto; }
.sales-table { width:100%; min-width:820px; border-collapse:collapse; }
.sales-table th { padding:0 12px 13px; color:#b98a43; font-size:.68rem; font-weight:500; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.sales-table td { padding:14px 12px; border-top:1px solid #2d2116; color:#c2b096; font-size:.82rem; }
.sales-table td strong, .sales-table td small { display:block; }
.sales-table td strong { color:#ead8bf; }
.sales-table td small { margin-top:4px; color:#8f806d; }
.sales-status { display:inline-block; padding:5px 8px; border:1px solid #684a21; border-radius:99px; color:#e4ad59; font-size:.68rem; }
.sales-status.delivered { color:#8fd0a5; border-color:#356448; }.sales-status.cancelled { color:#d98c8c; border-color:#693c3c; }
.sales-view { padding:7px 10px; border:1px solid #76501f; border-radius:7px; background:#1a120b; color:#efc27d; cursor:pointer; }
.sales-empty { padding:36px !important; color:#9e907e !important; text-align:center; }
.sales-nav-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
@media (max-width:900px) { .sales-toolbar, .sales-kpis { grid-template-columns:repeat(2,1fr); } .sales-main-grid { grid-template-columns:1fr; } }
@media (max-width:560px) { .sales-toolbar, .sales-kpis { grid-template-columns:1fr; } .sales-panel { padding:14px; } }