/* Musis screen styles on top of the 32bits UI guide (base.css). Screen only:
   print keeps Pico + styles.css (documentation/UI_REDESIGN_PLAN.md, D3). */

:root{color-scheme:dark;}
body{font-family:'Karla', system-ui, sans-serif;}

/* ---------------------------------------------------------------- print-only markup
   The pre-redesign block (main#main-content) stays in the DOM for the PDFs. On
   screen: no 32 logo nav, and the print H1 ("<expo>: <page>") gives way to
   h1.screen-title (page.py). */
#main-content > header{display:none;}
#main-content > main > h1:not(.screen-title){display:none;}
/* markup that exists only for the printout (e.g. the content folder URL) */
.print-only{display:none;}

/* ---------------------------------------------------------------- shell */
#app{font-size:14px; font-weight:500;}
/* the dev bar (page.py) is fixed at the top: keep the top bar below it */
.brand-home{color:inherit; text-decoration:none;}
.brand .t2{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:42vw;}
/* no exhibition selected: the system name, smaller than an expo code */
.brand .t2.tagline{font-size:15px; font-weight:300; letter-spacing:.08em;}
/* the tagline does not fit next to the top-bar links below 1440px */
@media (max-width:1439px){.brand .t2.tagline{display:none;}}
.userbox{flex-wrap:wrap;}
.userbox .user-tag{text-transform:none;}
/* messages: the count in neutral text, the colour only in a dot (guide: colour is state) */
.msg-link{display:inline-flex; align-items:center; gap:6px;}
.msg-link #msg-badge:not(:empty){background:none !important; color:inherit !important; padding:0 !important;
  margin:0 !important; font-size:inherit !important; vertical-align:baseline !important;
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:5px;}
.msg-link #msg-badge:not(:empty)::before{content:''; width:7px; height:7px; border-radius:99px; background:var(--warn);}
.userbox a.active.msg-link #msg-badge::before{background:var(--base);}

/* the page box holds the pre-redesign block; min-width:0 lets wide tables
   scroll inside their own wrapper instead of stretching the page (D5) */
.tab-box, .page-box{min-width:0;}
#main-content{min-width:0; margin:0; padding:0; width:auto;}
#main-content > main{margin:0; padding:0;}
/* page heading inside the box (block title in the guide's scale) */
#main-content > main > h1{font-size:22px; font-weight:300; text-transform:uppercase; letter-spacing:.02em;
  color:var(--text); margin:0 0 6px;}
#main-content > main > section{margin:0 0 14px; color:var(--muted); font-size:13px;}
#main-content > main > section:has(> em:empty){display:none;}

/* ---------------------------------------------------------------- tgrid tables (modules/table.py)
   The guide's .atable look on the tgrid markup; column widths come from
   tgrid.gen.css (generated from styles.css). Items vertically centred. */
table.tgrid{border-collapse:collapse; font-size:13px; margin:4px 0 18px;}
table.tgrid th{text-align:left; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--faint);
  font-weight:600; padding:8px 10px; border-bottom:1px solid var(--line); vertical-align:middle;}
table.tgrid th a{color:inherit; text-decoration:none; display:block;}
table.tgrid th a:hover{color:var(--text);}
table.js-sort th[data-sort]{cursor:pointer; user-select:none;}
table.js-sort th[data-sort]:hover{color:var(--text);}
table.js-sort th[data-dir="asc"]::after{content:" \25B2";}
table.js-sort th[data-dir="desc"]::after{content:" \25BC";}
table.tgrid td{padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle;}
table.tgrid tr[hx-get]{cursor:pointer;}
table.tgrid tr[hx-get]:hover td{background:var(--elev);}
table.tgrid td.actions{text-align:right;}

/* ---------------------------------------------------------------- legacy (non-tgrid) tables
   The proposal listings mix em and % widths in styles.css, sized for the old fixed
   1700px page; on the fluid page a fixed layout crushes the % columns. Auto layout
   keeps the widths as hints and sizes by content. Refined screen by screen in F4. */
#main-content table:is(.eqplist, .sumlist, .totalgeral):not(.tgrid){table-layout:auto;}
/* the consolidated list has only % widths (sum 100%): fixed, so long descriptions
   are cut instead of widening the page past full HD */
