:root {
  --portal-primary: #153b7a;
  --portal-accent: #1f5fbf;
  --portal-sidebar-bg: #0f172a;
}

body {
  font-family: 'Source Sans 3', sans-serif;
}

.portal-login-page {
  background: linear-gradient(135deg, #0f172a 0%, #111827 45%, #153b7a 100%);
}

.portal-login-box {
  width: min(420px, calc(100vw - 2rem));
}

.login-logo-preview,
.placeholder-logo,
.portal-brand-image {
  max-width: 180px;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.portal-login-note {
  font-size: 0.95rem;
  color: #6c757d;
  background: #f8f9fa;
  border-radius: 0.75rem;
  padding: 0.9rem 1rem;
}

.app-sidebar {
  background: var(--portal-sidebar-bg) !important;
}

.portal-brand-link {
  justify-content: center;
  padding-inline: 1rem;
}

.portal-brand-link .brand-image {
  float: none;
  max-height: 48px;
  margin: 0;
}

.portal-user-avatar,
.portal-profile-card-avatar {
  width: 52px;
  height: 52px;
  object-fit: cover;
}

.portal-modal-avatar {
  width: 140px;
  height: 140px;
  object-fit: cover;
}

#sidebarUserName {
  color: #ffffff !important;
}

#sidebarUserRole {
  color: rgba(255, 255, 255, 0.85) !important;
}

.portal-search-wrap {
  position: relative;
  min-width: 240px;
}

.portal-search-wrap .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  z-index: 3;
}

.portal-card {
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.08);
}

.portal-chart {
  min-height: 320px;
}

.portal-chart-modal {
  min-height: 420px;
}

.portal-empty-state {
  min-height: 220px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
  color: #6c757d;
  border: 1px dashed #cbd5e1;
  border-radius: 1rem;
  background: #f8fafc;
}

.portal-stat-box {
  height: 100%;
  padding: 1rem;
  border-radius: 1rem;
  background: #f8fafc;
  border: 1px solid #e9ecef;
}

.portal-stat-box span {
  display: block;
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.portal-stat-box strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
}

.portal-todo-list {
  display: grid;
  gap: 0.85rem;
}

.portal-todo-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #e9ecef;
  background: #fff;
}

.portal-todo-item.is-complete {
  opacity: 0.7;
}

.portal-todo-left {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-width: 0;
}

.portal-todo-title {
  font-weight: 700;
}

.portal-todo-meta {
  font-size: 0.9rem;
  color: #6c757d;
}

.portal-priority-badge {
  text-transform: capitalize;
  min-width: 84px;
}

.portal-priority-low { background: #e2f5e9; color: #176b35; }
.portal-priority-medium { background: #e7f0ff; color: #184fa3; }
.portal-priority-high { background: #fff3cd; color: #7a4d00; }
.portal-priority-urgent { background: #f8d7da; color: #842029; }

.portal-todo-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.portal-placeholder-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

@media (max-width: 767.98px) {
  .portal-search-wrap {
    min-width: 150px;
  }

  .portal-todo-item {
    flex-direction: column;
    align-items: stretch;
  }

  .portal-todo-actions {
    justify-content: flex-start;
  }
}


.portal-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(3px);
}

.portal-loading-card {
  min-width: 280px;
  padding: 28px 32px;
  text-align: center;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
}


.portal-status-editor {
  min-width: 175px;
}

.portal-status-editor .form-select {
  font-size: 0.85rem;
  min-width: 175px;
}

.portal-status-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 150px;
}

.portal-status-message {
  width: 100%;
  min-height: 1rem;
  line-height: 1.1;
}

#leadsModal .table td,
#mattersModal .table td {
  vertical-align: middle;
}

/* Outlook calendar demo module */
.portal-calendar-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.portal-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  overflow: hidden;
  background: #fff;
}

