* {

  box-sizing: border-box;

}



body {

  margin: 0;

  font-family:

    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",

    Roboto, Helvetica, Arial, sans-serif;

  background: #f4f6f8;

  color: #1d2939;

}



.layout {

  display: flex;

  min-height: 100vh;

}



.sidebar {

  width: 250px;

  background: #173d35;

  color: white;

  padding: 26px 18px;

  display: flex;

  flex-direction: column;

  position: fixed;

  inset: 0 auto 0 0;

}



.brand {

  display: flex;

  gap: 12px;

  align-items: center;

  padding: 0 8px 28px;

  border-bottom: 1px solid rgba(255,255,255,.13);

}



.brand-mark {

  width: 42px;

  height: 42px;

  display: flex;

  align-items: center;

  justify-content: center;

  background: white;

  color: #173d35;

  border-radius: 10px;

  font-size: 23px;

  font-weight: 700;

}



.brand-name {

  font-size: 17px;

  font-weight: 650;

}



.brand-subtitle {

  margin-top: 3px;

  color: #b9cbc6;

  font-size: 12px;

}



nav {

  padding-top: 24px;

  flex: 1;

}



.nav-item {

  display: block;

  padding: 12px 14px;

  margin: 4px 0;

  text-decoration: none;

  color: #cfddd9;

  border-radius: 8px;

  font-size: 14px;

}



.nav-item:hover {

  background: rgba(255,255,255,.07);

}



.nav-item.active {

  color: white;

  background: rgba(255,255,255,.13);

  font-weight: 600;

}



.nav-item.disabled {

  opacity: .72;

}



.sidebar-footer {

  color: #d1dedb;

  font-size: 13px;

  padding: 16px 8px 0;

  border-top: 1px solid rgba(255,255,255,.13);

}



.sidebar-footer .small {

  margin-top: 4px;

  color: #9fb7b1;

  font-size: 11px;

}



.main {

  margin-left: 250px;

  width: calc(100% - 250px);

  padding: 30px 34px 50px;

}



.topbar {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 22px;

}



.topbar h1 {

  margin: 0;

  font-size: 29px;

  font-weight: 650;

}



.topbar p {

  color: #667085;

  margin: 7px 0 0;

  font-size: 14px;

}



.mode-badge {

  font-size: 13px;

  font-weight: 650;

  padding: 9px 14px;

  border-radius: 999px;

  background: #e9ecef;

}



.mode-badge.live {

  background: #fee4e2;

  color: #b42318;

}



.mode-badge.test {

  background: #ecfdf3;

  color: #027a48;

}



.warning {

  padding: 14px 17px;

  border-radius: 9px;

  background: #fff4e5;

  border: 1px solid #f7c875;

  color: #7a4b00;

  margin-bottom: 20px;

  font-size: 14px;

}



.hidden {

  display: none;

}



.stats-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 18px;

  margin-bottom: 20px;

}



.stat-card,

.panel {

  background: white;

  border: 1px solid #e4e7ec;

  border-radius: 12px;

  box-shadow: 0 1px 2px rgba(16,24,40,.04);

}



.stat-card {

  padding: 20px;

}



.stat-label {

  color: #667085;

  font-size: 13px;

  font-weight: 500;

}



.stat-value {

  font-size: 31px;

  font-weight: 650;

  margin: 10px 0 5px;

}



.stat-note {

  color: #98a2b3;

  font-size: 12px;

}



.two-column {

  display: grid;

  grid-template-columns: 2fr 1fr;

  gap: 20px;

  margin-bottom: 20px;

}



.panel {

  overflow: hidden;

}



.panel-header {

  padding: 19px 21px;

  border-bottom: 1px solid #eaecf0;

}



.panel-header h2 {

  margin: 0;

  font-size: 17px;

  font-weight: 650;

}



.panel-header p {

  color: #98a2b3;

  font-size: 12px;

  margin: 5px 0 0;

}



.rota-container {

  padding: 8px 20px 17px;

}



.rota-row {

  display: grid;

  grid-template-columns: 1.2fr 1fr 1fr;

  gap: 14px;

  padding: 13px 4px;

  border-bottom: 1px solid #f0f1f3;

  align-items: center;

}



.rota-row:last-child {

  border-bottom: 0;

}



.clinic-name {

  font-weight: 600;

  font-size: 13px;

}



.vet-role {

  color: #98a2b3;

  text-transform: uppercase;

  font-size: 10px;

  margin-bottom: 3px;

  letter-spacing: .04em;

}



.vet-name {

  font-size: 13px;

}



.rota-warning {

  color: #b54708;

  font-size: 11px;

  margin-top: 4px;

}



.system-list {

  padding: 8px 20px;

}



.system-row {

  display: flex;

  justify-content: space-between;

  padding: 14px 2px;

  border-bottom: 1px solid #f0f1f3;

  font-size: 13px;

}



.system-row:last-child {

  border-bottom: 0;

}



.system-row span {

  color: #667085;

}



.recent-panel {

  margin-bottom: 20px;

}



.table-wrapper {

  overflow-x: auto;

}



