@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap');
:root { --ink:#172033; --muted:#7b8495; --line:#e9ecf2; --canvas:#f7f8fb; --white:#fff; --navy:#17233b; --blue:#536dfe; --green:#24a67a; --amber:#dc9b2d; --violet:#9b72e3; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:var(--canvas); font-family:'DM Sans',sans-serif; -webkit-font-smoothing:antialiased; } button,a { font:inherit; } button { cursor:pointer; }
.app-shell { min-height:100vh; display:flex; } .sidebar { width:252px; flex:0 0 252px; display:flex; flex-direction:column; color:#c2cbe0; background:var(--navy); padding:27px 16px 18px; } .brand { display:flex; align-items:center; gap:10px; padding:0 10px 30px; color:#fff; font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:19px; letter-spacing:-.5px; } .brand-mark { width:28px; height:28px; display:grid; place-items:center; border-radius:8px; color:#fff; background:var(--blue); font-size:15px; } .close-sidebar { display:none; margin-left:auto; border:0; color:#fff; background:transparent; font-size:26px; }
.workspace-switcher { display:flex; align-items:center; gap:10px; padding:10px; margin-bottom:25px; border:1px solid #2d3a55; border-radius:9px; font-size:12px; } .workspace-switcher strong,.workspace-switcher small,.user-card strong,.user-card small { display:block; } .workspace-switcher strong { color:#fff; font-size:12px; font-weight:600; } .workspace-switcher small,.user-card small { color:#8390aa; font-size:10px; margin-top:3px; } .workspace-avatar,.user-avatar { display:grid; place-items:center; flex:0 0 auto; width:28px; height:28px; border-radius:7px; color:#263253; background:#c9d3ff; font-weight:700; } .chevron { margin-left:auto; color:#8591a8; font-size:18px; }
.nav-label { display:block; padding:0 10px 10px; color:#72809b; font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; } .nav-label-spaced { margin-top:26px; } .nav-item,.help-link { display:flex; align-items:center; gap:11px; min-height:40px; padding:0 10px; border-radius:7px; color:#aab5ca; font-size:13px; text-decoration:none; } .nav-item:hover,.nav-item.active,.help-link:hover { color:#fff; background:#293754; } .nav-item.active { box-shadow:inset 3px 0 var(--blue); } .nav-icon { width:17px; color:#8795b2; font-size:16px; text-align:center; } .nav-item.active .nav-icon { color:#91a3ff; } .nav-count { margin-left:auto; padding:2px 7px; border-radius:10px; color:#a9b6ff; background:#34436e; font-size:10px; } .sidebar-footer { margin-top:auto; } .help-link { margin-bottom:20px; } .user-card { display:flex; align-items:center; gap:10px; padding:16px 8px 0; border-top:1px solid #2b3853; font-size:12px; } .user-card strong { color:#fff; font-weight:600; } .more { margin-left:auto; color:#75829d; letter-spacing:2px; }
.main-content { min-width:0; flex:1; } .topbar { height:73px; display:flex; align-items:center; padding:0 39px; border-bottom:1px solid var(--line); background:#fff; } .breadcrumbs { display:flex; align-items:center; gap:12px; color:#98a0af; font-size:12px; } .breadcrumbs b { color:#d2d6de; font-weight:400; } .breadcrumbs strong { color:var(--ink); font-weight:600; } .topbar-actions { display:flex; align-items:center; gap:18px; margin-left:auto; } .icon-button,.menu-toggle { border:0; color:#778198; background:transparent; font-size:22px; } .notification { position:relative; } .notification i { position:absolute; top:1px; right:1px; width:6px; height:6px; border:1px solid #fff; border-radius:50%; background:#f17c70; } .topbar-avatar { display:grid; place-items:center; width:30px; height:30px; border-radius:50%; color:#39405a; background:#e4e5f6; font-size:10px; font-weight:700; } .menu-toggle { display:none; }
.content-wrap { max-width:1420px; margin:0 auto; padding:38px 39px 25px; } .page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:31px; } .eyebrow { margin:0 0 8px; color:#9da5b4; font-size:10px; font-weight:700; letter-spacing:.12em; } .page-heading h1 { margin:0 0 7px; font:700 29px 'Space Grotesk',sans-serif; letter-spacing:-.8px; } .page-heading h1 span { font-family:sans-serif; font-size:23px; } .muted { margin:0; color:var(--muted); font-size:12px; } .primary-button { display:flex; align-items:center; gap:8px; min-height:39px; padding:0 16px; border:0; border-radius:7px; color:#fff; background:var(--blue); box-shadow:0 5px 12px #536dfe33; font-size:12px; font-weight:600; } .primary-button span { font-size:18px; font-weight:400; } .stats-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:18px; } .stat-card,.panel { border:1px solid var(--line); border-radius:9px; background:var(--white); } .stat-card { padding:20px 21px 17px; } .stat-card-top { display:flex; justify-content:space-between; align-items:center; color:#8d96a7; font-size:11px; } .stat-card>strong { display:block; margin-top:12px; font:700 24px 'Space Grotesk',sans-serif; } .stat-icon { display:grid; place-items:center; width:25px; height:25px; border-radius:7px; font-size:13px; } .green { color:var(--green); background:#e6f7f1; } .blue { color:var(--blue); background:#e9edff; } .amber { color:var(--amber); background:#fff4df; } .violet { color:var(--violet); background:#f1eafd; } .change { margin:8px 0 0; font-size:10px; font-weight:600; background:none; } .stat-card .change { padding:0; }
.dashboard-grid { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr); gap:18px; margin-bottom:18px; } .panel { padding:22px 21px; } .panel-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:15px; } .panel h2 { margin:0 0 5px; font:600 15px 'Space Grotesk',sans-serif; } .select-button { padding:7px 9px; border:1px solid var(--line); border-radius:5px; color:#768095; background:#fff; font-size:10px; } .select-button span { margin-left:9px; } .chart { display:flex; height:220px; margin-top:28px; } .chart-y { display:flex; flex-direction:column; justify-content:space-between; width:30px; padding:0 0 26px; color:#aeb5c1; font-size:9px; } .chart-area { position:relative; flex:1; } .grid-lines { position:absolute; inset:0 0 28px; background:repeating-linear-gradient(to bottom,#edf0f5 0,#edf0f5 1px,transparent 1px,transparent 25%); } .chart svg { position:absolute; inset:0 0 27px; width:100%; height:calc(100% - 27px); overflow:visible; } .chart-x { position:absolute; bottom:0; left:0; right:0; display:flex; justify-content:space-between; color:#aeb5c1; font-size:9px; } .activity-panel { min-height:300px; } .text-link { color:var(--blue); font-size:11px; font-weight:600; text-decoration:none; white-space:nowrap; } .activity-list { margin-top:24px; } .activity-item { display:flex; align-items:center; gap:11px; min-height:51px; border-bottom:1px solid #f0f1f5; } .activity-item:last-child { border:0; } .activity-icon { display:grid; place-items:center; width:28px; height:28px; border-radius:8px; font-size:12px; } .activity-item strong,.activity-item small { display:block; } .activity-item strong { color:#394358; font-size:11px; font-weight:600; } .activity-item small { margin-top:4px; color:#aab1bd; font-size:10px; } .orders-panel { padding-bottom:9px; } .table-wrap { overflow-x:auto; margin-top:17px; } table { width:100%; min-width:640px; border-collapse:collapse; text-align:left; } th { padding:0 12px 11px; color:#a4acba; font-size:9px; font-weight:700; letter-spacing:.08em; } td { padding:13px 12px; border-top:1px solid #f0f1f5; color:#4a556b; font-size:11px; } td strong { color:#303b51; font-weight:600; } .muted-cell { color:#9ca5b4; } .status { display:inline-flex; align-items:center; gap:6px; padding:5px 8px; border-radius:5px; font-size:10px; font-weight:600; } .status i { width:5px; height:5px; border-radius:50%; background:currentColor; } .status.success { color:#24966f; background:#e8f7f1; } .status.warning { color:#bd8120; background:#fff4df; } .status.danger { color:#d46768; background:#ffebeb; } .row-menu { border:0; color:#9aa3b3; background:transparent; letter-spacing:2px; } .page-footer { display:flex; justify-content:space-between; padding:24px 2px 0; color:#a5adbb; font-size:10px; }
.sidebar-backdrop { display:none; } @media (max-width:900px) { .sidebar { width:220px; flex-basis:220px; } .topbar,.content-wrap { padding-left:25px; padding-right:25px; } .stats-grid { grid-template-columns:repeat(2,1fr); } .dashboard-grid { grid-template-columns:1fr; } } @media (max-width:640px) { .sidebar { position:fixed; z-index:20; inset:0 auto 0 0; width:270px; transform:translateX(-100%); transition:transform .22s ease; } .sidebar.is-open { transform:translateX(0); } .sidebar-backdrop { position:fixed; z-index:10; inset:0; display:block; visibility:hidden; background:#0f172a99; opacity:0; transition:opacity .22s ease,visibility .22s ease; } .sidebar-backdrop.is-visible { visibility:visible; opacity:1; } .close-sidebar { display:block; } .topbar { height:62px; padding:0 17px; } .menu-toggle { display:block; margin-right:14px; font-size:20px; } .breadcrumbs span,.breadcrumbs b { display:none; } .topbar-actions { gap:11px; } .content-wrap { padding:27px 17px 20px; } .page-heading { align-items:flex-start; flex-direction:column; gap:18px; margin-bottom:24px; } .page-heading h1 { font-size:26px; } .primary-button { width:100%; justify-content:center; } .stats-grid { gap:10px; margin-bottom:10px; } .stat-card { padding:15px 14px; } .stat-card-top { min-height:29px; align-items:flex-start; gap:5px; } .stat-card>strong { font-size:20px; margin-top:9px; } .stat-card-top span:first-child { max-width:90px; line-height:1.35; } .dashboard-grid { gap:10px; margin-bottom:10px; } .panel { padding:17px 14px; } .chart-panel { overflow:hidden; } .chart { height:185px; margin-top:24px; } .activity-panel { min-height:auto; } .orders-panel .panel-heading { display:block; } .orders-panel .text-link { display:inline-block; margin-top:13px; } .page-footer { flex-direction:column; gap:6px; padding-top:18px; } }
.calendar-panel { padding-bottom: 14px; }
.calendar-actions { display:flex; align-items:center; gap:8px; }
.today-button, .outline-button { min-height:31px; padding:0 11px; border:1px solid var(--line); border-radius:5px; color:#59657b; background:#fff; font-size:10px; font-weight:600; }
.week-calendar { display:grid; grid-template-columns:76px repeat(7, minmax(116px, 1fr)); min-width:930px; margin-top:23px; }
.calendar-panel { overflow-x:auto; }
.meal-labels, .day-column { display:grid; grid-template-rows:40px repeat(3, 92px); gap:7px; }
.meal-labels { padding-right:10px; }
.meal-labels strong { align-self:center; color:#9da6b5; font-size:9px; font-weight:600; white-space:nowrap; }
.day-column { padding:0 5px; border-left:1px solid #f0f1f5; }
.day-column.is-today { background:#fafbff; }
.day-heading { display:flex; align-items:center; justify-content:center; gap:5px; border-bottom:2px solid transparent; color:#7d8799; font-size:10px; }
.day-heading b { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#4b566c; background:#f1f3f7; font-size:11px; }
.is-today .day-heading { color:var(--blue); border-color:var(--blue); font-weight:700; }.is-today .day-heading b { color:#fff; background:var(--blue); }
.meal-slot { position:relative; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; min-width:0; padding:8px; border:1px solid transparent; border-radius:7px; text-align:left; transition:transform .15s ease, box-shadow .15s ease; }.meal-slot:hover { transform:translateY(-2px); box-shadow:0 5px 12px #1b2a4a12; }.meal-slot small { margin-bottom:5px; color:#8c96a8; font-size:8px; font-weight:700; }.meal-slot strong { color:#3b465c; font-size:10px; line-height:1.3; }.meal-slot.breakfast { background:#fff8e9; border-color:#f8eccf; }.meal-slot.lunch { background:#eef8f4; border-color:#d9f0e7; }.meal-slot.dinner { background:#f1f0ff; border-color:#e2dffc; }.meal-slot.empty { align-items:center; justify-content:center; border:1px dashed #cfd5e0; background:#fbfcfd; }.meal-slot.empty small { color:#a2abba; }.meal-slot.empty strong { color:#9ca6b5; font-weight:500; }.add-meal { margin-top:4px; color:var(--blue); font-size:15px; line-height:1; }
.lower-grid { display:grid; grid-template-columns:minmax(0,1.3fr) minmax(290px,1fr); gap:18px; margin-top:18px; }.shopping-list { margin-top:17px; }.shopping-item { display:flex; align-items:center; gap:10px; min-height:48px; border-bottom:1px solid #f0f1f5; cursor:pointer; }.shopping-item input { position:absolute; opacity:0; }.checkmark { display:grid; place-items:center; width:17px; height:17px; flex:0 0 auto; border:1px solid #d7dce5; border-radius:4px; background:#fff; }.shopping-item input:checked + .checkmark { border-color:var(--green); background:var(--green); }.shopping-item input:checked + .checkmark:after { content:'✓'; color:#fff; font-size:11px; }.shopping-item > span:nth-of-type(2) { flex:1; }.shopping-item strong,.shopping-item small { display:block; }.shopping-item strong { color:#3f4a60; font-size:11px; font-weight:600; }.shopping-item small { margin-top:3px; color:#a4adba; font-size:9px; }.shopping-item > b { color:#768196; font-size:10px; font-weight:600; }.outline-button { display:flex; align-items:center; gap:6px; margin-top:15px; color:var(--blue); }.outline-button span { font-size:15px; }.quick-action { display:flex; align-items:center; gap:11px; min-height:57px; border-bottom:1px solid #f0f1f5; color:inherit; text-decoration:none; }.quick-action:last-child { border:0; }.quick-icon { display:grid; place-items:center; width:30px; height:30px; border-radius:8px; font-size:13px; }.quick-action > span:nth-child(2) { flex:1; }.quick-action strong,.quick-action small { display:block; }.quick-action strong { color:#3f4a60; font-size:11px; font-weight:600; }.quick-action small { margin-top:3px; color:#a4adba; font-size:9px; }.quick-action > b { color:#a0a9b7; font-size:16px; font-weight:400; }.nav-count.alert { color:#ffd0a1; background:#5a4261; }
@media (max-width:900px) { .lower-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .calendar-heading { display:block; }.calendar-actions { margin-top:15px; }.week-calendar { margin-top:18px; }.lower-grid { gap:10px; margin-top:10px; }.meal-labels, .day-column { grid-template-rows:40px repeat(3, 83px); }.meal-slot { padding:6px; }.meal-slot strong { font-size:9px; }.meal-labels strong { font-size:8px; }.today-button { min-height:32px; } }
.empty-content { min-height: calc(100vh - 73px); background: #fff; }
.products-content { max-width: 1420px; }
.product-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:16px; }
.product-summary { display:flex; align-items:baseline; gap:7px; color:var(--muted); font-size:11px; }.product-summary strong { color:var(--ink); font:700 22px 'Space Grotesk',sans-serif; }.product-filters { display:flex; align-items:center; gap:9px; }.search-field { display:flex; align-items:center; gap:8px; width:210px; height:32px; padding:0 10px; border:1px solid var(--line); border-radius:5px; color:#98a2b2; background:#fff; }.search-field input { width:100%; border:0; outline:0; color:var(--ink); background:transparent; font-size:10px; }.search-field input::placeholder { color:#aab2bf; }
.products-panel { padding:10px 21px 12px; }
.table-footer { display:flex; align-items:center; justify-content:space-between; padding:15px 12px 0; color:#a2abb9; font-size:10px; }
.pagination-button { min-width:28px; height:28px; margin-left:4px; border:1px solid var(--line); border-radius:5px; color:#7c8798; background:#fff; font-size:11px; }
.pagination-button:disabled { color:#d1d6df; cursor:not-allowed; }
.pagination-button.current { border-color:var(--blue); color:#fff; background:var(--blue); }
@media (max-width:640px) { .empty-content { min-height:calc(100vh - 62px); }.product-toolbar { display:block; }.product-filters { margin-top:14px; }.search-field { flex:1; width:auto; }.products-panel { padding:8px 10px 10px; }.table-footer { align-items:flex-start; gap:12px; flex-direction:column; padding-left:8px; padding-right:8px; }.products-content .page-heading { margin-bottom:20px; } }

.product-list { display:flex; flex-direction:column; margin:0; padding:0; list-style:none; }
.product-row { display:flex; align-items:center; gap:14px; padding:11px 4px; border-bottom:1px solid #f0f1f5; }
.product-row:last-child { border-bottom:0; }
.product-row-photo { display:block; flex:0 0 auto; width:48px; height:48px; border-radius:10px; object-fit:cover; }
.product-row-photo-empty { display:grid; place-items:center; background:var(--canvas); color:#b7bfcc; font-size:20px; }
.product-row-photo-button { flex:0 0 auto; padding:0; border:0; background:transparent; border-radius:10px; cursor:zoom-in; }
.product-row-photo-button:hover .product-row-photo { outline:2px solid var(--blue); outline-offset:2px; }
.product-row-name { flex:1; min-width:0; overflow:hidden; color:var(--ink); font-size:14px; font-weight:600; text-overflow:ellipsis; white-space:nowrap; }
.product-row-quantity { flex:0 0 auto; padding:3px 9px; border-radius:6px; color:#768095; background:var(--canvas); font-size:11px; font-weight:600; white-space:nowrap; }
.product-row-price { flex:0 0 auto; min-width:64px; color:var(--muted); font-size:13px; font-weight:600; text-align:right; white-space:nowrap; }
.product-row-edit,.product-row-delete { display:grid; flex:0 0 auto; place-items:center; width:36px; height:36px; border:1px solid var(--line); border-radius:9px; color:#8b93a3; background:#fff; text-decoration:none; }
.product-row-edit:hover { border-color:#c7cffc; color:var(--blue); background:#eef0ff; }
.product-row-delete:hover { border-color:#f3c6c6; color:#c0433f; background:#fff3f3; }

.lightbox { position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:32px; background:#0f172ae0; }
.lightbox.is-open { display:flex; }
.lightbox img { max-width:min(600px, 100%); max-height:100%; border-radius:12px; box-shadow:0 24px 70px #0000004d; object-fit:contain; }
.lightbox-close { position:absolute; top:20px; right:20px; display:grid; place-items:center; width:40px; height:40px; border:0; border-radius:50%; color:#fff; background:#ffffff26; font-size:24px; line-height:1; }
.lightbox-close:hover { background:#ffffff40; }
@media (max-width:640px) { .product-row-photo,.product-row-photo-empty { width:40px; height:40px; } .product-row-name { font-size:13px; } .lightbox { padding:16px; } .lightbox-close { top:12px; right:12px; width:36px; height:36px; } }
.back-button { display:grid; flex:0 0 auto; place-items:center; width:32px; height:32px; margin-right:14px; border:1px solid var(--line); border-radius:8px; color:#5c6579; background:#fff; }
.back-button:hover { border-color:#c7cffc; color:var(--blue); background:#eef0ff; }
.form-errors { margin-bottom:16px; padding:12px 16px; border:1px solid #f3c6c6; border-radius:8px; color:#b3413f; background:#fff3f3; font-size:12px; }
.form-errors p { margin:0; }
.form-errors p + p { margin-top:4px; }

.empty-state { display:flex; flex-direction:column; align-items:center; gap:6px; padding:64px 24px; text-align:center; }
.empty-state-icon { display:grid; place-items:center; width:48px; height:48px; margin-bottom:10px; border-radius:12px; color:var(--blue); background:#e9edff; font-size:22px; }
.empty-state h2 { margin:0; font:700 17px 'Space Grotesk',sans-serif; }
.empty-state p { margin:0 0 14px; max-width:320px; }
.empty-state .primary-button { margin-top:4px; }

.field { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:600; color:var(--muted); }
.field input,.field select { height:40px; padding:0 12px; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:#fff; font-size:13px; font-weight:400; }
.field input:focus,.field select:focus { outline:2px solid #536dfe55; outline-offset:1px; border-color:var(--blue); }
.field select { cursor:pointer; }
.field-row { display:flex; gap:14px; }
.field-quantity { flex:1; }
.field-unit { flex:0 0 110px; }

.product-form-panel { max-width:560px; padding:28px; }
.product-form { display:flex; flex-direction:column; gap:26px; }
.product-form-photo { display:flex; align-items:center; gap:16px; }
.photo-preview { display:grid; place-items:center; width:88px; height:88px; flex:0 0 auto; overflow:hidden; border:1px dashed var(--line); border-radius:14px; color:#c2c9d6; background:var(--canvas); font-size:26px; }
.photo-preview img { width:100%; height:100%; object-fit:cover; }
.photo-upload-button { position:relative; display:inline-flex; align-items:center; width:fit-content; min-height:36px; padding:0 14px; cursor:pointer; }
.photo-upload-button input[type="file"] { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; white-space:nowrap; clip:rect(0,0,0,0); border:0; }
.product-form-fields { display:flex; flex-direction:column; gap:20px; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; padding-top:18px; border-top:1px solid var(--line); }
.form-actions .outline-button,.form-actions .primary-button { min-height:38px; padding:0 18px; }
.form-actions a.outline-button { display:inline-flex; align-items:center; text-decoration:none; }