.portal-calendar-day-name,
.portal-calendar-cell {
  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.portal-calendar-day-name:nth-child(7n),
.portal-calendar-cell:nth-child(7n) {
  border-right: 0;
}

.portal-calendar-day-name {
  padding: 0.65rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  color: #64748b;
  background: #f8fafc;
}

.portal-calendar-cell {
  min-height: 116px;
  padding: 0.55rem;
  background: #fff;
}

.portal-calendar-cell.is-muted {
  background: #f8fafc;
  color: #94a3b8;
}

.portal-calendar-date {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
}

.portal-calendar-event {
  display: block;
  border: 0;
  border-radius: 0.7rem;
  padding: 0.45rem 0.5rem;
  margin-top: 0.35rem;
  background: #e8f1ff;
  color: #153b7a;
  font-size: 0.78rem;
  line-height: 1.15;
  text-align: left;
  width: 100%;
}

.portal-calendar-event strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-calendar-event span {
  display: block;
  color: #475569;
}

.portal-sync-status {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.portal-sync-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #dcfce7;
  color: #15803d;
  font-size: 1.35rem;
  flex: 0 0 auto;
}

.portal-code-preview {
  white-space: pre-wrap;
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem;
  font-size: 0.78rem;
}

@media (max-width: 768px) {
  .portal-calendar-grid {
    grid-template-columns: 1fr;
  }

  .portal-calendar-day-name {
    display: none;
  }

  .portal-calendar-cell,
  .portal-calendar-cell:nth-child(7n) {
    border-right: 0;
  }
}

/* Live Outlook calendar appointment badges */
.portal-calendar-events {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.portal-calendar-event {
  display: block;
  width: 100%;
  border: 0;
  border-radius: 8px;
  padding: 4px 6px;
  background: #e8f1ff;
  color: #0d6efd;
  font-size: 0.72rem;
  line-height: 1.15;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portal-calendar-event-time {
  font-weight: 700;
  margin-right: 4px;
}

.portal-calendar-cell.has-events {
  background: #fbfdff;
}

.portal-calendar-more {
  color: #6c757d;
  font-size: 0.72rem;
  padding-left: 6px;
}

.live-appointment-item {
  cursor: pointer;
}

.live-appointment-item:hover {
  background: rgba(13, 110, 253, 0.04);
}


.calendar-loaded-readonly,
.calendar-loaded-readonly:focus {
  background-color: #f3f6f9;
  color: #5d6778;
  cursor: not-allowed;
}

/* Live calendar Pacific-time and specialist color coding */
.portal-calendar-event {
  background: color-mix(in srgb, var(--appointment-color, #153b7a) 14%, white);
  color: var(--appointment-color, #153b7a);
  border-left: 4px solid var(--appointment-color, #153b7a);
}

.portal-calendar-event span,
.portal-calendar-event-title,
.portal-calendar-event-time {
  color: inherit;
}

.live-appointment-item {
  border-left: 5px solid var(--appointment-color, #153b7a);
}

.live-appointment-client {
  color: var(--appointment-color, #153b7a);
}

.calendar-specialist-legend {
  border-top: 1px solid #e2e8f0;
  padding-top: 0.85rem;
}

.calendar-specialist-legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.85rem;
}

.calendar-specialist-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: #334155;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 0.3rem 0.65rem;
}



.calendar-specialist-legend-filter {
  cursor: pointer;
}

.calendar-specialist-legend-filter.is-active {
  background: #e0f2fe;
  border-color: #38bdf8;
  color: #075985;
  font-weight: 700;
}

.calendar-specialist-legend-dot {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 999px;
  display: inline-block;
}

.portal-calendar-more {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: transparent;
  color: #475569;
  font-size: 0.72rem;
  padding: 0.2rem 0.35rem;
  margin-top: 0.1rem;
  cursor: pointer;
  text-align: left;
}

.portal-calendar-more:hover,
.portal-calendar-more:focus {
  color: var(--portal-primary);
  text-decoration: underline;
}

.calendar-day-modal.d-none {
  display: none !important;
}

.calendar-day-modal {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.calendar-day-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.calendar-day-modal-dialog {
  position: relative;
  width: min(640px, calc(100vw - 2rem));
  max-height: min(720px, calc(100vh - 2rem));
  overflow: hidden;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 1.5rem 4rem rgba(15, 23, 42, 0.28);
  display: flex;
  flex-direction: column;
}

.calendar-day-modal-header,
.calendar-day-modal-footer {
  padding: 1rem;
  border-bottom: 1px solid #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.calendar-day-modal-footer {
  border-top: 1px solid #e2e8f0;
  border-bottom: 0;
  justify-content: flex-end;
}

.calendar-day-modal-body {
  overflow: auto;
  padding: 1rem;
}

.calendar-day-modal-appointment {
  border-left: 5px solid var(--appointment-color, #153b7a);
  background: #f8fafc;
  border-radius: 0.85rem;
  padding: 0.85rem 1rem;
  margin-bottom: 0.75rem;
}

.calendar-day-modal-appointment:last-child {
  margin-bottom: 0;
}

.calendar-day-modal-appointment-title {
  font-weight: 700;
  color: var(--appointment-color, #153b7a);
}

body.calendar-day-modal-open {
  overflow: hidden;
}


/* Portal sidebar collapse polish */
.sidebar-mini.sidebar-collapse .sidebar-user-panel .d-flex > div,
.sidebar-mini.sidebar-collapse .sidebar-user-panel .small,
.sidebar-mini.sidebar-collapse .sidebar-user-panel #sidebarUserName {
  display: none !important;
}

.sidebar-mini.sidebar-collapse .portal-brand-link {
  padding-inline: 0.5rem;
}

.sidebar-mini.sidebar-collapse .portal-brand-image {
  max-width: 48px;
}

.sidebar-mini.sidebar-collapse .sidebar-user-panel {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.sidebar-mini.sidebar-collapse .sidebar-user-panel .d-flex {
  justify-content: center;
}

/* Portal nav/sidebar fixes */
.portal-search-wrap {
  min-width: 260px;
}

.portal-search-wrap .portal-search-input {
  padding-left: 2.25rem !important;
}

.nav-link.disabled {
  pointer-events: none;
  opacity: 0.55;
}

@media (min-width: 992px) {
  body.portal-sidebar-collapsed .app-sidebar,
  body.sidebar-collapse .app-sidebar {
    width: 4.6rem !important;
    min-width: 4.6rem !important;
    overflow-x: hidden;
  }

  body.portal-sidebar-collapsed .app-main,
  body.portal-sidebar-collapsed .app-header,
  body.sidebar-collapse .app-main,
  body.sidebar-collapse .app-header {
    margin-left: 4.6rem !important;
  }

  body.portal-sidebar-collapsed .sidebar-menu p,
  body.portal-sidebar-collapsed .sidebar-brand .brand-text,
  body.portal-sidebar-collapsed .sidebar-user-panel .d-flex > div,
  body.sidebar-collapse .sidebar-menu p,
  body.sidebar-collapse .sidebar-brand .brand-text,
  body.sidebar-collapse .sidebar-user-panel .d-flex > div {
    display: none !important;
  }

  body.portal-sidebar-collapsed .sidebar-menu .nav-link,
  body.sidebar-collapse .sidebar-menu .nav-link {
    justify-content: center;
    padding-left: 0.85rem;
    padding-right: 0.85rem;
  }

  body.portal-sidebar-collapsed .sidebar-menu .nav-icon,
  body.sidebar-collapse .sidebar-menu .nav-icon {
    margin-right: 0 !important;
  }
}

@media (max-width: 991.98px) {
  body.sidebar-collapse .app-sidebar,
  body.portal-sidebar-collapsed .app-sidebar {
    transform: translateX(-100%);
  }
}


/* Hard-hide admin-only navigation for non-admin users. */
body.portal-non-admin-user .admin-only-nav,
body.portal-non-admin-user .admin-only-column {
  display: none !important;
}

/* Sidebar/card containment fixes after admin nav cleanup */
.small-box {
  min-height: 108px;
  overflow: hidden;
}

.small-box > .inner {
  position: relative;
  z-index: 2;
}

.small-box .small-box-icon {
  right: 1.25rem !important;
  top: 1.35rem !important;
  max-width: 6.5rem;
  overflow: hidden;
  line-height: 1;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  padding: 0.5rem 0.75rem;
}

.portal-brand-link,
.sidebar-brand .brand-link {
  width: 100%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.portal-brand-link .brand-image,
.portal-brand-image {
  display: block;
  float: none !important;
  max-width: min(160px, calc(100% - 0.5rem));
  width: auto;
  max-height: 52px;
  height: auto;
  margin: 0 auto !important;
  object-fit: contain;
}

.sidebar-user-panel .d-flex {
  align-items: center;
}

.sidebar-user-panel .portal-user-avatar,
#sidebarUserAvatar {
  flex: 0 0 auto;
  display: block;
  width: 52px !important;
  height: 52px !important;
  max-width: 52px !important;
  max-height: 52px !important;
  object-fit: cover;
}

@media (min-width: 992px) {
  body.portal-sidebar-collapsed .app-sidebar,
  body.sidebar-collapse .app-sidebar {
    width: 7.6rem !important;
    min-width: 7.6rem !important;
    overflow-x: hidden !important;
  }

  body.portal-sidebar-collapsed .app-main,
  body.portal-sidebar-collapsed .app-header,
  body.sidebar-collapse .app-main,
  body.sidebar-collapse .app-header {
    margin-left: 7.6rem !important;
  }

  body.portal-sidebar-collapsed .sidebar-brand,
  body.sidebar-collapse .sidebar-brand {
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  body.portal-sidebar-collapsed .portal-brand-link,
  body.sidebar-collapse .portal-brand-link {
    padding-inline: 0.15rem !important;
  }

  body.portal-sidebar-collapsed .portal-brand-image,
  body.sidebar-collapse .portal-brand-image {
    max-width: 104px !important;
    max-height: 44px !important;
    margin: 0 auto !important;
  }

  body.portal-sidebar-collapsed .sidebar-user-panel,
  body.sidebar-collapse .sidebar-user-panel {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body.portal-sidebar-collapsed .sidebar-user-panel .d-flex,
  body.sidebar-collapse .sidebar-user-panel .d-flex {
    width: 100%;
    justify-content: center !important;
    gap: 0 !important;
  }

  body.portal-sidebar-collapsed #sidebarUserAvatar,
  body.sidebar-collapse #sidebarUserAvatar {
    margin: 0 auto !important;
  }

  body.portal-sidebar-collapsed .sidebar-menu,
  body.sidebar-collapse .sidebar-menu {
    align-items: center;
  }

  body.portal-sidebar-collapsed .sidebar-menu .nav-item,
  body.sidebar-collapse .sidebar-menu .nav-item {
    width: 100%;
  }

  body.portal-sidebar-collapsed .sidebar-menu .nav-link,
  body.sidebar-collapse .sidebar-menu .nav-link {
    width: 58px !important;
    min-width: 58px !important;
    height: 58px !important;
    min-height: 58px !important;
    margin: 0.35rem auto !important;
    padding: 0 !important;
    border-radius: 0.75rem;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden;
  }

  body.portal-sidebar-collapsed .sidebar-menu .nav-icon,
  body.sidebar-collapse .sidebar-menu .nav-icon {
    margin: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    font-size: 1.35rem;
    line-height: 1;
  }
}

.portal-clock-button.is-clocked-in {
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #157347;
  --bs-btn-hover-border-color: #146c43;
}

.portal-report-sheet {
  background: #fff;
  color: #111;
}

.portal-report-approval {
  background: #d1e7dd;
  border: 1px solid #a3cfbb;
  border-radius: .375rem;
  color: #0a3622;
  font-weight: 700;
  margin-bottom: .75rem;
  padding: .65rem .8rem;
  text-align: center;
}

.portal-report-title {
  background: #4f82bd;
  color: #000;
  font-weight: 700;
  padding: .35rem .5rem;
  text-align: center;
}

.portal-report-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin-bottom: 1.5rem;
}

.portal-report-table th {
  background: #4f82bd;
  color: #000;
  font-weight: 700;
}

.portal-report-table td,
.portal-report-table th {
  border: 1px solid #fff;
  padding: .35rem .5rem;
  vertical-align: middle;
}

.portal-report-table tbody tr:nth-child(odd) td { background: #b7cde3; }
.portal-report-table tbody tr:nth-child(even) td { background: #dbe6f1; }
.portal-report-table .portal-total-row td {
  background: #4f82bd !important;
  font-weight: 700;
}

.portal-report-summary {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  margin: 1rem 0 0 0;
}

.portal-report-summary th {
  background: #4f82bd;
  color: #000;
  font-weight: 700;
  text-align: center;
}

.portal-report-summary td,
.portal-report-summary th {
  border: 1px solid #fff;
  padding: .45rem .5rem;
  vertical-align: middle;
}

.portal-report-summary td {
  background: #dbe6f1;
  text-align: center;
}

@media print {
  @page { size: letter portrait; margin: 0.5in; }
  body * { visibility: hidden !important; }
  #hoursDealsReportOutput, #hoursDealsReportOutput * { visibility: visible !important; }
  #hoursDealsReportOutput {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #hoursDealsReportOutput .portal-report-table {
    page-break-inside: avoid;
    break-inside: avoid;
  }
}

/* Staff Schedule + Transfer Board */
.schedule-toolbar,
.schedule-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.schedule-week-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(150px, 1fr));
  gap: 12px;
}

.schedule-day-card {
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
  min-height: 180px;
}

.schedule-day-header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.schedule-day-title {
  font-weight: 700;
  line-height: 1.1;
}

.schedule-day-date {
  font-size: .78rem;
  color: #6c757d;
}

.schedule-block-row {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(78px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.schedule-time-control {
  min-width: 0;
}

.schedule-time-btn {
  width: 100%;
  min-height: 38px;
  border: 1px solid rgba(0,0,0,.14);
  border-radius: 6px;
  background: #fff;
  color: #212529;
  font-weight: 700;
  text-align: center;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.schedule-time-btn:hover,
.schedule-time-btn:focus {
  border-color: #0d6efd;
  outline: 3px solid rgba(13,110,253,.15);
}

.schedule-time-picker {
  position: absolute;
  z-index: 3000;
  width: 292px;
  padding: 12px;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0,0,0,.22);
}

.schedule-time-picker-title {
  font-weight: 800;
  margin-bottom: 8px;
}

.schedule-time-picker-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

.schedule-time-picker-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.schedule-day-card.is-off .schedule-blocks,
.schedule-day-card.is-off .add-schedule-block-btn {
  opacity: .45;
  pointer-events: none;
}

.schedule-gap-note {
  font-size: .76rem;
  color: #6c757d;
  margin: -2px 0 8px;
}

.transfer-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.transfer-card {
  border-radius: 16px;
  padding: 16px;
  border: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  background: #fff;
}

.transfer-card.status-green { border-left: 10px solid #28a745; background: #e8f8ed; }
.transfer-card.status-yellow { border-left: 10px solid #ffc107; background: #fff6d8; }
.transfer-card.status-red { border-left: 10px solid #dc3545; background: #ffe4e6; }
.transfer-name { font-weight: 800; font-size: 1.05rem; }
.transfer-status { font-weight: 700; margin-top: 4px; }
.transfer-detail { font-size: .92rem; margin-top: 3px; }
.transfer-muted { color: #6c757d; font-size: .85rem; }

@media (max-width: 1200px) {
  .schedule-week-grid { grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

@media (max-width: 700px) {
  .schedule-week-grid { grid-template-columns: 1fr; }
  .schedule-actions > button { width: 100%; }
}

/* Staff schedule time picker v3 fixes */
.schedule-time-btn {
  min-width: 0;
  overflow: hidden;
}
.schedule-time-value {
  display: inline-block;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.schedule-time-picker {
  position: fixed;
  width: 270px;
  max-width: calc(100vw - 24px);
  z-index: 5000;
}
.schedule-time-picker-row {
  grid-template-columns: 1fr 1fr 1fr;
  align-items: end;
}
.schedule-time-picker-row label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  color: #6c757d;
}
.schedule-time-picker-row label span {
  display: block;
  margin-bottom: 4px;
}
.schedule-time-preview {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: #f8f9fa;
  font-weight: 800;
  text-align: center;
}
.schedule-time-picker-actions .btn {
  min-width: 72px;
}


/* Staff schedule v4 compact time buttons and header cleanup */
.schedule-block-row {
  grid-template-columns: 60px 60px 48px;
  gap: 8px;
}
.schedule-time-btn {
  width: 60px;
  height: 38px;
  min-height: 38px;
  padding: 4px 5px;
  font-size: 11px;
  line-height: 1.05;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.schedule-time-btn.is-empty {
  font-size: 14px;
  color: #495057;
}
.schedule-time-btn.has-time {
  color: #0d6efd;
  border-color: rgba(13,110,253,.35);
}
.schedule-time-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.schedule-day-header {
  align-items: flex-start;
}
.schedule-day-header .form-check-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  line-height: 1;
  margin-top: 2px;
}
.schedule-day-header .form-check-input {
  margin: 0;
  flex: 0 0 auto;
}
.schedule-time-picker {
  width: 270px;
  overflow: hidden;
}
.schedule-time-picker-actions {
  align-items: center;
}
@media (max-width: 1200px) {
  .schedule-block-row { grid-template-columns: 72px 72px 48px; }
  .schedule-time-btn { width: 72px; font-size: 12px; }
}


/* Staff schedule v5 layout cleanup: keep remove button inside day card and avoid tooltip overlap */
.schedule-week-grid {
  grid-template-columns: repeat(7, minmax(224px, 1fr));
  gap: 16px;
  align-items: start;
}
.schedule-day-card {
  min-width: 224px;
  overflow: visible;
}
.schedule-block-row {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(78px, 1fr) 34px;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.schedule-time-btn {
  width: 100%;
  max-width: 86px;
  height: 38px;
  padding: 4px 4px;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
}
.schedule-time-btn.is-empty {
  font-size: 15px;
}
.remove-schedule-block-btn {
  width: 34px !important;
  height: 38px !important;
  min-width: 34px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.schedule-block-row .schedule-notes {
  grid-column: 1 / -1;
  min-width: 0;
}
.schedule-day-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  column-gap: 8px;
}
.schedule-day-header .form-check-label {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.2;
  margin: 2px 0 0 0;
}
.schedule-day-header .form-check-input {
  margin: 0 !important;
}
@media (max-width: 1200px) {
  .schedule-week-grid { grid-template-columns: repeat(2, minmax(224px, 1fr)); }
  .schedule-time-btn { max-width: 92px; font-size: 11px; }
}
@media (max-width: 700px) {
  .schedule-week-grid { grid-template-columns: 1fr; }
}

/* Staff schedule v6 cleanup */
.schedule-block-labels {
  display: grid;
  grid-template-columns: minmax(78px, 1fr) minmax(78px, 1fr) 34px;
  gap: 8px;
  align-items: center;
  margin: 4px 0 5px;
  color: #6c757d;
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.schedule-day-card[draggable="true"] {
  cursor: grab;
}
.schedule-day-card.is-dragging {
  opacity: .55;
  cursor: grabbing;
}
.schedule-day-card.is-drop-target {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13,110,253,.18);
}
.schedule-day-card.is-off .schedule-block-labels {
  opacity: .45;
}
.schedule-time-btn {
  font-size: 10.5px;
  letter-spacing: -.02em;
}
.schedule-time-btn.has-time {
  padding-left: 2px;
  padding-right: 2px;
}
.schedule-day-header .form-check-label {
  min-width: 46px;
  justify-content: flex-end;
}
@media (max-width: 1200px) {
  .schedule-block-labels { grid-template-columns: minmax(78px, 1fr) minmax(78px, 1fr) 34px; }
}

/* Phone click mode toggle and visited-style phone links */
.portal-phone-mode-row {
  border: 1px solid rgba(13, 110, 253, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(13, 110, 253, 0.04);
}
.portal-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  flex: 0 0 auto;
}
.portal-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.portal-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #adb5bd;
  transition: .2s;
  border-radius: 999px;
}
.portal-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  top: 3px;
  background-color: white;
  transition: .2s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.portal-switch input:checked + .portal-slider {
  background-color: #0d6efd;
}
.portal-switch input:checked + .portal-slider:before {
  transform: translateX(24px);
}
.portal-phone-link.portal-phone-clicked {
  color: #6f42c1 !important;
  text-decoration: underline;
  text-decoration-style: double;
}
.portal-phone-link.portal-phone-copied::after {
  content: " Copied";
  color: #198754;
  font-size: 0.75rem;
  margin-left: 0.25rem;
  font-weight: 600;
}


.portal-phone-header-control {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
}
.portal-phone-header-label {
  display: block;
  line-height: 1.05;
}
.portal-switch.portal-switch-compact {
  width: 38px;
  height: 20px;
}
.portal-switch.portal-switch-compact .portal-slider:before {
  height: 16px;
  width: 16px;
  left: 2px;
  top: 2px;
}
.portal-switch.portal-switch-compact input:checked + .portal-slider:before {
  transform: translateX(18px);
}
#leadsModal th[data-sort="phone"] {
  vertical-align: bottom;
}

/* Column filter chips for Leads / Matters modals */
.portal-filter-toolbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.portal-add-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  border: 1px solid rgba(108, 117, 125, 0.45);
  background: #f8f9fa;
  color: #212529;
  font-weight: 700;
  padding: 8px 16px;
  line-height: 1;
}

.portal-add-filter-btn:hover,
.portal-add-filter-btn:focus {
  background: #eef2ff;
  border-color: rgba(13, 110, 253, 0.45);
  color: #0d6efd;
}

.portal-filter-plus {
  font-size: 22px;
  line-height: 16px;
  font-weight: 400;
}

.portal-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.portal-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 8px 12px;
  background: #efe7ff;
  color: #5f35b1;
  border: 1px solid rgba(95, 53, 177, 0.25);
  font-size: 0.92rem;
  line-height: 1;
  max-width: 360px;
}

.portal-filter-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.portal-filter-chip-remove {
  border: 0;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 16px;
  padding: 0 0 1px 4px;
  cursor: pointer;
}

.portal-filter-builder {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(108, 117, 125, 0.25);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

.portal-filter-builder select {
  max-width: 220px;
}

.portal-filter-builder input {
  max-width: 280px;
}

@media (max-width: 575.98px) {
  .portal-filter-builder select,
  .portal-filter-builder input,
  .portal-filter-builder button {
    max-width: none;
    width: 100%;
  }
}

.portal-filter-value-wrap {
  display: inline-flex;
  min-width: 180px;
}

.portal-filter-value-wrap .form-control,
.portal-filter-value-wrap .form-select {
  min-width: 180px;
}

/* Keep logo compact when sidebar is collapsed */
body.portal-sidebar-collapsed .portal-brand-image,
body.sidebar-collapse .portal-brand-image,
.sidebar-mini.sidebar-collapse .portal-brand-image {
  width: auto !important;
  max-width: 56px !important;
  max-height: 42px !important;
  object-fit: contain !important;
}

/* Calendar month navigation and agenda scrolling fixes */
.live-outlook-agenda-scroll {
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (max-width: 1199.98px) {
  .live-outlook-agenda-scroll {
    max-height: 520px;
  }
}

/* Booking-style appointment modal */
.booking-date-grid,
.booking-time-grid,
.booking-specialist-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: .75rem;
}
.booking-option-card {
  border: 1px solid rgba(0,0,0,.15);
  border-radius: .85rem;
  background: #fff;
  padding: 1rem;
  text-align: left;
  width: 100%;
  min-height: 86px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.booking-option-card:hover,
.booking-option-card.is-selected {
  transform: translateY(-1px);
  box-shadow: 0 .35rem 1rem rgba(0,0,0,.10);
  border-color: var(--bs-primary);
}
.booking-option-title { font-weight: 700; }
.booking-option-subtitle { color: #6c757d; font-size: .875rem; margin-top: .25rem; }
.booking-option-meta { font-size: .8rem; margin-top: .45rem; }

.portal-myday-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  align-items: start;
}

.portal-myday-main-column,
.portal-myday-side-column {
  display: grid;
  gap: 1rem;
}

.portal-myday-side-column {
  position: sticky;
  top: 1rem;
  align-self: start;
}

.portal-myday-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 1.25rem;
  border-radius: 1.15rem;
  border: 1px solid #dbeafe;
  background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.portal-myday-hero-now {
  border-color: #198754;
  background: linear-gradient(135deg, #e7f7ee, #ffffff);
  animation: portalPulseNow 1.35s ease-in-out infinite alternate;
}

.portal-myday-hero-prepare {
  border-color: #ffc107;
  background: linear-gradient(135deg, #fff8e1, #ffffff);
}

.portal-myday-eyebrow {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #6c757d;
}

.portal-myday-hero-title {
  font-size: 1.45rem;
  line-height: 1.15;
  font-weight: 900;
  color: #111827;
}

.portal-myday-hero-meta {
  color: #6c757d;
  margin-top: .25rem;
}

.portal-myday-countdown {
  font-size: 1.5rem;
  font-weight: 900;
  color: #0d6efd;
  white-space: nowrap;
}

@keyframes portalPulseNow {
  from { box-shadow: 0 0 0 rgba(25, 135, 84, 0); }
  to { box-shadow: 0 0 0 5px rgba(25, 135, 84, 0.12); }
}

.portal-myday-empty-summary {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #d1e7dd;
  background: #f0fff7;
  color: #0f5132;
}

.portal-myday-section {
  display: grid;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  background: #f8f9fa;
}

.portal-myday-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.portal-myday-card {
  display: block;
  padding: 0;
  border: 1px solid #e9ecef;
  border-radius: 1rem;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.portal-myday-card:hover {
  box-shadow: 0 10px 26px rgba(15, 23, 42, .07);
}

.portal-myday-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem 1rem 1.25rem;
  cursor: pointer;
  list-style: none;
}

.portal-myday-card summary::-webkit-details-marker { display: none; }
.portal-myday-card summary::after {
  content: '▾';
  color: #6c757d;
  transition: transform .15s ease;
}
.portal-myday-card[open] summary::after { transform: rotate(180deg); }
.portal-myday-card .portal-myday-summary-actions + ::after { display: none; }

.portal-myday-card-details {
  display: grid;
  gap: .35rem;
  padding: 0 1.1rem 1rem 1.25rem;
  color: #495057;
  border-top: 1px dashed #e9ecef;
  padding-top: .85rem;
}

.portal-myday-appointment { border-left: 6px solid #dc3545; }
.portal-myday-followup { border-left: 5px solid #ffc107; }
.portal-myday-lead { border-left: 5px solid #0d6efd; }
.portal-myday-transfer { border-left: 5px solid #198754; }
.portal-myday-state-past,
.portal-myday-state-completed {
  opacity: .62;
  background: #f8f9fa;
}
.portal-myday-state-now { border-left-color: #198754; box-shadow: inset 0 0 0 1px rgba(25, 135, 84, .15); }
.portal-myday-state-prepare { border-left-color: #ffc107; box-shadow: inset 0 0 0 1px rgba(255, 193, 7, .16); }

.portal-myday-appointment.portal-myday-state-now .portal-myday-time-label {
  background: #d1e7dd;
  color: #0f5132;
}

.portal-myday-appointment.portal-myday-state-prepare .portal-myday-time-label {
  background: #fff3cd;
  color: #664d03;
}

.portal-myday-appointment.portal-myday-state-past .portal-myday-time-label,
.portal-myday-appointment.portal-myday-state-completed .portal-myday-time-label {
  background: #e9ecef;
  color: #6c757d;
}

.portal-myday-time,
.portal-myday-time-badge {
  min-width: 130px;
}

.portal-myday-time-badge {
  display: grid;
  gap: .35rem;
  align-content: center;
}

.portal-myday-time-label {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  justify-content: center;
  padding: .45rem .65rem;
  border-radius: .75rem;
  background: #f1f5f9;
  color: #0f172a;
  font-weight: 900;
  line-height: 1.1;
}

.portal-myday-complete-mark {
  font-size: .78rem;
  font-weight: 900;
  color: #198754;
}

.portal-myday-main {
  flex: 1 1 auto;
  min-width: 0;
}

.portal-myday-title {
  font-size: 1.08rem;
  font-weight: 900;
  color: #212529;
}

.portal-myday-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .35rem;
}

.portal-myday-badge {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: .25rem .5rem;
  border-radius: 999px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  color: #495057;
  font-size: .78rem;
  font-weight: 700;
}

.portal-myday-meta,
.portal-myday-status {
  font-size: 0.9rem;
  color: #6c757d;
}

.portal-myday-status {
  margin-top: 0.2rem;
  font-weight: 800;
  color: #0d6efd;
}

.portal-myday-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
}

.portal-myday-summary-actions {
  min-width: 260px;
}

.portal-myday-prepare {
  display: grid;
  gap: .25rem;
  margin-top: .5rem;
  padding: .75rem;
  border-radius: .75rem;
  background: #fff8e1;
}

.portal-myday-prepare label {
  display: flex;
  gap: .45rem;
  align-items: center;
  margin: 0;
}

.portal-myday-side-card {
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid #e9ecef;
  background: #fff;
}

.portal-myday-side-title {
  font-weight: 900;
  margin-bottom: .8rem;
}

.portal-myday-timeline {
  display: grid;
  gap: .85rem;
}

.portal-myday-timeline-item {
  display: grid;
  grid-template-columns: 95px minmax(0,1fr);
  gap: .75rem;
  padding-bottom: .85rem;
  border-bottom: 1px dashed #e9ecef;
}

.portal-myday-timeline-item:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.portal-myday-timeline-time {
  font-weight: 800;
  color: #0d6efd;
}

.portal-myday-rules {
  padding-left: 1.2rem;
  margin-bottom: 0;
  color: #495057;
}

.portal-empty-state-compact {
  padding: 0.85rem;
  border-radius: 0.85rem;
}

@media (max-width: 991.98px) {
  .portal-myday-layout {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767.98px) {
  .portal-myday-hero,
  .portal-myday-card summary {
    align-items: stretch;
    flex-direction: column;
  }

  .portal-myday-time,
  .portal-myday-time-badge {
    min-width: 0;
  }

  .portal-myday-side-column {
    position: static;
  }

  .portal-myday-summary-actions {
    min-width: 0;
  }

  .portal-myday-actions {
    justify-content: flex-start;
  }

  .portal-myday-countdown {
    font-size: 1.15rem;
  }
}


/* Marketing performance report */
.marketing-report-body { background: #f4f6f9; }
.marketing-kpi-card { border: 0; }
.marketing-kpi-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: rgba(13,110,253,.1); color: var(--bs-primary); font-size: 1.45rem; flex: 0 0 auto; }
.marketing-performance-table thead th { white-space: nowrap; background: #f8f9fa; border-bottom-width: 1px; }
.marketing-performance-table tbody tr:hover { background: rgba(13,110,253,.035); }
#marketingSourceChart, #marketingShareChart, #marketingTrendChart { min-height: 280px; }
@media (min-width: 1200px) { #marketingReportModal .modal-dialog { max-width: 1420px; } }

/* ========================================================================== 
   MatterIQ visual refresh — 2026-08-19
   Visual-only modernization. Keeps Portal behavior and DOM hooks intact.
   ========================================================================== */
:root {
  --portal-primary: #1167d8;
  --portal-accent: #1167d8;
  --portal-navy: #071a35;
  --portal-navy-2: #0b2b59;
  --portal-sidebar-bg: #071a35;
  --portal-surface: #ffffff;
  --portal-canvas: #f3f6fb;
  --portal-line: #d9e1ec;
  --portal-text: #162033;
  --portal-muted: #64748b;
  --portal-success: #0f9d64;
  --portal-warning: #d99b00;
  --portal-danger: #c91d36;
  --portal-radius: 14px;
  --portal-radius-sm: 9px;
  --portal-shadow: 0 6px 20px rgba(24, 39, 61, 0.055);
  --portal-shadow-lg: 0 12px 34px rgba(15, 35, 60, 0.11);
}

html,
body {
  background: var(--portal-canvas);
  color: var(--portal-text);
}

body {
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  letter-spacing: -0.005em;
}

.bg-body-tertiary,
.app-main,
.content-wrapper {
  background: var(--portal-canvas) !important;
}

/* Application shell */
.app-wrapper {
  background: var(--portal-canvas);
}

.app-sidebar {
  background: linear-gradient(180deg, var(--portal-navy) 0%, var(--portal-navy-2) 100%) !important;
  border-right: 0 !important;
  box-shadow: 12px 0 34px rgba(7, 26, 53, 0.08) !important;
}

.sidebar-brand {
  min-height: 92px;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
  display: flex;
  align-items: center;
}

.portal-brand-link {
  min-height: 92px;
  justify-content: flex-start;
  padding: 18px 22px !important;
}

.portal-brand-link .brand-image,
.portal-brand-image {
  width: 190px !important;
  max-width: 100% !important;
  max-height: 62px !important;
  object-fit: contain;
  object-position: left center;
}

.sidebar-wrapper {
  padding: 10px 10px 20px;
}

.sidebar-user-panel {
  margin: 5px 8px 14px !important;
  padding: 12px 4px 16px !important;
  border-bottom-color: rgba(255,255,255,.12) !important;
}

.portal-user-avatar {
  width: 44px;
  height: 44px;
  border: 2px solid rgba(255,255,255,.22);
  box-shadow: none !important;
}

#sidebarUserName {
  font-size: .9rem;
  font-weight: 750 !important;
  color: #fff !important;
}

.sidebar-user-panel .small,
#sidebarUserRole {
  color: #aebfd4 !important;
  font-size: .75rem;
}

.sidebar-menu > .nav-item {
  margin: 3px 0;
}

.sidebar-menu .nav-link {
  border-radius: 9px;
  color: #c9d8eb !important;
  padding: 10px 12px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background-color .16s ease, color .16s ease, transform .16s ease;
}

.sidebar-menu .nav-link:hover {
  background: rgba(255,255,255,.075) !important;
  color: #fff !important;
  transform: translateX(1px);
}

.sidebar-menu .nav-link.active,
.sidebar-menu .nav-item.menu-open > .nav-link {
  background: rgba(255,255,255,.105) !important;
  color: #fff !important;
  box-shadow: none !important;
}

.sidebar-menu .nav-icon {
  width: 25px;
  margin-right: 9px !important;
  font-size: 1rem !important;
  color: inherit !important;
}

.sidebar-menu .nav-link p {
  font-size: .86rem;
  font-weight: 600;
}

.sidebar-menu .nav-treeview {
  padding-left: 8px;
}

.sidebar-menu .nav-treeview .nav-link {
  min-height: 39px;
  padding-top: 8px;
  padding-bottom: 8px;
  background: transparent !important;
}

/* Top bar */
.app-header.navbar {
  min-height: 74px;
  padding: 0 18px;
  background: rgba(255,255,255,.97) !important;
  border-bottom: 1px solid var(--portal-line) !important;
  box-shadow: none !important;
  backdrop-filter: blur(10px);
}

.app-header .nav-link {
  color: #42546b;
  border-radius: 8px;
}

.app-header .nav-link:hover,
.app-header .nav-link.active {
  color: var(--portal-primary);
  background: #eef5ff;
}

.app-header .bi-list {
  font-size: 1.25rem;
}

.portal-search-wrap {
  min-width: min(330px, 30vw);
}

.portal-search-wrap .search-icon {
  left: .85rem;
  color: #8290a3;
}

.portal-search-input,
.portal-search-wrap .form-control {
  min-height: 38px;
  padding-left: 2.35rem !important;
  border: 1px solid #d5deea;
  border-radius: 9px;
  background: #f8fafd;
  color: var(--portal-text);
  box-shadow: none !important;
}

.portal-search-input:focus,
.portal-search-wrap .form-control:focus {
  background: #fff;
  border-color: #8ab7ee;
  box-shadow: 0 0 0 3px rgba(17,103,216,.10) !important;
}

.navbar-badge {
  border-radius: 999px;
  font-weight: 700;
}

/* Main content */
.app-content-header {
  padding: 24px 28px 8px;
}

.app-content-header h1,
.app-content-header .h1,
.app-content-header .h2,
.app-content-header .h3 {
  color: var(--portal-text);
  font-weight: 780;
  letter-spacing: -.025em;
}

.app-content {
  padding: 14px 28px 32px;
}

.container-fluid {
  --bs-gutter-x: 1.35rem;
}

/* MatterIQ-style cards */
.card,
.portal-card,
.modal-content,
.dropdown-menu {
  border: 1px solid var(--portal-line) !important;
  border-radius: var(--portal-radius) !important;
  background: var(--portal-surface);
  box-shadow: var(--portal-shadow) !important;
}

.portal-card,
.card {
  overflow: hidden;
}

.card-header {
  background: #fff !important;
  border-bottom: 1px solid #e5ebf3 !important;
  padding: 17px 20px;
}

.card-header .card-title,
.card-title {
  color: var(--portal-text);
  font-weight: 750;
  letter-spacing: -.015em;
}

.card-body {
  padding: 20px;
}

.card-footer {
  background: #fbfdff;
  border-top: 1px solid #e5ebf3;
}

/* KPI/info boxes */
.info-box,
.small-box,
.portal-stat-box {
  border: 1px solid var(--portal-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--portal-text) !important;
  box-shadow: var(--portal-shadow) !important;
  overflow: hidden;
}

.info-box {
  min-height: 104px;
}

.info-box .info-box-icon {
  width: 64px;
  border-radius: 11px;
  margin: 11px 0 11px 11px;
  background: #eef5ff !important;
  color: var(--portal-primary) !important;
  font-size: 1.35rem;
}

.info-box .info-box-content {
  padding: 15px 17px;
}

.info-box .info-box-text,
.portal-stat-box span {
  color: var(--portal-muted) !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.info-box .info-box-number,
.portal-stat-box strong {
  color: var(--portal-text);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.025em;
}

.portal-stat-box {
  padding: 17px;
  background: #fbfdff !important;
}

/* Inputs / controls */
.form-control,
.form-select,
.input-group-text,
textarea.form-control {
  min-height: 42px;
  border-color: #cbd5e1;
  border-radius: 8px;
  color: var(--portal-text);
  box-shadow: none !important;
}

.form-control,
.form-select,
textarea.form-control {
  background-color: #fff;
}

.form-control:focus,
.form-select:focus,
textarea.form-control:focus {
  border-color: #7aafe9;
  box-shadow: 0 0 0 3px rgba(17,103,216,.10) !important;
}

.input-group > .form-control:first-child,
.input-group > .form-select:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.input-group-text {
  background: #f5f8fc;
  color: #62748a;
}

.form-label {
  color: #34465d;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: .4rem;
}

.form-text,
.text-secondary,
.text-muted {
  color: var(--portal-muted) !important;
}

/* Buttons */
.btn {
  border-radius: 8px;
  font-weight: 700;
  min-height: 38px;
  padding: .48rem .85rem;
  box-shadow: none !important;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
}

.btn-primary {
  --bs-btn-bg: var(--portal-primary);
  --bs-btn-border-color: var(--portal-primary);
  --bs-btn-hover-bg: #0e59bc;
  --bs-btn-hover-border-color: #0e59bc;
  --bs-btn-active-bg: #0c50aa;
  --bs-btn-active-border-color: #0c50aa;
}

.btn-outline-primary {
  --bs-btn-color: var(--portal-primary);
  --bs-btn-border-color: #8db5e9;
  --bs-btn-hover-bg: #eef5ff;
  --bs-btn-hover-color: #0e59bc;
  --bs-btn-hover-border-color: #6fa4e4;
  background: #fff;
}

.btn-outline-secondary {
  --bs-btn-color: #42546b;
  --bs-btn-border-color: #cbd5e1;
  --bs-btn-hover-bg: #f5f8fc;
  --bs-btn-hover-color: #23364e;
  --bs-btn-hover-border-color: #aab7c8;
}

.portal-clock-button {
  border-color: #b7cee9 !important;
  background: #f8fbff !important;
}

/* Tables */
.table {
  --bs-table-color: var(--portal-text);
  --bs-table-bg: transparent;
  --bs-table-border-color: #e4eaf2;
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: .78rem .85rem;
  vertical-align: middle;
}

.table thead th {
  background: #f5f8fc;
  color: #5f7085;
  border-bottom: 1px solid #dce4ee;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .045em;
  text-transform: uppercase;
  white-space: nowrap;
}

.table-hover > tbody > tr:hover > * {
  --bs-table-bg-state: #f6f9fd;
}

.table-responsive {
  border-radius: 10px;
}

/* Badges */
.badge {
  border-radius: 999px;
  padding: .42em .68em;
  font-weight: 750;
  letter-spacing: .01em;
}

.text-bg-primary { background: #eaf3ff !important; color: #145baa !important; }
.text-bg-success { background: #e9f8f1 !important; color: #0b7148 !important; }
.text-bg-warning { background: #fff4d6 !important; color: #835c00 !important; }
.text-bg-danger { background: #ffedf0 !important; color: #a9132a !important; }
.text-bg-secondary { background: #eef1f5 !important; color: #56667a !important; }

/* Modals */
.modal-backdrop.show {
  opacity: .28;
  backdrop-filter: blur(2px);
}

.modal-content {
  box-shadow: 0 22px 65px rgba(15, 35, 60, .20) !important;
}

.modal-header {
  padding: 18px 21px;
  border-bottom: 1px solid var(--portal-line);
}

.modal-title {
  color: var(--portal-text);
  font-weight: 780;
  letter-spacing: -.02em;
}

.modal-body {
  padding: 21px;
}

.modal-footer {
  padding: 15px 21px;
  border-top: 1px solid var(--portal-line);
  background: #fbfdff;
}

/* Dropdowns */
.dropdown-menu {
  padding: 7px;
  box-shadow: var(--portal-shadow-lg) !important;
}

.dropdown-item {
  border-radius: 7px;
  padding: .55rem .7rem;
  color: #34465d;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background: #eef5ff;
  color: #145baa;
}

/* Calendar */
.portal-calendar-toolbar {
  gap: .55rem;
}

.portal-calendar-grid {
  border-color: var(--portal-line);
  border-radius: 13px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}

.portal-calendar-day-name {
  background: #f5f8fc;
  color: #607188;
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.portal-calendar-day-name,
.portal-calendar-cell {
  border-color: #e2e8f0;
}

.portal-calendar-cell {
  background: #fff;
  transition: background-color .14s ease;
}

.portal-calendar-cell:hover {
  background: #f8fbff;
}

.portal-calendar-cell.is-today,
.portal-calendar-cell.today {
  background: #f0f6ff;
  box-shadow: inset 0 0 0 2px rgba(17,103,216,.17);
}

.portal-calendar-event,
.calendar-event {
  border-radius: 7px !important;
  border: 1px solid #b9d4f4 !important;
  background: #edf5ff !important;
  color: #174f8f !important;
  box-shadow: none !important;
}

/* Todo / utility cards */
.portal-todo-item {
  border-color: var(--portal-line);
  border-radius: 11px;
  padding: 13px 15px;
  box-shadow: none;
}

.portal-todo-item:hover {
  background: #fbfdff;
  border-color: #c6d4e5;
}

.portal-empty-state {
  border-color: #cbd8e8;
  border-radius: 12px;
  background: #f8fbff;
}

/* Loading */
.portal-loading-overlay {
  background: rgba(243,246,251,.78);
  backdrop-filter: blur(7px);
}

.portal-loading-card {
  border: 1px solid var(--portal-line);
  border-radius: 14px;
  box-shadow: var(--portal-shadow-lg);
}

/* Login */
.portal-login-page {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 75% 15%, rgba(64,141,236,.22), transparent 34%),
    linear-gradient(145deg, #071a35 0%, #0b2b59 68%, #0d376f 100%) !important;
}

.portal-login-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 36px 36px;
}

.portal-login-box {
  width: min(440px, calc(100vw - 2rem));
  position: relative;
  z-index: 1;
}

.portal-login-box .card {
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 18px !important;
  box-shadow: 0 26px 80px rgba(3,16,35,.35) !important;
}

.login-logo-preview {
  max-width: 205px;
  max-height: 76px;
}

.login-card-body h1 {
  color: var(--portal-text);
  font-weight: 800 !important;
  letter-spacing: -.03em;
}

.portal-login-note {
  background: #f5f8fc;
  border: 1px solid #e0e7f0;
  color: #5b6b80;
  border-radius: 10px;
}

/* Placeholder modules */
.portal-placeholder-page {
  background: var(--portal-canvas) !important;
}

.portal-placeholder-page .card {
  max-width: 660px;
  margin-inline: auto;
}

.portal-placeholder-page .placeholder-logo {
  max-width: 205px;
  background: linear-gradient(180deg, var(--portal-navy), var(--portal-navy-2));
  padding: 15px 20px;
  border-radius: 12px;
}

/* Responsive polish */
@media (max-width: 991.98px) {
  .app-header.navbar {
    min-height: 64px;
    padding-inline: 10px;
  }
  .portal-search-wrap {
    min-width: 190px;
  }
  .app-content-header {
    padding: 18px 16px 6px;
  }
  .app-content {
    padding: 10px 16px 24px;
  }
}

@media (max-width: 767.98px) {
  .portal-search-wrap {
    min-width: 145px;
  }
  .card-header,
  .card-body,
  .modal-body {
    padding-left: 15px;
    padding-right: 15px;
  }
  .btn {
    min-height: 40px;
  }
}

/* Marketing Performance Report v2 */
.marketing-performance-table thead th[data-marketing-sort] {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: background-color .15s ease, color .15s ease;
}
.marketing-performance-table thead th[data-marketing-sort]:hover {
  background: rgba(17, 103, 216, .06);
  color: #1167d8;
}
.marketing-performance-table thead th.marketing-sort-active {
  color: #1167d8;
  background: rgba(17, 103, 216, .08);
}
.marketing-sort-icon {
  font-size: .72rem;
  opacity: .55;
  margin-left: .25rem;
}
.marketing-sort-active .marketing-sort-icon { opacity: 1; }
#marketingFilterBar { margin-bottom: 0; }

/* ========================================================================== 
   Portal UI refinement v6 — 2026-08-20
   Match MatterIQ's actual typography, harden clock button labels, and make
   desktop modals use the available viewport before introducing scrollbars.
   ========================================================================== */

/* MatterIQ v817 declares this exact stack and does not separately load Inter. */
html,
body,
button,
input,
select,
textarea,
.form-control,
.form-select,
.btn,
.dropdown-menu,
.modal,
.table {
  font-family: Inter, "Segoe UI", Arial, sans-serif !important;
}

/* Clock control: never allow Bootstrap/AdminLTE responsive rules to collapse
   the label or paint it the same color as its background. */
#clockToggleButton.portal-clock-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .35rem;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 104px !important;
  max-width: none !important;
  white-space: nowrap !important;
  overflow: visible !important;
  color: #145baa !important;
  border-color: #8db5e9 !important;
  background: #f8fbff !important;
}

#clockToggleButton.portal-clock-button > i,
#clockToggleButton.portal-clock-button > #clockToggleText {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  color: inherit !important;
  line-height: 1.2;
}

#clockToggleButton.portal-clock-button.is-clocked-in {
  color: #fff !important;
  background: #198754 !important;
  border-color: #198754 !important;
}

#clockToggleButton.portal-clock-button:hover,
#clockToggleButton.portal-clock-button:focus {
  color: #0e59bc !important;
  background: #eef5ff !important;
  border-color: #6fa4e4 !important;
}

#clockToggleButton.portal-clock-button.is-clocked-in:hover,
#clockToggleButton.portal-clock-button.is-clocked-in:focus {
  color: #fff !important;
  background: #157347 !important;
  border-color: #146c43 !important;
}

/* Desktop modal sizing. Large working/report modals should feel like Portal
   workspaces rather than small dialog boxes floating in a large browser. */
@media (min-width: 992px) {
  .modal-dialog.modal-xl:not(#bookAppointmentDialog) {
    width: calc(100vw - 3rem);
    max-width: 1500px;
    margin: 1.5rem auto;
  }

  .modal-dialog.modal-lg {
    width: min(calc(100vw - 4rem), 1120px);
    max-width: 1120px;
  }

  .modal-dialog.modal-xl.modal-dialog-scrollable,
  .modal-dialog.modal-lg.modal-dialog-scrollable {
    height: calc(100vh - 3rem);
    max-height: calc(100vh - 3rem);
  }

  .modal-dialog.modal-xl.modal-dialog-scrollable .modal-content,
  .modal-dialog.modal-lg.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    min-height: min(680px, calc(100vh - 3rem));
  }

  .modal-dialog.modal-xl.modal-dialog-scrollable .modal-body,
  .modal-dialog.modal-lg.modal-dialog-scrollable .modal-body {
    min-height: 0;
    flex: 1 1 auto;
  }

  /* Give the principal data/work modals almost the full viewport height. */
  #leadsModal .modal-dialog,
  #mattersModal .modal-dialog,
  #marketingReportModal .modal-dialog,
  #payrollOverviewModal .modal-dialog,
  #hoursDealsReportModal .modal-dialog,
  #myTimeCardModal .modal-dialog,
  #myScheduleModal .modal-dialog,
  #staffSchedulesModal .modal-dialog,
  #transferBoardModal .modal-dialog,
  #adminPunchEditorModal .modal-dialog {
    height: calc(100vh - 2rem);
    max-height: calc(100vh - 2rem);
    margin-top: 1rem;
    margin-bottom: 1rem;
  }

  #leadsModal .modal-content,
  #mattersModal .modal-content,
  #marketingReportModal .modal-content,
  #payrollOverviewModal .modal-content,
  #hoursDealsReportModal .modal-content,
  #myTimeCardModal .modal-content,
  #myScheduleModal .modal-content,
  #staffSchedulesModal .modal-content,
  #transferBoardModal .modal-content,
  #adminPunchEditorModal .modal-content {
    height: 100%;
    max-height: 100%;
  }
}

/* On narrow desktop/tablet widths preserve the words before sacrificing the
   clock control; search gets less width first. */
@media (max-width: 900px) {
  .portal-search-wrap {
    min-width: 120px;
  }
  #clockToggleButton.portal-clock-button {
    min-width: 98px !important;
    padding-left: .62rem;
    padding-right: .62rem;
  }
}

/* Billing keeps three reserved metric cards without labels, values, or actions. */
.portal-billing-user .small-box:has(#metricLeads),
.portal-billing-user .small-box:has(#metricClosingRatio),
.portal-billing-user .small-box:has(#metricMyTransfers) { pointer-events: none; cursor: default !important; min-height: 130px; }
.portal-billing-user .small-box:has(#metricLeads) > *,
.portal-billing-user .small-box:has(#metricClosingRatio) > *,
.portal-billing-user .small-box:has(#metricMyTransfers) > * { visibility: hidden; }
.portal-billing-user #myTransfersCard { display: block !important; }
.portal-billing-user .col-lg-6:has(#clientConciergeProductionTableBody) { display: none !important; }
.portal-billing-user .col-lg-6:has(#salesRepTableBody) { width: 100%; }
.portal-billing-user #salesRepTableBody td:nth-child(2),
.portal-billing-user #salesRepTableBody td:last-child,
.portal-billing-user table:has(#salesRepTableBody) th:nth-child(2),
.portal-billing-user table:has(#salesRepTableBody) th:last-child { display: none; }

/* Keep the shared operation layer above dialogs and prevent page scrolling. */
.portal-loading-overlay { z-index: 10000; -webkit-backdrop-filter: blur(7px); cursor: wait; }
body.portal-operation-busy { overflow: hidden !important; }

/* H&D payroll workspace */
#payrollOverviewModal .payroll-dialog{max-width:1480px;width:calc(100% - 48px)}
#payrollOverviewModal .payroll-module{border:0;border-radius:22px;overflow:hidden;background:#f1f5fa;box-shadow:0 30px 100px #06162c55}
#payrollOverviewModal .payroll-hero{background:radial-gradient(ellipse at 90% 0%,#256c7b80,transparent 55%),linear-gradient(120deg,#0a1930,#142f50);padding:32px 36px;border:0;color:white;align-items:flex-start}
.payroll-eyebrow{font-size:10px;font-weight:800;letter-spacing:2px;color:#7791aa}
.payroll-hero .payroll-eyebrow{color:#8acbd0}.payroll-hero h2{font-size:36px;font-weight:800;letter-spacing:-1.3px;margin:10px 0}.payroll-hero p{color:#aec0d5;margin:0;font-size:14px}.payroll-hero-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#58e0b9;margin-left:10px}
#payrollOverviewModal .modal-body{padding:28px 32px}.payroll-toolbar{display:flex;gap:16px;align-items:end;flex-wrap:wrap}.payroll-toolbar label{display:block;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:7px;color:#526580}.payroll-toolbar .form-control,.payroll-toolbar .form-select{min-height:44px;border-radius:10px;background:white;border-color:#d6e0eb}.payroll-actions{margin-left:auto;display:flex;gap:8px}.payroll-actions .btn{padding:11px 18px;border-radius:10px;font-weight:700}.payroll-actions .btn-primary{background:#163e78;box-shadow:0 5px 12px #163e7820}.payroll-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.payroll-kpi{position:relative;display:flex;flex-direction:column;padding:22px;background:white;border:1px solid #e0e7f0;border-radius:15px;box-shadow:0 5px 20px #172d4610}.payroll-kpi>i{position:absolute;right:18px;top:20px;color:#597e9b;font-size:19px}.payroll-kpi>span{font-size:11px;letter-spacing:1px;font-weight:800;text-transform:uppercase;color:#53677c;padding-right:22px}.payroll-kpi strong{font-size:28px;letter-spacing:-1px;margin:15px 0 7px;color:#132e50;font-variant-numeric:tabular-nums}.payroll-kpi small{font-size:11px;color:#697c90}.payroll-kpi:first-child{background:#112c4b;border-color:#112c4b}.payroll-kpi:first-child strong{color:white}.payroll-kpi:first-child span,.payroll-kpi:first-child small,.payroll-kpi:first-child i{color:#abc9dc}.payroll-progress-track{height:4px;background:#dce6ee;border-radius:3px;margin:20px 0 26px;overflow:hidden}.payroll-progress-track>div{height:100%;background:#20b58a;transition:width .3s}.payroll-ledger{background:white;border:1px solid #dfe7f0;border-radius:16px;overflow:hidden}.payroll-ledger-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px}.payroll-ledger h3{font-size:21px;font-weight:800;letter-spacing:-.5px;margin:6px 0 0}.payroll-ledger-header>span{font-size:12px;background:#f0f4fa;padding:9px 12px;border-radius:8px;color:#405672}#payrollDetailTable{font-size:13px;font-variant-numeric:tabular-nums}#payrollDetailTable th{background:#f6f8fc;color:#596d84;font-size:10px;letter-spacing:.7px;text-transform:uppercase;padding:15px;white-space:nowrap}#payrollDetailTable td{padding:18px 15px;border-color:#edf1f6}#payrollDetailTable th:nth-child(n+3),#payrollDetailTable td:nth-child(n+3){text-align:right}#payrollDetailTable tfoot td{background:#edf3fa;color:#153754;font-weight:800}.payroll-person{display:flex;gap:12px;align-items:center;white-space:nowrap}.payroll-person strong{font-size:13px}.payroll-person small{display:block;font-size:10px;color:#77879b;margin-top:4px}.payroll-avatar{display:grid;place-items:center;width:36px;height:36px;background:#eaf0f9;border-radius:12px;color:#2b5684;font-size:11px;font-weight:800}.payroll-status{display:inline-block;padding:6px 10px;border-radius:7px;font-size:10px;font-weight:800}.payroll-status.approved{background:#e4f6ee;color:#168055}.payroll-status.pending{background:#fff3da;color:#9c6a12}.payroll-status.unavailable{background:#fce7e7;color:#a33333}.payroll-approved-date{display:block;font-size:10px;color:#7a8999;margin-top:5px}.payroll-bonus{color:#16805e;font-weight:700}.payroll-report-button{white-space:nowrap;background:#edf3fa;color:#234d7a;font-weight:700;font-size:11px}.payroll-report-button:hover{background:#163e78;color:white}.payroll-footnote{font-size:11px;color:#667c92;line-height:1.7;margin:18px 2px 0}
@media(max-width:1000px){.payroll-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-actions{margin-left:0}}@media(max-width:576px){#payrollOverviewModal .payroll-dialog{width:calc(100% - 16px);margin:8px}#payrollOverviewModal .payroll-hero{padding:24px}#payrollOverviewModal .modal-body{padding:16px}.payroll-hero h2{font-size:29px}.payroll-kpis{gap:10px}.payroll-kpi{padding:16px}.payroll-kpi strong{font-size:23px}.payroll-ledger-header{padding:16px;flex-wrap:wrap}}

/* Payroll detail refinements */
.payroll-kpis{grid-template-columns:repeat(5,minmax(0,1fr))}
#payrollDetailTable .payroll-bonus{font-weight:400}
#payrollDetailTable .payroll-total-comp{font-weight:800;color:#173e68}
#payrollDetailTable thead th{height:62px;vertical-align:middle;line-height:1.5}
#payrollDetailTable th span{display:block}
.payroll-period-picker{border:0;border-radius:18px;overflow:hidden;box-shadow:0 25px 70px #102f4930}
.payroll-period-picker .modal-header{padding:24px;background:#edf3fa}
.payroll-period-picker .modal-body{padding:24px}
@media(max-width:1100px){.payroll-kpis{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.payroll-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Unified H&D-inspired modal design. Does not change modal events or access rules. */
.modal .modal-content{border:0;border-radius:22px;background:#f1f5fa;box-shadow:0 30px 100px #06162c55;overflow:hidden}
.modal .modal-header{background:radial-gradient(ellipse at 90% 0%,#256c7b80,transparent 55%),linear-gradient(120deg,#0a1930,#142f50);color:#fff;border:0;padding:25px 28px;gap:18px;align-items:flex-start}
.modal .modal-header .modal-title,.modal .modal-header h2,.modal .modal-header h3,.modal .modal-header h4,.modal .modal-header h5{color:#fff;font-weight:800;letter-spacing:-.5px}
.modal .modal-header p,.modal .modal-header .text-secondary,.modal .modal-header .payroll-eyebrow{color:#bfd2e4!important}
.modal .modal-header .btn-close{filter:brightness(0) invert(1);opacity:.85;flex-shrink:0}
.modal .modal-body{padding:24px}.modal .modal-footer{background:#fff;border-top:1px solid #dde5ee;padding:16px 24px}
.modal .btn{border-radius:10px;font-weight:600}.modal .btn-primary{background:#163e78;border-color:#163e78;box-shadow:0 5px 12px #163e7820}
.modal .form-control,.modal .form-select{border-radius:10px;border-color:#d6e0eb;min-height:40px}.modal .form-control:focus,.modal .form-select:focus{border-color:#388b9d;box-shadow:0 0 0 3px #388b9d25}
.modal .card{border:1px solid #e0e7f0;border-radius:15px;box-shadow:0 5px 20px #172d460a}.modal .table thead th{background:#eaf0f7;color:#405974;font-size:12px;vertical-align:middle}.modal .table td{border-color:#e5ecf4}.modal .alert{border-radius:12px}
#revenueModal .modal-content{border-radius:0}#revenueModal .modal-header{padding:28px max(24px,calc((100vw - 1440px)/2))}#revenueTitle{font-size:36px;margin:8px 0}.revenue-dot{display:inline-block;background:#58e0b9;width:9px;height:9px;border-radius:50%;margin-left:12px}.revenue-eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:#4d7987}.modal-header .revenue-eyebrow{color:#8acbd0}.revenue-workspace{max-width:1440px;margin:auto}.revenue-toolbar{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.revenue-toolbar label{font-size:12px;font-weight:700;color:#526580}.revenue-toolbar label:first-child{flex:1;min-width:190px}.revenue-toolbar input,.revenue-toolbar select{margin-top:7px}.revenue-toolbar .btn{min-height:40px}.revenue-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.revenue-kpi,.revenue-panel{background:#fff;border:1px solid #dee7f0;border-radius:17px;padding:24px;box-shadow:0 6px 22px #172d4609}.revenue-kpi span{font-size:12px;color:#526580}.revenue-kpi strong{display:block;font-size:30px;letter-spacing:-1px;margin:10px 0;color:#142f50}.revenue-kpi small{color:#64768a}.revenue-kpi:first-child{background:#112c4b}.revenue-kpi:first-child strong{color:white}.revenue-kpi:first-child span,.revenue-kpi:first-child small{color:#c0d4e5}.revenue-notice{padding:15px 18px;border-left:4px solid #bd9037;background:#fff7e7;border-radius:8px;margin:20px 0;color:#70521c}.revenue-columns{display:grid;grid-template-columns:1.3fr 1fr;gap:20px}.revenue-panel h3{font-size:23px;font-weight:800;color:#183652;margin:8px 0}.revenue-panel p{font-size:13px;color:#65788b}.rev-stage{display:grid;grid-template-columns:1fr auto;gap:8px;width:100%;border:0;border-bottom:1px solid #edf1f6;background:transparent;padding:12px 0;text-align:left;color:#284861}.rev-stage:hover,.rev-stage[aria-pressed=true]{background:#eaf4f6}.rev-track{height:7px;background:#e8eef5;border-radius:5px;grid-column:1/-1;overflow:hidden}.rev-track i{display:block;height:100%;background:#268c91;border-radius:5px}.rev-mix-row{padding:16px 0;border-bottom:1px solid #edf1f6}.rev-mix-row b{float:right}.rev-mix-row small{display:block;color:#6a7b8e;margin:6px 0}.revenue-timeline{display:grid;grid-template-columns:repeat(6,minmax(95px,1fr));gap:14px;overflow-x:auto;padding-top:15px}.rev-month{display:flex;flex-direction:column;justify-content:end;gap:8px;min-height:190px;font-size:12px;color:#566d82}.rev-month-bar{background:linear-gradient(#40b6ac,#1b607d);border-radius:7px 7px 0 0;min-height:2px}.rev-month strong{color:#173851;font-size:15px}.revenue-table{font-size:13px;min-width:950px}.revenue-table td{padding:16px 10px}.revenue-table small{display:block;color:#728197;margin-top:4px}.rev-pill{display:inline-block;background:#eaf1f7;color:#274a69;border-radius:7px;padding:6px 9px;font-size:12px}.rev-pill.risk{background:#fde9e7;color:#9a332f}.revenue-panel summary{cursor:pointer;font-weight:700;color:#284861}
@media(max-width:800px){.revenue-kpis{grid-template-columns:repeat(2,1fr)}.revenue-columns{grid-template-columns:1fr}.revenue-kpi,.revenue-panel{padding:18px}.modal .modal-header{padding:20px}.modal .modal-body{padding:16px}#revenueTitle{font-size:28px}}@media(prefers-reduced-motion:reduce){.modal.fade .modal-dialog{transition:none}}

.revenue-outcomes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.rev-outcome{border:1px solid #d6e3ec;border-radius:12px;padding:15px 18px;text-align:left;background:#e9f1f7;color:#2a4c66}.rev-outcome strong{display:block;font-size:25px;margin-top:6px}.rev-outcome[aria-pressed=true]{background:#173d62;color:#fff}.rev-outcome:hover{border-color:#348b99}.rev-outcome span{font-size:13px;font-weight:700}@media(max-width:600px){.revenue-outcomes{grid-template-columns:repeat(2,1fr)}}

/* Payment categories open their complete account list in the existing register. */
.rev-mix-button{display:block;width:100%;text-align:left;background:transparent;border:0;border-bottom:1px solid #edf1f6;color:#284861;cursor:pointer;border-radius:9px;padding:15px 12px}.rev-mix-button:hover{background:#f0f7fa}.rev-mix-button[aria-pressed=true]{background:#e6f3f3;box-shadow:inset 3px 0 #268c91}.rev-mix-button:focus-visible{outline:3px solid #268c91;outline-offset:2px}.rev-mix-button .rev-track{display:block}.rev-mix-cta{display:block;margin-top:10px;font-size:12px;font-weight:700;color:#256781}.rev-register-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}#revRegister{scroll-margin-top:20px}#revRegisterTitle:focus{outline:2px solid #268c91;outline-offset:5px}#revRegisterFilters:empty{display:none}