:root {
  --bg: #f4f2ed;
  --panel: #ffffff;
  --ink: #1d2722;
  --muted: #65716b;
  --line: #dde3dc;
  --olive: #496b3a;
  --olive-dark: #2f4727;
  --sage: #dce8d4;
  --blue: #315f7d;
  --amber: #b56b1f;
  --red: #a94135;
  --shadow: 0 16px 40px rgba(29, 39, 34, 0.08);
  --area-dashboard: #6f7d44;
  --area-booking: #2f6f73;
  --area-calendario: #496b3a;
  --area-storico: #6a5786;
  --area-bici: #315f7d;
  --area-logistica: #9a6a2f;
  --area-costi: #7e4c34;
  --area-admin: #8a3e46;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0;
}

button,
input,
select {
  font: inherit;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 260px 1fr;
}

.sidebar {
  background: #162019;
  color: #f5f3ec;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--sage);
  color: var(--olive-dark);
  display: grid;
  place-items: center;
  font-weight: 800;
}

.brand strong,
.brand span {
  display: block;
}

.brand span,
.user-box span {
  color: #b6c5b6;
  font-size: 13px;
  margin-top: 3px;
}

.nav {
  display: grid;
  gap: 6px;
}

.nav a {
  --menu-color: var(--sage);
  color: #e9eee7;
  text-decoration: none;
  padding: 11px 12px;
  border-radius: 8px;
  font-size: 14px;
  border-left: 4px solid var(--menu-color);
  background: rgba(255, 255, 255, 0.03);
}

.nav a.active,
.nav a:hover {
  background: color-mix(in srgb, var(--menu-color) 26%, transparent);
  color: #fff;
}

.menu-dashboard { --menu-color: var(--area-dashboard); }
.menu-booking { --menu-color: var(--area-booking); }
.menu-calendario { --menu-color: var(--area-calendario); }
.menu-storico { --menu-color: var(--area-storico); }
.menu-bici { --menu-color: var(--area-bici); }
.menu-logistica { --menu-color: var(--area-logistica); }
.menu-costi { --menu-color: var(--area-costi); }
.menu-admin { --menu-color: var(--area-admin); }

.user-box {
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 18px;
}

.logout-link {
  color: #dce8d4;
  display: inline-block;
  font-size: 13px;
  margin-top: 10px;
  text-decoration: none;
}

.content {
  padding: 28px;
  display: grid;
  gap: 20px;
}

.view-hidden {
  display: none !important;
}

.topbar {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 30px;
  line-height: 1.1;
}

h2 {
  font-size: 18px;
}

.topbar p {
  color: var(--muted);
  margin-top: 7px;
}

.actions {
  display: flex;
  gap: 10px;
}

button {
  border: 0;
  border-radius: 8px;
  background: var(--olive);
  color: #fff;
  padding: 10px 13px;
  cursor: pointer;
  white-space: nowrap;
}

button.secondary,
.tabs button,
.icon-btn {
  background: #e7ece5;
  color: var(--ink);
}

.tabs {
  display: flex;
  gap: 6px;
}

.tabs button {
  padding: 7px 10px;
  font-size: 13px;
}

.tabs button.selected {
  background: var(--olive);
  color: #fff;
}

.kpis,
.grid {
  display: grid;
  gap: 16px;
}

.kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kpis article,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.panel {
  border-top: 4px solid var(--section-color);
}

.kpis article {
  border-top: 4px solid var(--area-dashboard);
  padding: 18px;
}

.kpis span,
.kpis small {
  display: block;
  color: var(--muted);
}

.kpis strong {
  display: block;
  font-size: 27px;
  margin: 8px 0 4px;
}

.kpis .warning {
  border-color: #e0b37f;
  background: #fff8ef;
}

.two {
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.65fr);
}

.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.panel {
  padding: 18px;
  min-width: 0;
}

.panel,
.history-panel,
.booking-panel,
.product-panel {
  --section-color: var(--olive);
}

.panel::before,
.kpis::before {
  content: none;
}

