/* ===== Drilling Tools International brand theme =====
   Primary: DTI Blue #01426A, DTI Gold #B47E00 (per the DTI Color Guide). */
:root {
  --dti-blue: #01426A;
  --dti-blue-dark: #013354;
  --dti-blue-darker: #01253c;
  --dti-gold: #B47E00;
  --dti-gold-dark: #946700;

  /* Re-point Bootstrap's theme so .text-primary, .bg-primary, .badge etc. follow brand. */
  --bs-primary: #01426A;
  --bs-primary-rgb: 1, 66, 106;
  --bs-link-color-rgb: 1, 66, 106;
  --bs-link-hover-color-rgb: 1, 37, 60;
}

html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

html {
  position: relative;
  min-height: 100%;
  /* Also on the root element (not just body): overscroll-behavior is only authoritative on the
     document scroller in some browsers, so set it here too to reliably suppress pull-to-refresh. */
  overscroll-behavior-y: contain;
}

body {
  margin-bottom: 60px;
  background-color: #f6f7f9;
  color: #243038;
  /* Suppress the browser pull-to-refresh: an accidental pull at the top of a compose page would
     reload it and lose a half-typed update (normal scroll/rubber-band is unaffected). */
  overscroll-behavior-y: contain;
}

/* ----- Headings ----- */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  color: var(--dti-blue);
}

/* ----- Navbar ----- */
.dti-navbar {
  background-color: var(--dti-blue);
  border-bottom: 3px solid var(--dti-gold) !important;
}

.dti-navbar .navbar-brand {
  color: #fff;
  font-weight: 700;
  letter-spacing: .3px;
}

.dti-navbar .navbar-brand::before {
  content: "";
  display: inline-block;
  width: .5rem;
  height: 1.1rem;
  margin-right: .5rem;
  vertical-align: -2px;
  background-color: var(--dti-gold);
  border-radius: 2px;
}

.dti-navbar .nav-link {
  color: rgba(255, 255, 255, .82);
  font-weight: 500;
}

.dti-navbar .nav-link:hover,
.dti-navbar .nav-link:focus {
  color: #fff;
}

.dti-navbar .nav-link.active {
  color: #fff;
  box-shadow: inset 0 -3px 0 var(--dti-gold);
}

/* ----- Buttons ----- */
.btn-primary {
  --bs-btn-bg: var(--dti-blue);
  --bs-btn-border-color: var(--dti-blue);
  --bs-btn-hover-bg: var(--dti-blue-dark);
  --bs-btn-hover-border-color: var(--dti-blue-dark);
  --bs-btn-active-bg: var(--dti-blue-darker);
  --bs-btn-active-border-color: var(--dti-blue-darker);
  --bs-btn-disabled-bg: var(--dti-blue);
  --bs-btn-disabled-border-color: var(--dti-blue);
}

.btn-outline-primary {
  --bs-btn-color: var(--dti-blue);
  --bs-btn-border-color: var(--dti-blue);
  --bs-btn-hover-bg: var(--dti-blue);
  --bs-btn-hover-border-color: var(--dti-blue);
  --bs-btn-active-bg: var(--dti-blue);
  --bs-btn-active-border-color: var(--dti-blue);
}

/* Gold accent button for highlight actions (optional utility). */
.btn-gold {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--dti-gold);
  --bs-btn-border-color: var(--dti-gold);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--dti-gold-dark);
  --bs-btn-hover-border-color: var(--dti-gold-dark);
  --bs-btn-active-bg: var(--dti-gold-dark);
}

/* ----- Badges ----- */
/* Gold (bg-warning) is reserved for "waiting / needs attention" states — Stacked rigs, pending
   follow-ups, pending registrations — plus the brand accent. The Issue post type gets its own
   burnt orange so a problem report doesn't read as a paused state (see PostType.BadgeClass;
   the Charts view's typeColors palette mirrors this hex). */
.badge-issue {
  background-color: #c2571d;
  color: #fff;
}

/* ----- Cards ----- */
.card {
  border: 1px solid #e6e9ed;
  border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(1, 66, 106, .05);
}

