@layer reset, theme, classless, elements, components, layout, utilities;

@import url('/static/css/nectar/reset.css') layer(reset);


@import url('/static/css/nectar/classless.css') layer(classless);
@import url('/static/css/nectar/elements.css') layer(elements);
@import url('/static/css/nectar/components.css') layer(components);
@import url('/static/css/nectar/layout.css') layer(layout);
@import url('/static/css/nectar/utilities.css') layer(utilities);

/* Turbo transitions remain unlayered so they have highest priority */
/* @import url('/static/css/turbo.css'); */

/* ============================================================
   App layouts (Mel design system). Unlayered: the app's own rules,
   only layout, with the DS tokens.
   ============================================================ */

/* ---------- Auth layout (base_auth.html): centered card ---------- */
.auth-brand { display: flex; justify-content: center; margin-bottom: var(--spacing-md); }
.auth-brand .mel-wordmark { height: 34px; }
.auth-title { margin: 0 0 var(--spacing-lg); text-align: center; font-size: var(--text-2xl); font-weight: 800; }
.auth-label { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-sm); }
.auth-label a { font-size: var(--text-sm); font-weight: 700; }
.auth-links { margin-top: var(--spacing-lg); padding-top: var(--spacing-md); border-top: 1px solid var(--border-subtle); text-align: center; font-size: var(--text-sm); color: var(--text-muted); }
.auth-links p { margin: 0; }
.auth-links a { font-weight: 700; }
.auth-links .lucide { vertical-align: -0.15em; }

/* ---------- Footer (site + admin) ---------- */
.site-foot { padding: var(--spacing-md); text-align: center; font-size: var(--text-xs); color: var(--text-muted); }
.site-foot p { margin: 0; }

/* ---------- Site header (base.html) ---------- */
.site-nav { display: flex; align-items: center; gap: var(--spacing-xs); }
.site-nav a[aria-current] { color: var(--text-main); background: color-mix(in srgb, var(--color-primary) 13%, transparent); }
@media (max-width: 480px) {
  .site-nav .btn { padding-inline: var(--spacing-sm); }
  .site-nav .btn .lucide { display: none; }
}

/* ---------- Theme toggle (v-theme-toggle): the icon of the other theme ---------- */
.theme-toggle .theme-toggle-light,
[data-theme="dark"] .theme-toggle .theme-toggle-dark { display: none; }
[data-theme="dark"] .theme-toggle .theme-toggle-light { display: contents; }
.theme-toggle .theme-toggle-dark { display: contents; }
@media (hover: none) {
  .theme-toggle[data-tooltip]::before, .theme-toggle[data-tooltip]::after { display: none; }
}

/* ---------- Settings menu (v-settings-menu): wraps instead of scrolling ---------- */
@media (max-width: 860px) { .mel-side-nav { flex-wrap: wrap; overflow: visible; } }

/* ---------- Admin shell (base_admin.html) ---------- */
.mel-rail a.is-danger { color: var(--color-error); }
@media (max-width: 820px) { .app-topbar .mel-logo { margin-right: auto; } }
/* the avatar opens the user menu (Nectar .dropdown) */
.topbar-user {
  padding: 4px 8px 4px 4px; border: 0; border-radius: var(--radius-md);
  background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.topbar-user:hover { background: var(--dropdown-hover-bg); }
.topbar-user .id-name { font-size: var(--text-sm); }
.topbar-user > .lucide { color: var(--text-muted); }
.topbar-menu .dropdown-menu { min-width: 14rem; }
.topbar-menu-head {
  display: flex; flex-direction: column; line-height: 1.3;
  padding: var(--spacing-xs) var(--spacing-md) var(--spacing-sm);
  margin-bottom: var(--spacing-xs); border-bottom: 1px solid var(--dropdown-border);
}
.topbar-menu-head .id-sub { font-size: var(--text-xs); overflow-wrap: anywhere; }

/* ---------- CRUD list (crud/list.html) ---------- */
.data-card th a { display: inline-flex; align-items: center; gap: var(--spacing-xs); color: inherit; text-decoration: none; }
.data-card th a:hover { color: var(--text-main); }
.data-card .row-actions { flex-wrap: nowrap; }
.data-card td:first-child { font-weight: 700; color: var(--text-main); }

/* ---------- CRUD forms ---------- */
fieldset.form-section { margin: 0; border: 0; min-width: 0; }
.form-section + fieldset.form-section { border-top: 1px solid var(--border-subtle); }
form .grid-2 { row-gap: 0; }
.form-section > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--spacing-md); font-weight: 800; }
.form-section > legend + * { clear: both; }

/* ---------- Developer quick start (welcome pages) ---------- */
.accordion-content > :last-child { margin-bottom: 0; }
.accordion-content pre { max-width: 100%; }
.qs-intro { margin: 0 0 var(--spacing-md); color: var(--text-muted); font-size: var(--text-sm); overflow-wrap: anywhere; }


/* ============================================================
   Gerenciador de projetos (ported from the Protodesign prototype).
   Page patterns prefixed with pg-; Nectar tokens only.
   ============================================================ */
