/* =======================================================
   KBB Pro -- Main Stylesheet
   All colours/fonts driven by CSS variables from Branding.php
======================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-text);
    background: var(--color-body-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 0.5rem;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; }

/* -- Layout ------------------------------------------- */

.kiosk-app {
    display: flex;
    min-height: 100vh;
}

/* -- Sidebar ------------------------------------------- */

.sidebar {
    width: var(--sidebar-width);
    min-height: 100vh;
    background: var(--color-sidebar-bg);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 200;
    transition: transform 0.25s ease;
}

.sidebar-logo {
    padding: 20px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

.sidebar-logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    min-width: 0;
}

.sidebar-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    padding: 3px;
}

.sidebar-logo-text {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    line-height: 1.3;
}

.sidebar-logo-sub {
    font-size: 0.65rem;
    color: var(--color-sidebar-text);
    opacity: 0.55;
    display: block;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.03em;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 0;
    overflow-y: auto;
}

.nav-section-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-sidebar-text);
    opacity: 0.45;
    padding: 16px 20px 4px;
}

.nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--color-sidebar-text);
    text-decoration: none;
    font-size: 0.88rem;
    font-weight: 500;
    border-left: 3px solid transparent;
    transition: all 0.15s;
    cursor: pointer;
}

.nav-item:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
    text-decoration: none;
}

.nav-item.active {
    background: rgba(255,255,255,0.1);
    color: #fff;
    border-left-color: var(--color-accent);
}

.nav-item .nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-item .nav-icon i {
    font-size: 16px;
    opacity: 0.65;
    line-height: 1;
}

.nav-item.active .nav-icon i,
.nav-item:hover .nav-icon i {
    opacity: 1;
}

.nav-badge {
    margin-left: auto;
    background: var(--color-accent);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.sidebar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--color-sidebar-text);
}

.sidebar-user:hover { color: #fff; text-decoration: none; }

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}

.avatar img { width: 100%; height: 100%; object-fit: cover; }

.sidebar-user-info { min-width: 0; }
.sidebar-user-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sidebar-user-role {
    font-size: 0.7rem;
    opacity: 0.55;
    text-transform: capitalize;
}

/* -- Main content area ---------------------------------- */

.main-wrap {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* -- Topbar -------------------------------------------- */

.topbar {
    min-height: 60px;
    background: var(--color-topbar-bg);
    border-bottom: 1px solid var(--color-border);
    display: flex;
    align-items: center;
    padding: 0 24px;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* 1.0.21.3 -- Topbar is now the page header. The title stack is the elastic
   element that absorbs available space; actions sit at the right edge. */
.topbar-title-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    min-width: 0;          /* lets ellipsis kick in inside flex parent */
    line-height: 1.2;
    padding: 8px 0;
}

.topbar-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-subtitle {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

/* Breadcrumb sits ABOVE the title in the same stack, small and muted. */
.topbar-crumbs {
    font-size: 0.72rem;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 1px;
    line-height: 1.3;
}
.topbar-crumbs a {
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    padding-bottom: 1px;
    transition: color .12s, border-color .12s;
}
.topbar-crumbs a:hover {
    color: var(--color-text);
    border-bottom-color: var(--color-border);
}
.topbar-crumbs-sep {
    opacity: .55;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-icon-btn {
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: var(--border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 0.15s, color 0.15s;
    font-size: 18px;
    flex-shrink: 0;
}

.topbar-icon-btn:hover {
    background: var(--color-body-bg);
    color: var(--color-text);
}

/* Mobile -- progressively shed elements as space tightens. */
@media (max-width: 640px) {
    /* Action buttons collapse to icon-only. View author still writes the full
       button; this rule clips its label so just the leading + (or icon) shows.
       For finer control, views can use .btn-icon-only on a button to opt in. */
    .topbar { padding: 0 14px; gap: 8px; }
    .topbar-title { font-size: 0.95rem; }
    .topbar-actions .btn {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media (max-width: 480px) {
    /* Drop the subtitle on very narrow screens; the count is always
       discoverable in the page body anyway. */
    .topbar-subtitle { display: none; }
    /* Compact crumbs: hide all but the last separator + parent. View can
       opt out by setting only one crumb. */
    .topbar-crumbs { font-size: 0.7rem; }
}

/* -- Page content -------------------------------------- */

.page-body {
    flex: 1;
    padding: 28px 28px 40px;
}

/* 1.0.21.3 -- in-body .breadcrumbs class is obsolete; breadcrumbs now render
   in the topbar via .topbar-crumbs. The selectors below intentionally have no
   rules so any orphaned .breadcrumbs markup in third-party views remains
   harmless rather than throwing layout. */

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 12px;
    flex-wrap: wrap;
}

.page-title {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0;
}

.page-sub {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

/* -- Cards --------------------------------------------- */

.card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border);
    gap: 8px;
}

/* When card-header has a background colour it needs its own padding
   (the card's outer padding doesn't fill the coloured area) */
.card-header[style*="background"] {
    margin: -20px -20px 16px -20px;
    padding: 14px 20px;
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.card-title {
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
}

/* -- Stat cards ---------------------------------------- */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--color-accent);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
}

.stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.stat-value {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-text);
}

.stat-trend {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.stat-trend.up   { color: var(--color-success); }
.stat-trend.down { color: var(--color-danger); }

/* -- Grids --------------------------------------------- */

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
.grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

/* -- Tables -------------------------------------------- */

.table-wrap { overflow-x: auto; }

table.kiosk-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.kiosk-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}

.kiosk-table td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    vertical-align: middle;
}

.kiosk-table tbody tr:last-child td { border-bottom: none; }

.kiosk-table tbody tr:hover td {
    background: rgba(0,0,0,0.018);
}

/* -- Buttons ------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: calc(var(--border-radius) - 2px);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s;
    line-height: 1.4;
    white-space: nowrap;
}

.btn:hover { text-decoration: none; }

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
}
.btn-primary:hover {
    background: var(--color-accent-dark);
    border-color: var(--color-accent-dark);
    color: #fff;
}

.btn-secondary {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}
.btn-secondary:hover {
    background: var(--color-body-bg);
    color: var(--color-text);
}

.btn-ghost {
    background: transparent;
    color: var(--color-text-muted);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--color-body-bg); color: var(--color-text); }

.btn-danger  { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn-success { background: var(--color-success); color: #fff; border-color: var(--color-success); }
.btn-sm { padding: 5px 10px; font-size: 0.8rem; }
.btn-lg { padding: 12px 24px; font-size: 1rem; }

.btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* -- Forms --------------------------------------------- */

.form-group { margin-bottom: 18px; }

label, .label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 6px;
}

.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="tel"], input[type="date"], input[type="url"],
input[type="search"], input:not([type]), textarea, select {
    display: block;
    width: 100%;
    padding: 9px 12px;
    font-family: var(--font-body);
    font-size: 0.88rem;
    color: var(--color-text);
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--border-radius) - 2px);
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
    -webkit-appearance: none;
}

.form-control:focus, input:focus, textarea:focus, select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

textarea { resize: vertical; min-height: 90px; }

.form-help {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}

.form-error {
    font-size: 0.78rem;
    color: var(--color-danger);
    margin-top: 4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* -- Badges -------------------------------------------- */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    border-radius: 20px;
    white-space: nowrap;
}