.panel-head {
  border-left: 5px solid var(--section-color);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 16px;
  padding-left: 12px;
}

#calendario {
  --section-color: var(--area-calendario);
  grid-column: 1 / -1;
}

#booking {
  --section-color: var(--area-booking);
}

#storico2025 .history-panel {
  --section-color: var(--area-storico);
}

#bici {
  --section-color: var(--area-bici);
}

#logistica {
  --section-color: var(--area-logistica);
}

#costi,
#prodotto,
#centro-costo-editor {
  --section-color: var(--area-costi);
}

#admin {
  --section-color: var(--area-admin);
}

.planning-board {
  display: grid;
  gap: 14px;
}

.planning-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.planning-summary div {
  background: #f6f8f4;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 78px;
}

.planning-summary strong,
.planning-summary span {
  display: block;
}

.planning-summary span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
  margin-top: 6px;
}

.planning-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
}

.planning-row {
  display: grid;
  grid-template-columns: 110px minmax(170px, 1.25fr) 110px 58px minmax(145px, 1fr) minmax(160px, 1fr) 90px 118px;
  align-items: center;
  min-width: 980px;
}

.planning-row > span {
  min-height: 58px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
}

.planning-row > span + span {
  border-left: 1px solid var(--line);
}

.planning-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.planning-head > span {
  min-height: 38px;
}

.planning-row:last-child > span {
  border-bottom: 0;
}

.planning-row strong {
  font-size: 14px;
}

.planning-row small {
  color: var(--muted);
}

.date-cell {
  color: var(--olive-dark);
  font-weight: 800;
}

.tag,
.state {
  align-self: flex-start;
  border-radius: 999px;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
  padding: 5px 8px;
}

.tag.tour {
  background: #dce8d4;
  color: var(--olive-dark);
}

.tag.self {
  background: #dce9ef;
  color: var(--blue);
}

.tag.pro {
  background: #eee4d1;
  color: #71521d;
}

.tag.partner {
  background: #eee1e5;
  color: #7a334a;
}

.state.ok {
  background: var(--sage);
  color: var(--olive-dark);
}

.state.hold {
  background: #f5dfbe;
  color: #7a4615;
}

.state.risk {
  background: #f2d0ca;
  color: var(--red);
}

.state.note {
  background: #e5e8ef;
  color: #394b72;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.booking-panel {
  grid-column: 1 / -1;
}

.history-section {
  display: grid;
}

.history-panel {
  overflow: hidden;
}

.history-tools {
  display: flex;
  gap: 10px;
}

.history-tools input,
.history-tools select {
  background: #fbfcfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 8px 10px;
}

.history-tools input {
  min-width: 280px;
}

.history-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.history-kpis div {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.history-kpis span,
.history-kpis strong {
  display: block;
}

.history-kpis span {
  color: var(--muted);
  font-size: 13px;
}

.history-kpis strong {
  font-size: 22px;
  margin-top: 5px;
}

.history-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 14px;
}

.history-margin-box {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-bottom: 14px;
  padding: 14px;
}

.history-margin-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.history-margin-summary div {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.history-margin-summary .margin {
  background: #edf5e8;
  border-color: #b8cbb1;
}

.history-margin-summary span,
.history-margin-summary strong,
.history-margin-summary small {
  display: block;
}

.history-margin-summary span,
.history-margin-summary small {
  color: var(--muted);
  font-size: 13px;
}

.history-margin-summary strong {
  font-size: 20px;
  margin: 5px 0 3px;
}

.history-margin-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.margin-row {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 90px 130px 130px 130px 80px 150px;
  min-width: 900px;
}

.margin-row > span {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 42px;
  padding: 8px 10px;
}

.margin-row > span + span {
  border-left: 1px solid var(--line);
}

.margin-row:last-child > span {
  border-bottom: 0;
}

.margin-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.history-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 520px;
  overflow: auto;
}

.history-row {
  background: #fff;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  display: grid;
  grid-template-columns: 95px 120px 100px minmax(230px, 1fr) 150px 70px 70px;
  min-width: 920px;
  padding: 0;
  text-align: left;
  white-space: normal;
  width: 100%;
}