.btn.btn-outline { background-color: var(--bg-surface); box-shadow: var(--shadow-xs); }
.btn.btn-outline:hover:not(:disabled) { background-color: var(--bg-surface); box-shadow: var(--shadow-sm); }
.select { padding-right: var(--spacing-lg); }
dialog.modal { max-height: calc(100dvh - var(--spacing-lg)); }
dialog.modal > form { display: flex; flex-direction: column; max-height: calc(100dvh - var(--spacing-lg)); }
dialog.modal > form > .modal-header, dialog.modal > form > .modal-footer { flex-shrink: 0; }
dialog.modal > form > .modal-body { overflow-y: auto; min-height: 0; flex: 1 1 auto; }
.pg-gap { margin-bottom: var(--spacing-lg); }
.mel-crumbs { margin-bottom: var(--spacing-md); }
.pg-link { text-decoration: none; color: inherit; }
.pg-m0 { margin: 0; }
.pg-avatars { display: inline-flex; align-items: center; }
.pg-avatars .avatar { box-shadow: 0 0 0 2px var(--bg-surface); font-size: var(--text-xs); }
.pg-avatars .avatar + .avatar { margin-left: calc(var(--spacing-xs) * -1); }
#i-comments h3 { font-size: var(--text-base); margin: var(--spacing-sm) 0; }
.pg-comment { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-md); font-size: var(--text-sm); }
.pg-comment p { margin: 2px 0 0; }
.avatar.pg-xs { width: 26px; height: 26px; font-size: 11px; }
.modal-body .field:last-child { margin-bottom: 0; }
.pg-tabbar { display: flex; margin-bottom: var(--spacing-lg); overflow-x: auto; }
.pg-tabbar .mel-segs button { font-size: var(--text-sm); padding: var(--spacing-sm) var(--spacing-md); }
.pg-tabbar .mel-segs .badge { font-size: var(--text-xs); }
.tabs .tab-panels { padding-top: 0; }
.pg-actions-col { width: 1%; }
.pg-rep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }
.pg-rep-head h2 { margin: 0; font-size: var(--text-2xl); }
.pg-rep-head p { margin: var(--spacing-xs) 0 0; color: var(--text-muted); }
.pg-rep-tools { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; align-items: center; }
.pg-rep-tools .select { width: auto; margin: 0; }
.pg-rep-sum { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--spacing-lg); align-items: center; }
.pg-rep-sum h3, .pg-rep-sec h3 { margin: 0 0 var(--spacing-sm); font-size: var(--text-lg); }
.pg-rep-sum p { margin: 0 0 var(--spacing-sm); }
.pg-rep-sum ul { margin: 0; padding-left: var(--spacing-md); color: var(--text-muted); }
.pg-rep-sum li { margin-bottom: var(--spacing-xs); }
.pg-pct { text-align: center; }
.pg-pct .pg-pct-n { font-size: var(--text-5xl); font-weight: 800; line-height: 1; font-family: var(--font-mono); }
.pg-pct .progress { margin: var(--spacing-sm) 0; }
.pg-pct .text-sm { color: var(--text-muted); }
.pg-rep-chart .bar-chart { --bar-chart-height: 200px; }
.pg-rep-chart .bar-chart-bar { max-width: 36px; }
.pg-rep-chart .bar-chart-bar.is-low { background: var(--slate-300); }
.pg-print-only { display: none; }
@media print { @page { size: A4; margin: 14mm; } html, body, .app-shell, .app-content, .app-main { background: var(--bg-surface) !important; } #painel-relatorio .table { font-size: var(--text-xs); } #painel-relatorio .pg-title-cell { min-width: 0; } .mel-rail, .mel-rail-backdrop, .app-topbar, .mel-crumbs, .mel-head, .pg-tabbar, .pg-noprint, dialog { display: none !important; } .app-shell, .app-content, .app-main { display: block !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; } .app-main-inner { max-width: none !important; animation: none !important; } .tab-panel { display: none !important; } #painel-relatorio { display: block !important; } .pg-print-only { display: block; } .card, .data-card, .stat-horizontal { box-shadow: none !important; } .card, .stat-horizontal { break-inside: avoid; } tr { break-inside: avoid; } .table-scroll { overflow: visible !important; } .quartet { grid-template-columns: repeat(4, 1fr) !important; } .pg-rep-sum { grid-template-columns: 1.4fr 1fr !important; } }
.pg-title { flex-wrap: wrap; }
.pg-title h1 { margin: 0; }
.pg-title-cell { min-width: 260px; white-space: normal; }
.pg-sec { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; padding: var(--spacing-md); border-bottom: 1px solid var(--border-subtle); }
.pg-sec[hidden] { display: none; }
.pg-sec h2 { margin: 0; font-size: var(--text-lg); font-weight: var(--font-weight-bold); }
.pg-sec .text-sm { color: var(--text-muted); }
.pg-sec .select, .pg-sec .input { width: auto; margin: 0; }
.pg-sec .input { min-width: 220px; }
.pg-quick { display: flex; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--border-subtle); }
.pg-quick .input { margin: 0; flex: 1; }
.pg-active { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-md); align-items: center; }
.pg-active h2 { margin: 0 0 var(--spacing-xs); font-size: var(--text-xl); }
.pg-active p { margin: 0 0 var(--spacing-sm); }
.pg-active .progress { margin: var(--spacing-sm) 0 0; }
.pg-figs { display: flex; gap: var(--spacing-lg); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); }
.pg-figs b { display: block; color: var(--text-main); font-size: var(--text-lg); }
.pg-role { width: auto; min-width: 190px; margin: 0; }
@media (max-width: 760px) { .pg-rep-sum { grid-template-columns: 1fr; } .pg-rep-tools, .pg-rep-tools .select { width: 100%; } .pg-active { grid-template-columns: 1fr; } .pg-sec .input, .pg-sec .select { flex: 1 1 100%; min-width: 0; } .pg-sec .mel-spacer { display: none; } }
/* Modals never grow past the viewport: header and footer stay, the body scrolls.
   Works for dialog > (turbo-frame >) form > header/body/footer and for direct children. */
