/* ═══════════════════════════════════════════════════════════════
   PUBLIEXPRESS v2 — DESIGN SYSTEM (Google Workspace Style)
   Tipografia: Plus Jakarta Sans + Outfit (Google Sans equivalente)
   Paleta: Branco limpo + Laranja PubliExpress
═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Outfit:wght@400;500;600;700;800;900&display=swap');

/* ─── TOKENS ─────────────────────────────────────────────────── */
:root {
  --brand:        #f97316;
  --brand-dark:   #ea6c0a;
  --brand-light:  #fff7ed;
  --brand-glow:   rgba(249,115,22,0.18);

  --white:        #ffffff;
  --surface:      #f8f9fa;       /* Google's exact light gray */
  --surface-2:    #f1f3f4;       /* Google's card bg on dark surface */
  --border:       #e8eaed;       /* Google's border color */
  --border-hover: #dadce0;

  --text-primary:   #202124;     /* Google's main text */
  --text-secondary: #5f6368;     /* Google's secondary text */
  --text-hint:      #80868b;     /* Google's hint text */

  --shadow-1: 0 1px 2px 0 rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --shadow-2: 0 1px 2px 0 rgba(60,64,67,.3), 0 2px 6px 2px rgba(60,64,67,.15);
  --shadow-3: 0 4px 8px 3px rgba(60,64,67,.15), 0 1px 3px rgba(60,64,67,.3);

  --radius-sm:  8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;

  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-google: cubic-bezier(0.4, 0, 0.2, 1);   /* Material motion */
}

/* ─── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Plus Jakarta Sans', 'Google Sans', Roboto, Arial, sans-serif;
  background-color: var(--surface);
  color: var(--text-primary);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.brand-font {
  font-family: 'Outfit', 'Google Sans', Roboto, Arial, sans-serif;
  letter-spacing: -0.01em;
}

/* ─── SCROLLBAR (Google-style) ───────────────────────────────── */
.no-scrollbar            { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: #bdc1c6; background-clip: content-box; }

/* Custom scrollbar alias */
.custom-scrollbar::-webkit-scrollbar { width: 6px; }
.custom-scrollbar::-webkit-scrollbar-track { background: transparent; }
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #dadce0;
  border-radius: 999px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover { background: var(--brand); }

/* ─── HEADER — Google Workspace style ───────────────────────── */
.light-header {
  background: rgba(255,255,255,0.95);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 1px 0 0 var(--border);
  position: relative;
  z-index: 100;
}

/* ─── PAGE LOAD — Fade-in suave ──────────────────────────────── */
@keyframes gws-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gws-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes gws-scale-in {
  from { opacity: 0; transform: scale(0.97); }
  to   { opacity: 1; transform: scale(1); }
}

/* ─── KANBAN COLUMN — Clean Google Card style ───────────────── */
.kanban-column-light {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-1);
  transition: box-shadow 0.2s var(--ease-google), border-color 0.2s var(--ease-google);
  animation: gws-slide-up 0.4s var(--ease-spring) both;
}

.kanban-column-light:hover {
  box-shadow: var(--shadow-2);
  border-color: var(--border-hover);
}

/* ─── KANBAN CARD — Premium Google style ────────────────────── */
.publi-card-light {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px 0 rgba(60,64,67,.2);
  transition:
    box-shadow 0.2s var(--ease-google),
    transform  0.2s var(--ease-google),
    border-color 0.2s var(--ease-google);
  position: relative;
  overflow: hidden;
  will-change: transform;
}

.publi-card-light:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-3);
  border-color: var(--border-hover);
}

/* Linha de cor da marca no hover */
.publi-card-light::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, var(--brand), #fb923c);
  opacity: 0;
  transition: opacity 0.2s var(--ease-google);
}
.publi-card-light:hover::before { opacity: 1; }

/* Zoom da imagem de capa */
.publi-card-light img {
  transition: transform 0.3s var(--ease-google);
  will-change: transform;
}
.publi-card-light:hover img { transform: scale(1.03); }