.history-row > span {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 44px;
  padding: 8px 10px;
}

.history-row > span + span {
  border-left: 1px solid var(--line);
}

.history-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.history-item.active,
.history-item:hover {
  background: #edf5e8;
}

.history-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
}

.history-detail h3 {
  font-size: 18px;
  margin: 0;
}

.history-detail dl {
  display: grid;
  grid-template-columns: 95px 1fr;
  gap: 7px 10px;
  margin: 0;
}

.history-detail dt {
  color: var(--muted);
}

.history-detail dd {
  margin: 0;
  font-weight: 700;
}

.history-doc-box {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 8px;
  padding-top: 12px;
}

.history-doc-box h4 {
  margin: 0;
}

#historyDocCounts {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#historyDocCounts span {
  background: #eef2ed;
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  padding: 6px 8px;
}

.history-detail label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.history-detail textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 105px;
  padding: 9px;
  resize: vertical;
}

.booking-layout {
  display: grid;
  grid-template-columns: minmax(320px, 0.85fr) minmax(420px, 1.15fr);
  gap: 14px;
}

.booking-browser {
  display: grid;
  gap: 10px;
}

.booking-category-tabs {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.booking-category-tabs button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  display: flex;
  font-weight: 800;
  justify-content: space-between;
  min-height: 38px;
  padding: 8px 10px;
}

.booking-category-tabs button.selected {
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}

.booking-category-tabs span {
  background: rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  min-width: 26px;
  padding: 2px 7px;
  text-align: center;
}

.booking-order-note {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.booking-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 520px;
  overflow: auto;
}

.folder-list {
  background: #f8faf7;
  padding: 8px;
}

.booking-destination-group {
  display: grid;
  gap: 8px;
  margin-bottom: 12px;
}

.booking-destination-group h3 {
  align-items: center;
  color: var(--olive-dark);
  display: flex;
  font-size: 13px;
  justify-content: space-between;
  margin: 0;
  padding: 4px 2px;
  text-transform: uppercase;
}

.booking-destination-group h3 span {
  background: #e8eee4;
  border-radius: 999px;
  color: var(--muted);
  padding: 2px 8px;
}

.booking-empty {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 6px;
  padding: 14px;
}

.booking-empty span {
  color: var(--muted);
  font-size: 13px;
}

.booking-practice {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  margin-bottom: 8px;
  padding: 12px;
  text-align: left;
  white-space: normal;
  width: 100%;
}

.booking-practice:last-child {
  border-bottom: 0;
}

.booking-practice.active,
.booking-practice:hover {
  background: #edf5e8;
  border-color: #b8cbb1;
}

.booking-practice strong,
.booking-practice span {
  display: block;
}

.booking-practice span {
  color: var(--muted);
  font-size: 13px;
}

.booking-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 14px;
  padding: 16px;
}

.practice-folder {
  align-content: start;
  min-height: 430px;
}

.booking-detail-head span {
  color: var(--olive-dark);
  font-size: 13px;
  font-weight: 800;
}

.booking-detail-head h3 {
  font-size: 22px;
  margin: 5px 0;
}

.booking-detail-head p {
  color: var(--muted);
}

.practice-tabs {
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 8px;
}

.practice-tabs button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  min-height: 36px;
  padding: 8px 10px;
}

.practice-tabs button.selected {
  background: var(--olive);
  border-color: var(--olive);
  color: #fff;
}

.practice-tab-panel {
  display: none;
}

.practice-tab-panel.active {
  display: grid;
  gap: 14px;
}

