/* ============================================================
   LUMINE STUDIOS — ORIGINAIS DASHBOARD
   Design System · CSS completo
   Versão 1.0 · Maio 2025
   ============================================================
   
   ÍNDICE
   1.  Fontes & Importações
   2.  Tokens / Variáveis CSS
   3.  Reset & Base
   4.  Tipografia
   5.  Layout & Navegação
   6.  Componentes de Filtro (chips, search, toolbar)
   7.  Tabelas inline-editáveis
   8.  Gantt / Cronograma
   9.  Modais
   10. Cards & Dashboard
   11. Formulários
   12. Badges & Status pills
   13. Botões
   14. Toggles
   15. Configurações (sidebar + list-items)
   16. Rota (colapsável)
   17. Utilitários
   18. Responsividade
   ============================================================ */


/* ─────────────────────────────────────────────────────────────
   1. FONTES & IMPORTAÇÕES
───────────────────────────────────────────────────────────── */

@import url('https://api.fontshare.com/v2/css?f[]=satoshi@300,400,500,700&display=swap');


/* ─────────────────────────────────────────────────────────────
   2. TOKENS / VARIÁVEIS CSS
───────────────────────────────────────────────────────────── */

:root {

  /* ── Marca ── */
  --yellow:          #F5E600;
  --yellow-dark:     #E0D000;
  --yellow-pale:     #FFFDE5;
  --yellow-border:   rgba(245, 230, 0, 0.30);

  /* ── Escala de cinzas ── */
  --black:           #0D0D0D;
  --charcoal:        #2E2E2E;
  --dark:            #4A4A4A;
  --mid:             #7A7A7A;
  --light:           #C0C0C0;
  --pale:            #E8E8E8;
  --off-white:       #F5F5F3;
  --white:           #FFFFFF;

  /* ── Tipografia ── */
  --font:            'Satoshi', 'DM Sans', system-ui, sans-serif;
  --font-mono:       'Courier New', Courier, monospace;

  /* ── Raios ── */
  --r-lg:            10px;
  --r:               8px;
  --r-sm:            6px;
  --r-xs:            4px;

  /* ── Sombras ── */
  --shadow-sm:       0 1px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:       0 4px 16px rgba(0, 0, 0, 0.09);
  --shadow-lg:       0 8px 40px rgba(0, 0, 0, 0.14);
  --shadow-modal:    0 8px 40px rgba(0, 0, 0, 0.18);

  /* ── Transições ── */
  --ease:            cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast:          0.12s;
  --t-base:          0.18s;
  --t-slow:          0.28s;

  /* ── Bordas ── */
  --border:          0.5px solid var(--pale);
  --border-dark:     0.5px solid var(--charcoal);

  /* ── Layout ── */
  --nav-h:           52px;
  --sidebar-w:       210px;
  --gantt-label-w:   172px;
  --gantt-row-h:     40px;
  --gantt-header-h:  34px;

  /* ── Z-index ── */
  --z-nav:           200;
  --z-dropdown:      100;
  --z-modal:         500;
  --z-tooltip:       999;

  /* ────────────────────────────────────────────────────
     STATUS — Projetos
  ──────────────────────────────────────────────────── */

  --s-dev-bg:        #EEF4FF;
  --s-dev-txt:       #2050A0;
  --s-dev-brd:       #C8D9F5;

  --s-pre-bg:        #F0FBF4;
  --s-pre-txt:       #1B6E38;
  --s-pre-brd:       #B8E8C8;

  --s-cam-bg:        #F3EEFF;
  --s-cam-txt:       #5B21B6;
  --s-cam-brd:       #D8C8F8;

  --s-prod-bg:       #FFFDE5;
  --s-prod-txt:      #7A5800;
  --s-prod-brd:      #F0D878;

  --s-pos-bg:        #FFF0EC;
  --s-pos-txt:       #8C3A20;
  --s-pos-brd:       #F0C8B8;

  --s-del-bg:        #F0F9FF;
  --s-del-txt:       #1464A0;
  --s-del-brd:       #B8D8F0;

  --s-done-bg:       #F0F0F0;
  --s-done-txt:      #2E2E2E;
  --s-done-brd:      #D0D0D0;

  /* ────────────────────────────────────────────────────
     STATUS — Rota (festivais)
  ──────────────────────────────────────────────────── */

  --r-bk-bg:         #F0F0F0;
  --r-bk-txt:        #5A5A5A;

  --r-ao-bg:         #EEF4FF;
  --r-ao-txt:        #2050A0;

  --r-an-bg:         #FFF8E0;
  --r-an-txt:        #7A6000;

  --r-su-bg:         #F0F9FF;
  --r-su-txt:        #1464A0;

  --r-ns-bg:         #FFF0EC;
  --r-ns-txt:        #8C3A20;

  --r-se-bg:         #F0FBF4;
  --r-se-txt:        #1B6E38;

  --r-no-bg:         #FFFDE5;
  --r-no-txt:        #7A5800;

  --r-pr-bg:         #0D0D0D;
  --r-pr-txt:        #F5E600;

  --r-nc-bg:         #FFF0EC;
  --r-nc-txt:        #8C3A20;

  --r-co-bg:         #F5F5F3;
  --r-co-txt:        #4A4A4A;

  /* ────────────────────────────────────────────────────
     ETAPAS — Gantt bar colors
  ──────────────────────────────────────────────────── */

  --e-dev-clr:       #2050A0;
  --e-dev-bg:        #EEF4FF;

  --e-pre-clr:       #1B6E38;
  --e-pre-bg:        #F0FBF4;

  --e-cam-clr:       #5B21B6;
  --e-cam-bg:        #F3EEFF;

  --e-prod-clr:      #7A5800;
  --e-prod-bg:       #FFFDE5;

  --e-pos-clr:       #8C3A20;
  --e-pos-bg:        #FFF0EC;

  --e-del-clr:       #1464A0;
  --e-del-bg:        #F0F9FF;

  /* ────────────────────────────────────────────────────
     CATEGORIA — inline select colors
  ──────────────────────────────────────────────────── */

  --cat-doc-bg:      #EBF5FF;
  --cat-doc-txt:     #1A5C99;
  --cat-doc-brd:     #B8D9F5;

  --cat-fic-bg:      #FDEEFF;
  --cat-fic-txt:     #7C3D9E;
  --cat-fic-brd:     #E5BAF7;

  --cat-ani-bg:      #E8FFF0;
  --cat-ani-txt:     #1A7A42;
  --cat-ani-brd:     #A8EFC4;

  --cat-exp-bg:      #FFF3E8;
  --cat-exp-txt:     #9E5C1A;
  --cat-exp-brd:     #F5D0A8;

  /* ── Formato / Natureza / Duração inline selects ── */
  --fmt-bg:          #F0F9FF;
  --fmt-txt:         #1464A0;
  --fmt-brd:         #C0DCEF;

  --nat-bg:          #F5F0FF;
  --nat-txt:         #5B21B6;
  --nat-brd:         #D8C8F8;

  --dur-bg:          #FFF8E8;
  --dur-txt:         #8A6000;
  --dur-brd:         #F0D898;
}


