/* Stratum Bootstrap Theme
 * Brand colors, typography, and Bootstrap component theming
 * Layer: Brand (loaded after Bootstrap, before app-specific CSS)
 */

/* ===== Stratum Brand Colors ===== */
:root {
  /* Primary palette */
  --sr-steel: #02424C;
  --sr-steel-light: #0a5a66;
  --sr-steel-dark: #01323a;
  --sr-green: #008356;
  --sr-green-light: #00a66d;
  --sr-green-dark: #006644;
  --sr-orange: #D47536;
  --sr-orange-light: #e08a4d;
  --sr-orange-dark: #b55f28;

  /* Extended palette */
  --sr-blue: #1A79AB;
  --sr-light-grey: #DBDDE1;
  --sr-dark-grey: #313133;
  --sr-bg: #ffffff;
  --sr-border: #a6a6a6;
  --sr-border-light: #d4d4d4;

  /* Bootstrap overrides */
  --bs-primary: var(--sr-steel);
  --bs-primary-rgb: 2, 66, 76;
  --bs-success: var(--sr-green);
  --bs-success-rgb: 0, 131, 86;
  --bs-warning: var(--sr-orange);
  --bs-warning-rgb: 212, 117, 54;
  --bs-info: var(--sr-blue);
  --bs-info-rgb: 26, 121, 171;
  --bs-light: var(--sr-light-grey);
  --bs-dark: var(--sr-dark-grey);
  --bs-code-color: var(--sr-steel);

  /* Typography */
  --bs-body-font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --bs-body-font-size: 0.8rem;
  --bs-body-line-height: 1.3;

  /* Border radius - compact/angular style */
  --bs-border-radius: 0.25rem;
  --bs-border-radius-sm: 0.25rem;
  --bs-border-radius-lg: 0.25rem;
}

/* ===== Base Typography ===== */
body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  background-color: var(--sr-bg);
}

/* ===== Form Controls ===== */
.form-control, .form-select {
  padding: 0.2rem 0.375rem;
  font-size: 0.6875rem;
  border-color: var(--sr-border);
}

.form-control:focus, .form-select:focus {
  border-color: var(--sr-steel);
  box-shadow: 0 0 0 0.125rem rgba(2, 66, 76, 0.15);
}

.form-control-sm, .form-select-sm {
  padding: 0.125rem 0.25rem;
  font-size: 0.6875rem;
}

.form-label {
  font-size: 0.6875rem;
  font-weight: 600;
  margin-bottom: 0.125rem;
}

.form-text {
  font-size: 0.625rem;
}

/* ===== Buttons ===== */
.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border-radius: 0.25rem;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.btn:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.btn-sm {
  padding: 0.125rem 0.35rem;
  font-size: 0.7rem;
}

.btn-lg {
  padding: 0.3125rem 0.875rem;
  font-size: 0.9375rem;
}

/* Primary button - SR Steel */
.btn-primary {
  --bs-btn-bg: var(--sr-steel);
  --bs-btn-border-color: var(--sr-steel-dark);
  --bs-btn-hover-bg: var(--sr-steel-dark);
  --bs-btn-hover-border-color: var(--sr-steel-dark);
  --bs-btn-active-bg: var(--sr-steel-dark);
}

/* Success button - SR Green */
.btn-success {
  --bs-btn-bg: var(--sr-green);
  --bs-btn-border-color: var(--sr-green-dark);
  --bs-btn-hover-bg: var(--sr-green-dark);
  --bs-btn-hover-border-color: var(--sr-green-dark);
  --bs-btn-active-bg: var(--sr-green-dark);
}

/* Warning button - SR Orange */
.btn-warning {
  --bs-btn-bg: var(--sr-orange);
  --bs-btn-border-color: var(--sr-orange-dark);
  --bs-btn-hover-bg: var(--sr-orange-dark);
  --bs-btn-hover-border-color: var(--sr-orange-dark);
  --bs-btn-active-bg: var(--sr-orange-dark);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
}

