.advocate-user-pill {
  color: #f4ecd8 !important;
  font-weight: 600;
}

.advocate-user-pill i {
  color: #d4af37;
  margin-right: .3rem;
}

.page-item.active .page-link {
  background-color: #14264d;
  border-color: #14264d;
}

.page-link {
  color: #14264d;
}

.page-link:hover {
  color: #0a1830;
}

*.icon-dark {
  color: grey;
}

.actions-cell {
  white-space: nowrap;
}

.actions-cell a {
  display: inline-block;
  margin-right: 10px;
  vertical-align: middle;
}

.actions-cell a:last-child {
  margin-right: 0;
}

.message {
  margin-top: 10px;
}

.text-truncate-cell {
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hub-layout {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
}

.hub-sidebar {
  flex: 0 0 200px;
  position: sticky;
  top: 20px;
  background: #fff;
  border: 1px solid #e2e6ee;
  border-radius: 6px;
  padding: .75rem 0;
}

.hub-sidebar .hub-sidebar-title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #6c757d;
  padding: 0 1rem;
  margin: .5rem 0 .25rem;
}

.hub-sidebar .hub-sidebar-link {
  display: block;
  padding: .5rem 1rem;
  color: #14264d;
  text-decoration: none;
  border-left: 3px solid transparent;
}

.hub-sidebar .hub-sidebar-link:hover {
  background: #f4f6fb;
  text-decoration: none;
}

.hub-sidebar .hub-sidebar-link.active {
  background: #eef1f8;
  border-left-color: #d4af37;
  font-weight: 600;
}

.hub-sidebar .hub-sidebar-link i {
  width: 1.1rem;
  text-align: center;
  margin-right: .4rem;
  color: grey;
}

.hub-content {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 768px) {
  .hub-layout {
    display: block;
  }
  .hub-sidebar {
    position: static;
    margin-bottom: 1rem;
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
  }
  .hub-sidebar .hub-sidebar-title {
    display: none;
  }
  .hub-sidebar .hub-sidebar-link {
    display: inline-block;
    border-left: none;
    border-bottom: 3px solid transparent;
  }
  .hub-sidebar .hub-sidebar-link.active {
    border-left: none;
    border-bottom-color: #d4af37;
  }
}

.search {
  position: relative;
}

.search input {
  text-indent: 25px;
  border: 2px solid #d6d4d4;
}

.search input:focus {
  box-shadow: none;
  border: 1px solid grey;
}

.search .fa-search {
  position: absolute;
  top: 12px;
  left: 10px;
}

/* Was a flat `background: grey` here, which - due to `.search button`'s higher specificity
   (class + element) than `.btn-advocate` (single class) - silently overrode the navy/gold
   button theme on every one of these search buttons regardless of which .btn-* class the
   template gave it. Matches .btn-advocate's own colors/hover exactly instead. */
.search button {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 80px;
  background: #14264d;
  border-color: #14264d;
  color: #f4ecd8;
}

.search button:hover,
.search button:focus {
  background: #d4af37;
  border-color: #d4af37;
  color: #14264d;
}

.size-select {
  width: 65px;
  color: #495057;
  vertical-align: middle;
  padding: 6px 12px;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
}

.card {
    background-color: #fff;
    border-radius: 10px;
    border: none;
    position: relative;
    margin-bottom: 30px;
    box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}
