/* ──────────────────────────────────────────────────────────────────────────
   OpenDrawing — Dashboard: project cards
   Fonts + variables → tokens.css
   ────────────────────────────────────────────────────────────────────────── */

@layer components {

/* ── GRID ───────────────────────────────────────────────────────────────── */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

/* ── PROJECT CARD ───────────────────────────────────────────────────────── */
.project-card {
  border-radius: var(--radius-xl); overflow: hidden;
  position: relative; cursor: pointer;
  background: var(--bg-panel); border: 1px solid rgba(40,48,68,.35);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s;
  display: flex; flex-direction: column;

  &:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 36px rgba(0,0,0,.45), 0 0 0 1px rgba(59,91,219,.35);
    border-color: rgba(59,91,219,.45);
  }

  &:focus-visible {
    outline: 2px solid var(--accent); outline-offset: 2px;
  }

  &:hover .card-thumb img { transform: scale(1.05); filter: brightness(1); }
}

/* ── CARD THUMBNAIL ─────────────────────────────────────────────────────── */
.card-thumb {
  width: 100%; aspect-ratio: 16 / 10;
  background: #f0f1f3; flex-shrink: 0; position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
  padding: 10px; overflow: hidden;

  & img {
    width: 100%; height: 100%;
    object-fit: contain; display: block;
    transition: transform .35s ease;
  }

  &.no-thumb {
    background-color: #f0f1f3;
    background-image:
      linear-gradient(rgba(0,0,0,.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,0,0,.04) 1px, transparent 1px);
    background-size: 20px 20px;
    padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: #b0b8c4;

    & svg { opacity: .35; }
  }
}

/* ── CARD 3-DOT MENU ────────────────────────────────────────────────────── */
.card-menu-wrap {
  position: absolute; top: 8px; right: 8px; z-index: 2;
}

.card-menu-btn {
  width: 26px; height: 26px; border-radius: var(--radius);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.8); cursor: pointer;
  background: rgba(10,15,30,.55); backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.08);
  opacity: 0; transition: opacity .15s, background .1s;

  &:hover { background: rgba(10,15,30,.85); }
}

.project-card:hover .card-menu-btn { opacity: 1; }

/* ── CARD STATUS (in body) ───────────────────────────────────────────────── */
.card-status {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-xs); font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}

.card-status-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; background: var(--text-muted);

  .card-status.active  & { background: var(--success); }
  .card-status.pending & { background: var(--warning); }
  .card-status.flagged & { background: var(--danger);  }
}

.card-menu {
  position: absolute; top: calc(100% + 4px); right: 0;
  min-width: 160px; background: var(--bg-panel);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: 0 8px 28px rgba(0,0,0,.5); z-index: 150;
  display: none; overflow: hidden;

  &.open { display: block; }
}

.card-menu-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; font-size: var(--fs-sm); color: var(--text-secondary);
  cursor: pointer; transition: background .08s;

  &:hover { background: var(--bg-hover); color: var(--text-primary); }
  & svg   { opacity: .6; flex-shrink: 0; }
  &.danger { color: var(--danger); }
  &.danger:hover { background: var(--danger-dim); }
}

.card-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }

/* ── CARD INFO ──────────────────────────────────────────────────────────── */
.card-name-group {
  display: flex; flex-direction: column; gap: 5px;
}

.card-type {
  display: inline-flex; align-items: center; gap: 5px; align-self: flex-start;
  font-size: 10px; font-weight: var(--fw-medium);
  color: var(--type-color, var(--text-muted));
  background: var(--type-bg, var(--bg-base));
  border: 1px solid var(--type-border, var(--border));
  border-radius: 20px; padding: 2px 8px 2px 5px;
}

.type-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--type-color, var(--text-muted));
  flex-shrink: 0;
}

.card-name {
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  color: var(--text-primary); letter-spacing: -.15px; line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: calc(var(--fs-md) * 1.35 * 2);
}

.card-body {
  padding: 12px 14px 14px;
  display: flex; flex-direction: column; gap: 10px; flex: 1;
}

.card-meta     { display: flex; flex-direction: column; gap: 5px; }
.card-meta-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; color: var(--text-muted); min-width: 0;

  & svg { flex-shrink: 0; opacity: .5; }
}

.card-meta-label { flex-shrink: 0; font-weight: var(--fw-medium); color: var(--text-secondary); }
.card-meta-value {
  color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  &.muted { color: var(--text-muted); font-style: italic; }
}


/* Card footer */
.card-footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px 14px; border-top: 1px solid var(--border); margin-top: auto;
}

.card-created {
  font-size: 11px; color: var(--text-muted);
  display: flex; align-items: center; gap: 4px;

  & svg { opacity: .45; }
}

