body {
  background-color: #F6F6F6;
}

/* Admin login page */
.admin-login-headline {
  margin-top: 40px;
  margin-bottom: 24px;
  color: var(--dark-grey, #374151);
  font-size: 28px;
  font-weight: 700;
}

a {
    cursor: pointer;
    text-decoration: none;
}

.request-date-table-cell {
    width: 15%;
}

.request-year-table-cell {
    width: 15%;
}

.request-appt-table-cell {
    width: 45%;
}

.request-actions-table-cell {
    width: 20%;
}

.well.available {
    background-image: none;
    background-color: white;
    cursor: pointer;
    cursor: hand;
}

.well.filler {
    background-image: linear-gradient(to bottom, #ffac00 0%, #ff8c00 100%);	
}

.calendar-hours {
    width: 50px;
}

.calendar-hour {
    height: 80px;
    border-bottom: 1px solid #CCC;
}

.auditor-assignment-appointment {
    position: absolute;
    width: 99%;

}

.allocation-appointment-day {
    position: relative;
}

/* Request Availability Schedule Grid - dates across top, 15-min time slots 8am-7pm */
.request-availability-schedule-grid {
    margin-top: 20px;
    overflow-x: auto;
}

/* Row 1: Date headers - horizontal layout */
.request-availability-schedule-grid .master-col,
.request-availability-schedule-grid .time-col {
    float: left;
}

.request-availability-schedule-grid .master-col {
    width: 150px;
    min-width: 150px;
}

.request-availability-schedule-grid .time-col {
    width: 150px;
    min-width: 150px;
}

.request-availability-schedule-grid .date-slot {
    height: 20px;
    min-height: 20px;
    line-height: 20px;
    text-align: center;
    font-weight: bold;
    border: 1px solid #e5e7eb;
    border-bottom: none;
}

/* Spacer in date row - aligns with hour column */
.request-availability-schedule-grid .master-slot-spacer {
    height: 20px;
    min-height: 20px;
    border: 1px solid #e5e7eb;
    border-bottom: none;
}

/* Row 2 & 3: Hour labels - each spans 4 slots (1 hour = 80px) */
.request-availability-schedule-grid .master-slot {
    height: 80px;
    min-height: 80px;
    line-height: 80px;
    font-size: 12px;
    border: 1px solid #e5e7eb;
    border-top: none;
    padding: 0 4px;
}

/* Row 3: Time slot grid - each slot 20px (15 min), clickable */
.request-availability-schedule-grid .outer-slot {
    float: left;
    display: flex;
    flex-wrap: nowrap;
}

.request-availability-schedule-grid .outer-slot .time-col {
    float: none;
    flex: 0 0 150px;
    width: 150px;
    position: relative;
}

.request-availability-schedule-grid .time-slot {
    height: 20px;
    min-height: 20px;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
}

.request-availability-schedule-grid .time-slot:hover {
    background-color: #e0f2fe;
}

.request-availability-schedule-grid .assigned-slot {
    width: 150px;
    min-width: 150px;
    background-color: #dcdcdc;
    padding: 0;
    margin: 0;
    box-sizing: content-box;
    cursor: move;
    font-size: 11px;
    overflow: hidden;
    z-index:10;
}

.request-availability-schedule-grid br.clear {
    clear: both;
}

.auditor-assignments-table th:not(.calendar-hours-header) {
    min-width: 300px;
}

.auditor-assignments-table td:not(.sticky-time-column) {
    min-width: 300px;
}

.calendar-hours-header,
.sticky-time-column {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
}

/* Sticky time column for horizontal scroll */
.sticky-time-column {
    position: sticky;
    left: 0;
    z-index: 5;
    background-color: #fff;
    box-shadow: 2px 0 4px rgba(0,0,0,0.05);
}

/* Auditor Assignments Scrolling Improvements */
.auditor-assignments-scroll-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    max-height: calc(100vh - 220px);
    border: 1px solid #ddd;
    position: relative;
    cursor: grab;
    cursor: -webkit-grab;
}

.auditor-assignments-scroll-wrapper {
    min-width: 100%;
    display: inline-block;
}

.auditor-assignments-table {
    margin-bottom: 0;
    table-layout: auto;
}

.auditor-assignments-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
    background-color: #fff;
}

