/*
 * Page layouts (Settings > Shop > Layout): body.lay-<name> on every page,
 * the new POS and the dashboard.
 *   classic  - as before: square corners on the list/settings pages (styles.css)
 *   rounded  - the round cards of the POS and dashboard on every page
 *   clean    - flat and quiet: no shadows, thin lines, KPIs in one strip
 *   compact  - smaller spacing so more rows and products fit on screen
 * Colours always come from the theme (Boutique / Midnight).
 */

/* ===================== Clean ===================== */
body.lay-clean { --mc-shadow: none; --sh: none; --glow: none; --bq-glow: none; --r: 14px; }
html:has(body.lay-clean.skin-bq), body.lay-clean.skin-bq { background: var(--mc-bg, #f8f3ee) !important; }
body.mp.lay-clean { background: var(--bg); }

/* Page title with a line under it */
.lay-clean .pg-head { padding-bottom: 16px; border-bottom: 1px solid var(--mc-border); margin-bottom: 18px; }
.lay-clean .pg-head h1 { font-size: 24px; }

/* Cards: thin outline, smaller corners */
.lay-clean .pg-card, .lay-clean .bq-card, .lay-clean .set-nav { border-radius: 12px; box-shadow: none; }
.lay-clean .pg-btn { box-shadow: none; border-radius: 10px; }
.lay-clean .pg-btn.pri { background: var(--mc-accent); }

/* KPIs: one strip split by thin lines; the first number in the brand colour */
.lay-clean .pg-kpis, .lay-clean .bq-kpis { gap: 1px; background: var(--mc-border); border: 1px solid var(--mc-border); border-radius: 12px; overflow: hidden; }
.lay-clean .pg-kpi, .lay-clean .bq-kpi { border: 0; border-radius: 0; box-shadow: none; }
.lay-clean .pg-kpi.hero, .lay-clean .bq-kpi.hero { background: var(--mc-surface); color: var(--mc-text); box-shadow: inset 3px 0 0 var(--mc-accent); }
.lay-clean .pg-kpi.hero small, .lay-clean .pg-kpi.hero span,
.lay-clean .bq-kpi.hero .bq-kpi-top, .lay-clean .bq-kpi.hero .bq-kpi-bot { color: var(--mc-muted); }
.lay-clean .pg-kpi.hero b, .lay-clean .bq-kpi.hero > b { color: var(--mc-accent); }
.lay-clean .bq-kpi.hero .bq-spark { color: var(--mc-accent); }
.lay-clean .bq-kpi.hero .bq-kpi-top em { color: var(--mc-accent); background: var(--mc-accent-soft); }

/* Table heading on a light band */
.lay-clean .pg .pg-table > thead > tr > th { background: var(--mc-surface-2) !important; border-bottom: 0 !important; }
.lay-clean .pg .pg-table > thead > tr > th:first-child { border-radius: 8px 0 0 8px; }
.lay-clean .pg .pg-table > thead > tr > th:last-child { border-radius: 0 8px 8px 0; }

/* Settings: section card with a line under its title */
.lay-clean .set-sec .pg-card-h { padding-bottom: 12px; border-bottom: 1px solid var(--mc-border); margin-bottom: 16px; }

/* POS: flat product cards, outlined on hover */
.lay-clean .mp-card:hover { transform: none; border-color: var(--ac) !important; }
.lay-clean .mp-pic { border-radius: 10px; }
.lay-clean .mp-cat-pic { border-width: 1px; }
.lay-clean .mp-cat.on .mp-cat-pic { box-shadow: 0 0 0 2px var(--ac); }
@media (min-width: 768px) { .lay-clean .mp-cart { margin: 0; border-radius: 0; border-width: 0 0 0 1px; } }
.lay-clean .mp-pay { box-shadow: none; }

/* ===================== Compact ===================== */
body.lay-compact { --r: 14px; }
.lay-compact .pg { padding: 12px 16px 20px; }
.lay-compact .pg-tabs { padding-top: 10px; }
.tabs-segment.lay-compact .pg-tabs { margin-top: 10px; padding-top: 3px; }
.lay-compact .pg-tabs a { height: 32px; padding: 0 12px; font-size: 12.5px; }
.lay-compact .pg-head { margin-bottom: 12px; gap: 10px; }
.lay-compact .pg-head h1 { font-size: 20px; }
.lay-compact .pg-head p { font-size: 12px; margin-top: 2px; }
.lay-compact .pg-btn { height: 34px; padding: 0 12px; font-size: 12.5px; border-radius: 10px; }
.lay-compact .pg-kpis { gap: 10px; margin-bottom: 12px; }
.lay-compact .pg-kpi { padding: 10px 14px; border-radius: 14px; }
.lay-compact .pg-kpi b { font-size: 18px; margin-top: 2px; }
.lay-compact .pg-card { padding: 12px 14px; border-radius: 14px; margin-bottom: 12px; }
.lay-compact .pg-table-wrap { margin: 0 -14px; padding: 0 14px; }
.lay-compact .pg-tools { margin-bottom: 10px; gap: 8px; }
.lay-compact .pg-search input { height: 36px; }
.lay-compact .pg .form-control { height: 36px; }
.lay-compact .pg textarea.form-control { height: auto; }
@media (min-width: 768px) {
    .lay-compact .pg .pg-table > tbody > tr > td { padding-top: 7px !important; padding-bottom: 7px !important; }
    .lay-compact .pg .pg-table > thead > tr > th { padding-top: 8px !important; padding-bottom: 8px !important; }
    .lay-compact .pg .pg-thumb, .lay-compact .pg .pg-av.pg-thumb, .lay-compact .pg-av { width: 30px; height: 30px; font-size: 12px; }
}
@media (min-width: 1280px) { .lay-compact .set-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lay-compact .set-grid .form-group { margin-bottom: 10px; }

/* Dashboard */
.lay-compact .bq-dash, .lay-compact .mp-dash-main .bq-dash { padding: 12px 14px 16px; }
.lay-compact .bq-dash-head { margin-bottom: 10px; }
.lay-compact .bq-dash-head h1, .lay-compact .mp-dash-main .bq-dash-head h1 { font-size: 20px; }
.lay-compact .bq-kpis, .lay-compact .bq-bento { gap: 10px; }
.lay-compact .bq-kpis { margin-bottom: 10px; }
.lay-compact .bq-kpi, .lay-compact .bq-card { padding: 12px 14px; border-radius: 14px; }
.lay-compact .bq-kpi > b { font-size: 22px; margin: 2px 0 0; }

/* POS: smaller cards, more on screen */
.lay-compact .mp-main { padding: 12px 14px 0; }
/* Compact: smaller round category pictures only (other category layouts keep their own size). */
.lay-compact.pc-round .mp-cats { gap: 10px; margin: 10px 0 8px; }
.lay-compact.pc-round .mp-cat { width: 66px; font-size: 11.5px; }
.lay-compact.pc-round .mp-cat-pic { width: 48px; height: 48px; }
.lay-compact.pc-round .mp-cat-pic b { font-size: 17px; }
@media (min-width: 768px) { .lay-compact .mp-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } }
.lay-compact .mp-card { padding: 6px; }
.lay-compact .mp-pic { height: 100px; border-radius: 10px; }
.lay-compact .mp-pic b { font-size: 26px; }
.lay-compact .mp-card-body { padding: 6px 4px 2px; gap: 4px; }
.lay-compact .mp-name { font-size: 12.5px; height: 36px; }
.lay-compact .mp-foot b { font-size: 14.5px; }
.lay-compact .mp-add { width: auto; height: auto; gap: 2px; border-radius: 8px; }
.lay-compact .mp-add button { width: 24px; height: 26px; border-radius: 8px; }
.lay-compact .mp-skel { height: 180px; }
@media (min-width: 900px) and (min-height: 501px) { .lay-compact .mp-cart { width: 350px; margin: 10px 10px 10px 0; padding: 14px; } }