/* Espelha a linguagem visual do CRM desktop (ui/styles.py). */
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; color: var(--on-page); background: var(--page-bg); font: 13px/1.45 "Segoe UI", "Roboto", Arial, sans-serif; }
h1, h2, p { margin-top: 0; } h1 { color: var(--primary); font-size: 20px; line-height: 1.2; } h2 { color: var(--primary); font-size: 15px; }
a { color: var(--primary); font-weight: 600; text-decoration: none; } a:hover { text-decoration: underline; }
.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, var(--primary-dark), var(--primary)); }
.login-card { width: min(100%, 430px); padding: 38px; border: 1px solid color-mix(in srgb, var(--accent) 65%, white); border-radius: 12px; background: #fff; box-shadow: 0 24px 56px #00152170; }
.eyebrow { margin-bottom: 6px; color: #5C6D78; font-size: 10px; font-weight: 700; letter-spacing: 1px; } .subtle { color: #5C6D78; }
label { display: block; margin: 16px 0 6px; color: #0B2538; font-size: 12px; font-weight: 700; }
input, select { width: 100%; min-height: 38px; padding: 7px 10px; border: 1px solid #CAD7DE; border-radius: 6px; outline: 0; color: #0B2538; background: #fff; font: inherit; }
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
button { min-height: 36px; width: 100%; border: 0; border-radius: 5px; padding: 8px 18px; background: var(--accent); color: var(--on-accent); font: inherit; font-weight: 700; cursor: pointer; transition: background .15s, transform .15s; }
button:hover { background: var(--accent-hover); } button:active { transform: translateY(1px); }
.error, .success { margin: 16px 0; padding: 10px 12px; border-radius: 6px; font-weight: 600; } .error { color: #9D1C1C; background: #FFF0F0; border: 1px solid #F3C3C3; } .success { color: #176C42; background: #EAF8EF; border: 1px solid #B9E8CC; }
.shell { display: flex; min-height: 100vh; }
.mobile-menu-toggle, .mobile-nav-overlay { display: none; }
.sidebar { position: sticky; top: 0; display: flex; height: 100vh; flex: 0 0 220px; flex-direction: column; padding: 16px 12px; color: #fff; background: var(--primary); box-shadow: 2px 0 10px #0015211e; }
.brand { display: grid; min-height: 42px; gap: 8px; padding: 7px 10px 14px; border-bottom: 1px solid color-mix(in srgb, white 22%, transparent); color: #fff; font-size: 17px; font-weight: 700; }
.brand img { display: block; max-width: 176px; max-height: 72px; object-fit: contain; object-position: left center; }
.login-logo { display: block; max-width: 100%; max-height: 90px; margin: 0 auto 24px; object-fit: contain; }
nav { display: grid; gap: 4px; padding-top: 14px; } .sidebar > nav { min-height: 0; overflow-y: auto; scrollbar-width: thin; } nav a, nav span { display: block; padding: 10px 12px; border: 1px solid transparent; border-radius: 5px; color: #D8E7ED; font-weight: 600; text-decoration: none; } nav a:hover { background: color-mix(in srgb, white 10%, transparent); color: #fff; text-decoration: none; } nav .active { border-color: color-mix(in srgb, var(--accent) 85%, transparent); color: #fff; background: color-mix(in srgb, var(--accent) 27%, transparent); } nav small { float: right; color: #B7CAD3; font-size: 9px; font-weight: 500; }
.sidebar-account { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; margin-top: auto; padding: 10px 0 8px; border-top: 1px solid color-mix(in srgb, white 22%, transparent); }
.sidebar-user { display: grid; min-width: 0; gap: 2px; padding: 0 10px; color: #fff; text-decoration:none; }
.sidebar-user span { color: #C7D9E1; font-size: 11px; }
.sidebar-logout { margin: 0; padding: 0; border: 0; }
.link-button { width: auto; min-height: 32px; padding: 5px 10px; border: 1px solid color-mix(in srgb, white 30%, transparent); background: transparent; color: #D8E7ED; text-align: center; }
.link-button:hover { background: color-mix(in srgb, white 10%, transparent); color: #fff; }
.theme-button { width: 100%; min-height: 34px; margin: 0; padding: 6px 10px; color: #fff; border: 1px solid var(--accent); background: transparent; text-align: left; }
.content { flex: 1; min-width: 0; padding: 30px 34px; } .content > header { display: flex; height: 60px; min-height: 60px; align-items: center; justify-content: space-between; gap: 16px; margin: -30px -34px 26px; padding: 10px 24px; overflow: hidden; border-bottom: 1px solid #DCE7EC; background: #fff; } .content > header > div:first-child { min-width: 0; } .content > header h1 { max-width: 100%; margin: 0; overflow: hidden; font-size: 16px; line-height: 20px; text-overflow: ellipsis; white-space: nowrap; } .content > header .subtle { margin: 1px 0 0; line-height: 15px; } .content > header .eyebrow { display: none; }
.metrics { display: grid; grid-template-columns: repeat(4, minmax(155px, 1fr)); gap: 14px; margin: 0 0 20px; } .metrics article, .panel { border: 1px solid #DCE7EC; border-radius: 7px; background: #fff; box-shadow: 0 1px 2px #0b253807; } .metrics article { padding: 16px; border-top: 3px solid var(--accent); } .metrics p { margin-bottom: 6px; color: #5C6D78; font-size: 11px; font-weight: 700; text-transform: uppercase; } .metrics strong { color: var(--primary); font-family:"Segoe UI",Arial,sans-serif; font-size:22px; font-weight:800; line-height:1.2; letter-spacing:.1px; font-variant-numeric:tabular-nums; }
.panel { margin-bottom: 18px; padding: 18px; } .panel h2 { margin-bottom: 14px; }
.ai-security-badge { align-self:flex-start; padding:6px 10px; border:1px solid #b9e8cc; border-radius:999px; color:#176c42; background:#eaf8ef; font-size:11px; font-weight:700; }
.ai-usage-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:18px 0; }
.ai-usage-grid > div { display:flex; flex-direction:column; gap:4px; padding:14px; border:1px solid #dce7ec; border-radius:10px; background:#f7fafb; }
.ai-usage-grid strong { font-size:20px; }
.ai-usage-grid span { color:#5c6d78; font-size:12px; }
@media (max-width:700px) { .ai-usage-grid { grid-template-columns:1fr; } }
.password-field { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px; }
.password-field button { width:auto; min-width:78px; }
.ai-features { margin:12px 0 0; padding:12px; border:1px solid #cad7de; border-radius:7px; }
.ai-features legend { padding:0 7px; color:var(--primary); font-weight:700; }
.ai-features > div { display:grid; grid-template-columns:repeat(3,minmax(180px,1fr)); gap:8px 16px; }
.ai-features label { display:flex; gap:8px; align-items:center; margin:0; padding:8px; border-radius:5px; background:#f7fafb; }
.ai-features input { width:18px; min-height:18px; }
.success-inline { color:#176c42; }.error-inline { color:#9d1c1c; }
.ai-settings textarea { width:100%; padding:9px 10px; border:1px solid #cad7de; border-radius:6px; color:#0b2538; background:#fff; font:inherit; resize:vertical; }
.theme-dark .ai-security-badge { color:#8be2b0; border-color:#276a49; background:#153c2a; }
.theme-dark .ai-usage-grid > div { border-color:#25536a; background:#0b2739; }
.theme-dark .ai-usage-grid span { color:#a9bec8; }
.theme-dark .ai-features label { background:#0b2739; }
@media(max-width:900px){.ai-features > div{grid-template-columns:repeat(2,minmax(160px,1fr));}}
@media(max-width:620px){.ai-features > div{grid-template-columns:1fr}.password-field,.lookup{grid-template-columns:1fr}.password-field button{width:100%}}
.ai-assistant-page { max-width:none; }
.ai-assistant-intro { display:grid; grid-template-columns:minmax(260px,.75fr) minmax(560px,1.25fr); gap:24px; align-items:center; }
.ai-assistant-intro h2 { margin-bottom:6px; }
.ai-example-grid { display:grid; grid-template-columns:repeat(2,minmax(210px,1fr)); gap:9px; }
.ai-example-grid button { display:flex; width:100%; min-height:46px; align-items:center; justify-content:flex-start; gap:9px; padding:9px 13px; border:1px solid #cad7de; color:var(--primary); background:#f7fafb; text-align:left; }
.ai-example-grid button:hover { border-color:var(--accent); background:var(--accent-soft); }
.ai-example-grid button span { font-size:17px; }
.ai-answer div { white-space:pre-wrap; line-height:1.65; }
#ai-assistant-form { display:grid; width:100%; gap:8px; }
#ai-assistant-form label { margin:0; }
#ai-assistant-form #ai-question { display:block; width:100% !important; min-width:0; min-height:112px; margin:0; padding:11px 12px; border:1px solid #cad7de; border-radius:7px; color:#0b2538; background:#fff; font:inherit; resize:vertical; }
.ai-form-actions { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.ai-form-actions .form-submit { width:auto; min-width:230px; }
.theme-dark .ai-example-grid button { color:#e8f3f7; border-color:#25536a; background:#0b2739; }
.theme-dark #ai-assistant-form #ai-question { color:#e8f3f7; border-color:#25536a; background:#102e42; }
@media(max-width:1050px){.ai-assistant-intro{grid-template-columns:1fr}.ai-example-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.ai-example-grid{grid-template-columns:1fr}.ai-form-actions{align-items:stretch;flex-direction:column}.ai-form-actions .form-submit{width:100%}}
.desktop-metrics article { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dce7ec; border-left: 4px solid var(--accent); }
.desktop-metrics article > span { font-size: 25px; }.desktop-metrics .green { border-left-color: #2ecc71; }.desktop-metrics .green strong { color: #2ecc71; }.desktop-metrics .blue { border-left-color: #3498db; }.desktop-metrics .blue strong { color: #3498db; }.desktop-metrics .orange { border-left-color: #f39c12; }.desktop-metrics .orange strong { color: #f39c12; }.desktop-metrics .red { border-left-color: #e74c3c; }.desktop-metrics .red strong { color: #e74c3c; }
.desktop-metrics .purple { border-left-color: #9b59b6; }.desktop-metrics .purple strong { color: #9b59b6; }
.period-filter { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin-bottom: 18px; }.period-filter a { padding: 7px 13px; border: 1px solid #cad7de; border-radius: 5px; background: #fff; }.period-filter a.active { color: #fff; background: var(--primary); }
.dashboard-user { display: flex; gap: 10px; align-items: center; }.dashboard-user strong { display: grid; width: 36px; height: 36px; place-items: center; color: #fff; border-radius: 50%; background: var(--primary); }.dashboard-erp-link{display:inline-flex;min-height:34px;align-items:center;padding:6px 11px;border:1px solid #cad7de;border-radius:6px;background:#f7fafb}.theme-dark .dashboard-erp-link{border-color:#25536a;background:#0b2739}
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }.bar-chart { display: grid; gap: 10px; }.bar-chart > div { display: grid; grid-template-columns: 100px 1fr 35px; gap: 8px; align-items: center; }.bar-chart i { height: 12px; overflow: hidden; border-radius: 6px; background: #e8f0f3; }.bar-chart b { display: block; min-width: 2px; height: 100%; background: var(--accent); }.followup-list { display: grid; gap: 7px; }.followup-list a { display: flex; justify-content: space-between; gap: 15px; padding: 9px 11px; border: 1px solid #dce7ec; border-radius: 5px; }.followup-list span { color: #5c6d78; font-weight: 400; }
.chart-panel { min-height: 240px; }.chart-empty { display:flex; min-height:160px; align-items:center; justify-content:center; color:#7b909b; }.origin-chart { min-height:175px; display:flex; gap:30px; align-items:center; justify-content:center; }.origin-pie { position:relative; display:grid; width:150px; height:150px; flex:0 0 150px; place-items:center; border-radius:50%; box-shadow:0 5px 18px #00162235; }.origin-pie::after { content:""; position:absolute; width:76px; height:76px; border-radius:50%; background:var(--surface, #fff); box-shadow:inset 0 0 0 1px #dce7ec; }.origin-pie > span { position:relative; z-index:1; display:grid; color:var(--primary); font-size:20px; font-weight:800; text-align:center; }.origin-pie small { color:#7b909b; font-size:10px; font-weight:600; text-transform:uppercase; }.origin-legend { display:grid; min-width:210px; gap:9px; }.origin-legend > div { display:grid; grid-template-columns:12px minmax(90px,1fr) auto; gap:8px; align-items:center; }.origin-legend i { width:11px; height:11px; border-radius:50%; }.origin-legend span { color:#6b7d87; font-size:12px; }.theme-dark .origin-pie::after { border-color:#25536a; background:#102e42; }.theme-dark .origin-pie > span { color:#e8f3f7; }.theme-dark .origin-legend span { color:#a9bec8; } @media(max-width:700px){.origin-chart{gap:18px;flex-direction:column}.origin-pie{width:130px;height:130px;flex-basis:130px}}
table { width: 100%; border: 1px solid #DCE7EC; border-spacing: 0; border-collapse: separate; overflow: hidden; border-radius: 6px; background: #fff; } th { padding: 9px 8px; color: #fff; border-right: 1px solid var(--primary-light); background: var(--primary); font-size: 10px; font-weight: 700; text-align: left; letter-spacing: .3px; text-transform: uppercase; } td { padding: 10px 8px; border-bottom: 1px solid #E4ECEF; } tbody tr:nth-child(even) { background: #F7FAFB; } tbody tr:hover { background: var(--accent-soft); } tbody tr:last-child td { border-bottom: 0; }
@media (max-width: 900px) { .sidebar { flex-basis: 185px; } .content { padding: 24px; } .content > header { margin: -24px -24px 22px; } .metrics { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px) {
  body.mobile-nav-open { overflow: hidden; }
  .mobile-menu-toggle {
    position: fixed;
    z-index: 1002;
    top: 10px;
    left: 10px;
    display: inline-flex;
    width: auto;
    min-width: 88px;
    min-height: 40px;
    gap: 7px;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, var(--accent) 70%, white);
    border-radius: 8px;
    box-shadow: 0 4px 14px #00152140;
  }
  .sidebar {
    position: fixed;
    z-index: 1001;
    inset: 0 auto 0 0;
    display: flex;
    width: min(86vw, 300px);
    max-height: 100dvh;
    overflow-y: auto;
    transform: translateX(-105%);
    transition: transform .22s ease;
  }
  .sidebar.mobile-open { transform: translateX(0); }
  .mobile-nav-overlay {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: block;
    visibility: hidden;
    opacity: 0;
    background: #001521a8;
    transition: opacity .22s ease, visibility .22s ease;
  }
  .mobile-nav-overlay.mobile-open {
    visibility: visible;
    opacity: 1;
  }
  .content { width: 100%; padding: 66px 14px 18px; }
  .content > header {
    height: auto;
    min-height: 0;
    align-items: stretch;
    gap: 10px;
    margin: -66px -14px 18px;
    padding: 58px 14px 12px;
    overflow: visible;
    flex-direction: column;
  }
  .content > header > div,
  .content > header form,
  .header-actions { width: 100%; }
  .header-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  .metrics { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .panel { padding: 14px; }
  .panel-heading { align-items: stretch; flex-direction: column; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .login-card { padding: 30px 24px; }
}
.theme-dark body { color: #e8f3f7; background: #071f2d; }
.theme-dark h1, .theme-dark h2, .theme-dark a { color: #e8f3f7; }
.theme-dark .sidebar { background: var(--primary-dark); border-right: 1px solid #25536a; }
.theme-dark .content > header, .theme-dark .panel, .theme-dark .metrics article, .theme-dark table, .theme-dark input, .theme-dark select, .theme-dark .login-card { color: #e8f3f7; border-color: #25536a; background: #102e42; }
.theme-dark .content > header { border-bottom-color: #25536a; }
.theme-dark .subtle, .theme-dark .metrics p, .theme-dark .followup-list span, .theme-dark label { color: #c7d7de; }
.theme-dark .metrics strong { color:#8bc3d8; text-shadow:0 1px 0 #001622; }
.theme-dark th { color: #fff; background: var(--primary-dark); }
.theme-dark td { border-bottom-color: #25536a; }.theme-dark tbody tr:nth-child(even) { background: #0d3046; }.theme-dark tbody tr:hover { background: #123f59; }
.theme-dark .period-filter a, .theme-dark .followup-list a, .theme-dark .agenda-list article, .theme-dark .service-list article, .theme-dark .check-item, .theme-dark .history article { color: #e8f3f7; border-color: #25536a; background: #0d3046; }
.theme-dark .period-filter a.active { background: var(--accent); color: var(--primary-dark); }
.theme-dark input:focus, .theme-dark select:focus { border-color: var(--accent); }
.freight-options { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:9px; margin-top:10px; }
.freight-options article { display:flex; min-height:58px; padding:10px 12px; flex-direction:column; justify-content:center; border:1px solid #dce7ec; border-radius:6px; background:#f7fafb; }
.freight-options article span { color:#5c6d78; }
.theme-dark .freight-options article { border-color:#25536a; background:#0d3046; }
.theme-dark .freight-options article span { color:#c7d7de; }
.freight-options button { display:flex; min-height:58px; padding:10px 12px; flex-direction:column; justify-content:center; align-items:flex-start; color:inherit; border:1px solid #dce7ec; border-radius:6px; background:#f7fafb; text-align:left; }
.freight-options button span { color:#5c6d78; font-weight:400; }
.freight-options button.selected { border:2px solid var(--accent); background:var(--accent-soft); }
.theme-dark .freight-options button { color:#e8f3f7; border-color:#25536a; background:#0d3046; }
.theme-dark .freight-options button span { color:#c7d7de; }
.theme-dark .login-page { background: linear-gradient(135deg, #061822, var(--primary-dark)); }
.notification-toast-stack { position:fixed; z-index:1200; right:18px; bottom:18px; display:grid; width:min(390px,calc(100vw - 28px)); gap:10px; pointer-events:none; }
.notification-toast { padding:15px; color:#0b2538; border:1px solid #b9d6e2; border-left:5px solid var(--accent); border-radius:9px; background:#fff; box-shadow:0 12px 32px #00152150; opacity:0; transform:translateY(18px); transition:opacity .22s,transform .22s; pointer-events:auto; }
.notification-toast.visible { opacity:1; transform:translateY(0); }
.notification-toast strong { display:block; margin-bottom:7px; color:var(--primary); font-size:14px; }
.notification-toast p { margin:0 0 11px; color:#425b68; }
.notification-toast > div { display:flex; gap:8px; }
.notification-toast button { width:auto; min-height:32px; padding:6px 11px; }
.notification-toast .notification-toast-close { color:#425b68; border:1px solid #cad7de; background:transparent; }
.theme-dark .notification-toast { color:#e8f3f7; border-color:#2c627b; border-left-color:var(--accent); background:#102e42; }
.theme-dark .notification-toast strong { color:#e8f3f7; }
.theme-dark .notification-toast p, .theme-dark .notification-toast .notification-toast-close { color:#c7d7de; }
@media(max-width:720px){.notification-toast-stack{right:14px;bottom:14px}.notification-toast{padding:13px}}

/* Menu lateral agrupado, pesquisável e recolhível. */
.sidebar-icon-sprite { position:absolute; width:0; height:0; overflow:hidden; }
.sidebar-brand-row { display:flex; min-height:82px; align-items:center; gap:8px; border-bottom:1px solid color-mix(in srgb, white 18%, transparent); }
.sidebar-brand { display:grid; min-width:0; flex:1; align-items:center; gap:3px; padding:5px 4px; border:0; font-size:12px; line-height:1.2; }
.sidebar-brand img { max-width:150px; max-height:54px; }
.sidebar-brand span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-brand-initial { display:none; }
.sidebar-collapse { display:grid; width:32px; min-width:32px; min-height:32px; padding:0; place-items:center; color:#d8e7ed; border:1px solid transparent; border-radius:7px; background:transparent; }
.sidebar-collapse:hover { color:#fff; border-color:color-mix(in srgb, white 22%, transparent); background:color-mix(in srgb, white 9%, transparent); }
.sidebar-collapse svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.sidebar-search { display:grid; grid-template-columns:20px minmax(0,1fr); gap:7px; align-items:center; margin:10px 0 8px; padding:0 10px; color:#a9bec8; border:1px solid color-mix(in srgb, white 15%, transparent); border-radius:7px; background:color-mix(in srgb, black 12%, transparent); }
.sidebar-search svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.sidebar-search input { min-height:36px; padding:5px 0; color:#fff; border:0; background:transparent; box-shadow:none; }
.sidebar-search input::placeholder { color:#a9bec8; }
.sidebar-search input:focus { border:0; box-shadow:none; }
.sidebar-nav { min-height:0; flex:1; overflow-x:hidden; overflow-y:auto; padding:2px 0 8px; scrollbar-width:thin; scrollbar-color:#547384 transparent; }
.sidebar-group { padding:6px 0; border-bottom:1px solid color-mix(in srgb, white 10%, transparent); }
.sidebar-group[data-menu-group="gerencial"] { --menu-group-color:#3b82f6; }
.sidebar-group[data-menu-group="cadastro"] { --menu-group-color:#8b5cf6; }
.sidebar-group[data-menu-group="atendimento"] { --menu-group-color:#22c55e; }
.sidebar-group[data-menu-group="configuracoes"] { --menu-group-color:#f59e0b; }
.sidebar-group[data-menu-group="organizacao"] { --menu-group-color:#ef4444; }
.sidebar-group:not(:has(.sidebar-link)) { display:none; }
.sidebar-group-toggle { display:flex; width:100%; min-height:38px; align-items:center; gap:9px; padding:7px 9px; color:#fff; border:0; border-left:3px solid var(--menu-group-color); border-radius:6px; background:color-mix(in srgb, var(--menu-group-color) 12%, transparent); text-align:left; text-transform:uppercase; letter-spacing:.8px; font-size:11px; }
.sidebar-group-toggle:hover { color:#fff; background:color-mix(in srgb, var(--menu-group-color) 20%, transparent); }
.sidebar-group-icon,.sidebar-chevron,.sidebar-icon { flex:0 0 auto; width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.sidebar-group-icon,.sidebar-group .sidebar-icon { color:var(--menu-group-color,var(--accent)); }
.sidebar-group-label { min-width:0; flex:1; font-weight:800; }
.sidebar-chevron { width:16px; height:16px; transition:transform .18s ease; }
.sidebar-group.is-closed .sidebar-chevron { transform:rotate(-90deg); }
.sidebar-group-items { display:grid; gap:2px; margin:4px 0 2px 13px; padding-left:8px; border-left:1px solid color-mix(in srgb, var(--menu-group-color) 48%, transparent); }
.sidebar-group.is-closed .sidebar-group-items { display:none; }
.sidebar.menu-searching .sidebar-group-items { display:grid; }
.sidebar-link { position:relative; display:flex; min-height:36px; align-items:center; gap:9px; padding:6px 9px; color:#d8e7ed; border:1px solid transparent; border-radius:7px; text-decoration:none; font-size:13px; font-weight:500; }
.sidebar-link:hover { color:#fff; background:color-mix(in srgb, white 9%, transparent); text-decoration:none; }
.sidebar-link.active { color:#fff; border-color:color-mix(in srgb, var(--accent) 52%, transparent); background:color-mix(in srgb, var(--accent) 23%, transparent); }
.sidebar-link.active::before { position:absolute; inset:6px auto 6px 0; width:3px; border-radius:0 4px 4px 0; background:var(--accent); content:""; }
.sidebar-group .sidebar-link.active { color:#fff; border-color:color-mix(in srgb, var(--menu-group-color) 52%, transparent); background:color-mix(in srgb, var(--menu-group-color) 23%, transparent); }
.sidebar-group .sidebar-link.active::before { position:absolute; inset:6px auto 6px 0; width:3px; border-radius:0 4px 4px 0; background:var(--menu-group-color); content:""; }

/* Cores configuráveis da área de trabalho, independentes do menu lateral. */
.content { color:var(--on-page); background:var(--page-bg); }
.content > header,
.panel,
.metrics article { color:var(--on-surface); background:var(--surface); }
.panel label { color:inherit; }
.theme-dark body,
.theme-dark .content { color:var(--on-page-dark); background:var(--page-bg-dark); }
.theme-dark .content > header,
.theme-dark .panel,
.theme-dark .metrics article { color:var(--on-surface-dark); background:var(--surface-dark); }
.theme-dark .content > header h1,
.theme-dark .panel h1,
.theme-dark .panel h2,
.theme-dark .panel h3,
.theme-dark .panel label { color:var(--on-surface-dark); }

/* Caixas internas configuráveis: campos, tabelas e cartões secundários. */
input, select, textarea, table,
.ai-usage-grid > div, .ai-features label, .ai-example-grid button,
.followup-list a, .agenda-list article, .service-list article, .check-item,
.history article, .freight-options article, .freight-options button,
.security-setup, .erp-stage, .erp-card {
  color:var(--on-box);
  background:var(--box-bg);
}
.theme-dark input, .theme-dark select, .theme-dark textarea, .theme-dark table,
.theme-dark .ai-usage-grid > div, .theme-dark .ai-features label,
.theme-dark .ai-example-grid button, .theme-dark .followup-list a,
.theme-dark .agenda-list article, .theme-dark .service-list article,
.theme-dark .check-item, .theme-dark .history article,
.theme-dark .freight-options article, .theme-dark .freight-options button,
.theme-dark .security-setup, .theme-dark .erp-stage, .theme-dark .erp-card {
  color:var(--on-box-dark);
  background:var(--box-bg-dark);
}
.sidebar-notifications .sidebar-icon { color:#f59e0b; }
.sidebar-link[hidden],.sidebar-group[hidden] { display:none !important; }
.sidebar-notifications { padding-top:7px; }
.sidebar-account { grid-template-columns:36px minmax(0,1fr) auto; gap:8px; padding:9px 0 7px; }
.sidebar-avatar { display:grid; width:34px; height:34px; place-items:center; color:#fff; border:1px solid color-mix(in srgb, white 28%, transparent); border-radius:50%; background:color-mix(in srgb, white 15%, transparent); font-weight:700; }
.sidebar-user { padding:0; }
.sidebar-logout .link-button { display:flex; gap:5px; align-items:center; }
.theme-button { display:flex; align-items:center; gap:7px; }

@media (min-width:721px) {
  .sidebar { width:260px; flex:0 0 260px; padding:12px 11px; transition:width .2s ease,flex-basis .2s ease,padding .2s ease; }
  .sidebar.sidebar-collapsed { width:76px; flex-basis:76px; padding-inline:8px; }
  .sidebar.sidebar-collapsed .sidebar-brand { display:flex; flex:1; justify-content:center; padding:0; }
  .sidebar.sidebar-collapsed .sidebar-brand img { display:none; }
  .sidebar.sidebar-collapsed .sidebar-brand-initial { display:grid; width:34px; height:34px; place-items:center; color:#fff; border:1px solid color-mix(in srgb,white 28%,transparent); border-radius:9px; background:color-mix(in srgb,var(--accent) 35%,transparent); font-size:16px; font-weight:800; }
  .sidebar.sidebar-collapsed .sidebar-brand-name,
  .sidebar.sidebar-collapsed .sidebar-search,
  .sidebar.sidebar-collapsed .sidebar-group-toggle,
  .sidebar.sidebar-collapsed .sidebar-label,
  .sidebar.sidebar-collapsed .sidebar-user,
  .sidebar.sidebar-collapsed .sidebar-logout-label,
  .sidebar.sidebar-collapsed .theme-label { display:none; }
  .sidebar.sidebar-collapsed .sidebar-collapse { width:26px; min-width:26px; }
  .sidebar.sidebar-collapsed .sidebar-collapse svg { transform:rotate(180deg); }
  .sidebar.sidebar-collapsed .sidebar-group { padding:5px 0; }
  .sidebar.sidebar-collapsed .sidebar-group-items { display:grid !important; gap:3px; margin:0; padding:0; border-left:0; }
  .sidebar.sidebar-collapsed .sidebar-link { width:46px; min-height:42px; justify-content:center; margin-inline:auto; padding:8px; }
  .sidebar.sidebar-collapsed .sidebar-link.active::before { inset:5px auto 5px -7px; }
  .sidebar.sidebar-collapsed .sidebar-account { display:grid; grid-template-columns:1fr; justify-items:center; gap:7px; }
  .sidebar.sidebar-collapsed .sidebar-logout .link-button { width:40px; justify-content:center; }
  .sidebar.sidebar-collapsed .theme-button { width:46px; justify-content:center; margin-inline:auto; padding:6px; }
}

@media (max-width:720px) {
  .sidebar,.sidebar.sidebar-collapsed { width:min(86vw,300px); padding:12px; }
  .sidebar-collapse { display:none; }
  .sidebar.sidebar-collapsed .sidebar-brand-name,
  .sidebar.sidebar-collapsed .sidebar-search,
  .sidebar.sidebar-collapsed .sidebar-group-toggle,
  .sidebar.sidebar-collapsed .sidebar-label,
  .sidebar.sidebar-collapsed .sidebar-user,
  .sidebar.sidebar-collapsed .sidebar-logout-label,
  .sidebar.sidebar-collapsed .theme-label { display:flex; }
  .sidebar.sidebar-collapsed .sidebar-brand-initial { display:none; }
  .sidebar.sidebar-collapsed .sidebar-group.is-closed .sidebar-group-items { display:none !important; }
  .sidebar-brand img { max-width:160px; }
}
.sidebar-build { padding: 5px 12px 2px; color: #a9c0cc; font-size: 10px; display: flex; justify-content: space-between; gap: 8px; }
.sidebar-build small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-collapsed .sidebar-build { justify-content: center; padding-inline: 4px; }
.sidebar-collapsed .sidebar-build small { display: none; }
.security-setup { margin-top:14px; padding:14px; border:1px solid #cad7de; border-radius:7px; background:#f7fafb; }
.security-setup code,.break-all { overflow-wrap:anywhere; word-break:break-all; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-heading form { margin:0; }
.section-heading button,.inline-form button { width:auto; }
.inline-form { display:flex; flex-wrap:wrap; align-items:end; gap:10px; }
.inline-form label { min-width:240px; margin:0; }
.status-badge { display:inline-flex; padding:5px 9px; border-radius:999px; font-weight:700; }
.status-success { color:#176c42; background:#eaf8ef; }
.theme-dark .security-setup { border-color:#25536a; background:#0b2739; }
.theme-dark .status-success { color:#8be2b0; background:#153c2a; }
.fiscal-validation-errors pre { margin:8px 0 0; white-space:pre-wrap; color:inherit; font:inherit; }
.fiscal-solution { display:block; min-width:260px; white-space:pre-wrap; }

/* Deve permanecer no fim do arquivo para vencer estilos antigos de módulos. */
input, select, textarea, table,
.ai-usage-grid > div, .ai-features label, .ai-example-grid button,
.followup-list a, .agenda-list article, .service-list article, .check-item,
.history article, .freight-options article, .freight-options button,
.security-setup, .erp-stage, .erp-card {
  color:var(--on-box); background:var(--box-bg);
}
.theme-dark input, .theme-dark select, .theme-dark textarea, .theme-dark table,
.theme-dark .ai-usage-grid > div, .theme-dark .ai-features label,
.theme-dark .ai-example-grid button, .theme-dark .followup-list a,
.theme-dark .agenda-list article, .theme-dark .service-list article,
.theme-dark .check-item, .theme-dark .history article,
.theme-dark .freight-options article, .theme-dark .freight-options button,
.theme-dark .security-setup, .theme-dark .erp-stage, .theme-dark .erp-card {
  color:var(--on-box-dark); background:var(--box-bg-dark);
}