table {

  width: 100%;

  border-collapse: collapse;

}



th {

  background: #fafafa;

  text-align: left;

  color: #667085;

  font-size: 11px;

  font-weight: 600;

  padding: 11px 15px;

  border-bottom: 1px solid #eaecf0;

}



td {

  font-size: 12px;

  padding: 13px 15px;

  border-bottom: 1px solid #f0f1f3;

  vertical-align: top;

}



.issue {

  max-width: 280px;

}



.routing-arrow {

  color: #98a2b3;

}



.status {

  display: inline-block;

  padding: 4px 8px;

  border-radius: 999px;

  background: #f2f4f7;

  font-size: 11px;

  font-weight: 600;

}



.status.accepted {

  background: #ecfdf3;

  color: #027a48;

}



.status.notifying {

  background: #fffaeb;

  color: #b54708;

}



.status.not-emergency {

  background: #eff8ff;

  color: #175cd3;

}



.loading {

  text-align: center;

  padding: 25px;

  color: #98a2b3;

}



@media (max-width: 1000px) {

  .stats-grid {

    grid-template-columns: repeat(2, 1fr);

  }



  .two-column {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 720px) {

  .sidebar {

    display: none;

  }



  .main {

    margin-left: 0;

    width: 100%;

    padding: 20px;

  }



  .stats-grid {

    grid-template-columns: 1fr;

  }

}




.client-controls {

  margin-bottom: 20px;

  padding: 18px 20px;

}



.client-toolbar {

  display: grid;

  grid-template-columns: minmax(280px, 2fr) minmax(200px, 1fr) auto;

  gap: 20px;

  align-items: end;

}



.search-box label,

.filter-box label {

  display: block;

  font-size: 12px;

  font-weight: 600;

  color: #475467;

  margin-bottom: 7px;

}



.search-box input,

.filter-box select {

  width: 100%;

  height: 42px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 12px;

  background: white;

  color: #1d2939;

  font: inherit;

  font-size: 13px;

}



.search-box input:focus,

.filter-box select:focus {

  outline: none;

  border-color: #667085;

}



.client-count-box {

  height: 42px;

  display: flex;

  align-items: center;

  gap: 6px;

  padding: 0 4px;

  color: #667085;

  font-size: 12px;

  white-space: nowrap;

}



.client-count-box strong {

  color: #1d2939;

}



.phone-primary {

  font-weight: 600;

}



.phone-secondary {

  margin-bottom: 3px;

}



.phone-secondary:last-child {

  margin-bottom: 0;

}



.muted {

  color: #98a2b3;

}



.source-badge {

  display: inline-block;

  padding: 4px 7px;

  border-radius: 5px;

  background: #f2f4f7;

  color: #475467;

  font-size: 10px;

  font-weight: 650;

}



.clients-table td {

  vertical-align: middle;

}



@media (max-width: 900px) {

  .client-toolbar {

    grid-template-columns: 1fr;

  }

}




.csv-panel {

  margin-bottom: 20px;

}



.csv-upload-area {

  display: flex;

  align-items: center;

  gap: 14px;

  padding: 18px 20px;

  flex-wrap: wrap;

}



.csv-file-label {

  display: inline-block;

  padding: 10px 14px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  background: white;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

}



#csv-file {

  display: none;

}



.primary-button {

  border: 0;

  background: #173d35;

  color: white;

  border-radius: 8px;

  padding: 11px 16px;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

}



.primary-button:disabled {

  opacity: .45;

  cursor: default;

}



.csv-filename {

  color: #667085;

  font-size: 12px;

}



.csv-result {

  margin: 0 20px 18px;

  padding: 16px;

  border-radius: 9px;

  border: 1px solid;

}



.csv-ok {

  background: #ecfdf3;

  border-color: #abefc6;

  color: #05603a;

}



.csv-blocked {

  background: #fef3f2;

  border-color: #fecdca;

  color: #b42318;

}



.csv-summary-title {

  font-weight: 650;

  margin-bottom: 13px;

}



.csv-summary-grid {

  display: flex;

  gap: 28px;

  flex-wrap: wrap;

}



.csv-summary-grid div {

  display: flex;

  flex-direction: column;

}



.csv-summary-grid strong {

  font-size: 20px;

}



.csv-summary-grid span {

  font-size: 11px;

  margin-top: 2px;

}



.csv-import-note {

  margin-top: 13px;

  font-size: 11px;

}



.csv-action {

  display: inline-block;

  padding: 4px 7px;

  border-radius: 5px;

  font-size: 10px;

  font-weight: 700;

}



.csv-action.new {

  background: #ecfdf3;

  color: #027a48;

}



.csv-action.update {

  background: #eff8ff;

  color: #175cd3;

}



.csv-action.rejected {

  background: #fef3f2;

  color: #b42318;

}



.validation-ok {

  color: #027a48;

  font-weight: 600;

}



.validation-warning {

  color: #b54708;

  margin-bottom: 3px;

}



.validation-error {

  color: #b42318;

  margin-bottom: 3px;

}




