/* ============================================
   SomAds Demandas — shadcn/ui Design System
   Dark-first, adapted from shadcn components
   ============================================ */

/* --- shadcn CSS Variables --- */
:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 240 10% 3.9%;
  --primary: 142 69% 28%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 240 5.9% 90%;
  --input: 240 5.9% 90%;
  --ring: 142 69% 28%;
  --radius: 0.5rem;

  --sidebar-background: 0 0% 98%;
  --sidebar-foreground: 240 5.3% 26.1%;
  --sidebar-primary: 142 69% 28%;
  --sidebar-primary-foreground: 0 0% 98%;
  --sidebar-accent: 240 4.8% 95.9%;
  --sidebar-accent-foreground: 240 5.9% 10%;
  --sidebar-border: 220 13% 91%;
  --sidebar-ring: 142 69% 28%;

  /* Semantic */
  --color-urgent: 0 84% 60%;
  --color-high: 25 95% 53%;
  --color-normal: 217 91% 60%;
  --color-low: 220 9% 46%;
  --color-success: 142 69% 28%;
  --color-warning: 38 92% 50%;
  --color-violet: 263 70% 50%;
  --color-amber: 38 92% 50%;

  --sidebar-width: 17rem;
  --sidebar-width-collapsed: 3.5rem;
  --topbar-height: 4rem;
}

.dark {
  --background: 220 13% 10%;
  --foreground: 0 0% 95%;
  --card: 220 13% 12%;
  --card-foreground: 0 0% 95%;
  --popover: 220 13% 13%;
  --popover-foreground: 0 0% 95%;
  --primary: 142 60% 50%;
  --primary-foreground: 144 80% 10%;
  --secondary: 220 10% 18%;
  --secondary-foreground: 0 0% 95%;
  --muted: 220 10% 18%;
  --muted-foreground: 220 5% 58%;
  --accent: 220 10% 18%;
  --accent-foreground: 0 0% 95%;
  --destructive: 0 63% 31%;
  --destructive-foreground: 0 0% 95%;
  --border: 220 10% 20%;
  --input: 220 10% 20%;
  --ring: 142 60% 50%;

  --sidebar-background: 220 13% 9%;
  --sidebar-foreground: 0 0% 88%;
  --sidebar-primary: 142 60% 50%;
  --sidebar-primary-foreground: 144 80% 10%;
  --sidebar-accent: 220 10% 15%;
  --sidebar-accent-foreground: 0 0% 88%;
  --sidebar-border: 220 10% 16%;
}

/* --- Base Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  -webkit-font-smoothing: antialiased;
}

body { min-height: 100vh; }

a { color: hsl(var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Scrollbar (shadcn scroll-area style) — adapta ao tema via tokens --- */
html { scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent; scrollbar-width: thin; }
body { scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent; }
* { scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================
   LAYOUT — shadcn Sidebar pattern
   ============================================ */
.app-layout {
  display: flex;
  min-height: 100vh;
}

/* --- Sidebar (shadcn sidebar component) --- */
.sidebar {
  width: var(--sidebar-width);
  background: hsl(var(--sidebar-background));
  border-right: 1px solid hsl(var(--sidebar-border));
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 40;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sidebar-header {
  height: var(--topbar-height);
  display: flex;
  align-items: center;
  padding: 0 0.75rem;
  border-bottom: 1px solid hsl(var(--sidebar-border));
  gap: 0.5rem;
}

/* Botão de recolher/expandir (visível em desktop) */
.sidebar-collapse-btn {
  margin-left: auto;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.sidebar-collapse-btn:hover {
  background: hsl(var(--sidebar-accent));
  border-color: hsl(var(--sidebar-border));
  color: hsl(var(--sidebar-foreground));
}
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none; }
}

.sidebar-footer-user {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
  color: inherit;
}

.sidebar-header svg { flex-shrink: 0; border-radius: var(--radius); }

.sidebar-header .logo-text {
  font-size: 1rem;
  font-weight: 600;
  color: hsl(var(--sidebar-foreground));
}

.sidebar-nav {
  flex: 1;
  padding: 0.5rem;
  overflow-y: auto;
}

.sidebar-section { margin-top: 1rem; }

.sidebar-section-title {
  font-size: 0.7rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 0.5rem;
  margin-bottom: 0.25rem;
}

/* shadcn sidebar-menu-button */
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  border-radius: var(--radius);
  color: hsl(var(--sidebar-foreground));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}

.sidebar-item:hover {
  background: hsl(var(--sidebar-accent));
  color: hsl(var(--sidebar-accent-foreground));
  text-decoration: none;
}

.sidebar-item.active {
  background: hsl(var(--sidebar-primary) / 0.1);
  color: hsl(var(--sidebar-primary));
  font-weight: 600;
}

.sidebar-item svg {
  width: 1.125rem;
  height: 1.125rem;
  flex-shrink: 0;
  opacity: 0.7;
}
.sidebar-item.active svg { opacity: 1; }

.sidebar-footer {
  padding: 0.75rem;
  border-top: 1px solid hsl(var(--sidebar-border));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ====================================================
   Sidebar COLAPSADA (desktop) — modo só com ícones
   ==================================================== */
.sidebar.collapsed {
  width: var(--sidebar-width-collapsed, 3.5rem);
  transition: width 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar.collapsed .logo-text,
.sidebar.collapsed .sidebar-item-label,
.sidebar.collapsed .sidebar-section-title,
.sidebar.collapsed .sidebar-user,
.sidebar.collapsed .sidebar-badge,
.sidebar.collapsed .sidebar-mini-cal {
  display: none;
}
.sidebar.collapsed .sidebar-header {
  padding: 0 0.5rem;
  justify-content: center;
}
.sidebar.collapsed .sidebar-collapse-btn {
  margin-left: 0;
  position: absolute;
  top: 0.5rem;
  right: -0.85rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--sidebar-border));
  width: 1.5rem;
  height: 1.5rem;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
  z-index: 2;
}
.sidebar.collapsed .sidebar-nav { padding: 0.5rem 0.375rem; }
.sidebar.collapsed .sidebar-item {
  justify-content: center;
  padding: 0.5rem;
  gap: 0;
}
.sidebar.collapsed .sidebar-section { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid hsl(var(--sidebar-border)); }
.sidebar.collapsed .sidebar-footer { padding: 0.5rem; justify-content: center; flex-wrap: wrap; }
.sidebar.collapsed .sidebar-footer-user { justify-content: center; flex: 0; }
.sidebar.collapsed .sidebar-footer .flex { flex-direction: column; gap: 0.25rem; width: 100%; align-items: center; }

/* Main content acompanha a largura da sidebar colapsada */
.sidebar.collapsed ~ .main-content,
.app-layout:has(.sidebar.collapsed) .main-content {
  margin-left: var(--sidebar-width-collapsed, 3.5rem);
}

/* --- Main Content --- */
.main-content {
  flex: 1;
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  min-width: 0;
  transition: margin-left 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Topbar --- */
.topbar {
  height: var(--topbar-height);
  background: hsl(var(--background));
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: 30;
}

.topbar-left { display: flex; align-items: center; gap: 1rem; }
.topbar-right { display: flex; align-items: center; gap: 0.5rem; }
.topbar-title { font-size: 1.125rem; font-weight: 600; }

.page-content { padding: 1.5rem; }

/* ============================================
   BUTTONS — shadcn button variants
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  height: 2.5rem;
  padding: 0 1.25rem;
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
  text-decoration: none;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}
.btn:disabled {
  pointer-events: none;
  opacity: 0.5;
}

.btn-primary {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.btn-primary:hover { opacity: 0.9; }

.btn-secondary {
  background: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}
.btn-secondary:hover { background: hsl(var(--secondary) / 0.8); }

.btn-ghost {
  background: transparent;
  color: hsl(var(--foreground));
}
.btn-ghost:hover { background: hsl(var(--accent)); }

.btn-outline {
  background: transparent;
  border: 1px solid hsl(var(--input));
  color: hsl(var(--foreground));
}
.btn-outline:hover { background: hsl(var(--accent)); }

.btn-danger {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}
.btn-danger:hover { opacity: 0.9; }

.btn-icon {
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  background: transparent;
  color: hsl(var(--muted-foreground));
  border: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.btn-icon:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); }
.btn-icon svg { width: 1.125rem; height: 1.125rem; }

.btn-sm { height: 2rem; padding: 0 0.875rem; font-size: 0.8125rem; border-radius: var(--radius); }
.btn-lg { height: 3rem; padding: 0 1.75rem; font-size: 1rem; }

/* shadcn Button Group / Toggle Group */
.btn-group {
  display: inline-flex;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  overflow: hidden;
}
.btn-group .btn-group-item {
  padding: 0.375rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 500;
  background: hsl(var(--background));
  color: hsl(var(--muted-foreground));
  border: none;
  border-right: 1px solid hsl(var(--input));
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  text-decoration: none;
}
.btn-group .btn-group-item:last-child { border-right: none; }
.btn-group .btn-group-item:hover { background: hsl(var(--accent)); color: hsl(var(--accent-foreground)); text-decoration: none; }
.btn-group .btn-group-item.active { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* ============================================
   INPUTS — shadcn input/select/textarea
   ============================================ */
.input {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.input::placeholder { color: hsl(var(--muted-foreground)); }
.input-error { border-color: hsl(var(--destructive)); }

.textarea {
  width: 100%;
  min-height: 6rem;
  padding: 0.625rem 0.875rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.textarea:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  margin-bottom: 0.5rem;
}

.form-group { margin-bottom: 1rem; }

.select {
  width: 100%;
  height: 2.5rem;
  padding: 0 0.875rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  padding-right: 2rem;
}
.select:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* shadcn Checkbox */
.checkbox-wrapper { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid hsl(var(--input));
  border-radius: calc(var(--radius) - 4px);
  appearance: none;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
  background: hsl(var(--background));
}
/* Checkbox list (replaces native multi-select) */
.checkbox-list {
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  padding: 0.25rem;
  max-height: 10rem;
  overflow-y: auto;
  scrollbar-width: thin;
}
.checkbox-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  font-size: 0.875rem;
  transition: background 0.1s;
}
.checkbox-list-item:hover { background: hsl(var(--accent)); }

.checkbox:checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* ============================================
   CARD — shadcn card
   ============================================ */
.card {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
}
.dark .kanban-card { background: hsl(var(--card) / 0.75); }
/* Light mode gets subtle shadow, dark mode relies on borders only (Linear pattern) */
:root .card { box-shadow: 0 1px 2px 0 rgba(0,0,0,0.06); }
.dark .card { box-shadow: none; }

.card-hover {
  transition: border-color 0.2s ease;
  cursor: pointer;
}
.card-hover:hover {
  border-color: hsl(var(--muted-foreground) / 0.2);
}
.dark .card-hover:hover {
  border-color: rgba(255,255,255,0.1);
}

/* ============================================
   BADGE — shadcn badge variants
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
  border: 1px solid transparent;
  line-height: 1.4;
}

.badge-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

.badge-urgent { background: hsl(0 84% 60% / 0.15); color: hsl(0 72% 51%); border-color: hsl(0 84% 60% / 0.2); }
.badge-urgent .badge-dot { background: hsl(0 84% 60%); }
.badge-high { background: hsl(25 95% 53% / 0.15); color: hsl(25 95% 40%); border-color: hsl(25 95% 53% / 0.2); }
.badge-high .badge-dot { background: hsl(25 95% 53%); }
.badge-normal { background: hsl(217 91% 60% / 0.15); color: hsl(217 91% 50%); border-color: hsl(217 91% 60% / 0.2); }
.badge-normal .badge-dot { background: hsl(217 91% 60%); }
.badge-low { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
.badge-low .badge-dot { background: hsl(var(--muted-foreground)); }

/* Status badges */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  white-space: nowrap;
}
.status-backlog { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.status-todo { background: hsl(217 91% 60% / 0.15); color: hsl(217 91% 50%); }
.status-in_progress { background: hsl(38 92% 50% / 0.15); color: hsl(38 92% 40%); }
.status-code_review { background: hsl(195 80% 45% / 0.15); color: hsl(195 80% 40%); }
.status-in_review { background: hsl(263 70% 50% / 0.15); color: hsl(263 70% 45%); }
.status-done { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
.status-deferred { background: hsl(43 96% 56% / 0.18); color: hsl(38 92% 38%); }
.status-cancelled { background: hsl(var(--destructive) / 0.15); color: hsl(var(--destructive)); text-decoration: line-through; }

/* Label tags */
.label-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: 9999px;
  white-space: nowrap;
}

/* ============================================
   AVATAR — shadcn avatar
   ============================================ */
.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  color: white;
}
.avatar-xs { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; }
.avatar-sm { width: 1.75rem; height: 1.75rem; font-size: 0.6875rem; }
.avatar-md { width: 2.25rem; height: 2.25rem; font-size: 0.8125rem; }
.avatar-lg { width: 3rem; height: 3rem; font-size: 1rem; }

.avatar-0 { background: hsl(142 69% 35%); }
.avatar-1 { background: hsl(217 91% 50%); }
.avatar-2 { background: hsl(263 70% 50%); }
.avatar-3 { background: hsl(38 92% 45%); }
.avatar-4 { background: hsl(330 80% 50%); }
.avatar-5 { background: hsl(174 72% 40%); }

/* Avatar with image */
.avatar-img {
  border-radius: 9999px;
  object-fit: cover;
  flex-shrink: 0;
}
.avatar-img-xs { width: 1.5rem; height: 1.5rem; }
.avatar-img-sm { width: 1.75rem; height: 1.75rem; }
.avatar-img-default { width: 2rem; height: 2rem; }
.avatar-img-md { width: 2.25rem; height: 2.25rem; }
.avatar-img-lg { width: 3rem; height: 3rem; }

.avatar-stack { display: flex; }
.avatar-stack .avatar + .avatar,
.avatar-stack .avatar-img + .avatar,
.avatar-stack .avatar + .avatar-img,
.avatar-stack .avatar-img + .avatar-img { margin-left: -0.375rem; border: 2px solid hsl(var(--card)); }

/* ============================================
   KANBAN BOARD v2
   ============================================ */

/* Kanban toolbar */
.kanban-toolbar {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.kanban-summary {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.kanban-summary strong { color: hsl(var(--foreground)); font-weight: 600; }

/* Filter panel (collapsible) */
.kanban-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  padding: 0.75rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  flex-shrink: 0;
}
.kanban-filters .input,
.kanban-filters .select {
  height: 2.125rem;
  font-size: 0.8125rem;
}
.kanban-filter-search {
  flex: 1;
  min-width: 12rem;
  max-width: 20rem;
  position: relative;
}
.kanban-filter-search svg {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.kanban-filter-search .input {
  padding-left: 2rem;
}
.kanban-filter-group {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.kanban-filter-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.kanban-filter-select {
  width: auto;
  min-width: 8rem;
}
.kanban-filter-date {
  width: 9rem;
}
/* Filter dropdown — shadcn popover/command style */
.filter-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
}
.filter-dropdown-trigger:hover { border-color: hsl(var(--muted-foreground) / 0.3); }
.filter-dropdown-trigger svg:first-child { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.filter-dropdown-trigger svg:last-child { color: hsl(var(--muted-foreground)); flex-shrink: 0; margin-left: auto; }

.filter-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 12rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  padding: 0.25rem;
  z-index: 50;
  animation: dropdownIn 0.1s ease;
  max-height: 18rem;
  overflow-y: auto;
  scrollbar-width: thin;
}

.filter-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 0.5rem;
  font-size: 0.8125rem;
  color: hsl(var(--popover-foreground));
  background: none;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background 0.1s;
  text-align: left;
}
.filter-dropdown-item:hover { background: hsl(var(--accent)); }
.filter-dropdown-item.active { background: hsl(var(--accent)); }

.filter-dropdown-check {
  width: 1rem;
  flex-shrink: 0;
  color: hsl(var(--primary));
}
.filter-dropdown-item:not(.active) .filter-dropdown-check { visibility: hidden; }
/* Reserve space for check even when hidden */
.filter-dropdown-item { padding-left: 0.375rem; }

/* Date Picker — shadcn calendar popover */
.datepicker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.125rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  background: hsl(var(--background));
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
  min-width: 9rem;
}
.datepicker-trigger:hover { border-color: hsl(var(--muted-foreground) / 0.3); }
.datepicker-trigger svg { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.datepicker-trigger .datepicker-placeholder { color: hsl(var(--muted-foreground)); }

.datepicker-popover {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  padding: 0.75rem;
  z-index: 50;
  animation: dropdownIn 0.1s ease;
  width: auto;
}

/* Calendar grid */
.cal-picker-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.cal-picker-month {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.cal-picker-nav-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  border: none;
  background: none;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.cal-picker-nav-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.cal-picker-nav-btn svg { width: 0.875rem; height: 0.875rem; }

.cal-picker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.cal-picker-weekday {
  width: 2.25rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
}
.cal-picker-day {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  border-radius: var(--radius);
  border: none;
  background: none;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
  font-variant-numeric: tabular-nums;
}
.cal-picker-day:hover { background: hsl(var(--accent)); }
.cal-picker-day.outside { color: hsl(var(--muted-foreground) / 0.4); }
.cal-picker-day.today {
  background: hsl(var(--accent));
  font-weight: 700;
}
.cal-picker-day.selected {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}
.cal-picker-day.selected:hover { background: hsl(var(--primary) / 0.9); }
.cal-picker-day.disabled { color: hsl(var(--muted-foreground) / 0.3); pointer-events: none; }

.cal-picker-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}

.active-filters-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 0.625rem;
  font-weight: 700;
}

/* Filter pills */
.filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.8125rem;
  font-weight: 500;
  border-radius: 9999px;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.filter-pill:hover { border-color: hsl(var(--muted-foreground) / 0.3); color: hsl(var(--foreground)); }
.filter-pill.active {
  background: hsl(var(--primary) / 0.12);
  border-color: hsl(var(--primary) / 0.3);
  color: hsl(var(--primary));
}
.filter-pill svg { width: 0.875rem; height: 0.875rem; }

/* Board */
.kanban-board {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-height: 0;
  scrollbar-width: thin;
  padding-bottom: 0.5rem;
}

/* Column */
.kanban-column {
  min-width: 15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: min-width 0.3s ease, opacity 0.3s ease, flex 0.3s ease;
  border-radius: calc(var(--radius) + 4px);
  padding: 0.5rem;
  border: 1px solid transparent;
  height: 100%;
}

/* Column tinted backgrounds per status */
.kanban-column[data-col="todo"]        { background: hsl(217 91% 60% / 0.06); }
.kanban-column[data-col="in_progress"] { background: hsl(38 92% 50% / 0.06); }
.kanban-column[data-col="code_review"] { background: hsl(195 80% 45% / 0.06); }
.kanban-column[data-col="in_review"]   { background: hsl(263 70% 50% / 0.06); }
.kanban-column[data-col="done"]        { background: hsl(142 60% 50% / 0.06); }
.kanban-column[data-col="deferred"]    { background: hsl(43 96% 50% / 0.06); }
.kanban-column[data-col="cancelled"]   { background: hsl(0 84% 60% / 0.06); }
.kanban-column.collapsed {
  min-width: 3rem;
  max-width: 3rem;
  flex: 0 0 3rem;
  cursor: pointer;
  padding: 0.5rem 0.25rem;
}
.kanban-column.collapsed .kanban-column-cards,
.kanban-column.collapsed .kanban-column-actions { display: none; }

/* Column header */
.kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--radius);
  position: sticky;
  top: 0;
  z-index: 5;
  background: transparent;
}

.kanban-column-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}

.kanban-column-count {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}

/* WIP warning */
.kanban-column-count.wip-warning {
  background: hsl(38 92% 50% / 0.15);
  color: hsl(38 92% 50%);
}
.kanban-column-count.wip-danger {
  background: hsl(0 84% 60% / 0.15);
  color: hsl(0 84% 60%);
}

.kanban-column-actions {
  display: flex;
  align-items: center;
  gap: 0.125rem;
}

/* Column collapsed state */
.kanban-column.collapsed .kanban-column-header {
  flex-direction: column;
  padding: 0.75rem 0.25rem;
  gap: 0.5rem;
}
.kanban-column.collapsed .kanban-column-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.75rem;
}
.kanban-column.collapsed .kanban-column-count {
  writing-mode: horizontal-tb;
}

/* Cards container */
.kanban-column-cards {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem;
  border-radius: var(--radius);
  transition: background 0.2s, border-color 0.2s;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
}
.kanban-column-cards::-webkit-scrollbar { width: 8px; }
.kanban-column-cards::-webkit-scrollbar-track { background: transparent; }
.kanban-column-cards::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.3);
  border-radius: 9999px;
}
.kanban-column-cards::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.5);
}

/* Drop zone feedback */
.kanban-column-cards.drag-over {
  background: hsl(var(--primary) / 0.04);
  border: 1.5px dashed hsl(var(--primary) / 0.3);
}

/* Empty column */
.kanban-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  border: 1.5px dashed hsl(var(--border));
  border-radius: var(--radius);
  min-height: 8rem;
}
.kanban-empty-text {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.75rem;
}
.kanban-empty svg {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--muted-foreground) / 0.5);
  margin-bottom: 0.5rem;
}

