/* Reads the design tokens defined in base.html (:root). Orange is accent-only:
   primary actions, links, active states. Surfaces and structure stay neutral. */

.card-header {
  border-bottom: 1px solid var(--line) !important;
}

footer {
  background-color: var(--surface);
  border-top: 1px solid var(--line);
  padding: 8px 4px;
}

.footer-text {
  color: var(--ink-muted);
  font-size: 0.8125rem;
}

a.footer-text:hover {
  color: var(--ink);
}

a.footer-text:visited {
  color: var(--ink-muted);
}

.btn-rogg {
  background-color: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  color: white;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.btn-rogg:hover {
  background-color: var(--brand-strong);
  border-color: var(--brand-strong);
  color: white;
}

.btn-rogg:focus {
  background-color: var(--brand-strong);
  border-color: var(--brand-strong);
  color: white;
  box-shadow: 0 0 0 3px rgba(217, 110, 15, 0.3);
}

.btn-rogg:active {
  background-color: var(--brand-strong);
  border-color: var(--brand-strong);
  color: white;
}

a.rogg:link {
  color: var(--ink);
  text-decoration: none;
}

a.rogg:hover,
a.rogg:visited {
  color: var(--brand-strong);
}

a.rogg-inv:link {
  color: var(--brand-strong);
  text-decoration: none;
}

a.rogg-inv:hover,
a.rogg-inv:visited {
  color: var(--ink);
}

.nav .link-item{
  color: var(--ink-muted) !important;
  }

.nav .link-item:hover{
  color: var(--brand-strong) !important;
  }

.nav .link-item-active{
    background-color: var(--brand) !important;
  }

.nav .link-item-active:hover{
    background-color: var(--ink-hover) !important;
  }


.badge-orange{
  background-color: var(--brand) !important;
}

.text-orange{
  color: var(--brand) !important;
}

.myElement:hover {
  filter: brightness(150%);
}

.jumbotrons{
color: #FFFFFF;
background-color:white !important;
}

/* Semantic status colors: recolor Bootstrap's text helpers to the warm
   equivalents so counts/alerts sit on the Hantverk palette. */
.text-success { color: var(--ok) !important; }
.text-warning { color: var(--warn) !important; }
.text-danger { color: var(--danger) !important; }

/* Bootstrap components recolored to Hantverk tokens. custom.css loads after
   the Bootstrap CDN, so same-specificity rules here win the cascade. */
.btn-primary { background-color: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background-color: var(--brand-strong); border-color: var(--brand-strong); }
.btn-primary:focus, .btn-primary.focus { background-color: var(--brand-strong); border-color: var(--brand-strong); box-shadow: 0 0 0 3px rgba(217, 110, 15, 0.3); }
.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { background-color: var(--brand-strong); border-color: var(--brand-strong); }
.btn-outline-primary { color: var(--brand-strong); border-color: var(--brand); }
.btn-outline-primary:hover, .btn-outline-primary:not(:disabled):not(.disabled):active { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 3px rgba(217, 110, 15, 0.3); }
.text-primary { color: var(--brand-strong) !important; }
.bg-primary { background-color: var(--brand) !important; }
.border-primary { border-color: var(--brand) !important; }
.badge-primary { background-color: var(--brand-soft); color: var(--brand-strong); }
.badge-secondary, .badge-info { background-color: var(--surface-hover); color: var(--ink-secondary); }
.badge-success { background-color: var(--ok-soft); color: var(--ok); }
.badge-warning { background-color: var(--warn-soft); color: var(--warn); }
.badge-danger { background-color: var(--danger-soft); color: var(--danger); }
.alert-success { background-color: var(--ok-soft); border-color: rgba(53, 112, 70, 0.25); color: var(--ok); }
.alert-warning { background-color: var(--warn-soft); border-color: rgba(138, 97, 0, 0.2); color: var(--warn); }
.alert-danger, .alert-error { background-color: var(--danger-soft); border-color: rgba(179, 55, 44, 0.25); color: var(--danger); }
.alert-info { background-color: var(--brand-soft); border-color: var(--brand-soft-deep); color: var(--brand-strong); }

/* Tables and pagination on the warm palette */
.table th, .table td { border-color: var(--line); }
.thead-light th, .table .thead-light th { background-color: var(--surface-muted); color: var(--ink-secondary); border-color: var(--line); }
.table-hover tbody tr:hover { background-color: var(--surface-muted); }
.page-link { color: var(--brand-strong); border-color: var(--line); }
.page-link:hover { color: var(--brand-strong); background-color: var(--surface-hover); border-color: var(--line); }
.page-link:focus { box-shadow: 0 0 0 3px rgba(217, 110, 15, 0.3); }
.page-item.active .page-link { background-color: var(--brand); border-color: var(--brand); color: #fff; }
.page-item.disabled .page-link { color: var(--ink-muted); border-color: var(--line); background-color: var(--surface); }

/* Remaining Bootstrap button variants on the warm palette */
.btn-warning { background-color: var(--warn); border-color: var(--warn); color: #fff; }
.btn-warning:hover, .btn-warning:not(:disabled):not(.disabled):active { background-color: var(--warn-strong); border-color: var(--warn-strong); color: #fff; }
.btn-warning:focus, .btn-warning.focus { background-color: var(--warn-strong); border-color: var(--warn-strong); color: #fff; box-shadow: 0 0 0 3px rgba(138, 97, 0, 0.3); }
.btn-secondary { background-color: var(--ink-secondary); border-color: var(--ink-secondary); }
.btn-secondary:hover, .btn-secondary:not(:disabled):not(.disabled):active { background-color: var(--ink); border-color: var(--ink); }
.btn-outline-secondary { color: var(--ink-secondary); border-color: var(--line-strong); }
.btn-outline-secondary:hover, .btn-outline-secondary:not(:disabled):not(.disabled):active { background-color: var(--surface-hover); border-color: var(--line-strong); color: var(--ink); }

/* Form controls on the warm palette - kills the last stock-blue: Bootstrap's
   focus ring. accent-color covers native checkboxes/radios. */
.form-control { border-color: var(--line-strong); color: var(--ink); }
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(217, 110, 15, 0.2); color: var(--ink); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--brand); }
.custom-control-input:checked ~ .custom-control-label::before { background-color: var(--brand); border-color: var(--brand); }
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(217, 110, 15, 0.2); }