/* All Things Us - Protea / Fynbos theme */
:root {
  --protea: #A61E4D;        /* deep protea pink  (7.6:1 on white) */
  --protea-dark: #7F1238;
  --blush: #FBE3EA;
  --fynbos: #2F5D50;        /* fynbos green */
  --sage: #E4EEE8;
  --gold: #B7791F;
  --cream: #FFF8F1;
  --ink: #2A2326;
  --bs-primary: #A61E4D; --bs-primary-rgb: 166,30,77;
  --bs-body-bg: var(--cream); --bs-body-color: var(--ink);
  --bs-link-color: #8E1642; --bs-link-hover-color: #5F0E2B;
  --bs-body-font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
html { font-size: 100%; scroll-behavior: smooth; }
html.atu-large { font-size: 125%; }
h1, h2, h3, .navbar-brand, .section-title { font-family: Georgia, "Times New Roman", serif; color: var(--protea-dark); }
h1:focus { outline: none; }
.btn-primary { --bs-btn-bg: var(--protea); --bs-btn-border-color: var(--protea); --bs-btn-hover-bg: var(--protea-dark); --bs-btn-hover-border-color: var(--protea-dark);
  --bs-btn-active-bg: var(--protea-dark); --bs-btn-disabled-bg: #8b6a76; --bs-btn-disabled-border-color: #8b6a76; --bs-btn-color:#fff; --bs-btn-hover-color:#fff; }
.btn-outline-primary { --bs-btn-color: var(--protea); --bs-btn-border-color: var(--protea); --bs-btn-hover-bg: var(--protea); --bs-btn-hover-border-color: var(--protea); --bs-btn-active-bg: var(--protea-dark); }
.text-muted { color: #5d5258 !important; }

/* Accessibility */
.skip-link { position: absolute; left: -999px; top: 0; background: #fff; color: var(--protea-dark); padding: .75rem 1rem; z-index: 2000; font-weight: 700; }
.skip-link:focus { left: .5rem; top: .5rem; outline: 3px solid var(--gold); }
:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; }
main:focus { outline: none; }
.a11y-bar { background: #1f3b33; color: #fff; padding: .25rem 0; }
.a11y-bar .btn-outline-light[aria-pressed="true"] { background: #fff; color: #1f3b33; }

/* Navigation */
.atu-nav { background: linear-gradient(90deg, var(--protea-dark), var(--protea)); }
.atu-nav .navbar-brand, .atu-nav .nav-link { color: #fff; }
.atu-nav .navbar-brand { font-size: 1.4rem; }
.atu-nav .nav-link:hover, .atu-nav .nav-link.active { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.atu-nav .navbar-toggler { background: #fff; }
.badge-petal { background: var(--gold); color: #fff; }
.cart-count { position: absolute; top: 0; right: -4px; font-size: .7rem; }
.atu-nav .btn-link.nav-link { text-decoration: none; }

/* Hero */
.hero { background: radial-gradient(circle at 85% 20%, var(--blush), transparent 55%), linear-gradient(180deg, #fff 0%, var(--cream) 100%); padding: 3rem 0; }
.hero h1 { font-size: clamp(2.2rem, 6vw, 3.6rem); }
.eyebrow { text-transform: uppercase; letter-spacing: .15em; color: var(--fynbos); font-weight: 700; font-size: .85rem; }
.hero-img { max-width: 100%; height: auto; }
.hero-lite { background: var(--blush); border-radius: 1rem; padding: 1.5rem; }
.alert-petal { background: var(--blush); border: 1px solid #e9b6c6; color: var(--ink); }
.section-title { border-bottom: 3px solid var(--blush); padding-bottom: .4rem; margin-bottom: 1.25rem; }

/* Cards */
.product-card { border: 1px solid #ecd9de; border-radius: 1rem; overflow: hidden; position: relative; transition: transform .2s, box-shadow .2s; background:#fff; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(166,30,77,.15); }
.stretched-name::after { content: ""; position: absolute; inset: 0 0 3.5rem 0; }
.product-card .btn { position: relative; z-index: 2; }
.product-card img, .product-hero { background: var(--blush); aspect-ratio: 1/1; object-fit: cover; }
.deal-card { background: #fff; border: 2px dashed var(--protea); border-radius: 1rem; padding: 1rem 1.25rem; }
.cat-tile { display: flex; flex-direction: column; align-items: center; gap: .4rem; background: var(--sage); color: var(--fynbos); border-radius: 1rem; padding: 1.25rem .5rem; text-decoration: none; font-weight: 600; text-align: center; height: 100%; }
.cat-tile i { font-size: 1.8rem; color: var(--protea); }
.cat-tile:hover { background: var(--blush); }
.summary-card, .order-card, .kpi { background: #fff; border: 1px solid #ecd9de; border-radius: 1rem; padding: 1.25rem; }
.order-card { margin-bottom: .75rem; }
.filter-bar { background: #fff; border: 1px solid #ecd9de; border-radius: 1rem; padding: 1rem; margin: 0; }
.qty-input { width: 6rem; }
.cart-line { display: flex; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #ecd9de; align-items: flex-start; }
.cart-line img { border-radius: .75rem; background: var(--blush); }
.option-row { display: flex; gap: .75rem; align-items: center; background: #fff; border: 1px solid #d9c3ca; border-radius: .75rem; padding: .75rem 1rem; margin-bottom: .5rem; }
.option-row:has(input:checked) { border-color: var(--protea); box-shadow: 0 0 0 2px var(--protea); }
.progress { height: 1rem; background: var(--blush); }
.progress-bar { background: var(--fynbos); }
fieldset { border: 0; padding: 0; } legend { float: none; font-family: Georgia, serif; color: var(--protea-dark); }
.auth-wrap { max-width: 460px; }
.divider { display: flex; align-items: center; text-align: center; margin: 1.25rem 0; color: #5d5258; }
.divider::before, .divider::after { content: ""; flex: 1; border-bottom: 1px solid #d9c3ca; } .divider span { padding: 0 .75rem; }

/* Footer & toast */
.atu-footer { background: var(--fynbos); color: #fff; }
.atu-footer h2 { color: #fff; font-family: Georgia, serif; }
.atu-toast { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 1500; width: min(92vw, 28rem); pointer-events: none; }
.toast-msg { background: var(--fynbos); color: #fff; border-radius: .75rem; padding: .8rem 1.1rem; box-shadow: 0 6px 20px rgba(0,0,0,.25); animation: rise .3s ease-out; }
@keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Gamification */
.wheel { width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; font-size: 3rem; color: #fff; margin: 0 auto 1rem;
  background: conic-gradient(var(--protea) 0 25%, var(--gold) 0 50%, var(--fynbos) 0 75%, #d9487a 0); }
.wheel.spinning { animation: spin 1.5s cubic-bezier(.2,.8,.3,1); }
@keyframes spin { to { transform: rotate(1080deg); } }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .75rem; }
.badge-grid li { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .2rem; padding: .75rem; border-radius: .75rem; border: 2px solid transparent; }
.badge-grid i { font-size: 1.8rem; }
.badge-grid .earned { background: var(--blush); border-color: var(--protea); } .badge-grid .earned i { color: var(--protea); }
.badge-grid .locked { background: #eee; color: #4a4a4a; }

/* Admin */
.admin-nav .nav-link { color: var(--protea-dark); } .admin-nav .nav-link.active { background: var(--protea); color: #fff; }
.kpi span { display: block; font-size: .85rem; color: #5d5258; } .kpi strong { display: block; font-size: 1.6rem; color: var(--protea-dark); } .kpi small { color: #5d5258; }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 180px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; min-width: 0; }
.bar { width: 100%; background: linear-gradient(180deg, var(--protea), #d9487a); border-radius: 4px 4px 0 0; min-height: 2px; }
.bar-lbl { font-size: .62rem; margin-top: 4px; writing-mode: vertical-rl; transform: rotate(180deg); height: 3rem; }
table.table { --bs-table-bg: #fff; }
.quickgrid th, th[role=columnheader] { white-space: nowrap; }

/* Responsive tweaks */
@media (max-width: 575.98px) {
  .cart-line { flex-wrap: wrap; } .hero { padding: 2rem 0; } .atu-toast { bottom: .5rem; }
}

/* High contrast & motion preferences */
html.atu-contrast { --protea: #7a0030; --protea-dark: #4d001d; --bs-body-bg: #fff; --bs-body-color: #000; --cream: #fff; --blush: #fff; --sage: #fff; --fynbos: #0b3d2e; }
html.atu-contrast .product-card, html.atu-contrast .summary-card, html.atu-contrast .option-row, html.atu-contrast .order-card, html.atu-contrast .kpi, html.atu-contrast .deal-card, html.atu-contrast .cat-tile { border: 2px solid #000; }
html.atu-contrast .text-muted, html.atu-contrast .kpi span { color: #000 !important; }
html.atu-contrast a { text-decoration: underline; }
html.atu-reduce *, html.atu-reduce *::before, html.atu-reduce *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* Blazor reconnect / errors */
#blazor-error-ui { display: none; }
#components-reconnect-modal { z-index: 3000; }

/* Gift vouchers */
.voucher-card { max-width: 380px; background: linear-gradient(135deg, var(--protea-dark), var(--protea)); color: #fff; border-radius: 1rem; padding: 1.25rem 1.5rem; text-align: left; border: 3px dashed #fff; outline: 4px solid var(--protea); }
.voucher-card code { color: #fff; background: rgba(255,255,255,.18); padding: .1rem .4rem; border-radius: .3rem; }
@media print { .a11y-bar, header, footer, .btn, .atu-toast { display: none !important; } }

/* Important notices & admin tags */
.alert-tag { display: inline-grid; place-items: center; width: 1.2rem; height: 1.2rem; margin-left: .35rem; border-radius: 50%; background: #C62828; color: #fff; font-weight: 800; font-size: .78rem; line-height: 1; border: 2px solid #fff; vertical-align: middle; }
.important-box { background: #FDECEA; border: 2px solid #C62828; border-radius: 1rem; padding: 1rem 1.25rem; color: #3b0d0d; }
.important-box a { color: #8c1111; font-weight: 600; }
.account-name { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.swatch { display: inline-block; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px #888; vertical-align: -2px; }
.preview { border: 1px solid #ccc; border-radius: .75rem; overflow: hidden; }
.preview-nav { display: flex; align-items: center; gap: .5rem; padding: .6rem 1rem; color: #fff; }
.btn-preview { display: inline-block; color: #fff; padding: .4rem 1rem; border-radius: .5rem; font-weight: 600; }
html.atu-contrast .important-box { border-color: #000; background: #fff; color: #000; }

/* Footer */
.atu-footer a, .footer-link-btn { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.footer-link-btn { font-size: inherit; vertical-align: baseline; }
.footer-links li { margin-bottom: .4rem; }
.social-links a { font-size: 1.6rem; margin-right: .9rem; text-decoration: none; }

/* Cookie notice */
.atu-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2500; background: #2A2326; color: #fff; padding: 1rem 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; box-shadow: 0 -4px 16px rgba(0,0,0,.3); }
.atu-cookie[hidden] { display: none; }
.atu-cookie a { color: #fff; text-decoration: underline; }
.atu-cookie p { flex: 1 1 28rem; margin: 0; font-size: .92rem; }
.atu-cookie-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.has-cookie-banner .atu-toast { bottom: 9rem; }
dialog#atu-cookie-dlg { border: 0; border-radius: 1rem; padding: 1.5rem; max-width: 34rem; width: calc(100% - 2rem); color: var(--ink); background: #fff; }
dialog#atu-cookie-dlg::backdrop { background: rgba(0,0,0,.55); }

/* Hover / focus info icon (returns) */
.info-hover { position: relative; display: inline-grid; place-items: center; color: #8a5a00; cursor: help; border-radius: 50%; }
.info-hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 135%; transform: translateX(-50%); width: max-content; max-width: min(18rem, 70vw); background: #2A2326; color: #fff; padding: .5rem .7rem; border-radius: .5rem; font-size: .8rem; font-weight: 400; line-height: 1.35; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 60; white-space: normal; }
.info-hover:hover::after, .info-hover:focus::after { opacity: 1; }

/* Order tracking */
.track-steps { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; }
.track-steps li { display: flex; align-items: center; gap: .5rem; color: #5d5258; }
.track-steps .dot { width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 2px solid #b9a5ad; display: inline-grid; place-items: center; font-size: .85rem; background: #fff; }
.track-steps li.done { color: var(--ink); font-weight: 600; }
.track-steps li.done .dot { background: var(--fynbos); border-color: var(--fynbos); color: #fff; }

/* Legal / content pages */
.legal-body { max-width: 52rem; }
.legal-body h2 { font-size: 1.4rem; margin-top: 1.75rem; }
.legal-body h3 { font-size: 1.15rem; margin-top: 1.25rem; font-family: Georgia, serif; color: var(--protea-dark); }
.legal-body p, .legal-body li { line-height: 1.65; }
.legal-body .lead { font-style: italic; }

/* Customer notices, returns messages */
.notice-box { background: #EAF3FB; border: 2px solid #1F5F8B; border-radius: 1rem; padding: 1rem 1.25rem; color: #10283a; }
.notice-box.attention { background: #FFF4E0; border-color: #B7791F; color: #3a2800; }
.notice-box a { font-weight: 600; }
.needs-attention { border: 2px solid #B7791F; background: #FFFBF2; }
.msg-list { max-height: 18rem; overflow-y: auto; }
.msg { padding: .5rem .75rem; border-radius: .75rem; margin-bottom: .5rem; max-width: 92%; }
.msg.from-admin { background: var(--blush); }
.msg.from-me { background: #e9eef2; margin-left: auto; }
.msg-body { white-space: pre-wrap; }
html.atu-contrast .notice-box, html.atu-contrast .needs-attention { border-color: #000; background: #fff; color: #000; }

/* ---- Grid (QuickGrid) sortable headers ---- */
.atu-grid thead th { white-space: nowrap; vertical-align: middle; }
.atu-grid thead th .col-header-content { display: inline-flex; align-items: center; gap: .35rem; }
.atu-grid thead th button { appearance: none; background: transparent; border: 0; margin: 0 -.5rem; padding: .25rem .6rem; border-radius: 999px; font: inherit; font-weight: 600; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: background .15s, color .15s; }
.atu-grid thead th button:hover { background: var(--blush); color: var(--protea-dark); }
.atu-grid thead th button:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; }
.atu-grid .sort-indicator { display: inline-block; min-width: 1rem; text-align: center; font-size: .7rem; line-height: 1; opacity: .4; }
.atu-grid .sort-indicator::before { content: "\2195" !important; }
.atu-grid th[aria-sort="ascending"] .sort-indicator::before { content: "\25B2" !important; }
.atu-grid th[aria-sort="descending"] .sort-indicator::before { content: "\25BC" !important; }
.atu-grid th[aria-sort="ascending"] .sort-indicator, .atu-grid th[aria-sort="descending"] .sort-indicator { opacity: 1; color: var(--protea); }
.atu-grid th[aria-sort="ascending"] button, .atu-grid th[aria-sort="descending"] button { color: var(--protea-dark); }

/* action buttons stay side by side */
td:has(> .btn) { white-space: nowrap; }
td .btn + .btn { margin-left: .25rem; }

/* ---- Images always display at a set size, whatever the uploaded picture's size ---- */
.brand-logo { width: 38px; height: 38px; object-fit: contain; }
.hero-img { width: 100%; max-width: 560px; aspect-ratio: 4 / 3; height: auto; object-fit: contain; }
.product-card img, .product-hero { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.cart-line img { width: 84px; height: 84px; object-fit: cover; }
.thumb { width: 120px; height: 72px; object-fit: contain; background: #fff; padding: 2px; }
.thumb-square { width: 96px; height: 96px; object-fit: cover; }
.preview-logo { width: 28px; height: 28px; object-fit: contain; }
.preview-hero { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: .5rem; margin-top: 1rem; }

/* ---- Order / return status tags (each status has its own colour) ---- */
.badge[class*="st-"] { font-weight: 600; letter-spacing: .01em; }
.st-pending { background: #FFE08A; color: #4a3500; }
.st-paid { background: #CFE2FF; color: #052c65; }
.st-packed { background: #E2D5F8; color: #3d2272; }
.st-shipped { background: #CFF4FC; color: #055160; }
.st-delivered { background: #D1E7DD; color: #0a3622; }
.st-cancelled { background: #F8D7DA; color: #58151c; }
html.atu-contrast .badge[class*="st-"] { background: #fff; color: #000; border: 2px solid #000; }

/* ---- Prize wheel ---- */
.wheel-wrap { max-width: 300px; margin: 0 auto 1rem; }
.prize-wheel { width: 100%; height: auto; display: block; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0,0,0,.25)); }

/* ---- Notifications, logo and hero size are owner-configurable (Admin > Site) ---- */
.toast-msg { background: var(--toast-bg, #2F5D50); color: var(--toast-fg, #fff); }
.brand-logo { width: var(--logo-w, 38px); height: var(--logo-h, 38px); max-width: 100%; object-fit: var(--logo-fit, contain); }
.hero-img { width: var(--hero-w, 560px); height: var(--hero-h, 420px); max-width: 100%; aspect-ratio: auto; object-fit: var(--hero-fit, contain); }
.preview img { max-width: 100%; }
.toast-sample { display: inline-block; border-radius: .6rem; padding: .5rem .9rem; margin-top: .75rem; font-size: .9rem; }

/* ---- Timelines and accordions ---- */
.track-steps.vertical { flex-direction: column; gap: .6rem; }
.history-list { padding-left: 1.1rem; margin: .5rem 0 0; }
.return-journey { border-top: 1px dashed #d9c3ca; padding-top: .75rem; }
details.return-acc { background: #fff; border: 1px solid #ecd9de; border-radius: 1rem; margin-bottom: .6rem; }
details.return-acc > summary { list-style: none; cursor: pointer; padding: .8rem 1rem; display: grid; grid-template-columns: 1.4fr 1.3fr 1.3fr 1fr auto; gap: .75rem; align-items: center; }
details.return-acc > summary::-webkit-details-marker { display: none; }
details.return-acc > summary::before { content: "\25B8"; position: absolute; margin-left: -.85rem; color: var(--protea); }
details.return-acc[open] > summary::before { content: "\25BE"; }
details.return-acc > summary:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; border-radius: 1rem; }
details.return-acc > .acc-body { padding: 0 1rem 1rem; border-top: 1px solid #f0e2e6; }
.acc-label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: #5d5258; }
@media (max-width: 767.98px) { details.return-acc > summary { grid-template-columns: 1fr 1fr; } }
details.cat-group { border: 1px solid #ecd9de; border-radius: .75rem; background: #fff; margin-bottom: .5rem; }
details.cat-group > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; }
details.cat-group > .cat-body { padding: 0 .9rem .75rem; }
.stock-section h2 { display: flex; align-items: center; gap: .5rem; }

/* ---- Icon picker ---- */
.icon-grid { display: flex; flex-wrap: wrap; gap: .4rem; }
.icon-grid button { width: 2.6rem; height: 2.6rem; border-radius: .6rem; border: 2px solid #d9c3ca; background: #fff; font-size: 1.25rem; color: var(--protea-dark); display: inline-grid; place-items: center; cursor: pointer; }
.icon-grid button:hover { background: var(--blush); }
.icon-grid button[aria-pressed="true"] { border-color: var(--protea); background: var(--blush); box-shadow: 0 0 0 2px var(--protea); }
.icon-grid button:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; }

/* ---- date range as one field ---- */
.date-range { display: flex; align-items: center; gap: .4rem; border: 1px solid #ced4da; border-radius: .5rem; background: #fff; padding: .15rem .6rem; min-height: 31px; }
.date-range:focus-within { border-color: var(--protea); box-shadow: 0 0 0 .2rem rgba(166,30,77,.2); }
.date-range input { border: 0; outline: 0; background: transparent; font-size: .85rem; min-width: 0; flex: 1; padding: .1rem 0; }
.date-range i, .date-range span { color: #5d5258; }
details.return-acc.is-new { border-color: #C62828; box-shadow: 0 0 0 2px rgba(198,40,40,.18); }
details.return-acc.acc-4 > summary { grid-template-columns: 1.5fr 1.2fr 1fr auto; }
details.return-acc.sub { margin: .5rem 0 0 .75rem; background: #fffdfb; }
.order-compact { margin-bottom: .5rem; }
.email-preview { width: 100%; height: 640px; border: 1px solid #d9c3ca; border-radius: .75rem; background: #fff; }

/* ---- Easter egg hunt ---- */
.egg-banner { background: linear-gradient(135deg, var(--blush), #fff); border: 2px dashed var(--protea); border-radius: 1rem; padding: 1rem 1.25rem; }
.egg-high { position: fixed; left: -70px; z-index: 1200; border: 0; background: none; padding: 0; width: 44px; height: 44px; cursor: pointer; animation: egg-float 14s linear forwards; filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
@keyframes egg-float { 0% { transform: translate(0, 0); } 25% { transform: translate(30vw, -22px); } 50% { transform: translate(60vw, 16px); } 75% { transform: translate(90vw, -14px); } 100% { transform: translate(120vw, 0); } }
.egg-high:focus-visible, .egg-bush:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 3px; border-radius: 50%; }
.egg-bush { position: fixed; left: .5rem; bottom: .5rem; z-index: 1200; border: 0; background: none; padding: 0; cursor: pointer; opacity: .95; animation: egg-sway 4s ease-in-out infinite; transform-origin: bottom center; }
.egg-bush:disabled { cursor: default; animation: none; }
@keyframes egg-sway { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
.egg-seed { position: fixed; z-index: 1700; width: 7px; height: 11px; margin: -4px 0 0 -3px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: #8a5a2b; pointer-events: none; transition: transform .9s ease-out, opacity .9s ease-out; }
.egg-petal { position: fixed; top: -20px; z-index: 1700; width: 10px; height: 16px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%; pointer-events: none; animation: egg-fall linear forwards; opacity: .9; }
@keyframes egg-fall { to { transform: translateY(105vh) rotate(540deg); opacity: .2; } }
.egg-prize { position: fixed; right: 1rem; bottom: 1rem; z-index: 1600; max-width: 22rem; background: #fff; border: 3px solid var(--protea); border-radius: 1rem; padding: 1rem 1.1rem; box-shadow: 0 10px 30px rgba(0,0,0,.25); animation: rise .35s ease-out; }
.egg-chip { position: fixed; left: .5rem; bottom: 5.5rem; z-index: 1190; display: flex; flex-wrap: wrap; gap: .25rem .75rem; max-width: min(34rem, 92vw); background: rgba(42,35,38,.92); color: #fff; font-size: .75rem; padding: .4rem .7rem; border-radius: .6rem; }
.egg-chip a { color: #fff; }
.egg-flower-art { width: 120px; height: 120px; flex: 0 0 auto; }
.has-cookie-banner .egg-chip { bottom: 9.5rem; }
@media (prefers-reduced-motion: reduce) {
  .egg-high { animation: none; left: auto !important; right: 1rem; top: auto !important; bottom: 6rem; }
  .egg-bush { animation: none; }
}
html.atu-reduce .egg-high { animation: none; left: auto !important; right: 1rem; top: auto !important; bottom: 6rem; }
html.atu-reduce .egg-bush { animation: none; }

/* ---- Easter egg (v2): the floating protea is moved by script and bounces around until it is clicked ---- */
.egg-high { left: 0; top: 0; animation: none !important; will-change: transform; }
.egg-pop { position: fixed; top: 22%; left: 50%; transform: translateX(-50%); z-index: 1650; background: #fffdf7; border: 2px solid var(--blush); border-radius: 1rem; padding: .9rem 1.4rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.2); }
.egg-pop-art { width: 130px; height: 130px; margin: 0 auto .25rem; }
@media (prefers-reduced-motion: reduce) { .egg-high { left: auto !important; top: auto !important; right: 1rem; bottom: 6rem; } }
html.atu-reduce .egg-high { left: auto !important; top: auto !important; right: 1rem; bottom: 6rem; }

/* =====================================================================
   Protea theme for tables, grids and pagination
   ===================================================================== */
:root { --atu-line: #ead3da; --atu-soft: #fbeef2; }
.table { --bs-table-bg: transparent; --bs-table-border-color: var(--atu-line); border-color: var(--atu-line); }
.table > thead > tr > th, .table > thead > tr > td { background: linear-gradient(135deg, var(--protea), var(--protea-dark, #7a1236)); color: #fff; border-color: transparent; font-weight: 600; vertical-align: middle; }
.table > thead > tr > th:first-child { border-top-left-radius: .7rem; }
.table > thead > tr > th:last-child { border-top-right-radius: .7rem; }
.table > thead button, .table > thead a { color: #fff !important; text-decoration: none; }
.table > thead .sortable.sort-asc::after, .table > thead .sortable.sort-desc::after { color: #fff; }
.table-striped > tbody > tr:nth-of-type(odd) > * { background-color: var(--atu-soft); --bs-table-accent-bg: transparent; box-shadow: none; }
.table-hover > tbody > tr:hover > * { background-color: #f7dfe6; }
.table-responsive { border: 1px solid var(--atu-line); border-radius: .8rem; overflow-x: auto; background: #fff; }
.table-responsive > .table { margin-bottom: 0; }
.chart-data .table > thead > tr > th { border-radius: 0; }

/* QuickGrid's own pager, made round and protea-coloured */
.paginator { display: flex; align-items: center; justify-content: center; gap: .6rem; width: fit-content; margin: 1rem auto 0; padding: .35rem .8rem; background: #fff; border: 1px solid var(--atu-line); border-radius: 999px; }
.paginator .pagination-text { font-size: .85rem; color: #5d5258; margin: 0 .4rem; }
.paginator button { border: 0 !important; border-radius: 50% !important; width: 2.1rem; height: 2.1rem; background-color: var(--atu-soft) !important; color: var(--protea); }
.paginator button:hover:not([disabled]) { background-color: var(--protea) !important; }
.paginator button[disabled] { opacity: .4; }

/* our own pager */
.atu-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .5rem 1rem; margin: 1rem 0; }
.atu-pager ul { display: flex; align-items: center; gap: .3rem; list-style: none; margin: 0; padding: .3rem .5rem; background: #fff; border: 1px solid var(--atu-line); border-radius: 999px; }
.atu-pager .pg-btn { min-width: 2.1rem; height: 2.1rem; padding: 0 .55rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--protea); font-weight: 600; }
.atu-pager .pg-btn:hover:not([disabled]):not(.active) { background: var(--atu-soft); }
.atu-pager .pg-btn.active { background: linear-gradient(135deg, var(--protea), var(--protea-dark, #7a1236)); color: #fff; }
.atu-pager .pg-btn[disabled] { opacity: .35; }
.atu-pager .pg-btn:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; }
.atu-pager .pg-gap { padding: 0 .3rem; color: #5d5258; }
.atu-pager .pg-info { font-size: .85rem; color: #5d5258; }

/* tabs used on the admin pages */
.atu-tabs { display: flex; flex-wrap: wrap; gap: .35rem; border-bottom: 2px solid var(--atu-line); margin-bottom: 1rem; }
.atu-tabs .tab-btn { position: relative; border: 0; background: transparent; padding: .55rem 1rem; border-radius: .7rem .7rem 0 0; color: #3b2f35; font-weight: 600; }
.atu-tabs .tab-btn:hover { background: var(--atu-soft); }
.atu-tabs .tab-btn.active { background: linear-gradient(135deg, var(--protea), var(--protea-dark, #7a1236)); color: #fff; }
.atu-tabs .tab-btn:focus-visible { outline: 3px solid #1A5FB4; outline-offset: 2px; }
.atu-tabs .tab-flag { display: inline-flex; align-items: center; justify-content: center; min-width: 1.3rem; height: 1.3rem; padding: 0 .35rem; margin-left: .4rem; border-radius: 999px; background: #C62828; color: #fff; font-size: .75rem; font-weight: 700; }

/* chip input */
.chip-input { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; padding: .35rem .5rem; border: 1px solid #ced4da; border-radius: .6rem; background: #fff; }
.chip-input:focus-within { border-color: var(--protea); box-shadow: 0 0 0 .2rem rgba(166,30,77,.2); }
.chip { display: inline-flex; align-items: center; gap: .15rem; padding: .15rem .25rem .15rem .65rem; background: var(--atu-soft); color: var(--protea-dark, #7a1236); border: 1px solid var(--atu-line); border-radius: 999px; font-size: .85rem; }
.chip-x { border: 0; background: transparent; color: inherit; padding: 0 .3rem; line-height: 1; border-radius: 50%; }
.chip-x:hover { background: var(--protea); color: #fff; }
.chip-field { flex: 1; min-width: 9rem; border: 0; outline: 0; background: transparent; padding: .2rem; }

/* charts */
.atu-chart { margin: 0; }
.atu-chart svg { width: 100%; height: auto; display: block; }
.atu-chart .chart-title { font-weight: 600; margin-bottom: .25rem; }
.chart-grid { stroke: var(--atu-line); stroke-width: 1; }
.chart-label { font-size: 11px; fill: #5d5258; }
.chart-legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .85rem; margin-top: .25rem; }
.chart-legend i { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; margin-right: .25rem; vertical-align: -1px; }
.chart-legend i.dash { width: 1.2rem; height: 0; border-top: 2px dashed #5d5258; border-radius: 0; }
.chart-data { margin-top: .5rem; font-size: .85rem; }
.hbars { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.hbars li { display: grid; grid-template-columns: minmax(7rem, 30%) 1fr auto; gap: .6rem; align-items: center; font-size: .9rem; }
.hb-track { background: var(--atu-soft); border-radius: 999px; height: .8rem; overflow: hidden; }
.hb-bar { display: block; height: 100%; border-radius: 999px; }
.hb-value { font-variant-numeric: tabular-nums; font-weight: 600; }

/* dashboard */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.kpi { background: #fff; border: 1px solid var(--atu-line); border-radius: 1rem; padding: .8rem 1rem; border-left: 5px solid var(--protea); }
.kpi .kpi-label { font-size: .8rem; color: #5d5258; }
.kpi .kpi-value { font-size: 1.6rem; font-weight: 700; color: var(--protea-dark, #7a1236); line-height: 1.2; }
.kpi .kpi-sub { font-size: .8rem; }
.kpi .up { color: #1B7A3E; } .kpi .down { color: #B3261E; }

/* session / automation notices */
.idle-warning { position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%); z-index: 2000; max-width: min(34rem, 92vw); padding: .75rem 1.1rem; background: #2a2326; color: #fff; border-radius: .8rem; box-shadow: 0 8px 24px rgba(0,0,0,.3); font-size: .95rem; }
.clock-live { font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; color: var(--protea-dark, #7a1236); }