/* whatever is still wider than the box scrolls inside it, never the page (D5) */
#main-content > main{overflow-x:auto;}

/* ---------------------------------------------------------------- refined screens (F4) */
/* list head: filter on the left, the page action on the right */
.list-head{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 14px;}
.list-head .inl-field{flex:0 1 360px;}
/* detail head: block title + code on the left, actions on the right */
.block-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; margin:0 0 10px;}
.block-title{font-size:22px; font-weight:300; text-transform:uppercase; letter-spacing:.02em; color:var(--text); margin:0 0 2px;}
.head-actions{display:flex; gap:9px; flex-wrap:wrap;}
.block-descr{color:var(--muted); font-size:13.5px; margin:0 0 18px; max-width:80ch;}
.sec-title{margin:22px 0 10px;}
/* page forms: one panel, readable width */
.form-panel{max-width:620px;}
.form-panel .note-warn{margin:-6px 0 14px;}
.form-panel textarea{resize:vertical;}
.actions .left{margin-right:auto;}
.btn{cursor:pointer; text-decoration:none; font-family:inherit; line-height:1.2;}
/* table.py marks the actions column .actions, the guide's buttons-row class:
   keep it a table cell */
#main-content :is(td, th).actions{display:table-cell; margin:0;}
#main-content td.actions fieldset[role=group]{justify-content:flex-end;}
.cell-actions{text-align:right; width:1%; white-space:nowrap;}
.cell-actions form{display:inline;}
/* fields side by side (dates; filter + select + type) */
.field-row{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 14px;}
.field-row.three{grid-template-columns:repeat(3, minmax(0, 1fr));}
/* edit page: the form and a side panel; one column below 1100px */
.edit-cols{display:grid; grid-template-columns:minmax(0, 620px) minmax(0, 1fr); gap:var(--ug); align-items:start;
  margin:0 0 var(--ug);}
.edit-cols .form-panel{max-width:none;}
.sec-title.first{margin-top:0;}
@media (max-width:1100px){.edit-cols{grid-template-columns:minmax(0, 1fr);} .field-row.three{grid-template-columns:minmax(0, 1fr);}}
.field > div > select, .field > div > input{width:100%; min-width:0; box-sizing:border-box;}
.field select, .field input{min-width:0; box-sizing:border-box;}
#main-content th.actions{text-align:right;}
/* system-state banners stack above the page content */
#main-content .banner{margin:0 0 10px;}

/* Cadastro de equipamentos (F4): checkboxes in a row, details grid of the catalog view */
.check-row{display:flex; flex-wrap:wrap; gap:8px 22px; margin:0 0 14px;}
.details-grid{display:grid; grid-template-columns:max-content 1fr max-content 1fr;
  gap:8px 18px; margin:0 0 18px; font-size:13.5px;}