.csv-import-controls {

  margin: 0 20px 18px;

  padding: 14px 16px;

  background: #fffaeb;

  border: 1px solid #fedf89;

  border-radius: 9px;

  display: flex;

  align-items: center;

  gap: 14px;

  flex-wrap: wrap;

}



.csv-import-controls.hidden {

  display: none;

}



.import-button {

  border: 0;

  background: #173d35;

  color: white;

  border-radius: 8px;

  padding: 11px 18px;

  font-size: 13px;

  font-weight: 650;

  cursor: pointer;

}



.import-button:disabled {

  opacity: .5;

  cursor: default;

}



.csv-import-warning {

  color: #854a0e;

  font-size: 12px;

}




.rota-controls-panel {

  margin-bottom: 20px;

  padding: 16px 20px;

}



.rota-controls {

  display: flex;

  align-items: center;

  gap: 10px;

  flex-wrap: wrap;

}



.secondary-button {

  border: 1px solid #d0d5dd;

  background: white;

  color: #344054;

  border-radius: 8px;

  padding: 10px 14px;

  font-size: 13px;

  font-weight: 600;

  cursor: pointer;

}



.secondary-button:hover {

  background: #f9fafb;

}



#rota-date {

  height: 39px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 12px;

  color: #1d2939;

  font: inherit;

  font-size: 13px;

}



.rota-page-container {

  padding: 20px;

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

}



.rota-clinic-card {

  border: 1px solid #e4e7ec;

  border-radius: 10px;

  overflow: hidden;

  background: white;

}



.rota-clinic-card.rota-same-vet {

  border-color: #f7c875;

}



.rota-clinic-header {

  padding: 15px 17px;

  border-bottom: 1px solid #eaecf0;

  background: #fafafa;

}



.rota-clinic-name {

  font-size: 15px;

  font-weight: 650;

}



.rota-alert {

  margin-top: 5px;

  color: #b54708;

  font-size: 11px;

  font-weight: 600;

}



.rota-vets-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

}



.rota-vet-card {

  padding: 16px 17px;

}



.rota-vet-card:first-child {

  border-right: 1px solid #eaecf0;

}



.rota-vet-role {

  color: #98a2b3;

  font-size: 10px;

  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: .05em;

  margin-bottom: 6px;

}



.rota-vet-name {

  font-size: 14px;

  font-weight: 600;

}



.rota-vet-phone {

  margin-top: 5px;

  color: #667085;

  font-size: 12px;

}



.rota-vet-card.unassigned .rota-vet-name {

  color: #b42318;

}



@media (max-width: 900px) {

  .rota-page-container {

    grid-template-columns: 1fr;

  }

}




.rota-edit-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

  padding: 17px;

}



.rota-edit-field label {

  display: block;

  color: #667085;

  font-size: 11px;

  font-weight: 650;

  text-transform: uppercase;

  letter-spacing: .04em;

  margin-bottom: 7px;

}



.rota-vet-select {

  width: 100%;

  height: 42px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  background: white;

  color: #1d2939;

  padding: 0 10px;

  font-size: 13px;

}



.rota-vet-select:focus {

  outline: none;

  border-color: #667085;

}



.rota-edit-footer {

  border-top: 1px solid #eaecf0;

  padding: 13px 17px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 14px;

}



.rota-current-info {

  color: #667085;

  font-size: 11px;

  line-height: 1.5;

}



.save-rota-button {

  border: 0;

  background: #173d35;

  color: white;

  border-radius: 8px;

  padding: 10px 15px;

  font-size: 12px;

  font-weight: 650;

  cursor: pointer;

  white-space: nowrap;

}



.save-rota-button:disabled {

  opacity: .5;

  cursor: default;

}



.rota-message {

  position: fixed;

  right: 24px;

  bottom: 24px;

  z-index: 1000;

  max-width: 420px;

  padding: 14px 18px;

  border-radius: 9px;

  font-size: 13px;

  box-shadow: 0 4px 18px rgba(16,24,40,.15);

}



.rota-message-success {

  background: #ecfdf3;

  border: 1px solid #abefc6;

  color: #05603a;

}



.rota-message-error {

  background: #fef3f2;

  border: 1px solid #fecdca;

  color: #b42318;

}



@media (max-width: 700px) {

  .rota-edit-grid {

    grid-template-columns: 1fr;

  }



  .rota-edit-footer {

    align-items: stretch;

    flex-direction: column;

  }

}