/* ─────────────────────────────────────────────────────────────
   3. RESET & BASE
───────────────────────────────────────────────────────────── */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--off-white);
  color: var(--black);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }

button, input, select, textarea {
  font-family: var(--font);
  font-size: inherit;
}

a { color: inherit; text-decoration: none; }

table { border-collapse: collapse; width: 100%; }


/* ─────────────────────────────────────────────────────────────
   4. TIPOGRAFIA
───────────────────────────────────────────────────────────── */

.text-display {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
}

.text-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
}

.text-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--black);
}

.text-body {
  font-size: 13px;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.6;
}

.text-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mid);
}

.text-caption {
  font-size: 11px;
  color: var(--light);
}

.text-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--mid);
}


/* ─────────────────────────────────────────────────────────────
   5. LAYOUT & NAVEGAÇÃO
───────────────────────────────────────────────────────────── */

/* ── Navbar ── */
.nav {
  background: var(--black);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  padding: 0 18px;
  position: sticky;
  top: 0;
  z-index: var(--z-nav);
  flex-shrink: 0;
}

/* ── Logo ── */
.nav-logo {
  font-size: 15px;
  color: var(--white);
  letter-spacing: -0.01em;
  line-height: 1;
  margin-right: 24px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-logo strong { font-weight: 700; }
.nav-logo em     { font-weight: 300; font-style: normal; }

.nav-logo-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  background: var(--yellow);
  border-radius: 50%;
  margin-left: 1px;
  vertical-align: middle;
  margin-bottom: 2px;
  flex-shrink: 0;
}

/* ── Nav links ── */
.nav-links {
  display: flex;
  gap: 2px;
  flex: 1;
}

.nav-link {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.42);
  padding: 6px 11px;
  border-radius: var(--r-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--t-fast), background var(--t-fast);
  user-select: none;
}

.nav-link:hover {
  color: var(--white);
}

.nav-link.active {
  color: var(--yellow);
  background: rgba(245, 230, 0, 0.10);
}

/* ── Nav right (avatar + role) ── */
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.nav-role {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.30);
}

.nav-avatar {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--black);
  cursor: pointer;
  box-shadow: 0 0 0 2px rgba(245, 230, 0, 0.35);
  transition: opacity var(--t-fast);
  user-select: none;
}

.nav-avatar:hover { opacity: 0.88; }

/* ── Page wrapper ── */
.page {
  padding: 16px 18px 40px;
}

/* ── Page header ── */
.page-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 14px;
}

.page-title {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--black);
}

.page-subtitle {
  font-size: 11px;
  color: var(--mid);
  margin-top: 1px;
}


/* ─────────────────────────────────────────────────────────────
   6. COMPONENTES DE FILTRO
───────────────────────────────────────────────────────────── */

/* ── Toolbar wrapper ── */
.toolbar {
  background: var(--white);
  border: var(--border);
  border-radius: var(--r);
  padding: 10px 14px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Filter label ── */
.filter-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--light);
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Filter divider ── */
.filter-divider {
  width: 0.5px;
  height: 18px;
  background: var(--pale);
  flex-shrink: 0;
}

/* ── Chip group ── */
.chips {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}

/* ── Chip ── */
.chip {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  border: 0.5px solid var(--pale);
  color: var(--mid);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.chip:hover {
  border-color: var(--light);
  color: var(--dark);
}

.chip.active,
.chip[aria-selected="true"] {
  background: var(--yellow);
  border-color: var(--yellow-dark);
  color: var(--black);
}

/* ── Search box ── */
.search-box {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  flex: 1;
  min-width: 180px;
  max-width: 300px;
  transition: border-color var(--t-fast);
}

.search-box:focus-within {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245, 230, 0, 0.18);
}

.search-box input {
  border: none;
  background: transparent;
  font-size: 12px;
  font-family: var(--font);
  color: var(--black);
  outline: none;
  width: 100%;
}

.search-box input::placeholder { color: var(--light); }

.search-icon { color: var(--light); flex-shrink: 0; }

/* ── Select pill (dropdown as styled chip) ── */
.select-pill {
  font-size: 11px;
  font-weight: 500;
  padding: 4px 22px 4px 9px;
  border-radius: 20px;
  border: 0.5px solid var(--pale);
  color: var(--dark);
  background: var(--off-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23B8B8B8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  outline: none;
}

.select-pill:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245, 230, 0, 0.20);
}

/* ── Group-by button (Gantt) ── */
.groupby-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--pale);
  background: var(--white);
  cursor: pointer;
  font-size: 11px;
  font-weight: 500;
  color: var(--dark);
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast);
}

.groupby-btn:hover { background: var(--off-white); }

.groupby-btn.has-group {
  background: var(--black);
  border-color: var(--black);
  color: var(--white);
}

/* ── Groupby dropdown ── */
.groupby-dropdown {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: var(--white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r);
  box-shadow: var(--shadow-md);
  min-width: 220px;
  z-index: var(--z-dropdown);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity var(--t-base), transform var(--t-base);
}

.groupby-dropdown.open {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.groupby-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  padding: 10px 12px 4px;
  display: block;
}

.groupby-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  cursor: pointer;
  font-size: 12px;
  color: var(--dark);
  transition: background var(--t-fast);
}

.groupby-option:hover { background: var(--off-white); }

.groupby-option.selected { color: var(--black); font-weight: 600; }

.groupby-option .check {
  width: 14px;
  height: 14px;
  border-radius: var(--r-xs);
  background: var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: var(--black);
  flex-shrink: 0;
}

