/* ACP styles on top of Bootstrap. The CSP allows no inline styles, so
   everything a template needs is a class here. */

/* htmx's indicator styles (includeIndicatorStyles is off: it would inject a
   <style> element the CSP refuses). */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; transition: opacity 200ms ease-in; }

/* Compact look: small type, tight padding, square corners. */
:root {
  --bs-body-font-size: .8125rem;
  --bs-body-line-height: 1.4;
  --bs-border-radius: 0;
  --bs-border-radius-sm: 0;
  --bs-border-radius-lg: 0;
  --bs-border-radius-xl: 0;
  --bs-border-radius-xxl: 0;
  --bs-border-radius-pill: 0;
}
*, *::before, *::after { border-radius: 0 !important; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: .25rem; }
.h3 { font-size: 1.125rem; }
.h4 { font-size: 1.0625rem; }
.h5 { font-size: .9375rem; }
.h6 { font-size: .8125rem; }
p { margin-bottom: .5rem; }

/* The spacing scale above 2 shrinks: templates keep their classes. */
.mb-3 { margin-bottom: .5rem !important; }
.mb-4 { margin-bottom: .75rem !important; }
.mt-3 { margin-top: .5rem !important; }
.mt-4 { margin-top: .75rem !important; }
.mt-5 { margin-top: 1rem !important; }
.g-3, .gy-3 { --bs-gutter-y: .5rem; }
.g-3, .gx-3 { --bs-gutter-x: .5rem; }
.g-4, .gy-4 { --bs-gutter-y: .75rem; }
.g-4, .gx-4 { --bs-gutter-x: .75rem; }
.container-fluid { --bs-gutter-x: 1rem; }

.navbar { --bs-navbar-padding-y: .125rem; --bs-navbar-nav-link-padding-x: .5rem; --bs-nav-link-padding-y: .25rem; --bs-navbar-brand-font-size: .9375rem; --bs-navbar-brand-padding-y: 0; }
.navbar .nav-link { font-size: .8125rem; }
.nav-search input { width: 14rem; }
.dropdown-menu { --bs-dropdown-font-size: .8125rem; --bs-dropdown-padding-y: .125rem; --bs-dropdown-item-padding-y: .125rem; --bs-dropdown-item-padding-x: .75rem; --bs-dropdown-header-padding-y: .25rem; --bs-dropdown-header-padding-x: .75rem; --bs-dropdown-spacer: 0; }
.dropdown-header { font-size: .6875rem; text-transform: uppercase; letter-spacing: .03em; }
.nav-pills { --bs-nav-link-padding-y: .125rem; --bs-nav-link-padding-x: .5rem; }

.btn { --bs-btn-padding-y: .1875rem; --bs-btn-padding-x: .625rem; --bs-btn-font-size: .8125rem; }
.btn-sm { --bs-btn-padding-y: .0625rem; --bs-btn-padding-x: .375rem; --bs-btn-font-size: .75rem; }
.form-control, .form-select { padding-top: .1875rem; padding-bottom: .1875rem; padding-left: .375rem; font-size: .8125rem; }
.form-control { padding-right: .375rem; }
.form-select { padding-right: 1.75rem; background-position: right .375rem center; }
.form-control-sm, .form-select-sm { min-height: 0; padding-top: .0625rem; padding-bottom: .0625rem; font-size: .75rem; }
.form-label { margin-bottom: .125rem; }
.form-text { margin-top: .125rem; font-size: .75rem; }
.form-check { margin-bottom: .125rem; min-height: 0; }

.table { margin-bottom: .5rem; }
.table > :not(caption) > * > * { padding: .25rem .375rem; }
.table-sm > :not(caption) > * > * { padding: .125rem .3125rem; }
.alert { --bs-alert-padding-y: .375rem; --bs-alert-padding-x: .625rem; --bs-alert-margin-bottom: .5rem; }
.breadcrumb { --bs-breadcrumb-margin-bottom: .25rem; }
.badge { --bs-badge-padding-y: .2em; --bs-badge-padding-x: .4em; }
.progress { --bs-progress-height: .625rem; }

.login-box { max-width: 22rem; margin: 10vh auto 0; }
.table td.nowrap, .table th.nowrap { white-space: nowrap; }

/* Domain pages. */
.domains-table input, .domains-table select { min-width: 9rem; }
.site-text { max-height: 30rem; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* Email page, log entries. */
.json-small { font-size: .8rem; max-height: 12rem; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.json-doc { max-height: 70vh; overflow: auto; white-space: pre-wrap; word-break: break-word; }

/* Batch progress bars (no inline styles under the CSP): 5% steps. */
.pct-0 { width: 0%; }
.pct-5 { width: 5%; }
.pct-10 { width: 10%; }
.pct-15 { width: 15%; }
.pct-20 { width: 20%; }
.pct-25 { width: 25%; }
.pct-30 { width: 30%; }
.pct-35 { width: 35%; }
.pct-40 { width: 40%; }
.pct-45 { width: 45%; }
.pct-50 { width: 50%; }
.pct-55 { width: 55%; }
.pct-60 { width: 60%; }
.pct-65 { width: 65%; }
.pct-70 { width: 70%; }
.pct-75 { width: 75%; }
.pct-80 { width: 80%; }
.pct-85 { width: 85%; }
.pct-90 { width: 90%; }
.pct-95 { width: 95%; }
.pct-100 { width: 100%; }