.vets-stats {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.vet-status,

.test-vet-badge,

.duplicate-badge {

  display: inline-block;

  padding: 4px 7px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 700;

}



.vet-status.active {

  background: #ecfdf3;

  color: #027a48;

}



.vet-status.inactive {

  background: #f2f4f7;

  color: #667085;

}



.test-vet-badge {

  background: #eff8ff;

  color: #175cd3;

}



.duplicate-badge {

  background: #fffaeb;

  color: #b54708;

}




.clinics-container {



  padding: 20px;



  display: grid;



  grid-template-columns: 1fr;



  gap: 18px;



}



.clinic-card {

  border: 1px solid #e4e7ec;

  border-radius: 10px;

  overflow: hidden;

  background: white;

}



.clinic-card-header {



  background: #fafafa;



  border-bottom: 1px solid #eaecf0;



  padding: 16px 18px;



  display: flex;



  justify-content: space-between;



  align-items: center;



  gap: 18px;



}



.clinic-header-actions {



  display: flex;



  align-items: center;



  gap: 14px;



  flex-shrink: 0;



}





.clinic-card-name {

  font-size: 15px;

  font-weight: 650;

}



.clinic-reference {

  margin-top: 5px;

  color: #98a2b3;

  font-size: 11px;

}



.clinic-edit-grid {



  padding: 20px 18px;



  display: grid;



  grid-template-columns: 1.2fr 1fr 0.8fr;



  gap: 20px;



  align-items: end;



}



.clinic-input {

  width: 100%;

  height: 42px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  background: white;

  padding: 0 11px;

  color: #1d2939;

  font: inherit;

  font-size: 13px;

}



.clinic-input:focus {

  outline: none;

  border-color: #667085;

}



.field-note {

  margin-top: 5px;

  color: #b54708;

  font-size: 10px;

}



.save-clinic-button {

  border: 0;

  background: #173d35;

  color: white;

  border-radius: 8px;

  padding: 10px 15px;

  font-size: 12px;

  font-weight: 650;

  cursor: pointer;

}



.save-clinic-button:disabled {

  opacity: .5;

}



@media (max-width: 900px) {

  .clinics-container,

  .clinic-edit-grid {

    grid-template-columns: 1fr;

  }

}




.case-toolbar {

  display: grid;

  grid-template-columns: 2fr 1fr 1.4fr 1fr;

  gap: 16px;

  align-items: end;

}



.case-row {

  cursor: pointer;

}



.case-row:hover {

  background: #fafafa;

}



.case-id-small,

.case-secondary {

  color: #98a2b3;

  font-size: 10px;

  margin-top: 4px;

}



.case-recognition {

  display: inline-block;

  margin-top: 5px;

  padding: 3px 6px;

  border-radius: 999px;

  font-size: 9px;

  font-weight: 700;

}



.case-recognition.recognised {

  background: #ecfdf3;

  color: #027a48;

}



.case-recognition.unrecognised {

  background: #f2f4f7;

  color: #667085;

}



.case-modal {

  position: fixed;

  inset: 0;

  z-index: 2000;

}



.case-modal.hidden {

  display: none;

}



.case-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(16,24,40,.55);

}



.case-modal-panel {

  position: absolute;

  top: 3%;

  right: 3%;

  bottom: 3%;

  width: min(950px, 94vw);

  background: #f8fafb;

  border-radius: 14px;

  overflow: hidden;

  display: flex;

  flex-direction: column;

  box-shadow: 0 20px 50px rgba(16,24,40,.3);

}



.case-modal-header {

  background: white;

  border-bottom: 1px solid #e4e7ec;

  padding: 18px 22px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.case-modal-header h2 {

  margin: 0;

  font-size: 19px;

}



.case-modal-subtitle {

  margin-top: 5px;

  color: #667085;

  font-size: 12px;

}



.case-modal-close {

  border: 0;

  background: transparent;

  font-size: 28px;

  line-height: 1;

  cursor: pointer;

  color: #667085;

}



.case-modal-content {

  padding: 20px;

  overflow-y: auto;

}



.modal-open {

  overflow: hidden;

}



.case-detail-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 16px;

}



.case-detail-section {

  background: white;

  border: 1px solid #e4e7ec;

  border-radius: 10px;

  padding: 17px;

}



.case-detail-section h3 {

  margin: 0 0 14px;

  font-size: 14px;

}



.case-detail-wide {

  grid-column: 1 / -1;

}



.case-detail-block {

  margin-top: 16px;

}



.detail-row {

  display: flex;

  justify-content: space-between;

  gap: 20px;

  padding: 8px 0;

  border-bottom: 1px solid #f0f1f3;

  font-size: 12px;

}



.detail-row:last-child {

  border-bottom: 0;

}



.detail-row span {

  color: #667085;

}



.detail-row strong {

  text-align: right;

}



.issue-full {

  font-size: 13px;

  line-height: 1.6;

}



.notification-list {

  display: grid;

  gap: 10px;

}



.notification-card {

  border: 1px solid #eaecf0;

  border-radius: 8px;

  padding: 12px;

  font-size: 12px;

}



.notification-channel {

  margin-left: 6px;

  padding: 3px 6px;

  border-radius: 999px;

  background: #f2f4f7;

  color: #475467;

  font-size: 9px;

  font-weight: 700;

}



.timeline {

  position: relative;

}



.timeline-item {

  display: grid;

  grid-template-columns: 16px 1fr;

  gap: 10px;

  padding-bottom: 16px;

}



.timeline-dot {

  width: 8px;

  height: 8px;

  margin-top: 5px;

  border-radius: 50%;

  background: #173d35;

}



.timeline-title {

  font-size: 12px;

  font-weight: 650;

}



.timeline-time {

  color: #98a2b3;

  font-size: 10px;

  margin-top: 2px;

}



