/* PIMS Design System 1.13.21 — tema azul-claro compartilhado pela Web e pelo APK. */
:root {
  --green-950: #315f79;
  --green-900: #386b87;
  --green-850: #3f7592;
  --green-800: #467e9d;
  --green-700: #568faa;
  --green-600: #6da2ba;
  --green-500: #84b4c8;
  --green-100: #e1eff5;
  --green-75: #edf6f9;
  --green-50: #f5fafc;
  --accent-green: #8fc4d8;
  --accent-green-hover: #79b4ca;
  --brown-900: #3e2617;
  --brown-800: #50311d;
  --brown-700: #6b4528;
  --brown-500: #956b43;
  --brown-300: #c6a57d;
  --background: #f3f8fa;
  --background-soft: #f8fbfc;
  --surface: #fff;
  --border: #d5e1e7;
  --border-strong: #becfd8;
  --text-primary: #1d2b33;
  --text-secondary: #4b5f6a;
  --text-tertiary: #5d707a;
  --text-muted: #647680;
  --success: #467e9d;
  --success-bg: #e2f1ee;
  --warning: #b77a20;
  --warning-bg: #fceccb;
  --danger: #c54d42;
  --danger-bg: #fbe7e4;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 5px;
  --input-height: 44px;
  --button-height: 42px;
  --header-height: 76px;
  --sidebar-width: 280px;
  --sidebar-collapsed-width: 72px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .025);
  --forest: var(--green-950);
  --forest-2: var(--green-900);
  --sage: var(--green-600);
  --mint: var(--green-100);
  --lime: var(--accent-green);
  --paper: var(--background);
  --white: var(--surface);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --line: var(--border);
  --shadow: var(--shadow-sm);
}

