:root {
  color-scheme: light;
  --bg: #f1f4f8;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --ink: #0f1923;
  --ink-soft: #2d3a47;
  --muted: #6b7a8d;
  --line: #e4eaf0;
  --line-strong: #cdd6e0;
  --nav: #0d1520;
  --nav-mid: #131f2e;
  --nav-soft: #1a2b3c;
  --green: #1a7a5a;
  --green-dark: #135e44;
  --green-light: #eaf6f1;
  --blue: #2563b0;
  --blue-light: #eef4ff;
  --amber: #c07318;
  --amber-light: #fff7eb;
  --red: #b83b3b;
  --red-light: #fff2f2;
  --shadow-xs: 0 1px 3px rgba(10, 20, 35, 0.06), 0 1px 2px rgba(10, 20, 35, 0.04);
  --shadow: 0 4px 12px rgba(10, 20, 35, 0.08), 0 1px 4px rgba(10, 20, 35, 0.05);
  --shadow-md: 0 8px 24px rgba(10, 20, 35, 0.10), 0 2px 6px rgba(10, 20, 35, 0.06);
  --shadow-soft: var(--shadow-xs);
  --radius: 10px;
  --radius-sm: 6px;
  --radius-lg: 14px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--ink);
}

.is-hidden {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(340px, 480px);
  gap: 32px;
  align-items: center;
  padding: clamp(18px, 5vw, 58px);
  background:
    radial-gradient(circle at 24% 26%, rgba(228, 154, 56, 0.34), transparent 24%),
    radial-gradient(circle at 70% 74%, rgba(40, 101, 178, 0.26), transparent 28%),
    linear-gradient(135deg, #0f1b25, #153d32 58%, #0f1b25);
}

.login-art {
  position: relative;
  min-height: 540px;
  border-radius: var(--radius);
  overflow: hidden;
  background: #101923;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.28);
}

.login-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}

.login-art::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: 0;
  background:
    radial-gradient(circle at center, rgba(16, 25, 35, 0.12), rgba(16, 25, 35, 0.72)),
    linear-gradient(135deg, rgba(31, 122, 92, 0.36), rgba(40, 101, 178, 0.18));
  z-index: 1;
}

.login-art::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
  transform: translate(-50%, -50%);
  animation: radar 3.8s ease-in-out infinite;
  z-index: 2;
}

.era-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: min(44vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.30);
  backdrop-filter: blur(12px);
  color: #fff;
  font-size: clamp(54px, 9vw, 92px);
  font-weight: 950;
  letter-spacing: 0;
  text-shadow: 0 16px 38px rgba(0, 0, 0, 0.38);
  box-shadow:
    0 28px 80px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.login-orbit {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.20);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.orbit-one {
  width: 390px;
  height: 390px;
  animation: orbit-spin 16s linear infinite;
}

.orbit-two {
  width: 470px;
  height: 470px;
  border-style: dashed;
  animation: orbit-spin 24s linear infinite reverse;
}

.login-card {
  display: grid;
  gap: 16px;
  padding: 28px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.72);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.22);
}

.login-card label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.login-btn {
  min-height: 48px;
}

@keyframes radar {
  0% {
    transform: translate(-50%, -50%) scale(0.88);
    opacity: 0.85;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.18);
    opacity: 0;
  }
}

@keyframes orbit-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.app-shell {
  min-height: 100vh;
  display: block;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px 14px;
  background: var(--nav);
  color: #f0f4f8;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  transition: padding 200ms ease, width 200ms ease;
  width: 260px;
  overflow: hidden;
  z-index: 40;
  box-shadow: 2px 0 12px rgba(0,0,0,0.18);
}

.sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: #4a6278;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: 0.04em;
}

.sidebar-toggle:hover {
  background: rgba(255,255,255,0.05);
  color: #8aa4b8;
}

.sidebar-toggle .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.sidebar-toggle span {
  transition: max-width 200ms ease, opacity 200ms ease;
  max-width: 200px;
  opacity: 1;
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.main {
  margin-left: 260px;
  transition: margin-left 200ms ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 8px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.brand-mark {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #f0b456, #e07820);
  color: #1a0e00;
  box-shadow: 0 4px 12px rgba(201, 121, 29, 0.35);
}

.brand-mark span {
  font-size: 12px;
  font-weight: 900;
  letter-spacing: -0.5px;
}

.brand strong,
.brand span {
  display: block;
}

.brand strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.brand > div:last-child span {
  color: #6b8499;
  font-size: 11px;
  margin-top: 2px;
  font-weight: 500;
}

.nav-list {
  display: grid;
  gap: 8px;
  padding-top: 6px;
  flex: 1;
  align-content: start;
}

.nav-item {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: transparent;
  color: #7a95ab;
  text-align: left;
  font-size: 13.5px;
  font-weight: 500;
  transition: background 150ms ease, color 150ms ease;
}

.nav-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 150ms ease, max-width 200ms ease;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #d0dde8;
}

.nav-item.active {
  background: rgba(255, 255, 255, 0.10);
  color: #ffffff;
  font-weight: 600;
  position: relative;
}

.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #e49a38;
}

.icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.btn .icon,
.pill .icon,
.stat-icon .icon {
  width: 18px;
  height: 18px;
}

.nav-item:hover .icon,
.nav-item.active .icon {
  animation: icon-bob 820ms ease-in-out infinite alternate;
}

@keyframes icon-bob {
  from {
    transform: translateY(0) rotate(0deg);
  }
  to {
    transform: translateY(-2px) rotate(-3deg);
  }
}

.nav-item .icon {
  color: #55738a;
  flex-shrink: 0;
}

.nav-item:hover .icon {
  color: #a0bbc9;
}

.nav-item.active .icon {
  color: #f0b456;
}

.sidebar-footer {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #4a6070;
  font-size: 11.5px;
  font-weight: 500;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 14px;
  margin-top: 4px;
}

.status-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #51d38f;
  box-shadow: 0 0 0 4px rgba(81, 211, 143, 0.16);
}

/* ── TOPBAR ──────────────────────────────────────────── */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 32px;
  height: 58px;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(10px);
  margin: 0 -32px 28px;
  box-shadow: 0 1px 0 var(--line), 0 4px 12px rgba(10,20,35,0.04);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.topbar-brand {
  display: flex;
  align-items: center;
  gap: 9px;
}

.topbar-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #f0b456, #e07820);
  color: #1a0e00;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -0.3px;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Buton Scanare ── */
/* Butoane acțiuni topbar — Transfer + Scanează */
.topbar-action-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 13px;
  height: 34px;
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 11.5px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
  white-space: nowrap;
}
.topbar-action-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.topbar-action-btn:hover { transform: translateY(-1px); }