.auditor-assignments-table thead th {
    background-color: #ffffff;
    color: #3F3F46;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    padding: 8px;
}

.auditor-assignments-table tbody td {
    padding: 8px;
    border-bottom: 1px solid #ddd;
}

.auditor-assignments-scroll-container.is-dragging {
    cursor: grabbing;
    cursor: -webkit-grabbing;
}


/* Auditor Assignments page: full-width working area (break out of layout container) */
.auditor-assignments-page {
    max-width: none;
    width: 98vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

.sticky-head-table {
width:100% !important;
}
.sticky-head-table thead {
position:sticky !important;
position: -webkit-sticky;
top:0 !important;
z-index:999;
background:#ffffff;
}

.sticky-head-table thead th {
    color: #3F3F46;
    font-weight: bold;
}

.modern-page-title.auditor-assignments-title {
  font-size: 28px;
  margin-bottom: 8px;
}

.auditor-assignments-date {
  font-size: 20px;
  font-weight: 600;
  color: var(--medium-grey, #6b7280);
  margin-top: 4px;
}

.allocation-header-provider {
  font-weight: 600;
}

.allocation-header-type {
  font-size: 0.9em;
  color: var(--medium-grey, #6b7280);
  margin-top: 2px;
}
.email-list-generator {
    margin-top: 20px;
}

.email-list-generator textarea {
    width: 100%;
    min-height: 200px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 12px;
}

.email-list-generator .btn {
  margin-top: 10px;
}

/* Configure > Appointments: more space between slot rows */
.slot-list .slot-row {
  margin-bottom: 16px;
}

.slot-list .slot-row .btn.delete-slot {
  margin-left: 8px;
}

/* Configure > Appointment Types: more space between question rows */
.appt-question-list .question-row {
  margin-bottom: 16px;
}

.appt-question-list .question-row .btn.delete-question {
  margin-left: 8px;
}

/* Sortable table headers */
.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
}

.sortable:hover {
  background-color: #f5f5f5;
}

.sort-indicator {
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  color: #337ab7;
  font-size: 0.8em;
  width: 12px;
  text-align: center;
}

.sort-indicator.sort-asc::before {
  content: "▲";
}

.sort-indicator.sort-desc::before {
  content: "▼";
}

/* Filter input styling */
#auditorFilterInput,
#waterProviderFilterInput {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 8px 12px;
}

#auditorFilterInput:focus,
#waterProviderFilterInput:focus,
#archivedAuditorFilterInput:focus,
#archivedWaterProviderFilterInput:focus {
  border-color: #66afe9;
  outline: 0;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
}

/* ============================================
   New Design System - Color Scheme & Styles
   ============================================ */

/* Color Variables */
:root {
  --primary-blue: #0072c3; /* Blue for header */
  --primary-blue-light: #005b9d; /* Solid blue for buttons and active states */
  --light-blue: #e0f2fe; /* Light blue for table row hover */
  --dark-grey: #374151; /* Dark grey for text and table headers */
  --medium-grey: #6b7280; /* Medium grey for secondary text */
  --light-grey: #e5e7eb; /* Light grey for borders */
  --white: #ffffff;
  --text-white: #ffffff;
  --text-light-grey: #9ca3af; /* Light grey text */
}

/* Header/Navigation Bar Styling */
header.navbar.navbar-default {
  background-color: var(--primary-blue);
  border: none;
  border-radius: 0;
  margin-bottom: 0;
  min-height: 64px;
  display: flex;
  align-items: center;
}

