/* RCA 3.2.1 — referência operacional clara. Carregado após app.css. */
:root {
  --bg: #f5f6fb; --panel: #fff; --ink: #232b3b; --muted: #697487;
  --line: #dce2ed; --brand: #245eea; --accent: #6045ed;
  --soft: #efedff; --zebra: #e8eef6; --row-hover: #e0eaff;
  --header-bg: #e2eefc; --glow: #6045ed24;
}
body.dark {
  --bg: #131823; --panel: #1d2533; --ink: #e9eef8; --muted: #a8b3c8;
  --line: #354158; --brand: #9cbcff; --accent: #a497ff;
  --soft: #302d4c; --zebra: #232e40; --row-hover: #303f5b;
  --header-bg: #273750; --glow: #8c79ff28;
}
body { font-family: "Segoe UI", Arial, sans-serif; font-size: 13px; }
/* As áreas explícitas impedem que o conteúdo ocupe a antiga coluna do menu. */
.layout {
  display: grid; grid-template-areas: "sidebar main";
  grid-template-columns: 194px minmax(0, 1fr); min-height: 100vh;
  width: 100%; transition: none;
}
.layout > .sidebar { grid-area: sidebar; }
.layout > .main { grid-area: main; min-width: 0; width: auto; padding: 0 12px 12px; }
.layout.sidebar-collapsed { grid-template-areas: "main"; grid-template-columns: minmax(0, 1fr); }
.layout.sidebar-collapsed > .sidebar { display: none; }
.sidebar {
  background: var(--panel); border-right: 1px solid var(--line);
  padding: 14px 7px; box-shadow: 2px 0 9px var(--glow);
  height: 100vh; position: sticky; top: 0; overflow-y: auto;
}
.brand-logo { width: 146px; height: 63px; object-fit: contain; background: #fff; }
.tagline { display: none; }
.nav { margin-top: 16px; gap: 3px; flex-direction: column; overflow: visible; }
.nav button {
  border: 1px solid transparent; min-height: 33px; padding: 7px 12px;
  font-size: 11.5px; font-weight: 500; color: var(--ink); border-radius: 8px;
  box-shadow: none; background: transparent;
}
.nav button:hover { background: var(--soft); color: var(--brand); border-color: var(--line); box-shadow: 0 3px 10px var(--glow); }
.nav button.active { background: linear-gradient(120deg,#6944eb,#4e41e8); color: #fff; border-color: #6550ef; box-shadow: 0 3px 10px #6045ed32; }
.nav-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-box { display: block; position: relative; padding-left: 37px; font-size: 11px; margin-top: 18px; border-color: var(--line); }
.user-avatar { position: absolute; left: 0; top: 13px; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; color: var(--brand); background: var(--soft); font-weight: 700; }
.user-box small { font-size: 10px; }
.topbar {
  position: sticky; top: 0; z-index: 25; min-height: 47px;
  margin: 0 -12px 10px; padding: 6px 12px;
  background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 3px 7px var(--glow); align-items: center;
  flex-wrap: nowrap; gap: 8px;
}
.page-heading { gap: 9px; min-width: 0; }
.topbar .page-heading h1 { font-size: 17px; font-weight: 700; letter-spacing: -.25px; color: var(--brand); margin: 0; }
.topbar > div:last-child { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
#toggle-sidebar { position: relative; z-index: 1; display: inline-grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; font-size: 18px; border-radius: 7px; background: var(--panel); color: var(--ink); }
button, .button-link { border-radius: 8px; font-size: 12px; padding: 7px 10px; box-shadow: 0 2px 4px #11182708; }
button:not(:disabled):hover, .button-link:hover { border-color: #a3a6ef; color: var(--brand); box-shadow: 0 0 0 2px var(--glow),0 4px 12px var(--glow); }
button:focus-visible, a:focus-visible { outline-color: var(--accent); }
button.primary, body.dark button.primary { background: linear-gradient(120deg,#3678ff,#275dec); border-color: #3567f2; color: #fff; box-shadow: 0 3px 8px #3069f52c; }
button.primary:hover, body.dark button.primary:hover { background: linear-gradient(120deg,#4a83ff,#3d5ce9); border-color: #496bf5; color: #fff; box-shadow: 0 0 0 3px #5274ff20,0 4px 14px #4761ff40; }
button.danger:not(:disabled):hover { color: var(--danger); }
input, select, textarea { border-radius: 6px; font-size: 12px; }
input:focus, select:focus, textarea:focus { outline-color: var(--brand); }
.freight-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 7px; background: var(--panel); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 2px 6px var(--glow); margin-bottom: 9px; }
.freight-filterbar { border: 0; padding: 0; background: transparent; flex: 1 1 470px; gap: 5px; }
.freight-filterbar > input { width: 270px; max-width: 100%; padding: 6px 9px; font-size: 11px; }
.freight-toolbar { margin: 0; gap: 5px; }
.freight-controls button { font-size: 10.5px; padding: 6px 8px; min-height: 28px; }
.freight-filterbar .saved button { background: var(--bg); border-color: var(--line); }
.freight-wrap { max-height: calc(100vh - 180px); border-radius: 7px; }
.freight-table th { background: var(--header-bg); }
.freight-table th, .freight-table td { padding: 6px 9px; font-size: 11px; white-space: nowrap; border-right-color: var(--line); }
.freight-table td { height: 34px; }
.freight-table .column-head { gap: 5px; min-height: 59px; }
.freight-table .column-title { height: 22px; flex: 0 0 22px; line-height: 20px; font-size: 10px; text-transform: uppercase; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; box-shadow: none; }
.freight-table .column-title:hover { background: transparent; color: var(--brand); box-shadow: none; }
.freight-table th input, .freight-table th select, .freight-table th .range, .freight-table th .range input, .column-filter { height: 29px; }
.freight-table th input, .freight-table th select { padding: 4px 5px; font-size: 10px; background: transparent; border-color: #bccde3; }
body.dark .freight-table th input, body.dark .freight-table th select { border-color: #506380; }
.freight-table td button { font-size: 10px; padding: 4px 7px; }
.freight-table .badge { font-size: 10px; padding: 2px 8px; }
.freight-table .whatsapp-link { width: 24px; height: 24px; }
.pagination { margin: 7px 0; font-size: 11px; }
.pagination button { font-size: 11px; padding: 5px 9px; }
.metric, .card, .kpi { box-shadow: 0 6px 20px #1a255908; border-radius: 10px; }
.metric { padding: 17px; }
.metric strong { font-size: 28px; }
.note { border-left-color: var(--brand); background: var(--soft); }
.ai-launch { background: var(--panel); color: var(--brand); border: 1px solid var(--line); font-size: 12px; }
/* O cabeçalho laranja dos formulários e a semântica dos badges são preservados. */
.field-section legend { color: #bc520a; }
body.dark .field-section legend { color: #ffb97f; }
.modal-head button:hover { color: #552300; border-color: #fbd1a2; }
.availability-board { grid-template-columns: repeat(4,minmax(250px,1fr)); gap: 12px; }
.availability-lane { --lane-color: #2563eb; background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--lane-color); border-radius: 12px; padding: 10px; min-height: 150px; box-shadow: 0 10px 26px #1923440c; }
.availability-lane[data-region=SP] { --lane-color: #7426dd; }
.availability-lane[data-region=SUL_PE] { --lane-color: #16a34a; }
.availability-lane[data-region=OBS] { --lane-color: #64748b; }
.lane-head { gap: 6px; justify-content: flex-start; margin-bottom: 9px; padding: 0 0 8px; }
.lane-head h2 { font-size: 12px; color: var(--ink); }
.lane-head .badge { font-size: 10px; background: var(--bg); color: var(--muted); padding: 2px 7px; }
.lane-head .lane-add { margin-left: auto; width: 25px; height: 25px; min-width: 25px; padding: 0; color: var(--lane-color); font-size: 17px; }
.lane-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.availability-card { padding: 9px; min-width: 0; border-radius: 10px; box-shadow: 0 4px 10px #1e293b0a; }
.availability-card-head { margin-bottom: 6px; gap: 3px; align-items: flex-start; }
.availability-card-head strong { font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.queue-position { display: block; width: auto; height: auto; min-width: 0; color: var(--muted); background: transparent; font-size: 9px; font-weight: 500; margin-bottom: 2px; }
.queue-position::before { content: "#"; }
.availability-card .whatsapp-link { width: 21px; height: 21px; flex-shrink: 0; }
.availability-card .status-badge { font-size: 8px; padding: 2px 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.availability-card p { font-size: 10px; margin: 6px 0; }
.availability-card .card-actions { gap: 3px; margin-top: 7px; }
.availability-card .card-actions button { font-size: 9px; padding: 3px 5px; background: #ffffffaa; color: #334155; border-color: #d5dce5; }
.availability-card[data-situation="MANUTENÇÃO"], .availability-card[data-situation="MÉDICO"] { background: #fce4e9; border-color: #edc7d0; color: #3f2530; }
.availability-card[data-situation="PROBLEMAS PESSOAIS"] { background: #fff0de; border-color: #f1d4af; color: #54351b; }
.availability-card[data-situation="FOLGA"] { background: #eee8ff; border-color: #d8cdf8; color: #3e315b; }
.availability-card[data-situation]:not([data-situation="DISPONÍVEL"]) .muted { color: #6c626e; }
body.dark .availability-card[data-situation="MANUTENÇÃO"], body.dark .availability-card[data-situation="MÉDICO"] { background: #482c37; border-color: #704453; color: #fce8ec; }
body.dark .availability-card[data-situation="PROBLEMAS PESSOAIS"] { background: #493624; border-color: #73533a; color: #ffead2; }
body.dark .availability-card[data-situation="FOLGA"] { background: #382e50; border-color: #625080; color: #f0e9ff; }
body.dark .availability-card[data-situation]:not([data-situation="DISPONÍVEL"]) .muted { color: #c2b8c7; }
body.dark .availability-card .card-actions button { background: var(--panel); color: var(--ink); border-color: var(--line); }
@media(max-width:1300px) { .availability-board { grid-template-columns: repeat(2,minmax(260px,1fr)); } }
@media(max-width:850px) {
  .layout { grid-template-columns: 176px minmax(0,1fr); }
  .layout.sidebar-collapsed { grid-template-columns: minmax(0,1fr); }
  .nav button { font-size: 11px; padding: 7px 9px; }
  .topbar .page-heading h1 { font-size: 15px; }
  .availability-board { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:600px) {
  .layout { grid-template-columns: 148px minmax(0,1fr); }
  .layout.sidebar-collapsed { grid-template-columns: minmax(0,1fr); }
  .layout > .main { padding: 0 8px 8px; }
  .sidebar { padding: 10px 5px; }
  .brand-logo { width: 125px; }
  .nav button { font-size: 10px; padding: 7px; }
  .topbar { margin: 0 -8px 8px; padding: 6px 8px; flex-wrap: wrap; }
  .topbar > div:last-child { margin-left: auto; }
  .topbar .page-heading { flex: 1 1 auto; }
  .topbar .page-heading h1 { font-size: 14px; overflow-wrap: anywhere; }
  .lane-cards { grid-template-columns: 1fr; }
  .sidebar-collapsed .lane-cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .freight-filterbar { min-width: 0; flex-basis: 100%; }
  .freight-filterbar > input { width: 100%; }
  .freight-wrap { max-height: 65vh; }
}
@media(prefers-reduced-motion:reduce) { button,.button-link,.availability-card { transition: none; } }
.nav button.active:not(:disabled):hover,
.nav button.active:focus-visible { color: #fff; background: linear-gradient(120deg,#6944eb,#4e41e8); }
/* Intervalos em duas caixas legíveis, mantendo os títulos e células alinhados. */
.freight-table .column-head { min-height: 83px; }
.freight-table .column-filter { height: 56px; display: flex; align-items: center; }
.freight-table th .range { height: 56px; flex-direction: column; gap: 4px; }
.freight-table th .range input { width: 100%; height: 26px; flex: 1 1 26px; }

/* 3.2.4: readable centered tables, account access matrix and column ordering. */
body:not(.dark) table { color: #172033; }
body:not(.dark) table .muted, body:not(.dark) table small { color: #364152; }
table th, table td, .freight-table th, .freight-table td { text-align: center; vertical-align: middle; white-space: nowrap; }
table th input, table th select, .freight-table .column-title { text-align: center; }
table .actions, table .column-filter, table .range { justify-content: center; }
.topbar-logo { width: 84px; height: 32px; object-fit: contain; background: #fff; border-radius: 5px; padding: 2px 4px; flex-shrink: 0; }
.freight-filterbar .saved button { background: #7534d6; color: #fff; border-color: #7534d6; font-weight: 650; box-shadow: 0 3px 9px #7534d625; }
.freight-filterbar .saved button:hover { background: #6021bf; color: #fff; border-color: #a978fa; box-shadow: 0 0 0 3px #9155eb25,0 4px 14px #7534d64d; }
.users-table tbody tr { cursor: pointer; }
.users-table tbody tr:focus-visible { outline: 2px solid #7534d6; outline-offset: -2px; }
#user-search { width: min(380px,100%); }
#permission-search, #access-search { margin: 8px 0; max-width: 380px; }
.permission-grid { max-height: 240px; overflow: auto; }
.permission-grid [hidden] { display: none; }
.access-wrap { max-height: 340px; }
.column-order-list { max-height: 58vh; overflow: auto; display: flex; flex-direction: column; gap: 5px; }
.column-order-item { display: flex; gap: 9px; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); padding: 7px 10px; }
.column-order-item label { display: flex; flex: 1; align-items: center; gap: 8px; }
.column-order-item input, #access-grid input { width: auto; }
.column-order-item.dragging { opacity: .45; border-color: #7534d6; }
.drag-handle { cursor: grab; color: #7534d6; font-size: 22px; }
.column-order-item button { padding: 3px 9px; }
body.dark table { color: #edf2fa; }
body.dark table small, body.dark table .muted { color: #c2cbda; }

/* Faturamento de clientes: controles de normalização compactos. */
.cr-alias-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.cr-alias-toolbar #cr-alias-search { width: min(380px,100%); }
.cr-alias-toolbar #cr-alias-status { width: 260px; max-width: 100%; }
#cr-preview .form-actions label { display: flex; gap: 8px; align-items: center; }
#cr-preview .form-actions input[type=checkbox] { width: auto; }