.topbar-transfer-btn {
  background: linear-gradient(135deg, #7c3aed, #1d4ed8);
  box-shadow: 0 2px 8px rgba(124,58,237,.3);
}
.topbar-transfer-btn:hover { box-shadow: 0 4px 14px rgba(124,58,237,.4); }

.scan-doc-btn {
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
  box-shadow: 0 2px 8px rgba(15,118,110,.3);
}
.scan-doc-btn:hover { box-shadow: 0 4px 14px rgba(15,118,110,.4); }

/* ═══ Modal Scanare ═══════════════════════════════════════════════════════ */
.scan-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scan-modal.is-hidden { display: none; }
.scan-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,20,35,.55);
  backdrop-filter: blur(3px);
}
.scan-box {
  position: relative;
  z-index: 1;
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: #f8fafc;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.3);
  display: flex;
  flex-direction: column;
}
/* Header */
.scan-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
  border-radius: 18px 18px 0 0;
  color: #fff;
  flex-shrink: 0;
}
.scan-head-left { display: flex; align-items: center; gap: 12px; }
.scan-head-icon { font-size: 28px; line-height: 1; }
.scan-head-left strong { display: block; font-size: 16px; font-weight: 900; }
.scan-head-left span { font-size: 11px; opacity: .8; margin-top: 2px; display: block; }
.scan-close {
  width: 30px; height: 30px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: #fff; font-weight: 900; font-size: 13px;
  cursor: pointer; flex-shrink: 0;
}
.scan-close:hover { background: rgba(255,255,255,.22); }
/* Drop zone */
.scan-upload-zone {
  margin: 16px 16px 0;
  border: 2.5px dashed #cbd5e1;
  border-radius: 12px;
  background: #fff;
  transition: border-color .15s, background .15s;
  cursor: pointer;
}
.scan-upload-zone.drag-over { border-color: #0ea5e9; background: #f0f9ff; }
.scan-file-input { display: none; }
.scan-drop-inner {
  padding: 28px 20px;
  text-align: center;
}
.scan-drop-icon { font-size: 36px; margin-bottom: 8px; }
.scan-drop-title { font-size: 13px; font-weight: 700; color: #1e293b; margin: 0 0 4px; }
.scan-drop-link { color: #0ea5e9; text-decoration: underline; cursor: pointer; }
.scan-drop-sub { font-size: 11px; color: #94a3b8; margin: 0; }
/* Coada */
.scan-queue { margin: 12px 16px 0; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; overflow: hidden; }
.scan-queue-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.scan-queue-title { font-size: 12px; font-weight: 800; color: #334155; }
.scan-progress-txt { font-size: 11px; font-weight: 700; color: #0f766e; }
.scan-queue-item {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-size: 11.5px;
}
.scan-queue-item:last-child { border-bottom: none; }
.scan-q-icon { font-size: 18px; flex-shrink: 0; }
.scan-q-name { flex: 1; font-weight: 600; color: #1e293b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scan-q-size { color: #94a3b8; font-size: 10px; flex-shrink: 0; }
.scan-status { font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 20px; flex-shrink: 0; }
.scan-status.pending    { background: #f1f5f9; color: #64748b; }
.scan-status.processing { background: #fef3c7; color: #92400e; }
.scan-status.done       { background: #dcfce7; color: #166534; }
.scan-status.error      { background: #fee2e2; color: #991b1b; }
@keyframes scan-spin { to { transform: rotate(360deg); } }
.scan-spin { display: inline-block; animation: scan-spin .8s linear infinite; }
.scan-q-del {
  background: none; border: none; color: #94a3b8;
  cursor: pointer; font-size: 12px; padding: 2px 4px;
  border-radius: 4px; flex-shrink: 0;
}
.scan-q-del:hover { color: #ef4444; }
/* Rezultate */
.scan-results-wrap { margin: 12px 16px 16px; }
.scan-results-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.scan-results-title { font-size: 13px; font-weight: 800; color: #166534; }
.scan-export-btn {
  padding: 6px 14px;
  border: 1.5px solid #16a34a; border-radius: 8px;
  background: #f0fdf4; color: #166534;
  font-size: 11px; font-weight: 800; cursor: pointer;
  transition: background .12s;
}
.scan-export-btn:hover { background: #dcfce7; }
.scan-result-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  margin-bottom: 10px;
  overflow: hidden;
}
.scan-result-head {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}
/* ── Lista rezultate scanare ── */
.scan-results-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  padding: 4px 2px;
}
.scard {
  background:#fff; border:1.5px solid #e2e8f0; border-radius:12px;
  cursor:pointer; transition:box-shadow .14s, border-color .14s;
  display:flex; align-items:flex-start; gap:10px; padding:10px 10px 8px;
  position:relative;
}
.scard.scard-in-stoc { border-color:#ef4444; border-width:2px; background:#fef2f2; }
.scard.scard-not-stoc { border-color:#f97316; border-width:2px; background:#fff7ed; }
.scard:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
.scard.scard-in-stoc:hover { border-color:#dc2626; box-shadow:0 4px 16px rgba(239,68,68,.2); }
.scard.scard-not-stoc:hover { border-color:#ea580c; box-shadow:0 4px 16px rgba(249,115,22,.2); }
.scard-img-col { flex-shrink:0; }
.scard-thumb {
  width:48px; height:48px; object-fit:cover; border-radius:8px;
  border:1.5px solid #e2e8f0; display:block;
}
.scard-thumb-placeholder {
  width:48px; height:48px; display:flex; align-items:center; justify-content:center;
  font-size:20px; border-radius:8px; border:1.5px solid #e2e8f0;
}
.scard-info-col { flex:1; min-width:0; }
.scard-supplier { font-size:12px; font-weight:800; color:#1e293b; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scard-sub { font-size:10px; color:#94a3b8; font-weight:600; margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.scard-bottom { display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin-top:4px; }
.scard-total { font-size:12px; font-weight:900; color:#0f766e; }
.scard-prods { font-size:10px; color:#94a3b8; }
.scard-badge-stoc { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:#dcfce7; color:#166534; }
.scard-meta { display:flex; align-items:center; gap:8px; margin-top:5px; flex-wrap:wrap; }
.scard-by, .scard-date { font-size:10px; color:#94a3b8; }
.scard-del-btn {
  flex-shrink:0; width:24px; height:24px;
  border:1.5px solid #fecaca; border-radius:7px;
  background:#fff5f5; color:#ef4444;
  font-size:11px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; transition:opacity .12s;
}
.scard:hover .scard-del-btn { opacity:1; }
/* ── Popup detalii document ── */
#scan-detail-popup { position:fixed; inset:0; z-index:6000; display:flex; align-items:center; justify-content:center; padding:16px; }
.sdp-backdrop { position:absolute; inset:0; background:rgba(10,20,35,.75); backdrop-filter:blur(6px); }
.sdp-box { position:relative; z-index:1; width:min(600px,calc(100vw - 32px)); max-height:calc(100vh - 40px); overflow-y:auto; background:#fff; border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.4); }
.sdp-close { position:absolute; top:10px; right:10px; z-index:5; width:30px; height:30px; border:none; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; font-size:14px; font-weight:900; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sdp-close:hover { background:rgba(0,0,0,.75); }

/* Header compact cu thumbnail */
.sdp-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 46px 14px 16px;
  border-bottom: 1px solid #f1f5f9;
  gap: 10px;
}
.sdp-header-info { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sdp-header-icon { font-size: 22px; flex-shrink: 0; }
.sdp-header-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sdp-header-title { font-size: 14px; font-weight: 800; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sdp-header-sub { font-size: 11px; color: #64748b; }
.sdp-header-thumb {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid #e2e8f0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, border-color .15s, opacity .15s;
}
.sdp-header-thumb:hover { transform: scale(1.08); border-color: #3b82f6; }

/* Imagine colapsabilă */
.sdp-img-section { overflow: hidden; transition: max-height .3s ease; }
.sdp-img-collapsed { max-height: 0 !important; }
.sdp-img-section:not(.sdp-img-collapsed) { max-height: 600px; }

/* Sectiunea imaginii */
.sdp-img-section { background:#0f172a; border-radius:18px 18px 0 0; overflow:hidden; }
.sdp-img-toolbar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:rgba(255,255,255,.06); }
.sdp-doc-title { font-size:12px; font-weight:800; color:#e2e8f0; }
.sdp-zoom-btn { width:26px; height:26px; border:1px solid rgba(255,255,255,.2); border-radius:6px; background:rgba(255,255,255,.08); color:#fff; font-size:14px; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.sdp-zoom-btn:hover { background:rgba(255,255,255,.2); }
.sdp-zoom-val { font-size:11px; color:#94a3b8; font-weight:700; min-width:34px; text-align:center; }
.sdp-img-viewport { height:380px; overflow:hidden; display:flex; align-items:center; justify-content:center; position:relative; cursor:grab; }
.sdp-main-img { max-width:100%; max-height:100%; object-fit:contain; transform-origin:center; user-select:none; }
.sdp-no-img-banner { background:#1e293b; color:#94a3b8; padding:40px; text-align:center; font-size:14px; border-radius:18px 18px 0 0; }

/* Sectiunea detalii */
.sdp-details-section { padding:0; }
.sdp-meta-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#e2e8f0; }
.sdp-meta-item { background:#fff; padding:10px 14px; display:flex; flex-direction:column; gap:2px; }
.sdp-meta-label { font-size:9px; font-weight:900; text-transform:uppercase; letter-spacing:.4px; color:#94a3b8; }
.sdp-meta-val { font-size:12px; font-weight:700; color:#1e293b; }
.sdp-meta-val.green { color:#166534; } .sdp-meta-val.orange { color:#b45309; }
.sdp-total .sdp-meta-val { font-size:15px; font-weight:900; color:#0f766e; }
.sdp-section-title { padding:12px 16px 6px; font-size:12px; font-weight:900; color:#334155; border-top:1px solid #f1f5f9; }
.sdp-table-wrap { overflow-x:auto; }
.sdp-table { width:100%; border-collapse:collapse; font-size:12px; }
.sdp-table th { background:#f8fafc; color:#64748b; padding:7px 12px; text-align:left; font-weight:800; font-size:10px; text-transform:uppercase; border-bottom:1px solid #e2e8f0; }
.sdp-table td { padding:8px 12px; border-bottom:1px solid #f8fafc; color:#1e293b; }
.sdp-table td.num { text-align:right; font-variant-numeric:tabular-nums; }
.sdp-table td.bold { font-weight:800; }
.sdp-table tr:last-child td { border-bottom:none; }
.sdp-table tr:hover td { background:#f8fafc; }
.sdp-no-prod { padding:14px 16px; font-size:12px; color:#94a3b8; }
.sdp-obs { margin:8px 16px; padding:8px 12px; background:#fefce8; border-left:3px solid #facc15; border-radius:0 8px 8px 0; font-size:11px; color:#713f12; }
.sdp-actions { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 16px; border-top:1px solid #f1f5f9; }
.sdp-btn-stoc { padding:9px 18px; border:none; border-radius:10px; background:linear-gradient(135deg,#0f766e,#1d4ed8); color:#fff; font-size:12px; font-weight:800; cursor:pointer; }
.sdp-btn-close2 { padding:9px 16px; border:1.5px solid #e2e8f0; border-radius:10px; background:#f8fafc; color:#475569; font-size:12px; font-weight:700; cursor:pointer; }
.sdp-in-stoc { font-size:12px; color:#166534; font-weight:700; }
.scan-cat-badge { display:inline-block; padding:2px 7px; border-radius:20px; background:#f1f5f9; color:#475569; font-size:10px; font-weight:700; text-transform:capitalize; }
/* ── Eroare duplicat ── */
.scan-dup-error {
  margin: 10px 16px 0;
  padding: 10px 14px;
  background: #fff7ed;
  border: 1.5px solid #fb923c;
  border-radius: 10px;
  font-size: 11.5px;
  color: #7c2d12;
  font-weight: 600;
  animation: cam-err-shake .25s ease;
}
.scan-dup-error.is-hidden { display: none; }
.scan-status.dup { background: #fef3c7; color: #78350f; }
.scan-progress-txt { font-size: 11px; color: #64748b; font-weight: 700; }
.scan-err-msg { font-size: 10px; color: #991b1b; font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: help; }
/* ── Buton Adaugă în stoc ── */
.scan-add-stoc-btn {
  margin-left: auto;
  padding: 5px 12px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity .12s, transform .12s;
  flex-shrink: 0;
}
.scan-add-stoc-btn:hover { opacity: .88; transform: translateY(-1px); }
.scan-add-stoc-btn.added { background: #dcfce7; color: #166534; cursor: default; }
/* ── Badge categorie stoc ── */
.scan-cat-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  background: #f1f5f9;
  color: #475569;
  font-size: 10px;
  font-weight: 700;
  text-transform: capitalize;
}

/* ── 3 butoane upload ── */
.scan-actions-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin: 14px 16px 0;
}
.scan-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 10px;
  border-radius: 14px;
  border: 2px dashed #cbd5e1;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, transform .12s;
  text-align: center;
}
.scan-action-btn:hover { border-color: #0ea5e9; background: #f0f9ff; transform: translateY(-2px); }
.scan-action-camera { border-color: #a78bfa; }
.scan-action-camera:hover { border-color: #7c3aed; background: #faf5ff; }
.scan-action-file   { border-color: #6ee7b7; }
.scan-action-file:hover { border-color: #059669; background: #f0fdf4; }
.scan-action-icon  { font-size: 28px; line-height: 1; }
.scan-action-label { font-size: 12px; font-weight: 800; color: #1e293b; }
.scan-action-sub   { font-size: 10px; color: #94a3b8; font-weight: 600; }

/* ── Panel cameră live ── */
.scan-camera-panel {
  margin: 12px 16px 0;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
}
.scan-camera-panel.is-hidden { display: none; }
.scan-camera-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}
.scan-cam-flip-btn, .scan-cam-close-btn {
  padding: 4px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 7px;
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.scan-cam-flip-btn:hover, .scan-cam-close-btn:hover { background: rgba(255,255,255,.2); }
.scan-camera-view {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  overflow: hidden;
}
#scan-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.scan-cam-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  transition: background .15s;
}
.scan-cam-overlay.flash { background: rgba(255,255,255,.6); }
.scan-cam-frame {
  width: 75%;
  height: 80%;
  border: 2.5px solid rgba(255,255,255,.7);
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.35);
}
/* colțuri vizibile */
.scan-cam-frame::before, .scan-cam-frame::after {
  content: "";
  position: absolute;
  width: 22px; height: 22px;
  border-color: #0ea5e9;
  border-style: solid;
}
.scan-cam-frame::before { top: 10%; left: 12.5%; border-width: 3px 0 0 3px; border-radius: 4px 0 0 0; }
.scan-cam-frame::after  { bottom: 10%; right: 12.5%; border-width: 0 3px 3px 0; border-radius: 0 0 4px 0; }
.scan-camera-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 0 12px;
  background: #0f172a;
}
.scan-capture-btn {
  position: relative;
  width: 62px; height: 62px;
  border-radius: 50%;
  border: 4px solid rgba(255,255,255,.5);
  background: #fff;
  cursor: pointer;
  font-size: 24px;
  display: flex; align-items: center; justify-content: center;
  transition: transform .1s, background .1s;
}
.scan-capture-btn:hover  { background: #f0f9ff; transform: scale(1.08); }
.scan-capture-btn:active { transform: scale(.94); }
.scan-capture-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.3);
  pointer-events: none;
}
.scan-cam-hint { font-size: 10.5px; color: rgba(255,255,255,.55); font-weight: 600; }

/* Drop zone hover */
.scan-action-drop.drag-over { border-color: #0ea5e9; background: #f0f9ff; }

.topbar-quick-stats {
  display: flex;
  align-items: center;
  gap: 6px;
}

.topbar-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px 5px 8px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  transition: filter .12s;
}
.topbar-stat:hover { filter: brightness(.95); }
.topbar-stat .icon { width: 13px; height: 13px; flex-shrink: 0; }
.ts-val { font-size: 13px; font-weight: 800; }
.ts-lbl { font-size: 11px; font-weight: 600; opacity: .75; }

.topbar-stat.ok {
  background: var(--green-light);
  color: var(--green-dark);
  border-color: rgba(26, 122, 90, 0.15);
}

.topbar-stat.danger {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(184, 59, 59, 0.15);
}

.topbar-stat.info {
  background: var(--blue-light);
  color: var(--blue);
  border-color: rgba(37, 99, 176, 0.15);
}

.topbar-stat.warning {
  background: var(--amber-light);
  color: var(--amber);
  border-color: rgba(192, 115, 24, 0.15);
}

.topbar-stat.clients {
  background: #f0eeff;
  color: #5b3fc4;
  border-color: rgba(91, 63, 196, 0.15);
}

/* ── NOTIFICATION BELL ───────────────────────────────── */
.notif-wrap {
  position: relative;
}

.notif-btn {
  position: relative;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--muted);
  transition: background 150ms, color 150ms, border-color 150ms;
  box-shadow: var(--shadow-xs);
}

.notif-btn:hover,
.notif-btn[aria-expanded="true"] {
  background: var(--surface-soft);
  color: var(--ink);
  border-color: var(--line-strong);
}

.notif-btn .icon {
  width: 17px;
  height: 17px;
}

.notif-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--surface);
  pointer-events: none;
  line-height: 1;
}

.notif-badge.urgent {
  background: var(--red);
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 59, 59, 0.4); }
  50% { box-shadow: 0 0 0 5px rgba(184, 59, 59, 0); }
}

/* ── NOTIFICATION PANEL ──────────────────────────────── */
.notif-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 360px;
  max-height: 540px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(10, 20, 35, 0.14), 0 4px 12px rgba(10, 20, 35, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
  animation: notif-drop 160ms ease;
}

@keyframes notif-drop {
  from {
    opacity: 0;
    transform: translateY(-8px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.notif-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.notif-panel-head strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

.notif-panel-head span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 2px;
}

.notif-close {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted);
  flex-shrink: 0;
  transition: background 150ms, color 150ms;
}

.notif-close:hover {
  background: var(--bg);
  color: var(--ink);
}

.notif-close .icon {
  width: 14px;
  height: 14px;
}

.notif-list {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.notif-group-label {
  padding: 8px 16px 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(8px);
}

.notif-group-label.danger {
  color: var(--red);
  background: rgba(255, 242, 242, 0.94);
  border-bottom: 1px solid rgba(184, 59, 59, 0.10);
}

.notif-group-label.warning {
  color: var(--amber);
  background: rgba(255, 247, 235, 0.94);
  border-bottom: 1px solid rgba(192, 115, 24, 0.10);
}

.notif-group-label.info {
  color: var(--blue);
  background: rgba(238, 244, 255, 0.94);
  border-bottom: 1px solid rgba(37, 99, 176, 0.10);
}

.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 10px 14px 10px 12px;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  text-align: left;
  cursor: pointer;
  transition: background 120ms;
  position: relative;
}

.notif-item:last-child {
  border-bottom: none;
}

.notif-item:hover {
  background: var(--surface-soft);
}

.notif-item-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.notif-item-dot.red { background: var(--red); }
.notif-item-dot.amber { background: var(--amber); }
.notif-item-dot.blue { background: var(--blue); }

.notif-item-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.notif-item.danger .notif-item-icon {
  background: var(--red-light);
  color: var(--red);
}

.notif-item.warning .notif-item-icon {
  background: var(--amber-light);
  color: var(--amber);
}

.notif-item.info .notif-item-icon {
  background: var(--blue-light);
  color: var(--blue);
}

.notif-item-icon .icon {
  width: 15px;
  height: 15px;
}

.notif-item-body {
  flex: 1;
  min-width: 0;
}

.notif-item-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.notif-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
}

.notif-item.danger .notif-cat {
  background: var(--red-light);
  color: var(--red);
}

.notif-item.warning .notif-cat {
  background: var(--amber-light);
  color: var(--amber);
}

.notif-item.info .notif-cat {
  background: var(--blue-light);
  color: var(--blue);
}

.notif-item-body strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item-body p {
  font-size: 11.5px;
  color: var(--ink-soft);
  margin: 2px 0 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-item-body em {
  font-style: normal;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.notif-arrow {
  width: 14px;
  height: 14px;
  color: var(--muted);
  flex-shrink: 0;
  margin-top: 6px;
  opacity: 0;
  transition: opacity 120ms;
}

.notif-item:hover .notif-arrow {
  opacity: 1;
}

.notif-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 36px 24px;
  text-align: center;
  color: var(--green);
}

.notif-empty-state .icon {
  width: 36px;
  height: 36px;
  background: var(--green-light);
  border-radius: 50%;
  padding: 8px;
}

.notif-empty-state strong {
  font-size: 14px;
  color: var(--ink);
}

.notif-empty-state p {
  font-size: 12.5px;
  color: var(--muted);
  margin: 0;
}

.notif-panel-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--surface-soft);
}

.notif-panel-footer .btn {
  width: 100%;
  justify-content: center;
  font-size: 12.5px;
}

/* ── TOPBAR STAT BUTTONS ─────────────────────────────── */
.topbar-stat {
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 140ms, border-color 140ms, box-shadow 140ms;
}

.topbar-stat:hover {
  filter: brightness(0.94);
  box-shadow: var(--shadow-xs);
}

.topbar-stat.active {
  box-shadow: 0 0 0 2px currentColor;
  filter: brightness(0.92);
}

/* ── STAT POPUP ──────────────────────────────────────── */
.stat-popup {
  position: fixed;
  z-index: 200;
  width: 310px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 48px rgba(10,20,35,0.14), 0 4px 12px rgba(10,20,35,0.08);
  overflow: hidden;
  animation: notif-drop 150ms ease;
}

.stat-popup-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.stat-popup-head .sp-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.stat-popup-head .sp-icon.ok { background: var(--green-light); color: var(--green); }
.stat-popup-head .sp-icon.danger { background: var(--red-light); color: var(--red); }
.stat-popup-head .sp-icon.info { background: var(--blue-light); color: var(--blue); }
.stat-popup-head .sp-icon.clients { background: #f0eeff; color: #5b3fc4; }
.stat-popup-head .sp-icon .icon { width: 16px; height: 16px; }

.stat-popup-head strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.stat-popup-head span {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 1px;
}

.stat-popup-body {
  max-height: 280px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sp-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}

.sp-row:last-child {
  border-bottom: none;
}

.sp-row.ok { border-left: 3px solid var(--green); }
.sp-row.off { border-left: 3px solid var(--red); opacity: 0.75; }
.sp-row.danger { border-left: 3px solid var(--red); }
.sp-row.info { border-left: 3px solid var(--blue); }
.sp-row.warn { border-left: 3px solid var(--amber); }

.sp-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sp-row.off .sp-avatar {
  background: var(--muted);
}

.sp-avatar.clients {
  background: #5b3fc4;
  font-size: 9px;
  letter-spacing: 0.02em;
}

.sp-icon-sm {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.sp-icon-sm.danger { background: var(--red-light); color: var(--red); }
.sp-icon-sm .icon { width: 13px; height: 13px; }

.sp-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  min-width: 36px;
  flex-shrink: 0;
}

.sp-info {
  flex: 1;
  min-width: 0;
}

.sp-info strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-info span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-info em {
  display: block;
  font-style: normal;
  font-size: 10.5px;
  color: var(--red);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sp-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}

.sp-meta em.ok { color: var(--green); font-style: normal; font-size: 10.5px; font-weight: 700; }
.sp-meta em.off { color: var(--red); font-style: normal; font-size: 10.5px; font-weight: 700; }
.sp-meta small { color: var(--muted); font-size: 10px; }

.sp-pill {
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
  white-space: nowrap;
}

.sp-pill.ok { background: var(--green-light); color: var(--green-dark); }
.sp-pill.danger { background: var(--red-light); color: var(--red); }
.sp-pill.info { background: var(--blue-light); color: var(--blue); }
.sp-pill.warn { background: var(--amber-light); color: var(--amber); }

.sp-empty {
  padding: 20px 16px;
  font-size: 12.5px;
  color: var(--muted);
  text-align: center;
}

.stat-popup-footer {
  padding: 9px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.stat-popup-footer .btn {
  width: 100%;
  justify-content: center;
  font-size: 12px;
}

/* ── MAIN ─────────────────────────────────────────────── */
.main {
  min-width: 0;
  padding: 0 32px 40px;
}

.floating-controls {
  position: fixed;
  top: 16px;
  right: 20px;
  z-index: 50;
  pointer-events: none;
}

.floating-controls > * {
  pointer-events: auto;
}

.menu-trigger {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
  box-shadow: var(--shadow-soft);
}

.menu-trigger .icon {
  width: 20px;
  height: 20px;
}

.app-shell.menu-collapsed .sidebar {
  width: 68px;
  padding-inline: 10px;
}

.app-shell.menu-collapsed .main {
  margin-left: 68px;
}

.app-shell.menu-collapsed .nav-item {
  justify-content: center;
  padding-inline: 10px;
}

.app-shell.menu-collapsed .nav-item .icon {
  margin: 0;
}

.app-shell.menu-collapsed .nav-item span {
  max-width: 0;
  opacity: 0;
}

.app-shell.menu-collapsed .sidebar-toggle span {
  max-width: 0;
  opacity: 0;
}

.app-shell.menu-collapsed .sidebar-footer {
  display: none;
}

.eyebrow {
  margin: 0 0 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 600;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  margin-bottom: 6px;
  font-size: 34px;
  line-height: 1.08;
}

h2 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 14px;
  letter-spacing: -0.2px;
}

h3 {
  font-size: 14.5px;
  font-weight: 600;
  margin-bottom: 6px;
}

.page-subtitle {
  margin: 0;
  color: var(--muted);
  max-width: 620px;
}

.hero-panel,
.employee-hero {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin-bottom: 16px;
  padding: 24px;
  border-radius: var(--radius);
  color: #fff;
  background:
    linear-gradient(135deg, rgba(228, 154, 56, 0.30), transparent 46%),
    linear-gradient(120deg, #143429, #132941 68%, #101923);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}

.hero-panel::after,
.employee-hero::after {
  content: "";
  position: absolute;
  right: -54px;
  bottom: -80px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  border: 34px solid rgba(255, 255, 255, 0.08);
}

.hero-panel > *,
.employee-hero > * {
  position: relative;
  z-index: 1;
}

.hero-panel h2,
.employee-hero h2 {
  margin-bottom: 8px;
  font-size: 28px;
}

.hero-panel p,
.employee-hero p {
  margin-bottom: 0;
  max-width: 720px;
  color: #d4e1e8;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.topbar-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.account-menu {
  position: relative;
}

.sidebar-account {
  position: relative;
}

.account-trigger {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.05);
  box-shadow: none;
  transition: background 150ms ease;
}

.account-trigger:hover {
  background: rgba(255,255,255,0.10);
}

.account-trigger span {
  width: 26px;
  height: 26px;
  font-size: 11px;
}

.sidebar-account .account-dropdown {
  position: absolute;
  left: calc(100% + 12px);
  bottom: 0;
  top: auto;
  right: auto;
}

.account-trigger span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
  font-size: 12px;
  font-weight: 900;
}

.account-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: 260px;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow);
  animation: dropdown-enter 160ms ease both;
}

@keyframes dropdown-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.account-chip {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.quick-alerts {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 14px;
  margin: 0;
}

.quick-menu-block {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}

.section-title-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 12px;
}

.section-title-row h2 {
  margin-bottom: 0;
}

.quick-alert {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 14px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  color: inherit;
  text-align: left;
  box-shadow: var(--shadow-xs);
  animation: card-enter 420ms ease both;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.quick-alert:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
}

.quick-alert:focus-visible {
  outline: 3px solid rgba(40, 101, 178, 0.24);
  outline-offset: 2px;
}

.quick-alert::before {
  content: "";
  position: absolute;
  left: 0;
  inset-block: 20% 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
  opacity: 0.7;
}

.quick-alert > * {
  position: relative;
  z-index: 1;
}

.quick-alert-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  color: var(--blue);
  background: var(--blue-light);
}

.quick-alert-icon .icon {
  width: 22px;
  height: 22px;
  animation: icon-bob 950ms ease-in-out infinite alternate;
}

.quick-alert-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.quick-alert strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.quick-alert h3 {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
}

.quick-alert p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.3;
  font-weight: 500;
}

.quick-alert.ok {
  color: var(--green);
  border-color: rgba(26, 122, 90, 0.2);
}

.quick-alert.ok .quick-alert-icon {
  color: var(--green);
  background: var(--green-light);
}

.quick-alert.danger {
  color: var(--red);
  border-color: rgba(184, 59, 59, 0.2);
}

.quick-alert.danger .quick-alert-icon {
  color: var(--red);
  background: var(--red-light);
}

.quick-alert.warning {
  color: var(--amber);
  border-color: rgba(192, 115, 24, 0.2);
}

.quick-alert.warning .quick-alert-icon {
  color: var(--amber);
  background: var(--amber-light);
}

.quick-alert.info {
  color: var(--blue);
  border-color: rgba(37, 99, 176, 0.2);
}

.quick-alert.info .quick-alert-icon {
  color: var(--blue);
  background: var(--blue-light);
}

.quick-alert.muted .quick-alert-icon {
  color: #7b8792;
  background: rgba(123, 135, 146, 0.12);
}

.detail-page {
  display: grid;
  gap: 16px;
}

.detail-header {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  padding: 18px;
  overflow: hidden;
  border-radius: var(--radius);
  color: #fff;
  background:
    radial-gradient(circle at 78% 12%, rgba(228, 154, 56, 0.24), transparent 28%),
    linear-gradient(120deg, #12352b, #142b42 70%, #101923);
  box-shadow: var(--shadow);
}

.detail-header::after {
  content: "";
  position: absolute;
  right: -52px;
  top: -88px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  border: 36px solid rgba(255, 255, 255, 0.08);
}

.detail-header > * {
  position: relative;
  z-index: 1;
}

.detail-header .btn {
  color: var(--ink);
}

.detail-header-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.detail-header h2 {
  margin-bottom: 5px;
  font-size: 28px;
}

.detail-header p {
  margin-bottom: 0;
  color: #dce8ed;
}

.detail-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
}

.detail-stat {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  min-height: 94px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
  animation: card-enter 420ms ease both;
}

.detail-stat.material-stat {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.detail-stat.material-stat:hover {
  transform: translateY(-2px);
  border-color: rgba(40, 101, 178, 0.22);
  box-shadow: 0 16px 34px rgba(15, 25, 35, 0.12);
}

.detail-stat.material-stat:active {
  transform: translateY(0) scale(0.99);
}

.detail-stat > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--blue);
  background: rgba(40, 101, 178, 0.10);
}

.detail-stat strong {
  display: block;
  font-size: 24px;
  line-height: 1;
}

.detail-stat h3 {
  margin: 5px 0 3px;
  font-size: 14px;
}

.detail-stat p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.detail-stat.ok > span,
.detail-stat.ok strong {
  color: var(--green);
}

.detail-stat.warning > span,
.detail-stat.warning strong,
.detail-stat.warn > span,
.detail-stat.warn strong {
  color: var(--amber);
}

.detail-stat.danger > span,
.detail-stat.danger strong {
  color: var(--red);
}

.materials-detail-page {
  padding-top: 0;
}

.materials-workspace {
  display: grid;
  gap: 12px;
}

.materials-ops-grid,
.materials-detail-grid,
.materials-panel-alerts,
.materials-location-list {
  display: none !important;
}

.materials-command {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 25, 35, 0.05);
}

.materials-command h2 {
  margin: 2px 0 3px;
  font-size: 19px;
}

.materials-command span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.materials-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.materials-topbar-note {
  display: inline-grid;
  gap: 2px;
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.materials-topbar-note strong {
  font-size: 13px;
}

.materials-topbar-note span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.materials-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

.materials-kpi-grid .detail-stat {
  min-height: 72px;
  grid-template-columns: 36px minmax(0, 1fr);
  padding: 10px;
  border-radius: 12px;
}

.materials-kpi-grid .detail-stat > span {
  width: 36px;
  height: 36px;
  border-radius: 11px;
}

.materials-kpi-grid .detail-stat strong {
  font-size: 20px;
}

.materials-kpi-grid .detail-stat h3 {
  margin: 3px 0 1px;
  font-size: 12.5px;
}

.materials-kpi-grid .detail-stat p {
  font-size: 11px;
}

.receipt-launcher {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border-radius: 12px;
  border: 1px solid rgba(40, 101, 178, 0.16);
  background: #fff;
}

.materials-ops-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
  gap: 12px;
}

.materials-flow-grid {
  display: grid;
  grid-template-columns: minmax(360px, 0.95fr) minmax(360px, 1.05fr);
  gap: 12px;
}

.materials-panel {
  display: grid;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(15, 25, 35, 0.05);
}

.materials-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.materials-panel-head strong {
  display: block;
  font-size: 15px;
}

.materials-count {
  min-width: 32px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: #2865b2;
  background: #eef6ff;
  font-size: 12px;
  font-weight: 950;
}

.materials-count.danger {
  color: var(--red);
  background: #fff0f0;
}

.materials-count.ok {
  color: var(--green-dark);
  background: #e8f7ef;
}

.materials-action-list,
.materials-location-list,
.materials-catalog-table {
  display: grid;
  gap: 7px;
}

.materials-action-list {
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.materials-action-list .detail-row {
  min-height: 50px;
  padding: 9px;
  border-radius: 12px;
  box-shadow: none;
}

.materials-action-list .detail-row > span {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.materials-action-list .detail-row strong {
  font-size: 12.5px;
}

.materials-action-list .detail-row p {
  font-size: 11.5px;
}

.material-location-card {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd;
  text-align: left;
  cursor: pointer;
}

.material-location-card.attention {
  border-color: rgba(201, 121, 29, 0.28);
  background: #fffaf0;
}

.material-location-avatar {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #1a7a5a, #2865b2);
  font-size: 11px;
  font-weight: 950;
}

.material-location-card strong,
.material-location-card p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-location-card strong {
  display: block;
  font-size: 13px;
}

.material-location-card p,
.material-location-card small {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.material-location-card em {
  padding: 5px 7px;
  border-radius: 999px;
  color: #2865b2;
  background: #eef6ff;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.material-location-card small {
  grid-column: 2 / -1;
}

.materials-catalog-panel {
  gap: 8px;
}

.material-catalog-row {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 90px 90px 72px;
  gap: 10px;
  align-items: center;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd;
}

.material-catalog-row strong,
.material-catalog-row span {
  display: block;
}

.material-catalog-row strong {
  font-size: 13px;
}

.material-catalog-row span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 850;
}

.material-catalog-row > span {
  color: var(--ink);
  text-align: right;
}

.material-catalog-row em {
  justify-self: end;
  padding: 5px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.material-catalog-row.ok em {
  color: var(--green-dark);
  background: #e8f7ef;
}

.material-catalog-row.warning em {
  color: var(--amber);
  background: #fff3e4;
}

.material-catalog-row.danger em {
  color: var(--red);
  background: #fff0f0;
}

.stock-flow-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.stock-flow-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.stock-flow-form input,
.stock-flow-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 850;
  outline: none;
}

.stock-flow-form input:focus,
.stock-flow-form select:focus {
  border-color: #2865b2;
  box-shadow: 0 0 0 3px rgba(40, 101, 178, 0.12);
}

.stock-flow-wide,
.stock-flow-submit {
  grid-column: 1 / -1;
}

/* Search select în formulare */
.sf-search-wrap { position: relative; }
.sf-search-input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 9px 10px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 12.5px;
  font-weight: 850;
  outline: none;
  box-sizing: border-box;
  cursor: pointer;
}
.sf-search-input:focus { border-color: #2865b2; box-shadow: 0 0 0 3px rgba(40,101,178,.12); }
.sf-dropdown {
  display: none;
  position: fixed;
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
  z-index: 99999;
  max-height: 260px;
  overflow-y: auto;
}
.sf-dd-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .1s;
}
.sf-dd-item:hover, .sf-dd-active { background: #eff6ff; }
.sf-dd-icon { font-size: 16px; flex-shrink: 0; }
.sf-dd-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sf-dd-label { font-size: 13px; font-weight: 700; color: #1e293b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-dd-sub { font-size: 11px; color: #94a3b8; }
.sf-dd-qty { font-weight: 700; color: #0f766e; }
.sf-dd-empty { padding: 12px 14px; font-size: 13px; color: #94a3b8; }

.stock-flow-submit {
  justify-content: center;
}

.stock-history-list {
  display: grid;
  gap: 7px;
  max-height: 330px;
  overflow: auto;
  padding-right: 2px;
}

.stock-history-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd;
}

.stock-history-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: #2865b2;
  background: #eef6ff;
}

.stock-history-row strong,
.stock-history-row p,
.stock-history-row em {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

.stock-history-row strong {
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
}

.stock-history-row p,
.stock-history-row em {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.2px;
  font-style: normal;
  font-weight: 800;
  white-space: nowrap;
}

.stock-history-row small {
  padding: 5px 7px;
  border-radius: 999px;
  color: var(--green-dark);
  background: #e8f7ef;
  font-size: 11px;
  font-weight: 950;
}

.receipt-launcher-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.receipt-launcher-icon {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(135deg, #1a7a5a, #2865b2);
}

.receipt-launcher h2 {
  margin: 0;
  font-size: 13px;
  white-space: nowrap;
}

.receipt-launcher-stats {
  display: flex;
  grid-template-columns: repeat(3, auto);
  gap: 5px;
}

.receipt-launcher-stats span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: #f7fafb;
  font-size: 10.5px;
  font-weight: 900;
}

.receipt-launcher-stats strong {
  color: var(--ink);
  font-size: 12px;
  line-height: 1;
}

.receipt-launcher .btn {
  min-height: 30px;
  padding: 7px 10px;
  border-radius: 9px;
  font-size: 12px;
}

.receipt-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(12, 22, 32, 0.58);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
  backdrop-filter: blur(10px);
}

.receipt-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.receipt-modal {
  width: min(1180px, 100%);
  max-height: min(92vh, 920px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 22px;
  background: #f5f8fa;
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  transform: translateY(12px) scale(0.98);
  transition: transform 180ms ease;
}

.receipt-modal-overlay.is-open .receipt-modal {
  transform: translateY(0) scale(1);
}

.receipt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  color: #fff;
  background: linear-gradient(135deg, #0f6f53, #2865b2);
}

.receipt-modal-head h2 {
  margin: 2px 0 0;
  font-size: 21px;
}

.receipt-modal-head .eyebrow {
  color: rgba(255, 255, 255, 0.74);
}

.receipt-modal-close {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 13px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
}

.receipt-modal-body {
  min-height: 0;
  overflow: auto;
  padding: 16px;
}

.receipt-importer {
  display: grid;
  gap: 16px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgba(40, 101, 178, 0.16);
  background:
    radial-gradient(circle at 88% 0%, rgba(40, 101, 178, 0.14), transparent 34%),
    linear-gradient(135deg, #ffffff, #f7fbfb);
}

.receipt-importer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.receipt-importer-head h2 {
  margin: 2px 0 5px;
  font-size: 20px;
}

.receipt-importer-grid {
  display: grid;
  grid-template-columns: minmax(190px, 0.9fr) minmax(220px, 1fr) minmax(300px, 1.4fr);
  gap: 12px;
}

.receipt-drop {
  min-height: 190px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  padding: 16px;
  border: 1.5px dashed rgba(26, 122, 90, 0.42);
  border-radius: 16px;
  color: var(--green-dark);
  background: rgba(232, 247, 239, 0.68);
  text-align: center;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.receipt-drop:hover {
  transform: translateY(-2px);
  border-color: var(--green);
  background: #e8f7ef;
}

.receipt-drop input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.receipt-drop > span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(135deg, #1a7a5a, #2865b2);
  box-shadow: 0 14px 28px rgba(26, 122, 90, 0.2);
}

.receipt-drop strong {
  color: var(--ink);
  font-size: 15px;
}

.receipt-drop em {
  max-width: 190px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  line-height: 1.3;
}

.receipt-preview {
  min-height: 190px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.receipt-preview img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  object-fit: cover;
}

.receipt-preview-split {
  height: 100%;
  min-height: 190px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.receipt-preview-split.triple {
  grid-template-columns: repeat(3, 1fr);
}

.receipt-preview-split img {
  min-height: 190px;
  background: #fff;
}

.receipt-preview-empty {
  height: 100%;
  min-height: 190px;
  display: grid;
  place-items: center;
  gap: 8px;
  padding: 18px;
  color: var(--muted);
  background: #f7fafb;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.receipt-preview-pdf {
  align-content: center;
}

.receipt-preview-pdf strong {
  color: var(--ink);
  font-size: 15px;
}

.receipt-preview-pdf span {
  max-width: 220px;
  overflow: hidden;
  color: var(--muted);
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-preview-pdf em {
  color: #2865b2;
  font-size: 11.5px;
  font-style: normal;
  font-weight: 900;
}

.receipt-result {
  display: grid;
  gap: 12px;
}

.receipt-status {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid rgba(40, 101, 178, 0.16);
  border-radius: 14px;
  background: #eef6ff;
}

.receipt-status strong {
  color: #174f91;
  font-size: 14px;
}

.receipt-status span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.receipt-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.receipt-fields label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.receipt-fields input,
.receipt-fields select,
.receipt-item input,
.receipt-item select,
.receipt-actions textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px 11px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  outline: none;
}

.receipt-fields input:focus,
.receipt-fields select:focus,
.receipt-item input:focus,
.receipt-item select:focus,
.receipt-actions textarea:focus {
  border-color: #2865b2;
  box-shadow: 0 0 0 3px rgba(40, 101, 178, 0.12);
}

.receipt-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.receipt-items-head strong {
  font-size: 15px;
}

.receipt-analysis-center {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(40, 101, 178, 0.14);
  border-radius: 16px;
  background: rgba(248, 251, 253, 0.92);
}

.receipt-analysis-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.receipt-analysis-head strong {
  display: block;
  font-size: 14px;
}

.receipt-analysis-head span,
.receipt-analysis-head em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
}

.receipt-analysis-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.receipt-analysis-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}

.receipt-analysis-row:hover,
.receipt-analysis-row.active {
  transform: translateY(-1px);
  border-color: rgba(40, 101, 178, 0.34);
  box-shadow: 0 12px 28px rgba(15, 25, 35, 0.09);
}

.receipt-analysis-index {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #2865b2;
  background: #eef6ff;
  font-weight: 950;
}

.receipt-analysis-row.done .receipt-analysis-index {
  color: var(--green-dark);
  background: #e8f7ef;
}

.receipt-analysis-row.run .receipt-analysis-index {
  color: #8a5a00;
  background: #fff2d8;
  animation: pulse-soft 1.2s ease-in-out infinite;
}

.receipt-analysis-row.error .receipt-analysis-index {
  color: var(--red);
  background: #fff0f0;
}

.receipt-analysis-row strong,
.receipt-analysis-row p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-analysis-row strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.receipt-analysis-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.receipt-analysis-row em {
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--muted);
  background: #eef3f6;
  font-size: 11px;
  font-style: normal;
  font-weight: 950;
}

.receipt-analysis-row.done em {
  color: var(--green-dark);
  background: #e8f7ef;
}

.receipt-analysis-row.run em {
  color: #8a5a00;
  background: #fff2d8;
}

.receipt-analysis-row.error em {
  color: var(--red);
  background: #fff0f0;
}

.receipt-analysis-empty {
  display: grid;
  place-items: center;
  gap: 7px;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

.receipt-analysis-empty .icon {
  color: #2865b2;
}

.receipt-analysis-empty strong {
  color: var(--ink);
}

.receipt-items {
  display: grid;
  gap: 8px;
}

.receipt-item {
  display: grid;
  grid-template-columns: minmax(180px, 1.5fr) 105px 86px 95px 38px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
}

.receipt-item-head {
  padding: 0 8px;
  border: 0;
  color: var(--muted);
  background: transparent;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.receipt-remove {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 11px;
  color: var(--red);
  background: #fff0f0;
  cursor: pointer;
}

.receipt-empty {
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
}

.receipt-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 12px;
  align-items: stretch;
}

.receipt-actions textarea {
  min-height: 82px;
  resize: vertical;
  font-weight: 700;
}

.receipt-history {
  display: grid;
  gap: 10px;
  padding-top: 4px;
}

.receipt-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.receipt-history-head strong {
  font-size: 15px;
}

.receipt-history-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.receipt-history-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.receipt-history-row {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
}

.receipt-history-row > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #2865b2;
  background: #eef6ff;
}

.receipt-history-row strong,
.receipt-history-row p {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.receipt-history-row strong {
  display: block;
  font-size: 13px;
}

.receipt-history-row p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.receipt-history-row em {
  padding: 6px 8px;
  border-radius: 999px;
  color: var(--green-dark);
  background: #e8f7ef;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 980px) {
  .receipt-launcher {
    width: 100%;
    flex-wrap: wrap;
  }

  .receipt-launcher-stats {
    flex-wrap: wrap;
  }

  .receipt-modal-overlay {
    padding: 10px;
  }

  .receipt-modal {
    max-height: 96vh;
    border-radius: 18px;
  }

  .receipt-importer-grid,
  .receipt-actions {
    grid-template-columns: 1fr;
  }

  .receipt-item {
    grid-template-columns: 1fr 90px 78px;
  }

  .receipt-analysis-list {
    grid-template-columns: 1fr;
  }

  .receipt-item input[data-receipt-field="price"],
  .receipt-item .receipt-remove {
    grid-column: auto;
  }

  .receipt-item-head {
    display: none;
  }

  .receipt-history-list {
    grid-template-columns: 1fr;
  }
}

.material-stat-popup {
  position: fixed;
  z-index: 80;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(141, 158, 176, 0.42);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 24px 60px rgba(15, 25, 35, 0.22);
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 160ms ease, transform 160ms ease;
  backdrop-filter: blur(12px);
}

.material-stat-popup.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.material-stat-popup::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 28px;
  width: 12px;
  height: 12px;
  background: inherit;
  border-left: 1px solid rgba(141, 158, 176, 0.42);
  border-top: 1px solid rgba(141, 158, 176, 0.42);
  transform: rotate(45deg);
}

.material-stat-popup-head {
  display: grid;
  gap: 3px;
}

.material-stat-popup-head strong {
  color: var(--ink);
  font-size: 15px;
}

.material-stat-popup-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.material-stat-popup ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.material-stat-popup li {
  display: grid;
  gap: 2px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f8fbfd;
}

.material-stat-popup li strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.2;
}

.material-stat-popup li span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.material-stat-popup-more {
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(135deg, #1a7a5a, #2865b2);
  font-weight: 900;
  cursor: pointer;
}

.detail-grid {
  display: grid;
  gap: 14px;
}

.teams-detail-grid,
.blockers-detail-grid {
  grid-template-columns: repeat(3, minmax(250px, 1fr));
}

.materials-detail-grid {
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 12px;
}

.materials-alert-panel {
  gap: 10px;
  padding: 14px;
  border-radius: 14px;
  box-shadow: 0 10px 24px rgba(15, 25, 35, 0.06);
}

.materials-alert-panel.urgent {
  border-top: 3px solid var(--red);
}

.materials-alert-panel.low {
  border-top: 3px solid var(--amber);
}

.materials-alert-panel .detail-card-head strong {
  font-size: 14px;
}

.materials-alert-panel .detail-list {
  display: grid;
  gap: 7px;
  max-height: 250px;
  overflow: auto;
  padding-right: 2px;
}

.materials-alert-panel .detail-row {
  min-height: 52px;
  padding: 9px;
  border-radius: 12px;
  box-shadow: none;
}

.materials-alert-panel .detail-row > span {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.materials-alert-panel .detail-row strong {
  font-size: 12.5px;
}

.materials-alert-panel .detail-row p {
  font-size: 11.5px;
}

.detail-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.detail-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.detail-card-head > div {
  min-width: 0;
}

.detail-card-head strong,
.detail-card-head span {
  display: block;
}

.detail-card-head strong {
  font-size: 15px;
}

.detail-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.team-detail-card {
  border-top: 4px solid var(--red);
}

.team-detail-card.online {
  border-top-color: var(--green);
}

.detail-info-box {
  display: grid;
  gap: 4px;
  padding: 11px;
  border-radius: var(--radius);
  background: #f7fafb;
  border: 1px solid var(--line);
}

.detail-info-box span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-info-box strong {
  color: var(--green-dark);
  font-size: 14px;
  line-height: 1.25;
}

.detail-info-box p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
}

.detail-info-box.danger {
  background: #fff7f7;
  border-color: rgba(189, 64, 64, 0.22);
}

.detail-info-box.danger strong {
  color: var(--red);
}

.detail-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.detail-mini-grid span {
  display: grid;
  gap: 3px;
  min-height: 54px;
  align-content: center;
  padding: 8px;
  border-radius: 6px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.detail-mini-grid strong {
  color: var(--ink);
  font-size: 13px;
  text-transform: none;
}

.detail-crew {
  min-height: auto;
}

.detail-list {
  display: grid;
  gap: 10px;
}

.detail-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.detail-row > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  color: var(--blue);
  background: rgba(40, 101, 178, 0.10);
}

.detail-row strong {
  display: block;
  font-size: 13px;
}

.detail-row p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.detail-row.danger {
  border-color: rgba(189, 64, 64, 0.22);
  background: #fff7f7;
}

.detail-row.danger > span {
  color: var(--red);
  background: rgba(189, 64, 64, 0.10);
}

.detail-row.warning {
  border-color: rgba(201, 121, 29, 0.22);
  background: #fffaf1;
}

.detail-row.warning > span {
  color: var(--amber);
  background: rgba(201, 121, 29, 0.12);
}

.blocked-detail-card {
  border-top: 4px solid var(--red);
}

.today-progress-panel {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(40, 101, 178, 0.18);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(40, 101, 178, 0.08), transparent),
    #fff;
  box-shadow: var(--shadow-soft);
}

.today-progress-panel h2 {
  margin-bottom: 0;
}

.today-progress-bar {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebef;
}

.today-progress-bar span {
  display: block;
  width: var(--progress-width);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--blue));
  animation: meter-grow 900ms ease both;
}

.jobs-detail-list {
  display: grid;
  gap: 12px;
}

.today-job-detail {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 15px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--amber);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.today-job-detail.ok {
  border-left-color: var(--green);
}

.today-job-detail.info {
  border-left-color: var(--blue);
}

.today-job-detail.danger {
  border-left-color: var(--red);
}

.today-job-detail p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.overdue-detail-list {
  gap: 14px;
}
.overdue-job-detail {
  border: 1px solid rgba(220, 38, 38, .22);
  border-left: 5px solid var(--red);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(254, 242, 242, .98), #fff);
  box-shadow: 0 14px 36px rgba(127, 29, 29, .12);
  overflow: hidden;
}
.overdue-alert-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: #991b1b;
  color: #fff;
}
.overdue-alert-strip span {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.overdue-alert-strip button {
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 10px;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  padding: 7px 10px;
}
.overdue-alert-strip button:hover {
  background: rgba(255,255,255,.24);
}
.overdue-job-main {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 14px;
  padding: 15px;
}
.overdue-reason {
  margin-top: 10px;
  border: 1px solid rgba(220, 38, 38, .2);
  border-radius: 12px;
  background: #fff7f7;
  padding: 10px 12px;
}
.overdue-reason strong {
  display: block;
  color: #991b1b;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.overdue-reason span {
  display: block;
  margin-top: 4px;
  color: #3f1f1f;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.35;
}
.det-late-reason-row {
  background: #fff7f7;
}

.ops-overview {
  display: grid;
  grid-template-columns: minmax(300px, 0.88fr) minmax(360px, 1.12fr);
  gap: 16px;
  margin-bottom: 18px;
}

.ops-overview-single {
  grid-template-columns: 1fr;
}

.dashboard-map-jobs {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, .75fr);
  gap: 16px;
  align-items: stretch;
  margin-bottom: 18px;
}

.dashboard-map-jobs .team-map-panel,
.dashboard-map-jobs .map-jobs-side {
  min-height: 100%;
}

.dashboard-map-jobs .mini-map {
  min-height: 282px;
}

.map-jobs-side {
  margin-top: 0;
  box-shadow: var(--shadow);
  max-height: 392px;
  overflow-y: auto;
}

.map-jobs-side .map-work-job {
  background: #fff;
}

.db-today-card .db-job-list {
  max-height: 318px;
  overflow-y: auto;
}

.quick-alerts-stacked {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.ops-panel {
  position: relative;
  overflow: hidden;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  animation: card-enter 460ms ease both;
}

.ops-panel > * {
  position: relative;
  z-index: 1;
}

.toolbar.compact {
  margin-bottom: 12px;
}

.toolbar.compact h2 {
  margin-bottom: 0;
}

.mini-map {
  position: relative;
  min-height: 284px;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid rgba(40, 101, 178, 0.24);
  background: #dfe8df;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.field-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.leaflet-container {
  font: inherit;
}

.leaflet-team-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.ltm-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

.ltm-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ltm-label {
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  color: var(--ink);
  font-size: 9.5px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.14);
  white-space: nowrap;
}

.leaflet-team-marker.offline .ltm-avatar {
  background: var(--red);
  opacity: 0.85;
}

/* ── CLUSTER MARKER ──────────────────────────── */
.leaflet-cluster-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.lcm-ring {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  gap: 1px;
  border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28), 0 0 0 2px rgba(255,255,255,0.5);
  position: relative;
  transition: transform 140ms ease;
}

.leaflet-cluster-marker:hover .lcm-ring {
  transform: scale(1.10);
}

.leaflet-cluster-marker.online .lcm-ring {
  background: var(--green);
}

.leaflet-cluster-marker.mixed .lcm-ring {
  background: var(--amber);
}

.leaflet-cluster-marker.offline .lcm-ring {
  background: var(--red);
}

.lcm-num {
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  line-height: 1;
  letter-spacing: -1px;
}

.lcm-x {
  font-size: 11px;
  font-weight: 700;
  color: rgba(255,255,255,0.80);
  line-height: 1;
  margin-top: 4px;
}

.lcm-initials {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.96);
  color: var(--ink);
  font-size: 9px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,0.16);
  white-space: nowrap;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.02em;
}

.leaflet-work-marker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px 7px 6px;
  border-radius: 999px;
  background: rgba(255,255,255,0.97);
  border: 2px solid var(--amber);
  box-shadow:
    0 10px 24px rgba(16,25,35,0.24),
    0 0 0 8px rgba(192,115,24,0.16);
  white-space: nowrap;
  animation: work-pulse 2s ease-in-out infinite;
}

.leaflet-work-marker.ok {
  border-color: var(--green);
  box-shadow:
    0 10px 24px rgba(16,25,35,0.24),
    0 0 0 8px rgba(26,122,90,0.16);
}

.leaflet-work-marker.info {
  border-color: var(--blue);
  box-shadow:
    0 10px 24px rgba(16,25,35,0.24),
    0 0 0 8px rgba(37,99,176,0.16);
}

.leaflet-work-marker.danger {
  border-color: var(--red);
  box-shadow:
    0 10px 24px rgba(16,25,35,0.24),
    0 0 0 8px rgba(184,59,59,0.16);
}

/* Marker lucrare cu echipa atasata */
.leaflet-work-marker-full {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255,255,255,0.97);
  border: 1.5px solid var(--amber);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  overflow: hidden;
  white-space: nowrap;
  min-width: 120px;
}

.leaflet-work-marker-full.ok { border-color: var(--green); }
.leaflet-work-marker-full.info { border-color: var(--blue); }
.leaflet-work-marker-full.danger { border-color: var(--red); }

.wmt-header {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px 5px 5px;
}

.wmt-type {
  font-size: 9.5px;
  color: var(--muted);
  font-weight: 500;
  margin-left: auto;
}

.wmt-team {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 5px 6px;
  border-top: 1px solid rgba(0,0,0,0.07);
  background: rgba(0,0,0,0.03);
}

.wmt-avatar {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}

.wmt-avatar.off {
  background: var(--muted);
  opacity: 0.75;
}

.wmt-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wmt-names {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 90px;
}

.work-marker-time {
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--amber);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.leaflet-work-marker strong {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.leaflet-work-marker.ok  { border-color: var(--green); }
.leaflet-work-marker.ok .work-marker-time  { background: var(--green); }
.leaflet-work-marker.info { border-color: var(--blue); }
.leaflet-work-marker.info .work-marker-time { background: var(--blue); }

@keyframes work-pulse {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes marker-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

.map-team-overlay {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 12px;
}

.team-row-pin {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease;
  min-width: 0;
}

.team-row-pin:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

.team-row-pin:disabled {
  opacity: 0.5;
  cursor: default;
}

.team-row-avatar {
  position: relative;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
  overflow: visible;
}

.team-row-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.team-row-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 2px solid var(--surface);
}

.team-row-dot.green { background: #2ecc71; }
.team-row-dot.red   { background: var(--red); }

.team-row-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.team-row-info strong {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}

.team-row-info span {
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.team-row-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.team-row-status em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 999px;
}

.team-row-status em.ok  { color: var(--green); background: var(--green-light); }
.team-row-status em.off { color: var(--muted);  background: #edf0f3; }

.team-row-status .icon {
  width: 12px;
  height: 12px;
  color: var(--muted);
  opacity: 0.45;
}

/* ── MAP JOBS LIST (sub harta) ───────────────────────── */
.map-jobs-list {
  margin-top: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

.map-jobs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 12px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.map-jobs-head strong {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.map-work-job {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 120ms;
}

.map-work-job:last-child { border-bottom: none; }
.map-work-job:hover { background: var(--surface-soft); }
.map-work-job.ok { border-left: 3px solid var(--green); }
.map-work-job.info { border-left: 3px solid var(--blue); }
.map-work-job.warn { border-left: 3px solid var(--amber); }
.map-work-job.danger { border-left: 3px solid var(--red); }

.mwj-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
}

.mwj-time {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  flex-shrink: 0;
  min-width: 36px;
}

.mwj-title {
  flex: 1;
  min-width: 0;
}

.mwj-title strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mwj-title span {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.mwj-status {
  font-size: 10px;
  flex-shrink: 0;
}

/* Echipa sub header */
.mwj-team {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  padding: 0 12px 8px 12px;
  border-top: 1px dashed var(--line);
  margin-top: 2px;
  padding-top: 6px;
}

.mwj-employee {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 4px;
  border-radius: 999px;
  background: var(--surface-soft);
  border: 1px solid var(--line);
}

.mwj-employee.off { opacity: 0.65; }

.mwj-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 7px;
  font-weight: 800;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex-shrink: 0;
}

.mwj-employee.off .mwj-avatar { background: var(--muted); }

.mwj-avatar img { width: 100%; height: 100%; object-fit: cover; }

.mwj-emp-info strong {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
}

.mwj-emp-info span {
  display: block;
  font-size: 9.5px;
  color: var(--muted);
}

.mwj-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.mwj-dot.green { background: var(--green); }
.mwj-dot.red { background: var(--red); }

.team-map-pin span {
  position: absolute;
  left: 8px;
  top: 50%;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-size: 10px;
  font-weight: 950;
  transform: translateY(-50%);
  box-shadow: 0 0 0 6px rgba(31, 122, 92, 0.13);
  animation: pin-pulse 1.8s ease-in-out infinite;
}

.team-map-pin.offline {
  border-color: rgba(189, 64, 64, 0.22);
}

.team-map-pin.offline span {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(189, 64, 64, 0.12);
  animation: none;
}

.team-map-pin strong {
  overflow: hidden;
  font-size: 12px;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-map-pin em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-legend {
  display: none;
}

.map-legend-control {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

.map-legend-control span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--ink-soft);
}

.map-legend-control .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.map-legend-control .green { background: var(--green); }
.map-legend-control .red   { background: var(--red); }
.map-legend-control .blue  { background: var(--blue); }

.ops-insights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ops-insight {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 84px;
  padding: 14px;
  overflow: hidden;
  border-radius: var(--radius);
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-soft);
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.ops-insight:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.ops-insight::before {
  content: "";
  position: absolute;
  left: 0;
  inset-block: 20% 20%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: currentColor;
  opacity: 0.7;
}

.attention-panel {
  display: grid;
  align-content: start;
}

.ops-insight > * {
  position: relative;
  z-index: 1;
}

.ops-insight-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: rgba(40, 101, 178, 0.10);
  color: var(--blue);
}

.ops-insight-icon .icon {
  width: 22px;
  height: 22px;
  animation: icon-bob 950ms ease-in-out infinite alternate;
}

.ops-insight-copy {
  min-width: 0;
  display: grid;
  gap: 3px;
}

.ops-insight strong {
  display: block;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.5px;
  font-weight: 700;
}

.ops-insight h3 {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.18;
}

.ops-insight p {
  display: -webkit-box;
  margin-bottom: 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.ops-insight.warning {
  color: var(--amber);
  border-color: rgba(201, 121, 29, 0.22);
  background: linear-gradient(135deg, #fff, rgba(201, 121, 29, 0.07));
}

.ops-insight.warning .ops-insight-icon {
  color: var(--amber);
  background: rgba(201, 121, 29, 0.12);
}

.ops-insight.danger {
  color: var(--red);
  border-color: rgba(189, 64, 64, 0.22);
  background: linear-gradient(135deg, #fff, rgba(189, 64, 64, 0.06));
}

.ops-insight.danger .ops-insight-icon {
  color: var(--red);
  background: rgba(189, 64, 64, 0.11);
}

.ops-insight.ok {
  color: var(--green);
  border-color: rgba(31, 122, 92, 0.22);
  background: linear-gradient(135deg, #fff, rgba(31, 122, 92, 0.06));
}

.ops-insight.ok .ops-insight-icon {
  color: var(--green);
  background: rgba(31, 122, 92, 0.11);
}

.ops-insight.info {
  color: var(--blue);
  border-color: rgba(40, 101, 178, 0.24);
  background: linear-gradient(135deg, #fff, rgba(40, 101, 178, 0.06));
}

.ops-next-job {
  display: grid;
  gap: 5px;
  margin-top: 12px;
  padding: 12px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
  box-shadow: 0 12px 28px rgba(40, 101, 178, 0.17);
}

.ops-next-job.complete {
  background: linear-gradient(135deg, var(--green), #3da676);
}

.ops-next-job span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.ops-next-job strong {
  font-size: 14px;
}

@keyframes route-pulse {
  0%,
  100% {
    opacity: 0.54;
    transform: scale(1);
  }
  50% {
    opacity: 0.28;
    transform: scale(1.03);
  }
}

@keyframes pin-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(31, 122, 92, 0.13);
  }
  50% {
    box-shadow: 0 0 0 11px rgba(31, 122, 92, 0.02);
  }
}

.live-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 16px;
  align-items: stretch;
  margin-bottom: 16px;
}

.live-card {
  position: relative;
  display: grid;
  gap: 10px;
  grid-template-rows: 58px 118px 66px 76px 32px 86px minmax(154px, 1fr) 32px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: #fff;
  border: 1px solid var(--line);
  border-top: 3px solid var(--red);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  animation: card-enter 420ms ease both;
}

.live-card.online {
  border-top-color: var(--green);
}

.live-person {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
}

.live-person > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.live-card h3,
.live-person h3 {
  margin-bottom: 0;
  font-size: 18px;
  line-height: 1.2;
}

.live-card p,
.live-person p {
  margin-bottom: 0;
  color: var(--muted);
}

.current-job {
  display: grid;
  gap: 3px;
  min-height: 118px;
  align-content: start;
  padding: 10px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #eef8f3, #f7fbff);
  border: 1px solid rgba(31, 122, 92, 0.14);
}

.current-job span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.current-job strong {
  min-height: 34px;
  display: -webkit-box;
  overflow: hidden;
  color: var(--green-dark);
  font-size: 13px;
  line-height: 1.25;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.current-job small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.work-animations {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  min-height: 92px;
}

.work-chip {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  min-height: 90px;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

.work-chip::after {
  display: none;
}

.work-chip strong {
  max-width: 88px;
  color: #132033;
  font-size: 9.5px;
  line-height: 1.05;
  text-align: center;
  text-transform: uppercase;
}

.category-round {
  position: relative;
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background:
    radial-gradient(circle at 35% 26%, #2b4665, #12243d 68%);
  border: 3px solid #eef6fb;
  box-shadow:
    0 0 0 2px #12243d,
    0 0 0 4px rgba(18, 36, 61, 0.12),
    0 10px 18px rgba(13, 31, 54, 0.18);
  animation: icon-lift 3s ease-in-out infinite;
}

.category-round::before {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.22);
}

.category-round::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1px solid rgba(18, 36, 61, 0.18);
  animation: ring-pulse 2.6s ease-in-out infinite;
}

.category-round svg {
  position: relative;
  z-index: 1;
  width: 42px;
  height: 42px;
  overflow: visible;
}

.category-round .white {
  fill: none;
  stroke: #f7fbff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-round .fill {
  stroke: none;
}

.category-round .accent-blue {
  fill: none;
  stroke: #9fd6ff;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-round .accent-green {
  fill: none;
  stroke: #58d381;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-round .accent-orange {
  fill: none;
  stroke: #f2a23a;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-round .accent-red {
  fill: none;
  stroke: #f05d45;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-round .accent-yellow {
  fill: none;
  stroke: #ffdf55;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.category-round .tiny-text {
  fill: #f7fbff;
  font-size: 7px;
  font-weight: 900;
}

.work-chip.idle {
  grid-column: 1 / -1;
  min-height: 36px;
  color: var(--muted);
  background: #f7fafb;
  border: 1px dashed var(--line);
  border-radius: 6px;
}

.work-chip.idle span {
  display: none;
}

@keyframes icon-lift {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2px);
  }
}

@keyframes ring-pulse {
  0%,
  100% {
    opacity: 0.38;
    transform: scale(1);
  }
  50% {
    opacity: 0.14;
    transform: scale(1.08);
  }
}

.map-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  min-height: 76px;
}

.map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 76px;
  padding: 8px;
  border-radius: var(--radius);
  color: #fff;
  background: linear-gradient(135deg, var(--blue), #38a3c7);
  font-size: 12px;
  font-weight: 900;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(40, 101, 178, 0.18);
  transition: transform 160ms ease, box-shadow 160ms ease;
  animation: map-glow 2.4s ease-in-out infinite;
  text-align: center;
}

.map-link.end {
  background: linear-gradient(135deg, var(--green), #3ca97f);
  animation-delay: 450ms;
}

.map-link.disabled {
  color: #7b8792;
  background: #eef1f4;
  box-shadow: none;
  cursor: not-allowed;
  animation: none;
}

.map-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(40, 101, 178, 0.28);
}

@keyframes map-glow {
  0%,
  100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.08);
  }
}

.employee-tasks {
  display: grid;
  gap: 8px;
  min-height: 154px;
  align-content: start;
  padding-top: 4px;
}

.crew-list {
  display: grid;
  gap: 8px;
  min-height: 86px;
  align-content: start;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px dashed var(--line-strong);
}

.crew-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crew-head strong {
  font-size: 13px;
}

.crew-head span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #eef3f6;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.crew-members {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.crew-members span {
  max-width: 100%;
  border-radius: 999px;
  padding: 5px 8px;
  color: #314152;
  background: #edf4ff;
  font-size: 11px;
  font-weight: 900;
}

.employee-tasks-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.employee-tasks-head strong {
  font-size: 13px;
}

.employee-tasks-head span {
  min-width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #172534;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.live-task {
  display: flex;
  min-width: 0;
  min-height: 62px;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  padding: 10px 11px;
  border-radius: 6px !important;
  background: #f7fafb;
  border: 1px solid var(--line);
}

.live-task.blocked {
  background: #f7fafb;
  border-color: var(--line);
  border-radius: 6px !important;
}

.live-task.progress {
  background: #f7fafb;
  border-color: var(--line);
  border-radius: 6px !important;
}

.live-task.done {
  background: #f7fafb;
  border-color: var(--line);
  border-radius: 6px !important;
}

.live-task span {
  display: -webkit-box;
  overflow: hidden;
  max-width: 100%;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.28;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.live-task em {
  width: fit-content;
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--muted);
  background: #eef3f6;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  line-height: 1;
}

.live-task.blocked em {
  color: var(--red);
  background: #fff0f0;
}

.live-task.progress em {
  color: var(--blue);
  background: #e0edff;
}

.live-task.done em {
  color: var(--green);
  background: #e2f6ea;
}

.pulse-avatar {
  animation: avatar-float 2.8s ease-in-out infinite;
}

.live-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(189, 64, 64, 0.12);
}

.live-dot.green {
  background: #22b66f;
  box-shadow: 0 0 0 6px rgba(34, 182, 111, 0.16);
  animation: pulse-green 1.7s ease-in-out infinite;
}

.live-dot.red {
  background: var(--red);
  animation: pulse-red 1.7s ease-in-out infinite;
}

.live-status {
  width: fit-content;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 900;
}

.live-status.green {
  color: var(--green);
  background: #e8f7ef;
}

.live-status.red {
  color: var(--red);
  background: #fff0f0;
}

.live-details {
  display: grid;
  gap: 7px;
  min-height: 24px;
  color: var(--muted);
  font-size: 13px;
}

.live-details span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.blocked-ribbon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: fit-content;
  margin-top: 2px;
  padding: 7px 10px;
  border-radius: 999px;
  color: #fff;
  background: linear-gradient(135deg, var(--red), #e85d5d);
  font-size: 12px;
  font-weight: 900;
  animation: blocked-pop 1.6s ease-in-out infinite;
}

.blocked-slot {
  min-height: 32px;
  display: flex;
  align-items: center;
}

.home-calendar {
  margin-top: 0;
}

.materials-board {
  margin-top: 4px;
  position: relative;
  overflow: hidden;
}

.team-map-pin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.materials-board::before {
  display: none;
}

.materials-board > * {
  position: relative;
  z-index: 1;
}

.materials-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.materials-summary span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  border-radius: 999px;
  padding: 6px 10px;
  background: #eef5f2;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.materials-summary strong {
  font-size: 15px;
}

.materials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.materials-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(15, 25, 35, 0.05);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  animation: material-enter 420ms ease both;
}

.materials-card:hover {
  transform: translateY(-2px);
  border-color: rgba(31, 122, 92, 0.22);
  box-shadow: 0 14px 28px rgba(16, 25, 35, 0.09);
}

.materials-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.materials-head > div:nth-child(2) {
  min-width: 0;
  flex: 1;
}

.materials-head strong,
.materials-head span {
  display: block;
}

.materials-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.small-avatar {
  width: 34px;
  height: 34px;
  margin-bottom: 0;
  font-size: 11px;
}

.materials-alert {
  min-width: 46px;
  display: grid;
  place-items: center;
  gap: 1px;
  border-radius: 10px;
  padding: 6px 7px;
  background: #edf4ff;
  color: var(--blue);
}

.materials-alert.hot {
  background: #fff0f0;
  color: var(--red);
  animation: alert-pulse 1.6s ease-in-out infinite;
}

.materials-alert strong,
.materials-alert span {
  display: block;
}

.materials-alert strong {
  font-size: 14px;
  line-height: 1;
}

.materials-alert span {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.materials-table {
  display: grid;
  gap: 7px;
}

.material-row {
  display: grid;
  gap: 5px;
  padding: 8px 9px;
  border-radius: 11px;
  background: #f7fafb;
  border: 1px solid var(--line);
  transition: transform 160ms ease, background 160ms ease;
}

.material-row:hover {
  transform: translateX(2px);
  background: #fff;
}

.material-row.low {
  border-color: rgba(189, 64, 64, 0.22);
}

.material-row.medium {
  border-color: rgba(201, 121, 29, 0.22);
}

.material-row.good {
  border-color: rgba(31, 122, 92, 0.18);
}

.material-row strong,
.material-row span {
  display: block;
}

.material-row strong {
  font-size: 12.5px;
  line-height: 1.25;
}

.material-row span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 800;
}

.material-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #e4ebef;
}

.material-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--green), var(--amber));
  width: var(--meter-width);
  animation: meter-grow 900ms ease both;
}

.material-row.low .material-meter span {
  background: linear-gradient(90deg, var(--red), #e85d5d);
}

.material-row.medium .material-meter span {
  background: linear-gradient(90deg, var(--amber), #e1a147);
}

.requests-box {
  display: grid;
  gap: 7px;
  padding-top: 2px;
}

.requests-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.requests-title strong {
  font-size: 12.5px;
}

.requests-title span {
  min-width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #172534;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.request-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: center;
  padding: 8px 9px;
  border-radius: 11px;
  background: #fff8ed;
  border: 1px solid rgba(201, 121, 29, 0.22);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.request-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(16, 25, 35, 0.06);
}

.request-row span {
  overflow: hidden;
  font-size: 11.8px;
  font-weight: 850;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.request-row strong {
  font-size: 11.8px;
}

.request-row em {
  grid-column: 1 / -1;
  width: fit-content;
  border-radius: 999px;
  padding: 4px 7px;
  color: var(--amber);
  background: #fff3e4;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

.request-row.critic,
.request-row.urgent {
  background: #fff4f4;
  border-color: rgba(189, 64, 64, 0.24);
}

.request-row.critic em,
.request-row.urgent em {
  color: var(--red);
  background: #fff0f0;
}

.request-row.aprobat {
  background: #effaf3;
  border-color: rgba(31, 122, 92, 0.22);
}

.request-row.aprobat em {
  color: var(--green);
  background: #e2f6ea;
}

.field-feed {
  margin-top: 16px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(40, 101, 178, 0.06), transparent 46%),
    #fff;
}

.field-feed-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
}

.field-timeline {
  position: relative;
  display: grid;
  gap: 12px;
}

.field-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  background: linear-gradient(var(--blue), var(--green));
  opacity: 0.18;
}

.field-update {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  animation: material-enter 420ms ease both;
}

.field-update-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--blue);
  box-shadow: 0 0 0 6px rgba(40, 101, 178, 0.10);
  z-index: 1;
}

.field-update-icon .icon {
  width: 19px;
  height: 19px;
}

.field-update.problem .field-update-icon {
  background: var(--red);
  box-shadow: 0 0 0 6px rgba(189, 64, 64, 0.10);
}

.field-update.photo .field-update-icon {
  background: var(--green);
  box-shadow: 0 0 0 6px rgba(31, 122, 92, 0.10);
}

.field-update.client .field-update-icon {
  background: var(--amber);
  box-shadow: 0 0 0 6px rgba(201, 121, 29, 0.12);
}

.field-update-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
}

.field-update-head strong {
  font-size: 14px;
}

.field-update-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.field-update p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.field-checklist {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 14px;
  border-radius: 6px;
  background: #f7fafb;
  border: 1px solid var(--line);
}

.field-checklist h3 {
  margin-bottom: 2px;
}

.action-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--line);
}

.action-item > span {
  width: 10px;
  height: 10px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--blue);
}

.action-item.ok > span {
  background: var(--green);
}

.action-item.warn > span {
  background: var(--amber);
}

.action-item.danger > span {
  background: var(--red);
}

.action-item strong {
  display: block;
  font-size: 13px;
}

.action-item p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — Secțiuni noi (Puls + Main + Bottom)
   ═══════════════════════════════════════════════════════════ */

/* Puls zilnic */
.db-pulse {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 12px;
  padding: 0 0 4px;
}
.db-pulse-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  min-height: 76px;
  padding: 12px 14px;
  box-shadow: 0 8px 20px rgba(15,25,35,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.db-pulse-card:hover {
  transform: translateY(-2px);
  border-color: rgba(37, 99, 176, 0.22);
  box-shadow: 0 14px 28px rgba(15,25,35,.1);
}
.db-pulse-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
  font-size: 20px;
  background: linear-gradient(135deg, #eef6ff, #ffffff);
  border: 1px solid rgba(37, 99, 176, 0.12);
}
.db-pulse-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.db-pulse-val  { font-size: 22px; font-weight: 800; line-height: 1; }
.db-pulse-label { font-size: 12px; font-weight: 850; color: var(--ink); }
.db-pulse-sub   { font-size: 11px; color: var(--muted); font-weight: 700; line-height: 1.25; }

/* Grid principal (Lucrări + Echipe) */
.db-main-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* Grid inferior (Stoc + Feed) */
.db-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 24px;
}

/* Card generic */
.db-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
}
.db-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--line);
}
.db-card-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1px;
}
.db-card-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.db-card-link {
  font-size: 12px; font-weight: 600; color: var(--blue);
  background: none; border: none; cursor: pointer; padding: 0;
  white-space: nowrap;
}
.db-card-link:hover { text-decoration: underline; }

/* Lucrări azi */
.db-job-list { display: flex; flex-direction: column; padding: 6px 0; }
.db-job-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.db-job-row:last-child { border-bottom: none; }
.db-job-row:hover { background: var(--surface-soft); }
.db-job-blocked { background: #fff7ed; }
.db-job-blocked:hover { background: #ffedd5; }
.db-job-time { font-size: 12px; font-weight: 700; color: var(--muted); min-width: 38px; }
.db-job-info { flex: 1; min-width: 0; }
.db-job-info strong { display: block; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-job-info span   { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-job-team { font-size: 11px; color: var(--muted); min-width: 80px; text-align: right; white-space: nowrap; }

/* Echipe azi */
.db-team-list { display: flex; flex-direction: column; padding: 6px 0; }
.db-team-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}
.db-team-row:last-child { border-bottom: none; }
.db-team-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  flex-shrink: 0;
}
.db-av-online { background: #d1fae5; color: #065f46; }
.db-av-offline { background: #f1f5f9; color: #64748b; }
.db-team-info { flex: 1; min-width: 0; }
.db-team-info strong { display: block; font-size: 13px; color: var(--ink); }
.db-team-info span   { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.db-team-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dot-green { background: #22c55e; }
.dot-red   { background: #ef4444; }

/* Stoc critic */
.db-stock-list { display: flex; flex-direction: column; padding: 6px 0; }
.db-stock-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
}
.db-stock-row:last-child { border-bottom: none; }
.db-stock-info { flex: 1; min-width: 0; }
.db-stock-info strong { display: block; font-size: 13px; color: var(--ink); }
.db-stock-info span   { font-size: 11px; color: var(--muted); }
.db-stock-qty { font-size: 13px; font-weight: 800; white-space: nowrap; }
.db-qty-zero { color: #ef4444; }
.db-qty-low  { color: #f97316; }

/* Feed activitate */
.db-feed-list { display: flex; flex-direction: column; padding: 6px 0; overflow-y: auto; max-height: 280px; }
.db-feed-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.db-feed-row:last-child { border-bottom: none; }
.db-feed-icon { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.db-feed-body { flex: 1; min-width: 0; font-size: 12px; color: var(--ink); line-height: 1.4; }
.db-feed-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Empty state */
.db-empty { padding: 20px 16px; font-size: 13px; color: var(--muted); text-align: center; }
.db-empty-ok { color: #16a34a; font-weight: 600; }

/* Responsive */
@media (max-width: 900px) {
  .dashboard-map-jobs { grid-template-columns: 1fr; }
  .db-pulse { grid-template-columns: repeat(2, 1fr); }
  .db-main-grid, .db-bottom-grid { grid-template-columns: 1fr; }
}
@media (max-width: 540px) {
  .db-pulse { grid-template-columns: 1fr 1fr; }
}

/* Cursor pointer + hover pe elementele clickable din dashboard */
.db-clickable { cursor: pointer; }
.db-clickable:hover { filter: brightness(.97); }
.db-pulse-card.db-clickable:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); transform: translateY(-1px); transition: box-shadow .15s, transform .15s; }
.db-pulse-arrow { margin-left: auto; font-size: 18px; color: var(--muted); opacity: .5; }

/* ═══════════════════════════════════════════════════════════
   DASHBOARD POPUPS
   ═══════════════════════════════════════════════════════════ */
.dbp-overlay {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15,23,42,.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.dbp-modal {
  background: var(--surface);
  border-radius: 20px;
  width: 100%; max-width: 480px;
  max-height: 88vh;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.22);
  position: relative;
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.dbp-modal.dbp-modal-in { opacity: 1; transform: none; }
.dbp-close {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  background: rgba(255,255,255,.18); border: none; cursor: pointer;
  width: 28px; height: 28px; border-radius: 50%;
  font-size: 13px; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.dbp-close:hover { background: rgba(255,255,255,.35); }

/* Header */
.dbp-header {
  background: linear-gradient(135deg, var(--accent, #3b82f6) 0%, color-mix(in srgb, var(--accent, #3b82f6) 70%, #1e293b) 100%);
  padding: 20px 48px 18px 20px;
  display: flex; align-items: flex-start; gap: 14px; flex-shrink: 0;
}
.dbp-header-icon {
  font-size: 32px; flex-shrink: 0; margin-top: 2px;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.dbp-avatar-big {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,.22); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.dbp-header-eye  { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: 2px; }
.dbp-header-title { font-size: 18px; font-weight: 800; color: #fff; line-height: 1.2; }
.dbp-header-sub   { font-size: 13px; color: rgba(255,255,255,.8); margin-top: 2px; }
.dbp-status-pill  { margin-left: auto; flex-shrink: 0; align-self: flex-start; margin-top: 4px; }

/* Body */
.dbp-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 4px;
}
.dbp-grid2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px;
}
.dbp-info-cell {
  background: var(--surface-soft); border-radius: 10px; padding: 10px 12px;
}
.dbp-info-label { display: block; font-size: 11px; color: var(--muted); margin-bottom: 2px; }
.dbp-info-val   { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.dbp-note {
  background: #f8fafc; border-left: 3px solid var(--line);
  border-radius: 0 8px 8px 0; padding: 10px 12px;
  font-size: 13px; color: var(--ink); line-height: 1.5; margin: 4px 0;
}
.dbp-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  margin: 10px 0 6px;
}
.dbp-alert {
  background: #fff7ed; border: 1px solid #fed7aa;
  border-radius: 8px; padding: 8px 12px;
  font-size: 12px; font-weight: 600; color: #c2410c;
  margin-top: 6px;
}
.dbp-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 14px 0; }

/* Task list */
.dbp-task-list { display: flex; flex-direction: column; gap: 4px; }
.dbp-task-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--surface-soft);
}
.dbp-task-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.dbp-dot-blocat       { background: #ef4444; }
.dbp-dot-în-lucru     { background: #3b82f6; }
.dbp-dot-finalizat    { background: #22c55e; }
.dbp-dot-nou          { background: #94a3b8; }
.dbp-dot-in-lucru     { background: #3b82f6; }
.dbp-task-name { flex: 1; font-size: 13px; color: var(--ink); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dbp-task-status { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }

/* Crew */
.dbp-crew { display: flex; flex-wrap: wrap; gap: 6px; }
.dbp-crew-chip { background: #e0e7ff; color: #3730a3; border-radius: 99px; padding: 3px 10px; font-size: 12px; font-weight: 600; }

/* Stock locations bar */
.dbp-loc-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.dbp-loc-row:last-child { border-bottom: none; }
.dbp-loc-name { font-size: 13px; color: var(--ink); min-width: 130px; }
.dbp-loc-bar-wrap { flex: 1; height: 6px; background: #f1f5f9; border-radius: 99px; overflow: hidden; }
.dbp-loc-bar { height: 100%; background: #f97316; border-radius: 99px; transition: width .3s; }
.dbp-loc-qty { font-size: 13px; font-weight: 700; min-width: 60px; text-align: right; }
.dbp-qty-zero { color: #ef4444; }
.dbp-qty-low  { color: #f97316; }

/* Move list */
.dbp-move-list { display: flex; flex-direction: column; gap: 4px; }
.dbp-move-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; background: var(--surface-soft); border-radius: 10px; }
.dbp-move-icon { font-size: 16px; flex-shrink: 0; margin-top: 1px; }
.dbp-move-desc { display: block; font-size: 13px; color: var(--ink); font-weight: 500; }
.dbp-move-meta { display: block; font-size: 11px; color: var(--muted); margin-top: 1px; }

/* Photo */
.dbp-photo { width: 100%; border-radius: 10px; margin-top: 8px; object-fit: cover; max-height: 220px; }

/* Footer */
.dbp-footer {
  display: flex; gap: 8px; justify-content: flex-end;
  padding: 12px 18px; border-top: 1px solid var(--line); flex-shrink: 0;
  background: var(--surface);
}
.dbp-btn-sec {
  padding: 8px 16px; border-radius: 99px; font-size: 13px; font-weight: 600;
  border: 1.5px solid var(--line); background: none; cursor: pointer; color: var(--muted);
  transition: background .12s;
}
.dbp-btn-sec:hover { background: var(--surface-soft); }
.dbp-btn-pri {
  padding: 8px 18px; border-radius: 99px; font-size: 13px; font-weight: 700;
  background: var(--blue); color: #fff; border: none; cursor: pointer;
  transition: opacity .12s;
}
.dbp-btn-pri:hover { opacity: .88; }

/* ═══════════════════════════════════════════════════════════
   MATERIAL EDITOR POPUP
   ═══════════════════════════════════════════════════════════ */
.me-overlay {
  position: fixed; inset: 0; z-index: 9100;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.me-modal {
  background: var(--surface);
  border-radius: 20px;
  width: 100%; max-width: 520px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.25);
  opacity: 0; transform: translateY(14px) scale(.98);
  transition: opacity .18s, transform .18s;
  overflow: hidden;
}
.me-modal.me-modal-in { opacity: 1; transform: none; }

/* Header */
.me-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.me-header-left { display: flex; align-items: center; gap: 12px; }
.me-header-icon { font-size: 28px; }
.me-header-eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.me-header-name { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.me-close {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--surface-soft); border: 1px solid var(--line);
  font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: background .12s;
}
.me-close:hover { background: var(--line); }

/* Tabs */
.me-tabs {
  display: flex; gap: 2px; padding: 10px 14px 0;
  border-bottom: 1px solid var(--line); flex-shrink: 0;
}
.me-tab {
  padding: 8px 16px; border-radius: 10px 10px 0 0;
  font-size: 13px; font-weight: 600; border: none; background: none;
  cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent;
  transition: color .12s, border-color .12s;
}
.me-tab:hover { color: var(--ink); }
.me-tab-active { color: var(--blue); border-bottom-color: var(--blue); }
.me-tab-panel { flex: 1; overflow-y: auto; padding: 16px 18px 20px; }
.me-tab-hidden { display: none; }

/* KPI row */
.me-kpi-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.me-kpi {
  display: flex; flex-direction: column; align-items: center;
  background: var(--surface-soft); border-radius: 12px; padding: 10px 16px;
  min-width: 80px;
}
.me-kpi-val  { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1; }
.me-kpi-lbl  { font-size: 10px; color: var(--muted); margin-top: 3px; text-align: center; }

/* Section title */
.me-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
  margin: 0 0 10px;
}
.me-empty { font-size: 13px; color: var(--muted); text-align: center; padding: 20px 0; }

/* Locations */
.me-loc-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 12px; margin-bottom: 6px;
  background: var(--surface-soft); border: 1px solid var(--line);
  transition: border-color .12s;
}
.me-loc-row:hover { border-color: var(--blue); }
.me-loc-icon { font-size: 18px; flex-shrink: 0; }
.me-loc-body { flex: 1; min-width: 0; }
.me-loc-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.me-loc-top strong { font-size: 13px; color: var(--ink); }
.me-loc-rem { font-size: 14px; font-weight: 800; }
.me-loc-bar-bg { height: 5px; background: #e2e8f0; border-radius: 99px; overflow: hidden; margin-bottom: 3px; }
.me-loc-bar-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.me-loc-used { font-size: 11px; color: var(--muted); }
.me-edit-btn {
  width: 30px; height: 30px; border-radius: 8px; border: 1.5px solid var(--line);
  background: none; cursor: pointer; font-size: 14px; color: var(--muted);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .12s, color .12s, border-color .12s;
}
.me-edit-btn:hover { background: var(--blue); color: #fff; border-color: var(--blue); }

/* Inline edit form */
.me-inline-form {
  background: #f0f9ff; border: 1.5px solid #bae6fd;
  border-radius: 12px; padding: 14px 16px; margin-top: 8px;
}
.me-inline-title { font-size: 12px; font-weight: 700; color: #0369a1; margin-bottom: 6px; }
.me-inline-cur { font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.me-inline-fields {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.me-inline-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.me-inline-fields input, .me-inline-fields select {
  padding: 7px 10px; border: 1.5px solid var(--line); border-radius: 8px;
  font-size: 13px; background: var(--surface); color: var(--ink);
}
.me-inline-save {
  padding: 8px 16px; background: var(--blue); color: #fff; border: none;
  border-radius: 8px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.me-inline-cancel {
  padding: 8px 14px; background: none; border: 1.5px solid var(--line);
  border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--muted);
}

/* Adjustment form */
.me-type-row { display: flex; gap: 6px; margin-bottom: 14px; }
.me-type-btn {
  flex: 1; padding: 8px 12px; border-radius: 10px; border: 1.5px solid var(--line);
  font-size: 13px; font-weight: 600; cursor: pointer; background: none; color: var(--muted);
  transition: all .12s;
}
.me-type-btn.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.me-adj-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.me-adj-form label { display: flex; flex-direction: column; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.me-adj-form input, .me-adj-form select {
  padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 13px; background: var(--surface); color: var(--ink);
  transition: border-color .12s;
}
.me-adj-form input:focus, .me-adj-form select:focus { border-color: var(--blue); outline: none; }
.me-wide { grid-column: 1 / -1; }
.me-unit-hint { font-weight: 400; color: var(--muted); }
.me-req { font-size: 10px; color: #ef4444; }
.me-submit-btn {
  grid-column: 1 / -1; padding: 11px; background: var(--blue); color: #fff;
  border: none; border-radius: 12px; font-size: 14px; font-weight: 700;
  cursor: pointer; margin-top: 4px; transition: opacity .12s;
}
.me-submit-btn:hover { opacity: .88; }
.me-audit-note {
  grid-column: 1 / -1; font-size: 11px; color: var(--muted);
  background: var(--surface-soft); border-radius: 8px; padding: 8px 12px;
  margin-top: 6px; border: 1px solid var(--line);
}

/* History */
.me-hist-row {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0; border-bottom: 1px solid var(--line);
}
.me-hist-row:last-child { border-bottom: none; }
.me-hist-icon { font-size: 16px; flex-shrink: 0; margin-top: 2px; }
.me-hist-body { flex: 1; min-width: 0; }
.me-hist-top { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; flex-wrap: wrap; }
.me-hist-qty { font-size: 14px; font-weight: 800; }
.me-hist-route { font-size: 12px; color: var(--muted); }
.me-hist-meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 11px; color: var(--muted); }
.me-hist-note { color: var(--ink); font-style: italic; }
.me-hist-adj-badge {
  background: #fef9c3; color: #854d0e; border: 1px solid #fde68a;
  border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700;
  flex-shrink: 0; align-self: flex-start; margin-top: 3px;
}

/* ═══════════════════════════════════════════════════════════
   CATEGORY BAR & MATERIAL TABLE TWEAKS
   ═══════════════════════════════════════════════════════════ */

/* Filter bar — search + category dropdown */
.wh-filter-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  background: var(--surface);
}
.wh-filter-name { flex: 2; min-width: 160px; }
.wh-filter-loc  { flex: 1; min-width: 0; }

/* Category select dropdown */
.wh-cat-select-wrap { position: relative; flex-shrink: 0; }
.wh-cat-selected {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border: 1.5px solid var(--line); border-radius: 9px;
  font-size: 12px; font-weight: 700; cursor: pointer; white-space: nowrap;
  background: var(--surface); color: var(--ink);
  transition: border-color .12s;
  user-select: none;
}
.wh-cat-selected:hover, .wh-cat-box-open { border-color: var(--blue); }
.wh-cat-sel-count {
  font-size: 11px; font-weight: 700;
  background: var(--blue); color: #fff;
  border-radius: 99px; padding: 1px 7px; margin-left: 2px;
}
.wh-cat-chevron { font-size: 10px; color: var(--muted); margin-left: 2px; }

.wh-cat-dropdown {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 400;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 240px; overflow: hidden;
  display: none;
}
.wh-cat-dropdown.wh-cat-dd-open { display: block; }
/* Search inside dropdown */
.wh-cat-dd-search-wrap {
  padding: 8px 10px 6px; border-bottom: 1px solid var(--line);
}
.wh-cat-dd-search {
  width: 100%; padding: 6px 10px; box-sizing: border-box;
  border: 1.5px solid var(--line); border-radius: 8px;
  font-size: 12px; outline: none; background: #f8fafc; color: var(--ink);
  transition: border-color .12s;
}
.wh-cat-dd-search:focus { border-color: var(--blue); background: #fff; }
.wh-cat-dd-list { max-height: 280px; overflow-y: auto; }
.wh-cat-dd-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px; cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .1s;
}
.wh-cat-dd-item:hover { background: var(--surface-soft); }
.wh-cat-dd-item.wh-cat-dd-active { background: color-mix(in srgb, var(--cc, var(--blue)) 10%, transparent); color: var(--cc, var(--blue)); font-weight: 700; }
.wh-cat-dd-cnt {
  margin-left: auto; font-size: 11px; font-weight: 700;
  background: var(--surface-soft); border-radius: 99px; padding: 1px 7px;
}
.wh-cat-dd-item.wh-cat-dd-active .wh-cat-dd-cnt { background: color-mix(in srgb, var(--cc, var(--blue)) 15%, transparent); }

/* Dot categorie în tabel */
.wh-mat-name-row { display: flex; align-items: center; gap: 7px; }
.wh-mat-cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Category picker în editorul de material */
.me-cat-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.me-cat-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 10px; border-radius: 10px; cursor: pointer;
  font-size: 11px; font-weight: 600;
  border: 1.5px solid var(--line); background: none; color: var(--muted);
  transition: all .12s; text-align: left;
}
.me-cat-btn:hover { border-color: var(--cat-c); color: var(--cat-c); background: color-mix(in srgb, var(--cat-c) 8%, transparent); }
.me-cat-btn.me-cat-active { background: var(--cat-c); color: #fff; border-color: var(--cat-c); }

@keyframes material-enter {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes meter-grow {
  from {
    width: 0;
  }
  to {
    width: var(--meter-width);
  }
}

.home-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.home-day {
  min-height: 260px;
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(248, 250, 251, 0.94));
}

.home-day.today {
  border-color: rgba(31, 122, 92, 0.45);
  box-shadow: inset 0 0 0 2px rgba(31, 122, 92, 0.08);
}

.home-day-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.home-day-head strong {
  text-transform: capitalize;
}

.home-day-head span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #172534;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.home-day-list {
  display: grid;
  gap: 9px;
}

.home-job {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: var(--radius);
  background: #fff;
  border-left: 4px solid var(--blue);
  box-shadow: 0 8px 18px rgba(16, 25, 35, 0.06);
  animation: card-enter 420ms ease both;
}

.home-job.blocked {
  border-left-color: var(--red);
  background: linear-gradient(135deg, #fff, #fff4f4);
}

.home-job strong {
  padding-right: 28px;
  font-size: 13px;
}

.home-job span {
  color: var(--muted);
  font-size: 12px;
}

.blocked-icon {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--red);
  animation: alert-pulse 1.3s ease-in-out infinite;
}

.blocked-icon .icon {
  width: 14px;
  height: 14px;
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes avatar-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes pulse-green {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(34, 182, 111, 0.16);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(34, 182, 111, 0.04);
  }
}

@keyframes pulse-red {
  0%,
  100% {
    box-shadow: 0 0 0 6px rgba(189, 64, 64, 0.12);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(189, 64, 64, 0.04);
  }
}

@keyframes blocked-pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}

@keyframes alert-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(189, 64, 64, 0.34);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 8px rgba(189, 64, 64, 0);
  }
}

.account-chip strong,
.account-chip span {
  display: block;
}

.account-chip span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}


.account-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(135deg, var(--green), var(--blue));
  font-size: 12px;
  font-weight: 900;
}

.select-label,
.field label,
.form-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  padding: 10px 12px;
  outline: none;
}

select:focus,
input:focus,
textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(40, 101, 178, 0.14);
}

textarea {
  min-height: 94px;
  resize: vertical;
}

.view {
  display: none;
}

.active-view {
  display: block;
}

.grid {
  display: grid;
  gap: 16px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.two-col {
  grid-template-columns: minmax(0, 1.22fr) minmax(330px, 0.78fr);
}

.three-col {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: 20px;
}

.card.elevated {
  box-shadow: var(--shadow);
}

.stat-card {
  min-height: 124px;
  display: grid;
  gap: 12px;
  align-content: space-between;
  position: relative;
  overflow: hidden;
}

.stat-card::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: rgba(31, 122, 92, 0.08);
}

.stat-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.stat-head span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.stat-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: #edf5f1;
  color: var(--green);
  animation: soft-pop 2.2s ease-in-out infinite;
}

@keyframes soft-pop {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

.stat-icon.blue {
  background: #edf4ff;
  color: var(--blue);
}

.stat-icon.amber {
  background: #fff3e4;
  color: var(--amber);
}

.stat-icon.red {
  background: #fff0f0;
  color: var(--red);
}

.stat-card strong {
  position: relative;
  z-index: 1;
  font-size: 34px;
}

.muted {
  color: var(--muted);
}

.list {
  display: grid;
  gap: 10px;
}

.row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.row.clean {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  padding: 12px 0;
}

.row.clean:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 9px;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  border-radius: 999px;
  padding: 3px 10px;
  background: #eaeff4;
  color: #576472;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.pill.ok {
  color: var(--green);
  background: var(--green-light);
}

.pill.warn {
  color: var(--amber);
  background: var(--amber-light);
}

.pill.danger {
  color: var(--red);
  background: var(--red-light);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  background: var(--surface);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
  transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
  box-shadow: var(--shadow-xs);
}

.btn:hover {
  border-color: var(--blue);
  background: var(--blue-light);
  color: var(--blue);
  box-shadow: none;
}

.btn.primary {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26, 122, 90, 0.25);
}

.btn.primary:hover {
  background: var(--green-dark);
  border-color: var(--green-dark);
  box-shadow: 0 2px 8px rgba(26, 122, 90, 0.35);
}

.btn.warning {
  border-color: rgba(192, 115, 24, 0.3);
  background: var(--amber-light);
  color: var(--amber);
  box-shadow: none;
}

.btn.danger {
  border-color: rgba(184, 59, 59, 0.28);
  background: var(--red-light);
  color: var(--red);
  box-shadow: none;
}

#logout-btn {
  border-color: rgba(189, 64, 64, 0.22);
  color: var(--red);
  background: #fff7f7;
}

#logout-btn:hover {
  border-color: var(--red);
  background: #fff0f0;
}

.toolbar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
}

.toolbar h2 {
  margin-bottom: 0;
}

.toolbar .eyebrow {
  margin-bottom: 3px;
}

.form-grid {
  display: grid;
  gap: 12px;
}

.form-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.project-card,
.task-card {
  display: grid;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.project-list,
.dispatch-list,
.issue-list,
.schedule-strip {
  display: grid;
  gap: 12px;
}

.appointment-card {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background:
    linear-gradient(90deg, rgba(40, 101, 178, 0.08), transparent),
    #fff;
}

.appointment-card p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.time-badge {
  display: grid;
  place-items: center;
  align-content: center;
  min-height: 70px;
  border-radius: var(--radius);
  background: #172534;
  color: #fff;
  font-weight: 900;
}

.time-badge span {
  display: block;
  margin-top: 3px;
  color: #aebdca;
  font-size: 12px;
  font-weight: 800;
}

/* ── CALENDAR PAGE ───────────────────────────────────── */
/* ─── Calendar Pro ─────────────────────────────────────────────────────── */
.calp {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Stats bar */
.calp-statsbar {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  animation: calp-fade-in 300ms ease;
}

.calp-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 28px;
  flex: 1;
  transition: background 150ms;
  cursor: default;
}

.calp-stat-item:hover { background: var(--surface-soft); }

.calp-stat-sep {
  width: 1px;
  height: 32px;
  background: var(--line);
  flex-shrink: 0;
}

.calp-stat-n {
  font-size: 26px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

.calp-stat-l {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.calp-stat-item.ok .calp-stat-n  { color: var(--green); }
.calp-stat-item.danger .calp-stat-n { color: var(--red); }
.calp-stat-item.clients .calp-stat-n { color: #5b3fc4; }

/* Body: grid + panel */
.calp-body {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 16px;
  align-items: start;
}

.calp-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Grid wrapper */
.calp-grid-wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: calp-fade-in 300ms ease;
}

/* Month navigation */
.calp-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--line);
  gap: 8px;
}

/* Left/Right arrow buttons */
.calp-nav-arrow {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
  flex-shrink: 0;
}
.calp-nav-arrow svg { width: 18px; height: 18px; }
.calp-nav-arrow:hover { background: var(--line); color: var(--ink); }
.calp-nav-arrow:active { transform: scale(.93); }

/* Center: month title */
.calp-nav-center {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  justify-content: center;
}

.calp-month-title {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 10px;
  transition: background .15s;
}
.calp-month-title:hover { background: var(--line); }
.calp-month-name {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.3px;
  text-transform: capitalize;
}
.calp-year-badge {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: -.2px;
}
.calp-chevron {
  width: 10px; height: 10px;
  color: var(--muted);
  transition: transform .2s;
}
.calp-month-title:hover .calp-chevron { transform: translateY(1px); }

.calp-today-btn {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--green);
  background: var(--green-light);
  border: 1.5px solid rgba(26,122,90,.18);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.calp-today-btn:hover { background: #d3ede5; transform: scale(1.04); }
.calp-quick-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 4px;
}
.calp-quick-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  color: #2563b0;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 14px rgba(15, 25, 35, .06);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}
.calp-quick-btn svg {
  width: 17px;
  height: 17px;
}
.calp-quick-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(37, 99, 176, .14);
}
.calp-quick-btn.search { color: #0f766e; background: #f0fdfa; }
.calp-quick-btn.mic { color: #7c3aed; background: #f5f3ff; }

/* Right side of nav */
.calp-nav-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Employee filter button — default (no filter) */
.calp-emp-btn {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: none;
  background: transparent;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--muted);
  transition: background .15s, color .15s;
}
.calp-emp-btn svg { width: 18px; height: 18px; }
.calp-emp-btn:hover { background: var(--line); color: var(--ink); }

/* Employee filter button — active (filter ON) */
.calp-emp-active {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 20px;
  border: 1.5px solid #2563b0;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  max-width: 140px;
}
.calp-emp-active:hover { background: #dbeafe; }
.calp-emp-ini {
  width: 22px; height: 22px;
  border-radius: 7px;
  background: #1d4ed8;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.calp-emp-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calp-emp-x { width: 10px; height: 10px; flex-shrink: 0; opacity: .6; }

/* Weekday headers */
.calp-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.calp-wd {
  padding: 9px 0;
  text-align: center;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
}

/* Day grid */
.calp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  animation: calp-grid-in 280ms cubic-bezier(0.2, 0, 0, 1);
}

@keyframes calp-grid-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes calp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.calp-grid.slide-out-left {
  animation: calp-slide-left 120ms ease forwards;
}

.calp-grid.slide-out-right {
  animation: calp-slide-right 120ms ease forwards;
}

@keyframes calp-slide-left {
  to { opacity: 0; transform: translateX(-20px); }
}

@keyframes calp-slide-right {
  to { opacity: 0; transform: translateX(20px); }
}

/* Day cell */
.calp-cell {
  min-height: 100px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 6px 6px;
  cursor: pointer;
  transition: background 140ms, transform 120ms, box-shadow 140ms;
  position: relative;
  transform-style: preserve-3d;
  perspective: 400px;
}

.calp-cell:nth-child(7n) { border-right: none; }

/* Remove bottom border on last row cells */
.calp-grid > .calp-cell:nth-last-child(-n+7) { border-bottom: none; }

.calp-cell:hover {
  background: rgba(26,122,90,0.03);
  z-index: 1;
}

.calp-cell.other-month { background: var(--surface-soft); }
.calp-cell.other-month .calp-dn { color: var(--muted); opacity: 0.45; }

.calp-cell.is-today { background: rgba(26,122,90,0.04); }

.calp-cell.is-selected {
  background: rgba(37,99,176,0.05);
  box-shadow: inset 0 0 0 2px rgba(37,99,176,0.25);
}

.calp-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.calp-dn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink-soft);
  transition: background 150ms, color 150ms, transform 150ms;
  flex-shrink: 0;
}

.calp-cell:hover .calp-dn {
  transform: scale(1.08);
}

.calp-cell.is-today .calp-dn {
  background: var(--green);
  color: #fff;
  box-shadow: 0 2px 8px rgba(26,122,90,0.35);
}

.calp-cell.is-selected .calp-dn {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 2px 8px rgba(37,99,176,0.35);
}

.calp-cell.is-today.is-selected .calp-dn {
  background: var(--blue);
}

.calp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calp-dot.ok     { background: var(--green); }
.calp-dot.warn   { background: var(--amber); }
.calp-dot.danger { background: var(--red); }

/* Appointment pills in cell */
.calp-evts {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 3px 3px;
}

/* Base pill */
.calp-evt {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 5px 3px 7px;
  border-radius: 6px;
  border-left: 3px solid;
  overflow: hidden;
  animation: calp-evt-in 180ms ease;
  cursor: pointer;
  transition: filter 120ms, transform 100ms;
  min-width: 0;
}
.calp-evt:hover { filter: brightness(.93); transform: scaleX(.98); }

@keyframes calp-evt-in {
  from { opacity: 0; transform: scaleX(0.75); transform-origin: left; }
  to   { opacity: 1; transform: scaleX(1); }
}

/* 🔵 In lucru / Programat */
.calp-evt.evt-active {
  border-color: #2563b0;
  background: #dbeafe;
  color: #1e3a8a;
}
/* 🟢 Finalizat */
.calp-evt.evt-done {
  border-color: #16a34a;
  background: #dcfce7;
  color: #14532d;
}
/* 🔴 Blocat / Anulat */
.calp-evt.evt-blocked {
  border-color: #dc2626;
  background: #fee2e2;
  color: #7f1d1d;
}

.calp-ev-time {
  font-size: 9px;
  font-weight: 800;
  opacity: .75;
  flex-shrink: 0;
  letter-spacing: .2px;
}
.calp-ev-lbl {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calp-ev-avs {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: 2px;
}
.calp-ev-av {
  width: 14px; height: 14px;
  border-radius: 4px;
  font-size: 7px; font-weight: 800;
  color: #fff;
  display: grid; place-items: center;
  margin-left: -3px;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}
.calp-ev-avs .calp-ev-av:first-child { margin-left: 0; }

.calp-evt-more {
  font-size: 10px;
  font-weight: 700;
  color: #6b7a8d;
  padding: 2px 6px;
  cursor: pointer;
  background: #f1f4f8;
  border-radius: 5px;
  text-align: center;
}

/* Right panel */
.calp-panel {
  animation: calp-panel-in 250ms cubic-bezier(0.2, 0, 0, 1);
  overflow: hidden;
}

@keyframes calp-panel-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.calp-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--line);
}

.calp-panel-head p.eyebrow { margin: 0 0 3px; }

.calp-panel-date {
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  text-transform: capitalize;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.calp-panel-rows {
  display: flex;
  flex-direction: column;
}

.calp-prow {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  transition: background 130ms;
  animation: calp-prow-in 200ms ease;
}

@keyframes calp-prow-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.calp-prow:last-child { border-bottom: none; }
.calp-prow:hover { background: var(--surface-soft); }
.calp-prow.ok   { border-left-color: var(--green); }
.calp-prow.info { border-left-color: var(--blue); }
.calp-prow.danger { border-left-color: var(--red); }

.calp-prow-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 38px;
  flex-shrink: 0;
  padding-top: 1px;
}

.calp-prow-time strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.calp-prow-time span {
  font-size: 10px;
  color: var(--muted);
}

.calp-prow-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.calp-prow-body > strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.calp-prow-body > span {
  font-size: 11.5px;
  color: var(--muted);
}

.calp-prow-team {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.calp-prow-emp {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  transition: transform 150ms;
}

.calp-prow-emp:hover { transform: scale(1.15); }

.calp-prow-emp.on {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green-dark);
}

.calp-panel-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 32px 20px;
  text-align: center;
  animation: calp-fade-in 250ms ease;
}

.calp-panel-empty-icon {
  font-size: 32px;
  margin-bottom: 4px;
  filter: grayscale(0.3);
}

.calp-panel-empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.calp-panel-empty span {
  font-size: 12px;
  color: var(--muted);
}

/* ─── Appointment Cards (panel detail) ──────────────────────────────────── */
.calp-acard {
  display: flex;
  gap: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin: 10px 14px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  animation: calp-acard-in 240ms cubic-bezier(0.2,0,0,1) both;
  transition: box-shadow 150ms, transform 150ms;
}

@keyframes calp-acard-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.calp-acard:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.calp-acard-band {
  width: 4px;
  flex-shrink: 0;
  background: var(--amber);
}

.calp-acard.ok   .calp-acard-band { background: var(--green); }
.calp-acard.info .calp-acard-band { background: var(--blue); }
.calp-acard.danger .calp-acard-band { background: var(--red); }

.calp-acard-inner {
  flex: 1;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.calp-acard-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.calp-acard-time-block {
  display: flex;
  align-items: center;
  gap: 5px;
}

.calp-acard-start {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.calp-acard-arrow {
  font-size: 12px;
  color: var(--muted);
}

.calp-acard-end {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

.calp-acard-dur {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 4px;
}

.calp-acard-client {
  display: flex;
  align-items: center;
  gap: 10px;
}

.calp-acard-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.calp-acard-client > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.calp-acard-client strong {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calp-acard-client span {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
}

.calp-acard-addr {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  color: var(--muted);
}

.calp-acard-addr .icon {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
}

.calp-acard-team {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 4px;
  border-top: 1px dashed var(--line);
}

.calp-acard-emp {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  transition: background 130ms, border-color 130ms;
}

.calp-acard-emp.on {
  background: var(--green-light);
  border-color: rgba(26,122,90,0.25);
}

.calp-acard-emp-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  display: grid;
  place-items: center;
  text-transform: uppercase;
}

.calp-acard-emp.on .calp-acard-emp-av {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.calp-acard-emp-nm {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-soft);
}

.calp-acard-emp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.calp-acard-emp-dot.green { background: var(--green); }
.calp-acard-emp-dot.red   { background: var(--red); }

/* Stats bar as buttons */
.calp-stat-item[data-calstat] {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
  transition: background 150ms, transform 120ms;
}

.calp-stat-item[data-calstat]:hover {
  background: var(--surface-soft);
  transform: translateY(-1px);
}

.calp-stat-item[data-calstat]:active { transform: scale(0.96); }

/* ─── Calendar Modal ──────────────────────────────────────────────────────── */
.calp-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(10, 20, 35, 0);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: background 260ms ease;
  pointer-events: none;
}

.calp-modal-overlay.is-open {
  background: rgba(10, 20, 35, 0.45);
  backdrop-filter: blur(4px);
  pointer-events: all;
}
.cal-quick-popup {
  position: fixed;
  z-index: 2600;
  border: 1px solid #dbe4ee;
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 24px 70px rgba(15, 25, 35, .22);
  opacity: 0;
  transform: translateY(-6px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
  overflow: hidden;
}
.cal-quick-popup.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.cqp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: linear-gradient(135deg, #0f766e, #2563b0);
  border-bottom: 1px solid #e4eaf0;
}
.cqp-head strong { display: block; color: #fff; font-size: 15px; font-weight: 900; }
.cqp-head span { display: block; color: rgba(255,255,255,.76); font-size: 11px; font-weight: 700; margin-top: 2px; }
.cqp-close {
  width: 28px; height: 28px;
  border: 0; border-radius: 9px;
  background: rgba(255,255,255,.16); color: #fff;
  cursor: pointer; font-weight: 900;
}
.ccs-search {
  display: flex; align-items: center; gap: 8px;
  margin: 12px 12px 10px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.ccs-search svg { width: 16px; height: 16px; color: #0f766e; }
.ccs-search input {
  border: 0; outline: 0; flex: 1;
  font: inherit; font-size: 12px; font-weight: 800;
}
.ccs-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 360px;
  max-height: 520px;
  border-top: 1px solid #eef2f7;
}
.ccs-list {
  border-right: 1px solid #e4eaf0;
  overflow: auto;
  background: #f8fafc;
}
.ccs-client-row {
  width: 100%;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  background: transparent;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  text-align: left;
  cursor: pointer;
}
.ccs-client-row:hover { background: #fff; }
.ccs-avatar {
  width: 34px; height: 34px; border-radius: 11px;
  background: linear-gradient(135deg, #0f766e, #2563b0);
  color: #fff; display: grid; place-items: center;
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}
.ccs-client-row strong,
.ccs-card strong,
.ccs-activity strong { display: block; color: #0f1923; font-size: 12.5px; font-weight: 900; line-height: 1.2; }
.ccs-client-row small,
.ccs-card span,
.ccs-activity span,
.ccs-card em,
.ccs-activity em { display: block; color: #64748b; font-size: 10.5px; font-weight: 700; margin-top: 2px; }
.ccs-detail { padding: 14px; overflow: auto; background: #fff; }
.ccs-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #e4eaf0;
  padding-bottom: 12px;
  margin-bottom: 12px;
}
.ccs-detail-head strong { display: block; color: #0f1923; font-size: 18px; font-weight: 900; }
.ccs-detail-head span, .ccs-placeholder { color: #64748b; font-size: 12px; font-weight: 700; }
.ccs-kicker {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.ccs-summary {
  display: flex;
  align-items: center;
  gap: 7px;
}
.ccs-summary span {
  min-width: 62px;
  border: 1px solid #dbe4ee;
  border-radius: 11px;
  background: #f8fafc;
  color: #0f1923;
  padding: 7px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 900;
}
.ccs-summary small {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 800;
}
.ccs-section { display: grid; gap: 8px; margin-bottom: 14px; }
.ccs-section > b { color: #173b4f; font-size: 10px; font-weight: 900; letter-spacing: .35px; text-transform: uppercase; }
.ccs-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.ccs-card, .ccs-activity {
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
  text-align: left;
}
.ccs-card.project { background: linear-gradient(135deg, #ffffff, #f8fbff); }
.ccs-activity { cursor: pointer; }
.ccs-activity:hover { border-color: #2563b0; background: #f0f7ff; }
.voice-card { display: grid; gap: 10px; padding: 12px; }
.voice-status {
  display: grid;
  grid-template-columns: 10px 1fr;
  column-gap: 8px;
  row-gap: 2px;
  align-items: center;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
  padding: 9px 10px;
}
.voice-status strong {
  color: #0f1923;
  font-size: 12px;
  font-weight: 900;
}
.voice-status small {
  grid-column: 2;
  color: #64748b;
  font-size: 10.5px;
  font-weight: 750;
}
.voice-dot {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.14);
}
.voice-status[data-state="listening"] .voice-dot {
  background: #7c3aed;
  box-shadow: 0 0 0 4px rgba(124,58,237,.14);
  animation: voice-pulse 900ms ease infinite;
}
.voice-status[data-state="error"] .voice-dot {
  background: #dc2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,.14);
}
@keyframes voice-pulse {
  0%, 100% { transform: scale(1); opacity: .8; }
  50% { transform: scale(1.45); opacity: 1; }
}
.voice-start, .voice-save {
  border: 0; border-radius: 12px;
  font: inherit; font-weight: 900; cursor: pointer;
}
.voice-start {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 12px; background: linear-gradient(135deg, #7c3aed, #2563b0); color: #fff;
}
.voice-start.listening {
  background: linear-gradient(135deg, #dc2626, #7c3aed);
}
.voice-start svg { width: 18px; height: 18px; }
.voice-examples {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.voice-examples button {
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  color: #173b4f;
  padding: 7px 8px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 900;
  cursor: pointer;
}
.voice-examples button:hover {
  border-color: #7c3aed;
  background: #f5f3ff;
}
.voice-card textarea {
  min-height: 92px; border: 1px solid #dbe4ee; border-radius: 12px;
  padding: 10px; resize: vertical; font: inherit; font-size: 12px; font-weight: 750; outline: 0;
}
.voice-save { padding: 10px 12px; background: #dcfce7; color: #166534; }
.voice-preview {
  border: 1px solid #e4eaf0; border-radius: 12px; background: #f8fafc;
  padding: 10px; display: grid; gap: 3px; color: #475569; font-size: 11px; font-weight: 750;
}
.voice-preview strong { color: #0f1923; font-size: 12px; font-weight: 900; }
.voice-preview.ok {
  border-color: rgba(22,163,74,.28);
  background: #f0fdf4;
}
.voice-preview em {
  color: #b91c1c;
  font-style: normal;
  font-weight: 900;
}

.calp-modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(10,20,35,0.22), 0 8px 24px rgba(10,20,35,0.12);
  width: 100%;
  max-width: 560px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.92) translateY(24px);
  opacity: 0;
  transition: transform 260ms cubic-bezier(0.2,0,0,1), opacity 260ms ease;
}

.calp-modal-overlay.is-open .calp-modal {
  transform: scale(1) translateY(0);
  opacity: 1;
}

.calp-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.calp-modal-head h3 {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}

.calp-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background 150ms, color 150ms, transform 120ms;
  flex-shrink: 0;
}

.calp-modal-close:hover {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(184,59,59,0.3);
  transform: scale(1.08);
}

.calp-modal-body {
  overflow-y: auto;
  flex: 1;
}

/* Modal appointment rows */
.calmodal-rows {
  display: flex;
  flex-direction: column;
}

.calmodal-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  transition: background 120ms;
  animation: calp-acard-in 200ms ease both;
}

.calmodal-row:last-child { border-bottom: none; }
.calmodal-row:hover { background: var(--surface-soft); }
.calmodal-row.ok     { border-left-color: var(--green); }
.calmodal-row.info   { border-left-color: var(--blue); }
.calmodal-row.danger { border-left-color: var(--red); }

.calmodal-row-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
  flex-shrink: 0;
}

.calmodal-row-date strong {
  font-size: 20px;
  font-weight: 900;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -0.03em;
}

.calmodal-row-date span {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1.4;
}

.calmodal-row-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.calmodal-row-head {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}

.calmodal-row-icon { font-size: 16px; }

.calmodal-row-head strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.calmodal-row-type {
  font-size: 11px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.calmodal-row-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.calmodal-row-time {
  font-size: 12px;
  font-weight: 700;
  color: var(--green-dark);
}

.calmodal-row-addr {
  font-size: 11.5px;
  color: var(--muted);
}

.calmodal-row-team {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}

.calmodal-emp {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 800;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  cursor: default;
  transition: transform 150ms;
}

.calmodal-emp:hover { transform: scale(1.2); }
.calmodal-emp.on {
  background: var(--green-light);
  border-color: var(--green);
  color: var(--green-dark);
}

.calmodal-empty {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-style: italic;
}

/* Clients modal */
.calmodal-clients { display: flex; flex-direction: column; }

.calmodal-client-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  transition: background 120ms;
}

.calmodal-client-row:last-child { border-bottom: none; }
.calmodal-client-row:hover { background: var(--surface-soft); }

.calmodal-client-row.active-today {
  background: var(--green-light);
}

.calmodal-client-av {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: #5b3fc4;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.calmodal-client-info {
  flex: 1;
  min-width: 0;
}

.calmodal-client-info strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}

.calmodal-client-info span {
  font-size: 12px;
  color: var(--muted);
}

.calmodal-client-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ─── Calendar full-width (no right panel) ────────────────────────────── */
.calp-body { display: block; }

/* ─── Day Popup ────────────────────────────────────────────────────────── */
.day-popup {
  position: fixed;
  z-index: 400;
  width: 320px;
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(10,20,35,0.18), 0 4px 16px rgba(10,20,35,0.1);
  border: 1px solid var(--line);
  overflow: visible;
  opacity: 0;
  transform: scale(0.94) translateY(-8px);
  transform-origin: top center;
  transition: opacity 200ms ease, transform 200ms cubic-bezier(0.2,0,0,1);
  pointer-events: none;
}

.day-popup.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

.dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, #f8fafc 0%, #f0f4f8 100%);
}

.dp-head-date {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dp-day-num {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--green);
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(26,122,90,0.3);
}

.dp-head-date strong {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--ink);
  text-transform: capitalize;
}

.dp-head-date span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  text-transform: capitalize;
}

.dp-close {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--muted);
  transition: background 130ms, color 130ms, transform 120ms;
  flex-shrink: 0;
}

.dp-close:hover {
  background: var(--red-light);
  color: var(--red);
  border-color: rgba(184,59,59,0.3);
  transform: scale(1.1) rotate(90deg);
}

.dp-events {
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dp-event {
  display: flex;
  gap: 0;
  width: 100%;
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: background 120ms;
  animation: calp-acard-in 180ms ease both;
}

.dp-event:last-child { border-bottom: none; }
.dp-event:hover { background: var(--surface-soft); }
.dp-event.is-expanded {
  background: linear-gradient(90deg, rgba(26,122,90,.08), rgba(37,99,176,.06));
}
.dp-event.is-expanded .dp-event-band {
  width: 5px;
}

.dp-event-band {
  width: 3px;
  flex-shrink: 0;
  background: var(--amber);
}

.dp-event.ok     .dp-event-band { background: var(--green); }
.dp-event.info   .dp-event-band { background: var(--blue); }
.dp-event.danger .dp-event-band { background: var(--red); }

.dp-event-body {
  padding: 10px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.dp-event-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.dp-event-time {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

.dp-event-pill { font-size: 10px !important; padding: 1px 7px !important; }

.dp-event-title {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dp-event-ico { font-size: 15px; }

.dp-event-title strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-event-type {
  font-size: 10.5px;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 5px;
  white-space: nowrap;
}

.dp-event-addr {
  margin: 0;
  font-size: 11px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dp-event-team {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.dp-emp {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--line);
  color: var(--muted);
  font-size: 7.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
  text-transform: uppercase;
  cursor: default;
  transition: transform 150ms;
}

.dp-emp:hover { transform: scale(1.2); }
.dp-emp.on { background: var(--green-light); border-color: var(--green); color: var(--green-dark); }

.dp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 28px 16px;
  text-align: center;
}

.dp-empty span { font-size: 28px; }
.dp-empty p { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); }

.dp-inline-detail {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  padding: 0;
  animation: dp-detail-in 180ms ease both;
  overflow: visible;
}
.dp-inline-det-header {
  border-radius: 0;
  padding: 12px 14px 10px;
}
.dp-inline-det-body {
  padding: 0;
}
.dp-inline-detail .det-row {
  padding: 12px 14px;
}
.dp-inline-detail .det-client {
  font-size: 17px;
}
.dp-inline-detail .det-proj-name {
  font-size: 11px;
}
.dp-inline-detail .det-edit {
  min-height: 34px;
}
.dp-inline-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.dp-inline-head strong,
.dp-inline-head small {
  display: block;
}
.dp-inline-head strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 900;
  margin-top: 5px;
}
.dp-inline-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  margin-top: 2px;
}
.dp-inline-edit {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #173b4f, #1f7a73);
  color: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 8px 10px;
  flex-shrink: 0;
}
.dp-inline-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.dp-inline-status {
  min-height: 32px;
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  padding: 0 8px;
  color: #173b4f;
}
.dp-inline-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.dp-inline-grid > div,
.dp-inline-note {
  border: 1px solid #dbe4ee;
  border-radius: 11px;
  background: #fff;
  padding: 8px 9px;
}
.dp-inline-grid span,
.dp-inline-note span {
  display: block;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.dp-inline-grid strong {
  display: block;
  color: #0f1923;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.3;
  margin-top: 3px;
}
.dp-inline-note {
  margin-top: 8px;
}
.dp-inline-note.danger {
  border-color: rgba(220,38,38,.22);
  background: #fff7f7;
}
.dp-inline-note p {
  margin: 4px 0 0;
  color: #334155;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.35;
}
.dp-inline-note.danger p {
  color: #991b1b;
}
@keyframes dp-detail-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.dp-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface-soft);
}

.dp-add-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius);
  border: 1px dashed rgba(26,122,90,0.4);
  background: var(--green-light);
  color: var(--green-dark);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, border-color 150ms, transform 120ms, box-shadow 150ms;
}

.dp-add-btn:hover {
  background: #d3ede5;
  border-color: var(--green);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(26,122,90,0.15);
}

.dp-add-btn:active { transform: scale(0.97); }

/* ─── Add Appointment Modal ─────────────────────────────────────────────── */
.rpt-picker-v2 {
  border: 1px solid rgba(203, 213, 225, .9);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 70px rgba(15,25,35,.24), 0 4px 18px rgba(15,25,35,.08);
  overflow: hidden;
}
.rpt-picker-v2 .rpt-head {
  padding: 14px 16px;
  background: linear-gradient(135deg, #173b4f, #1f7a73);
}
.rpt-picker-v2 .rpt-head p {
  margin: 3px 0 0;
  color: rgba(255,255,255,.78);
  font-size: 11px;
  font-weight: 700;
}
.rpt-tools {
  display: grid;
  grid-template-columns: 1fr 92px 150px auto;
  align-items: end;
  gap: 8px;
  padding: 10px 12px;
  background: #f7fbfd;
  border-bottom: 1px solid #e4eaf0;
}
.rpt-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rpt-presets button,
.rpt-weekly-btn {
  border: 1px solid #cfe3df;
  border-radius: 10px;
  background: #fff;
  color: #1f7a73;
  cursor: pointer;
  font-family: inherit;
  font-size: 10px;
  font-weight: 900;
  padding: 8px 9px;
}
.rpt-presets button:hover,
.rpt-weekly-btn:hover {
  background: #e8f7f5;
}
.rpt-duration,
.rpt-until {
  display: flex;
  flex-direction: column;
  gap: 3px;
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
}
.rpt-duration select,
.rpt-until input {
  border: 1px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  color: #0f1923;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  min-height: 32px;
  padding: 6px 7px;
}
.rpt-layout {
  display: grid;
  grid-template-columns: 1fr 250px;
  min-height: 315px;
}
.rpt-calendar-panel {
  padding: 10px 10px 12px;
  border-right: 1px solid #e4eaf0;
}
.rpt-picker-v2 .rpt-cal-nav {
  padding: 4px 4px 10px;
  border-bottom: 0;
}
.rpt-picker-v2 .rpt-nav-btn {
  border-radius: 10px;
  background: #eef6f6;
  color: #1f7a73;
  font-weight: 900;
}
.rpt-picker-v2 .rpt-grid {
  gap: 5px;
  padding: 6px 0 0;
}
.rpt-picker-v2 .rpt-wd-row {
  padding: 0;
}
.rpt-picker-v2 .rpt-day {
  min-height: 38px;
  aspect-ratio: auto;
  border: 1px solid transparent;
  border-radius: 11px;
  background: #f8fafc;
  display: grid;
}
.rpt-picker-v2 .rpt-day small {
  color: inherit;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: .75;
}
.rpt-picker-v2 .rpt-day:hover {
  background: #e8f7f5;
  color: #0f766e;
  border-color: #b8e1dc;
}
.rpt-picker-v2 .rpt-day.sel {
  background: linear-gradient(135deg, #0f766e, #2563b0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 7px 15px rgba(37,99,176,.25);
}
.rpt-selected-panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #f8fafc;
}
.rpt-selected-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 13px 13px 8px;
}
.rpt-selected-head strong {
  color: #0f1923;
  font-size: 13px;
  font-weight: 900;
}
.rpt-selected-head span {
  border-radius: 999px;
  background: #dff5ef;
  color: #0f766e;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 900;
}
.rpt-selected-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 0 12px 12px;
  max-height: 268px;
  overflow: auto;
}
.rpt-selected-row {
  display: grid;
  grid-template-columns: 1fr 72px 72px 24px;
  align-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid #dce7ef;
  border-radius: 13px;
  background: #fff;
}
.rpt-conflict {
  grid-column: 1 / -1;
  border-radius: 9px;
  background: #fff1f2;
  color: #be123c;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.35;
  padding: 6px 8px;
}
.rpt-selected-date strong {
  display: block;
  color: #0f1923;
  font-size: 12px;
  font-weight: 900;
}
.rpt-selected-date span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  margin-top: 1px;
}
.rpt-selected-row label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rpt-selected-row label span {
  color: #94a3b8;
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
}
.rpt-selected-row input {
  width: 100%;
  border: 1px solid #dbe4ee;
  border-radius: 8px;
  background: #f8fafc;
  color: #0f1923;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  padding: 5px 4px;
}
.rpt-selected-row input:focus {
  outline: none;
  border-color: #1f7a73;
  background: #fff;
}
.rpt-picker-v2 .rpt-chip-del {
  width: 22px;
  height: 22px;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  display: grid;
  place-items: center;
  font-weight: 900;
}
.rpt-empty {
  border: 1px dashed #cbd5e1;
  border-radius: 13px;
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  padding: 18px 12px;
  text-align: center;
}
.rpt-picker-v2 .rpt-foot {
  padding: 12px 14px;
  background: #fff;
}
.rpt-picker-v2 .rpt-confirm {
  background: linear-gradient(135deg, #173b4f, #1f7a73);
}

@media (max-width: 720px) {
  .rpt-tools {
    grid-template-columns: 1fr 1fr;
  }
  .rpt-presets {
    grid-column: 1 / -1;
  }
  .rpt-layout {
    grid-template-columns: 1fr;
  }
  .rpt-calendar-panel {
    border-right: 0;
    border-bottom: 1px solid #e4eaf0;
  }
  .rpt-selected-row {
    grid-template-columns: 1fr 70px 70px 24px;
  }
}

.cam-dialog {
  max-width: 860px;
  width: 98vw;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Gradient hero header — compact */
.cam-hero {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: linear-gradient(135deg, #0d5c3a 0%, #1a7a5a 50%, #2563b0 100%);
  flex-shrink: 0;
}

.cam-hero-date {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.cam-hero-num {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.3);
  color: #fff;
  font-size: 18px; font-weight: 900;
  display: grid; place-items: center;
  flex-shrink: 0;
  animation: cam-pop-in 400ms cubic-bezier(.2,0,0,1);
}

@keyframes cam-pop-in {
  from { transform: scale(0.6) rotate(-10deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

.cam-hero-labels strong { display: block; font-size: 13px; font-weight: 800; color: #fff; text-transform: capitalize; }
.cam-hero-labels span   { display: block; font-size: 10px; color: rgba(255,255,255,.7); text-transform: capitalize; }

.cam-hero-title {
  flex: 1; margin: 0;
  font-size: 16px; font-weight: 900; color: #fff;
  letter-spacing: -.02em; text-align: center;
}

.cam-x {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.1);
  color: #fff; cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .15s, transform .15s;
}
.cam-x svg { width: 14px; height: 14px; }
.cam-x:hover { background: rgba(255,255,255,.25); transform: scale(1.1) rotate(90deg); }

/* Form body — flex, no outer scroll */
.cam-body {
  flex: 1;
  overflow: hidden;
  padding: 12px 16px 12px;
  background: #f8fafc;
}

.cam-block {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.cam-lbl {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  margin-bottom: 1px;
}
.cam-lbl-icon { font-size: 12px; }

.cam-select,
.cam-input {
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px; font-weight: 600;
  font-family: inherit;
  transition: border-color .18s, box-shadow .18s;
  width: 100%;
}
.cam-select:focus, .cam-input:focus {
  outline: none;
  border-color: #2563b0;
  box-shadow: 0 0 0 3px rgba(37,99,176,.1);
}

/* Two-column form layout — fills body height */
.cam-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  height: 100%;
}

.cam-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

/* Date & time */
.cam-dt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.cam-dt-field { display: flex; flex-direction: column; gap: 3px; }
.cam-dt-field span {
  font-size: 9px; font-weight: 700;
  color: var(--muted); text-transform: uppercase; letter-spacing: .05em;
}

/* Team grid — horizontal strip */
.cam-team-grid2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
}

/* Client selector box */
.cam-client-box {
  border: 2px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface-soft);
  transition: border-color 180ms;
}

.cam-client-box:focus-within { border-color: var(--green); }

.cam-client-selected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--green-light);
  border-bottom: 1px solid rgba(26,122,90,0.15);
}

.cam-cs-av {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: #5b3fc4;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cam-cs-info { flex: 1; min-width: 0; }
.cam-cs-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--ink); }
.cam-cs-info span   { display: block; font-size: 11px; color: var(--muted); }

.cam-cs-clear {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: none;
  background: rgba(26,122,90,0.15);
  color: var(--green-dark);
  font-size: 11px;
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background 130ms;
}
.cam-cs-clear:hover { background: rgba(26,122,90,0.3); }

.cam-client-search-wrap {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.cam-client-search-wrap svg {
  width: 15px; height: 15px;
  color: var(--muted);
  flex-shrink: 0;
}

.cam-client-search {
  border: none;
  background: transparent;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink);
  width: 100%;
  outline: none;
}

.cam-client-search::placeholder { color: var(--muted); }

.cam-proj-list {
  max-height: 120px;
  overflow-y: auto;
}

.cam-proj-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .12s;
  border-bottom: 1px solid var(--line);
}
.cam-proj-row:last-child { border-bottom: none; }
.cam-proj-row:hover { background: var(--green-light); }

.cam-proj-av {
  width: 30px; height: 30px;
  border-radius: 7px;
  background: #5b3fc4;
  color: #fff;
  font-size: 10px; font-weight: 800;
  display: grid; place-items: center;
  flex-shrink: 0;
}

.cam-proj-info { flex: 1; min-width: 0; }
.cam-proj-info strong { display: block; font-size: 12.5px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-proj-info span   { display: block; font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.cam-proj-check {
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line);
  background: var(--surface);
  display: grid; place-items: center;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 130ms, background 130ms, border-color 130ms;
}
.cam-proj-check svg { width: 9px; height: 9px; color: var(--green); }
.cam-proj-row:hover .cam-proj-check { opacity: 1; background: var(--green-light); border-color: var(--green); }

.cam-add-client-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 9px;
  border: none;
  background: var(--surface-soft);
  color: var(--green-dark);
  font-size: 12.5px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 130ms;
  border-top: 1px dashed rgba(26,122,90,0.3);
}
.cam-add-client-btn svg { width: 14px; height: 14px; }
.cam-add-client-btn:hover { background: var(--green-light); }

/* New client inline form */
.cam-new-client-form {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.cam-nc-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 2px;
}

.cam-nc-btns .cam-btn-cancel {
  padding: 6px 14px;
  font-size: 12px;
}

.cam-nc-btns .cam-btn-save {
  padding: 6px 14px;
  font-size: 12px;
}

/* Type section spacing */
.cam-type-section { margin-top: 12px; }

.cam-section-hint {
  font-style: italic;
  font-weight: 400;
  font-size: 10px;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  margin-left: 2px;
}

/* ─── Type card grid ────────────────────────────────────────────────── */
.cam-tgrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}

/* Sisteme grid — 4 items, slightly taller icons */
.cam-tgrid-sis .cam-tcard-ico { font-size: 20px; }

.cam-tcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 8px 4px 7px;
  border: 2px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  cursor: pointer;
  position: relative;
  transition: border-color 160ms, background 160ms, transform 140ms, box-shadow 160ms;
  font-family: inherit;
}

.cam-tcard:hover {
  border-color: var(--line-strong);
  background: var(--surface);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.cam-tcard.selected {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
}

.cam-tcard-ico {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 18px;
  transition: transform 160ms;
}

.cam-tcard.selected .cam-tcard-ico { transform: scale(1.1); }

.cam-tcard-lbl {
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-soft);
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
}

.cam-tcard.selected .cam-tcard-lbl { color: var(--ink); }

.cam-tcard-ck {
  position: absolute;
  top: 4px; right: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--line);
  display: grid; place-items: center;
  opacity: 0;
  transition: opacity 150ms, background 150ms, border-color 150ms;
}
.cam-tcard-ck svg { width: 8px; height: 8px; }
.cam-tcard.selected .cam-tcard-ck { opacity: 1; background: var(--green); border-color: var(--green); stroke: white; }
.cam-tcard.selected .cam-tcard-ck svg { stroke: white; }

.cam-type-count {
  font-size: 10px;
  font-weight: 700;
  color: var(--green-dark);
  text-transform: none;
  letter-spacing: 0;
}

/* Note textarea */
.cam-textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-family: inherit;
  resize: none;
  transition: border-color .18s, box-shadow .18s;
  line-height: 1.5;
  flex: 1;
  min-height: 56px;
}

.cam-textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(26,122,90,0.12);
}

.cam-textarea::placeholder { color: var(--muted); opacity: 0.7; }

/* Note in day popup */
.dp-event-note {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--ink-soft);
  background: var(--surface-soft);
  border-left: 2px solid var(--line-strong);
  padding: 3px 7px;
  border-radius: 0 4px 4px 0;
  font-style: italic;
  white-space: pre-wrap;
}

/* 4-column fields row (legacy, kept) */
.cam-fields-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
}

/* Team cards — horizontal row */
.cam-team-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.cam-emp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px 6px;
  border: 2px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color .18s, background .18s, transform .2s cubic-bezier(.2,0,0,1), box-shadow .18s;
  text-align: center;
  position: relative;
  background: #fff;
  animation: cam-emp-in 300ms cubic-bezier(.2,0,0,1) both;
}

@keyframes cam-emp-in {
  from { opacity: 0; transform: translateY(12px) scale(0.9); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.cam-emp-card:nth-child(1) { animation-delay: 50ms; }
.cam-emp-card:nth-child(2) { animation-delay: 100ms; }
.cam-emp-card:nth-child(3) { animation-delay: 150ms; }
.cam-emp-card:nth-child(4) { animation-delay: 200ms; }
.cam-emp-card:nth-child(5) { animation-delay: 250ms; }

.cam-emp-card input[type="checkbox"] { display: none; }

.cam-emp-check {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line);
  background: var(--surface);
  display: grid;
  place-items: center;
  transition: background 180ms, border-color 180ms, transform 200ms;
}

.cam-emp-check svg { width: 8px; height: 8px; opacity: 0; transition: opacity 150ms; color: #fff; }

.cam-emp-card:hover {
  border-color: rgba(26,122,90,0.4);
  background: var(--surface);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(26,122,90,0.12);
}

.cam-emp-card:has(input:checked) {
  border-color: var(--green);
  background: var(--green-light);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(26,122,90,0.2);
}

.cam-emp-card:has(input:checked) .cam-emp-check {
  background: var(--green);
  border-color: var(--green);
  transform: scale(1.1);
}

.cam-emp-card:has(input:checked) .cam-emp-check svg { opacity: 1; }

.cam-emp-av {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green), #2563b0);
  color: #fff;
  font-size: 12px; font-weight: 900;
  display: grid; place-items: center;
  text-transform: uppercase;
  transition: transform .2s, box-shadow .2s;
}
.cam-emp-card:has(input:checked) .cam-emp-av { transform: scale(1.08); }

.cam-emp-card strong { font-size: 11px; font-weight: 800; color: var(--ink); }
.cam-emp-role { font-size: 9px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 70px; }

.cam-emp-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background 180ms;
}

.cam-emp-dot.on { background: var(--green); box-shadow: 0 0 5px rgba(26,122,90,0.5); }

/* Actions row */
.cam-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cam-btn-cancel {
  padding: 10px 20px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 150ms, border-color 150ms;
  font-family: inherit;
}

.cam-btn-cancel:hover { background: var(--bg); border-color: var(--line-strong); }

.cam-btn-save {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1a7a5a, #2563b0);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 150ms, box-shadow 150ms, filter 150ms;
  box-shadow: 0 4px 16px rgba(26,122,90,0.3);
  font-family: inherit;
}

.cam-btn-save svg { width: 16px; height: 16px; }
.cam-btn-save:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(26,122,90,0.4); }
.cam-btn-save:active { transform: scale(0.97); }

.cam-btn-save.saved {
  background: linear-gradient(135deg, #1a7a5a, #1a7a5a);
  animation: cam-saved-pulse 600ms ease;
}

@keyframes cam-saved-pulse {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* ─── Calendar Page Layout (old grid, now unused — keeping for safety) ── */
.cal-page {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}

.cal-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.cal-right {
  display: grid;
  gap: 16px;
}

/* Agenda Header */
.cal-agenda-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid var(--line);
}

.cal-agenda-header h2 { margin: 0; }

/* Week Strip */
.cal-week-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--line);
  background: var(--surface-soft);
}

.cal-strip-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 6px 8px;
  border-right: 1px solid var(--line);
  cursor: default;
}

.cal-strip-day:last-child { border-right: none; }

.csd-name {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.csd-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}

.cal-strip-day.today .csd-num {
  background: var(--green);
  color: #fff;
}

.cal-strip-day.today .csd-name {
  color: var(--green-dark);
}

.csd-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
}

.cal-strip-day.today .csd-dot {
  background: var(--green);
}

/* Agenda Body */
.cal-agenda {
  display: flex;
  flex-direction: column;
}

.agenda-day {
  border-bottom: 1px solid var(--line);
}

.agenda-day:last-child { border-bottom: none; }

.agenda-day-label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 8px;
  background: var(--surface-soft);
  border-bottom: 1px solid var(--line);
}

.agenda-day.is-today .agenda-day-label {
  background: var(--green-light);
  border-bottom-color: rgba(26,122,90,0.15);
}

.agenda-day-info {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.agenda-day-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  text-transform: capitalize;
}

.agenda-day.is-today .agenda-day-name {
  color: var(--green-dark);
}

.agenda-day-date {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  text-transform: capitalize;
}

.agenda-day-count {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
}

.agenda-day.is-today .agenda-day-count {
  background: var(--green);
}

.agenda-rows {
  display: flex;
  flex-direction: column;
}

.agenda-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 20px;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid var(--amber);
  transition: background 120ms;
}

.agenda-row:last-child { border-bottom: none; }
.agenda-row:hover { background: var(--surface-soft); }

.agenda-row.ok   { border-left-color: var(--green); }
.agenda-row.info { border-left-color: var(--blue); }
.agenda-row.danger { border-left-color: var(--red); }

.agenda-time {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 42px;
  flex-shrink: 0;
  padding-top: 1px;
}

.agenda-time strong {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  line-height: 1.2;
}

.agenda-time span {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 500;
}

.agenda-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.agenda-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.agenda-title strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
}

.agenda-type {
  font-size: 11px;
  color: var(--muted);
  font-weight: 500;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1px 6px;
}

.agenda-addr {
  margin: 0;
  font-size: 11.5px;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 3px;
}

.agenda-addr svg { flex-shrink: 0; }

.agenda-team {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.agenda-emp {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--muted);
  background: var(--surface-soft);
}

.agenda-emp.on {
  color: var(--green-dark);
  background: var(--green-light);
  border-color: rgba(26,122,90,0.2);
}

.agenda-status { flex-shrink: 0; margin-top: 2px; }

.agenda-empty {
  margin: 0;
  padding: 10px 20px;
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}

/* Clienti activi */
.cal-clients-list {
  display: grid;
  gap: 2px;
  padding: 6px 8px;
}

.cal-client-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 120ms;
}

.cal-client-row:hover { background: var(--surface-soft); }

.cal-client-row.active-today {
  background: var(--green-light);
  border-color: rgba(26,122,90,0.15);
}

.cal-client-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: #5b3fc4;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.cal-client-info { flex: 1; min-width: 0; }

.cal-client-info strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-client-info span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

/* Employee checkboxes */
.employee-checkboxes {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}

.emp-check-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: background 120ms, border-color 120ms;
  font-weight: normal;
  color: var(--ink);
}

.emp-check-row:hover {
  background: var(--surface-soft);
  border-color: var(--line-strong);
}

.emp-check-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--green);
  flex-shrink: 0;
  cursor: pointer;
}

.emp-check-row:has(input:checked) {
  background: var(--green-light);
  border-color: rgba(26,122,90,0.25);
}

.emp-check-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.emp-check-info {
  flex: 1;
  min-width: 0;
}

.emp-check-info strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}

.emp-check-info span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.emp-check-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.emp-check-dot.green { background: var(--green); }
.emp-check-dot.red { background: var(--red); }

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(118px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.day-card {
  min-height: 200px;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.day-card.today {
  border-color: var(--green);
  background: var(--green-light);
}

.day-card.today .day-head {
  border-bottom-color: rgba(26,122,90,0.2);
}

.day-card.today .day-head strong {
  color: var(--green-dark);
}

.day-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

.day-head strong {
  text-transform: capitalize;
}

.day-head span,
.kanban-head span {
  min-width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #172534;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.calendar-item {
  display: grid;
  gap: 3px;
  padding: 9px;
  border-radius: var(--radius);
  background: #fff;
  border-left: 4px solid var(--green);
  box-shadow: 0 4px 12px rgba(16, 25, 35, 0.05);
}

.calendar-item strong {
  color: var(--green-dark);
  font-size: 13px;
}

.calendar-item span,
.small {
  font-size: 12px;
}

.kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.kanban-col {
  min-height: 360px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius);
  background: #f2f5f7;
  border: 1px solid var(--line);
}

.kanban-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}

.mini-task {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 5px 14px rgba(16, 25, 35, 0.05);
}

.mini-task span {
  color: var(--muted);
  font-size: 13px;
}

/* Taskuri - pagina operationala */
.tasks-page {
  display: grid;
  gap: 14px;
}

.tasks-hero {
  display: grid;
  grid-template-columns: minmax(180px, auto) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(37, 99, 176, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(26, 122, 90, 0.12), rgba(37, 99, 176, 0.12)),
    var(--surface);
  box-shadow: var(--shadow-xs);
}

.tasks-eyebrow {
  display: block;
  margin-bottom: 2px;
  color: var(--green);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.tasks-hero h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
}

.tasks-hero p {
  max-width: 720px;
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.tasks-search {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-xs);
}

.tasks-search .icon {
  width: 16px;
  height: 16px;
  color: var(--blue);
  flex-shrink: 0;
}

.tasks-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.tasks-search input::placeholder {
  color: #8a9aad;
}

.tasks-total {
  min-width: 74px;
  padding: 8px 10px;
  border: 1px solid rgba(26, 122, 90, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.82);
  text-align: center;
  box-shadow: var(--shadow-xs);
}

.tasks-total strong {
  display: block;
  color: var(--green-dark);
  font-size: 22px;
  line-height: 1;
}

.tasks-total span {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 800;
}

.tasks-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
}

.tasks-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 86px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.tasks-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.tasks-stat-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

.tasks-stat-icon .icon {
  width: 19px;
  height: 19px;
}

.tasks-stat span.tasks-stat-emoji {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  font-size: 23px;
  line-height: 1;
  margin-top: 0;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.6), 0 2px 6px rgba(15,23,42,.06);
  transition: transform 150ms ease;
}
.tasks-stat span.tasks-stat-emoji svg {
  width: 22px;
  height: 22px;
}
.tasks-stat:hover .tasks-stat-emoji {
  transform: scale(1.1);
}

.tasks-stat strong {
  display: block;
  font-size: 26px;
  line-height: 1;
}

.tasks-stat span {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 900;
  color: var(--ink);
}

.tasks-stat small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 700;
}

.tasks-stat.blue {
  border-top: 3px solid var(--blue);
}
.tasks-stat.blue .tasks-stat-icon {
  background: var(--blue-light);
  color: var(--blue);
}
.tasks-stat.blue strong {
  color: var(--blue);
}

.tasks-stat.red {
  border-top: 3px solid var(--red);
}
.tasks-stat.red .tasks-stat-icon {
  background: var(--red-light);
  color: var(--red);
}
.tasks-stat.red strong {
  color: var(--red);
}

.tasks-stat.amber {
  border-top: 3px solid var(--amber);
}
.tasks-stat.amber .tasks-stat-icon {
  background: var(--amber-light);
  color: var(--amber);
}
.tasks-stat.amber strong {
  color: var(--amber);
}

.tasks-stat.green {
  border-top: 3px solid var(--green);
}
.tasks-stat.green .tasks-stat-icon {
  background: var(--green-light);
  color: var(--green);
}
.tasks-stat.green strong {
  color: var(--green);
}

.tasks-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
  align-items: start;
}

.tasks-layout-full {
  grid-template-columns: 1fr;
}

.tasks-work-list {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.taskwork-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.taskwork-card.has-blocked {
  border-color: rgba(184, 59, 59, 0.28);
  box-shadow: 0 0 0 1px rgba(184, 59, 59, 0.06), var(--shadow-xs);
}

.taskwork-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto auto;
  gap: 10px;
  align-items: center;
  padding: 12px 14px;
  background:
    linear-gradient(135deg, rgba(26, 122, 90, 0.08), rgba(37, 99, 176, 0.08)),
    #fff;
  cursor: pointer;
  list-style: none;
}

.taskwork-head::-webkit-details-marker {
  display: none;
}

.taskwork-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
}

.has-blocked .taskwork-icon {
  background: var(--red-light);
  color: var(--red);
}

.taskwork-icon .icon {
  width: 18px;
  height: 18px;
}

.taskwork-icon-emoji {
  font-size: 20px;
  line-height: 1;
  border-radius: 12px;
}
.taskwork-icon-emoji svg {
  width: 20px;
  height: 20px;
}

.taskwork-client {
  display: block;
  margin-bottom: 3px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

.taskwork-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 15.5px;
  line-height: 1.2;
}

.taskwork-head p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 700;
}

.taskwork-progress {
  min-width: 78px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.taskwork-progress strong {
  display: block;
  color: var(--blue);
  font-size: 17px;
  line-height: 1;
}

.taskwork-progress span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskwork-open {
  min-width: 98px;
  padding: 7px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.taskwork-card[open] .taskwork-open {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
}

.taskwork-open .opened {
  display: none;
}

.taskwork-card[open] .taskwork-open .closed {
  display: none;
}

.taskwork-card[open] .taskwork-open .opened {
  display: inline;
}

.taskwork-bar {
  height: 5px;
  background: #e8edf3;
}

.taskwork-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--blue));
  border-radius: 0 999px 999px 0;
}

.taskwork-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: #fbfcfe;
}

.taskwork-meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(10, 20, 35, 0.04);
}

.taskwork-meta .icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.taskwork-meta .tone-blue {
  color: #1354a3;
  background: #e7f0ff;
  border-color: #b8d2f4;
}

.taskwork-meta .tone-amber {
  color: #9a5208;
  background: #fff0d8;
  border-color: #f0c178;
}

.taskwork-meta .tone-red {
  color: #a52d2d;
  background: #ffe7e7;
  border-color: #efb2b2;
}

.taskwork-meta .tone-green {
  color: #116247;
  background: #e2f7ee;
  border-color: #9fd9c3;
}

.taskwork-meta .tone-team {
  color: #405168;
  background: #f3f6fa;
  border-color: #ccd7e4;
}

.taskwork-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid #9fd9c3;
  border-radius: 999px;
  background: #e2f7ee;
  color: #116247;
  font-size: 12px;
  font-weight: 900;
  box-shadow: 0 1px 0 rgba(10, 20, 35, 0.04);
}

.taskwork-add .icon {
  width: 14px;
  height: 14px;
}

.taskwork-add:hover {
  background: #d1f0e3;
  border-color: #78c7aa;
}

.taskwork-table {
  display: grid;
}

.taskwork-table-head,
.taskrow {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) minmax(170px, 0.75fr) 110px 140px;
  align-items: center;
  gap: 12px;
}

.taskwork-table-head {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
  color: #52657b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskrow {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  background: #fff;
  cursor: pointer;
  transition: background 140ms ease, box-shadow 140ms ease;
}

.taskrow:last-child {
  border-bottom: none;
}

.taskrow:hover {
  background: #f8fbff;
  box-shadow: inset 3px 0 0 rgba(37, 99, 176, 0.35);
}

.taskrow-main {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  min-width: 0;
}

.taskrow-dot {
  width: 9px;
  height: 9px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 176, 0.12);
}

.taskrow-in-lucru .taskrow-dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(192, 115, 24, 0.14);
}