header.navbar.navbar-default > .container {
  display: flex;
  align-items: center;
  min-height: 64px;
  justify-content: space-between;
}

header.navbar .navbar-header {
  display: flex;
  align-items: center;
  height: 64px;
  float: none;
}

header.navbar .navbar-brand {
  color: var(--text-white);
  font-size: 20px;
  font-weight: 600;
  padding: 15px 15px;
  display: flex;
  align-items: center;
  height: 64px;
  float: none;
}

header.navbar .navbar-brand .navbar-logo {
  height: 40px;
  width: auto;
  max-width: 200px;
}

header.navbar .navbar-brand .brand-resource {
  color: var(--text-white);
  display: none;
}

header.navbar .navbar-brand .brand-central {
  color: var(--text-light-grey);
  display: none;
}

header.navbar nav {
  display: flex;
  align-items: center;
  height: 64px;
}

header.navbar .nav {
  display: flex;
  align-items: center;
  margin: 0;
}

header.navbar .nav > li {
  display: flex;
  align-items: center;
}

header.navbar .nav > li > a {
  color: var(--text-white);
  padding: 4px 8px 4px 12px;
  font-weight: 400;
  border-radius: 99px;
  transition: background-color 0.2s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  height: 30px;
}

header.navbar .nav > li > a:hover,
header.navbar .nav > li > a:focus {
  background-color: rgba(0, 89, 153, 0.7);
  color: var(--text-white);
  border-radius: 99px;
}

header.navbar .nav > li.active > a,
header.navbar .nav > li.active > a:hover,
header.navbar .nav > li.active > a:focus {
  background-color: #005999;
  color: var(--text-white);
  border-radius: 99px;
}

header.navbar .nav > li.open > a,
header.navbar .nav > li.open > a:hover,
header.navbar .nav > li.open > a:focus {
  background-color: rgba(0, 89, 153, 0.7);
  color: var(--text-white);
  border-radius: 99px;
}

header.navbar .nav > li.open.active > a,
header.navbar .nav > li.open.active > a:hover,
header.navbar .nav > li.open.active > a:focus {
  background-color: #005999;
  color: var(--text-white);
  border-radius: 99px;
}

header.navbar .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--light-grey);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  padding: 8px 0;
}

header.navbar .dropdown-menu > li > a {
  color: #09090B;
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

header.navbar .dropdown-menu > li > a:hover {
  background-color: #F4F4F5;
  color: #0072C3;
}

header.navbar .navbar-text.navbar-right {
  color: var(--text-white);
  margin: 8px 0 8px auto;
  padding: 10px 15px;
  background-color: var(--primary-blue-light);
  border-radius: 6px;
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  height: auto;
}

header.navbar .navbar-text.navbar-right > span:first-child {
  display: block;
  margin-bottom: 4px;
}

header.navbar .navbar-text.navbar-right .navbar-user-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  white-space: nowrap;
}

header.navbar .navbar-text.navbar-right a {
  color: var(--text-white);
  text-decoration: none;
  font-size: 13px;
}

header.navbar .navbar-text.navbar-right a:hover {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
}

/* ============================================
   Button Styles
   ============================================ */