.timeline-detail {

  color: #667085;

  font-size: 11px;

  margin-top: 5px;

  line-height: 1.5;

}



@media (max-width: 950px) {

  .case-toolbar {

    grid-template-columns: 1fr 1fr;

  }



  .case-detail-grid {

    grid-template-columns: 1fr;

  }



  .case-detail-wide {

    grid-column: auto;

  }

}




.audit-toolbar {

  display: grid;

  grid-template-columns: 2fr 1.5fr 1fr 1fr;

  gap: 16px;

  align-items: end;

}



.audit-container {

  padding: 0;

}



.audit-row {

  display: grid;

  grid-template-columns: 160px 1fr;

  gap: 18px;

  padding: 15px 20px;

  border-bottom: 1px solid #eaecf0;

}



.audit-row:last-child {

  border-bottom: 0;

}



.audit-time {

  color: #667085;

  font-size: 11px;

  padding-top: 4px;

}



.audit-event-badge {

  display: inline-block;

  padding: 4px 7px;

  border-radius: 999px;

  font-size: 10px;

  font-weight: 700;

  margin-right: 8px;

}



.audit-event-badge.case {

  background: #eff8ff;

  color: #175cd3;

}



.audit-event-badge.admin {

  background: #f4f3ff;

  color: #5925dc;

}



.audit-event-badge.warning {

  background: #fffaeb;

  color: #b54708;

}



.audit-event-badge.outcome {

  background: #ecfdf3;

  color: #027a48;

}



.audit-case-id {

  color: #475467;

  font-size: 10px;

  text-decoration: none;

}



.audit-case-id:hover {

  text-decoration: underline;

}



.audit-system-event {

  color: #98a2b3;

  font-size: 10px;

}



.audit-detail {

  margin-top: 8px;

  color: #667085;

  font-size: 11px;

  line-height: 1.6;

  overflow-wrap: anywhere;

}



@media (max-width: 900px) {

  .audit-toolbar {

    grid-template-columns: 1fr 1fr;

  }



  .audit-row {

    grid-template-columns: 1fr;

    gap: 6px;

  }

}




/* Audit filter control consistency */

.audit-toolbar input,

.audit-toolbar select {

  width: 100%;

  height: 42px;

  box-sizing: border-box;

  font: inherit;

  font-size: 13px;

  color: #101828;

  background: #fff;

  border: 1px solid #d0d5dd;

  border-radius: 7px;

  padding: 0 12px;

}



.audit-toolbar input[type="date"] {

  min-width: 0;

  font-family: inherit;

}



.audit-toolbar input[type="date"]::-webkit-datetime-edit {

  font-family: inherit;

  font-size: 13px;

}



.audit-toolbar input[type="date"]::-webkit-calendar-picker-indicator {

  cursor: pointer;

}




.reporting-filter-panel {

  padding: 18px 20px;

  margin-bottom: 20px;

}



.report-quick-filters {

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  margin-bottom: 18px;

}



.report-period-button {

  border: 1px solid #d0d5dd;

  background: white;

  color: #475467;

  border-radius: 8px;

  padding: 8px 13px;

  font-size: 12px;

  font-weight: 600;

  cursor: pointer;

}



.report-period-button.active {

  background: #173d35;

  border-color: #173d35;

  color: white;

}



.report-filter-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1.4fr 1.4fr auto;

  gap: 14px;

  align-items: end;

}



.report-filter-grid input,

.report-filter-grid select {

  width: 100%;

  height: 42px;

  box-sizing: border-box;

  font: inherit;

  font-size: 13px;

  color: #101828;

  background: white;

  border: 1px solid #d0d5dd;

  border-radius: 7px;

  padding: 0 12px;

}



.report-filter-grid input[type="date"] {

  font-family: inherit;

}



.report-apply-box {

  min-width: 110px;

}



.reporting-stats {

  grid-template-columns: repeat(3, minmax(0, 1fr));

}



.report-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 20px;

}



.report-chart {

  padding: 18px 20px 22px;

}



.report-bar-row {

  display: grid;

  grid-template-columns: minmax(120px, 180px) 1fr 38px;

  align-items: center;

  gap: 12px;

  margin-bottom: 15px;

}



.report-bar-row:last-child {

  margin-bottom: 0;

}



.report-bar-label {

  font-size: 12px;

  color: #344054;

}



.report-bar-track {

  height: 9px;

  border-radius: 999px;

  overflow: hidden;

  background: #f2f4f7;

}



.report-bar-fill {

  height: 100%;

  border-radius: inherit;

  background: #315f54;

}



.report-bar-value {

  font-size: 12px;

  font-weight: 700;

  color: #344054;

  text-align: right;

}



.report-day-row {

  display: grid;

  grid-template-columns: 58px 1fr 35px;

  gap: 12px;

  align-items: start;

  margin-bottom: 15px;

}



.report-day-row:last-child {

  margin-bottom: 0;

}



.report-day-date {

  font-size: 11px;

  font-weight: 600;

  color: #475467;

}



.report-day-main {

  min-width: 0;

}