.practice-folder-summary {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.practice-folder-summary div,
.folder-clean-note {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.practice-folder-summary .margin {
  background: #edf5e8;
  border-color: #b8cbb1;
}

.practice-folder-summary span,
.practice-folder-summary strong,
.folder-clean-note strong,
.folder-clean-note span {
  display: block;
}

.practice-folder-summary span,
.folder-clean-note span {
  color: var(--muted);
  font-size: 13px;
}

.practice-folder-summary strong {
  font-size: 18px;
  margin-top: 5px;
}

.folder-clean-note {
  display: grid;
  gap: 6px;
}

.document-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.document-actions button {
  min-height: 46px;
  white-space: normal;
}

.document-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.document-status div {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.document-status span,
.document-status strong {
  display: block;
}

.document-status span {
  color: var(--muted);
  font-size: 12px;
}

.document-status strong {
  margin-top: 4px;
}

.manual-doc-form {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.manual-doc-form h3 {
  font-size: 16px;
  margin: 0;
}

.manual-doc-form > div {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.manual-doc-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.manual-doc-form input,
.manual-doc-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 40px;
  padding: 9px 10px;
}

.manual-doc-form textarea {
  min-height: 82px;
  resize: vertical;
}

.manual-doc-form input:focus,
.manual-doc-form textarea:focus {
  border-color: var(--olive);
  outline: 2px solid rgba(73, 107, 58, 0.18);
}

.practice-notes label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.practice-notes textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 90px;
  padding: 10px;
  resize: vertical;
}

th,
td {
  text-align: left;
  padding: 11px 8px;
  border-bottom: 1px solid var(--line);
}

th {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.status {
  display: inline-block;
  border-radius: 999px;
  padding: 5px 8px;
  font-size: 12px;
}

.status.ok {
  background: var(--sage);
  color: var(--olive-dark);
}

.status.hold {
  background: #f5dfbe;
  color: #7a4615;
}

.bike-list {
  display: grid;
  gap: 10px;
}

.fleet-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.fleet-kpis div {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.fleet-kpis span,
.fleet-kpis strong {
  display: block;
}

.fleet-kpis span {
  color: var(--muted);
  font-size: 13px;
}

.fleet-kpis strong {
  font-size: 22px;
  margin-top: 5px;
}

.fleet-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.fleet-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.2fr) 120px minmax(160px, 1fr) 120px 90px;
  min-width: 700px;
}

.fleet-row > span {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 42px;
  padding: 8px 10px;
}

.fleet-row > span + span {
  border-left: 1px solid var(--line);
}

.fleet-row:last-child > span {
  border-bottom: 0;
}

.fleet-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

#bici {
  grid-column: 1 / -1;
}

.bike-list div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.bike-list span,
.bike-list small,
.bike-list em {
  color: var(--muted);
  font-style: normal;
}

.bike-list em {
  font-weight: 700;
}

.available {
  color: var(--olive-dark) !important;
}

.assigned {
  color: var(--blue) !important;
}

.maintenance {
  color: var(--amber) !important;
}

.bike-usage {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.fleet-total {
  background: #edf5e8;
  border: 1px solid #b8cbb1;
  border-radius: 8px;
  color: var(--olive-dark);
  min-width: 150px;
  padding: 10px 12px;
}

.fleet-total span,
.fleet-total strong {
  display: block;
}

.fleet-total span {
  font-size: 12px;
}

.bike-usage-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 420px;
  overflow: auto;
}

.bike-usage-row {
  display: grid;
  grid-template-columns: 110px minmax(210px, 1.2fr) 110px 90px 90px 110px 110px minmax(170px, 1fr);
  min-width: 980px;
}

.bike-usage-row > span {
  border-bottom: 1px solid var(--line);
  min-height: 48px;
  padding: 9px 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.bike-usage-row > span + span {
  border-left: 1px solid var(--line);
}

.bike-usage-row:last-child > span {
  border-bottom: 0;
}

.bike-usage-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.bike-usage-row small {
  color: var(--muted);
}

.task-list,
.alerts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.task-list li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.task-list span {
  color: var(--muted);
  text-align: right;
}

.cost-card {
  display: grid;
  gap: 11px;
}

.cost-center-link {
  cursor: pointer;
}

.cost-center-link:hover {
  border-color: #b8cbb1;
}

.cost-card > span {
  color: var(--muted);
}

.cost-card div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.cost-card small {
  color: var(--muted);
}

.cost-card .total {
  color: var(--olive-dark);
  font-size: 18px;
  border-bottom: 0;
}

.cost-center-list {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: block;
  max-height: 360px;
  overflow: auto;
  margin-bottom: 18px;
}

.cost-center-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.cost-center-toolbar h3 {
  font-size: 16px;
  margin: 0;
}

.cost-center-toolbar p {
  color: var(--muted);
  font-size: 13px;
  margin-top: 4px;
}

.profit-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.profit-summary div {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.profit-summary .margin {
  background: #edf5e8;
  border-color: #b8cbb1;
}

.profit-summary span,
.profit-summary strong {
  display: block;
}

.profit-summary span {
  color: var(--muted);
  font-size: 13px;
}

.profit-summary strong {
  font-size: 20px;
  margin-top: 5px;
}

.cost-center-row {
  background: #fff;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  display: grid;
  grid-template-columns: 110px 170px minmax(210px, 1.4fr) 130px 150px 70px 120px;
  min-width: 980px;
  padding: 0;
  text-align: left;
  white-space: normal;
  width: 100%;
}

.cost-center-row > span {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  min-height: 44px;
  padding: 9px 10px;
}

.cost-center-row > span + span {
  border-left: 1px solid var(--line);
}

.cost-center-item.active,
.cost-center-item:hover {
  background: #edf5e8;
}

.cost-center-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.cost-center-head > span {
  min-height: 38px;
}

.cost-editor {
  display: grid;
}

.editor-badge {
  background: #edf5e8;
  border: 1px solid #b8cbb1;
  border-radius: 999px;
  color: var(--olive-dark);
  font-size: 13px;
  font-weight: 800;
  padding: 8px 10px;
}

.cost-form {
  display: grid;
  gap: 14px;
}

.cost-form fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 16px;
}

.cost-form fieldset.wide {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cost-form fieldset.cost-template-fieldset {
  align-items: end;
  background: #f8faf7;
  grid-template-columns: minmax(260px, 0.85fr) minmax(260px, 1.15fr) 190px;
}

.cost-form legend {
  color: var(--olive-dark);
  font-weight: 800;
  padding: 0 6px;
}

.cost-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.cost-form input,
.cost-form select,
.cost-form textarea {
  background: #fbfcfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 40px;
  padding: 9px 10px;
}

.cost-form textarea {
  min-height: 92px;
  resize: vertical;
}

.cost-form input:focus,
.cost-form select:focus,
.cost-form textarea:focus {
  border-color: var(--olive);
  outline: 2px solid rgba(73, 107, 58, 0.18);
}

.cost-template-description {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 10px 12px;
}

.cost-template-description span,
.cost-template-description small {
  color: var(--muted);
}

.form-result {
  align-items: stretch;
  background: #162019;
  border-radius: 8px;
  color: #f5f3ec;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 14px;
}

.form-result div {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
}

.form-result span,
.form-result strong {
  display: block;
}

.form-result span {
  color: #cbd8c9;
  font-size: 13px;
  margin-bottom: 5px;
}

.form-result strong {
  font-size: 20px;
}

.form-result button {
  background: #dce8d4;
  color: var(--olive-dark);
  font-weight: 800;
}

.supplier-editor {
  border-top: 1px solid var(--line);
  margin-top: 18px;
  padding-top: 18px;
}

.supplier-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  max-height: 440px;
  overflow: auto;
}

.supplier-row {
  display: grid;
  grid-template-columns: minmax(260px, 1.4fr) 140px 120px 150px 110px 150px minmax(180px, 1fr);
  min-width: 1160px;
}

.supplier-row > span {
  border-bottom: 1px solid var(--line);
  min-height: 46px;
  padding: 7px;
}

.supplier-row > span + span {
  border-left: 1px solid var(--line);
}

.supplier-row:last-child > span {
  border-bottom: 0;
}

.supplier-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  position: sticky;
  text-transform: uppercase;
  top: 0;
  z-index: 1;
}

.supplier-head > span {
  align-items: center;
  display: flex;
}

.supplier-row input {
  background: #fbfcfa;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink);
  min-height: 32px;
  padding: 7px;
  width: 100%;
}

.supplier-row input:focus {
  background: #fff;
  border-color: var(--olive);
  outline: 2px solid rgba(73, 107, 58, 0.18);
}

.voucher-body {
  background: #dfe4dd;
}

.voucher-page {
  display: grid;
  gap: 18px;
  margin: 0 auto;
  max-width: 980px;
  padding: 24px;
}

.voucher-toolbar {
  align-items: center;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.voucher-toolbar a {
  color: var(--olive-dark);
  font-weight: 800;
  text-decoration: none;
}

.voucher-sheet {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 22px;
  padding: 34px;
}

.voucher-heading {
  align-items: flex-start;
  border-bottom: 2px solid var(--olive);
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 18px;
}

.voucher-heading strong,
.voucher-heading span {
  display: block;
}

.voucher-heading span {
  color: var(--muted);
  margin-top: 4px;
}

.voucher-mark {
  background: var(--olive);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  padding: 10px 12px;
}

.voucher-title h1 {
  font-size: 28px;
}

.voucher-title p {
  color: var(--muted);
  margin-top: 6px;
}

.voucher-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.voucher-meta div {
  background: #f6f8f4;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.voucher-meta span,
.voucher-meta strong {
  display: block;
}

.voucher-meta span {
  color: var(--muted);
  font-size: 13px;
}

.voucher-meta strong {
  margin-top: 5px;
}

.voucher-section {
  display: grid;
  gap: 12px;
}

.voucher-section h2 {
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.voucher-hotels {
  display: grid;
  gap: 10px;
}

.voucher-hotel {
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 12px;
}

.voucher-hotel .wide {
  grid-column: 1 / -1;
}

.voucher-hotel span,
.voucher-hotel strong {
  display: block;
}

.voucher-hotel span {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.voucher-section textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 100px;
  padding: 12px;
  resize: vertical;
}

.doc-edit-grid {
  display: grid;
  gap: 12px;
}

.doc-edit-grid label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.doc-edit-grid textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  font: inherit;
  min-height: 120px;
  padding: 12px;
  resize: vertical;
}

.dbd-template-panel {
  background: #f8faf7;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.dbd-template-panel h2 {
  border-bottom: 0;
  padding-bottom: 0;
}

.dbd-template-panel p {
  color: var(--muted);
  margin-top: 4px;
}

.dbd-template-select-row {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(260px, 1fr) 160px;
}

.dbd-template-select-row label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.dbd-template-select-row select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 42px;
  padding: 9px 10px;
}

.dbd-template-description {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 4px;
  padding: 10px 12px;
}

.dbd-template-description span,
.dbd-template-description small {
  color: var(--muted);
}

.dbd-template-archive {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
}

.dbd-template-archive summary {
  color: var(--olive-dark);
  cursor: pointer;
  font-weight: 800;
}

.dbd-template-archive .dbd-template-card:hover {
  background: #fff;
  border-color: var(--line);
}

.dbd-template-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dbd-template-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  display: grid;
  gap: 5px;
  justify-items: start;
  margin-top: 10px;
  padding: 12px;
  text-align: left;
  white-space: normal;
}

.dbd-template-card:hover {
  background: #edf5e8;
  border-color: #b8cbb1;
}

.dbd-template-card span,
.dbd-template-card small {
  color: var(--muted);
}

.dbd-grid {
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-top: 14px;
  overflow-x: auto;
}

.dbd-grid-row {
  display: grid;
  grid-template-columns: 90px minmax(210px, 1.2fr) 90px minmax(220px, 1fr) minmax(240px, 1fr);
  min-width: 900px;
}

.dbd-grid-row > span {
  border-bottom: 1px solid var(--line);
  min-height: 48px;
  padding: 10px;
}

.dbd-grid-row > span + span {
  border-left: 1px solid var(--line);
}

.dbd-grid-row:last-child > span {
  border-bottom: 0;
}

.dbd-grid-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.dbd-document-title {
  border-bottom: 2px solid var(--olive);
  padding-bottom: 12px;
}

.dbd-document-title h2 {
  border-bottom: 0;
  font-size: 24px;
  letter-spacing: 0;
  padding-bottom: 0;
}

.dbd-document-title p {
  color: var(--muted);
  margin-top: 4px;
}

.dbd-program-only {
  display: grid;
  gap: 18px;
}

.dbd-program-day {
  border-bottom: 1px solid var(--line);
  display: grid;
  gap: 7px;
  padding-bottom: 16px;
}

.dbd-program-day:last-child {
  border-bottom: 0;
}

.dbd-program-day h3 {
  color: var(--olive-dark);
  font-size: 18px;
  margin: 0;
}

.dbd-program-day p {
  line-height: 1.45;
  margin: 0;
}

.invoice-template-panel {
  margin-bottom: 16px;
}

.invoice-final {
  display: grid;
  gap: 14px;
}

.invoice-final-head {
  border-bottom: 2px solid var(--olive);
  display: grid;
  gap: 6px;
  padding-bottom: 12px;
}

.invoice-final-head strong {
  font-size: 18px;
}

.invoice-final-head span {
  color: var(--muted);
}

.invoice-line-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.invoice-line-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 90px 110px 120px;
}

.invoice-line-row > span {
  border-bottom: 1px solid var(--line);
  min-height: 42px;
  padding: 10px;
}

.invoice-line-row > span + span {
  border-left: 1px solid var(--line);
}

.invoice-line-row:last-child > span {
  border-bottom: 0;
}

.invoice-line-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.invoice-total-row {
  align-items: center;
  background: #162019;
  border-radius: 8px;
  color: #f5f3ec;
  display: flex;
  justify-content: flex-end;
  gap: 22px;
  padding: 14px;
}

.invoice-total-row span {
  color: #cbd8c9;
  font-weight: 800;
}

.invoice-total-row strong {
  font-size: 22px;
}

.invoice-payment {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  margin: 0;
  padding: 10px 12px;
}

@media print {
  .dbd-screen-tools {
    display: none;
  }
}

.voucher-footer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
}