/* Primary Buttons */
.btn-primary,
button.btn-primary,
input[type="submit"].btn-primary,
a.btn-primary,
button[type="submit"],
input[type="submit"],
.btn,
.call-list-action-button-primary,
.property-owners-search-button,
.modern-button-primary {
  background: #0072C3;
  border-color: #0072C3;
  color: var(--text-white);
  border-radius: 16px;
  padding: 16px 20px;
  border-width: 1px;
  font-weight: 500;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.btn-primary:hover,
button.btn-primary:hover,
input[type="submit"].btn-primary:hover,
a.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover,
.btn:hover,
.call-list-action-button-primary:hover,
.property-owners-search-button:hover,
.modern-button-primary:hover {
  background: #005b9d;
  border-color: #005b9d;
  color: var(--text-white);
  text-decoration: none;
}

.btn-primary:active,
button.btn-primary:active,
input[type="submit"].btn-primary:active,
a.btn-primary:active,
button[type="submit"]:active,
input[type="submit"]:active,
.btn:active,
.btn-primary.active,
.btn.active,
.call-list-action-button-primary:active,
.property-owners-search-button:active,
.modern-button-primary:active {
  background: #005b9d;
  border-color: #005b9d;
  color: var(--text-white);
}

/* Fix vertical alignment for input[type="submit"] - replaced elements don't support
   flexbox the same way as button elements, so text can appear at bottom */
input[type="submit"].modern-button-primary,
input[type="submit"].modern-button-secondary,
input[type="submit"].btn-primary,
input[type="submit"].btn-secondary,
input[type="submit"] {
  line-height: 1;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Secondary Buttons - standard: white background with blue outline */
.btn-secondary,
.btn-default:not(.btn-primary):not(.btn-danger),
button.btn-secondary,
a.btn-secondary,
.call-list-email-button,
.call-list-action-button-secondary,
.property-owners-register-button,
.modern-button-secondary {
  background: #FFFFFF;
  border: 1px solid var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  border-radius: 16px;
  padding: 16px 20px;
  border-width: 1px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.btn-secondary:hover,
.btn-default:not(.btn-primary):not(.btn-danger):hover,
button.btn-secondary:hover,
a.btn-secondary:hover,
.call-list-email-button:hover,
.call-list-action-button-secondary:hover,
.property-owners-register-button:hover,
.modern-button-secondary:hover {
  background: #F4F4F5;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  text-decoration: none;
}

.btn-secondary:active,
.btn-default:not(.btn-primary):not(.btn-danger):active,
button.btn-secondary:active,
a.btn-secondary:active,
.btn-secondary.active,
.call-list-email-button:active,
.call-list-action-button-secondary:active,
.property-owners-register-button:active,
.modern-button-secondary:active {
  background: #E4E4E7;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

/* Delete/Danger Buttons */
.btn-danger,
.btn-default.btn-danger,
button.btn-danger,
a.btn-danger {
  background: #dc3545;
  border-color: #dc3545;
  color: var(--text-white);
  border-radius: 16px;
  padding: 16px 20px;
  border-width: 1px;
  font-weight: 500;
  transition: background-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
}

.btn-danger:hover,
.btn-default.btn-danger:hover,
button.btn-danger:hover,
a.btn-danger:hover {
  background: #c82333;
  border-color: #bd2130;
  color: var(--text-white);
  text-decoration: none;
}

.btn-danger:active,
.btn-default.btn-danger:active,
button.btn-danger:active,
a.btn-danger:active,
.btn-danger.active {
  background: #c82333;
  border-color: #bd2130;
  color: var(--text-white);
}

/* ============================================
   Select/Dropdown Styles
   ============================================ */

select.form-control,
.form-control[type="select"],
select {
  border-radius: 12px;
  border: 1px solid var(--light-grey);
  padding: 8px 20px;
  background-color: #ffffff;
  color: #09090B;
  font-size: 14px;
  transition: background-color 0.2s ease, color 0.2s ease;
  min-height: 36px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%2309090B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

select.form-control:focus,
.form-control[type="select"]:focus,
select:focus {
  border-color: var(--light-grey);
  outline: 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

select.form-control:hover,
select:hover {
  background-color: #F4F4F5;
  color: #0072C3;
}

/* ============================================
   Pagination Styles
   ============================================ */

.pagination {
  display: flex;
  gap: 8px;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination > li {
  display: inline-block;
}

.pagination > li > a,
.pagination > li > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--base-input, #E4E4E7);
  background: var(--base-background, #FFFFFF);
  color: var(--dark-grey);
  text-decoration: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
  background: #F4F4F5;
  border-color: #E4E4E7;
  color: var(--dark-grey);
}

.pagination > li.active > a,
.pagination > li.active > span,
.pagination > li.active > a:hover,
.pagination > li.active > span:hover {
  background: linear-gradient(0deg, rgba(0, 114, 195, 0.1), rgba(0, 114, 195, 0.1)),
              linear-gradient(0deg, #FFFFFF, #FFFFFF);
  border: 1px solid #0072C3;
  color: var(--dark-grey);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.pagination > li.disabled > a,
.pagination > li.disabled > span {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Previous and Next buttons styled as secondary buttons */
.pagination > li:first-child > a,
.pagination > li:first-child > span {
  width: auto;
  min-width: 84px;
  padding: 16px 16px;
  border-radius: 16px;
  white-space: nowrap;
}

.pagination > li:last-child > a,
.pagination > li:last-child > span {
  width: auto;
  min-width: 84px;
  padding: 16px 16px;
  border-radius: 16px;
  white-space: nowrap;
}

/* Contracts Page Styling */
.contracts-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 20px;
  margin-top: 20px;
}

.contract-filter {
  margin-bottom: 25px;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

.contract-filter > div {
  flex: 0 0 auto;
  min-width: 180px;
}

.contract-filter .form-control {
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 8px 12px;
  height: 38px;
  width: 100%;
}

.contract-filter .btn-info.call-list-submit {
  background-color: #0072C3;
  border-color: #0072C3;
  color: var(--text-white);
  border-radius: 16px;
  padding: 16px 20px;
  border-width: 1px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
}

.contract-filter .btn-info.call-list-submit:hover {
  background-color: #005b9d;
  border-color: #005b9d;
  color: var(--text-white);
  text-decoration: none;
}

.contracts-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.contracts-results-count {
  color: var(--dark-grey);
  font-size: 16px;
  font-weight: 700;
}

.contracts-generate-csv-global {
  background-color: var(--light-grey);
  border: 1px solid var(--light-grey);
  color: var(--dark-grey);
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  margin-left: 15px;
}

.contracts-generate-csv-global:hover {
  background-color: #f9fafb;
  border-color: var(--medium-grey);
  color: var(--dark-grey);
  text-decoration: none;
}

/* Contracts Table Styling */
.contracts-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #ffffff;
}

.contracts-table thead {
  background-color: #ffffff;
}

.contracts-table thead th {
  color: #3F3F46;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  border: none;
}

.contracts-table tbody tr {
  border-bottom: 1px solid var(--light-grey);
}

.contracts-table tbody tr:hover {
  background-color: var(--light-blue);
}

.contracts-table tbody td {
  padding: 12px 15px;
  color: var(--dark-grey);
  vertical-align: middle;
}

.contracts-table tbody td a {
  color: var(--dark-grey);
  text-decoration: none;
  border: 1px solid var(--primary-blue, #0072C3);
  padding: 16px 16px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
  font-size: 14px;
  font-weight: 500;
  margin-right: 8px;
  background: #FFFFFF;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.contracts-table tbody td a:hover {
  background: #F4F4F5;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  text-decoration: none;
}

/* Property Owners Table - Clickable Rows */
.property-owners-table tbody tr.property-owner-row {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.property-owners-table tbody tr.property-owner-row:hover {
  background-color: var(--light-blue);
}

/* Pagination Styling */
.contracts-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.contracts-pagination a,
.contracts-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--base-input, #E4E4E7);
  background: var(--base-background, #FFFFFF);
  color: var(--dark-grey);
  text-decoration: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  font-weight: 500;
}

.contracts-pagination a:hover {
  background: #F4F4F5;
  border-color: #E4E4E7;
  color: var(--dark-grey);
}

.contracts-pagination .page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--base-input, #E4E4E7);
  background: var(--base-background, #FFFFFF);
  color: var(--dark-grey);
  text-decoration: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
  user-select: none;
}

.contracts-pagination .page-number:hover {
  background: #F4F4F5;
  border-color: #E4E4E7;
  color: var(--dark-grey);
}

.contracts-pagination .page-number.active {
  background: linear-gradient(0deg, rgba(0, 114, 195, 0.1), rgba(0, 114, 195, 0.1)),
              linear-gradient(0deg, #FFFFFF, #FFFFFF);
  border: 1px solid #0072C3;
  color: var(--dark-grey);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
}

.contracts-pagination .page-number.active:hover {
  background: linear-gradient(0deg, rgba(0, 114, 195, 0.1), rgba(0, 114, 195, 0.1)),
              linear-gradient(0deg, #FFFFFF, #FFFFFF);
  border: 1px solid #0072C3;
  color: var(--dark-grey);
}

/* Previous and Next buttons styled as secondary buttons */
.contracts-pagination .pagination-prev,
.contracts-pagination .pagination-next {
  width: auto;
  min-width: 84px;
  padding: 16px 16px;
  border-radius: 16px;
  white-space: nowrap;
}

/* ============================================
   Call List Page Styling
   ============================================ */

.call-list-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 10px;
  margin-top: 20px;
}

.call-list-subtitle {
  font-size: 16px;
  color: var(--medium-grey);
  margin-bottom: 20px;
  margin-top: 0;
}

.call-list-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.call-list-email-selected-form {
  margin: 0;
  display: inline-flex;
}

.call-list-email-selected-form button.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  border-radius: 16px;
  padding: 8px 16px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: auto;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

.call-list-email-selected-form button.btn-secondary:hover {
  background: #F4F4F5;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

.call-list-email-selected-form button.btn-secondary:active {
  background: #E4E4E7;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

.call-list-results-count {
  color: var(--dark-grey);
  font-size: 16px;
  font-weight: 700;
}

/* Old custom button styles removed - now using shared button styles above */

/* ============================================
   Property Owners Page Styling
   ============================================ */

.property-owners-page-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--dark-grey);
  margin-bottom: 20px;
  margin-top: 20px;
}

.property-owners-search-form {
  display: flex;
  gap: 15px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.property-owners-search-input {
  flex: 1;
  min-width: 200px;
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 8px 12px;
  height: 38px;
}

.property-owners-results-count {
  color: var(--dark-grey);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 15px;
}

.property-owners-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #ffffff;
}

.property-owners-table thead {
  background-color: #ffffff;
}

.property-owners-table thead th {
  color: #3F3F46;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  border: none;
}

.property-owners-table tbody tr {
  border-bottom: 1px solid var(--light-grey);
}

.property-owners-table tbody tr:hover {
  background-color: var(--light-blue);
}

.property-owners-table tbody td {
  padding: 12px 15px;
  color: var(--dark-grey);
}

/* Table links now use shared button styles above */

/* ============================================
   Shared Component Classes
   ============================================ */

.modern-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
  background-color: #ffffff;
}

.modern-table thead {
  background-color: #ffffff;
}

.modern-table thead th {
  color: #3F3F46;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  border: none;
}

.modern-table tbody tr {
  border-bottom: 1px solid var(--light-grey);
}

.modern-table tbody tr:hover {
  background-color: var(--light-blue);
}

.modern-table tbody td {
  padding: 12px 15px;
  color: var(--dark-grey);
}

.modern-table-header {
  background-color: #ffffff;
  color: #3F3F46;
  font-weight: bold;
  padding: 12px 15px;
}

/* override table hover */
.auditor-assignments-table tbody tr:hover {
  background-color: #f5f5f5;
}

/* Property Owner Show Page - User Information Section */
.property-owner-info-section {
  background-color: #ffffff;
  padding: 20px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.property-owner-info-section .pull-right .btn {
  margin-left: 8px;
}

.property-owner-info-section .pull-right .btn:first-child {
  margin-left: 0;
}

/* Reschedule/Cancel button - smaller padding */
.btn-reschedule-cancel {
  padding: 6px 12px !important;
  font-size: 13px;
}

/* Synced indicator under appointment */
.synced-indicator {
  font-size: 13px;
  color: var(--medium-grey, #6b7280);
  margin-top: 6px;
  margin-bottom: 4px;
}

/* Contact Count select - ensure visible */
.contact-count-select {
  min-width: 80px;
  color: var(--dark-grey);
  font-weight: 500;
}

/* Property panel heading button spacing */
.panel-heading .pull-right .btn {
  margin-left: 8px;
}

.panel-heading .pull-right .btn:first-child {
  margin-left: 0;
}

/* Property Owner Show Page - Property Details Styling */
.panel-body dl {
  margin-bottom: 0;
}

.panel-body dt {
  color: #3F3F46;
  font-weight: bold;
  padding: 8px 0 4px 0;
  margin-bottom: 4px;
  border: none;
}

.panel-body dd {
  color: var(--dark-grey);
  padding: 4px 0 8px 0;
  margin-bottom: 12px;
  border: none;
}

.panel-body .row:hover {
  background-color: var(--light-blue);
  transition: background-color 0.2s ease;
}

/* Dropdown menu styling for Actions dropdown */
.btn-group .dropdown-menu {
  background-color: #ffffff;
  border: 1px solid var(--light-grey);
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  margin-top: 5px;
  padding: 8px 0;
}

.btn-group .dropdown-menu > li > a,
.btn-group .dropdown-menu > div > li > a {
  color: #09090B;
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
  text-decoration: none;
}

.btn-group .dropdown-menu > li > a:hover,
.btn-group .dropdown-menu > div > li > a:hover {
  background-color: #F4F4F5;
  color: #0072C3;
}

.btn-group .dropdown-menu form {
  margin: 0;
}

.btn-group .dropdown-menu form .btn-link {
  color: #09090B;
  padding: 10px 20px;
  transition: background-color 0.2s ease, color 0.2s ease;
  display: block;
  text-decoration: none;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
}

.btn-group .dropdown-menu form .btn-link:hover {
  background-color: #F4F4F5;
  color: #0072C3;
}

/* Old modern button styles removed - now using shared button styles above */

.modern-form-control {
  border: 1px solid var(--light-grey);
  border-radius: 4px;
  padding: 8px 12px;
  height: 38px;
  font-size: 14px;
  width: 100%;
}

.modern-form-control:focus {
  border-color: var(--primary-blue-light);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 91, 157, 0.1);
}

.modern-form-group {
  margin-bottom: 20px;
}

.modern-results-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.modern-results-count {
  color: var(--dark-grey);
  font-size: 16px;
  font-weight: 700;
}

.modern-filter-form {
  display: flex;
  gap: 15px;
  align-items: flex-end;
  margin-bottom: 25px;
  flex-wrap: wrap;
}

.modern-filter-form > div {
  flex: 0 0 auto;
  min-width: 180px;
}

footer.bs-footer {
  width: 400px;
  height: 48px;
  margin: 40px 40px 40px auto;
  padding: 8px 16px;
  border-top: none;
  border-radius: 3px;
  background: #EBEBEB;
  border: 1px solid var(--base-border, #E4E4E7);
  color: #303236;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 16px;
  box-sizing: border-box;
}

footer.bs-footer > p {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* ============================================
   Call List Grid Styling
   ============================================ */

/* Round increment button (like pagination links) */
.increment-button-round {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid #E4E4E7;
  background: #FFFFFF;
  color: var(--dark-grey);
  text-decoration: none;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  padding: 0;
  margin: 0;
}

.increment-button-round:hover {
  background: #F4F4F5;
  border-color: #E4E4E7;
  color: var(--dark-grey);
}

.increment-button-round:active {
  background: #E4E4E7;
  border-color: #E4E4E7;
  color: var(--dark-grey);
}

/* AG Grid modern table styling - grid needs explicit height to display body */
#callListGrid {
  width: 100%;
  height: 1200px;
  min-height: 400px;
  margin-bottom: 20px;
  background-color: #ffffff;
}

#callListGrid .ag-root-wrapper {
  height: 100%;
}

#callListGrid .ag-theme-alpine .ag-body-viewport {
  overflow-y: auto;
  overflow-x: auto;
}

#callListGrid .ag-theme-alpine {
  font-family: inherit;
}

#callListGrid .ag-theme-alpine .ag-header {
  background-color: #ffffff;
  border-bottom: 1px solid var(--light-grey);
}

#callListGrid .ag-theme-alpine .ag-header-cell {
  color: #3F3F46;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  border: none;
  display: flex;
  align-items: center;
}

#callListGrid .ag-theme-alpine .ag-header-cell-label {
  display: flex;
  align-items: center;
}

#callListGrid .ag-theme-alpine .ag-row {
  border-bottom: 1px solid var(--light-grey);
}

#callListGrid .ag-theme-alpine .ag-row:hover {
  background-color: var(--light-blue);
}

#callListGrid .ag-theme-alpine .ag-cell {
  padding: 12px 15px;
  color: var(--dark-grey);
  display: flex;
  align-items: center;
  vertical-align: middle;
}

#callListGrid .ag-theme-alpine .ag-pinned-left-cols-container {
  background-color: #ffffff;
}

#callListGrid .ag-theme-alpine .ag-pinned-left-header {
  background-color: #ffffff;
}

/* Hide AG Grid's default pagination */
#callListGrid .ag-theme-alpine .ag-paging-panel {
  display: none !important;
}

/* Ensure buttons in grid cells don't get cut off and content is vertically centered */
#callListGrid .ag-theme-alpine .ag-cell-wrapper {
  overflow: visible;
  height: 100%;
  display: flex;
  align-items: center;
}