.badge-info     { background: #dbeafe; color: #1e40af; }
.badge-success  { background: #d1fae5; color: #065f46; }
.badge-warning  { background: #fef3c7; color: #92400e; }
.badge-danger   { background: #fee2e2; color: #991b1b; }
.badge-secondary{ background: #f3f4f6; color: #6b7280; }
.badge-accent   { background: #fce7ea; color: #c0253d; }
.badge-muted    { background: #f3f4f6; color: #6b7280; }

/* -- Alerts -------------------------------------------- */

.alert {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    margin-bottom: 16px;
    border-left: 4px solid;
}

.alert-info    { background: #eff6ff; color: #1e40af; border-color: #3b82f6; }
.alert-success { background: #f0fdf4; color: #166534; border-color: var(--color-success); }
.alert-warning { background: #fffbeb; color: #92400e; border-color: var(--color-warning); }
.alert-danger  { background: #fef2f2; color: #991b1b; border-color: var(--color-danger); }

/* 1.0.21.1 -- Persistent informational notices.
   Visually matches .alert but isn't picked up by the .alert auto-dismiss in
   app.js, so it stays on screen permanently for things like "How this feature
   works" notices and the uplift badge on the product edit page. */
.notice {
    padding: 12px 16px;
    border-radius: var(--border-radius);
    font-size: 0.875rem;
    margin-bottom: 16px;
    border-left: 4px solid;
}
.notice-info    { background: #eff6ff; color: #1e40af; border-color: #3b82f6; }
.notice-warning { background: #fffbeb; color: #92400e; border-color: var(--color-warning); }
.notice-success { background: #f0fdf4; color: #166534; border-color: var(--color-success); }
.notice-danger  { background: #fef2f2; color: #991b1b; border-color: var(--color-danger); }

/* -- Modals -------------------------------------------- */

.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}

.modal-backdrop.open {
    opacity: 1;
    pointer-events: all;
}

.modal {
    background: var(--color-card-bg);
    border-radius: var(--border-radius);
    width: 100%;
    max-width: 540px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(12px);
    transition: transform 0.2s;
}

.modal-backdrop.open .modal { transform: translateY(0); }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 0;
}

.modal-title { font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600; }

.modal-body { padding: 20px 24px; }
.modal-footer { padding: 0 24px 20px; display: flex; gap: 8px; justify-content: flex-end; }

.modal-close {
    width: 28px; height: 28px;
    background: none; border: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.modal-close:hover { background: var(--color-body-bg); color: var(--color-text); }

/* -- Pagination ---------------------------------------- */

.pagination {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 20px;
}

.page-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px;
    padding: 0 8px;
    font-size: 0.82rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    color: var(--color-text);
    text-decoration: none;
    transition: all 0.12s;
    white-space: nowrap;
}

.page-link:hover { background: var(--color-body-bg); text-decoration: none; }
.page-link.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.page-link.disabled { opacity: 0.4; pointer-events: none; }

/* -- Tabs ---------------------------------------------- */

.tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
    gap: 0;
}

.tab-link {
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.tab-link:hover { color: var(--color-text); text-decoration: none; }
.tab-link.active { color: var(--color-accent); border-bottom-color: var(--color-accent); }

/* -- Empty state --------------------------------------- */

.empty-state {
    text-align: center;
    padding: 56px 24px;
    color: var(--color-text-muted);
}

.empty-state-icon {
    font-size: 2.5rem;
    margin-bottom: 12px;
    opacity: 0.4;
}

.empty-state h3 {
    font-size: 1rem;
    color: var(--color-text);
    margin-bottom: 6px;
}

.empty-state p { font-size: 0.875rem; margin-bottom: 20px; }

/* -- Utilities ----------------------------------------- */

.text-muted    { color: var(--color-text-muted); }
.text-success  { color: var(--color-success); }
.text-danger   { color: var(--color-danger); }
.text-warning  { color: var(--color-warning); }
.text-right    { text-align: right; }
.text-center   { text-align: center; }
.text-sm       { font-size: 0.8rem; }
.text-xs       { font-size: 0.72rem; }
.fw-600        { font-weight: 600; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: 1rem; }
.mb-4 { margin-bottom: 1rem; }
.d-flex        { display: flex; }
.align-center  { align-items: center; }
.gap-2         { gap: 8px; }
.gap-3         { gap: 12px; }
.gap-4         { gap: 16px; }
.flex-1        { flex: 1; }
.ms-auto       { margin-left: auto; }

/* -- Search bar ---------------------------------------- */

.search-bar {
    display: flex;
    align-items: center;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: calc(var(--border-radius) - 2px);
    padding: 0 12px;
    gap: 8px;
    max-width: 320px;
}

.search-bar input {
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 8px 0;
    width: 100%;
}

.search-bar input:focus { box-shadow: none; border: none; }
.search-bar svg { color: var(--color-text-muted); width: 16px; height: 16px; flex-shrink: 0; }

/* -- Responsive ---------------------------------------- */

@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
        box-shadow: 0 0 0 9999px rgba(0,0,0,0.4);
    }
    .main-wrap { margin-left: 0; }
    .page-body { padding: 16px; }
    .grid-2, .form-row { grid-template-columns: 1fr; }
    .grid-3 { grid-template-columns: 1fr 1fr; }
}

/* -- Login page ---------------------------------------- */

.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    padding: 20px;
    position: relative;
    overflow: hidden;
}

.login-page::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 80% 60% at 60% 40%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 70%);
    pointer-events: none;
}

.login-card {
    background: var(--color-card-bg);
    border-radius: calc(var(--border-radius) + 4px);
    padding: 40px;
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

.login-logo {
    text-align: center;
    margin-bottom: 28px;
}

.login-logo-img {
    max-height: 52px;
    margin-bottom: 12px;
}

.login-logo-text {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text);
}

.login-logo-sub {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.login-form .btn-primary {
    width: 100%;
    justify-content: center;
    padding: 11px;
    font-size: 0.95rem;
}

/* -- Module cards (dashboard) -------------------------- */

.module-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 16px;
}

.module-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 20px;
    text-align: center;
    text-decoration: none;
    color: var(--color-text);
    transition: all 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.module-card:hover {
    border-color: var(--color-accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    text-decoration: none;
    transform: translateY(-2px);
}

.module-card-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
    display: flex; align-items: center; justify-content: center;
}

.module-card-icon svg { width: 24px; height: 24px; color: var(--color-accent); }
.module-card-name { font-weight: 600; font-size: 0.9rem; }
.module-card-desc { font-size: 0.78rem; color: var(--color-text-muted); }

/* -- Sidebar showroom block (1.0.21.3) ---------------------------------
   Sits above the user avatar in the sidebar. Shown only when a showroom
   trading name is configured. Initials are rendered as a small tile, name
   sits next to it and wraps to two lines if needed; optional tagline below
   the name shows on a single line with ellipsis. The whole block is
   constrained by the sidebar width, so a long name can never push other
   layout around. */
.sidebar-showroom {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 14px 8px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--border-radius);
    min-width: 0;
}

.sidebar-showroom-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    font-family: var(--font-heading);
}

.sidebar-showroom-text {
    min-width: 0;
    line-height: 1.25;
    overflow: hidden;
}

.sidebar-showroom-name {
    font-size: 0.78rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.78);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.sidebar-showroom-tag {
    font-size: 0.66rem;
    color: rgba(255, 255, 255, 0.42);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.02em;
}

/* Topbar sits at top of main-wrap */
.topbar {
    top: 0;
}

/* -- Grouped collapsible nav --------------------------------------- */

.nav-group {
    display: flex;
    flex-direction: column;
}

.nav-group-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 20px;
    color: var(--color-sidebar-text);
    font-size: 0.88rem;
    font-weight: 500;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    width: 100%;
    text-align: left;
    transition: all 0.15s;
}

.nav-group-toggle:hover {
    background: rgba(255,255,255,0.06);
    color: #fff;
}

.nav-group.open > .nav-group-toggle {
    color: #fff;
    background: rgba(255,255,255,0.04);
}

.nav-group-label {
    flex: 1;
}

.nav-group-chevron {
    margin-left: auto;
    opacity: 0.45;
    font-size: 12px;
    transition: transform 0.2s;
    display: flex;
    align-items: center;
}

.nav-group.open > .nav-group-toggle .nav-group-chevron {
    transform: rotate(90deg);
    opacity: 0.7;
}

.nav-group-children {
    display: none;
    background: rgba(0,0,0,0.15);
}

.nav-group.open > .nav-group-children {
    display: block;
}

.nav-child {
    padding-left: 48px !important;
    font-size: 0.84rem !important;
}

.nav-child.active {
    border-left-color: var(--color-accent);
}

/* -- Quick links strip --------------------------------------------- */

.quick-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 24px;
}

.quick-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    color: var(--color-text);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}

.quick-link-btn i {
    font-size: 16px;
    color: var(--color-accent);
}

.quick-link-btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* -- KPI card enhancements ----------------------------------------- */

.stat-card--alert::before {
    background: #e05252;
}

.stat-card--alert .stat-value {
    color: #e05252;
}

.stat-link {
    font-size: 0.75rem;
    color: var(--color-accent);
    text-decoration: none;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.stat-link:hover { text-decoration: underline; }

/* -- Activity feed ------------------------------------------------- */

.activity-feed {
    display: flex;
    flex-direction: column;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--color-border);
    transition: background 0.1s;
}

.activity-item:last-child { border-bottom: none; }

.activity-item:hover { background: var(--color-hover, rgba(0,0,0,0.02)); }

.activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-accent) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-icon i {
    font-size: 15px;
    color: var(--color-accent);
}

.activity-body {
    flex: 1;
    min-width: 0;
}

.activity-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.activity-text a {
    color: var(--color-text);
    text-decoration: none;
}

.activity-text a:hover { color: var(--color-accent); }

.activity-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-left: 8px;
    font-weight: 400;
}

.activity-time {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    white-space: nowrap;
    flex-shrink: 0;
    padding-top: 2px;
}

/* -- Customise modal ----------------------------------------------- */

.customise-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 320px;
    overflow-y: auto;
}

.customise-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.1s;
}

.customise-row:hover { background: var(--color-hover, rgba(0,0,0,0.04)); }

.customise-row input[type=checkbox] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    flex-shrink: 0;
}


/* -- Settings layout: sidebar + content --------------------------- */

.settings-layout {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: start;
}

.settings-sidenav {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    padding: 8px 0 12px;
    position: sticky;
    top: 16px;
}

.settings-sidenav-title {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    padding: 8px 16px 12px;
    border-bottom: 1px solid var(--color-border);
    margin-bottom: 6px;
}

.settings-nav-group {
    margin-bottom: 4px;
}

.settings-nav-group-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    opacity: 0.55;
    padding: 10px 16px 3px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.12s;
}

.settings-nav-item i {
    font-size: 14px;
    opacity: 0.55;
    flex-shrink: 0;
}

.settings-nav-item:hover {
    background: color-mix(in srgb, var(--color-accent) 6%, transparent);
    color: var(--color-text);
    text-decoration: none;
}

.settings-nav-item.active {
    border-left-color: var(--color-accent);
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    font-weight: 600;
}

.settings-nav-item.active i { opacity: 1; }

.settings-content {
    min-width: 0;
}

/* Responsive: stack on narrow screens */
@media (max-width: 900px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }
    .settings-sidenav {
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        padding: 8px;
    }
    .settings-sidenav-title { display: none; }
    .settings-nav-group {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 0;
    }
    .settings-nav-group-label { display: none; }
    .settings-nav-item {
        padding: 6px 10px;
        font-size: 0.8rem;
        border-left: none;
        border-bottom: 2px solid transparent;
    }
    .settings-nav-item.active {
        border-left: none;
        border-bottom-color: var(--color-accent);
        background: transparent;
    }
}

/* -- Invoice / Quote form two-column top layout -------------------- */

.inv-top-grid {
    grid-template-columns: 3fr 2fr;
}

@media (max-width: 900px) {
    .inv-top-grid {
        grid-template-columns: 1fr;
    }
}

/* -- Mobile optimisation (480px and below) ------------------------- */