@media print {
  .voucher-toolbar {
    display: none;
  }

  .voucher-body {
    background: #fff;
  }

  .voucher-page {
    max-width: none;
    padding: 0;
  }

  .voucher-sheet {
    border: 0;
    box-shadow: none;
  }
}

.product-detail {
  display: grid;
}

.product-panel {
  overflow: hidden;
}

.panel-subtitle {
  color: var(--muted);
  font-size: 14px;
  margin-top: 5px;
}

.product-actions {
  display: flex;
  gap: 10px;
}

.product-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 18px;
}

.product-main {
  min-width: 0;
  display: grid;
  gap: 14px;
}

.management-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.management-kpis div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
  background: #f8faf7;
}

.management-kpis .margin {
  background: #edf5e8;
  border-color: #c4d9bb;
}

.management-kpis span,
.management-kpis small {
  display: block;
  color: var(--muted);
}

.management-kpis strong {
  display: block;
  font-size: 22px;
  margin: 7px 0 4px;
}

.control-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.control-tabs button {
  background: #e7ece5;
  color: var(--ink);
  padding: 8px 10px;
  font-size: 13px;
}

.control-tabs button.selected {
  background: var(--olive);
  color: #fff;
}

.control-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.control-row {
  display: grid;
  grid-template-columns: 120px minmax(220px, 1.4fr) 120px 120px 130px;
  min-width: 760px;
}