dialog.modal[open] { display: flex; flex-direction: column; max-height: calc(100dvh - 2 * var(--spacing-md)); }
dialog.modal > form, dialog.modal > turbo-frame, dialog.modal > turbo-frame > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
dialog.modal .modal-header, dialog.modal .modal-footer { flex: none; }
dialog.modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
dialog.modal.pg-wide { width: min(1240px, 96vw); max-width: 96vw; }
@media (max-width: 760px) { dialog.modal[open] { max-height: 100dvh; } dialog.modal.pg-wide { width: 100vw; max-width: 100vw; } .pg-wide .pg-msplit { grid-template-columns: 1fr; } }
.pg-mform .modal-body { padding: 0; color: var(--text-main); }
.pg-mform .form-section { padding: var(--spacing-md) var(--spacing-lg); }
.pg-mform .form-section .field:last-child { margin-bottom: 0; }
.pg-mform .modal-footer { flex-wrap: wrap; align-items: center; }
.pg-mform .modal-footer .btn { margin: 0; }
.pg-msplit { display: grid; grid-template-columns: minmax(0, 1fr) 280px; }
@media (min-width: 761px) { .pg-wide .pg-msplit { grid-template-columns: minmax(0, 1fr) 320px; } }
.pg-mside { padding: var(--spacing-md) var(--spacing-lg); border-left: 1px solid var(--border-subtle); background: color-mix(in srgb, var(--text-muted) 5%, var(--bg-surface)); }
.pg-mside .field:last-child { margin-bottom: 0; }
.pg-meta { margin: 0; padding: var(--spacing-sm) var(--spacing-lg); border-top: 1px solid var(--border-subtle); font-size: var(--text-xs); color: var(--text-muted); }
.pg-subs { display: flex; flex-direction: column; gap: var(--spacing-sm); margin-bottom: var(--spacing-sm); }
.pg-subs .input { margin: 0; }
.pg-planned { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; }
.pg-planned .btn { margin: 0; }
.dropdown.pg-ac { display: block; }
.pg-ac .input { margin: 0; padding-left: calc(var(--spacing-md) + 1.25rem); }
.pg-ac-ic { position: absolute; left: var(--spacing-sm); top: 20px; display: inline-flex; transform: translateY(-50%); width: 1.1rem; height: 1.1rem; margin-left: var(--spacing-xs); color: var(--text-muted); pointer-events: none; z-index: 1; }
.pg-ac .dropdown-menu { position: static; display: none; width: 100%; max-height: 220px; overflow-y: auto; margin-top: var(--spacing-xs); }
.pg-ac:focus-within .dropdown-menu { display: block; }
.pg-ac .dropdown-item { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; border: 0; background: none; font: inherit; text-align: left; }
.pg-ac .dropdown-item[hidden], .pg-ac [hidden] { display: none; }
.pg-ac-empty { margin: 0; padding: var(--spacing-sm) var(--spacing-md); color: var(--text-muted); font-size: var(--text-sm); }
.pg-opt-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.pg-opt-text small { color: var(--text-muted); font-size: var(--text-xs); }
.pg-picked { margin-top: var(--spacing-md); }
.pg-picked:not(:has(li)) { display: none; }
.pg-picked .list-group-item { display: flex; align-items: center; gap: var(--spacing-sm); }
.pg-picked .pg-opt-text { flex: 1; }
.pg-picked .select { width: auto; margin: 0; }
.pg-bl-tools { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; padding: var(--spacing-sm) var(--spacing-lg); border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; }
.pg-bl-tools .input, .pg-bl-tools .select { margin: 0; width: auto; }
.pg-bl-tools .input { flex: 1; min-width: 180px; }
#bl-table tr[hidden] { display: none; }
#bl-table th, #bl-table td { padding-left: 12px; padding-right: 12px; }
#bl-table .pg-title-cell { min-width: 240px; white-space: normal; }
@media (max-width: 760px) { .pg-msplit { grid-template-columns: 1fr; } .pg-mside { order: -1; border-left: 0; border-bottom: 1px solid var(--border-subtle); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--spacing-md); } .pg-mside > .help-text { grid-column: 1 / -1; } .pg-mform .form-section, .pg-mside, .pg-bl-tools { padding-left: var(--spacing-md); padding-right: var(--spacing-md); } .pg-bl-tools .select { flex: 1 1 100%; } .pg-bl-foot > .text-sm { flex: 1 1 100%; } .pg-bl-foot .mel-spacer { display: none; } .pg-picked .list-group-item { flex-wrap: wrap; } .pg-picked .pg-opt-text { flex: 1 1 calc(100% - 40px); } .pg-picked .select { flex: 1; } #bl-table th:nth-child(3), #bl-table td:nth-child(3), #bl-table th:nth-child(5), #bl-table td:nth-child(5) { display: none; } #bl-table .pg-title-cell { min-width: 0; } .pg-mform .modal-footer .btn { flex: 1; justify-content: center; } }
.pg-tools { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }
.mel-tiles { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--spacing-lg); }
.mel-card-body { padding: var(--spacing-lg) var(--spacing-lg) var(--spacing-md); gap: var(--spacing-md); }
.mel-card-head { gap: var(--spacing-md); }
.mel-card-meta { padding-top: var(--spacing-xs); }
.mel-card-foot { padding: var(--spacing-md) var(--spacing-lg); gap: var(--spacing-sm); }
.pg-tools .input { max-width: 300px; margin: 0; }
.pg-prog { display: flex; flex-direction: column; gap: var(--spacing-sm); }
.pg-prog .level { font-size: var(--text-xs); color: var(--text-muted); font-weight: 700; }
.pg-prog .progress { margin: 0; }
.pg-new { text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--spacing-sm); min-height: 280px; border: 2px dashed var(--border-base); border-radius: var(--radius-lg); background: transparent; color: var(--text-muted); font: inherit; font-weight: 700; cursor: pointer; }
.pg-new:hover { border-color: var(--color-primary); color: var(--color-primary-text); }
@media (max-width: 640px) { .pg-tools .input { max-width: none; flex: 1 1 100%; } }
.pg-sum { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: var(--spacing-lg); align-items: center; padding: var(--spacing-md) var(--spacing-lg); }
.pg-sum .stat-label { margin: 0; }
.pg-sum .stat-value { font-size: var(--text-xl); font-family: var(--font-mono); }
.pg-sum .pg-period { font-size: var(--text-lg); white-space: nowrap; }
.pg-sum .progress { margin: var(--spacing-xs) 0 0; }
.pg-sum-bar .level { font-size: var(--text-sm); color: var(--text-muted); font-weight: 600; }
.pg-tools .select { width: auto; margin: 0; }
.pg-who { display: inline-flex; gap: var(--spacing-xs); }
.pg-who button { padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.pg-who button[aria-pressed="true"] .avatar { box-shadow: 0 0 0 2px var(--bg-base), 0 0 0 4px var(--color-primary); }
.pg-board { display: grid; grid-template-columns: repeat(4, minmax(240px, 1fr)); gap: var(--spacing-md); align-items: start; overflow-x: auto; padding-bottom: var(--spacing-sm); }
.pg-col { display: flex; flex-direction: column; gap: var(--spacing-sm); min-height: 320px; padding: var(--spacing-sm); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--text-muted) 8%, transparent); border: 1px solid var(--border-subtle); transition: background var(--transition-fast), border-color var(--transition-fast); }
.pg-col.is-over { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.pg-col-h { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-xs) 0; }
.pg-col-h h2 { margin: 0; font-size: var(--text-sm); font-weight: var(--font-weight-heavy); text-transform: uppercase; letter-spacing: .04em; }
.pg-col-h .mel-spacer { flex: 1; }
.pg-col-h .pg-pts { font-size: var(--text-xs); color: var(--text-muted); font-family: var(--font-mono); }
.pg-list { display: flex; flex-direction: column; gap: var(--spacing-sm); flex: 1; min-height: 60px; }
.pg-task { position: relative; padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm); cursor: grab; display: flex; flex-direction: column; gap: var(--spacing-sm); transition: box-shadow var(--transition-fast), border-color var(--transition-fast); }
.pg-task:hover { box-shadow: var(--shadow-md); border-color: var(--border-base); }
.pg-task:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pg-task.is-dragging { opacity: .45; }
.pg-task[hidden] { display: none; }
.pg-task-top { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.pg-task-title { margin: 0; font-weight: var(--font-weight-semibold); font-size: var(--text-sm); line-height: var(--leading-snug); }
.pg-task-sub { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); font-weight: 600; }
.pg-task-sub .lucide { width: 14px; height: 14px; }
.pg-task-foot { display: flex; align-items: center; gap: var(--spacing-sm); }
.pg-task-foot > span:first-child { display: inline-flex; }
.pg-task-foot .lucide { width: 16px; height: 16px; }
.pg-task-foot .mel-spacer { flex: 1; }
.pg-col[data-col="done"] .pg-task-title { color: var(--text-muted); text-decoration: line-through; }
.pg-add { justify-content: flex-start; width: 100%; background: var(--bg-surface); border-style: dashed; }
.pg-burn { width: 100%; height: auto; display: block; overflow: visible; }
.pg-burn .grid line { stroke: var(--border-subtle); }
.pg-burn .axis text { fill: var(--text-muted); font-size: 11px; font-family: var(--font-mono); }
.pg-burn .ideal { fill: none; stroke: var(--slate-400); stroke-width: 2; stroke-dasharray: 6 5; }
.pg-burn .real { fill: none; stroke: var(--color-primary-text); stroke-width: 2; stroke-linejoin: round; }
.pg-burn .pt { fill: var(--color-primary-text); stroke: var(--bg-surface); stroke-width: 2; }
.pg-burn .lbl { font-size: 12px; font-weight: 700; fill: var(--text-main); }
.pg-burn .lbl-muted { fill: var(--text-muted); }
.pg-burn .today { stroke: var(--text-muted); stroke-width: 1; }
.pg-burn .hit { fill: transparent; cursor: crosshair; }
.pg-burn-wrap { position: relative; }
.pg-tip { position: absolute; pointer-events: none; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-sm); box-shadow: var(--shadow-md); padding: var(--spacing-xs) var(--spacing-sm); font-size: var(--text-xs); white-space: nowrap; transform: translate(-50%, calc(-100% - 10px)); }
.pg-tip[hidden] { display: none; }
.pg-legend { display: flex; gap: var(--spacing-md); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--spacing-sm); }
.pg-legend span { display: inline-flex; align-items: center; gap: var(--spacing-xs); }
.pg-legend i { display: inline-block; width: 18px; border-top: 2px solid var(--color-primary-text); }
.pg-legend i.is-ideal { border-top: 2px dashed var(--slate-400); }
.pg-legend i.is-review { border-top: 2px solid var(--color-info); }
.pg-burn .review { fill: none; stroke: var(--color-info); stroke-width: 2; stroke-linejoin: round; }
.pg-burn-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
.pg-burn-figs .stat-value { font-size: var(--text-xl); font-family: var(--font-mono); }
.pg-detail-grid { display: grid; grid-template-columns: 1fr 220px; gap: var(--spacing-lg); }
.pg-detail-grid h3 { font-size: var(--text-base); margin: 0 0 var(--spacing-sm); }
@media (max-width: 1100px) { .pg-sum { grid-template-columns: repeat(3, 1fr); } .pg-sum-bar { grid-column: 1 / -1; } }
@media (max-width: 760px) { .pg-tools .input { max-width: none; flex: 1 1 100%; } .pg-sum { gap: var(--spacing-md); padding: var(--spacing-md); } .pg-sum .stat-label { font-size: var(--text-xs); } .pg-sum .pg-period { font-size: var(--text-sm); } .pg-detail-grid { grid-template-columns: 1fr; } }
.pg-add-row { display: flex; gap: var(--spacing-xs); }
/* Board on phones: one column at a time, chosen in the tabs; cards move with the "Mover" menu */
.pg-coltabs { display: none; }
.pg-task-top .mel-spacer { flex: 1; }
.pg-task-top { justify-content: flex-start; }
.pg-task-move { position: relative; z-index: 2; margin: -6px -8px -6px 0; color: var(--text-muted); }
.pg-task-move .lucide { width: 16px; height: 16px; }
.pg-move-menu { position: absolute; z-index: 60; right: var(--spacing-sm); top: 36px; min-width: 12rem; padding: 6px; background: var(--dropdown-bg); border: 1px solid var(--dropdown-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.pg-move-menu[hidden] { display: none; }
.pg-move-h { padding: 4px var(--spacing-md) 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.pg-move-menu .dropdown-item { display: flex; align-items: center; gap: var(--spacing-sm); width: 100%; border: 0; background: none; text-align: left; font: inherit; font-size: var(--text-sm); }
.pg-move-menu .dropdown-item:disabled { opacity: .45; cursor: default; transform: none; }
@media (max-width: 760px) {
  .pg-coltabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; position: sticky; top: 0; z-index: 5; margin: 0 calc(var(--spacing-md) * -1) var(--spacing-sm); padding: var(--spacing-xs) var(--spacing-md); background: var(--bg-base); }
  .pg-coltabs button { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 2px 6px; min-height: 52px; padding: 4px 2px; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-muted); font: inherit; font-size: 11px; font-weight: 700; line-height: 1.15; text-align: center; cursor: pointer; }
  .pg-coltabs button > .badge { grid-row: 1; grid-column: 2; font-size: 11px; padding: 0 6px; }
  .pg-coltabs button > span:first-child { grid-row: 1; grid-column: 1; }
  .pg-coltabs button > .pg-tab-label { grid-row: 2; grid-column: 1 / -1; }
  .pg-coltabs button[aria-selected="true"] { color: var(--text-main); border-color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
  .pg-board { grid-template-columns: 1fr; overflow: visible; }
  .pg-col { min-height: 0; }
  .pg-col:not(.is-current) { display: none; }
  .pg-col-h h2 { display: none; }
  .pg-col-h .status-dot, .pg-col-h [data-count] { display: none; }
  .pg-task { cursor: default; }
  .pg-task-move { min-width: 40px; min-height: 40px; }
  .pg-head-grid { width: 100%; }
  .pg-head-grid .btn { flex: 1 1 auto; justify-content: center; }
}
.pg-add-row .pg-add { flex: 1; }
.pg-pk { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--spacing-lg); align-items: start; }
.pg-pk-item .card-body { display: flex; flex-direction: column; gap: var(--spacing-sm); padding: var(--spacing-lg); }
.pg-pk-item h2 { margin: 0; font-size: var(--text-2xl); line-height: 1.25; }
.pg-pk-item p { margin: 0; color: var(--text-muted); }
.pg-pk-item ul { margin: 0; padding-left: var(--spacing-md); color: var(--text-muted); font-size: var(--text-sm); }
.pg-kicker { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-muted); }
.pg-table { padding: var(--spacing-lg); }
.pg-table-h { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }
.pg-table-h h3 { margin: 0; font-size: var(--text-lg); }
.pg-seats { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--spacing-lg) var(--spacing-md); }
.pg-seat { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-sm); text-align: center; font-size: var(--text-sm); }
.pg-seat small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
.pg-slot { width: 64px; height: 88px; border-radius: var(--radius-md); display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--text-2xl); font-weight: 800; border: 2px dashed var(--border-base); color: var(--text-muted); background: var(--bg-surface); transition: transform var(--transition-fast); }
.pg-slot .lucide { width: 22px; height: 22px; }
.pg-slot.is-down { border: 2px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 18%, var(--bg-surface)); color: var(--color-primary-text); }
.pg-slot.is-up { border: 2px solid var(--border-base); background: var(--bg-surface); color: var(--text-main); box-shadow: var(--shadow-sm); }
.pg-slot.is-off { border-style: solid; border-color: var(--border-subtle); background: transparent; }
.pg-actions { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; margin-top: var(--spacing-lg); padding-top: var(--spacing-lg); border-top: 1px solid var(--border-subtle); }
.pg-result { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.pg-result[hidden] { display: none; }
.pg-result .stat-value { font-family: var(--font-mono); font-size: var(--text-3xl); }
.pg-dist { display: flex; flex-direction: column; gap: var(--spacing-xs); font-size: var(--text-sm); }
.pg-dist-row { display: grid; grid-template-columns: 28px 1fr 64px; gap: var(--spacing-sm); align-items: center; }
.pg-dist-row b { font-family: var(--font-mono); text-align: right; }
.pg-dist-row .progress { margin: 0; }
.pg-dist-row span:last-child { color: var(--text-muted); }
.pg-final { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; grid-column: 1 / -1; padding-top: var(--spacing-md); border-top: 1px solid var(--border-subtle); }
.pg-final .select { width: auto; min-width: 96px; margin: 0; }
.pg-hand-wrap { padding: var(--spacing-lg); }
.pg-hand-wrap h3 { margin: 0 0 var(--spacing-md); font-size: var(--text-lg); }
.pg-hand { display: flex; gap: var(--spacing-sm); flex-wrap: wrap; }
.pg-hand button { width: 60px; height: 84px; border-radius: var(--radius-md); border: 1.5px solid var(--border-base); background: var(--bg-surface); box-shadow: var(--shadow-xs); font: inherit; font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 800; color: var(--text-main); cursor: pointer; display: grid; place-items: center; transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); }
.pg-hand button .lucide { width: 22px; height: 22px; }
.pg-hand button:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); }
.pg-hand button[aria-pressed="true"] { transform: translateY(-8px); border: 2px solid var(--color-primary); background: color-mix(in srgb, var(--color-primary) 16%, var(--bg-surface)); color: var(--color-primary-text); box-shadow: var(--shadow-md); }
.pg-hand-wrap .help-text { margin: var(--spacing-md) 0 0; }
.pg-queue .card-body { padding: var(--spacing-lg); }
.pg-queue h3 { margin: 0 0 var(--spacing-xs); font-size: var(--text-lg); }
.pg-queue .progress { margin: var(--spacing-sm) 0 var(--spacing-md); }
.pg-q { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); }
.pg-q li { display: grid; grid-template-columns: 1fr auto; gap: var(--spacing-xs) var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); font-size: var(--text-sm); }
.pg-q li .code-chip { justify-self: start; }
.pg-q li p { margin: 0; grid-column: 1 / -1; font-weight: 600; }
.pg-q li.is-current { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-surface)); }
.pg-q li.is-done p { color: var(--text-muted); }
.pg-queue .btn { width: 100%; margin-top: var(--spacing-md); }
@media (max-width: 1000px) { .pg-pk { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .pg-result { grid-template-columns: 1fr 1fr; } .pg-dist { grid-column: 1 / -1; } .pg-hand button { width: 52px; height: 74px; font-size: var(--text-lg); } .pg-pk-item .card-body, .pg-table, .pg-hand-wrap, .pg-queue .card-body { padding: var(--spacing-md); } .pg-seats { grid-template-columns: repeat(3, 1fr); } }
.pg-split { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--spacing-lg); align-items: start; }
.pg-side { display: flex; flex-direction: column; gap: var(--spacing-lg); position: sticky; top: var(--spacing-md); }
.pg-form { max-width: 880px; }
.form-section + .form-section { margin-top: var(--spacing-sm); }
.form-foot .btn { margin: 0; }
.pg-tips { margin: var(--spacing-sm) 0 0; padding-left: var(--spacing-md); color: var(--text-muted); font-size: var(--text-sm); }
.pg-tips li + li { margin-top: var(--spacing-xs); }
.pg-count { margin: var(--spacing-sm) 0 0; }
@media (max-width: 1024px) { .pg-split { grid-template-columns: 1fr; } .pg-side { position: static; } }
@media (max-width: 560px) { .pg-picked .list-group-item { flex-wrap: wrap; } .pg-picked .select { width: auto; flex: 1 1 100%; order: 3; } }