.groupby-divider {
  height: 0.5px;
  background: var(--pale);
  margin: 4px 0;
}

/* ── View toggle (lista / por filme) ── */
.view-toggle {
  display: flex;
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  overflow: hidden;
}

.view-toggle-btn {
  padding: 5px 11px;
  font-size: 11px;
  font-weight: 500;
  color: var(--mid);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
  user-select: none;
}

.view-toggle-btn.active {
  background: var(--black);
  color: var(--white);
}

/* ── Control button (expandir/recolher) ── */
.ctrl-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--pale);
  background: var(--white);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--dark);
  white-space: nowrap;
  transition: background var(--t-fast);
}

.ctrl-btn:hover { background: var(--off-white); }
.ctrl-btn.primary { background: var(--yellow); border-color: var(--yellow-dark); color: var(--black); font-weight: 700; }

/* ── Summary stat cards (Dashboard / Rota) ── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 14px;
}

.summary-grid.cols-5 { grid-template-columns: repeat(5, 1fr); }

.stat-card {
  background: var(--white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r);
  padding: 13px 15px;
  position: relative;
  cursor: pointer;
  user-select: none;
  transition: box-shadow var(--t-fast);
}

.stat-card:hover { box-shadow: var(--shadow-sm); }
.stat-card.active { box-shadow: 0 0 0 2px var(--black); }
.stat-card.highlight::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--yellow);
  border-radius: var(--r) var(--r) 0 0;
}

.stat-value {
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--black);
  margin-bottom: 4px;
}

.stat-value .unit {
  font-size: 13px;
  font-weight: 400;
  color: var(--mid);
  letter-spacing: 0;
}

.stat-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 3px;
}

.stat-compare {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}

.stat-delta { font-size: 11px; font-weight: 500; }
.stat-prev  { font-size: 11px; color: var(--light); }

.delta-up   { color: #1B6E38; }
.delta-down { color: #8C3A20; }
.delta-neu  { color: var(--mid); }


/* ─────────────────────────────────────────────────────────────
   7. TABELAS INLINE-EDITÁVEIS (Projetos)
───────────────────────────────────────────────────────────── */

.table-scroll {
  overflow-x: auto;
  border-radius: var(--r);
  border: 0.5px solid var(--pale);
}

.table-main {
  width: 100%;
  min-width: 900px;
  background: var(--white);
  border-collapse: collapse;
}

/* ── Thead ── */
.table-main thead tr {
  background: var(--off-white);
  border-bottom: 0.5px solid var(--pale);
}

.table-main thead th {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--light);
  padding: 9px 10px;
  text-align: left;
  white-space: nowrap;
  user-select: none;
  cursor: pointer;
}

.table-main thead th:hover { color: var(--mid); }
.table-main thead th.center { text-align: center; }

/* ── Data rows ── */
.table-main tbody tr {
  border-bottom: 0.5px solid var(--off-white);
  transition: background var(--t-fast);
}

.table-main tbody tr:last-child { border-bottom: none; }
.table-main tbody tr:hover { background: #FAFAF8; }

.table-main td {
  padding: 8px 10px;
  vertical-align: middle;
}

/* ── Group header row ── */
.table-main tr.group-header td {
  background: var(--off-white);
  padding: 7px 12px;
  border-top: 0.5px solid var(--pale);
  border-bottom: 0.5px solid var(--pale);
}

.group-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mid);
}

.group-count {
  font-size: 10px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--light);
  margin-left: 4px;
}

/* ── Inline selects (coloridos) ── */
.isel {
  font-size: 11px;
  font-weight: 500;
  border-radius: 20px;
  padding: 3px 22px 3px 9px;
  border: 0.5px solid transparent;
  cursor: pointer;
  outline: none;
  font-family: var(--font);
  appearance: none;
  background-repeat: no-repeat;
  background-position: right 7px center;
  background-size: 8px 5px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  max-width: 160px;
}

.isel:hover  { border-color: var(--pale) !important; }
.isel:focus  { box-shadow: 0 0 0 2px rgba(245,230,0,.35); border-color: var(--yellow) !important; }

/* Categoria */
.isel-doc  { background-color: var(--cat-doc-bg); color: var(--cat-doc-txt); border-color: var(--cat-doc-bg); }
.isel-fic  { background-color: var(--cat-fic-bg); color: var(--cat-fic-txt); border-color: var(--cat-fic-bg); }
.isel-ani  { background-color: var(--cat-ani-bg); color: var(--cat-ani-txt); border-color: var(--cat-ani-bg); }
.isel-exp  { background-color: var(--cat-exp-bg); color: var(--cat-exp-txt); border-color: var(--cat-exp-bg); }
.isel-nil  { background-color: var(--off-white);  color: var(--mid);         border-color: var(--pale); }

/* Formato */
.isel-fmt  { background-color: var(--fmt-bg); color: var(--fmt-txt); border-color: var(--fmt-bg); }

/* Natureza */
.isel-nat  { background-color: var(--nat-bg); color: var(--nat-txt); border-color: var(--nat-bg); }

/* Duração */
.isel-dur  { background-color: var(--dur-bg); color: var(--dur-txt); border-color: var(--dur-bg); }

/* Status */
.isel-s-dev  { background-color: var(--s-dev-bg);  color: var(--s-dev-txt);  border-color: var(--s-dev-bg); }
.isel-s-pre  { background-color: var(--s-pre-bg);  color: var(--s-pre-txt);  border-color: var(--s-pre-bg); }
.isel-s-cam  { background-color: var(--s-cam-bg);  color: var(--s-cam-txt);  border-color: var(--s-cam-bg); }
.isel-s-prod { background-color: var(--s-prod-bg); color: var(--s-prod-txt); border-color: var(--s-prod-bg); }
.isel-s-pos  { background-color: var(--s-pos-bg);  color: var(--s-pos-txt);  border-color: var(--s-pos-bg); }
.isel-s-del  { background-color: var(--s-del-bg);  color: var(--s-del-txt);  border-color: var(--s-del-bg); }
.isel-s-done { background-color: var(--s-done-bg); color: var(--s-done-txt); border-color: var(--s-done-bg); }

