html {
  font-size: 14px;
}

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

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

/* ── Dark Mode ─────────────────────────────────────────────── */
body.dark-mode {
  background-color: #1a1d21;
  color: #dee2e6;
}

/* Navbar */
body.dark-mode .navbar {
  background-color: #212529 !important;
  border-color: #373b3e !important;
}
body.dark-mode .navbar .nav-link,
body.dark-mode .navbar .navbar-brand,
body.dark-mode .navbar .nav-link.text-dark {
  color: #dee2e6 !important;
}
body.dark-mode .navbar .dropdown-menu {
  background-color: #2c3034;
  border-color: #373b3e;
}
body.dark-mode .navbar .dropdown-item {
  color: #dee2e6;
}
body.dark-mode .navbar .dropdown-item:hover {
  background-color: #373b3e;
}

/* Cards */
body.dark-mode .card {
  background-color: #212529;
  border-color: #373b3e;
}
body.dark-mode .card-header {
  background-color: #2c3034 !important;
  border-color: #373b3e !important;
  color: #dee2e6;
}

/* Tables */
body.dark-mode .table {
  color: #dee2e6;
  border-color: #373b3e;
}
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(255,255,255,0.04);
  color: #dee2e6;
}
body.dark-mode .table-hover > tbody > tr:hover > * {
  background-color: rgba(255,255,255,0.07);
}
body.dark-mode .table-dark th {
  background-color: #161a1d;
}
body.dark-mode .table-light th {
  background-color: #2c3034;
  color: #dee2e6;
}
body.dark-mode thead.table-dark {
  --bs-table-bg: #161a1d;
}

/* Form controls */
body.dark-mode .form-control,
body.dark-mode .form-select {
  background-color: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}
body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
  color: #8a9199;
  opacity: 1;
}
body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus {
  background-color: #2c3034;
  color: #dee2e6;
  border-color: #6ea8fe;
}
body.dark-mode .form-control:disabled,
body.dark-mode .form-control[readonly],
body.dark-mode .form-select:disabled {
  background-color: #1a1d21;
  color: #6c757d;
}
body.dark-mode .form-control.bg-light {
  background-color: #1a1d21 !important;
  color: #6c757d;
}
body.dark-mode .input-group-text {
  background-color: #373b3e;
  border-color: #495057;
  color: #dee2e6;
}

/* Jira sidebar */
body.dark-mode .jira-sidebar {
  background: #212529;
}
body.dark-mode .jira-sidebar h6 {
  color: #adb5bd;
  border-color: #373b3e;
}
body.dark-mode .jira-label {
  color: #ced4da !important;
}

/* Alerts / badges */
body.dark-mode .alert-warning {
  background-color: #332d00;
  border-color: #665c00;
  color: #ffd700;
}
body.dark-mode .alert-success {
  background-color: #0a3622;
  border-color: #0f5132;
  color: #75b798;
}
body.dark-mode .alert-danger {
  background-color: #2c0b0e;
  border-color: #842029;
  color: #ea868f;
}

/* Modals */
body.dark-mode .modal-content {
  background-color: #212529;
  border-color: #373b3e;
}
body.dark-mode .modal-header {
  border-color: #373b3e;
}

/* Nav pills / tabs */
body.dark-mode .nav-link {
  color: #adb5bd;
}
body.dark-mode .nav-link:hover {
  color: #dee2e6;
}
body.dark-mode .nav-link.active {
  background-color: #0d6efd;
  color: #fff;
}
body.dark-mode .nav-tabs {
  border-color: #373b3e;
}
body.dark-mode .nav-tabs .nav-link.active {
  background-color: #212529;
  border-color: #373b3e #373b3e #212529;
  color: #dee2e6;
}

/* Attachment strip */
body.dark-mode .attachment-strip {
  background: #212529;
  border-color: #373b3e;
}
body.dark-mode .attach-chip {
  background: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}

/* Misc */
body.dark-mode .border-bottom,
body.dark-mode .border-top {
  border-color: #373b3e !important;
}
body.dark-mode .text-muted {
  color: #9ba4ae !important;
}
body.dark-mode hr {
  border-color: #373b3e;
}
body.dark-mode .footer {
  border-color: #373b3e !important;
  color: #6c757d;
}
body.dark-mode .bg-light {
  background-color: #2c3034 !important;
}
body.dark-mode .dropdown-divider {
  border-color: #373b3e;
}

/* Overhead inputs — force light text even when readonly */
body.dark-mode .form-control[readonly] {
  color: #dee2e6 !important;
}

/* Table striped — override Bootstrap's CSS variable approach */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > *,
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(255,255,255,0.04);
  color: #dee2e6;
}
body.dark-mode .table > :not(caption) > * > * {
  background-color: transparent;
  color: #dee2e6;
  border-color: #373b3e;
}

