/*
 * Stages 6–7 of docs/design-unification-plan.md: the temple cabinet, the
 * administration and the accounting share one Bootstrap skin on the tokens.
 * Loaded on every page (templates/element/ui/next_styles.php); every rule is
 * scoped to body.body-admin, which only the cabinet layouts set. The widget
 * preview inside the cabinet (#hr24AppBox) keeps its own themes.
 */

html:root body.body-admin {
  background-color: var(--h24-color-bg);
  color: var(--h24-color-text);
  font-family: var(--h24-font-sans);
}

html:root body.body-admin :is(h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, legend):not(:where(#hr24AppBox *)) {
  font-family: var(--h24-font-sans);
  font-weight: 500;
  color: var(--h24-color-text);
}

html:root body.body-admin a:not(.btn):not(.nav-link):not(.navbar-brand):not(.dropdown-item):not(.page-link):not(:where(#hr24AppBox *)) {
  color: var(--h24-color-link);
}

/* Header: light bar like the public site instead of the dark Bootstrap one. */
html:root body.body-admin .navbar.bg-dark {
  background-color: var(--h24-color-surface) !important;
  border-bottom: 1px solid var(--h24-color-border);
}

html:root body.body-admin .navbar-dark :is(.navbar-brand, .nav-link) {
  color: var(--h24-color-text);
}

html:root body.body-admin .navbar-dark .nav-link:is(:hover, :focus),
html:root body.body-admin .navbar-dark :is(.active > .nav-link, .nav-link.active, .show > .nav-link) {
  color: var(--h24-color-link);
}

html:root body.body-admin .navbar-dark .navbar-toggler {
  flex-shrink: 0;
  border-color: var(--h24-color-border);
}

/* While the menu is collapsed, the brand shrinks instead of pushing the menu
   button to a second line: the header is fixed, a taller one covers the top
   of the page. Admin and accounting expand at 768px, the temple cabinet at
   1200px. */
@media (max-width: 767.98px) {
  html:root body.body-admin .navbar-expand-md > .navbar-brand {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 1199.98px) {
  html:root body.body-admin .navbar-expand-xl > :is(.navbar-brand, .dropdown) {
    flex: 1 1 0;
    min-width: 0;
  }

  html:root body.body-admin .navbar-expand-xl > .navbar-brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html:root body.body-admin .navbar-expand-xl > .dropdown > .dropdown-toggle {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

html:root body.body-admin .navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(80, 98, 104, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html[data-theme="dark"]:root body.body-admin .navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(180, 197, 202, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

html:root body.body-admin .dropdown-menu {
  background-color: var(--h24-color-surface);
  border-color: var(--h24-color-border);
}

html:root body.body-admin .dropdown-item {
  color: var(--h24-color-text);
}

html:root body.body-admin .dropdown-item:is(:hover, :focus, .active) {
  background-color: var(--h24-color-primary-container);
  color: var(--h24-color-on-primary-container);
}

/* Buttons: one primary color; Bootstrap green, blue and gray become roles. */
html:root body.body-admin :is(.btn-primary, .btn-success):not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-primary);
  border-color: var(--h24-color-primary);
  color: var(--h24-color-on-primary);
}

html:root body.body-admin :is(.btn-primary, .btn-success):not(:where(#hr24AppBox *)):is(:hover, :active, .active) {
  background-color: var(--h24-color-primary-hover);
  border-color: var(--h24-color-primary-hover);
  color: var(--h24-color-on-primary);
}

html:root body.body-admin :is(.btn-info, .btn-secondary):not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-primary-container);
  border-color: var(--h24-color-primary-container);
  color: var(--h24-color-on-primary-container);
}

html:root body.body-admin :is(.btn-info, .btn-secondary):not(:where(#hr24AppBox *)):is(:hover, :active, .active) {
  background-color: var(--h24-color-surface-strong);
  border-color: var(--h24-color-surface-strong);
  color: var(--h24-color-text);
}

html:root body.body-admin .btn-warning:not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-warning-container);
  border-color: var(--h24-color-warning-container);
  color: var(--h24-color-on-warning-container);
}

html:root body.body-admin .btn-danger:not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-danger);
  border-color: var(--h24-color-danger);
  color: var(--h24-color-surface);
}

html:root body.body-admin :is(.btn-outline-primary, .btn-outline-info):not(:where(#hr24AppBox *)) {
  border-color: var(--h24-color-primary);
  color: var(--h24-color-link);
}

html:root body.body-admin :is(.btn-outline-secondary, .btn-outline-dark):not(:where(#hr24AppBox *)) {
  border-color: var(--h24-color-border-strong);
  color: var(--h24-color-text);
}

html:root body.body-admin .btn-outline-danger:not(:where(#hr24AppBox *)) {
  border-color: var(--h24-color-danger);
  color: var(--h24-color-danger);
}

html:root body.body-admin .btn-outline-warning:not(:where(#hr24AppBox *)) {
  border-color: var(--h24-color-warning);
  color: var(--h24-color-warning);
}

html:root body.body-admin :is(.btn-outline-primary, .btn-outline-info, .btn-outline-secondary, .btn-outline-dark):not(:where(#hr24AppBox *)):is(:hover, :active, .active) {
  background-color: var(--h24-color-primary-container);
  border-color: var(--h24-color-primary);
  color: var(--h24-color-on-primary-container);
}

html:root body.body-admin .btn:not(:where(#hr24AppBox *)):focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--h24-color-focus) 45%, transparent);
}

/* Tabs and pills. */
html:root body.body-admin .nav-tabs {
  border-bottom-color: var(--h24-color-border);
}

html:root body.body-admin .nav-tabs .nav-link {
  color: var(--h24-color-link);
}

html:root body.body-admin .nav-tabs .nav-link.active {
  background-color: var(--h24-color-surface);
  border-color: var(--h24-color-border) var(--h24-color-border) var(--h24-color-surface);
  color: var(--h24-color-text);
}

html:root body.body-admin .nav-pills .nav-link {
  color: var(--h24-color-link);
}

html:root body.body-admin .nav-pills .nav-link.active {
  background-color: var(--h24-color-primary);
  color: var(--h24-color-on-primary);
}

/* Badges and alerts by role. */
html:root body.body-admin :is(.badge-info, .badge-primary):not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-primary-container);
  color: var(--h24-color-on-primary-container);
}

html:root body.body-admin .badge-success:not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-success-container);
  color: var(--h24-color-on-success-container);
}

html:root body.body-admin .badge-warning:not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-warning-container);
  color: var(--h24-color-on-warning-container);
}

html:root body.body-admin .badge-danger:not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-danger-container);
  color: var(--h24-color-on-danger-container);
}