/* Status Rota */
.isel-r-bk { background-color: var(--r-bk-bg); color: var(--r-bk-txt); border-color: var(--r-bk-bg); }
.isel-r-ao { background-color: var(--r-ao-bg); color: var(--r-ao-txt); border-color: var(--r-ao-bg); }
.isel-r-an { background-color: var(--r-an-bg); color: var(--r-an-txt); border-color: var(--r-an-bg); }
.isel-r-su { background-color: var(--r-su-bg); color: var(--r-su-txt); border-color: var(--r-su-bg); }
.isel-r-ns { background-color: var(--r-ns-bg); color: var(--r-ns-txt); border-color: var(--r-ns-bg); }
.isel-r-se { background-color: var(--r-se-bg); color: var(--r-se-txt); border-color: var(--r-se-bg); }
.isel-r-no { background-color: var(--r-no-bg); color: var(--r-no-txt); border-color: var(--r-no-bg); }
.isel-r-pr { background-color: var(--r-pr-bg); color: var(--r-pr-txt); border-color: var(--r-pr-bg); }
.isel-r-nc { background-color: var(--r-nc-bg); color: var(--r-nc-txt); border-color: var(--r-nc-bg); }
.isel-r-co { background-color: var(--r-co-bg); color: var(--r-co-txt); border-color: var(--r-co-bg); }

/* SVG arrow helper — injete inline no JS por cor de texto */
/* Exemplo: .isel-doc { background-image: url("data:image/svg+xml,..."); } */

/* ── Inline input (datas, país, resultado) ── */
.iinp {
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-xs);
  padding: 4px 8px;
  font-size: 11px;
  font-family: var(--font);
  color: var(--dark);
  outline: none;
  width: 100%;
  min-width: 80px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.iinp:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245,230,0,.20);
}

.iinp::placeholder { color: var(--light); }

/* ── Checkbox (CPB, CRT, IMDb, Infantil) ── */
.cbx {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  border: 0.5px solid var(--pale);
  background: var(--white);
  cursor: pointer;
  appearance: none;
  transition: background var(--t-fast), border-color var(--t-fast);
  flex-shrink: 0;
  position: relative;
}

.cbx:checked {
  background: var(--black);
  border-color: var(--black);
}

.cbx:checked::after {
  content: '✓';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: 9px;
  color: var(--white);
  font-weight: 700;
  line-height: 1;
}

.cbx:hover:not(:checked) {
  border-color: var(--light);
  background: var(--off-white);
}

/* ── Drag handle ── */
.drag-handle {
  color: var(--light);
  cursor: grab;
  font-size: 11px;
  letter-spacing: -0.5px;
  user-select: none;
  flex-shrink: 0;
}

.drag-handle:active { cursor: grabbing; }

/* ── Action buttons (table row) ── */
.act-btn {
  width: 26px;
  height: 26px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--pale);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  color: var(--light);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}

.act-btn:hover { background: var(--off-white); color: var(--dark); }
.act-btn.danger:hover { background: #FFF0EC; border-color: #F0C8B8; color: #8C3A20; }

.act-group { display: flex; gap: 4px; justify-content: flex-end; }

/* ── Table stats bar ── */
.table-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--off-white);
  border-bottom: 0.5px solid var(--pale);
  font-size: 11px;
  color: var(--mid);
}

.table-stats strong { font-weight: 600; color: var(--black); }


/* ─────────────────────────────────────────────────────────────
   8. GANTT / CRONOGRAMA
───────────────────────────────────────────────────────────── */

.gantt-outer {
  background: var(--white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r);
  overflow: hidden;
}

/* ── Header (months) ── */
.gantt-header {
  display: flex;
  border-bottom: 0.5px solid var(--pale);
  background: var(--off-white);
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
}

.gantt-header-label {
  width: var(--gantt-label-w);
  flex-shrink: 0;
  border-right: 0.5px solid var(--pale);
  height: var(--gantt-header-h);
  display: flex;
  align-items: center;
  padding: 0 12px;
}

.gantt-months {
  flex: 1;
  display: flex;
}

.gantt-month {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 0.5px solid var(--pale);
  height: var(--gantt-header-h);
  font-size: 11px;
  font-weight: 500;
  color: var(--mid);
  line-height: 1.3;
}

.gantt-month:last-child { border-right: none; }

.gantt-month.today-col { background: var(--yellow-pale); }
.gantt-month.today-col .month-name { color: var(--black); font-weight: 700; }

.month-name { font-size: 11px; font-weight: 500; }
.month-year { font-size: 9px; color: var(--light); }

/* ── Group header row ── */
.gantt-group-row {
  display: flex;
  align-items: center;
  background: var(--off-white);
  border-bottom: 0.5px solid var(--pale);
  cursor: pointer;
  user-select: none;
}

.gantt-group-label-cell {
  width: var(--gantt-label-w);
  flex-shrink: 0;
  border-right: 0.5px solid var(--pale);
  padding: 7px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gantt-chevron {
  font-size: 9px;
  color: var(--mid);
  transition: transform var(--t-base);
  display: inline-block;
}

.gantt-chevron.open { transform: rotate(90deg); }

.gantt-group-track { flex: 1; height: 30px; }

/* ── Project row ── */
.gantt-project-row {
  display: flex;
  border-bottom: 0.5px solid var(--off-white);
  transition: background var(--t-fast);
}

.gantt-project-row:hover { background: #FAFAF8; }
.gantt-project-row:last-child { border-bottom: none; }

.gantt-project-label {
  width: var(--gantt-label-w);
  flex-shrink: 0;
  border-right: 0.5px solid var(--pale);
  padding: 0 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: var(--gantt-row-h);
  min-width: 0;
}

.gantt-project-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gantt-project-meta {
  font-size: 10px;
  color: var(--light);
  margin-top: 1px;
  white-space: nowrap;
}

.gantt-track {
  flex: 1;
  position: relative;
  height: var(--gantt-row-h);
  display: flex;
}

/* ── Month cells (grid lines) ── */
.gantt-month-cell {
  flex: 1;
  border-right: 0.5px solid var(--off-white);
  height: 100%;
  position: relative;
}

.gantt-month-cell:last-child { border-right: none; }
.gantt-month-cell.today-col  { background: rgba(245, 230, 0, 0.04); }

/* ── Today line ── */
.gantt-today-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background: var(--yellow);
  z-index: 8;
  pointer-events: none;
}

/* ── Gantt bars ── */
.gantt-bar {
  position: absolute;
  top: 10px;
  height: 20px;
  border-radius: var(--r-xs);
  display: flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  cursor: pointer;
  z-index: 2;
  transition: filter var(--t-fast);
}

.gantt-bar:hover { filter: brightness(0.93); }

.gantt-bar.dev  { background: var(--e-dev-bg);  color: var(--e-dev-clr);  border-left: 2.5px solid var(--e-dev-clr); }
.gantt-bar.pre  { background: var(--e-pre-bg);  color: var(--e-pre-clr);  border-left: 2.5px solid var(--e-pre-clr); }
.gantt-bar.cam  { background: var(--e-cam-bg);  color: var(--e-cam-clr);  border-left: 2.5px solid var(--e-cam-clr); }
.gantt-bar.prod { background: var(--e-prod-bg); color: var(--e-prod-clr); border-left: 2.5px solid var(--e-prod-clr); }
.gantt-bar.pos  { background: var(--e-pos-bg);  color: var(--e-pos-clr);  border-left: 2.5px solid var(--e-pos-clr); }
.gantt-bar.del  { background: var(--e-del-bg);  color: var(--e-del-clr);  border-left: 2.5px solid var(--e-del-clr); }

/* ── Gantt tooltip ── */
.gantt-tooltip {
  position: fixed;
  background: var(--black);
  color: var(--white);
  border-radius: var(--r-sm);
  padding: 9px 13px;
  font-size: 11px;
  pointer-events: none;
  z-index: var(--z-tooltip);
  opacity: 0;
  transition: opacity var(--t-fast);
  box-shadow: var(--shadow-lg);
  min-width: 170px;
}

.gantt-tooltip.visible { opacity: 1; }

.gantt-tooltip-title {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 5px;
}

.gantt-tooltip-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 2px;
}