.details-grid dt{color:var(--muted); font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.03em; align-self:center;}
.details-grid dd{margin:0;}
@media (max-width:1100px){.details-grid{grid-template-columns:max-content 1fr;}}
/* legacy styles.css caps a td holding a button at 50px (td>button 30px): not for the guide action cells */
#main-content td.cell-actions{max-width:none;}
#main-content td.cell-actions > button{width:auto; overflow:visible;}
/* expo equipment list (screen only; print keeps styles.css widths) */
.eq-actions{display:flex; justify-content:flex-end; align-items:center; gap:9px; margin:0 0 14px;}
.list-head > .eq-actions{margin:0 0 0 auto;}
#main-content table.tgrid.eqplist .part{width:9%;}
#main-content table.tgrid.eqplist .tipo{width:5%;}
#main-content table.tgrid.eqplist .marca{width:7%;}
#main-content table.tgrid.eqplist .modelo{width:11%;}
#main-content table.tgrid.eqplist .descricao{width:23%;}
#main-content table.tgrid.eqplist .consumo{width:6%;}
#main-content table.tgrid.eqplist :is(.l, .a, .p){width:5%;}
#main-content table.tgrid.eqplist .qt{width:4%;}
#main-content table.tgrid.eqplist .valor{width:8%;}
#main-content table.tgrid.eqplist .total{width:9%;}
#main-content table.tgrid.eqplist .link{width:3%;}
#main-content table.tgrid.eqplist :is(td, th):is(.consumo, .l, .a, .p, .qt){padding-left:4px; padding-right:4px;}
#main-content .inl-field > input, #main-content .inl-field > select{margin:0;}
#main-content .list-head.filter-container{margin-bottom:14px;}
/* racks list (screen): room for the Remover button */
#main-content table.tgrid.rack-list .codigo{width:14%;}
#main-content table.tgrid.rack-list .equip{width:28%;}
#main-content table.tgrid.rack-list .mm{width:18%;}
#main-content table.tgrid.rack-list .u{width:5%;}
#main-content table.tgrid.rack-list .host{width:20%;}
#main-content table.tgrid.rack-list .urange{width:6%;}
#main-content table.tgrid.rack-list .actions{width:9%; overflow:visible;}
#main-content table.tgrid.rack-list td.actions > form > button{width:auto;}
/* pendencias list (screen): filters + print in one row; columns wide enough for the badge and dates */
.pend-head{justify-content:flex-start;}
.pend-head .inl-field:first-child{flex:1 1 320px;}
.pend-head .btn{margin-left:auto;}
#main-content table.tgrid.pendencias-expo .tipo{width:8%;}
#main-content table.tgrid.pendencias-expo .multimídia{width:16%;}
#main-content table.tgrid.pendencias-expo .id{width:4%;}
#main-content table.tgrid.pendencias-expo .título{width:18%;}
#main-content table.tgrid.pendencias-expo .descrição{width:24%;}
#main-content table.tgrid.pendencias-expo .prioridade{width:7%;}
#main-content table.tgrid.pendencias-expo .criadaem{width:8%;}
#main-content table.tgrid.pendencias-expo .atualizadaem{width:8%;}
#main-content table.tgrid.pendencias-expo .actions{width:7%;}

/* ===== Pendencias: ver, editar, comentarios (F4) ===== */
.pend-desc{white-space:pre-wrap;}
.comments-panel{margin-top:18px;}
.pendencia-comment{padding:10px 0; border-bottom:1px solid var(--line-soft);}
.pendencia-comment .comment-meta{display:flex; align-items:center; gap:10px; margin:0 0 4px;}
.pendencia-comment .comment-meta > div{margin-left:auto;}
.pendencia-comment .comment-content{white-space:pre-wrap; font-size:13.5px;}
/* section title with its actions on the right (multimidia detail) */
.sec-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin:24px 0 8px;}
.sec-head .sec-title{margin:0;}
.sec-head .head-actions{gap:7px;}
/* pendencias table inside a multimidia (screen): room for the badge, dates and actions */
#main-content table.tgrid.pendencias .tipo{width:8%;}
#main-content table.tgrid.pendencias .id{width:4%;}
#main-content table.tgrid.pendencias .título{width:20%;}
#main-content table.tgrid.pendencias .descrição{width:34%;}
#main-content table.tgrid.pendencias .prioridade{width:6%;}
#main-content table.tgrid.pendencias .status{width:6%;}
#main-content table.tgrid.pendencias .criadaem{width:7%;}
#main-content table.tgrid.pendencias .atualizadaem{width:7%;}
#main-content table.tgrid.pendencias :is(.ações, .actions){width:8%;}

/* state pills inside links keep the pill look */
a.badge-link{text-decoration:none;}
/* label/value table (content detail) */
.kv-table th{width:200px; text-transform:none; letter-spacing:normal; font-size:12px; color:var(--muted);}
.mult-input{width:70px; text-align:center;}
/* guide buttons inside plain table cells: undo the legacy td>button 30px squeeze */
#main-content td:has(> button.btn){max-width:none;}
#main-content td > button.btn{width:auto; overflow:visible;}
/* tarefas list (screen): filters + Nova tarefa in one row; status pill fits */
.tf-head{justify-content:flex-start;}
.tf-head .inl-field:first-child{flex:1 1 200px;}
.tf-head .inl-field:not(:first-child){flex:0 1 auto;}
.tf-head .inl-field select{flex:0 1 auto; width:auto;}
.tf-head .btn{margin-left:auto;}
#main-content table.tgrid.tarefas-list .id{width:4%;}
#main-content table.tgrid.tarefas-list .titulo{width:20%;}
#main-content table.tgrid.tarefas-list .status{width:10%;}
#main-content table.tgrid.tarefas-list .responsavel{width:10%;}
#main-content table.tgrid.tarefas-list .multimidia{width:18%;}
#main-content table.tgrid.tarefas-list .servico{width:12%;}
#main-content table.tgrid.tarefas-list .progresso{width:6%;}
#main-content table.tgrid.tarefas-list .inicio{width:7%;}
#main-content table.tgrid.tarefas-list .fimprevisto{width:7%;}
#main-content table.tgrid.tarefas-list .actions{width:6%;}