html, body { background: var(--background); color: var(--text-primary); }
.sidebar { width: var(--sidebar-width); padding: 24px 16px 20px; background: var(--green-950); }
.main-content { margin-left: var(--sidebar-width); padding: 0 32px 32px; }
.brand-mark { width: 48px; height: 48px; border-radius: 8px; background: var(--accent-green); }
.nav-item { min-height: 48px; border-radius: var(--radius-md); padding: 0 14px; }
.nav-item.active { box-shadow: inset 3px 0 var(--accent-green); }
.topbar { min-height: var(--header-height); height: var(--header-height); background: var(--background); border-bottom: 1px solid var(--border); backdrop-filter: none; }
.topbar h1 { font-size: 26px; line-height: 1.2; }
.eyebrow { color: var(--green-700); font-size: 12px; letter-spacing: .08em; }
.primary-button, .ghost-button, .secondary-button, .filter-toggle { min-height: var(--button-height); border-radius: var(--radius-md); }
.primary-button { border-color: var(--green-800); background: var(--green-800); box-shadow: none; }
.primary-button:hover { background: var(--green-900); transform: none; }
.panel, .metric-card, .verba-card, .record-card, .filial-card { border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.metric-card:not(.primary):hover, .verba-card:hover, .filial-card:hover { box-shadow: var(--shadow-sm); transform: none; }
.metric-card.primary { background: var(--green-950); }
.form-grid input, .form-grid select, .record-fields input, .record-fields select, .record-fields textarea, .search-box, .lookup-input input { border-radius: var(--radius-md); }
.registration-tabs { display: flex; gap: 4px; overflow-x: auto; padding: 4px; border-radius: var(--radius-lg); background: var(--green-75); scrollbar-width: thin; }
.registration-tabs button { min-width: 150px; flex: 1 0 auto; border-radius: var(--radius-md); }

.calculation-date-field { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.calculation-date-field > input { width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); color: var(--text-primary); background: var(--surface); }
.day-type-summary { min-height: 52px; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--background-soft); }
.day-type-summary .icon { color: var(--green-700); }
.day-type-summary strong, .day-type-summary small { display: block; }
.day-type-summary small { margin-top: 2px; color: var(--text-secondary); font-size: 12px; }
.day-type-summary.saturday { border-color: #e9c77e; background: var(--warning-bg); }
.day-type-summary.holiday { border-color: #b8d1ad; background: var(--success-bg); }
.daily-rate-breakdown { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 12px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--radius-md); background: rgba(255, 255, 255, .18); }
.daily-rate-breakdown > div { min-width: 0; padding: 12px; background: rgba(0, 0, 0, .09); }
.daily-rate-breakdown span, .daily-rate-breakdown small { display: block; color: rgba(255, 255, 255, .72); font-size: 10px; }
.daily-rate-breakdown strong { display: block; margin-top: 4px; color: #fff; font-size: 14px; }
.daily-rate-breakdown .applied { background: rgba(143, 196, 216, .24); }
.daily-rate-breakdown .applied strong { color: #eaf4dd; }
.day-type-pill { display: inline-flex; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); background: var(--green-50); font-size: 9px; font-weight: 800; white-space: nowrap; }
.day-type-pill.saturday { color: #7a5416; background: var(--warning-bg); }
.day-type-pill.holiday { color: var(--success); background: var(--success-bg); }
.holiday-date { min-width: 92px; width: auto; font-size: 12px; letter-spacing: 0; }
.installment-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.installment-group-card header span { color: var(--green-700); font-weight: 800; letter-spacing: .05em; }
.installment-group-card footer strong { color: var(--green-800); }

/* O painel de calculo Web usa fundo azul: textos e controles precisam de
   cores proprias para nao herdarem os tons escuros das superficies claras. */
html.web-app .installment-header strong,
html.web-app .installment-control label,
html.web-app .installment-group-card header > strong,
html.web-app .installment-group-card div > b { color: #fff; }
html.web-app .installment-header small,
html.web-app .installment-control small,
html.web-app .switch-state,
html.web-app .installment-summary span,
html.web-app .installment-group-card :is(div > span, footer > span),
html.web-app .installment-note { color: #c7d8ce; }
html.web-app .installment-summary strong,
html.web-app .installment-group-card header > span,
html.web-app .installment-group-card footer > strong { color: #cfe8f1; }
html.web-app .installment-panel .number-stepper .icon-only-button {
  color: #fff;
  border-color: rgba(255, 255, 255, .34);
  background: rgba(255, 255, 255, .13);
}
html.web-app .installment-panel .number-stepper .icon-only-button:hover {
  color: var(--green-950);
  border-color: #cfe8f1;
  background: #cfe8f1;
}
html.web-app .installment-panel .number-stepper input {
  color: #fff;
  border-color: rgba(255, 255, 255, .4);
  background: rgba(0, 0, 0, .18);
  caret-color: #cfe8f1;
}
html.web-app .report-button { color: #fff; border-top-color: rgba(255, 255, 255, .28); }
html.web-app .report-button strong { color: #fff; }
html.web-app .report-button small { color: #c7d8ce; }
html.web-app .report-button .report-icon { color: #cfe8f1; background: rgba(207, 232, 241, .14); }

@media (max-width: 1100px) and (min-width: 761px) {
  .sidebar { width: var(--sidebar-collapsed-width); padding-inline: 10px; }
  .main-content { margin-left: var(--sidebar-collapsed-width); padding-inline: 24px; }
  .brand { padding-inline: 2px; justify-content: center; }
  .brand > span:last-child, .nav-item > span:not(.icon), .sidebar-footer .user-card > span:not(.avatar), .connection span { display: none; }
  .brand-mark { width: 48px; flex: 0 0 48px; }
  .nav-item { justify-content: center; padding-inline: 0; }
  .sidebar-footer .user-card { justify-content: center; padding-inline: 0; }
}

@media (max-width: 760px) {
  :root { --input-height: 48px; }
  .main-content { margin-left: 0; padding-inline: 16px; }
  .topbar, html.native-app .topbar { min-height: 60px; height: auto; margin-inline: -16px; padding: 8px 16px; color: #fff; border-bottom-color: var(--green-900); background: var(--green-950); backdrop-filter: none; }
  .topbar h1, .topbar .eyebrow { color: #fff; }
  .topbar .eyebrow { font-size: 9px; opacity: .75; }
  .topbar h1 { font-size: 21px; }
  .mobile-nav, html.native-app .mobile-nav { min-height: calc(68px + env(safe-area-inset-bottom)); inset: auto 0 0; border: 0; border-top: 1px solid var(--border); border-radius: 0; background: #fff; box-shadow: 0 -2px 8px rgba(18, 58, 39, .06); }
  html.native-app .mobile-nav button.active, html.native-app .mobile-nav .mobile-primary-action.active, .mobile-nav button.active { color: var(--green-800); background: transparent; box-shadow: none; }
  html.native-app .mobile-nav button.active > .icon, html.native-app .mobile-nav .mobile-primary-action.active > .icon { color: var(--green-800); background: var(--green-100); box-shadow: none; }
  .daily-rate-breakdown { grid-template-columns: 1fr; }
  .installment-groups { grid-template-columns: minmax(0, 1fr); }
  .registration-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: 0; padding: 4px; overflow: visible; border: 1px solid var(--border); border-radius: var(--radius-lg); }
  .registration-tabs button { min-width: 0; width: 100%; white-space: normal; }
  .registration-tabs button > span:last-child { min-width: 0; overflow-wrap: anywhere; }
  .record-row.record-card.holiday-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; grid-template-areas: "date status" "details details" ". actions"; gap: 8px 12px; align-items: start; }
  .holiday-row .holiday-date { grid-area: date; min-width: 0; align-self: center; }
  .holiday-row .record-details { grid-area: details; }
  .holiday-row .status-pill { grid-area: status; display: inline-flex; justify-self: end; }
  .holiday-row .record-actions-group { grid-area: actions; display: flex; justify-self: end; }
}

html.native-app body { background: var(--background); }
html.native-app .metric-card.primary,
html.native-app .verba-confirmation:not(.empty) { border-color: var(--green-950); background: var(--green-950); box-shadow: var(--shadow-sm); }
html.native-app .primary-button,
html.native-app .chips button.active,
html.native-app .tabs button.active { border-color: var(--green-800); background: var(--green-800); box-shadow: none; }