.printer-card .card-header { font-weight: 600; }
.swatch { display:inline-block; width:.9rem; height:.9rem; border-radius:50%; border:1px solid #999; vertical-align:middle; }
.th-table td, .th-table th { padding: .15rem .35rem; font-size: .85rem; }
.th-active { background: #fff3cd; }
.brand-logo{height:22px;width:auto;max-width:90px;object-fit:contain}
/* Layersake watermark: SVG preferred, PNG fallback for old browsers. */
body::before{content:"";position:fixed;inset:0;background:url("../img/layersake.svg") no-repeat center center;background-size:55vmin;opacity:.16;pointer-events:none;z-index:-1}
body{position:relative;z-index:0}
/* ---- Dark theme (Bootstrap 5.3 data-bs-theme) ---- */
[data-bs-theme=dark] body::before{filter:grayscale(1) brightness(.35);opacity:.12}
[data-bs-theme=dark] .brand-bambulab{filter:invert(1) brightness(1.6)}
[data-bs-theme=dark] .th-active{background:rgba(255,193,7,.18)}
[data-bs-theme=dark] .swatch{border-color:#ccc}
/* Slightly translucent surfaces so the watermark shows through but text stays readable. */
.card{--bs-card-bg:rgba(var(--bs-body-bg-rgb),.92)}
.card-header,.card-footer{--bs-card-cap-bg:rgba(var(--bs-emphasis-color-rgb),.04)}
/* Tabbed panel in page body; tabs scroll horizontally on small screens. */
.pf-panel{--bs-card-bg:rgba(var(--bs-body-bg-rgb),.80)}
.pf-panel > .card-header{--bs-card-cap-bg:rgba(var(--bs-tertiary-bg-rgb),.85)}
.pf-tabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.pf-tabs .nav-link{white-space:nowrap;color:var(--bs-secondary-color)}
.pf-tabs .nav-link:hover{color:var(--bs-emphasis-color)}
.pf-tabs .nav-link.active{color:var(--bs-emphasis-color);font-weight:600;background:var(--bs-body-bg)}
@media (max-width:575.98px){.pf-panel > .card-body{padding:.75rem}}

/* Graffiti brand text (font bundled locally, SIL OFL) */
/* Header wordmark: identical to the public /share page title (same font stack, size, weight, colors) in both themes */
.pf-topbar{background:#111827;border-bottom:1px solid #1f2937;min-height:52px}
.pf-wordmark{font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-weight:700;letter-spacing:.5px;font-size:18px;color:#e7eaf0;text-decoration:none;line-height:1;padding:14px 0}
.pf-wordmark:hover,.pf-wordmark:focus{color:#fff}.pf-wordmark b{color:#a3e635;font-weight:700}
header.pf-topbar{padding:0 20px;display:flex;align-items:center}
/* Sign-in pages */
.pf-auth-wrap{max-width:26rem;margin:6vh auto 2rem;padding:0 1rem}
.pf-auth-card{border-radius:14px}

/* Settings side menu (one view at a time) */
#alertCfg .pf-sec { max-width: 56rem; }
@media (min-width: 992px) { .pf-setnav { position: sticky; top: 1rem; } }
@media (max-width: 991.98px) { .pf-setnav { position: sticky; top: 0; z-index: 5; background: var(--bs-modal-bg, var(--bs-body-bg)); } }

/* Dashboard card refresh spinner */
.pf-spin { display: inline-block; animation: pf-spin .8s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }

/* Error log: newly appeared rows flash briefly */
@keyframes pf-new-row { from { background-color: rgba(255, 193, 7, .55); } to { background-color: transparent; } }
tr.pf-new > td { animation: pf-new-row 2.5s ease-out; }

/* ===== H2C-style dashboard cards (preview branch h2c-preview). Cards are dark in both light and dark themes. ===== */
.h2c-card { --h2c-bg:#121212; --h2c-panel:#232323; --h2c-panel2:#2c2c2c; --h2c-label:#9a9a9a; --h2c-text:#f2f2f2; --h2c-lime:#a3e635;
  background:var(--h2c-bg); color:var(--h2c-text); border:0; border-radius:16px; overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.h2c-card .card-header, .h2c-card .card-footer { background:transparent; border:0; color:var(--h2c-text); }
.h2c-card .card-header { padding:.7rem .9rem .3rem; }
.h2c-card .card-body { padding:.4rem .9rem .5rem; display:flex; flex-direction:column; gap:.5rem; }
.h2c-card .card-footer { color:#777; padding:.35rem .9rem .6rem; }
.h2c-card .brand-bambulab { filter: invert(1) hue-rotate(180deg) brightness(1.3); }
.h2c-name { font-weight:600; }
.h2c-btn { color:#8d8d8d !important; } .h2c-btn:hover { color:#fff !important; }
.h2c-panel { background:var(--h2c-panel); border-radius:12px; padding:.55rem .7rem; }
.h2c-label { color:var(--h2c-label); font-size:.75rem; line-height:1.2; }
.h2c-value { color:var(--h2c-text); font-size:.95rem; font-weight:500; }
.h2c-big { color:var(--h2c-text); font-size:1.6rem; font-weight:600; line-height:1.1; }
.h2c-ico { width:14px; height:14px; vertical-align:-2px; margin-right:2px; }
.h2c-temps { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }
.h2c-temp b { font-size:1.45rem; font-weight:700; color:var(--h2c-text); }
.h2c-temp span { color:#c9c9c9; font-size:.95rem; margin-left:2px; }
.h2c-pill { font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:.2rem .6rem; border-radius:999px; background:#3a3a3a; color:#d6d6d6; }
.h2c-st-printing { background:var(--h2c-lime); color:#10210a; }
.h2c-st-paused { background:#4a3d12; color:#ffd666; }
.h2c-st-error, .h2c-st-shutdown, .h2c-st-cancelled { background:#4d1a1a; color:#ff8a8a; }
.h2c-st-complete { background:#3a3a3a; color:#fff; }
.h2c-st-offline { background:#000; color:#8a8a8a; border:1px solid #444; }
.h2c-progress { height:8px; background:#3a3a3a; border-radius:99px; overflow:hidden; }
.h2c-bar { height:100%; background:var(--h2c-lime); border-radius:99px; }
.h2c-bar-paused { background:#8a8a8a; }
.h2c-msg { background:var(--h2c-panel2); color:#cfcfcf; border-radius:10px; padding:.35rem .6rem; font-size:.8rem; }
.h2c-msg-bad { background:#3b1616; color:#ffb3b3; }
.h2c-offline .card-body, .h2c-offline .card-header .h2c-name { opacity:.6; }
.h2c-filament { cursor:pointer; transition:background .15s; } .h2c-filament:hover, .h2c-filament:focus { background:var(--h2c-panel2); outline:none; }
.h2c-busy { opacity:.6; }
.h2c-blocks { display:flex; gap:6px; margin-top:.35rem; }
.h2c-block { flex:1 1 0; min-width:0; height:46px; border-radius:9px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  font-size:.72rem; line-height:1.15; text-align:center; overflow:hidden; padding:0 2px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.h2c-block .h2c-slot { font-weight:700; opacity:.85; } .h2c-block .h2c-mat { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.h2c-block .h2c-vendor { font-size:.68rem; opacity:.8; }
.h2c-block.h2c-cur { box-shadow: inset 0 0 0 2px var(--h2c-lime); }
.h2c-unknown { background:#333; color:#ddd; }
.h2c-empty { background: repeating-linear-gradient(45deg,#262626 0 6px,#1b1b1b 6px 12px); color:#8a8a8a; box-shadow: inset 0 0 0 1px #555; }
.h2c-na { background:#1d1d1d; color:#8a8a8a; box-shadow: inset 0 0 0 1px #3a3a3a; font-size:.8rem; }
.h2c-blocks-big .h2c-block { height:150px; border-radius:22px; font-size:.95rem; }
.h2c-table { --bs-table-bg:transparent; --bs-table-color:var(--h2c-text); color:var(--h2c-text); }
.h2c-table td, .h2c-table th { border-color:#333; color:var(--h2c-text); background:transparent; }
.h2c-table tr.th-active, [data-bs-theme=dark] .h2c-table tr.th-active { background:rgba(163,230,53,.10) !important; }
.h2c-table > :not(caption) > * > * { box-shadow:none !important; background:transparent !important; color:var(--h2c-text) !important; }
.h2c-card .swatch, .h2c-modal .swatch { border-color:#555; }
.h2c-chip-ok { background:rgba(163,230,53,.15); color:var(--h2c-lime); font-weight:500; }
.h2c-chip { background:#3a3a3a; color:#bbb; font-weight:500; }
.h2c-modal .modal-content { background:#121212; color:#f2f2f2; border:0; border-radius:18px; }
.h2c-modal .modal-header, .h2c-modal .modal-footer { border-color:#2a2a2a; }
.h2c-loading { color:#9a9a9a; padding:2rem 0; text-align:center; }

/* Filament tiles: full "material + variant" label (wraps to 2 lines instead of truncating); table header row. */
.h2c-block { height:50px; }
.h2c-block .h2c-mat { white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:.7rem; line-height:1.1; }
.h2c-table .h2c-thead th { font-weight:500; padding-top:0; }
.h2c-table th .h2c-label { font-weight:400; font-size:.68rem; }
.swatch-empty { background: repeating-linear-gradient(45deg,#2a2a2a 0 3px,#151515 3px 6px); }

/* Per-card icon rail + views (preview) */
.h2c-cbody { flex-direction:row !important; gap:.5rem; }
.h2c-crail { flex:0 0 34px; display:flex; flex-direction:column; gap:6px; background:#1b1b1b; border-radius:12px; padding:6px 3px; align-self:flex-start; }
.h2c-cbtn { width:28px; height:28px; border:0; border-radius:8px; background:transparent; color:#8a8a8a; display:flex; align-items:center; justify-content:center; padding:0; }
.h2c-cbtn svg { width:18px; height:18px; } .h2c-cbtn:hover { color:#ddd; background:#2a2a2a; } .h2c-cbtn.active { color:#a3e635; background:#262626; }
.h2c-views { flex:1 1 auto; min-width:0; }
.h2c-view { display:flex; flex-direction:column; gap:.5rem; } .h2c-view.d-none { display:none !important; }
.h2c-bar-idle { background:#5a5a5a; }
.h2c-alerts { display:flex; flex-direction:column; gap:6px; }
.h2c-alert { background:var(--h2c-panel); border-radius:10px; padding:.4rem .55rem; }
.h2c-akind { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:#d6d6d6; }
.h2c-ak-failed, .h2c-ak-error, .h2c-ak-error_log, .h2c-ak-cancelled, .h2c-ak-offline { color:#ff8a8a; } .h2c-ak-paused { color:#ffd666; } .h2c-ak-finished, .h2c-ak-online { color:#a3e635; }
.h2c-amsg { font-size:.78rem; color:#e6e6e6; word-break:break-word; }

/* ===== H2C cards: LIGHT variant (app dark-mode setting off). Dark mode keeps the look above. ===== */
[data-bs-theme=light] .h2c-card, [data-bs-theme=light] .h2c-modal .modal-content {
  --h2c-bg:#ffffff; --h2c-panel:#f2f3f5; --h2c-panel2:#e7e9ec; --h2c-label:#6b7078; --h2c-text:#1c1f23; --h2c-lime:#a3e635; --h2c-lime-dark:#4d7c0f;
  background:var(--h2c-bg); color:var(--h2c-text); box-shadow:0 1px 4px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04); }
[data-bs-theme=light] .h2c-card .card-header, [data-bs-theme=light] .h2c-card .card-footer { color:var(--h2c-text); }
[data-bs-theme=light] .h2c-card .card-footer { color:#8a8f96; }
[data-bs-theme=light] .h2c-card .brand-bambulab { filter:none; }
[data-bs-theme=light] .h2c-btn { color:#8a8f96 !important; } [data-bs-theme=light] .h2c-btn:hover { color:#1c1f23 !important; }
[data-bs-theme=light] .h2c-temp span { color:#5c6168; }
[data-bs-theme=light] .h2c-pill { background:#e7e9ec; color:#4a4f56; }
[data-bs-theme=light] .h2c-st-printing { background:var(--h2c-lime); color:#1a2e05; }
[data-bs-theme=light] .h2c-st-paused { background:#fff1c2; color:#7a5b00; }
[data-bs-theme=light] .h2c-st-error, [data-bs-theme=light] .h2c-st-shutdown, [data-bs-theme=light] .h2c-st-cancelled { background:#fde2e2; color:#b42318; }
[data-bs-theme=light] .h2c-st-complete { background:#e7e9ec; color:#1c1f23; }
[data-bs-theme=light] .h2c-st-offline { background:#fff; color:#6b7078; border:1px solid #c9cdd2; }
[data-bs-theme=light] .h2c-progress { background:#dfe2e6; }
[data-bs-theme=light] .h2c-bar-paused, [data-bs-theme=light] .h2c-bar-idle { background:#a9aeb5; }
[data-bs-theme=light] .h2c-msg { background:var(--h2c-panel2); color:#3b4047; }
[data-bs-theme=light] .h2c-msg-bad { background:#fde2e2; color:#b42318; }
[data-bs-theme=light] .h2c-crail { background:#e9ebee; }
[data-bs-theme=light] .h2c-cbtn { color:#8a8f96; } [data-bs-theme=light] .h2c-cbtn:hover { color:#1c1f23; background:#dcdfe3; }
[data-bs-theme=light] .h2c-cbtn.active { color:var(--h2c-lime-dark); background:#fff; box-shadow:0 0 0 1px #d3d7dc; }
[data-bs-theme=light] .h2c-block { box-shadow: inset 0 0 0 1px rgba(0,0,0,.10); }
[data-bs-theme=light] .h2c-block.h2c-cur { box-shadow: inset 0 0 0 2px var(--h2c-lime-dark); }
[data-bs-theme=light] .h2c-unknown { background:#dfe2e6; color:#3b4047; }
[data-bs-theme=light] .h2c-empty { background: repeating-linear-gradient(45deg,#f2f3f5 0 6px,#e3e6e9 6px 12px); color:#6b7078; box-shadow: inset 0 0 0 1px #c9cdd2; }
[data-bs-theme=light] .h2c-na { background:#f7f8f9; color:#8a8f96; box-shadow: inset 0 0 0 1px #dfe2e6; }
[data-bs-theme=light] .h2c-table td, [data-bs-theme=light] .h2c-table th { border-color:#e1e4e8; }
[data-bs-theme=light] .h2c-table tr.th-active { background:rgba(163,230,53,.18) !important; }
[data-bs-theme=light] .h2c-card .swatch, [data-bs-theme=light] .h2c-modal .swatch { border-color:#b5bac1; }
[data-bs-theme=light] .swatch-empty { background: repeating-linear-gradient(45deg,#e7e9ec 0 3px,#cfd3d8 3px 6px); }
[data-bs-theme=light] .h2c-chip-ok { background:rgba(163,230,53,.25); color:var(--h2c-lime-dark); }
[data-bs-theme=light] .h2c-chip { background:#e7e9ec; color:#5c6168; }
[data-bs-theme=light] .h2c-alert { background:var(--h2c-panel); }
[data-bs-theme=light] .h2c-akind { color:#4a4f56; } [data-bs-theme=light] .h2c-amsg { color:#2b2f34; }
[data-bs-theme=light] .h2c-ak-failed, [data-bs-theme=light] .h2c-ak-error, [data-bs-theme=light] .h2c-ak-error_log, [data-bs-theme=light] .h2c-ak-cancelled, [data-bs-theme=light] .h2c-ak-offline { color:#b42318; }
[data-bs-theme=light] .h2c-ak-paused { color:#8a6400; } [data-bs-theme=light] .h2c-ak-finished, [data-bs-theme=light] .h2c-ak-online { color:var(--h2c-lime-dark); }
[data-bs-theme=light] .h2c-modal .modal-header, [data-bs-theme=light] .h2c-modal .modal-footer { border-color:#e1e4e8; }
[data-bs-theme=light] .h2c-modal .btn-close { filter:none; }
[data-bs-theme=light] .h2c-loading { color:#6b7078; }

/* ===== H2C LIGHT mode: higher contrast (dashboard only; dark mode untouched) ===== */
[data-bs-theme=light] body:has(#grid), [data-bs-theme=light] body:has(#grid) .pf-panel, [data-bs-theme=light] body:has(#grid) .pf-panel > .card-header { background:#e9ecef; }
[data-bs-theme=light] .h2c-card { --h2c-bg:#fff; --h2c-panel:#f1f3f5; --h2c-label:#5f6b7a; --h2c-text:#111; --h2c-lime-dark:#3f6212;
  border:1px solid #d0d5dc; box-shadow:0 1px 3px rgba(0,0,0,.12); }
[data-bs-theme=light] .h2c-card .h2c-panel { border:1px solid #e1e5ea; }
[data-bs-theme=light] .h2c-value, [data-bs-theme=light] .h2c-big, [data-bs-theme=light] .h2c-temp b, [data-bs-theme=light] .h2c-name { color:#111; }
[data-bs-theme=light] .h2c-temp span { color:#4a5562; }
[data-bs-theme=light] .h2c-card .card-footer { color:#5f6b7a; }
[data-bs-theme=light] .h2c-cbtn, [data-bs-theme=light] .h2c-btn { color:#6c757d !important; }
[data-bs-theme=light] .h2c-cbtn.active { color:#3f6212 !important; background:#ecfccb; box-shadow:0 0 0 1px #a3c76a; }
[data-bs-theme=light] .h2c-crail { background:#f1f3f5; border:1px solid #e1e5ea; }
[data-bs-theme=light] .h2c-progress { background:#dfe3e8; }
[data-bs-theme=light] .h2c-st-printing { background:#a3e635; color:#1a2e05; }
[data-bs-theme=light] .h2c-chip-ok { background:#ecfccb; color:#3f6212; }
/* Camera view (card) + camera modal + share popover (preview) */
.h2c-card { position:relative; }
.h2c-cam { background:#000; border-radius:10px; overflow:hidden; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; cursor:zoom-in; }
.h2c-cam img { width:100%; height:100%; object-fit:contain; display:block; }
.h2c-cam-lg { cursor:default; border-radius:8px; }
.h2c-nocam { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; min-height:150px; text-align:center; background:var(--h2c-panel); border-radius:10px; padding:12px; }
.h2c-nocam svg { width:34px; height:34px; opacity:.35; }
.h2c-live { color:#ef4444; font-weight:700; letter-spacing:1px; } .h2c-live::before { content:"● "; }
.h2c-sharepop { position:absolute; z-index:20; left:52px; right:10px; top:44px; background:#1e1e1e; color:var(--h2c-text); border:1px solid #3a3a3a; border-radius:12px; padding:10px 12px; box-shadow:0 10px 30px rgba(0,0,0,.45); font-size:.875rem; }
.h2c-slink { display:flex; align-items:center; gap:4px; padding:4px 0; border-top:1px solid #333; } .h2c-slink > div { flex:1; min-width:0; }
.h2c-slink .btn { padding:.1rem .35rem; font-size:.75rem; }
[data-bs-theme=light] .h2c-sharepop { background:#fff; border-color:#c9cdd2; box-shadow:0 10px 30px rgba(0,0,0,.15); }
[data-bs-theme=light] .h2c-sharepop .btn-close-white { filter:none; }
[data-bs-theme=light] .h2c-slink { border-top-color:#e3e5e8; }
/* Print log filter bar + totals (both themes) */
.pf-stat { background:var(--bs-body-bg); border:1px solid var(--bs-border-color); border-radius:.6rem; padding:.45rem .9rem; min-width:9.5rem; }
.pf-stat-l { font-size:.75rem; color:var(--bs-secondary-color); text-transform:uppercase; letter-spacing:.04em; }
.pf-stat-v { font-size:1.35rem; font-weight:700; line-height:1.2; }
.pf-stat-s { font-size:.75rem; color:var(--bs-secondary-color); }
.pf-filterbar .dropdown-menu .form-check { white-space:nowrap; }
/* Header user menu: float above cards/modals' backdrop-free content, never clipped */
.pf-topbar { position: relative; z-index: 1030; }
.pf-topbar .dropdown-menu { position: absolute; z-index: 1031; min-width: 13rem; }
/* ---- Print Jobs tab (reuses the H2C card look) ---- */
.pj-printer { padding:.45rem .6rem; }
.pj-printer .h2c-progress { height:6px; }
.pj-slot .card-footer .h2c-btn { line-height:1; padding:.15rem .3rem; }
.pj-slot .h2c-st-standby { background:#3a3a3a; }
[data-bs-theme=light] .pj-slot .h2c-st-standby { background:#e7e9ec; }

/* Card flip-in (js/card-flip.js). Transform + opacity only: no layout shift; theme-neutral (works in light and dark). */
.pf-flip-pending > * { opacity: 0; }
.pf-flip-pre { opacity: 0; transform: perspective(1200px) rotateY(-90deg); }
.pf-flip-run { transition: transform .5s cubic-bezier(.2,.75,.3,1), opacity .3s ease-out; transform-origin: center center; backface-visibility: hidden; will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .pf-flip-pending > *, .pf-flip-pre { opacity: 1 !important; transform: none !important; }
  .pf-flip-run { transition: none !important; }
}