/* Deckbuilder status strip (always on). */

@keyframes db-ss-bump { 0% { transform:scale(1); } 35% { transform:scale(1.07); } 100% { transform:scale(1); } }
@keyframes db-ss-ring { 0% { box-shadow:0 0 0 0 color-mix(in srgb, var(--ac-color-primary) 75%, transparent); } 100% { box-shadow:0 0 0 10px color-mix(in srgb, var(--ac-color-primary) 0%, transparent); } }
.db-ss-bump { animation:db-ss-bump .32s ease-out; }
.db-card-wrap.db-ss-bump { animation:db-ss-ring .55s ease-out; }

.db-card-btn-group .btn,
.deck-list-qty button { transition:transform .08s, background .1s; }
.db-card-btn-group .btn:active,
.deck-list-qty button:active { transform:scale(.88); }

.db-ss-progress { display:block; height:5px; border-radius:var(--ac-radius-xs); background:var(--ac-color-track); overflow:hidden; }
.db-ss-progress-fill { display:block; height:100%; width:0; border-radius:var(--ac-radius-xs); background:var(--ac-color-primary); transition:width .25s ease-out; }

.db-ss-toast { position:fixed; left:50%; bottom:calc(20px + var(--db-ss-bottom, 0px)); z-index:1060; display:flex; align-items:center; gap:10px;
    max-width:min(92vw, 420px); padding:10px 10px 10px 16px; border-radius:var(--ac-radius-lg); background:var(--ac-color-inverse); color:var(--ac-color-on-inverse); font-size:.86rem;
    box-shadow:var(--ac-shadow-e2); opacity:0; pointer-events:none; transform:translate(-50%, 12px); transition:opacity .15s, transform .18s; }
.db-ss-toast.show { opacity:1; pointer-events:auto; transform:translate(-50%, 0); }
/* The toast uses the inverse surface: the soft semantic colours have the opposite lightness to it in both themes. */
.db-ss-toast .fa-plus { color:var(--ac-color-success-soft); }
.db-ss-toast .fa-minus { color:var(--ac-color-danger-soft); }
.db-ss-toast-name { flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-weight:600; }
.db-ss-toast-qty { opacity:.75; font-variant-numeric:tabular-nums; }
.db-ss-toast-undo { border:none; background:color-mix(in srgb, var(--ac-color-on-inverse) 14%, transparent); color:var(--ac-color-on-inverse); font-weight:700; font-size:.8rem; border-radius:var(--ac-radius-md); padding:8px 12px; min-height:36px; }
.db-ss-toast-undo:hover { background:color-mix(in srgb, var(--ac-color-on-inverse) 24%, transparent); }

.db-ss-tab-badge { position:absolute; top:3px; left:calc(50% + 6px); min-width:20px; height:18px; padding:0 5px; border-radius:var(--ac-radius-pill);
    background:var(--ac-color-danger-soft); color:var(--ac-color-danger); font-size:.66rem; font-weight:700; line-height:18px; text-align:center; }
.db-ss-tab-badge.ok { background:var(--ac-color-success-soft); color:var(--ac-color-success); }
.db-mobile-tab { position:relative; }

/* z-index 10: above card overlays (≤4) and below dropdown menus (Tom Select, Bootstrap: 1000) and the sticky header. */
.db-ss-strip { display:flex; flex-direction:column; align-items:stretch; gap:8px; position:sticky; top:calc(var(--db-ss-header, 0px) + 6px); z-index:10; margin-bottom:14px; padding:8px 12px;
    border:1px solid var(--ac-color-border); border-radius:var(--ac-radius-card); background:var(--ac-color-surface);
    box-shadow:var(--ac-shadow-card); }
.db-ss-strip-main { display:flex; align-items:center; gap:12px; min-width:0; }
.db-ss-strip-chips { display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; flex:1; }
.db-ss-stat { display:inline-flex; align-items:center; gap:4px; height:24px; padding:2px 8px; border-radius:var(--ac-radius-pill); font-size:.72rem; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap;
    background:var(--ac-color-track); color:var(--ac-color-text-2); }