.control-row > span {
  min-height: 52px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.control-row > span + span {
  border-left: 1px solid var(--line);
}

.control-row:last-child > span {
  border-bottom: 0;
}

.control-head {
  background: #eef2ed;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.control-head > span {
  min-height: 38px;
}

.product-side {
  display: grid;
  gap: 12px;
  align-content: start;
}

.product-side > div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfa;
  padding: 14px;
}

.product-side h3 {
  font-size: 15px;
  margin: 0 0 10px;
}

.product-side dl {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 8px 10px;
  margin: 0;
}

.product-side dt {
  color: var(--muted);
}

.product-side dd {
  margin: 0;
  font-weight: 700;
}

.product-side ul {
  margin: 0;
  padding-left: 18px;
  color: var(--muted);
}

.compact-alerts li + li {
  margin-top: 7px;
}

.login-body {
  min-height: 100vh;
  background: #162019;
}

.login-screen {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
}

.login-visual {
  color: #f5f3ec;
  padding: 42px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(rgba(22, 32, 25, 0.78), rgba(22, 32, 25, 0.88)),
    url("https://images.unsplash.com/photo-1544191696-15693072e0b5?auto=format&fit=crop&w=1600&q=80");
  background-position: center;
  background-size: cover;
}

.login-brand .brand-mark {
  background: #f5f3ec;
}