/* DataTables Responsive child rows — full width */
td.child {
    white-space: normal !important;
}
td.child ul.dtr-details {
    width: 100%;
    display: block;
}
td.child ul.dtr-details li {
    display: flex;
    gap: 8px;
    border-bottom: 1px solid #eee;
    padding: 4px 0;
}
td.child ul.dtr-details li:last-child {
    border-bottom: none;
}
td.child ul.dtr-details span.dtr-title {
    font-weight: 600;
    min-width: 120px;
    flex-shrink: 0;
}
td.child ul.dtr-details span.dtr-data {
    flex: 1;
}
body.dark-mode td.child ul.dtr-details li {
    border-color: #373b3e;
}

/* Quill — always light, not themed */
.ql-toolbar, .ql-container {
  background-color: #fff;
  color: #212529;
}

/* Outline buttons */
body.dark-mode .btn-outline-secondary {
  color: #adb5bd;
  border-color: #495057;
}
body.dark-mode .btn-outline-secondary:hover,
body.dark-mode .btn-outline-secondary:focus {
  background-color: #373b3e;
  border-color: #6c757d;
  color: #dee2e6;
}
body.dark-mode .btn-outline-danger {
  color: #ea868f;
  border-color: #842029;
}
body.dark-mode .btn-outline-danger:hover {
  background-color: #2c0b0e;
  border-color: #ea868f;
  color: #ea868f;
}
body.dark-mode .btn-outline-success {
  color: #75b798;
  border-color: #0f5132;
}
body.dark-mode .btn-outline-success:hover {
  background-color: #0a3622;
  border-color: #75b798;
  color: #75b798;
}
body.dark-mode .btn-outline-warning {
  color: #ffd700;
  border-color: #665c00;
}
body.dark-mode .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* List groups */
body.dark-mode .list-group-item {
  background-color: #212529;
  border-color: #373b3e;
  color: #dee2e6;
}
body.dark-mode .list-group-item-action:hover {
  background-color: #2c3034;
  color: #dee2e6;
}
body.dark-mode .list-group-item.active {
  background-color: #0d6efd;
  border-color: #0d6efd;
}

/* Pagination */
body.dark-mode .page-link {
  background-color: #212529;
  border-color: #373b3e;
  color: #6ea8fe;
}
body.dark-mode .page-link:hover {
  background-color: #2c3034;
  border-color: #495057;
  color: #9ec5fe;
}
body.dark-mode .page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
body.dark-mode .page-item.disabled .page-link {
  background-color: #1a1d21;
  border-color: #373b3e;
  color: #495057;
}

/* DataTables controls */
body.dark-mode .dataTables_wrapper .dataTables_length,
body.dark-mode .dataTables_wrapper .dataTables_filter,
body.dark-mode .dataTables_wrapper .dataTables_info,
body.dark-mode .dataTables_wrapper .dataTables_processing {
  color: #dee2e6;
}
body.dark-mode .dataTables_wrapper .dataTables_length select,
body.dark-mode .dataTables_wrapper .dataTables_filter input {
  background-color: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button {
  color: #6ea8fe !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: #2c3034 !important;
  border-color: #495057 !important;
  color: #9ec5fe !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: #0d6efd !important;
  border-color: #0d6efd !important;
  color: #fff !important;
}
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
body.dark-mode .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: #495057 !important;
}
body.dark-mode table.dataTable thead th,
body.dark-mode table.dataTable thead td {
  border-color: #373b3e;
}
body.dark-mode table.dataTable.row-border tbody th,
body.dark-mode table.dataTable.row-border tbody td,
body.dark-mode table.dataTable.display tbody th,
body.dark-mode table.dataTable.display tbody td {
  border-color: #373b3e;
}
body.dark-mode .dt-buttons .btn {
  background-color: #2c3034;
  border-color: #495057;
  color: #dee2e6;
}
body.dark-mode .dt-buttons .btn:hover {
  background-color: #373b3e;
  color: #fff;
}

/* Badges */
body.dark-mode .badge.bg-light {
  background-color: #2c3034 !important;
  color: #dee2e6 !important;
}
body.dark-mode .badge.bg-secondary {
  background-color: #495057 !important;
}
body.dark-mode .badge.text-dark {
  color: #dee2e6 !important;
}

/* Breadcrumb */
body.dark-mode .breadcrumb-item,
body.dark-mode .breadcrumb-item a {
  color: #9ec5fe;
}
body.dark-mode .breadcrumb-item.active {
  color: #adb5bd;
}
body.dark-mode .breadcrumb-item + .breadcrumb-item::before {
  color: #6c757d;
}

/* Miscellaneous text */
body.dark-mode .text-dark {
  color: #dee2e6 !important;
}
body.dark-mode .text-body {
  color: #dee2e6 !important;
}
body.dark-mode h1, body.dark-mode h2, body.dark-mode h3,
body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 {
  color: #dee2e6;
}
body.dark-mode label {
  color: #ced4da;
}
body.dark-mode small, body.dark-mode .small {
  color: #9ba4ae;
}


/* ── Navigation ────────────────────────────────────────────────
   The bar carries seven items at any width because the modules are grouped;
   what is left here is telling people where they are and giving a thumb
   something to hit. Brand purple is #6E5399, sampled from the logo.        */

.navbar .nav-link {
  white-space: nowrap;
}

/* Where you are. A weight change plus a rule under it, rather than a colour
   swap alone, so it survives dark mode and colour-blind eyes both.         */