/* ---------- Editor.js (WYSIWYG) ---------- */
.pg-editor { min-height: 140px; display: flex; flex-direction: column; border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-main); cursor: text; }
.pg-editor[hidden] { display: none; }
.pg-editor:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 25%, transparent); }
.pg-editor.is-sm { min-height: 80px; }
.pg-editor .pg-prose { flex: 1; padding: var(--spacing-sm) var(--spacing-md); outline: none; line-height: var(--leading-normal, 1.5); overflow-wrap: anywhere; }
.pg-prose > :first-child { margin-top: 0; }
.pg-prose > :last-child { margin-bottom: 0; }
.pg-prose p { margin: 0 0 var(--spacing-sm); }
.pg-prose h2, .pg-prose h3, .pg-prose h4 { margin: var(--spacing-md) 0 var(--spacing-sm); }
.pg-prose img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.pg-prose img.ProseMirror-selectednode { outline: 3px solid var(--color-primary); }
/* "Criar itens com IA": prints stay small so several fit in the dialog (the file goes whole) */
.pg-editor.is-prints .pg-prose img { max-height: 240px; width: auto; display: inline-block; margin: 0 var(--spacing-sm) var(--spacing-sm) 0; }
.pg-prose a { text-decoration: underline; }
.pg-prose p.is-editor-empty:first-child::before { content: attr(data-placeholder); float: left; height: 0; color: var(--text-muted); pointer-events: none; }
.pg-prose ul[data-type="taskList"], .pg-rich .pg-task-list { list-style: none; padding-left: 0; }
.pg-prose ul[data-type="taskList"] li, .pg-rich .pg-task-item { display: flex; align-items: flex-start; gap: var(--spacing-sm); }
.pg-prose ul[data-type="taskList"] li > label { flex: none; margin-top: 3px; }
.pg-prose ul[data-type="taskList"] li > div, .pg-rich .pg-task-item > div { flex: 1; }
.pg-rich .pg-task-item > input { margin-top: 4px; }
.pg-md-source { display: block; width: 100%; margin: 0; border-top-left-radius: 0; border-top-right-radius: 0; resize: vertical; font-size: var(--text-sm); }
.pg-md-source[hidden] { display: none; }
.pg-rich > :last-child { margin-bottom: 0; }
.pg-rich li > p, .pg-prose li > p { margin: 0; }
.pg-rich img { max-width: 100%; height: auto; border-radius: var(--radius-md); }
.pg-rich figure { margin: 0 0 var(--spacing-sm); }
.pg-rich figcaption { font-size: var(--text-xs); color: var(--text-muted); }