@media (max-width: 480px) {

    /* Cards tighter */
    .card { padding: 14px; }
    .card-header { padding-bottom: 10px; margin-bottom: 10px; }

    /* Page header stacks */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .page-header .page-title { font-size: 1.2rem; }

    /* Form rows collapse to single column, tight spacing */
    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .form-group { margin-bottom: 10px; }
    .form-group label { font-size: 0.78rem; margin-bottom: 3px; }

    /* Address pairs on mobile: keep postcode+country as half-width */
    .form-row.addr-pair {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* Tables scroll horizontally */
    .table-wrap, .kiosk-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    #lines-table, #po-lines-table { min-width: 540px; }

    /* Stats grid 2-column */
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .stat-card { padding: 14px; }
    .stat-value { font-size: 1.5rem; }

    /* Quick links */
    .quick-links { gap: 6px; }
    .quick-link-btn { padding: 7px 11px; font-size: 0.78rem; }
    .quick-link-btn span { display: none; }

    /* Nav improvements */
    .topbar-title { font-size: 0.88rem; }
    .settings-layout { gap: 10px; }

    /* Buttons */
    .btn { padding: 8px 14px; font-size: 0.84rem; }
    .btn-sm { padding: 5px 10px; font-size: 0.76rem; }

    /* Invoice / quote top grid - single column */
    .inv-top-grid { grid-template-columns: 1fr !important; }

    /* Totals section - reduce padding */
    .page-body { padding: 12px; }

    /* Hide non-essential columns */
    .kiosk-table .hide-mobile { display: none; }

    /* Modals slide up from bottom */
    .modal-backdrop { align-items: flex-end; padding: 0; }
    .modal {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 12px 12px 0 0 !important;
        max-height: 90vh !important;
        overflow-y: auto;
    }

    /* Activity feed tighter */
    .activity-item { padding: 10px 12px; gap: 10px; }
    .activity-icon { width: 28px; height: 28px; }
}

/* -- Tablet (481-768px) -------------------------------------------- */

@media (min-width: 481px) and (max-width: 768px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
    .card { padding: 16px; }
    .page-header { gap: 10px; }
    .inv-top-grid { grid-template-columns: 1fr !important; }
    .quick-link-btn span { font-size: 0.82rem; }
}

/* -- Article code column: constrained width, input fills cell ---- */

#lines-table td:nth-child(2) input,
#po-lines-table td:nth-child(2) input {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- PO form line table: numeric input widths ---- */
#po-lines-table td:nth-child(3) input { width: 56px; text-align:center; }
#po-lines-table td:nth-child(4) input { width: 90px; text-align:right; }
#po-lines-table td:nth-child(5) input { width: 62px; text-align:right; }
#po-lines-table td:nth-child(6) input { width: 90px; text-align:right; }

/* ---------------------------------------------------------------------
 * TAGS SYSTEM (v1.0.14)
 * Cross-cutting pills + inline picker popover.
 * --------------------------------------------------------------------- */

.tag-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    min-height: 24px;
    padding: 2px 4px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.12s ease;
}
.tag-cell[role="button"]:hover {
    background: rgba(0,0,0,0.04);
}
.tag-cell:focus-visible {
    outline: 2px solid var(--color-accent, #3b82f6);
    outline-offset: 2px;
}

.tag-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: 0.01em;
    white-space: nowrap;
    user-select: none;
}
.tag-overflow {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #475569;
    background: #e2e8f0;
    cursor: help;
}
.tag-add-hint {
    font-size: 0.72rem;
    color: #94a3b8;
    font-style: italic;
    padding: 2px 4px;
}
.tag-cell:hover .tag-add-hint { color: #3b82f6; }

/* Tag picker popover ----------------------------------------------- */
.tag-picker {
    position: absolute;
    z-index: 9000;
    width: 280px;
    max-height: 400px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: tag-picker-in 0.12s ease-out;
}
@keyframes tag-picker-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tag-picker-search {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
}
.tag-picker-search input {
    width: 100%;
    padding: 7px 10px;
    font-size: 0.84rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    outline: none;
}
.tag-picker-search input:focus {
    border-color: var(--color-accent, #3b82f6);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.tag-picker-body {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}
.tag-picker-group-label {
    padding: 8px 12px 4px;
    font-size: 0.68rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.tag-picker-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.84rem;
}
.tag-picker-option:hover,
.tag-picker-option.focused {
    background: #f1f5f9;
}
.tag-picker-option.is-applied {
    background: #f0f9ff;
}
.tag-picker-option .tag-pill { pointer-events: none; }
.tag-picker-option .tag-check {
    margin-left: auto;
    color: var(--color-accent, #3b82f6);
    font-weight: 700;
    font-size: 0.9rem;
    opacity: 0;
}
.tag-picker-option.is-applied .tag-check { opacity: 1; }
.tag-picker-empty {
    padding: 20px 12px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.82rem;
}
.tag-picker-footer {
    padding: 6px 12px;
    border-top: 1px solid #f1f5f9;
    background: #f8fafc;
    font-size: 0.7rem;
    color: #64748b;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.tag-picker-footer a {
    color: var(--color-accent, #3b82f6);
    text-decoration: none;
}
.tag-picker-footer a:hover { text-decoration: underline; }

/* -- Tags admin page (Settings > Tags) ------------------------------ */
.tags-admin-grid {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
}
.tags-admin-cats {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    overflow: hidden;
}
.tags-admin-cat {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    cursor: pointer;
    font-size: 0.88rem;
    gap: 8px;
}
.tags-admin-cat:last-child { border-bottom: 0; }
.tags-admin-cat:hover { background: #f8fafc; }
.tags-admin-cat.active {
    background: #eff6ff;
    color: #1e40af;
    font-weight: 600;
}
.tags-admin-cat-count {
    margin-left: auto;
    font-size: 0.72rem;
    background: #e2e8f0;
    color: #475569;
    padding: 1px 7px;
    border-radius: 10px;
}
.tags-admin-tags {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #fff;
    padding: 16px;
}
.tags-admin-row {
    display: grid;
    grid-template-columns: 1fr 100px 100px 90px 60px;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f1f5f9;
}
.tags-admin-row:last-child { border-bottom: 0; }
.tags-admin-row input[type="text"],
.tags-admin-row input[type="number"] {
    font-size: 0.84rem;
    padding: 5px 8px;
}
.tags-admin-row input[type="color"] {
    width: 100%;
    height: 32px;
    padding: 2px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    cursor: pointer;
}
.tags-admin-preview {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: #f8fafc;
    border-radius: 6px;
    margin-bottom: 12px;
    font-size: 0.76rem;
    color: #64748b;
}

@media (max-width: 768px) {
    .tags-admin-grid { grid-template-columns: 1fr; }
    .tags-admin-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }
}


/* =======================================================
   Dashboard Hub (1.0.24.0) -- data-rich tile redesign

   Each tile is a live mini-dashboard, not just a button.
   Layout: 2x2 grid with FIXED gap, tiles stay in lock-step
   2x2 from desktop down, single column only on phones.

   Tint identity per tile -- soft tinted background + subtle
   coloured top stripe. The tile colour drives every accent
   inside (eyebrow text, big number, dot, etc.) so the four
   tiles are instantly distinguishable.
======================================================= */

/* Local palette tokens used inside the hub. Mostly these
   shadow the per-tile values; pulling them up here keeps
   the rest of the file tidy. */
.hub-grid--rich {
    --tasks-c:    #e94560;
    --tasks-bg:   #fde8ec;
    --till-c:     #0f8a5f;
    --till-bg:    #e3f5ec;
    --stats-c:    #1d4ed8;
    --stats-bg:   #e6edfb;
    --myview-c:   #c4b5fd;
    --myview-bg:  #1f1d3a;
    --myview-bg2: #2a2748;
    --myview-fg:  #ffffff;
    --myview-fg-muted: #c7c2e8;
}

.hub-grid--rich {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 4px;
}

/* Stop the WHOLE-tile-link's underline; we render explicit
   buttons inside instead. */
.hub-card,
.hub-card:hover,
.hub-card:focus {
    text-decoration: none;
    color: inherit;
}
/* All dark-background cards must lock text to their fg colour regardless of hover state.
   The global color:inherit above resets to body text on hover without these overrides. */
.hub-card--pipeline,
.hub-card--pipeline:hover,
.hub-card--pipeline:focus { color: var(--pipeline-fg); }
.hub-card--lowstock,
.hub-card--lowstock:hover,
.hub-card--lowstock:focus { color: var(--lowstock-fg); }
.hub-card--hotleads,
.hub-card--hotleads:hover,
.hub-card--hotleads:focus { color: var(--hotleads-fg); }
.hub-card--leadgen,
.hub-card--leadgen:hover,
.hub-card--leadgen:focus  { color: var(--leadgen-fg); }
.hub-card--config,
.hub-card--config:hover,
.hub-card--config:focus   { color: #ffffff; }

.hub-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px 26px 22px;
    border-radius: 18px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    overflow: hidden;
    min-height: 0;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.hub-card:hover {
    transform: translateY(-2px);
}

/* Top "stripe" is now a border-top accent of the tile colour. */
.hub-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--card-c, var(--color-accent));
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
}

/* -- Per-tile tint variants -- */
.hub-card--tasks  { --card-c: var(--tasks-c);  background: var(--tasks-bg);
                    border-color: color-mix(in srgb, var(--tasks-c) 28%, var(--color-border)); }
.hub-card--till   { --card-c: var(--till-c);   background: var(--till-bg);
                    border-color: color-mix(in srgb, var(--till-c) 28%, var(--color-border)); }
.hub-card--stats  { --card-c: var(--stats-c);  background: var(--stats-bg);
                    border-color: color-mix(in srgb, var(--stats-c) 22%, var(--color-border)); }
.hub-card--myview { --card-c: var(--myview-c); background: var(--myview-bg);
                    color: var(--myview-fg); border-color: #2c2952; }

.hub-card--tasks:hover  { box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--tasks-c) 70%, transparent); }
.hub-card--till:hover   { box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--till-c)  70%, transparent); }
.hub-card--stats:hover  { box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--stats-c) 70%, transparent); }
.hub-card--myview:hover { box-shadow: 0 18px 30px -22px rgba(139,92,246,0.55); }