/* === KANBAN CARD v3 — Linear/Notion inspired === */
.kanban-card {
  padding: 0;
  cursor: grab;
  position: relative;
  transition: border-color 0.22s ease-out, box-shadow 0.22s ease-out, background-color 0.22s ease-out;
  overflow: hidden;
  flex-shrink: 0;
  will-change: box-shadow, border-color;
}
.kanban-card:active { cursor: grabbing; }
.kanban-card:hover {
  border-color: hsl(var(--muted-foreground) / 0.32);
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.18), 0 0 0 1px hsl(var(--muted-foreground) / 0.06);
}
.dark .kanban-card:hover {
  border-color: hsl(var(--muted-foreground) / 0.45);
  box-shadow: 0 6px 16px -4px rgba(0, 0, 0, 0.45), 0 0 0 1px hsl(var(--muted-foreground) / 0.12);
}

/* Priority accent — top gradient bar */
.kanban-card::before {
  content: '';
  display: block;
  height: 2px;
  background: hsl(var(--border));
}
.priority-urgent::before { background: linear-gradient(90deg, hsl(0 84% 60%), hsl(0 84% 60% / 0.3)); }
.priority-high::before { background: linear-gradient(90deg, hsl(25 95% 53%), hsl(25 95% 53% / 0.3)); }
.priority-normal::before { background: linear-gradient(90deg, hsl(217 91% 60% / 0.5), hsl(217 91% 60% / 0.1)); }
.priority-low::before { background: hsl(var(--border)); }

/* Card body padding */
.kanban-card-body { padding: 0.75rem 0.875rem 0.625rem; }

/* Card header row — number + priority badge */
.kanban-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}

.kanban-card-number {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground) / 0.7);
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0.02em;
  text-decoration: none;
  transition: color 0.15s ease;
}
.kanban-card-number:hover {
  color: hsl(var(--foreground));
  text-decoration: none;
}

/* Title — main focus of the card */
.kanban-card-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: none;
}
.kanban-card-title:hover {
  text-decoration: none;
  color: inherit;
}

/* External ticket submitter email — destacado pra scan rápido */
.kanban-card-submitter {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin: 0 0 0.5rem;
  padding: 2px 0.4375rem !important;
  background: hsl(217 91% 60% / 0.10);
  border: 1px solid hsl(217 91% 60% / 0.18);
  border-radius: 0.25rem;
  color: hsl(217 91% 65%);
  font-size: 10px !important;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  line-height: 1.4 !important;
  max-width: 100%;
  min-width: 0;
}
.kanban-card-submitter svg {
  width: 10px !important;
  height: 10px !important;
  min-width: 10px;
  min-height: 10px;
  max-width: 10px;
  max-height: 10px;
  flex-shrink: 0;
  opacity: 0.85;
}
.kanban-card-submitter span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.dark .kanban-card-submitter {
  color: hsl(217 91% 70%);
  background: hsl(217 91% 60% / 0.12);
  border-color: hsl(217 91% 60% / 0.22);
}

/* Labels — smaller, tighter */
.kanban-card-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.kanban-card-labels .label-tag {
  font-size: 0.625rem;
  padding: 0.0625rem 0.375rem;
}

/* Card progress bar (subtasks) — thicker, more visible */
.kanban-card-progress {
  margin-bottom: 0.5rem;
}
.kanban-card-progress-bar {
  width: 100%;
  height: 4px;
  background: hsl(var(--muted));
  border-radius: 9999px;
  overflow: hidden;
}
.kanban-card-progress-fill {
  height: 100%;
  background: hsl(var(--primary));
  border-radius: 9999px;
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Separator before footer */
.kanban-card-separator {
  height: 1px;
  background: hsl(var(--border) / 0.4);
  margin: 0 -0.875rem;
}

/* Card footer — clean row */
.kanban-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.5rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Card assignee — avatar + primeiro nome (+contador se múltiplos) */
.kanban-card-assignees {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 60%;
  overflow: hidden;
}
.kanban-card-assignees .avatar-img,
.kanban-card-assignees .avatar {
  flex-shrink: 0;
}
.kanban-card-assignee-name {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.kanban-card-assignee-extra {
  color: hsl(var(--muted-foreground));
  font-weight: 400;
  margin-left: 0.125rem;
}
.kanban-card-assignee-empty {
  font-style: italic;
  color: hsl(var(--muted-foreground) / 0.7);
}
.kanban-card-meta-item {
  display: flex;
  align-items: center;
  gap: 0.1875rem;
}
.kanban-card-meta-item svg { width: 0.75rem; height: 0.75rem; opacity: 0.7; }

/* Due date chip — clearer urgency */
.due-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.4375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  border-radius: var(--radius);
  white-space: nowrap;
}
.due-chip svg { width: 0.6875rem; height: 0.6875rem; }
.due-chip-overdue { background: hsl(0 84% 60% / 0.15); color: hsl(0 84% 60%); }
.due-chip-soon { background: hsl(38 92% 50% / 0.15); color: hsl(38 92% 50%); }
.due-chip-ok { background: hsl(var(--muted) / 0.6); color: hsl(var(--muted-foreground)); }

/* Card context menu trigger */
.kanban-card-menu {
  position: absolute;
  top: 0.625rem;
  right: 0.5rem;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 2;
}
.kanban-card:hover .kanban-card-menu,
.kanban-card-menu.menu-open { opacity: 1; }

/* Quando o menu do card esta aberto, o card ganha overflow visible + z-index alto
   para o dropdown nao ser cortado pelo overflow:hidden do card nem sobreposto
   por badges/cards irmaos. */
.kanban-card:has(.kanban-card-menu.menu-open) {
  overflow: visible;
  z-index: 100;
}
.kanban-card-menu.menu-open .dropdown-menu {
  z-index: 200;
}

/* Done/Cancelled/Deferred column cards — faded */
.kanban-column[data-col="done"] .kanban-card,
.kanban-column[data-col="cancelled"] .kanban-card,
.kanban-column[data-col="deferred"] .kanban-card {
  opacity: 0.55;
  transition: opacity 0.2s;
}
.kanban-column[data-col="done"] .kanban-card:hover,
.kanban-column[data-col="cancelled"] .kanban-card:hover,
.kanban-column[data-col="deferred"] .kanban-card:hover { opacity: 0.85; }
/* Tachado só para done/cancelled (deferred não é finalizada — apenas pausada) */
.kanban-column[data-col="done"] .kanban-card-title,
.kanban-column[data-col="cancelled"] .kanban-card-title { text-decoration: line-through; }

/* Drag states */
.sortable-ghost {
  opacity: 0.3;
  border: 1.5px dashed hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.03);
}
.sortable-chosen {
  border-color: hsl(var(--primary) / 0.4);
  box-shadow: 0 0 30px -8px hsl(var(--primary) / 0.15);
  transform: rotate(1deg) scale(1.02);
  z-index: 10;
}
.sortable-drag {
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  transform: rotate(2deg) scale(1.03);
}

/* ============================================
   TABLE — shadcn table
   ============================================ */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
  height: 2.75rem;
  padding: 0 1rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-align: left;
  border-bottom: 1px solid hsl(var(--border));
}
.data-table td {
  height: 3.25rem;
  padding: 0 1rem;
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.875rem;
  vertical-align: middle;
}
.data-table tr:hover td { background: hsl(var(--muted) / 0.5); }
.data-table td.title-cell { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 0; width: 100%; }

/* ============================================
   DIALOG — shadcn dialog
   ============================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: hsl(var(--background) / 0.8);
  backdrop-filter: blur(4px);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: 0 16px 70px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 36rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  animation: dialogIn 0.15s ease;
}

.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.modal-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; }
.modal-footer { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid hsl(var(--border)); }

/* ============================================
   SHEET / DRAWER — shadcn sheet
   ============================================ */
.sheet-overlay { position: fixed; inset: 0; background: hsl(var(--background) / 0.8); backdrop-filter: blur(4px); z-index: 50; }
.sheet-content {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(40rem, 90vw);
  background: hsl(var(--card));
  border-left: 1px solid hsl(var(--border));
  box-shadow: -16px 0 70px rgba(0,0,0,0.3);
  overflow-y: auto;
  animation: sheetIn 0.3s cubic-bezier(0.32, 0.72, 0, 1);
  z-index: 51;
}
.sheet-header {
  height: var(--topbar-height);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.5rem;
  border-bottom: 1px solid hsl(var(--border));
  position: sticky; top: 0;
  background: hsl(var(--card));
  z-index: 1;
}
.sheet-body { padding: 1.5rem; }

/* ============================================
   TOAST — shadcn sonner style (redesign)
   ============================================ */
.toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9998;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  width: 22rem;
  padding: 0.75rem 0.875rem;
  border-radius: 0.625rem;
  background: hsl(var(--popover, var(--card)));
  border: 1px solid hsl(var(--border));
  box-shadow: 0 12px 30px -5px rgba(0,0,0,0.35), 0 4px 10px rgba(0,0,0,0.15);
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  animation: toastSlideIn 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  position: relative;
  overflow: hidden;
}
.toast::before {
  content: "";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.toast > span:first-of-type {
  flex: 1;
  line-height: 1.35;
  font-weight: 500;
}
.toast-success::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322c55e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
}
.toast-error::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ef4444' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='15' x2='9' y1='9' y2='15'/><line x1='9' x2='15' y1='9' y2='15'/></svg>");
}
.toast-warning::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/><line x1='12' x2='12' y1='9' y2='13'/><line x1='12' x2='12.01' y1='17' y2='17'/></svg>");
}
.toast-info::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4'/><path d='M12 8h.01'/></svg>");
}
.toast::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  transform-origin: left;
  animation: toastProgress 5s linear forwards;
  opacity: 0.3;
}
.toast-success::after { background: hsl(142 70% 45%); }
.toast-error::after { background: hsl(0 84% 60%); }
.toast-warning::after { background: hsl(38 92% 50%); }
.toast-info::after { background: hsl(217 91% 60%); }

@keyframes toastSlideIn {
  from { transform: translateX(calc(100% + 2rem)); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Toast with action — cancel auto progress */
.toast:has(.toast-action-btn)::after { animation-duration: 8s; }

@media (max-width: 768px) {
  .toast-container { left: 1rem; right: 1rem; }
  .toast { width: auto; }
}

/* ============================================
   DROPDOWN — shadcn dropdown-menu
   ============================================ */
.dropdown-menu {
  position: absolute; top: 100%; right: 0; margin-top: 0.25rem;
  min-width: 11rem;
  background: hsl(var(--popover));
  color: hsl(var(--popover-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  padding: 0.25rem;
  z-index: 50;
  animation: dropdownIn 0.1s ease;
}
.dropdown-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  font-size: 0.875rem;
  color: hsl(var(--popover-foreground));
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  transition: background 0.1s;
  border: none; background: none; width: 100%; text-align: left;
}
.dropdown-item:hover { background: hsl(var(--accent)); }
.dropdown-item svg { width: 0.875rem; height: 0.875rem; opacity: 0.7; }
.dropdown-separator { height: 1px; background: hsl(var(--border)); margin: 0.25rem 0; }
.dropdown-item-danger { color: hsl(var(--destructive)); }
.dropdown-item-danger:hover { background: hsl(var(--destructive) / 0.1); }

/* ============================================
   TABS — shadcn tabs
   ============================================ */
.tabs {
  display: inline-flex;
  background: hsl(var(--muted));
  border-radius: var(--radius);
  padding: 0.25rem;
  gap: 0;
  margin-bottom: 1rem;
}
.tab-item {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  border-radius: calc(var(--radius) - 2px);
  transition: all 0.15s;
  background: none; border: none;
}
.tab-item:hover { color: hsl(var(--foreground)); }
.tab-item.active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ============================================
   ACTIVITY & COMMENTS
   ============================================ */
.activity-item { display: flex; gap: 0.625rem; padding: 0.5rem 0; font-size: 0.8125rem; }
.activity-content { flex: 1; color: hsl(var(--muted-foreground)); }
.activity-time { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }
.activity-user { font-weight: 500; color: hsl(var(--foreground)); }

.comment { display: flex; gap: 0.625rem; padding: 0.75rem 0; border-bottom: 1px solid hsl(var(--border)); }
.comment-body { flex: 1; }
.comment-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem; }
.comment-name { font-size: 0.875rem; font-weight: 600; }
.comment-time { font-size: 0.75rem; color: hsl(var(--muted-foreground)); }
.comment-text { font-size: 0.875rem; color: hsl(var(--muted-foreground)); line-height: 1.7; }
.comment-delivery { background: hsl(var(--primary) / 0.1); border: 1px solid hsl(var(--primary) / 0.2); border-radius: var(--radius); padding: 0.5rem 0.75rem; }

/* ============================================
   STATS — dashboard cards
   ============================================ */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.stat-card { padding: 1.25rem; }
.stat-value { font-size: 2rem; font-weight: 700; line-height: 1; margin-bottom: 0.375rem; letter-spacing: -0.03em; }
.stat-label { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); font-weight: 500; }

/* ============================================
   EMPTY STATE
   ============================================ */
.empty-state { display: flex; flex-direction: column; align-items: center; padding: 3rem 1.5rem; text-align: center; }
.empty-icon {
  width: 3rem; height: 3rem; border-radius: 9999px;
  background: hsl(var(--muted));
  display: flex; align-items: center; justify-content: center;
  color: hsl(var(--muted-foreground));
  margin-bottom: 1rem;
}
.empty-icon svg { width: 1.25rem; height: 1.25rem; }
.empty-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.25rem; }
.empty-desc { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); max-width: 20rem; margin-bottom: 1.25rem; }

/* ============================================
   PROGRESS — shadcn progress
   ============================================ */
.progress-bar { width: 100%; height: 0.5rem; background: hsl(var(--secondary)); border-radius: 9999px; overflow: hidden; }
.progress-fill { height: 100%; background: hsl(var(--primary)); border-radius: 9999px; transition: width 0.3s ease; }

/* ============================================
   CALENDAR VIEW
   ============================================ */

/* Toolbar */
.cal-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.cal-nav {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.cal-month-label {
  font-size: 1.125rem;
  font-weight: 700;
  min-width: 10rem;
  text-align: center;
  letter-spacing: -0.02em;
}

/* Month Grid */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
}
.cal-header-cell {
  padding: 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  text-align: center;
  background: hsl(var(--muted) / 0.3);
  border-bottom: 1px solid hsl(var(--border));
}
.cal-day {
  min-height: 7rem;
  padding: 0.375rem;
  border-right: 1px solid hsl(var(--border) / 0.5);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  background: hsl(var(--card));
  transition: background 0.15s;
  position: relative;
}
.cal-day:nth-child(7n) { border-right: none; }
.cal-day:hover { background: hsl(var(--accent) / 0.5); }
.cal-day.cal-day-empty {
  background: hsl(var(--muted) / 0.15);
}
.cal-day.cal-day-today {
  background: hsl(var(--primary) / 0.06);
}
.cal-day.cal-day-today .cal-day-number {
  background: hsl(var(--primary));
  color: white;
  border-radius: 9999px;
  width: 1.625rem;
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cal-day.cal-day-has-overdue {
  background: hsl(var(--destructive) / 0.04);
}

.cal-day-number {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.25rem;
  padding: 0.125rem 0.25rem;
}
.cal-day-empty .cal-day-number {
  color: hsl(var(--muted-foreground) / 0.3);
}

/* Event chips on month view */
.cal-events {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.cal-chip {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: opacity 0.15s;
  text-decoration: none;
  color: inherit;
}
.cal-chip:hover { opacity: 0.8; text-decoration: none; }
.cal-chip-urgent  { background: hsl(0 84% 60% / 0.15); color: hsl(0 84% 60%); border-left: 2px solid hsl(0 84% 60%); }
.cal-chip-high    { background: hsl(25 95% 53% / 0.15); color: hsl(25 95% 53%); border-left: 2px solid hsl(25 95% 53%); }
.cal-chip-normal  { background: hsl(217 91% 60% / 0.15); color: hsl(217 91% 60%); border-left: 2px solid hsl(217 91% 60%); }
.cal-chip-low     { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-left: 2px solid hsl(var(--muted-foreground) / 0.3); }
.cal-chip-done    { opacity: 0.5; text-decoration: line-through; }

.cal-chip-number {
  font-family: monospace;
  font-size: 0.625rem;
  opacity: 0.7;
}

.cal-more {
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--primary));
  padding: 0.125rem 0.375rem;
  cursor: pointer;
}
.cal-more:hover { text-decoration: underline; }

/* Week View */
.cal-week-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.5rem;
  height: calc(100vh - var(--topbar-height) - 10rem);
  min-height: 24rem;
  margin-bottom: 1rem;
  transition: grid-template-columns 0.2s ease;
}
/* Fim de semana colapsado: SAB + DOM viram colunas estreitas (só header) */
.cal-week-grid.weekend-collapsed {
  grid-template-columns: repeat(5, 1fr) 2.75rem 2.75rem;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend {
  cursor: pointer;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend .cal-week-events {
  display: none;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend .cal-week-day-header {
  flex-direction: column;
  padding: 0.5rem 0.25rem;
  gap: 0.25rem;
  text-align: center;
  align-items: center;
  justify-content: flex-start;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend .cal-week-day-name {
  font-size: 0.5625rem;
  letter-spacing: 0.04em;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend .cal-week-day-number {
  font-size: 0.8125rem;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend .cal-week-count {
  font-size: 0.5625rem;
  padding: 0.0625rem 0.3125rem;
  min-width: auto;
}
.cal-week-grid.weekend-collapsed .cal-week-day-weekend .cal-week-day-chev {
  transform: rotate(180deg);
  opacity: 0.5;
}
.cal-week-day-chev {
  transition: transform 0.15s;
  margin-left: 0.25rem;
}
.cal-week-day-chev.open {
  transform: rotate(90deg);
}
/* Quando expandido, o chev fica visível pra dar pra colapsar de novo */
.cal-week-grid:not(.weekend-collapsed) .cal-week-day-weekend .cal-week-day-chev {
  opacity: 0.6;
}
.cal-week-day {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.cal-week-day.cal-day-today {
  border-color: hsl(var(--primary) / 0.45);
  box-shadow: 0 0 0 1px hsl(var(--primary) / 0.18);
}
.cal-week-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border));
  cursor: pointer;
  transition: background 0.12s;
  flex-shrink: 0;
  background: hsl(var(--card));
  position: relative;
  z-index: 2;
}
.cal-week-day-header:hover { background: hsl(var(--accent)); }
.cal-day-today .cal-week-day-header {
  background: linear-gradient(hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.08)) hsl(var(--card));
}
.cal-day-today .cal-week-day-header:hover {
  background: linear-gradient(hsl(var(--primary) / 0.18), hsl(var(--primary) / 0.18)) hsl(var(--card));
}
.cal-week-day-name {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.cal-day-today .cal-week-day-name { color: hsl(var(--primary)); }
.cal-week-day-number {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.cal-day-today .cal-week-day-number {
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-size: 0.8125rem;
}
.cal-week-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.6);
  padding: 0.125rem 0.4375rem;
  border-radius: 9999px;
  min-width: 1.25rem;
  text-align: center;
}
.cal-day-today .cal-week-count {
  background: hsl(var(--primary) / 0.18);
  color: hsl(var(--primary));
}
.cal-week-count-open {
  color: hsl(var(--primary));
  font-weight: 700;
}
.cal-week-count-sep {
  margin: 0 0.0625rem;
  opacity: 0.5;
}
.cal-week-count-total {
  opacity: 0.65;
}
.cal-week-count-total-only {
  opacity: 1;
}
.cal-day-today .cal-week-count-open,
.cal-day-today .cal-week-count-total {
  color: hsl(var(--primary));
}

/* Week view cards — clean, sem barra lateral */
.cal-week-events {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
  padding: 0.5rem 0.5rem 2.5rem;
}
.cal-week-events::-webkit-scrollbar { width: 6px; }
.cal-week-events::-webkit-scrollbar-track { background: transparent; }
.cal-week-events::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.25);
  border-radius: 3px;
}
.cal-week-events::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}
/* Fade out na borda inferior da coluna pra indicar que há mais conteúdo */
.cal-week-day {
  position: relative;
}
.cal-week-day::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2.5rem;
  background: linear-gradient(to bottom,
    transparent 0%,
    hsl(var(--card) / 0.6) 40%,
    hsl(var(--card)) 100%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.2s;
}
.cal-week-day.has-overflow::after { opacity: 1; }
.cal-week-card {
  padding: 0.5rem 0.625rem;
  border-radius: calc(var(--radius) - 1px);
  background: hsl(var(--muted) / 0.4);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
  text-decoration: none;
  color: inherit;
  display: block;
  position: relative;
}
.cal-week-card:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--border));
  text-decoration: none;
  transform: translateY(-1px);
}

.cal-week-card-number {
  font-size: 0.625rem;
  font-family: ui-monospace, SF Mono, monospace;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.1875rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
}
/* Priority dot antes do número (substitui a barra lateral) */
.cal-week-card-number::before {
  content: '';
  display: inline-block;
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
  background: hsl(var(--muted-foreground) / 0.4);
  flex-shrink: 0;
}
.cal-week-card-urgent .cal-week-card-number::before { background: hsl(0 84% 60%); }
.cal-week-card-high   .cal-week-card-number::before { background: hsl(25 95% 53%); }
.cal-week-card-normal .cal-week-card-number::before { background: hsl(217 91% 60%); }
.cal-week-card-low    .cal-week-card-number::before { background: hsl(var(--muted-foreground) / 0.45); }

.cal-week-card-title {
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.35;
  margin-bottom: 0.4375rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.005em;
}
.cal-week-card-meta {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
}

/* No-date demands */
.cal-no-date {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: hsl(var(--muted) / 0.2);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.cal-no-date-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-right: 0.5rem;
}
.cal-no-date-label svg { width: 0.875rem; height: 0.875rem; }