.taskrow-blocat .taskrow-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(184, 59, 59, 0.14);
}

.taskrow-finalizat .taskrow-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(26, 122, 90, 0.14);
}

.taskrow-main strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.25;
}

.taskrow-kind {
  display: block;
  margin-bottom: 7px;
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.taskrow-notes {
  width: 100%;
  min-height: 36px;
  max-height: 82px;
  padding: 7px 9px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.35;
}

.taskrow-notes:focus {
  outline: none;
  border-color: rgba(37, 99, 176, 0.5);
  box-shadow: 0 0 0 3px rgba(37, 99, 176, 0.12);
  background: #fff;
}

.taskrow-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.taskrow-avatar {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.taskrow-person strong {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.2;
}

.taskrow-person small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.taskrow-priority,
.taskrow-priority-select {
  justify-self: start;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--amber-light);
  color: var(--amber);
  font-size: 11px;
  font-weight: 900;
}

.taskrow-priority-select {
  width: 100%;
  min-height: 38px;
  border: 1px solid #e6b76a;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
}

.taskrow-priority.ridicata,
.taskrow-priority-select.ridicata {
  background: var(--red-light);
  color: var(--red);
  border-color: #e6a1a1;
}

.taskrow-priority.scazuta,
.taskrow-priority-select.scazuta {
  background: var(--green-light);
  color: var(--green);
  border-color: #94d2b8;
}

.taskrow-status select {
  width: 100%;
  height: 38px;
  border: 1px solid #b8c6d6;
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  padding: 0 10px;
  box-shadow: var(--shadow-xs);
}

.taskrow-status-select.nou {
  border-color: #9fc3ef;
  background: #eef6ff;
  color: #155ca8;
}

.taskrow-status-select.in-lucru {
  border-color: #e6b76a;
  background: #fff3dc;
  color: #8b4b05;
}

.taskrow-status-select.blocat {
  border-color: #e6a1a1;
  background: #fff0f0;
  color: #a52d2d;
}

.taskrow-status-select.finalizat {
  border-color: #94d2b8;
  background: #e9f8f0;
  color: #116247;
}

.taskcreate-overlay {
  position: fixed;
  inset: 0;
  z-index: 7100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 20, 35, 0.46);
  opacity: 0;
  transition: opacity 160ms ease;
}