.gantt-tooltip-label { color: rgba(255,255,255,0.45); }
.gantt-tooltip-value { font-weight: 500; }

/* ── Gantt legend ── */
.gantt-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.gantt-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--mid);
}

.gantt-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────────────────────
   9. MODAIS
───────────────────────────────────────────────────────────── */

.modal-scrim {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-base);
}

.modal-scrim.open {
  opacity: 1;
  pointer-events: all;
}

.modal {
  background: var(--white);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
  border: 0.5px solid var(--pale);
  transform: translateY(8px);
  transition: transform var(--t-base);
}

.modal-scrim.open .modal { transform: translateY(0); }

.modal.modal-sm  { max-width: 460px; }
.modal.modal-lg  { max-width: 760px; }

/* ── Modal header ── */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 0.5px solid var(--pale);
  flex-shrink: 0;
}

.modal-header-left {
  display: flex;
  align-items: center;
  gap: 9px;
}

.modal-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.01em;
}

.modal-sku {
  font-size: 11px;
  font-family: var(--font-mono);
  background: var(--off-white);
  color: var(--mid);
  padding: 3px 7px;
  border-radius: var(--r-xs);
  border: 0.5px solid var(--pale);
}

.modal-close {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--pale);
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--mid);
  transition: background var(--t-fast);
}

.modal-close:hover { background: var(--off-white); color: var(--dark); }

/* ── Modal tabs ── */
.modal-tabs {
  display: flex;
  border-bottom: 0.5px solid var(--pale);
  flex-shrink: 0;
}

.modal-tab {
  font-size: 12px;
  font-weight: 500;
  padding: 9px 16px;
  cursor: pointer;
  color: var(--mid);
  border-bottom: 2px solid transparent;
  margin-bottom: -0.5px;
  white-space: nowrap;
  transition: color var(--t-fast), border-color var(--t-fast);
  user-select: none;
}

.modal-tab.active {
  color: var(--black);
  border-bottom-color: var(--black);
}

/* ── Modal body ── */
.modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
}

.modal-body.hidden { display: none; }

/* ── Modal footer ── */
.modal-footer {
  padding: 11px 18px;
  border-top: 0.5px solid var(--pale);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--off-white);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  flex-shrink: 0;
}

.modal-footer-right { display: flex; gap: 7px; }


/* ─────────────────────────────────────────────────────────────
   10. CARDS & DASHBOARD
───────────────────────────────────────────────────────────── */

.card {
  background: var(--white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r);
  overflow: hidden;
}

.card-header {
  padding: 14px 16px;
  border-bottom: 0.5px solid var(--pale);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-title-note {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 11px;
  color: var(--light);
}

.card-body { padding: 16px; }

/* ── Dashboard grid layouts ── */
.dash-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.dash-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.dash-grid-32 { display: grid; grid-template-columns: 1.8fr 1fr; gap: 10px; margin-bottom: 10px; }
.dash-grid-23 { display: grid; grid-template-columns: 1fr 1.8fr; gap: 10px; margin-bottom: 10px; }
.dash-grid-21 { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; margin-bottom: 10px; }

/* ── Horizontal bar chart ── */
.hbar-list { display: flex; flex-direction: column; gap: 9px; }

.hbar-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.hbar-label {
  font-size: 12px;
  color: var(--dark);
  width: 86px;
  flex-shrink: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hbar-track {
  flex: 1;
  height: 6px;
  background: var(--pale);
  border-radius: 3px;
  overflow: hidden;
}

.hbar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.5s var(--ease);
}

.hbar-fill.yellow { background: var(--yellow); border: 0.5px solid var(--yellow-dark); }
.hbar-fill.black  { background: var(--black); }

.hbar-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--black);
  width: 18px;
  text-align: right;
  flex-shrink: 0;
}

.hbar-compare {
  font-size: 10px;
  min-width: 24px;
  text-align: right;
  flex-shrink: 0;
}

/* ── Donut chart legend ── */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}

.donut-legend {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
}

.donut-legend-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

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

.donut-name  { font-size: 11px; color: var(--dark); flex: 1; }
.donut-value { font-size: 11px; font-weight: 600; color: var(--black); }
.donut-pct   { font-size: 10px; color: var(--light); min-width: 26px; text-align: right; }
.donut-cmp   { font-size: 10px; min-width: 22px; text-align: right; }

/* ── Mode switcher (Produções / Rota / Ambos) ── */
.mode-bar {
  display: flex;
  background: var(--white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r);
  overflow: hidden;
}

.mode-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 8px 18px;
  cursor: pointer;
  color: var(--mid);
  border-right: 0.5px solid var(--pale);
  white-space: nowrap;
  user-select: none;
  transition: background var(--t-fast), color var(--t-fast);
}