/* ---------- Misc app patterns ---------- */
.pg-inline { display: inline; margin: 0; }
.pg-subs label { flex: 1; }
.pg-sub { display: flex; align-items: center; gap: var(--spacing-xs); }
.pg-sub .btn { margin: 0; }
.pg-empty-cell { padding: var(--spacing-lg); text-align: center; color: var(--text-muted); }
.pg-start-list { max-height: 50vh; overflow-y: auto; }
.pg-new-sm { min-height: 160px; }
dialog.modal turbo-frame { display: contents; }
.pg-frame-loading { padding: var(--spacing-xl); text-align: center; color: var(--text-muted); }
.topbar-user-text { display: flex; flex-direction: column; line-height: 1.25; }
.topbar-user-text .id-sub { font-size: var(--text-xs); }
/* segmented control made of links (GET filters / tabs) */
.mel-segs a { display: inline-flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 8px; text-decoration: none; white-space: nowrap; }
.mel-segs a .lucide { width: 15px; height: 15px; }
.mel-segs a:hover { color: var(--text-main); text-decoration: none; }
.mel-segs a.is-active { background: var(--bg-surface); color: var(--text-main); box-shadow: var(--shadow-xs), inset 0 0 0 1.5px color-mix(in srgb, var(--color-primary) 55%, transparent); }
.pg-tabbar .mel-segs a { font-size: var(--text-sm); padding: var(--spacing-sm) var(--spacing-md); }

/* ---------- Personal tasks ---------- */
.pg-task-list { list-style: none; margin: 0; padding: 0; }
.pg-task-row { display: flex; align-items: flex-start; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--border-subtle); scroll-margin-top: var(--spacing-xl); }
.pg-task-row:first-child { border-top: 0; }
.pg-task-row:target { background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-surface)); }
.pg-task-row form { padding-top: 3px; }
.pg-task-main { flex: 1; min-width: 0; }
.pg-task-main .pg-link { overflow-wrap: anywhere; }
.pg-task-notes { margin: 2px 0 0; font-size: var(--text-sm); color: var(--text-muted); white-space: pre-line; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pg-task-meta { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; justify-content: flex-end; }
.pg-task-meta .mel-chip .lucide { width: 13px; height: 13px; }
.pg-task-row.is-done .pg-link { color: var(--text-muted); text-decoration: line-through; }
.pg-quick-due { max-width: 220px; }
@media (max-width: 640px) {
  .pg-task-row { flex-wrap: wrap; }
  .pg-task-meta { flex: 1 1 100%; justify-content: flex-start; padding-left: calc(var(--spacing-md) + 18px); }
  .pg-quick { flex-wrap: wrap; }
  .pg-quick .input { flex: 1 1 100%; max-width: none; }
}

/* ---------- Notifications (bell + list) ---------- */
.pg-bell .dropdown-trigger { position: relative; }
.pg-bell-count { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-error); color: #fff; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.pg-bell-count[hidden] { display: none; }
.pg-bell-menu { min-width: 20rem; max-width: min(24rem, calc(100vw - 2 * var(--spacing-md))); }
.pg-bell-empty { margin: 0; padding: var(--spacing-sm) var(--spacing-md); color: var(--text-muted); font-size: var(--text-sm); }
.pg-notif { display: flex; align-items: flex-start; gap: var(--spacing-sm); color: inherit; text-decoration: none; }
.pg-notif:hover { text-decoration: none; }
.pg-notif-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; flex: 1; white-space: normal; }
.pg-notif-text small { color: var(--text-muted); font-size: var(--text-xs); }
.pg-notif.is-unread .pg-notif-text > span::before, .pg-notif-list .is-unread .pg-notif-text > span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--color-primary); vertical-align: 1px; }
.pg-notif-list { list-style: none; margin: 0; padding: 0; }
.pg-notif-list li { border-top: 1px solid var(--border-subtle); }
.pg-notif-list li:first-child { border-top: 0; }
.pg-notif-list .pg-notif { padding: var(--spacing-sm) var(--spacing-md); align-items: center; }
.pg-notif-list .pg-notif:hover { background: color-mix(in srgb, var(--text-muted) 6%, transparent); }
.pg-notif-list .is-unread { background: color-mix(in srgb, var(--color-primary) 6%, var(--bg-surface)); }

/* Tones shared by item types, priorities and statuses (chips and pickers) */
.tone-success { --tone: var(--color-success); }
.tone-info { --tone: var(--color-info); }
.tone-error { --tone: var(--color-error); }
.tone-warning { --tone: var(--color-warning); }
.tone-primary { --tone: var(--color-primary-text); }
.tone-purple { --tone: #8b5cf6; }
.tone-neutral, .tone-none { --tone: var(--text-muted); }
.mel-chip.pg-kind { color: var(--tone); background: color-mix(in srgb, var(--tone) 12%, transparent); border-color: color-mix(in srgb, var(--tone) 30%, transparent); }
.mel-chip.pg-kind .lucide { width: 13px; height: 13px; }

/* Custom select (v-pick): button + listbox with icon and color per option */
.pg-pick { position: relative; min-width: 0; }
.pg-pick-btn { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); width: 100%; min-height: 42px; padding: 0 var(--spacing-md); border: 1px solid var(--border-base); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--text-main); font: inherit; cursor: pointer; text-align: left; }
.pg-pick-btn:hover { border-color: var(--color-primary); }
.pg-pick-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.pg-pick-btn:disabled { cursor: not-allowed; opacity: .7; background: var(--bg-muted, var(--bg-surface)); }
.pg-pick-btn .pg-pick-caret { width: 16px; height: 16px; color: var(--text-muted); flex: none; }
.pg-pick.is-sm .pg-pick-btn { min-height: 34px; font-size: var(--text-sm); padding: 0 var(--spacing-sm); }
.pg-pick-opt { display: inline-flex; align-items: center; gap: var(--spacing-sm); min-width: 0; }
.pg-pick-opt > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-pick-opt .lucide { width: 16px; height: 16px; color: var(--tone); flex: none; }
.pg-pick-list { position: absolute; z-index: 60; left: 0; right: 0; top: calc(100% + 4px); min-width: 180px; max-height: 280px; overflow: auto; margin: 0; padding: var(--spacing-xs); list-style: none; background: var(--bg-surface); border: 1px solid var(--border-base); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.pg-pick-list li { display: flex; padding: var(--spacing-sm) var(--spacing-sm); border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-sm); }
.pg-pick-list li:hover, .pg-pick-list li:focus { background: color-mix(in srgb, var(--tone) 10%, transparent); outline: none; }
.pg-pick-list li[aria-selected="true"] { font-weight: 700; background: color-mix(in srgb, var(--tone) 14%, transparent); }