.taskcreate-overlay.is-open {
  opacity: 1;
}

.taskcreate-modal {
  width: min(940px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 26px 78px rgba(10, 20, 35, 0.26);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

.taskcreate-overlay.is-open .taskcreate-modal {
  transform: none;
}

.taskcreate-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: linear-gradient(135deg, #167052, #2464a9);
  color: #fff;
}

.taskcreate-head span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.86;
}

.taskcreate-head h3 {
  margin: 0;
  font-size: 23px;
  line-height: 1.15;
}

.taskcreate-head p {
  margin: 5px 0 0;
  font-size: 13px;
  font-weight: 800;
  opacity: 0.86;
}

.taskcreate-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.taskcreate-body {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 126px);
  overflow: auto;
  padding: 18px 22px 20px;
  background: #f5f8fb;
}

.taskcreate-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.taskcreate-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.taskcreate-num {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}

.taskcreate-section-head strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
}

.taskcreate-section-head small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.taskcreate-grid {
  display: grid;
  gap: 10px;
}

.taskcreate-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.taskcreate-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.taskcreate-body label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskcreate-body input,
.taskcreate-body select,
.taskcreate-body textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.taskcreate-body input,
.taskcreate-body select {
  height: 40px;
  padding: 0 10px;
}

.taskcreate-body textarea {
  min-height: 82px;
  padding: 10px;
  resize: vertical;
  line-height: 1.4;
}

