/* ============================================================
Bilheteria Express Admin v3 — Bundle CSS local
============================================================
Conteudo deste arquivo (na ordem):
1) tokens.css — design tokens (HSL, shadcn-style)
2) components.css — botoes, cards, modais, sidemenu, etc
3) state-switcher.css — painel demo de estados (loading/empty/error)
IMPORTANTE — Tailwind:
Tailwind ainda eh servido via CDN no dos templates
(mantem comportamento da Phase 1, sem build local complicado).
Para gerar um CSS final com Tailwind purgado e tudo num arquivo
so, ver: produtor/assets/css/admin-v3-build-instructions.md
Ordem de inclusao recomendada nos layouts:
(ou build local)
Quando regerar:
- Apos editar mockups-novo-admin/assets/tokens.css
- Apos editar mockups-novo-admin/assets/components.css
- Apos editar mockups-novo-admin/assets/state-switcher.css
- Apos rebrand (mudanca de cor primaria, radii, etc)
Build atual: concatenacao manual (ver admin-v3-build-instructions.md
para producao com Tailwind CLI standalone + purge).
============================================================ */
/* ============================================================
1) TOKENS — Design Tokens
============================================================ */
:root{--bilheteria-cyan:186 100% 35.5%;--bilheteria-cyan-fg:0 0% 100%;--background:0 0% 100%;--foreground:222.2 84% 4.9%;--card:0 0% 100%;--card-foreground:222.2 84% 4.9%;--popover:0 0% 100%;--popover-foreground:222.2 84% 4.9%;--primary:var(--bilheteria-cyan);--primary-foreground:var(--bilheteria-cyan-fg);--secondary:210 40% 96.1%;--secondary-foreground:222.2 47.4% 11.2%;--muted:210 40% 96.1%;--muted-foreground:215.4 16.3% 46.9%;--accent:186 60% 95%;--accent-foreground:186 100% 20%;--destructive:0 84.2% 60.2%;--destructive-foreground:210 40% 98%;--success:142.1 76.2% 36.3%;--success-foreground:355.7 100% 97.3%;--warning:38 92% 50%;--warning-foreground:48 96% 89%;--info:199 89% 48%;--info-foreground:210 40% 98%;--border:214.3 31.8% 91.4%;--input:214.3 31.8% 91.4%;--ring:var(--bilheteria-cyan);--radius-sm:0.25rem;--radius:0.5rem;--radius-md:0.625rem;--radius-lg:0.75rem;--radius-xl:1rem;--space-1:0.25rem;--space-2:0.5rem;--space-3:0.75rem;--space-4:1rem;--space-6:1.5rem;--space-8:2rem;--space-12:3rem;--space-16:4rem;--font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;--font-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;--text-xs:0.75rem;--text-sm:0.875rem;--text-base:1rem;--text-lg:1.125rem;--text-xl:1.25rem;--text-2xl:1.5rem;--text-3xl:1.875rem;--text-4xl:2.25rem;--shadow-sm:0 1px 2px 0 rgb(0 0 0 / 0.05);--shadow:0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);--shadow-md:0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);--shadow-lg:0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);--shadow-xl:0 20px 25px -5px rgb(0 0 0 / 0.10), 0 8px 10px -6px rgb(0 0 0 / 0.10);--sidebar-width:16rem;--sidebar-width-collapsed:4rem;--header-height:4rem;--container-max:1440px;--duration-fast:120ms;--duration:200ms;--duration-slow:320ms;--ease-out:cubic-bezier(0.16, 1, 0.3, 1);--ease-in-out:cubic-bezier(0.65, 0, 0.35, 1)}
.dark{--background:222.2 84% 4.9%;--foreground:210 40% 98%;--card:222.2 47.4% 8%;--card-foreground:210 40% 98%;--popover:222.2 47.4% 8%;--popover-foreground:210 40% 98%;--primary:186 100% 45%;--primary-foreground:222.2 47.4% 11.2%;--secondary:217.2 32.6% 17.5%;--secondary-foreground:210 40% 98%;--muted:217.2 32.6% 17.5%;--muted-foreground:215 20.2% 65.1%;--accent:186 50% 18%;--accent-foreground:186 100% 80%;--destructive:0 62.8% 50%;--destructive-foreground:210 40% 98%;--success:142.1 70.6% 45.3%;--success-foreground:144.9 80.4% 10%;--warning:48 96% 53%;--warning-foreground:26 83.3% 14.1%;--info:199 89% 60%;--info-foreground:210 40% 98%;--border:217.2 32.6% 17.5%;--input:217.2 32.6% 17.5%;--ring:186 100% 45%}
*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--font-sans);-webkit-font-smoothing:antialiased}
body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-size:var(--text-sm);line-height:1.5}
:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
/* ============================================================
2) COMPONENTS
============================================================ */
button{font-family:inherit;cursor:pointer}
button:disabled{cursor:not-allowed;opacity:0.6}
/* Skip link */
.skip-link{position:absolute;top:-40px;left:0.5rem;z-index:1000;padding:0.5rem 1rem;background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-radius:var(--radius);text-decoration:none;font-weight:600;transition:top var(--duration) var(--ease-out)}
.skip-link:focus{top:0.5rem}
/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;white-space:nowrap;font-weight:500;font-size:var(--text-sm);line-height:1;border-radius:var(--radius);border:1px solid transparent;padding:0.5rem 1rem;height:2.25rem;transition:background-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out),transform var(--duration) var(--ease-out);user-select:none;text-decoration:none}
.btn:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn-primary{background:hsl(var(--primary));color:hsl(var(--primary-foreground))}
.btn-primary:hover:not(:disabled){background:hsl(var(--primary) / 0.9)}
.btn-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.btn-secondary:hover:not(:disabled){background:hsl(var(--secondary) / 0.8)}
.btn-ghost{background:transparent;color:hsl(var(--foreground))}
.btn-ghost:hover:not(:disabled){background:hsl(var(--muted))}
.btn-destructive{background:hsl(var(--destructive));color:hsl(var(--destructive-foreground))}
.btn-destructive:hover:not(:disabled){background:hsl(var(--destructive) / 0.9)}
.btn-info{background:hsl(var(--info));color:hsl(var(--info-foreground));border:1px solid hsl(var(--info))}
.btn-info:hover:not(:disabled){background:hsl(var(--info) / 0.9);border-color:hsl(var(--info) / 0.9)}
.btn-success{background:hsl(var(--success));color:hsl(var(--success-foreground));border:1px solid hsl(var(--success))}
.btn-success:hover:not(:disabled){background:hsl(var(--success) / 0.9);border-color:hsl(var(--success) / 0.9)}
.btn-warning{background:hsl(var(--warning));color:#fff;border:1px solid hsl(var(--warning))}
.btn-warning:hover:not(:disabled){background:hsl(var(--warning) / 0.9);border-color:hsl(var(--warning) / 0.9)}
.btn-outline{background:hsl(var(--background));color:hsl(var(--foreground));border-color:hsl(var(--border))}
.btn-outline:hover:not(:disabled){background:hsl(var(--muted));border-color:hsl(var(--border))}
.btn-link{background:transparent;color:hsl(var(--primary));padding:0;height:auto;border:none;text-decoration:underline;text-underline-offset:2px}
.btn-link:hover:not(:disabled){text-decoration:none}
.btn-sm{height:2rem;padding:0.375rem 0.75rem;font-size:var(--text-xs);border-radius:var(--radius-sm)}
.btn-md{height:2.25rem;padding:0.5rem 1rem;font-size:var(--text-sm)}
.btn-lg{height:2.75rem;padding:0.625rem 1.25rem;font-size:var(--text-base);border-radius:var(--radius-md)}
.btn-icon{width:2.25rem;padding:0}
.btn-icon.btn-sm{width:2rem}
.btn-icon.btn-lg{width:2.75rem}
.btn-loading{position:relative;pointer-events:none;color:transparent !important}
.btn-loading::after{content:"";position:absolute;width:1rem;height:1rem;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin 0.8s linear infinite;color:hsl(var(--primary-foreground))}
.btn-outline.btn-loading::after,.btn-ghost.btn-loading::after,.btn-secondary.btn-loading::after{color:hsl(var(--foreground))}
@keyframes spin{to{transform:rotate(360deg)}}
/* Card */
.card{background:hsl(var(--card));color:hsl(var(--card-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-md);box-shadow:var(--shadow-sm);overflow:hidden}
.card-header{padding:1.25rem 1.5rem;border-bottom:1px solid hsl(var(--border));display:flex;flex-direction:column;gap:0.25rem}
.card-header.row{flex-direction:row;align-items:center;justify-content:space-between}
.card-title{font-size:var(--text-base);font-weight:600;line-height:1.4;margin:0}
.card-description{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin:0}
.card-content{padding:1.5rem}
.card-content.tight{padding:1rem 1.5rem}
.card-footer{padding:1rem 1.5rem;border-top:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:flex-end;gap:0.5rem}
.card-kpi{padding:1.25rem 1.5rem}
.card-kpi .kpi-label{font-size:var(--text-xs);font-weight:500;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.04em}
.card-kpi .kpi-value{font-size:var(--text-3xl);font-weight:700;line-height:1.1;margin-top:0.5rem}
.card-kpi .kpi-delta{display:inline-flex;align-items:center;gap:0.25rem;font-size:var(--text-xs);font-weight:500;margin-top:0.5rem}
.kpi-delta.up{color:hsl(var(--success))}
.kpi-delta.down{color:hsl(var(--destructive))}
.kpi-delta.flat{color:hsl(var(--muted-foreground))}
/* Form */
.label{display:inline-block;font-size:var(--text-sm);font-weight:500;color:hsl(var(--foreground));margin-bottom:0.375rem}
.label-required::after{content:" *";color:hsl(var(--destructive))}
.input,.select,.textarea{display:block;width:100%;height:2.25rem;padding:0.5rem 0.75rem;font-size:var(--text-sm);font-family:inherit;background:hsl(var(--background));color:hsl(var(--foreground));border:1px solid hsl(var(--input));border-radius:var(--radius);transition:border-color var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out)}
.input::placeholder,.textarea::placeholder{color:hsl(var(--muted-foreground))}
.input:focus,.select:focus,.textarea:focus{outline:none;border-color:hsl(var(--ring));box-shadow:0 0 0 3px hsl(var(--ring) / 0.15)}
.input:disabled,.select:disabled,.textarea:disabled{background:hsl(var(--muted));cursor:not-allowed;opacity:0.7}
.textarea{height:auto;min-height:5rem;padding:0.5rem 0.75rem;resize:vertical}
.select{padding-right:2rem;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 0.5rem center;background-size:1rem}
.input-error,.select.input-error,.textarea.input-error{border-color:hsl(var(--destructive))}
.input-error:focus{box-shadow:0 0 0 3px hsl(var(--destructive) / 0.15)}
.helper-text{display:block;font-size:var(--text-xs);color:hsl(var(--muted-foreground));margin-top:0.375rem}
.error-text{display:block;font-size:var(--text-xs);color:hsl(var(--destructive));margin-top:0.375rem}
.form-row{display:grid;grid-template-columns:1fr;gap:0.375rem;margin-bottom:1.25rem}
@media (min-width: 768px){.form-row.horizontal{grid-template-columns:12rem 1fr;gap:1rem;align-items:start}.form-row.horizontal .label{padding-top:0.5rem;margin-bottom:0}}
/* Checkbox / radio */
.checkbox,.radio{appearance:none;width:1rem;height:1rem;border:1px solid hsl(var(--input));background:hsl(var(--background));display:inline-grid;place-content:center;transition:all var(--duration) var(--ease-out);cursor:pointer;flex-shrink:0}
.checkbox{border-radius:var(--radius-sm)}
.radio{border-radius:50%}
.checkbox:checked,.radio:checked{background:hsl(var(--primary));border-color:hsl(var(--primary))}
.checkbox:checked::after{content:"";width:0.75rem;height:0.75rem;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/contain no-repeat}
.radio:checked::after{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:hsl(var(--primary-foreground))}
.checkbox:focus-visible,.radio:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
.checkbox-row,.radio-row{display:flex;align-items:center;gap:0.5rem}
.checkbox-row label,.radio-row label{font-size:var(--text-sm);cursor:pointer}
/* Switch */
.switch{appearance:none;width:2.25rem;height:1.25rem;background:hsl(var(--input));border-radius:999px;position:relative;cursor:pointer;transition:background-color var(--duration) var(--ease-out);flex-shrink:0}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:1rem;height:1rem;background:white;border-radius:50%;transition:transform var(--duration) var(--ease-out);box-shadow:var(--shadow-sm)}
.switch:checked{background:hsl(var(--primary))}
.switch:checked::after{transform:translateX(1rem)}
.switch:focus-visible{outline:2px solid hsl(var(--ring));outline-offset:2px}
/* Badge */
.badge{display:inline-flex;align-items:center;gap:0.25rem;font-size:var(--text-xs);font-weight:500;line-height:1;padding:0.25rem 0.5rem;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge-default{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground))}
.badge-success{background:hsl(var(--success) / 0.12);color:hsl(var(--success))}
.badge-warning{background:hsl(var(--warning) / 0.15);color:hsl(38 92% 35%)}
.badge-destructive{background:hsl(var(--destructive) / 0.12);color:hsl(var(--destructive))}
.badge-info{background:hsl(var(--info) / 0.12);color:hsl(var(--info))}
.badge-outline{background:transparent;color:hsl(var(--foreground));border-color:hsl(var(--border))}
.badge-primary{background:hsl(var(--primary) / 0.12);color:hsl(var(--primary))}
.badge-dot::before{content:"";width:0.375rem;height:0.375rem;border-radius:50%;background:currentColor}
/* Table */
.table-wrapper{width:100%;overflow-x:auto;border:1px solid hsl(var(--border));border-radius:var(--radius-md);background:hsl(var(--card))}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table-header{background:hsl(var(--muted) / 0.5);border-bottom:1px solid hsl(var(--border))}
.table-header th{text-align:left;font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.04em;font-size:var(--text-xs);padding:0.75rem 1rem;white-space:nowrap}
.table-header th.sortable{cursor:pointer;user-select:none}
.table-header th.sortable:hover{color:hsl(var(--foreground))}
.table-row{border-bottom:1px solid hsl(var(--border));transition:background-color var(--duration) var(--ease-out)}
.table-row:last-child{border-bottom:0}
.table-row:hover{background:hsl(var(--muted) / 0.4)}
.table-row.selected{background:hsl(var(--accent))}
.table-cell{padding:0.875rem 1rem;color:hsl(var(--foreground));vertical-align:middle}
.table-cell.tight{padding:0.5rem 1rem}
.table-cell.numeric{text-align:right;font-variant-numeric:tabular-nums}
.table-actions{display:inline-flex;align-items:center;gap:0.25rem;justify-content:flex-end}
.table-empty,.table-loading{text-align:center;padding:3rem 1rem;color:hsl(var(--muted-foreground))}
/* Modal */
.modal-overlay{position:fixed;inset:0;background:rgb(0 0 0 / 0.5);display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;opacity:0;pointer-events:none;transition:opacity var(--duration) var(--ease-out)}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:hsl(var(--card));color:hsl(var(--card-foreground));border-radius:var(--radius-lg);box-shadow:var(--shadow-xl);width:100%;max-width:32rem;max-height:calc(100vh - 2rem);display:flex;flex-direction:column;transform:scale(0.96) translateY(8px);transition:transform var(--duration) var(--ease-out)}
.modal-overlay.open .modal{transform:scale(1) translateY(0)}
.modal.modal-sm{max-width:24rem}
.modal.modal-lg{max-width:48rem}
.modal.modal-xl{max-width:64rem}
.modal.modal-full{max-width:calc(100vw - 2rem);height:calc(100vh - 2rem)}
.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid hsl(var(--border));display:flex;align-items:flex-start;gap:1rem;position:relative}
.modal-title{font-size:var(--text-lg);font-weight:600;margin:0}
.modal-description{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin:0.25rem 0 0}
.modal-close{background:transparent;border:0;padding:0.25rem;border-radius:var(--radius-sm);color:hsl(var(--muted-foreground));display:inline-flex;align-items:center;justify-content:center;margin-left:auto;transition:background-color var(--duration) var(--ease-out)}
.modal-close:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.modal-body{padding:1.25rem 1.5rem;overflow-y:auto;flex:1 1 auto}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:flex-end;gap:0.5rem}
.modal.modal-command{max-width:36rem;margin-top:-10vh}
.command-input{width:100%;padding:1rem 1.25rem;font-size:var(--text-base);border:0;border-bottom:1px solid hsl(var(--border));background:transparent;color:hsl(var(--foreground));outline:none}
.command-list{padding:0.5rem;max-height:24rem;overflow-y:auto}
.command-group-label{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:hsl(var(--muted-foreground));padding:0.75rem 0.75rem 0.25rem}
.command-item{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.75rem;border-radius:var(--radius-sm);font-size:var(--text-sm);color:hsl(var(--foreground));cursor:pointer;text-decoration:none;transition:background-color var(--duration) var(--ease-out)}
.command-item:hover,.command-item.active{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
.kbd{display:inline-flex;align-items:center;padding:0.0625rem 0.375rem;font-family:var(--font-mono);font-size:0.6875rem;font-weight:500;background:hsl(var(--muted));color:hsl(var(--muted-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-sm);line-height:1.4}
/* Toast */
.toast-container{position:fixed;top:1rem;right:1rem;z-index:60;display:flex;flex-direction:column;gap:0.5rem;pointer-events:none;width:100%;max-width:22rem}
.toast{background:hsl(var(--card));color:hsl(var(--card-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:0.75rem 1rem;display:flex;align-items:flex-start;gap:0.625rem;pointer-events:auto;animation:toast-in var(--duration) var(--ease-out);border-left:4px solid hsl(var(--primary))}
.toast.removing{animation:toast-out var(--duration) var(--ease-in-out) forwards}
.toast-success{border-left-color:hsl(var(--success))}
.toast-success .toast-icon{color:hsl(var(--success))}
.toast-error{border-left-color:hsl(var(--destructive))}
.toast-error .toast-icon{color:hsl(var(--destructive))}
.toast-warning{border-left-color:hsl(var(--warning))}
.toast-warning .toast-icon{color:hsl(var(--warning))}
.toast-info{border-left-color:hsl(var(--info))}
.toast-info .toast-icon{color:hsl(var(--info))}
.toast-content{flex:1;min-width:0}
.toast-title{font-weight:600;font-size:var(--text-sm)}
.toast-message{font-size:var(--text-xs);color:hsl(var(--muted-foreground));margin-top:0.125rem}
.toast-close{background:transparent;border:0;padding:0.25rem;border-radius:var(--radius-sm);color:hsl(var(--muted-foreground))}
.toast-close:hover{color:hsl(var(--foreground));background:hsl(var(--muted))}
@keyframes toast-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes toast-out{to{opacity:0;transform:translateX(20px)}}
/* Sidemenu */
.sidemenu{width:var(--sidebar-width);background:hsl(var(--card));border-right:1px solid hsl(var(--border));display:flex;flex-direction:column;flex-shrink:0;height:100vh;max-height:100vh;align-self:flex-start;position:sticky;top:0;transition:width var(--duration) var(--ease-out)}
.sidemenu-collapsed{width:var(--sidebar-width-collapsed)}
.sidemenu-collapsed .sidemenu-item-label,.sidemenu-collapsed .sidemenu-section-label,.sidemenu-collapsed .sidemenu-user-info,.sidemenu-collapsed .sidemenu-logo-text,.sidemenu-collapsed .sidemenu-banner{display:none}
.sidemenu-collapsed .sidemenu-item{justify-content:center;padding-left:0;padding-right:0}
.sidemenu-collapsed .sidemenu-user{justify-content:center}
.sidemenu-header{padding:1rem 1.25rem;display:flex;align-items:center;gap:0.625rem;border-bottom:1px solid hsl(var(--border));height:var(--header-height)}
.sidemenu-logo{width:2rem;height:2rem;border-radius:var(--radius);background:hsl(var(--primary));color:hsl(var(--primary-foreground));display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:var(--text-base);flex-shrink:0}
.sidemenu-logo-text{font-weight:700;font-size:var(--text-base);color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidemenu-banner{margin:0.75rem;padding:0.75rem;background:hsl(var(--warning) / 0.15);border:1px solid hsl(var(--warning) / 0.4);border-radius:var(--radius);font-size:var(--text-xs);color:hsl(38 92% 28%);display:flex;align-items:flex-start;gap:0.5rem}
.sidemenu-nav{flex:1 1 auto;overflow-y:auto;padding:0.75rem 0.5rem;display:flex;flex-direction:column;gap:0.125rem}
.sidemenu-section{margin-top:auto;padding-top:0.75rem;border-top:1px solid hsl(var(--border))}
.sidemenu-section-label{padding:0.5rem 0.75rem 0.25rem;font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:0.04em;color:hsl(var(--muted-foreground))}
.sidemenu-item{display:flex;align-items:center;gap:0.625rem;padding:0.5rem 0.75rem;border-radius:var(--radius);font-size:var(--text-sm);font-weight:500;color:hsl(var(--muted-foreground));text-decoration:none;transition:background-color var(--duration) var(--ease-out),color var(--duration) var(--ease-out);position:relative}
.sidemenu-item:hover{background:hsl(var(--muted));color:hsl(var(--foreground))}
.sidemenu-item-active{background:hsl(var(--accent));color:hsl(var(--accent-foreground));font-weight:600}
.sidemenu-item-active::before{content:"";position:absolute;left:0;top:0.375rem;bottom:0.375rem;width:3px;background:hsl(var(--primary));border-radius:0 var(--radius-sm) var(--radius-sm) 0}
.sidemenu-item-icon{width:1.125rem;height:1.125rem;flex-shrink:0}
.sidemenu-item-label{flex:1}
.sidemenu-item-badge{margin-left:auto;padding:0.0625rem 0.375rem;border-radius:999px;background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-size:0.6875rem;font-weight:600;line-height:1.4}
.sidemenu-footer{margin-top:auto;flex-shrink:0;position:sticky;bottom:0;padding:0.75rem;border-top:1px solid hsl(var(--border));background:hsl(var(--card));z-index:1}
.sidemenu-user{display:flex;align-items:center;gap:0.625rem;padding:0.5rem;border-radius:var(--radius);cursor:pointer;transition:background-color var(--duration) var(--ease-out);position:relative}
.sidemenu-user:hover{background:hsl(var(--muted))}
.sidemenu-user-avatar{width:2rem;height:2rem;border-radius:50%;background:hsl(var(--primary) / 0.15);color:hsl(var(--primary));display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:var(--text-xs);flex-shrink:0}
.sidemenu-user-info{flex:1;min-width:0}
.sidemenu-user-name{font-size:var(--text-sm);font-weight:600;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidemenu-user-role{font-size:var(--text-xs);color:hsl(var(--muted-foreground))}
.sidemenu-drawer{transition:transform var(--duration) var(--ease-out)}
.sidemenu-backdrop{position:fixed;inset:0;background:rgb(0 0 0 / 0.5);z-index:49;opacity:0;pointer-events:none;transition:opacity var(--duration) var(--ease-out)}
.sidemenu-backdrop.open{opacity:1;pointer-events:auto}
/* Topbar */
.topbar{height:var(--header-height);border-bottom:1px solid hsl(var(--border));background:hsl(var(--card));display:flex;align-items:center;padding:0 1rem;gap:0.75rem;position:sticky;top:0;z-index:30}
.topbar-search{flex:1 1 auto;max-width:28rem;display:flex;align-items:center;gap:0.5rem;padding:0.4375rem 0.75rem;border:1px solid hsl(var(--border));border-radius:var(--radius);background:hsl(var(--muted) / 0.5);cursor:text;color:hsl(var(--muted-foreground));font-size:var(--text-sm);transition:border-color var(--duration) var(--ease-out),background-color var(--duration) var(--ease-out)}
.topbar-search:hover{border-color:hsl(var(--ring));background:hsl(var(--background))}
.topbar-search-text{flex:1}
.topbar-actions{display:flex;align-items:center;gap:0.25rem;margin-left:auto}
.topbar-user{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.5rem;border-radius:var(--radius);cursor:pointer;transition:background-color var(--duration) var(--ease-out)}
.topbar-user:hover{background:hsl(var(--muted))}
.notification-dot{position:absolute;top:0.375rem;right:0.375rem;width:0.5rem;height:0.5rem;background:hsl(var(--destructive));border-radius:50%;border:2px solid hsl(var(--card))}
/* Page header */
.page-header{padding:1.25rem 1.5rem;border-bottom:1px solid hsl(var(--border));display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;flex-wrap:wrap;background:hsl(var(--card))}
.page-header-content{min-width:0;flex:1}
.page-title{font-size:var(--text-2xl);font-weight:700;line-height:1.2;margin:0;color:hsl(var(--foreground))}
.page-description{font-size:var(--text-sm);color:hsl(var(--muted-foreground));margin:0.25rem 0 0}
.page-actions{display:flex;align-items:center;gap:0.5rem;flex-shrink:0}
/* Breadcrumb */
.breadcrumb{display:flex;align-items:center;gap:0.375rem;font-size:var(--text-xs);color:hsl(var(--muted-foreground));margin-bottom:0.5rem;flex-wrap:wrap}
.breadcrumb-item{text-decoration:none;color:hsl(var(--muted-foreground));transition:color var(--duration) var(--ease-out)}
.breadcrumb-item:hover{color:hsl(var(--foreground))}
.breadcrumb-item.current{color:hsl(var(--foreground));font-weight:500}
.breadcrumb-separator{width:0.875rem;height:0.875rem;color:hsl(var(--muted-foreground));flex-shrink:0}
/* area-info */
.area-info{background:hsl(var(--accent));color:hsl(var(--accent-foreground));border:1px solid hsl(var(--primary) / 0.2);border-radius:var(--radius-md);padding:1rem 1.25rem;display:flex;align-items:flex-start;gap:0.75rem;margin-bottom:1.25rem}
.area-info-icon{width:2.25rem;height:2.25rem;border-radius:var(--radius);background:hsl(var(--primary) / 0.15);color:hsl(var(--primary));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.area-info-content{flex:1;min-width:0}
.area-info-title{font-weight:600;font-size:var(--text-base);margin:0}
.area-info-description{font-size:var(--text-sm);color:hsl(var(--accent-foreground) / 0.8);margin:0.125rem 0 0}
/* action-menu */
.action-menu{display:flex;align-items:center;gap:0.5rem;padding:0.75rem 0;flex-wrap:wrap}
.action-menu .action-search{margin-left:auto;display:flex;align-items:center;gap:0.375rem}
/* Pagination */
.pagination{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;padding:0.75rem 1rem;border-top:1px solid hsl(var(--border));flex-wrap:wrap}
.pagination-info{font-size:var(--text-xs);color:hsl(var(--muted-foreground))}
.pagination-list{display:flex;align-items:center;gap:0.125rem;list-style:none;margin:0;padding:0}
.pagination-item{display:inline-flex;align-items:center;justify-content:center;min-width:2rem;height:2rem;padding:0 0.5rem;font-size:var(--text-sm);border-radius:var(--radius);color:hsl(var(--foreground));text-decoration:none;border:1px solid transparent;transition:background-color var(--duration) var(--ease-out)}
.pagination-item:hover{background:hsl(var(--muted))}
.pagination-active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));font-weight:600}
.pagination-active:hover{background:hsl(var(--primary))}
.pagination-item.disabled{pointer-events:none;opacity:0.4}
/* Empty state */
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1.5rem;text-align:center;gap:0.625rem}
.empty-state-icon{width:3rem;height:3rem;color:hsl(var(--muted-foreground));margin-bottom:0.5rem}
.empty-state-title{font-size:var(--text-lg);font-weight:600;margin:0}
.empty-state-description{font-size:var(--text-sm);color:hsl(var(--muted-foreground));max-width:28rem;margin:0}
.empty-state-actions{display:flex;gap:0.5rem;margin-top:0.75rem;flex-wrap:wrap;justify-content:center}
/* Skeleton */
.skeleton{display:block;background:hsl(var(--muted));border-radius:var(--radius-sm);position:relative;overflow:hidden}
.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg, transparent 0%, hsl(var(--background) / 0.6) 50%, transparent 100%);transform:translateX(-100%);animation:shimmer 1.4s infinite}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.skeleton-text{height:0.875rem;width:100%}
.skeleton-text.short{width:40%}
.skeleton-text.medium{width:70%}
.skeleton-circle{border-radius:50%}
/* Message banner */
.message{display:flex;align-items:flex-start;gap:0.625rem;padding:0.75rem 1rem;border:1px solid;border-radius:var(--radius);font-size:var(--text-sm);margin-bottom:1rem}
.message-icon{width:1.125rem;height:1.125rem;flex-shrink:0;margin-top:0.125rem}
.message-content{flex:1;min-width:0}
.message-title{font-weight:600}
.message-default{background:hsl(var(--muted) / 0.5);border-color:hsl(var(--border));color:hsl(var(--foreground))}
.message-success{background:hsl(var(--success) / 0.1);border-color:hsl(var(--success) / 0.3);color:hsl(var(--success))}
.message-warning{background:hsl(var(--warning) / 0.12);border-color:hsl(var(--warning) / 0.4);color:hsl(38 92% 28%)}
.message-error{background:hsl(var(--destructive) / 0.1);border-color:hsl(var(--destructive) / 0.3);color:hsl(var(--destructive))}
.message-info{background:hsl(var(--info) / 0.1);border-color:hsl(var(--info) / 0.3);color:hsl(var(--info))}
/* Dropdown */
.dropdown{position:relative;display:inline-block}
.dropdown-menu{position:absolute;top:calc(100% + 0.25rem);right:0;min-width:12rem;background:hsl(var(--popover));color:hsl(var(--popover-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:0.25rem;z-index:40;opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity var(--duration) var(--ease-out),transform var(--duration) var(--ease-out)}
.dropdown-menu.open{opacity:1;pointer-events:auto;transform:translateY(0)}
.dropdown-item{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.625rem;border-radius:var(--radius-sm);font-size:var(--text-sm);color:hsl(var(--foreground));text-decoration:none;cursor:pointer;transition:background-color var(--duration) var(--ease-out);border:0;background:transparent;width:100%;text-align:left}
.dropdown-item:hover{background:hsl(var(--muted))}
.dropdown-item-destructive{color:hsl(var(--destructive))}
.dropdown-item-destructive:hover{background:hsl(var(--destructive) / 0.1)}
.dropdown-divider{height:1px;background:hsl(var(--border));margin:0.25rem 0}
.dropdown-label{padding:0.375rem 0.625rem;font-size:var(--text-xs);font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.04em}
/* Timeline */
.timeline{display:flex;flex-direction:column;gap:0.875rem;padding:0.5rem 0}
.timeline-item{display:flex;gap:0.75rem;align-items:flex-start}
.timeline-icon{width:2rem;height:2rem;border-radius:50%;background:hsl(var(--accent));color:hsl(var(--primary));display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.timeline-content{flex:1;min-width:0;padding-top:0.25rem}
.timeline-title{font-size:var(--text-sm);color:hsl(var(--foreground));margin:0}
.timeline-time{font-size:var(--text-xs);color:hsl(var(--muted-foreground));margin-top:0.125rem}
/* Progress */
.progress{width:100%;height:0.5rem;background:hsl(var(--muted));border-radius:999px;overflow:hidden}
.progress-bar{height:100%;background:hsl(var(--primary));border-radius:999px;transition:width var(--duration-slow) var(--ease-out)}
.progress-bar.success{background:hsl(var(--success))}
.progress-bar.warning{background:hsl(var(--warning))}
.progress-bar.destructive{background:hsl(var(--destructive))}
/* List */
.list{display:flex;flex-direction:column}
.list-item{display:flex;align-items:center;gap:0.75rem;padding:0.875rem 1rem;border-bottom:1px solid hsl(var(--border));text-decoration:none;color:hsl(var(--foreground));transition:background-color var(--duration) var(--ease-out)}
.list-item:last-child{border-bottom:0}
.list-item:hover{background:hsl(var(--muted) / 0.4)}
.list-item-content{flex:1;min-width:0}
.list-item-title{font-size:var(--text-sm);font-weight:600;color:hsl(var(--foreground));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.list-item-subtitle{font-size:var(--text-xs);color:hsl(var(--muted-foreground));margin-top:0.125rem}
.list-item-meta{text-align:right;font-size:var(--text-xs);color:hsl(var(--muted-foreground));flex-shrink:0}
/* state-switcher (panel) */
.state-switcher{position:fixed;bottom:1rem;right:1rem;z-index:40;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-md);box-shadow:var(--shadow-lg);font-size:var(--text-xs);overflow:hidden;max-width:14rem}
.state-switcher-header{padding:0.5rem 0.75rem;background:hsl(var(--muted));border-bottom:1px solid hsl(var(--border));font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:0.04em;font-size:0.6875rem;display:flex;align-items:center;gap:0.375rem}
.state-switcher-options{padding:0.5rem;display:flex;flex-direction:column;gap:0.25rem}
.state-switcher-options label{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0.375rem;border-radius:var(--radius-sm);cursor:pointer;text-transform:capitalize}
.state-switcher-options label:hover{background:hsl(var(--muted))}
[data-state-target]{display:none}
[data-state-target].state-visible{display:block}
[data-state-target].state-visible.flex-mode{display:flex}
[data-state-target].state-visible.grid-mode{display:grid}
/* Utility */
.no-scrollbar::-webkit-scrollbar{display:none}
.no-scrollbar{scrollbar-width:none}
/* Responsive */
@media (max-width: 767px){.page-header{padding:1rem}.page-title{font-size:var(--text-xl)}.modal{max-width:calc(100vw - 1rem)}.toast-container{left:0.5rem;right:0.5rem;max-width:none}.state-switcher{bottom:0.5rem;right:0.5rem;max-width:12rem}}
/* ============================================================
3) STATE SWITCHER (demo) — overlay flutuante para estados
============================================================ */
.demo-state-switcher{position:fixed;bottom:1rem;right:1rem;background:hsl(var(--card));color:hsl(var(--card-foreground));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-lg);padding:0.75rem 1rem 0.5rem;z-index:9999;font-size:0.75rem;font-family:var(--font-sans);min-width:11rem}
.demo-state-switcher h4{font-size:0.625rem;text-transform:uppercase;letter-spacing:0.05em;color:hsl(var(--muted-foreground));margin:0 0 0.5rem 0;font-weight:600}
.demo-state-switcher label{display:flex;align-items:center;gap:0.5rem;padding:0.25rem 0;cursor:pointer;user-select:none;text-transform:capitalize}
.demo-state-switcher label:hover{color:hsl(var(--primary))}
.demo-state-switcher input[type="radio"]{margin:0;accent-color:hsl(var(--primary))}
.demo-state-switcher .close-btn{position:absolute;top:0.25rem;right:0.5rem;background:transparent;border:0;cursor:pointer;color:hsl(var(--muted-foreground));font-size:1rem;line-height:1;padding:0.125rem 0.375rem;border-radius:var(--radius-sm)}
.demo-state-switcher .close-btn:hover{color:hsl(var(--foreground));background:hsl(var(--muted))}
.demo-state-switcher .reopen-btn{position:fixed;bottom:1rem;right:1rem;z-index:9999;background:hsl(var(--primary));color:hsl(var(--primary-foreground));border:0;border-radius:9999px;padding:0.5rem 0.875rem;font-size:0.75rem;font-family:var(--font-sans);cursor:pointer;box-shadow:var(--shadow-lg)}
[data-state="loading"] .has-state{opacity:0.5;pointer-events:none;position:relative}
[data-state="loading"] .has-state::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,hsl(var(--muted) / 0.0) 0,hsl(var(--muted) / 0.4) 50%,hsl(var(--muted) / 0.0) 100%);background-size:200% 100%;animation:state-skeleton 1.4s linear infinite;pointer-events:none}
@keyframes state-skeleton{from{background-position:200% 0}to{background-position:-200% 0}}
[data-state="loading"] .state-loading{display:block}
[data-state="error"] .has-state{display:none}
[data-state="error"] .state-error{display:block}
[data-state="empty"] .has-state{display:none}
[data-state="empty"] .state-empty{display:block}
[data-state="default"] .state-error,[data-state="default"] .state-empty,[data-state="default"] .state-loading,[data-state="populated"] .state-error,[data-state="populated"] .state-empty,[data-state="populated"] .state-loading{display:none}
.state-error,.state-empty,.state-loading{display:none}
/* ============================================================
PATCH 2026-05-01 — classes faltantes detectadas em produção
(inventadas pelos module agents sem entrar no components.css)
============================================================ */
/* --- Filter tabs (Plays/index.phtml: Futuros/Pendentes/Passados/Todos) --- */
.filter-tabs{display:flex;gap:.25rem;border-bottom:1px solid hsl(var(--border));margin-bottom:1.25rem;flex-wrap:wrap}
.filter-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:2px solid transparent;text-decoration:none;cursor:pointer;transition:color var(--duration) var(--ease-out),border-color var(--duration) var(--ease-out);background:transparent;border-top:0;border-left:0;border-right:0;border-radius:0}
.filter-tab:hover{color:hsl(var(--foreground))}
.filter-tab.is-active,.filter-tab[aria-current="page"]{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary))}
.filter-tab .count,.filter-tab .badge-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.25rem;height:1.25rem;padding:0 .375rem;background:hsl(var(--muted));color:hsl(var(--muted-foreground));border-radius:9999px;font-size:.6875rem;font-weight:600}
.filter-tab.is-active .count{background:hsl(var(--primary)/.15);color:hsl(var(--primary))}
/* --- Cards grid wrapper --- */
.cards-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem}
@media (min-width:768px){.cards-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.cards-grid{grid-template-columns:repeat(3,1fr)}}
/* --- Event card structure (Plays/index.phtml) --- */
.event-card{display:flex;flex-direction:column;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-md);overflow:hidden;transition:transform var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out)}
.event-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.event-card.is-featured{grid-column:1 / -1}
.event-card.is-past{opacity:.85;filter:saturate(.55)}
.cover{position:relative;aspect-ratio:16 / 9;background:linear-gradient(135deg,hsl(var(--primary)/.7),hsl(var(--primary)/.35));display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.event-card.is-pending .cover{background:linear-gradient(135deg,hsl(var(--warning)/.85),hsl(var(--warning)/.5))}
.event-card.is-past .cover{background:linear-gradient(135deg,hsl(215 16% 47%),hsl(215 20% 65%))}
.body-card,.event-card .body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.event-card .title,.event-card h3{font-size:.9375rem;font-weight:600;color:hsl(var(--foreground));margin:0;line-height:1.3}
.event-card .sku{font-size:.75rem;color:hsl(var(--muted-foreground));font-family:var(--font-mono)}
.field{display:flex;align-items:center;gap:.5rem;font-size:.8125rem;color:hsl(var(--muted-foreground));margin:0}
.field i,.field [data-lucide]{color:hsl(var(--muted-foreground));flex-shrink:0}
.field strong{color:hsl(var(--foreground));font-weight:600}
.count-text{font-size:.875rem;font-weight:600;color:hsl(var(--foreground));margin-top:.25rem}
.count-text small{color:hsl(var(--muted-foreground));font-weight:400;margin-left:.25rem}
/* --- Status badges (Plays cards) --- */
.badge-status{position:absolute;top:.5rem;right:.5rem;z-index:1}
.map-flag{position:absolute;top:.5rem;left:.5rem;z-index:1;background:hsl(var(--background)/.95);color:hsl(var(--foreground));padding:.25rem .5rem;border-radius:var(--radius-sm);font-size:.6875rem;font-weight:500;display:inline-flex;align-items:center;gap:.25rem}
/* --- Card footer (ações) --- */
.event-card .actions,.event-card-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.3);gap:.5rem;flex-wrap:wrap}
/* --- Result info bar --- */
.result-info{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem;font-size:.875rem;color:hsl(var(--muted-foreground))}
.result-info strong{color:hsl(var(--foreground))}
/* --- View toggle (grid/list) --- */
.view-toggle{display:inline-flex;border:1px solid hsl(var(--border));border-radius:var(--radius);overflow:hidden}
.view-toggle button{padding:.375rem .625rem;background:transparent;border:0;color:hsl(var(--muted-foreground));cursor:pointer}
.view-toggle button.is-active{background:hsl(var(--accent));color:hsl(var(--accent-foreground))}
/* --- Pagination active --- */
.pagination-active,.pagination-item.is-active{background:hsl(var(--primary));color:hsl(var(--primary-foreground));border-color:hsl(var(--primary))}
/* --- Toolbar avancada (details/summary nativo) --- */
.toolbar-advanced{margin-bottom:1rem}
.toolbar-advanced summary{cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:hsl(var(--muted)/.4);border-radius:var(--radius);font-size:.875rem;color:hsl(var(--foreground));list-style:none}
.toolbar-advanced summary::-webkit-details-marker{display:none}
.toolbar-advanced summary::before{content:"";display:inline-block;width:0;height:0;border-left:4px solid currentColor;border-top:4px solid transparent;border-bottom:4px solid transparent;transition:transform var(--duration)}
.toolbar-advanced[open] summary::before{transform:rotate(90deg)}
.toolbar-advanced .filters{padding:1rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);margin-top:.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.75rem}
/* --- Mensagens contextuais --- */
.message-info{background:hsl(var(--info)/.1);border:1px solid hsl(var(--info)/.3);color:hsl(var(--info));padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1rem}
.message-warning{background:hsl(var(--warning)/.1);border:1px solid hsl(var(--warning)/.3);color:hsl(var(--warning));padding:.75rem 1rem;border-radius:var(--radius);font-size:.875rem;margin-bottom:1rem}
/* --- Legacy banner amarelo (admin master >3 events) --- */
[data-flag-admin-master="true"]{outline:2px solid hsl(var(--warning));outline-offset:-2px}
/* ============================================================
PATCH 2026-05-01-b — wrapper .plays-grid + .play-card
(template usa estes nomes; .cards-grid/.event-card foram alias errado)
============================================================ */
.plays-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1.25rem}
@media (min-width:640px){.plays-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1024px){.plays-grid{grid-template-columns:repeat(3,1fr)}}
.play-card{display:flex;flex-direction:column;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius-md);overflow:hidden;transition:transform var(--duration) var(--ease-out),box-shadow var(--duration) var(--ease-out)}
.play-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);border-color:hsl(var(--primary)/.4)}
.play-card .cover{aspect-ratio:16 / 9;background:linear-gradient(135deg,hsl(var(--primary)) 0%,hsl(var(--primary)/.55) 100%);position:relative;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden}
.play-card .cover::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 30%,rgba(255,255,255,.15) 0%,transparent 50%);pointer-events:none}
.play-card .cover [data-lucide]{width:64px!important;height:64px!important;opacity:.55;stroke-width:1.25}
.play-card .body{padding:1rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.play-card .body h3{font-size:.9375rem;font-weight:600;margin:0;line-height:1.3}
.play-card .body h3 a{color:hsl(var(--foreground));text-decoration:none}
.play-card .body h3 a:hover{color:hsl(var(--primary))}
.play-card .sku{font-size:.6875rem;color:hsl(var(--muted-foreground));font-family:var(--font-mono);margin-top:-.125rem}
.play-card .progress{height:6px;background:hsl(var(--muted));border-radius:9999px;overflow:hidden;margin:.25rem 0}
.play-card .progress-bar{height:100%;background:hsl(var(--primary));border-radius:9999px;transition:width var(--duration)}
.play-card .actions{padding:.625rem 1rem;border-top:1px solid hsl(var(--border));background:hsl(var(--muted)/.25);display:flex;align-items:center;justify-content:space-between;gap:.5rem;flex-wrap:wrap}
.play-card .actions .btn{padding:.375rem .75rem;font-size:.8125rem}
/* Featured (full-width) */
.play-card.is-featured{grid-column:1 / -1;flex-direction:row}
.play-card.is-featured .cover{flex:0 0 40%;aspect-ratio:auto}
.play-card.is-featured .body{flex:1}
@media (max-width:768px){.play-card.is-featured{flex-direction:column}.play-card.is-featured .cover{flex:auto;aspect-ratio:16 / 9}}
/* Pendente — gradient warning */
.play-card.is-pending .cover,article[class*="pending"] .cover{background:linear-gradient(135deg,hsl(var(--warning)) 0%,hsl(var(--warning)/.55) 100%)}
/* Past — saturate baixo (já tem inline mas reforça) */
.play-card.is-past{opacity:.85}
.play-card.is-past .cover{filter:saturate(.4)}
/* ============================================================
PATCH 2026-05-01-c — Bootstrap-3 modal legacy
(gerenciar-teatro.phtml e outros usam .modal.fade)
============================================================ */
.modal.fade{display:none;position:fixed;inset:0;z-index:1050;overflow:auto;padding:1rem;background:rgba(0,0,0,.5)}
.modal.fade.in,.modal.fade.show{display:block}
.modal-dialog{max-width:32rem;margin:2rem auto}
.modal-dialog.modal-lg{max-width:48rem}
.modal-content{background:#fff;border-radius:var(--radius-md);box-shadow:var(--shadow-xl);overflow:hidden}
.modal-header{padding:1rem 1.5rem;border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:space-between}
.modal-header.seat-admin-modal-header-danger{background:#dc3545;color:#fff;border-bottom:0}
.modal-header.seat-admin-modal-header{background:hsl(var(--primary));color:#fff;border-bottom:0}
.modal-header .modal-title,.modal-header h4{margin:0;font-size:1rem;font-weight:600}
.modal-body{padding:1.25rem 1.5rem;overflow-y:auto}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid hsl(var(--border));display:flex;justify-content:flex-end;gap:.5rem}
button.close{background:transparent;border:0;color:inherit;opacity:.85;font-size:1.5rem;line-height:1;padding:.25rem .5rem;cursor:pointer}
button.close:hover{opacity:1}
/* Botões legacy gt-btn-* (gerenciar-teatro) */
.gt-btn{padding:.5rem 1rem;border-radius:var(--radius);border:1px solid transparent;font-weight:500;font-size:.875rem;cursor:pointer;display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;line-height:1.25}
.gt-btn-outline{background:#fff;border-color:hsl(var(--border));color:hsl(var(--foreground))}
.gt-btn-outline:hover{background:hsl(var(--muted))}
.gt-btn-danger{background:#dc3545;color:#fff;border-color:#dc3545}
.gt-btn-danger:hover{background:#c82333}
.gt-btn-warning{background:#f0ad4e;color:#fff;border-color:#f0ad4e}
.gt-btn-warning:hover{background:#ec971f}
.gt-btn-primary{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
.gt-btn-primary:hover{filter:brightness(1.05)}
/* ============================================================
PATCH 2026-05-01-d — classes orfas detectadas pelo Templates Sanity audit
============================================================ */
/* Tabs (Users/edit, index, pending, Pdv, Validation, Services, Report) */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid hsl(var(--border));margin-bottom:1rem;flex-wrap:wrap}
.tab{display:inline-flex;align-items:center;gap:.5rem;padding:.625rem 1rem;font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));border-bottom:2px solid transparent;cursor:pointer;background:transparent;border-top:0;border-left:0;border-right:0;text-decoration:none;transition:color var(--duration),border-color var(--duration)}
.tab:hover{color:hsl(var(--foreground))}
.tab.active,.tab[aria-current="true"],.tab[aria-current="page"]{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary))}
.tab .badge,.tab .count{margin-left:.25rem}
/* Section (Users/edit, profile) */
.section{padding:1.25rem 0;border-bottom:1px solid hsl(var(--border));margin-bottom:1rem}
.section:last-child{border-bottom:0;margin-bottom:0}
.section-title{font-size:1rem;font-weight:600;color:hsl(var(--foreground));margin:0 0 .25rem 0}
.section-desc{font-size:.8125rem;color:hsl(var(--muted-foreground));margin:0 0 1rem 0;line-height:1.4}
/* Toolbar (Users, Reports) */
.toolbar{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;margin-bottom:1rem}
.toolbar-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
/* Input group (Users, Settings, Site, Pdv, Services, Validation) */
.input-group{display:flex;align-items:stretch;width:100%}
.input-group>.input,.input-group>input,.input-group>.select,.input-group>select{flex:1 1 auto;border-radius:0;margin-left:-1px;min-width:0}
.input-group>:first-child{border-top-left-radius:var(--radius);border-bottom-left-radius:var(--radius);margin-left:0}
.input-group>:last-child{border-top-right-radius:var(--radius);border-bottom-right-radius:var(--radius)}
.input-group .btn,.input-group .input-group-addon{padding:.5rem .75rem;background:hsl(var(--muted));border:1px solid hsl(var(--border));display:inline-flex;align-items:center;font-size:.875rem;color:hsl(var(--muted-foreground))}
/* Avatar (Users, Pdv) */
.avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border-radius:50%;background:hsl(var(--primary)/.15);color:hsl(var(--primary));font-weight:600;font-size:.75rem;flex-shrink:0;overflow:hidden;line-height:1}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.avatar-sm,.avatar-sm{width:1.5rem;height:1.5rem;font-size:.625rem}
.avatar.avatar-lg,.avatar-lg{width:3rem;height:3rem;font-size:1rem}
.avatar.avatar-xl,.avatar-xl{width:4rem;height:4rem;font-size:1.125rem}
/* Badge secondary */
.badge-secondary{background:hsl(var(--secondary));color:hsl(var(--secondary-foreground));border:1px solid hsl(var(--border))}
/* Line clamp (Site/index sem Tailwind plugin) */
.line-clamp-1{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
/* Helper text */
.helper{font-size:.75rem;color:hsl(var(--muted-foreground));margin-top:.25rem}
/* Toggle password button */
.toggle-pwd{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:transparent;border:0;padding:.25rem;color:hsl(var(--muted-foreground));cursor:pointer;display:inline-flex;align-items:center}
.toggle-pwd:hover{color:hsl(var(--foreground))}
/* Search box (Users index) */
.search{position:relative;display:inline-flex;align-items:center;width:100%;max-width:24rem}
.search input{padding-left:2.25rem}
.search [data-lucide],.search .search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);color:hsl(var(--muted-foreground));width:1rem;height:1rem;pointer-events:none}
/* ============================================================
PATCH 2026-05-02-e — Centralizar modais Bootstrap legacy
(margin auto nao funcionava por causa do layout flex pai)
============================================================ */
.modal.fade{display:none!important;position:fixed;inset:0;z-index:9999;background:rgba(15,23,42,.55);overflow-y:auto;padding:0!important;align-items:flex-start;justify-content:center}
.modal.fade.in,.modal.fade.show{display:flex!important}
.modal-dialog,.seat-admin-modal-dialog{margin:3.5rem auto 2rem!important;width:calc(100% - 2rem);max-width:32rem;flex:0 0 auto;align-self:flex-start}
.seat-admin-modal-dialog{max-width:560px}
.modal-dialog.modal-lg{max-width:48rem}
@media (max-width:640px){.modal-dialog,.seat-admin-modal-dialog{margin:1rem auto!important;width:calc(100% - 1rem)}}
/* Backdrop separado se Bootstrap injetar (geralmente nao injeta com nosso shim) */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:9998}
.modal-backdrop.in,.modal-backdrop.show{opacity:1}
/* Animacao suave de entrada */
.modal.fade .modal-dialog,.modal.fade .seat-admin-modal-dialog{transform:translateY(-8px) scale(.97);opacity:0;transition:transform .2s cubic-bezier(.16,1,.3,1),opacity .2s}
.modal.fade.in .modal-dialog,.modal.fade.in .seat-admin-modal-dialog,.modal.fade.show .modal-dialog,.modal.fade.show .seat-admin-modal-dialog{transform:translateY(0) scale(1);opacity:1}
/* Bloquear scroll do body quando modal aberto */
body.modal-open{overflow:hidden}
/* ============================================================
PATCH 2026-05-03-f — Fix modais Summernote (Insert Link/Image)
Causado por colisao com Tailwind reset (label width:auto + button bg)
============================================================ */
/* Modal corpo: labels e inputs com largura/quebra normal */
.note-modal,.note-modal-content{box-sizing:border-box}
.note-modal-body label,.note-modal-body .checkbox label,.note-modal-body .form-check-label{display:flex;align-items:center;gap:.5rem;width:auto;white-space:normal;font-weight:500;font-size:.875rem;color:hsl(var(--foreground))}
.note-modal-body label input[type="checkbox"]{margin:0;flex:0 0 auto}
.note-modal-body .form-group{margin-bottom:1rem}
.note-modal-body .form-control,.note-modal-body input[type="text"],.note-modal-body input[type="url"]{width:100%;padding:.5rem .75rem;border:1px solid hsl(var(--input));border-radius:var(--radius);font-size:.875rem;background:hsl(var(--background));color:hsl(var(--foreground))}
.note-modal-body .form-control:focus{outline:2px solid hsl(var(--primary)/.4);outline-offset:1px;border-color:hsl(var(--primary))}
/* Botão primary do modal: cyan da marca em vez de rosa/coral default */
.note-modal-footer .btn-primary,.note-btn-primary,.note-modal .note-btn.note-btn-primary{background:hsl(var(--primary))!important;border-color:hsl(var(--primary))!important;color:#fff!important;padding:.5rem 1rem;border-radius:var(--radius);font-weight:500;font-size:.875rem;cursor:pointer}
.note-modal-footer .btn-primary:hover,.note-btn-primary:hover{filter:brightness(1.05)}
.note-modal-footer .btn,.note-modal .note-btn{padding:.5rem 1rem;border-radius:var(--radius);font-size:.875rem;font-weight:500;border:1px solid transparent;cursor:pointer}
.note-modal-footer .btn:not(.btn-primary){background:#fff;color:hsl(var(--foreground));border-color:hsl(var(--border))}
/* Header do modal: alinhamento + close */
.note-modal-header{padding:1rem 1.5rem;border-bottom:1px solid hsl(var(--border));display:flex;align-items:center;justify-content:space-between}
.note-modal-title{font-size:1rem;font-weight:600;margin:0}
.note-modal .close{background:transparent;border:0;color:hsl(var(--muted-foreground));font-size:1.5rem;line-height:1;cursor:pointer;padding:.25rem .5rem}
.note-modal-body{padding:1.25rem 1.5rem}
.note-modal-footer{padding:1rem 1.5rem;border-top:1px solid hsl(var(--border));display:flex;justify-content:flex-end;gap:.5rem;height:auto}
/* Form labels grandes (Texto para exibir, Para qual URL...) */
.note-modal-body .note-form-label{font-size:.8125rem;font-weight:600;color:hsl(var(--foreground));margin-bottom:.375rem;display:block;text-transform:none}
/* Editor area — bordas mais clean */
.note-editor.note-frame,.note-editor.note-airframe{border:1px solid hsl(var(--border));border-radius:var(--radius)}
.note-editor .note-toolbar{background:hsl(var(--muted)/.4);border-bottom:1px solid hsl(var(--border));padding:.5rem;border-radius:var(--radius) var(--radius) 0 0}
.note-editor .note-toolbar .note-btn{background:#fff;border:1px solid hsl(var(--border));color:hsl(var(--foreground))}
.note-editor .note-toolbar .note-btn:hover{background:hsl(var(--muted));color:hsl(var(--primary))}
.note-editor .note-toolbar .note-btn.active,.note-editor .note-toolbar .note-btn.checked{background:hsl(var(--primary));color:#fff;border-color:hsl(var(--primary))}
/* ============================================================
PATCH 2026-05-03-g — Force-fix Summernote modal buttons
(especifidade + cobertura maior de seletores)
============================================================ */
.note-modal .note-modal-footer{padding:1rem 1.5rem!important;border-top:1px solid hsl(var(--border))!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:.5rem!important;height:auto!important;min-height:auto!important;background:hsl(var(--background))!important}
/* Todos botoes primary do summernote (Inserir link, Inserir imagem, OK, etc) */
.note-modal button.note-btn,
.note-modal .note-modal-footer button,
.note-modal .note-modal-footer .btn,
.note-modal .note-modal-footer input[type="button"],
.note-modal .note-image-btn,
.note-modal .note-image-input,
button.note-btn-primary,
.note-btn.note-btn-primary,
.note-image-btn.note-btn-primary,
.note-link-btn{
background:hsl(var(--primary))!important;
border:1px solid hsl(var(--primary))!important;
color:#fff!important;
padding:.5rem 1rem!important;
border-radius:var(--radius)!important;
font-weight:500!important;
font-size:.875rem!important;
cursor:pointer!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
line-height:1.25!important;
height:auto!important;
width:auto!important;
}
.note-modal button.note-btn:hover,
.note-modal .note-modal-footer button:hover,
.note-modal .note-modal-footer .btn:hover{filter:brightness(1.05)!important}
/* Botao disabled (quando URL/arquivo vazio) */
.note-modal button.note-btn[disabled],
.note-modal .note-modal-footer button[disabled],
.note-image-btn:disabled,
.note-link-btn:disabled{
opacity:.55!important;
cursor:not-allowed!important;
background:hsl(var(--primary)/.6)!important;
}
/* Body padding consistente */
.note-modal .note-modal-body{padding:1.25rem 1.5rem!important}
/* ============================================================
PATCH 2026-05-03-h — Upload cards (drag drop estilo dashboard)
Aplicado em event.phtml e editevent.phtml
============================================================ */
.upload-grid{display:grid;grid-template-columns:repeat(1,1fr);gap:1rem;margin-top:1rem}
@media(min-width:640px){.upload-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.upload-grid{grid-template-columns:repeat(4,1fr)}}
.upload-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem 1rem;min-height:180px;border:2px dashed hsl(var(--border));border-radius:.625rem;background:hsl(var(--muted)/.25);cursor:pointer;transition:border-color var(--duration),background var(--duration),transform var(--duration);text-align:center;overflow:hidden}
.upload-card:hover{border-color:hsl(var(--primary));background:hsl(var(--primary)/.04)}
.upload-card.is-dragover{border-color:hsl(var(--primary));background:hsl(var(--primary)/.08);transform:scale(1.01)}
.upload-card.is-required{border:2px dashed hsl(var(--primary));background:hsl(var(--primary)/.04)}
.upload-card.has-file{border:2px solid hsl(var(--primary));background:#fff;padding:0;align-items:stretch;justify-content:flex-start}
.upload-card-label{font-size:.75rem;font-weight:600;color:hsl(var(--foreground));position:absolute;top:.625rem;left:.875rem;z-index:2;background:hsl(var(--background)/.85);padding:.125rem .375rem;border-radius:.25rem;line-height:1.2}
.upload-card-required{color:hsl(var(--destructive));margin-left:.125rem;font-weight:700}
.upload-card-icon{width:2.25rem;height:2.25rem;color:hsl(var(--muted-foreground));margin-bottom:.5rem;margin-top:.75rem;stroke-width:1.5}
.upload-card:hover .upload-card-icon{color:hsl(var(--primary))}
.upload-card-text{font-size:.875rem;font-weight:500;color:hsl(var(--muted-foreground));line-height:1.3}
.upload-card:hover .upload-card-text{color:hsl(var(--primary))}
.upload-card-dim{font-size:.6875rem;color:hsl(var(--muted-foreground));margin-top:.375rem;line-height:1.2;font-variant-numeric:tabular-nums}
.upload-card input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.upload-card-preview{display:none;width:100%;height:180px;object-fit:cover;border-radius:.5rem}
.upload-card.has-file .upload-card-preview{display:block}
.upload-card.has-file .upload-card-icon,
.upload-card.has-file > .upload-card-text,
.upload-card.has-file > .upload-card-dim{display:none}
.upload-card-remove{position:absolute;top:.5rem;right:.5rem;background:rgba(15,23,42,.78);color:#fff;width:1.75rem;height:1.75rem;border-radius:50%;display:none;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;line-height:1;border:0;padding:0;z-index:3}
.upload-card-remove:hover{background:hsl(var(--destructive))}
.upload-card.has-file .upload-card-remove{display:inline-flex}
/* ===== PATCH-i (2026-05-03): cards expandidos estilo dashboard ===== */
.play-card{display:flex;flex-direction:column}
.play-card .body{display:flex;flex-direction:column;gap:.55rem;padding:.85rem}
/* Dias de Venda — barra com gradient verde-amarelo-vermelho */
.dias-venda{margin-top:.25rem}
.dias-venda-head{display:flex;justify-content:space-between;align-items:baseline;font-size:.72rem;color:hsl(var(--muted-foreground));margin-bottom:.25rem}
.dias-venda-label{font-weight:600;text-transform:uppercase;letter-spacing:.03em}
.dias-venda-counter{font-size:.7rem}
.dias-venda-bar{position:relative;height:8px;border-radius:6px;background:linear-gradient(90deg,#16a34a 0%,#84cc16 35%,#facc15 65%,#ef4444 100%);overflow:hidden}
.dias-venda-bar-fill{position:absolute;top:0;right:0;bottom:0;background:rgba(255,255,255,.78);box-shadow:inset 1px 0 0 rgba(0,0,0,.06)}
.dias-venda-foot{display:flex;justify-content:space-between;font-size:.72rem;color:hsl(var(--muted-foreground));margin-top:.25rem}
.dias-venda-pct{font-variant-numeric:tabular-nums;font-weight:600}
/* Grid de KPIs (5 colunas) */
.kpi-grid-card{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;padding:.6rem .25rem;border-top:1px solid hsl(var(--border));border-bottom:1px solid hsl(var(--border));margin:.35rem 0}
.kpi-cell{text-align:center;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.kpi-value{font-size:1.05rem;font-weight:700;color:hsl(var(--foreground));line-height:1.1;display:inline-flex;align-items:center;justify-content:center;gap:.18rem;font-variant-numeric:tabular-nums}
.kpi-value.kpi-trend-up{color:#16a34a}
.kpi-value.kpi-trend-down{color:#dc2626}
.kpi-value.kpi-trend-flat{color:hsl(var(--muted-foreground))}
.kpi-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-foreground));font-weight:600}
/* Footer financeiro: arrecadado + ticket medio */
.kpi-footer{display:grid;grid-template-columns:1fr 1fr;gap:.35rem;padding:.5rem 0 .15rem}
.kpi-footer-cell{text-align:center}
.kpi-footer-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-foreground));font-weight:600;margin-bottom:.1rem}
.kpi-footer-value{font-size:1.05rem;font-weight:700;color:#16a34a;font-variant-numeric:tabular-nums}
/* Capacidade compacta (linha + barra fina) */
.capacity-mini{display:flex;flex-direction:column;gap:.25rem;font-size:.72rem;color:hsl(var(--muted-foreground));padding-top:.35rem;border-top:1px dashed hsl(var(--border))}
.capacity-mini strong{color:hsl(var(--foreground));font-weight:600}
.progress.progress-mini{height:4px}
/* FIX-2026-05-13u: 4 colunas em telas wide (>=1440px) a pedido do user.
Mantem 2 cols em laptops (1024-1280), 3 em 1280-1440, 4 em 1440+. */
@media (min-width:1024px){
.plays-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:1280px){
.plays-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1440px){
.plays-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:480px){
.kpi-grid-card{grid-template-columns:repeat(3,1fr);gap:.5rem .3rem}
.kpi-cell:nth-child(4),.kpi-cell:nth-child(5){grid-row:2}
}
/* PATCH-i.1 — meta-rows: icone + texto inline (local + cidade) */
.play-card .meta-row{display:flex;align-items:center;gap:.45rem;font-size:.82rem;color:hsl(var(--foreground));line-height:1.3;padding:.1rem 0;min-width:0}
.play-card .meta-row .meta-icon{flex:0 0 16px;width:16px;height:16px;color:hsl(var(--primary));stroke-width:2}
.play-card .meta-row .meta-text{flex:1 1 auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500}
.play-card .meta-row .meta-sep{margin:0 .35rem;color:hsl(var(--muted-foreground));font-weight:400;font-size:.75rem}
/* PATCH-i.2 — Filter bar inline (substitui details/summary collapsible) */
.filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.55rem .65rem;margin-bottom:1rem;background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.6rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.filter-bar-field{position:relative;display:flex;align-items:center;flex:1 1 180px;min-width:140px;background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:.45rem;transition:border-color .12s,box-shadow .12s}
.filter-bar-field:focus-within{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15)}
.filter-bar-search{flex:2 1 280px}
.filter-bar-icon{position:absolute;left:.55rem;width:16px;height:16px;color:hsl(var(--muted-foreground));pointer-events:none;flex:0 0 16px}
.filter-bar-field input,.filter-bar-field select{width:100%;border:0;background:transparent;padding:.5rem .55rem .5rem 2rem;font-size:.85rem;color:hsl(var(--foreground));outline:none;font-family:inherit;line-height:1.2;min-height:36px;border-radius:.45rem}
.filter-bar-field select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .55rem center;padding-right:1.6rem}
.filter-bar-field input[type="date"]{cursor:pointer}
.filter-bar-field input::placeholder{color:hsl(var(--muted-foreground));opacity:1}
.filter-bar-actions{display:flex;align-items:center;gap:.4rem;flex:0 0 auto;margin-left:auto}
@media (max-width:640px){
.filter-bar{padding:.5rem}
.filter-bar-field{flex:1 1 100%}
.filter-bar-actions{flex:1 1 100%;justify-content:flex-end}
}
/* ===== PATCH-i.3 (2026-05-03): refactor visual de /users/edit + form sections ===== */
/* Container central mais estreito pra forms longos */
.users-page-wrap,.form-page-wrap,form#userForm{max-width:1100px;margin:0 auto}
/* Tabs no topo */
.tabs{display:flex;gap:.25rem;border-bottom:1px solid hsl(var(--border));margin-bottom:1.25rem;overflow-x:auto;padding:0 .25rem}
.tabs .tab{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem .9rem;border:0;background:transparent;color:hsl(var(--muted-foreground));font-size:.85rem;font-weight:500;cursor:pointer;border-bottom:2px solid transparent;transition:color .12s,border-color .12s;white-space:nowrap;font-family:inherit;line-height:1.2}
.tabs .tab:hover{color:hsl(var(--foreground))}
.tabs .tab.active,.tabs .tab[aria-selected="true"]{color:hsl(var(--primary));border-bottom-color:hsl(var(--primary))}
.tabs .tab i{width:16px;height:16px}
/* Section como card */
.section{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.75rem;padding:1.5rem;margin-bottom:1.25rem;box-shadow:0 1px 2px rgba(0,0,0,.03)}
.section-title{display:flex;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:600;color:hsl(var(--foreground));margin:0 0 .25rem 0;letter-spacing:-.01em}
.section-title i{color:hsl(var(--primary))}
.section-desc{font-size:.82rem;color:hsl(var(--muted-foreground));margin:0 0 1.15rem 0;line-height:1.4}
/* Grid 2 colunas — campos lado a lado em desktop */
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.85rem 1.1rem}
@media (max-width:768px){.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}}
.col-span-2{grid-column:span 2}
.grid-2 .form-row.col-span-2{grid-column:1 / -1}
.grid-3 .form-row{margin-bottom:0}
/* form-row: label em cima, input embaixo */
.form-row{display:flex;flex-direction:column;gap:.3rem;margin-bottom:.85rem}
.form-row:last-child{margin-bottom:0}
.grid-2 .form-row{margin-bottom:0}
.form-row label,.form-row .label{font-size:.78rem;font-weight:600;color:hsl(var(--foreground));letter-spacing:.01em;margin:0}
.form-row .helper-text{font-size:.72rem;color:hsl(var(--muted-foreground));line-height:1.35;margin-top:.1rem}
/* Inputs/selects/textarea (cobre tudo que ZF2 formRow renderiza) */
.form-row input[type="text"],.form-row input[type="email"],.form-row input[type="password"],.form-row input[type="tel"],.form-row input[type="number"],.form-row input[type="url"],.form-row input[type="date"],.form-row input[type="datetime-local"],.form-row input[type="search"],.form-row input[type="file"],.form-row select,.form-row textarea{width:100%;padding:.55rem .65rem;font-size:.85rem;color:hsl(var(--foreground));background:hsl(var(--background));border:1px solid hsl(var(--border));border-radius:.45rem;outline:none;font-family:inherit;line-height:1.3;transition:border-color .12s,box-shadow .12s;min-height:38px;box-sizing:border-box}
.form-row select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .65rem center;padding-right:1.8rem}
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15)}
.form-row input[type="file"]{padding:.35rem .45rem;cursor:pointer;background:hsl(var(--muted)/.4)}
.form-row textarea{min-height:90px;resize:vertical;line-height:1.5}
/* Tab panes: estado controlado por classe .is-active (JS toggle). Sem !important — evita conflito com inline style. */
fieldset[data-tab-pane]{display:none}
fieldset[data-tab-pane].is-active{display:block}
/* Action bar fixed-ish no bottom do form */
.form-actions,.form-row-actions,.users-form-actions{position:sticky;bottom:0;background:hsl(var(--card));border-top:1px solid hsl(var(--border));padding:.85rem 1rem;margin:1.5rem -1rem -1rem;display:flex;gap:.5rem;justify-content:flex-end;border-radius:0 0 .75rem .75rem;z-index:5;backdrop-filter:blur(6px)}
/* ===== PATCH-i.4 (2026-05-03): matriz negociacao TIPO x ONLINE/PDV/TEATRO ===== */
.negociacao-table-wrap{overflow-x:auto;border:1px solid hsl(var(--border));border-radius:.55rem;background:hsl(var(--card));margin-top:.25rem}
.negociacao-table{width:100%;border-collapse:collapse;font-size:.8125rem;font-variant-numeric:tabular-nums}
.negociacao-table thead th{position:sticky;top:0;background:hsl(var(--muted)/.55);color:hsl(var(--muted-foreground));text-transform:uppercase;font-size:.7rem;letter-spacing:.04em;font-weight:600;text-align:left;padding:.55rem .75rem;border-bottom:1px solid hsl(var(--border));white-space:nowrap;z-index:1}
.negociacao-table thead th:not(:first-child){text-align:center}
.negociacao-table tbody th.neg-col-tipo{font-weight:500;color:hsl(var(--foreground));text-align:left;padding:.55rem .75rem;background:hsl(var(--muted)/.18);border-right:1px solid hsl(var(--border));white-space:nowrap}
.negociacao-table .neg-col-tipo{width:240px;min-width:200px}
.negociacao-table tbody td{padding:.4rem .55rem;border-top:1px solid hsl(var(--border));vertical-align:middle;text-align:center}
.negociacao-table tbody tr:hover td,.negociacao-table tbody tr:hover>th.neg-col-tipo{background:hsl(var(--accent)/.35)}
.negociacao-table .neg-input{width:100%;padding:.4rem .55rem;font-size:.8125rem;text-align:right;border:1px solid hsl(var(--border));border-radius:.4rem;background:hsl(var(--background));color:hsl(var(--foreground));min-height:34px;outline:none;font-family:inherit;font-variant-numeric:tabular-nums;transition:border-color .12s,box-shadow .12s}
.negociacao-table select.neg-input{text-align:left;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,");background-repeat:no-repeat;background-position:right .55rem center;padding-right:1.6rem}
.negociacao-table .neg-input:focus{border-color:hsl(var(--primary));box-shadow:0 0 0 3px hsl(var(--primary)/.15)}
.negociacao-table .neg-dash{display:inline-block;color:hsl(var(--muted-foreground)/.7);font-size:1rem;line-height:1;text-align:center}
.negociacao-table tbody tr:last-child td,.negociacao-table tbody tr:last-child th{border-bottom:0}
@media (max-width:768px){
.negociacao-table-wrap{border:0;background:transparent;overflow:visible}
.negociacao-table,.negociacao-table thead,.negociacao-table tbody,.negociacao-table tr,.negociacao-table th,.negociacao-table td{display:block;width:100%}
.negociacao-table thead{display:none}
.negociacao-table tbody tr{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:.55rem;padding:.6rem .75rem;margin-bottom:.6rem}
.negociacao-table tbody tr:hover td,.negociacao-table tbody tr:hover>th.neg-col-tipo{background:transparent}
.negociacao-table tbody th.neg-col-tipo{background:transparent;border:0;padding:.15rem 0 .35rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))}
.negociacao-table tbody td{border:0;padding:.25rem 0;text-align:left;display:flex;align-items:center;gap:.5rem}
.negociacao-table tbody td::before{content:attr(data-col);flex:0 0 110px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:hsl(var(--muted-foreground))}
.negociacao-table .neg-input{flex:1;text-align:left}
.negociacao-table .neg-dash{flex:1;text-align:left;padding-left:.25rem}
}
/* PATCH-i.5 — card clicavel + remocao do footer-bar antigo */
.play-card-clickable{cursor:pointer;transition:transform .14s,box-shadow .14s,border-color .14s}
.play-card-clickable:hover{transform:translateY(-2px);box-shadow:0 6px 18px -6px rgba(0,0,0,.18);border-color:hsl(var(--primary)/.4)}
.play-card-clickable:focus-visible{outline:2px solid hsl(var(--primary));outline-offset:2px}
.play-card-clickable a:hover,.play-card-clickable button:hover,.play-card-clickable .dropdown-menu{cursor:default}
.play-card-clickable a,.play-card-clickable button{cursor:pointer}
.play-card .footer-bar{display:none} /* legacy footer-bar Ver/Editar removida */
.card-footer-flag{padding:.5rem .85rem;border-top:1px dashed hsl(var(--border));display:flex;justify-content:flex-end}
/* ===== PATCH-i.6 (2026-05-03): tabs de pagina (Relatorios/Demonstrativo/Clientes) em /plays/play ===== */
/* FIX 2026-05-17: tabs com mais destaque visual (font maior, padding maior, hover
com bg sutil, aba ativa com bg tinted + border-bottom mais grosso). */
.page-tabs{display:flex;gap:.5rem;border-bottom:2px solid hsl(var(--border));margin:1rem 0 1.25rem;overflow-x:auto;padding:0 .25rem}
.page-tab{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.25rem;border:0;background:transparent;color:hsl(var(--muted-foreground));font-size:.95rem;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-2px;border-radius:.5rem .5rem 0 0;transition:color .15s,background-color .15s,border-color .15s;white-space:nowrap;font-family:inherit;line-height:1.2}
.page-tab:hover{color:hsl(var(--foreground));background:hsl(var(--muted) / 0.6)}
.page-tab.active,.page-tab[aria-selected="true"]{color:hsl(var(--primary));background:hsl(var(--primary) / 0.08);border-bottom-color:hsl(var(--primary))}
.page-tab i{width:18px;height:18px}
[data-page-pane]{display:none}
[data-page-pane].is-active{display:block}
/* Em PDF/print, todas as panes ficam visiveis (relatorio completo numa folha) */
@media print{[data-page-pane]{display:block !important}.page-tabs{display:none !important}}
/* PATCH-i.7 — heatmaps de media (canal x dia da semana / canal x horario) + chart media-hora */
.heatmap-table{width:100%;border-collapse:separate;border-spacing:6px}
.heatmap-table th{font-size:.7rem;font-weight:600;color:hsl(var(--muted-foreground));text-transform:uppercase;letter-spacing:.05em;text-align:right;padding:.5rem .65rem;white-space:nowrap}
.heatmap-table th.heatmap-row-label{text-align:left;font-size:.85rem;font-weight:600;color:hsl(var(--foreground));text-transform:none;letter-spacing:0;min-width:160px}
.heatmap-table td{padding:.55rem .65rem;border-radius:.4rem;font-size:.78rem;font-weight:500;text-align:right;font-variant-numeric:tabular-nums;color:hsl(var(--foreground));background:hsl(var(--primary)/.05);transition:background .12s;white-space:nowrap}
.heatmap-table td.empty{color:hsl(var(--muted-foreground));background:hsl(var(--muted)/.4)}
.heatmap-table-wrap{overflow-x:auto;padding-bottom:.5rem}
/* PATCH-i.8 — sub-tabs do card "Analise por canal" (sales.phtml i.13) */
.sub-tabs{display:inline-flex;gap:.15rem;background:hsl(var(--muted)/.4);padding:.2rem;border-radius:.5rem}
.sub-tab{display:inline-flex;align-items:center;gap:.3rem;padding:.4rem .75rem;border:0;background:transparent;color:hsl(var(--muted-foreground));font-size:.78rem;font-weight:500;cursor:pointer;border-radius:.35rem;transition:background .12s,color .12s;font-family:inherit;line-height:1.2;white-space:nowrap}
.sub-tab:hover{color:hsl(var(--foreground))}
.sub-tab.active,.sub-tab[aria-selected="true"]{background:hsl(var(--card));color:hsl(var(--primary));box-shadow:0 1px 2px rgba(0,0,0,.05)}
[data-sub-pane]{display:none}
[data-sub-pane].is-active{display:block}
/* ============================================================
PATCH 2026-05-04-j (Agent A1) — Mobile audit Base layer
Fixes: touch targets <44px, modal-xl overflow, table sticky col,
sidebar drawer Tailwind .hidden conflict, topbar overflow,
safe-area iOS, swipe-close drawer.
Breakpoints: 360 / 768 / 1024 / 1440
============================================================ */
/* j.1 — body/html overflow-x + safe area */
@media (max-width:767px){
html,body{max-width:100vw}
}
/* j.2 — Touch targets >=44x44 (WCAG 2.5.5 / iOS HIG) em mobile */
@media (max-width:767px){
.btn-sm,
.btn-icon.btn-sm,
.dropdown-item,
.sidemenu-item,
.pagination-item,
.modal-close,
.toast-close,
.filter-tab,
.tab,
.page-tab,
.upload-card-remove,
button.close,
.note-modal .close,
.view-toggle button{
min-height:44px;
min-width:44px;
}
/* btn-icon precisa centralizar mesmo com min-w/h forçados */
.btn-icon.btn-sm{padding:.5rem}
/* dropdown-item: min-height ok mas mantem alinhamento esquerdo */
.dropdown-item{padding:.625rem .75rem}
/* pagination-item mantem comportamento inline-flex */
.pagination-item{padding:0 .75rem}
/* modal-close cresce o hitbox sem aumentar o icone */
.modal-close{padding:.625rem}
/* upload-card-remove (X no canto) — fica menor pq esta dentro de card pequeno;
so amplia se for unico tap target ali */
.upload-card-remove{min-height:36px;min-width:36px;width:2.25rem;height:2.25rem}
/* table-row: garante linha clicavel >=48px (recomendado iOS) */
.table-row td,.table-cell{padding-top:.875rem;padding-bottom:.875rem}
}
/* j.3 — Modal full-screen em mobile (modal-lg/xl/full) */
@media (max-width:640px){
.modal-overlay{padding:0;align-items:stretch;justify-content:stretch}
.modal,
.modal.modal-sm,
.modal.modal-lg,
.modal.modal-xl,
.modal.modal-full{
max-width:100vw!important;
width:100vw;
max-height:100dvh;
height:100dvh;
border-radius:0;
margin:0;
box-shadow:none;
}
.modal-overlay.open .modal{transform:none}
.modal-header{padding:1rem 1rem;position:sticky;top:0;background:hsl(var(--card));z-index:2}
.modal-body{padding:1rem;flex:1 1 auto}
.modal-footer{padding:.75rem 1rem;position:sticky;bottom:0;background:hsl(var(--card));z-index:2;padding-bottom:calc(.75rem + env(safe-area-inset-bottom))}
}
/* j.4 — Tabela: scroll horizontal + sticky first col + tap target */
@media (max-width:767px){
.table-wrapper{
-webkit-overflow-scrolling:touch;
overscroll-behavior-x:contain;
}
.table-wrapper .table{min-width:100%}
.table th:first-child,
.table td:first-child,
.table-header th:first-child,
.table-cell:first-child{
position:sticky;
left:0;
background:hsl(var(--card));
z-index:1;
box-shadow:1px 0 0 hsl(var(--border));
}
.table-row:hover td:first-child{background:hsl(var(--muted)/.7)}
.table-row.selected td:first-child{background:hsl(var(--accent))}
/* Header sticky on first col — bg ligeiramente diferente do row pra contraste */
.table-header th:first-child{background:hsl(var(--muted)/.95)}
}
/* j.5 — Sidebar drawer: resolve conflito Tailwind .hidden vs .open
- Em mobile, .sidemenu-drawer é off-screen por default (translateX)
- .open força display:flex (vencendo Tailwind hidden) + traz ao viewport
- Em md+, Tailwind md:flex assume controle e drawer vira aside fixo */
@media (max-width:767px){
.sidemenu.sidemenu-drawer{
position:fixed!important;
inset:0 auto 0 0;
width:min(86vw,20rem);
height:100vh;
height:100dvh;
z-index:60;
display:flex!important; /* vence Tailwind hidden em mobile */
transform:translateX(-100%);
transition:transform var(--duration) var(--ease-out);
padding-bottom:env(safe-area-inset-bottom);
box-shadow:0 12px 40px rgba(0,0,0,.18);
}
.sidemenu.sidemenu-drawer.open{
transform:translateX(0);
}
/* Backdrop */
.sidemenu-backdrop{display:block}
.sidemenu-backdrop.open{opacity:1;pointer-events:auto;z-index:55}
/* Sidemenu nav: scroll proprio + nao deixa footer cobrir items */
.sidemenu.sidemenu-drawer .sidemenu-nav{
-webkit-overflow-scrolling:touch;
overscroll-behavior-y:contain;
}
}
/* j.6 — Topbar mobile: nao estourar layout em <360px */
@media (max-width:767px){
.topbar{
padding:0 .5rem;
gap:.375rem;
overflow:hidden;
}
.topbar-actions{gap:.125rem}
.topbar-search{display:none} /* Phone busca via icone; tablet+ tem barra */
}
@media (min-width:640px) and (max-width:767px){
.topbar-search{display:flex;max-width:14rem;font-size:.8125rem}
}
/* j.7 — Toast container respeita safe-area iOS */
@media (max-width:767px){
.toast-container{
top:calc(.5rem + env(safe-area-inset-top));
left:.5rem;
right:.5rem;
max-width:none;
}
}
/* j.8 — Form-row: input min-height 44px em mobile */
@media (max-width:767px){
.input,.select,.textarea,
.form-row input,.form-row select,.form-row textarea,
.filter-bar-field input,.filter-bar-field select,
.negociacao-table .neg-input{
min-height:44px;
font-size:16px; /* iOS Safari nao zoom no focus se font-size>=16 */
}
.form-row textarea{min-height:88px}
}
/* j.9 — Pagination mobile: itens compactos mas com tap area boa */
@media (max-width:767px){
.pagination{padding:.5rem .5rem;gap:.25rem}
.pagination-list{flex-wrap:wrap;justify-content:center}
.pagination-info{flex:1 1 100%;text-align:center;order:2;margin-top:.25rem}
}
/* j.10 — Page-header e action-menu mobile */
@media (max-width:767px){
.page-header{padding:.875rem 1rem;flex-direction:column;align-items:stretch}
.page-actions{width:100%;flex-wrap:wrap}
.action-menu{padding:.5rem 0;gap:.375rem}
}
/* j.11 — State-switcher (demo) nao atrapalha em mobile */
@media (max-width:767px){
.demo-state-switcher,.state-switcher{
bottom:calc(.5rem + env(safe-area-inset-bottom));
right:.5rem;
max-width:11rem;
font-size:.6875rem;
}
}
/* j.12 — Dropdown menu em mobile: abre full-width se proximo da borda */
@media (max-width:767px){
.dropdown-menu{
min-width:min(16rem,calc(100vw - 1rem));
max-width:calc(100vw - 1rem);
}
}
/* ===== PATCH-j.13 — help-tip (botao + tooltip floating no body) ===== */
/* O botao: so visual. JS (initHelpTips) cria/move o floater no body pra escapar overflow:hidden ancestral. */
.help-tip{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:999px;background:hsl(var(--muted));color:hsl(var(--muted-foreground));border:0;font-size:.7rem;font-weight:700;cursor:help;margin-left:.25rem;line-height:1;padding:0;font-family:inherit;vertical-align:middle;flex:0 0 auto;transition:background .12s,color .12s}
.help-tip:hover,.help-tip:focus,.help-tip[aria-expanded="true"]{background:hsl(var(--primary));color:white;outline:none}
/* Floater: posicionado no body via JS. Position absolute pra acompanhar scroll natural. */
.help-tip-floater{position:absolute;background:hsl(var(--foreground));color:hsl(var(--background));padding:.55rem .7rem;border-radius:.4rem;font-size:.74rem;font-weight:400;line-height:1.4;max-width:min(280px,calc(100vw - 1rem));text-align:left;box-shadow:0 6px 20px rgba(0,0,0,.22);z-index:9999;opacity:0;pointer-events:none;transition:opacity .15s;top:0;left:0}
.help-tip-floater.is-visible{opacity:1}
.help-tip-floater::after{content:"";position:absolute;left:var(--arrow-x,50%);transform:translateX(-50%);border:6px solid transparent}
.help-tip-floater.arrow-down::after{top:100%;border-top-color:hsl(var(--foreground))}
.help-tip-floater.arrow-up::after{bottom:100%;border-bottom-color:hsl(var(--foreground))}
/* PATCH-2026-05-13p: remove "card de fundo" do (legacy modern.css). */
/* PATCH-2026-05-13s: reset agressivo no main — zera tambem border, border-radius. */
main#main-content,main.page-content,main.content-wrap{
background:transparent!important;
background-color:transparent!important;
box-shadow:none!important;
border:0!important;
border-radius:0!important;
min-height:auto!important;
}