/* Active sprint card: actions at the bottom, aligned left */
.pg-active { grid-template-columns: 1fr; }
.pg-card-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); justify-content: flex-start; }

/* Sprints table: wraps instead of scrolling sideways */
.pg-sprints td, .pg-sprints th { white-space: normal; }
.pg-sprints .row-actions { flex-wrap: wrap; justify-content: flex-end; }
.pg-sprints td:first-child, .pg-sprints td.pg-nowrap { white-space: nowrap; }
.pg-nowrap { white-space: nowrap; }

/* Backlog: filters and sortable headers */
.pg-filters .pg-filter-row { display: flex; flex-wrap: wrap; gap: var(--spacing-sm); width: 100%; }
.pg-filter-row .select, .pg-filter-row .pg-pick { width: auto; min-width: 150px; flex: 0 1 auto; }
.pg-filter-row[hidden] { display: none; }
.pg-filters .pg-filter-row { align-items: center; }
.pg-filter-row .select, .pg-filter-row .input, .pg-filter-row .btn, .pg-filter-row .pg-pick-btn { height: 38px; min-height: 38px; padding-top: 0; padding-bottom: 0; font-size: var(--text-sm); }
.pg-filter-row .select { max-width: 260px; text-overflow: ellipsis; }
.pg-filter-row .pg-filter-q { flex: 1 1 220px; max-width: 320px; }
.pg-filter-row [data-toggle] .badge { margin-left: 2px; }
@media (max-width: 760px) { .pg-filter-row .pg-filter-q, .pg-filter-row .select, .pg-filter-row .pg-pick, .pg-filter-row .btn { flex: 1 1 100%; max-width: none; min-width: 0; justify-content: center; } }
.pg-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; white-space: nowrap; }
.pg-sort:hover { color: var(--text-main); text-decoration: none; }
.pg-sort .lucide { width: 12px; height: 12px; opacity: 0; transition: opacity .15s; }
.pg-sort:hover .lucide, .pg-sort:focus-visible .lucide { opacity: .5; }
.pg-sort.is-active .lucide { opacity: 1; color: var(--color-primary-text); }
.pg-sort.is-right { justify-content: flex-end; width: 100%; }
#backlog td { white-space: nowrap; }
#backlog td.pg-title-cell { white-space: normal; min-width: 220px; }
#backlog td.pg-ref-cell { white-space: normal; min-width: 140px; max-width: 220px; }

/* Documentation tab */
.pg-docs { list-style: none; margin: 0; padding: 0; }
.pg-doc { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-bottom: 1px solid var(--border-subtle); }
.pg-doc:last-child { border-bottom: 0; }
.pg-doc-main { flex: 1; min-width: 0; }
.pg-doc-main .text-sm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* About tab */
.pg-about { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--spacing-md); align-items: start; }
.pg-card-t { font-size: var(--text-lg); margin: 0 0 var(--spacing-sm); }
.pg-pre { white-space: pre-line; margin: 0; }
.pg-facts { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-xs) var(--spacing-md); margin: 0 0 var(--spacing-md); font-size: var(--text-sm); }
.pg-facts dt, .pg-facts dd { margin: 0; padding: 0; line-height: 1.5; }
.pg-facts dt { color: var(--text-muted); font-weight: 400; }
@media (max-width: 768px) { .pg-about { grid-template-columns: 1fr; } }
.pg-editor.is-lg { min-height: 420px; }
.pg-editor.is-md { min-height: 320px; }
.pg-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-xs); margin: var(--spacing-xs) 0 var(--spacing-md); }

/* Projects table + autocomplete */
.pg-projects td { vertical-align: middle; }
.pg-sprint-cell { min-width: 200px; }
.pg-sprint-cell .progress { margin: 2px 0; }
.pg-sprint-cell .text-xs + .level { margin-top: 8px; }
.pg-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; max-width: 420px; }
.pg-ac { position: relative; width: min(100%, 360px); }
.pg-ac .input { width: 100%; margin: 0; }
/* Projects index: the search box lines up with the last stat card above and the table below */
.pg-tools .pg-ac .input { max-width: none; }
.pg-ac-ic-mid { top: 50%; }
.pg-tools .pg-ac-list { position: absolute; margin-top: 0; }
@media (min-width: 768px) { .pg-tools .pg-ac { width: calc((100% - 3 * var(--spacing-md)) / 4); } }
.pg-ac-list { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60; display: block; margin: 0; padding: var(--spacing-xs); list-style: none; }
.pg-ac-list[hidden] { display: none; }
.pg-ac-list a { display: flex; align-items: center; gap: var(--spacing-sm); padding: var(--spacing-sm); border-radius: var(--radius-sm); color: var(--text-main); text-decoration: none; }
.pg-ac-list a:hover, .pg-ac-list a.is-active { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.pg-ac-list .pg-ac-empty { padding: var(--spacing-sm); color: var(--text-muted); font-size: var(--text-sm); }
.pg-final-pts { width: 7rem; }

/* Editor.js fixed toolbar */
.pg-etb { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--border-base); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: color-mix(in srgb, var(--text-muted) 6%, var(--bg-surface)); }
.pg-etb + .pg-editor { border-top-left-radius: 0; border-top-right-radius: 0; }
.pg-etb-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 30px; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-main); cursor: pointer; }
.pg-etb-btn:hover { background: color-mix(in srgb, var(--color-primary) 14%, transparent); }
.pg-etb-btn:focus-visible { outline: 2px solid var(--color-primary); }
.pg-etb-btn .lucide { width: 16px; height: 16px; }
.pg-etb-sep { width: 1px; height: 20px; margin: 0 4px; background: var(--border-base); }
.pg-etb-btn[aria-pressed="true"] { background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-primary-text); }
.pg-etb-btn.pg-etb-text { width: auto; gap: 6px; padding: 0 var(--spacing-sm); font: inherit; font-size: var(--text-sm); }
.pg-etb.is-source .pg-etb-btn:not([data-etb="markdown"]) { opacity: .35; pointer-events: none; }
.pg-etb .mel-spacer { flex: 1; }
/* Forms being submitted (Turbo sets aria-busy): no double submits, visible progress */
form[aria-busy="true"] button[type="submit"] { opacity: .6; pointer-events: none; cursor: progress; }
form[aria-busy="true"] button[type="submit"]::after { content: "…"; }
#backlog th, #backlog td { padding-left: 10px; padding-right: 10px; }
/* Sort arrow sits in the cell padding, so headers don't widen the columns */
.pg-sort { position: relative; }
.pg-sort .lucide { position: absolute; right: -11px; top: 50%; transform: translateY(-50%); }
.pg-sort.is-right { padding-right: 0; }
#backlog td.pg-title-cell { min-width: 180px; }
#backlog td.pg-ref-cell { min-width: 120px; }
#backlog { box-sizing: border-box; }

