/* Dashboard Designer (Edit Dashboard) — Blazor port. Token-driven (light + dark): the --dbd-* vars map
   onto the app's global design tokens (app.css), with a green accent for the designer's identity and a
   dark-mode block at the foot. Layout mirrors the Report Template Designer: doc-icon top bar, floating
   bottom "Add item" dock, side-panel editor. Non-scoped so the dbd-* classes apply across the page and
   its child components. */

.dbd-shell {
    /* Local vars map onto the app's global light/dark tokens (app.css) so the designer follows the theme.
       Extra roles the app doesn't expose as tokens (subtle-2, danger-wash, weak text) are given light values
       here and overridden in the dark block below. Green accent kept for the designer identity, via the
       accessible --accent-success-* tokens. */
    --dbd-bg: var(--bg-card);
    --dbd-surface: var(--bg-card);
    --dbd-shell-bg: var(--bg-primary);
    --dbd-fg: var(--text-primary);
    --dbd-fg-soft: var(--text-secondary);
    --dbd-muted: var(--text-muted);
    --dbd-faint: var(--text-muted);
    --dbd-border: var(--border-color);
    --dbd-border-strong: var(--border-interactive);
    --dbd-subtle: var(--bg-secondary);
    --dbd-hover: var(--bg-hover);
    --dbd-accent: var(--accent-success-fill);
    --dbd-accent-soft: var(--accent-wash);
    --dbd-accent-strong: var(--accent-success-text);
    --dbd-accent-ring: rgba(37, 99, 235,.25);
    --dbd-danger: var(--accent-danger-text);
    --dbd-danger-wash: rgba(220,38,38,.12);
    --dbd-warn: var(--accent-warning-text);
    --dbd-warn-wash: rgba(245,158,11,.16);

    position: fixed; inset: 0; z-index: 1040;
    display: flex; flex-direction: column;
    background: var(--dbd-shell-bg); color: var(--dbd-fg); font-size: 0.9rem;
}

/* ── Top bar ─────────────────────────────────────────────── */
.dbd-topbar { display:flex; align-items:center; justify-content:space-between;
    height:56px; padding:0 16px; background:var(--dbd-bg); border-bottom:1px solid var(--dbd-border); flex-shrink:0; }
.dbd-topbar-left, .dbd-topbar-right { display:flex; align-items:center; gap:12px; }
.dbd-topbar-right { gap:10px; }
.dbd-doc-icon { display:inline-flex; align-items:center; justify-content:center;
    color:var(--accent-primary);
    font-size: 1.05rem; }
.dbd-title { display:flex; flex-direction:column; line-height:1.2; }
.dbd-title-name { margin:0; font-weight:600; font-size:0.98rem; }
.dbd-title-sub { font-size:0.76rem; color:var(--dbd-muted); }
.dbd-unsaved { font-size:0.76rem; color:var(--dbd-warn); display:inline-flex; align-items:center; gap:6px; }
.dbd-unsaved .fa-circle { font-size:0.5rem; }

.dbd-topbtn { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 14px;
    border-radius:8px; font-size:0.85rem; font-weight:550; cursor:pointer; border:1px solid transparent;
    transition:background .12s ease, border-color .12s ease, filter .12s ease, opacity .12s ease; }