.report-day-notes {

  margin-top: 5px;

  color: #98a2b3;

  font-size: 9px;

}



@media (max-width: 1050px) {

  .reporting-stats {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .report-grid {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 750px) {

  .report-filter-grid {

    grid-template-columns: 1fr 1fr;

  }



  .reporting-stats {

    grid-template-columns: 1fr;

  }



  .report-bar-row {

    grid-template-columns: 110px 1fr 30px;

  }

}





/* Clinic responsive layout */

@media (max-width: 1200px) {



  .clinic-edit-grid {

    grid-template-columns: 1fr 1fr;

  }



}



@media (max-width: 900px) {



  .clinic-edit-grid {

    grid-template-columns: 1fr;

  }



  .clinic-card-header {

    align-items: flex-start;

  }



  .clinic-header-actions {

    flex-direction: column;

    align-items: flex-end;

  }



}




.login-page {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 24px;

  background: #f8f9fb;

}



.login-card {

  width: 100%;

  max-width: 420px;

  background: #ffffff;

  border: 1px solid #e4e7ec;

  border-radius: 12px;

  padding: 28px;

  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.08);

}



.login-brand {

  margin-bottom: 24px;

}



.login-card h1 {

  margin: 0 0 24px;

}



.login-field {

  margin-bottom: 18px;

}



.login-field label {

  display: block;

  margin-bottom: 6px;

  font-size: 13px;

  font-weight: 600;

}



.login-field input {

  width: 100%;

  height: 42px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 12px;

  font: inherit;

  box-sizing: border-box;

}



.login-button {

  width: 100%;

  margin-top: 6px;

}



.login-error {

  margin-bottom: 14px;

  color: #b42318;

  font-size: 13px;

}




.portal-user-box {

  padding: 14px 16px;

  border-top: 1px solid #eaecf0;

}



.portal-user-name {

  font-size: 13px;

  font-weight: 600;

  margin-bottom: 2px;

}



.portal-logout-button {

  margin-top: 8px;

  border: 0;

  background: transparent;

  padding: 0;

  font: inherit;

  font-size: 12px;

  color: #667085;

  cursor: pointer;

}



.portal-logout-button:hover {

  text-decoration: underline;

}






/* Rota Day / Month views */



.rota-view-switcher {

  display: flex;

  gap: 6px;

  margin-bottom: 14px;

}



.rota-view-button {

  border: 1px solid #d0d5dd;

  background: #ffffff;

  border-radius: 7px;

  padding: 8px 18px;

  font-weight: 600;

  cursor: pointer;

}



.rota-view-button.active {

  background: #101828;

  color: #ffffff;

  border-color: #101828;

}



.rota-month-title {

  font-size: 20px;

  font-weight: 700;

  margin-bottom: 18px;

}



.rota-month-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(240px, 1fr));

  gap: 12px;

}



.rota-month-day {

  display: block;

  width: 100%;

  text-align: left;

  border: 1px solid #e4e7ec;

  border-radius: 9px;

  background: #ffffff;

  padding: 12px;

  cursor: pointer;

  font: inherit;

}



.rota-month-day:hover {

  border-color: #98a2b3;

}



.rota-month-day-heading {

  display: flex;

  justify-content: space-between;

  align-items: center;

  border-bottom: 1px solid #eaecf0;

  padding-bottom: 8px;

  margin-bottom: 8px;

}



.rota-month-day-heading strong {

  font-size: 18px;

}



.rota-month-clinic {

  padding: 7px 0;

  border-bottom: 1px solid #f2f4f7;

}



.rota-month-clinic:last-child {

  border-bottom: 0;

}



.rota-month-clinic-name {

  font-weight: 600;

  margin-bottom: 3px;

}



.rota-month-vet {

  font-size: 12px;

  line-height: 1.5;

}



@media (max-width: 1300px) {



  .rota-month-grid {

    grid-template-columns: repeat(3, minmax(220px, 1fr));

  }



}



@media (max-width: 950px) {



  .rota-month-grid {

    grid-template-columns: repeat(2, minmax(220px, 1fr));

  }



}



@media (max-width: 650px) {



  .rota-month-grid {

    grid-template-columns: 1fr;

  }



}




/* Editable monthly rota */



.month-rota-toolbar {

  display: flex;

  justify-content: space-between;

  align-items: end;

  gap: 20px;

  margin-bottom: 18px;

}



.month-rota-navigation {

  display: flex;

  align-items: center;

  gap: 8px;

}



.month-rota-navigation input {

  height: 38px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 10px;

  font: inherit;

}



.month-rota-clinic-select {

  min-width: 260px;

}



.month-rota-clinic-select label {

  display: block;

  margin-bottom: 5px;

  font-size: 12px;

  font-weight: 600;

  color: #667085;

}



.month-rota-clinic-select select {

  width: 100%;

  height: 38px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 10px;

  background: #fff;

  font: inherit;

}



.month-rota-heading {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 14px;

}



.month-rota-heading h2 {

  margin: 0 0 3px;

}



.month-rota-heading p {

  margin: 0;

  color: #667085;

}



.month-rota-table td {

  vertical-align: middle;

}