html:root body.body-admin :is(.badge-secondary, .badge-light):not(:where(#hr24AppBox *)) {
  background-color: var(--h24-color-surface-sunken);
  color: var(--h24-color-text);
}

html:root body.body-admin .alert-info {
  background-color: var(--h24-color-primary-container);
  border-color: var(--h24-color-primary-container);
  color: var(--h24-color-on-primary-container);
}

html:root body.body-admin .alert-warning {
  background-color: var(--h24-color-warning-container);
  border-color: var(--h24-color-warning-container);
  color: var(--h24-color-on-warning-container);
}

html:root body.body-admin .alert-success {
  background-color: var(--h24-color-success-container);
  border-color: var(--h24-color-success-container);
  color: var(--h24-color-on-success-container);
}

/* Forms and tables. */
html:root body.body-admin .form-control:focus {
  border-color: var(--h24-color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--h24-color-focus) 35%, transparent);
}

html:root body.body-admin .table :is(th, td) {
  border-color: var(--h24-color-border);
}

html:root body.body-admin .table thead th {
  color: var(--h24-color-text-muted);
  font-weight: 500;
}

html:root body.body-admin .breadcrumb {
  background-color: var(--h24-color-surface-sunken);
}

html:root body.body-admin .breadcrumb-item.active {
  color: var(--h24-color-text-muted);
}

/* Phones: wide tables scroll inside themselves, pagination and button
   groups wrap, so the page never moves sideways. */
@media (max-width: 767px) {
  html:root body.body-admin .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html:root body.body-admin :is(.pagination, .btn-group) {
    flex-wrap: wrap;
  }

  html:root body.body-admin .btn {
    max-width: 100%;
    white-space: normal;
  }
}

/* Phones: one 12px page gutter. Nested .container-fluid and card padding
   no longer add up to 30–36px on each side. */
@media (max-width: 575px) {
  html:root body.body-admin .navbar {
    padding-right: var(--h24-space-sm);
    padding-left: var(--h24-space-sm);
  }

  html:root body.body-admin .navbar > .navbar-brand {
    font-size: 1.0625rem;
  }

  html:root body.body-admin .container-admin {
    padding-right: var(--h24-space-sm);
    padding-left: var(--h24-space-sm);
  }

  html:root body.body-admin .container-admin .container-fluid {
    padding-right: 0;
    padding-left: 0;
  }

  /* Grid gutter to match: columns keep the 12px edge, rows never stick out. */
  html:root body.body-admin .container-admin .row:not(.no-gutters):not(:where(#hr24AppBox *)) {
    margin-right: calc(var(--h24-space-sm) / -2);
    margin-left: calc(var(--h24-space-sm) / -2);
  }

  html:root body.body-admin .container-admin .row:not(.no-gutters):not(:where(#hr24AppBox *)) > [class*="col"] {
    padding-right: calc(var(--h24-space-sm) / 2);
    padding-left: calc(var(--h24-space-sm) / 2);
  }

  html:root body.body-admin .container-admin :is(.card-body, .card-header, .card-footer):not(:where(#hr24AppBox *)) {
    padding-right: var(--h24-space-sm);
    padding-left: var(--h24-space-sm);
  }
}

html:root body.body-admin :is(.alert-info, .alert-warning, .alert-success) a {
  color: inherit;
  text-decoration: underline;
}