/* ============================================================
   IXXO Cart 8 — shop admin and vendor panel frame
   Navy sidebar (logo, the shop card, the menu with its counts and
   the set-apart Settings, the plan usage box at the foot), a top bar
   with the menu button and the user menu, the content area.
   ============================================================ */
.ic-app{ display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-block-size: 100%; }
.ic-sidebar{
	position: sticky; inset-block-start: 0; block-size: 100dvh;
	display: flex; flex-direction: column; gap: var(--s-2);
	background: var(--side-bg); color: var(--side-ink);
	padding: var(--s-3); overflow-y: auto;
	scrollbar-width: none;
}
.ic-sidebar::-webkit-scrollbar{ display: none; }
.ic-sidebar :focus-visible{ outline-color: var(--side-focus); }
.ic-brand-row{ display: flex; align-items: center; justify-content: space-between; padding: var(--s-2) var(--s-2) var(--s-3); }
.ic-brand-row .ic-logo{ block-size: 20px; inline-size: auto; color: var(--side-ink-strong); }
.ic-env{ font-size: var(--t-11); color: var(--side-ink-2); border: 1px solid var(--side-line); padding: 1px 6px; border-radius: var(--r-xs); }
.ic-nav{ display: flex; flex-direction: column; gap: 1px; }
.ic-nav-group{ display: flex; flex-direction: column; gap: 1px; margin-block-start: var(--s-3); }
.ic-nav-group:first-child{ margin-block-start: 0; }
.ic-nav-label{ font-size: var(--t-12); color: var(--side-ink-2); padding: var(--s-2) var(--s-3) var(--s-1); font-weight: 500; }
.ic-nav-link{
	display: flex; align-items: center; gap: var(--s-3);
	min-block-size: 34px; padding: 0 var(--s-3); border-radius: var(--r-sm);
	color: var(--side-ink); font-weight: 500; text-decoration: none;
	transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.ic-nav-link .ic-icon{ color: var(--side-ink-2); transition: color var(--dur-fast) var(--ease-out); }
.ic-nav-link:hover{ background: var(--side-hover); color: var(--side-ink-strong); text-decoration: none; }
.ic-nav-link:hover .ic-icon{ color: var(--side-ink); }
.ic-nav-link[aria-current]{ background: var(--side-active); color: var(--side-ink-strong); }
.ic-nav-link[aria-current] .ic-icon{ color: var(--logo-orange); }
.ic-nav-text{ flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The number of waiting work after a label: orange, so it reads as something to do. */
.ic-nav-count{ flex: none; min-inline-size: 20px; padding: 0 7px; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent); font-size: var(--t-12); line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
/* A group set apart (Settings): a line above it, away from the daily work. */
.ic-nav-group.ic-nav-apart{ margin-block-start: var(--s-4); padding-block-start: var(--s-3); border-block-start: 1px solid var(--side-line); }
/* The shop card: whose admin this is, right under the logo. */
.ic-shop-card{ display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); border: 1px solid var(--side-line); background: var(--side-hover); min-inline-size: 0; }
.ic-store-mark{ inline-size: 32px; block-size: 32px; border-radius: var(--r-md); display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 var(--t-13)/1 var(--font-display); flex: none; }
.ic-shop-card-text{ display: flex; flex-direction: column; gap: 2px; min-inline-size: 0; }
.ic-shop-name{ display: block; font-weight: 600; line-height: 1.2; color: var(--side-ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ic-shop-domain{ display: flex; align-items: center; gap: 6px; font-size: var(--t-12); color: var(--side-ink-2); white-space: nowrap; min-inline-size: 0; }
.ic-shop-address{ overflow: hidden; text-overflow: ellipsis; }
.ic-live-dot{ flex: none; inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--warning) 30%, transparent); }
.ic-live-dot.is-live{ background: var(--success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--success) 30%, transparent); }
/* The plan usage box, pushed to the foot of the sidebar. */
.ic-sidebar-foot{ margin-block-start: auto; padding-block-start: var(--s-3); }
.ic-plan-usage{ display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-3); border-radius: var(--r-md); background: var(--side-hover); border: 1px solid var(--side-line); }
.ic-plan-title{ font-size: var(--t-12); font-weight: 600; color: var(--side-ink); }
.ic-plan-row{ display: flex; justify-content: space-between; gap: var(--s-2); font-size: var(--t-12); color: var(--side-ink-2); }
.ic-plan-value{ color: var(--side-ink-strong); font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ic-meter{ block-size: 6px; border-radius: 6px; background: var(--side-active); overflow: hidden; }
.ic-meter-bar{ display: block; block-size: 100%; border-radius: 6px; background: var(--logo-orange); }
.ic-meter-bar.is-warning{ background: var(--warning); }
.ic-meter-bar.is-danger{ background: var(--danger); }
/* The bar's width in steps of 5 (the strict policy allows no inline style). */
.ic-meter-0{ inline-size: 0%; } .ic-meter-5{ inline-size: 5%; } .ic-meter-10{ inline-size: 10%; } .ic-meter-15{ inline-size: 15%; }
.ic-meter-20{ inline-size: 20%; } .ic-meter-25{ inline-size: 25%; } .ic-meter-30{ inline-size: 30%; } .ic-meter-35{ inline-size: 35%; }
.ic-meter-40{ inline-size: 40%; } .ic-meter-45{ inline-size: 45%; } .ic-meter-50{ inline-size: 50%; } .ic-meter-55{ inline-size: 55%; }
.ic-meter-60{ inline-size: 60%; } .ic-meter-65{ inline-size: 65%; } .ic-meter-70{ inline-size: 70%; } .ic-meter-75{ inline-size: 75%; }
.ic-meter-80{ inline-size: 80%; } .ic-meter-85{ inline-size: 85%; } .ic-meter-90{ inline-size: 90%; } .ic-meter-95{ inline-size: 95%; }
.ic-meter-100{ inline-size: 100%; }
/* The gallery's samples of the sidebar blocks (development and staging only). */
.ic-gallery-frames{ display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s-4); }
.ic-gallery-frame{ display: flex; flex-direction: column; gap: var(--s-2); inline-size: 100%; max-inline-size: 280px; padding: var(--s-3); border-radius: var(--r-md); background: var(--side-bg); color: var(--side-ink); }
.ic-gallery-frame :focus-visible{ outline-color: var(--side-focus); }
/* The gallery's samples of the top bar blocks: on the page's own canvas, as wide as a panel. */
.ic-gallery-topbar{ display: flex; flex-direction: column; gap: var(--s-2); inline-size: 100%; max-inline-size: 600px; }
.ic-main{ display: flex; flex-direction: column; min-inline-size: 0; }
.ic-topbar{
	position: sticky; inset-block-start: env(safe-area-inset-top, 0px); z-index: var(--z-sticky);
	display: flex; align-items: center; gap: var(--s-3);
	min-block-size: 56px; padding: 0 var(--s-6);
	background: color-mix(in oklch, var(--canvas) 88%, transparent);
	backdrop-filter: saturate(1.4) blur(10px);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	border-block-end: 1px solid var(--line);
}
.ic-menu-btn{ display: none; }
.ic-top-actions{ margin-inline-start: auto; display: flex; align-items: center; gap: var(--s-1); }
.ic-user-button{ display: inline-flex; align-items: center; gap: var(--s-2); padding-block: 2px; padding-inline: 2px var(--s-2); border: 0; background: transparent; border-radius: var(--r-pill); color: var(--ink); font: 500 var(--t-13)/1 var(--font-ui); cursor: pointer; }
.ic-user-button:hover{ background: var(--surface-3); }
.ic-content{ --ic-dock-gutter: var(--s-6); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-6); inline-size: 100%; max-inline-size: var(--content-max); margin-inline: auto; }
.ic-scrim{ display: none; }
@media (max-width: 1024px){
	.ic-app{ grid-template-columns: minmax(0, 1fr); }
	.ic-sidebar{
		position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: 280px; max-inline-size: 86vw; z-index: var(--z-drawer);
		transform: translateX(calc(-100% * var(--ic-dir))); transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
		box-shadow: var(--shadow-modal); padding-block-start: calc(var(--s-3) + env(safe-area-inset-top, 0px));
		/* Closed, its links are out of the Tab order too (hidden once it has slid away). */
		visibility: hidden;
	}
	.ic-app.is-nav-open .ic-sidebar{ transform: none; visibility: visible; transition-delay: 0s; }
	.ic-app.is-nav-open .ic-scrim{ display: block; position: fixed; inset: 0; background: var(--scrim); z-index: calc(var(--z-drawer) - 1); }
	.ic-menu-btn{ display: inline-flex; }
}
@media (max-width: 720px){
	.ic-topbar{ padding: 0 var(--s-4); }
	.ic-content{ --ic-dock-gutter: var(--s-4); padding: var(--s-4); gap: var(--s-4); }
	/* The user's name goes; the shop card lives in the sidebar drawer and keeps everything. */
	.ic-user-name{ display: none; }
}