.task-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.task-action-chip {
  position: relative;
  min-height: 94px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 5px;
  padding: 11px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff, #f8fbff);
  color: var(--ink);
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.task-action-chip:hover,
.task-action-chip.is-selected {
  transform: translateY(-2px);
  border-color: #8db9ee;
  box-shadow: 0 10px 22px rgba(37, 99, 176, 0.12);
}

.task-action-chip.is-selected {
  background: linear-gradient(180deg, #eef6ff, #fff);
}

.task-action-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-light);
  color: var(--blue);
  animation: task-icon-float 2.8s ease-in-out infinite;
}

.task-action-icon .icon {
  width: 17px;
  height: 17px;
}

@keyframes task-icon-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

.task-action-chip strong {
  max-width: 100%;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.2;
}

.task-action-chip small {
  max-width: 100%;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 850;
}

.task-new-action {
  border: 1px dashed #b8d2f4;
  border-radius: var(--radius);
  background: #f8fbff;
  padding: 10px;
}

.task-new-action summary {
  cursor: pointer;
  color: var(--blue);
  font-size: 12.5px;
  font-weight: 900;
}

.task-new-action[open] summary {
  margin-bottom: 10px;
}

.task-add-action-btn {
  margin-top: 10px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid #9fd9c3;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

.taskcreate-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 4px;
}

.taskcreate-secondary,
.taskcreate-save {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 900;
}

.taskcreate-secondary {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.taskcreate-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #1d5ea8;
  background: linear-gradient(135deg, #1a7a5a, #2563b0);
  color: #fff;
  box-shadow: 0 10px 22px rgba(37, 99, 176, 0.18);
}

/* ===== TASK CREATE v2 — calendar-style popup ===== */
.taskcreate-overlay.is-open .tc-dialog {
  transform: none;
}

.tc-dialog {
  width: min(1020px, 100%);
  max-height: min(860px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(10, 20, 35, 0.28);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

/* Hero header — same gradient as calendar popup */
.tc-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 17px;
  background: linear-gradient(135deg, #167052 0%, #1665b5 100%);
  color: #fff;
  flex-shrink: 0;
}

.tc-hero-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  flex-shrink: 0;
}
.tc-hero-icon svg { width: 22px; height: 22px; }

.tc-hero-text { flex: 1; }
.tc-hero-text span {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .78;
}
.tc-hero-text strong {
  display: block;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.2;
  margin-top: 2px;
}

.tc-hero-x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  flex-shrink: 0;
  transition: background 140ms;
}
.tc-hero-x:hover { background: rgba(255,255,255,.22); }
.tc-hero-x svg { width: 16px; height: 16px; }

/* Project search row */
.tc-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 22px;
  border-bottom: 1px solid var(--line);
  background: #f5f8fb;
  flex-shrink: 0;
}
.tc-search-row svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }
.tc-proj-select {
  flex: 1;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 800;
}