/* 1.0.33.x -- New widget tile colours */
.hub-grid--rich {
    --pipeline-c:  #fbbf24; --pipeline-bg: #1c1a0e; --pipeline-fg: #fefce8;
    --lowstock-c:  #f87171; --lowstock-bg: #1c0e0e; --lowstock-fg: #fff1f1;
    --hotleads-c:  #fb923c; --hotleads-bg: #1c1108; --hotleads-fg: #fff7ed;
    --leadgen-c:   #a78bfa; --leadgen-bg:  #0f0a1e; --leadgen-fg:  #f0ebff;
}
.hub-card--pipeline { --card-c: var(--pipeline-c); background: var(--pipeline-bg);
                      color: var(--pipeline-fg); border-color: #2a2408; }
.hub-card--lowstock { --card-c: var(--lowstock-c); background: var(--lowstock-bg);
                      color: var(--lowstock-fg); border-color: #2a1008; }
.hub-card--hotleads { --card-c: var(--hotleads-c); background: var(--hotleads-bg);
                      color: var(--hotleads-fg); border-color: #2a1808; }
.hub-card--leadgen  { --card-c: var(--leadgen-c);  background: var(--leadgen-bg);
                      color: var(--leadgen-fg);  border-color: rgba(167,139,250,0.2); }
.hub-card--leadgen:hover { transform: none !important; }
/* Lock child text colours so hover state on parent card never bleeds through */
.hub-card--pipeline * { color: var(--pipeline-fg); }
.hub-card--lowstock * { color: var(--lowstock-fg); }
.hub-card--hotleads * { color: var(--hotleads-fg); }
.hub-card--leadgen  * { color: var(--leadgen-fg);  }
.hub-card--config   * { color: #ffffff; }
/* Exceptions: coloured accent elements should keep their own colour */
.hub-card--pipeline .hub-card-bignum,
.hub-card--pipeline .hub-card-eyebrow { color: var(--pipeline-c); }
.hub-card--lowstock .hub-card-bignum,
.hub-card--lowstock .hub-card-eyebrow { color: var(--lowstock-c); }
.hub-card--hotleads .hub-card-bignum,
.hub-card--hotleads .hub-card-eyebrow { color: var(--hotleads-c); }
.hub-card--leadgen  .hub-card-bignum,
.hub-card--leadgen  .hub-card-eyebrow { color: var(--leadgen-c);  }
.hub-card--config   .hub-card-eyebrow--inverse { color: var(--myview-c); }
.hub-card--pipeline:hover { box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--pipeline-c) 70%, transparent); }
.hub-card--lowstock:hover { box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--lowstock-c) 70%, transparent); }
.hub-card--hotleads:hover { box-shadow: 0 18px 30px -22px color-mix(in srgb, var(--hotleads-c) 70%, transparent); }
.hub-card--leadgen:hover  { box-shadow: 0 18px 30px -22px rgba(139,92,246,0.55); }
/* Leadgen rows: visible against the dark bg, no pointer interaction */
.hub-leadgen-row {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(167,139,250,0.25) !important;
}
.hub-leadgen-row.has-new {
    background: rgba(167,139,250,0.14) !important;
    border-color: rgba(167,139,250,0.5) !important;
}
.hub-card--config { cursor: default; }
.hub-card--config:hover { transform: none !important; box-shadow: none !important; background: var(--myview-bg) !important; }
/* All text inside config card locked to white — children override the color:inherit on hub-card:hover */
.hub-card--config *:not(input) { color: #ffffff; }
/* Individual chosen-widget rows on config front face get their own hover */
.hub-config-chosen-row {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px;
    border-radius: 7px; background: rgba(255,255,255,0.10);
    border: 1px solid rgba(196,181,253,0.45);
    color: #ffffff; /* explicit — immune to parent hover state */
    pointer-events: none; /* front face is display-only */
}

/* Pipeline tile */
.hub-pipeline-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; }
.hub-pipeline-row  { display:flex; align-items:center; gap:8px; font-size:0.82rem; }
.hub-pipeline-label{ flex:1; opacity:0.85; }
.hub-pipeline-count{ font-weight:700; min-width:20px; text-align:right; }
.hub-pipeline-val  { min-width:60px; text-align:right; font-size:0.78rem; opacity:0.75; }

/* Low stock tile */
.hub-stock-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.hub-stock-row  { display:flex; align-items:center; gap:8px; font-size:0.8rem; }
.hub-stock-row.is-out .hub-stock-name { opacity:0.6; text-decoration:line-through; }
.hub-stock-name { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-stock-sku  { font-size:0.68rem; opacity:0.6; margin-right:3px; }
.hub-stock-qty  { font-size:0.78rem; opacity:0.8; white-space:nowrap; }

/* Hot leads tile */
.hub-leads-list  { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:5px; }
.hub-lead-row    { display:flex; align-items:center; gap:8px; font-size:0.82rem; cursor:pointer;
                   padding:4px 6px; border-radius:5px; transition:background 120ms; }
.hub-lead-row:hover { background: rgba(255,255,255,0.07); }
.hub-lead-body   { flex:1; min-width:0; }
.hub-lead-name   { font-weight:600; font-size:0.82rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-lead-meta   { font-size:0.72rem; opacity:0.7; }
.hub-lead-stale  { color: var(--hotleads-c); font-weight:600; }
.hub-lead-value  { font-weight:700; font-size:0.82rem; white-space:nowrap; }

/* Lead gen tile */
.hub-leadgen-list  { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.hub-leadgen-row   { display:flex; align-items:center; gap:10px;
                     padding:8px 10px; border-radius:7px;
                     background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.06);
                     pointer-events:none; /* card <a> handles navigation */ }
.hub-leadgen-row.has-new { border-color:rgba(196,181,253,0.3); background:rgba(196,181,253,0.06); }
.hub-leadgen-icon-wrap { width:28px; height:28px; border-radius:6px; display:flex; align-items:center;
                         justify-content:center; background:rgba(255,255,255,0.07); flex-shrink:0; }
.hub-leadgen-icon-wrap i { font-size:0.95rem; opacity:0.7; }
.hub-leadgen-row.has-new .hub-leadgen-icon-wrap { background:rgba(196,181,253,0.15); }
.hub-leadgen-row.has-new .hub-leadgen-icon-wrap i { opacity:1; color:var(--leadgen-c); }
.hub-leadgen-body  { flex:1; min-width:0; }
.hub-leadgen-label { font-size:0.83rem; font-weight:600; line-height:1.2; }
.hub-leadgen-sub   { font-size:0.71rem; opacity:0.55; margin-top:1px; }
.hub-leadgen-sub--clear { color:inherit; }
.hub-leadgen-badge { font-size:0.72rem; font-weight:800; background:var(--leadgen-c); color:#1f1d3a;
                     min-width:20px; height:20px; padding:0 6px; border-radius:10px;
                     display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.text-leadgen { color: var(--leadgen-c); }

/* Generic empty note */
.hub-empty-note { font-size:0.82rem; opacity:0.6; padding:4px 0; display:flex; align-items:center; gap:6px; }
.hub-empty-note i { font-size:1.1rem; }

/* Configurator tile panel */
.hub-config-open-btn {
    margin-top:14px; width:100%; padding:8px 0; border-radius:6px;
    background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12);
    color:#ffffff; font-size:0.82rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:background 150ms;
}
.hub-config-open-btn:hover { background:rgba(255,255,255,0.14); }
.hub-config-item {
    display:flex; align-items:center; gap:8px; padding:7px 8px;
    border-radius:6px; background:rgba(255,255,255,0.09);
    border:1px solid rgba(255,255,255,0.12);
    cursor:grab; transition:background 120ms, border-color 120ms;
    user-select:none;
    color:#ffffff; /* explicit — never inherit from parent hover state */
}
.hub-config-item:hover { background:rgba(255,255,255,0.14); border-color:rgba(255,255,255,0.2); }
.hub-config-item.is-chosen { border-color:rgba(196,181,253,0.5); background:rgba(196,181,253,0.12); color:#ffffff; }
.hub-config-item.drag-over  { border-color:rgba(196,181,253,0.7); background:rgba(196,181,253,0.18); }
.hub-config-drag { color:rgba(255,255,255,0.35); font-size:0.9rem; cursor:grab; }
.hub-config-toggle { position:relative; display:inline-block; width:32px; height:18px; cursor:pointer; flex-shrink:0; }
.hub-config-toggle input { opacity:0; width:0; height:0; position:absolute; }
.hub-config-toggle-track {
    position:absolute; inset:0; border-radius:9px;
    background:rgba(255,255,255,0.15); transition:background 180ms;
}
.hub-config-toggle-track::after {
    content:''; position:absolute; top:3px; left:3px;
    width:12px; height:12px; border-radius:50%;
    background:#fff; transition:transform 180ms;
}
.hub-config-toggle input:checked + .hub-config-toggle-track { background:var(--myview-c); }
.hub-config-toggle input:checked + .hub-config-toggle-track::after { transform:translateX(14px); }
.hub-config-toggle input:disabled + .hub-config-toggle-track { opacity:0.3; cursor:not-allowed; }
.hub-config-save-btn {
    margin-top:12px; width:100%; padding:9px 0; border-radius:6px;
    background:var(--myview-c); border:none; color:#1f1d3a;
    font-size:0.85rem; font-weight:700; cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition:opacity 150ms;
}
.hub-config-save-btn:hover { opacity:0.9; }
.hub-config-save-btn:disabled { opacity:0.5; cursor:not-allowed; }

/* -- Common card head row (eyebrow + small icon button) -- */

.hub-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 30px;
}

.hub-card-eyebrow {
    font-family: var(--font-heading);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--card-c, var(--color-accent));
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.hub-card-eyebrow--inverse { color: var(--myview-c); }
.hub-card-eyebrow-sep { opacity: 0.55; }
.hub-card-eyebrow-2 {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.hub-card-pulse-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--dot-colour, var(--card-c));
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dot-colour, var(--card-c)) 70%, transparent);
    animation: hubPulse 1.6s ease-out infinite;
}
@keyframes hubPulse {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--dot-colour, var(--card-c)) 65%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--dot-colour, var(--card-c)) 0%,  transparent); }
    100% { box-shadow: 0 0 0 0   color-mix(in srgb, var(--dot-colour, var(--card-c)) 0%,  transparent); }
}

/* Small "+" / cog button in the top right of head */
.hub-card-iconbtn {
    width: 32px; height: 32px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--color-border);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hub-card-iconbtn:hover { background: #fff; transform: scale(1.04); }
.hub-card-iconbtn i { font-size: 1.05rem; }
.hub-card-iconbtn--inverse {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.18);
    color: var(--myview-fg);
}
.hub-card-iconbtn--inverse:hover { background: rgba(255,255,255,0.15); }