/* Dark theme: white Visie logo (the SVG is red/black on light backgrounds) */
:root[data-theme="dark"] .mel-wordmark { filter: brightness(0) invert(1); }

/* File picker (v-file-drop): the real input covers the area, so click and drag & drop are native */
.pg-drop { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-xs); padding: var(--spacing-lg) var(--spacing-md); border: 2px dashed var(--border-base); border-radius: var(--radius-lg); background: var(--bg-base); color: var(--text-muted); text-align: center; transition: border-color .15s, background .15s; }
.pg-drop:hover, .pg-drop.is-over, .pg-drop:focus-within { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary), transparent 92%); }
.pg-drop:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.pg-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.pg-drop-ic { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-surface); color: var(--color-primary-text); box-shadow: var(--shadow-sm); }
.pg-drop-ic .lucide { width: 20px; height: 20px; }
.pg-drop-text { font-size: var(--text-sm); }
.pg-drop-text strong { color: var(--color-primary-text); }
.pg-drop-files { list-style: none; margin: var(--spacing-sm) 0 0; padding: 0; width: 100%; display: grid; gap: 4px; text-align: left; }
.pg-drop-files[hidden] { display: none; }
.pg-drop-files li { display: flex; justify-content: space-between; gap: var(--spacing-sm); padding: 6px var(--spacing-sm); border-radius: var(--radius-md); background: var(--bg-surface); border: 1px solid var(--border-subtle); color: var(--text-main); font-size: var(--text-sm); }
.pg-drop-files li span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pg-drop-files li span:last-child { flex: none; color: var(--text-muted); font-family: var(--font-mono); font-size: var(--text-xs); }

/* About tab: repository links */
.pg-repos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--spacing-sm); }
.pg-repos li { display: grid; grid-template-columns: auto 1fr; column-gap: var(--spacing-sm); align-items: center; }
.pg-repos .lucide { color: var(--text-muted); }
.pg-repos .text-xs { grid-column: 2; overflow-wrap: anywhere; }