/* Hover popover preview */
.cal-popover {
  position: absolute;
  z-index: 50;
  width: 16rem;
  background: hsl(var(--popover));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
  padding: 0.75rem;
  animation: dropdownIn 0.1s ease;
}
.cal-popover-title { font-size: 0.875rem; font-weight: 600; margin-bottom: 0.375rem; }
.cal-popover-meta {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.cal-popover-meta-row { display: flex; align-items: center; gap: 0.375rem; }
.cal-popover-meta-row svg { width: 0.75rem; height: 0.75rem; }

/* Responsive */
@media (max-width: 768px) {
  .cal-week-grid { grid-template-columns: 1fr; gap: 0.5rem; }
  .cal-week-day { min-height: auto; }
  .cal-day { min-height: 4rem; }
  .cal-month-label { min-width: auto; font-size: 1rem; }
}

/* ============================================
   SEPARATOR — shadcn separator
   ============================================ */
hr, .separator { border: none; border-top: 1px solid hsl(var(--border)); margin: 1.25rem 0; }

/* ============================================
   DASHBOARD v2
   ============================================ */

/* Greeting hero */
.dash-hero {
  margin-bottom: 1.5rem;
}
.dash-greeting {
  font-size: 1.625rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}
.dash-summary {
  font-size: 0.9375rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dash-date {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground) / 0.7);
  margin-top: 0.25rem;
}

/* 2-column layout */
.dash-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 1024px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* Stat cards v2 — Linear/Vercel/Raycast inspired */
.stat-card-v2 {
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.125rem;
  position: relative;
  overflow: hidden;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Gradient border glow — Raycast style, appears on hover */
.stat-card-v2::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.01) 50%, rgba(255,255,255,0.04) 100%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.stat-card-v2:hover::before { opacity: 1; }

/* Top-edge light — Vercel style */
.stat-card-v2::after {
  content: '';
  position: absolute;
  top: 0;
  left: 1rem;
  right: 1rem;
  height: 1px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.stat-card-v2:hover::after { opacity: 1; }
.stat-card-v2.stat-default::after { background: linear-gradient(90deg, transparent, hsl(var(--muted-foreground) / 0.3), transparent); }
.stat-card-v2.stat-primary::after { background: linear-gradient(90deg, transparent, hsl(var(--primary) / 0.5), transparent); }
.stat-card-v2.stat-warning::after { background: linear-gradient(90deg, transparent, hsl(38 92% 50% / 0.5), transparent); }
.stat-card-v2.stat-danger::after { background: linear-gradient(90deg, transparent, hsl(0 84% 60% / 0.5), transparent); }

/* Hover: border brighten + subtle glow — no transform (Linear style) */
.stat-card-v2:hover {
  border-color: hsl(var(--muted-foreground) / 0.15);
}
.stat-card-v2.stat-primary:hover { box-shadow: 0 0 40px -12px hsl(var(--primary) / 0.12); }
.stat-card-v2.stat-warning:hover { box-shadow: 0 0 40px -12px hsl(38 92% 50% / 0.12); }
.stat-card-v2.stat-danger:hover { box-shadow: 0 0 40px -12px hsl(0 84% 60% / 0.12); }

.stat-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.stat-icon svg { width: 1.25rem; height: 1.25rem; }
.stat-icon-default { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }
.stat-icon-primary { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }
.stat-icon-warning { background: hsl(38 92% 50% / 0.12); color: hsl(38 92% 50%); }
.stat-icon-danger { background: hsl(var(--destructive) / 0.12); color: hsl(0 84% 60%); }
.stat-icon-success { background: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); }

.stat-card-v2 .stat-info { position: relative; z-index: 1; }
.stat-card-v2 .stat-value {
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 0.375rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
.stat-card-v2 .stat-label {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* Stat with danger pulse */
.stat-danger-pulse {
  border-color: hsl(var(--destructive) / 0.25);
  animation: dangerPulse 3s ease-in-out infinite;
}

/* Urgent demands cards */
.urgent-card {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  transition: all 0.2s ease;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.urgent-card:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--muted-foreground) / 0.25);
  transform: translateX(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  text-decoration: none;
}
.urgent-card-priority {
  width: 0.1875rem;
  height: 2.25rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.urgent-card-body { flex: 1; min-width: 0; }
.urgent-card-title {
  font-size: 0.9375rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.urgent-card-meta {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  display: flex;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

/* Activity timeline */
.timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 1rem;
  top: 2rem;
  bottom: 1rem;
  width: 1px;
  background: hsl(var(--border));
}
.timeline-item {
  display: flex;
  gap: 0.75rem;
  padding: 0.625rem 0;
  font-size: 0.875rem;
  position: relative;
}
.timeline-dot {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.6875rem;
  font-weight: 600;
  color: white;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 3px hsl(var(--card));
}
.timeline-body { flex: 1; min-width: 0; padding-top: 0.25rem; }
.timeline-text { color: hsl(var(--muted-foreground)); line-height: 1.5; }
.timeline-text strong { color: hsl(var(--foreground)); font-weight: 600; }
.timeline-time { font-size: 0.75rem; color: hsl(var(--muted-foreground) / 0.6); margin-top: 0.25rem; }
.timeline-demand {
  color: hsl(var(--primary));
  font-weight: 600;
  text-decoration: none;
  font-family: monospace;
  font-size: 0.8125rem;
}
.timeline-demand:hover { text-decoration: underline; }

/* Workload bars */
.workload-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
}
.workload-name {
  font-size: 0.875rem;
  font-weight: 500;
  min-width: 7.5rem;
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.workload-bar-container {
  flex: 1;
  position: relative;
  background: hsl(var(--muted));
  border-radius: var(--radius);
  height: 1.625rem;
  overflow: hidden;
}
.workload-bar {
  height: 100%;
  border-radius: var(--radius);
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex;
  align-items: center;
  padding-left: 0.625rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  min-width: 1.75rem;
}
.workload-green { background: linear-gradient(90deg, hsl(142 69% 35%), hsl(142 69% 45%)); }
.workload-yellow { background: linear-gradient(90deg, hsl(38 92% 45%), hsl(38 92% 55%)); }
.workload-red { background: linear-gradient(90deg, hsl(0 84% 50%), hsl(0 84% 60%)); }

/* Donut chart */
.donut-container {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.donut-svg { width: 10rem; height: 10rem; flex-shrink: 0; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.15)); }
.donut-legend { display: flex; flex-direction: column; gap: 0.625rem; flex: 1; }
.donut-legend-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.875rem;
  padding: 0.375rem 0.5rem;
  border-radius: calc(var(--radius) - 2px);
  transition: background 0.15s;
}
.donut-legend-item:hover { background: hsl(var(--accent)); }
.donut-legend-dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; flex-shrink: 0; }
.donut-legend-count { font-weight: 700; margin-left: auto; min-width: 1.5rem; text-align: right; font-variant-numeric: tabular-nums; }

/* Quick actions */
.quick-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
}
.quick-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.125rem;
  border-radius: var(--radius);
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  position: relative;
  overflow: hidden;
}
.quick-action:hover {
  border-color: rgba(255,255,255,0.12);
  color: hsl(var(--primary));
  text-decoration: none;
  box-shadow: 0 0 30px -10px hsl(var(--primary) / 0.1);
}
.quick-action svg { width: 1.25rem; height: 1.25rem; opacity: 0.5; transition: opacity 0.2s; }
.quick-action:hover svg { opacity: 1; color: hsl(var(--primary)); }

/* Overdue alert bar */
.overdue-alert {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.5rem;
  border-radius: var(--radius);
  background: linear-gradient(135deg, hsl(var(--destructive) / 0.08), hsl(var(--destructive) / 0.03));
  border: 1px solid hsl(var(--destructive) / 0.2);
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  color: hsl(0 84% 60%);
  position: relative;
  overflow: hidden;
}
.overdue-alert::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: hsl(0 84% 60%);
}
.dark .overdue-alert { color: hsl(0 84% 70%); }
.overdue-alert svg { width: 1.375rem; height: 1.375rem; flex-shrink: 0; }
.overdue-alert strong { font-weight: 700; }

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes dialogIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes sheetIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes toastIn { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes dropdownIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dangerPulse {
  0%, 100% { box-shadow: 0 0 0 0 hsl(var(--destructive) / 0); }
  50% { box-shadow: 0 0 12px 2px hsl(var(--destructive) / 0.15); }
}

/* ============================================
   UTILITIES
   ============================================ */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.gap-1 { gap: 0.25rem; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.w-full { width: 100%; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: hsl(var(--muted-foreground)); }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.mt-2 { margin-top: 0.5rem; }
.mt-4 { margin-top: 1rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-4 { margin-bottom: 1rem; }
.hidden { display: none; }
.relative { position: relative; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-center { text-align: center; }

.due-ok { color: hsl(var(--primary)); }
.due-soon { color: hsl(38 92% 50%); }
.due-overdue { color: hsl(var(--destructive)); font-weight: 500; }

[x-cloak] { display: none !important; }

/* ============================================
   AUTH PAGE — login / register
   ============================================ */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: hsl(var(--background));
  padding: 1.5rem;
}
.auth-card {
  width: 100%;
  max-width: 26rem;
  padding: 2.5rem;
}
.auth-logo {
  width: 3rem;
  height: 3rem;
  background: hsl(var(--primary));
  border-radius: calc(var(--radius) + 2px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
}
.auth-title {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
  letter-spacing: -0.02em;
}
.auth-subtitle {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

/* ============================================
   ALERT — shadcn alert
   ============================================ */
.alert {
  padding: 0.625rem 0.875rem;
  border-radius: var(--radius);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.alert-error {
  background: hsl(var(--destructive) / 0.1);
  border: 1px solid hsl(var(--destructive) / 0.2);
  color: hsl(0 84% 60%);
}
.dark .alert-error { color: hsl(0 84% 70%); }
.alert-success {
  background: hsl(var(--primary) / 0.1);
  border: 1px solid hsl(var(--primary) / 0.2);
  color: hsl(var(--primary));
}
.alert-warning {
  background: hsl(38 92% 50% / 0.1);
  border: 1px solid hsl(38 92% 50% / 0.2);
  color: hsl(38 92% 50%);
}

/* ============================================
   FILTER BAR
   ============================================ */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}
.filter-select {
  width: auto;
  min-width: 9rem;
}

/* ============================================
   SEARCH — shadcn input with icon
   ============================================ */
.search-wrapper {
  position: relative;
  flex: 1;
  max-width: 20rem;
}
.search-wrapper svg {
  position: absolute;
  left: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0.875rem;
  height: 0.875rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.search-wrapper .input {
  padding-left: 2rem;
}

/* ============================================
   DETAIL PAGE v3 — responsive 2-column layout
   ============================================ */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr 18rem;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 900px) {
  .detail-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  /* Mobile: sidebar BEFORE main content (metadata first) */
  .detail-sidebar { order: -1; }
}

/* In peek mode: less aggressive max-width, comfortable padding */
.peek-content .detail-layout {
  padding: 1.25rem 1.5rem 1.5rem;
  grid-template-columns: 1fr 18rem;
  gap: 1.5rem;
  max-width: 100%;
}
/* In peek, narrow label column to give more room to values */
.peek-content .detail-prop { grid-template-columns: 5.5rem 1fr; }
@media (max-width: 900px) {
  .peek-content .detail-layout { padding: 1rem; grid-template-columns: 1fr; }
  .peek-content .detail-sidebar { order: -1; }
}

/* Main content (left) */
.detail-main { min-width: 0; }

.detail-title {
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  margin-bottom: 0.875rem;
  cursor: text;
}
.peek-content .detail-title { font-size: 1.25rem; margin-bottom: 0.75rem; }
.detail-title-input {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  width: 100%;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.375rem 0.5rem;
  color: inherit;
  outline: none;
}
.detail-title-input:focus {
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

.detail-labels { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 1.25rem; }

/* Description block */
.detail-desc-block {
  min-height: 6rem;
  margin-bottom: 1.5rem;
}
.detail-description {
  font-size: 0.9375rem;
  line-height: 1.75;
  color: hsl(var(--foreground) / 0.85);
  word-break: break-word;
}

.content-link {
  color: hsl(var(--primary));
  text-decoration: none;
  border-bottom: 1px solid hsl(var(--primary) / 0.3);
  transition: border-color 0.15s, color 0.15s;
  word-break: break-all;
}
.content-link:hover {
  color: hsl(var(--primary));
  border-bottom-color: hsl(var(--primary));
}
.comment-text { word-break: break-word; }
.comment-text .content-link,
.external-detail-content .content-link { font-weight: 500; }

/* Imagens inline em descrição/comentário */
.content-img-link {
  display: inline-block;
  margin: 0.25rem 0;
  border-radius: 0.5rem;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
  max-width: 100%;
  transition: border-color 0.15s, transform 0.15s;
}
.content-img-link:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.content-img {
  display: block;
  max-width: 100%;
  max-height: 320px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Menções inline */
.content-mention {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  font-weight: 600;
  font-size: 0.9375em;
  white-space: nowrap;
  margin: 0 0.0625rem;
}

/* Mention autocomplete popover */
.mention-popover {
  position: absolute;
  left: 0;
  right: auto;
  z-index: 50;
  width: 17rem;
  max-width: calc(100vw - 2rem);
  max-height: 16rem;
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), 0 6px 14px rgba(0, 0, 0, 0.32);
  padding: 0.3125rem;
  scrollbar-width: thin;
}
.mention-popover.is-bottom { top: calc(100% + 0.375rem); }
.mention-popover.is-top    { bottom: calc(100% + 0.375rem); }
.mention-popover::-webkit-scrollbar { width: 6px; }
.mention-popover::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 3px; }

.mention-popover-header {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 0.625rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  margin-bottom: 0.25rem;
}
.mention-popover-header svg { color: hsl(var(--primary)); }
.mention-popover-hint {
  margin-left: auto;
  font-size: 0.625rem;
  color: hsl(var(--muted-foreground) / 0.7);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: hsl(var(--muted) / 0.5);
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.25rem;
}

.mention-popover-empty {
  padding: 0.875rem 0.75rem;
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}

.mention-item {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  width: 100%;
  padding: 0.4375rem 0.5rem;
  border-radius: 0.4375rem;
  background: transparent;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  transition: background 0.1s, color 0.1s;
}
.mention-item:hover,
.mention-item.is-active {
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}
.mention-item-avatar {
  width: 1.625rem;
  height: 1.625rem;
  min-width: 1.625rem;
  border-radius: 9999px;
  flex-shrink: 0;
  font-size: 0.6875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
.mention-item-text { min-width: 0; flex: 1; line-height: 1.25; }
.mention-item-name { font-weight: 600; font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-item.is-active .mention-item-name { color: hsl(var(--primary)); }
.mention-item-email {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 400;
}
.mention-item.is-active .mention-item-email { color: hsl(var(--primary) / 0.7); }
.mention-item-check { color: hsl(var(--primary)); margin-left: 0.25rem; flex-shrink: 0; }

/* Paste/drop preview no textarea */
.sz-editor-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

/* Editor contenteditable */
.sz-editable {
  min-height: 3.25rem;
  max-height: 18rem;
  overflow-y: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  line-height: 1.55;
  font-family: inherit;
  font-size: 0.875rem;
  outline: none;
  cursor: text;
}
.sz-editable.sz-editable-tall { min-height: 7rem; }
.sz-editable:focus { outline: none; }
.sz-editable:empty::before,
.sz-editable[data-empty="true"]::before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  pointer-events: none;
  display: block;
}
.sz-editable br + br { line-height: 1; }

/* Pill de menção inline no editor */
.sz-mention-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.4375rem;
  margin: 0 1px;
  border-radius: 0.3125rem;
  background: hsl(var(--primary) / 0.16);
  color: hsl(var(--primary));
  font-weight: 600;
  font-size: 0.875em;
  user-select: all;
  white-space: nowrap;
  border: 1px solid hsl(var(--primary) / 0.25);
  line-height: 1.35;
}
.sz-mention-pill::selection { background: hsl(var(--primary) / 0.35); }

.sz-editor-uploads {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  min-height: 0;
}
.sz-editor-upload-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem 0.25rem 0.375rem;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.sz-editor-upload-chip.is-error { color: hsl(0 84% 60%); border-color: hsl(0 84% 60% / 0.4); }
.sz-editor-upload-chip .sz-editor-spinner {
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid hsl(var(--muted-foreground) / 0.3);
  border-top-color: hsl(var(--primary));
  border-radius: 9999px;
  animation: sz-spin 0.8s linear infinite;
}
@keyframes sz-spin {
  to { transform: rotate(360deg); }
}
.sz-editor-hint {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground) / 0.7);
  margin-top: 0.125rem;
}
.sz-editor-drop {
  outline: 2px dashed hsl(var(--primary) / 0.5);
  outline-offset: -2px;
  background: hsl(var(--primary) / 0.04);
}

/* Preview de anexos no compositor */
.sz-editor-preview {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.5rem;
  margin-top: 0.375rem;
}
.sz-editor-preview-item {
  position: relative;
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--muted) / 0.3);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.3s;
}
.sz-editor-preview-item:hover {
  border-color: hsl(var(--primary) / 0.5);
}
.sz-editor-preview-item.is-flash {
  animation: sz-attach-flash 1.6s ease-out;
}
@keyframes sz-attach-flash {
  0%   { box-shadow: 0 0 0 0 hsl(142 70% 50% / 0); transform: scale(0.9); opacity: 0; }
  20%  { box-shadow: 0 0 0 6px hsl(142 70% 50% / 0.45); transform: scale(1.04); opacity: 1; }
  60%  { box-shadow: 0 0 0 8px hsl(142 70% 50% / 0); transform: scale(1); }
  100% { box-shadow: none; transform: scale(1); }
}
.sz-editor-preview-imglink {
  display: block;
  line-height: 0;
}
.sz-editor-preview-thumb {
  display: block;
  width: 100%;
  height: 6rem;
  object-fit: cover;
}
.sz-editor-preview-file {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 0.5rem 0.625rem;
  font-size: 0.6875rem;
  color: hsl(var(--foreground));
  text-decoration: none;
  height: 6rem;
  box-sizing: border-box;
  background: linear-gradient(180deg, hsl(var(--muted) / 0.15), hsl(var(--muted) / 0.4));
}
.sz-editor-preview-file-icon {
  position: relative;
  width: 2.5rem;
  height: 3rem;
  flex-shrink: 0;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
}
.sz-editor-preview-file-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sz-doc-page {
  fill: hsl(var(--card));
  stroke: hsl(var(--border));
  stroke-width: 0.5;
}
.sz-doc-fold {
  fill: hsl(var(--muted) / 0.6);
  stroke: hsl(var(--border));
  stroke-width: 0.5;
}
.sz-editor-preview-file-ext {
  position: absolute;
  bottom: 0.375rem;
  left: 50%;
  transform: translateX(-50%);
  background: hsl(215 16% 50%);
  color: white;
  font-size: 0.5rem;
  font-weight: 800;
  padding: 0.0625rem 0.3125rem;
  border-radius: 0.1875rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.sz-editor-preview-file-name {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-align: center;
  word-break: break-word;
  line-height: 1.3;
  font-weight: 500;
  color: hsl(var(--foreground) / 0.9);
  width: 100%;
}

/* Cores por tipo de arquivo */
.sz-editor-preview-file.is-pdf .sz-editor-preview-file-ext   { background: hsl(0 75% 50%); }
.sz-editor-preview-file.is-doc .sz-editor-preview-file-ext   { background: hsl(217 91% 55%); }
.sz-editor-preview-file.is-xls .sz-editor-preview-file-ext   { background: hsl(142 60% 40%); }
.sz-editor-preview-file.is-ppt .sz-editor-preview-file-ext   { background: hsl(20 88% 55%); }
.sz-editor-preview-file.is-zip .sz-editor-preview-file-ext   { background: hsl(265 70% 55%); }
.sz-editor-preview-file.is-audio .sz-editor-preview-file-ext { background: hsl(330 78% 55%); }
.sz-editor-preview-file.is-video .sz-editor-preview-file-ext { background: hsl(280 70% 55%); }
.sz-editor-preview-file.is-txt .sz-editor-preview-file-ext   { background: hsl(215 16% 50%); }
.sz-editor-preview-file.is-code .sz-editor-preview-file-ext  { background: hsl(195 75% 45%); }

/* Tint sutil no fundo do card por tipo */
.sz-editor-preview-file.is-pdf   { background: linear-gradient(180deg, hsl(0 75% 50% / 0.05), hsl(0 75% 50% / 0.12)); }
.sz-editor-preview-file.is-doc   { background: linear-gradient(180deg, hsl(217 91% 55% / 0.05), hsl(217 91% 55% / 0.12)); }
.sz-editor-preview-file.is-xls   { background: linear-gradient(180deg, hsl(142 60% 40% / 0.05), hsl(142 60% 40% / 0.12)); }
.sz-editor-preview-file.is-ppt   { background: linear-gradient(180deg, hsl(20 88% 55% / 0.05), hsl(20 88% 55% / 0.12)); }
.sz-editor-preview-file.is-zip   { background: linear-gradient(180deg, hsl(265 70% 55% / 0.05), hsl(265 70% 55% / 0.12)); }
.sz-editor-preview-file.is-audio { background: linear-gradient(180deg, hsl(330 78% 55% / 0.05), hsl(330 78% 55% / 0.12)); }
.sz-editor-preview-file.is-video { background: linear-gradient(180deg, hsl(280 70% 55% / 0.05), hsl(280 70% 55% / 0.12)); }
.sz-editor-preview-file.is-code  { background: linear-gradient(180deg, hsl(195 75% 45% / 0.05), hsl(195 75% 45% / 0.12)); }
.sz-editor-preview-remove {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  background: rgba(0, 0, 0, 0.75);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  z-index: 2;
}
.sz-editor-preview-remove:hover {
  background: hsl(0 84% 50%);
  transform: scale(1.08);
}
.detail-desc-empty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1.25rem;
  border: 1.5px dashed hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}
.detail-desc-empty:hover {
  border-color: hsl(var(--muted-foreground) / 0.3);
  background: hsl(var(--accent) / 0.5);
}
.detail-desc-empty svg { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }

/* Sidebar (right) */
.detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.detail-sidebar .card { padding: 0; overflow: visible; }

.detail-meta-card { opacity: 0.9; }
.detail-meta-card .detail-prop { min-height: 2.25rem; padding: 0.5rem 0.875rem; }

.detail-prop {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.5rem;
  align-items: center;
  padding: 0.5rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  font-size: 0.8125rem;
  min-height: 2.5rem;
  position: relative;
}
.detail-prop:last-child { border-bottom: none; }
.detail-prop-label {
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.detail-prop-label svg { width: 0.875rem; height: 0.875rem; flex-shrink: 0; opacity: 0.75; }

/* Legacy .detail-prop-value kept for compatibility with older dropdowns */
.detail-prop-value {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.125rem 0.375rem;
  border-radius: calc(var(--radius) - 2px);
  transition: background 0.15s;
}
.detail-prop-value:hover { background: hsl(var(--accent)); }
.detail-prop-value svg { width: 0.625rem; height: 0.625rem; color: hsl(var(--muted-foreground)); }

.detail-prop-static {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}

/* Media upload zone */
.media-zone {
  border: 1.5px dashed hsl(var(--border));
  border-radius: var(--radius);
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.media-zone:hover {
  border-color: hsl(var(--primary) / 0.4);
  background: hsl(var(--primary) / 0.03);
}
.media-zone input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.media-zone-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.625rem;
  color: hsl(var(--muted-foreground));
}
.media-zone-icon svg { width: 1.25rem; height: 1.25rem; }
.media-zone-text { font-size: 0.8125rem; color: hsl(var(--muted-foreground)); }
.media-zone-hint { font-size: 0.75rem; color: hsl(var(--muted-foreground) / 0.6); margin-top: 0.25rem; }

/* Attachment grid */
.attachment-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
  gap: 0.625rem;
  margin-bottom: 1rem;
}
.attachment-card {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.15s;
  cursor: pointer;
}
.attachment-card:hover { border-color: hsl(var(--muted-foreground) / 0.3); }
.attachment-preview {
  height: 5.5rem;
  background: hsl(var(--muted));
  display: flex;
  align-items: center;
  justify-content: center;
  color: hsl(var(--muted-foreground));
}
.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.attachment-preview svg { width: 1.5rem; height: 1.5rem; }
.attachment-info {
  padding: 0.5rem 0.625rem;
  font-size: 0.75rem;
}
.attachment-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.attachment-size { color: hsl(var(--muted-foreground)); margin-top: 0.125rem; }

/* ============================================
   Anexos em destaque (logo após descrição)
   ============================================ */
.detail-media-section {
  margin-top: 1.25rem;
  padding: 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.detail-media-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.detail-media-title {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.detail-media-title svg { color: hsl(var(--muted-foreground)); }
.detail-media-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-radius: 9999px;
}

.detail-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 0.5rem;
}
.detail-media-thumb {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 6rem;
  max-height: 18rem;
  padding: 0.5rem;
  background:
    linear-gradient(45deg, hsl(var(--muted) / 0.4) 25%, transparent 25%) 0 0 / 12px 12px,
    linear-gradient(-45deg, hsl(var(--muted) / 0.4) 25%, transparent 25%) 0 6px / 12px 12px,
    linear-gradient(45deg, transparent 75%, hsl(var(--muted) / 0.4) 75%) 6px -6px / 12px 12px,
    linear-gradient(-45deg, transparent 75%, hsl(var(--muted) / 0.4) 75%) -6px 0 / 12px 12px,
    hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  overflow: hidden;
  cursor: zoom-in;
  transition: border-color 0.15s, transform 0.15s;
}
.detail-media-thumb:hover {
  border-color: hsl(var(--primary) / 0.5);
  transform: translateY(-1px);
}
.detail-media-thumb img {
  max-width: 100%;
  max-height: 17rem;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  border-radius: calc(var(--radius) - 4px);
}

.detail-media-files {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  margin-top: 0.5rem;
}
.detail-media-file {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.625rem;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  text-decoration: none;
  color: hsl(var(--foreground));
  transition: background 0.15s, border-color 0.15s;
}
.detail-media-file:hover {
  background: hsl(var(--muted) / 0.7);
  border-color: hsl(var(--muted-foreground) / 0.3);
}
.detail-media-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: calc(var(--radius) - 2px);
  color: hsl(var(--muted-foreground));
}
.detail-media-file-info {
  flex: 1;
  min-width: 0;
}
.detail-media-file-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-media-file-size {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.125rem;
}
.detail-media-file-open {
  color: hsl(var(--muted-foreground));
  flex-shrink: 0;
  opacity: 0.6;
}
.detail-media-file:hover .detail-media-file-open { opacity: 1; }