.btn-view {
  display: inline-flex; align-items: center; gap: 5px;
  background: transparent; color: var(--accent);
  border: 1px solid var(--border-light); border-radius: var(--radius);
  padding: 6px 14px; font-size: 12px; font-weight: var(--fw-semibold);
  cursor: pointer; transition: all .12s; text-decoration: none;
  white-space: nowrap; font-family: var(--sans);

  &:hover { background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: 0 2px 10px rgba(59,91,219,.3); }
  & svg   { flex-shrink: 0; }
}

/* ── LIST VIEW ──────────────────────────────────────────────────────────── */

/* Single source of truth — header and every row share this grid.
   Columns: project | type | status | customer | due | owner              */
:root {
  --lv-cols: minmax(220px, 1.5fr) 130px 110px 170px 140px 140px;
}

/* ── Grid container ─ */
.projects-grid.list-view {
  grid-template-columns: 1fr;
  gap: 3px;
}

/* ── Each row is a grid ─ */
.projects-grid.list-view .project-card {
  display: grid;
  grid-template-columns: var(--lv-cols);
  align-items: center;
  height: 52px;
  cursor: pointer;
  border-radius: var(--radius);

  &:hover { background: var(--bg-hover); }
  &:hover .card-menu-btn { opacity: 1; }
}

/* ── Thumbnail — hidden in list view ─ */
.projects-grid.list-view .card-thumb {
  display: none;
}

/* ── card-body dissolves into the grid ─ */
.projects-grid.list-view .card-body {
  display: contents;
}

/* Hide all grid-view children; lv-col elements override below */
.projects-grid.list-view .card-body > *:not(.lv-col) { display: none !important; }
.projects-grid.list-view .card-name-group { display: none !important; }

/* Kebab: hover only */
.projects-grid.list-view .card-menu-btn { opacity: 0; }

/* ── LIST-VIEW COLUMNS (hidden in grid view) ─────────────────────────── */
.lv-col { display: none; }

.projects-grid.list-view .lv-col {
  display: flex; align-items: center;
  overflow: hidden; padding: 0 12px;
  font-size: 12px; color: var(--text-secondary);
  white-space: nowrap;
}

.lv-col.lv-title {
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  color: var(--text-primary); text-overflow: ellipsis;
}

.lv-col.lv-type {
  /* type badge rendered by child .card-type — same pill as grid view */
}

.lv-col.lv-status {
  font-size: 11px; font-weight: var(--fw-medium); gap: 5px;
  color: var(--text-secondary);
  &.inactive { opacity: .7; }
}

.lv-dot {
  width: 5px; height: 5px; border-radius: 50%;
  flex-shrink: 0; background: var(--text-muted);

  .lv-col.lv-status.active  & { background: var(--success); }
  .lv-col.lv-status.pending & { background: var(--warning); }
  .lv-col.lv-status.flagged & { background: var(--danger);  }
}

.lv-col.lv-due { font-size: 12px; }

/* ── LIST HEADER ─────────────────────────────────────────────────────────── */
.list-header { display: none; }

.list-header.visible {
  display: grid;
  grid-template-columns: var(--lv-cols);
  align-items: center;
  margin-bottom: 4px; padding-bottom: 7px;
  border-bottom: 1px solid var(--border);
}


.lh-col {
  padding: 0 12px;
  font-size: 10px; font-weight: 600;
  color: var(--text-muted); letter-spacing: 0.4px;
  text-transform: uppercase; white-space: nowrap;
}

/* ── LIST VIEW RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  :root { --lv-cols: minmax(200px, 1.5fr) 130px 110px 170px 140px; }
  .lv-col.lv-owner, .lh-owner { display: none; }
}

@media (max-width: 800px) {
  :root { --lv-cols: minmax(180px, 1.5fr) 120px 110px 140px; }
  .lv-col.lv-customer, .lh-customer { display: none; }
}

@media (max-width: 600px) {
  :root { --lv-cols: minmax(160px, 1fr) 120px 110px; }
  .lv-col.lv-due, .lh-due { display: none; }
}

/* ── SKELETON LOADER ─────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

.card-skeleton {
  border-radius: var(--radius-xl); border: 1px solid var(--border);
  aspect-ratio: 16 / 10; background: var(--bg-surface);
  background-image: linear-gradient(
    90deg,
    var(--bg-surface) 0%,
    rgba(59,91,219,.06) 40%,
    rgba(59,91,219,.10) 50%,
    rgba(59,91,219,.06) 60%,
    var(--bg-surface) 100%
  );
  background-size: 600px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  pointer-events: none;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); }
}

} /* @layer components */