.mode-btn:last-child { border-right: none; }
.mode-btn.active { background: var(--black); color: var(--white); }

/* ── Finance breakdown ── */
.fin-total {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.fin-total-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--black);
  letter-spacing: -0.04em;
}

.fin-total-label { font-size: 12px; color: var(--mid); }

.fin-breakdown {
  display: flex;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 0.5px solid var(--pale);
  margin-bottom: 9px;
}

.fin-segment { flex: 1; padding: 9px 10px; border-right: 0.5px solid var(--pale); }
.fin-segment:last-child { border-right: none; }

.fin-segment-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--mid);
  margin-bottom: 2px;
}

.fin-segment-value { font-size: 14px; font-weight: 700; color: var(--black); }
.fin-segment-compare { font-size: 10px; margin-top: 1px; }

/* ── Rota festival status grid ── */
.rota-status-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 5px;
  margin-bottom: 12px;
}

.rota-status-cell {
  border-radius: var(--r-sm);
  padding: 9px 6px;
  text-align: center;
  border: 0.5px solid transparent;
}

.rota-status-num {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 2px;
}

.rota-status-name {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* ── Film cards (Rota por filme) ── */
.film-cards-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }

.film-card {
  background: var(--white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r);
  overflow: hidden;
}

.film-card-header {
  padding: 13px 14px 10px;
  border-bottom: 0.5px solid var(--pale);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.film-card-title { font-size: 13px; font-weight: 700; color: var(--black); line-height: 1.3; }
.film-card-meta  { font-size: 10px; color: var(--mid); margin-top: 2px; }
.film-card-stats { display: flex; gap: 5px; margin-top: 7px; flex-wrap: wrap; }

.film-card-body { padding: 8px 14px 12px; }

.festival-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 0.5px solid var(--off-white);
  cursor: pointer;
}

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

.festival-name {
  font-size: 12px;
  font-weight: 500;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 170px;
}

.festival-sub { font-size: 10px; color: var(--light); margin-top: 1px; }

.festival-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.festival-date  { font-size: 10px; color: var(--light); white-space: nowrap; }


/* ─────────────────────────────────────────────────────────────
   11. FORMULÁRIOS (modal body, configurações)
───────────────────────────────────────────────────────────── */

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.form-grid .full { grid-column: 1 / -1; }

.form-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--light);
  margin: 14px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-section-label::after {
  content: '';
  flex: 1;
  height: 0.5px;
  background: var(--pale);
}

.form-section-label:first-child { margin-top: 0; }

.field { display: flex; flex-direction: column; gap: 5px; }

.field-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--mid);
}

.field-input {
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--black);
  font-family: var(--font);
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}

.field-input:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245,230,0,.20);
}

.field-input::placeholder { color: var(--light); }
.field-input[readonly] { background: var(--pale); color: var(--mid); }

.field-select {
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  padding: 8px 28px 8px 10px;
  font-size: 13px;
  color: var(--black);
  font-family: var(--font);
  outline: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23B8B8B8' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: border-color var(--t-fast);
}

.field-select:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245,230,0,.20);
}

.field-textarea {
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  font-size: 13px;
  color: var(--black);
  font-family: var(--font);
  outline: none;
  resize: vertical;
  min-height: 68px;
  line-height: 1.6;
  transition: border-color var(--t-fast);
}

.field-textarea:focus {
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(245,230,0,.20);
}

/* ── Distribution tags ── */
.dist-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 3px; }

.dist-tag {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 20px;
  background: var(--black);
  color: var(--white);
  display: flex;
  align-items: center;
  gap: 4px;
}

.dist-tag-remove {
  cursor: pointer;
  font-size: 9px;
  opacity: 0.5;
  transition: opacity var(--t-fast);
}

.dist-tag-remove:hover { opacity: 1; }

.dist-tag-add {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 20px;
  border: 0.5px dashed var(--pale);
  color: var(--mid);
  cursor: pointer;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.dist-tag-add:hover { border-color: var(--light); color: var(--dark); }

/* ── Check group (Infantil, CPB, CRT, IMDb) ── */
.check-group { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }

.check-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  padding: 8px 10px;
  cursor: pointer;
  transition: background var(--t-fast);
}

.check-item:hover { background: var(--pale); }
.check-item-label { font-size: 12px; font-weight: 500; color: var(--dark); }


/* ─────────────────────────────────────────────────────────────
   12. BADGES & STATUS PILLS
───────────────────────────────────────────────────────────── */

.badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
  letter-spacing: 0.03em;
}

/* ── Project status ── */
.badge-dev  { background: var(--s-dev-bg);  color: var(--s-dev-txt); }
.badge-pre  { background: var(--s-pre-bg);  color: var(--s-pre-txt); }
.badge-cam  { background: var(--s-cam-bg);  color: var(--s-cam-txt); }
.badge-prod { background: var(--s-prod-bg); color: var(--s-prod-txt); }
.badge-pos  { background: var(--s-pos-bg);  color: var(--s-pos-txt); }
.badge-del  { background: var(--s-del-bg);  color: var(--s-del-txt); }
.badge-done { background: var(--s-done-bg); color: var(--s-done-txt); }

/* ── Rota status ── */
.badge-r-bk { background: var(--r-bk-bg); color: var(--r-bk-txt); }
.badge-r-ao { background: var(--r-ao-bg); color: var(--r-ao-txt); }
.badge-r-an { background: var(--r-an-bg); color: var(--r-an-txt); }
.badge-r-su { background: var(--r-su-bg); color: var(--r-su-txt); }
.badge-r-ns { background: var(--r-ns-bg); color: var(--r-ns-txt); }
.badge-r-se { background: var(--r-se-bg); color: var(--r-se-txt); }
.badge-r-no { background: var(--r-no-bg); color: var(--r-no-txt); }
.badge-r-pr { background: var(--r-pr-bg); color: var(--r-pr-txt); }
.badge-r-nc { background: var(--r-nc-bg); color: var(--r-nc-txt); }
.badge-r-co { background: var(--r-co-bg); color: var(--r-co-txt); }

/* ── User roles ── */
.badge-role-admin  { background: var(--black); color: var(--yellow); }
.badge-role-editor { background: var(--off-white); color: var(--dark); border: 0.5px solid var(--pale); }
.badge-role-leitor { background: var(--pale); color: var(--mid); }