.navbar .navbar-nav > .nav-item > .nav-link.active {
  color: #6E5399 !important;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 #6E5399;
}

.navbar .dropdown-item.active,
.navbar .dropdown-item:active {
  background-color: #6E5399;
  color: #fff;
}
.navbar .dropdown-item.active .fas {
  color: #fff !important;
}

.navbar .dropdown-menu {
  border-radius: .5rem;
  box-shadow: 0 .5rem 1.25rem rgba(31, 24, 48, .14);
  padding: .35rem;
}
.navbar .dropdown-item {
  border-radius: .35rem;
  padding-top: .45rem;
  padding-bottom: .45rem;
}

/* Keyboard focus has to be visible on a white bar AND on the dark one. The
   old rule painted a white ring, which vanished in dark mode.              */
.navbar .nav-link:focus-visible,
.navbar .dropdown-item:focus-visible,
.navbar .navbar-toggler:focus-visible {
  outline: 2px solid #6E5399;
  outline-offset: 2px;
  box-shadow: none;
}

/* Below the lg breakpoint the whole nav is inside the burger, where every row
   is a touch target. 44px is the floor five siblings on phones need.        */
@media (max-width: 991.98px) {
  .navbar-collapse {
    max-height: 75vh;
    overflow-y: auto;
    padding-bottom: .5rem;
  }
  .navbar .navbar-nav .nav-link,
  .navbar .navbar-nav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  /* An open group indents its children so the grouping still reads once the
     dropdown has flattened into the list.                                   */
  .navbar .navbar-nav .dropdown-menu {
    border: 0;
    box-shadow: none;
    padding-left: 1rem;
    margin-bottom: .25rem;
  }
  .navbar .navbar-nav > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 #6E5399;
    border-radius: .25rem;
  }
}

/* The tightest expanded width. Seven items, the brand and the account menu fit
   at 992px with about 40px to spare, which is not enough margin to trust across
   font stacks - so the gaps close a little until there is room to breathe.     */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar .navbar-nav .nav-link {
    padding-left: .45rem;
    padding-right: .45rem;
    font-size: .95rem;
  }
  .navbar .navbar-brand span {
    display: none;
  }
  #accountMenu span {
    max-width: 6rem;
  }
}

/* Table action buttons are the other thing a thumb has to hit. On a phone the
   Open/Delete/Show pairs were 24px tall and sat flush against each other.    */
@media (max-width: 767.98px) {
  .table .btn-sm,
  .table .btn-link {
    min-height: 38px;
    padding-left: .6rem;
    padding-right: .6rem;
  }
  .table td .btn + .btn,
  .table td form + form,
  .table td .btn + form {
    margin-top: .25rem;
  }
}

body.dark-mode .navbar .navbar-nav > .nav-item > .nav-link.active {
  color: #b9a3dc !important;
  box-shadow: inset 0 -2px 0 #b9a3dc;
}
body.dark-mode .navbar .dropdown-item.active {
  background-color: #6E5399;
  color: #fff;
}
body.dark-mode .navbar .nav-link:focus-visible,
body.dark-mode .navbar .dropdown-item:focus-visible,
body.dark-mode .navbar .navbar-toggler:focus-visible {
  outline-color: #b9a3dc;
}
@media (max-width: 991.98px) {
  body.dark-mode .navbar .navbar-nav > .nav-item > .nav-link.active {
    box-shadow: inset 3px 0 0 #b9a3dc;
  }
}

/* ── Print: always light mode ───────────────────────────────── */
@media print {
  body.dark-mode,
  body.dark-mode * {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #ccc !important;
  }
}

/* ── The public landing page (Pages/Shared/_Landing.cshtml) ──────────
   Signed-out visitors are the only ones who see any of this, and most of
   them arrive on a phone from a text message. The gradient is sampled from
   the logo (purple hand into blue hand) with the coral as the one accent.  */
.landing-hero {
  background: linear-gradient(135deg, #6E5399 0%, #8D6EB4 45%, #5F92BC 100%);
  color: #fff;
}
.landing-hero h1,
.landing-hero h2 {
  color: #fff;
}

/* Only the top hero bleeds past the layout container, which is padded to 95%.
   The closing call to action sits inside the grid as a rounded card.          */
.landing-hero-bleed {
  margin: -1rem -15px 3rem;
  border-radius: 0 0 .5rem .5rem;
}

/* Coral on the purple, and dark text on the coral - the button is the one
   thing on the page that has to be found without reading anything.           */
.landing-cta {
  background-color: #ED999C;
  color: #43305E;
  border: none;
  font-weight: 600;
}
.landing-cta:hover,
.landing-cta:focus {
  background-color: #F4B3B5;
  color: #43305E;
}

/* The tinted panels between the white sections. Dark mode gets its own pair
   rather than a filter, because the light tint over #1a1d21 reads as grey.   */
.landing-band {
  background-color: #F6F3FA;
}
body.dark-mode .landing-band {
  background-color: #23262b;
}

@media (max-width: 767.98px) {
  .landing-hero h1 {
    font-size: 2rem;
  }
}