/* Lightbox */
.detail-media-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  cursor: zoom-out;
}
.detail-media-lightbox img {
  max-width: 100%;
  max-height: 100%;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  cursor: default;
}
.detail-media-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.5rem;
  height: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 9999px;
  color: white;
  cursor: pointer;
  transition: background 0.15s;
}
.detail-media-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Comment input improved */
.comment-input-box {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 0.75rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s;
}
.comment-input-box:focus-within {
  border-color: hsl(var(--ring));
}
.comment-input-box .textarea {
  border: none;
  padding: 0;
  min-height: 3rem;
  resize: none;
  background: transparent;
}
.comment-input-box .textarea:focus {
  box-shadow: none;
}
.comment-input-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}

/* Detail meta item */
.detail-meta-item { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; }
.detail-meta-item svg { width: 0.875rem; height: 0.875rem; color: hsl(var(--muted-foreground)); }

/* ============================================
   BREADCRUMB — shadcn breadcrumb
   ============================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
}
.breadcrumb a {
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  transition: color 0.15s;
}
.breadcrumb a:hover { color: hsl(var(--foreground)); text-decoration: none; }
.breadcrumb svg { width: 0.875rem; height: 0.875rem; vertical-align: middle; }
.breadcrumb-separator { color: hsl(var(--muted-foreground)); }
.breadcrumb-current { font-weight: 500; color: hsl(var(--muted-foreground)); font-family: monospace; }

/* ============================================
   SIDEBAR USER
   ============================================ */
.sidebar-user { flex: 1; min-width: 0; }
.sidebar-user-name { font-size: 0.8125rem; font-weight: 500; }
.sidebar-user-role { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }

/* ============================================
   PROJECT DOT
   ============================================ */
.project-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
  display: inline-block;
}

/* ============================================
   CARD SECTIONS
   ============================================ */
.card-padded { padding: 1.5rem; }
.card-section { padding: 1.5rem; margin-bottom: 1rem; }
.section-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-title svg { flex-shrink: 0; }

/* ============================================
   ATTACHMENT ITEM
   ============================================ */
.attachment-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--muted));
  border-radius: var(--radius);
}
.attachment-item a { flex: 1; font-size: 0.8125rem; }
.attachment-size { font-size: 0.6875rem; color: hsl(var(--muted-foreground)); }

/* ============================================
   DELIVERY BADGE
   ============================================ */
.badge-delivery {
  display: inline-flex;
  align-items: center;
  padding: 0.0625rem 0.375rem;
  font-size: 0.625rem;
  font-weight: 600;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
}

/* ============================================
   CLICKABLE ROWS
   ============================================ */
.data-table tr.clickable-row { cursor: pointer; transition: background 0.1s; }
.data-table tr.clickable-row:hover td { background: hsl(var(--accent)); }
.data-table tr.clickable-row:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: -2px; }
.data-table a.row-link { color: inherit; text-decoration: none; display: block; }
.data-table a.row-link:hover { color: inherit; text-decoration: none; }

/* Loading spinner (A13) */
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.spinner { display: inline-block; vertical-align: middle; margin-right: 0.25rem; }
button[data-loading="true"] { opacity: 0.75; cursor: not-allowed; pointer-events: none; }

/* D1: KPI Chip Bar (clickable drill-down) */
.kpi-chip-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.5rem 1rem 0.75rem;
  margin-bottom: 0.25rem;
}
.kpi-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border-radius: 0.5rem;
  background: hsl(var(--muted) / 0.6);
  border: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.kpi-chip:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent-foreground) / 0.3);
  color: hsl(var(--foreground));
  transform: translateY(-1px);
}
.kpi-chip.active {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  box-shadow: 0 2px 8px hsl(var(--primary) / 0.25);
}
.kpi-chip-count {
  font-weight: 700;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
.kpi-chip-label { font-weight: 500; }

/* Color variants */
.kpi-chip-danger:not(.active) { color: hsl(0 84% 60%); border-color: hsl(0 84% 60% / 0.3); background: hsl(0 84% 60% / 0.08); }
.kpi-chip-danger:hover:not(.active) { background: hsl(0 84% 60% / 0.15); border-color: hsl(0 84% 60% / 0.5); color: hsl(0 84% 60%); }
.kpi-chip-danger.active { background: hsl(0 84% 55%); border-color: hsl(0 84% 55%); color: white; }

.kpi-chip-warning:not(.active) { color: hsl(25 95% 53%); border-color: hsl(25 95% 53% / 0.3); background: hsl(25 95% 53% / 0.08); }
.kpi-chip-warning:hover:not(.active) { background: hsl(25 95% 53% / 0.15); border-color: hsl(25 95% 53% / 0.5); color: hsl(25 95% 53%); }
.kpi-chip-warning.active { background: hsl(25 95% 50%); border-color: hsl(25 95% 50%); color: white; }

.kpi-chip-primary:not(.active) { color: hsl(217 91% 60%); border-color: hsl(217 91% 60% / 0.3); background: hsl(217 91% 60% / 0.08); }
.kpi-chip-primary:hover:not(.active) { background: hsl(217 91% 60% / 0.15); border-color: hsl(217 91% 60% / 0.5); color: hsl(217 91% 60%); }
.kpi-chip-primary.active { background: hsl(217 91% 55%); border-color: hsl(217 91% 55%); color: white; }

.kpi-chip-info:not(.active) { color: hsl(263 70% 60%); border-color: hsl(263 70% 60% / 0.3); background: hsl(263 70% 60% / 0.08); }
.kpi-chip-info:hover:not(.active) { background: hsl(263 70% 60% / 0.15); border-color: hsl(263 70% 60% / 0.5); color: hsl(263 70% 60%); }
.kpi-chip-info.active { background: hsl(263 70% 55%); border-color: hsl(263 70% 55%); color: white; }

.kpi-chip-success:not(.active) { color: hsl(142 60% 45%); border-color: hsl(142 60% 45% / 0.3); background: hsl(142 60% 45% / 0.08); }
.kpi-chip-success:hover:not(.active) { background: hsl(142 60% 45% / 0.15); border-color: hsl(142 60% 45% / 0.5); color: hsl(142 60% 45%); }
.kpi-chip-success.active { background: hsl(142 60% 40%); border-color: hsl(142 60% 40%); color: white; }

.kpi-chip-muted.active { background: hsl(var(--muted-foreground)); border-color: hsl(var(--muted-foreground)); color: hsl(var(--background)); }

/* D2: Clickable stat cards on dashboard */
a.stat-clickable {
  display: flex;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
a.stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  border-color: hsl(var(--accent-foreground) / 0.3);
  text-decoration: none;
  color: inherit;
}
a.stat-clickable:active { transform: translateY(0); }

/* A1: Quick Add Inline */
.quick-add-wrapper {
  padding: 0.5rem 0.625rem 0;
}
.quick-add-input {
  width: 100%;
  background: hsl(var(--background));
  border: 1.5px dashed hsl(var(--primary) / 0.5);
  padding: 0.625rem 0.75rem;
  font-size: 0.8125rem;
  border-radius: 0.5rem;
  transition: border 0.15s ease, box-shadow 0.15s ease;
}
.quick-add-input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  border-style: solid;
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.1);
}
.quick-add-input:disabled {
  opacity: 0.6;
  cursor: wait;
}
.quick-add-input::placeholder {
  color: hsl(var(--muted-foreground) / 0.7);
  font-size: 0.75rem;
}

/* Selected state for checkbox-list-item (A5/A6 defaults) */
.checkbox-list-item.selected {
  background: hsl(var(--accent) / 0.5);
  border-color: hsl(var(--primary) / 0.5);
}

/* B1: Peek Sheet (side drawer with iframe) */
.peek-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 9999;
  display: flex;
  justify-content: flex-end;
  backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.peek-sheet {
  width: 100%;
  max-width: 980px;
  height: 100%;
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--border));
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.2);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.25s cubic-bezier(0.34, 1.1, 0.64, 1);
}
@keyframes slideInRight { from { transform: translateX(100%); } to { transform: translateX(0); } }

.peek-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.25);
  flex-shrink: 0;
  gap: 1rem;
}
.peek-header-left, .peek-header-right {
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.peek-breadcrumb {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.25rem 0.5rem;
  background: hsl(var(--muted) / 0.4);
  border-radius: 0.375rem;
  color: hsl(var(--foreground));
}
.peek-id-prefix {
  color: hsl(var(--muted-foreground));
  margin-right: 0.0625rem;
}
.peek-id-number { letter-spacing: 0.02em; }
.peek-header-right .btn-icon {
  width: 2rem;
  height: 2rem;
}
.peek-iframe {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  background: hsl(var(--background));
}

/* In peek mode: hide sidebar, topbar; content fills everything */
.app-layout.peek-mode { grid-template-columns: 1fr !important; }
.app-layout.peek-mode .main-content { margin-left: 0 !important; }
.peek-content { padding: 0 !important; height: 100vh; overflow: auto; }
.peek-content .card-padded { border-radius: 0; border-left: none; border-right: none; }

@media (max-width: 768px) {
  .peek-sheet { max-width: 100%; }
}

/* B6: Toast action button */
.toast-action-btn {
  background: transparent;
  border: 1px solid hsl(var(--primary) / 0.5);
  color: hsl(var(--primary));
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 0.375rem;
  cursor: pointer;
  margin-left: 0.25rem;
  transition: all 0.15s ease;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.toast-action-btn:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* C2: Command Palette */
.palette-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 10vh;
  backdrop-filter: blur(4px);
  animation: fadeIn 0.15s ease;
}
.palette-dialog {
  width: min(640px, 94vw);
  max-height: 70vh;
  background: hsl(var(--popover, var(--card)));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: slideDown 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}
@keyframes slideDown { from { transform: translateY(-12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.palette-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
}
.palette-input {
  flex: 1;
  background: transparent;
  border: 0;
  outline: 0;
  font-size: 1rem;
  color: hsl(var(--foreground));
}
.palette-input::placeholder { color: hsl(var(--muted-foreground)); }
.palette-kbd {
  font-size: 0.625rem;
  font-family: monospace;
  padding: 0.125rem 0.375rem;
  background: hsl(var(--muted));
  border-radius: 0.25rem;
  color: hsl(var(--muted-foreground));
}

.palette-results {
  flex: 1;
  overflow-y: auto;
  padding: 0.375rem;
  min-height: 10px;
}
.palette-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  width: 100%;
  padding: 0.625rem 0.75rem;
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  cursor: pointer;
  text-align: left;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  transition: background 0.1s ease;
}
.palette-item:hover, .palette-item.selected {
  background: hsl(var(--accent));
}
.palette-item-num {
  font-family: monospace;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted));
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  flex-shrink: 0;
}
.palette-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.375rem;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
  flex-shrink: 0;
}
.palette-item-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.palette-item-meta { flex-shrink: 0; }

.palette-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}
.palette-footer {
  display: flex;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-top: 1px solid hsl(var(--border));
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.3);
}
.palette-footer kbd {
  font-family: monospace;
  padding: 0.0625rem 0.3125rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
  font-size: 0.625rem;
  margin-right: 0.25rem;
}

/* I2: Keyboard Shortcuts Help Modal */
.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  padding: 0.5rem 0;
}
.shortcut-section {
  background: hsl(var(--muted) / 0.3);
  border-radius: 0.5rem;
  padding: 0.75rem;
}
.shortcut-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
  margin: 0 0 0.5rem;
}
.shortcut-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0;
  font-size: 0.8125rem;
}
.shortcut-row kbd {
  font-family: monospace;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.125rem 0.375rem;
  min-width: 1.5rem;
  text-align: center;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-bottom-width: 2px;
  border-radius: 0.25rem;
  color: hsl(var(--foreground));
}
.shortcut-row span {
  margin-left: auto;
  color: hsl(var(--muted-foreground));
}

/* F4: Density modes */
body.density-compact .kanban-card { padding: 0.375rem 0.5rem !important; }
body.density-compact .kanban-card-title { font-size: 0.8125rem; margin-bottom: 0.25rem; }
body.density-compact .kanban-card-labels { display: none; }
body.density-compact .kanban-card-progress { display: none; }
body.density-compact .kanban-card-separator { display: none; }
body.density-compact .kanban-card-footer { padding-top: 0.25rem; }
body.density-compact .kanban-column-cards { gap: 0.375rem; padding: 0.5rem; }

body.density-comfortable .kanban-card { padding: 1rem 0.875rem !important; }
body.density-comfortable .kanban-card-title { font-size: 0.9375rem; -webkit-line-clamp: 3; }
body.density-comfortable .kanban-column-cards { gap: 0.75rem; padding: 0.875rem; }

/* H1: Redesign — cards atrasados com visual refinado (não pulsa) */
/* Only apply to cards NOT in done/cancelled/deferred columns */
.kanban-column[data-col="done"] .kanban-card,
.kanban-column[data-col="cancelled"] .kanban-card,
.kanban-column[data-col="deferred"] .kanban-card {
  /* reset any inherited overdue/stale treatment para colunas terminais */
  border-left: none !important;
  animation: none !important;
}

.kanban-card.is-overdue:not([data-done]) {
  border-left: 3px solid hsl(0 72% 55%);
  background: linear-gradient(to right, hsl(0 72% 55% / 0.04) 0%, transparent 50%);
}
.kanban-card.is-overdue:not([data-done])::before {
  background: linear-gradient(90deg, hsl(0 72% 55%) 0%, hsl(0 72% 55% / 0.3) 100%);
}

/* H4: Tempo na coluna (pill discreto sob o card footer) */
.card-age-pill {
  font-size: 0.625rem;
  color: hsl(var(--muted-foreground) / 0.7);
  font-weight: 500;
}
.card-age-pill.stale {
  color: hsl(38 92% 50%);
  font-weight: 600;
}

/* H5: Borda amarela discreta em cards "esquecidos" (>7d sem mover), so em nao-done */
.kanban-card[data-stale="true"]:not(.is-overdue):not([data-done]) {
  border-left: 3px solid hsl(38 92% 50% / 0.6);
}

/* Cards de done: visual mais sutil (opacity reduzida, sem destaques) */
.kanban-column[data-col="done"] .kanban-card {
  opacity: 0.82;
}
.kanban-column[data-col="done"] .kanban-card:hover {
  opacity: 1;
}

/* G3: Notifications bell + badge */
.notif-bell { position: relative; }
.notif-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  background: hsl(0 84% 55%);
  color: white;
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px hsl(var(--background));
  letter-spacing: -0.02em;
}
.notif-bell.has-unread svg {
  animation: bellShake 1.5s ease-in-out;
  animation-iteration-count: 3;
  transform-origin: top center;
}
@keyframes bellShake {
  0%, 100% { transform: rotate(0); }
  15% { transform: rotate(12deg); }
  30% { transform: rotate(-10deg); }
  45% { transform: rotate(8deg); }
  60% { transform: rotate(-6deg); }
  75% { transform: rotate(3deg); }
}
.notif-dropdown {
  position: absolute;
  top: 100%; right: 0; margin-top: 0.375rem;
  min-width: 22rem;
  max-width: 24rem;
  background: hsl(var(--popover, var(--card)));
  border: 1px solid hsl(var(--border));
  border-radius: 0.625rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  z-index: 100;
  padding: 0;
  display: flex;
  flex-direction: column;
  max-height: 30rem;
}
.notif-header {
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: hsl(var(--muted) / 0.3);
  flex-shrink: 0;
}
.notif-header strong { font-size: 0.875rem; }
.notif-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}
.notif-empty svg { margin: 0 auto 0.5rem; opacity: 0.4; }
.notif-empty div { font-weight: 500; margin-bottom: 0.25rem; }
.notif-empty small { color: hsl(var(--muted-foreground) / 0.8); font-size: 0.75rem; }

.notif-list {
  flex: 1;
  overflow-y: auto;
}
.notif-item {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  text-decoration: none;
  color: inherit;
  transition: background 0.1s ease;
  position: relative;
}
.notif-item:hover { background: hsl(var(--accent) / 0.5); text-decoration: none; color: inherit; }
.notif-item:last-child { border-bottom: 0; }
.notif-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.6875rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}
.notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.notif-body { flex: 1; min-width: 0; }
.notif-title {
  font-size: 0.8125rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
  color: hsl(var(--foreground));
}
.notif-message {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.notif-time {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground) / 0.8);
  margin-top: 0.25rem;
}
.notif-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: hsl(var(--primary));
  flex-shrink: 0;
  margin-top: 0.5rem;
}