/* ─────────────────────────────────────────────────────────────
   13. BOTÕES
───────────────────────────────────────────────────────────── */

/* ── Primary (amarelo) ── */
.btn-primary {
  font-size: 12px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--yellow);
  color: var(--black);
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background var(--t-fast);
}

.btn-primary:hover { background: var(--yellow-dark); }

/* ── Secondary ── */
.btn-secondary {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--pale);
  background: var(--white);
  color: var(--dark);
  cursor: pointer;
  font-family: var(--font);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: background var(--t-fast);
}

.btn-secondary:hover { background: var(--off-white); }

/* ── Danger ── */
.btn-danger {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--r-sm);
  border: 0.5px solid #F0C8B8;
  background: #FFF0EC;
  color: #8C3A20;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
  transition: background var(--t-fast);
}

.btn-danger:hover { background: #FFE0D4; }

/* ── Nav month button ── */
.month-nav-btn {
  height: 28px;
  border-radius: var(--r-sm);
  border: 0.5px solid var(--pale);
  background: var(--white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--mid);
  padding: 0 9px;
  font-family: var(--font);
  white-space: nowrap;
  transition: background var(--t-fast);
}

.month-nav-btn:hover { background: var(--off-white); color: var(--dark); }
.month-nav-btn.today { background: var(--yellow); border-color: var(--yellow-dark); color: var(--black); font-weight: 700; font-size: 10px; }

/* ── Add button (small inline) ── */
.btn-add-inline {
  font-size: 11px;
  padding: 4px 11px;
  border-radius: 20px;
  border: 0.5px dashed var(--pale);
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  font-family: var(--font);
  margin-top: 7px;
  transition: border-color var(--t-fast), color var(--t-fast);
}

.btn-add-inline:hover { border-color: var(--light); color: var(--dark); }


/* ─────────────────────────────────────────────────────────────
   14. TOGGLE SWITCH
───────────────────────────────────────────────────────────── */

.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--off-white);
}

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

.toggle-info .toggle-label { font-size: 13px; font-weight: 500; color: var(--black); }
.toggle-info .toggle-sub   { font-size: 11px; color: var(--light); margin-top: 2px; }

.toggle-switch {
  width: 33px;
  height: 18px;
  border-radius: 10px;
  background: var(--pale);
  position: relative;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--t-base);
}

.toggle-switch.on { background: var(--yellow); }

.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  transition: left var(--t-base);
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.toggle-switch.on .toggle-knob {
  left: 17px;
  background: var(--black);
}


/* ─────────────────────────────────────────────────────────────
   15. CONFIGURAÇÕES (sidebar + list-items)
───────────────────────────────────────────────────────────── */

/* ── Config layout ── */
.config-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  gap: 14px;
  padding: 16px 18px 40px;
  max-width: 960px;
}

/* ── Sidebar ── */
.config-sidebar { display: flex; flex-direction: column; gap: 1px; }

.sidebar-section-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--light);
  padding: 12px 8px 5px;
  display: block;
}

.sidebar-section-label:first-child { padding-top: 0; }

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13px;
  color: var(--dark);
  transition: background var(--t-fast);
  user-select: none;
}

.sidebar-item:hover { background: var(--pale); }

.sidebar-item.active {
  background: var(--black);
  color: var(--white);
  font-weight: 500;
}

.sidebar-item.active .sidebar-icon { color: var(--yellow); }

.sidebar-icon { font-size: 13px; width: 18px; text-align: center; flex-shrink: 0; }
.sidebar-divider { height: 0.5px; background: var(--pale); margin: 5px 0; }

/* ── Config list items ── */
.config-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--off-white);
  transition: background var(--t-fast);
}

.config-list-item:last-child { border-bottom: none; }
.config-list-item:hover { background: #FAFAF8; }

.config-item-name { font-size: 13px; font-weight: 500; color: var(--black); flex: 1; }
.config-item-meta { font-size: 11px; color: var(--light); }

/* ── Add row ── */
.config-add-row {
  padding: 9px 14px;
  border-top: 0.5px solid var(--pale);
  display: flex;
  align-items: center;
  gap: 8px;
}

.config-add-input {
  flex: 1;
  background: var(--off-white);
  border: 0.5px solid var(--pale);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-size: 12px;
  font-family: var(--font);
  color: var(--black);
  outline: none;
  transition: border-color var(--t-fast);
}

.config-add-input:focus { border-color: var(--yellow); }
.config-add-input::placeholder { color: var(--light); }

.config-add-btn {
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: var(--r-sm);
  border: none;
  background: var(--yellow);
  color: var(--black);
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}

/* ── Color swatch picker ── */
.color-swatches { display: flex; gap: 4px; flex-wrap: wrap; }

.color-swatch {
  width: 17px;
  height: 17px;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid transparent;
  transition: border-color var(--t-fast);
}

.color-swatch.selected { border-color: var(--black); }

/* ── Users table ── */
.user-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 0.5px solid var(--off-white);
}

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

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--yellow);
  flex-shrink: 0;
}

.user-name  { font-size: 13px; font-weight: 500; color: var(--black); }
.user-email { font-size: 11px; color: var(--light); }


/* ─────────────────────────────────────────────────────────────
   16. ROTA — FILMES COLAPSÁVEIS
───────────────────────────────────────────────────────────── */

/* ── Film header row ── */
.film-row td {
  background: var(--off-white);
  padding: 10px;
  border-top: 0.5px solid var(--pale);
  border-bottom: 0.5px solid var(--pale);
  cursor: pointer;
  user-select: none;
  transition: background var(--t-fast);
}

.film-row:hover td { background: #EDEDE9; }

.film-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-xs);
  border: 0.5px solid var(--pale);
  background: var(--white);
  font-size: 9px;
  color: var(--mid);
  transition: transform var(--t-base);
  flex-shrink: 0;
}

.film-chevron.open { transform: rotate(90deg); }

.film-title { font-size: 13px; font-weight: 700; color: var(--black); }
.film-meta  { font-size: 10px; color: var(--light); margin-top: 1px; font-family: var(--font-mono); }

.film-badges {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  margin-left: 8px;
}