.month-rota-date {

  white-space: nowrap;

  font-weight: 600;

}



.month-rota-table select {

  width: 100%;

  min-width: 180px;

  height: 38px;

  border: 1px solid #d0d5dd;

  border-radius: 7px;

  padding: 0 9px;

  background: #fff;

  font: inherit;

}



.month-rota-same-vet {

  background: #fffaeb;

}



.month-same-vet-warning {

  color: #b54708;

  font-size: 11px;

  font-weight: 600;

  white-space: nowrap;

}



.month-copy-previous {

  white-space: nowrap;

}



@media (max-width: 900px) {



  .month-rota-toolbar {

    display: block;

  }



  .month-rota-clinic-select {

    margin-top: 12px;

    min-width: 0;

  }



  .month-rota-navigation {

    flex-wrap: wrap;

  }



}




.rota-page-container.hidden {

  display: none;

}



.rota-month-container.hidden {

  display: none;

}




/* Monthly rota calendar */



.rota-calendar-toolbar {

  display: flex;

  align-items: end;

  justify-content: space-between;

  gap: 20px;

  margin-bottom: 18px;

}



.rota-calendar-navigation {

  display: flex;

  align-items: center;

  gap: 12px;

}



.rota-calendar-title {

  min-width: 180px;

  text-align: center;

  font-size: 20px;

  font-weight: 700;

}



.rota-calendar-clinic {

  min-width: 260px;

}



.rota-calendar-clinic label {

  display: block;

  margin-bottom: 5px;

  font-size: 12px;

  font-weight: 600;

  color: #667085;

}



.rota-calendar-clinic select {

  width: 100%;

  height: 40px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 10px;

  background: #ffffff;

  font: inherit;

}



.rota-calendar-weekdays {

  display: grid;

  grid-template-columns: repeat(7, 1fr);

  gap: 8px;

  margin-bottom: 8px;

}



.rota-calendar-weekdays div {

  text-align: center;

  font-size: 12px;

  font-weight: 600;

  color: #667085;

}



.rota-calendar-grid {

  display: grid;

  grid-template-columns: repeat(7, minmax(0, 1fr));

  gap: 8px;

}



.rota-calendar-empty {

  min-height: 120px;

}



.rota-calendar-day {

  min-height: 120px;

  border: 1px solid #e4e7ec;

  border-radius: 10px;

  background: #ffffff;

  padding: 10px;

  text-align: left;

  cursor: pointer;

  font: inherit;

}



.rota-calendar-day:hover {

  border-color: #98a2b3;

  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);

}



.rota-calendar-day-number {

  font-size: 16px;

  font-weight: 700;

  margin-bottom: 8px;

}



.rota-calendar-assignment {

  display: flex;

  flex-direction: column;

  gap: 2px;

  margin-bottom: 7px;

  font-size: 12px;

}



.rota-calendar-role {

  color: #667085;

  font-size: 10px;

  text-transform: uppercase;

  font-weight: 600;

}



.rota-calendar-today {

  border: 2px solid #175cd3;

}



.rota-calendar-same-vet {

  background: #fffaeb;

}



.rota-calendar-warning {

  margin-top: 5px;

  color: #b54708;

  font-size: 10px;

  font-weight: 600;

}



.rota-calendar-modal {

  position: fixed;

  inset: 0;

  z-index: 5000;

  display: flex;

  align-items: center;

  justify-content: center;

}



.rota-calendar-modal.hidden {

  display: none;

}



.rota-calendar-modal-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(16, 24, 40, 0.58);

}



.rota-calendar-modal-card {

  position: relative;

  z-index: 1;

  width: min(440px, calc(100vw - 32px));

  background: #ffffff;

  border-radius: 14px;

  padding: 26px;

  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.22);

}



.rota-calendar-modal-close {

  position: absolute;

  top: 14px;

  right: 16px;

  border: 0;

  background: transparent;

  font-size: 24px;

  cursor: pointer;

  color: #667085;

}



.rota-calendar-modal-card h2 {

  margin: 0 30px 6px 0;

}



.rota-calendar-modal-card p {

  margin: 0 0 22px;

  color: #667085;

  font-size: 13px;

}



.rota-calendar-modal-field {

  margin-bottom: 18px;

}



.rota-calendar-modal-field label {

  display: block;

  margin-bottom: 6px;

  font-size: 12px;

  font-weight: 600;

}



.rota-calendar-modal-field select {

  width: 100%;

  height: 44px;

  border: 1px solid #d0d5dd;

  border-radius: 8px;

  padding: 0 11px;

  background: #ffffff;

  font: inherit;

}



.rota-calendar-modal-warning {

  margin-bottom: 16px;

  padding: 10px;

  border-radius: 7px;

  background: #fffaeb;

  color: #b54708;

  font-size: 12px;

}



.rota-calendar-modal-actions {

  display: flex;

  justify-content: flex-end;

  gap: 10px;

  margin-top: 22px;

}



@media (max-width: 1050px) {



  .rota-calendar-grid {

    grid-template-columns: repeat(4, minmax(0, 1fr));

  }



  .rota-calendar-weekdays {

    display: none;

  }



  .rota-calendar-empty {

    display: none;

  }



}