/* White icons on dark button backgrounds */
.btn-primary img,
.btn-success img,
.btn-secondary img {
  filter: brightness(0) invert(1);
}

/* ===== Tables ===== */
.table {
  font-size: 0.6875rem;
  margin-bottom: 0.5rem;
}

.table > :not(caption) > * > * {
  padding: 0.1875rem 0.375rem;
}

.table-sm > :not(caption) > * > * {
  padding: 0.125rem 0.25rem;
}

.table-compact th,
.table-compact td {
  padding: 0.125rem 0.375rem;
  font-size: 0.6875rem;
}

/* ===== Cards ===== */
.card {
  margin-bottom: 0.5rem;
  border-color: var(--sr-border);
  border-radius: 0.375rem;
  overflow: hidden;
}

.card-header {
  padding: 0.375rem 0.5rem;
  background-color: rgba(0, 131, 86, 0.15);
  border-bottom-color: var(--sr-border);
}

.card-body {
  padding: 0.5rem;
}

.card-footer {
  padding: 0.375rem 0.5rem;
  border-top-color: var(--sr-border-light);
}

.card-title {
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 0;
}

/* ===== Modals ===== */
.modal-header {
  padding: 0.375rem 0.5rem;
  background-color: #f0f0f0;
  border-bottom-color: var(--sr-border);
}

.modal-title {
  font-size: 0.75rem;
  font-weight: 600;
}

.modal-body {
  padding: 0.5rem;
}

.modal-footer {
  padding: 0.375rem 0.5rem;
  border-top-color: var(--sr-border-light);
}

.btn-close {
  padding: 0.25rem;
  font-size: 0.75rem;
}

/* ===== Alerts ===== */
.alert {
  padding: 0.375rem 0.5rem;
  margin-bottom: 0.5rem;
  font-size: 0.6875rem;
  border-radius: 0.375rem;
}

/* ===== Badges ===== */
.badge {
  padding: 0.3rem 0.4rem;
  font-size: 0.75rem;
  font-weight: 500;
  border-radius: 0.25rem;
}

/* Status badge colors */
.badge-testing {
  background-color: #fff4ce;
  color: #825a00;
  border: 1px solid #e6d28c;
}

.badge-production {
  background-color: #dff6dd;
  color: #107c10;
  border: 1px solid #9fd89d;
}

.badge-superseded {
  background-color: #fde7e9;
  color: #a52a2d;
  border: 1px solid #f1adb0;
}

.badge-archived {
  background-color: #f0f0f0;
  color: #6d6d6d;
  border: 1px solid #d4d4d4;
}

/* ===== Navbar ===== */
.navbar {
  padding: 0.25rem 0.5rem;
  min-height: 2rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.navbar-brand {
  padding: 0;
  font-size: 0.8125rem;
  font-weight: 600;
}

.nav-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
}

/* ===== Dropdowns ===== */
.dropdown-menu {
  font-size: 0.6875rem;
  padding: 0.25rem 0;
  border-color: var(--sr-border);
}

.dropdown-item {
  padding: 0.25rem 0.5rem;
}

.dropdown-header {
  padding: 0.25rem 0.5rem;
  font-size: 0.6875rem;
}

/* ===== Offcanvas ===== */
.offcanvas-header {
  padding: 0.5rem 0.75rem;
  background-color: var(--sr-steel);
  color: white;
}

.offcanvas-title {
  font-size: 0.875rem;
  font-weight: 600;
}

.offcanvas-body {
  padding: 0.75rem;
  font-size: 0.75rem;
}

/* ===== Tabs ===== */
.nav-tabs {
  border-bottom: 2px solid var(--sr-border-light);
}

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top: 2px solid transparent;
  border-radius: 0;
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #6d6d6d;
}

.nav-tabs .nav-link:hover {
  border-color: transparent;
  background-color: #e9ecef;
}

.nav-tabs .nav-link.active {
  border-top-color: var(--sr-steel);
  border-bottom-color: white;
  color: var(--sr-steel);
  background-color: white;
  margin-bottom: -2px;
}