.film-add-btn {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: var(--black);
  background: var(--yellow);
  border: none;
  border-radius: var(--r-xs);
  padding: 4px 10px;
  cursor: pointer;
  font-family: var(--font);
  white-space: nowrap;
}

/* ── Festival sub-row ── */
.festival-row td {
  padding: 8px 10px;
  border-bottom: 0.5px solid var(--off-white);
  vertical-align: middle;
}

.festival-row:hover td { background: #FAFAF8; }
.festival-row:last-of-type td { border-bottom: none; }

.festival-name-cell { font-size: 12px; font-weight: 500; color: var(--black); }

/* ── Mini summary badges (film row when collapsed) ── */
.mini-badge-sel { background: var(--r-se-bg); color: var(--r-se-txt); }
.mini-badge-pr  { background: var(--r-pr-bg); color: var(--r-pr-txt); }
.mini-badge-su  { background: var(--r-su-bg); color: var(--r-su-txt); }
.mini-badge-bk  { background: var(--r-bk-bg); color: var(--r-bk-txt); }


/* ─────────────────────────────────────────────────────────────
   17. UTILITÁRIOS
───────────────────────────────────────────────────────────── */

/* Display helpers */
.d-none   { display: none !important; }
.d-flex   { display: flex; }
.d-grid   { display: grid; }
.d-block  { display: block; }

/* Flex helpers */
.flex-1      { flex: 1; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-end  { justify-content: flex-end; }
.gap-4   { gap: 4px; }
.gap-6   { gap: 6px; }
.gap-8   { gap: 8px; }
.gap-10  { gap: 10px; }
.gap-12  { gap: 12px; }

/* Spacing */
.mb-8   { margin-bottom: 8px; }
.mb-10  { margin-bottom: 10px; }
.mb-12  { margin-bottom: 12px; }
.mb-14  { margin-bottom: 14px; }
.mt-8   { margin-top: 8px; }
.mt-10  { margin-top: 10px; }
.mt-14  { margin-top: 14px; }

/* Text helpers */
.text-nowrap  { white-space: nowrap; }
.text-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }

/* Color helpers */
.color-yellow { color: var(--yellow); }
.color-black  { color: var(--black); }
.color-mid    { color: var(--mid); }
.color-light  { color: var(--light); }
.color-up     { color: #1B6E38; }
.color-down   { color: #8C3A20; }

/* Background helpers */
.bg-yellow-pale { background: var(--yellow-pale); }
.bg-off         { background: var(--off-white); }

/* Border helpers */
.border-top    { border-top: 0.5px solid var(--pale); }
.border-bottom { border-bottom: 0.5px solid var(--pale); }

/* Divider */
.divider {
  height: 0.5px;
  background: var(--pale);
  margin: 6px 0;
}

/* Sticky header helper */
.sticky-top {
  position: sticky;
  top: var(--nav-h);
  z-index: var(--z-dropdown);
}

/* Scroll areas */
.overflow-x { overflow-x: auto; }
.overflow-y { overflow-y: auto; }

/* Focus ring (accessibility) */
:focus-visible {
  outline: 2px solid var(--yellow);
  outline-offset: 2px;
}


/* ─────────────────────────────────────────────────────────────
   18. RESPONSIVIDADE
───────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  :root {
    --gantt-label-w: 140px;
  }

  .dash-grid-3  { grid-template-columns: 1fr 1fr; }
  .dash-grid-32 { grid-template-columns: 1fr; }
  .dash-grid-23 { grid-template-columns: 1fr; }
  .film-cards-grid { grid-template-columns: 1fr 1fr; }

  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .summary-grid.cols-5 { grid-template-columns: repeat(3, 1fr); }

  .config-layout { grid-template-columns: 1fr; }
  .config-sidebar {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    border-bottom: 0.5px solid var(--pale);
    padding-bottom: 10px;
    margin-bottom: 10px;
  }

  .sidebar-section-label { display: none; }
  .sidebar-divider { display: none; }

  .sidebar-item {
    font-size: 12px;
    padding: 6px 10px;
  }

  .mode-bar { flex-wrap: wrap; }

  .toolbar { gap: 6px; }

  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: 1; }

  .check-group { grid-template-columns: repeat(2, 1fr); }

  .rota-status-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile (≤ 768px) ── */
@media (max-width: 768px) {
  :root {
    --nav-h: 48px;
    --gantt-label-w: 110px;
    --gantt-row-h: 36px;
    --sidebar-w: 100%;
  }

  body { font-size: 13px; }

  /* Nav: oculta links, mantém logo + avatar */
  .nav-links { display: none; }
  .nav-role  { display: none; }

  /* Hamburger pode ser adicionado via JS */

  .page { padding: 12px 14px 32px; }

  .page-header { flex-direction: column; align-items: flex-start; gap: 10px; }

  .summary-grid { grid-template-columns: 1fr 1fr; }
  .summary-grid.cols-5 { grid-template-columns: 1fr 1fr; }

  .stat-value { font-size: 22px; }

  .dash-grid-3,
  .dash-grid-2,
  .dash-grid-32,
  .dash-grid-23,
  .dash-grid-21 { grid-template-columns: 1fr; }

  .film-cards-grid { grid-template-columns: 1fr; }

  .rota-status-grid { grid-template-columns: repeat(2, 1fr); }

  .toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .search-box {
    max-width: 100%;
    width: 100%;
  }

  .chips { flex-wrap: wrap; }

  .filter-divider { display: none; }

  .modal { max-width: 100%; border-radius: var(--r) var(--r) 0 0; }
  .modal-scrim { align-items: flex-end; padding: 0; }
  .modal-scrim.open .modal { transform: translateY(0); }

  .modal-body { max-height: 60vh; }

  .table-scroll { -webkit-overflow-scrolling: touch; }

  .month-nav-btn { padding: 0 7px; font-size: 11px; }

  .config-layout { padding: 12px 14px 32px; gap: 10px; }

  .view-toggle-btn span { display: none; }

  .gantt-header { top: var(--nav-h); }

  .check-group { grid-template-columns: 1fr 1fr; }
}

/* ── Small mobile (≤ 480px) ── */
@media (max-width: 480px) {
  .summary-grid { grid-template-columns: 1fr; }

  .form-grid { grid-template-columns: 1fr; }

  .modal-tabs { overflow-x: auto; }
  .modal-tab  { flex-shrink: 0; }

  .stat-value { font-size: 20px; }
}