.dbd-topbtn.primary { background:var(--dbd-accent); color:#fff; }
.dbd-topbtn.primary:hover:not(:disabled) { filter:brightness(1.05); }
.dbd-topbtn.primary:disabled { opacity:.5; cursor:default; }
.dbd-topbtn.ghost { background:var(--dbd-bg); border-color:var(--dbd-border); color:var(--dbd-fg); }
.dbd-topbtn.ghost:hover:not(:disabled) { background:var(--dbd-subtle); }
.dbd-topbtn.ghost.open { background:var(--dbd-subtle); border-color:var(--dbd-border-strong); }

.dbd-divider-v { width:1px; height:24px; background:var(--dbd-border); margin:0 2px; }

.dbd-loading, .dbd-norights { flex:1; display:flex; align-items:center; justify-content:center; color:var(--dbd-muted); }

/* ── Body: canvas + side editor (palette is now a floating dock) ─ */
.dbd-body { flex:1; display:flex; min-height:0; position:relative; }

/* Canvas */
.dbd-canvas-wrap { flex:1; min-width:0; overflow-y:auto; padding:24px 24px 96px; }
.dbd-empty { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:var(--dbd-muted); gap:6px; text-align:center; }
.dbd-empty i { font-size:40px; color:var(--dbd-faint); margin-bottom:6px; }
.dbd-empty p { margin:0; font-size:0.88rem; }
.dbd-empty-title { font-size:1rem !important; font-weight:600; color:var(--dbd-fg); }
.dbd-empty strong { color:var(--dbd-accent-strong); font-weight:600; }

/* Canvas hint strip — teaches the two interactions (drag to reorder, click to edit) + item count. */
.dbd-canvas-hint { margin:0 0 14px; display:flex; align-items:center; gap:16px;
    font-size:0.76rem; color:var(--dbd-muted); }
.dbd-canvas-hint span { display:inline-flex; align-items:center; gap:6px; }
.dbd-canvas-hint i { color:var(--dbd-faint); }
.dbd-canvas-hint-count { margin-left:auto; font-weight:600; color:var(--dbd-muted); }
.dbd-canvas-zoom { display:inline-flex; align-items:center; gap:6px; }
.dbd-canvas-zoom .dbd-seg-btn { padding:4px 9px; font-size:0.74rem; }

/* The canvas IS the live dashboard grid. Every value here is copied from
   .dashboard-items-container in DashboardPageComponent.razor.css — 6 columns, 55px implicit rows,
   8px gap, row auto-flow — so a tile placed with the renderer's own column/row spans comes out the
   shape it will really be. Change one, change the other.

   --dbd-canvas-scale zooms the preview without distorting it. At 1:1 the canvas is unwieldy (a
   "Largest" item is genuinely 1126px tall), so the width, the row height and the gap are ALL
   multiplied by the same factor. The columns are fractional, so they follow the width — every tile
   therefore keeps the exact aspect ratio and relative position it has on the real dashboard, just
   smaller. Scaling the metrics rather than `transform: scale()` keeps the labels readable and keeps
   drag-to-reorder hit-testing honest (SortableJS measures untransformed boxes). */
.dbd-canvas { --dbd-canvas-scale:1; display:grid; grid-template-columns:repeat(6,2fr);
    grid-auto-rows:calc(55px * var(--dbd-canvas-scale)); grid-auto-flow:row;
    gap:calc(8px * var(--dbd-canvas-scale)); width:calc(100% * var(--dbd-canvas-scale));
    margin-inline:auto; align-content:start; }

/* Canvas tile. Column and row spans come from the tile's inline style (see DashboardCanvasTile) so
   the placement rules live in one place with the live renderer's numbers; this is chrome only.
   min-height:0 + overflow:hidden keep a tile pinned to its real grid height instead of growing to
   fit its own content, which is what made short items look far taller than they render. */
.dbd-tile { grid-column:span 3; grid-row:span 1; min-height:0; overflow:hidden;
    background:var(--dbd-bg); border:1px solid var(--dbd-border); border-radius:12px;
    padding:12px 14px; display:flex; flex-direction:column; cursor:pointer;
    transition:border-color .12s, box-shadow .12s; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.dbd-tile:hover { border-color:var(--dbd-border-strong); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.dbd-tile.selected { border-color:var(--dbd-accent); box-shadow:0 0 0 2px var(--dbd-accent-ring); }
.dbd-tile.hidden-item { border-style:dashed; }

/* Short tiles: one row is 55px and two rows 118px, which the full head + body + foot cannot fit.
   Shed the detail rather than overflow — an honest 55px tile beats a padded lie about its height. */
.dbd-tile.is-compact { padding:8px 12px; }
.dbd-tile.is-compact .dbd-tile-foot,
.dbd-tile.is-compact .dbd-tile-comment { display:none; }
.dbd-tile.is-compact .dbd-tile-body { padding:4px 0 0; min-height:0; }
.dbd-tile.is-tiny { padding:0 12px; justify-content:center; }
.dbd-tile.is-tiny .dbd-tile-body { display:none; }
/* drag-reorder affordance */
.dbd-tile.dbd-drag-ghost { opacity:.4; }
.dbd-tile.dbd-drag-chosen { box-shadow:0 6px 20px rgba(0,0,0,.14); }
.dbd-tile-head { display:flex; align-items:center; gap:8px; }
/* Drag grip uses the shared .amx-drag-handle (app.css); dim at rest, lights up on tile hover. */
.dbd-tile-head .amx-drag-handle { opacity:.35; transition:opacity .12s; }
.dbd-tile:hover .amx-drag-handle, .dbd-tile.selected .amx-drag-handle { opacity:1; }
.dbd-tile-ico { width:26px; height:26px; display:grid; place-items:center; border-radius:7px;
    background:var(--dbd-subtle); color:var(--dbd-fg-soft); font-size:0.78rem; flex-shrink:0; }
.dbd-tile-title { flex:1; font-weight:600; font-size:0.86rem; color:var(--dbd-fg); overflow:hidden;
    text-overflow:ellipsis; white-space:nowrap; }
.dbd-tile-actions { display:flex; gap:2px; opacity:0; transition:opacity .1s; }
.dbd-tile:hover .dbd-tile-actions, .dbd-tile:focus-within .dbd-tile-actions, .dbd-tile.selected .dbd-tile-actions { opacity:1; }
.dbd-tile-btn { border:none; background:transparent; color:var(--dbd-faint); width:26px; height:26px;
    border-radius:6px; cursor:pointer; font-size:0.78rem; }
.dbd-tile-btn:hover { background:var(--dbd-subtle); color:var(--dbd-fg); }
.dbd-tile-btn:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.dbd-tile-btn.danger:hover { background:var(--dbd-danger-wash); color:var(--dbd-danger); }
.dbd-tile-body { flex:1; display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; padding:10px 0; min-height:28px; }
.dbd-tile-type { font-size:0.78rem; color:var(--dbd-faint); }
.dbd-tile-comment { font-size:0.78rem; color:var(--dbd-muted); width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbd-tile-badge { font-size:0.66rem; padding:2px 7px; border-radius:20px; font-weight:600; }
.dbd-tile-badge.hidden { background:var(--dbd-subtle); color:var(--dbd-muted); }
.dbd-tile-badge.warn { background:var(--dbd-warn-wash); color:var(--dbd-warn); }
.dbd-tile-badge.fixed { background:var(--dbd-subtle); color:var(--dbd-muted); flex-shrink:0; }
.dbd-tile-foot { display:flex; justify-content:space-between; align-items:center; font-size:0.7rem; color:var(--dbd-faint); }

/* ── Floating "Add item" dock (mirrors NodePaletteBar) ─────── */
.dbd-dock { position:absolute; left:50%; bottom:18px; transform:translateX(-50%); z-index:40;
    display:flex; align-items:center; gap:4px;
    background:var(--dbd-bg); border:1px solid var(--dbd-border); border-radius:12px;
    padding:5px; box-shadow:0 4px 16px rgba(0,0,0,.08); }
.dbd-dock-divider { width:1px; align-self:stretch; background:var(--dbd-border); margin:5px 3px; }
.dbd-dock-lead { display:inline-flex; align-items:center; gap:6px; padding:0 10px 0 8px;
    font-size:0.8rem; font-weight:600; color:var(--dbd-accent-strong); white-space:nowrap; }
.dbd-dock-lead i { font-size:0.72rem; }
.dbd-tools { display:flex; align-items:center; gap:2px; }
.dbd-tool { position:relative; }
.dbd-tool-btn { display:inline-flex; align-items:center; gap:7px; border:none; background:transparent;
    color:var(--dbd-fg); height:36px; padding:0 12px; border-radius:8px;
    font-size:0.82rem; font-weight:550; cursor:pointer; transition:background .12s, color .12s; }
.dbd-tool-btn:hover { background:var(--dbd-subtle); }
.dbd-tool-btn.open { background:var(--dbd-subtle); color:var(--accent-link); }
.dbd-tool-ico { font-size:0.95rem; color:var(--dbd-muted); }
.dbd-tool-btn:hover .dbd-tool-ico, .dbd-tool-btn.open .dbd-tool-ico { color:var(--accent-link); }
.dbd-tool-label { line-height:1; white-space:nowrap; }
.dbd-tool-caret { font-size:0.58rem; opacity:.5; margin-left:1px; }
.dbd-tool-btn:hover .dbd-tool-caret, .dbd-tool-btn.open .dbd-tool-caret { opacity:.8; }
/* the show-hidden toggle lives as a trailing chip in the dock */
.dbd-dock-toggle { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 12px;
    font-size:0.78rem; color:var(--dbd-muted); cursor:pointer; margin:0; user-select:none; }
.dbd-dock-toggle input { accent-color:var(--dbd-accent); }

/* Dropup menu */
.dbd-menu { position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
    min-width:200px; padding:6px; background:var(--dbd-bg); border:1px solid var(--dbd-border); border-radius:10px;
    box-shadow:0 8px 24px rgba(0,0,0,.12); display:flex; flex-direction:column; gap:2px;
    animation:dbd-pop .12s ease-out; }
@keyframes dbd-pop { from { opacity:0; transform:translate(-50%,5px); } to { opacity:1; transform:translate(-50%,0); } }
.dbd-menu-item { display:flex; align-items:center; gap:10px; text-align:left; white-space:nowrap;
    border:none; background:transparent; color:var(--dbd-fg);
    padding:9px 10px; border-radius:7px; font-size:0.84rem; font-weight:500; cursor:pointer; transition:background .1s; }
.dbd-menu-item:hover { background:var(--dbd-subtle); }
.dbd-menu-icon { width:16px; text-align:center; color:var(--dbd-muted); font-size:0.85rem; }
.dbd-menu-item:hover .dbd-menu-icon { color:var(--accent-primary); }
.dbd-menu-label { line-height:1; flex:1; }
.dbd-backdrop { position:fixed; inset:0; z-index:39; background:transparent; }

/* ── Side-panel editor ───────────────────────────────────── */
.dbd-editor { width:340px; flex-shrink:0; background:var(--dbd-bg); border-left:1px solid var(--dbd-border);
    display:flex; flex-direction:column; }
.dbd-editor-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px;
    border-bottom:1px solid var(--dbd-border); font-weight:600; font-size:0.92rem; }
.dbd-editor-close { border:none; background:transparent; color:var(--dbd-faint); cursor:pointer; font-size:0.95rem;
    width:28px; height:28px; border-radius:6px; }
.dbd-editor-close:hover { background:var(--dbd-subtle); color:var(--dbd-fg); }
.dbd-editor-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:14px; }
.dbd-field { display:flex; flex-direction:column; gap:5px; }
.dbd-field > label { font-size:0.72rem; font-weight:600; color:var(--dbd-fg-soft); text-transform:uppercase; letter-spacing:.03em; }
.dbd-field-row { display:flex; gap:10px; }
.dbd-field-row > .dbd-field { flex:1; }
.dbd-field-check { justify-content:flex-end; }
.dbd-field-check label { font-weight:500; display:flex; align-items:center; gap:7px; font-size:0.84rem; color:var(--dbd-fg); cursor:pointer; }
.dbd-field-check input { accent-color:var(--dbd-accent); }
.dbd-input { border:1px solid var(--border-interactive); border-radius:8px; padding:8px 10px; font-size:0.85rem; width:100%; background:var(--dbd-bg); color:var(--text-primary); }
.dbd-input:focus { outline:none; border-color:var(--accent-primary); box-shadow:0 0 0 3px rgba(37, 99, 235,.15); }
.dbd-input:focus-visible { outline:2px solid var(--accent-primary); outline-offset:2px; }
.mt-1 { margin-top:4px; }
.dbd-report-picker { display:flex; gap:6px; }
.dbd-report-list { margin-top:6px; border:1px solid var(--dbd-border); border-radius:8px; padding:8px;
    max-height:240px; overflow-y:auto; display:flex; flex-direction:column; gap:4px; background:var(--dbd-subtle); }
.dbd-report-item { text-align:left; border:none; background:transparent; padding:7px 9px; border-radius:6px;
    font-size:0.8rem; color:var(--dbd-fg); cursor:pointer; }
.dbd-report-item:hover { background:var(--dbd-subtle); }
.dbd-report-loading { font-size:0.8rem; color:var(--dbd-muted); padding:6px; }
.dbd-note { font-size:0.78rem; color:var(--dbd-muted); background:var(--dbd-subtle); border:1px solid var(--dbd-border); border-radius:8px; padding:9px 10px; }
.dbd-hint { font-size:0.7rem; color:var(--dbd-faint); }

/* Section header inside the editor for grouped sub-editors (badge/actions) */
.dbd-section { border-top:1px solid var(--dbd-border); padding-top:12px; display:flex; flex-direction:column; gap:10px; }
.dbd-section-head { display:flex; align-items:center; justify-content:space-between; }
.dbd-section-title { font-size:0.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--dbd-fg-soft); }

/* Small "add row" / list-row controls reused by badge + custom-actions builders */
.dbd-mini-btn { display:inline-flex; align-items:center; gap:5px; border:1px solid var(--dbd-border);
    background:var(--dbd-bg); color:var(--dbd-fg); border-radius:7px; padding:5px 9px; font-size:0.76rem; font-weight:550; cursor:pointer; }
.dbd-mini-btn:hover { background:var(--dbd-subtle); }
.dbd-mini-btn.accent { border-color:transparent; background:var(--dbd-accent-soft); color:var(--dbd-accent-strong); }
.dbd-mini-btn.danger { color:var(--dbd-danger); }
.dbd-mini-btn.danger:hover { background:var(--dbd-danger-wash); }
.dbd-row-card { border:1px solid var(--dbd-border); border-radius:9px; padding:10px; display:flex; flex-direction:column; gap:8px; background:var(--dbd-bg); }
.dbd-row-card + .dbd-row-card { margin-top:8px; }
.dbd-row-head { display:flex; align-items:center; gap:8px; }
.dbd-row-head .dbd-row-title { flex:1; font-size:0.8rem; font-weight:600; color:var(--dbd-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dbd-row-order { display:flex; gap:2px; }
.dbd-icon-btn { border:none; background:transparent; color:var(--dbd-faint); width:26px; height:26px; border-radius:6px; cursor:pointer; font-size:0.75rem; }
.dbd-icon-btn:hover { background:var(--dbd-subtle); color:var(--dbd-fg); }
.dbd-icon-btn:disabled { opacity:.35; cursor:default; }
.dbd-icon-btn.danger:hover { background:var(--dbd-danger-wash); color:var(--dbd-danger); }
.dbd-empty-hint { font-size:0.78rem; color:var(--dbd-faint); text-align:center; padding:10px; border:1px dashed var(--dbd-border); border-radius:8px; }

/* ── Modal (Auto Refresh) ────────────────────────────────── */
.dbd-modal-backdrop { position:fixed; inset:0; z-index:1060; background:rgba(0,0,0,.35);
    display:flex; align-items:center; justify-content:center; }
.dbd-modal { width:420px; max-width:calc(100vw - 32px); background:var(--dbd-bg); border-radius:14px;
    box-shadow:0 24px 60px rgba(0,0,0,.28); display:flex; flex-direction:column; overflow:hidden; }
.dbd-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--dbd-border); }
.dbd-modal-title { font-weight:600; font-size:1rem; }
.dbd-modal-body { padding:18px; display:flex; flex-direction:column; gap:14px; }
.dbd-modal-foot { padding:14px 18px; border-top:1px solid var(--dbd-border); display:flex; justify-content:flex-end; gap:10px; }
.dbd-seg { display:inline-flex; background:var(--dbd-subtle); border-radius:8px; padding:3px; gap:3px; flex-wrap:wrap; }
.dbd-seg-btn { border:none; background:transparent; color:var(--dbd-muted); padding:7px 14px; border-radius:6px; font-size:0.82rem; font-weight:550; cursor:pointer; }
.dbd-seg-btn.active { background:var(--dbd-bg); color:var(--accent-link); box-shadow:0 1px 2px rgba(0,0,0,.06); }

/* ── Picker trigger (opens a modal) ──────────────────────────── */
.dbd-picker-trigger { display:flex; align-items:center; gap:8px; width:100%; text-align:left;
    border:1px solid var(--dbd-border-strong); border-radius:8px; padding:8px 10px; background:var(--dbd-bg); cursor:pointer;
    font-size:0.85rem; transition:border-color .12s, box-shadow .12s; }
.dbd-picker-trigger:hover { border-color:var(--dbd-faint); }
.dbd-picker-trigger:focus-visible { outline:none; border-color:var(--accent-primary); box-shadow:0 0 0 3px rgba(37, 99, 235,.15); }
.dbd-picker-value { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--dbd-fg); }
.dbd-picker-value.placeholder { color:var(--dbd-faint); }
.dbd-picker-ico { color:var(--dbd-muted); font-size:0.8rem; flex-shrink:0; }
.dbd-picker-trigger-row { display:flex; gap:6px; align-items:stretch; }
.dbd-picker-trigger-row .dbd-picker-trigger { flex:1; }
.dbd-picker-trigger-row .dbd-icon-btn { border:1px solid var(--dbd-border-strong); border-radius:8px; width:38px; }