/* "Open till" pill CTA */
.hub-card-cta-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--till-c);
    color: #fff;
    font-size: 0.85rem; font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s;
}
.hub-card-cta-btn:hover { background: color-mix(in srgb, var(--till-c) 88%, #000); transform: scale(1.02); }
.hub-card-cta-btn i { font-size: 0.9rem; }

/* -- Big numbers / money -- */

.hub-card-headline {
    display: flex; flex-direction: column; gap: 4px; margin-top: 4px;
}
.hub-card-bignum {
    font-family: var(--font-heading);
    font-size: 4.4rem;
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.03em;
    color: var(--card-c);
}
.hub-card-bignum-cap {
    font-size: 0.95rem;
    color: var(--color-text-muted);
}
.hub-card-bignum-cap strong { color: var(--card-c); font-weight: 700; }

.hub-card-money {
    font-family: var(--font-heading);
    font-size: 3.4rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.025em;
    margin-top: 4px;
    color: var(--card-c);
}
.hub-card-money--till  { color: var(--till-c); }
.hub-card-money--stats { color: var(--stats-c); }

.hub-card-meta {
    font-size: 0.92rem;
    color: var(--color-text-muted);
    display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.hub-card-meta-sep { opacity: 0.6; }
.hub-card-meta i { font-size: 1rem; }

.text-up   { color: #0f8a5f; }
.text-down { color: var(--color-accent); }
.text-tasks { color: var(--tasks-c); }

/* -- Divider line inside cards -- */
.hub-card-divider {
    height: 1px;
    background: color-mix(in srgb, var(--card-c) 22%, transparent);
    margin: 6px 0 4px;
}

/* -- Tasks list ---------------------------------------------------- */

.hub-task-list {
    list-style: none;
    margin: 0; padding: 0;
    display: flex; flex-direction: column; gap: 4px;
}
.hub-task-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--card-c) 12%, transparent);
}
.hub-task-row:last-child { border-bottom: 0; }

.hub-task-check {
    cursor: pointer; user-select: none;
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hub-task-check input { position: absolute; opacity: 0; pointer-events: none; }
.hub-task-box {
    width: 18px; height: 18px;
    border: 1.5px solid color-mix(in srgb, var(--card-c) 50%, var(--color-border));
    border-radius: 5px;
    background: rgba(255,255,255,0.7);
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s;
}
.hub-task-box i { font-size: 0.85rem; color: #fff; opacity: 0; transition: opacity 0.12s; }
.hub-task-check input:checked ~ .hub-task-box {
    background: var(--card-c);
    border-color: var(--card-c);
}
.hub-task-check input:checked ~ .hub-task-box i { opacity: 1; }

.hub-task-title {
    font-size: 0.95rem;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hub-task-row.is-completing .hub-task-title { text-decoration: line-through; opacity: 0.55; }

.hub-task-when {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.hub-task-when.is-overdue { color: var(--color-accent); font-weight: 600; }

.hub-task-empty {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 0;
    color: var(--color-text-muted);
}
.hub-task-empty i { color: var(--till-c); font-size: 1.2rem; }

/* -- Till transactions list --------------------------------------- */

.hub-tx-list {
    list-style: none;
    margin: 8px 0 0; padding: 0;
    display: flex; flex-direction: column;
}
.hub-tx-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    margin: 0 -10px;
    border-top: 1px solid color-mix(in srgb, var(--till-c) 18%, transparent);
    border-radius: 6px;
}
.hub-tx-row:first-child { border-top: 0; padding-top: 4px; }
.hub-tx-row--clickable {
    cursor: pointer;
    transition: background 0.12s ease;
}
.hub-tx-row--clickable:hover {
    background: color-mix(in srgb, var(--till-c) 9%, transparent);
}
.hub-tx-name { font-size: 0.95rem; font-weight: 600; color: var(--color-text); }
.hub-tx-descr { font-size: 0.83rem; color: var(--color-text-muted); margin-top: 2px; }
.hub-tx-amount { font-size: 1rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--till-c); }
.hub-tx-empty {
    padding: 12px 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* -- Stats period toggle ------------------------------------------ */

.hub-pill-toggle {
    display: inline-flex;
    background: rgba(255,255,255,0.7);
    border-radius: 999px;
    padding: 3px;
    border: 1px solid var(--color-border);
}
.hub-pill {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 14px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 600;
    color: var(--color-text-muted);
    transition: background 0.15s, color 0.15s;
}
.hub-pill:hover { color: var(--color-text); }
.hub-pill.is-on { background: var(--stats-c); color: #fff; }

/* -- Sparkline holder --------------------------------------------- */
.hub-spark { margin-top: 8px; }

/* -- Stats bottom strip ------------------------------------------- */

.hub-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--stats-c) 18%, transparent);
}
.hub-stat-strip-cell { display: flex; flex-direction: column; gap: 2px; }
.hub-stat-strip-num {
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}
.hub-stat-strip-lbl {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-muted);
}

/* -- My View tile (dark) ------------------------------------------ */

.hub-card--myview .hub-card-eyebrow-2,
.hub-card--myview .hub-card-meta { color: var(--myview-fg-muted); }

.hub-card-myview-headline {
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--myview-fg);
    margin-top: 6px;
}
.hub-card-myview-sub {
    font-size: 0.92rem;
    color: var(--myview-fg-muted);
    margin-top: 4px;
}

.hub-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}
.hub-widget-chip {
    position: relative;
    display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
    gap: 8px;
    padding: 12px 12px 10px;
    background: var(--myview-bg2);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--myview-fg);
    cursor: pointer;
    min-height: 78px;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.hub-widget-chip:hover { background: #34315a; border-color: rgba(255,255,255,0.18); transform: translateY(-1px); }
.hub-widget-chip i { font-size: 1.05rem; color: var(--myview-fg-muted); }
.hub-widget-chip-lbl {
    font-size: 0.85rem; font-weight: 600;
    color: var(--myview-fg);
}
.hub-widget-chip-dot {
    position: absolute; top: 12px; right: 12px;
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 0.15s, box-shadow 0.15s;
}
.hub-widget-chip.is-pinned { border-color: rgba(196,181,253,0.55); }
.hub-widget-chip.is-pinned .hub-widget-chip-dot {
    background: var(--myview-c);
    box-shadow: 0 0 8px rgba(196,181,253,0.65);
}
.hub-widget-chip.is-pinned i { color: var(--myview-c); }

/* -- Quick task add modal ----------------------------------------- */

.hub-mini-modal {
    position: fixed; inset: 0;
    background: rgba(15,15,30,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    padding: 16px;
}
.hub-mini-modal[hidden] { display: none; }
.hub-mini-modal-card {
    background: var(--color-card-bg);
    border-radius: 16px;
    width: 100%; max-width: 440px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.4);
    overflow: hidden;
}
.hub-mini-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.hub-mini-modal-head h3 {
    margin: 0; font-size: 1.1rem; font-family: var(--font-heading);
}
.hub-mini-modal-close {
    background: transparent; border: 0; cursor: pointer;
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.hub-mini-modal-close:hover { background: var(--color-border); color: var(--color-text); }
.hub-mini-modal-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.hub-mini-field { display: flex; flex-direction: column; gap: 5px; }
.hub-mini-field span {
    font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--color-text-muted);
}
.hub-mini-field input {
    padding: 10px 12px;
    border: 1px solid var(--color-border); border-radius: 8px;
    font: inherit; background: #fff;
}
.hub-mini-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 20px;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
}

/* -- Quick actions bar (carried forward) -------------------------- */

.quick-actions-bar {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin: 4px 0 18px;
}
.quick-action-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.9rem; font-weight: 500;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.quick-action-btn:hover {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-card-bg));
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
    text-decoration: none;
}
.quick-action-btn i { font-size: 1.05rem; opacity: 0.85; }
.quick-action-btn.is-primary {
    background: var(--color-text);
    border-color: var(--color-text);
    color: #fff;
}
.quick-action-btn.is-primary:hover {
    background: color-mix(in srgb, var(--color-text) 88%, #000);
    border-color: color-mix(in srgb, var(--color-text) 88%, #000);
    color: #fff;
}
.quick-action-btn.is-primary i { opacity: 1; }

/* -- Responsive --------------------------------------------------- */

@media (max-width: 1100px) {
    .hub-card-bignum { font-size: 3.6rem; }
    .hub-card-money  { font-size: 2.8rem; }
    .hub-card-myview-headline { font-size: 1.85rem; }
}

@media (max-width: 760px) {
    .hub-grid--rich { gap: 14px; }
    .hub-card { padding: 18px 18px 16px; border-radius: 14px; }
    .hub-card-bignum { font-size: 3rem; }
    .hub-card-money  { font-size: 2.3rem; }
    .hub-card-myview-headline { font-size: 1.55rem; }
    .hub-stat-strip { gap: 12px; }
    .hub-stat-strip-num { font-size: 1.2rem; }
    .hub-widget-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
    .hub-widget-chip { padding: 10px 10px 8px; min-height: 64px; }
}

@media (max-width: 540px) {
    .hub-grid--rich { grid-template-columns: 1fr; }
    .quick-action-btn { padding: 8px 14px; font-size: 0.85rem; }
}

/* =======================================================
   Topbar globals (1.0.24.0)
   Search field + notifications bell, shown on every page.
======================================================= */

.topbar-search {
    position: relative;
    display: inline-flex; align-items: center;
    margin-right: 6px;
}
.topbar-search-icon {
    position: absolute;
    left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1rem;
    pointer-events: none;
}
.topbar-search input[type="search"] {
    width: 280px;
    padding: 9px 14px 9px 36px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: #fafafa;
    font: inherit; font-size: 0.88rem;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.topbar-search input[type="search"]:focus {
    outline: none;
    background: #fff;
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 15%, transparent);
}
.topbar-search input[type="search"]::placeholder { color: var(--color-text-muted); }

.topbar-bell {
    position: relative;
    width: 38px; height: 38px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    border: 1px solid var(--color-border);
    background: var(--color-card-bg);
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin-right: 6px;
}
.topbar-bell:hover { background: #f5f5f7; }
.topbar-bell i { font-size: 1.1rem; }
.topbar-bell-dot {
    position: absolute;
    top: 8px; right: 9px;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-card-bg);
}

/* 1.0.30.10 -- urgent state (overdue/due-today tasks) and count badge.
   Also makes the bell a clickable link to /dashboard/tasks. */
.topbar-bell { text-decoration: none; }
.topbar-bell.is-urgent {
    background: #fee2e2;
    border-color: #fca5a5;
    color: #b91c1c;
    animation: topbar-bell-pulse 1.6s ease-out 1;
}
.topbar-bell.is-urgent:hover { background: #fecaca; }
.topbar-bell.is-urgent i { color: #b91c1c; }
.topbar-bell-count {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #dc2626;
    color: #fff;
    font-size: 11px; font-weight: 600; line-height: 18px;
    text-align: center;
    border: 2px solid var(--color-card-bg);
    box-sizing: content-box;
}
@keyframes topbar-bell-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.55); }
    100% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
}

/* 1.0.30.10 -- AJAX search dropdown */
.topbar-search-results {
    position: absolute;
    top: calc(100% + 6px); left: 0;
    width: 380px;
    max-height: 460px;
    overflow-y: auto;
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    z-index: 1000;
}
.topbar-search-group + .topbar-search-group {
    border-top: 1px solid var(--color-border);
}
.topbar-search-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    padding: 8px 12px 4px;
}
.topbar-search-row {
    display: block;
    padding: 8px 12px;
    color: var(--color-text);
    text-decoration: none;
    border-radius: 6px;
    margin: 0 4px;
}
.topbar-search-row:hover { background: #f5f5f7; }
.topbar-search-row-label {
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.3;
}
.topbar-search-row-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
    line-height: 1.3;
}
.topbar-search-empty {
    padding: 16px;
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.88rem;
}