/* ---------- Finance tab and overview ---------- */
.mel-chip.is-warning { color: var(--color-warning-text, #92400e); background: color-mix(in srgb, var(--color-warning) 16%, transparent); border-color: color-mix(in srgb, var(--color-warning) 40%, transparent); }
.pg-sec-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-md); flex-wrap: wrap; margin-bottom: var(--spacing-md); }
.pg-sec-head h2 { margin: 0; }
.pg-sec-head p { margin: 4px 0 0; max-width: 70ch; }
.pg-fin-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.pg-fin .row-actions { justify-content: flex-end; }
.pg-stake-mails { display: flex; align-items: flex-start; gap: 6px; margin: var(--spacing-sm) 0 0; overflow-wrap: anywhere; }
.pg-stake-mails .lucide { width: 14px; height: 14px; margin-top: 3px; flex-shrink: 0; }
.quartet .stat-value.text-error { color: var(--color-error); }
@media (max-width: 860px) { .pg-fin-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Ranking (gamification) ---------- */
.mel-ic.is-warning { background: color-mix(in srgb, var(--color-warning) 16%, transparent); color: var(--color-warning); }
.pg-rank-tools { display: flex; align-items: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: var(--spacing-lg); }
.pg-rank-tools form { margin: 0; }
.pg-rank-tools .select { width: auto; margin: 0; }
.pg-rank-tools .mel-spacer { flex: 1; }
.pg-rank-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: var(--spacing-lg); align-items: start; }
.pg-rank { list-style: none; margin: 0; padding: 0; }
.pg-rank-row { display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-sm) var(--spacing-md); border-top: 1px solid var(--border-subtle); }
.pg-rank-row:first-child { border-top: 0; }
.pg-rank-row.is-me { background: color-mix(in srgb, var(--color-primary) 8%, var(--bg-surface)); }
.pg-rank-pos { width: 32px; text-align: center; font-weight: 800; color: var(--text-muted); font-family: var(--font-mono); }
.pg-rank-pos .lucide { width: 22px; height: 22px; }
.is-top-1 .pg-rank-pos { color: #d4a017; }
.is-top-2 .pg-rank-pos { color: #8f9aa8; }
.is-top-3 .pg-rank-pos { color: #b4693a; }
.pg-rank-name { flex: 1; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.pg-rank-name small, .pg-rank-hist small { display: block; font-weight: 500; font-size: var(--text-xs); color: var(--text-muted); }
.pg-rank-pts { font-size: var(--text-xl); font-weight: 800; }
.pg-rank-pts small { font-size: var(--text-xs); margin-left: 3px; color: var(--text-muted); font-weight: 600; }
.is-top .pg-rank-name { font-size: var(--text-base); }
.pg-rank-hist, .pg-rank-rules { list-style: none; margin: 0; padding: 0; }
.pg-rank-hist li, .pg-rank-rules li { display: flex; gap: var(--spacing-sm); padding: var(--spacing-sm) var(--spacing-md); margin: 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.pg-rank-rules li { flex-direction: column; gap: 2px; }
.pg-rank-hist li:first-child, .pg-rank-rules li:first-child { border-top: 0; }
.pg-rank-delta { min-width: 42px; font-weight: 800; color: var(--color-success); }
.pg-rank-delta.is-neg { color: var(--color-error); }
@media (max-width: 900px) { .pg-rank-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) { .pg-rank-row { padding: var(--spacing-sm) var(--spacing-md); gap: var(--spacing-sm); } .pg-rank-pts { font-size: var(--text-lg); } }
.pg-sec-body { padding: var(--spacing-md); }
.pg-rate { display: flex; justify-content: flex-end; }
.pg-rate .input { max-width: 160px; margin: 0; text-align: right; }
.pg-fin-settings td small { display: block; }
.pg-form-foot { display: flex; justify-content: flex-end; }
@media (max-width: 640px) { .pg-form-foot .btn { flex: 1; justify-content: center; } .pg-sec-body { padding: 0 var(--spacing-md) var(--spacing-md); } }
.pg-rep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--spacing-lg); align-items: start; }
.pg-rep-grid .pg-facts dd { overflow-wrap: anywhere; }
.pg-wrap { flex-wrap: wrap; }
@media (max-width: 960px) { .pg-rep-grid { grid-template-columns: minmax(0, 1fr); } }
@media print { .pg-rep-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Brand: Visie wordmark with "Projetos" under it (v-brand) ---------- */
.pg-brand { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1; }
/* the letter spacing also follows the last letter: the negative margin lines it up with the end of the logo */
.pg-brand-sub { font-family: "Montserrat", var(--font-sans, sans-serif); font-size: 8px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--slate-700, #334155); }
/* no spacing after the last letter, so its right edge meets the wordmark in every browser */
.pg-brand-sub > span { letter-spacing: 0; }
.auth-brand .pg-brand-sub { font-size: 9px; }
:root[data-theme="dark"] .pg-brand-sub { color: var(--slate-300, #cbd5e1); }

/* Project billing: per sprint or fixed price (the radio shows the matching price field) */
.pg-billing-mode { border: 0; padding: 0; margin: 0 0 var(--spacing-md); display: grid; gap: var(--spacing-sm); }
.pg-billing:not(:has(input[name="billing_mode"][value="sprint"]:checked)) .pg-if-sprint,
.pg-billing:not(:has(input[name="billing_mode"][value="fixed"]:checked)) .pg-if-fixed,
.pg-billing:not(:has(input[name="billing_mode"][value="hours"]:checked)) .pg-if-hours { display: none; }
.pg-alloc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px var(--spacing-md); margin-bottom: var(--spacing-sm); }
.pg-alloc label { margin: 0; }
.pg-alloc-name { flex: 1; }

/* ---------- Login with Google (plugins/social) ---------- */
.pg-social { margin-top: var(--spacing-lg); }
.pg-social-sep { display: flex; align-items: center; gap: var(--spacing-md); margin: 0 0 var(--spacing-md); color: var(--text-muted); font-size: var(--text-sm); }
.pg-social-sep::before, .pg-social-sep::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.pg-social .btn-social { justify-content: center; gap: var(--spacing-sm); }
/* Account photo */
.pg-avatar-edit { display: flex; align-items: flex-start; gap: var(--spacing-lg); flex-wrap: wrap; }
.pg-avatar-edit > .vstack { flex: 1 1 280px; min-width: 0; }
.pg-avatar-form { display: flex; flex-direction: column; gap: var(--spacing-sm); align-items: flex-start; }
.pg-avatar-form .pg-drop { width: 100%; }
.pg-avatar-edit form { margin: 0; }
.pg-avatar-mini { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.mel-chip.is-error .mel-dot, .mel-chip.is-warning .mel-dot { background: currentColor; }
.pg-fin td .mel-mono, .pg-fin th { white-space: nowrap; }
.pg-fin td:first-child { min-width: 130px; }
.pg-fin .badge-soft { display: inline-block; margin: 1px 0; }
@media (max-width: 1200px) { .pg-fin .pg-fin-team { display: none; } }

/* ---------- Hours logged on items ---------- */
.pg-time-list { list-style: none; margin: 0 0 var(--spacing-sm); padding: 0; }
.pg-time-list li { display: flex; align-items: center; gap: var(--spacing-sm); padding: 6px 0; border-top: 1px solid var(--border-subtle); font-size: var(--text-sm); }
.pg-time-list li:first-child { border-top: 0; }
.pg-time-day { width: 40px; flex-shrink: 0; }
.pg-time-text { flex: 1; min-width: 0; }
.pg-time-text small { display: block; color: var(--text-muted); overflow-wrap: anywhere; }
.pg-time-new { display: grid; grid-template-columns: 150px 140px minmax(0, 1fr) auto; gap: var(--spacing-sm); align-items: center; }
.pg-time-new .input { margin: 0; }
@media (max-width: 760px) { .pg-time-new { grid-template-columns: 1fr 1fr; } .pg-time-new [data-time-note] { grid-column: 1 / -1; } .pg-time-new .btn { grid-column: 1 / -1; justify-content: center; } }
.pg-hours-chip { text-decoration: none; }

/* ---------- Backlog and sprint tables: fit the screen without horizontal scroll ---------- */
.pg-title-meta { display: none; }
.pg-title-meta > span + span::before { content: "·"; margin: 0 6px; }
.pg-prio-icon { display: none; }
.pg-sprints .row-actions { flex-wrap: nowrap; }
.pg-sprints td:nth-child(2) { white-space: nowrap; }
@media (max-width: 1400px) {
  .pg-backlog .pg-c-story { display: none; }
  .pg-backlog .pg-title-meta:has(.pg-m-story) { display: block; }
  .pg-backlog .pg-title-meta .pg-m-sprint, .pg-backlog .pg-title-meta .pg-m-due { display: none; }
}
@media (max-width: 1200px) {
  .pg-backlog .pg-c-sprint, .pg-backlog .pg-c-due { display: none; }
  .pg-backlog .pg-title-meta:has(span) { display: block; }
  .pg-backlog .pg-title-meta .pg-m-sprint, .pg-backlog .pg-title-meta .pg-m-due { display: inline; }
  .pg-backlog .pg-prio-full { display: none; }
  .pg-backlog .pg-prio-icon { display: inline-flex; }
  .pg-sprints .pg-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-sprints .btn:has(.pg-btn-label) { position: relative; } /* keeps the hidden label inside the table scroller */
}
@media (max-width: 1200px) { .pg-backlog .pg-title-cell { min-width: 140px; } }
@media (max-width: 1100px) { .pg-backlog .pg-chip-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .pg-backlog .pg-c-status .pg-chip-label, .pg-backlog .pg-m-status .pg-chip-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; } }
.pg-sprints .badge-soft { white-space: nowrap; display: inline-block; margin: 1px 0; }
.pg-m-status { display: none; margin-top: 4px; }
@media (max-width: 760px) { .pg-sprints th:nth-child(3), .pg-sprints td:nth-child(3) { display: none; } .pg-backlog .pg-m-status { display: block; } }
/* Related projects (About tab) */
.pg-related { list-style: none; margin: 0 0 var(--spacing-md); padding: 0; display: grid; gap: var(--spacing-sm); }
.pg-related li { display: flex; align-items: baseline; gap: var(--spacing-sm); flex-wrap: wrap; }
.pg-related li > .text-xs { min-width: 84px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; }
.pg-bl-warn { color: var(--color-error); font-weight: 700; }

/* AI helpers */
.pg-ask { display: flex; align-items: center; gap: var(--spacing-sm); }
.pg-sources { list-style: none; margin: 0 0 var(--spacing-md); padding: 0; display: grid; gap: var(--spacing-xs); }
.pg-sources li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--spacing-sm); align-items: start; }
.pg-sources li > svg { margin-top: .2em; }
.pg-sources li > .text-xs { grid-column: 2; }
.pg-ai-btn { margin-top: var(--spacing-xs); }
.pg-ai-out { margin-top: var(--spacing-xs); padding: var(--spacing-sm); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-base); font-size: var(--text-sm); }
.pg-ai-out p, .pg-ai-similar ul { margin: 0 0 var(--spacing-xs); }
.pg-ai-out ul { margin: 0; padding-left: 1.2em; }
.pg-ai-similar { margin-top: var(--spacing-xs); font-size: var(--text-sm); }
.pg-ai-similar ul { padding-left: 1.2em; margin-bottom: 0; }
/* Backlog grouped by story (?group=1): the story row, then its items indented under it */
.pg-grouped .pg-c-story, .pg-grouped .pg-m-story { display: none; }
.pg-grouped .pg-title-meta .pg-m-story + span::before { content: none; }
.pg-grouped tr.pg-g-head > td { background: var(--color-success-bg); border-top: 2px solid color-mix(in srgb, var(--color-success), transparent 60%); }
.pg-grouped tr.pg-g-head > td:first-child, .pg-grouped tr.pg-g-row > td { box-shadow: inset 4px 0 0 var(--color-success); }
.pg-grouped tr.pg-g-child > td:first-child { box-shadow: inset 4px 0 0 color-mix(in srgb, var(--color-success), transparent 55%); }
.pg-grouped tr.pg-g-row > td { background: var(--color-success-bg); border-top: 2px solid color-mix(in srgb, var(--color-success), transparent 60%); padding-top: 6px; padding-bottom: 6px; }
.pg-grouped tr.pg-g-loose > td:first-child, .pg-grouped tr.pg-g-row.pg-g-loose > td { box-shadow: inset 4px 0 0 var(--border-base); }
.pg-grouped tr.pg-g-row.pg-g-loose > td { background: var(--bg-base); border-top-color: var(--border-base); }
#backlog.pg-grouped tr.pg-g-child td.pg-title-cell { position: relative; padding-left: 40px; }
.pg-grouped tr.pg-g-child td.pg-title-cell::before { content: ""; position: absolute; left: 18px; top: 0; height: 50%; width: 12px; border-left: 1.5px solid var(--border-base); border-bottom: 1.5px solid var(--border-base); border-bottom-left-radius: 6px; }
.pg-g-title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pg-g-toggle { padding: 2px; min-height: 0; margin-right: 4px; vertical-align: middle; }
.pg-g-toggle svg { transition: transform .15s; }
.pg-g-toggle[aria-expanded="false"] svg { transform: rotate(-90deg); }
@media (max-width: 760px) { #backlog.pg-grouped tr.pg-g-child td.pg-title-cell { padding-left: 26px; } .pg-grouped tr.pg-g-child td.pg-title-cell::before { left: 9px; width: 9px; } }