/* J14: Alert Dialog */
.alert-dialog { max-width: 420px; }
.alert-dialog-desc { color: hsl(var(--muted-foreground)); font-size: 0.875rem; margin: 0.25rem 0 1rem; }
.btn-destructive { background: hsl(0 84% 55%); color: white; border: 1px solid hsl(0 84% 55%); }
.btn-destructive:hover { background: hsl(0 84% 48%); border-color: hsl(0 84% 48%); }

/* J15: Skeleton loader */
.skeleton {
  display: block;
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.5) 50%, hsl(var(--muted)) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 0.375rem;
}
@keyframes skeletonShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.skeleton-text { height: 0.875em; width: 100%; margin: 0.25rem 0; }
.skeleton-text.short { width: 60%; }
.skeleton-text.medium { width: 80%; }
.skeleton-circle { border-radius: 9999px; width: 2rem; height: 2rem; }
.skeleton-card { height: 5rem; margin-bottom: 0.5rem; }

/* Cross-Document View Transitions — Chrome 126+ / Edge 126+ */
/* Faz crossfade automático nativo entre páginas do mesmo domínio */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.18s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fade-in das colunas do kanban (suaviza chegada após skeleton) */
.kanban-board:not(.is-skeleton) > .kanban-column {
  animation: kanbanColumnFadeIn 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(1) { animation-delay: 0ms; }
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(2) { animation-delay: 40ms; }
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(3) { animation-delay: 80ms; }
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(4) { animation-delay: 120ms; }
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(5) { animation-delay: 160ms; }
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(6) { animation-delay: 200ms; }
.kanban-board:not(.is-skeleton) > .kanban-column:nth-child(7) { animation-delay: 240ms; }
@keyframes kanbanColumnFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Kanban: skeleton da PÁGINA INTEIRA ao navegar entre projetos */
.kanban-board.is-skeleton {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  pointer-events: none;
  overflow-x: auto;
}
.kanban-skel-column {
  flex: 1 0 280px;
  min-width: 280px;
  max-width: 320px;
  background: hsl(var(--card) / 0.5);
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.kanban-skel-header {
  height: 1.5rem;
  width: 60%;
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.5) 50%, hsl(var(--muted)) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 0.375rem;
  margin-bottom: 0.75rem;
}
.kanban-skel-card {
  height: 5.5rem;
  background: linear-gradient(90deg, hsl(var(--muted)) 25%, hsl(var(--muted) / 0.5) 50%, hsl(var(--muted)) 75%);
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* J12: Tooltip (pure CSS, hover-based) */
[data-tooltip] {
  position: relative;
}
[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%) scale(0.92);
  background: hsl(var(--popover, var(--card)));
  color: hsl(var(--foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 1000;
}
[data-tooltip]:hover::before {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
[data-tooltip-side="right"]::before { left: calc(100% + 6px); top: 50%; transform: translateY(-50%) scale(0.92); bottom: auto; }
[data-tooltip-side="right"]:hover::before { transform: translateY(-50%) scale(1); }
[data-tooltip-side="bottom"]::before { top: calc(100% + 6px); bottom: auto; }

/* D3: Heatmap chart */
.heatmap-row {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 110px;
  padding: 0.5rem 0 0;
}
.heatmap-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: help;
  transition: transform 0.15s ease;
}
.heatmap-col:hover { transform: translateY(-2px); }
.heatmap-stack {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 80px;
  gap: 1px;
}
.heatmap-bar {
  width: 100%;
  min-height: 2px;
  border-radius: 2px;
  transition: opacity 0.15s ease;
}
.heatmap-bar-created { background: hsl(217 91% 60%); }
.heatmap-bar-done { background: hsl(142 60% 45%); }
.heatmap-col:hover .heatmap-bar { opacity: 0.85; }
.heatmap-label {
  font-size: 0.5625rem;
  color: hsl(var(--muted-foreground) / 0.7);
  margin-top: 0.25rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .heatmap-label { font-size: 0.5rem; }
}

/* Delivery chip (no prazo / com atraso) para cards concluidos */
.delivery-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.125rem 0.4375rem;
  border-radius: 0.3125rem;
  white-space: nowrap;
  border: 1px solid transparent;
}
.delivery-chip svg {
  width: 11px; height: 11px; flex-shrink: 0;
}
.delivery-chip-ontime {
  background: hsl(142 60% 45% / 0.12);
  color: hsl(142 60% 40%);
  border-color: hsl(142 60% 45% / 0.3);
}
.delivery-chip-late {
  background: hsl(25 95% 53% / 0.12);
  color: hsl(25 95% 53%);
  border-color: hsl(25 95% 53% / 0.3);
}

/* ============================================
   EXTERNAL TICKET INFO (portal integration)
   ============================================ */

/* Dashboard widget */
.external-widget {
  background: linear-gradient(180deg, hsl(38 92% 50% / 0.08) 0%, hsl(var(--card)) 40%);
  border: 1px solid hsl(38 92% 50% / 0.25);
  padding: 1rem 1.25rem;
  transition: transform 0.15s, border-color 0.15s;
}
.external-widget:hover {
  transform: translateY(-2px);
  border-color: hsl(38 92% 50% / 0.5);
}
.external-widget-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.875rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.external-widget-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
}
.external-widget-icon { display: inline-flex; align-items: center; color: hsl(var(--muted-foreground)); }
.external-widget-icon svg { width: 1rem; height: 1rem; }
.external-widget-link {
  color: hsl(38 92% 55%);
  font-size: 0.75rem;
  font-weight: 600;
}
.external-widget-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.875rem;
}
.external-widget-stat {
  background: hsl(var(--muted) / 0.3);
  border-radius: 0.375rem;
  padding: 0.625rem 0.5rem;
  text-align: center;
}
.external-widget-stat-new {
  background: hsl(38 92% 50% / 0.12);
  border: 1px solid hsl(38 92% 50% / 0.3);
}
.external-widget-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 0.125rem;
}
.external-widget-stat-new .external-widget-value { color: hsl(38 92% 55%); }
.external-widget-label {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.external-widget-list {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
  padding-top: 0.625rem;
}
.external-widget-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
}
.external-widget-item .truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .external-widget-stats { grid-template-columns: repeat(2, 1fr); }
}
.external-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(90deg, hsl(38 92% 50% / 0.1) 0%, hsl(38 92% 50% / 0.02) 100%);
  border: 1px solid hsl(38 92% 50% / 0.3);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.external-banner-icon { font-size: 1.25rem; flex-shrink: 0; }
.external-banner-body { flex: 1; min-width: 0; }
.external-banner-title {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(38 92% 55%);
  margin-bottom: 0.125rem;
}
.external-banner-meta {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}
.external-banner-meta .font-mono {
  background: hsl(var(--muted));
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  color: hsl(var(--foreground));
  font-size: 0.6875rem;
}

.external-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
@media (max-width: 680px) {
  .external-grid { grid-template-columns: 1fr; }
}

.external-card {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  border-radius: 0.5rem;
  padding: 0.75rem 0.875rem;
}
.external-card-label {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}
.external-card-label svg { opacity: 0.7; }
.external-card-body {
  font-size: 0.8125rem;
}
.external-card-body a { color: hsl(var(--primary)); text-decoration: none; }
.external-card-body a:hover { text-decoration: underline; }

.env-chips { display: flex; flex-wrap: wrap; gap: 0.3125rem; }
.env-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.6875rem;
  padding: 0.125rem 0.4375rem;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: 0.3125rem;
  color: hsl(var(--muted-foreground));
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.external-details { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.external-detail-block {
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  background: hsl(var(--card));
  overflow: hidden;
}
.external-detail-block summary {
  padding: 0.5rem 0.875rem;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 500;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.external-detail-block summary::-webkit-details-marker { display: none; }
.external-detail-block summary::after { content: "▼"; font-size: 0.625rem; color: hsl(var(--muted-foreground)); transition: transform 0.15s; }
.external-detail-block[open] summary::after { transform: rotate(180deg); }
.external-detail-content {
  padding: 0.5rem 0.875rem 0.875rem;
  font-size: 0.875rem;
  white-space: pre-wrap;
  color: hsl(var(--foreground) / 0.9);
  border-top: 1px solid hsl(var(--border) / 0.5);
}

/* Comment badges para tickets externos */
.comment-public-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.4375rem;
  background: hsl(142 60% 45% / 0.15);
  color: hsl(142 60% 50%);
  border: 1px solid hsl(142 60% 45% / 0.3);
  border-radius: 0.25rem;
}
.comment-internal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  font-weight: 500;
  padding: 0.0625rem 0.4375rem;
  background: hsl(var(--muted) / 0.7);
  color: hsl(var(--muted-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: 0.25rem;
}
.comment-external-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.625rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  background: hsl(38 92% 50%);
  color: white;
  border-radius: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.comment.comment-internal {
  background: hsl(var(--muted) / 0.4);
  border-left: 3px solid hsl(var(--muted-foreground) / 0.4);
  opacity: 0.92;
}

/* External ticket card in kanban */
.kanban-card[data-source="external"] {
  border-top: 2px solid hsl(38 92% 50%);
}
.kanban-card[data-source="external"] .kanban-card-number::before {
  content: "🌍 ";
  font-size: 0.75rem;
}

/* ============================================
   DETAIL EDITOR — shadcn Popover-style props
   ============================================ */
.detail-save-indicator {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  padding: 0.375rem 0.75rem;
  margin-bottom: 0.5rem;
  border-radius: 0.5rem;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  font-weight: 500;
}
.save-state-saving { color: hsl(var(--muted-foreground)); display: inline-flex; align-items: center; gap: 0.25rem; }
.save-state-saved { color: hsl(142 60% 45%); display: inline-flex; align-items: center; gap: 0.25rem; }
.save-state-error { color: hsl(0 84% 55%); display: inline-flex; align-items: center; gap: 0.25rem; }

.detail-prop-editor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: 0.375rem;
}
.detail-prop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid transparent;
  padding: 0.3125rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  color: hsl(var(--foreground));
  font: inherit;
  font-size: 0.8125rem;
  max-width: 100%;
  width: 100%;
  justify-content: space-between;
  transition: background 0.15s, border-color 0.15s;
  text-align: right;
}
.detail-prop-trigger:hover {
  background: hsl(var(--accent) / 0.6);
  border-color: hsl(var(--border));
}
.detail-prop-trigger:focus-visible {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}
.detail-prop-trigger > :first-child { flex: 1; text-align: right; overflow: hidden; text-overflow: ellipsis; }
.detail-prop-trigger svg:last-child { color: hsl(var(--muted-foreground) / 0.8); flex-shrink: 0; opacity: 0.7; }
.detail-prop-trigger:hover svg:last-child { opacity: 1; }

.detail-prop-input {
  width: 5rem;
  height: 1.75rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--ring));
  border-radius: 0.375rem;
  color: hsl(var(--foreground));
  outline: none;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.15);
}

.detail-popover {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  min-width: 12rem;
  max-width: 18rem;
  max-height: 20rem;
  overflow-y: auto;
  background: hsl(var(--popover, var(--card)));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.35);
  padding: 0.375rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.detail-popover-calendar { padding: 0.75rem; min-width: 280px; }

.detail-popover-header {
  padding: 0.375rem 0.5rem 0.25rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  border-bottom: 1px solid hsl(var(--border));
  margin-bottom: 0.25rem;
}
.detail-popover-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: 0.375rem;
  cursor: pointer;
  font-size: 0.8125rem;
  background: transparent;
  border: 0;
  text-align: left;
  color: hsl(var(--foreground));
  font: inherit;
  transition: background 0.1s;
}
.detail-popover-item:hover { background: hsl(var(--accent)); }
.detail-popover-footer {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid hsl(var(--border));
  padding-top: 0.375rem;
  margin-top: 0.25rem;
}

.assignees-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
  overflow: hidden;
}

/* Single assignee: avatar + name */
.assignees-single {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}
.assignees-single .avatar-img,
.assignees-single .avatar { flex-shrink: 0; }

/* Name next to avatar(s) */
.assignees-name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* 2+ assignees: stacked avatars + names/count */
.assignees-stack {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}
.assignees-stack > .avatar-img,
.assignees-stack > .avatar {
  border: 2px solid hsl(var(--card));
  margin-left: -0.375rem;
  flex-shrink: 0;
}
.assignees-stack > .avatar-img:first-child,
.assignees-stack > .avatar:first-child { margin-left: 0; }

.assignees-count {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.0625rem 0.375rem;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-radius: 9999px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Empty state: + Atribuir */
.assignees-empty {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
}
.assignees-empty svg {
  opacity: 0.7;
}
.detail-prop-trigger:hover .assignees-empty {
  color: hsl(var(--foreground));
}
.detail-prop-trigger:hover .assignees-empty svg {
  opacity: 1;
}

/* Tags agrupadas a direita do header (NOVO + priority) */
.kanban-card-tags {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}

/* NOVO badge inline ao lado da tag de prioridade */
.badge-new-inline {
  display: inline-flex;
  align-items: center;
  font-size: 0.5625rem;
  font-weight: 700;
  padding: 0.125rem 0.3125rem;
  background: hsl(142 60% 45%);
  color: white;
  border-radius: 0.25rem;
  letter-spacing: 0.04em;
  vertical-align: middle;
  line-height: 1;
  height: fit-content;
}

@media (max-width: 768px) {
  .kpi-chip-bar { padding: 0.5rem 0.75rem; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .kpi-chip { flex-shrink: 0; }
}

/* ============================================
   KANBAN STATUS DOT
   ============================================ */
.status-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.status-dot-backlog { background: hsl(var(--muted-foreground)); }
.status-dot-todo { background: hsl(217 91% 60%); }
.status-dot-in_progress { background: hsl(38 92% 50%); }
.status-dot-code_review { background: hsl(195 80% 45%); }
.status-dot-in_review { background: hsl(263 70% 50%); }
.status-dot-done { background: hsl(var(--primary)); }
.status-dot-deferred { background: hsl(43 96% 50%); }
.status-dot-cancelled { background: hsl(var(--destructive)); }

/* ============================================
   KEYBOARD SHORTCUT HINT
   ============================================ */
.kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.25rem;
  min-width: 1.25rem;
  padding: 0 0.25rem;
  font-size: 0.625rem;
  font-family: inherit;
  font-weight: 500;
  border-radius: calc(var(--radius) - 2px);
  border: 1px solid hsl(var(--border));
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .kanban-column { min-width: 16rem; }
  .page-content { padding: 1rem; }
  .sheet-content { width: 100vw; }
  .modal-content { margin: 1rem; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .topbar { padding: 0 1rem; }
  .toast { width: calc(100vw - 2rem); }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
}

/* ============================================
   CALENDAR v3 — full-width grid, compact day, upcoming preview
   ============================================ */

/* --- Toolbar --- */
.cal-toolbar { gap: 0.5rem; flex-wrap: wrap; }
.cal-toolbar .filter-select { height: 2rem; padding-right: 1.75rem; font-size: 0.8125rem; }

/* ============================================
   MONTH VIEW v3 — full-width grid, dense, readable
   ============================================ */
.cal-grid-v3 {
  --cal-weeks: 6;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto repeat(var(--cal-weeks), minmax(0, 1fr));
  gap: 1px;
  background: hsl(var(--border));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  height: calc(100vh - var(--topbar-height) - 11rem);
  min-height: 26rem;
  margin-bottom: 0.5rem;
}
.cal-grid-v3 .cal-header-cell {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: hsl(var(--foreground) / 0.85);
  background: hsl(var(--muted) / 0.5);
  padding: 0.5rem 0.625rem;
  text-align: left;
  border-right: none;
  border-bottom: none;
}
.cal-grid-v3 .cal-header-cell-weekend { color: hsl(var(--muted-foreground) / 0.7); }

.cal-grid-v3 .cal-day {
  background: hsl(var(--card));
  min-height: 0;
  padding: 0.3125rem 0.375rem;
  border: none;
  display: flex;
  flex-direction: column;
  position: relative;
  cursor: pointer;
  transition: background 0.12s;
  overflow: hidden;
}
.cal-grid-v3 .cal-day .cal-events {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0.125rem;
}
.cal-grid-v3 .cal-day:hover { background: hsl(var(--accent) / 0.5); }
.cal-grid-v3 .cal-day-empty { background: hsl(var(--card)); cursor: default; opacity: 0.55; }
.cal-grid-v3 .cal-day-empty:hover { background: hsl(var(--card)); }
.cal-grid-v3 .cal-day-weekend { background: hsl(var(--card)); }
.cal-grid-v3 .cal-day-weekend:hover { background: hsl(var(--accent) / 0.4); }
.cal-grid-v3 .cal-day-weekend { background: hsl(var(--muted) / 0.08); }
.cal-grid-v3 .cal-day-weekend:hover { background: hsl(var(--accent) / 0.4); }

/* Today: forte mas sem círculo redundante - bg + border-top primary */
.cal-grid-v3 .cal-day-today {
  background: hsl(var(--primary) / 0.05);
  box-shadow: inset 0 2px 0 hsl(var(--primary));
}
.cal-grid-v3 .cal-day-today .cal-day-number {
  color: hsl(var(--primary));
  font-weight: 700;
}

/* Has overdue: borda esquerda vermelha sutil */
.cal-grid-v3 .cal-day-has-overdue {
  box-shadow: inset 2px 0 0 hsl(0 84% 60% / 0.7);
}
.cal-grid-v3 .cal-day-today.cal-day-has-overdue {
  box-shadow: inset 2px 0 0 hsl(0 84% 60% / 0.7), inset 0 2px 0 hsl(var(--primary));
}

/* Day header (number + add btn) */
.cal-grid-v3 .cal-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.1875rem;
  flex-shrink: 0;
  min-height: 1.25rem;
}
.cal-grid-v3 .cal-day-number {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
  padding: 0 0.25rem;
  line-height: 1.1;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background 0.12s;
}
.cal-grid-v3 .cal-day-number:hover { background: hsl(var(--accent)); text-decoration: none; }
.cal-day-add {
  width: 1.125rem;
  height: 1.125rem;
  border-radius: 0.25rem;
  background: transparent;
  border: 1px dashed hsl(var(--border));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.12s;
}
.cal-grid-v3 .cal-day:hover .cal-day-add { opacity: 1; }
.cal-day-add:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
  border-style: solid;
}

/* Events container */
.cal-grid-v3 .cal-events {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-height: 0;
  flex: 1;
}

/* ========================================
   CHIPS v5.1 — 1 linha, denso, alto contraste
   ======================================== */
.cal-grid-v3 .cal-chip {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.4375rem;
  min-height: 1.25rem;
  font-size: 0.75rem;
  line-height: 1.2;
  text-decoration: none;
  border-radius: 0.3125rem;
  background: hsl(var(--secondary));
  color: hsl(var(--foreground));
  font-weight: 500;
  transition: all 0.12s;
  overflow: hidden;
}
.cal-grid-v3 .cal-chip:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  text-decoration: none;
  transform: translateX(1px);
  box-shadow: 0 0 0 1px hsl(var(--accent-foreground) / 0.15);
}
.cal-grid-v3 .cal-chip-title {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Priority dot inline */
.cal-grid-v3 .cal-chip-prio-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
  background: hsl(var(--muted-foreground));
}
.cal-grid-v3 .cal-chip-urgent  .cal-chip-prio-dot { background: hsl(0 84% 52%); box-shadow: 0 0 0 2px hsl(0 84% 52% / 0.25); }
.cal-grid-v3 .cal-chip-high    .cal-chip-prio-dot { background: hsl(25 95% 50%); }
.cal-grid-v3 .cal-chip-normal  .cal-chip-prio-dot { background: hsl(217 91% 55%); }
.cal-grid-v3 .cal-chip-low     .cal-chip-prio-dot { background: hsl(var(--muted-foreground) / 0.6); }

/* Status states */
.cal-grid-v3 .cal-chip-status-in_progress {
  border-left: 2px solid hsl(217 91% 60%);
  padding-left: calc(0.5rem - 2px);
}
.cal-grid-v3 .cal-chip-status-in_review {
  background: hsl(38 92% 50% / 0.14);
  border-left: 2px solid hsl(38 92% 50%);
  padding-left: calc(0.5rem - 2px);
}
.cal-grid-v3 .cal-chip-status-done {
  opacity: 0.55;
  background: hsl(var(--muted) / 0.5);
}
.cal-grid-v3 .cal-chip-status-done .cal-chip-title {
  color: hsl(var(--muted-foreground));
}
.cal-grid-v3 .cal-chip-done-check {
  color: hsl(142 70% 45%);
  flex-shrink: 0;
}
.cal-grid-v3 .cal-chip-status-cancelled {
  opacity: 0.45;
  background: hsl(var(--muted) / 0.3);
}
.cal-grid-v3 .cal-chip-status-cancelled .cal-chip-title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: hsl(var(--muted-foreground));
}

/* "Ver dia +N" — link sutil, não competindo com chips */
.cal-grid-v3 .cal-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.4375rem;
  margin-top: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border-radius: 0.25rem;
  text-decoration: none;
  align-self: flex-start;
  transition: all 0.12s;
}
.cal-grid-v3 .cal-more:hover {
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--foreground));
  text-decoration: none;
}
.cal-grid-v3 .cal-more-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1rem;
  height: 1rem;
  padding: 0 0.25rem;
  font-size: 0.625rem;
  font-weight: 700;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-radius: 9999px;
}
.cal-grid-v3 .cal-more svg { opacity: 0.7; }