/* The picker modal body itself now lives in the shared AmxPickerModal component (design language
   §5) — only the trigger that opens it is styled here. */

/* Same breakpoint and collapse as .dashboard-items-container's, so the canvas keeps telling the
   truth on a narrow window. !important beats the per-tile inline spans, which are the desktop ones. */
@media (max-width: 720px) {
    .dbd-canvas { grid-template-columns:repeat(2,2fr); }
    .dbd-tile { grid-column:span 2 !important; }
}

@media (max-width: 820px) {
    .dbd-tool-label, .dbd-dock-toggle, .dbd-dock-lead { display:none; }
    .dbd-tool-btn { padding:0 10px; }
    .dbd-editor { width:300px; }
    .dbd-canvas-hint span:not(.dbd-canvas-hint-count) { display:none; }
}

/* ── Dark mode ───────────────────────────────────────────────
   Most --dbd-* vars point at global tokens that already flip per theme; only the LOCAL literal roles
   (washes, focus ring) and the box-shadows (too heavy over a dark ground) need dark values. Handle both
   the explicit toggle ([data-theme="dark"]) and the system default (prefers-color-scheme). */
:root[data-theme="dark"] .dbd-shell,
:root:not([data-theme="light"]) .dbd-shell {
    --dbd-accent-ring: rgba(59, 130, 246,.30);
    --dbd-danger-wash: rgba(248,113,113,.15);
    --dbd-warn-wash: rgba(245,158,11,.18);
}
/* Softer elevation on dark — the light-mode rgba(0,0,0,…) shadows read as hard black rectangles. */
:root[data-theme="dark"] .dbd-tile,
:root:not([data-theme="light"]) .dbd-tile { box-shadow:0 1px 2px rgba(0,0,0,.35); }
:root[data-theme="dark"] .dbd-tile:hover,
:root:not([data-theme="light"]) .dbd-tile:hover { box-shadow:0 2px 10px rgba(0,0,0,.45); }
:root[data-theme="dark"] .dbd-dock,
:root:not([data-theme="light"]) .dbd-dock { box-shadow:0 4px 18px rgba(0,0,0,.5); }
:root[data-theme="dark"] .dbd-menu,
:root:not([data-theme="light"]) .dbd-menu,
:root[data-theme="dark"] .dbd-modal,
:root:not([data-theme="light"]) .dbd-modal { box-shadow:0 12px 40px rgba(0,0,0,.6); }