.login-copy {
  max-width: 620px;
}

.login-copy h1 {
  font-size: 48px;
  margin-bottom: 14px;
}

.login-copy p {
  color: #d6dfd3;
  font-size: 18px;
  line-height: 1.45;
}

.login-modules {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.login-modules span {
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  color: #eef3eb;
  font-size: 13px;
  padding: 8px 10px;
}

.login-panel {
  background: #f4f2ed;
  display: grid;
  place-items: center;
  padding: 28px;
}

.login-form {
  width: 100%;
  max-width: 360px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 16px;
  padding: 24px;
}

.login-form h2 {
  font-size: 24px;
}

.login-form p {
  color: var(--muted);
  margin-top: 6px;
}

.login-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  gap: 7px;
}

.login-form input,
.login-form select {
  background: #fbfcfa;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  min-height: 42px;
  padding: 9px 10px;
}

.login-form input:focus,
.login-form select:focus {
  border-color: var(--olive);
  outline: 2px solid rgba(73, 107, 58, 0.18);
}

.login-note {
  background: #f6f8f4;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 5px;
  padding: 12px;
}

.login-note span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.alerts li {
  border-left: 4px solid var(--amber);
  background: #fffaf1;
  padding: 11px 12px;
  border-radius: 8px;
}

.locked {
  background: #fbfbf8;
}