#callListGrid .ag-theme-alpine .ag-cell-value {
  overflow: visible;
  display: flex;
  align-items: center;
  height: 100%;
}

/* Form buttons styled as secondary buttons - match standard .btn-secondary (blue outline) */
#callListGrid form button.btn-secondary,
#callListGrid form input.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  border-radius: 16px;
  padding: 8px 16px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  flex-shrink: 0;
  overflow: visible;
}

#callListGrid form button.btn-secondary:hover,
#callListGrid form input.btn-secondary:hover {
  background: #F4F4F5;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

#callListGrid form button.btn-secondary:active,
#callListGrid form input.btn-secondary:active {
  background: #E4E4E7;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

/* Links styled as secondary buttons - match #callListGrid form button.btn-secondary exactly */
#callListGrid a.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  border-radius: 16px;
  padding: 8px 16px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: 84px;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
  flex-shrink: 0;
  overflow: visible;
}

#callListGrid a.btn-secondary:hover {
  background: #F4F4F5;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  text-decoration: none;
}

#callListGrid a.btn-secondary:active {
  background: #E4E4E7;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

/* Header form button styling - match standard .btn-secondary */
#callListGrid .ag-header-cell form button.btn-secondary,
#callListGrid .ag-header-cell form input.btn-secondary {
  background: #FFFFFF;
  border: 1px solid var(--primary-blue, #0072C3);
  color: var(--dark-grey);
  border-radius: 16px;
  padding: 8px 16px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  min-width: auto;
  box-sizing: border-box;
  text-decoration: none;
  cursor: pointer;
  font-size: 14px;
  font-family: inherit;
}

#callListGrid .ag-header-cell form button.btn-secondary:hover,
#callListGrid .ag-header-cell form input.btn-secondary:hover {
  background: #F4F4F5;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}

#callListGrid .ag-header-cell form button.btn-secondary:active,
#callListGrid .ag-header-cell form input.btn-secondary:active {
  background: #E4E4E7;
  border-color: var(--primary-blue, #0072C3);
  color: var(--dark-grey);
}


.pager {
  margin: 5px 0;
}