:root {
  --surphie-teal: #155b5f;
  --surphie-teal-dark: #0e4649;
  --surphie-teal-soft: #e8f3f3;
  --surphie-orange: #f27100;
  --surphie-orange-dark: #b84f00;
  --surphie-orange-soft: #fff0e3;
}

::selection { background: var(--surphie-orange); color: #fff; }
body { background-color: #f6fafa; }
a { color: var(--surphie-teal); }
a:hover { color: var(--surphie-teal-dark); }

.sidebar {
  border-right: 2px solid var(--surphie-orange);
  background: #fff;
}
.sidebar-brand { justify-content: center; padding: 0 .25rem; }
.sidebar-brand img { display: block; width: 190px; height: auto; }
.app-header {
  border-bottom: 2px solid var(--surphie-orange);
  background: rgba(255, 255, 255, .97);
}

.navlink:hover {
  background: var(--surphie-teal-soft);
  color: var(--surphie-teal-dark);
}
.navlink-active {
  border-color: var(--surphie-orange);
  background: var(--surphie-teal-soft);
  color: var(--surphie-teal-dark);
}

.page-heading,
.panel-title,
.kpi-value { color: var(--surphie-teal); }
.page-kicker { color: var(--surphie-orange-dark); }
.panel,
.kpi,
.table-wrap { border-color: #bdd2d3; }
.panel-head { border-bottom-color: #bdd2d3; }

.button,
.card-actions button {
  border-color: var(--surphie-teal);
  background: var(--surphie-teal);
  color: #fff;
}
.button:hover,
.card-actions button:hover {
  background: var(--surphie-teal-dark);
  opacity: 1;
}
.button-secondary,
.card-actions .ghost {
  border-color: var(--surphie-teal);
  background: #fff;
  color: var(--surphie-teal);
}
.button-secondary:hover,
.card-actions .ghost:hover { background: var(--surphie-teal-soft); }
.icon-button { color: var(--surphie-teal); }

.field input:focus,
.field select:focus,
.field textarea:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: var(--surphie-teal);
  box-shadow: 0 0 0 3px rgba(21, 91, 95, .16);
}

.badge-info {
  background: var(--surphie-teal-soft);
  color: var(--surphie-teal-dark);
}
.badge-warn {
  background: var(--surphie-orange-soft);
  color: var(--surphie-orange-dark);
}
.border-l-primary { border-left-color: var(--surphie-orange); }
.bg-primary { background-color: var(--surphie-teal); }
.text-primary { color: var(--surphie-teal); }
.border-primary { border-color: var(--surphie-teal); }

.public-header { border-bottom: 2px solid var(--surphie-orange); background: #fff; }
.public-footer { background: var(--surphie-teal); color: #fff; }
.public-footer p { color: inherit; }

.modal-head { border-top: 5px solid var(--surphie-orange); }
#modal-title { color: var(--surphie-teal); }