@media (max-width: 1100px) {
    .topbar-search input[type="search"] { width: 200px; }
}
@media (max-width: 760px) {
    .topbar-search { display: none; }
}

/* =======================================================
   Sidebar collapse / rail mode (1.0.24.1)
   On desktop the hamburger toggles between the full sidebar
   and a 64px icon-only rail. State is persisted to
   localStorage so it survives page reloads. Mobile keeps
   its existing slide-in behaviour (.sidebar.open) untouched.
======================================================= */

/* Pin the icon column to a fixed 64px when collapsed and
   match the .main-wrap offset to it via a CSS variable
   override so all the layout maths stays in one place. */
@media (min-width: 901px) {
    body.sidebar-collapsed { --sidebar-width: 64px; }

    body.sidebar-collapsed .sidebar { overflow: visible; }

    /* Hide everything that has text and just keep the icons */
    body.sidebar-collapsed .sidebar-logo-text,
    body.sidebar-collapsed .sidebar-logo-sub,
    body.sidebar-collapsed .nav-section-label,
    body.sidebar-collapsed .nav-item span:not(.nav-icon),
    body.sidebar-collapsed .sidebar-user-info,
    body.sidebar-collapsed .sidebar-version {
        display: none;
    }

    body.sidebar-collapsed .sidebar-logo {
        padding: 14px 12px 14px;
        text-align: center;
    }
    body.sidebar-collapsed .sidebar-logo-img {
        margin: 0 auto;
    }
    body.sidebar-collapsed .nav-item {
        justify-content: center;
        padding: 10px 0;
        border-left-width: 0;
        position: relative;
    }
    body.sidebar-collapsed .nav-item.active {
        background: rgba(255,255,255,0.08);
    }
    body.sidebar-collapsed .nav-item.active::before {
        content: ""; position: absolute; left: 0; top: 6px; bottom: 6px;
        width: 3px; background: var(--color-accent); border-radius: 0 3px 3px 0;
    }
    body.sidebar-collapsed .nav-item i { font-size: 1.2rem; }
    body.sidebar-collapsed .nav-item .nav-chevron { display: none; }

    /* Tooltip on hover so users can still discover labels */
    body.sidebar-collapsed .nav-item[data-label]:hover::after {
        content: attr(data-label);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 12px;
        padding: 5px 10px;
        background: var(--color-text);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
        z-index: 250;
        pointer-events: none;
    }

    body.sidebar-collapsed .sidebar-footer { padding: 12px 8px; }
    body.sidebar-collapsed .sidebar-user {
        justify-content: center; padding: 8px 0;
    }

    /* Nav groups: hide expanded children + label/chevron, just show
       the group's icon. Clicking the group icon expands the sidebar. */
    body.sidebar-collapsed .nav-group-children { display: none !important; }
    body.sidebar-collapsed .nav-group-label,
    body.sidebar-collapsed .nav-group-chevron { display: none; }
    body.sidebar-collapsed .nav-group-toggle {
        justify-content: center;
        padding: 10px 0;
        position: relative;
    }
    body.sidebar-collapsed .nav-group-toggle i { font-size: 1.2rem; }
    body.sidebar-collapsed .nav-group-toggle[data-label]:hover::after {
        content: attr(data-label);
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        margin-left: 12px;
        padding: 5px 10px;
        background: var(--color-text);
        color: #fff;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
        border-radius: 6px;
        z-index: 250;
        pointer-events: none;
    }
}

/* =======================================================
   Topbar clock + closes-in pill (1.0.24.1)
======================================================= */

.topbar-clock {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}
.topbar-clock-sep { opacity: 0.45; }

.topbar-close-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-success, #10b981) 14%, transparent);
    color: #0f8a5f;
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.topbar-close-pill.is-soon {
    background: color-mix(in srgb, var(--color-accent) 14%, transparent);
    color: var(--color-accent);
}
.topbar-close-pill.is-closed {
    background: rgba(107,114,128,0.14);
    color: #6b7280;
}

/* =======================================================
   Till (1.0.25.0)
   Two-column quick-sale POS layout with cart, totals and
   payment modal. Designed to work well at counter sizes
   (iPad landscape 1024+) and desktop.
======================================================= */

.till-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 22px;
    margin-top: 4px;
    align-items: flex-start;
}

@media (max-width: 900px) {
    .till-shell { grid-template-columns: 1fr; }
}

