/* =========================================================================
Craft Corner brand theme (craftcorner.shop): Poppins, white surfaces,
pink accent #ff81e9 / #ff35dc, near-black #222 actions (pill buttons that
turn pink on hover), grey body text. Applied on top of the Telerik Material
theme and the base app.css – loaded last.
========================================================================= */
:root {
/* Brand */
--cc-pink: #ff81e9;
--cc-pink-strong: #ff35dc;
--cc-pink-deep: #c2188f; /* accessible pink for text on white */
--cc-pink-50: #fff3fc;
--cc-pink-100: #ffe3f8;
--cc-ink: #222222;
--cc-ink-2: #3a3a3a;
--cc-text: #5f5f5f;
--cc-muted: #878787;
--cc-line: #ececec;
--cc-line-strong: #dddddd;
--cc-bg: #f7f7f8;
--cc-surface: #ffffff;
--cc-success: #428445;
--cc-warning: #b8860b;
--cc-danger: #d0233c;
--cc-radius: 14px;
--cc-radius-sm: 10px;
--cc-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 3px rgba(0, 0, 0, .06);
--cc-shadow-2: 0 4px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
--cc-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
/* Re-map the base app.css tokens to the brand (portal, account pages) */
--navy-900: #111111;
--navy-800: var(--cc-ink);
--navy-700: var(--cc-ink-2);
--navy-100: #f1f1f1;
--plum-700: var(--cc-pink-deep);
--plum-500: var(--cc-pink-strong);
--plum-100: var(--cc-pink-100);
--pink: var(--cc-pink);
--pink-100: var(--cc-pink-100);
--ivory: #ffffff;
--ivory-200: #f6f6f6;
--bg: #ffffff;
--text: var(--cc-ink-2);
--text-muted: var(--cc-muted);
--border: var(--cc-line);
--radius: var(--cc-radius);
--radius-sm: var(--cc-radius-sm);
--font-sans: var(--cc-font);
--font-serif: var(--cc-font);
/* Telerik (Kendo) Material theme tokens */
--kendo-font-family: var(--cc-font);
--kendo-color-primary: #222222;
--kendo-color-primary-hover: #000000;
--kendo-color-primary-active: #000000;
--kendo-color-primary-emphasis: #555555;
--kendo-color-primary-subtle: #f1f1f1;
--kendo-color-primary-subtle-hover: #e8e8e8;
--kendo-color-primary-subtle-active: #dedede;
--kendo-color-primary-on-subtle: #222222;
--kendo-color-on-primary: #ffffff;
--kendo-color-secondary: var(--cc-pink-strong);
--kendo-color-secondary-hover: #f019c9;
--kendo-color-secondary-active: #d90fb5;
--kendo-color-on-secondary: #ffffff;
--kendo-color-secondary-subtle: var(--cc-pink-50);
--kendo-color-secondary-on-subtle: var(--cc-pink-deep);
--kendo-color-success: var(--cc-success);
--kendo-color-warning: var(--cc-warning);
--kendo-color-error: var(--cc-danger);
--kendo-border-radius-md: 10px;
--kendo-border-radius-lg: 14px;
}
html, body { font-family: var(--cc-font); }
h1, h2, h3, h4 { font-family: var(--cc-font); color: var(--cc-ink); letter-spacing: -.01em; }
h1 { font-weight: 600; }
a { color: var(--cc-pink-deep); }
/* Brand buttons (base app.css .btn) */
.btn { border-radius: 999px; font-weight: 500; }
.btn-primary { background: var(--cc-ink); }
.btn-primary:hover:not(:disabled) { background: var(--cc-pink); color: #fff; }
.btn-accent { background: var(--cc-pink-strong); color: #fff; }
.btn-accent:hover:not(:disabled) { background: var(--cc-pink-deep); }
/* Telerik buttons: pill shape like the shop */
.k-button:not(.k-icon-button):not(.k-split-button .k-button):not(.k-input-button):not(.k-pager-nav):not(.k-grid .k-button-flat) { border-radius: 999px; }
.k-button-solid-primary:hover { background-color: var(--cc-pink) !important; border-color: var(--cc-pink) !important; }
.k-button { text-transform: none; letter-spacing: 0; font-weight: 500; }
/* =========================================================================
Admin shell (Material-like): app bar + navigation drawer + content
========================================================================= */
.cc-admin { min-height: 100vh; background: var(--cc-bg); color: var(--cc-text); }
.cc-admin .k-drawer-container { min-height: calc(100vh - 64px); }
.cc-admin .k-drawer { background: var(--cc-surface); border-right: 1px solid var(--cc-line); }
.cc-admin .k-drawer-content { min-width: 0; }
.cc-appbar.k-appbar { background: var(--cc-surface); color: var(--cc-ink); box-shadow: none; border-bottom: 1px solid var(--cc-line); height: 64px; padding: 0 1rem; position: sticky; top: 0; z-index: 20; }
.cc-brand { display: flex; align-items: center; gap: .6rem; color: var(--cc-ink); text-decoration: none !important; font-weight: 600; }
.cc-brand img { width: 34px; height: 34px; object-fit: contain; }
.cc-brand small { display: block; font-weight: 400; font-size: .72rem; color: var(--cc-muted); line-height: 1; }
.cc-appbar__tools { display: flex; align-items: center; gap: .5rem; }
.cc-appbar__store { min-width: 230px; }
.cc-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--cc-pink-100); color: var(--cc-pink-deep); font-weight: 600; font-size: .8rem; }
.cc-user { display: flex; align-items: center; gap: .5rem; }
.cc-user__name { display: grid; line-height: 1.2; font-size: .85rem; color: var(--cc-ink); font-weight: 500; }
.cc-user__name small { color: var(--cc-muted); font-weight: 400; font-size: .72rem; }
.cc-lang { display: inline-flex; border: 1px solid var(--cc-line-strong); border-radius: 999px; overflow: hidden; }
.cc-lang a { padding: .25rem .6rem; font-size: .75rem; font-weight: 600; color: var(--cc-muted); text-decoration: none !important; }
.cc-lang a.is-active { background: var(--cc-ink); color: #fff; }
.cc-nav-item { display: flex; align-items: center; gap: .85rem; width: 100%; padding: .55rem .9rem; margin: 1px .5rem; border-radius: 999px; color: var(--cc-ink-2); font-size: .9rem; font-weight: 500; white-space: nowrap; }
.cc-nav-item--child { padding-left: 2.1rem; font-size: .85rem; font-weight: 400; color: var(--cc-text); gap: .65rem; }
.cc-nav-item--child .k-svg-icon { width: 15px; height: 15px; opacity: .75; }
/* Collapsible groups of the admin menu (AdminLayout). */
.cc-nav-group { font-weight: 600; color: var(--cc-ink-2); }
.cc-nav-group .cc-nav-chevron { margin-left: auto; width: 14px; height: 14px; opacity: .55; transition: transform .15s ease; }
.cc-nav-group.is-open { color: var(--cc-ink); }
.cc-admin .k-drawer-mini .cc-nav-chevron { display: none; }
.cc-nav-section { padding: 1rem 1.4rem .3rem; font-size: .68rem; text-transform: uppercase; letter-spacing: .12em; color: var(--cc-muted); font-weight: 600; }
.cc-admin .k-drawer-item { padding: 0; background: transparent !important; }
.cc-admin .k-drawer-item:hover .cc-nav-item { background: #f3f3f3; }
.cc-admin .k-drawer-item.k-selected .cc-nav-item { background: var(--cc-pink-100); color: var(--cc-pink-deep); font-weight: 600; }
.cc-admin .k-drawer-item.k-selected .cc-nav-item .k-svg-icon { color: var(--cc-pink-deep); }
.cc-admin .k-drawer-mini .cc-nav-item span.cc-nav-text,
.cc-admin .k-drawer-mini .cc-nav-section,
.cc-admin .k-drawer-mini .cc-nav-item--child { display: none; }
.cc-content { padding: 1.75rem 2rem 3rem; max-width: 1440px; margin: 0 auto; }
@media (max-width: 900px) {
.cc-content { padding: 1rem .75rem 2.5rem; }
.cc-user__name, .cc-appbar__store-label, .cc-brand small, .cc-user .cc-avatar { display: none; }
.cc-appbar.k-appbar { padding: 0 .35rem; gap: .25rem; }
.cc-appbar__tools { gap: .25rem; flex-wrap: nowrap; }
.cc-appbar__store { min-width: 0; width: 140px; }
.cc-brand span { display: none; }
}
.cc-admin--compact .k-drawer-container { position: relative; }
/* =========================================================================
Admin building blocks (use these in every admin page)
========================================================================= */
.cc-page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.cc-page-header h1 { font-size: 1.45rem; margin: 0; }
.cc-page-header p { margin: .2rem 0 0; color: var(--cc-muted); font-size: .9rem; }
.cc-page-header__back { display: inline-flex; align-items: center; gap: .3rem; color: var(--cc-muted); font-size: .85rem; margin-bottom: .35rem; text-decoration: none !important; }
.cc-page-header__actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.cc-card { background: var(--cc-surface); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-1); border: 1px solid var(--cc-line); padding: 1.15rem 1.25rem; }
.cc-card + .cc-card { margin-top: 1rem; }
.cc-card__title { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin: 0 0 .85rem; font-size: .95rem; font-weight: 600; color: var(--cc-ink); }
.cc-card__title small { font-weight: 400; color: var(--cc-muted); }
.cc-card--flush { padding: 0; overflow: hidden; }
/* Shopify-style product page: main column + side column */
.cc-layout-2col { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1rem; align-items: start; }
.cc-layout-2col > aside > .cc-card + .cc-card { margin-top: 1rem; }
@media (max-width: 1100px) { .cc-layout-2col { grid-template-columns: 1fr; } }
.cc-form { display: grid; gap: .9rem; }
.cc-form-row { display: grid; gap: .9rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cc-form-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 700px) { .cc-form-row, .cc-form-row--3 { grid-template-columns: 1fr; } }
.cc-field { display: grid; gap: .3rem; }
.cc-field > label, .cc-label { font-size: .8rem; font-weight: 500; color: var(--cc-ink-2); }
.cc-hint { font-size: .75rem; color: var(--cc-muted); }
.cc-error { font-size: .78rem; color: var(--cc-danger); }
.cc-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; }
.cc-chip--success { background: #e8f5e9; color: #2e6b31; }
.cc-chip--info { background: #e8f0fe; color: #2752a8; }
.cc-chip--warning { background: #fff4d6; color: #8a6100; }
.cc-chip--danger { background: #fde7ea; color: #a5162c; }
.cc-chip--neutral { background: #f1f1f1; color: #555; }
.cc-chip--pink { background: var(--cc-pink-100); color: var(--cc-pink-deep); }
.cc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.25rem; }
.cc-stat { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-1); padding: 1rem 1.15rem; display: grid; gap: .2rem; color: inherit; text-decoration: none !important; }
.cc-stat:hover { box-shadow: var(--cc-shadow-2); }
.cc-stat__label { font-size: .78rem; color: var(--cc-muted); font-weight: 500; }
.cc-stat__value { font-size: 1.6rem; font-weight: 600; color: var(--cc-ink); }
.cc-stat__hint { font-size: .74rem; color: var(--cc-muted); }
.cc-stat--accent { border-top: 3px solid var(--cc-pink); }
.cc-thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; background: #f3f3f3; border: 1px solid var(--cc-line); flex: none; }
.cc-thumb--lg { width: 72px; height: 72px; }
.cc-empty { text-align: center; padding: 2.5rem 1rem; color: var(--cc-muted); }
.cc-empty h3 { color: var(--cc-ink); font-size: 1rem; margin: .5rem 0 .25rem; }
.cc-muted { color: var(--cc-muted); }
.cc-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.cc-row--between { justify-content: space-between; }
.cc-stack > * + * { margin-top: .75rem; }
.cc-toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: 1px solid var(--cc-line); }
/* Telerik grid polish */
.cc-admin .k-grid { border-radius: var(--cc-radius); border-color: var(--cc-line); font-size: .87rem; }
.cc-admin .k-grid .k-grid-header th { font-weight: 600; color: var(--cc-ink-2); font-size: .78rem; }
.cc-admin .k-grid .k-table-row:hover { background: var(--cc-pink-50); }
.cc-admin .k-grid td a.cc-link { color: var(--cc-ink); font-weight: 600; text-decoration: none; }
.cc-admin .k-grid td a.cc-link:hover { color: var(--cc-pink-deep); }
.cc-admin .k-tabstrip-items-wrapper .k-item.k-active { color: var(--cc-pink-deep); }
.cc-admin .k-tabstrip-items-wrapper .k-item.k-active::after { border-color: var(--cc-pink-strong); }
.cc-admin .k-switch-on .k-switch-track { background-color: var(--cc-pink-strong); border-color: var(--cc-pink-strong); }
.cc-admin .k-checkbox:checked { background-color: var(--cc-ink); border-color: var(--cc-ink); }
/* =========================================================================
Documents (orders, quotes, invoices, offers): invoicing / ERP layout.
Sections:
Lines: with th/td.num for numbers. Totals: (dt/dd pairs).
========================================================================= */
.cc-doc { display: grid; gap: 1rem; container-type: inline-size; container-name: cc-doc; }
.cc-doc__header { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-1); }
.cc-doc__header > :last-child { border-radius: 0 0 calc(var(--cc-radius) - 1px) calc(var(--cc-radius) - 1px); }
.cc-doc__crumbs { display: flex; align-items: center; gap: .4rem; padding: .7rem 1.25rem 0; font-size: .8rem; color: var(--cc-muted); }
.cc-doc__crumbs a { display: inline-flex; align-items: center; gap: .3rem; color: var(--cc-muted); text-decoration: none; }
.cc-doc__crumbs a:hover { color: var(--cc-pink-deep); }
.cc-doc__crumbs .k-svg-icon { width: 14px; height: 14px; }
.cc-doc__headrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; padding: .35rem 1.25rem 1rem; flex-wrap: wrap; }
.cc-doc__ident { display: grid; gap: .3rem; min-width: 0; }
.cc-doc__type { font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cc-pink-deep); }
.cc-doc__number { margin: 0; font-size: 1.5rem; font-weight: 600; line-height: 1.2; color: var(--cc-ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-doc__number small { font-size: .85rem; font-weight: 400; color: var(--cc-muted); margin-left: .35rem; }
.cc-doc__chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.cc-doc__actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; margin-left: auto; }
.cc-doc__actions .cc-doc__primary { order: 99; }
.cc-doc__meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; border-top: 1px solid var(--cc-line); background: #fbfbfc; }
.cc-doc__meta > div { padding: .7rem 1.25rem; border-right: 1px solid var(--cc-line); min-width: 0; }
.cc-doc__meta > div:last-child { border-right: 0; }
.cc-doc__meta dt { font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); margin-bottom: .15rem; }
.cc-doc__meta dd { margin: 0; font-size: .9rem; color: var(--cc-ink); font-weight: 500; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cc-doc__meta dd a { color: var(--cc-ink); text-decoration: none; border-bottom: 1px dotted var(--cc-line-strong); }
.cc-doc__meta dd a:hover { color: var(--cc-pink-deep); }
.cc-doc__meta dd small { color: var(--cc-muted); font-weight: 400; }
.cc-doc__meta .cc-doc__meta-total dd { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-doc__progress { border-top: 1px solid var(--cc-line); padding: .85rem 1.25rem .75rem; }
.cc-doc__progress .k-stepper { font-size: .8rem; }
.cc-doc__progress .k-step-label .k-step-text { max-width: 11em; white-space: normal; overflow: visible; text-overflow: clip; text-align: center; line-height: 1.25; }
.cc-doc__notice { display: flex; align-items: center; gap: .6rem; border-top: 1px solid var(--cc-line); padding: .75rem 1.25rem; font-size: .88rem; }
.cc-doc__notice--danger { background: #fdf2f3; color: #7d2232; }
.cc-doc__notice--warning { background: #fffaf0; color: #6d4a08; }
.cc-doc__notice--info { background: #f5f8fe; color: #1f4272; }
/* Tabs of a document (buttons with role="tab"; panels use hidden). */
.cc-doc__tabs { display: flex; gap: .15rem; border-bottom: 1px solid var(--cc-line-strong); overflow-x: auto; scrollbar-width: thin; margin-top: -.25rem; }
.cc-doc__tab { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .7rem .95rem; border: 0; background: transparent; color: var(--cc-text);
font: inherit; font-size: .88rem; font-weight: 500; white-space: nowrap; cursor: pointer; border-radius: 8px 8px 0 0; }
.cc-doc__tab:hover { color: var(--cc-ink); background: #f3f3f4; }
.cc-doc__tab:focus-visible { outline: 2px solid var(--cc-pink-strong); outline-offset: -2px; }
.cc-doc__tab[aria-selected="true"] { color: var(--cc-ink); font-weight: 600; }
.cc-doc__tab[aria-selected="true"]::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cc-pink-strong); }
.cc-doc__tab .k-svg-icon { width: 16px; height: 16px; opacity: .7; }
.cc-doc__tab-count { min-width: 1.35rem; padding: 0 .4rem; border-radius: 999px; background: #efeff1; color: var(--cc-ink-2); font-size: .7rem; font-weight: 600; line-height: 1.35rem; text-align: center; }
.cc-doc__tab-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc-warning); }
.cc-doc__panel[hidden] { display: none !important; }
/* Body: main column + sticky aside. */
.cc-doc__body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; align-items: start; }
.cc-doc__body--single { grid-template-columns: minmax(0, 1fr); }
.cc-doc__main { display: grid; gap: 1rem; min-width: 0; }
.cc-doc__aside { display: grid; gap: 1rem; position: sticky; top: 80px; min-width: 0; }
@container cc-doc (max-width: 900px) {
.cc-doc__body { grid-template-columns: minmax(0, 1fr); }
.cc-doc__aside { position: static; }
}
@container cc-doc (max-width: 640px) {
.cc-doc__headrow { padding: .35rem 1rem .85rem; }
.cc-doc__actions { justify-content: flex-start; }
.cc-doc__meta > div { padding: .6rem 1rem; }
}
/* Tab panels: a vertical stack or two columns of sections / cards. */
.cc-doc__stack { display: grid; gap: 1rem; align-content: start; min-width: 0; }
.cc-doc__stack > .cc-card + .cc-card, .cc-doc__cols > .cc-card + .cc-card { margin-top: 0; }
.cc-doc__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
@container cc-doc (max-width: 900px) { .cc-doc__cols { grid-template-columns: minmax(0, 1fr); } }
/* Sections (cards with a heading and a divider). */
.cc-section { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-1); min-width: 0; }
.cc-section__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; padding: .85rem 1.25rem; border-bottom: 1px solid var(--cc-line); }
.cc-section__heading { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.cc-section__title { margin: 0; font-size: .95rem; font-weight: 600; color: var(--cc-ink); display: inline-flex; align-items: center; gap: .45rem; }
.cc-section__title .k-svg-icon { width: 17px; height: 17px; color: var(--cc-muted); }
.cc-section__step { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cc-ink); color: #fff; font-size: .72rem; font-weight: 600; }
.cc-section__sub { font-size: .8rem; color: var(--cc-muted); }
.cc-section__actions { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.cc-section__body { padding: 1rem 1.25rem 1.15rem; }
.cc-section__body--flush { padding: 0; }
.cc-section__foot { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .75rem 1.25rem; border-top: 1px solid var(--cc-line); background: #fbfbfc; border-radius: 0 0 var(--cc-radius) var(--cc-radius); }
.cc-section--attention { border-color: var(--cc-pink-strong); box-shadow: 0 0 0 3px var(--cc-pink-50); }
.cc-section--disabled .cc-section__body { opacity: .55; pointer-events: none; }
.cc-section > .cc-card { border: 0; box-shadow: none; border-radius: 0; }
.cc-subhead { margin: 1rem 0 .5rem; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); }
.cc-subhead:first-child { margin-top: 0; }
.cc-divider { border: 0; border-top: 1px solid var(--cc-line); margin: 1rem 0; }
.cc-address { font-style: normal; line-height: 1.5; color: var(--cc-ink); }
.cc-doc .cc-mono, .cc-lines .cc-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; overflow-wrap: anywhere; }
.cc-timeline-plain { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cc-timeline-plain li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: .75rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--cc-line); }
.cc-timeline-plain li:last-child { border-bottom: 0; padding-bottom: 0; }
.cc-filterbar__icon { margin-left: .55rem; }
.cc-ordergrid .cc-chip { white-space: normal; line-height: 1.3; }
.cc-ordergrid__channel { margin-top: .3rem; }
/* The customer column takes the free width; below this the grid scrolls sideways instead of squeezing it away. */
.cc-ordergrid table { min-width: 980px; }
/* Label / value facts (customer block, document data). */
.cc-facts { display: grid; grid-template-columns: minmax(110px, auto) minmax(0, 1fr); gap: .45rem 1rem; margin: 0; font-size: .86rem; }
.cc-facts dt { color: var(--cc-muted); }
.cc-facts dd { margin: 0; color: var(--cc-ink); min-width: 0; overflow-wrap: anywhere; }
.cc-facts--stack { grid-template-columns: 1fr; gap: .1rem; }
.cc-facts--stack dd { margin-bottom: .45rem; }
/* Party block (customer summary). */
.cc-party { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .25rem .9rem; align-items: start; }
.cc-party__avatar { grid-row: span 3; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--cc-pink-100); color: var(--cc-pink-deep); font-weight: 700; font-size: .9rem; }
.cc-party__name { font-weight: 600; color: var(--cc-ink); font-size: .98rem; }
.cc-party__name a { color: inherit; text-decoration: none; }
.cc-party__name a:hover { color: var(--cc-pink-deep); }
.cc-party__lines { font-size: .82rem; color: var(--cc-text); line-height: 1.45; }
.cc-party__chips { display: flex; gap: .35rem; flex-wrap: wrap; }
/* Notes: what the customer sees vs internal (never shown). */
.cc-note { border: 1px solid var(--cc-line); border-radius: var(--cc-radius-sm); padding: .75rem .9rem; background: #fff; }
.cc-note__label { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .4rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-ink-2); margin-bottom: .45rem; }
.cc-note__label .k-svg-icon { width: 15px; height: 15px; }
.cc-note__hint { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--cc-muted); font-size: .75rem; }
.cc-note--customer { border-left: 3px solid #4b7bd8; }
.cc-note--internal { background: #fffbeb; border-color: #f3e2a9; border-left: 3px solid #d4a017; }
.cc-note--internal .cc-note__label { color: #7a5a00; }
.cc-notes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; }
@container cc-doc (max-width: 640px) { .cc-notes { grid-template-columns: 1fr; } }
/* Line items table. */
.cc-lines-wrap { overflow-x: auto; container-type: inline-size; container-name: cc-lines; }
.cc-lines { width: 100%; border-collapse: collapse; font-size: .86rem; }
.cc-lines th { padding: .55rem .6rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--cc-muted); text-align: left; background: #fafafb;
border-bottom: 1px solid var(--cc-line-strong); white-space: nowrap; }
.cc-lines td { padding: .7rem .6rem; border-bottom: 1px solid var(--cc-line); vertical-align: top; color: var(--cc-ink-2); }
.cc-lines th:first-child, .cc-lines td:first-child { padding-left: 1.25rem; }
.cc-lines th:last-child, .cc-lines td:last-child { padding-right: 1.25rem; }
.cc-lines .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cc-lines .center { text-align: center; }
.cc-lines .cc-lines__pos { width: 2rem; color: var(--cc-muted); font-variant-numeric: tabular-nums; }
.cc-lines .cc-lines__sku { color: var(--cc-text); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .78rem; white-space: nowrap; }
.cc-lines .cc-lines__total { font-weight: 600; color: var(--cc-ink); }
.cc-lines .cc-lines__ops { width: 1%; white-space: nowrap; text-align: right; }
.cc-lines .cc-lines__ops .k-button { padding: .2rem; }
.cc-lines__move { display: inline-grid; vertical-align: middle; gap: 1px; }
.cc-lines .cc-lines__price { min-width: 0; }
.cc-lines__desc { font-weight: 600; color: var(--cc-ink); }
.cc-lines__meta { display: flex; flex-wrap: wrap; gap: .25rem .4rem; align-items: center; margin-top: .15rem; font-size: .76rem; color: var(--cc-muted); }
.cc-lines__extra { margin-top: .45rem; display: grid; gap: .35rem; font-size: .8rem; }
.cc-lines__sub td { padding-top: 0; }
.cc-lines tbody tr:hover td { background: #fcfcfd; }
.cc-lines tr.has-error td { background: #fff6f7; }
.cc-lines tr.has-error td:first-child { box-shadow: inset 3px 0 0 var(--cc-danger); }
.cc-lines__error { display: flex; align-items: center; gap: .3rem; color: var(--cc-danger); font-size: .76rem; margin-top: .35rem; }
.cc-lines__error .k-svg-icon { width: 14px; height: 14px; }
.cc-lines__empty td { padding: 2rem 1.25rem; text-align: center; color: var(--cc-muted); }
.cc-lines__add td { background: #fbfbfc; border-bottom: 0; }
.cc-lines__was { display: block; font-size: .72rem; color: var(--cc-muted); }
.cc-lines__was s { color: var(--cc-muted); }
@container cc-lines (max-width: 760px) {
.cc-lines .cc-lines__opt { display: none; }
.cc-lines th, .cc-lines td { padding-left: .4rem; padding-right: .4rem; }
}
@container cc-lines (max-width: 560px) {
.cc-lines thead { display: none; }
.cc-lines, .cc-lines tbody, .cc-lines tr, .cc-lines td { display: block; width: 100%; }
.cc-lines tr { border-bottom: 1px solid var(--cc-line); padding: .6rem 1rem; }
.cc-lines td { border: 0; padding: .2rem 0 !important; }
.cc-lines td.num { text-align: left; }
.cc-lines td[data-label]::before { content: attr(data-label) ": "; color: var(--cc-muted); font-size: .75rem; }
.cc-lines .cc-lines__pos { display: none; }
}
/* Totals (dt/dd pairs) and the totals panel of the aside. */
.cc-totals { display: grid; grid-template-columns: 1fr auto; gap: .45rem .75rem; margin: 0; font-size: .88rem; }
.cc-totals dt { color: var(--cc-text); }
.cc-totals dd { margin: 0; text-align: right; color: var(--cc-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cc-totals__muted { color: var(--cc-muted) !important; font-size: .8rem; }
.cc-totals__strong { font-weight: 600; border-top: 1px solid var(--cc-line); padding-top: .45rem; color: var(--cc-ink) !important; }
.cc-totals__total { font-weight: 700; font-size: 1.1rem; color: var(--cc-ink) !important; border-top: 2px solid var(--cc-ink); padding-top: .5rem; }
.cc-totals--info { grid-template-columns: 110px 1fr; }
.cc-totals--info dd { text-align: left; white-space: normal; }
.cc-totals--doc { max-width: 340px; margin-left: auto; }
.cc-totals-panel { background: var(--cc-surface); border: 1px solid var(--cc-line); border-radius: var(--cc-radius); box-shadow: var(--cc-shadow-1); overflow: hidden; }
.cc-totals-panel__head { display: flex; justify-content: space-between; align-items: center; padding: .85rem 1.15rem; border-bottom: 1px solid var(--cc-line); }
.cc-totals-panel__head h2 { margin: 0; font-size: .95rem; font-weight: 600; }
.cc-totals-panel__body { padding: 1rem 1.15rem; }
.cc-totals-panel__grand { display: flex; justify-content: space-between; align-items: baseline; padding: .9rem 1.15rem; background: var(--cc-ink); color: #fff; }
.cc-totals-panel__grand span { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; opacity: .8; }
.cc-totals-panel__grand strong { font-size: 1.45rem; font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; }
.cc-totals-panel__foot { padding: 1rem 1.15rem; border-top: 1px solid var(--cc-line); display: grid; gap: .6rem; }
.cc-currency { display: inline-flex; padding: .05rem .45rem; border-radius: 6px; background: #f1f1f2; color: var(--cc-ink-2); font-size: .7rem; font-weight: 700; letter-spacing: .06em; }
/* Checklist / callouts inside documents. */
.cc-callout { display: flex; gap: .75rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--cc-radius-sm); border: 1px solid var(--cc-line); background: #fafafb; font-size: .86rem; line-height: 1.45; }
.cc-callout > .k-svg-icon { flex: none; margin-top: .1rem; }
.cc-callout--info { background: #f5f8fe; border-color: #d8e3f6; color: #1f4272; }
.cc-callout--warning { background: #fffaf0; border-color: #f3e2b5; color: #6d4a08; }
.cc-callout--danger { background: #fdf2f3; border-color: #f4ccd3; color: #7d2232; }
.cc-callout__body { flex: 1; min-width: 0; }
.cc-callout__body strong { display: block; color: inherit; margin-bottom: .15rem; }
.cc-callout__body ul { margin: .35rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; }
/* Toolbars of lists: views (tabs) + filters + scope. */
.cc-viewtabs { display: flex; gap: .1rem; padding: 0 .75rem; border-bottom: 1px solid var(--cc-line); overflow-x: auto; scrollbar-width: thin; }
.cc-viewtabs button { position: relative; display: inline-flex; align-items: center; gap: .4rem; padding: .75rem .8rem; border: 0; background: transparent; font: inherit; font-size: .85rem;
color: var(--cc-text); white-space: nowrap; cursor: pointer; }
.cc-viewtabs button:hover { color: var(--cc-ink); }
.cc-viewtabs button[aria-selected="true"] { color: var(--cc-ink); font-weight: 600; }
.cc-viewtabs button[aria-selected="true"]::after { content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--cc-pink-strong); }
.cc-viewtabs button:focus-visible { outline: 2px solid var(--cc-pink-strong); outline-offset: -2px; }
.cc-viewtabs__count { min-width: 1.3rem; padding: 0 .4rem; border-radius: 999px; background: #efeff1; color: var(--cc-ink-2); font-size: .7rem; font-weight: 600; line-height: 1.3rem; text-align: center; }
.cc-viewtabs__sep { flex: none; width: 1px; margin: .6rem .35rem; background: var(--cc-line-strong); }
.cc-filterbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: .75rem 1rem; border-bottom: 1px solid var(--cc-line); }
.cc-filterbar__search { flex: 1 1 260px; max-width: 380px; }
.cc-filterbar__summary { margin-left: auto; font-size: .8rem; color: var(--cc-muted); white-space: nowrap; }
.cc-filterbar__summary strong { color: var(--cc-ink); font-variant-numeric: tabular-nums; }
.cc-linkbtn { border: 0; background: none; padding: 0; font: inherit; color: var(--cc-pink-deep); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cc-linkbtn:hover { color: var(--cc-ink); }
.cc-linkbtn.small { font-size: .8rem; }
.cc-scopebar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; margin-bottom: 1rem; border-radius: var(--cc-radius-sm); background: var(--cc-pink-50);
border: 1px solid var(--cc-pink-100); font-size: .86rem; color: var(--cc-ink-2); }
.cc-scopebar > .k-svg-icon { color: var(--cc-pink-deep); }
.cc-scopebar strong { color: var(--cc-ink); }
.cc-scopebar .cc-menu__toggle { padding: .1rem .7rem; font-size: .8rem; }
/* Empty state with icon and actions. */
.cc-empty__icon { display: inline-grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #f3f3f4; color: var(--cc-muted); }
.cc-empty__icon .k-svg-icon { width: 24px; height: 24px; }
.cc-empty p { margin: .2rem auto .9rem; max-width: 46ch; font-size: .88rem; }
/* Inline banners (): errors stay next to what failed; success messages are toasts. */
.cc-alert { display: flex; align-items: flex-start; gap: .7rem; padding: .8rem .9rem .8rem 1rem; margin-bottom: 1rem; border-radius: var(--cc-radius-sm); border: 1px solid transparent;
border-left-width: 4px; font-size: .88rem; line-height: 1.45; background: #fff; }
.cc-alert__icon { flex: none; display: grid; place-items: center; width: 22px; height: 22px; margin-top: .05rem; }
.cc-alert__icon .k-svg-icon { width: 20px; height: 20px; }
.cc-alert__body { flex: 1; min-width: 0; display: grid; gap: .1rem; }
.cc-alert__title { color: inherit; font-weight: 600; }
.cc-alert__text { overflow-wrap: anywhere; }
.cc-alert__close { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin: -.2rem -.2rem 0 0; border: 0; border-radius: 8px; background: transparent; color: inherit; opacity: .6; cursor: pointer; }
.cc-alert__close:hover, .cc-alert__close:focus-visible { opacity: 1; background: rgba(0, 0, 0, .06); }
.cc-alert__close .k-svg-icon { width: 16px; height: 16px; }
.cc-alert--danger { background: #fdf3f4; border-color: #f4ccd3; border-left-color: var(--cc-danger); color: #7d2232; }
.cc-alert--danger .cc-alert__icon { color: var(--cc-danger); }
.cc-alert--success { background: #f3faf3; border-color: #cfe7d0; border-left-color: var(--cc-success); color: #1e5a22; }
.cc-alert--success .cc-alert__icon { color: var(--cc-success); }
/* Status boxes of the static pages (sign-in, campaign and offer pages): same look as cc-alert. */
.alert { border-left-width: 4px; border-radius: var(--cc-radius-sm); line-height: 1.45; }
.alert--danger { border-left-color: var(--cc-danger); }
.alert--success { border-left-color: var(--cc-success); }
.alert--warning { border-left-color: #d4a017; }
.alert--info { border-left-color: #4b7bd8; }
/* Toasts (ToastHost). */
.cc-toasts { position: fixed; z-index: 11000; right: 1.25rem; bottom: 1.25rem; display: grid; gap: .6rem; width: min(400px, calc(100vw - 2rem)); pointer-events: none; }
.cc-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .65rem; padding: .8rem .8rem .8rem 1rem; border-radius: 12px; background: var(--cc-ink); color: #fff;
box-shadow: 0 12px 32px rgba(0, 0, 0, .22); font-size: .88rem; line-height: 1.4; animation: cc-toast-in .18s ease-out; }
.cc-toast__icon { flex: none; display: grid; place-items: center; margin-top: .05rem; }
.cc-toast__icon .k-svg-icon { width: 20px; height: 20px; }
.cc-toast--success .cc-toast__icon { color: #7fd48a; }
.cc-toast--info .cc-toast__icon { color: #9ab8ff; }
.cc-toast--warning .cc-toast__icon { color: #ffd166; }
.cc-toast__text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.cc-toast__close { flex: none; display: grid; place-items: center; width: 26px; height: 26px; margin: -.15rem -.15rem 0 0; border: 0; border-radius: 8px; background: transparent; color: #fff; opacity: .65; cursor: pointer; }
.cc-toast__close:hover, .cc-toast__close:focus-visible { opacity: 1; background: rgba(255, 255, 255, .12); }
.cc-toast__close .k-svg-icon { width: 15px; height: 15px; }
@keyframes cc-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { .cc-toasts { right: 1rem; left: 1rem; bottom: 1rem; width: auto; } }
@media (prefers-reduced-motion: reduce) { .cc-toast { animation: none; } }
/* Action menu ("More actions"). */
.cc-menu { position: relative; display: inline-flex; }
.cc-menu__chevron { width: 14px !important; height: 14px !important; opacity: .7; }
.cc-menu__backdrop { position: fixed; inset: 0; z-index: 50; }
.cc-menu__list { position: absolute; z-index: 51; top: calc(100% + 6px); right: 0; min-width: 230px; padding: .35rem; background: #fff; border: 1px solid var(--cc-line);
border-radius: 12px; box-shadow: 0 14px 36px rgba(0, 0, 0, .14); display: grid; animation: cc-fade .1s ease-out; }
.cc-menu--left .cc-menu__list { right: auto; left: 0; }
.cc-menu__item { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .5rem .7rem; border: 0; border-radius: 8px; background: transparent; font: inherit; font-size: .86rem;
color: var(--cc-ink-2); text-align: left; text-decoration: none !important; cursor: pointer; white-space: nowrap; }
.cc-menu__item:hover, .cc-menu__item:focus-visible { background: #f3f3f4; color: var(--cc-ink); outline: none; }
.cc-menu__item:disabled { opacity: .45; cursor: default; background: transparent; }
.cc-menu__item .k-svg-icon { width: 16px; height: 16px; color: var(--cc-muted); }
.cc-menu__item.is-active { font-weight: 600; color: var(--cc-ink); }
.cc-menu__item--danger, .cc-menu__item--danger .k-svg-icon { color: #b42318; }
.cc-menu__item--danger:hover { background: #fdeceb; color: #912018; }
.cc-menu__sep { border: 0; border-top: 1px solid var(--cc-line); margin: .3rem .2rem; }
.cc-menu__label { padding: .35rem .7rem .2rem; font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cc-muted); }
/* Rich confirmation (facts + what will happen). */
.cc-modal--rich { width: min(540px, calc(100vw - 2rem)); }
.cc-modal__facts { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem 1rem; margin: .9rem 0 0; padding: .75rem .9rem; border-radius: 10px; background: #f7f7f8; font-size: .86rem; }
.cc-modal__facts dt { color: var(--cc-muted); }
.cc-modal__facts dd { margin: 0; color: var(--cc-ink); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cc-modal__steps { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .35rem; font-size: .85rem; color: var(--cc-text); }
.cc-modal__steps li { display: flex; gap: .45rem; align-items: flex-start; }
.cc-modal__steps .k-svg-icon { flex: none; width: 15px; height: 15px; margin-top: .15rem; color: var(--cc-success); }
/* Confirmation modal (ConfirmHost) – replaces the browser's confirm() everywhere. */
.cc-modal-backdrop { position: fixed; inset: 0; z-index: 12000; background: rgba(17, 17, 17, .45); backdrop-filter: blur(2px); animation: cc-fade .12s ease-out; }
.cc-modal { position: fixed; z-index: 12001; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, calc(100vw - 2rem));
display: grid; grid-template-columns: auto 1fr; gap: .25rem 1rem; padding: 1.5rem 1.5rem 1.25rem; background: #fff; border-radius: 18px;
box-shadow: 0 24px 60px rgba(0, 0, 0, .22); outline: none; animation: cc-pop .14s ease-out; }
.cc-modal__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--cc-pink-100); color: var(--cc-pink-deep); }
.cc-modal__icon .k-svg-icon { width: 22px; height: 22px; }
.cc-modal--danger .cc-modal__icon { background: #fde8e8; color: #b42318; }
.cc-modal__title { margin: .2rem 0 .35rem; font-size: 1.1rem; font-weight: 600; color: var(--cc-ink); }
.cc-modal__text { margin: 0; color: var(--cc-text); font-size: .92rem; line-height: 1.5; white-space: pre-line; }
.cc-modal__actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1.1rem; flex-wrap: wrap; }
.cc-btn-danger { background: #b42318; border-color: #b42318; color: #fff; }
.cc-btn-danger:hover, .cc-btn-danger:focus-visible { background: #912018; border-color: #912018; color: #fff; }
@keyframes cc-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes cc-pop { from { opacity: 0; transform: translate(-50%, -46%) scale(.98); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .cc-modal, .cc-modal-backdrop { animation: none; } }