/* ─── CARD STATUS CLASSES (Kanban por coluna) ────────────────── */
.card-afazer,
.card-desenvolvimento,
.card-correcao,
.card-concluido {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border) !important;
  transition:
    box-shadow   0.25s var(--ease-google),
    border-color 0.25s var(--ease-google),
    transform    0.2s  var(--ease-google);
}

/* Status band default */
.card-afazer      .card-status-band { background: #e8f0fe; }
.card-desenvolvimento .card-status-band { background: #e9d9ff; }
.card-correcao    .card-status-band { background: #fce8e6; }
.card-concluido   .card-status-band { background: #e6f4ea; }

.card-afazer      .card-status-band .status-dot { background: #1a73e8; }
.card-desenvolvimento .card-status-band .status-dot { background: #7c3aed; }
.card-correcao    .card-status-band .status-dot { background: #d93025; }
.card-concluido   .card-status-band .status-dot { background: #1e8e3e; }

.card-afazer      .card-status-band .status-label { color: #1a73e8; }
.card-desenvolvimento .card-status-band .status-label { color: #7c3aed; }
.card-correcao    .card-status-band .status-label { color: #d93025; }
.card-concluido   .card-status-band .status-label { color: #1e8e3e; }

/* Hover — Google material lift */
.card-afazer:hover {
  border-color: #1a73e8 !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(26,115,232,.2) !important;
  transform: translateY(-2px);
}
.card-desenvolvimento:hover {
  border-color: #7c3aed !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(124,58,237,.2) !important;
  transform: translateY(-2px);
}
.card-correcao:hover {
  border-color: #d93025 !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(217,48,37,.2) !important;
  transform: translateY(-2px);
}
.card-concluido:hover {
  border-color: #1e8e3e !important;
  box-shadow: 0 1px 2px rgba(60,64,67,.3), 0 2px 6px 2px rgba(30,142,62,.2) !important;
  transform: translateY(-2px);
}

/* Status band vira sólida no hover */
.card-status-band {
  transition: background 0.25s var(--ease-google);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.card-afazer:hover      .card-status-band { background: #1a73e8; }
.card-desenvolvimento:hover .card-status-band { background: #7c3aed; }
.card-correcao:hover    .card-status-band { background: #d93025; }
.card-concluido:hover   .card-status-band { background: #1e8e3e; }

.card-afazer:hover      .card-status-band .status-dot,
.card-desenvolvimento:hover .card-status-band .status-dot,
.card-correcao:hover    .card-status-band .status-dot,
.card-concluido:hover   .card-status-band .status-dot {
  background: rgba(255,255,255,0.7);
  transition: background 0.25s;
}
.card-afazer:hover      .card-status-band .status-label,
.card-desenvolvimento:hover .card-status-band .status-label,
.card-correcao:hover    .card-status-band .status-label,
.card-concluido:hover   .card-status-band .status-label {
  color: #ffffff;
  transition: color 0.25s;
}

/* Card concluido especial */
.publi-card-concluido {
  background-color: #1e3a2e !important;
  color: #ffffff !important;
  border: 1px solid #2d6a4f !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15);
}
.publi-card-concluido:hover {
  border-color: #52b788 !important;
  box-shadow: 0 4px 8px 3px rgba(30,142,62,.2), 0 1px 3px rgba(0,0,0,.3) !important;
}

/* Shimmer ripple no hover */
@keyframes gwsRipple {
  0%   { transform: translateX(-100%); opacity: 0.5; }
  100% { transform: translateX(200%);  opacity: 0; }
}
.card-afazer::after,
.card-desenvolvimento::after,
.card-correcao::after,
.card-concluido::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 50%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.card-afazer:hover::after,
.card-desenvolvimento:hover::after,
.card-correcao:hover::after,
.card-concluido:hover::after {
  animation: gwsRipple 0.55s var(--ease-google) forwards;
}

/* ─── CARD ENTRY ANIMATION ────────────────────────────────────── */
@keyframes cardPopIn {
  0%   { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
.card-pop-in {
  animation: cardPopIn 0.3s var(--ease-spring) both;
}

/* ─── MODAL / POPOVER ANIMATION ──────────────────────────────── */
@keyframes popInModal {
  0%   { opacity: 0; transform: scale(0.96) translateY(8px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}
.animate-pop-in {
  animation: popInModal 0.25s var(--ease-spring) forwards;
}

@keyframes slideDownFade {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ─── BADGES DE STATUS ────────────────────────────────────────── */
.badge-status-concluido {
  background: #e6f4ea; color: #1e8e3e; border: 1px solid #a8d5b5;
}
.badge-status-dev {
  background: #fef3c7; color: #b45309; border: 1px solid #fde68a;
}
.badge-status-todo {
  background: #e8f0fe; color: #1a73e8; border: 1px solid #b3d1f7;
}

/* ─── BOTÃO ATA (laranja da marca) ───────────────────────────── */
.btn-ata-orange {
  background: linear-gradient(135deg, #f97316, #fb923c);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(249,115,22,.4), 0 2px 6px rgba(249,115,22,.25);
  transition: box-shadow 0.2s var(--ease-google), transform 0.15s var(--ease-google);
}
.btn-ata-orange:hover {
  background: linear-gradient(135deg, #ea6c0a, #f97316);
  transform: translateY(-1px);
  box-shadow: 0 1px 2px rgba(249,115,22,.5), 0 4px 10px rgba(249,115,22,.35);
}
.btn-ata-orange:active { transform: translateY(0); }

/* ─── SIDEBAR (página de cadastros) ─────────────────────────── */
.light-sidebar {
  background: var(--white);
  border-right: 1px solid var(--border);
}

/* ─── TIMER / CRONÔMETRO ─────────────────────────────────────── */
@keyframes timerPulse {
  0%, 100% { opacity: 1; transform: scale(1);    box-shadow: 0 0 0 0 rgba(217,48,37,.4); }
  50%       { opacity: .9; transform: scale(1.03); box-shadow: 0 0 0 5px rgba(217,48,37,0); }
}
.timer-pulse {
  animation: timerPulse 1.4s ease-in-out infinite !important;
}

#modalLiveTimerBadge {
  font-size: .85rem !important;
  font-weight: 800 !important;
  padding: .5rem 1rem !important;
  border-radius: 9999px !important;
  letter-spacing: .01em;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.25rem;
}

.live-timer-badge {
  font-size: .72rem !important;
  font-weight: 800 !important;
  border-radius: 9999px !important;
  letter-spacing: .01em;
}

/* ─── SELECTION HIGHLIGHT ─────────────────────────────────────── */
::selection {
  background: rgba(249,115,22,.2);
  color: var(--text-primary);
}

/* ─── FOCUS RING (acessibilidade ao estilo Google) ────────────── */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ─── STAGGER de entrada das colunas ─────────────────────────── */
.kanban-column-light:nth-child(1) { animation-delay: 0ms; }
.kanban-column-light:nth-child(2) { animation-delay: 60ms; }
.kanban-column-light:nth-child(3) { animation-delay: 120ms; }
.kanban-column-light:nth-child(4) { animation-delay: 180ms; }
.kanban-column-light:nth-child(5) { animation-delay: 240ms; }
.kanban-column-light:nth-child(6) { animation-delay: 300ms; }

/* ─── TOASTS — Google Material style ─────────────────────────── */
@keyframes toastSlideIn {
  from { opacity: 0; transform: translateY(12px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes toastFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ─── DRAG & DROP visual ─────────────────────────────────────── */
.sortable-ghost {
  opacity: 0.35;
  background: var(--brand-light) !important;
  border: 2px dashed var(--brand) !important;
}
.sortable-chosen {
  box-shadow: var(--shadow-3) !important;
  transform: rotate(1deg) scale(1.02) !important;
  z-index: 999;
}