/* Camada visual do web: menos ruído, mais contraste e leitura rápida. */
:root {
  --ink: #102f3e;
  --muted: #506671;
  --line: #cbd8de;
  --bg: #f3f6f7;
  --soft: #eef4f6;
  --radius: 14px;
  --shadow: 0 5px 18px rgba(6,54,77,.06);
}

body { font-size: 14px; line-height: 1.42; }
.page-content { max-width: 1420px; padding-top: 22px; }
.topbar { height: 72px; padding-inline: 26px; }
.page-heading h1 { font-size: 21px; font-weight: 850; letter-spacing: -.02em; }
.page-heading p { color: #5a6e78; }

.panel,.metric-card,.finance-metric,.banking-summary article {
  border-color: var(--line);
  box-shadow: var(--shadow);
}
.panel { margin-bottom: 14px; }
.panel-title { margin-bottom: 12px; }
.panel-title h2,.finance-ledger-head h2,.bank-ledger-head h2 { color: #11384a; font-weight: 850; letter-spacing: -.01em; }
.panel-title p,.finance-ledger-head p,.bank-ledger-head p { color: var(--muted); }

.toolbar {
  gap: 9px;
  margin-bottom: 14px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(6,54,77,.04);
}
.toolbar input,.toolbar select,.field input,.field select,.field textarea,
.finance-filters input,.finance-filters select,.bank-filters input,.bank-filters select {
  min-height: 42px;
  border: 1px solid #aebfc8;
  border-radius: 9px;
  color: #143747;
  background: #fff;
}
.toolbar input:hover,.toolbar select:hover,.field input:hover,.field select:hover,.field textarea:hover,
.finance-filters input:hover,.finance-filters select:hover,.bank-filters input:hover,.bank-filters select:hover {
  border-color: #7e9aa8;
}
.toolbar input:focus,.toolbar select:focus,.field input:focus,.field select:focus,.field textarea:focus,
.finance-filters input:focus,.finance-filters select:focus,.bank-filters input:focus,.bank-filters select:focus {
  border-color: #0b5b7b;
  outline: 0;
  box-shadow: 0 0 0 3px rgba(11,91,123,.16);
}
.field label { color: #284a59; font-size: 12px; font-weight: 800; }
input::placeholder,textarea::placeholder { color: #73848d; opacity: 1; }
input:disabled,select:disabled,textarea:disabled { color: #50626b; border-color: #d4dde1; background: #edf1f3; opacity: 1; }

.button {
  min-height: 42px;
  border-color: #aebfc8;
  color: #183f50;
  background: #fff;
  font-weight: 800;
}
.button:hover { border-color: #7895a3; background: #f2f7f9; }
.button.primary { border-color: #06364d; color: #fff; background: #06364d; box-shadow: 0 4px 12px rgba(6,54,77,.18); }
.button.primary:hover { background: #032838; }
.button.danger { border-color: #e0aaa9; color: #a53032; background: #fff8f7; }
.button:disabled { color: #6c7a81; box-shadow: none; opacity: .55; }
.text-button { min-height: 34px; color: #075576; }
.text-button.danger { color: #a53032; }
.row-actions { flex-wrap: wrap; gap: 6px; }
.row-actions button {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid #c4d2d8;
  border-radius: 8px;
  color: #16465b;
  background: #f7fafb;
}

.filter-more { position: relative; align-self: stretch; }
.filter-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid #aebfc8;
  border-radius: 9px;
  color: #183f50;
  background: #fff;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.filter-more > summary::-webkit-details-marker { display: none; }
.filter-more > summary::after { content: '⌄'; margin-left: 8px; color: #607986; }
.filter-more[open] > summary { border-color: #0b5b7b; box-shadow: 0 0 0 3px rgba(11,91,123,.12); }
.filter-more[open] > summary::after { transform: rotate(180deg); }
.filter-more > div {
  position: absolute;
  z-index: 12;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(150px,1fr));
  gap: 8px;
  min-width: min(580px,calc(100vw - 40px));
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(7,40,55,.18);
}
.filter-more > div > * { width: 100%; min-width: 0 !important; }

.metric-grid,.finance-metrics,.banking-summary { gap: 10px; }
.metric-card,.finance-metric,.banking-summary article { min-height: 104px; padding: 16px; }
.metric-card span,.finance-metric span,.banking-summary span { color: #526872; font-weight: 800; }
.metric-card strong,.finance-metric strong,.banking-summary b { color: #0b3447; }
.metric-card small,.finance-metric small,.banking-summary small { color: #5c707a; }

th { color: #3f5966; background: #f1f5f6; }
td { color: #173847; }
tbody tr:hover { background: #f2f7f9; }
.badge,.finance-status,.sync-tag { border: 1px solid transparent; }
.badge.active,.badge.finished,.finance-status.paid { border-color: #a9d8c0; }
.badge.inactive,.badge.cancelled { border-color: #edbbbb; }
.badge.progress,.finance-status { border-color: #e9cf94; }
.empty-state { min-height: 120px; padding: 26px 16px; text-align: center; }
.empty-state span { max-width: 460px; }

.modal,.finance-dialog,.order-editor { border: 1px solid #b9cad2; }
.modal > header,.editor-header,.finance-dialog-title { border-color: #cbd8de; }
.modal header p:empty { display: none; }
.editor-card { border-color: #c7d4da; box-shadow: 0 2px 8px rgba(6,54,77,.03); }
.editor-tabs { padding: 4px; border: 1px solid #cbd8de; border-radius: 11px; background: #e8eff2; }
.editor-tabs button { border: 0; background: transparent; }
.editor-tabs button.active { color: #fff; background: #06364d; }
.address-section-title,.client-address-head { color: #153f51; }

.main-nav button { color: #d0dee4; }
.main-nav .nav-submenu button { color: #bdd0d8; }
.main-nav button:hover,.main-nav button.active { background: rgba(255,255,255,.14); }
.main-nav .nav-submenu button.active { outline: 1px solid rgba(133,203,234,.55); background: rgba(85,164,199,.16); }
.finance-count { color: #17485d; background: #e3eff3; }
.credential-state { color: #385866; }

.assistant-compose-row textarea { border-color: #9eb5c0; background: #fff; }
.assistant-suggestions button { border-color: #9fb8c4; color: #124861; background: #f7fbfc; }
.assistant-message { border: 1px solid #cfdae0; box-shadow: 0 2px 8px rgba(25,60,80,.06); }
.assistant-message.user { border-color: #06364d; }

/* Lista de OS: leitura rápida, sem cartões coloridos ou ações quebradas. */
@media (min-width: 821px) {
  #screen-orders .orders-toolbar {
    align-items: center;
    padding: 12px 14px;
  }
  #screen-orders .orders-toolbar .search {
    width: clamp(280px,26vw,390px);
  }
  #screen-orders .orders-panel {
    padding: 10px 16px 16px;
    overflow: hidden;
    background: #f6f9fa;
  }
  #screen-orders .orders-table-desktop table {
    border-collapse: separate;
    border-spacing: 0 8px;
  }
  #screen-orders .orders-table-desktop thead th {
    padding: 2px 12px 4px;
    border: 0;
    color: #526b77;
    background: transparent;
    font-size: 10px;
    letter-spacing: .07em;
  }
  #screen-orders .orders-table-desktop tbody td {
    padding: 13px 12px;
    border-top: 1px solid #d4e0e5;
    border-bottom: 1px solid #d4e0e5;
    background: #fff;
    vertical-align: middle;
  }
  #screen-orders .orders-table-desktop tbody td:first-child {
    border-left: 1px solid #d4e0e5;
    border-radius: 12px 0 0 12px;
  }
  #screen-orders .orders-table-desktop tbody td:last-child {
    border-right: 1px solid #d4e0e5;
    border-radius: 0 12px 12px 0;
  }
  #screen-orders .orders-table-desktop tbody tr:hover td {
    border-color: #aec5cf;
    background: #fbfdfe;
  }
  #screen-orders .orders-table-desktop th:nth-child(1),
  #screen-orders .orders-table-desktop td:nth-child(1) { width: 38px; padding-inline: 8px; }
  #screen-orders .orders-table-desktop th:nth-child(2),
  #screen-orders .orders-table-desktop td:nth-child(2) { width: 190px; }
  #screen-orders .orders-table-desktop th:nth-child(4),
  #screen-orders .orders-table-desktop td:nth-child(4) { width: 132px; }
  #screen-orders .orders-table-desktop th:nth-child(5),
  #screen-orders .orders-table-desktop td:nth-child(5) { width: 190px; }
  #screen-orders .orders-table-desktop th:nth-child(6),
  #screen-orders .orders-table-desktop td:nth-child(6) { width: 156px; }
  #screen-orders .orders-table-desktop .table-title {
    display: block;
    color: #082f42;
    font-size: 14px;
    line-height: 1.25;
  }
  #screen-orders .orders-table-desktop td:nth-child(3) .table-title {
    margin-bottom: 4px;
    font-size: 15px;
  }
  #screen-orders .orders-table-desktop .subtext {
    margin-top: 3px;
    color: #627680;
    font-size: 11px;
    line-height: 1.3;
  }
  #screen-orders .order-product-summary {
    max-width: 100%;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
  }
  #screen-orders .orders-table-desktop .badge {
    justify-content: center;
    max-width: 100%;
    padding: 6px 10px;
    text-align: center;
  }
  #screen-orders .order-value-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 8px 10px;
    border: 1px solid #d9e4e8;
    border-radius: 10px;
    background: #f7fafb;
  }
  #screen-orders .order-value-stack span,
  #screen-orders .order-value-stack .profit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
    border-radius: 0;
    background: transparent;
  }
  #screen-orders .order-value-stack .profit {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #dbe5e9;
  }
  #screen-orders .order-value-stack small {
    color: #58707b;
    font-size: 9px;
  }
  #screen-orders .order-value-stack b {
    color: #0b3447;
    font-size: 13px;
  }
  #screen-orders .order-value-stack .profit b { color: #16804d; }
  #screen-orders .orders-table-desktop .row-actions {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 6px;
  }
  #screen-orders .orders-table-desktop .row-actions button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 7px 10px;
    border-color: #afc2ca;
    background: #fff;
  }
  #screen-orders .orders-table-desktop .row-actions button:first-child {
    border-color: #164b62;
    color: #fff;
    background: #164b62;
  }
  #screen-orders .orders-table-desktop .row-actions button:hover { background: #edf4f6; }
  #screen-orders .orders-table-desktop .row-actions button:first-child:hover { background: #0b394d; }
}

@media (min-width: 821px) and (max-width: 1100px) {
  #screen-orders .orders-table-desktop th:nth-child(2),
  #screen-orders .orders-table-desktop td:nth-child(2) { width: 160px; }
  #screen-orders .orders-table-desktop th:nth-child(4),
  #screen-orders .orders-table-desktop td:nth-child(4) { width: 116px; }
  #screen-orders .orders-table-desktop th:nth-child(5),
  #screen-orders .orders-table-desktop td:nth-child(5) { width: 170px; }
  #screen-orders .orders-table-desktop th:nth-child(6),
  #screen-orders .orders-table-desktop td:nth-child(6) { width: 140px; }
  #screen-orders .orders-table-desktop tbody td { padding-inline: 9px; }
}

@media (max-width: 820px) {
  .page-content { padding: 14px 10px max(28px,env(safe-area-inset-bottom)); }
  .topbar { height: 64px; padding-inline: 10px; }
  .toolbar { padding: 9px; }
  .panel { margin-bottom: 11px; }
  .panel-title { margin-bottom: 10px; }
  .page-heading p { display: none; }
  .filter-more { width: 100%; }
  .filter-more > summary { width: 100%; }
  .filter-more > div { position: static; grid-template-columns: 1fr; min-width: 0; margin-top: 7px; box-shadow: none; }
  .orders-toolbar .button.primary,.entity-toolbar .button.primary { order: -2; }
  .orders-toolbar .search,.entity-toolbar .search { order: -1; }
  .metric-card,.finance-metric,.banking-summary article { min-height: 96px; padding: 13px; }
  .row-actions button,.entity-card footer button,.order-card-foot button { flex: 1; text-align: center; }
}

@media (max-width: 480px) {
  .metric-grid,.finance-metrics,.banking-summary { grid-template-columns: 1fr 1fr; }
  .metric-card:last-child:nth-child(odd),.banking-summary article:last-child:nth-child(odd) { grid-column: 1/-1; }
  .metric-card small,.finance-metric small,.banking-summary small { font-size: 10px; }
  .panel-title h2,.finance-ledger-head h2,.bank-ledger-head h2 { font-size: 16px; }
  .finance-ledger-head,.bank-ledger-head { padding: 15px 14px 10px; }
}

@media (prefers-contrast: more) {
  :root { --muted:#384f5b; --line:#9fb1ba; }
  .button,input,select,textarea,.panel,.metric-card { border-width: 2px; }
}