/* Responsive month — viewport mais estreito ou baixo, reduz altura do chip + header */
@media (max-height: 850px), (max-width: 1440px) {
  .cal-grid-v3 .cal-chip { min-height: 1.125rem; padding: 0.0625rem 0.375rem; font-size: 0.6875rem; }
  .cal-grid-v3 .cal-day-header { min-height: 1.125rem; margin-bottom: 0.125rem; }
  .cal-grid-v3 .cal-day-number { font-size: 0.75rem; }
  .cal-grid-v3 .cal-events { gap: 0.0625rem; }
  .cal-grid-v3 .cal-more { padding: 0 0.375rem; min-height: 1rem; font-size: 0.625rem; line-height: 1; }
  .cal-grid-v3 .cal-more svg { display: none; }
  .cal-day-add { width: 1rem; height: 1rem; }
  .cal-day-today-pill { height: 0.875rem; padding: 0 0.375rem; font-size: 0.5rem; }
}
@media (max-width: 1366px), (max-height: 768px) {
  .cal-grid-v3 .cal-chip { min-height: 1rem; font-size: 0.625rem; padding: 0 0.3125rem; }
  .cal-grid-v3 .cal-more { min-height: 0.875rem; font-size: 0.5625rem; }
  .cal-grid-v3 .cal-events { gap: 0.0625rem; }
  .cal-grid-v3 .cal-day { padding: 0.1875rem 0.25rem; }
  .cal-grid-v3 .cal-chip-prio-dot { width: 0.375rem; height: 0.375rem; }
}
@media (max-width: 1024px) {
  .cal-grid-v3 .cal-day { min-height: 5.5rem; padding: 0.1875rem 0.25rem; }
}
@media (max-width: 768px) {
  .cal-grid-v3 { grid-template-columns: repeat(7, minmax(80px, 1fr)); overflow-x: auto; }
  .cal-grid-v3 .cal-day { min-height: 4.5rem; }
  .cal-grid-v3 .cal-header-cell { font-size: 0.5625rem; padding: 0.375rem 0.25rem; }
}

/* Week view past days + today dot (cal-week-count vem do bloco principal) */
.cal-week-today-dot {
  display: inline-block;
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: hsl(var(--primary));
  margin-left: 0.375rem;
  vertical-align: middle;
  animation: pulseDot 2s infinite;
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.15); }
}
.cal-week-past .cal-week-day-header { opacity: 0.65; }
.cal-week-past .cal-week-card { opacity: 0.85; }

.cal-week-card-status-in_progress {
  outline: 2px solid hsl(217 91% 60% / 0.5);
  outline-offset: -1px;
  box-shadow: 0 0 0 1px hsl(217 91% 60% / 0.25), 0 1px 4px hsl(217 91% 60% / 0.18);
}
.cal-week-card-status-in_review { outline: 2px solid hsl(38 92% 50% / 0.45); outline-offset: -1px; }
.cal-week-card-status-done { opacity: 0.65; }
.cal-week-card-status-done .cal-week-card-title { text-decoration: line-through; }

.cal-week-empty-add {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.625rem;
  margin: 0.5rem 0;
  background: transparent;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.15s;
}
.cal-week-empty-add:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
}
.cal-week-empty-add svg { width: 0.875rem; height: 0.875rem; }
.cal-week-label-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}

/* ============================================
   DAY VIEW v3 — stats cards + 2 cols + upcoming
   ============================================ */
.cal-day-view {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Stats cards */
.day-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}
.day-stat {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  transition: all 0.15s;
}
.day-stat::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: hsl(var(--muted-foreground) / 0.3);
}
.day-stat-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  background: hsl(var(--muted) / 0.5);
  color: hsl(var(--muted-foreground));
  display: flex;
  align-items: center;
  justify-content: center;
}
.day-stat-icon svg { width: 1.125rem; height: 1.125rem; }
.day-stat-body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.day-stat-num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: hsl(var(--foreground));
}
.day-stat-label {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* Stat card variants */
.day-stat-overdue::before { background: hsl(0 84% 60%); }
.day-stat-overdue .day-stat-icon { background: hsl(0 84% 60% / 0.15); color: hsl(0 84% 60%); }
.day-stat-overdue.is-active .day-stat-num { color: hsl(0 84% 60%); }
.day-stat-overdue.is-active { background: linear-gradient(to right, hsl(0 84% 60% / 0.06), hsl(var(--card))); }

.day-stat-today::before { background: hsl(var(--foreground)); }

.day-stat-progress::before { background: hsl(217 91% 60%); }
.day-stat-progress .day-stat-icon { background: hsl(217 91% 60% / 0.15); color: hsl(217 91% 60%); }
.day-stat-progress .day-stat-num { color: hsl(217 91% 60%); }

.day-stat-done::before { background: hsl(var(--primary)); }
.day-stat-done .day-stat-icon { background: hsl(var(--primary) / 0.15); color: hsl(var(--primary)); }
.day-stat-done .day-stat-num { color: hsl(var(--primary)); }

/* Empty state */
.day-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem 1rem;
  background: hsl(var(--card));
  border: 1px dashed hsl(var(--border));
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
}
.day-empty svg { width: 2.5rem; height: 2.5rem; opacity: 0.5; }
.day-empty p { font-size: 0.875rem; margin: 0; }

/* Two-column layout */
.day-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.day-col-main, .day-col-side {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}

/* Group section */
.day-group {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
}
.day-group-overdue { border-color: hsl(0 84% 60% / 0.35); }
.day-group-overdue > .day-group-title {
  background: linear-gradient(to right, hsl(0 84% 60% / 0.08), hsl(var(--card)));
}
.day-group-progress > .day-group-title {
  background: linear-gradient(to right, hsl(217 91% 60% / 0.08), hsl(var(--card)));
}
.day-group-done { opacity: 0.95; }
.day-group-done > .day-group-title {
  background: linear-gradient(to right, hsl(var(--primary) / 0.06), hsl(var(--card)));
}

.day-group-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.875rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid hsl(var(--border));
  user-select: none;
}
.day-group-collapsible { cursor: pointer; }
.day-group-collapsible:hover { background: hsl(var(--accent) / 0.4); }
.day-group-name { color: hsl(var(--foreground)); }
.day-group-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.day-group-count {
  margin-left: auto;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.6);
  padding: 0.0625rem 0.5rem;
  border-radius: 9999px;
  font-weight: 600;
  min-width: 1.5rem;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
}
.day-group-chev {
  color: hsl(var(--muted-foreground));
  transition: transform 0.18s;
  margin-left: 0.25rem;
}
.day-group-chev.open { transform: rotate(180deg); }

.day-cards { display: flex; flex-direction: column; }

/* DAY CARD v3 — compact 1-line */
.day-card {
  display: flex;
  align-items: center;
  border-bottom: 1px solid hsl(var(--border));
  position: relative;
  transition: background 0.12s;
}
.day-card:last-child { border-bottom: none; }
.day-card:hover { background: hsl(var(--accent) / 0.4); }

.day-card-main {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  flex: 1;
  min-width: 0;
  text-decoration: none;
  color: inherit;
}
.day-card-main:hover { text-decoration: none; }

.day-card-prio-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: hsl(var(--muted-foreground) / 0.3);
  flex-shrink: 0;
}
.day-card-urgent .day-card-prio-bar  { background: hsl(0 84% 60%); }
.day-card-high .day-card-prio-bar    { background: hsl(25 95% 53%); }
.day-card-normal .day-card-prio-bar  { background: hsl(217 91% 60%); }
.day-card-low .day-card-prio-bar     { background: hsl(var(--muted-foreground) / 0.3); }

.day-card-status-in_progress .day-card-prio-bar {
  background: hsl(217 91% 60%);
  box-shadow: 0 0 6px hsl(217 91% 60% / 0.5);
}
.day-card-status-done {
  opacity: 0.55;
}
.day-card-status-done .day-card-title { text-decoration: line-through; }

.day-card-num {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  flex-shrink: 0;
}
.day-card-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--foreground));
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.01em;
}
.day-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
}
.day-card-label-dots {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
}
.day-card-label-dot {
  width: 0.4375rem;
  height: 0.4375rem;
  border-radius: 9999px;
}
.day-card-due {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-weight: 500;
}
.day-card-due svg { width: 0.6875rem; height: 0.6875rem; }

/* Quick actions (hover) */
.day-card-actions {
  display: flex;
  gap: 0.25rem;
  padding-right: 0.625rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.day-card:hover .day-card-actions { opacity: 1; }
.day-card-action {
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 0.25rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.12s;
}
.day-card-action:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
  border-color: hsl(var(--muted-foreground) / 0.4);
}
.day-card-action-done:hover {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-color: hsl(var(--primary));
}

/* Upcoming (right column) */
.day-upcoming {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.day-upcoming > .day-group-title { border-bottom: 1px solid hsl(var(--border)); }
.upcoming-day {
  padding: 0.5rem 0.875rem 0.625rem;
  border-bottom: 1px solid hsl(var(--border));
}
.upcoming-day:last-child { border-bottom: none; }
.upcoming-day.is-empty { padding-bottom: 0.5rem; }
.upcoming-day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.375rem;
}
.upcoming-day-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-decoration: none;
  letter-spacing: -0.01em;
}
.upcoming-day-label:hover { color: hsl(var(--primary)); text-decoration: none; }
.upcoming-day-count {
  font-size: 0.625rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  background: hsl(var(--muted) / 0.6);
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
}
.upcoming-day-cards {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.upcoming-card {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  background: hsl(var(--muted) / 0.4);
  border-radius: 0.25rem;
  text-decoration: none;
  color: hsl(var(--foreground));
  border-left: 2px solid hsl(var(--muted-foreground) / 0.4);
  transition: all 0.12s;
}
.upcoming-card:hover {
  background: hsl(var(--accent));
  text-decoration: none;
  transform: translateX(1px);
}
.upcoming-card-urgent  { border-left-color: hsl(0 84% 60%); }
.upcoming-card-high    { border-left-color: hsl(25 95% 53%); }
.upcoming-card-normal  { border-left-color: hsl(217 91% 60%); }
.upcoming-card-low     { border-left-color: hsl(var(--muted-foreground) / 0.4); }
.upcoming-card-num {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.625rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
  flex-shrink: 0;
}
.upcoming-card-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.upcoming-more {
  font-size: 0.625rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-decoration: none;
  padding: 0.25rem 0.5rem;
}
.upcoming-more:hover { color: hsl(var(--primary)); text-decoration: none; }
.upcoming-empty-add {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: 1px dashed hsl(var(--border));
  border-radius: 0.25rem;
  padding: 0.1875rem 0.5rem;
  cursor: pointer;
  transition: all 0.12s;
}
.upcoming-empty-add:hover {
  border-color: hsl(var(--primary));
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
}

/* Responsive day view */
@media (max-width: 1024px) {
  .day-cols { grid-template-columns: 1fr; }
  .day-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .day-stats { grid-template-columns: 1fr 1fr; }
  .day-stat { padding: 0.625rem; gap: 0.5rem; }
  .day-stat-num { font-size: 1.25rem; }
  .day-card-meta { display: none; }
}

/* ============================================
   VIEWER MODE — hide all action controls
   Aplicado quando user.role == 'viewer' (body.is-viewer)
   ============================================ */
.is-viewer .topbar-actions,
.is-viewer .kanban-card-menu,
.is-viewer .cal-day-add,
.is-viewer .cal-week-empty-add,
.is-viewer .upcoming-empty-add,
.is-viewer .quick-add-trigger,
.is-viewer .day-card-actions,
.is-viewer .kanban-column-header .btn,
.is-viewer .quick-create-row,
.is-viewer .day-empty .btn-primary,
.is-viewer .empty-state-cta,
.is-viewer [data-viewer-hidden] {
  display: none !important;
}

/* Sidebar: esconder itens admin para viewer */
.is-viewer .sidebar-item[href="/users"] {
  display: none !important;
}

/* Cursor não-pointer em áreas que viewer não pode interagir */
.is-viewer .cal-day,
.is-viewer .kanban-column-cards {
  cursor: default !important;
}

/* Formulário de comentário e subtask: o backend já bloqueia, mas escondemos UI */
.is-viewer .comment-form,
.is-viewer .subtask-add,
.is-viewer .attachment-form,
.is-viewer .new-demand-modal-trigger {
  display: none !important;
}

/* Banner informativo para viewer */
.viewer-banner {
  display: none;
}
.is-viewer .viewer-banner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 1rem;
  background: hsl(var(--primary) / 0.08);
  border: 1px solid hsl(var(--primary) / 0.25);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  margin-bottom: 0.875rem;
}
.viewer-banner svg {
  width: 1.125rem;
  height: 1.125rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
}

/* ============================================
   CALENDAR ENHANCEMENTS (v4) — busca, drag-drop, overdue forte, agenda
   ============================================ */

/* Search bar in toolbar */
.cal-search {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.cal-search svg {
  position: absolute;
  left: 0.625rem;
  width: 0.875rem;
  height: 0.875rem;
  color: hsl(var(--muted-foreground));
  pointer-events: none;
}
.cal-search .input {
  padding-left: 2rem;
  padding-right: 1.75rem;
  height: 2.125rem;
  width: 14rem;
  font-size: 0.8125rem;
}
.cal-search-clear {
  position: absolute;
  right: 0.375rem;
  background: transparent;
  border: 0;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  font-size: 1.125rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.cal-search-clear:hover { color: hsl(var(--foreground)); }

/* Hidden by search */
.cal-search-hidden { display: none !important; }

/* Sem prazo: contador + toggle "ver mais" */
.cal-no-date-count {
  display: inline-flex;
  align-items: center;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.0625rem 0.4375rem;
  border-radius: 9999px;
  margin-left: 0.375rem;
}
.cal-no-date-toggle {
  background: transparent;
  border: 0;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius);
  margin-left: 0.25rem;
}
.cal-no-date-toggle:hover { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.08); }

/* Overdue indicator: borda top vermelha discreta */
.cal-day.cal-day-has-overdue {
  background: hsl(0 84% 60% / 0.04);
  position: relative;
}
.cal-day.cal-day-has-overdue::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: hsl(0 84% 60% / 0.65);
}
.cal-grid-v3 .cal-day-overdue-badge {
  animation: none;
  background: hsl(0 84% 55%);
  box-shadow: 0 0 0 2px hsl(var(--card));
}
.cal-day-overdue-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.375rem;
  font-size: 0.625rem;
  font-weight: 700;
  color: white;
  background: hsl(0 84% 55%);
  border-radius: 9999px;
  margin-left: auto;
  margin-right: 0.25rem;
  animation: overdue-pulse 2s ease-in-out infinite;
}
@keyframes overdue-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.92); }
}
.cal-chip-overdue {
  background: hsl(0 84% 60% / 0.07) !important;
  border-color: hsl(0 84% 60% / 0.35) !important;
  border-left-width: 3px !important;
  border-left-color: hsl(0 84% 60%) !important;
  padding-left: calc(0.5rem - 2px) !important;
}
.cal-chip-overdue .cal-chip-title { color: hsl(0 84% 45%); font-weight: 600; }
.cal-week-card-overdue {
  background: hsl(0 84% 60% / 0.08);
  border-color: hsl(0 84% 60% / 0.25) !important;
}
.cal-week-card-overdue:hover {
  background: hsl(0 84% 60% / 0.14);
}
.cal-week-card-overdue .cal-week-card-number::before {
  box-shadow: 0 0 0 2px hsl(0 84% 60% / 0.25);
}

/* Project color on cards (3.2) */
.cal-chip[style*="--project-color"] {
  position: relative;
}
.cal-chip[style*="--project-color"]::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--project-color);
  border-radius: var(--radius) 0 0 var(--radius);
}
/* Project color: micro-dot ao lado do priority dot (sem barra lateral) */
.cal-week-card[style*="--project-color"] .cal-week-card-number::after,
.cal-chip[style*="--project-color"] .cal-chip-number::after,
.agenda-card[style*="--project-color"]::after {
  content: '';
  display: inline-block;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 9999px;
  background: var(--project-color);
  margin-left: 0.3125rem;
  vertical-align: middle;
}

/* Drag and drop */
.cal-dragging {
  opacity: 0.35;
  cursor: grabbing !important;
  transform: scale(0.97);
}
.cal-day-drop-target {
  background: hsl(var(--primary) / 0.18) !important;
  box-shadow: inset 0 0 0 2px hsl(var(--primary)) !important;
}
.cal-day-drop-target::before {
  content: 'Solte aqui';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--primary));
  background: hsl(var(--primary) / 0.05);
  pointer-events: none;
  z-index: 5;
}
[draggable="true"] {
  cursor: grab;
}
[draggable="true"]:active { cursor: grabbing; }

/* ============================================
   AGENDA VIEW
   ============================================ */
.cal-agenda {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 64rem;
  margin: 0 auto 1rem;
  height: calc(100vh - var(--topbar-height) - 10rem);
  min-height: 24rem;
  overflow-y: auto;
  padding: 0 0.5rem 3rem 0;
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted-foreground) / 0.25) transparent;
}
.cal-agenda::-webkit-scrollbar { width: 8px; }
.cal-agenda::-webkit-scrollbar-track { background: transparent; }
.cal-agenda::-webkit-scrollbar-thumb {
  background: hsl(var(--muted-foreground) / 0.25);
  border-radius: 4px;
}
.cal-agenda::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground) / 0.4);
}
.agenda-group {
  display: flex;
  gap: 1rem;
  padding: 0.875rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}
.agenda-group.agenda-group-overdue {
  background: hsl(0 84% 60% / 0.04);
  border-color: hsl(0 84% 60% / 0.3);
}
.agenda-group-header {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
  flex-shrink: 0;
  width: 8.5rem;
  padding-right: 0.875rem;
  border-right: 1px solid hsl(var(--border));
}
.agenda-group-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.375rem 0.625rem;
  background: hsl(var(--muted) / 0.5);
  border-radius: var(--radius);
  min-width: 3.25rem;
}
.agenda-group-overdue .agenda-group-date {
  background: hsl(0 84% 60% / 0.12);
}
.agenda-group-weekday {
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
}
.agenda-group-day {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  margin: 0.125rem 0;
  color: hsl(var(--foreground));
}
.agenda-group-overdue .agenda-group-day { color: hsl(0 84% 55%); }
.agenda-group-month {
  font-size: 0.625rem;
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}
.agenda-group-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.25rem;
}
.agenda-group-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: hsl(var(--foreground));
}
.agenda-group-overdue .agenda-group-label { color: hsl(0 84% 50%); }
.agenda-group-count {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
}
.agenda-cards {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  flex: 1;
  min-height: 2rem;
  border-radius: var(--radius);
  transition: background 0.15s, outline 0.15s;
}
.agenda-card {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  text-decoration: none;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.agenda-card:hover {
  border-color: hsl(var(--primary) / 0.5);
  background: hsl(var(--accent) / 0.5);
  text-decoration: none;
  transform: translateY(-1px);
}
.agenda-card.agenda-card-overdue {
  border-left: 3px solid hsl(0 84% 55%);
}
.agenda-card-num {
  font-family: ui-monospace, SF Mono, monospace;
  font-size: 0.6875rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  white-space: nowrap;
}
.agenda-card-title {
  flex: 1;
  font-weight: 500;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.agenda-card .avatar-stack { flex-shrink: 0; }
.project-pill {
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .agenda-group { flex-direction: column; }
  .agenda-group-header {
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid hsl(var(--border));
    padding-bottom: 0.625rem;
    padding-right: 0;
  }
  .cal-search .input { width: 9rem; }
}

/* ============================================
   MINI CALENDAR — widget dentro da sidebar (shadcn style)
   ============================================ */
.sidebar-mini-cal {
  padding: 0.875rem 0.5rem 0.625rem;
  margin: 0.5rem 0.5rem 0;
  border-top: 1px solid hsl(var(--border));
}

.mini-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
}
.mini-cal-label {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
  flex: 1;
  text-align: center;
}
.mini-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.625rem;
  height: 1.625rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: hsl(var(--muted-foreground));
  transition: background 0.1s, color 0.1s;
}
.mini-cal-nav:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }
.mini-cal-nav svg { width: 0.875rem; height: 0.875rem; }

.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
}
.mini-cal-weekday {
  height: 1.625rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.mini-cal-day {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: 1.875rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 400;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  color: hsl(var(--foreground));
  position: relative;
  font-variant-numeric: tabular-nums;
  transition: background 0.1s, color 0.1s;
}
.mini-cal-day:hover { background: hsl(var(--accent)); }
.mini-cal-day.is-outside { color: hsl(var(--muted-foreground) / 0.45); }
.mini-cal-day.is-today {
  background: hsl(var(--accent));
  font-weight: 600;
  color: hsl(var(--foreground));
}
.mini-cal-day.is-today:hover { background: hsl(var(--accent) / 0.8); }
.mini-cal-day.is-selected {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}
.mini-cal-day.is-selected:hover { background: hsl(var(--primary) / 0.92); }
.mini-cal-day.is-selected.is-today {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}
.mini-cal-day.has-demands:not(.is-selected)::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 3px;
  height: 3px;
  border-radius: 9999px;
  background: hsl(var(--primary));
}
.mini-cal-day.is-today.has-demands:not(.is-selected)::after {
  background: hsl(var(--foreground));
}