.db-ss-stat img { width:14px; height:14px; flex-shrink:0; }
.db-ss-stat.over { background:var(--ac-color-danger-soft); color:var(--ac-color-danger); font-weight:700; }
.db-ss-stat.at { background:var(--ac-color-warning-soft); color:var(--ac-color-warning); }
.db-ss-strip-hero { width:40px; height:40px; border-radius:var(--ac-radius-control); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--ac-color-track); color:var(--ac-color-text-muted); }
.db-ss-strip-hero img { width:100%; height:100%; object-fit:cover; object-position:50% 22%; transform:scale(1.5); }
.db-ss-strip-id { display:flex; flex-direction:column; min-width:0; flex:0 1 220px; }
.db-ss-strip-name { font-weight:700; font-size:.92rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-ss-strip-sub { font-size:.74rem; color:var(--ac-color-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-ss-strip-progress { display:flex; flex-direction:column; gap:5px; flex:1 1 200px; min-width:90px; max-width:320px; }
.db-ss-strip-count { font-size:.8rem; color:var(--ac-color-text-muted); font-variant-numeric:tabular-nums; }
.db-ss-strip-count strong { font-size:1.05rem; color:var(--ac-color-text); }
.db-ss-strip.is-complete .db-ss-progress-fill { background:var(--ac-color-success); }
.db-ss-chip { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; min-height:34px; border-radius:var(--ac-radius-pill); border:1px solid transparent; font-size:.78rem; font-weight:700; white-space:nowrap; background:var(--ac-color-track); color:var(--ac-color-text-muted); }
button.db-ss-chip { cursor:pointer; }
.db-ss-chip.ok { background:var(--ac-color-success-soft); color:var(--ac-color-success); }
.db-ss-chip.ko { background:var(--ac-color-danger-soft); color:var(--ac-color-danger); }
.db-ss-strip-save { margin-left:auto; transition:background .2s, color .2s; }
.db-ss-strip-save[data-state="dirty"]  { background:var(--ac-color-warning-soft); color:var(--ac-color-warning); }
.db-ss-strip-save[data-state="saving"] { background:var(--ac-color-info-soft); color:var(--ac-color-info); }
.db-ss-strip-save[data-state="saved"]  { background:var(--ac-color-success-soft); color:var(--ac-color-success); }
.db-ss-strip-save[data-state="error"]  { background:var(--ac-color-danger-soft); color:var(--ac-color-danger); }
.db-ss-strip-savebtn { min-height:34px; white-space:nowrap; }

/* « Partager » / « Terminer » (share.js): next to the page title; « Partager » goes into the strip on phones. */
.db-title-row { display:flex; align-items:center; justify-content:space-between; gap:var(--ac-space-3); margin-bottom:var(--ac-space-4); }
.db-title-actions { display:flex; align-items:center; gap:var(--ac-space-2); flex-shrink:0; }
.db-ss-strip-share { display:none; }
.db-action-error { align-items:center; justify-content:space-between; flex-wrap:wrap; margin-bottom:var(--ac-space-3); font:var(--ac-font-small); }
.db-action-error[hidden] { display:none; }
.db-action-error-text { display:flex; flex-direction:column; gap:var(--ac-space-1); flex:1 1 16rem; }
.db-share-saved { display:flex; align-items:center; gap:var(--ac-space-1-5); margin:0 0 var(--ac-space-3); font:var(--ac-font-small); color:var(--ac-color-success); }
.db-share-private-error { margin:0 0 var(--ac-space-3); font:var(--ac-font-small); color:var(--ac-color-danger); }
.db-share-private-error[hidden] { display:none; }
.db-sign-in-badge { width:var(--ac-control-md); height:var(--ac-control-md); flex-shrink:0; border-radius:var(--ac-radius-pill); display:flex; align-items:center; justify-content:center;
    background:var(--ac-color-primary-soft); color:var(--ac-color-primary-strong); --ac-icon-size:20px; }

.db-card-wrap:has(.db-card-qty-badge) { box-shadow:0 0 0 3px var(--ac-color-primary); }
.db-card-wrap:has(.db-card-qty-badge) .db-card-qty-badge { background:var(--ac-color-primary); color:var(--ac-color-on-primary); font-size:.9rem; padding:3px 9px; }
.db-card-wrap:has(.db-card-qty-badge).db-ss-bump { animation:db-ss-ring .55s ease-out; }
.cards-grid-db { padding:3px; }

@media (min-width:992px) {
    .db-ss-sidebar-hide { display:none !important; }
    .db-panel-right { top:calc(var(--db-ss-header, 0px) + 20px); height:calc(100vh - var(--db-ss-header, 0px) - 20px); }
    .db-ss-strip.in-panel { position:sticky; top:0; z-index:auto; margin:0 0 8px; padding:6px 8px; border-radius:var(--ac-radius-control); box-shadow:none; gap:6px; }
    .db-ss-strip.in-panel .db-ss-strip-id { display:none; }
    .db-ss-strip.in-panel .db-ss-strip-hero { width:36px; height:36px; }
    .db-ss-strip.in-panel .db-ss-strip-main { gap:8px; }
    .db-ss-strip.in-panel .db-ss-strip-progress { flex:1 1 80px; min-width:64px; max-width:none; }
    .db-ss-strip.in-panel .db-ss-chip span { display:none; }
    .db-ss-strip.in-panel .db-ss-chip { padding:6px 9px; }
    .db-ss-strip.in-panel .db-ss-strip-save { margin-left:auto; }
    .db-ss-strip.in-panel .db-ss-strip-savebtn span { display:none !important; }
    .db-ss-strip.in-panel .db-ss-strip-chips { flex-wrap:wrap; }
}
@media (min-width:768px) and (max-width:991px) {
    .db-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:12px; padding-bottom:0; }
    .db-tab-pane { display:block !important; }
    .db-mobile-tabs { display:none !important; }
    .db-panel-right { position:sticky; top:calc(var(--db-ss-header, 0px) + var(--db-ss-strip, 96px) + 20px); height:calc(100vh - var(--db-ss-header, 0px) - var(--db-ss-strip, 96px) - 20px); overflow-y:auto; }
    .db-panel-left > .ac-tab-toggle { display:flex !important; }
}
@media (max-width:767px) {
    html { --db-ss-bottom:50px; }
    .db-title-row { margin-bottom:var(--ac-space-3); }
    .db-share-btn { display:none; }
    .db-done-btn { background:transparent; color:var(--ac-color-primary); }
    .db-done-btn:is(:hover, :focus-visible):not(:disabled) { background:var(--ac-color-primary-soft); color:var(--ac-color-primary-strong); }
    .db-done-btn .ac-icon { display:none; }
    .db-ss-strip-share { display:inline-flex; width:var(--ac-control-sm); height:var(--ac-control-sm); border-radius:var(--ac-radius-pill); }
    .db-ss-strip { gap:6px; margin:0 -4px 10px; padding:6px 8px; border-radius:var(--ac-radius-lg); }
    .db-ss-strip-main { gap:8px; }
    .db-ss-strip-id { display:none; }
    .db-ss-strip-hero { width:34px; height:34px; }
    .db-ss-chip span { display:none; }
    .db-ss-chip { padding:6px 9px; }
    .db-ss-strip-chips { flex-wrap:nowrap; overflow:hidden; }
    .db-card-btn-group .btn { min-width:40px; min-height:40px; }
    .deck-list-qty button { width:34px; height:34px; }
}