.lock {
  color: var(--red);
  font-size: 13px;
  font-weight: 700;
}

.admin-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.admin-grid div {
  background: #eef2ed;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px 12px;
  text-align: center;
  font-weight: 700;
}

@media (max-width: 1040px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    height: auto;
  }

  .nav {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .kpis,
  .two,
  .three,
  .planning-summary,
  .management-kpis,
  .product-grid,
  .profit-summary,
  .booking-layout,
  .document-actions,
  .document-status,
  .manual-doc-form > div,
  .history-kpis,
  .history-layout,
  .history-margin-summary,
  .fleet-kpis,
  .cost-form fieldset,
  .cost-form fieldset.wide,
  .form-result {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-side {
    grid-column: 1 / -1;
  }

  .login-screen {
    grid-template-columns: 1fr;
  }

  .login-visual {
    min-height: 420px;
  }
}

@media (max-width: 720px) {
  .content {
    padding: 16px;
  }

  .topbar,
  .actions,
  .panel-head,
  .product-actions,
  .cost-center-toolbar,
  .history-tools {
    align-items: stretch;
    flex-direction: column;
  }

  .kpis,
  .two,
  .three,
  .planning-summary,
  .management-kpis,
  .product-grid,
  .profit-summary,
  .booking-layout,
  .document-actions,
  .document-status,
  .manual-doc-form > div,
  .history-kpis,
  .history-layout,
  .history-margin-summary,
  .fleet-kpis,
  .cost-form fieldset,
  .cost-form fieldset.wide,
  .form-result,
  .admin-grid,
  .nav {
    grid-template-columns: 1fr;
  }

  .task-list li {
    display: grid;
  }

  .task-list span {
    text-align: left;
  }

  .login-visual,
  .login-panel {
    padding: 20px;
  }

  .login-copy h1 {
    font-size: 34px;
  }
}