.mini-cal-today-btn {
  width: 100%;
  margin-top: 0.625rem;
  padding: 0.375rem 0.5rem;
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.mini-cal-today-btn:hover {
  background: hsl(var(--accent));
  color: hsl(var(--foreground));
}

/* ============================================
   CALENDAR FULLSCREEN — body sem scroll quando na rota /calendar
   (aplicado via classe no <body> pelo JS)
   ============================================ */
body.cal-fullscreen {
  overflow: hidden;
}
body.cal-fullscreen .main-content {
  overflow: hidden;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
body.cal-fullscreen .page-content {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ============================================
   CALENDAR MONTH V4 — Polish (2026-05-19)
   ============================================ */

/* Month meta (contagem total + atrasadas + sem prazo) */
.cal-month-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.25rem 0.375rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  position: relative;
}
.cal-month-meta-count {
  font-weight: 600;
}
.cal-month-meta-overdue {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background: hsl(0 84% 60% / 0.12);
  color: hsl(0 84% 50%);
  font-weight: 600;
}
.cal-month-meta-overdue::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: hsl(0 84% 55%);
}
.cal-month-meta-nodate {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.625rem;
  background: hsl(38 92% 50% / 0.14);
  border: 1px solid hsl(38 92% 50% / 0.3);
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  color: hsl(38 92% 45%);
  cursor: pointer;
  transition: all 0.12s;
}
.cal-month-meta-nodate:hover {
  background: hsl(38 92% 50% / 0.22);
  border-color: hsl(38 92% 50% / 0.5);
}
.cal-month-meta-nodate svg { color: hsl(38 92% 45%); }
.cal-month-meta-chev {
  transition: transform 0.15s;
}
.cal-month-meta-chev.open {
  transform: rotate(180deg);
}
.cal-no-date-drawer {
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.625rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
}
.cal-no-date-drawer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  align-items: center;
}
.cal-no-date-drawer-inner .cal-chip {
  max-width: 22rem;
}

/* Quick filter chips na toolbar */
.cal-quick-filters {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem;
  background: hsl(var(--muted) / 0.5);
  border-radius: 0.5rem;
}
.cal-quick-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: all 0.12s;
  white-space: nowrap;
}
.cal-quick-chip:hover {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
}
.cal-quick-chip.active {
  background: hsl(var(--background));
  color: hsl(var(--foreground));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  font-weight: 600;
}
.cal-quick-chip-overdue.active {
  color: hsl(0 84% 55%);
  background: hsl(0 84% 60% / 0.1);
}

/* Hoje destacado: borda primary inteira + número grande */
.cal-day-today-pill {
  display: inline-flex;
  align-items: center;
  height: 1.125rem;
  padding: 0 0.5rem;
  margin-left: 0.25rem;
  font-size: 0.5625rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: hsl(var(--primary-foreground));
  background: hsl(var(--primary));
  border-radius: 9999px;
  flex-shrink: 0;
  box-shadow: 0 1px 3px hsl(var(--primary) / 0.4);
}
.cal-grid-v3 .cal-day-today {
  background: hsl(var(--primary) / 0.05);
  box-shadow: inset 0 0 0 2px hsl(var(--primary));
  z-index: 1;
}
.cal-grid-v3 .cal-day-today .cal-day-number {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 700;
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  padding: 0;
}
.cal-grid-v3 .cal-day-today .cal-day-number:hover {
  background: hsl(var(--primary) / 0.85);
}

/* Dias passados sem destaque (background igual aos demais) */

/* Última coluna: popover abre à esquerda para não estourar viewport */
.cal-grid-v3 .cal-day .cal-popover { top: 100%; left: 0; right: auto; }
.cal-grid-v3 .cal-day-last-col .cal-popover { left: auto; right: 0; }

/* Remove o ::before duplicado de project-color que conflitava com border-left de prioridade */
.cal-grid-v3 .cal-chip[style*="--project-color"]::before { content: none; }

/* Status todo: cor sutil cinza-azulada (subtle distinction from default) */
.cal-grid-v3 .cal-chip-status-todo {
  background: hsl(var(--muted) / 0.7);
}

/* +N mais estilizado */
.cal-grid-v3 .cal-more {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.1875rem 0.5rem;
  margin-top: 0.125rem;
  background: hsl(var(--muted) / 0.6);
  border: 1px dashed hsl(var(--border));
  border-radius: 0.25rem;
  font-size: 0.625rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  align-self: flex-start;
  transition: all 0.12s;
}
.cal-grid-v3 .cal-more:hover {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  border-style: solid;
  border-color: hsl(var(--primary) / 0.5);
}
.cal-grid-v3 .cal-more svg { opacity: 0.7; }

/* Empty state quando o mês inteiro está sem demandas */
.cal-month-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 1rem;
  text-align: center;
  color: hsl(var(--muted-foreground));
  gap: 0.75rem;
}
.cal-month-empty svg { opacity: 0.4; }
.cal-month-empty p { font-size: 0.875rem; }

/* Drag-drop flash: highlight no card quando reagendado */
.cal-just-moved {
  animation: cal-just-moved-flash 1.2s ease-out;
}
@keyframes cal-just-moved-flash {
  0% { background: hsl(var(--primary) / 0.3); box-shadow: 0 0 0 2px hsl(var(--primary)); }
  100% { background: inherit; box-shadow: none; }
}

/* Click target maior na cal-events (não só na borda do cal-day) */
.cal-grid-v3 .cal-events {
  cursor: pointer;
}
.cal-grid-v3 .cal-events:hover { background: transparent; }
.cal-grid-v3 .cal-events .cal-chip { cursor: pointer; }

/* Click target dos cards do mês deve manter o pointer normal de card */
.cal-grid-v3 .cal-chip { cursor: pointer; }

/* Toolbar responsive: quick filters quebram em telas estreitas */
@media (max-width: 1024px) {
  .cal-quick-filters {
    order: 99;
    width: 100%;
    justify-content: center;
  }
}

/* ============================================
   CELEBRATE DONE — toast win + confete
   ============================================ */
.toast-win {
  background: linear-gradient(135deg, hsl(142 70% 45%) 0%, hsl(142 76% 38%) 100%);
  color: white;
  border: 1px solid hsl(142 70% 35%);
  box-shadow: 0 8px 24px hsl(142 70% 30% / 0.35);
  font-weight: 600;
  animation: toast-win-pop 0.4s ease-out;
}
.toast-win::before {
  content: '$';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: white;
  color: hsl(142 76% 36%);
  border-radius: 9999px;
  font-weight: 800;
  font-size: 1rem;
  margin-right: 0.5rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px hsl(142 76% 36% / 0.5);
}
.toast-win::after { background: white !important; }
.toast-win .btn-icon { color: white; opacity: 0.85; }
.toast-win .btn-icon:hover { opacity: 1; }
@keyframes toast-win-pop {
  0%   { transform: translateY(10px) scale(0.85); opacity: 0; }
  60%  { transform: translateY(0) scale(1.04); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

/* Confete que cai do topo central */
.cash-confetti {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 99999;
  overflow: hidden;
}
.cash-confetti-piece {
  position: absolute;
  top: -2rem;
  width: 0.625rem;
  height: 0.875rem;
  border-radius: 1px;
  opacity: 0.95;
  animation-name: cash-confetti-fall;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
  animation-fill-mode: forwards;
}
@keyframes cash-confetti-fall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0.6; }
}
@media (prefers-reduced-motion: reduce) {
  .cash-confetti, .toast-win { animation: none !important; }
  .cash-confetti-piece { display: none; }
}

/* ============================================
   WORKLOAD TIMELINE CHART (dashboard)
   ============================================ */
.workload-chart-card { padding: 1.25rem 1.5rem 1.5rem; }
.wt-header-meta {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
  margin: 0.5rem 0 0.75rem;
  flex-wrap: wrap;
}
.wt-current {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: hsl(var(--foreground));
}
.wt-current-label {
  font-size: 0.8125rem;
  color: hsl(var(--muted-foreground));
}
.wt-delta {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: 9999px;
  font-variant-numeric: tabular-nums;
}
.wt-delta-up   { color: hsl(142 70% 38%); background: hsl(142 70% 45% / 0.12); }
.wt-delta-down { color: hsl(0 84% 50%);  background: hsl(0 84% 60% / 0.12); }
.wt-delta-zero { color: hsl(var(--muted-foreground)); background: hsl(var(--muted) / 0.6); }
.wt-delta-arrow { font-size: 0.875rem; font-weight: 700; }

.wt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: 0.625rem;
}
.wt-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.625rem 0.1875rem 0.5rem;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.75rem;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  font-weight: 500;
}
.wt-legend-item:hover { background: hsl(var(--accent)); }
.wt-legend-item.is-hidden { opacity: 0.4; }
.wt-legend-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 9999px;
  flex-shrink: 0;
}
.wt-legend-name { font-weight: 500; }
.wt-legend-total {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
  padding: 0.0625rem 0.375rem;
  background: hsl(var(--card));
  border-radius: 9999px;
  min-width: 1rem;
  text-align: center;
}

.wt-container {
  height: 280px;
  width: 100%;
  position: relative;
}
.wt-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.875rem;
}
.wt-empty svg { opacity: 0.5; }

.wt-days-select { padding-right: 1.5rem; }

/* Hover destaque na série */
.wt-series { transition: opacity 0.18s; }
.workload-chart-card:has(.wt-series:hover) .wt-series:not(:hover) { opacity: 0.25; }

/* ============================================
   WORKLOAD CHART — HERO (full-width, primeiro card)
   ============================================ */
.workload-chart-card-hero {
  width: 100%;
  margin-bottom: 1.25rem;
  padding: 1.5rem 1.75rem;
}
.workload-chart-card-hero .wt-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.workload-chart-card-hero .wt-card-titles h3.section-title {
  font-size: 1.0625rem;
  font-weight: 600;
}
.workload-chart-card-hero .wt-card-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.workload-chart-card-hero .wt-card-controls .filter-select {
  height: 2rem;
  font-size: 0.8125rem;
}
.workload-chart-card-hero .wt-current { font-size: 2.25rem; }
.workload-chart-card-hero .wt-container { height: 320px; }

/* Tooltip do gráfico */
.wt-tooltip {
  position: absolute;
  z-index: 50;
  min-width: 13rem;
  max-width: 18rem;
  padding: 0.75rem 0.875rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
  font-size: 0.8125rem;
  pointer-events: none;
  animation: wt-tt-fadein 0.12s ease-out;
}
@keyframes wt-tt-fadein {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.wt-tt-row-zero { opacity: 0.45; }
.wt-tt-row-zero .wt-tt-name { color: hsl(var(--muted-foreground)); }
.wt-tt-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.375rem;
  margin-bottom: 0.375rem;
  border-bottom: 1px solid hsl(var(--border));
}
.wt-tt-day {
  font-weight: 600;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
}
.wt-tt-total {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  color: hsl(var(--primary));
  font-size: 0.875rem;
}
.wt-tt-rows {
  display: flex;
  flex-direction: column;
  gap: 0.1875rem;
}
.wt-tt-row {
  display: grid;
  grid-template-columns: 0.5rem 1fr auto;
  align-items: center;
  gap: 0.375rem;
}
.wt-tt-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.wt-tt-name {
  color: hsl(var(--foreground));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wt-tt-val {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
}
.wt-tt-empty {
  color: hsl(var(--muted-foreground));
  font-style: italic;
}

/* Hover dot destaque */
.wt-dot { transition: r 0.12s, stroke-width 0.12s; }
.wt-series:hover .wt-dot { r: 4; }

@media (max-width: 768px) {
  .workload-chart-card-hero { padding: 1rem 1rem; }
  .workload-chart-card-hero .wt-current { font-size: 1.75rem; }
  .workload-chart-card-hero .wt-container { height: 240px; }
}

/* ============================================
   WT DROPDOWN — shadcn-like (período + opções)
   ============================================ */
.wt-dropdown {
  position: relative;
  display: inline-block;
}
.wt-dropdown-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.4375rem;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  white-space: nowrap;
}
.wt-dropdown-trigger:hover {
  background: hsl(var(--accent));
  border-color: hsl(var(--accent-foreground) / 0.2);
}
.wt-dropdown-trigger svg:first-child { color: hsl(var(--muted-foreground)); }
.wt-dd-chev { color: hsl(var(--muted-foreground)); transition: transform 0.15s; margin-left: 0.125rem; }
.wt-dd-chev-open { transform: rotate(180deg); }

.wt-dropdown-menu {
  position: absolute;
  top: calc(100% + 0.375rem);
  right: 0;
  min-width: 16rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
  z-index: 60;
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
}
.wt-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.4375rem 0.625rem;
  background: transparent;
  border: none;
  border-radius: 0.375rem;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  cursor: pointer;
  text-align: left;
  font-weight: 500;
  transition: background 0.1s;
}
.wt-dropdown-item:hover { background: hsl(var(--accent)); }
.wt-dropdown-item.active {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
  font-weight: 600;
}
.wt-dropdown-item.active::after {
  content: '✓';
  color: hsl(var(--primary));
  font-weight: 700;
  font-size: 0.875rem;
}
.wt-dropdown-hint {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}
.wt-dropdown-divider {
  height: 1px;
  background: hsl(var(--border));
  margin: 0.25rem 0;
}
.wt-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4375rem 0.625rem;
  font-size: 0.8125rem;
  color: hsl(var(--foreground));
  cursor: pointer;
  font-weight: 500;
  border-radius: 0.375rem;
}
.wt-dropdown-toggle:hover { background: hsl(var(--accent)); }
.wt-dropdown-toggle input { accent-color: hsl(var(--primary)); }

/* Esconde o select antigo se ainda existir em algum lugar */
.wt-days-select { display: none; }

/* Custom date range dentro do dropdown */
.wt-dropdown-custom {
  display: flex;
  flex-direction: column;
  gap: 0.4375rem;
  padding: 0.5rem 0.625rem 0.625rem;
  margin: 0.125rem 0;
  background: hsl(var(--muted) / 0.4);
  border-radius: 0.375rem;
}
.wt-dropdown-custom-row {
  display: grid;
  grid-template-columns: 2rem 1fr;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.wt-date-input {
  height: 1.875rem;
  padding: 0 0.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.3125rem;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  font-family: inherit;
  width: 100%;
  color-scheme: dark light;
}
.wt-date-input:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.25);
}
.wt-custom-apply {
  height: 1.875rem;
  margin-top: 0.125rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border: none;
  border-radius: 0.3125rem;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.wt-custom-apply:hover:not(:disabled) { background: hsl(var(--primary) / 0.9); }
.wt-custom-apply:disabled { opacity: 0.45; cursor: not-allowed; }

/* ============================================
   SKELETON LOADING — reusável
   ============================================ */
.skeleton {
  display: inline-block;
  background: linear-gradient(
    90deg,
    hsl(var(--muted) / 0.6) 0%,
    hsl(var(--muted) / 0.95) 50%,
    hsl(var(--muted) / 0.6) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 0.375rem;
  color: transparent;
  user-select: none;
  pointer-events: none;
}
@keyframes skeleton-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton-line { height: 0.875rem; width: 100%; }
.skeleton-line-sm { height: 0.625rem; }
.skeleton-line-lg { height: 1.25rem; }
.skeleton-line-xl { height: 2rem; }
.skeleton-circle { border-radius: 9999px; aspect-ratio: 1; width: 2rem; height: 2rem; }
.skeleton-pill { border-radius: 9999px; height: 1.5rem; width: 5rem; }
.skeleton-block { height: 4rem; width: 100%; border-radius: 0.5rem; }

@media (prefers-reduced-motion: reduce) {
  .skeleton { animation-duration: 0s; background: hsl(var(--muted) / 0.7); }
}

/* Skeleton específico do chart workload */
.wt-skeleton {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem 2.5rem 1.5rem;
  pointer-events: none;
}
.wt-skeleton-bar {
  height: 1px;
  background: hsl(var(--border) / 0.5);
}
.wt-skeleton-curve {
  height: 70%;
  width: 100%;
  position: relative;
  background:
    radial-gradient(ellipse at 25% 30%, hsl(var(--muted) / 0.6) 0%, transparent 50%),
    radial-gradient(ellipse at 65% 60%, hsl(var(--muted) / 0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 40%, hsl(var(--muted) / 0.5) 0%, transparent 50%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.8s ease-in-out infinite;
  border-radius: 0.5rem;
}

/* Page-level loading overlay (para outras seções) */
.page-skeleton {
  display: grid;
  gap: 1rem;
  padding: 1rem 0;
}
.page-skeleton-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.wt-legend-skeleton {
  display: flex;
  gap: 0.375rem;
}
.wt-legend-skeleton .skeleton-pill {
  width: 5.5rem;
  height: 1.625rem;
}

/* Skeleton no wt-current grandão */
.wt-current.skeleton-line-xl {
  display: inline-block;
  min-width: 3rem;
  height: 2.25rem !important;
  vertical-align: middle;
}

/* Page-level skeleton para outras páginas */
body.page-loading .main-content > * {
  /* opcional: dim conteúdo enquanto carrega */
}
.page-skeleton-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}
.page-skeleton-stat {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* ============================================
   SZ DATEPICKER — shadcn-like
   ============================================ */
.sz-datepicker { position: relative; display: inline-block; width: 100%; }
.sz-datepicker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  width: 100%;
  height: 1.875rem;
  padding: 0 0.5rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.3125rem;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  line-height: 1.2;
}
.sz-datepicker-trigger span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  flex: 1;
}
.sz-datepicker-trigger:hover { border-color: hsl(var(--primary) / 0.5); }
.sz-datepicker-trigger.is-empty { color: hsl(var(--muted-foreground)); }
.sz-datepicker-trigger svg { color: hsl(var(--muted-foreground)); flex-shrink: 0; }

.sz-datepicker-pop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  padding: 0.625rem;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 4px 12px rgba(0,0,0,0.25);
  width: 16rem;
}
.sz-dp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.sz-dp-month {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  text-transform: capitalize;
}
.sz-dp-nav {
  width: 1.5rem;
  height: 1.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.3125rem;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: background 0.1s;
}
.sz-dp-nav:hover { background: hsl(var(--accent)); }

.sz-dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.125rem;
}
.sz-dp-wd {
  text-align: center;
  font-size: 0.625rem;
  font-weight: 600;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem 0;
  text-transform: uppercase;
}
.sz-dp-day {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.75rem;
  background: transparent;
  border: none;
  border-radius: 0.3125rem;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 0.1s, color 0.1s;
  font-family: inherit;
}
.sz-dp-day:hover:not(.is-disabled) { background: hsl(var(--accent)); }
.sz-dp-day.is-outside { color: hsl(var(--muted-foreground) / 0.45); }
.sz-dp-day.is-today { font-weight: 700; color: hsl(var(--primary)); }
.sz-dp-day.is-selected {
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-weight: 600;
}
.sz-dp-day.is-selected:hover { background: hsl(var(--primary) / 0.9); }
.sz-dp-day.is-disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* ============================================
   KF SHEET — filtro multi-select shadcn-like
   ============================================ */
/* Sheet como POPOVER fixed compacto (posição calculada via JS) */
.kf-sheet {
  position: fixed;
  width: 26rem;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  z-index: 80;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.3);
}
.kf-sheet::-webkit-scrollbar { width: 6px; }
.kf-sheet::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 3px; }
.kf-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 1px solid hsl(var(--border));
  background: hsl(var(--muted) / 0.3);
}
.kf-sheet-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
}
.kf-sheet-title svg { color: hsl(var(--muted-foreground)); }
.kf-sheet-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4375rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 700;
}
.kf-sheet-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.kf-btn-ghost {
  padding: 0.25rem 0.625rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.kf-btn-ghost:hover {
  background: hsl(var(--destructive) / 0.1);
  color: hsl(var(--destructive));
  border-color: hsl(var(--destructive) / 0.4);
}
.kf-btn-close {
  width: 1.75rem;
  height: 1.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: background 0.12s;
}
.kf-btn-close:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

/* Search row */
.kf-search-row {
  padding: 0.75rem 1rem 0;
}
.kf-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.75rem;
  height: 2.25rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  transition: border-color 0.12s;
}
.kf-search:focus-within { border-color: hsl(var(--primary)); box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15); }
.kf-search svg { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.kf-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: hsl(var(--foreground));
  font-size: 0.875rem;
  font-family: inherit;
}
.kf-search input::placeholder { color: hsl(var(--muted-foreground)); }
.kf-search-clear {
  width: 1.25rem;
  height: 1.25rem;
  border: none;
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
  border-radius: 9999px;
  cursor: pointer;
  font-size: 0.875rem;
  line-height: 1;
}
.kf-search-clear:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); }

/* Body com sections — layout compacto popover */
.kf-sheet-body {
  padding: 0.625rem 0.875rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.kf-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.kf-col-flex { flex: 1; min-width: 0; }
.kf-col-fixed-prio { flex: 1; min-width: 0; }
.kf-col-fixed-origem { flex: 0 0 auto; }
.kf-section {
  display: flex;
  flex-direction: column;
  gap: 0.3125rem;
}
.kf-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.kf-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: hsl(var(--muted-foreground));
}
.kf-section-actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.kf-link {
  background: transparent;
  border: none;
  padding: 0;
  color: hsl(var(--primary));
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
  transition: text-decoration-color 0.12s;
}
.kf-link:hover { text-decoration-color: hsl(var(--primary)); }

.kf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  padding: 0.1875rem 0.5rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  transition: all 0.12s;
}
.kf-toggle:hover { background: hsl(var(--accent)); }
.kf-toggle::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted));
  border: 1px solid hsl(var(--border));
}
.kf-toggle.kf-toggle-on {
  background: hsl(var(--primary) / 0.12);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.45);
}
.kf-toggle.kf-toggle-on::before {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}

