/* =========================================================================
   DASHBOARD + BRAND KIT  (design-dashboard.js, design-brandkit.js)
   Landing view for Management > Graphic Design: client readiness across the
   whole roster, the brand kit editor, and the read-only template library.

   Kept in its own file so the slice can be reverted by deleting two files and
   two script tags. Blue palette, glossy crystal, no yellow or green. Red only
   marks a blocking problem.
   ========================================================================= */
.dzd { display: flex; flex-direction: column; gap: 18px; }
.dzd-loading { margin: 0; padding: 30px; text-align: center; color: var(--muted); font-size: 13px; }

/* ----- stat strip ----- */
.dzd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.dzd-stat {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  padding: 14px 16px; cursor: pointer; text-align: left;
  border: 1px solid var(--dz-glass-edge); border-radius: 15px;
  background: var(--dz-glass);
  box-shadow: inset 0 1px 0 var(--dz-shine), 0 1px 2px rgba(15, 23, 42, 0.04);
  transition: border-color .15s, box-shadow .18s, transform .12s;
}
.dzd-stat:hover { transform: translateY(-1px); border-color: var(--blue-400); }
.dzd-stat.is-active {
  border-color: var(--blue-500);
  box-shadow: inset 0 1px 0 var(--dz-shine), 0 0 0 2px var(--blue-100) inset;
}
.dzd-stat.is-plain { cursor: default; }
.dzd-stat.is-plain:hover { transform: none; border-color: var(--dz-glass-edge); }
.dzd-stat.is-skeleton { opacity: .5; }
.dzd-stat-n { font-size: 24px; font-weight: 800; color: var(--text); line-height: 1.1; }
.dzd-stat-l { font-size: 12px; color: var(--muted); }
.dzd-stat[data-dzd-filter="blocked"] .dzd-stat-n { color: var(--danger); }

.dzd-hint {
  padding: 11px 14px; border-radius: 12px; font-size: 12.5px; line-height: 1.5;
  color: var(--text); background: var(--blue-50); border: 1px solid var(--blue-200);
}

/* ----- toolbar ----- */
.dzd-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.dzd-search { flex: 1; min-width: 240px; }
.dzd-select { width: auto; min-width: 170px; }
.dzd-count { font-size: 12px; color: var(--muted); margin-left: auto; }

