/* ============================================================================
   Dashboard Widgets — lightweight customizable home-screen framework
   Vanilla CSS, no build step. Pairs with dashboard-widgets.js.
   Concept ported from homepage_widgets_research_notes.md (react-grid-layout /
   Zustand / Prisma) into this prototype's vanilla + localStorage stack.
   ========================================================================== */

/* Grid items size to their own content, top-aligned (masonry-ish rows). */
.dw-grid { align-items: start; }

.dw-widget { position: relative; }
.dw-hidden { display: none !important; }

/* On narrow screens every widget collapses to a single column. */
@media (max-width: 1024px) {
  .dw-grid > .dw-widget { grid-column: span 12 / span 12 !important; }
}

/* ── Edit mode ─────────────────────────────────────────────────────────── */
.dw-editing .dw-widget {
  outline: 2px dashed rgba(16, 185, 129, 0.55);
  outline-offset: 4px;
  border-radius: 1rem;
  cursor: grab;
  transition: outline-color .15s, opacity .15s;
}
.dw-editing .dw-widget:hover { outline-color: rgba(16, 185, 129, 0.9); }
.dw-editing .dw-widget.dw-dragging { opacity: .45; cursor: grabbing; }

/* While editing, the widget's own content is inert so clicks/links don't fire;
   only the injected chrome bar is interactive. */
.dw-editing .dw-widget > *:not(.dw-chrome) { pointer-events: none; user-select: none; }

/* Drop indicator helper */
.dw-editing .dw-widget.dw-dragover { outline-color: #10b981; }

/* ── Per-widget chrome bar (injected in edit mode) ─────────────────────── */
.dw-chrome {
  display: none;
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 20;
  align-items: center;
  gap: .5rem;
  height: 34px;
  padding: 0 .5rem;
  background: rgba(4, 22, 39, 0.94);
  color: #fff;
  border-radius: 1rem 1rem 0 0;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  pointer-events: auto;
}
.dw-editing .dw-chrome { display: flex; }

.dw-chrome .dw-drag { cursor: grab; opacity: .7; font-size: 18px; }
.dw-chrome .dw-title {
  display: flex; align-items: center; gap: .35rem;
  font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dw-chrome .dw-title .material-symbols-outlined { font-size: 15px; }

.dw-chrome .dw-spans { display: flex; gap: 2px; margin-left: auto; }
.dw-chrome .dw-spans button {
  min-width: 26px; height: 22px; padding: 0 6px;
  border-radius: 6px; border: 1px solid rgba(255,255,255,.18);
  background: transparent; color: #cbd5e1; font-size: 10px; font-weight: 700;
  cursor: pointer; transition: background .12s, color .12s;
}
.dw-chrome .dw-spans button:hover { background: rgba(255,255,255,.1); color: #fff; }
.dw-chrome .dw-spans button.dw-active { background: #10b981; border-color: #10b981; color: #fff; }

.dw-chrome .dw-remove {
  cursor: pointer; font-size: 18px; color: #fca5a5;
  background: transparent; border: 0; padding: 2px; border-radius: 6px;
}
.dw-chrome .dw-remove:hover { background: rgba(239,68,68,.25); color: #fff; }

/* ── Floating "Customize" button (view mode) ───────────────────────────── */
.dw-fab {
  position: fixed; bottom: 24px; right: 24px; z-index: 60;
  display: flex; align-items: center; gap: .5rem;
  padding: 10px 16px; border: 0; border-radius: 9999px; cursor: pointer;
  background: #041627; color: #fff; font-family: Inter, system-ui, sans-serif;
  font-size: 13px; font-weight: 700;
  box-shadow: 0 12px 32px -6px rgba(4,22,39,.5);
  transition: transform .15s, background .15s;
}
.dw-fab:hover { background: #0d2236; transform: translateY(-1px); }
.dw-fab .material-symbols-outlined { font-size: 18px; }

/* ── Edit toolbar (edit mode) ──────────────────────────────────────────── */
.dw-toolbar {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  z-index: 60; display: flex; align-items: center; gap: .5rem;
  padding: 10px 12px; border-radius: 14px;
  background: #041627; color: #fff; font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 16px 40px -8px rgba(4,22,39,.55);
}
.dw-toolbar .dw-tb-label { font-size: 12px; font-weight: 800; padding: 0 .25rem; opacity: .8; }
.dw-toolbar button {
  display: flex; align-items: center; gap: .35rem;
  padding: 8px 12px; border-radius: 9px; border: 0; cursor: pointer;
  font-size: 12px; font-weight: 700; font-family: inherit;
}
.dw-toolbar .material-symbols-outlined { font-size: 16px; }
.dw-tb-add    { background: rgba(255,255,255,.1); color: #fff; }
.dw-tb-add:hover { background: rgba(255,255,255,.2); }
.dw-tb-reset  { background: transparent; color: #cbd5e1; }
.dw-tb-reset:hover { color: #fff; }
.dw-tb-cancel { background: transparent; color: #cbd5e1; }
.dw-tb-cancel:hover { color: #fff; }
.dw-tb-save   { background: #10b981; color: #fff; }
.dw-tb-save:hover { background: #059669; }

/* ── Add-widget popover ────────────────────────────────────────────────── */
.dw-add-menu {
  position: fixed; z-index: 70; min-width: 220px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 20px 48px -12px rgba(4,22,39,.3);
  padding: 6px; font-family: Inter, system-ui, sans-serif;
}
.dw-add-menu .dw-add-title { font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #94a3b8; padding: 6px 8px; }
.dw-add-menu button {
  display: flex; align-items: center; gap: .5rem; width: 100%;
  padding: 8px 10px; border: 0; background: transparent; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 600; color: #041627; text-align: left;
}
.dw-add-menu button:hover { background: #ecfdf5; color: #047857; }
.dw-add-menu button .material-symbols-outlined { font-size: 18px; color: #10b981; }
.dw-add-menu .dw-add-empty { padding: 10px 8px; font-size: 12px; color: #94a3b8; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.dw-toast {
  position: fixed; bottom: 84px; left: 50%; transform: translateX(-50%);
  z-index: 80; background: #041627; color: #fff; padding: 10px 18px;
  border-radius: 10px; font-family: Inter, system-ui, sans-serif; font-size: 13px;
  font-weight: 700; box-shadow: 0 12px 32px -8px rgba(4,22,39,.5);
}