/* Kiko visual theme: shared components, no changes to operational data. */
.oldest-stock-panel { margin-top:20px; }
.oldest-stock-panel .product-name { min-width:220px; white-space:normal; }
.stock-age-badge { display:inline-block; background:#fff3e0; color:#986119; padding:5px 10px; border-radius:6px; font-weight:650; white-space:nowrap; }
.overview-charts .activity-panel,.overview-charts .stock-overview-panel { grid-column:1 / -1; }
.pie-layout.stock-overview-layout { display:grid; grid-template-columns:200px minmax(180px,.8fr) minmax(350px,1.5fr); width:100%; align-items:center; gap:28px; }
.stock-overview-layout .legend { border-top:0; padding-top:0; }
.dashboard-stock-breakdown { min-width:0; border-left:1px solid var(--border); padding-left:28px; }
.dashboard-stock-breakdown .grid td { padding:15px 10px; }
@media(max-width:1100px) { .pie-layout.stock-overview-layout { grid-template-columns:180px minmax(0,1fr); } .dashboard-stock-breakdown { grid-column:1 / -1; border-left:0; border-top:1px solid var(--border); padding:20px 0 0; } }
@media(max-width:550px) { .pie-layout.stock-overview-layout { grid-template-columns:minmax(0,1fr); } .stock-overview-layout .legend { grid-column:1; } }
:root { --bg:#f3f6fc; --border:#dfe7f4; --text:#112341; --muted:#77869f; --accent:#3168df; }
body { font-family: 'Segoe UI',system-ui,sans-serif; font-size:14px; }
.topbar { background:#fff; color:var(--text); padding:12px 28px; border-bottom:1px solid var(--border); }
.topbar-inner { max-width:1560px; margin:auto; }
.topbar .brand { display:flex; align-items:center; gap:10px; }
.brand-mark { display:grid; place-items:center; width:36px; height:36px; border-radius:11px; background:linear-gradient(135deg,#6393ff,#2354c4); color:white; font-size:22px; font-weight:800; text-decoration:none; box-shadow:0 4px 10px #3168df30; }
.topbar .brand-copy { display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.brand-copy strong { font-size:12px; letter-spacing:.06em; }
.topbar .brand-copy span { color:var(--accent); font-size:12px; }
.brand-copy small { font-size:10px; color:var(--muted); }
.topnav { flex-wrap:wrap; gap:5px; }
.topnav a { color:#5e6e89; border:0; border-radius:7px; font-size:12px; padding:9px 12px; }
.topnav a.active { background:#eaf0ff; color:#265bd0; }
.topnav a:hover { background:#f1f5fd; }
.topnav .logout-link { border-left:1px solid var(--border); border-radius:0; }
.main-area { max-width:1504px; margin:auto; padding:28px; }
.eyebrow { display:block; font-size:10px; letter-spacing:.13em; font-weight:750; color:var(--accent); margin-bottom:8px; }
.page-heading h1 { font-size:30px; font-weight:800; letter-spacing:-.04em; }
.page-heading p { font-size:13px; margin-top:7px; }
.toolbar,.panel,.card { background:#fff; border:1px solid var(--border); border-radius:11px; box-shadow:0 3px 10px #173d7710; }
.toolbar { padding:14px 18px; }
.inp { border-color:#d7e1f2; border-radius:7px; font-size:12px; }
.btn { border-radius:7px; background:#3168df; font-size:12px; font-weight:600; box-shadow:none; }
.btn-secondary { background:#eaf0ff; color:#265bd0; }
.btn:disabled { opacity:.55; }
.btn:focus-visible,.topnav a:focus-visible,.legend-row-btn:focus-visible { outline:3px solid #8cafff; outline-offset:3px; }
.overview-cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:20px; }
.card { position:relative; overflow:hidden; padding:23px 20px; }
.card-title { font-size:10px; letter-spacing:.08em; font-weight:700; margin-bottom:15px; }
.card-value { font-size:34px; line-height:1.2; margin-bottom:12px; }
.overview-cards .card-value.ok,.overview-cards .card-value.warn { color:var(--text); }
.metric-icon { position:absolute; top:0; right:0; width:49px; height:49px; display:grid; place-items:center; border-bottom-left-radius:28px; background:#edf3ff; color:#3168df; font-size:19px; }
.overview-cards .card:nth-child(2) .metric-icon { background:#e9f8f1; color:#1ca781; }
.overview-cards .card:nth-child(3) .metric-icon { background:#fff5e4; color:#e9a02b; }
.overview-cards .card:nth-child(4) .metric-icon { background:#f3edff; color:#8958e6; }
.overview-charts { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:18px; margin-bottom:20px; }
.panel { padding:20px; min-width:0; }
.panel h2 { font-size:16px; letter-spacing:-.02em; margin-bottom:10px; }
.chart-note { color:var(--muted); font-size:11px; margin:0 0 12px; }
.chart-key { display:flex; justify-content:flex-end; gap:16px; font-size:11px; color:var(--muted); }
.chart-key span { display:flex; align-items:center; gap:5px; }
.chart-key i { width:7px; height:7px; border-radius:50%; }
.key-in,.activity-bar.in { background:#5481ff; }
.key-out,.activity-bar.out { background:#9864f6; }
.activity-chart { display:flex; gap:14px; height:216px; margin-top:14px; background:repeating-linear-gradient(to top,transparent 0,transparent 49px,#edf1f8 50px,#edf1f8 51px); }
.activity-day { flex:1; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; text-align:center; }
.activity-bars { height:185px; display:flex; align-items:flex-end; justify-content:center; gap:5px; }
.activity-bar { width:16px; max-width:35%; border-radius:3px 3px 0 0; }
.activity-day>span { background:white; padding-top:9px; font-size:10px; color:var(--muted); }
.pie-layout { flex-direction:column; width:100%; gap:16px; }
.pie-chart { border:0; box-shadow:none; width:185px; height:185px; }
.donut-label { font-size:13px; font-weight:800; fill:var(--text); }
.donut-caption { font-size:5px; letter-spacing:.08em; fill:var(--muted); }
.legend { width:100%; border-top:1px solid var(--border); padding-top:12px; }
.legend-row-btn { padding:6px 0; font-size:12px; white-space:normal; text-align:left; }
.legend-row strong { margin-left:auto; }
.movement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.grid { font-size:11px; }
.grid th { color:#71829d; font-size:10px; font-weight:600; }
.grid td { padding:12px 10px; }
.grid tbody tr:hover { background:#f5f8ff; }
.table-wrap { border-radius:8px; }
@media(max-width:1000px) { .overview-cards { grid-template-columns:repeat(2,minmax(0,1fr)); } .overview-charts { grid-template-columns:minmax(0,1fr); } .movement-grid { grid-template-columns:minmax(0,1fr); } }
@media(max-width:600px) { .topbar { padding:12px; } .topbar-inner { gap:12px; } .topnav { width:100%; } .main-area { padding:18px 12px; } .page-heading h1 { font-size:24px; } .overview-cards { gap:10px; } .card { padding:18px 12px; } .card-value { font-size:26px; } .metric-icon { width:33px; height:33px; font-size:14px; } .card-title { font-size:9px; max-width:80%; } .filter-note { overflow-wrap:anywhere; } }