@media (max-width: 700px) {



  .rota-calendar-toolbar {

    display: block;

  }



  .rota-calendar-clinic {

    margin-top: 12px;

    min-width: 0;

  }



  .rota-calendar-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



}






/* =========================================================

   Glasslyn Vets branding

   ========================================================= */



:root {

  --glasslyn-green: #00A94F;

  --glasslyn-green-dark: #08783E;

  --glasslyn-magenta: #A5008E;

  --glasslyn-green-soft: #EAF8F0;

  --glasslyn-magenta-soft: #F8EAF6;

}





/* Main navigation */



.sidebar {

  background: var(--glasslyn-green-dark);

}





/* Glasslyn mark */



.brand-mark {

  background: white;

  color: var(--glasslyn-green-dark);

  border: 2px solid var(--glasslyn-magenta);

}





/* Active navigation */



.nav-item.active {

  background: rgba(255,255,255,.15);

  color: white;

  border-left: 3px solid var(--glasslyn-magenta);

}





/* Navigation hover */



.nav-item:not(.active):hover {

  background: rgba(255,255,255,.09);

}





/* Main action buttons */



.save-rota-button,

.primary-button,

.portal-primary-button {

  background: var(--glasslyn-green-dark);

  border-color: var(--glasslyn-green-dark);

  color: white;

}



.save-rota-button:hover,

.primary-button:hover,

.portal-primary-button:hover {

  background: var(--glasslyn-green);

  border-color: var(--glasslyn-green);

}





/* Day / Month selector */



.rota-view-button.active {

  background: var(--glasslyn-green-dark);

  border-color: var(--glasslyn-green-dark);

  color: white;

}





/* Calendar current day */



.rota-calendar-today {

  border-color: var(--glasslyn-magenta);

}





/* Form focus states */



input:focus,

select:focus,

textarea:focus {

  border-color: var(--glasslyn-green);

  outline-color: var(--glasslyn-green);

}





/* Reporting chart bars */



.report-bar-fill {

  background: var(--glasslyn-green-dark);

}





/* Timeline */



.timeline-dot {

  background: var(--glasslyn-green-dark);

}





/* Selected / highlighted portal elements */



.filter-chip.active,

.tab-button.active {

  background: var(--glasslyn-green-soft);

  color: var(--glasslyn-green-dark);

  border-color: var(--glasslyn-green);

}





/* Small Glasslyn accent */



.brand-name::after {

  content: '';

  display: inline-block;

  width: 7px;

  height: 7px;

  margin-left: 5px;

  border-radius: 50%;

  background: var(--glasslyn-magenta);

  vertical-align: middle;

}






/* Mobile portal navigation */



.mobile-topbar {

  display: none;

}



.mobile-menu-button {

  border: 0;

  background: transparent;

  font-size: 26px;

  line-height: 1;

  cursor: pointer;

  padding: 6px 10px;

  color: #173d35;

}



.mobile-menu-title {

  font-size: 16px;

  font-weight: 650;

  color: #173d35;

}



.mobile-menu-overlay {

  display: none;

}



@media (max-width: 720px) {

  .mobile-topbar {

    display: flex;

    align-items: center;

    gap: 10px;

    position: sticky;

    top: 0;

    z-index: 1100;

    background: white;

    padding: 10px 12px;

    border-bottom: 1px solid #e4e7ec;

  }



  .sidebar {

    display: flex;

    width: 270px;

    transform: translateX(-100%);

    transition: transform .22s ease;

    z-index: 1200;

    box-shadow: 8px 0 24px rgba(0,0,0,.18);

  }



  .sidebar.mobile-open {

    transform: translateX(0);

  }



  .mobile-menu-overlay {

    display: block;

    position: fixed;

    inset: 0;

    background: rgba(0,0,0,.35);

    z-index: 1150;

    opacity: 0;

    visibility: hidden;

    transition: opacity .22s ease, visibility .22s ease;

  }



  .mobile-menu-overlay.mobile-open {

    opacity: 1;

    visibility: visible;

  }



  .main {

    margin-left: 0;

    width: 100%;

    padding: 16px;

  }



  .table-wrapper {

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

  }

}






/* Portal user box cleanup */

#portal-user-role {

  display: none;

}



.portal-user-box {

  border-top: 1px solid rgba(255,255,255,.18);

}



.portal-user-name {

  color: #ffffff;

}



.portal-logout-button {

  margin-top: 10px;

  padding: 7px 10px;

  border: 1px solid rgba(255,255,255,.45);

  border-radius: 6px;

  background: rgba(255,255,255,.08);

  color: #ffffff;

  font-size: 12px;

  font-weight: 600;

}



.portal-logout-button:hover {

  background: rgba(255,255,255,.16);

}






.portal-user-name::before {

  content: "Logged in as: ";

  font-weight: 400;

  color: rgba(255,255,255,.75);

}




/* Manager escalation status */

.status.escalated-to-manager {

  background: #b42318;

  color: #ffffff;

}