/* DevCenter Prototype — shared styles
   Throwaway by design. Tailwind CDN handles 95%; this file only adds
   things Tailwind cannot express ergonomically (font face, glass blur,
   department color tokens). */

:root {
  /* Department palette (also exposed via Tailwind classes via inline styles) */
  --dept-infra: 14 165 233;   /* sky-500   */
  --dept-dev:   139 92 246;   /* violet-500 */
  --dept-mgmt:  245 158 11;   /* amber-500 */
  --dept-data:  16 185 129;   /* emerald-500 */
  --dept-sec:   244 63 94;    /* rose-500  */
}

html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }
body { font-feature-settings: 'cv02','cv03','cv04','cv11'; }

/* Subtle glass for bento panels */
.glass {
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  background: rgba(255,255,255,.72);
}

/* Inline-edit hover hint */
[data-editable]:hover {
  outline: 1px dashed rgb(99 102 241 / .55);
  outline-offset: 4px;
  cursor: text;
  border-radius: 6px;
}
[data-editable]:hover::after {
  content: '✎';
  margin-left: .35rem;
  color: rgb(99 102 241);
  font-size: .8em;
}

/* Drag handle visual hint */
.drag-handle {
  cursor: grab;
  color: rgb(148 163 184);
  user-select: none;
}
.drag-handle:active { cursor: grabbing; }

/* Department-tinted cards */
.dept-infra { --dept: var(--dept-infra); }
.dept-dev   { --dept: var(--dept-dev); }
.dept-mgmt  { --dept: var(--dept-mgmt); }
.dept-data  { --dept: var(--dept-data); }
.dept-sec   { --dept: var(--dept-sec); }

.dept-card {
  border-left: 3px solid rgb(var(--dept) / 1);
  background: linear-gradient(135deg, rgb(var(--dept) / .04), transparent 60%);
}
.dept-pill {
  color: rgb(var(--dept));
  background: rgb(var(--dept) / .12);
  border: 1px solid rgb(var(--dept) / .25);
}

/* Status dot */
.status-dot {
  display: inline-block;
  width: .625rem;
  height: .625rem;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgb(var(--c, 16 185 129) / .18);
  background: rgb(var(--c, 16 185 129));
}
.status-dot.red  { --c: 244 63 94; }
.status-dot.amber{ --c: 245 158 11; }

/* Scrollbar polish */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(148 163 184 / .35); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: rgb(148 163 184 / .55); }

/* Prototype watermark stripe in header */
.proto-stripe {
  background-image: repeating-linear-gradient(
    45deg,
    rgb(250 204 21 / .15) 0 6px,
    transparent 6px 12px
  );
}