/* Chips */
.kf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.kf-chips-scroll {
  max-height: 9rem;
  overflow-y: auto;
  padding: 0.0625rem;
}
.kf-multi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 0.375rem;
}
.kf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3125rem 0.625rem;
  background: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  color: hsl(var(--foreground));
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.kf-chip:hover { background: hsl(var(--accent)); border-color: hsl(var(--accent-foreground) / 0.2); }
.kf-chip-on {
  background: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
  border-color: hsl(var(--primary) / 0.5);
  font-weight: 600;
}
.kf-chip-on:hover { background: hsl(var(--primary) / 0.2); }
.kf-chip-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--muted-foreground));
  flex-shrink: 0;
}
.kf-chip-prio-urgent .kf-chip-dot { background: hsl(0 84% 55%); }
.kf-chip-prio-high   .kf-chip-dot { background: hsl(25 95% 50%); }
.kf-chip-prio-normal .kf-chip-dot { background: hsl(217 91% 60%); }
.kf-chip-prio-low    .kf-chip-dot { background: hsl(var(--muted-foreground) / 0.6); }

/* Assignee chip — com avatar */
.kf-chip-assignee {
  justify-content: flex-start;
  padding: 0.25rem 0.625rem 0.25rem 0.25rem;
}
.kf-chip-avatar {
  width: 1.375rem;
  height: 1.375rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.625rem;
  font-weight: 700;
  color: white;
  background: hsl(var(--muted-foreground));
  object-fit: cover;
  flex-shrink: 0;
}
.kf-chip-avatar-0 { background: hsl(142 69% 35%); }
.kf-chip-avatar-1 { background: hsl(217 91% 50%); }
.kf-chip-avatar-2 { background: hsl(263 70% 50%); }
.kf-chip-avatar-3 { background: hsl(38 92% 45%); }
.kf-chip-avatar-4 { background: hsl(330 80% 50%); }
.kf-chip-avatar-5 { background: hsl(174 72% 40%); }

/* Label chip */
.kf-chip-label.kf-chip-on {
  background: color-mix(in srgb, var(--lb-color, hsl(var(--primary))) 18%, transparent);
  border-color: color-mix(in srgb, var(--lb-color, hsl(var(--primary))) 55%, transparent);
  color: var(--lb-color, hsl(var(--primary)));
}

/* Período custom range */
.kf-section-due { gap: 0.4375rem; }
.kf-due-range {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: nowrap;
}
.kf-due-range .sz-datepicker {
  width: auto;
  flex: 0 0 9rem;
}
.kf-due-trigger { height: 1.75rem; font-size: 0.6875rem; }
.kf-due-label {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.kf-due-sep { color: hsl(var(--muted-foreground)); font-weight: 600; }
.kf-due-trigger {
  width: 9.5rem;
}

@media (max-width: 768px) {
  .kf-sheet-body { padding: 0.75rem 0.875rem 1rem; }
  .kf-multi-grid { grid-template-columns: 1fr 1fr; }
  .kf-due-range { flex-direction: column; align-items: stretch; }
}

/* Chip versão small (kf-chip-sm) — usado no sheet compacto */
.kf-chip-sm {
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  gap: 0.3125rem;
  height: 1.5rem;
}
.kf-chip-sm.kf-chip-assignee {
  padding: 0.125rem 0.5rem 0.125rem 0.125rem;
}
.kf-chip-sm .kf-chip-avatar {
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.5625rem;
}
.kf-chip-sm .kf-chip-dot {
  width: 0.375rem;
  height: 0.375rem;
}
.kf-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3125rem;
  max-height: 6rem;
  overflow-y: auto;
  padding: 0.0625rem;
}
.kf-chips-wrap::-webkit-scrollbar { width: 4px; }
.kf-chips-wrap::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 2px; }

/* Due line: presets em 1 linha que rola horizontalmente se passar */
.kf-due-line {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.kf-due-presets {
  display: flex;
  gap: 0.3125rem;
  flex-wrap: wrap;
}

/* Compactar section-label */
.kf-sheet-body .kf-section-label { font-size: 0.625rem; }

/* Header mais compacto */
.kf-sheet-header { padding: 0.625rem 1rem; }
.kf-sheet-title { font-size: 0.8125rem; }
.kf-search-row { padding: 0.625rem 1rem 0; }
.kf-search { height: 2rem; font-size: 0.8125rem; }
.kf-search input { font-size: 0.8125rem; }

/* Mobile / responsive */
@media (max-width: 900px) {
  .kf-row { flex-direction: column; gap: 0.625rem; }
  .kf-col-fixed-prio, .kf-col-fixed-origem { min-width: 0; width: 100%; }
}

/* Badge de contagem no botão "Filtros" */
.kf-trigger-wrap { position: relative; display: inline-block; }
.filter-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem;
  height: 1.125rem;
  padding: 0 0.375rem;
  margin-left: 0.25rem;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ============================================
   KPI BAR V3 — chip-style sutil, estilo Linear
   ============================================ */
.kpi-bar-v2 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.5rem 0 0.625rem;
  margin-bottom: 0.25rem;
}
.kpi-divider {
  width: 1px;
  height: 1.5rem;
  background: hsl(var(--border));
  margin: 0 0.1875rem;
}

/* Summary "Total" — inline elegante, sem caixa pesada */
.kpi-summary {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
}
.kpi-summary:hover { background: hsl(var(--accent) / 0.5); }
.kpi-summary.active {
  background: hsl(var(--accent));
  border-color: hsl(var(--border));
}
.kpi-summary-num {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: hsl(var(--foreground));
}
.kpi-summary-label {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* KPI chips — horizontais, leves, estilo Linear */
.kpi-card {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.6875rem 0.3125rem 0.5rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.12s;
  font-family: inherit;
  white-space: nowrap;
}
.kpi-card:hover {
  background: hsl(var(--accent) / 0.5);
}
.kpi-card-icon {
  width: 0.9375rem;
  height: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
}
.kpi-card-body {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3125rem;
  line-height: 1.1;
}
.kpi-card-count {
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: hsl(var(--foreground));
}
.kpi-card-label {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

/* Variantes — só colorem icone + count, label fica neutro */
.kpi-card-danger  .kpi-card-icon, .kpi-card-danger  .kpi-card-count { color: hsl(0 84% 60%); }
.kpi-card-warning .kpi-card-icon, .kpi-card-warning .kpi-card-count { color: hsl(25 95% 55%); }
.kpi-card-primary .kpi-card-icon, .kpi-card-primary .kpi-card-count { color: hsl(var(--primary)); }
.kpi-card-info    .kpi-card-icon, .kpi-card-info    .kpi-card-count { color: hsl(217 91% 60%); }

/* Estado active — borda colorida + bg tint sutil */
.kpi-card.active { border-color: currentColor; }
.kpi-card-danger.active  { color: hsl(0 84% 60%); background: hsl(0 84% 60% / 0.1); }
.kpi-card-warning.active { color: hsl(25 95% 55%); background: hsl(25 95% 55% / 0.1); }
.kpi-card-primary.active { color: hsl(var(--primary)); background: hsl(var(--primary) / 0.1); }
.kpi-card-info.active    { color: hsl(217 91% 60%); background: hsl(217 91% 60% / 0.1); }
.kpi-card-muted.active   { background: hsl(var(--accent)); border-color: hsl(var(--border)); }
.kpi-card.active .kpi-card-label { color: inherit; font-weight: 600; }
.kpi-card.active .kpi-card-count { color: inherit; }

@media (max-width: 768px) {
  .kpi-bar-v2 { gap: 0.3125rem; }
  .kpi-card { padding: 0.25rem 0.5rem 0.25rem 0.375rem; }
}

/* ============================================
   DASHBOARD — RESPONSIVE
   ============================================ */

/* Stats grid com 4 colunas fixas no desktop, encolhe progressivo */
.stats-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) {
  .stats-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 400px) {
  .stats-grid-4 { grid-template-columns: 1fr; }
}

/* Cards de stat — encolhe padding/fonte em mobile */
@media (max-width: 640px) {
  .stat-card-v2 { padding: 0.875rem; gap: 0.625rem; }
  .stat-card-v2 .stat-value { font-size: 1.5rem; }
  .stat-card-v2 .stat-label { font-size: 0.6875rem; }
  .stat-card-v2 .stat-icon { width: 2rem; height: 2rem; flex-shrink: 0; }
  .stat-card-v2 .stat-icon svg { width: 16px; height: 16px; }
  .stat-card-v2 .stat-info { min-width: 0; }
  .stat-card-v2 .stat-value,
  .stat-card-v2 .stat-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Header do card hero do chart — empilha em mobile */
@media (max-width: 768px) {
  .workload-chart-card-hero { padding: 1rem 1rem; }
  .workload-chart-card-hero .wt-card-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.625rem;
  }
  .workload-chart-card-hero .wt-card-controls {
    width: 100%;
    justify-content: flex-start;
  }
  .workload-chart-card-hero .wt-card-controls .btn-group {
    flex: 1;
    min-width: 0;
    display: flex;
  }
  .workload-chart-card-hero .wt-card-controls .btn-group .btn-group-item {
    flex: 1;
    min-width: 0;
    padding: 0.4375rem 0.375rem;
    font-size: 0.75rem;
    text-align: center;
  }
  .workload-chart-card-hero .wt-dropdown { flex-shrink: 0; }
  .workload-chart-card-hero .wt-dropdown-trigger {
    padding: 0.4375rem 0.625rem;
    font-size: 0.75rem;
  }
  .workload-chart-card-hero .wt-current { font-size: 1.75rem; }
  .workload-chart-card-hero .wt-container { height: 240px; }
  .workload-chart-card-hero .wt-container svg { height: 240px; }
}

/* Donut + legenda — empilha em mobile */
@media (max-width: 640px) {
  .donut-container {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }
  .donut-svg { width: 8rem; height: 8rem; }
  .donut-legend { width: 100%; }
}

/* Quick actions — em tela muito pequena vira 1 coluna */
@media (max-width: 360px) {
  .quick-actions { grid-template-columns: 1fr; }
  .quick-action { padding: 0.75rem 1rem; }
}

/* External widget — stats encolhe melhor */
@media (max-width: 480px) {
  .external-widget-header { flex-direction: column; align-items: flex-start; gap: 0.375rem; }
  .external-widget-value { font-size: 1.0625rem; }
  .external-widget-label { font-size: 0.625rem; }
}

/* Data table no card recentes — controle de overflow */
@media (max-width: 640px) {
  .card-padded .data-table { font-size: 0.75rem; }
  .card-padded .data-table th,
  .card-padded .data-table td { padding: 0.5rem 0.375rem; }
  .card-padded .data-table th:nth-child(3),
  .card-padded .data-table td:nth-child(3),
  .card-padded .data-table th:nth-child(4),
  .card-padded .data-table td:nth-child(4) {
    display: none;
  }
}

/* Dash-hero — encolhe título em mobile */
@media (max-width: 640px) {
  .dash-greeting { font-size: 1.25rem; }
  .dash-summary { font-size: 0.875rem; }
}

/* Garantir que cards e seus filhos não estouram */
.card { min-width: 0; }
.card-padded { min-width: 0; }
.dash-grid > * { min-width: 0; }

/* Overdue alert empilha em mobile */
@media (max-width: 560px) {
  .overdue-alert { flex-wrap: wrap; gap: 0.5rem; }
  .overdue-alert .btn { margin-left: 0 !important; width: 100%; }
}

/* Workload item — texto encolhe */
@media (max-width: 640px) {
  .workload-item .workload-name { min-width: 0; flex: 0 0 6rem; }
  .workload-item .workload-name .truncate { font-size: 0.75rem; }
}

/* Heatmap — labels mais legíveis em mobile */
@media (max-width: 480px) {
  .heatmap-row { gap: 2px; }
  .heatmap-label { font-size: 0.4375rem; }
}

/* Topbar — ajustes mobile */
@media (max-width: 480px) {
  .topbar { padding: 0 0.75rem; }
  .topbar-title { font-size: 0.9375rem; }
  .topbar .btn .kbd { display: none; }
  .topbar .btn-primary { padding: 0.375rem 0.5rem; font-size: 0.75rem; }
}

/* ============================================
   EVOLUTIONS CARD — Resumo executivo Claude-powered
   ============================================ */
.evolutions-card {
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, hsl(var(--card)), hsl(var(--card) / 0.95));
  border: 1px solid hsl(var(--border));
  position: relative;
  overflow: hidden;
}
.evolutions-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, hsl(var(--primary)), hsl(265 70% 60%), hsl(217 91% 60%), hsl(var(--primary)));
  background-size: 300% 100%;
  animation: evo-shimmer 6s linear infinite;
}
@keyframes evo-shimmer {
  0% { background-position: 0% 0; }
  100% { background-position: -300% 0; }
}

.evo-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.evo-header-left { flex: 1; min-width: 0; }
.evo-header-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.evo-spin { animation: sz-spin 0.8s linear infinite; }

.evo-skeleton { padding: 0.5rem 0; }
.evo-skeleton .skeleton { background: hsl(var(--muted) / 0.5); }

.evo-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  color: hsl(var(--muted-foreground));
  text-align: center;
}
.evo-empty p { margin: 0; font-size: 0.875rem; }

.evo-fallback {
  padding: 0.75rem 1rem;
  background: hsl(38 92% 50% / 0.1);
  border: 1px solid hsl(38 92% 50% / 0.3);
  border-radius: 0.5rem;
  color: hsl(38 92% 55%);
  font-size: 0.8125rem;
  margin-bottom: 1rem;
}

.evo-body { display: flex; flex-direction: column; gap: 1rem; }

.evo-headline {
  font-size: 1.0625rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  line-height: 1.4;
  padding: 0.625rem 0.875rem;
  background: linear-gradient(180deg, hsl(var(--primary) / 0.08), hsl(var(--primary) / 0.04));
  border-left: 3px solid hsl(var(--primary));
  border-radius: 0.375rem;
}
.evo-narrativa {
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(var(--muted-foreground));
  margin: 0;
}

/* AreaChart — distribuição do esforço por frente ao longo do período */
.evo-chart-card {
  margin: 0.5rem 0;
  padding: 0.875rem 1rem 0.5rem;
  background: hsl(var(--muted) / 0.2);
  border: 1px solid hsl(var(--border) / 0.7);
  border-radius: 0.5rem;
}
.evo-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}
.evo-chart-header .evo-section-label { margin-bottom: 0; }
.evo-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
}
.evo-chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  background: hsl(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  color: hsl(var(--foreground));
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
  font-family: inherit;
}
.evo-chart-legend-item:hover { background: hsl(var(--muted) / 0.6); }
.evo-chart-legend-item.is-off { opacity: 0.35; }
.evo-chart-legend-item.is-off .evo-chart-legend-dot { opacity: 0.5; }
.evo-chart-legend-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
}
.evo-chart-legend-name { font-weight: 500; }
.evo-chart-legend-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--muted-foreground));
  font-size: 0.625rem;
}
.evo-chart-container {
  position: relative;
  width: 100%;
}
.evo-chart-container svg { width: 100%; }

/* Grid de frentes (legado — 2 cols, ainda usado em estados especiais) */
.evo-frentes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin: 0.5rem 0;
}

/* Grid compacto: cards-tile menores, focados em só header */
.evo-frentes-grid-compact {
  grid-template-columns: repeat(3, 1fr);
}
.evo-frente-tile {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.75rem 0.875rem;
  background: hsl(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  text-align: left;
  font-family: inherit;
  color: hsl(var(--foreground));
}
.evo-frente-tile:hover {
  border-color: hsl(var(--primary) / 0.45);
  background: hsl(var(--muted) / 0.5);
  transform: translateY(-1px);
}
.evo-frente-tile .evo-frente-icon {
  width: 1.5rem;
  height: 1.5rem;
  color: hsl(var(--primary));
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.evo-frente-tile .evo-frente-icon svg { width: 100%; height: 100%; }
.evo-frente-tile-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
}
.evo-frente-tile-body .evo-frente-name {
  font-size: 0.8125rem;
  font-weight: 600;
  color: hsl(var(--foreground));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
.evo-frente-tile-sub {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  font-weight: 400;
}
.evo-frente-tile .evo-frente-count {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.1875rem 0.5rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
  flex-shrink: 0;
}

/* Destaques dentro do modal */
.evo-modal-highlights {
  padding: 0.75rem 0.875rem;
  background: linear-gradient(180deg, hsl(var(--primary) / 0.06), hsl(var(--primary) / 0.02));
  border: 1px solid hsl(var(--primary) / 0.18);
  border-radius: 0.5rem;
  margin-bottom: 1rem;
}
.evo-modal-highlights-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.evo-modal-highlights-head .evo-frente-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: hsl(var(--primary));
  display: inline-flex;
}
.evo-modal-highlights-head .evo-frente-icon svg { width: 100%; height: 100%; }
.evo-modal-highlights .evo-frente-list li {
  font-size: 0.8125rem;
  color: hsl(var(--foreground) / 0.95);
  line-height: 1.55;
  padding-left: 0.875rem;
}

.evo-frente {
  background: hsl(var(--muted) / 0.3);
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s, transform 0.15s, background 0.15s;
  cursor: pointer;
}
.evo-frente:hover {
  border-color: hsl(var(--primary) / 0.4);
  transform: translateY(-1px);
  background: hsl(var(--muted) / 0.45);
}
.evo-frente:hover .evo-frente-foot-hint { color: hsl(var(--primary)); }
.evo-frente-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
}
.evo-frente-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: hsl(var(--primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.evo-frente-icon svg { width: 100%; height: 100%; }
.evo-frente-name {
  flex: 1;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.evo-frente-count {
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 0.125rem 0.4375rem;
  border-radius: 9999px;
  background: hsl(var(--primary) / 0.15);
  color: hsl(var(--primary));
  min-width: 1.5rem;
  text-align: center;
}
.evo-frente-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.evo-frente-list li {
  font-size: 0.75rem;
  color: hsl(var(--foreground) / 0.85);
  line-height: 1.45;
  padding-left: 0.625rem;
  position: relative;
}
.evo-frente-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 0.25rem;
  height: 0.25rem;
  background: hsl(var(--primary));
  border-radius: 9999px;
}
.evo-frente-foot {
  margin-top: 0.25rem;
  padding-top: 0.5rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.evo-frente-foot-hint {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground) / 0.8);
  transition: color 0.15s;
}

.evo-actions {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}
.evo-open-list { padding: 0.5rem 1rem; }

/* Modal de lista detalhada */
.evo-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.evo-modal-content {
  width: 100%;
  max-width: 56rem;
  max-height: 85vh;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: 0.75rem;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 8px 20px rgba(0, 0, 0, 0.3);
}
.evo-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 0.875rem;
  border-bottom: 1px solid hsl(var(--border));
}
.evo-modal-title h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.125rem;
  color: hsl(var(--foreground));
}
.evo-modal-sub {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin: 0;
}
.evo-modal-actions {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  flex-shrink: 0;
}
.evo-modal-body {
  overflow-y: auto;
  padding: 1rem 1.25rem;
  flex: 1;
  scrollbar-width: thin;
}
.evo-modal-body::-webkit-scrollbar { width: 6px; }
.evo-modal-body::-webkit-scrollbar-thumb { background: hsl(var(--muted-foreground) / 0.3); border-radius: 3px; }

.evo-section-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.5rem;
}
.evo-contributors {
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid hsl(var(--border) / 0.5);
}
.evo-contributors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.evo-contributor {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.3125rem 0.625rem;
  background: hsl(var(--muted) / 0.4);
  border: 1px solid hsl(var(--border));
  border-radius: 9999px;
  font-size: 0.75rem;
}
.evo-contributor-name { font-weight: 500; color: hsl(var(--foreground)); }
.evo-contributor-count {
  color: hsl(var(--muted-foreground));
  font-size: 0.6875rem;
}

.evo-list-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.4375rem;
  padding: 0.4375rem 0.75rem;
  background: transparent;
  border: 1px solid hsl(var(--border));
  border-radius: 0.375rem;
  color: hsl(var(--muted-foreground));
  font-size: 0.8125rem;
  cursor: pointer;
  margin-top: 0.5rem;
  align-self: flex-start;
  transition: all 0.15s;
}
.evo-list-toggle:hover {
  border-color: hsl(var(--primary) / 0.5);
  color: hsl(var(--foreground));
}
.evo-chev { transition: transform 0.2s; }
.evo-chev.evo-chev-open { transform: rotate(180deg); }

.evo-detailed-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 0.5rem;
}
.evo-list-section {}
.evo-list-section-title {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: hsl(var(--muted-foreground));
  margin-bottom: 0.375rem;
}
.evo-list-row {
  display: grid;
  grid-template-columns: 3.5rem 1fr auto auto;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4375rem 0.625rem;
  border-radius: 0.375rem;
  text-decoration: none;
  color: hsl(var(--foreground));
  font-size: 0.8125rem;
  transition: background 0.15s;
}
.evo-list-row:hover { background: hsl(var(--accent)); }
.evo-row-num {
  font-family: monospace;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}
.evo-row-title {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.evo-row-by {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
}
.evo-row-prio { font-size: 0.625rem !important; }

/* Responsividade */
@media (max-width: 900px) {
  .evo-frentes-grid-compact { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .evo-frentes-grid,
  .evo-frentes-grid-compact { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .evo-list-row {
    grid-template-columns: 1fr;
    gap: 0.25rem;
  }
  .evo-row-num { font-size: 0.625rem; }
  .evo-modal-content { max-height: 95vh; }
  .evo-modal-header { padding: 0.75rem 1rem; }
  .evo-modal-body { padding: 0.75rem 1rem; }
}

/* Fonte stamp do snapshot */
.evo-stamp {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  margin-left: 0.5rem;
  padding-left: 0.5rem;
  border-left: 1px solid hsl(var(--border));
}
.evo-stamp-stale {
  color: hsl(38 92% 55%);
}