/* ----- client cards ----- */
.dzd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.dzd-card {
  display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1px solid var(--border); border-radius: 15px; background: var(--bg);
  box-shadow: inset 0 1px 0 var(--dz-shine);
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.dzd-card:hover { transform: translateY(-1px); border-color: var(--blue-400); box-shadow: var(--shadow); }
.dzd-card.is-blocked { border-left: 3px solid var(--danger); }
.dzd-card.is-ready { border-left: 3px solid var(--blue-500); }
.dzd-card.is-partial { border-left: 3px solid var(--blue-300); }

.dzd-card-head { display: flex; align-items: center; gap: 10px; }
.dzd-avatar {
  position: relative;
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--blue-50); border: 1px solid var(--border);
  font-size: 13px; font-weight: 700; color: var(--blue-600);
}
.dzd-avatar i { font-style: normal; }
.dzd-avatar img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: var(--blue-50);
}
.dzd-card-id { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dzd-card-id strong {
  font-size: 13.5px; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dzd-card-id small { font-size: 11.5px; color: var(--muted); }

.dzd-pill {
  font-size: 10.5px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
/* --bg flips with the theme, so the label stays readable on --blue-500 in
   both light (dark-ish chip, white text) and dark (light chip, dark text). */
.dzd-pill-ready { background: var(--blue-500); color: var(--bg); }
.dzd-pill-partial { background: var(--blue-100); color: var(--blue-600); }
.dzd-pill-blocked { background: #fef2f2; color: var(--danger); }
html.theme-dark .dzd-pill-blocked { background: rgba(239, 68, 68, 0.14); }

.dzd-meter { height: 4px; border-radius: 999px; background: var(--blue-100); overflow: hidden; }
.dzd-meter span { display: block; height: 100%; background: var(--blue-500); border-radius: 999px; }
.dzd-card.is-blocked .dzd-meter span { background: var(--blue-400); }

.dzd-card-note { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); min-height: 32px; }
.dzd-card-foot { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dzd-meta { font-size: 11.5px; color: var(--muted); }
.dzd-card-actions { display: flex; gap: 6px; margin-left: auto; }
.dzd-mini { padding: 5px 11px; font-size: 12px; }

/* ----- template library ----- */
.dzd-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.dzd-tpl {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--border); border-radius: 14px; background: var(--bg);
}
.dzd-tpl-wire { background: var(--bg-subtle); padding: 10px; border-bottom: 1px solid var(--border); }
.dzd-tpl-wire .dz-wire { display: block; width: 100%; height: auto; border-radius: 10px; }
.dzd-tpl-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.dzd-tpl-body strong { font-size: 13px; color: var(--text); }
.dzd-tpl-body small { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.dzd-tpl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
.dzd-tag {
  font-size: 10.5px; padding: 3px 8px; border-radius: 999px;
  background: var(--blue-50); color: var(--blue-600); border: 1px solid var(--blue-100);
}
.dzd-tag-ok { background: var(--blue-100); color: var(--blue-600); }
.dzd-tag-bad { background: #fef2f2; color: var(--danger); border-color: #fecaca; }
html.theme-dark .dzd-tag-bad { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.3); }
.dzd-tpl-errs { margin: 4px 0 0; padding-left: 16px; font-size: 11px; color: var(--danger); line-height: 1.5; }

/* ----- drawer ----- */
.dzd-drawer { position: fixed; inset: 0; z-index: 9200; display: flex; justify-content: flex-end; }
.dzd-drawer-scrim { position: absolute; inset: 0; background: rgba(8, 12, 24, 0.5); }
.dzd-drawer-panel {
  position: relative; width: min(520px, 100%); height: 100%;
  display: flex; flex-direction: column;
  background: var(--bg); border-left: 1px solid var(--border);
  box-shadow: -18px 0 46px rgba(15, 23, 42, 0.18);
  animation: dzd-slide .18s ease-out;
}
@keyframes dzd-slide { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dzd-drawer-head {
  display: flex; align-items: center; gap: 12px; padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}
.dzd-drawer-head > span { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.dzd-drawer-head strong { font-size: 15px; color: var(--text); }
.dzd-drawer-head small { font-size: 12px; color: var(--muted); }
.dzd-drawer-x {
  border: 1px solid var(--border); background: var(--bg); color: var(--muted);
  width: 30px; height: 30px; border-radius: 9px; cursor: pointer; font-size: 13px;
}
.dzd-drawer-x:hover { border-color: var(--blue-400); color: var(--text); }
.dzd-drawer-body { flex: 1; overflow-y: auto; padding: 16px 18px 24px; }

/* Scrollbars stay invisible at rest and appear only while scrolling. */
.dzd-drawer-body { scrollbar-width: thin; scrollbar-color: transparent transparent; }
.dzd-drawer-body::-webkit-scrollbar { width: 8px; }
.dzd-drawer-body::-webkit-scrollbar-track { background: transparent; }
.dzd-drawer-body::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
.dzd-drawer-body::-webkit-scrollbar-corner { background: transparent; }
.dzd-drawer-body.is-scrolling { scrollbar-color: rgba(15, 23, 42, 0.22) transparent; }
.dzd-drawer-body.is-scrolling::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, 0.22); }
html.theme-dark .dzd-drawer-body.is-scrolling { scrollbar-color: #1a1a1a transparent; }
html.theme-dark .dzd-drawer-body.is-scrolling::-webkit-scrollbar-thumb { background: #1a1a1a; }

/* ----- brand kit panel ----- */
.dzk { display: flex; flex-direction: column; gap: 16px; }
.dzk-status {
  display: flex; flex-direction: column; gap: 3px; padding: 11px 13px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg-subtle);
}
.dzk-status strong { font-size: 12.5px; }
.dzk-status span { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.dzk-status-ready { border-color: var(--blue-300); }
.dzk-status-ready strong { color: var(--blue-600); }
.dzk-status-partial strong { color: var(--muted); }
.dzk-status-blocked { border-color: #fecaca; background: #fef2f2; }
.dzk-status-blocked strong { color: var(--danger); }
html.theme-dark .dzk-status-blocked { background: rgba(239, 68, 68, 0.1); border-color: rgba(239, 68, 68, 0.28); }

.dzk-sec { display: flex; flex-direction: column; gap: 8px; }
.dzk-sec h4 {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: var(--muted);
}
.dzk-note { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.dzk-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.dzk-row { display: flex; gap: 8px; flex-wrap: wrap; }

.dzk-swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dzk-swatch {
  display: flex; flex-direction: column; gap: 4px; align-items: stretch;
  padding: 8px; border: 1px solid var(--border); border-radius: 11px; cursor: pointer;
}
.dzk-swatch:hover { border-color: var(--blue-400); }
.dzk-swatch input[type="color"] {
  width: 100%; height: 38px; padding: 0; border: none; border-radius: 8px;
  background: none; cursor: pointer;
}
.dzk-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.dzk-swatch input[type="color"]::-webkit-color-swatch { border: 1px solid var(--border); border-radius: 8px; }
.dzk-swatch span { font-size: 11px; font-weight: 600; color: var(--text); }
.dzk-swatch small { font-size: 10.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

.dzk-msg { margin: 0; font-size: 11.5px; line-height: 1.5; }
.dzk-msg.is-ok { color: var(--blue-600); }
.dzk-msg.is-warn { color: var(--danger); }

.dzk-preview {
  display: flex; align-items: center; justify-content: center; padding: 10px;
  border: 1px dashed var(--border); border-radius: 11px; background: var(--bg-subtle);
}
.dzk-preview img { max-width: 120px; max-height: 70px; object-fit: contain; }

.dzk-benefit { display: grid; grid-template-columns: 118px 1fr; gap: 8px; }
.dzk-iconsel { text-transform: capitalize; }

.dzk-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 0 4px; margin-top: 4px; border-top: 1px solid var(--border);
}
.dzk-foot .btn { margin-left: auto; }
.dzk-savestate { font-size: 11.5px; color: var(--muted); }
.dzk-savestate.is-saving { color: var(--blue-600); }
.dzk-savestate.is-ok { color: var(--blue-600); }
.dzk-savestate.is-error { color: var(--danger); }

/* Brand kit shown inside the editor's left rail rather than the drawer. */
.dz-tabpane .dzk { gap: 13px; }
.dz-tabpane .dzk-two { grid-template-columns: 1fr; }
.dz-tabpane .dzk-benefit { grid-template-columns: 1fr; }