.l-bg-cherry {
    background: linear-gradient(to right, #493240, #f09) !important;
    color: #fff;
}

.l-bg-blue-dark {
    background: linear-gradient(to right, #373b44, #4286f4) !important;
    color: #fff;
}

.l-bg-green-dark {
    background: linear-gradient(to right, #0a504a, #38ef7d) !important;
    color: #fff;
}

.l-bg-orange-dark {
    background: linear-gradient(to right, #a86008, #ffba56) !important;
    color: #fff;
}

.card .card-statistic-3 .card-icon-large .fas, .card .card-statistic-3 .card-icon-large .far, .card .card-statistic-3 .card-icon-large .fab, .card .card-statistic-3 .card-icon-large .fal {
    font-size: 110px;
}

.card .card-statistic-3 .card-icon {
    text-align: center;
    line-height: 50px;
    margin-left: 15px;
    color: #000;
    position: absolute;
    right: -5px;
    top: 20px;
    opacity: 0.1;
}

.l-bg-cyan {
    background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
    color: #fff;
}

.l-bg-green {
    background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;
    color: #fff;
}

.l-bg-orange {
    background: linear-gradient(to right, #f9900e, #ffba56) !important;
    color: #fff;
}

.l-bg-cyan {
    background: linear-gradient(135deg, #289cf5, #84c0ec) !important;
    color: #fff;
}
/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Style the buttons that are used to open the tab content */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #ddd;
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}
.tabcontent {
  animation: fadeEffect 1s; /* Fading effect takes 1 second */
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}

.error {
  color: red;
}

.btn-advocate-active {
  background-color: #14264d;
  border-color: #14264d;
  color: #f4ecd8 !important;
}

.btn-advocate-active:hover {
  background-color: #d4af37;
  border-color: #d4af37;
  color: #14264d !important;
}

/* Professional form styling (advocate navy/gold theme) */
.pro-form-wrapper {
  max-width: 700px;
  margin: 2rem auto;
}

.pro-form-card {
  background: #fff;
  border: none;
  border-top: 4px solid #d4af37;
  border-radius: 6px;
  box-shadow: 0 0.5rem 1.5rem rgba(20, 38, 77, 0.12);
}

.pro-form-card .card-header {
  background: #14264d;
  color: #f4ecd8;
  font-weight: 600;
  letter-spacing: .5px;
  border-radius: 6px 6px 0 0;
  padding: 1rem 1.5rem;
  border: none;
  /* Guarantees breathing room between the title and the action button group even when
     flex-wrap drops the group onto its own line on a narrow screen - the .mt-2/.mt-sm-0
     this used to lean on only covered the wrapped case, and did nothing for the gap
     between title and buttons on one line. */
  gap: .75rem;
}

.pro-form-card .card-header i {
  color: #d4af37;
  margin-right: .5rem;
}

/* Record Payment / Generate Invoice / Change History quick-action links, moved into the header
   (see e.g. work_form.html). Own flex row so multiple buttons keep a real, consistent gap
   between each other (and wrap cleanly with the same gap) instead of the old ad-hoc "mr-1 on
   all but the last button" utility classes, which read as "no gap" at Bootstrap's .25rem. */
.pro-form-card .card-header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Bootstrap's outline-success/info/secondary default text colors are tuned for a light
   background and read poorly against this header's dark navy fill. */
.pro-form-card .card-header .btn-outline-success {
  color: #6fd08c;
  border-color: #6fd08c;
}
.pro-form-card .card-header .btn-outline-success:hover {
  background-color: #6fd08c;
  color: #14264d;
}
.pro-form-card .card-header .btn-outline-info {
  color: #7ec8e3;
  border-color: #7ec8e3;
}
.pro-form-card .card-header .btn-outline-info:hover {
  background-color: #7ec8e3;
  color: #14264d;
}
.pro-form-card .card-header .btn-outline-secondary {
  color: #cbd0dc;
  border-color: #cbd0dc;
}
.pro-form-card .card-header .btn-outline-secondary:hover {
  background-color: #cbd0dc;
  color: #14264d;
}

.pro-form-card .card-body {
  padding: 2rem;
}

.pro-form .form-label {
  font-weight: 600;
  color: #14264d;
  font-size: .875rem;
}

.pro-form .form-control,
.pro-form select.form-control,
.pro-form textarea.form-control {
  border: 1px solid #c9c2ac;
  border-radius: 4px;
}

.pro-form .form-control:focus,
.pro-form select.form-control:focus {
  border-color: #d4af37;
  box-shadow: 0 0 0 .2rem rgba(212, 175, 55, .25);
}

.pro-form .form-control.is-invalid,
.pro-form select.form-control.is-invalid {
  border-color: #dc3545;
}

.pro-form .invalid-feedback {
  display: block;
}

.pro-form .form-section-title {
  color: #14264d;
  font-weight: 600;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid #e6e0cf;
  padding-bottom: .35rem;
  margin: 1.25rem 0 1rem;
}

.pending-amount-badge {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 4px;
  background: #fff3cd;
  color: #7a5b00;
  font-weight: 600;
}

.btn-pro-save {
  background-color: #14264d;
  border-color: #14264d;
  color: #f4ecd8;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .55rem 1.75rem;
}

.btn-pro-save:hover,
.btn-pro-save:focus {
  background-color: #d4af37;
  border-color: #d4af37;
  color: #14264d;
}

.btn-pro-cancel {
  color: #14264d;
  border-color: #14264d;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: .8rem;
  padding: .55rem 1.75rem;
}

.btn-pro-cancel:hover {
  background-color: #14264d;
  color: #f4ecd8;
}

/* Form action rows (Record Payment / Generate Invoice / Change History / Save / Cancel, etc.) mix
   plain Bootstrap .btn-outline-* links with the taller, uppercase .btn-pro-save/.btn-pro-cancel
   buttons - without this, the two families render at different heights/padding/casing and the row
   looks misaligned once more than one or two buttons are present. Flex + a shared size normalizes
   every button in the row regardless of which family it belongs to. */
.pro-form-card .text-center.mt-4 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .5rem;
}

.pro-form-card .text-center.mt-4 .btn {
  margin: 0;
  padding: .55rem 1.25rem;
  font-size: .85rem;
}

/* Site-wide advocate theme: page banners, tables, buttons */
.page-banner {
  background: linear-gradient(135deg, #14264d 0%, #1e3a6d 100%);
  color: #f4ecd8;
  padding: 1.5rem 1rem;
  margin: -1rem -15px 1.5rem;
  text-align: center;
}

.page-banner h2 {
  margin: 0;
  font-weight: 600;
  letter-spacing: .5px;
  font-size: 1.5rem;
}

.page-banner i {
  color: #d4af37;
  margin-right: .5rem;
}

table.table thead.thead-light th {
  background: #14264d;
  color: #f4ecd8;
  border-color: #14264d;
}

/* Sitewide table polish - applied purely via CSS (no per-template class changes needed) so
   every existing `table.table` (and its `.table-hover`/`.table-sm` variants) picks this up
   automatically. Zebra striping was previously absent entirely (no `.table-striped` used
   anywhere); a very light tint here is enough to separate rows on wide/many-column tables
   without competing with the existing `.table-hover`/`.notif-unread`-style highlight colors. */
table.table tbody tr:nth-of-type(odd) {
  background-color: rgba(20, 38, 77, 0.025);
}

table.table.table-hover tbody tr:hover {
  background-color: rgba(212, 175, 55, 0.12);
  transition: background-color .1s ease;
}

/* Sortable column-header links (every list/report page) use Bootstrap's text-dark utility, which
   is meant for a light header background - against this theme's dark navy thead above, that makes
   the link text nearly invisible. Bootstrap's .text-dark carries !important, so this override must
   too. */
table.table thead.thead-light th a.text-dark {
  color: #f4ecd8 !important;
}
table.table thead.thead-light th a.text-dark:hover {
  color: #ffffff !important;
}

.btn-advocate {
  background-color: #14264d;
  border-color: #14264d;
  color: #f4ecd8;
  font-weight: 600;
}

.btn-advocate:hover,
.btn-advocate:focus {
  background-color: #d4af37;
  border-color: #d4af37;
  color: #14264d;
}

.btn-advocate-outline {
  background: transparent;
  border: 1px solid #14264d;
  color: #14264d;
  font-weight: 600;
}

.btn-advocate-outline:hover {
  background: #14264d;
  color: #f4ecd8;
}

/* Advocate-themed dashboard tile gradients (replaces the stock bezkoder colors) */
.l-bg-navy-deep {
  background: linear-gradient(135deg, #0a1830 0%, #14264d 100%) !important;
  color: #f4ecd8;
}

.l-bg-navy-steel {
  background: linear-gradient(135deg, #1e3a6d 0%, #2d5490 100%) !important;
  color: #f4ecd8;
}

.l-bg-gold {
  background: linear-gradient(135deg, #9c7a17 0%, #d4af37 100%) !important;
  color: #2a2103;
}

.l-bg-burgundy {
  background: linear-gradient(135deg, #4a1414 0%, #7a2332 100%) !important;
  color: #f4ecd8;
}

.l-bg-charcoal {
  background: linear-gradient(135deg, #2b2b2b 0%, #454545 100%) !important;
  color: #f4ecd8;
}

.l-bg-forest {
  background: linear-gradient(135deg, #14331f 0%, #1f5c33 100%) !important;
  color: #f4ecd8;
}

.l-bg-slate-teal {
  background: linear-gradient(135deg, #0f2e33 0%, #1c4d54 100%) !important;
  color: #f4ecd8;
}

a.dashboard-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, box-shadow .15s ease;
}

a.dashboard-tile-link:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(20, 38, 77, 0.25);
  text-decoration: none;
  color: inherit;
}

.notif-bell-link {
  position: relative;
}

.topbar-nav-item {
  margin-right: 18px;
}

.notif-badge {
  position: absolute;
  top: 2px;
  right: -2px;
  font-size: .6rem;
  padding: .2em .45em;
}

.notif-dropdown {
  width: 340px;
  max-height: 420px;
  overflow-y: auto;
  padding: 0;
}

.notif-item {
  white-space: normal;
  border-bottom: 1px solid #eee;
  padding: .6rem 1rem;
}

.notif-item.notif-unread {
  background: #eef2fb;
  font-weight: 600;
}

.notif-message {
  font-size: .85rem;
  color: #2a2a2a;
}

.chat-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #14264d;
  color: #d4af37;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
  z-index: 1040;
  transition: transform .15s ease, background .15s ease;
}

.chat-fab:hover, .chat-fab:focus {
  background: #d4af37;
  color: #14264d;
  transform: scale(1.06);
  text-decoration: none;
}

.chat-fab-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  font-size: .65rem;
  padding: .25em .5em;
}

.global-customer-search input[type="search"] {
  width: 160px;
}

@media (max-width: 991px) {
  .global-customer-search input[type="search"] {
    width: auto;
    flex: 1 1 auto;
  }
}

/* ---------------------------------------------------------------------
   Left sidebar + slim topbar (replaces the old full-width top navbar).
   The sidebar is taken out of normal flow (position: fixed) so no other
   template needs a matching content wrapper - see fragments/header.html.
   Visual language (navy gradient, gold accent, active left-border) matches
   the existing per-customer .hub-sidebar above, for consistency.
   --------------------------------------------------------------------- */

.app-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 240px;
  height: 100vh;
  overflow-y: auto;
  background: linear-gradient(180deg, #14264d 0%, #1e3a6d 100%);
  border-right: 3px solid #d4af37;
  z-index: 1035;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease;
}

.app-sidebar-brand {
  display: block;
  padding: 1rem 1.1rem;
  font-weight: 700;
  letter-spacing: .5px;
  color: #f4ecd8 !important;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3);
  line-height: 1.3;
}

.app-sidebar-brand i {
  color: #d4af37;
  margin-right: .35rem;
}

.app-sidebar-nav {
  padding: .5rem 0 1rem;
  flex: 1 1 auto;
}

.app-sidebar-link {
  display: block;
  padding: .55rem 1.1rem;
  color: #d7deec;
  text-decoration: none;
  font-weight: 500;
  border-left: 3px solid transparent;
}

.app-sidebar-link i {
  color: #d4af37;
  margin-right: .5rem;
  width: 1rem;
  text-align: center;
}

.app-sidebar-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
  text-decoration: none;
}

.app-sidebar-link.active {
  background: rgba(212, 175, 55, 0.16);
  border-left-color: #d4af37;
  color: #ffffff;
  font-weight: 600;
}

.app-sidebar-section-toggle {
  display: flex;
  align-items: center;
}

.app-sidebar-chevron {
  margin-left: auto;
  font-size: .7rem;
  transition: transform .15s ease;
}

.app-sidebar-section-toggle[aria-expanded="true"] .app-sidebar-chevron {
  transform: rotate(180deg);
}

.app-sidebar-submenu .app-sidebar-link {
  padding-left: 2.4rem;
  font-size: .92rem;
}

.app-topbar {
  /* position: fixed rather than sticky - this app shows a Bootstrap modal (delete confirmations,
     the appointment reminder, etc.) on nearly every page, and Bootstrap sets body's overflow to
     hidden while any modal is open. A "sticky" ancestor stops sticking the moment ANY ancestor
     (even one that isn't the actual scrolling container) has overflow other than visible - so
     sticky would silently break every time a modal opened. Fixed positioning has no such
     dependency; it's always pinned to the viewport regardless of what else is on the page. Left
     offset matches the sidebar's width instead of a margin-left, since this is no longer a
     normal-flow child that body's padding-left would push over. */
  position: fixed;
  top: 0;
  left: 240px;
  right: 0;
  height: 60px;
  z-index: 1030;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1.25rem;
  background: linear-gradient(135deg, #14264d 0%, #1e3a6d 100%);
  border-bottom: 3px solid #d4af37;
}

.app-sidebar-toggle-btn {
  display: none;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #d4af37;
  border-radius: 4px;
  padding: .25rem .6rem;
}

.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1034;
}

body {
  padding-left: 240px;
  /* The topbar is now position: fixed (see .app-topbar), so it no longer reserves its own space
     in the flow the way a sticky/static element would - this makes room for it explicitly so page
     content doesn't render underneath it. */
  padding-top: 60px;
}

@media (max-width: 768px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  .app-sidebar.sidebar-open {
    transform: translateX(0);
  }

  .app-sidebar-toggle-btn {
    display: inline-block;
  }

  .sidebar-backdrop.show {
    display: block;
  }

  body {
    padding-left: 0;
  }

  /* Bootstrap's .form-inline switches from flex-row to stacked below 576px, which used to be
     harmless (this whole bar was hidden behind the collapsed menu on mobile) - now that the
     topbar is always visible, force it to stay a single nowrap row instead, or the search
     input+button and the notif/user/logout group wrap onto separate lines. Also the sidebar is
     off-canvas here, so the topbar spans the full width (left: 0) instead of starting past it. */
  .app-topbar {
    left: 0;
    flex-wrap: nowrap;
  }

  .global-customer-search {
    display: flex;
    flex-wrap: nowrap;
    flex: 1 1 auto;
    min-width: 0;
  }

  .global-customer-search input[type="search"] {
    width: 100%;
    min-width: 0;
    flex: 1 1 auto;
  }

  .app-topbar .navbar-nav {
    flex-shrink: 0;
  }
}

/* Slim top-of-viewport progress bar shown during any save/update/delete submit, AJAX filter or
   report fetch, or PDF print/view (see /js/app-loader.js) - an indeterminate sliding-gradient bar
   rather than a real 0-100% one, since none of those operations report real progress. Sits above
   everything (including modals) so it stays visible even when a confirm dialog/modal is open. */
#appLoadingBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 2000;
  background: transparent;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

#appLoadingBar.active {
  opacity: 1;
}

#appLoadingBar.active::before {
  content: "";
  display: block;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, #14264d, #d4af37);
  animation: appLoadingBarSlide 1.1s ease-in-out infinite;
}

@keyframes appLoadingBarSlide {
  0% {
    margin-left: -40%;
  }
  100% {
    margin-left: 100%;
  }
}

/* Dashboard Due Soon / Appointments accordion (fragments/due_accordion.html). Kept here, not in
   dashboard.html's <head>: the header's in-app navigation swaps only the page body, so styles in a
   page's own <head> are missing whenever the dashboard is reached by clicking a menu link. */
.due-accordion { background: #fff; }
.due-group + .due-group { border-top: 1px solid #e9ecef; }
.due-group-header {
    display: flex; align-items: center; gap: .55rem; width: 100%;
    padding: .65rem 1rem; background: #f8f9fb; border: 0; text-align: left;
    font-weight: 600; color: #14264d; font-size: .9rem; cursor: pointer;
}
.due-group-header:focus { outline: none; box-shadow: inset 0 0 0 2px rgba(212, 175, 55, .5); }
.due-chevron { font-size: .75rem; color: #8a94a8; transition: transform .2s; width: .8rem; }
.due-group-header.collapsed .due-chevron { transform: rotate(-90deg); }
.due-group-dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; }
.due-group-overdue .due-group-dot { background: #c0392b; }
.due-group-today .due-group-dot { background: #e67e22; }
.due-group-tomorrow .due-group-dot { background: #d4af37; }
.due-group-later .due-group-dot { background: #95a5a6; }
.due-group-count {
    margin-left: auto; min-width: 1.6rem; padding: .05rem .5rem; border-radius: 999px;
    background: #e9ecef; color: #14264d; font-size: .75rem; text-align: center;
}
.due-group-overdue .due-group-count { background: #c0392b; color: #fff; }
.due-group-today .due-group-count { background: #e67e22; color: #fff; }
.due-item {
    display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem .6rem 1.4rem;
    border-top: 1px solid #f1f3f5; color: inherit; text-decoration: none;
    border-left: 3px solid transparent;
}
.due-item:hover { background: #fbf8ef; color: inherit; text-decoration: none; border-left-color: #d4af37; }
.due-main { flex: 1; min-width: 0; }
.due-title { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.due-title-text { font-weight: 600; color: #14264d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.due-type {
    flex: none; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .3px;
    padding: .1rem .4rem; border-radius: 3px; background: #eef1f7; color: #4a5875;
}
.due-meta { display: flex; flex-wrap: wrap; gap: .15rem 1rem; font-size: .8rem; color: #6b7690; margin-top: .15rem; min-width: 0; }
.due-meta-part { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.due-meta i { color: #a3abbd; margin-right: .15rem; }
.due-unassigned { font-style: italic; }
.due-date { flex: none; text-align: right; line-height: 1.2; }
.due-date-day { font-weight: 600; color: #14264d; font-size: .9rem; white-space: nowrap; }
.due-date-sub { font-size: .72rem; color: #8a94a8; white-space: nowrap; }
.due-group-overdue .due-date-sub { color: #c0392b; font-weight: 600; }
.due-go { flex: none; color: #c3c9d5; font-size: .75rem; }
.due-item:hover .due-go { color: #d4af37; }
.due-empty { padding: 1.25rem 1rem; color: #6b7690; }
.due-empty i { color: #27ae60; margin-right: .35rem; }

/* Admin > Inquiries table (admin_inquiries.html): every text cell stays on one line ending in
   "..." (full text in the tooltip); the message shows at most two lines, with View for the rest. */
.inq-cell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inq-contact { max-width: 220px; }
.inq-service { max-width: 180px; }
.inq-message {
  min-width: 240px; max-width: 360px; overflow: hidden; display: -webkit-box;
  -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; word-break: break-word;
}
@media (max-width: 1250px) {
  .inq-contact { max-width: 160px; }
  .inq-service { max-width: 110px; }
  .inq-message { min-width: 170px; max-width: 240px; }
}