.till-pane {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.till-section { display: flex; flex-direction: column; gap: 8px; }

.till-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

/* -- Search inputs --------------------------------------------------- */

.till-search {
    position: relative;
    display: flex;
    align-items: center;
}
.till-search > i {
    position: absolute;
    left: 14px;
    top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 1.05rem;
    pointer-events: none;
}
.till-search input {
    width: 100%;
    padding: 13px 14px 13px 42px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fafafa;
    font: inherit;
    font-size: 0.95rem;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.till-search input:focus {
    outline: none;
    background: #fff;
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}
/* 1.0.28.3 -- once the user has typed something, the search icon becomes
   visual noise next to their walk-in name. Hide the icon and let the input
   reclaim that left padding. */
.till-search.is-typing > i { display: none; }
.till-search.is-typing input { padding-left: 14px; }

.till-search-results {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    background: #fff;
    max-height: 320px;
    overflow-y: auto;
    box-shadow: 0 6px 16px -8px rgba(0,0,0,0.18);
}
.till-search-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 0.1s;
}
.till-search-row:last-child { border-bottom: 0; }
.till-search-row:hover { background: #fafafa; }
.till-search-row-name { font-weight: 600; color: var(--color-text); font-size: 0.95rem; }
.till-search-row-meta { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.till-search-row-price {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--color-text);
}
.till-search-empty {
    padding: 14px 16px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
}

/* -- Quick-add custom line ------------------------------------------- */

.till-quickadd { margin-top: 6px; }
.till-quickadd summary {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    padding: 4px 0;
}
.till-quickadd summary:hover { color: var(--color-text); }
.till-quickadd-fields {
    display: grid;
    grid-template-columns: 1fr 110px 70px auto;
    gap: 8px;
    margin-top: 8px;
}
.till-quickadd-fields input {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
}
@media (max-width: 600px) {
    .till-quickadd-fields { grid-template-columns: 1fr 1fr; }
    .till-quickadd-fields button { grid-column: 1 / -1; }
}

/* 1.0.28.2 -- richer non-catalogue product form. Two-row layout: SKU + description
   on top, then VAT toggle + price + qty + Add button below. Visually distinct
   summary so it stands apart from the simpler "custom line" form. */
.till-quickadd--product summary {
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.till-quickadd--product summary i { color: var(--color-accent); }
/* The .till-quickadd-fields--product layout rules live further down in this
   file (after the conflicting later .till-quickadd-fields override) so that
   source-order cascade keeps them winning. Keep this block summary-only. */

/* -- Customer attached chip ------------------------------------------ */

.till-customer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-card-bg));
    border: 1px solid color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    border-radius: 10px;
}
.till-customer > i {
    font-size: 1.5rem;
    color: var(--color-accent);
    flex-shrink: 0;
}
.till-customer > div { flex: 1; min-width: 0; }
.till-customer-name { font-weight: 600; }
.till-customer-meta { font-size: 0.8rem; color: var(--color-text-muted); }
.till-customer-clear {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.till-customer-clear:hover { background: rgba(0,0,0,0.05); color: var(--color-text); }

.till-walkin-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.till-walkin-note i { font-size: 0.95rem; }

/* -- Cart ------------------------------------------------------------- */

.till-cart-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}
.till-cart-title {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
}
.till-cart-clear {
    display: inline-flex; align-items: center; gap: 6px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--color-text-muted);
    font-size: 0.82rem; font-weight: 500;
    padding: 4px 8px; border-radius: 6px;
}
.till-cart-clear:hover { background: #fafafa; color: var(--color-accent); }

.till-cart-list { list-style: none; margin: 0; padding: 0; }
.till-cart-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 36px 16px;
    color: var(--color-text-muted);
    text-align: center;
}
.till-cart-empty i { font-size: 2.5rem; opacity: 0.3; }
.till-cart-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border);
}
.till-cart-row:last-child { border-bottom: 0; }
.till-cart-row-main { min-width: 0; }
.till-cart-row-name {
    font-weight: 600;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.till-cart-row-sku { font-size: 0.74rem; color: var(--color-text-muted); }

.till-cart-row-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
}
.till-qty-btn {
    width: 30px; height: 32px;
    border: 0; background: transparent;
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--color-text);
}
.till-qty-btn:hover { background: #fafafa; }
.till-qty-input {
    width: 44px;
    border: 0;
    border-left: 1px solid var(--color-border);
    border-right: 1px solid var(--color-border);
    text-align: center;
    font: inherit;
    height: 32px;
    -moz-appearance: textfield;
}
.till-qty-input::-webkit-outer-spin-button,
.till-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.till-cart-row-price { text-align: right; font-variant-numeric: tabular-nums; }
.till-cart-row-line-total { font-weight: 700; }
.till-cart-row-unit { font-size: 0.74rem; color: var(--color-text-muted); }

/* 1.0.28.2 -- per-line discount input
   1.0.28.4 -- supports % or fixed currency mode via the toggle next to it. */
.till-cart-row-disc {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}
.till-cart-row-disc label {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-right: 2px;
}
.till-disc-input {
    width: 72px;
    height: 26px;
    border: 1px solid var(--color-border);
    border-radius: 6px 0 0 6px;
    background: #fff;
    text-align: right;
    font: inherit;
    font-size: 0.82rem;
    padding: 0 8px;
    -moz-appearance: textfield;
}
.till-disc-input::-webkit-outer-spin-button,
.till-disc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 1.0.28.4 -- two-button mode toggle (% / currency) attached to the input */
.till-disc-toggle {
    display: inline-flex;
    align-items: stretch;
    height: 26px;
    border: 1px solid var(--color-border);
    border-left: 0;
    border-radius: 0 6px 6px 0;
    overflow: hidden;
    background: #fff;
}
.till-disc-mode {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0 8px;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
    line-height: 1;
    min-width: 26px;
    transition: background 0.12s, color 0.12s;
}
.till-disc-mode + .till-disc-mode { border-left: 1px solid var(--color-border); }
.till-disc-mode.is-on {
    background: var(--color-text);
    color: #fff;
}
.till-disc-mode:hover:not(.is-on) { background: #f3f3f3; color: var(--color-text); }

.till-disc-amt {
    color: var(--color-accent);
    font-weight: 600;
    margin-left: 6px;
    font-variant-numeric: tabular-nums;
}

/* The cart-level toggle inherits all the above but is tuned for the totals
   row context (slightly bigger to match the surrounding type). */
.till-disc-toggle--cart { height: 26px; }

.till-cart-row-remove {
    background: transparent; border: 0; cursor: pointer;
    width: 28px; height: 28px;
    border-radius: 6px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.till-cart-row-remove:hover { background: #fde8ec; color: var(--color-accent); }

/* -- Totals ---------------------------------------------------------- */

.till-totals {
    margin-top: 12px;
    padding: 14px 16px;
    background: #fafafa;
    border-radius: 10px;
}
.till-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0;
    font-variant-numeric: tabular-nums;
}
.till-total-row span:first-child { color: var(--color-text-muted); font-size: 0.9rem; }
.till-total-row--big {
    border-top: 1px solid var(--color-border);
    margin-top: 8px;
    padding-top: 12px;
    font-family: var(--font-heading);
}
.till-total-row--big span:first-child {
    color: var(--color-text); font-size: 1rem; font-weight: 600;
}
.till-total-row--big span:last-child {
    font-weight: 800; font-size: 1.5rem;
}

/* 1.0.28.2 -- cart-level overall discount row */
.till-total-row--discount span:last-child { color: var(--color-accent); font-weight: 600; }
.till-discount-label {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    color: var(--color-text-muted) !important;
    font-size: 0.9rem !important;
}
/* 1.0.28.4 -- input now butts up against the % / currency toggle, so the
   right edge is square. Width widened from 56px to fit £ amounts like 12.50. */
#till-cart-discount-pct {
    width: 80px;
    height: 26px;
    border: 1px solid var(--color-border);
    border-radius: 6px 0 0 6px;
    background: #fff;
    text-align: right;
    padding: 0 8px;
    font: inherit;
    font-size: 0.85rem;
    -moz-appearance: textfield;
}
#till-cart-discount-pct::-webkit-outer-spin-button,
#till-cart-discount-pct::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Cart toggle sits right after the input, so remove the gap between
   them (the .till-discount-label sets gap:6px which would create a seam). */
.till-discount-label .till-disc-toggle--cart { margin-left: -6px; }

/* -- Big "Take Payment" button -------------------------------------- */

.till-pay-btn {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: #0f8a5f;
    color: #fff;
    border: 0;
    padding: 18px 22px;
    border-radius: 14px;
    font-family: var(--font-heading);
    font-size: 1.15rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 8px 22px -10px rgba(15,138,95,0.55);
}
.till-pay-btn:hover { background: #0d7551; transform: translateY(-1px); }
.till-pay-btn:active { transform: translateY(0); }
.till-pay-btn[disabled] {
    background: #d4d4d8; cursor: not-allowed;
    box-shadow: none; color: #71717a;
}
.till-pay-btn i { font-size: 1.4rem; }
.till-pay-amt {
    font-variant-numeric: tabular-nums;
    background: rgba(255,255,255,0.18);
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 1rem;
}
.till-pay-btn[disabled] .till-pay-amt { background: rgba(0,0,0,0.06); }

/* -- Payment modal --------------------------------------------------- */

.till-modal {
    position: fixed; inset: 0;
    background: rgba(15,15,30,0.55);
    display: flex; align-items: center; justify-content: center;
    z-index: 1100;
    padding: 16px;
}
.till-modal[hidden] { display: none; }
.till-modal-card {
    background: var(--color-card-bg);
    border-radius: 16px;
    width: 100%; max-width: 480px;
    box-shadow: 0 30px 70px -20px rgba(0,0,0,0.45);
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}
.till-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}
.till-modal-head h3 { margin: 0; font-family: var(--font-heading); font-size: 1.15rem; }
.till-modal-close {
    background: transparent; border: 0; cursor: pointer;
    width: 34px; height: 34px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.till-modal-close:hover { background: var(--color-border); color: var(--color-text); }

.till-modal-body {
    padding: 20px;
    display: flex; flex-direction: column;
    gap: 16px;
    overflow-y: auto;
}

.till-pay-summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 16px;
    background: #fafafa;
    border-radius: 10px;
}
.till-pay-summary span { color: var(--color-text-muted); }
.till-pay-summary strong {
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.till-pay-method-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}
.till-pay-method {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    background: #fff;
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    font: inherit; font-size: 0.85rem; font-weight: 500;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s;
}
.till-pay-method:hover { border-color: var(--color-text-muted); }
.till-pay-method i { font-size: 1.4rem; color: var(--color-text-muted); }
.till-pay-method.is-on {
    background: color-mix(in srgb, var(--color-accent) 8%, var(--color-card-bg));
    border-color: var(--color-accent);
    color: var(--color-accent);
}
.till-pay-method.is-on i { color: var(--color-accent); }

.till-pay-field {
    display: flex; flex-direction: column; gap: 5px;
}
.till-pay-field span {
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.till-pay-field input {
    padding: 11px 14px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit; font-size: 0.95rem;
}
.till-pay-field input[type="number"] {
    font-variant-numeric: tabular-nums;
}

.till-pay-change {
    padding: 11px 14px;
    background: color-mix(in srgb, #f59e0b 10%, transparent);
    border: 1px solid color-mix(in srgb, #f59e0b 30%, transparent);
    border-radius: 10px;
    color: #92400e;
    display: flex; align-items: center; gap: 10px;
}
.till-pay-change i { font-size: 1.2rem; }

.till-modal-foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 14px 20px;
    border-top: 1px solid var(--color-border);
    background: #fafafa;
}

/* -- Success modal --------------------------------------------------- */

.till-modal-card--success {
    text-align: center;
    padding: 36px 28px 28px;
    max-width: 420px;
    position: relative;
}
.till-modal-close--corner {
    position: absolute;
    top: 10px;
    right: 10px;
}
.till-success-icon {
    font-size: 3.5rem;
    color: #0f8a5f;
    margin-bottom: 6px;
}
.till-modal-card--success h3 {
    margin: 4px 0 4px;
    font-family: var(--font-heading);
    font-size: 1.5rem;
}
.till-success-num {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.95rem;
}
.till-success-amt {
    margin: 14px 0 6px;
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-weight: 800;
    color: #0f8a5f;
    font-variant-numeric: tabular-nums;
}
.till-success-change {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}
.till-success-change strong {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}
.till-success-actions {
    display: flex;
    flex-wrap: wrap;            /* 1.0.30.3 -- 4-button row overflowed at 420px */
    gap: 8px;
    justify-content: center;
    margin-top: 22px;
}
.till-success-actions .btn {
    flex: 0 0 auto;
}

/* Spin animation for the loading icon */
@keyframes tillSpin { to { transform: rotate(360deg); } }
.ph-spin { animation: tillSpin 0.7s linear infinite; display: inline-block; }

/* =======================================================
   Till (1.0.26.0) -- mode picker, two-flow rebuild
   Supplements the existing 1.0.25.0 till section above.
======================================================= */

/* The `hidden` HTML attribute is the right semantic for "not currently
   visible", but our flex/grid display rules below override its default
   `display:none`. Restore it for any element inside the till containers
   AND for the till modals (which live at body level). Scoped narrowly
   so we cannot accidentally break other parts of the app. */
.till-shell [hidden],
.till-mode-picker [hidden],
#till-sale-mode[hidden],
#till-pay-mode[hidden],
#till-pay-modal[hidden],
#till-success-modal[hidden] {
    display: none !important;
}

.till-mode-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.till-mode {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 12px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--color-text);
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.till-mode:hover { border-color: var(--color-text-muted); }
.till-mode.is-on {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-card-bg));
}
.till-mode i {
    font-size: 1.7rem;
    color: var(--color-text-muted);
    flex-shrink: 0;
}
.till-mode.is-on i { color: var(--color-accent); }
.till-mode div { display: flex; flex-direction: column; min-width: 0; }
.till-mode-title {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.1;
}
.till-mode-sub {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
@media (max-width: 600px) {
    .till-mode-picker { grid-template-columns: 1fr; }
}

/* Customer chip (replaces the 1.0.25.0 .till-customer when an existing
   customer is attached). */
.till-customer-chip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    background: color-mix(in srgb, #0f8a5f 8%, var(--color-card-bg));
    border: 1px solid color-mix(in srgb, #0f8a5f 35%, var(--color-border));
    border-radius: 10px;
}
.till-customer-chip > i {
    font-size: 1.6rem;
    color: #0f8a5f;
    flex-shrink: 0;
}
.till-customer-chip-body { flex: 1; min-width: 0; }
.till-customer-chip-name { font-weight: 600; color: var(--color-text); }
.till-customer-chip-meta { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 2px; }
.till-customer-chip-x {
    background: transparent;
    border: 0;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted);
}
.till-customer-chip-x:hover { background: rgba(0,0,0,0.05); color: var(--color-text); }

/* "Add full details" toggle link */
.till-link-btn {
    align-self: flex-start;
    background: transparent;
    border: 0;
    color: var(--color-accent);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.till-link-btn:hover { text-decoration: underline; }
.till-link-btn i { font-size: 0.95rem; }

/* 1.0.28.3 -- variant link button + actions row used to host both the
   "Add full details" toggle and the "Create full customer record" trigger
   side by side under the customer-name field. */
.till-link-btn--alt { color: var(--color-text); }
.till-link-btn--alt i { color: var(--color-accent); }
.till-walkin-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
}
.till-walkin-actions[hidden] { display: none; }
@media (max-width: 540px) {
    .till-walkin-actions { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* 1.0.28.3 -- Create-full-customer modal. The shared .till-modal/.till-modal-card
   classes default to 480px which is too tight for a customer form. Widen the card
   and tune the body for a longer multi-section form. */
.till-modal-card--customer { max-width: 720px; }
.till-cc-section {
    margin: 6px 0 -2px;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
    border-top: 1px solid var(--color-border);
    padding-top: 14px;
}
.till-cc-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.till-cc-muted {
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-left: 4px;
}
.till-cc-error {
    background: rgba(220,38,38,0.08);
    color: var(--color-accent);
    border: 1px solid rgba(220,38,38,0.25);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.88rem;
}
#till-create-customer-modal .till-modal-body { gap: 12px; }
#till-create-customer-modal select,
#till-create-customer-modal textarea,
#till-create-customer-modal input {
    font: inherit;
}
#till-create-customer-modal textarea {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
}
#till-create-customer-modal select {
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    width: 100%;
}

/* Walk-in extra fields */
.till-walkin-extra {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    background: #fafafa;
    border: 1px solid var(--color-border);
    border-radius: 10px;
}
.till-walkin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (max-width: 600px) {
    .till-walkin-grid { grid-template-columns: 1fr; }
}

/* Generic till field */
.till-fld { display: flex; flex-direction: column; gap: 5px; }
.till-fld span {
    font-size: 0.78rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.till-fld input,
.till-fld textarea {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font: inherit;
    font-size: 0.92rem;
    background: #fff;
}
.till-fld input:focus,
.till-fld textarea:focus {
    outline: none;
    border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 14%, transparent);
}

.till-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.9rem;
}
.till-checkbox input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }

/* Sale destination chooser */
.till-destinations { display: flex; flex-direction: column; gap: 8px; }
.till-dest-row {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.till-dest-row:hover { border-color: var(--color-text-muted); }
.till-dest-row.is-on {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-card-bg));
}
.till-dest-row input[type="radio"] {
    margin-top: 2px;
    accent-color: var(--color-accent);
}
.till-dest-body { flex: 1; min-width: 0; }
.till-dest-title { font-weight: 600; }
.till-dest-meta { font-size: 0.82rem; color: var(--color-text-muted); margin-top: 2px; }

/* Inc/Ex VAT pill toggle on custom-line price */
.till-vat-toggle {
    display: inline-flex;
    background: #f5f5f7;
    border-radius: 999px;
    padding: 3px;
}
.till-vat-pill {
    border: 0; background: transparent; cursor: pointer;
    padding: 5px 11px;
    border-radius: 999px;
    font-size: 0.78rem; font-weight: 600;
    color: var(--color-text-muted);
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.till-vat-pill:hover { color: var(--color-text); }
.till-vat-pill.is-on { background: var(--color-text); color: #fff; }

/* Quick-add fields layout updated to fit the VAT toggle */
.till-quickadd-fields {
    display: grid;
    grid-template-columns: 1fr auto 110px 70px auto;
    gap: 8px;
    margin-top: 8px;
    align-items: center;
}
@media (max-width: 700px) {
    .till-quickadd-fields { grid-template-columns: 1fr 1fr; }
    .till-quickadd-fields > .till-vat-toggle,
    .till-quickadd-fields > button { grid-column: 1 / -1; justify-self: start; }
}

/* 1.0.28.4 -- non-catalogue product form layout. Placed here AFTER the
   `.till-quickadd-fields` override above so source-order cascade lets these
   rules win without needing !important everywhere. The form is a vertical
   stack of three rows: description (full width), then SKU + VAT toggle,
   then unit-price + qty + Add button. */
.till-quickadd-fields--product {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    gap: 10px;
    margin-top: 10px;
    align-items: stretch;
}
.till-quickadd-fields--product .till-quickadd-row {
    display: grid;
    gap: 10px;
    width: 100%;
}
.till-quickadd-fields--product .till-quickadd-row--desc {
    grid-template-columns: 1fr;
}
.till-quickadd-fields--product .till-quickadd-row--meta {
    grid-template-columns: 1fr auto;
    align-items: center;
}
.till-quickadd-fields--product .till-quickadd-row--nums {
    grid-template-columns: 1fr 110px auto;
    align-items: end;
}
.till-quickadd-fields--product input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: #fff;
    font: inherit;
    box-sizing: border-box;
}
.till-quickadd-fields--product .till-nonprod-sku {
    font-family: monospace;
    font-size: 0.88rem;
}
.till-nonprod-num-fld {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.till-nonprod-num-fld > span {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
}
.till-nonprod-num-fld input {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.till-nonprod-addbtn {
    height: 38px;
    white-space: nowrap;
}
@media (max-width: 700px) {
    .till-quickadd-fields--product .till-quickadd-row--meta {
        grid-template-columns: 1fr;
    }
    .till-quickadd-fields--product .till-quickadd-row--nums {
        grid-template-columns: 1fr 1fr;
    }
    .till-quickadd-fields--product .till-quickadd-row--nums .till-nonprod-addbtn {
        grid-column: 1 / -1;
    }
}

/* VAT note above cart */
.till-vat-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin: -8px 0 8px;
}
.till-vat-note i { font-size: 0.95rem; }

/* 1.0.28.5 -- inline hint shown under the totals breakdown when any fixed
   ("£") discount is active. Reminds the cashier the value is taken off the
   inc-VAT total. */
.till-disc-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--color-text-muted);
    background: color-mix(in srgb, var(--color-accent) 7%, transparent);
    border-radius: 8px;
    padding: 8px 10px;
    margin-top: 4px;
}
.till-disc-hint[hidden] { display: none; }
.till-disc-hint i { font-size: 0.9rem; flex-shrink: 0; margin-top: 1px; }

/* "Save as new customer" prompt inside the payment modal */
.till-save-customer-prompt {
    padding: 12px 14px;
    background: color-mix(in srgb, var(--color-accent) 8%, transparent);
    border: 1px dashed color-mix(in srgb, var(--color-accent) 40%, transparent);
    border-radius: 10px;
}
.till-save-customer-hint {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    margin-top: 4px;
    margin-left: 24px;
}

/* Pay-invoice mode -- single-pane shell */
.till-shell--single { grid-template-columns: minmax(0, 860px); justify-content: center; }
@media (max-width: 900px) {
    .till-shell--single { grid-template-columns: 1fr; }
}

/* Pay-invoice empty state -- shown when no customer is picked yet so the
   pane has visible content instead of floating mid-page as a tiny card. */
.till-pay-empty-state {
    align-items: center;
    text-align: center;
    padding: 28px 8px 12px;
    border-top: 1px dashed var(--color-border);
    margin-top: 4px;
}
.till-pay-empty-icon {
    font-size: 2.6rem;
    color: var(--color-text-muted);
    opacity: 0.5;
    margin-bottom: 6px;
}
.till-pay-empty-title {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text);
    margin-bottom: 4px;
}
.till-pay-empty-body {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    max-width: 420px;
    line-height: 1.5;
}

/* Open invoices list */
.till-pay-invoices { display: flex; flex-direction: column; gap: 8px; }
.till-pay-invoice {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.till-pay-invoice:hover { border-color: var(--color-text-muted); }
.till-pay-invoice.is-on {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-card-bg));
}
.till-pay-invoice-num {
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-text);
}
.till-pay-invoice-meta {
    font-size: 0.82rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}
.till-pay-invoice-money { text-align: right; font-variant-numeric: tabular-nums; }
.till-pay-invoice-outstanding {
    font-weight: 700;
    color: var(--color-accent);
}
.till-pay-invoice-of {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.till-empty-hint {
    padding: 14px 16px;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: center;
    border: 1px dashed var(--color-border);
    border-radius: 10px;
    margin: 0;
}

/* Payment-type chooser (deposit / stage / balance / extra) */
.till-pay-types {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 600px) {
    .till-pay-types { grid-template-columns: 1fr; }
}
.till-pay-type {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 14px;
    background: var(--color-card-bg);
    border: 1.5px solid var(--color-border);
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;
}
.till-pay-type:hover { border-color: var(--color-text-muted); }
.till-pay-type.is-on {
    border-color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 6%, var(--color-card-bg));
}
.till-pay-type-title { font-weight: 600; color: var(--color-text); }
.till-pay-type-sub {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}
.till-pay-type.is-on .till-pay-type-title { color: var(--color-accent); }