/* Body */
.tc-body {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* 3-column layout */
.tc-cols {
  flex: 1;
  display: grid;
  grid-template-columns: 310px 1fr 230px;
  overflow: hidden;
}

.tc-col-left {
  overflow-y: auto;
}

.tc-sis-subtitle {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 6px;
}

/* Project count badge */
.tc-proj-badge {
  font-size: 11px;
  font-weight: 900;
  color: #0369a1;
  background: #e0f2fe;
  border: 1px solid #bae6fd;
  border-radius: 20px;
  padding: 2px 10px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Category grid */
.tc-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.tc-cat-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 9px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, box-shadow 120ms;
  line-height: 1.2;
}
.tc-cat-btn:hover {
  border-color: #8db9ee;
  box-shadow: 0 3px 10px rgba(37,99,176,.1);
}
.tc-cat-btn.selected {
  border-color: var(--blue);
  background: #eef6ff;
  box-shadow: 0 3px 10px rgba(37,99,176,.12);
}
.tc-cat-ico {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 16px;
  flex-shrink: 0;
}

/* ===== TEAM PAGE v2 (tm2) ===== */

/* Hero band with inline KPIs */
.tm2-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(135deg, #f0f7ff, #f2fcf7);
  box-shadow: var(--shadow-xs);
}
.tm2-hero-text h2 { margin: 2px 0 4px; font-size: 22px; }
.tm2-hero-text p { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--muted); max-width: 430px; }
.tm2-hero-kpis {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.tm2-kpi {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 86px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.tm2-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tm2-kpi-ico {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
}
.tm2-kpi-ico svg { width: 17px; height: 17px; }
.tm2-kpi strong { font-size: 18px; font-weight: 900; color: var(--ink); line-height: 1; }
.tm2-kpi > span:last-child { font-size: 10px; font-weight: 850; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* Status pills (read-only — pontajul vine din aplicatia sefului) */
.tm2-status-pill {
  padding: 4px 11px;
  border-radius: 16px;
  font-size: 10.5px;
  font-weight: 900;
  background: var(--bg-alt);
  color: var(--muted);
  border: 1px solid var(--line-strong);
  white-space: nowrap;
}
.tm2-status-pill.on { background: #dcfce7; color: #15803d; border-color: #86efac; }
.tm2-status-pill.big { padding: 6px 13px; font-size: 11.5px; text-align: center; }
.tm2-auto-note { font-size: 10px; font-weight: 750; color: var(--muted); font-style: italic; }

/* Attendance report */
.att-report {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.att-report-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: #fbfdff;
}
.att-report-head h3 { margin: 0 0 3px; font-size: 15px; font-weight: 900; }
.att-report-head p { margin: 0; font-size: 11.5px; font-weight: 700; color: var(--muted); }
.att-period {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.att-presets { display: flex; gap: 5px; }
.att-preset {
  height: 32px;
  padding: 0 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 16px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 120ms, color 120ms;
}
.att-preset:hover { border-color: var(--blue); color: var(--blue); }
.att-range {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
}
.att-range input {
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.att-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 16px;
  border: 1px solid #1d5ea8;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #1a7a5a, #2563b0);
  color: #fff;
  font-size: 12.5px;
  font-weight: 900;
  cursor: pointer;
}
.att-export-btn:hover { opacity: .9; }
.att-export-btn svg { width: 15px; height: 15px; }
.att-table-wrap { overflow-x: auto; }
.att-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.att-table th {
  padding: 9px 10px;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
  text-align: center;
  white-space: nowrap;
}
.att-table th:first-child { text-align: left; padding-left: 18px; }
.att-table th.att-today { color: var(--blue); background: #eef6ff; }
.att-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: center;
  font-weight: 800;
}
.att-name {
  text-align: left !important;
  padding-left: 18px !important;
  white-space: nowrap;
}
.att-name small { display: block; font-size: 10px; font-weight: 700; color: var(--muted); }
.att-group-row td {
  background: #f0f7ff;
  text-align: left;
  padding-left: 18px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--blue);
}
.att-full { color: #15803d; background: #f2fdf6; }
.att-part { color: #b45309; background: #fffbeb; }
.att-zero { color: #cbd5e1; }
.att-total { font-weight: 900 !important; color: var(--ink); background: var(--bg-alt); }
.att-leader-row .att-name { font-weight: 900; }

.team-kpi-ico {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  flex-shrink: 0;
}
.team-kpi-ico svg { width: 20px; height: 20px; }
.team-search svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; }

.tm2-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 14px;
}

.tm2-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: box-shadow 150ms ease, transform 150ms ease;
}
.tm2-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.tm2-card.is-online { border-top: 3px solid #22c55e; }
.tm2-card.is-offline { border-top: 3px solid var(--line-strong); }

.tm2-head {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
.tm2-avatar {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--green-light));
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 900;
  color: var(--blue);
  flex-shrink: 0;
  overflow: visible;
}
.tm2-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.tm2-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
}
.tm2-dot.on { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.tm2-dot-av {
  position: absolute;
  bottom: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
}
.tm2-id { flex: 1; min-width: 0; }
.tm2-id strong { display: block; font-size: 15px; font-weight: 900; }
.tm2-id span { display: block; font-size: 11.5px; font-weight: 750; color: var(--muted); }
.tm2-id small { display: block; font-size: 11px; font-weight: 800; margin-top: 2px; }
.tm2-head-actions { display: flex; flex-direction: column; gap: 5px; align-items: stretch; }

.tm2-pont-btn {
  padding: 6px 13px;
  border-radius: 18px;
  font-size: 11.5px;
  font-weight: 900;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: opacity 120ms;
  white-space: nowrap;
}
.tm2-pont-btn:hover { opacity: .85; }
.tm2-pont-btn.in  { background: #dcfce7; color: #15803d; border-color: #86efac; }
.tm2-pont-btn.out { background: #fee2e2; color: #b91c1c; border-color: #fca5a5; }

.tm2-label {
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.tm2-work, .tm2-activity {
  padding: 9px 11px;
  border-radius: var(--radius-sm);
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tm2-work strong { font-size: 13px; font-weight: 850; }
.tm2-work small, .tm2-activity small { font-size: 11.5px; font-weight: 700; color: var(--muted); }

.tm2-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.tm2-metrics span {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 7px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.tm2-metrics strong { font-size: 16px; font-weight: 900; color: var(--ink); }
.tm2-metrics small { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.tm2-metrics span.danger strong { color: var(--red); }

.tm2-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 10px;
  background: #fbfdff;
}
.tm2-members-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.tm2-team-pont {
  padding: 5px 11px;
  border-radius: 16px;
  font-size: 10.5px;
  font-weight: 900;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.tm2-team-pont.in  { background: #15803d; color: #fff; }
.tm2-team-pont.out { background: #fff; color: #b91c1c; border-color: #fca5a5; }
.tm2-team-pont:hover { opacity: .85; }

.tm2-member {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.tm2-member.on { border-color: #bbf7d0; background: #f4fdf7; }
.tm2-member-av {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  font-size: 10.5px;
  font-weight: 900;
  color: var(--muted);
  flex-shrink: 0;
}
.tm2-member-id { flex: 1; min-width: 0; }
.tm2-member-id strong { display: block; font-size: 12.5px; font-weight: 850; }
.tm2-member-id small { font-size: 10.5px; font-weight: 700; color: var(--muted); }
.tm2-member .tm2-pont-btn { padding: 4px 10px; font-size: 10.5px; }
.tm2-no-members {
  font-size: 11.5px;
  font-weight: 750;
  color: var(--muted);
  text-align: center;
  padding: 6px;
}

.tm2-add-member {
  display: flex;
  gap: 6px;
}
.tm2-add-member input {
  flex: 1;
  height: 32px;
  padding: 0 10px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 750;
  background: #fff;
}
.tm2-add-member button {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid #86efac;
  background: #dcfce7;
  color: #15803d;
  font-size: 16px;
  font-weight: 900;
  cursor: pointer;
}

.tm2-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.tm2-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 850;
  border-radius: 14px;
  padding: 4px 10px;
  background: var(--bg-alt);
  color: var(--muted);
}
.tm2-tags svg { width: 13px; height: 13px; }

/* Professional inline SVG icons in colored tiles — global sizing */
.cam-tcard-ico svg,
.tc-cat-ico svg,
.tc-sugg-ico svg,
.tcard-ico svg,
.td-action-ico svg,
.tc-action-ico svg {
  width: 60%;
  height: 60%;
  display: block;
}
.td-hero-icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

/* Auto-detected category card */
.tc-cat-detected {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
}
.tc-cat-detected .tc-cat-ico {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  font-size: 19px;
}
.tc-cat-ico-empty {
  background: var(--bg-alt);
  color: var(--muted);
  filter: grayscale(1);
  opacity: .7;
}
.tc-cat-detected-txt strong {
  display: block;
  font-size: 13px;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.2;
}
.tc-cat-detected-txt small {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
}

/* Smart search input */
.tc-smart-search {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  transition: border-color 120ms;
}
.tc-smart-search:focus-within {
  border-color: var(--blue);
  box-shadow: 0 0 0 2px rgba(37,99,176,.08);
}
.tc-smart-search svg { width: 15px; height: 15px; color: var(--muted); flex-shrink: 0; }
.tc-smart-search input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 13px;
  font-weight: 750;
  color: var(--ink);
}

/* Task suggestions list */
.tc-suggestions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  flex-shrink: 0;
}
.tc-sugg-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  cursor: pointer;
  text-align: left;
  transition: background 100ms, border-color 100ms;
}
.tc-sugg-item:hover { background: #f0f7ff; border-color: #8db9ee; }
.tc-sugg-ico {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.tc-sugg-label {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
}
.tc-sugg-cat {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--muted);
  background: var(--bg-alt);
  border-radius: 10px;
  padding: 2px 7px;
}

/* Materials results */
.tc-mat-results {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 160px;
  overflow-y: auto;
  flex-shrink: 0;
}
.tc-mat-row {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
  flex-wrap: wrap;
}
.tc-mat-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  margin-top: 4px;
  flex-shrink: 0;
}
.tc-mat-dot.green { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.tc-mat-dot.red   { background: #ef4444; box-shadow: 0 0 0 2px #fee2e2; }
.tc-mat-name {
  flex: 1;
  font-size: 12.5px;
  font-weight: 800;
  color: var(--ink);
  min-width: 0;
}
.tc-mat-qty {
  font-size: 11.5px;
  font-weight: 900;
  border-radius: 10px;
  padding: 2px 8px;
  flex-shrink: 0;
}
.tc-mat-qty.qty-ok  { background: #dcfce7; color: #15803d; }
.tc-mat-qty.qty-no  { background: #fee2e2; color: #dc2626; }
.tc-mat-locs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: 100%;
  margin-top: 2px;
}
.tc-mat-loc {
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 8px;
  padding: 2px 7px;
}

/* No results / no emp messages */
.tc-no-sugg, .tc-no-emp {
  font-size: 12px;
  font-weight: 750;
  color: var(--muted);
  padding: 8px 4px;
  text-align: center;
}

.tc-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.tc-col:last-child { border-right: none; }

.tc-col-title {
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 2px;
}

/* Action cards (like cam-tcard) */
.tc-action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.tc-action-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px 9px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  text-align: center;
  transition: border-color 130ms, box-shadow 130ms, background 130ms;
}
.tc-action-card:hover {
  border-color: #8db9ee;
  box-shadow: 0 6px 18px rgba(37,99,176,.1);
}
.tc-action-card.is-selected {
  border-color: var(--blue);
  background: #eef6ff;
  box-shadow: 0 6px 18px rgba(37,99,176,.12);
}

.tc-action-ico {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  font-size: 20px;
  flex-shrink: 0;
  transition: transform 160ms;
  line-height: 1;
}
.tc-action-card.is-selected .tc-action-ico { transform: scale(1.1); }
.tc-action-ico .icon { width: 18px; height: 18px; }

.tc-action-lbl {
  font-size: 11.5px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink);
}

.tc-action-ck {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--blue);
  display: none;
  place-items: center;
}
.tc-action-ck svg { width: 9px; height: 9px; stroke: #fff; }
.tc-action-card.is-selected .tc-action-ck { display: grid; }

/* "Actiune noua" details expandable */
.tc-new-action {
  border: 1px dashed #b8d2f4;
  border-radius: var(--radius-sm);
  background: #f8fbff;
  padding: 8px 10px;
  font-size: 12px;
}
.tc-new-action summary { cursor: pointer; color: var(--blue); font-weight: 900; }
.tc-new-action-form { display: grid; gap: 7px; margin-top: 8px; }
.tc-btn-add-action {
  padding: 7px 10px;
  border: 1px solid #9fd9c3;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green);
  font-size: 12px;
  font-weight: 900;
}

/* Common input style inside tc-body */
.tc-input {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  padding: 0 10px;
  height: 38px;
}
.tc-title-input {
  height: 44px;
  font-size: 14px;
  font-weight: 800;
}
.tc-notes {
  width: 100%;
  flex: 1;
  min-height: 80px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  padding: 9px 10px;
  resize: none;
  line-height: 1.45;
}
.tc-row2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.tc-field > span {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 4px;
}
.tc-col-details {
  background: #f9fbfe;
  border-left: 1px solid var(--line);
}

/* Employee cards (like cam-emp-card) */
.tc-emp-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tc-emp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color 130ms, background 130ms;
  user-select: none;
}
.tc-emp-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.tc-emp-card:has(input:checked) {
  border-color: var(--blue);
  background: #eef6ff;
}
.tc-emp-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue-light), var(--green-light));
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
  color: var(--blue);
  flex-shrink: 0;
  text-transform: uppercase;
}
.tc-emp-card strong { font-size: 13px; font-weight: 800; flex: 1; }
.tc-emp-role { font-size: 11px; font-weight: 750; color: var(--muted); display: block; }
.tc-emp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  flex-shrink: 0;
}
.tc-emp-dot.on { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }
.tc-emp-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--line-strong);
  display: none;
  place-items: center;
  background: var(--blue);
  flex-shrink: 0;
}
.tc-emp-check svg { width: 10px; height: 10px; stroke: #fff; }
.tc-emp-card:has(input:checked) .tc-emp-check { display: grid; }
.tc-col-team { gap: 6px; }

/* Save button */
.tc-save-btn {
  width: 100%;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid #1d5ea8;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1a7a5a, #2563b0);
  color: #fff;
  font-size: 14px;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(37,99,176,.18);
  transition: opacity 130ms;
  margin-top: auto;
}
.tc-save-btn:hover { opacity: .9; }
.tc-save-btn svg { width: 18px; height: 18px; }

/* Responsive: stack columns on narrow screens */
@media (max-width: 720px) {
  .tc-cols { grid-template-columns: 1fr; }
  .tc-col { border-right: none; border-bottom: 1px solid var(--line); }
}

/* ===== END TASK CREATE v2 ===== */

/* Tasks filter bar */
.tasks-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 0 2px;
}
.tasks-filter-select {
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
  min-width: 220px;
  max-width: 340px;
}
.tasks-status-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tasks-status-chip {
  height: 32px;
  padding: 0 14px;
  border: 1.5px solid var(--line-strong);
  border-radius: 20px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 120ms, background 120ms, color 120ms;
}
.tasks-status-chip:hover { border-color: #8db9ee; color: var(--ink); }
.tasks-status-chip.active {
  border-color: var(--blue);
  background: #eef6ff;
  color: var(--blue);
}

/* ===== TASK CARD (tcard) ===== */
.tcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
  padding: 12px 14px 14px;
}

.tcard {
  position: relative;
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease;
  box-shadow: var(--shadow-xs);
}
.tcard:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10,20,35,.1);
}

.tcard-accent {
  width: 4px;
  flex-shrink: 0;
  border-radius: 4px 0 0 4px;
  background: var(--muted);
}
.tcard-nou       .tcard-accent { background: #64b5f6; }
.tcard-in-lucru  .tcard-accent { background: #f59e0b; }
.tcard-blocat    .tcard-accent { background: #ef4444; }
.tcard-finalizat .tcard-accent { background: #22c55e; }

.tcard-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 10px;
}

.tcard-top {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.tcard-ico {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--blue-light);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.tcard-ico .icon { width: 16px; height: 16px; }

.tcard-titles {
  flex: 1;
  min-width: 0;
}
.tcard-titles strong {
  display: block;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--ink);
}
.tcard-titles small {
  display: block;
  font-size: 11px;
  font-weight: 750;
  color: var(--muted);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tcard-status-pill {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 900;
}
.tcard-s-nou       { background:#dbeafe; color:#1d4ed8; }
.tcard-s-in-lucru  { background:#fef3c7; color:#b45309; }
.tcard-s-blocat    { background:#fee2e2; color:#b91c1c; }
.tcard-s-finalizat { background:#dcfce7; color:#15803d; }

.tcard-bottom {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.tcard-emp {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
}
.tcard-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--blue-light),var(--green-light));
  color: var(--blue);
  font-size: 9px;
  font-weight: 900;
  display: grid;
  place-items: center;
  text-transform: uppercase;
}

.tcard-priority {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 900;
}
.tcard-priority .icon { width: 11px; height: 11px; }
.tcard-p-ridicata { background:#fee2e2; color:#b91c1c; }
.tcard-p-medie    { background:#fef3c7; color:#b45309; }
.tcard-p-scazuta  { background:#dcfce7; color:#15803d; }

.tcard-photos, .tcard-has-note {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}
.tcard-photos .icon, .tcard-has-note .icon { width: 12px; height: 12px; }

/* ===== TASK DETAIL POPUP (td-*) ===== */
.taskdetail-overlay.is-open .td-dialog {
  transform: none;
}

.td-dialog {
  width: min(960px, 100%);
  max-height: min(840px, calc(100vh - 36px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 28px 80px rgba(10,20,35,.28);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

/* Hero header — same gradient as calendar */
.td-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px 17px;
  background: linear-gradient(135deg, #167052 0%, #1665b5 100%);
  color: #fff;
  flex-shrink: 0;
}
.td-hero-nou       { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.td-hero-in-lucru  { background: linear-gradient(135deg, #92400e 0%, #f59e0b 100%); }
.td-hero-blocat    { background: linear-gradient(135deg, #991b1b 0%, #ef4444 100%); }
.td-hero-finalizat { background: linear-gradient(135deg, #14532d 0%, #22c55e 100%); }

.td-hero-icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: rgba(255,255,255,.2);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.td-hero-icon .icon { width: 22px; height: 22px; }

.td-hero-text { flex: 1; min-width: 0; }
.td-hero-text span {
  display: block;
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .6px;
  opacity: .78;
}
.td-hero-text strong {
  display: block;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  margin: 2px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.td-hero-text small {
  font-size: 11.5px;
  font-weight: 750;
  opacity: .82;
}

.td-status-chip {
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 900;
  background: rgba(255,255,255,.22);
  color: #fff;
  flex-shrink: 0;
}

.td-hero-x {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  color: #fff;
  flex-shrink: 0;
  transition: background 140ms;
}
.td-hero-x:hover { background: rgba(255,255,255,.24); }
.td-hero-x svg { width: 16px; height: 16px; }

/* 3-column body */
.td-body {
  flex: 1;
  display: grid;
  grid-template-columns: 220px 1fr 230px;
  overflow: hidden;
}

.td-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  overflow-y: auto;
  border-right: 1px solid var(--line);
}
.td-col:last-child { border-right: none; }
.td-col-mid { background: #f9fbfe; }

.td-col-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  margin-bottom: 2px;
}
.td-col-title .icon { width: 12px; height: 12px; }

/* Action box */
.td-action-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.td-action-ico {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--blue-light);
  color: var(--blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.td-action-ico .icon { width: 18px; height: 18px; }
.td-action-box strong { display: block; font-size: 13px; font-weight: 800; }
.td-action-box span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 750; margin-top: 2px; }

/* Project box */
.td-project-box {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.td-project-box strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.td-project-box span { display: block; font-size: 12px; font-weight: 750; color: var(--muted); margin-top: 3px; }
.td-project-box small { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }

/* Detail fields */
.td-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.td-field > span {
  display: block;
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--muted);
  margin-bottom: 4px;
}
.td-select {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  font-weight: 800;
  background: #fff;
  color: var(--ink);
}
.td-select-status.td-s-nou       { background:#dbeafe; color:#1e40af; border-color:#93c5fd; }
.td-select-status.td-s-in-lucru  { background:#fef3c7; color:#92400e; border-color:#fcd34d; }
.td-select-status.td-s-blocat    { background:#fee2e2; color:#991b1b; border-color:#fca5a5; }
.td-select-status.td-s-finalizat { background:#dcfce7; color:#14532d; border-color:#86efac; }

.td-notes {
  width: 100%;
  flex: 1;
  min-height: 90px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
  padding: 9px 10px;
  resize: none;
  line-height: 1.45;
}

.td-photos-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: var(--blue-light);
  color: var(--blue);
  font-size: 12px;
  font-weight: 900;
}
.td-photos-chip .icon { width: 14px; height: 14px; }

/* Employee box */
.td-emp-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}
.td-emp-av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg,var(--blue-light),var(--green-light));
  color: var(--blue);
  font-size: 13px;
  font-weight: 900;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  text-transform: uppercase;
}
.td-emp-box strong { display: block; font-size: 13px; font-weight: 800; }
.td-emp-box span { display: block; font-size: 11.5px; color: var(--muted); font-weight: 750; margin-top: 2px; }
.td-emp-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
  margin-left: auto;
  flex-shrink: 0;
}
.td-emp-dot.on { background: #22c55e; box-shadow: 0 0 0 2px #dcfce7; }

/* History */
.td-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
}

@media (max-width: 720px) {
  .td-body { grid-template-columns: 1fr; }
  .td-col { border-right: none; border-bottom: 1px solid var(--line); }
  .tcard-grid { grid-template-columns: 1fr; }
}
/* ===== END TASK DETAIL v2 ===== */

.taskdetail-overlay {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 20, 35, 0.42);
  opacity: 0;
  transition: opacity 160ms ease;
}

.taskdetail-overlay.is-open {
  opacity: 1;
}

.taskdetail-modal {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(10, 20, 35, 0.24);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

.taskdetail-overlay.is-open .taskdetail-modal {
  transform: none;
}

.taskdetail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(37, 99, 176, 0.18), rgba(26, 122, 90, 0.12)),
    #f7fbff;
}

.taskdetail-head.taskdetail-blocat {
  background:
    linear-gradient(135deg, rgba(184, 59, 59, 0.18), rgba(255, 242, 242, 0.72)),
    #fff7f7;
}

.taskdetail-head.taskdetail-finalizat {
  background:
    linear-gradient(135deg, rgba(26, 122, 90, 0.18), rgba(234, 246, 241, 0.72)),
    #f6fffb;
}

.taskdetail-head span {
  display: block;
  margin-bottom: 4px;
  color: var(--green);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskdetail-head h3 {
  margin: 0;
  color: var(--ink);
  font-size: 22px;
  line-height: 1.16;
}

.taskdetail-head p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 750;
}

.taskdetail-close {
  width: 34px;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.82);
  color: var(--ink);
  font-size: 17px;
  font-weight: 900;
}

.taskdetail-body {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 160px);
  overflow: auto;
  padding: 16px 20px 20px;
}

.taskdetail-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.taskdetail-info {
  min-height: 78px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.taskdetail-info span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskdetail-info strong {
  color: var(--ink);
  font-size: 14px;
}

.taskdetail-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border-radius: 999px;
  font-size: 12px !important;
}

.taskdetail-pill.nou {
  background: var(--blue-light);
  color: var(--blue);
}

.taskdetail-pill.ridicata {
  background: var(--red-light);
  color: var(--red);
}

.taskdetail-pill.in-lucru,
.taskdetail-pill.medie {
  background: var(--amber-light);
  color: var(--amber);
}

.taskdetail-pill.finalizat,
.taskdetail-pill.scazuta {
  background: var(--green-light);
  color: var(--green);
}

.taskdetail-pill.blocat {
  background: var(--red-light);
  color: var(--red);
}

.taskdetail-section {
  display: grid;
  gap: 8px;
}

.taskdetail-section h4 {
  margin: 0;
  color: #52657b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskdetail-project,
.taskdetail-notes,
.taskdetail-history-row {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.taskdetail-project {
  display: grid;
  gap: 3px;
  padding: 12px;
}

.taskdetail-project strong {
  color: var(--ink);
}

.taskdetail-project span,
.taskdetail-project small {
  color: var(--muted);
  font-weight: 750;
}

.taskdetail-notes {
  margin: 0;
  padding: 12px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.taskdetail-history {
  display: grid;
  gap: 8px;
}

.taskdetail-history-row {
  display: grid;
  gap: 5px;
  padding: 11px 12px;
  border-left: 4px solid var(--blue);
}

.taskdetail-history-row div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.taskdetail-history-row strong {
  color: var(--ink);
  font-size: 13px;
}

.taskdetail-history-row span {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 850;
  white-space: nowrap;
}

.taskdetail-history-row p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 750;
}

.taskdetail-empty {
  padding: 14px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 800;
}

.tasks-empty-page {
  min-height: 180px;
  display: grid;
  place-items: center;
}

.tasks-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
  min-width: 0;
}

.tasks-column {
  min-height: 420px;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-xs);
}

.tasks-column-head {
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 9px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.tasks-column-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--blue);
  box-shadow: var(--shadow-xs);
}

.tasks-column-icon .icon {
  width: 16px;
  height: 16px;
}

.tasks-column-head strong {
  display: block;
  font-size: 14px;
}

.tasks-column-head small {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.tasks-column-head b {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #172534;
  color: #fff;
  font-size: 12px;
}

.tasks-column-list {
  display: grid;
  align-content: start;
  gap: 10px;
}

.tasks-empty {
  padding: 18px 12px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.taskops-card {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.taskops-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.taskops-nou {
  border-left-color: var(--blue);
}
.taskops-in-lucru {
  border-left-color: var(--amber);
}
.taskops-blocat {
  border-left-color: var(--red);
}
.taskops-finalizat {
  border-left-color: var(--green);
}

.taskops-top {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: start;
  gap: 8px;
}

.taskops-status-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 176, 0.12);
}

.taskops-in-lucru .taskops-status-dot {
  background: var(--amber);
  box-shadow: 0 0 0 4px rgba(192, 115, 24, 0.14);
}
.taskops-blocat .taskops-status-dot {
  background: var(--red);
  box-shadow: 0 0 0 4px rgba(184, 59, 59, 0.14);
}
.taskops-finalizat .taskops-status-dot {
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(26, 122, 90, 0.14);
}

.taskops-title {
  min-width: 0;
}

.taskops-title strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.25;
}

.taskops-title span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.25;
}

.taskops-priority {
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 10.5px;
  font-weight: 900;
  white-space: nowrap;
}

.taskops-priority.ridicata {
  background: var(--red-light);
  color: var(--red);
}

.taskops-priority.medie {
  background: var(--amber-light);
  color: var(--amber);
}

.taskops-priority.scazuta {
  background: var(--green-light);
  color: var(--green);
}

.taskops-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.taskops-meta span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
}

.taskops-meta .icon {
  width: 13px;
  height: 13px;
  color: var(--blue);
}

.taskops-notes {
  width: 100%;
  min-height: 74px;
  resize: vertical;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.4;
}

.taskops-notes:focus {
  outline: none;
  border-color: rgba(37, 99, 176, 0.55);
  box-shadow: 0 0 0 3px rgba(37, 99, 176, 0.12);
}

.taskops-actions {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
}

.taskops-actions label {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.taskops-actions select {
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 800;
}

.tasks-form-card {
  position: sticky;
  top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tasks-form-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.tasks-form-head > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green);
}

.tasks-form-head .icon {
  width: 18px;
  height: 18px;
}

.tasks-form-head strong {
  display: block;
  font-size: 16px;
}

.tasks-form-head small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.task-create-side {
  display: grid;
  gap: 10px;
}

.task-create-main {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #9fd9c3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, #1a7a5a, #2563b0);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(26, 122, 90, 0.18);
}

.task-create-main .icon {
  width: 16px;
  height: 16px;
}

.task-create-side p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
  font-weight: 750;
}

.tasks-form {
  display: grid;
  gap: 11px;
}

.tasks-form label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.tasks-form input,
.tasks-form select,
.tasks-form textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.tasks-form input,
.tasks-form select {
  height: 38px;
  padding: 0 10px;
}

.tasks-form textarea {
  min-height: 96px;
  padding: 10px;
  resize: vertical;
}

.tasks-form input:focus,
.tasks-form select:focus,
.tasks-form textarea:focus {
  outline: none;
  border-color: rgba(26, 122, 90, 0.55);
  box-shadow: 0 0 0 3px rgba(26, 122, 90, 0.12);
  background: #fff;
}

.tasks-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.tasks-save-btn {
  width: 100%;
  justify-content: center;
  min-height: 42px;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .tasks-layout {
    grid-template-columns: 1fr;
  }

  .tasks-form-card {
    position: static;
  }
}

@media (max-width: 900px) {
  .team-hero {
    grid-template-columns: 1fr;
  }

  .team-hero-stats {
    justify-content: flex-start;
  }

  .team-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-toolbar {
    grid-template-columns: 1fr;
  }

  .team-toolbar-btn {
    width: 100%;
  }

  .tasks-hero {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .tasks-total {
    width: 100%;
  }

  .tasks-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tasks-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .taskwork-table-head {
    display: none;
  }

  .taskrow {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
  }

  .taskrow-person,
  .taskrow-status {
    margin-left: 19px;
  }

  .task-action-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .taskcreate-grid.two,
  .taskcreate-grid.three {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .team-kpi-grid,
  .team-board {
    grid-template-columns: 1fr;
  }

  .team-pro-top {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .team-pro-actions {
    grid-column: 1 / -1;
    justify-items: start;
  }

  .teamedit-grid.two {
    grid-template-columns: 1fr;
  }

  .teamdetail-head {
    grid-template-columns: 48px minmax(0, 1fr) 34px;
    padding: 14px;
  }

  .teamdetail-avatar {
    width: 48px;
    height: 48px;
  }

  .tasks-stat-grid,
  .tasks-board,
  .tasks-form-row {
    grid-template-columns: 1fr;
  }

  .tasks-hero h2 {
    font-size: 24px;
  }

  .tasks-column {
    min-height: 0;
  }

  .taskwork-head {
    grid-template-columns: 42px 1fr;
  }

  .taskwork-progress {
    grid-column: 1 / -1;
    width: 100%;
  }

  .taskwork-open {
    grid-column: 1 / -1;
    width: 100%;
  }

  .taskwork-meta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .taskdetail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .taskrow-person,
  .taskrow-status {
    margin-left: 0;
  }

  .taskcreate-overlay {
    padding: 10px;
  }

  .taskcreate-head,
  .taskcreate-body {
    padding-left: 14px;
    padding-right: 14px;
  }

  .task-action-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .taskdetail-grid {
    grid-template-columns: 1fr;
  }

  .taskdetail-head h3 {
    font-size: 18px;
  }
}

.team-page {
  display: grid;
  gap: 14px;
}

.team-hero {
  display: block;
  padding: 10px 14px;
  border: 1px solid rgba(37, 99, 176, 0.16);
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(26, 122, 90, 0.12), rgba(37, 99, 176, 0.12)),
    #fff;
  box-shadow: var(--shadow-xs);
}

.team-eyebrow {
  display: block;
  margin-bottom: 3px;
  color: var(--green);
  font-size: 10.5px;
  font-weight: 900;
  text-transform: uppercase;
}

.team-hero h2 {
  margin: 0;
  font-size: 21px;
  line-height: 1.1;
}

.team-hero p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 750;
}

.team-hero-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.team-hero-stats span {
  min-width: 86px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.82);
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-align: center;
}

.team-hero-stats strong {
  display: block;
  color: var(--ink);
  font-size: 19px;
  line-height: 1;
}

.team-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.team-kpi {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 64px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-top: 3px solid var(--blue);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
  text-align: left;
  transition: transform 140ms ease, box-shadow 140ms ease;
}

.team-kpi:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.team-kpi > .icon {
  width: 40px;
  height: 40px;
  padding: 10px;
  border-radius: 12px;
  background: var(--blue-light);
  color: var(--blue);
  flex-shrink: 0;
  animation: task-icon-float 2.8s ease-in-out infinite;
}

.team-kpi.online { border-top-color: var(--green); }
.team-kpi.online > .icon { background: var(--green-light); color: var(--green); }
.team-kpi.crew { border-top-color: #4f46e5; }
.team-kpi.crew > .icon { background: #eef2ff; color: #4f46e5; }
.team-kpi.tasks { border-top-color: var(--amber); }
.team-kpi.tasks > .icon { background: var(--amber-light); color: var(--amber); }
.team-kpi.off { border-top-color: var(--red); }
.team-kpi.off > .icon { background: var(--red-light); color: var(--red); }

.team-kpi strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  line-height: 1;
}

.team-kpi span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
}

.team-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
}

.team-search {
  height: 42px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.team-search .icon {
  width: 16px;
  height: 16px;
  color: var(--blue);
  flex-shrink: 0;
}

.team-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.team-toolbar-btn {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid #9fd9c3;
  border-radius: var(--radius-sm);
  background: var(--green-light);
  color: var(--green);
  font-size: 13px;
  font-weight: 900;
}

.team-toolbar-btn .icon {
  width: 16px;
  height: 16px;
}

.team-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
}

.team-pro-card {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-top: 4px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease;
}

.team-pro-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.team-pro-card.is-offline {
  border-top-color: var(--red);
}

.team-pro-top {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.team-pro-actions {
  display: grid;
  gap: 6px;
  justify-items: end;
}

.team-pro-avatar,
.teamdetail-avatar,
.avatar {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--green), var(--blue));
  color: #fff;
  font-weight: 900;
  overflow: hidden;
}

.team-pro-avatar {
  width: 48px;
  height: 48px;
  animation: avatar-float 3s ease-in-out infinite;
}

.team-pro-avatar img,
.teamdetail-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-pro-id {
  min-width: 0;
}

.team-pro-id strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.2;
}

.team-pro-id span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.team-pro-status {
  padding: 6px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  white-space: nowrap;
}

.team-pro-status.online {
  background: var(--green-light);
  color: var(--green);
}

.team-pro-status.offline {
  background: var(--red-light);
  color: var(--red);
}

.team-edit-btn {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0 9px;
  border: 1px solid #ccd7e4;
  border-radius: 999px;
  background: #f3f6fa;
  color: #405168;
  font-size: 11px;
  font-weight: 900;
}

.team-edit-btn .icon {
  width: 13px;
  height: 13px;
}

.team-pro-work {
  display: grid;
  gap: 3px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
}

.team-label {
  color: var(--blue);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.team-pro-work strong {
  color: var(--ink);
  font-size: 13.5px;
}

.team-pro-work small {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 750;
}

.team-pro-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.team-pro-metrics span {
  min-height: 58px;
  display: grid;
  place-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

.team-pro-metrics strong {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

.team-pro-metrics small {
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 900;
}

.team-pro-metrics .danger strong {
  color: var(--red);
}

.team-pro-crew,
.team-pro-tags,
.teamdetail-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-pro-crew span,
.teamdetail-list span {
  padding: 5px 8px;
  border-radius: 999px;
  background: #f3f6fa;
  color: #405168;
  font-size: 11.5px;
  font-weight: 850;
}

.team-pro-tags span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--blue-light);
  color: var(--blue);
  font-size: 11px;
  font-weight: 900;
}

.team-pro-tags .icon {
  width: 13px;
  height: 13px;
}

.team-pro-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 850;
}

.team-pro-footer span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.team-pro-footer .icon {
  width: 13px;
  height: 13px;
  color: var(--green);
}

.team-card h3 {
  margin-bottom: 3px;
}

.team-card p {
  margin-bottom: 10px;
  color: var(--muted);
}

.team-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-weight: 800;
}

.teamdetail-overlay {
  position: fixed;
  inset: 0;
  z-index: 7050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 20, 35, 0.44);
  opacity: 0;
  transition: opacity 160ms ease;
}

.teamdetail-overlay.is-open {
  opacity: 1;
}

.teamdetail-modal {
  width: min(680px, 100%);
  max-height: min(760px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 70px rgba(10, 20, 35, 0.24);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

.teamdetail-overlay.is-open .teamdetail-modal {
  transform: none;
}

.teamdetail-head {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #167052, #2464a9);
  color: #fff;
}

.teamdetail-avatar {
  width: 58px;
  height: 58px;
}

.teamdetail-head span {
  display: block;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.84;
}

.teamdetail-head h3 {
  margin: 2px 0;
  font-size: 22px;
  line-height: 1.15;
}

.teamdetail-head p {
  margin: 0;
  font-size: 12.5px;
  font-weight: 800;
  opacity: 0.86;
}

.teamdetail-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
}

.teamdetail-body {
  display: grid;
  gap: 14px;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 16px 20px 20px;
}

.teamdetail-body section {
  display: grid;
  gap: 8px;
}

.teamdetail-body h4 {
  margin: 0;
  color: #52657b;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.teamdetail-work,
.teamdetail-tasks div {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.teamdetail-work strong,
.teamdetail-tasks strong {
  color: var(--ink);
}

.teamdetail-work span,
.teamdetail-work small,
.teamdetail-tasks span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.teamdetail-tasks {
  display: grid;
  gap: 8px;
}

.teammetric-overlay {
  position: fixed;
  inset: 0;
  z-index: 7070;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 20, 35, 0.42);
  opacity: 0;
  transition: opacity 160ms ease;
}

.teammetric-overlay.is-open {
  opacity: 1;
}

.teammetric-modal {
  width: min(520px, 100%);
  max-height: min(680px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 70px rgba(10, 20, 35, 0.24);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

.teammetric-overlay.is-open .teammetric-modal {
  transform: none;
}

.teammetric-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #167052, #2464a9);
  color: #fff;
}

.teammetric-head span {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.84;
}

.teammetric-head h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.15;
}

.teammetric-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.teammetric-list {
  display: grid;
  gap: 8px;
  max-height: calc(100vh - 140px);
  overflow: auto;
  padding: 14px;
}

.teammetric-row {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-soft);
}

.teammetric-row > span {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--blue-light);
  color: var(--blue);
}

.teammetric-row > span .icon {
  width: 17px;
  height: 17px;
}

.teammetric-row.green > span { background: var(--green-light); color: var(--green); }
.teammetric-row.red > span { background: var(--red-light); color: var(--red); }
.teammetric-row.amber > span { background: var(--amber-light); color: var(--amber); }

.teammetric-row strong {
  display: block;
  color: var(--ink);
  font-size: 13.5px;
}

.teammetric-row small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.teammetric-empty {
  padding: 16px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}

.teamedit-overlay {
  position: fixed;
  inset: 0;
  z-index: 7060;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgba(10, 20, 35, 0.46);
  opacity: 0;
  transition: opacity 160ms ease;
}

.teamedit-overlay.is-open {
  opacity: 1;
}

.teamedit-modal {
  width: min(760px, 100%);
  max-height: min(820px, calc(100vh - 36px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 24px 70px rgba(10, 20, 35, 0.24);
  transform: translateY(10px) scale(0.98);
  transition: transform 160ms ease;
}

.teamedit-overlay.is-open .teamedit-modal {
  transform: none;
}

.teamedit-head {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #167052, #2464a9);
  color: #fff;
}

.teamedit-head span {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  opacity: 0.84;
}

.teamedit-head h3 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.teamedit-head p {
  margin: 5px 0 0;
  font-size: 12.5px;
  font-weight: 800;
  opacity: 0.86;
}

.teamedit-close {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255,255,255,0.45);
  border-radius: 50%;
  background: rgba(255,255,255,0.14);
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  flex-shrink: 0;
}

.teamedit-body {
  display: grid;
  gap: 12px;
  max-height: calc(100vh - 130px);
  overflow: auto;
  padding: 16px 20px 20px;
  background: #f5f8fb;
}

.teamedit-grid {
  display: grid;
  gap: 10px;
}

.teamedit-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.teamedit-body label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.teamedit-body input,
.teamedit-body textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 750;
}

.teamedit-body input {
  height: 40px;
  padding: 0 10px;
}

.teamedit-body textarea {
  min-height: 90px;
  padding: 10px;
  resize: vertical;
  line-height: 1.4;
}

.teamedit-specialties {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
}

.teamedit-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.teamedit-secondary,
.teamedit-save {
  min-height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 900;
}

.teamedit-secondary {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.teamedit-save {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #1d5ea8;
  background: linear-gradient(135deg, #1a7a5a, #2563b0);
  color: #fff;
}

.edit-layout {
  display: grid;
  gap: 16px;
}

.edit-intro {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  background:
    linear-gradient(135deg, rgba(40, 101, 178, 0.08), transparent 48%),
    #fff;
}

.edit-intro h2 {
  margin-bottom: 6px;
}

.edit-intro p {
  margin-bottom: 0;
}

.edit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 16px;
}

.create-leader {
  display: grid;
  gap: 14px;
}

.create-leader h2 {
  margin-bottom: 4px;
}

.create-leader-form {
  display: grid;
  gap: 12px;
}

.edit-card {
  display: grid;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-soft);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.edit-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.edit-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.edit-card-head strong,
.edit-card-head span {
  display: block;
}

.edit-card-head span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.edit-form {
  display: grid;
  gap: 12px;
}

.edit-form textarea {
  min-height: 118px;
}

.specialty-picker {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: 6px;
  background: #f7fafb;
  border: 1px solid var(--line);
}

.specialty-picker > strong {
  font-size: 13px;
}

.specialty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.specialty-option {
  display: block;
}

.specialty-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.specialty-option span {
  min-height: 36px;
  display: flex;
  align-items: center;
  gap: 7px;
  border-radius: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.specialty-option span .icon {
  width: 16px;
  height: 16px;
}

.specialty-option input:checked + span {
  color: var(--green-dark);
  background: #eef8f3;
  border-color: rgba(31, 122, 92, 0.28);
  transform: translateY(-1px);
}

.progress {
  height: 10px;
  background: #edf1ed;
  border-radius: 999px;
  overflow: hidden;
}

.progress div {
  height: 100%;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.project-title,
.task-title {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.project-title strong,
.task-title strong {
  font-size: 16px;
}

.project-address,
.task-subtitle {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--muted);
  font-size: 13px;
}

.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.photo-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #f7f9fb;
}

.photo-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.photo-card span {
  display: block;
  padding: 8px;
  color: var(--muted);
  font-size: 12px;
}

.time-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 16px;
}

.clock-card {
  min-height: 260px;
  display: grid;
  align-content: center;
  gap: 12px;
  background:
    linear-gradient(135deg, rgba(31, 122, 92, 0.11), transparent),
    #fff;
}

.clock {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 2px;
}

.timeline {
  display: grid;
  gap: 10px;
}

.timeline-item {
  position: relative;
  padding: 0 0 0 24px;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(31, 122, 92, 0.13);
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 80px;
  max-width: min(380px, calc(100vw - 32px));
  padding: 14px 18px;
  border-radius: 12px;
  background: #1a1a2e;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
  border-left: 4px solid #3b82f6;
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
  z-index: 99998;
}

.toast.show {
  opacity: 1;
  transform: translateY(0);
}

.empty {
  padding: 22px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
  background: var(--surface-soft);
}

@media (max-width: 1080px) {
  .stats-grid,
  .three-col {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .live-board {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }

  .quick-alerts {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }

  .ops-overview {
    grid-template-columns: 1fr;
  }

  .detail-summary-grid {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }

  .materials-topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .materials-command,
  .materials-ops-grid,
  .materials-flow-grid {
    grid-template-columns: 1fr;
  }

  .materials-command {
    align-items: flex-start;
    flex-direction: column;
  }

  .materials-kpi-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .teams-detail-grid,
  .blockers-detail-grid {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .materials-detail-grid {
    grid-template-columns: 1fr;
  }

  .materials-grid {
    grid-template-columns: repeat(2, minmax(240px, 1fr));
  }

  .edit-grid {
    grid-template-columns: repeat(2, minmax(260px, 1fr));
  }

  .field-feed-grid {
    grid-template-columns: 1fr;
  }

  .two-col,
  .time-panel {
    grid-template-columns: 1fr;
  }

.hero-panel,
.employee-hero {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 820px) {
  .login-screen {
    grid-template-columns: 1fr;
  }

  .login-art {
    min-height: 260px;
  }

  .era-center {
    width: 170px;
    font-size: 54px;
  }

  .orbit-one {
    width: 260px;
    height: 260px;
  }

  .orbit-two {
    width: 320px;
    height: 320px;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .app-shell.menu-collapsed {
    grid-template-columns: 1fr;
  }

  .app-shell.menu-collapsed .nav-item {
    font-size: inherit;
  }

  .app-shell.menu-collapsed .nav-item span {
    max-width: none;
    opacity: 1;
  }

  .sidebar {
    z-index: 3;
    height: auto;
    padding: 14px;
    gap: 12px;
  }

  .brand {
    padding-bottom: 12px;
  }

  .nav-list {
    display: flex;
    overflow-x: auto;
    padding-bottom: 4px;
    padding-top: 0;
  }

  .nav-item {
    white-space: nowrap;
  }

  .sidebar-footer {
    display: none;
  }

  .main {
    padding: 74px 16px 16px;
  }

  .floating-controls {
    left: 16px;
    right: 16px;
    top: 14px;
  }

  .account-dropdown {
    right: 0;
    min-width: min(280px, calc(100vw - 32px));
  }

  .live-board {
    grid-template-columns: 1fr;
  }

  .quick-alerts {
    grid-template-columns: 1fr;
  }

  .detail-header {
    grid-template-columns: 1fr;
  }

  .detail-summary-grid,
  .materials-kpi-grid,
  .teams-detail-grid,
  .blockers-detail-grid {
    grid-template-columns: 1fr;
  }

  .materials-topbar-note {
    width: 100%;
  }

  .detail-mini-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .today-job-detail {
    grid-template-columns: 1fr;
  }

  .ops-insights {
    grid-template-columns: 1fr;
  }

  .mini-map {
    min-height: 360px;
  }

  .map-team-overlay {
    grid-template-columns: 1fr;
  }

  .map-work-list {
    grid-template-columns: 1fr;
  }

  .team-map-pin {
    min-width: 0;
  }

  .materials-grid {
    grid-template-columns: 1fr;
  }

  .material-catalog-row {
    grid-template-columns: 1fr auto;
  }

  .material-catalog-row em {
    justify-self: start;
  }

  .stock-flow-form {
    grid-template-columns: 1fr;
  }

  .stock-history-row {
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .stock-history-row small {
    grid-column: 2;
    width: fit-content;
  }

  .edit-grid {
    grid-template-columns: 1fr;
  }

  .edit-intro {
    display: grid;
  }

  .specialty-grid {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 580px) {
  h1 {
    font-size: 28px;
  }

  .stats-grid,
  .three-col,
  .form-grid.two {
    grid-template-columns: 1fr;
  }

  .clock {
    font-size: 36px;
  }

  .row,
  .toolbar,
  .project-title,
  .task-title,
  .appointment-card {
    display: grid;
  }

  .login-card {
    padding: 20px;
  }
}

/* ─── Month Picker ─────────────────────────────────────────────────────── */
.month-picker {
  position: fixed;
  z-index: 3100;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(13,21,32,.18), 0 2px 8px rgba(13,21,32,.10);
  padding: 8px;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.month-picker.is-open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.mp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px 10px;
  border-bottom: 1px solid #e4eaf0;
  margin-bottom: 8px;
}
.mp-year {
  font-size: 15px;
  font-weight: 700;
  color: #0f1923;
  letter-spacing: -.2px;
}
.mp-yr-btn {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid #e4eaf0;
  background: #f8fafc;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s;
}
.mp-yr-btn:hover { background: #e4eaf0; }
.mp-yr-btn svg { width: 14px; height: 14px; color: #4a5568; }
.mp-months {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.mp-month {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: #f8fafc;
  cursor: pointer;
  transition: all .15s;
  font-size: 12px;
  font-weight: 600;
  color: #2d3a47;
  min-height: 48px;
}
.mp-month:hover { background: #e4eaf0; border-color: #cbd5e0; }
.mp-month.is-today { border-color: #2563b0; color: #2563b0; background: #eef4ff; }
.mp-month.active {
  background: linear-gradient(135deg, #1d4ed8, #2563b0);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(37,99,176,.35);
}
.mp-month-name { font-size: 12px; font-weight: 700; }
.mp-month-dot {
  background: #1d4ed8;
  color: #fff;
  border-radius: 20px;
  font-size: 9px;
  padding: 1px 5px;
  font-weight: 700;
  min-width: 16px;
  text-align: center;
}
.mp-month.active .mp-month-dot { background: rgba(255,255,255,.3); }

/* ─── Employee View Modal ───────────────────────────────────────────────── */
.ev-modal {
  max-width: 680px;
  width: 96vw;
  max-height: 85vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 20px;
}

.ev-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  background: linear-gradient(135deg, #0d1520 0%, #1a2b3c 100%);
  border-radius: 20px 20px 0 0;
  flex-shrink: 0;
}
.ev-header-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.ev-header-av {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, #2563b0, #1d4ed8);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 800; color: #fff;
  letter-spacing: -.5px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(37,99,176,.4);
}
.ev-header-info h3 {
  margin: 0; font-size: 17px; font-weight: 700; color: #fff; line-height: 1.2;
}
.ev-header-info span {
  font-size: 12px; color: rgba(255,255,255,.6);
}
.ev-header .pill {
  font-size: 11px; padding: 3px 8px;
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.8);
  border: 1px solid rgba(255,255,255,.2);
}
.ev-header .pill.ok { background: rgba(26,122,90,.25); color: #6ee7b7; border-color: rgba(110,231,183,.3); }

.ev-emp-strip {
  display: flex;
  gap: 8px;
  padding: 12px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e4eaf0;
  overflow-x: auto;
  flex-shrink: 0;
}
.ev-emp-av {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #e4eaf0;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; color: #2d3a47;
  cursor: pointer;
  position: relative;
  transition: all .15s;
  flex-shrink: 0;
}
.ev-emp-av:hover { background: #dde4ef; border-color: #2563b0; }
.ev-emp-av.active {
  background: linear-gradient(135deg, #2563b0, #1d4ed8);
  color: #fff;
  border-color: #1d4ed8;
  box-shadow: 0 2px 8px rgba(37,99,176,.35);
}
.ev-emp-av-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #cbd5e0;
  border: 2px solid #fff;
  position: absolute;
  bottom: -2px; right: -2px;
}
.ev-emp-av-dot.on { background: #1a7a5a; }

.ev-stats {
  display: flex;
  align-items: center;
  padding: 14px 20px;
  border-bottom: 1px solid #e4eaf0;
  background: #fff;
  flex-shrink: 0;
  gap: 0;
}
.ev-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.ev-stat-n {
  font-size: 22px;
  font-weight: 800;
  color: #0f1923;
  line-height: 1;
}
.ev-stat-l {
  font-size: 10px;
  color: #6b7a8d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.ev-stat.ok .ev-stat-n { color: #1a7a5a; }
.ev-stat.info .ev-stat-n { color: #2563b0; }
.ev-stat-sep {
  width: 1px;
  height: 32px;
  background: #e4eaf0;
}

.ev-timeline {
  overflow-y: auto;
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ev-day { display: flex; flex-direction: column; gap: 6px; }
.ev-day-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: #6b7a8d;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding-bottom: 4px;
}
.ev-today-badge {
  background: #2563b0;
  color: #fff;
  border-radius: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ev-day.past .ev-day-label { color: #aab4c0; }

.ev-day-rows { display: flex; flex-direction: column; gap: 6px; }

.ev-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid #e4eaf0;
  position: relative;
  overflow: hidden;
  transition: box-shadow .15s;
}
.ev-row:hover { box-shadow: 0 2px 8px rgba(13,21,32,.08); }
.ev-row-band {
  width: 3px;
  border-radius: 3px;
  background: #2563b0;
  align-self: stretch;
  flex-shrink: 0;
}
.ev-row.ok .ev-row-band  { background: #1a7a5a; }
.ev-row.warn .ev-row-band { background: #c07318; }
.ev-row.err .ev-row-band  { background: #c0392b; }
.ev-row-time {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  min-width: 40px; flex-shrink: 0;
}
.ev-row-time strong { font-size: 12px; font-weight: 700; color: #0f1923; }
.ev-row-time span   { font-size: 10px; color: #6b7a8d; }
.ev-row-body {
  flex: 1; min-width: 0;
}
.ev-row-body strong { display: block; font-size: 13px; color: #0f1923; margin-bottom: 1px; }
.ev-row-body span   { display: block; font-size: 11px; color: #6b7a8d; }
.ev-row-note { font-size: 11px; color: #6b7a8d; font-style: italic; margin: 3px 0 0; }
.ev-row .pill { font-size: 10px; padding: 2px 7px; flex-shrink: 0; margin-top: 2px; }

.ev-empty {
  text-align: center;
  padding: 40px 20px;
  color: #6b7a8d;
  font-size: 14px;
}

/* ─── Sistem Picker popup (inline in dialog) ───────────────────────────── */
.cam-sis-picker {
  position: absolute;
  z-index: 200;
  background: #fff;
  border: 1.5px solid #e4eaf0;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(13,21,32,.16), 0 2px 8px rgba(13,21,32,.08);
  width: 280px;
  padding: 0;
  opacity: 0;
  transform: translateY(-6px) scale(.97);
  transition: opacity .17s, transform .17s;
  pointer-events: none;
}
.cam-sis-picker.is-open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.cam-sp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  border-bottom: 1px solid #e4eaf0;
  font-size: 12px;
  font-weight: 700;
  color: #2d3a47;
}
.cam-sp-close {
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.cam-sp-close:hover { background: #1e40af; }
.cam-sp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px;
}
.cam-sp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 9px;
  border: 1.5px solid #e4eaf0;
  background: #f8fafc;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #2d3a47;
  transition: all .15s;
  text-align: left;
  position: relative;
}
.cam-sp-item:hover { border-color: #cbd5e0; background: #edf2f7; }
.cam-sp-item.selected { box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.cam-sp-ico { font-size: 15px; flex-shrink: 0; }
.cam-sp-lbl { font-size: 11px; font-weight: 600; flex: 1; line-height: 1.2; }
.cam-sp-ck {
  font-size: 11px;
  color: #2563b0;
  font-weight: 800;
  opacity: 0;
  transition: opacity .15s;
}
.cam-sp-item.selected .cam-sp-ck { opacity: 1; }

/* ─── Selected sistem chips ────────────────────────────────────────────── */
.cam-sis-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
  min-height: 0;
}
.cam-sis-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 20px;
  padding: 3px 8px 3px 10px;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid rgba(0,0,0,.08);
  animation: cam-chip-in .2s ease;
}
@keyframes cam-chip-in {
  from { opacity:0; transform:scale(.85); }
  to   { opacity:1; transform:scale(1); }
}
.cam-chip-del {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  opacity: .6;
  padding: 0 1px;
  line-height: 1;
  transition: opacity .12s;
}
.cam-chip-del:hover { opacity: 1; }

/* ─── Employee filter mini-popup ───────────────────────────────────────── */
.emp-popup {
  position: fixed;
  z-index: 3200;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(228,234,240,.8);
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(13,21,32,.18), 0 2px 10px rgba(13,21,32,.08);
  width: 260px;
  padding: 8px;
  opacity: 0;
  transform: translateY(-8px) scale(.96);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.emp-popup.is-open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.emp-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(228,234,240,.7);
  margin-bottom: 8px;
}
.emp-popup-head > span {
  font-size: 11px;
  font-weight: 700;
  color: #6b7a8d;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ep-all-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #2563b0;
  background: #eef4ff;
  border: 1.5px solid rgba(37,99,176,.2);
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  transition: background .15s;
}
.ep-all-btn svg { width: 13px; height: 13px; }
.ep-all-btn:hover { background: #dbeafe; }

.emp-popup-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emp-popup-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background .15s;
  width: 100%;
}
.emp-popup-card:hover { background: rgba(228,234,240,.7); }
.ep-av {
  width: 36px; height: 36px;
  border-radius: 11px;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  position: relative;
}
.ep-dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #cbd5e0;
  border: 2px solid #fff;
  position: absolute;
  bottom: -2px; right: -2px;
}
.ep-dot.on { background: #1a7a5a; }
.ep-info { display: flex; flex-direction: column; gap: 1px; }
.ep-info strong { font-size: 13px; font-weight: 700; color: #0f1923; }
.ep-info span   { font-size: 11px; color: #6b7a8d; }

/* ─── Employee popup updates (multi-select) ────────────────────────────── */
.emp-popup { width: 280px; }

.emp-popup-card {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 10px;
}
.ep-stats { /* removed in new version */ display:none; }
.ep-badge {
  font-size: 10px; font-weight: 700;
  background: #f1f4f8; color: #6b7a8d;
  border-radius: 6px; padding: 2px 6px;
  white-space: nowrap;
}
.ep-badge.today { background: #dbeafe; color: #1d4ed8; }

.ep-check {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid #cbd5e0;
  background: #fff;
  display: grid; place-items: center;
  transition: all .15s;
  flex-shrink: 0;
}
.ep-check svg { width: 10px; height: 10px; opacity: 0; transition: opacity .12s; }
.ep-check.on svg { opacity: 1; }
.ep-check.on { box-shadow: 0 1px 4px rgba(0,0,0,.15); }

.emp-popup-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 6px 4px;
  border-top: 1px solid rgba(228,234,240,.7);
  margin-top: 8px;
}
.ep-sel-label { font-size: 11px; color: #6b7a8d; font-weight: 600; }
.ep-apply-btn {
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .12s;
}
.ep-apply-btn:hover { background: #1e40af; }
.ep-apply-btn:active { transform: scale(.96); }

.ep-all-btn.active {
  background: #1d4ed8; color: #fff; border-color: #1d4ed8;
}

/* Multiple avatars in nav badge */
.calp-emp-avs {
  display: flex;
  align-items: center;
}
.calp-emp-av-mini {
  width: 20px; height: 20px;
  border-radius: 6px;
  border: 2px solid #eef4ff;
  display: grid; place-items: center;
  font-size: 9px; font-weight: 800; color: #fff;
  margin-left: -4px;
}
.calp-emp-avs .calp-emp-av-mini:first-child { margin-left: 0; }

/* ─── Appointment Detail Popup ──────────────────────────────────────────── */
.appt-det-popup {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 56px rgba(13,21,32,.2), 0 4px 16px rgba(13,21,32,.1);
  overflow: hidden;
  opacity: 0;
  transform: scale(.94) translateY(-4px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  max-height: 90vh;
  overflow-y: auto;
}
.appt-det-popup.is-open {
  opacity: 1;
  transform: scale(1) translateY(0);
  pointer-events: all;
}

.det-header {
  padding: 16px 16px 12px;
}
.det-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.det-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: .2px;
}
.det-close {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: none; background: rgba(0,0,0,.08);
  display: grid; place-items: center;
  cursor: pointer; color: #374151;
  transition: background .15s;
  flex-shrink: 0;
}
.det-close svg { width: 14px; height: 14px; }
.det-close:hover { background: rgba(0,0,0,.15); }
.det-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.det-status-left {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}
.det-status-switch {
  position: relative;
  z-index: 4;
}
.det-status-toggle {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 176, .18);
  border-radius: 10px;
  background: rgba(255,255,255,.82);
  color: #2563eb;
  box-shadow: 0 6px 14px rgba(15, 25, 35, .06);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, box-shadow .16s ease;
}
.det-status-toggle:hover,
.det-status-switch.is-open .det-status-toggle {
  transform: translateY(-1px);
  background: #fff;
  box-shadow: 0 9px 18px rgba(37, 99, 176, .14);
}
.det-status-toggle svg {
  width: 13px;
  height: 13px;
  pointer-events: none;
}
.det-status-switch.is-open .det-status-toggle svg {
  transform: rotate(180deg);
}
.det-status-options {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);
  width: 238px;
  max-width: min(238px, calc(100vw - 24px));
  border: 1px solid rgba(15, 25, 35, .12);
  border-radius: 16px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 22px 45px rgba(15, 25, 35, .2);
  padding: 8px;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px) scale(.98);
  transition: opacity .16s ease, transform .16s ease;
}
.det-status-switch.is-open .det-status-options {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
.det-status-options > strong {
  display: block;
  padding: 5px 7px 8px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.det-status-option {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 9px;
  align-items: center;
  padding: 8px 9px;
  color: #0f1923;
  cursor: pointer;
  text-align: left;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
.det-status-option:hover,
.det-status-option.is-current {
  transform: translateX(2px);
}
.det-status-option b {
  display: block;
  font-size: 12px;
  font-weight: 900;
  line-height: 1.1;
}
.det-status-option small {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  margin-top: 3px;
}
.status-option-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--status-color, #2563eb);
  box-shadow: 0 0 0 4px var(--status-soft, rgba(37, 99, 235, .12));
}
.det-status-option[data-tone="blue"] { --status-color: #2563eb; --status-soft: rgba(37,99,235,.13); }
.det-status-option[data-tone="cyan"] { --status-color: #0891b2; --status-soft: rgba(8,145,178,.13); }
.det-status-option[data-tone="teal"] { --status-color: #0f766e; --status-soft: rgba(15,118,110,.13); }
.det-status-option[data-tone="amber"] { --status-color: #d97706; --status-soft: rgba(217,119,6,.15); }
.det-status-option[data-tone="red"] { --status-color: #dc2626; --status-soft: rgba(220,38,38,.13); }
.det-status-option[data-tone="violet"] { --status-color: #7c3aed; --status-soft: rgba(124,58,237,.13); }
.det-status-option[data-tone="green"] { --status-color: #16a34a; --status-soft: rgba(22,163,74,.14); }
.det-status-option[data-tone="slate"] { --status-color: #475569; --status-soft: rgba(71,85,105,.13); }
.det-status-option:hover,
.det-status-option.is-current {
  border-color: var(--status-soft);
  background: linear-gradient(135deg, var(--status-soft), rgba(255,255,255,.9));
}
.dp-inline-status {
  border: 0;
  background: transparent;
  color: #0f1923;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  outline: none;
}
.det-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid rgba(37,99,176,.18);
  border-radius: 9px;
  background: #fff;
  color: #1d4ed8;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  padding: 6px 9px;
}
.det-edit svg {
  width: 13px;
  height: 13px;
}
.det-edit:hover {
  background: #eef4ff;
}
.det-client {
  margin: 0 0 2px;
  font-size: 17px; font-weight: 800;
  color: #0f1923; line-height: 1.2;
}
.det-proj-name {
  margin: 0;
  font-size: 12px; color: #6b7a8d;
}

.det-body {
  padding: 8px 0 4px;
  display: flex;
  flex-direction: column;
}
.det-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid #f1f4f8;
}
.det-row:last-child { border-bottom: none; }
.det-ico {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  display: grid;
  place-items: center;
  color: #2563eb;
}
.det-ico svg {
  width: 17px;
  height: 17px;
}
.det-status-dot {
  width: 9px;
  height: 9px;
  display: inline-block;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255,255,255,.24);
  opacity: .86;
}
.det-row-body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.det-row-body > strong {
  font-size: 13px; font-weight: 700; color: #0f1923;
}

/* Time */
.det-time-range {
  display: flex; align-items: center; gap: 6px;
}
.det-time-pill {
  background: #f1f4f8;
  border-radius: 7px;
  padding: 3px 8px;
  font-size: 13px; font-weight: 800;
  color: #0f1923;
}
.det-time-sep { color: #9ca3af; font-size: 12px; }

/* Location */
.det-map-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700;
  color: #2563b0;
  background: #eef4ff;
  border: 1.5px solid rgba(37,99,176,.2);
  border-radius: 8px;
  padding: 4px 10px;
  text-decoration: none;
  transition: background .15s;
  width: fit-content;
}
.det-map-btn svg { width: 13px; height: 13px; }
.det-map-btn:hover { background: #dbeafe; }

/* Type tags */
.det-tags { flex-direction: row !important; flex-wrap: wrap; gap: 5px; }
.det-tag {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  border-radius: 20px;
  padding: 3px 10px;
}
.det-tag.act { background: #e0e7ff; color: #3730a3; }
.det-tag.sis { background: #d1fae5; color: #065f46; }

.edit-appt-overlay { z-index: 3600; }
.edit-appt-modal {
  width: min(680px, calc(100vw - 28px));
  max-height: 90vh;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 80px rgba(15,25,35,.28);
  opacity: 0;
  transform: translateY(12px) scale(.98);
  transition: opacity .18s ease, transform .18s ease;
}
.edit-appt-overlay.is-open .edit-appt-modal {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.edit-appt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 20px;
  background: linear-gradient(135deg, #173b4f, #1f7a73);
  color: #fff;
}
.edit-appt-head span {
  display: block;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .5px;
  text-transform: uppercase;
  opacity: .78;
}
.edit-appt-head strong {
  display: block;
  margin-top: 2px;
  font-size: 19px;
  font-weight: 900;
}
.edit-appt-close {
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 11px;
  background: rgba(255,255,255,.14);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
}
.edit-appt-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px 20px 20px;
  max-height: calc(90vh - 74px);
  overflow: auto;
}
.edit-appt-form label,
.edit-appt-full {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.edit-appt-full { grid-column: 1 / -1; }
.edit-appt-form label > span,
.edit-appt-label {
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .45px;
  text-transform: uppercase;
}
.edit-appt-form input,
.edit-appt-form select,
.edit-appt-form textarea {
  width: 100%;
  border: 1.5px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
  color: #0f1923;
  font-family: inherit;
  font-size: 13px;
  font-weight: 750;
  padding: 10px 11px;
}
.edit-appt-form textarea {
  min-height: 88px;
  resize: vertical;
}
.edit-appt-form input:focus,
.edit-appt-form select:focus,
.edit-appt-form textarea:focus {
  outline: none;
  border-color: #1f7a73;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31,122,115,.12);
}
.edit-appt-team {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.edit-appt-emp {
  display: grid !important;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 9px !important;
  border: 1px solid #dbe4ee;
  border-radius: 13px;
  background: #f8fafc;
  padding: 8px 10px;
  cursor: pointer;
}
.edit-appt-emp input {
  width: 16px;
  height: 16px;
}
.edit-appt-av {
  width: 30px;
  height: 30px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: #1f7a73;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}
.edit-appt-emp strong,
.edit-appt-emp small { display: block; }
.edit-appt-emp strong {
  color: #0f1923;
  font-size: 12px;
}
.edit-appt-emp small {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
}
.edit-appt-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  padding-top: 4px;
}
.edit-appt-cancel,
.edit-appt-save {
  border: 0;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 900;
  padding: 11px 15px;
}
.edit-appt-cancel {
  background: #eef2f6;
  color: #475569;
}
.edit-appt-save {
  background: linear-gradient(135deg, #173b4f, #1f7a73);
  color: #fff;
  box-shadow: 0 10px 22px rgba(31,122,115,.22);
}

@media (max-width: 640px) {
  .edit-appt-form,
  .edit-appt-team {
    grid-template-columns: 1fr;
  }
}

/* Team */
.det-section-title { font-size: 11px !important; text-transform: uppercase; letter-spacing: .5px; color: #6b7a8d !important; font-weight: 700 !important; }
.det-emp-list {
  display: flex; flex-direction: column; gap: 6px;
  margin-top: 4px;
}
.det-emp-card {
  display: flex; align-items: center; gap: 10px;
  background: #f8fafc;
  border-radius: 10px;
  padding: 8px 10px;
  border: 1px solid #e4eaf0;
}
.det-history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
}
.det-history-item {
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fafc;
  padding: 9px 10px;
}
.det-history-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.det-history-meta strong {
  color: #0f1923;
  font-size: 12px;
  font-weight: 900;
}
.det-history-meta span {
  color: #64748b;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
.det-history-item ul {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding-left: 14px;
}
.det-history-item li {
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.35;
}
.det-history-item b {
  color: #173b4f;
}
.det-emp-av {
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: #fff;
  flex-shrink: 0;
}
.det-emp-info { flex: 1; min-width: 0; }
.det-emp-info strong { display: block; font-size: 13px; font-weight: 700; color: #0f1923; }
.det-emp-info span   { display: block; font-size: 11px; color: #6b7a8d; }
.det-emp-live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px; font-weight: 700;
  color: #16a34a;
  background: #dcfce7;
  border-radius: 6px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.det-emp-live span {
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: currentColor;
}

/* Notes */
.det-notes {
  margin: 0;
  font-size: 12px; color: #374151;
  font-style: italic;
  line-height: 1.5;
}
.det-nodata { font-size: 12px; color: #9ca3af; }

/* ═══════════════════════════════════════════════════════════════════════════
   CALENDAR TWO-COLUMN LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.calp-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 16px;
  align-items: start;
}

.calp-left  { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

/* ── Calendar grid cell improvements ─────────────────────────── */
.calp-cell {
  min-height: 90px;
  padding: 4px 3px 3px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  transition: background .12s;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.calp-cell:hover { background: #f8fafc; }
.calp-cell.other-month { background: #fafbfc; }
.calp-cell.other-month .calp-dn { color: #c0cad5; }

.calp-cell.is-today { background: #eff6ff; }
.calp-cell.is-today .calp-dn {
  background: #2563b0;
  color: #fff;
  border-radius: 50%;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  font-weight: 800;
}
.calp-cell.is-selected { background: #f0f9ff; box-shadow: inset 0 0 0 2px #2563b0; }

.calp-cell-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 3px;
}
.calp-dn {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  line-height: 1;
}

/* ── RIGHT PANEL ──────────────────────────────────────────────── */
.calp-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 16px;
}

.rp-section {
  background: #fff;
  border-radius: 16px;
  border: 1px solid var(--line);
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(13,21,32,.06);
}

.rp-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--line);
  background: #f8fafc;
}
.rp-section-title {
  display: flex; align-items: center; gap: 8px;
}
.rp-section-ico { font-size: 18px; }
.rp-section-title strong { display: block; font-size: 14px; font-weight: 800; color: #0f1923; }
.rp-section-title span   { display: block; font-size: 10px; color: #6b7a8d; font-weight: 600; text-transform: capitalize; }

.rp-add-btn {
  width: 26px; height: 26px;
  border-radius: 8px;
  border: 1.5px solid #2563b0;
  background: #eef4ff;
  color: #2563b0;
  font-size: 18px; font-weight: 300;
  display: grid; place-items: center;
  cursor: pointer;
  line-height: 1;
  transition: background .15s;
}
.rp-add-btn:hover { background: #dbeafe; }

/* Mini stats strip */
.rp-mini-stats {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--line);
}
.rp-mstat {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px 4px;
  gap: 1px;
  border-right: 1px solid var(--line);
}
.rp-mstat:last-child { border-right: none; }
.rp-mstat span  { font-size: 20px; font-weight: 800; color: #0f1923; line-height: 1; }
.rp-mstat label { font-size: 9px; font-weight: 700; color: #6b7a8d; text-transform: uppercase; letter-spacing: .4px; }
.rp-mstat.active span { color: #2563b0; }
.rp-mstat.done   span { color: #16a34a; }
.rp-mstat.blocked span { color: #dc2626; }

/* List of appointments in panel */
.rp-list {
  display: flex; flex-direction: column;
  padding: 8px;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.rp-item {
  border-left: 3px solid #2563b0;
  background: #f8fafc;
  border-radius: 0 10px 10px 0;
  padding: 8px 10px;
  cursor: pointer;
  transition: background .15s, transform .1s;
  display: flex; flex-direction: column; gap: 3px;
}
.rp-item:hover { background: #f1f4f8; transform: translateX(2px); }

.rp-item-top {
  display: flex; align-items: center; justify-content: space-between;
}
.rp-time {
  font-size: 11px; font-weight: 800; color: #0f1923;
}
.rp-end-time { font-weight: 500; color: #6b7a8d; }
.rp-status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rp-client { font-size: 12px; font-weight: 700; color: #0f1923; }
.rp-addr   { font-size: 10px; color: #6b7a8d; }
.rp-item-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 2px;
}
.rp-avs { display: flex; }
.rp-av {
  width: 18px; height: 18px;
  border-radius: 5px;
  font-size: 8px; font-weight: 800; color: #fff;
  display: grid; place-items: center;
  margin-left: -3px;
  border: 1.5px solid #fff;
  flex-shrink: 0;
}
.rp-avs .rp-av:first-child { margin-left: 0; }
.rp-type {
  font-size: 9px; font-weight: 700;
  background: #e0e7ff; color: #3730a3;
  border-radius: 5px; padding: 1px 6px;
}

.rp-empty {
  text-align: center;
  padding: 14px 8px;
  font-size: 12px; color: #9ca3af;
  font-style: italic;
}

.rp-tomorrow .rp-section-head { background: #0d1520; }
.rp-tomorrow .rp-section-title strong { color: #fff; }
.rp-tomorrow .rp-section-title span   { color: rgba(255,255,255,.5); }
.rp-tomorrow .rp-add-btn { border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; }
.rp-tomorrow .rp-add-btn:hover { background: rgba(255,255,255,.2); }

@media (max-width: 900px) {
  .calp-layout { grid-template-columns: 1fr; }
  .calp-right { display: none; }
}

/* ─── Type cards v2 (simple, no popup) ─────────────────────────────────── */
.cam-type-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
}
.cam-tcard2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 3px 5px;
  border-radius: 9px;
  border: 2px solid #e4eaf0;
  background: #fff;
  cursor: pointer;
  transition: all .14s;
  font-size: 10px;
  font-weight: 600;
  color: #374151;
  line-height: 1.2;
  text-align: center;
}
.cam-tcard2:hover { border-color: #cbd5e0; background: #f1f4f8; }
.cam-tcard2.selected {
  border-width: 2px;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0,0,0,.10);
}
.cam-tcard2-ico {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}

/* Save button main */
.cam-save-main {
  width: 100%;
  margin-top: 4px;
  padding: 12px;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  border: none;
  background: linear-gradient(135deg, #1d4ed8, #2563b0);
  color: #fff;
  cursor: pointer;
  transition: opacity .15s, transform .12s;
  box-shadow: 0 4px 16px rgba(37,99,176,.35);
}
.cam-save-main:hover { opacity: .92; transform: translateY(-1px); }
.cam-save-main:active { transform: scale(.98); }
.cam-save-main svg { width: 18px; height: 18px; }

/* ─── Repeta button ─────────────────────────────────────────────────────── */
.cam-dt-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.cam-repeta-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px; font-weight: 700;
  color: #7c3aed;
  background: #ede9fe;
  border: 1.5px solid rgba(124,58,237,.25);
  border-radius: 8px;
  padding: 3px 9px;
  cursor: pointer;
  transition: background .15s;
}
.cam-repeta-btn svg { width: 13px; height: 13px; }
.cam-repeta-btn:hover { background: #ddd6fe; }

/* Sistem block reveal animation */
.cam-sis-reveal {
  animation: sis-slide-in .2s ease;
}
@keyframes sis-slide-in {
  from { opacity:0; transform: translateY(-6px); }
  to   { opacity:1; transform: none; }
}

/* ─── Repeat Picker ─────────────────────────────────────────────────────── */
.rpt-picker {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 16px 56px rgba(13,21,32,.22), 0 4px 16px rgba(13,21,32,.10);
  overflow: hidden;
  opacity: 0;
  transform: scale(.95) translateY(-6px);
  transition: opacity .18s, transform .18s;
  pointer-events: none;
}
.rpt-picker.is-open { opacity:1; transform:none; pointer-events:all; }

.rpt-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px 10px;
  background: linear-gradient(135deg, #5b21b6, #7c3aed);
}
.rpt-title { font-size: 13px; font-weight: 800; color: #fff; }
.rpt-close {
  width: 24px; height: 24px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,.3);
  background: rgba(255,255,255,.15);
  color: #fff; font-size: 13px;
  display: grid; place-items: center;
  cursor: pointer;
}
.rpt-close:hover { background: rgba(255,255,255,.3); }

.rpt-time-row {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; padding: 10px 12px;
  background: #f5f3ff;
  border-bottom: 1px solid #ede9fe;
}
.rpt-time-row label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 10px; font-weight: 700; color: #7c3aed;
  text-transform: uppercase; letter-spacing: .4px;
}
.rpt-time-inp {
  border: 1.5px solid #ddd6fe; border-radius: 7px;
  padding: 5px 8px; font-size: 13px; font-weight: 700;
  color: #3b0764; background: #fff;
  font-family: inherit;
}
.rpt-time-inp:focus { outline: none; border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); }

.rpt-cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px;
  border-bottom: 1px solid #f1f4f8;
}
.rpt-cal-nav strong { font-size: 13px; font-weight: 800; color: #0f1923; }
.rpt-nav-btn {
  width: 26px; height: 26px; border-radius: 8px;
  border: 1px solid #e4eaf0; background: #f8fafc;
  font-size: 15px; cursor: pointer; display: grid; place-items: center;
  transition: background .12s;
}
.rpt-nav-btn:hover { background: #e4eaf0; }

.rpt-wd-row {
  display: grid; grid-template-columns: repeat(7,1fr);
  padding: 4px 8px 2px;
}
.rpt-wd-row span {
  text-align: center; font-size: 9px; font-weight: 800;
  color: #9ca3af; text-transform: uppercase; letter-spacing: .4px;
}

.rpt-grid {
  display: grid; grid-template-columns: repeat(7,1fr);
  gap: 2px; padding: 4px 8px 8px;
}
.rpt-day {
  aspect-ratio: 1;
  border-radius: 7px;
  border: none; background: transparent;
  font-size: 12px; font-weight: 600; color: #374151;
  cursor: pointer; transition: background .12s, color .12s;
  display: grid; place-items: center;
}
.rpt-day:hover { background: #ede9fe; color: #5b21b6; }
.rpt-day.other { color: #d1d5db; }
.rpt-day.sel {
  background: #7c3aed; color: #fff;
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(124,58,237,.4);
}
.rpt-day.sel:hover { background: #6d28d9; }

.rpt-chips {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 0 10px 8px;
  max-height: 60px; overflow-y: auto;
}
.rpt-chip {
  display: inline-flex; align-items: center; gap: 4px;
  background: #ede9fe; color: #5b21b6;
  border-radius: 20px; padding: 2px 8px;
  font-size: 10px; font-weight: 700;
}
.rpt-chip-del {
  background: none; border: none;
  color: #7c3aed; cursor: pointer; font-size: 13px; line-height: 1;
  padding: 0 1px;
}

.rpt-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 12px 12px;
  border-top: 1px solid #f1f4f8;
}
.rpt-count { font-size: 11px; color: #6b7a8d; font-weight: 600; }
.rpt-confirm {
  background: #7c3aed; color: #fff;
  border: none; border-radius: 9px;
  padding: 7px 12px; font-size: 12px; font-weight: 800;
  cursor: pointer; transition: background .15s, transform .12s;
}
.rpt-confirm:hover { background: #6d28d9; transform: scale(1.03); }

/* ════════════════════════════════════════════════════════════════════════════
   ADD APPOINTMENT MODAL — complete redesign
   ════════════════════════════════════════════════════════════════════════════ */

/* Override old dialog sizing */
.cam-dialog {
  max-width: 920px !important;
  width: 98vw !important;
  max-height: 92vh !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hero — slimmer */
.cam-hero {
  padding: 14px 20px !important;
  flex-shrink: 0 !important;
}
.cam-hero-num { width: 36px !important; height: 36px !important; font-size: 16px !important; }

/* Body */
.cam-body {
  flex: 1 !important;
  overflow: hidden !important;
  padding: 12px 16px 14px !important;
  background: #f1f4f8 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* ── Section title ── */
.cam-sec-title {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .6px;
  color: #6b7a8d;
  margin-bottom: 6px;
}

/* ── Client trigger row ── */
.cam-section { position: relative; }

.cam-client-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  border: 2px solid #e4eaf0;
  border-radius: 12px;
  padding: 0 12px;
  height: 44px;
  transition: border-color .15s, box-shadow .15s;
  cursor: text;
}
.cam-client-trigger:focus-within {
  border-color: #2563b0;
  box-shadow: 0 0 0 3px rgba(37,99,176,.1);
}
.cam-ct-left { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cam-ct-search-ico { width: 16px; height: 16px; color: #9ca3af; flex-shrink: 0; }
.cam-client-search {
  border: none; background: transparent;
  font-size: 13px; font-weight: 600; color: #0f1923;
  width: 100%; outline: none; font-family: inherit;
}
.cam-client-search::placeholder { color: #9ca3af; font-weight: 500; }
.cam-cs-av {
  width: 28px; height: 28px; border-radius: 8px;
  background: linear-gradient(135deg, #065f46, #2563b0);
  color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}
.cam-cs-clear {
  width: 22px; height: 22px; border-radius: 50%;
  border: none; background: #f1f4f8; color: #6b7a8d;
  font-size: 12px; cursor: pointer; flex-shrink: 0;
  display: grid; place-items: center;
  transition: background .12s;
}
.cam-cs-clear:hover { background: #fee2e2; color: #dc2626; }

/* Dropdown */
.cam-proj-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff;
  border: 1.5px solid #e4eaf0;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(13,21,32,.14);
  z-index: 500;
  overflow: hidden;
}
.cam-proj-list { max-height: 160px; overflow-y: auto; }
.cam-proj-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; cursor: pointer;
  transition: background .1s;
  border-bottom: 1px solid #f1f4f8;
}
.cam-proj-row:hover { background: #f0f9ff; }
.cam-proj-row:last-child { border-bottom: none; }
.cam-proj-av {
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, #065f46, #2563b0);
  color: #fff; font-size: 11px; font-weight: 800;
  display: grid; place-items: center; flex-shrink: 0;
}
.cam-proj-info { flex: 1; min-width: 0; }
.cam-proj-info strong { display: block; font-size: 12px; font-weight: 700; color: #0f1923; }
.cam-proj-info span   { display: block; font-size: 10px; color: #6b7a8d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cam-add-client-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 8px 12px;
  border: none; background: #f8fafc; color: #065f46;
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
  border-top: 1px dashed rgba(6,95,70,.25);
  transition: background .12s;
}
.cam-add-client-btn:hover { background: #d1fae5; }
.cam-new-client-form {
  padding: 10px 12px; display: flex; flex-direction: column; gap: 6px;
  background: #f8fafc; border-top: 1px solid #e4eaf0;
}
.cam-nc-btns { display: flex; gap: 6px; justify-content: flex-end; }
.cam-project-stage {
  margin-top: 6px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #f8fbff;
  padding: 8px 10px;
  position: relative;
}
/* Layout compact client selectat */
.cam-stage-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.cam-stage-info { display: flex; flex-direction: column; gap: 1px; }
.cam-stage-label {
  color: #64748b; font-size: 9px; font-weight: 900;
  letter-spacing: .35px; text-transform: uppercase;
}
.cam-stage-compact strong {
  color: #0f1923; font-size: 13px; font-weight: 900;
}
/* Pastreaza si stilurile vechi pt compatibilitate */
.cam-stage-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 8px;
}
.cam-stage-head span { display: block; color: #64748b; font-size: 9px; font-weight: 900; letter-spacing: .35px; text-transform: uppercase; }
.cam-stage-head strong { display: block; color: #0f1923; font-size: 14px; font-weight: 900; margin-top: 2px; }
.cam-add-project-btn {
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  background: #eff6ff;
  color: #1d4ed8;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font: inherit;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
}
.cam-add-project-btn svg { width: 13px; height: 13px; }
.cam-project-search {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
  padding: 7px 10px;
  margin-bottom: 9px;
}
.cam-project-search svg {
  width: 15px;
  height: 15px;
  color: #2563b0;
}
.cam-project-search input {
  border: 0;
  outline: 0;
  flex: 1;
  font: inherit;
  color: #0f1923;
  font-size: 12px;
  font-weight: 800;
}
.cam-project-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  max-height: 120px;
  overflow-y: auto;
  padding-right: 2px;
}
.cam-project-card {
  border: 1.5px solid #dbe4ee;
  border-radius: 10px;
  background: #fff;
  padding: 8px 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .16s, box-shadow .16s, background .16s;
}
.cam-project-card:hover,
.cam-project-card.selected {
  border-color: #2563b0;
  background: #f0f7ff;
  box-shadow: 0 4px 12px rgba(37,99,176,.12);
}
.cam-project-card-top {
  display: flex; align-items: center;
  justify-content: space-between; gap: 6px;
}
.cam-project-card strong {
  display: block; color: #0f1923;
  font-size: 12px; font-weight: 800;
  line-height: 1.2; margin-top: 3px;
}
.cam-project-card p {
  margin: 3px 0 0; color: #475569;
  font-size: 10px; font-weight: 600;
  line-height: 1.2;
}
.cam-project-card-meta {
  display: flex; gap: 6px;
  color: #64748b; font-size: 9px; font-weight: 700;
  margin-top: 4px;
}
.cam-project-type {
  color: #64748b;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.cam-new-project-form,
.cam-location-box {
  margin-top: 9px;
  border: 1px solid #dbe4ee;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.cam-new-project-form {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(560px, calc(100vw - 36px));
  transform: translate(-50%, -50%);
  z-index: 3100;
  box-shadow: 0 30px 80px rgba(15, 25, 35, .32);
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
}
.cam-project-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  background: linear-gradient(135deg, #0f766e, #2563b0);
  color: #fff;
}
.cam-project-popup-head strong {
  display: block;
  font-size: 15px;
  font-weight: 900;
}
.cam-project-popup-x {
  width: 28px;
  height: 28px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 9px;
  background: rgba(255,255,255,.12);
  color: #fff;
  cursor: pointer;
  font-weight: 900;
  flex-shrink: 0;
}
/* ── Continut popup proiect nou ── */
.cam-np-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px 0;
}
.cam-np-label span {
  font-size: 9px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #64748b;
}
/* Rand cautare adresa */
.cam-np-search-row {
  position: relative;
  padding: 8px 14px 0;
}
.cam-np-search-input {
  width: 100%;
  box-sizing: border-box;
}
.cam-np-suggestions {
  position: absolute;
  top: calc(100% - 2px);
  left: 14px;
  right: 14px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-top: none;
  border-radius: 0 0 10px 10px;
  z-index: 3200;
  max-height: 180px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
.cam-np-suggest-item {
  padding: 8px 12px;
  font-size: 11px;
  color: #1e293b;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background .1s;
}
.cam-np-suggest-item:hover { background: #f0f9ff; }
.cam-np-suggest-item:last-child { border-bottom: none; }
/* Harta Leaflet */
.cam-np-leaflet {
  margin: 8px 14px 0;
  height: 230px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #cbd5e1;
}
.cam-np-pin-icon {
  font-size: 28px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  cursor: grab;
}
/* Zoom controls Leaflet — stilizate */
.cam-np-leaflet .leaflet-control-zoom {
  border: none !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.18) !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.cam-np-leaflet .leaflet-control-zoom-in,
.cam-np-leaflet .leaflet-control-zoom-out {
  width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  font-size: 18px !important;
  font-weight: 900 !important;
  color: #173b4f !important;
  background: #fff !important;
  border: none !important;
  border-bottom: 1px solid #e2e8f0 !important;
  transition: background .12s !important;
}
.cam-np-leaflet .leaflet-control-zoom-out {
  border-bottom: none !important;
}
.cam-np-leaflet .leaflet-control-zoom-in:hover,
.cam-np-leaflet .leaflet-control-zoom-out:hover {
  background: #f0f9ff !important;
  color: #0ea5e9 !important;
}
/* Buton locate me */
.cam-np-locate-btn {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 999;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
  font-size: 17px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s, transform .12s;
}
.cam-np-locate-btn:hover {
  background: #f0f9ff;
  transform: scale(1.08);
}
/* Rand raza */
.cam-np-radius-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 0;
  font-size: 11px;
  font-weight: 700;
  color: #374151;
}
.cam-np-slider {
  flex: 1;
  accent-color: #0ea5e9;
  cursor: pointer;
}
.cam-np-radius-num {
  width: 64px !important;
  text-align: center;
}
/* Eroare inline proiect nou */
.cam-np-error {
  margin: 6px 14px 0;
  padding: 9px 12px;
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 9px;
  color: #b91c1c;
  font-size: 11.5px;
  font-weight: 700;
  animation: cam-err-shake .25s ease;
}
@keyframes cam-err-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}
/* Buton salvare */
.cam-np-save-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 10px 14px 14px;
  padding: 11px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #0f766e, #1d4ed8);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(15,118,110,.3);
  transition: transform .12s, box-shadow .12s;
}
.cam-np-save-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 7px 18px rgba(15,118,110,.38);
}
/* legacy — pastrat pentru compatibilitate */
.cam-project-form-title {
  color: #173b4f;
  font-size: 11px;
  font-weight: 900;
  margin-bottom: 8px;
}
.cam-project-form-grid,
.cam-location-grid {
  display: none; /* inlocuit cu noul layout */
}
.cam-project-popup-actions {
  display: none; /* inlocuit cu noul layout */
}
.cam-project-popup-actions a {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 8px 10px;
  font-size: 11px;
  font-weight: 900;
  text-decoration: none;
}
.cam-pin-preview {
  position: relative;
  height: 150px;
  margin: 0 12px 12px;
  border: 1px solid #bfdbfe;
  border-radius: 14px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(15,118,110,.12), rgba(37,99,176,.12)),
    #eef7ff;
  cursor: crosshair;
}
.cam-pin-preview.small {
  height: 96px;
  margin: 9px 0 0;
}
.cam-pin-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(37,99,176,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,176,.14) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cam-pin-radius {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 78px;
  height: 78px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(37,99,176,.12);
  border: 1px dashed rgba(37,99,176,.34);
  pointer-events: none;
}
.cam-pin-marker {
  position: absolute;
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #dc2626;
  box-shadow: 0 8px 18px rgba(220,38,38,.34);
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}
.cam-pin-marker::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 9px;
  height: 9px;
  background: #dc2626;
  transform: translateX(-50%) rotate(45deg);
  border-right: 3px solid #fff;
  border-bottom: 3px solid #fff;
}
.cam-pin-copy {
  position: absolute;
  left: 10px;
  bottom: 10px;
  right: 10px;
  border-radius: 11px;
  background: rgba(255,255,255,.9);
  padding: 8px 10px;
  box-shadow: 0 8px 18px rgba(15,25,35,.1);
}
.cam-pin-copy strong {
  display: block;
  color: #0f1923;
  font-size: 11px;
  font-weight: 900;
}
.cam-pin-copy span {
  color: #64748b;
  font-size: 10px;
  font-weight: 750;
}
.cam-location-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.cam-location-title a {
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: 900;
  text-decoration: none;
}
.cam-location-grid {
  grid-template-columns: 1.4fr 1fr .55fr;
}
.cam-location-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.cam-empty-projects {
  border: 1px dashed #cbd5e1;
  border-radius: 12px;
  color: #64748b;
  padding: 12px;
  font-size: 12px;
  font-weight: 800;
  grid-column: 1 / -1;
}

/* ── 3-column main layout ── */
.cam-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 185px;
  gap: 8px;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}
.cam-col-a, .cam-col-b, .cam-col-c {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  border: 1px solid #e4eaf0;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── Activity / Sistem chips ── */
.cam-chip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}
.cam-chip {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; padding: 5px 3px 4px;
  border: 2px solid #e4eaf0;
  border-radius: 9px; background: #f8fafc;
  cursor: pointer; font-size: 9.5px; font-weight: 600; color: #374151;
  text-align: center; line-height: 1.2;
  transition: all .14s;
}
.cam-chip > span:first-child { font-size: 16px; line-height: 1; display: grid; place-items: center; }
.cam-chip > span:first-child svg { width: 17px; height: 17px; }
.cam-chip:hover { border-color: #cbd5e0; background: #f0f4f8; }
.cam-chip.selected {
  font-weight: 800;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

/* ── Date/time ── */
.cam-form-error {
  grid-column: 1 / -1;
  border: 1.5px solid rgba(220, 38, 38, .28);
  border-left: 5px solid #dc2626;
  border-radius: 13px;
  background: #fff1f2;
  color: #991b1b;
  padding: 10px 12px;
  margin-bottom: 8px;
  animation: cam-error-in .18s ease both;
}
.cam-form-error strong,
.cam-form-error span {
  display: block;
}
.cam-form-error strong {
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .35px;
}
.cam-form-error span {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}
.cam-field-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
  background: #fff7f7 !important;
}
.cam-field-error .cam-chip,
.cam-field-error .cam-emp-card {
  border-color: rgba(220,38,38,.35) !important;
}
.cam-field-error .cam-sec-title,
.cam-field-error .cam-sis-helper {
  color: #991b1b !important;
}
@keyframes cam-error-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.cam-sis-block {
  display: grid;
  gap: 6px;
  margin-top: 6px;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-6px);
  transition: max-height .22s ease, opacity .18s ease, transform .18s ease;
}
.cam-sis-block.is-visible {
  max-height: 200px;
  opacity: 1;
  transform: translateY(0);
}
.cam-sis-helper {
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  margin-top: -2px;
}
#cam-sis-grid {
  grid-template-columns: repeat(4, 1fr);
}
/* Sistemele arata identic cu activitatile — fara stiluri speciale */
.cam-add-work-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg, #173b4f, #1f7a73);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  font-size: 11px;
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(15, 85, 79, .22);
  transition: transform .14s ease, box-shadow .14s ease, opacity .14s ease;
}
.cam-add-work-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 11px 22px rgba(15, 85, 79, .28);
}
.cam-add-work-btn svg {
  width: 15px;
  height: 15px;
}
.cam-work-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cam-work-list-title {
  margin-top: 2px;
  color: #173b4f;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .35px;
  text-transform: uppercase;
}
.cam-work-pill {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 8px;
  border: 1px solid #d8e4ef;
  border-radius: 11px;
  background: linear-gradient(180deg, #ffffff, #f7fbfd);
  padding: 8px 8px 8px 10px;
  animation: cam-work-in .18s ease both;
}
.cam-work-pill strong {
  display: block;
  color: #0f1923;
  font-size: 11px;
  line-height: 1.25;
}
.cam-work-pill span {
  display: block;
  color: #64748b;
  font-size: 10px;
  font-weight: 700;
  margin-top: 2px;
}
.cam-work-pill button {
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 8px;
  background: #fee2e2;
  color: #991b1b;
  cursor: pointer;
  font-weight: 900;
}
@keyframes cam-work-in {
  from { opacity: 0; transform: translateY(-4px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cam-dt-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.cam-dt-field { display: flex; flex-direction: column; gap: 3px; }
.cam-dt-field span { font-size: 9px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .4px; }
.cam-input {
  padding: 7px 8px;
  border: 1.5px solid #e4eaf0; border-radius: 8px;
  background: #f8fafc; color: #0f1923;
  font-size: 12px; font-weight: 600; font-family: inherit;
  width: 100%; transition: border-color .15s;
}
.cam-input:focus { outline: none; border-color: #2563b0; background: #fff; }

/* ── Team strip ── */
.cam-team-strip {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 5px;
}
.cam-emp-card {
  padding: 6px 4px 5px !important;
  border-radius: 10px !important;
  gap: 3px !important;
}
.cam-emp-av { width: 30px !important; height: 30px !important; border-radius: 8px !important; font-size: 11px !important; }
.cam-emp-card strong { font-size: 10px !important; }
.cam-emp-role { font-size: 9px !important; }

/* ── Notes + Save (col C) ── */
.cam-col-c { justify-content: space-between; }
.cam-textarea {
  flex: 1; min-height: 80px !important;
  border: 1.5px solid #e4eaf0 !important; border-radius: 8px !important;
  padding: 8px 10px !important; font-size: 12px !important;
  background: #f8fafc !important; resize: none !important;
  font-family: inherit;
}
.cam-textarea:focus { outline: none !important; border-color: #2563b0 !important; background: #fff !important; }
.cam-save-main {
  width: 100%; margin-top: 8px;
  padding: 11px 8px;
  background: linear-gradient(135deg, #1d4ed8, #2563b0);
  color: #fff; border: none; border-radius: 11px;
  font-size: 13px; font-weight: 800; font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
  box-shadow: 0 4px 14px rgba(37,99,176,.35);
  transition: opacity .15s, transform .12s;
}
.cam-save-main svg { width: 16px; height: 16px; }
.cam-save-main:hover { opacity: .92; transform: translateY(-1px); }

/* Repeta btn */
.cam-repeta-btn {
  font-size: 10px !important; padding: 2px 7px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ERA AI ASSISTANT — floating button + chat panel
   ═══════════════════════════════════════════════════════════════════════════ */

#ai-fab-wrap {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 8000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

/* FAB button */
.ai-fab {
  width: 52px; height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460);
  border: 1.5px solid rgba(255,255,255,.15);
  color: #fff;
  cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  box-shadow: 0 4px 20px rgba(15,52,96,.5);
  transition: transform .15s, box-shadow .15s;
  position: relative;
}
.ai-fab svg { width: 20px; height: 20px; }
.ai-fab-label { font-size: 9px; font-weight: 800; letter-spacing: .5px; opacity: .9; }
.ai-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 28px rgba(15,52,96,.6); }
.ai-fab.is-active { background: linear-gradient(135deg, #0f3460, #1a1a2e); }

/* Panel */
.ai-panel {
  width: 340px;
  max-height: 520px;
  background: #fff;
  border-radius: 20px;
  border: 1.5px solid #e4eaf0;
  box-shadow: 0 16px 48px rgba(13,21,32,.18);
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0; transform: translateY(12px) scale(.97);
  transition: opacity .2s, transform .2s;
}
.ai-panel.is-open { opacity: 1; transform: translateY(0) scale(1); }

/* Panel header */
.ai-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  color: #fff;
}
.ai-panel-title { display: flex; align-items: center; gap: 10px; }
.ai-avatar {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(255,255,255,.15);
  display: grid; place-items: center;
  font-size: 16px;
}
.ai-panel-title strong { display: block; font-size: 13px; font-weight: 800; }
.ai-panel-title span { display: block; font-size: 10px; opacity: .7; margin-top: 1px; }
.ai-close {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: #fff;
  font-size: 13px; cursor: pointer; display: grid; place-items: center;
  transition: background .12s;
}
.ai-close:hover { background: rgba(255,255,255,.25); }

/* Messages */
.ai-messages {
  flex: 1; overflow-y: auto; padding: 12px 12px 6px;
  display: flex; flex-direction: column; gap: 8px;
  background: #f8fafc;
}
.ai-msg { display: flex; }
.ai-msg-user { justify-content: flex-end; }
.ai-msg-bot  { justify-content: flex-start; }
.ai-msg-bubble {
  max-width: 85%; padding: 9px 12px;
  border-radius: 14px; font-size: 12.5px; line-height: 1.55;
}
.ai-msg-user .ai-msg-bubble {
  background: linear-gradient(135deg, #0f3460, #1d4ed8);
  color: #fff; border-bottom-right-radius: 4px;
}
.ai-msg-bot .ai-msg-bubble {
  background: #fff; color: #1a1a2e;
  border: 1px solid #e4eaf0; border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}

/* Typing dots */
.ai-dots { display: flex; gap: 4px; align-items: center; padding: 2px 0; }
.ai-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: #94a3b8; animation: aiDot 1.2s infinite;
}
.ai-dots span:nth-child(2) { animation-delay: .2s; }
.ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aiDot { 0%,80%,100% { opacity:.3; transform:scale(.8); } 40% { opacity:1; transform:scale(1); } }

/* Quick buttons */
.ai-quick-btns {
  display: flex; flex-wrap: wrap; gap: 5px;
  padding: 6px 12px 8px;
  background: #f8fafc;
  border-top: 1px solid #f0f4f8;
}
.ai-quick {
  padding: 5px 10px; border-radius: 20px;
  border: 1.5px solid #e4eaf0; background: #fff;
  font-size: 11px; font-weight: 600; color: #374151;
  cursor: pointer; transition: all .12s;
}
.ai-quick:hover { border-color: #0f3460; color: #0f3460; background: #f0f4ff; }

/* Input row */
.ai-input-row {
  display: flex; align-items: flex-end; gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-top: 1.5px solid #f0f4f8;
}
.ai-textarea {
  flex: 1; resize: none; border: 1.5px solid #e4eaf0; border-radius: 12px;
  padding: 8px 10px; font-size: 12.5px; font-family: inherit;
  background: #f8fafc; color: #0f1923; outline: none; line-height: 1.4;
  transition: border-color .15s;
}
.ai-textarea:focus { border-color: #0f3460; background: #fff; }
.ai-send {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  border: none; color: #fff; cursor: pointer;
  display: grid; place-items: center;
  transition: opacity .15s;
}
.ai-send svg { width: 15px; height: 15px; }
.ai-send:disabled { opacity: .4; cursor: default; }
.ai-send:not(:disabled):hover { opacity: .85; }

/* ── AI Action Card ── */
.ai-action-card {
  background: #fff;
  border: 2px solid #22c55e;
  border-radius: 14px;
  overflow: hidden;
  width: 100%;
  max-width: 280px;
}
.ai-action-card.has-missing { border-color: #f59e0b; }
.ai-action-title {
  padding: 8px 12px;
  background: #f0fdf4;
  font-size: 11px; font-weight: 800;
  color: #15803d;
  border-bottom: 1px solid #dcfce7;
}
.ai-action-card.has-missing .ai-action-title {
  background: #fffbeb; color: #b45309;
  border-bottom-color: #fef3c7;
}
.ai-action-rows { padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; }
.ai-action-row {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: #374151; padding: 3px 6px; border-radius: 6px;
}
.ai-action-row span { font-weight: 600; }
.ai-row-missing {
  background: #fef2f2;
  color: #dc2626 !important;
  border: 1px dashed #fca5a5;
}
.ai-row-missing span { color: #dc2626 !important; }
.ai-action-open-btn {
  width: 100%; padding: 9px 12px;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  color: #fff; border: none; font-size: 12px; font-weight: 700;
  font-family: inherit; cursor: pointer;
  transition: opacity .15s;
}
.ai-action-open-btn:hover { opacity: .88; }

/* ── Missing field highlights in modal ── */
.ai-missing-banner {
  background: #fef2f2;
  border: 1.5px solid #fca5a5;
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 11.5px; color: #dc2626;
  margin-bottom: 8px;
  display: flex; flex-wrap: wrap; gap: 4px; align-items: center;
}
.ai-missing-banner strong {
  background: #fee2e2; padding: 1px 6px; border-radius: 4px;
}
input.ai-missing, textarea.ai-missing {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
.cam-client-trigger.ai-missing {
  border-color: #dc2626 !important;
  background: #fef2f2 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
}
.cam-chip-grid.ai-missing {
  outline: 2px dashed #dc2626;
  outline-offset: 4px;
  border-radius: 8px;
}
.cam-team-strip.ai-missing {
  outline: 2px dashed #dc2626;
  outline-offset: 4px;
  border-radius: 8px;
}

/* ── Microfon ── */
.ai-mic {
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px;
  background: #f1f4f8; border: 1.5px solid #e4eaf0;
  color: #6b7a8d; cursor: pointer;
  display: grid; place-items: center;
  transition: all .15s;
}
.ai-mic svg { width: 15px; height: 15px; }
.ai-mic:hover { background: #e8f0fe; border-color: #4285f4; color: #4285f4; }
.ai-mic.is-listening {
  background: #fee2e2 !important;
  border-color: #dc2626 !important;
  color: #dc2626 !important;
  animation: micPulse 1s infinite;
}
@keyframes micPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,.4); }
  50% { box-shadow: 0 0 0 6px rgba(220,38,38,0); }
}

/* ── TTS Toggle ── */
.ai-tts-toggle {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,.12); border: none; color: rgba(255,255,255,.6);
  cursor: pointer; display: grid; place-items: center;
  transition: all .15s; margin-right: 4px;
}
.ai-tts-toggle svg { width: 13px; height: 13px; }
.ai-tts-toggle.is-on { color: #fff; background: rgba(255,255,255,.2); }
.ai-tts-toggle:not(.is-on) { opacity: .45; }
.ai-tts-toggle:hover { background: rgba(255,255,255,.28); opacity: 1; }

/* Aliniaza butoanele in header */
.ai-panel-head { gap: 8px; }

/* Buton pick voce */
.ai-voice-pick {
  background: rgba(255,255,255,.12); border: none; cursor: pointer;
  color: #fff; border-radius: 8px; padding: 5px 8px;
  font-size: 14px; transition: background .15s;
}
.ai-voice-pick:hover { background: rgba(255,255,255,.28); }

/* Panel selector voce */
.ai-voice-panel {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; background: #f0f4ff; border-bottom: 1px solid #dde6ff;
  flex-wrap: wrap;
}
.ai-voice-panel.is-hidden { display: none; }
.ai-voice-label { font-size: 11px; font-weight: 700; color: #0f3460; white-space: nowrap; }
.ai-voice-select {
  flex: 1; min-width: 0; font-size: 11px; padding: 4px 8px;
  border: 1px solid #c0cfe8; border-radius: 7px; background: #fff;
  color: #1a1a2e; outline: none; cursor: pointer;
}
.ai-voice-test {
  background: #0f3460; color: #fff; border: none; border-radius: 7px;
  padding: 4px 10px; font-size: 11px; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.ai-voice-test:hover { background: #1a4a8a; }

/* ── AI Guided Tour — Spotlight pe camp ── */
.ai-spotlight {
  position: relative;
  z-index: 10;
  animation: aiSpotlight 1s ease-in-out infinite alternate !important;
}
@keyframes aiSpotlight {
  0%   { box-shadow: 0 0 0 3px rgba(220,38,38,.3), 0 0 16px rgba(220,38,38,.2); border-color: #dc2626 !important; }
  100% { box-shadow: 0 0 0 6px rgba(220,38,38,.0), 0 0 24px rgba(220,38,38,.35); border-color: #ef4444 !important; }
}

/* ── AI Tooltip flotant ── */
.ai-field-tooltip {
  position: fixed;
  z-index: 99999;
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px;
  max-width: 280px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.3);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
}
.ai-field-tooltip::after {
  content: ;
  position: absolute;
  bottom: -7px; left: 20px;
  border: 7px solid transparent;
  border-top-color: #1a1a2e;
  border-bottom: none;
}
.ai-field-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.ai-tt-icon { font-size: 18px; flex-shrink: 0; animation: ttBounce .6s infinite alternate; }
@keyframes ttBounce { from { transform: scale(1); } to { transform: scale(1.2); } }
.ai-tt-text { font-size: 12.5px; font-weight: 600; line-height: 1.5; }

/* ── Microfon — stari conversatie ── */
.ai-mic.convo-active {
  background: linear-gradient(135deg, #1a1a2e, #0f3460) !important;
  border-color: #0f3460 !important;
  color: #fff !important;
}
.ai-mic.is-waiting {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  animation: none !important;
}
.ai-mic.is-ai-speaking {
  background: #d1fae5 !important;
  border-color: #059669 !important;
  color: #065f46 !important;
  animation: aiSpeakPulse 0.8s infinite alternate !important;
}
@keyframes aiSpeakPulse {
  0%   { box-shadow: 0 0 0 0 rgba(5,150,105,.4); }
  100% { box-shadow: 0 0 0 7px rgba(5,150,105,0); }
}

/* Banner modul conversatie activ */
.ai-convo-bar {
  background: linear-gradient(135deg, #1a1a2e, #0f3460);
  color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 5px 12px;
  display: flex; align-items: center; gap: 6px;
  letter-spacing: .3px;
}
.ai-convo-bar span { opacity: .75; }

/* ── Tooltip ghidaj interactiv ── */
.ai-field-tooltip { flex-direction: column !important; gap: 6px !important; max-width: 300px !important; }
.ai-tt-top { display: flex; align-items: flex-start; gap: 8px; }
.ai-tt-status { font-size: 11px; padding-top: 2px; display: flex; align-items: center; gap: 6px; }
.ai-tt-prog { background: rgba(255,255,255,.15); padding: 1px 7px; border-radius: 20px; font-size: 10px; }
.ai-tt-waiting { color: #fde68a; font-weight: 700; }
.ai-tt-listening { color: #f87171; font-weight: 700; animation: ttBlink .7s infinite alternate; }
@keyframes ttBlink { from { opacity:1; } to { opacity:.4; } }
.ai-tt-thinking { color: #a7f3d0; font-weight: 600; }

/* Camp completat cu succes */
input.ai-filled, .cam-client-trigger.ai-filled {
  border-color: #22c55e !important;
  background: #f0fdf4 !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,.15) !important;
  animation: none !important;
}
.cam-chip-grid.ai-filled, .cam-team-strip.ai-filled {
  outline: 2px solid #22c55e !important;
  outline-offset: 4px;
  border-radius: 8px;
  animation: none !important;
}

/* ── Banner file:// protocol ─────────────────────────────────────────────── */
#era-file-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999;
  background: #1a1a2e; border-top: 3px solid #f59e0b; padding: 10px 16px;
}
.era-file-banner-inner {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  max-width: 900px; margin: 0 auto;
}
.era-file-banner-inner span { color: #fef3c7; font-size: 13px; font-weight: 600; flex: 1; min-width: 200px; }
.era-file-banner-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.era-banner-btn {
  padding: 6px 14px; border-radius: 8px; font-size: 12px; font-weight: 700;
  cursor: pointer; border: none; text-decoration: none; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.era-banner-export { background: #0f3460; color: #fff; }
.era-banner-import { background: #065f46; color: #fff; }
.era-banner-server { background: #f59e0b; color: #1a1a2e; }
.era-banner-btn:hover { opacity: .85; }

/* ═══════════════════════════════════════════════════════════════
   DEPOZIT & STOCURI — Redesign complet (wh-*)
   ═══════════════════════════════════════════════════════════════ */

/* Page wrapper */
.wh-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 0 40px;
}

/* Header */
.wh-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.wh-header h2 { margin: 4px 0 0; font-size: 22px; }
.wh-header-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* KPI grid — 4 cards */
.wh-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media (max-width: 900px) { .wh-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 500px) { .wh-kpi-grid { grid-template-columns: 1fr; } }

.wh-kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow .15s;
}
.wh-kpi-card:hover { box-shadow: var(--shadow); }
.wh-kpi-card.wh-kpi-danger { border-color: #fca5a5; background: var(--red-light); }
.wh-kpi-label { font-size: 10px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.wh-kpi-value { font-size: 20px; font-weight: 800; color: var(--ink); line-height: 1; }
.wh-kpi-danger .wh-kpi-value { color: var(--red); }
.wh-kpi-sub { font-size: 11px; color: var(--muted); }

/* Main grid — table left, log right */
.wh-main-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 960px) { .wh-main-grid { grid-template-columns: 1fr; } }

/* Shared panel head */
.wh-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.wh-panel-head strong { font-size: 14px; color: var(--ink); }
.wh-panel-hint { font-size: 11px; color: var(--muted); font-style: italic; }
.wh-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: var(--nav);
  color: #fff;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  margin-left: 8px;
}

/* Material table panel */
.wh-table-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
  max-height: 560px;
}
.wh-search-bar-wrap { padding: 10px 14px 6px; border-bottom: 1px solid var(--line); }
.wh-search-dual { display: flex; gap: 8px; }
.wh-search-dual .wh-search-input { flex: 1; min-width: 0; }
.wh-search-input {
  width: 100%;
  padding: 7px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  font-size: 13px;
  background: #f8fafc;
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.wh-filter-bar .wh-search-input {
  min-height: 36px;
  font-size: 12.5px;
}
.wh-search-input::placeholder { color: #94a3b8; }
.wh-search-input:focus { border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 3px #3b82f620; }
.wh-table-wrap {
  overflow: auto;
  flex: 1;
  min-height: 0;
}
.wh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.wh-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.wh-table-row {
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background .12s;
}
.wh-table-row:last-child { border-bottom: none; }
.wh-table-row:hover { background: var(--blue-light); }
.wh-table-row td {
  padding: 8px 12px;
  color: var(--ink);
  vertical-align: middle;
}
.wh-table-row td strong { display: block; font-size: 12.5px; line-height: 1.25; }
.wh-loc-hint { font-size: 11px; color: var(--muted); }

/* Material row — detaliat */
.wh-mat-name { font-size: 12.5px; font-weight: 800; color: var(--ink); margin-bottom: 4px; line-height: 1.25; }
.wh-mat-locs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.wh-loc-badge {
  font-size: 9.5px; font-weight: 700;
  padding: 2px 7px; border-radius: 20px;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 4px;
}
.wh-loc-qty {
  font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,0.08); border-radius: 10px;
  padding: 0 5px; margin-left: 1px;
}
.wh-stock-val { font-size: 12.5px; font-weight: 800; color: var(--ink); }
.wh-unit { font-size: 11px; font-weight: 500; color: var(--muted); }
.wh-stock-bar {
  height: 4px; background: #e2e8f0; border-radius: 99px;
  margin-top: 4px; width: 76px; overflow: hidden;
}
.wh-stock-fill { height: 100%; border-radius: 99px; transition: width .3s; }
.wh-in-qty { font-size: 12px; font-weight: 700; color: #0f766e; }
.wh-out-qty { font-size: 12px; font-weight: 700; color: #dc2626; }
.wh-td-num { text-align: right; }
.wh-td-center { text-align: center; }
.wh-last-date { font-size: 12px; color: var(--ink); }
.wh-last-by { font-size: 11px; color: var(--muted); margin-top: 2px; }
.wh-moves-count {
  display: inline-block; min-width: 24px; height: 24px;
  line-height: 24px; text-align: center;
  background: #f1f5f9; border-radius: 99px;
  font-size: 12px; font-weight: 700; color: #475569;
}

/* Celule clickabile din tabel */
.wh-td-click {
  position: relative;
  cursor: pointer;
  transition: background .12s;
}
.wh-td-click:hover { background: #eff6ff !important; }
.wh-cell-hint {
  font-size: 10px; color: #3b82f6;
  margin-top: 3px; opacity: 0;
  transition: opacity .12s;
}
.wh-td-click:hover .wh-cell-hint { opacity: 1; }

/* Popup celulă — lista de mișcări */
.wh-cp-list {
  padding: 4px 0 8px;
  max-height: 420px;
  overflow-y: auto;
}
.wh-cp-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 18px;
  border-bottom: 1px solid var(--line);
  transition: background .1s;
}
.wh-cp-row:last-child { border-bottom: none; }
.wh-cp-row:hover { background: #f8fafc; }
.wh-cp-row-left { display: flex; flex-direction: column; gap: 3px; }
.wh-cp-row-right { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; text-align: right; }
.wh-cp-qty { font-size: 14px; font-weight: 800; }
.wh-cp-who { font-size: 12px; color: var(--ink); }
.wh-cp-date { font-size: 12px; color: var(--ink); font-weight: 600; }
.wh-cp-dest { font-size: 11px; color: var(--muted); }
.wh-cp-note { font-size: 11px; color: var(--muted); max-width: 220px; }

/* Status badges */
.wh-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
}
.wh-badge-ok { background: #d1fae5; color: #065f46; }
.wh-badge-warning { background: #fef9c3; color: #854d0e; }
.wh-badge-danger { background: #fee2e2; color: #991b1b; }

/* Log panel */
.wh-log-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
  max-height: 560px;
}

/* Log filters */
.wh-log-filters {
  display: flex;
  gap: 6px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.wh-log-filter-btn {
  padding: 4px 12px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
}
.wh-log-filter-btn:hover { background: var(--surface-soft); color: var(--ink); }
.wh-log-filter-btn.active { background: var(--nav); color: #fff; border-color: var(--nav); }

/* Log list */
.wh-log-list {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
  padding: 6px 8px 10px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f7fb 100%);
}

/* Log item */
.wh-log-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 5px 0;
  padding: 10px 10px;
  border: 1px solid rgba(148, 163, 184, 0.22);
  border-left: 3px solid var(--log-accent, #64748b);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background .14s ease;
}
.wh-log-item:last-child { border-bottom: none; }
.wh-log-item:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--log-accent, #64748b) 34%, #dbe3ed);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
  background: linear-gradient(90deg, color-mix(in srgb, var(--log-accent, #64748b) 7%, #fff), #fff 58%);
}

/* Grouped scan card */
.wh-log-grouped { flex-direction: column; align-items: stretch; gap: 5px; }
.wh-log-top { display: flex; align-items: center; gap: 9px; }
.wh-log-avatar { font-size: 16px; flex-shrink: 0; }
.wh-log-head { flex: 1; min-width: 0; }
.wh-log-head strong { display: block; font-size: 12px; color: var(--ink); line-height: 1.3; }
.wh-log-prods { display: flex; flex-wrap: wrap; gap: 4px; padding-left: 25px; }
.wh-log-prod {
  font-size: 11px; font-weight: 500;
  background: #f1f5f9; color: #334155;
  border-radius: 6px; padding: 2px 7px;
  white-space: nowrap;
}

/* Simple log item */
.wh-log-body { flex: 1; min-width: 0; padding-top: 1px; }
.wh-log-body strong {
  display: block;
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.25;
  margin-bottom: 3px;
}
.wh-log-meta {
  font-size: 11px;
  color: #64748b;
  display: block;
  margin-top: 3px;
  line-height: 1.3;
}
.wh-log-cat-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border-radius: 11px;
  font-size: 17px;
  text-align: center;
  color: var(--log-accent, #64748b);
  background: color-mix(in srgb, var(--log-accent, #64748b) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--log-accent, #64748b) 24%, #e2e8f0);
}
.wh-log-adjustment .wh-log-cat-icon {
  font-size: 20px;
  font-weight: 950;
  color: #1d4ed8;
  background: linear-gradient(135deg, #dbeafe, #eff6ff);
  border-color: rgba(37, 99, 235, 0.22);
}
.wh-log-route {
  font-size: 11px;
  color: #475569;
  margin-top: 1px;
  display: block;
  line-height: 1.35;
}

/* Invoice log card (ai-scan grouped) */
.wh-log-invoice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 5px 0;
  padding: 11px;
  border: 1px solid rgba(124, 58, 237, 0.16);
  border-left: 3px solid #7c3aed;
  border-radius: 12px;
  background: linear-gradient(90deg, rgba(124, 58, 237, 0.055), #fff 62%);
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.045);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.wh-log-invoice:hover {
  transform: translateY(-1px);
  border-color: rgba(124, 58, 237, 0.3);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.09);
}
.wh-log-invoice:last-child { border-bottom: none; }
.wh-log-inv-thumb {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  overflow: hidden;
  background: #f3e8ff;
  border: 1px solid rgba(124, 58, 237, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wh-log-inv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.wh-log-inv-no-img {
  font-size: 22px; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.wh-log-inv-body { flex: 1; min-width: 0; }
.wh-log-inv-top {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; margin-bottom: 2px;
}
.wh-log-inv-supplier { font-size: 13px; font-weight: 700; color: var(--ink); }
.wh-log-inv-doc { font-size: 12px; color: var(--muted); font-weight: 500; }
.wh-log-inv-meta { font-size: 11px; color: var(--muted); margin-bottom: 5px; display: block; }
.wh-log-inv-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wh-log-prod-chip {
  display: inline-flex; align-items: center; gap: 3px;
  max-width: 100%;
  font-size: 10.5px;
  font-weight: 800;
  border-radius: 7px;
  padding: 3px 7px;
  color: #fff; white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  background: var(--chip-bg, #64748b);
  opacity: 0.92;
}

/* Journal search */
.wh-log-search-wrap {
  padding: 8px 14px 4px;
  border-bottom: 1px solid var(--line);
}
.wh-log-search-input {
  width: 100%; padding: 7px 12px;
  border: 1.5px solid var(--line); border-radius: 10px;
  font-size: 13px; background: #f8fafc; color: var(--ink);
  outline: none; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
.wh-log-search-input::placeholder { color: #94a3b8; }
.wh-log-search-input:focus {
  border-color: #3b82f6; background: #fff;
  box-shadow: 0 0 0 3px #3b82f620;
}

/* Channel badges */
.wh-channel-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 850;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}
.wh-channel-admin-web { background: #e0e7ff; color: #3730a3; }
.wh-channel-employee-app { background: #d1fae5; color: #065f46; }
.wh-channel-ai-scan { background: #ede9fe; color: #6d28d9; }

/* Form card */
.wh-form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}
.wh-form-tabs {
  display: flex;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}
.wh-form-tab {
  flex: 1;
  padding: 12px 16px;
  font-size: 13px;
  font-weight: 600;
  border: none;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .12s;
  border-bottom: 2px solid transparent;
}
.wh-form-tab:hover { color: var(--ink); }
.wh-form-tab.active { color: var(--blue); border-bottom-color: var(--blue); background: var(--surface); }
.wh-tab-scan { color: #059669; margin-left: auto; border-bottom-color: transparent !important; }
.wh-tab-scan:hover { background: #d1fae5 !important; color: #065f46; }
.wh-form-card .stock-flow-form { padding: 16px 18px; }
#wh-tab-add .stock-flow-form { padding: 16px 18px; }

/* Popup overlay */
.wh-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 35, 0.55);
  backdrop-filter: blur(3px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: wh-fade-in .15s ease;
}
@keyframes wh-fade-in { from { opacity: 0; } to { opacity: 1; } }

.wh-popup {
  background: var(--surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  overflow-y: auto;
  animation: wh-slide-up .18s ease;
}
@keyframes wh-slide-up { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.wh-popup-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
}
.wh-popup-close {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  transition: background .12s, color .12s;
}
.wh-popup-close:hover { background: var(--line); color: var(--ink); }

.wh-popup-body { padding: 4px 0 12px; }

.wh-move-popup {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--move-accent, #2563eb) 18%, #e2e8f0);
}
.wh-move-popup .wh-popup-body {
  padding: 14px;
  background:
    radial-gradient(circle at 92% 5%, color-mix(in srgb, var(--move-accent, #2563eb) 12%, transparent), transparent 28%),
    linear-gradient(180deg, #f8fbff 0%, #ffffff 58%);
}
.wh-move-head {
  justify-content: flex-start;
  gap: 11px;
  padding: 14px 16px;
  color: #fff;
  border-bottom: none;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--move-accent, #2563eb) 88%, #0f172a), #102033);
}
.wh-move-head .wh-popup-close {
  margin-left: auto;
  color: rgba(255,255,255,.82);
  background: rgba(255,255,255,.10);
}
.wh-move-head .wh-popup-close:hover {
  color: #fff;
  background: rgba(255,255,255,.18);
}
.wh-move-title-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.24);
  font-size: 20px;
}
.wh-move-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wh-move-title strong {
  font-size: 15px;
  line-height: 1.1;
}
.wh-move-title small {
  color: rgba(255,255,255,.76);
  font-size: 11px;
  font-weight: 750;
}
.wh-move-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 13px;
  border: 1px solid color-mix(in srgb, var(--move-accent, #2563eb) 18%, #dbe3ed);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
}
.wh-move-hero strong {
  display: block;
  margin: 3px 0 4px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.2;
}
.wh-move-hero small {
  color: #64748b;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1.25;
}
.wh-move-qty {
  min-width: 72px;
  padding: 10px 12px;
  border-radius: 14px;
  text-align: center;
  color: color-mix(in srgb, var(--move-accent, #2563eb) 78%, #0f172a);
  background: color-mix(in srgb, var(--move-accent, #2563eb) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--move-accent, #2563eb) 20%, #dbe3ed);
}
.wh-move-qty strong {
  margin: 0;
  font-size: 22px;
  line-height: 1;
}
.wh-move-qty span {
  display: block;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}
.wh-move-flow {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.wh-move-flow div {
  min-width: 0;
  padding: 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}
.wh-move-flow span,
.wh-move-info span,
.wh-move-note span {
  display: block;
  margin-bottom: 4px;
  color: #64748b;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.wh-move-flow strong,
.wh-move-info strong,
.wh-move-note strong {
  display: block;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.25;
}
.wh-move-flow em {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  color: color-mix(in srgb, var(--move-accent, #2563eb) 80%, #0f172a);
  background: color-mix(in srgb, var(--move-accent, #2563eb) 12%, #fff);
  font-style: normal;
  font-weight: 950;
}
.wh-move-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.wh-move-info,
.wh-move-note {
  padding: 10px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
}
.wh-move-info.accent {
  background: color-mix(in srgb, var(--move-accent, #2563eb) 10%, #fff);
  border-color: color-mix(in srgb, var(--move-accent, #2563eb) 22%, #dbe3ed);
}
.wh-move-note {
  margin-top: 10px;
  border-color: rgba(245, 158, 11, .24);
  background: #fffbeb;
}

.wh-popup-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 18px;
}
.wh-popup-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  min-width: 110px;
  flex-shrink: 0;
}
.wh-popup-val { font-size: 13px; color: var(--ink); }

.wh-popup-divider {
  margin: 8px 18px;
  border: none;
  border-top: 1px solid var(--line);
}

.wh-popup-section-title {
  display: block;
  padding: 8px 18px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
}

.wh-popup-mat-stats {
  display: flex;
  gap: 24px;
  padding: 12px 18px;
  font-size: 13px;
  color: var(--ink);
}

.wh-popup-hist-list { padding: 0 18px 8px; }
.wh-popup-hist-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink);
}
.wh-popup-hist-row:last-child { border-bottom: none; }
.wh-popup-hist-time { font-size: 11px; color: var(--muted); }
.wh-popup-empty { font-size: 13px; color: var(--muted); padding: 12px 0; }

/* Popup scan AI block */
.wh-popup-scan-block {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 18px;
  background: #f0f9ff;
  border-radius: 8px;
  margin: 0 18px 8px;
}
.wh-popup-scan-thumb {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #bae6fd;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform .15s, box-shadow .15s;
}
.wh-popup-scan-thumb:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
}
.wh-popup-scan-meta { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.wh-popup-scan-furnizor { font-weight: 600; color: var(--ink); }
.wh-popup-scan-nr { color: var(--muted); font-size: 12px; }
.wh-popup-scan-date { color: var(--muted); font-size: 12px; }

/* Produse detectate AI in popup */
.wh-popup-prod-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.wh-popup-prod-row:last-child { border-bottom: none; }
.wh-popup-prod-qty { font-weight: 600; color: #0f766e; white-space: nowrap; margin-left: 8px; }

/* Deja adăugat în stoc — mesaj informativ */
.sdp-already-added {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 16px 0;
  padding: 12px 14px;
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
}
.sdp-already-icon { font-size: 20px; line-height: 1; flex-shrink: 0; }
.sdp-already-text { display: flex; flex-direction: column; gap: 3px; font-size: 13px; color: #166534; }
.sdp-already-text strong { font-size: 14px; }
.sdp-already-text span { color: #15803d; font-size: 12px; }

/* Destinatie search in scan detail popup */
.sdp-dest-block {
  padding: 10px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.sdp-dest-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.sdp-dest-search-wrap {
  position: relative;
}
.sdp-dest-input {
  width: 100%;
  padding: 9px 14px;
  border-radius: 10px;
  border: 2px solid #cbd5e1;
  font-size: 14px;
  background: var(--card);
  color: var(--ink);
  outline: none;
  box-sizing: border-box;
  transition: border-color .15s;
}
.sdp-dest-input:focus { border-color: #3b82f6; }
.sdp-dest-dropdown {
  display: none;
  position: fixed;
  background: #fff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  z-index: 99999;
  max-height: 220px;
  overflow-y: auto;
  min-width: 260px;
}
.sdp-dd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 13px;
  color: var(--ink);
  transition: background .1s;
}
.sdp-dd-item:hover, .sdp-dd-active { background: #eff6ff; }
.sdp-dd-icon { font-size: 16px; flex-shrink: 0; }
.sdp-dd-text { flex: 1; }
.sdp-dd-type { font-size: 11px; color: var(--muted); background: #f1f5f9; padding: 2px 6px; border-radius: 20px; }
.sdp-dd-empty { padding: 12px 14px; font-size: 13px; color: var(--muted); }

/* Quick chips - top 3 frecvente */
.sdp-dest-quick {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.sdp-quick-chip {
  padding: 5px 12px;
  border-radius: 20px;
  border: 1.5px solid #cbd5e1;
  background: var(--bg);
  font-size: 12px;
  color: var(--ink);
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.sdp-quick-chip:hover { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; }
.sdp-quick-active { border-color: #3b82f6; background: #eff6ff; color: #1d4ed8; font-weight: 600; }