.card-body {
  padding: 1rem 1.25rem;
}

/* ----- Tables ----- */
.table > thead th {
  color: var(--dti-blue);
  border-bottom-width: 2px;
}

/* Stacked-card tables on phones (< md): each row becomes a labeled card so wide list
   tables don't force horizontal scrolling. Matches the nav breakpoint (navbar collapses /
   bottom tab bar shows below md), so the whole phone band stacks instead of side-scrolling.
   Cells carry a data-label with the column name. */
@media (max-width: 767.98px) {
  .table-stack thead {
    display: none;
  }
  .table-stack tbody tr {
    display: block;
    position: relative; /* anchor for the whole-card stretched link below */
    background: #fff;
    border: 1px solid #e6e9ed;
    border-radius: .5rem;
    padding: .25rem .75rem;
    margin-bottom: .6rem;
  }
  .table-stack tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    border: 0;
    padding: .3rem 0;
    text-align: right;
  }
  .table-stack tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--dti-blue);
    text-align: left;
    white-space: nowrap;
  }
  .table-stack tbody td:empty {
    display: none; /* e.g. the actions cell for non-admins */
  }
  /* Whole card taps through to the row's primary (Name) link... */
  .table-stack td a.stretch-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  /* ...but buttons and other links inside the card stay individually tappable. */
  .table-stack td .btn,
  .table-stack td a:not(.stretch-card) {
    position: relative;
    z-index: 1;
  }
}

/* ----- Mobile ergonomics ----- */
/* iOS Safari auto-zooms (and stays zoomed) when focusing any input rendered under 16px.
   Our root font is 14px below 768px, so force form fields up to 16px on phones — the
   update textarea is the most-used field in the app and must not jolt the viewport. */
@media (max-width: 767.98px) {
  .form-control, .form-select,
  .form-control-sm, .form-select-sm,
  /* The searchable-combobox control + its type-to-filter input, so focusing it doesn't iOS-zoom. */
  .ts-control, .ts-control input {
    font-size: 16px;
  }
}

/* Comfortable thumb targets on phones: small buttons (card footers, mark-done, filters)
   get taller hit areas; visual size stays compact. Up to md to match the rest of the phone
   layout (large phones / landscape are still one-handed touch). */
@media (max-width: 767.98px) {
  .btn-sm {
    --bs-btn-padding-y: .5rem;
    --bs-btn-padding-x: .8rem;
  }
}

/* Phone-only bottom tab bar (see _Layout): the four core destinations + the New Update
   action in thumb reach. Mirrors the top navbar's brand treatment (DTI blue, gold rule);
   the safe-area inset keeps it clear of the iPhone home indicator. */
.bottom-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030; /* over content, under Bootstrap modals (1055) and the native dialogs */
  display: flex;
  align-items: stretch;
  background-color: var(--dti-blue);
  border-top: 3px solid var(--dti-gold);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

.bottom-tabbar .tab {
  position: relative;
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  padding: .4rem 0 .45rem;
  font-size: .68rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .82);
}

.bottom-tabbar .tab:hover,
.bottom-tabbar .tab:focus {
  color: #fff;
  text-decoration: none;
}

.bottom-tabbar .tab.active {
  color: #fff;
  box-shadow: inset 0 3px 0 var(--dti-gold);
}

.bottom-tabbar .tab-icon {
  line-height: 1;
  display: inline-flex;
}

.bottom-tabbar .tab-icon svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* The overdue count rides the Follow-ups tab's top corner instead of inline. */
.bottom-tabbar .tab .badge {
  position: absolute;
  top: .15rem;
  left: 50%;
  margin: 0 0 0 .5rem;
  font-size: .6rem;
}

/* The raised center "+" action. */
.bottom-tabbar .tab-new-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.7rem;
  height: 2.7rem;
  margin-top: -1.15rem;
  border-radius: 50%;
  background-color: var(--dti-gold);
  border: 2px solid #fff;
  box-shadow: 0 .2rem .5rem rgba(0, 0, 0, .35);
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
}

.bottom-tabbar .tab-new-circle.is-disabled {
  opacity: .45; /* compose pages: visible but inert */
}

