/* ===================================================================================== Spicchio Roma — back office design system ------------------------------------------------------------------------------------- One stylesheet, no framework, no CDN. Everything is a custom property, so the whole surface retints from the block below. The palette is the storefront's, taken from frontend/src/app/globals.css: brand red #b33017, gold #f9b217, cream #efe8db, ink #2a1f1b. A back office that looks like a different product than the shop it runs is a back office people distrust. ===================================================================================== */ /* ------------------------------------------------------------------------------------- Tokens ------------------------------------------------------------------------------------- */ :root { /* Brand */ --brand: #b33017; --brand-dark: #8f230f; --brand-darker: #200d08; --gold: #f9b217; --gold-dark: #d8960b; /* Surfaces — warm, never a clinical blue-grey */ --bg: #f5f2ed; --surface: #ffffff; --surface-2: #faf8f4; --surface-3: #f0ebe3; --border: #e6dfd4; --border-strong: #d5cabb; /* Text */ --text: #2a1f1b; --text-muted: #75665d; --text-faint: #a1938a; --text-invert: #ffffff; /* Semantic */ --success: #3f7c33; --success-soft: #e7f2e3; --warning: #c2761a; --warning-soft: #fdf1de; --danger: #b33017; --danger-soft: #fbeae6; --info: #2f6b8f; --info-soft: #e6f0f6; --neutral-soft: #eee9e1; /* Sidebar — dark in both themes, deliberately. It is the frame, not the content. */ --rail-bg: #1c1817; --rail-bg-top: #241a16; --rail-text: #c9bdb4; --rail-text-strong: #ffffff; --rail-muted: #8a7c73; --rail-hover: rgba(255, 255, 255, 0.06); --rail-active: rgba(179, 48, 23, 0.22); --rail-border: rgba(255, 255, 255, 0.07); /* Geometry */ --rail-w: 268px; --rail-w-collapsed: 76px; --topbar-h: 68px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-full: 999px; --shadow-xs: 0 1px 2px rgba(42, 31, 27, 0.05); --shadow-sm: 0 1px 3px rgba(42, 31, 27, 0.07), 0 1px 2px rgba(42, 31, 27, 0.04); --shadow-md: 0 4px 16px rgba(42, 31, 27, 0.08), 0 1px 3px rgba(42, 31, 27, 0.05); --shadow-lg: 0 18px 48px rgba(42, 31, 27, 0.16); --ease: cubic-bezier(0.4, 0, 0.2, 1); --font: "Segoe UI", -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "Cascadia Mono", "SF Mono", "JetBrains Mono", Consolas, monospace; } /* Dark theme. Three states, and all three have to work: an explicit choice stamps data-theme on , and the default "follow the OS" stamps nothing. So the tokens are declared twice — once behind the media query (guarded, so an explicit light choice still wins) and once behind the attribute (so the toggle wins in both directions). The rail stays dark either way: it is the frame, not the content. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #15100e; --surface: #1e1917; --surface-2: #241e1b; --surface-3: #2c2421; --border: #322a26; --border-strong: #453a35; --text: #ece4dc; --text-muted: #a2938a; --text-faint: #7c6e66; --success: #6aa85b; --warning: #d99a3c; --info: #63a3c8; --success-soft: #1d2b1a; --warning-soft: #2e2213; --danger-soft: #2e1512; --info-soft: #14212a; --neutral-soft: #2a2320; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } } :root[data-theme="dark"] { --bg: #15100e; --surface: #1e1917; --surface-2: #241e1b; --surface-3: #2c2421; --border: #322a26; --border-strong: #453a35; --text: #ece4dc; --text-muted: #a2938a; --text-faint: #7c6e66; --success: #6aa85b; --warning: #d99a3c; --info: #63a3c8; --success-soft: #1d2b1a; --warning-soft: #2e2213; --danger-soft: #2e1512; --info-soft: #14212a; --neutral-soft: #2a2320; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.6); } /* The theme button shows the icon for the mode it will switch TO. */ .theme-toggle .icon-moon { display: block; } .theme-toggle .icon-sun { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } /* ------------------------------------------------------------------------------------- Base ------------------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.012em; } p { margin: 0; } svg { flex: none; } /* One rule drives every icon. The sprite in partials/_icons.html holds stroke-only shapes; stroke and stroke-width inherit down into , so size and colour are whatever the calling element says they are. */ .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-sm); } .u-visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ------------------------------------------------------------------------------------- Shell ------------------------------------------------------------------------------------- */ .shell { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); min-height: 100vh; transition: grid-template-columns 220ms var(--ease); } html[data-sidebar="collapsed"] .shell { grid-template-columns: var(--rail-w-collapsed) minmax(0, 1fr); } .main { display: flex; flex-direction: column; min-width: 0; } .content { flex: 1; padding: 26px 30px 56px; max-width: 1560px; width: 100%; } /* ------------------------------------------------------------------------------------- Sidebar ------------------------------------------------------------------------------------- */ .rail { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #241a16 0%, #1c1817 38%, #161211 100%); border-right: 1px solid var(--rail-border); box-shadow: 2px 0 16px rgba(0, 0, 0, 0.28); overflow: hidden; z-index: 40; } .rail__head { display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 16px; border-bottom: 1px solid var(--rail-border); background: rgba(0, 0, 0, 0.15); flex: none; } .brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; text-decoration: none; } .brand__mark { width: 36px; height: 36px; flex: none; border-radius: 10px; background: linear-gradient(135deg, var(--brand) 0%, #831b08 100%); border: 1px solid rgba(249, 178, 23, 0.35); display: grid; place-items: center; box-shadow: 0 2px 12px rgba(179, 48, 23, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease); } .brand:hover .brand__mark { transform: scale(1.04); box-shadow: 0 4px 16px rgba(179, 48, 23, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .brand__text { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; } .brand__name { display: block; color: #ffffff; font-size: 14.5px; font-weight: 750; letter-spacing: -0.015em; white-space: nowrap; line-height: 1.2; } .brand__tagline { display: flex; align-items: center; gap: 6px; } .brand__badge { display: inline-block; color: var(--gold); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(249, 178, 23, 0.12); border: 1px solid rgba(249, 178, 23, 0.25); padding: 1px 5px; border-radius: 4px; line-height: 1.2; white-space: nowrap; } .brand__status { width: 6px; height: 6px; border-radius: var(--r-full); background: #4ade80; box-shadow: 0 0 8px #4ade80; flex: none; } .rail__toggle { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border: 1px solid var(--rail-border); border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); color: var(--rail-muted); cursor: pointer; transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease); } .rail__toggle:hover { color: #ffffff; background: var(--rail-hover); border-color: rgba(255, 255, 255, 0.16); } .rail__toggle svg { transition: transform 220ms var(--ease); } html[data-sidebar="collapsed"] .rail__toggle svg { transform: rotate(180deg); } /* Quickbar: Live store & Django Admin shortcuts */ .rail__quickbar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 14px 4px; flex: none; } .rail__quicklink { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 8px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); color: var(--rail-text); font-size: 11.5px; font-weight: 600; text-decoration: none; transition: background 140ms var(--ease), color 140ms var(--ease), border-color 140ms var(--ease); } .rail__quicklink:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.14); color: #ffffff; } .rail__quicklink svg { width: 13px; height: 13px; opacity: 0.8; } .rail__quicklink-ext { width: 10px !important; height: 10px !important; opacity: 0.45 !important; } .rail__nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 12px 24px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.15) transparent; } .rail__nav::-webkit-scrollbar { width: 6px; } .rail__nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: var(--r-full); } /* Category section titles */ .nav__section-header { padding: 16px 10px 6px; color: #92847c; font-size: 10px; font-weight: 750; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .nav__section-header:first-child { padding-top: 4px; } .nav__group + .nav__group { margin-top: 2px; } .nav__row { display: flex; align-items: center; gap: 2px; position: relative; } .nav__row .nav__item { flex: 1; min-width: 0; } .nav__item { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-sm); color: var(--rail-text); font-size: 13px; font-weight: 550; white-space: nowrap; text-decoration: none; transition: background 140ms var(--ease), color 140ms var(--ease), transform 120ms var(--ease); } .nav__item:hover { background: var(--rail-hover); color: #ffffff; } .nav__item.is-active { background: linear-gradient(90deg, rgba(179, 48, 23, 0.32) 0%, rgba(179, 48, 23, 0.12) 100%); color: #ffffff; font-weight: 650; border: 1px solid rgba(179, 48, 23, 0.35); } .nav__item.is-active::before { content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%); width: 4px; height: 22px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dark) 100%); box-shadow: 0 0 10px rgba(249, 178, 23, 0.65); } .nav__icon-wrap { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex: none; } .nav__icon { width: 17px; height: 17px; opacity: 0.85; } .nav__item.is-active .nav__icon { opacity: 1; color: var(--gold); } .nav__text { flex: 1; overflow: hidden; text-overflow: ellipsis; } .nav__badge { flex: none; min-width: 20px; height: 19px; padding: 0 6px; border-radius: var(--r-full); background: linear-gradient(135deg, var(--brand) 0%, #8f230f 100%); border: 1px solid rgba(255, 255, 255, 0.18); color: #ffffff; font-size: 11px; font-weight: 750; line-height: 17px; text-align: center; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3); } .nav__badge--subtle { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.08); color: #e5ddd7; font-weight: 600; font-size: 10.5px; } .nav__disclose { flex: none; display: grid; place-items: center; width: 26px; height: 32px; border: 0; border-radius: var(--r-sm); background: none; color: var(--rail-muted); cursor: pointer; transition: color 140ms var(--ease), background 140ms var(--ease); } .nav__disclose:hover { color: #ffffff; background: var(--rail-hover); } .nav__disclose svg { width: 13px; height: 13px; transition: transform 160ms var(--ease); } .nav__group.is-open .nav__disclose svg { transform: rotate(90deg); color: var(--gold); } /* Child navigation container */ .nav__children { display: none; position: relative; margin: 3px 0 6px 18px; padding-left: 10px; border-left: 1px solid rgba(255, 255, 255, 0.12); } .nav__group.is-open .nav__children { display: flex; flex-direction: column; gap: 1px; } .nav__item--child { padding: 6px 9px; font-size: 12.5px; color: var(--rail-muted); border-radius: var(--r-sm); display: flex; align-items: center; gap: 8px; text-decoration: none; } .nav__child-dot { width: 4px; height: 4px; border-radius: var(--r-full); background: rgba(255, 255, 255, 0.25); flex: none; transition: background 140ms var(--ease), transform 140ms var(--ease); } .nav__item--child:hover { color: #ffffff; background: var(--rail-hover); } .nav__item--child:hover .nav__child-dot { background: var(--gold); transform: scale(1.4); } .nav__item--child.is-active { color: #ffffff; background: rgba(249, 178, 23, 0.12); border: 1px solid rgba(249, 178, 23, 0.25); font-weight: 600; } .nav__item--child.is-active .nav__child-dot { background: var(--gold); box-shadow: 0 0 6px var(--gold); transform: scale(1.5); } /* Collapsed rail mode */ html[data-sidebar="collapsed"] .brand__text, html[data-sidebar="collapsed"] .brand__tagline, html[data-sidebar="collapsed"] .nav__text, html[data-sidebar="collapsed"] .nav__section-header, html[data-sidebar="collapsed"] .rail__foot-text, html[data-sidebar="collapsed"] .rail__quicklink-text, html[data-sidebar="collapsed"] .rail__quicklink-ext, html[data-sidebar="collapsed"] .nav__disclose, html[data-sidebar="collapsed"] .nav__children { display: none !important; } html[data-sidebar="collapsed"] .rail__quickbar { grid-template-columns: 1fr; padding: 8px 10px; } html[data-sidebar="collapsed"] .rail__quicklink { padding: 8px 0; justify-content: center; } html[data-sidebar="collapsed"] .nav__item { justify-content: center; padding: 11px 0; } html[data-sidebar="collapsed"] .nav__badge { position: absolute; top: 4px; right: 10px; min-width: 8px; height: 8px; padding: 0; font-size: 0; line-height: 0; } html[data-sidebar="collapsed"] .nav__item[data-tip]:hover::after, html[data-sidebar="collapsed"] .rail__quicklink[data-tip]:hover::after { content: attr(data-tip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 6px 12px; border-radius: var(--r-sm); background: #241b18; border: 1px solid rgba(255, 255, 255, 0.16); color: #ffffff; font-size: 12.5px; font-weight: 600; box-shadow: var(--shadow-lg); white-space: nowrap; z-index: 60; pointer-events: none; } /* Rail foot: staff user card */ .rail__foot { flex: none; padding: 12px; border-top: 1px solid var(--rail-border); background: rgba(0, 0, 0, 0.2); } .rail__user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); min-width: 0; } .avatar-wrap { position: relative; flex: none; } .avatar { width: 34px; height: 34px; flex: none; border-radius: var(--r-full); display: grid; place-items: center; background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--brand-darker); font-size: 12px; font-weight: 800; letter-spacing: 0.02em; border: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .avatar-status { position: absolute; bottom: -1px; right: -1px; width: 9px; height: 9px; border-radius: var(--r-full); background: #22c55e; border: 2px solid #1c1817; box-shadow: 0 0 6px #22c55e; } .rail__foot-text { min-width: 0; flex: 1; overflow: hidden; } .rail__user-name { display: block; color: #ffffff; font-size: 12.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .rail__user-mail { display: block; color: var(--rail-muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; } .rail__logout-form { margin: 0; display: flex; } .rail__logout { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--r-sm); background: transparent; color: var(--rail-muted); cursor: pointer; transition: color 140ms var(--ease), background 140ms var(--ease), border-color 140ms var(--ease); } .rail__logout:hover { color: #ffffff; background: rgba(179, 48, 23, 0.4); border-color: rgba(179, 48, 23, 0.6); } html[data-sidebar="collapsed"] .rail__user { flex-direction: column; gap: 8px; padding: 8px 0; background: transparent; border-color: transparent; } /* ------------------------------------------------------------------------------------- Topbar ------------------------------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 16px; height: var(--topbar-h); padding: 0 30px; background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .topbar__burger { display: none; width: 36px; height: 36px; place-items: center; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); color: var(--text-muted); cursor: pointer; } .topbar__titles { min-width: 0; flex: 1; } /* Three lines inside a 68px bar, so the trail is deliberately small: it is orientation, not content. Below 1024px it goes away entirely — the back button beside it does the same job in one tap and the bar has no room to spare. */ .crumbs { display: flex; align-items: center; gap: 6px; margin-bottom: 1px; font-size: 11.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; } .crumbs__link { color: var(--text-muted); text-decoration: none; transition: color 140ms var(--ease); } .crumbs__link:hover { color: var(--brand); text-decoration: underline; } .crumbs__sep { color: var(--text-muted); opacity: 0.45; } .crumbs__here { color: var(--text); font-weight: 600; } .topbar__title { font-size: 18px; font-weight: 680; line-height: 1.25; } .topbar__subtitle { color: var(--text-muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar__actions { display: flex; align-items: center; gap: 9px; flex: none; } /* ------------------------------------------------------------------------------------- Buttons ------------------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 90ms var(--ease), box-shadow 140ms var(--ease); } .btn:hover { background: var(--surface-2); border-color: var(--text-faint); } .btn:active { transform: translateY(1px); } .btn--primary { background: linear-gradient(140deg, var(--brand), var(--brand-dark)); border-color: var(--brand-dark); color: #fff; box-shadow: 0 1px 3px rgba(179, 48, 23, 0.34); } .btn--primary:hover { background: linear-gradient(140deg, var(--brand-dark), var(--brand-darker)); border-color: var(--brand-darker); } .btn--ghost { background: transparent; border-color: transparent; color: var(--text-muted); } .btn--ghost:hover { background: var(--surface-3); border-color: transparent; color: var(--text); } .btn--sm { height: 30px; padding: 0 10px; font-size: 12.5px; } .btn--block { width: 100%; } .btn--lg { height: 44px; padding: 0 20px; font-size: 14.5px; } .btn svg { width: 15px; height: 15px; } /* ------------------------------------------------------------------------------------- Cards ------------------------------------------------------------------------------------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .card__head { display: flex; align-items: center; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--border); } .card__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 650; } .card__hint { display: block; color: var(--text-muted); font-size: 12px; font-weight: 400; margin-top: 1px; } .card__body { padding: 18px; } .card__body--flush { padding: 0; } .card__foot { padding: 11px 18px; border-top: 1px solid var(--border); background: var(--surface-2); } /* ------------------------------------------------------------------------------------- Layout helpers ------------------------------------------------------------------------------------- */ /* ------------------------------------------------------------------------------------- Layout helpers & Dashboard ------------------------------------------------------------------------------------- */ .stack { display: grid; gap: 24px; } .section-block { display: grid; gap: 12px; } .btn--secondary { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); } .btn--secondary:hover { background: var(--surface-3); border-color: var(--text-muted); } .btn__ext { width: 12px !important; height: 12px !important; opacity: 0.55; margin-left: 1px; } /* ------------------------------------------------------------------------------------- Dashboard Hero Banner ------------------------------------------------------------------------------------- */ .dashboard-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 24px; background: linear-gradient(135deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border); border-left: 4px solid var(--brand); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); position: relative; overflow: hidden; } .dashboard-hero::after { content: ""; position: absolute; right: -40px; top: -40px; width: 180px; height: 180px; border-radius: var(--r-full); background: radial-gradient(circle, rgba(249, 178, 23, 0.08) 0%, transparent 70%); pointer-events: none; } .dashboard-hero__content { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .dashboard-hero__title { font-size: 20px; font-weight: 750; letter-spacing: -0.02em; color: var(--text); } .dashboard-hero__desc { color: var(--text-muted); font-size: 13px; } .dashboard-hero__meta { display: flex; align-items: center; gap: 14px; margin-top: 4px; font-size: 12px; color: var(--text-muted); } .status-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: var(--r-full); background: var(--success-soft); color: var(--success); font-size: 11.5px; font-weight: 650; } .status-indicator__dot { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--success); box-shadow: 0 0 6px var(--success); animation: pulse-dot 2.2s infinite ease-in-out; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .dashboard-hero__date { font-size: 12px; color: var(--text-faint); font-weight: 500; } .dashboard-hero__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .btn--hero { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text); box-shadow: var(--shadow-xs); } .btn--hero:hover { background: var(--surface-3); border-color: var(--text-muted); } .btn--hero-ghost { background: transparent; border-color: var(--border); color: var(--text-muted); } .btn--hero-ghost:hover { background: var(--surface); color: var(--brand); } /* ------------------------------------------------------------------------------------- KPI Metrics Grid ------------------------------------------------------------------------------------- */ .grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; } .kpi { position: relative; display: flex; flex-direction: column; padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), border-color 160ms var(--ease); } .kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--border-strong); } .kpi--brand::before { background: linear-gradient(90deg, var(--brand) 0%, var(--gold) 100%); } .kpi--gold::before { background: linear-gradient(90deg, var(--gold) 0%, var(--gold-dark) 100%); } .kpi--success::before { background: var(--success); } .kpi--warning::before { background: var(--warning); } .kpi__head { display: flex; align-items: center; gap: 10px; } .kpi__icon-box { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--neutral-soft); color: var(--text-muted); } .kpi__icon-box svg { width: 16px; height: 16px; } .kpi__icon-box--brand { background: var(--danger-soft); color: var(--brand); } .kpi__icon-box--gold { background: var(--warning-soft); color: #b07508; } .kpi__icon-box--success { background: var(--success-soft); color: var(--success); } .kpi__icon-box--warning { background: var(--warning-soft); color: var(--warning); } .kpi__label { color: var(--text-muted); font-size: 12.5px; font-weight: 650; letter-spacing: 0.01em; } .kpi__value { margin: 10px 0 6px; font-size: 28px; font-weight: 750; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); } .kpi__meta { margin-top: auto; display: flex; align-items: center; gap: 7px; color: var(--text-faint); font-size: 12px; font-weight: 500; } .kpi__dot { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--brand); flex: none; } .kpi__dot--pulse { box-shadow: 0 0 6px var(--brand); animation: pulse-dot 2s infinite ease-in-out; } .delta { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px; border-radius: var(--r-full); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; } .delta--up { background: var(--success-soft); color: var(--success); } .delta--down { background: var(--danger-soft); color: var(--danger); } /* ------------------------------------------------------------------------------------- Action Queues ("To do" center) ------------------------------------------------------------------------------------- */ .section-title { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; } .section-title h2 { font-size: 14px; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); } .section-title__badge { font-size: 11px; font-weight: 650; padding: 1px 7px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); } .grid-queue { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .queue { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); text-decoration: none; position: relative; transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), transform 140ms var(--ease); } .queue:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .queue.is-clear { opacity: 0.72; } .queue.is-clear:hover { opacity: 1; } .queue__icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--neutral-soft); color: var(--text-muted); } .queue__icon svg { width: 19px; height: 19px; } .queue--danger .queue__icon { background: var(--danger-soft); color: var(--danger); } .queue--warning .queue__icon { background: var(--warning-soft); color: var(--warning); } .queue--primary .queue__icon { background: var(--info-soft); color: var(--info); } .queue__body { min-width: 0; flex: 1; display: flex; flex-direction: column; } .queue__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .queue__count { font-size: 22px; font-weight: 750; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--text); } .queue__badge { font-size: 10.5px; font-weight: 700; padding: 1px 6px; border-radius: var(--r-full); } .queue__badge--danger { background: var(--danger-soft); color: var(--danger); } .queue__badge--warning { background: var(--warning-soft); color: var(--warning); } .queue__badge--primary { background: var(--info-soft); color: var(--info); } .queue__badge--clear { background: var(--success-soft); color: var(--success); display: inline-flex; align-items: center; gap: 3px; } .queue__badge--clear svg { width: 10px; height: 10px; } .queue__label { font-size: 13px; font-weight: 650; color: var(--text); margin-top: 3px; } .queue__hint { color: var(--text-faint); font-size: 11.5px; line-height: 1.35; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .queue__arrow { flex: none; width: 18px; height: 18px; color: var(--text-faint); transition: transform 140ms var(--ease), color 140ms var(--ease); } .queue:hover .queue__arrow { color: var(--brand); transform: translateX(2px); } /* ------------------------------------------------------------------------------------- Split Layout & Tables ------------------------------------------------------------------------------------- */ .grid-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 20px; align-items: start; } .card__head-text { flex: 1; min-width: 0; } .table--hover tbody tr { transition: background 120ms var(--ease); } .table-link { color: var(--text); text-decoration: none; transition: color 140ms var(--ease); } .table-link:hover { color: var(--brand); text-decoration: underline; } .customer-cell { display: flex; align-items: center; gap: 9px; min-width: 0; } .customer-avatar { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-size: 10.5px; font-weight: 750; display: grid; place-items: center; flex: none; border: 1px solid var(--border); } .customer-email { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Stock meter & chips */ .sku-chip { display: inline-block; font-weight: 700; font-size: 12px; color: var(--text); } .warehouse-tag { color: var(--text-faint); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; } .stock-meter-wrap { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .stock-avail { font-size: 13px; color: var(--text); } .stock-meter { width: 52px; height: 4px; border-radius: var(--r-full); background: var(--neutral-soft); overflow: hidden; } .stock-meter__bar { height: 100%; border-radius: var(--r-full); background: linear-gradient(90deg, var(--danger) 0%, var(--warning) 100%); transition: width 240ms var(--ease); } /* Catalogue health widget */ .health { display: grid; } .health__row { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border); transition: background 120ms var(--ease); } .health__row:hover { background: var(--surface-2); } .health__row:last-child { border-bottom: 0; } .health__count { width: 36px; height: 36px; border-radius: 9px; flex: none; display: grid; place-items: center; font-size: 16px; font-weight: 750; font-variant-numeric: tabular-nums; background: var(--neutral-soft); } .health__count.is-clear { color: var(--success); background: var(--success-soft); } .health__count.is-danger { color: var(--danger); background: var(--danger-soft); } .health__count.is-warning { color: var(--warning); background: var(--warning-soft); } .health__content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .health__label { font-size: 13px; font-weight: 650; color: var(--text); } .health__detail { color: var(--text-faint); font-size: 11.5px; line-height: 1.35; } .health__status-icon { flex: none; } .badge-dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; } .badge-dot--success { background: var(--success); box-shadow: 0 0 6px var(--success); } .badge-dot--danger { background: var(--danger); box-shadow: 0 0 6px var(--danger); } .badge-dot--warning { background: var(--warning); box-shadow: 0 0 6px var(--warning); } /* ------------------------------------------------------------------------------------- Quick Shortcuts Strip ------------------------------------------------------------------------------------- */ .quick-shortcuts { margin-top: 6px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); display: grid; gap: 12px; } .quick-shortcuts__title { font-size: 12.5px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); } .quick-shortcuts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; } .quick-tool { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--border); text-decoration: none; transition: background 140ms var(--ease), border-color 140ms var(--ease), transform 140ms var(--ease); } .quick-tool:hover { background: var(--surface-3); border-color: var(--border-strong); transform: translateY(-1px); } .quick-tool__icon { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--brand); } .quick-tool__icon svg { width: 16px; height: 16px; } .quick-tool__text { min-width: 0; flex: 1; display: flex; flex-direction: column; } .quick-tool__name { font-size: 13px; font-weight: 650; color: var(--text); } .quick-tool__desc { font-size: 11px; color: var(--text-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pill--xs { font-size: 10px; padding: 1px 6px; } /* ------------------------------------------------------------------------------------- Login ------------------------------------------------------------------------------------- A centred card floating on a cream field, with editorial line art scattered behind it and a hairline "ground" the objects sit on. The art is bakery, not stock office: a pala, a teglia, dough. Same visual language as the reference — thin strokes, amber dotted blocks, loose squiggles — but about this business rather than a generic one. It is decorative and aria-hidden, so a screen reader hears the form and nothing else. ------------------------------------------------------------------------------------- */ .auth { --art-line: rgba(42, 31, 27, 0.5); --art-ink: #2a1f1b; --art-amber: #fbcf95; --auth-field: #ffffff; position: relative; min-height: 100vh; display: flex; flex-direction: column; background: #f3efe4; overflow: hidden; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .auth { --art-line: rgba(236, 228, 220, 0.26); --art-ink: #ece4dc; --art-amber: #6d4f22; --auth-field: var(--surface-2); background: var(--bg); } } :root[data-theme="dark"] .auth { --art-line: rgba(236, 228, 220, 0.26); --art-ink: #ece4dc; --art-amber: #6d4f22; --auth-field: var(--surface-2); background: var(--bg); } /* ---- The scene -------------------------------------------------------------------- */ .auth__art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .auth__art .stroke { fill: none; stroke: var(--art-line); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .auth__art .stroke--thin { stroke-width: 1.1; } .auth__art .ground { stroke: var(--art-line); stroke-width: 1; opacity: 0.65; } .auth__art .block { fill: var(--art-amber); } .auth__art .dot { fill: var(--art-ink); } /* ---- Header ----------------------------------------------------------------------- */ .auth__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 34px 46px 0; } .auth__wordmark { display: block; font-size: 21px; font-weight: 800; letter-spacing: -0.03em; color: var(--text); } /* The hairline under the wordmark is the reference's one piece of pure typography — it turns a logo and a link into a masthead. */ .auth__contact { display: inline-flex; align-items: center; gap: 7px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--border-strong); color: var(--text-muted); font-size: 12px; font-weight: 500; } .auth__top-actions { display: flex; align-items: center; gap: 10px; } .auth__icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--r-full); background: transparent; color: var(--text-muted); cursor: pointer; transition: background 140ms var(--ease), color 140ms var(--ease); } .auth__icon-btn:hover { background: rgba(42, 31, 27, 0.07); color: var(--text); } /* ---- The card --------------------------------------------------------------------- */ .auth__main { position: relative; z-index: 2; flex: 1; display: grid; place-items: center; padding: 28px 20px 40px; } .auth__card { width: 100%; max-width: 424px; padding: 40px 40px 30px; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 28px 70px -28px rgba(42, 31, 27, 0.3), 0 6px 18px -8px rgba(42, 31, 27, 0.12); } .auth__title { font-size: 27px; font-weight: 800; letter-spacing: -0.035em; text-align: center; } .auth__subtitle { margin: 10px auto 0; max-width: 27ch; color: var(--text-muted); font-size: 14px; line-height: 1.55; text-align: center; } .auth__form { margin-top: 26px; } /* ---- Fields ----------------------------------------------------------------------- */ .auth__field + .auth__field { margin-top: 16px; } .auth__label { display: block; margin-bottom: 7px; color: var(--text); font-size: 12.5px; font-weight: 650; } /* The input gets its own positioning context so the status dot and the reveal button centre on the input, not on label-plus-input. */ .auth__control { position: relative; } .auth__control .field__input { height: 48px; padding: 0 52px 0 16px; background: var(--auth-field); border-color: var(--border-strong); border-radius: 11px; font-size: 14px; } /* The dot fills in once the field has content — the reference's circle, doing a job. */ .auth__dot { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); width: 13px; height: 13px; border: 1.5px solid var(--border-strong); border-radius: var(--r-full); pointer-events: none; transition: background 160ms var(--ease), border-color 160ms var(--ease); } .auth__control .field__input:not(:placeholder-shown) ~ .auth__dot { background: var(--gold); border-color: var(--gold-dark); } .auth__control .field__input:focus ~ .auth__dot { border-color: var(--brand); } .auth__reveal { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); padding: 4px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--text-muted); font-family: inherit; font-size: 12.5px; font-weight: 650; cursor: pointer; } .auth__reveal:hover { color: var(--brand); } /* ---- Trouble signing in ----------------------------------------------------------- */ .auth__trouble { margin-top: 14px; } .auth__trouble summary { display: inline-block; color: var(--text); font-size: 12.5px; font-weight: 650; cursor: pointer; list-style: none; } .auth__trouble summary::-webkit-details-marker { display: none; } .auth__trouble summary:hover { color: var(--brand); } .auth__trouble p { margin-top: 8px; padding: 10px 12px; background: var(--surface-3); border-radius: var(--r-sm); color: var(--text-muted); font-size: 12.5px; line-height: 1.55; } /* ---- Submit ----------------------------------------------------------------------- */ .auth__submit { width: 100%; height: 48px; margin-top: 20px; border: 0; border-radius: 11px; background: linear-gradient(140deg, var(--gold) 0%, var(--gold-dark) 100%); color: var(--brand-darker); font-family: inherit; font-size: 14px; font-weight: 750; cursor: pointer; box-shadow: 0 8px 18px -8px rgba(216, 150, 11, 0.75); transition: filter 140ms var(--ease), transform 90ms var(--ease); } .auth__submit:hover { filter: brightness(1.04); } .auth__submit:active { transform: translateY(1px); } .auth__foot { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border); color: var(--text-muted); font-size: 12.5px; text-align: center; } .auth__foot strong { color: var(--text); font-weight: 700; } /* ---- Page footer ------------------------------------------------------------------ */ .auth__bottom { position: relative; z-index: 2; padding: 0 46px 26px; color: var(--text-faint); font-size: 11.5px; text-align: center; } .auth__bottom span + span::before { content: "·"; margin: 0 9px; opacity: 0.6; } /* ------------------------------------------------------------------------------------- Responsive ------------------------------------------------------------------------------------- */ @media (max-width: 1180px) { .grid-split { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1024px) { .shell, html[data-sidebar="collapsed"] .shell { grid-template-columns: minmax(0, 1fr); } .rail { position: fixed; inset: 0 auto 0 0; width: var(--rail-w); transform: translateX(-100%); transition: transform 240ms var(--ease); box-shadow: var(--shadow-lg); } html[data-sidebar="open"] .rail { transform: translateX(0); } /* On a phone the rail is a drawer; "collapsed" is meaningless, so labels come back. */ html[data-sidebar="collapsed"] .brand__text, html[data-sidebar="collapsed"] .nav__text, html[data-sidebar="collapsed"] .nav__label, html[data-sidebar="collapsed"] .rail__foot-text { display: block; } html[data-sidebar="collapsed"] .nav__item { justify-content: flex-start; padding: 8px 12px; } html[data-sidebar="collapsed"] .nav__disclose { display: grid; } html[data-sidebar="collapsed"] .nav__group.is-open .nav__children { display: block; } html[data-sidebar="collapsed"] .nav__item--child { padding: 6px 10px; } .rail__toggle { display: none; } .topbar__burger { display: grid; } .crumbs { display: none; } .scrim { position: fixed; inset: 0; z-index: 35; background: rgba(24, 16, 13, 0.5); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), visibility 200ms var(--ease); } html[data-sidebar="open"] .scrim { opacity: 1; visibility: visible; } .content, .topbar { padding-left: 18px; padding-right: 18px; } .auth__top, .auth__bottom { padding-left: 20px; padding-right: 20px; } .auth__card { padding: 32px 24px 24px; border-radius: 16px; } /* The scene is decoration. On a phone it competes with the form, so it goes. */ .auth__art { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ------------------------------------------------------------------------------------- Resource screens & Design System Extensions ------------------------------------------------------------------------------------- */ /* ---- Form Fields & Controls -------------------------------------------------------- */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; } .field__label { display: flex; align-items: center; gap: 4px; color: var(--text); font-size: 12.5px; font-weight: 650; letter-spacing: -0.01em; } .field__req { color: var(--brand); font-weight: 700; } .field__control { position: relative; width: 100%; } .field__input { width: 100%; height: 40px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); color: var(--text); font-family: inherit; font-size: 13.5px; line-height: normal; box-shadow: var(--shadow-xs); transition: border-color 140ms var(--ease), box-shadow 140ms var(--ease), background 140ms var(--ease); } .field__input:hover { border-color: var(--text-muted); } .field__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(179, 48, 23, 0.16); background: var(--surface); } .field__input::placeholder { color: var(--text-faint); opacity: 0.8; } .field__input--select, select.field__input { cursor: pointer; padding-right: 36px; appearance: none; -webkit-appearance: none; background-image: none; } .field-select-wrap { position: relative; width: 100%; } .field-select-arrow { position: absolute; right: 12px; top: 50%; transform: translateY(-50%) rotate(90deg); width: 13px; height: 13px; color: var(--text-muted); pointer-events: none; transition: transform 140ms var(--ease), color 140ms var(--ease); } .field-select-wrap:focus-within .field-select-arrow { color: var(--brand); } .field__input--area, textarea.field__input { height: auto; min-height: 110px; padding: 12px 14px; line-height: 1.55; resize: vertical; font-family: inherit; } /* Checkbox field styling */ .field--checkbox { flex-direction: row; align-items: center; gap: 10px; padding: 8px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); margin-top: 4px; } .field__checkbox-label { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; font-weight: 550; color: var(--text); user-select: none; width: 100%; } .field__check { width: 18px; height: 18px; border-radius: 4px; accent-color: var(--brand); cursor: pointer; margin: 0; flex: none; } .field__label-text { display: flex; align-items: center; gap: 4px; } .field__help { color: var(--text-faint); font-size: 11.5px; line-height: 1.45; margin: 2px 0 0 0; } .field__error { display: flex; align-items: center; gap: 5px; color: var(--danger); font-size: 12px; font-weight: 600; margin: 2px 0 0 0; } .field__error svg { width: 13px; height: 13px; flex: none; } .field.has-error .field__input { border-color: var(--danger); background: var(--danger-soft); } .field.has-error .field__input:focus { box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2); } .alerts { display: grid; gap: 8px; margin-bottom: 16px; } .alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-md); font-size: 13px; font-weight: 550; line-height: 1.4; } .alert--error { background: var(--danger-soft); color: var(--danger); border: 1px solid rgba(220, 38, 38, 0.35); } .alert svg { width: 16px; height: 16px; flex: none; } /* ---- Filter Toolbar ---------------------------------------------------------------- */ .filter-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-xs); overflow: visible; } .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 16px; padding: 16px 20px; } .field--grow { flex: 1 1 280px; min-width: 240px; } .field--select { flex: 0 1 190px; min-width: 150px; } .field-search-wrap { position: relative; width: 100%; } .field-search-icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; display: grid; place-items: center; } .field-search-icon svg { width: 15px; height: 15px; } .field__input--search { padding-left: 38px; padding-right: 14px; } .filter-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; align-self: flex-end; padding-bottom: 1px; } .filter-actions .btn { height: 40px; } .filter-clear { color: var(--text-muted); } .filter-clear:hover { color: var(--danger); background: var(--danger-soft); } /* ---- List Page Table Card ---------------------------------------------------------- */ .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .table-card .card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; background: var(--surface); border-bottom: 1px solid var(--border); } .count-badge { display: inline-flex; align-items: center; padding: 2px 8px; margin-left: 8px; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--border); color: var(--text-muted); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums; vertical-align: middle; } .table-wrap { width: 100%; overflow-x: auto; scrollbar-width: thin; } .table { width: 100%; border-collapse: collapse; text-align: left; font-size: 13.5px; } .table thead th { padding: 12px 18px; background: var(--surface-2); border-bottom: 1px solid var(--border-strong); color: var(--text-muted); font-size: 11.5px; font-weight: 750; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap; } .table tbody tr { border-bottom: 1px solid var(--border); transition: background 120ms var(--ease); } .table tbody tr:last-child { border-bottom: 0; } .table tbody td { padding: 14px 18px; color: var(--text); vertical-align: middle; } .table--hover tbody tr:hover { background: var(--surface-2); } .table .num { text-align: right; font-variant-numeric: tabular-nums; } .table th.num { text-align: right; } .table .actions { text-align: right; white-space: nowrap; width: 1%; } .actions-group { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; } .actions-group .action-form { display: inline; margin: 0; } .actions-group .btn { margin: 0; } .row-link { color: var(--text); font-weight: 650; text-decoration: none; transition: color 140ms var(--ease); } .row-link:hover { color: var(--brand); text-decoration: underline; } .th-sort { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-weight: 750; white-space: nowrap; text-decoration: none; transition: color 140ms var(--ease); } .th-sort:hover { color: var(--text); } .th-sort.is-sorted { color: var(--brand); } .ico--sort { width: 12px; height: 12px; transition: transform 160ms var(--ease), opacity 140ms var(--ease); } .ico--sort.asc { transform: rotate(-90deg); } .ico--sort.desc { transform: rotate(90deg); } .ico--sort-idle { opacity: 0.3; transform: rotate(90deg); } .cell-thumb { height: 36px; width: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); display: block; background: var(--surface-2); } /* Pagination bar */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--border); background: var(--surface-2); } .pager__info { font-size: 12.5px; color: var(--text-muted); } .pager__num { font-weight: 700; color: var(--text); } .pager__controls { display: flex; align-items: center; gap: 8px; } /* Empty State */ .empty { padding: 56px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .empty__icon { width: 52px; height: 52px; border-radius: var(--r-full); background: var(--surface-2); border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-muted); margin-bottom: 16px; } .empty__icon svg { width: 24px; height: 24px; } .empty__title { font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 6px; } .empty__text { font-size: 13px; color: var(--text-muted); max-width: 380px; line-height: 1.5; } .empty__actions { margin-top: 20px; } /* ---- Form Stack & Tabs ------------------------------------------------------------- */ .form-stack { max-width: 1040px; margin: 0 auto; width: 100%; } /* A translated model's content sits beside its details, not behind a tab of its own — two columns need more room than one, so the cap widens rather than squeezing both. */ .form-stack--wide { max-width: 1320px; } .form-columns { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; align-items: start; } .form-col { min-width: 0; } @media (max-width: 960px) { .form-columns { grid-template-columns: 1fr; } } .tabbed { display: grid; gap: 16px; } .tabstrip { display: flex; gap: 6px; padding: 6px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); overflow-x: auto; scrollbar-width: none; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); } .tabstrip::-webkit-scrollbar { display: none; } .tabstrip__tab { display: flex; align-items: center; gap: 8px; flex: none; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--text-muted); font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: all 140ms var(--ease); } .tabstrip__tab:hover { color: var(--text); background: var(--surface); border-color: var(--border); } .tabstrip__tab.is-active { color: var(--text); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); font-weight: 700; } .tabstrip__tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .tabstrip__count { min-width: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-muted); font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } .tabstrip__tab.is-active .tabstrip__count { background: var(--brand); color: #ffffff; } .tabstrip__errors { min-width: 20px; padding: 0 6px; border-radius: var(--r-full); background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; box-shadow: 0 0 8px rgba(220, 38, 38, 0.5); } .tabstrip__tab.has-error { color: var(--danger); } .tabpanel:not([data-active]) { display: none; } .tabpanel { border: 1px solid var(--border); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); overflow: hidden; } .tabpanel .card__head { padding: 18px 24px; border-bottom: 1px solid var(--border); background: var(--surface); } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px 24px; padding: 24px; } .form-grid .field { margin: 0; min-width: 0; } .form-grid .field:has(.field__input--area), .form-grid .field:has(textarea), .form-grid .field:has(.image-field) { grid-column: 1 / -1; } /* ---- Image upload (ImagePreviewWidget, apps/cms/forms.py) -------------------------- A thumbnail in place of Django's default "Currently: filename" text link — easy to miss next to a dozen other fields, and no help at all when the question is "does this actually look right". `cms.js` swaps the thumbnail for a live preview the moment a new file is picked, so a wrong image is obvious before Save is clicked, not after a round trip to find out. */ .image-field { display: flex; gap: 14px; } .image-field__preview { display: grid; place-items: center; flex: none; width: 72px; height: 72px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; } .image-field__icon { color: var(--text-faint); width: 24px; height: 24px; } .image-field__preview:not(.is-empty) .image-field__icon { display: none; } .image-field__thumb { width: 100%; height: 100%; object-fit: cover; } .image-field__body { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; flex: 1; } .image-field__filename { overflow: hidden; font-size: 13px; font-weight: 550; text-overflow: ellipsis; white-space: nowrap; } .image-field__filename--empty { color: var(--text-faint); font-weight: 400; } .image-field__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .image-field__row .field__input[type="file"] { flex: 1; min-width: 180px; height: auto; padding: 7px 10px; font-size: 12.5px; } .image-field__clear { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--danger); font-size: 12.5px; font-weight: 600; cursor: pointer; } /* Fades rather than hides — the point is to preview what Save is about to do, and an image that vanished on click reads as already gone. */ .image-field.is-marked-for-removal .image-field__preview { opacity: 0.4; } .image-field.is-marked-for-removal .image-field__filename { color: var(--danger); text-decoration: line-through; } /* Sticky bottom Form Action Bar */ .formbar { position: sticky; bottom: 16px; z-index: 30; display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(160%) blur(12px); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-md); margin-top: 8px; } .formbar__spacer { flex: 1; } .btn--danger { background: linear-gradient(140deg, var(--danger), var(--brand-dark)); border-color: var(--brand-dark); color: #fff; } .btn--danger:hover { filter: brightness(0.94); border-color: var(--brand-darker); } .btn--danger-ghost { border-color: transparent; background: transparent; color: var(--text-muted); } .btn--danger-ghost:hover { background: var(--danger-soft); border-color: transparent; color: var(--danger); } /* ---- Language translation switcher ------------------------------------------------- */ .langbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 18px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-lg); } .langbar__label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: 11.5px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; } .langbar__tab { padding: 5px 14px; border-radius: var(--r-full); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); font-size: 12.5px; font-weight: 650; text-decoration: none; transition: all 140ms var(--ease); } .langbar__tab:hover { color: var(--text); border-color: var(--text-muted); background: var(--surface-3); } .langbar__tab.is-active { background: linear-gradient(140deg, var(--brand), var(--brand-dark)); border-color: var(--brand-dark); color: #fff; box-shadow: 0 2px 6px rgba(179, 48, 23, 0.3); } .langbar__hint { flex: 1; min-width: 220px; color: var(--text-faint); font-size: 12px; } /* Embedded in a card head next to its own content, rather than spanning the page above everything it might not even affect — the standalone bar's chrome (padding, border, background) is what made it look like a page-level control instead of that field group's own toggle. */ .langbar--compact { padding: 0; border: 0; background: none; flex: none; gap: 6px; } /* ---- Order desk & extra components ------------------------------------------------- */ .kpi__value--sm { font-size: 17px; letter-spacing: -0.01em; } .table tfoot th, .table tfoot td { padding: 10px 18px; background: var(--surface-2); border-top: 1px solid var(--border); border-bottom: 0; font-size: 12.5px; text-transform: none; letter-spacing: 0; color: var(--text-muted); } .table tfoot .tfoot-total th, .table tfoot .tfoot-total td { color: var(--text); font-size: 14px; font-weight: 750; } .timeline { list-style: none; margin: 0; padding: 0; } .timeline__row { display: flex; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); } .timeline__row:last-child { border-bottom: 0; } .timeline__when { flex: none; width: 88px; color: var(--text-faint); font-size: 12px; font-variant-numeric: tabular-nums; } .timeline__body { display: grid; gap: 2px; min-width: 0; } .timeline__type { font-size: 13px; font-weight: 650; } .timeline__msg { font-size: 12.5px; color: var(--text-muted); } .addr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 18px; } .addr__title { color: var(--text-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; margin-bottom: 5px; } .addr__body { font-size: 13px; line-height: 1.6; } .mini-list { list-style: none; margin: 0; padding: 0; } .mini-list li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--border); font-size: 13px; } .mini-list li:last-child { border-bottom: 0; } .card--narrow { max-width: 620px; } .confirm-target { padding: 14px 16px; background: var(--surface-2); border-radius: var(--r-md); border: 1px solid var(--border); font-weight: 700; margin-bottom: 14px; color: var(--text); }