/* tarefa form: progress slider + value */
.pct-row{display:flex; align-items:center; gap:10px;}
.pct-row .pct-val{font-variant-numeric:tabular-nums; min-width:3em;}
/* multimedia picker (tarefas) */
.mm-picker{margin:6px 0 14px;}
.picker-row{display:flex; align-items:center; gap:8px;}
.picker-row input{flex:1;}
.mm-picker-results.open{border:1px solid var(--line); border-radius:6px; max-height:300px; overflow-y:auto; margin:4px 0 10px;}
.mm-picker-item{padding:8px 12px; cursor:pointer; border-bottom:1px solid var(--line-soft);}
.mm-picker-item:hover{background:var(--hover, rgba(255,255,255,.04));}
/* the hidden attribute wins over component display rules (.btn is inline-flex) */
[hidden]{display:none !important;}
/* suporte */
.sup-head{justify-content:flex-start; gap:10px;}
.sup-head .inl-field{flex:0 1 auto;}
.sup-head .inl-field select{flex:0 1 auto; width:auto; min-width:0; text-overflow:ellipsis;}
.sup-head .head-actions{margin-left:auto; display:flex; align-items:center; gap:9px; flex:0 0 auto;}
.list-count{margin:0 0 8px;}
#main-content tr.row-link{cursor:pointer;}
#main-content table.tgrid.suporte-list tr.sla-vencido td{color:inherit;}
.ticket-actions{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0;}
.ticket-actions form{display:inline-flex; align-items:center; gap:6px; margin:0;}
.suporte-nota{border-left:3px solid var(--warn, #f59e0b); padding-left:10px;}
.radio-row{display:flex; gap:18px; margin:6px 0 10px;}
.key-card{margin:0 0 16px;}
.key-box{user-select:all; padding:10px 12px; background:var(--elev); border:1px solid var(--line); border-radius:6px; overflow-x:auto;}
.plain-list{margin:4px 0 12px; padding-left:18px;}
.sup-hist{margin:16px 0;}
.mono{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12.5px;}
.table-wrap{overflow-x:auto; min-width:0;}
/* suporte: compact message paragraphs; list widths fit the status pill */
.suporte-msg .comment-content{white-space:normal;}
.suporte-msg .comment-content p{margin:0 0 4px;}
#main-content table.tgrid.suporte-list .numero{width:12%;}
#main-content table.tgrid.suporte-list .titulo{width:33%;}
#main-content table.tgrid.suporte-list .urgencia{width:9%;}
#main-content table.tgrid.suporte-list .status{width:14%;}
#main-content table.tgrid.suporte-list .responsavel{width:12%;}
#main-content table.tgrid.suporte-list .atualizado{width:12%;}
#main-content table.tgrid.suporte-list .sla{width:8%;}
/* configurações */
.cfg-txt{display:inline-block; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}
.cfg-input{margin:0; font-size:13px;}
.cfg-num{margin:0; width:120px;}
.cfg-row-actions{display:flex; gap:6px; justify-content:flex-end;}
.cfg-section{margin-top:16px;}
.cfg-block{margin:12px 0;}
.cfg-block .actions{justify-content:flex-start; margin-top:8px;}
.root-row{display:flex; align-items:center; gap:6px;}
.root-row input{flex:0 1 280px;}
.sa-code{user-select:all; cursor:pointer;}
/* a confirm trigger wrapper inside an actions cell stays on the same line */
#main-content td.cell-actions > div{display:inline-block;}
/* admin: permission picker */
.perm-box{margin:10px 0;}
.perm-list{margin:6px 0 6px 4px; padding-left:10px; border-left:2px solid var(--line);}
.perm-list.dim{opacity:.4;}
.perm-list .check{display:flex; gap:8px; align-items:baseline; margin:3px 0;}
/* a list head with only the main button keeps it on the right, like the other lists */
.list-head > .btn:only-child, .list-head > form:only-child{margin-left:auto;}
/* resumo: stat cards */
.stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:14px; margin:0 0 22px;}
.stat{text-align:center; padding:18px 16px;}
.stat-label{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.stat-value{font-size:22px; font-weight:600; margin-bottom:4px;}
.stat-value.big{font-size:28px;}
.stat-main{border-color:var(--line);}
.resumo-block{margin:0 0 22px;}

/* conteudos forms */
.actions.start{justify-content:flex-start; margin-top:8px;}
.form-ctx{margin:0 0 10px;}
.spec-box{display:block;}
.spec-links{display:flex; gap:14px; margin-top:6px;}
.spec-links:empty{margin:0;}
.link-sm{font-size:12px;}
.field-row.four{grid-template-columns:repeat(4, minmax(0, 1fr));}
@media (max-width:1100px){.field-row.four{grid-template-columns:minmax(0, 1fr);}}
.code-preview{min-height:80px; padding:10px 12px; background:var(--elev); border:1px solid var(--line); border-radius:6px; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space:pre-wrap; font-size:12.5px;}
/* profile select fills its column and never overflows it (long profile labels) */
.spec-box{display:block; min-width:0;}
.spec-box select{width:100%; max-width:100%; text-overflow:ellipsis;}
/* perfis de mídia: column widths (the actions cell keeps its button whole) */
#main-content table.perfis-list th:nth-child(1){width:35%;}
#main-content table.perfis-list th:nth-child(2){width:40%;}
#main-content table.perfis-list th:nth-child(3){width:12%;}
#main-content table.perfis-list th:nth-child(4){width:13%;}

/* specs form: a field with its example line below */
.field-col{display:flex; flex-direction:column; gap:2px; min-width:0;}
.field-col > .meta{margin-top:-6px;}
.field-col{margin-bottom:10px;}
/* checkbox of the guide (UI_GUIDE 4.2, auto32-server b6b711d): one global rule, no accent-color
   per component. Attention actions set --chk: var(--warn) on the input. Radios keep accent-color. */
input[type=checkbox]{appearance:none; -webkit-appearance:none; width:16px; height:16px; margin:0;
  border:1.5px solid rgba(255,255,255,.45); border-radius:4px; background:transparent; position:relative;
  flex:0 0 auto; display:inline-grid; place-content:center; cursor:pointer; vertical-align:middle;
  accent-color:auto;}
input[type=checkbox]:hover{border-color:rgba(255,255,255,.7);}
input[type=checkbox]:checked{background:var(--chk, var(--accent)); border-color:var(--chk, var(--accent));}
input[type=checkbox]:checked::before{content:""; width:8px; height:4px; border:solid var(--base);
  border-width:0 0 2px 2px; transform:rotate(-45deg); margin-top:-2px;}
input[type=checkbox]:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
input[type=checkbox]:disabled{opacity:.4; cursor:not-allowed;}
.perm-list .check{align-items:center;}

/* ===== Softwares ===== */
.sw-feat-label{font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:6px 0 6px;}
.sw-source{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:8px 0;}
/* ===== Mensagens ===== */
.local-time{white-space:nowrap; font-size:12px;}
.msg-head{justify-content:flex-start;}
.msg-head .inl-field{flex:0 1 auto;}
.msg-head .inl-field select{flex:0 1 auto; width:auto;}
.msg-file{font-size:12.5px;}
.msg-sum{display:flex; flex-wrap:wrap; gap:4px 10px; font-size:12px;}
.txt-crit{color:var(--crit);} .txt-warn{color:var(--warn);} .txt-ok{color:var(--ok);}
.msg-panel{margin:0 0 16px;}
.msg-links{display:inline-flex; gap:8px; margin-left:8px;}
.file-list{margin:4px 0 8px; padding-left:18px;}
.file-crit, .fold-crit{color:var(--crit);}
.file-warn, .fold-warn{color:var(--warn);}
.file-ok, .fold-ok{color:var(--ok);}
.fold-crit, .fold-warn{font-weight:600;}
/* ===== Bundles de serviços ===== */
.rot-input{width:90px; text-align:center;}
.lp-input{width:90px; text-align:right;}
#main-content table.sb-edit input{margin:0;}
#main-content table.sb-edit td.num{text-align:right;}
#main-content table.sb-edit td.qt-total{text-align:center;}
/* ===== Bundles de equipamentos ===== */
#main-content td.center{text-align:center;}
.field #equipment_select{display:block;}
/* ===== auditoria ===== */
.audit-head{justify-content:flex-start;}
.audit-head .inl-field:first-child{flex:1 1 280px;}
.audit-head .inl-field select{flex:0 1 auto; width:auto;}
.audit-head > .btn{margin-left:auto;}
/* auditoria (screen): the printed day navigation keeps its markup; screen look only */
#audit-log-content .audit-pagination{display:flex; align-items:center; justify-content:space-between; gap:12px; margin:14px 0;}
#audit-log-content .audit-pagination a[role=button]{display:inline-flex; align-items:center; height:30px; padding:0 12px; border:1px solid var(--line); border-radius:6px; color:var(--text); text-decoration:none; font-size:12px; text-transform:uppercase; letter-spacing:.06em;}
#audit-log-content .audit-pagination a[disabled]{opacity:.4; pointer-events:none;}
#audit-log-content td small{color:var(--muted) !important;}
/* audit record detail */
.audit-diff .val-old{color:var(--crit);}
.audit-diff .val-new{color:var(--ok, #34c759);}
.audit-action-val{color:var(--accent);}
.json-box{font-size:12px; max-height:300px; overflow:auto; padding:10px 12px; background:var(--elev); border:1px solid var(--line); border-radius:6px; white-space:pre-wrap;}
.audit-raw{margin-top:16px;}
/* ===== Mapa de equipamentos ===== */
.mapa-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto; justify-content:flex-end;}
.mapa-actions .btn{padding-left:10px; padding-right:10px; white-space:nowrap;}
.mapa-filters{justify-content:flex-start; gap:10px;}
.mapa-filters .inl-field:first-child{flex:1 1 240px;}
.mapa-filters .inl-field:not(:first-child){flex:0 1 auto;}
.mapa-filters .inl-field select{flex:0 1 auto; width:auto;}
/* suporte: filters + buttons stay on ONE row on desktop (mapa has 4 filters + 4 buttons: it wraps, buttons right) */
@media (min-width:1200px){.sup-head{flex-wrap:nowrap;}}
/* ---------------------------------------------------------------- multimedia header
   table.min.mm (proposals, equipment list, map, contents): sala, MM code and name
   on one line, one space apart, light / 600 / light (UI guide extreme weights); the description small. */
table.min.mm:not(.rack-hdr):not(.unassigned), table.min.mm:not(.rack-hdr):not(.unassigned) tbody{display:block; width:auto;}
table.min.mm:not(.rack-hdr):not(.unassigned) tr{display:flex; align-items:baseline; gap:.3em;}
table.min.mm:not(.rack-hdr):not(.unassigned) td{display:block; flex:none; margin:0; padding:0; width:auto; max-width:none; border:0;
  font-size:28px; font-weight:300; text-transform:uppercase;}
table.min.mm:not(.rack-hdr):not(.unassigned) td.codigo{font-weight:600;}
table.min.mm:not(.rack-hdr):not(.unassigned) td.descricao{flex:1 1 auto; min-width:0; margin-left:.4em; font-size:13px; font-weight:400;
  color:var(--muted); text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/* ===== revisao ===== */
.row-actions{display:flex; gap:6px; flex-wrap:wrap}
/* ===== debug ===== */
dl.kv{display:grid; grid-template-columns:max-content 1fr; gap:6px 18px}
dl.kv dt{color:var(--muted)}
/* ===== clone ===== */
.clone-drift .pacote{width:70%}
.clone-drift .status{width:30%}

/* ---------------------------------------------------------------- floor plans (planta.js, routes/plantas.py)
   Layout of .planta-view / .planta-img / .planta-ctrl is in styles.css (copied to layout.gen.css). */
.planta-ico{display:inline-flex; vertical-align:middle; align-items:center; background:none; border:0; padding:0 .15em;
  margin:0 0 0 .25em; color:var(--faint); cursor:pointer; width:auto; line-height:1;}
.planta-ico svg{width:1em; height:1em;}
.planta-ico:hover{color:var(--text);}
.planta-view{background:var(--elev); border:1px solid var(--line-soft); cursor:grab; touch-action:none; user-select:none;}
.planta-view.dragging{cursor:grabbing;}
.planta-img{transform-origin:0 0; user-select:none; -webkit-user-drag:none; visibility:hidden;}
.planta-erro{padding:36px 16px; text-align:center; color:var(--faint);}
.planta-erro[hidden]{display:none;}
.planta-rename input{margin:0;}

/* Multimedia list room headers: UI guide extreme weights, code 600 + name 300 (like MUSIS32) */
h3 > a > span.sala{font-weight:300;}
/* Code inside a light title (multimedia view head): UI guide extreme weights */
.block-title .t-code{font-weight:600;}

/* ---------------------------------------------------------------- copy-to-clipboard icon (ui.copy_btn) */
.copy-ico{display:inline-block; background:none; border:0; padding:0; margin:0 0 0 6px; width:1em; height:1em;
  line-height:1; color:var(--muted); cursor:pointer; vertical-align:middle;}
.copy-ico svg{width:1em; height:1em; display:block;}
.copy-ico:hover{color:var(--text);}
.copy-ico.copied{color:var(--ok);}
/* in table cells the text ellipsizes before the icon does, so the icon stays visible */
.copy-txt{display:inline-block; max-width:calc(100% - 1.6em); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}
/* "Dar acesso no Drive" modal (routes/conteudos.py drive_acesso_form / drive_acesso_handler).
   Up to 50 multimedias: the folder grid scrolls inside its own box with the header fixed, so
   the e-mail, the role and the buttons stay visible below it. */
.drive-form .drive-intro{margin:10px 0 14px;}
/* the dialog is a flex item of .overlay: without this the grid's width pushes it past a phone screen */
.overlay > .dlg:has(.drive-form, .drive-res){min-width:0;}
.drive-grade{max-height:max(160px, calc(100vh - 480px)); overflow:auto; overscroll-behavior:contain;
  border:1px solid var(--line); border-radius:12px;}
.drive-grade table.drive-pastas{margin:0; width:100%; min-width:560px; table-layout:fixed;}
.drive-pastas thead th{position:sticky; top:0; z-index:1; background:var(--elev); padding:10px 12px;}
.drive-pastas td{padding:8px 12px;}
.drive-pastas :is(th, td):not(:first-child){width:96px; padding-inline:6px; text-align:center;}
.drive-pastas tbody tr:last-child td{border-bottom:0;}
.drive-pastas tbody tr:hover td{background:color-mix(in srgb, var(--elev) 60%, transparent);}
.drive-pastas input[type=checkbox]{width:16px; height:16px; margin:0; vertical-align:middle; accent-color:var(--accent); cursor:pointer;}
/* column name on top, its box below: the box lines up with the boxes of the column */
.drive-col-lab{display:inline-flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer;}
/* layout.gen.css gives every non-tgrid td nowrap + ellipsis. Here the subfolder columns are as
   wide as DOCUMENTOS and the multimedia column takes the rest (fixed layout), cutting the name on
   one line (full name in its title). Below 560px the grid scrolls sideways inside its box. */
table.drive-pastas :is(th, td){white-space:nowrap; overflow:visible; text-overflow:clip;}
table.drive-pastas td.drive-mm{overflow:hidden; text-overflow:ellipsis;}
.drive-mm .meta{margin-left:8px;}
.drive-conta{margin:8px 2px 18px; text-align:right;}
.drive-conta.over{color:var(--warn);}
.drive-aviso{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:0 0 14px;}
.drive-form textarea{resize:vertical;}
.drive-res{max-height:max(160px, calc(100vh - 260px)); overflow:auto; overscroll-behavior:contain; margin-top:14px;
  border:1px solid var(--line); border-radius:12px; padding:2px 14px;}
.drive-res-list{margin:0; padding:0; list-style:none;}
.drive-res-list li{padding:8px 0; font-size:13px; border-bottom:1px solid var(--line-soft); overflow-wrap:anywhere;}
.drive-res-list li:last-child{border-bottom:0;}
@media (max-width:640px){
  .drive-campos{grid-template-columns:minmax(0, 1fr);}
}