/* Keep page content (and the footer) scrollable above the fixed bar. Matches the bar's
   d-md-none: it shows whenever the top navbar is collapsed (below md). */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(3.4rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ----- Navbar quick-jump search ----- */
/* Compact fixed width on desktop; full-width row inside the collapsed (hamburger) menu. */
.quick-nav {
  min-width: 13rem;
}

@media (min-width: 768px) {
  .quick-nav {
    width: 15rem;
  }
}

.quick-nav .ts-control,
.quick-nav .form-select {
  font-size: .875rem;
}

/* Search-box affordance: a magnifying glass (Bootstrap Icons "search", MIT) instead of the
   select caret — the theme made this look like a plain dropdown, hiding that you can type.
   .form-select covers both the pre-enhancement native select and the .ts-wrapper (Tom Select
   copies the class onto its wrapper). */
.quick-nav .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236c757d'%3e%3cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: left .6rem center;
  background-size: .8rem;
  padding-left: 2rem;
}

/* Tom Select's control carries its own padding (the wrapper's is ignored), so offset it too
   or the text starts under the icon. */
.quick-nav .ts-wrapper.form-select .ts-control {
  padding-left: 2rem;
}

/* ----- Feed reading column ----- */
/* Post cards are prose; unbounded they stretch the full 1280px container and strand the
   card actions far from one-line bodies. ~56rem keeps a comfortable reading measure. */
.feed-col {
  max-width: 56rem;
  margin-inline: auto;
}

/* ----- Nav pills (account Manage nav) ----- */
/* Bootstrap's pill highlight is its default primary (#0d6efd) — the one place default blue
   still leaked through the brand theme. */
.nav-pills {
  --bs-nav-pills-link-active-bg: var(--dti-blue);
}

/* ----- Forms ----- */
.form-control:focus, .form-select:focus {
  border-color: #5b8bab;
  box-shadow: 0 0 0 .25rem rgba(1, 66, 106, .2);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus,
.form-check-input:focus {
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(1, 66, 106, .5);
}

/* The follow-up badge trigger isn't a .btn, so give it the same brand focus ring
   (keyboard focus only) instead of the bare UA outline. */
.followup-trigger:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.1rem #fff, 0 0 0 0.25rem rgba(1, 66, 106, .5);
  border-radius: .375rem;
}

/* The follow-up trigger wraps a small badge (not a .btn, so the tap-target bump above misses it).
   On phones it's the primary mark-done/edit-date control on each card — give it a 44px target. */
@media (max-width: 767.98px) {
  .followup-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
  }
}

.form-check-input:checked {
  background-color: var(--dti-blue);
  border-color: var(--dti-blue);
}

/* ----- Links ----- */
a {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

/* ----- Footer ----- */
.footer {
  background-color: #fff;
}

/* ----- In-app user guide (Tools/Guide — rendered markdown) ----- */
.guide-doc h1 { font-size: 1.6rem; margin-top: 1rem; }
.guide-doc h2 { font-size: 1.3rem; margin-top: 2rem; }
.guide-doc h3 { font-size: 1.1rem; margin-top: 1.5rem; }

.guide-doc table {
  width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
}

.guide-doc th,
.guide-doc td {
  border: 1px solid #e6e9ed;
  padding: .4rem .6rem;
  text-align: left;
}

.guide-doc th {
  color: var(--dti-blue);
  background: #f8f9fa;
}

.guide-doc blockquote {
  border-left: 4px solid var(--dti-gold);
  margin: 1rem 0;
  padding: .25rem 1rem;
  color: #5a6570;
  background: #fbf9f4;
}

.guide-doc img { max-width: 100%; }

.guide-doc code {
  background: #f1f3f5;
  padding: .1rem .3rem;
  border-radius: 3px;
}

/* ----- Auth pages (login/register) ----- */
/* The navbar's gold brand bar at heading scale, for the sign-in card. */
.auth-brand::before {
  content: "";
  display: inline-block;
  width: .55rem;
  height: 1.5rem;
  margin-right: .6rem;
  vertical-align: -3px;
  background-color: var(--dti-gold);
  border-radius: 2px;
}