admin-panel {
  display: block;
}

admin-panel .panel-group .panel {
  margin-bottom: 0;
}

admin-panel .panel .panel-body {
  padding: 15px 10px 20px 15px;
}

admin-panel .panel-heading .dropdown-menu button.list-item-link {
  width: 100%;
  text-align: left;
}
regular-care-form {
  .regular-care-form-fields-patient-is-rc {
    transition: opacity 0.3s ease, height 0.3s ease, margin 0.3s ease, padding 0.3s ease;
    opacity: 1;
    will-change: opacity;
  }

  &[data-patient-is-registered="false"] {
    .regular-care-form-fields-patient-is-rc {
      opacity: 0;
      pointer-events: none;
      height: 0;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
  }
}
annotatable-card-notes {
  display: block;

  .list-and-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;

    > .notes-list {
      display: flex;
      flex-direction: column;
      gap: 0;
    }
  }

  .actions {
    display: flex;
    flex-direction: column;

    @media (min-width: 768px) {
      margin-left: auto;
      width: calc(50% - 0.5rem);
    }
  }

  button.btn-link {
    border: none;
    padding: 0;
  }
}
edit-annotatable-note-form {
  display: block;

  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }
  &[data-loading] {
    form {
      display: none;
    }
  }

  form {
    *:not([type="hidden"]) + textarea {
      margin-top: 1rem;
    }
  }
}
/* Styles moved to shared-dialog component */
.billing-report-pdf {
  .doctor-fields {
    background-color: #ddd;
    display: flex;
    margin-bottom: 1.5rem;
    padding: 1rem;
  
    .doctor-name-address {
      flex: 1;
    }
  
    .report-number-period {
      flex: 1;
      text-align: right;
    }
  
    .doctor-name, .report-number {
      font-weight: bold;
    }
  } 

  table {
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 1rem;
    text-align: center;
    width: 100%;
    margin-bottom: 3rem;
    table-layout: auto;

    th, td {
      padding: 1rem;
    }

    td.value {
      font-family: monospace;
      font-size: 0.9rem;
    }

    td.money-value {
      text-align: right;
    }

    th {
      background-color: #aaa;
      font-weight: 600;
      color: white;
    }

    tbody {
      tr:nth-child(odd) {
        background-color: #f8f8f8;
      }

      tr:nth-child(even) {
        background-color: #fdfdfd;
      }

      tr.pseudo-footer {
        background-color: white;

        td.total-title {
          font-weight: bold;
          text-align: right;
        }      
      }
    }
  }

  h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.25;
  }

  h2 {
    font-size: 1.8rem;
    margin-bottom: 1.7rem;
  }

  h3 {
    font-size: 1.5rem;
    margin-bottom: 1.6rem;
  }

  p {
    margin-bottom: 1rem;
  }
}
.billing-report-pdf-footer {
  font-size: 0.7rem;
  width: 100%;

  .disclaimer-and-page-number {
    display: flex;
    margin-bottom: 1rem;
  }

  .disclaimer {
    flex: 1;
  }

  .page-number {
    flex: 1;
    text-align: right;
  }
}
.billing-report-pdf-header {
  font-size: 1rem;
  width: 100%;

  .invoice-title {
    font-weight: bold;
    text-align: center;
    margin-bottom: 1rem;
  }

  .practice-info {
    display: flex;
    margin-bottom: 1rem;
  }

  .practice-logo {
    flex: 1;
    height: 20mm;
  }

  .practice-address-contact {
    flex: 1;
    text-align: right;

    .practice-name {
      font-weight: bold;
    }
  }
}
call-recording-embedded-list {
  display: block;

  &[data-item-count="0"] {
    display: none;
  }
}
li.allocate-dropdown-li {
  &> a {
    display: flex;
  }
}

cancellation-requests-search {
  display: block;
}
clinical-panel--allergy-status-component {
  display: block;
}
clinical-panel {
  display: block;
}

clinical-panel .panel-group .panel {
  margin-bottom: 0;
}

clinical-panel .panel .panel-body {
  padding: 15px 10px 20px 15px;
}

clinical-panel .sub-section-indicator svg.glyphicon {
  width: 2.7rem;
}
prescriptions-active-group {
  display: block;
  margin-bottom: 1.5em;
}

prescriptions-active-group .active-group-header {
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 5px 5px 0 0;
  display: flex;
  font-weight: bold;
  gap: 5px;
  padding: 0.25em 8px;
  text-align: left;
}

prescriptions-active-group .prescription-header-title {
  flex: 1;
}

prescriptions-active-group .active-group-subheader {
  display: block;
  text-align: center;
}

prescriptions-active-group .active-group-subheader.warning {
  background-color: #ee9b15;
  color: #fff;
}

prescriptions-active-group .active-group-subheader.danger {
  background-color: #c33a07;
  color: #fff;
}

prescriptions-active-group .active-group-body {
  padding: 1em 10px;
  background-color: #fbfbfb;
  border-radius: 0 0 5px 5px;
}
.prescriptions-list-prescribed-product {
  display: flex;
  align-items: center;
  gap: 5px;
}

.prescriptions-list-prescribed-product-name {
  flex: 1 90%;
  text-align: left;
}

.prescriptions-list-prescribed-products-tab-link {
  text-align: center;
}

.prescriptions-list-link-button {
  width: 100%;
  display: inline-block;
}

.prescriptions-list-link-button button {
  background-color: transparent;
  border: none;
  display: inline-block;
  padding: 5px 15px;
  color: black;
  text-align: left;
  text-wrap: nowrap;
  width: 100%;
}

.prescriptions-list-link-button button:hover,
.prescriptions-list-link-button button:active,
.prescriptions-list-link-button button:focus {
  text-decoration: none;
  color: black;
  background-color: #f5f5f5;
}

.prescriptions-list-link-button button[disabled] {
  color: #777;
  cursor: not-allowed;
}

.prescriptions-list-link-button button.red {
  color: #c33a07;
}

prescriptions-list section {
  max-width: 640px;
}
prescriptions-pending-group {
  display: block;
  margin-bottom: 1.5em;
}

prescriptions-pending-group .pending-group-header {
  align-items: center;
  background-color: #f1f1f1;
  border-radius: 5px 5px 0 0;
  display: flex;
  gap: 5px;
  padding: 0.25em 8px;
  text-align: left;
}

prescriptions-pending-group .prescription-header-title {
    flex: 1;
}

prescriptions-pending-group .prescription-header-title .label.label-default {
  background-color: #fff;
  color: #333;
}

.pending-group-prescribed-product-name button {
  text-align: left;
}

prescriptions-pending-group .pending-group-body {
  padding: 1rem 10px;
  background-color: #fbfbfb;
  border-radius: 0 0 5px 5px;
}

prescriptions-pending-group {
  .pending-group-confirm-delete-content { display: none; }

  &[data-mode="confirming-delete"] .pending-group-confirm-delete-content {
    display: flex;
  }
}
prescribed-product-summary .prescribed-product-summary-primary-attributes,
prescribed-product-summary .prescribed-product-summary-secondary-attributes {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

prescribed-product-summary .prescribed-product-summary-secondary-attributes {
  gap: 0;
}

prescribed-product-summary .prescribed-product-summary-secondary-attributes {
  border-top: 2px solid #eee;
  padding-top: 1rem;
}

prescribed-product-summary hr {
  border-top: 2px solid #eee;
}
reissue-prescription-token-modal[mode="email"] .send-e-prescription-phone-number {
  display: none;
}

reissue-prescription-token-modal[mode="sms"] .send-e-prescription-email-address {
  display: none;
}
report-list {
  .existing-reports {
    report {
      &.panel {
        border-radius: 5px;
        display: block;
      }
      &.panel + report.panel {
        margin-top: 0.75em;
      }
    }
  }
}
collapsible-widget .collapsible-widget--header {
  display: flex;
  align-items: center;

  .icon-and-text {
    flex: 1;
  }
}
cancel-modal {
  display: block;

  .modal-body label {
    margin: 0 0 1rem 0;
  }
}
dashboard-shift-management-doctor-card .row label {
  margin: 0;
}

dashboard-shift-management-doctor-card p {
  line-height: 1.4em;
  margin-bottom: 0.1em;
}

dashboard-shift-management-doctor-card label {
  margin: 0;
}

dashboard-shift-management-doctor-card h3 {
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}

dashboard-shift-management-doctor-card
  .shift-management-doctor-card--warning-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

dashboard-shift-management-doctor-card
  .shift-management-doctor-card--warning-display
  > * {
  margin-bottom: 2px;
}
dashboard-task-counter-badge {
  display: inline-block;

  &[data-count="0"] {
    display: none;
  }
}
dashboard-todos-index {
  display: block;

  .modal-body label {
    margin: 0 0 1rem 0;
  }

  todos-list {
    margin-top: 1rem;
  }

  .todos-index-header {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

    .new-task-button {
      margin-left: auto;
    }
  }
}
dashboard-todos-top-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  justify-content: flex-end;

  @media (max-width: 480px) {
    .btn {
      flex: 1;
    }
  }

  .btn.new-todo-button {
    max-width: 50%;
  }
}
cancellation-request-cancellation-fee-message {
  display: block;
}
cancellation-requests-card.card {
  display: block;
  margin-bottom: 1rem;

  .call-card--header--icon {
    background-color: unset;
  }

  .call-card--content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;

    @media (min-width: 768px) {
      flex-direction: row;

      > * {
        flex: 1 1 50%;
      }
    }

    @media (min-width: 992px) {
      flex-direction: column;
    }

    @media (min-width: 1200px) {
      flex-direction: row;
    }

    .details {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;

      .summary {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
      }
    }
  }

  .card-actions {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin-top: 0.5rem;

    .dropdown-menu li button {
      width: 100%;
      text-align: left;
    }
  }


  &.claimed {
    button.claim-button {
      display: none;
    }

    &.claimed-by-current-user {
      .claimed-other-info {
        display: none;
      }
    }
    &:not(.claimed-by-current-user) {
      .claimed-group {
        display: none;
      }
    }
  }

  &:not(.claimed) {
    .claimed-group {
      display: none;
    }
    .claimed-other-info {
      display: none;
    }
  }

  &.fade-out {
    opacity: 0;
    transition: opacity 0.6s ease;
  }

  &.requires-action {
    border-color: #ea645f !important;
    animation-name: glow_animation;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
  }
}
cancellation-requests-card-notes {
  display: block;

  &[data-item-count="0"] {
    display: none;
  }
}
cancellation-request-found-visit-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  svg {
    margin-right: 0.5rem;
  }
}
cancellation-requests-list {
  &[data-item-count="0"] {
    .items-list {
      display: none;
    }
  }
  &:not([data-item-count="0"]) {
    .no-items-message {
      display: none;
    }
  }
}
mark-cancellation-request-as-complete-form {
  display: block;

  cancellation-request-found-visit-info {
    margin-bottom: 1.4rem;
  }

  &:not(.cancellation-fee-applies) {
    .cancellation-fee-and-waived {
      display: none;
    }
  }


  &.cancellation-fee-is-waived {
    .cancellation-fee-messages {
      display: none;
    }
  }

  &:not(.cancellation-fee-is-waived) {
    .cancellation-fee-waived-reason, .cancellation-fee-message-waived {
      display: none;
    }
  }

  &[data-cancellation-type="patient_initiated"] {
    .dna-fee-message {
      display: none;
    }
  }

  &[data-cancellation-type="did_not_attend"] {
    .cancellation-fee-message {
      display: none;
    }
    cancellation-request-period-before-eta {
      display: none;
    }
  }

  &:not([data-should-send-sms="true"]) {
    .phone-number-info {
      display: none;
    }
  }

  .shifts-dropdown {
    position: relative;

    .shifts-dropdown-button {
      border: none;
      background: transparent;
      padding: 0;
      margin-left: 4px;
      text-align: left;
    }

    .dropdown-menu {
      margin-left: -8px;
    }
  }

  .panel-form-group, radio-group, cancellation-request-period-before-eta, .phone-number-info {
    display: flex;
    margin: 1rem 0 0 0;
    &:first-child {
      margin-top: 0;
    }
  }

  cancellation-request-period-before-eta, .phone-number-info {
    margin-left: 2rem;
  }
}
mark-cancellation-request-as-complete-modal {
  display: block;

  .modal-body label {
    margin: 0 0 1rem 0;
  }
}
cancellation-request-patient-options-for-shift {
  display: block;
}
cancellation-request-period-before-eta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;

  svg {
    margin-right: 0.5rem;
  }
}
dashboard-appointment-requests-top-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;

  @media (max-width: 480px) {
    .btn {
      flex: 1;
    }
  }

  @media (min-width: 481px) {
    justify-content: flex-end;
  }

  .show-triage-protocol-button {
    svg.glyphicon {
      transform: rotate(-90deg);
    }
  }
}
triage-protocol-modal {
  .modal-dialog {
    @media (min-width: 768px) {
      width: 750px;
    }

    @media (min-width: 1024px) {
      width: 974px;
    }
  }
}
dashboard-appointments {
  display: block;

  .loading-spinner {
    display: none;
  }

  &[data-loading] {
    .loading-spinner {
      display: block;
    }

    dashboard-appointments-shifts {
      display: none;
    }
  }

  .shift-options {
    padding: Max(7px, 1.75%)
  }

  .shift-options-group {
    margin-top: 1rem;
  }

  .ended-shifts-bubble {
    margin: 0;
  }

  .select-shift-label {
    margin-top: 0;
  }

  .shifts-dropdown {
    margin-top: 0.5rem;
  }

  .shifts-dropdown-button-has-incomplete {
    border-color: #ea645f !important;
    animation-name: glow_animation;
    animation-duration: 3000ms;
    animation-iteration-count: infinite;
  }
}
dashboard-appointments-shifts {
  display: block;
}
document-card {
  display: block;

  > animatable-accordion {
    > .header {
      align-items: center;
      cursor: pointer;
      display: flex;
      gap: 0.75rem;
      padding: 1rem;

      .chevron {
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
      }

      .document-info {
        flex: 1;
        min-width: 0;

        .date, .document-title {
          font-weight: bold;
        }

        .document-subtitle {
          font-size: 0.9em;
          color: #666;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }

    > .accordion-body {
      display: flex;
      flex-direction: column;
      min-width: 0;
      padding: 0 1rem;
    }


    &[open] {
      > .header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }

      > .accordion-body {
        padding: 0 1rem 1rem 1rem;
      }
    }
  }

  document-header-menu {
    margin-left: auto;
  }

  .document-body {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  document-content {
    background-color: #f7f7f7;
    padding: 1rem;
  }

  .heading {
    font-weight: bold;
  }

  hr.separator {
    border-top: 1px solid #cacaca;
    margin: 1rem 0 0 0;
    width: 100%;
  }

  .other-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    other-todo {
      padding: 1rem;
    }
  }
}
document-content {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  .attachments-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .attachment-container {
      border: none;
      margin: 0;

      &:last-child {
        margin-bottom: 0;
      }

      iframe {
        border-radius: 4px;
      }

      img.attachment {
        margin-top: 0;
        max-width: 100%;
      }
    }
  }

  .description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: white;
    padding: 1rem;
    position: relative;

    .description-heading {
      font-weight: bold;
    }

    .description-body {
      white-space: pre-wrap;
      transition: max-height 0.3s ease;

      /* When content needs truncation (set by JS) */
      &[data-truncatable] {
        max-height: 6em; /* ~4 lines */
        overflow: hidden;

        + .description-toggle {
          display: flex;
        }
      }

      /* When expanded (set by JS - max-height set dynamically) */
      &[data-expanded] + .description-toggle {
        background: transparent;
        position: static;
        padding-top: 0.5rem;
        width: 100%;

        .svg-icon {
          transform: rotate(180deg);
        }
      }
    }

    .description-uploaded-by {
      font-style: italic;
    }

    .description-toggle {
      align-items: center;
      background: linear-gradient(to top, white 0%, white 50%, transparent 100%);
      border: none;
      bottom: 1rem;
      color: #2489fd;
      cursor: pointer;
      display: none;
      font-weight: bold;
      gap: 0.25rem;
      justify-content: center;
      padding: 1.5rem 0 0;
      position: absolute;
      left: 1rem;
      right: 1rem;

      .svg-icon {
        transition: transform 0.2s ease;
      }
    }
  }
}
document-list {
  .existing-attachments {
    x-document {
      &.panel {
        border-radius: 5px;
        display: block;
      }
      &.panel + x-document.panel {
        margin-top: 0.75em;
      }
    }
  }
}
edit-document-comment-form {
  display: block;

  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }
  &[data-loading] {
    form {
      display: none;
    }
  }
}
edit-document-form-fields {
  display: block;

  .existing-assigned-todo-users {
    margin-top: 1rem;

    .mini-todo-list {
      display: flex;
      flex-direction: column;
      gap: 0.25rem;
      width: 50%;
      
      li {
        background-color: #f1f1f1;
        padding: 0.5rem;
      }
    }
  }

  &:not([data-should-notify]) .todo-fields {
    display: none;
    visibility: hidden;
  }
}
edit-document-form {
  display: block;

  &[data-loading] form {
    display: none;
  }
}
edit-document-pane-form {
  display: block;

  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }

  &[data-loading] {
    form {
      display: none;
    }
  }
}
document-header-menu {
  display: block;

  .dropdown-menu button {
    text-align: left;
    width: 100%;
  }
}
documents-index {
  display: block;
  max-width: 640px;
}
documents-list {
  display: block;

  .results-page {
    margin-top: 1rem;
  }

  &[data-loaded] {
    .loading-notice {
      display: none;
      visibility: hidden;
    }
  }

  &:not([data-loaded]) {
    .no-items-notice {
      display: none;
      visibility: hidden;
    }
  }

  &[data-item-count="0"] {
    .no-items-notice {
      display: block;
    }
  }

  &:not([data-item-count="0"]) {
    .no-items-notice {
      display: none;
    }
  }
}
.file-fields .file-field-container:first-of-type .delete-link,
.file-fields .file-field-container:first-of-type .link-separator {
  display: none;
}
.erx-message-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.erx-message-card-metadata, .erx-message-card-data {
  flex: 1;
}

.erx-message-card-data pre {
  font-size: 1rem;
}

.erx-message-card-metadata-datum {
  display: flex
}

.erx-message-card-metadata-label {
  flex: 1;
  flex-grow: 0.4;
  font-weight: bold;
}

.erx-message-card-metadata-value {
  flex: 1;
}
fees-quoting-form {
  affiliated-practices {
    margin: 1rem;
    padding: 1rem;
    border: 1px solid #f9fafb;
  }

  .submodal-header {
    height: 1rem;
    position: sticky;
  }

  ul, li {
    list-style-type: circle;
  }

  ul {
    padding-left: 2rem;
  }
}
show-modal-button {
  button {
    padding: 0;
    margin: 0;
    border: none;
    text-align: left;
    background: inherit;
 }
}
fees-quoting-table {
  table {
    width: 100%;
    text-align: center;
    background: #eee;
    border: 10px solid #eee;

    thead {
      font-weight: bold;
    }
  }
}
.panel-form-group {
  display: flex;
  gap: 1rem;

  .field-star {
    min-width: 1.2rem;
  }

  .starred-fields {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 0.5rem;

    > * {
      margin: 0;
    }
  }
}
show-visit .visit-note-overlay {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.7);
}

show-visit .visit-note-overlay-container {
  position: relative;
}
.hi-service-message-card {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.hi-service-message-card-metadata, .hi-service-message-card-data {
  flex: 1;
}

.hi-service-message-card-data pre {
  font-size: 1rem;
}

.hi-service-message-card-metadata-datum {
  display: flex
}

.hi-service-message-card-metadata-label {
  flex: 1;
  flex-grow: 0.25;
  font-weight: bold;
}

.hi-service-message-card-metadata-value {
  flex: 1;
}
.review-actions-medicare-no-ihi table.patient-details {
  margin: 2em 0 0 0;
}

.review-actions-medicare-no-ihi .proceed-body {
  margin: 1em 0 0 0;
}

.review-actions-medicare-no-ihi .actions {
  margin: 1em 0 0 0;
}
.review-actions-non-medicare-no-ihi table.patient-details {
  margin: 2em 0 0 0;
}

.review-actions-non-medicare-no-ihi .proceed-body {
  margin: 1em 0 0 0;
}

.review-actions-non-medicare-no-ihi .actions {
  margin: 1em 0 0 0;
}
complete-investigation-todo-form {
  display: block;
}
letter-attachable-item {
  .attached-indicator {
    display: none;
  }

  &[data-attached] .attached-indicator {
    display: inline-flex;
    align-items: center;
  }
}
letter-attachable-items-list {
  display: block;

  /* Loading state on the load-more button: hide chevron, show a CSS-only donut */
  /* spinner. NOTE: this button + spinner is duplicated from records-list and */
  /* todos-list — slated for extraction into a shared component (see follow-up). */
  .load-more-button {
    .chevron-down {
      display: block;
    }

    &:hover:not(.loading) .chevron-down {
      animation: load-more-bob 0.6s ease-in-out infinite;
    }

    &.loading {
      opacity: 0.6;
      cursor: default;
      pointer-events: none;

      .chevron-down {
        display: none;
      }

      &::after {
        content: "";
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        margin-left: 0.3rem;
        border: 0.3rem solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: load-more-spin 0.6s linear infinite;
      }
    }
  }
}

/* Keyframes must stay at the top level, not nested in a style rule — the CSS */
/* Nesting spec drops a nested @keyframes silently, so the animation never runs. */
@keyframes load-more-spin {
  to { transform: rotate(360deg); }
}

@keyframes load-more-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(1px); }
  75% { transform: translateY(-1px); }
}
letter-attachments-accordion {
  /* The accordion lives in the 24rem letter-compositor sidebar, where the
     three default tab titles (Investigations / Documents / Consultations)
     can't fit at the default size. Equal-width tabs that truncate with an
     ellipsis match the mockup's compact rail.
     The accordion-body wraps tabs in an items-start flex column, so x-tabs
     is content-sized by default — force it to the parent's full width so
     the flex children below actually share that width. */
  x-tabs {
    display: block;
    width: 100%;
  }

  x-tabs nav {
    display: flex;
    height: calc(var(--tw-spacing) * 10);
    width: 100%;
  }

  x-tabs nav .tab-title {
    border-bottom: 2px solid transparent;
    align-items: center;
    display: flex;
    flex: 1 1 auto;
    min-width: 1rem;
    font-size: var(--tw-text-xs);
    justify-content: center;
    padding: 0.5rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    &[data-active] {
      font-weight: bold;
      border-bottom: 2px solid var(--tw-color-primary);
    }
  }
}
letter-body-editor {
  /* Lay the editor + its Quill toolbar out as a flex column with min-height: 0
     so that when a height-constrained ancestor (the single-column mobile grid
     squeezes the "body" row to min-content) shrinks this container, the editor
     shrinks WITH it and scrolls internally — rather than the min-height'd
     .letter-body-quill overflowing the container and (being position: relative
     via Quill) painting over the signing block that follows it. */
  .letter-body-editor-container {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  .letter-body-quill {
    min-height: 18rem;
    max-height: 40rem;
    overflow-y: auto;
    /* Quill's default .ql-editor uses height: 100%, which collapses to content
       height here because the container only sets min/max-height (a percentage
       height needs an explicitly-specified height to resolve against). Lay the
       container out as a flex column so the editor can flex to fill it instead,
       making the whole min-height band clickable/editable. */
    display: flex;
    flex-direction: column;
  }

  .ql-toolbar.ql-snow {
    flex-shrink: 0; /* keep the toolbar at full height when the column is squeezed */
    background-color: oklch(98.4% .003 247.858); /* Tailwind slate-50 */
    border: none;
    border-bottom: 1px solid oklch(92.9% .013 255.508); /* Tailwind slate-200 */

    .ql-picker.ql-header {
      * { font-family: unset; }
      font-family: "Inter", "Liberation Sans", Arial, sans-serif;
      width: 12rem;
    }
    /* Format-dropdown preview. Kept here rather than in the shared tokens: the
       Quill toolbar is inserted outside .letter-content, so it can't inherit the
       --lc-* custom properties. Sizes are a visual hint at the H1/H2 hierarchy. */
    .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
      font-size: 2rem;
    }

    .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
      font-size: 1.8rem;
    }
  }

  .ql-container.ql-snow {
    border: none;
    font-size: unset;
  }

  .ql-editor {
    flex: 1 1 auto; /* fill .letter-body-quill rather than relying on height: 100% */
    font-size: 1.6rem;
    line-height: unset;

    ol, ul {
      padding-left: unset;
    }

    h1, h2 {
      line-height: unset;
    }
  }
}
letter-clinical-record-panel {
  /* Side-by-side layout: toggle becomes visible, collapse is possible.
     Responds to the letter-compositor container width (Tailwind @3xl =
     76.8rem = 768px), not the viewport — the panel lives in a split-screen
     pane that can be narrow while the viewport is wide. */
  @container (min-width: 768px) {
    display: flex;
    flex-direction: row;
    align-items: flex-start;

    .panel-toggle {
      display: block;
      flex-shrink: 0;

      .toggle-panel-button {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 3rem;
        height: 3rem;
        border-radius: 0.4rem;
        transition: background-color 0.15s;

        &:hover {
          background-color: rgba(0, 0, 0, 0.05);
        }

        .double-chevron {
          display: flex;
          transition: transform 0.3s ease;

          .svg-icon + .svg-icon {
            margin-left: -0.55em;
          }
        }
      }
    }

    .clinical-record-panel-body {
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      opacity: 1;
      transition: opacity 0.3s ease;

      /* Hold the content at its expanded width so it's clipped by the overflow
         above as the body narrows, rather than reflowing/wrapping (which looked
         jarring). That expanded width is dictated by the sidebar, so rather than
         hardcode a sidebar-derived constant here, the JS freezes the measured
         width into --expanded-body-width on collapse (mirrors --right-pane-px in
         split-screen-container). The 100% fallback fills the body before the
         first collapse and on re-expand.

         The left inset lives here on the children, NOT as padding on the body:
         padding on the body would sit on the flex item we shrink, and
         flex-shrink never reduces padding — so 2rem would stay reserved and
         hold the toggle off the left edge when collapsed. On the children it's
         clipped away by the overflow above like the rest of the content,
         letting the body shrink fully to 0 so the toggle sits flush left. */
      > * {
        min-width: var(--expanded-body-width, 100%);
        padding-left: 2rem;
      }
    }

    /* Collapsed state */
    &[data-collapsed] {
      .clinical-record-panel-body {
        opacity: 0;
        pointer-events: none;
      }

      .toggle-panel-button .double-chevron {
        transform: scaleX(-1);
      }
    }
  }
}
letter-compositor {
  /* Named grid template areas — no clean Tailwind equivalent. Only
     active in 1-column mode, where the layout uses display: grid. In
     2-column mode the layout switches to flex and these rules are inert. */
  .compositor-layout {
    grid-template-areas:
      "recipient"
      "sidebar"
      "body"
      "attachments"
      "reception-instructions";
  }

  &[data-previewing] .compositor-layout {
    grid-template-rows: 100%;
    grid-template-areas:
      "preview-surface";
  }

  .area-sidebar     { grid-area: sidebar; }

  letter-recipient-fields { grid-area: recipient; }
  letter-body-editor { grid-area: body; }
  letter-attachments-list { grid-area: attachments; }
  letter-instructions-for-reception { grid-area: reception-instructions; }

  /* Hide every direct child except the spinner template (and the stamped
     loading-spinner element) while loading. Tailwind can't cleanly
     express the :not(template):not(loading-spinner) exception. */
  &[data-loading] > :not(template):not(loading-spinner) {
    display: none;
  }

  /* In-place preview overlay. When data-previewing is set on the host,
     the letter body view is hidden and the preview surface host is
     shown. The body view stays in the DOM (not removed) so unsaved
     draft state (recipient/subject/body field values, the contenteditable
     editor's content, the attachment list) is preserved across a preview
     open/close cycle — see [PRV-BEHAVIOUR-022], [PRV-BEHAVIOUR-023]. */
  &[data-previewing] .letter-body-view {
    display: none;
  }

  &[data-previewing] .preview-surface-host {
    display: block;
  }

  /* Both preview surfaces live in the DOM permanently (each loads itself
     on demand). Within the shown overlay, reveal only the surface matching
     the active preview kind; the other keeps its last-loaded content but
     stays out of view. */
  &[data-preview-kind="record"] letter-consultation-preview,
  &[data-preview-kind="consultation"] letter-record-preview {
    display: none;
  }
}
letter-compositor-pane {
  @layer bootstrap {
    * {
      font-family: unset;
    }
    h1, h2, h3, h4, h5, h6, p,
    label {
      margin: unset;
    }
    label {
      font-weight: unset;
    }
  }

  display: block;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;


  /* The preview-generating-overlay is position: absolute relative to the
     dialog body. Make the body a positioning context. */
  .dialog-body {
    position: relative;
  }

  &[data-mode="edit"] {
    letter-preview { display: none; }
    .footer-preview-mode { display: none; }
  }

  &[data-mode="preview"] {
    letter-compositor { display: none; }
    .footer-edit-mode { display: none; }
    /* Make the body a flex column so the preview iframe can stretch to fill it */
    .dialog-body { display: flex; flex-direction: column; }
  }
}
letter-header-menu {
  display: block;

  .dropdown-menu button {
    text-align: left;
    width: 100%;
  }
}
letter-preview {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;

  .preview-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex: 1;
  }

  .preview-iframe {
    flex: 1;
    width: 100%;
    border: 0;
    min-height: 0;
  }

  .preview-iframe[hidden] {
    display: none;
  }

  .preview-loading[hidden] {
    display: none;
  }
}
@keyframes loadingMap
{
  0%   { left: 0; }
  50% { left: 100%; }
  100%   { left: 0; }
}

.widget map-container .splash-screen {
  top: -20%;
}

map-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
  position: relative;

  &:not(.with-splash-screen) .splash-screen {
    display: none;
  }

  &.with-splash-screen .splash-screen--container {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;

    .splash-screen {
      position: relative;
      background-color: rgba(0, 0, 0, 0.5);
      color: white;
      font-weight: bold;
    }

    .splash-screen--text {
      padding: 0.7em 2em 1em;
    }

    .splash-screen--progress-bar-container {
      width: 100%;
      padding-right: 8px;
    }

    .splash-screen--progress-bar {
      width: 8px;
      height: 4px;
      background: #118000;
      position: relative;
      left: 0;
      animation: loadingMap 1s ease-out;
      animation-iteration-count:infinite;
    }
  }

  &.with-blurred-splash-screen .splash-screen--container {
    backdrop-filter: blur(4px);

    .splash-screen {
      background-color: rgba(0, 0, 0, 0.4);
    }
  }

  .map {
    flex-grow: 1;
    width: 100%;
    height: 48vh;
  }

  .shift-table {
    ul {
      li {
        display: flex;
        align-items: center;
        padding: 2px;
        margin: 0;

        span {
          line-height: 1.1em;
        }

        .crosshair {
          width: 18px;
          height: 18px;
          color: white;
          margin: 0 6px 0 0;
        }
      }
    }
  }
}

.full-screen-map {
  map-container {
    height: 100vh;
  }
}
notices-drawer-drawer-content {
  --is-wide-screen: 0;

  align-items: flex-start;
  background-color: #f3f4f6;
  display: flex;
  flex: 1;
  justify-content: center;

  .notices-list {
    background-color: white;
    display: flex;
    flex-direction: column;
    height: 100%;

    .results-page {
      background-color: #f3f4f6;
    }
  }

  .pagination-section {
    background-color: white;
    min-height: 2rem;
  }

  .pagination-sentinel {
    display: flex;
    justify-content: center;
    padding: 1rem;

    &:not([data-url]) {
      display: none;
    }
  }

  .loading-dots {
    display: flex;
    gap: 0.4rem;

    span {
      width: 0.5rem;
      height: 0.5rem;
      background-color: #777;
      border-radius: 50%;
      animation: dot-pulse 1.2s ease-in-out infinite;

      &:nth-child(2) { animation-delay: 0.2s; }
      &:nth-child(3) { animation-delay: 0.4s; }
    }
  }

  .notices-drawer-notice-item[selected] {
    .notice-header {
      /* Need to set background color explitity so it doesn't appear transparnet in sticky state. */
      background-color: #f3f4f6
    }
  }

  .notices-drawer-notice-item:not([selected]) {
    background-color: white;
  }

  .detail-area-empty-state {
    display: none;
  }

  .empty-state {
    width: 100%;
    padding: 2rem 0;
  }

  @media (min-width: 768px) {
    --is-wide-screen: 1;
    justify-content: flex-start;
    position: relative;

    .detail-area-empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 0;
      left: var(--drawer-width);
      right: 0;
      bottom: 0;
      background-color: #f3f4f6;
      color: #6b7280;
      padding: 1rem;

      p {
        margin-top: 0.5rem;
        font-size: 1.4rem;
      }
    }

    /* Hide empty state when a notice is selected */
    &:has(.notices-drawer-notice-item[selected]) .detail-area-empty-state {
      display: none;
    }

    .notices-list:has(> .results-page .notices-drawer-notice-item:last-of-type[selected]) .pagination-section {
      content: "";
      border-top-right-radius: 1.2rem;
      display: block;
      overflow: hidden;
    }

    .notices-drawer-notice-item[selected] {
      border-bottom: none;
    }

    .notices-drawer-notice-item[selected] + .notices-drawer-notice-item:not([selected]) {
      border-top-right-radius: 1.2rem;
      overflow: hidden;
    }

    .notices-drawer-notice-item:not([selected]):has(+ .notices-drawer-notice-item[selected]) {
      border-bottom-right-radius: 1.2rem;
      overflow: hidden;
    }
  }

  .notice-placeholder {
    display: grid;
    grid-template-areas:
      "indicator content timestamp"
      "indicator sub-message sub-message";
    grid-template-columns: 1rem auto 2fr;
    column-gap: 0.5rem;
    row-gap: 0.5rem;
    padding: 1.2rem 1.6rem;
    border-bottom: 1px solid #e5e7eb;

    .placeholder-unread-indicator {
      grid-area: indicator;
      width: 0.8rem;
      height: 0.8rem;
      border-radius: 50%;
      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
      background-size: 200% 100%;
      animation: placeholder-shimmer 1.5s infinite;
      align-self: center;
    }

    .placeholder-content {
      grid-area: content;
      display: flex;
      gap: 0.5rem;
    }

    .placeholder-line {
      height: 1.4rem;
      border-radius: 0.25rem;
      background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
      background-size: 200% 100%;
      animation: placeholder-shimmer 1.5s infinite;

      &.placeholder-line-short {
        width: 6rem;
        grid-area: timestamp;
        justify-self: end;
      }

      &.placeholder-line-medium {
        width: 60%;
        grid-area: sub-message;
      }

      &.placeholder-line-long {
        width: 20rem;
      }
    }
  }
}

/* @keyframes must stay at the top level, not nested in a style rule — the CSS */
/* Nesting spec drops a nested @keyframes silently, so the animation never runs. */
@keyframes dot-pulse {
  0%, 80%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes placeholder-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
notices-drawer-filter-dropdown-item {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.6rem;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  &[selected] {
    background-color: #e8e8e8;
  }

  &:not([data-total-count-text]) .filter-count,
  &[data-total-count-text=""] .filter-count,
  &[data-total-count-text="0"] .filter-count,
  &:not([show-count]) .filter-count {
    display: none;
  }
}
notices-drawer-filter-select {
  display: block;
  height: auto;
  min-width: 19rem;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .filter-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    width: max-content;
    min-width: 100%;
  }
}
.notices-drawer-notice-item {
  display: grid;
  grid-template-rows: 1fr;
  border-bottom: 1px solid #e5e7eb;
  cursor: pointer;
  transition: grid-template-rows 0.2s ease-out, opacity 0.2s ease-out, border-bottom-width 0.2s ease-out;

  > * {
    overflow: hidden;
    min-height: 0;
  }

  &[data-archiving] {
    grid-template-rows: 0fr;
    opacity: 0;
    border-bottom-width: 0;
  }

  &[disabled] {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
  }

  &[data-read] {
    .unread-indicator {
      display: none;
    }
  }

  &:not([data-read]) {
    .mark-notice-unread-button, .archive-notice-button {
      display: none;
    }
  }

  &[data-archived] {
    .archive-notice-button, .mark-notice-unread-button {
      display: none;
    }
  }

  &:not([data-archived]) {
    .unarchive-notice-button {
      display: none;
    }
  }

  &:not([data-read]) .notice-message {
    font-weight: 600;
  }

  .notice-header {
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    display: grid;
    grid-template-areas:
      "icons message date"
      "icons sub-message actions";
    grid-template-columns: 2rem auto 2fr;
    padding: 1.2rem 1.6rem;
  }

  .unread-indicator {
    align-self: center;
    grid-area: icons;
    width: 0.8rem;
    height: 0.8rem;
    background-color: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
    justify-self: center;
  }

  .notice-message {
    grid-area: message;
    font-size: 1.4rem;
    color: #374151;
  }

  .notice-timestamp {
    grid-area: date;
    font-size: 1.2rem;
    color: #9ca3af;
    justify-self: end;
    white-space: nowrap;
  }

  .notice-sub-message {
    color: #6b7280;
    font-size: 1.3rem;
    grid-area: sub-message;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .notice-actions {
    grid-area: actions;
    display: flex;
    gap: 0.8rem;
    justify-content: end;
  }

  .notice-action-button {
    padding: 0.3rem;
    border-radius: 0.3rem;

    &:hover {
      background-color: #eaeaea;
    }

    svg.svg-icon {
      width: 2.7rem;
      height: 2.7rem;
    }

    svg.noun-project-archive-box-4898145 {
      margin-bottom: -1px; /* Icon appears slightly off-center, this visually centers it */
    }

    &[disabled] {
      cursor: not-allowed;

      svg.svg-icon {
        opacity: 0.5;
      }
    }
  }

  .archive-notice-button, .unarchive-notice-button, .mark-notice-unread-button {
    font-size: 1.4rem;
    color: #6b7280;
    background: none;
    border: none;
    cursor: pointer;
    justify-self: end;

    &:hover {
      color: #374151;
    }
  }

  .notice-body {
    padding: 0 1.6rem 1.2rem;
  }

  animatable-accordion[open] {
    .notice-header {
      position: sticky;
      top: 0;
      z-index: 1;
    }

    .notice-message {
      white-space: normal;
    }
  }

  .notice-deleted-message {
    font-size: 1.4rem;
    color: #9ca3af;
    font-style: italic;
  }

  /* Selected state styling (used on wide screens for master-detail view) */
  &[selected] {
    background-color: #f3f4f6;
  }

  &[selected] .notice-message {
    white-space: normal;
  }
}

@media (min-width: 768px) {
  .notices-drawer-notice-item {
    /* Selected item's body is absolutely positioned in the detail area */
    animatable-accordion[open] .notice-body {
      display: block;
      position: absolute;
      top: 0;
      left: var(--drawer-width);
      right: 0;
      bottom: 0;
      overflow-y: auto;
      background-color: #f3f4f6;
      padding: 1rem;
      z-index: 1;
    }

    animatable-accordion[closing] .notice-body {
      display: none;
    }
  }
}
notices-drawer {
  --drawer-width: 37rem;
  --detail-panel-width: 40rem;
  --header-height: 6.5rem;
  --drawer-transition-duration: 0.2s;

  background-color: white;
  bottom: 0;
  display: flex;
  flex-direction: column;
  top: 6.9rem;
  min-width: var(--drawer-width);
  overflow-y: auto;
  position: fixed;
  z-index: 1041;
  right: calc(-1 * var(--drawer-width));
  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.2);
  transition: right var(--drawer-transition-duration) ease,
              width var(--drawer-transition-duration) ease;

  &[data-open] {
    right: 0;
  }

  .drawer-header {
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;

    .header-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .notices-header-title {
      font-weight: bold;
    }

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

    .completed-tasks-notices-info {
      display: none;

      .info-bubble {
        width: 100%;

        .completed-tasks-count-message {
          display: block;
        }

        .archive-completed-task-notices-link {
          padding: 0;
          font-size: inherit;
        }
      }
    }

    &[data-has-completed-tasks] .completed-tasks-notices-info {
      display: block;
    }
  }

  .empty-state {
    .svg-icon {
      color: #9ca3af;
    }
  }

  notices-drawer-drawer-content {
    .notices-list {
      width: var(--drawer-width);
    }
  }


  @media (min-width: 768px) {
    /* Always show full width (list + detail area) on wide screens */
    width: calc(var(--drawer-width) + var(--detail-panel-width));

    /* Hide fully off-screen when closed (account for wider width) */
    &:not([data-open]) {
      right: calc(-1 * (var(--drawer-width) + var(--detail-panel-width)));
    }

    .drawer-header {
      .info-bubble {
        .completed-tasks-count-message {
          display: inline;
        }
      }
    }

    notices-drawer-drawer-content {
      flex-shrink: 0;
      /* Explicit width ensures absolutely positioned children (like .notice-body)
       * can use right: 0 to account for scrollbar width */
      width: 100%;
    }
  }
}

notices-drawer-todo-notice-item.notices-drawer-notice-item {
  .notice-header {
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    display: grid;
    grid-template-areas:
      "icons message message date"
      "icons sub-message sub-message actions"
      "icons todo-actionable-icon task-badges task-badges";
    grid-template-columns: 2rem auto auto 2fr;
    padding: 1.2rem 1.6rem;
  }

  .notice-type-icon {
    align-self: start;
    grid-area: icons;

    svg {
      fill: #6b7280;
    }
  }

  .notice-task-badges {
    align-self: center;
    grid-area: task-badges;
    display: flex;
    gap: 0.5rem;
    justify-self: end;

    .label {
      font-size: 1rem;
      text-transform: uppercase;
    }
  }

  &:not([data-todo-urgent]) .notice-task-urgent-badge {
    display: none;
  }

  &[data-todo-completed] {
    .notice-task-urgent-badge, .notice-task-new-badge {
      display: none;
    }
  }

  &:not([data-todo-status=new]) .notice-task-new-badge {
    display: none;
  } 

  .todo-actionable-icon {
    align-self: center;
    grid-area: todo-actionable-icon;
    margin-left: -3px;

    svg {
      fill: #6b7280;
    }
  }

  &:not([data-todo-completed]) .notice-task-completed-badge {
    display: none;
  }
}
notices-drawer-unread-counter-badge {
  &[data-count="0"] {
    display: none;
  }
}
.affiliations-edit-mims-tsandcs {
  background-color: #fff;
  overflow-y: scroll;
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  max-height: 30vh;
}
patient-allergies-cautions-badge {
  &[data-count="0"] {
    display: none;
  }

  .badge-button {
    padding: 0.2rem 0.3rem 0.2rem 0.5rem;
    font-size: 1.2rem;
    font-weight: normal;
    color: #ee9b15;
    background: none;
    border: 1px solid #ee9b15;
    border-radius: 0.4rem;
    cursor: pointer;

    svg {
      width: 1.5rem;
      height: 1.5rem;
      fill: #ee9b15;
    }

    &:hover {
      background-color: #ee9b15;
      color: white;

      svg {
        fill: white;
      }
    }

    &:focus {
      outline: none;
    }

    &:focus-visible {
      outline: 2px solid #ee9b15;
      outline-offset: 2px;
    }
  }
}
patient-allergies-cautions-dialog {
  .allergies-section,
  .cautions-section {
    margin-top: 1.5rem;

    &[data-count="0"] {
      display: none;
    }
  }

  .section-title {
    margin: 0;
  }

  .allergies-list,
  .cautions-list {
    margin: 1rem 0 0 0;
    padding-left: 1.5rem;

    li {
      background-color: #f7f7f7;
      border-radius: 0;
      border-style: none;
      padding: 0.8rem;
      color: #444;
      margin-top: 0;

      & + li {
        margin-top: 0.3rem;
      }
    }
  }
}
patient-allergies-cautions-dialog-content {
  &:not([data-loading]) {
    loading-spinner {
      display: none;
    }
  }

  &[data-loading] {
    .patient-allergies-cautions-dialog-content-body {
      display: none;
    }
  }
}
.patient-badges {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0.4rem;

  &:has(patient-regular-gp-badge:not([data-has-regular-gp])):has(patient-allergies-cautions-badge[data-count="0"]) {
    display: none;
  }
}
patient-do-not-book-warning {
  display: block;

  .info-bubble {
    margin: 1rem 0 0 0;
  }
}
patient-main-card-tab {
  display: block;

  patient-header {
    display: block;
    margin-top: 0.4rem;
  }

  .extra-info, .contact-bar {
    margin-top: 1rem;
  }
}
.patient-name-and-badges {
  flex-wrap: wrap;

  .patient-name {
    margin-bottom: 0;
  }
}
patient-regular-gp-badge {
  display: inline-block;
  text-transform: uppercase;

  &:not([data-has-regular-gp]) {
    display: none;
  }

  .label {
    background-color: #777;
  }
}
search-by-proximity-results li {
  padding: 0.5em;
  margin-bottom: 0 !important;
}

search-by-proximity-results li:hover {
  background: #f7f7f7;
  cursor: pointer;
}
search-result-card {
  patient-header {
    display: block;
    margin-top: 0.4rem;
  }
 }
supplied-ihi-link {
  background-color: #f1f1f1;
  display: block;
  padding: 1em;
  width: 100%;
}
unified-search-result-card {
  patient-header {
    display: block;
    margin-top: 0.4rem;
  }
 }
button.unlock-section {
  border: none;
  color: #2489fd;
  padding: 0;
}

edit-prescribed-product-form {
  display: flex;

  error-panel.errors {
    margin-bottom: 1em;
  }
}
edit-prescribed-product-pane {
  /* Form body brings its own styles. Scoped rules added here if needed. */
}
.prescription-eop-body {
  font-family: sans-serif;
  height: 99mm;
  padding: 10mm;
}

.prescription-eop {
  border: 1px solid #000;
  display: grid;
  grid-template-columns: 66% 34%;
  grid-template-rows: 100%;
  height: 100%;
}

.prescription-eop-cell {
  font-size: 0.9rem;
  padding: 0.7mm;
}

.prescription-eop .prescribed-item-section {
  border-right: 1px solid #000;
  display: grid;
  grid-column: 1/2;
  grid-template-columns: 33% 67%;
  grid-template-rows: 20% 6.66% 6.66% 6.66% 60.02%;
}

.prescribed-item-drug-details {
  border-bottom: 1px solid #000;
  grid-column: 1/3;
}

.prescribed-item-section .details-title {
  border-bottom: 1px solid #000;
  grid-column: 1/3;
}

.prescribed-item-section .prescribed-date-title {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

.prescribed-item-section .prescribed-date {
  border-bottom: 1px solid #000;
}

.prescribed-item-section .repeats-authorised-title {
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}
.prescribed-item-section .repeats-authorised {
  border-bottom: 1px solid #000;
}

.prescribed-item-annotations {
  grid-column: 1/3;
}

.prescribed-item-annotations .token-notice {
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.prescribed-item-annotations .privacy-notice {
  font-size: 0.5rem;
}

/* this should be 1/4 of the width */
.prescription-eop .prescriber-section {
  display: grid;
  grid-column: 2/3;
  grid-template-columns: 67% 33%;
  grid-template-rows: 20% 30% 50%;
}

.prescriber-section .prescriber-doctor-name {
  grid-column: 1/2;
  grid-row: 1/2;
}

.prescriber-section .prescriber-practice-details {
  grid-column: 1/2;
  grid-row: 2/3;
}

.prescriber-section .prescription-qr-image {
  grid-column: 1/2;
  grid-row: 3/4;
  font-size: 0.5rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

.prescription-qr-image svg {
  width: auto;
  height: 65%;
  margin-bottom: 5px;
}

.prescriber-section .prescriber-ntbs {
  color: #aaa;
  grid-column: 2/3;
  grid-row: 1/4;
  justify-self: center;
  writing-mode: vertical-rl;
  text-align: center;
}

prescribed-product-authority-section {
  &[hidden] {
    display: none;
  }

  .prescribed-product-authority-locked-info {
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;

    .prescription-number-and-change-button {
      align-items: flex-start;
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
    }
  }

  &:not([locked]) .prescribed-product-authority-locked-info {
    display: none;
  }

  &[locked] .prescribed-product-authority-form {
    display: none;
  }

  .prescribed-product-authority-number-and-button,
  .prescribed-product-authority-approval-and-button {
    display: flex;
    gap: 8px;
  }

  .prescribed-product-authority-prescription-number-readonly {
    padding: 8px;
  }

  .prescribed-product-authority-prescription-number-readonly,
  .prescribed-product-authority-approval-number {
    flex: 1 70%;
  }

  .prescribed-product-detach-authority-btn,
  .prescribed-product-confirm-authority-btn {
    flex: 1 30%;
    min-width: 120px;
  }
}
prescribed-product-brand-section[hidden] {
  display: none;
}

prescribed-product-brand-section[mode="lemi"] .prescribed-product-brand-lmbc,
prescribed-product-brand-section[mode="lmbc"] .prescribed-product-brand-lemi,
prescribed-product-brand-section[mode="other"] .prescribed-product-brand-lmbc,
prescribed-product-brand-section[mode="other"] .prescribed-product-brand-lemi {
  display: none;
}

prescribed-product-brand-section:not([mode="lmbc"]) .prescribed-product-brand-clinically-necessary-options {
  display: none;
}
prescribed-product-directions-section[hidden] {
  display: none;
}

prescribed-product-directions-section[mode=specify] .prescribed-product-freeform-directions,
prescribed-product-directions-section[mode=freeform] .prescribed-product-directions-specify {
  display: none;
}

.directions-spec-row > input, .directions-spec-row > clearable-input {
  display: block;
  flex: 1;
}

.directions-dose-row,
.directions-frequency-row,
.directions-duration-row,
.directions-route-row {
  display: block;
  position: relative;
}

.prescribed-product-directions-specify searchable-field-results {
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1;
}

.prescribed-product-directions-specify searchable-field-results ul:empty {
  display: none;
}

.prescribed-product-directions-specify searchable-field-results ul {
  border: 1px solid #aaaaaa;
}

.prescribed-product-directions-specify searchable-field-results ul li {
  cursor: pointer;
  padding: 9px 1em 9px 0.4em;
}

prescribed-product-directions-section .frequency-search-term-and-prn,
prescribed-product-directions-section .duration-search-term-and-ongoing {
  display: flex;
  gap: 1em;
  justify-content: space-between;
}

prescribed-product-directions-section .frequency-search-term-and-prn > clearable-input,
prescribed-product-directions-section .duration-search-term-and-ongoing > clearable-input {
  flex: 1 66%;
}

prescribed-product-directions-section .frequency-prn-field,
prescribed-product-directions-section .ongoing-duration-field {
  flex: 1 33%;
  padding: 4px;
}
prescribed-product-other-section[hidden] {
  display: none;
}
prescribed-product-schedule-section .prescribed-product-pbs-code-list {
  background-color: #f1f1f1;;
  padding: 1em;
  margin-bottom: 1em;
  display: block;
}

prescribed-product-schedule-section[mode="private"] .prescribed-product-pbs-code-list {
  display: none;
}

prescribed-product-schedule-section .prescribed-product-pbs-code-list .summary {
  margin-bottom: 1em;
}

prescribed-product-schedule-section .prescribed-product-pbs-code-list .restriction {
  background-color: white;
  margin-bottom: 1em;
  padding: 1em;
}

.prescribed-product-pbs-restriction .prescribed-product-pbs-restriction-text {
  position: relative;
}

.prescribed-product-pbs-restriction .prescribed-product-pbs-restriction-show-moreless-btn {
  padding: 0.5em 1em;
  width: 100%;
  border: 0;
  background: transparent;
  font-weight: bold;
  color: #2489fd;
}

.prescribed-product-pbs-restriction.showing-less .prescribed-product-pbs-restriction-text {
  max-height: 7.5em;
  overflow: hidden;
}

.prescribed-product-pbs-restriction.showing-less[data-truncated] .prescribed-product-pbs-restriction-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3em;
  background-image: linear-gradient(to top, white 0%, transparent 100%);
  pointer-events: none;
}

.prescribed-product-pbs-restriction.showing-less .prescribed-product-pbs-restriction-show-moreless-btn::before {
  content: '▾ show more';
}

.prescribed-product-pbs-restriction.showing-more .prescribed-product-pbs-restriction-show-moreless-btn::before {
  content: '▴ show less';
}

.prescribed-product-pbs-restriction.showing-less:not([data-truncated]) .prescribed-product-pbs-restriction-show-moreless-btn {
  display: none;
}

.prescribed-product-pbs-select-restriction-btn {
  width: 100%;
}

.prescribed-product-extemp-pbs-code {
  margin-bottom: 0.5em;
}
.prescribed-product-product-search-term-and-results {
  position: relative;
}

prescribed-product-product-search clearable-input {
  display: block;
}

prescribed-product-product-search clearable-input .svg-icon {
  fill: #aaa;
  stroke: #aaa;
}
prescribed-product-product-search-results {
  background-color: white;
  position: absolute;
  width: 100%;
  z-index: 1;
}

prescribed-product-product-search-results ul:empty {
  display: none;
}

prescribed-product-product-search-results ul {
  border: 1px solid #aaaaaa;
}

prescribed-product-product-search-results ul li {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  cursor: pointer;
  padding: 9px 1em 9px 0.4em;
}

prescribed-product-product-search-results .searchable-field-result:hover {
  background: #f7f7f7;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}

prescribed-product-product-search-results .prescribed-product-product-search-no-results {
  cursor: auto;
}

prescribed-product-product-search-more-btn {
  width: 100%;
}
prescribed-product-product-section {
  &[mode="search"] .prescribed-product-custom-text {
    display: none;
  }

  &[mode="custom"] prescribed-product-product-search {
    display: none;
  }

  &[product-locked] .prescribed-product-product-source {
    display: none;
  }

  &:not([product-locked]) .prescribed-product-locked {
    display: none;
  }

  prescribed-product-product-search {
    display: block;
    position: relative;
  }

  .prescribed-product-locked {
    align-items: flex-start;
    background-color: #f1f1f1;
    display: flex;
    gap: 0.5rem;
    justify-content: space-between;
    padding: 1em;
  }

  .prescribed-product-dose-form-row {
    position: relative;
  }

  .prescribed-product-custom-name {
    margin-bottom: 1rem;
  }
}
prescribed-product-schedule-section {
  &[hidden] {
    display: none;
  }

  &[pbs-schedule-locked] .prescribed-product-scheme {
    display: none;
  }

  .prescribed-product-pbs-schedule-locked {
    background-color: #f1f1f1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.4rem;

    .pbs-code-and-change-button {
      align-items: flex-start;
      display: flex;
      gap: 0.5rem;
      justify-content: space-between;
    }

    .prescribed-product-pbs-restriction.showing-less[data-truncated] .prescribed-product-pbs-restriction-text::after {
      background-image: linear-gradient(to top, #f1f1f1 0%, transparent 100%);
    }

    .prescribed-product-pbs-restriction.showing-less:not([data-truncated]) .prescribed-product-pbs-restriction-show-moreless-btn {
      display: none;
    }
  }

  &:not([pbs-schedule-locked]) .prescribed-product-pbs-schedule-locked {
    display: none;
  }

  .prescribed-product-schedule-skeleton {
    display: none;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1rem 0;
  }

  &[loading] .prescribed-product-schedule-skeleton {
    display: flex;
  }

  &[loading] form {
    display: none;
  }

  .skeleton-row,
  .skeleton-block {
    background-color: #e5e7eb;
    border-radius: 0.4rem;

    @media (prefers-reduced-motion: no-preference) {
      animation: schedule-skeleton-pulse 1.4s ease-in-out infinite;
    }
  }

  .skeleton-row {
    height: 1.6rem;
  }

  .skeleton-block {
    width: 100%;
  }
}

@keyframes schedule-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}
prescribed-product-supply-section[hidden] {
  display: none;
}

.supply-spec-row {
  display: flex;
  gap: 1em;
  justify-content: space-between;
  margin-bottom: 0.5em
}

.supply-spec-row > input {
  flex: 1 50%;
}

button.prescribed-product-quantity-calculate-btn {
  border: none;
  text-align: left;
  white-space: normal;
}
prescribed-product-supply-units {
  flex: 1 50%;
  padding: 8px;
}
.printable-prescription {
  display: grid;
  grid-template-columns: 105mm 105mm;
}

.printable-prescription-label {
  font-family: sans-serif;
  line-height: 0.9;
}

.printable-prescription-value {
  font-family: monospace;
  box-sizing: border-box;
}

.printable-prescription-pharmacist-copy {
  grid-column: 1;
  border-right: 1px dotted gray;
}

.printable-prescription-medicare-copy {
  grid-column: 2;
}

.printable-prescription-copy {
  display: grid;
  grid-template-rows: 30mm 54.5mm 71mm 30mm
}

.printable-prescription-header {
  align-items: center;
  border-bottom: 1pt solid black;
  display: grid;
  grid-template-columns: 20mm 32mm 10mm 39mm;
  grid-template-rows: 19mm 10mm;
  gap: 1mm;
  padding-left: 1mm;
}

.printable-prescription-header .printable-prescription-label {
  font-size: 9pt;
}

.printable-prescription-prescriber-address {
  align-self: normal;
  font-size: 11pt;
  grid-column: 1 / 5;
}

.printable-prescription-prescriber-address-address {
  font-size: 9.5pt;
}

.printable-prescription-patient-section {
  /* Section height is 54.5mm overall */
  display: grid;
  grid-template-columns: 104mm;
  grid-template-rows: 7.5mm 18mm 4.5mm 12mm 4.5mm 8mm;
  padding-left: 1mm;
}

.printable-prescription-patient-section .printable-prescription-label {
  font-size: 8pt;
}

.printable-prescription-patient-medicare {
  align-items: center;
  display: grid;
  gap: 1mm;
  grid-template-columns: 30mm 72mm;
  grid-template-rows: 7.5mm;
}

.printable-prescription-patient-pben {
  align-items: center;
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 8mm 31mm 8mm 33mm;
  grid-template-rows: 7mm 8mm;
}

.printable-prescription-patient-pben-number {
  grid-column: 2/6;
}

.printable-prescription-patient-pben .printable-prescription-patient-concessional-label {
  font-size: 6.5pt;
}

.printable-prescription-patient-pben-number,
.printable-prescription-patient-sn,
.printable-prescription-patient-concessional,
.printable-prescription-brandsub {
  border: 1pt solid black;
  height: 8mm;
  padding: 6pt;
}

.printable-prescription-name-dob {
  align-items: center;
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 50mm 33mm;
  grid-template-rows: 4.5mm;
}

.printable-prescription-address {
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 84mm;
  grid-template-rows: 12mm;
}

.printable-prescription-date {
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 84mm;
  grid-template-rows: 4.5mm;
}

.printable-prescription-pbs-rpbs-brandsub {
  display: grid;
  gap: 1mm;
  grid-template-columns: 19mm 22mm 8mm 52mm;
  grid-template-rows: 8mm;
}

.printable-prescription-pbs-label, .printable-prescription-pbs-xout {
  grid-column: 1/2;
  grid-row: 1;
}

.printable-prescription-rpbs-label, .printable-prescription-rpbs-xout {
  grid-column: 2/3;
  grid-row: 1;
}

.printable-prescription-brandsub-label {
  align-self: center;
  font-weight: bold;
}

.printable-prescription-items-section {
  background-color: #ccffee;
  column-gap: 2mm;
  display: grid;
  grid-template-columns: [margin-start] 22mm [items-section-start] 81mm [items-section-end];
  grid-template-rows: 71% 13% 16%;
}

.printable-prescription-items-margin {
  background-color: #f0f0f0;
  grid-row-start: 1;
  grid-row-end: 4;
}

.printable-prescription-items {
  grid-column-start: 2;
  grid-row-start: 1;
}

.printable-prescription-item {
  margin-bottom: 2pt;
  border-bottom: 1px solid black;
}

.printable-prescription-item-name {
  font-weight: bold;
}

.printable-prescription-prescriber-name {
  grid-column-start: 2;
  grid-row-start: 2;
}
.printable-prescription-prescriber-signature {
  grid-column-start: 2;
  grid-row-start: 3;
}

.printable-prescription-barcode-section, .printable-prescription-declaration-section {
  display: grid;
  grid-template-columns: 104mm;
  padding-left: 1mm;
}

.printable-prescription-barcode-section {
  grid-template-rows: 10mm 20mm
}

.printable-prescription-barcode-header {
  padding: 1pt;
}

.printable-prescription-doctor-instruction {
  background-color: #cfe;
  padding: 3pt 8pt;
  color: white;
  display: inline-block;
  font-weight: bold;
  font-size: 8pt;
}

.printable-prescription-barcode-body {
  align-items: center;
  display: grid;
  font-family: monospace;
  font-weight: bold;
  grid-template-columns: 20mm 70mm;
  grid-template-rows: 10mm 4mm;
  text-align: center;
}

.printable-prescription-barcode-erx-label {
  font-size: 11pt;
  grid-column: 1;
  text-align: right;
}

.printable-prescription-barcode-image {
  grid-column: 2;
}

.printable-prescription-barcode-text {
  grid-column: 2;
  font-size: 8pt;
}

.printable-prescription-barcode-image svg {
  height: 10mm
}

.printable-prescription-declaration-section {
  grid-template-rows: 8mm 10mm 12mm;
}

.printable-prescription-additional-erx-logo {
  position: absolute;
  right: 10mm;
  top: 12mm;
}

.printable-prescription-erx-logo {
  width: 11mm;
}
review-prescribed-product-pane {
  /* Pending-group body and form-chrome bring their own styles. */
}
send-e-prescription-pane[paperless-mode="email"] .send-e-prescription-phone-number,
send-e-prescription-pane[paperless-mode="print_eop"] .send-e-prescription-phone-number {
  display: none;
}

send-e-prescription-pane[paperless-mode="sms"] .send-e-prescription-email-address,
send-e-prescription-pane[paperless-mode="print_eop"] .send-e-prescription-email-address {
  display: none;
}

send-e-prescription-pane[mode="paper"] .send-e-prescription-paperless-fields {
  display: none;
}
records-list {
  /* Loading state on the load-more button: hide chevron, show CSS-only */
  /* spinner. Tailwind's animate-spin keyframe doesn't compose with the */
  /* border-top transparent trick we use for the donut spinner, and the bob */
  /* animation on hover isn't expressible in the default theme — both keyframes */
  /* are defined at the top of this file (see the note there for why). */
  .load-more-button {
    .chevron-down {
      display: block;
    }

    &:hover:not(.loading) .chevron-down {
      animation: load-more-bob 0.6s ease-in-out infinite;
    }

    &.loading {
      opacity: 0.6;
      cursor: default;
      pointer-events: none;

      .chevron-down {
        display: none;
      }

      &::after {
        content: "";
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        margin-left: 0.3rem;
        border: 0.3rem solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: load-more-spin 0.6s linear infinite;
      }
    }
  }
}

/* Keyframes must stay at the top level, NOT nested inside `records-list`: the */
/* CSS Nesting spec doesn't permit @keyframes inside a style rule, so a nested */
/* definition is silently dropped and the animation never runs. */
@keyframes load-more-spin {
  to { transform: rotate(360deg); }
}

@keyframes load-more-bob {
  0%, 50%, 100% { transform: translateY(0); }
  25% { transform: translateY(1px); }
  75% { transform: translateY(-1px); }
}
remote-link {
  display: inline;
}

remote-link button {
  padding: 0;
  margin: 0;
  border: none;
  text-align: left;
  background: inherit;
}

remote-link .text {
  color: #2489fd;
}

remote-link .text:hover {
  text-decoration: underline;
}
reports-index {
  display: block;
  max-width: 640px;
}
.report-pdf-progress {
  display: none;
  font-style: italic;
  font-size: 0.75em;
  text-align: center;
} 
billing-line {
  flex: 1;
  display: flex;
  flex-direction: row;
  gap: 1rem;
  width: 100%;
  justify-content: flex-start;
  padding: 1rem;
}

billing-line .description {
  font-weight: bold;
  text-align: right;
  width: 7rem;
}

billing-line .charge {
  flex-grow: 2;
  text-align: left;
}

billing-line .status-action {
  align-self: flex-end
}

service-list-item {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  align-items: center;
  width: 100%;
  max-width: var(--max-element-width);
  margin: 1rem 0;
  overflow: hidden;
}

service-list-item .line-item-cost {
  background: rgba(0, 0, 0, 0.1);
}

service-list-item .gap {
  background: rgba(0, 0, 0, 0.05);
}

sign-in-form {
  .input {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

    &:focus {
      border-color: #66afe9;
      outline: 0;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 0.8rem rgba(102, 175, 233, 0.6);
    }
  }
}
gaps-table th {
  font-size: 90%;
  min-width: 8rem;
  overflow-wrap: anywhere;
  vertical-align: bottom;
}

gaps-table td {
  border-top: 1px dotted #ddd;
  font-size: 90%;
  height: 5rem;
  padding: 0;
}
accordion {
  display: block;
  margin: 1rem 0;

  summary {
    margin-top: 0;
    cursor: pointer;
    padding: 1rem;
    position: relative;
    user-select: none;
    background-color: #eee;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  details[open] .svg-icon {
    transform: rotate(90deg);
  }

  details summary::-webkit-details-marker {
    display: none;
  }

  details {
    border: 1px solid #ddd;
  }

  details[open] {
    transition: .25s transform ease;
  }

  .content {
    padding: 1rem;
  }
}
animatable-accordion {
  display: flex;
  flex-direction: column;

  > .header {
    cursor: pointer;
    > .chevron {
      .svg-icon {
        transition: transform 0.3s ease;
      }
    }
  }

  &[open] {
    > .header {
      > .chevron .svg-icon {
        transform: rotate(90deg);
      }
    }
  }
}
/*
 * Safari ignores width/height on native checkboxes — the layout box resizes
 * but the rendered checkbox stays at the OS default (~16px). Use transform
 * to scale the visual to roughly match the layout box set by the tw:size-* utilities.
 * @supports (-webkit-hyphens: none) is the standard WebKit-only
 * feature query.
 */
@supports (-webkit-hyphens: none) {
  ac-checkbox[data-size="md"] input[type="checkbox"] {
    transform: scale(1.5);
  }

  ac-checkbox[data-size="sm"] input[type="checkbox"] {
    transform: scale(1.25);
  }

  ac-checkbox[data-size="xs"] input[type="checkbox"] {
    transform: scale(1);
  }
}

ac-checkbox {
  display: inline-flex;
}
date-input-group {
  display: block;
  position: relative;

  .input-group {
    display: flex;

    .display-input {
      flex: 1 1 auto;
      min-width: 0;
      cursor: text;
      background-color: #fff;
      position: relative;
      z-index: 1;
    }

    .input-group-addon {
      cursor: pointer;
      flex: 0 0 auto;
      width: 44px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 1;
      border-left: none;
      border-top-right-radius: 4px !important;
      border-bottom-right-radius: 4px !important;
    }

    .native-date-input {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      cursor: pointer;

      /* Make the text completely transparent but keep the input functional */
      color: transparent;
      background: transparent;
      border: none;
      outline: none;
      /* Ensure it takes the same styling as the display input for layout */
      margin: 0;
      box-sizing: border-box;

      /* Hide the calendar icon that browsers add */
      &::-webkit-calendar-picker-indicator {
        opacity: 0;
        position: absolute;
        right: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
      }

      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        opacity: 0;
      }

      &::-webkit-datetime-edit-day-field {
        opacity: 0;
      }
    }
  }
}
body:has(shared-dialog dialog[open]) {
  overflow: hidden;
}

shared-dialog {
  dialog:modal {
    padding: 0;
    border: none;
    border-bottom-left-radius: 0.6rem;
    border-bottom-right-radius: 0.6rem;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    max-width: 600px;
    max-height: calc(100vh - 2rem);
    width: calc(100% - 2rem);

    &::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
    }

    .dialog-header {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1.5rem;
      background-color: #444;
      border-bottom: 1px solid #e5e5e5;

      .dialog-title {
        margin: 0;
        font-size: 1.8rem;
        color: #fff;
      }

      .close {
        background: none;
        border: none;
        color: #fff;
        font-size: 2.8rem;
        font-weight: bold;
        line-height: 1;
        opacity: 0.8;
        cursor: pointer;

        &:hover {
          opacity: 1;
        }
      }
    }

    .dialog-body {
      flex: 1 1 auto;
      min-height: 0;
      overflow-y: auto;
      padding: 1.5rem;
      position: relative;

      .info-bubble {
        margin: 0;
      }
    }

    .dialog-footer ~ .scroll-to-bottom {
      position: absolute;
      bottom: 9.5rem;
      left: 50%;
      transform: translateX(-50%);
      background-color: #777;
      color: white;
      display: flex;
      flex-direction: row;
      gap: 2px;
      align-items: center;
      text-decoration: none;
      cursor: pointer;
      width: fit-content;
      border: 1px solid;
      padding: 0.3rem 0.8rem 0.3rem 1rem;
      border-radius: 1.5rem;
      height: 3rem;
      font-size: 1.4rem;
      visibility: hidden;
      opacity: 0;
      transition: opacity 0.15s ease-out;
      pointer-events: none;

      .chevron-down {
        display: flex;
        align-items: center;
      }

      &:hover .chevron-down {
        animation: dialog-bob 0.6s ease-in-out infinite;
      }
    }

    &[data-has-scroll] .scroll-to-bottom {
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    .dialog-footer {
      flex-shrink: 0;
      padding: 1.5rem;
      border-top: 1px solid #e5e5e5;
      text-align: left;

      .btn + .btn {
        margin-left: 0.5rem;
      }
    }
  }
}

/* @keyframes must stay at the top level, not nested in `shared-dialog` — the CSS */
/* Nesting spec drops a nested @keyframes silently, so the animation never runs. */
@keyframes dialog-bob {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(1px);
  }
  75% {
    transform: translateY(-1px);
  }
}
ac-dropdown-item {
  display: contents;
}
shared-embedded-comment {
  display: block;

  .item {
    background-color: white;
    padding: 1rem;

    .item-header {
      display: grid;
      grid-template-columns: auto 2fr;
      grid-template-rows: auto auto;
      grid-template-areas:
        "heading actions"
        "user-and-timestamp user-and-timestamp";
      row-gap: 0.25rem;

      .heading {
        grid-area: heading;
        font-weight: bold;
      }

      .actions {
        align-items: center;
        grid-area: actions;
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        justify-content: end;

        button {
          border: none;
          padding: 0;
        }
      }

      .user-and-timestamp {
        grid-area: user-and-timestamp;
        opacity: 0.6;
        font-size: 1.2rem;
      }
    }

    .item-body {
      margin-top: 0.5rem;
      white-space: pre-wrap;
    }
  }
}
shared-embedded-comments {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* Common toggle styles */
  .earlier-items-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;

    .show-earlier-button {
      display: inline-flex;
      align-items: center;
      gap: 0.25rem;
      color: var(--muted-text-color, #6c757d);
      font-size: 1.2rem;
      border: none;

      svg {
        width: 1.2rem;
        height: 1.2rem;
        transition: transform 0.3s ease;
      }
    }
  }

  /* Double chevron style (pill button with border lines) */
  .earlier-items-toggle {
    &::before,
    &::after {
      content: "";
      flex: 1;
      height: 5px;
      border: 1px solid var(--border-color, #dee2e6);
      border-left: none;
      border-right: none;
    }

    &::before {
      flex: 0 0 auto;
      width: 1rem;
    }

    &::after {
      flex: 1 1 auto;
      min-width: 0;
    }

    .show-earlier-button {
      background: white;
      border: 1px solid var(--border-color, #dee2e6);
      border-radius: 999px;
      padding: 0.5rem 0.6rem 0.5rem 1rem;

      .chevron-stack {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .glyphicon-chevron-up {
          margin-top: 0.4rem;
        }

        .glyphicon-chevron-down {
          margin-top: -0.5rem;
        }
      }
    }
  }

  .earlier-items {
    height: 0;
    overflow: hidden;
    visibility: hidden;
    display: none;
    flex-direction: column;
    gap: 1rem;
  }

  &[data-show-earlier] {
    .earlier-items-toggle {
      .show-earlier-button svg {
        transform: rotate(180deg);
      }
    }

    .earlier-items {
      visibility: visible;
      display: flex;
    }
  }

  &[data-earlier-expanded] {
    .earlier-items-toggle {
      display: none;
    }

    .earlier-items {
      height: auto;
    }
  }

  button.btn-link {
    border: none;
    padding: 0;
  }

  .info-bubble {
    margin: 0;
  }

  .input-box {
    .input-wrapper {
      position: relative;

      .input-textarea {
        resize: none;
        min-height: 4rem;
        overflow-y: hidden;
        padding-right: 6rem; /* Fallback - JS will override with precise value */
      }

      .submit-button {
        padding: 0.5rem 0.75rem;
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        opacity: 0.5;
        pointer-events: none;
      }
    }

    &[data-has-content] {
      .submit-button {
        opacity: 1;
        pointer-events: auto;
      }
    }
  }
}
ac-filter-dropdown-item {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  &[selected] {
    background-color: #e8e8e8;
  }

  /* Count badge: visual parity with the Bootstrap badge the todos filter */
  /* row used, owned here without the Bootstrap class. */
  .filter-count {
    display: inline-block;
    min-width: 10px;
    padding: 3px 7px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background-color: #777;
    border-radius: 10px;
  }

  &:not([data-total-count-text]) .filter-count,
  &[data-total-count-text=""] .filter-count,
  &[data-total-count-text="0"] .filter-count,
  &:not([show-count]) .filter-count {
    display: none;
  }
}
ac-filter-select {
  /* The box chrome mirrors the form-control look the todos filter row */
  /* established, owned here without Bootstrap plumbing. */
  position: relative;
  display: block;
  min-width: 0;
  padding: 0.4rem 0;
  background-color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  font-size: 16px;
  color: #555;

  .filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.1rem 0.8rem;
    background: transparent;
    border: none;
    text-align: left;
    font-size: inherit;
    color: inherit;
    cursor: pointer;

    .filter-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .caret {
      display: inline-block;
      width: 0;
      height: 0;
      margin-left: 2px;
      border-top: 4px solid;
      border-right: 4px solid transparent;
      border-left: 4px solid transparent;
    }
  }

  .filter-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    width: max-content;
    min-width: 100%;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  }

  &[data-menu-align="right"] .filter-dropdown-menu {
    left: auto;
    right: 0;
  }

  &[data-open] .filter-dropdown-menu {
    display: block;
  }

  .filter-dropdown-separator {
    height: 1px;
    margin: 0.9rem 0;
    overflow: hidden;
    background-color: #e5e5e5;
  }
}
shared-friendly-date {
  display: inline;
}
shared-friendly-time {
  display: inline;
}
ac-toast-host {
  display: flex;
  ac-toast {
    display: flex;
    transform: translateX(calc(100% + 1rem));
    transition: transform 150ms ease-out;

    &[data-state="visible"] {
      transform: translateX(0);
    }

    &[data-state="leaving"] {
      transform: translateX(calc(100% + 1rem));
      transition: transform 100ms ease-in;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  ac-toast-host ac-toast,
  ac-toast-host ac-toast[data-state="leaving"] {
    transition: none;
  }
}
shift-dropdown-item {
  display: flex;
  font-size: 1.5rem;
  gap: 0.5rem;

  .driver-avatar {
    margin-top: -0.75rem;
  }

  .accepting-subzones {
    text-wrap: auto;

    .zone-serviced-check {
      vertical-align: middle;
    }
  }

  .shift-doctor-name {
    text-wrap: auto;
  }

  .shift-date-and-capacity {
    display: flex;
    gap: 0.25rem;

    .shift-short-date {
      min-width: 16rem;
    }

    .shift-capacity {
      min-width: 6rem;
      display: flex;
      gap: 0.3rem;
    }
  }
}
shift-select {
  .shifts-dropdown-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .dropdown-menu {
    @media (max-width: 430px) {
      right: 0;
      left: auto;
    }
    @media (min-width: 431px) {
      left: 0;
      right: auto;
    }
  }
}
side-navigation > nav {
  height: 100lvh;
  width: 27.2rem;
  z-index: 1041;
  animation: slide-in 0.1s forwards;
  left: -27.2rem;
  box-shadow: 0 4px 3px rgba(0, 0, 0, 0.2);
}

@keyframes slide-in {
  100% {
    left: 0;
  }
}

side-navigation > nav.hiding {
  animation: slide-out 0.1s forwards;
  left: 0;
}

@keyframes slide-out {
  100% {
    left: -27.2rem;
  }
}

side-navigation .sub-menu > li:first-child {
  margin-top: 0.8rem;
}

side-navigation .sub-menu > li:last-child {
  margin-bottom: 0.8rem;
}

side-navigation > nav ul li a {
  text-decoration: none;

  &:hover {
    text-decoration: none;
  }
}
li.tasks li a {
  text-wrap: nowrap;
}

li.tasks li span.badge {
  margin-left: .4rem;
  position: relative;
  top: -1px;
}
send-sms-menu-item {
  cursor: pointer;
  padding: 5px 15px;
  display: block;
}

send-sms-menu-item[disabled] {
  cursor: not-allowed;
  opacity: 0.7;
}

send-sms-menu-item:hover {
  background-color: #f5f5f5;
}
/* When the page hosts a split-screen, make the layout chain from <body>
   down a flex column so the split-screen-container fills whatever vertical
   space the top-nav (and any other content) doesn't claim — no magic
   numbers, no knowledge of the top-nav height. Scoped to pages that
   actually render a split-screen so other pages keep their current
   block layout (padding, max-width, natural scroll). */
body:has(split-screen-container) {
  display: flex;
  flex-direction: column;
  /* Drop the global body bottom padding (160px, see application.css) — it was
     added in 2019 to scroll iOS form fields above the virtual keyboard, but
     it shortens the body's content box, leaving dead space below the split.
     The left pane has its own overflow-y: auto so fields can scroll into
     view without relying on body-level scroll space. */
  padding-bottom: 0;
}

body:has(split-screen-container) main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body:has(split-screen-container) .custom-container {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

split-screen-container {
  display: flex;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;

  /* Smoothly animate flex-basis changes (e.g. mode transitions). Sizing,
     position, overflow, min-width are all on the HAML element via tw:*. */
  .left-pane {
    transition: flex-basis 380ms cubic-bezier(.32, .72, 0, 1);
  }

  /* Default flex of the right-pane — basis 0 before JS sets data-mode.
     Other static styles (overflow, background, position, min-width) are
     on the HAML element via tw:*. Mode-conditional rules below override
     this flex declaration. */
  .right-pane {
    flex: 0 0 0;
  }

  &[data-mode="hidden"] {
    .right-pane { display: none; }
  }

  &[data-mode="collapsed"] {
    .right-pane { flex: 0 0 0; }
  }

  &[data-mode="open"] {
    .left-pane  { flex: 1 1 0; }
    .right-pane { flex: 0 0 var(--right-pane-px); }
  }

  &[data-dragging] {
    .left-pane, .right-pane { transition: none !important; }
  }

  /* Static visuals for .ssm-divider / .grip / .ssm-collapse-btn are on the
     HAML elements via tw:* utilities (with the divider acting as a tw:group
     so descendants react to its :hover and .dragging state).
     Only state-conditional rules tied to the container's data-mode and the
     ::before hit-area extension live here. */

  /* Widen the drag hit-area beyond the visible 6-8px so the divider is
     easier to grab. Scoped to open mode only — in collapsed mode drag is
     disabled and the divider sits flush right, so a right-extending pseudo
     would overflow the viewport. */
  &[data-mode="open"] .ssm-divider::before {
    content: '';
    position: absolute;
    inset: 0 -14px;
  }

  @media (hover: none), (pointer: coarse) {
    &[data-mode="open"] .ssm-divider::before { inset: 0 -18px; }
  }

  /* Icon visibility on the collapse button is driven by the container's
     data-mode and data-form-loaded — too many ancestor conditions to
     express cleanly as utilities on each icon. */
  &[data-mode="collapsed"] .ssm-collapse-btn .icon-expand { display: block; }
  &[data-mode="open"]:not([data-form-loaded]) .ssm-collapse-btn .icon-collapse { display: block; }
  &[data-mode="open"][data-form-loaded] .ssm-collapse-btn .icon-modalize { display: block; }
  &[data-mode="form-as-modal"] .ssm-collapse-btn .icon-expand { display: block; }

  &[data-mode="collapsed"] .ssm-divider .grip { display: none; }
  &[data-mode="hidden"] .ssm-divider { display: none; }

  /* .plus-fab styling is on the HAML element via tw:* utilities. The class
     name is retained so JS selectors in container.js still find the button.
     The 45° rotation when the menu opens is driven off the menu's [hidden]
     attribute — no JS state-sync needed. */
  .left-pane:has(split-screen-plus-menu:not([hidden])) .plus-fab {
    transform: rotate(45deg);
  }

  split-screen-plus-menu {
    bottom: 7rem;
    right: 1.6rem;
  }

  .replace-confirm-overlay { display: none; }
  &[data-confirming-replace] .replace-confirm-overlay { display: flex; }

  /* The .left-pane stays in the render tree in these modes — the position:fixed
     .right-pane covers it visually, and container.js applies `inert` +
     aria-hidden for focus and assistive tech. Don't be tempted to `display:none`
     it: re-painting the left-pane after returning to a non-overlay mode is
     unreliable on iOS WebKit, and content without its own compositing layer
     (plain text, headings) fails to repaint until the user scrolls. */
  &[data-mode="fullscreen-overlay"],
  &[data-mode="form-as-modal"] {
    .ssm-divider { display: none; }
    .right-pane {
      position: fixed;
      inset: 0;
      flex: 0 0 100%;
      background: #fff;
    }
  }

  /* The .ssm-restore-pane-btn lives inside split-screen-form-chrome's header;
     form_chrome.css styles its appearance and hides it by default. This rule
     reveals it whenever the container is in form-as-modal mode. */
  &:not([data-mode="form-as-modal"]) .ssm-restore-pane-btn {
    display: none;
  }

  /* Loading-state placeholder. Lives in .right-pane as one possible slot
     occupant of .split-pane-chrome-host. The fade-in delay is tunable via
     the --ssm-loading-delay custom property: 0ms by default (loading shows
     immediately), bump to e.g. 150ms to avoid flashing on fast responses. */
  --ssm-loading-delay: 0ms;

  .loading-state {
    opacity: 0;
    animation: ssm-loading-fade-in 120ms ease-out forwards;
    animation-delay: var(--ssm-loading-delay);

    .loading-spinner {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      border: 3px solid rgba(0, 0, 0, 0.08);
      border-top-color: var(--color-primary, #2563eb);
      animation: ssm-loading-spin 0.75s linear infinite;
    }
  }
}

@keyframes ssm-loading-fade-in {
  to { opacity: 1; }
}

@keyframes ssm-loading-spin {
  to { transform: rotate(360deg); }
}

body.ssm-dragging,
body.ssm-dragging * {
  cursor: col-resize !important;
  user-select: none !important;
}
/* The chrome is a flex column. Header and footer are flex children that
   stay put; the body sits between them and scrolls on overflow. Scrollbar
   styling itself lives on the HAML element via tw:scrollbar-* utilities. */
split-screen-form-chrome {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;

  .dialog-header {
    flex-shrink: 0;
    justify-content: space-between;
    border-bottom: 1px solid #e5e7eb;

    .dialog-title {
      font-size: var(--tw-text-base);
      margin: 0;
      font-weight: 600;
    }
  }

  /* Icon buttons grouped on the right of the header. .close-pane-button is
     always visible; .ssm-restore-pane-btn is visible by default, and
     container.css hides it whenever the container isn't in form-as-modal
     mode. The button rule below intentionally omits `display` so it doesn't
     override container.css's hide rule. */
  .dialog-header-actions {
    button {
      border-radius: 6px;
      border: 0;
      cursor: pointer;
      padding: 0;
    }
  }

  .dialog-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  .dialog-footer {
    flex-shrink: 0;
    border-top: 1px solid #e5e7eb;
    justify-content: flex-end;
  }
}
split-screen-plus-menu {
  position: absolute;

  &[hidden] { display: none; }

  .menu-card {
    background: #fff;
    border-radius: 1.2rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 1px solid #e5e7eb;
    width: 30rem;
    padding: 0.4rem 0;
    overflow: hidden;
  }

  .plus-menu-item {
    display: flex;
    width: 100%;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1rem 1.2rem;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
  }

  .plus-menu-item:hover { background: #f8fafc; }

  .item-text {
    min-width: 0;
    flex: 1 1 auto;
  }

  .item-label {
    font-size: 1.35rem;
    font-weight: 600;
    color: #1c1917;
  }

  .item-sub {
    font-size: 1.2rem;
    color: #64748b;
    margin-top: 0.1rem;
  }
}
x-tab {
  display: block;
  padding-top: 15px;
}
x-tabs nav {
  border-bottom: 1px solid #ddd;
}

x-tabs nav .tab-title {
  padding: 5px 15px 10px;
  border-bottom: 5px solid transparent;
  cursor: pointer;
}

x-tabs nav .tab-title:not([data-active]) {
  opacity: 0.7;
}

x-tabs nav .tab-title:not([data-active]):hover {
  opacity: 1;
}

x-tabs nav .tab-title[data-active] {
  font-weight: bold;
  border-bottom-color: #aaa;
}
.todo-card {
  &.card {
    display: block;
    padding: 0;
    transition: border-color 150ms ease;
  }

  &:has(animatable-accordion[open]) {
    border-color: #cacaca;
  }

  > animatable-accordion > .accordion-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 0;

    > todo-card-body {
      padding: 0 1rem 1rem 1rem;
    }
  }

  .attachment-icon, .appointment-type-icon, .document-icon {
    opacity: 0.7;
  }
}
todo-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  .section {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .section-heading {
      font-weight: bold;
    }

    .section-body {
      background-color: #f7f7f7;
      padding: 1rem;

      &.other-tasks-list {
        background-color: transparent;
        padding: 0;

        other-todo {
          padding: 1rem;
        }
      }
    }
  }

  .next-appointment-summary {
    .appointment-cal-icon, .appointment-type-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;

      svg {
        top: -0.2rem;

        &.glyphicon-video {
          top: -0.1rem;
        }
      }
    }
  }

  .task-details-section {
    .assignment-info {
      column-gap: 0.5rem;
      display: grid;
      grid-template-areas:
        "assigner menu"
        "assignee menu";
      font-size: 1.2rem;
      color: #666;

      .assigner {
        grid-area: assigner;
        font-weight: bold;

        .assigner-name {
          font-weight: bold;
        }

        .assigned-at-part {
          display: inline;
        }
      }

      .assignee {
        grid-area: assignee;

        .assignee-name {
          display: inline;
          font-weight: bold;
        }
      }

      .menu {
        grid-area: menu;
        justify-self: end;

        .dropdown-toggle {
          .glyphicon-set-down {
            margin: 0 -0.5rem 0 0;
          }
        }

        .dropdown-menu {
          button {
            text-align: right;
            width: 100%;
          }
          li.selection-group-header {
            font-size: 1.3rem;
            padding-right: 1.5rem;
            text-align: right;
          }
        }
      }
    }

    hr.separator {
      margin: 1rem 0;
    }
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
  }

  .other-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  hr.separator {
    border-top: 1px solid #cacaca;
    margin: 1rem 0 0 0;
    width: 100%;
  }
}
todo-card-header {
  display: grid;
  column-gap: 0.3rem;
  grid-template-columns: 1.5rem 2.5rem 5fr 1fr 0.5fr 0.5fr;
  grid-template-rows: repeat(6, min-content);
  grid-template-areas:
    "chevron avatar date badges badges badges"
    "chevron avatar patient-name patient-name patient-name attachment-icon"
    "chevron avatar title title title title"
    "chevron avatar actionable-summary actionable-summary actionable-summary actionable-summary"
    "chevron avatar reply-summary reply-summary reply-summary reply-summary"
    "chevron avatar activity-summary activity-summary activity-summary activity-summary";
  padding: 1rem;

  &:not([show-patient-name]) {
    grid-template-rows: repeat(5, min-content);
    grid-template-areas:
      "chevron avatar date badges badges badges"
      "chevron avatar title title title attachment-icon"
      "chevron avatar actionable-summary actionable-summary actionable-summary actionable-summary"
      "chevron avatar reply-summary reply-summary reply-summary reply-summary"
      "chevron avatar activity-summary activity-summary activity-summary activity-summary";
  }

  &:not([data-urgent]) .urgent-label {
    display: none;
    visibility: hidden;
  }

  .status-label, .urgent-label {
    text-transform: uppercase;
  }

  .chevron {
    display: block;
    grid-area: chevron;
  }

  .avatar {
    grid-area: avatar;
    justify-self: end;
  }

  .badges {
    align-self: start;
    display: flex;
    gap: 0.5rem;
    grid-area: badges;
    justify-self: end;
  }

  .patient-link {
    grid-area: patient-name;

    .admin-panel--todos &, .clinical-panel--attachments &, .clinical-panel--investigations &, other-todos-for-document & {
      display: none;
    }

    a {
      display: inline-block;
    }
  }

  .next-appointment-summary {
    grid-area: next-appointment-summary;
    opacity: 0.7;

    .appointment-cal-icon, .appointment-type-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;

      svg {
        top: -0.2rem;

        &.glyphicon-video {
          top: -0.1rem;
        }
      }
    }
  }

  .attachment-icon {
    grid-area: attachment-icon;
    justify-self: end;

    svg {
      width: 2rem;
      height: 2rem;
    }

    svg.glyphicon {
      margin-right: -3px;
    }

    svg.icon-microscope {
      width: 1.6rem;
      height: 1.6rem;
    }
  }

  .title {
    grid-area: title;
    display: -webkit-box;
    font-weight: normal;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .review-actionable-summary {
    grid-area: actionable-summary;
    opacity: 0.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    .review-actionable-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;

      svg.glyphicon {
        transform: rotate(90deg)
      }
    }
  }

  .reply-summary {
    grid-area: reply-summary;
    opacity: 0.7;

    .reply-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;
    }
  }

  .activity-summary {
    grid-area: activity-summary;
    opacity: 0.7;

    .activity-icon {
      display: inline;
      margin: 0 0 0 -0.25rem;
    }
  }
}
todo-details-and-actions {
  &.card-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .assignment-info {
    column-gap: 0.5rem;
    display: grid;
    grid-template-areas:
      "assigner menu"
      "assignee menu";
    font-size: 1.2rem;
    color: #666;

    .assigner {
      grid-area: assigner;
      font-weight: bold;

      .assigner-name {
        font-weight: bold;
      }

      .assigned-at-part {
        display: inline;
      }
    }
    
    .assignee {
      grid-area: assignee;

      .assignee-name {
        display: inline;
        font-weight: bold;
      }
    }

    .menu {
      grid-area: menu;
      justify-self: end;

      .dropdown-toggle {
        .glyphicon-set-down {
          margin: 0 -0.5rem 0 0;
        }
      }

      .dropdown-menu {
        button {
          text-align: right;
          width: 100%;
        }
        li.selection-group-header {
          font-size: 1.3rem;
          padding-right: 1.5rem;
          text-align: right;
        }
      }
    }
  }

  .description {
    background-color: white;
    padding: 1rem;
    position: relative;

    .instructions-heading {
      font-weight: bold;
    }

    .instructions-body {
      white-space: pre-wrap;

      /* When content needs truncation (set by JS) */
      &[data-truncatable] {
        max-height: 6em; /* ~4 lines */
        overflow: hidden;

        + .instructions-toggle {
          display: block;
        }
      }

      /* When expanded (set by JS - max-height set dynamically) */
      &[data-expanded] + .instructions-toggle {
        background: transparent;
        position: static;
        padding-top: 0.5rem;
        width: 100%;

        .svg-icon {
          transform: rotate(180deg);
        }
      }
    }

    .instructions-toggle {
      align-items: center;
      background: linear-gradient(to top, white 0%, white 50%, transparent 100%);
      border: none;
      bottom: 1rem;
      color: #2489fd;
      cursor: pointer;
      display: none;
      font-weight: bold;
      gap: 0.25rem;
      justify-content: center;
      padding: 1.5rem 0 0;
      position: absolute;
      left: 1rem;
      right: 1rem;

      .svg-icon {
        transition: transform 0.2s ease;
      }
    }
  }

  shared-embedded-comments {
    margin-left: 1rem;

    .reply {
      background-color: white;
    }
  }

  hr.separator {
    margin: 1rem 0;
  }

  .action-buttons {
    display: flex;
    flex-direction: column;
  }

  .completed-statement {
    opacity: 0.6;
  }
}
todo-details-and-actions-document {
  display: block;

  animatable-accordion {
    gap: 1rem;

    > .header {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      cursor: pointer;

      .chevron {
        display: flex;
        align-items: center;
        transition: transform 0.2s ease;
      }

      .document-icon {
        display: flex;
        align-items: center;
      }

      .document-info {
        flex: 1;
        min-width: 0;

        .document-title {
          font-weight: bold;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .document-subtitle {
          font-size: 0.9em;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
    }

    &[open] {
      > .header {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
      }
    }
  }
}
todo-details-and-actions-letter {
  display: block;

  animatable-accordion {
    /* The divider only appears once expanded, so a collapsed card reads as a single clean row. */
    > .header {
      border-bottom: 1px solid transparent;
    }

    &[open] > .header {
      border-bottom-color: #e2e8f0; /* slate-200 */
    }
  }
}
edit-todo-form {
  display: block;

  &[data-loading] {
    form {
      display: none;
    }
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }
}
todos-filter-dropdown-item {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  cursor: pointer;

  &:hover {
    background-color: #f5f5f5;
  }

  &[selected] {
    background-color: #e8e8e8;
  }

  &:not([data-total-count-text]) .filter-count,
  &[data-total-count-text=""] .filter-count,
  &[data-total-count-text="0"] .filter-count,
  &:not([show-count]) .filter-count {
    display: none;
  }
}
todos-filters-and-sorts {
  display: grid;
  flex-grow: 1;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}
todo-form-fields {
  display: flex;
  flex-direction: column;
  gap: 1.7rem;

  &[assignment-mode="role"], &[assignment-mode="none"] {
    .user-search-area {
      display: none;
    }
  }

  &:not([assigned-to-user-selected]) {
    .address-summary {
      display: none;
    }
  }

  &[assigned-to-user-selected] {
    input[name="user_search"] {
      display: none;
    }
  }

  .panel-form-group {
    margin: 0;
  }

  .panel-form-group.tuck {
    margin-top: -0.8rem;
  }

  .panel-form-group .starred-fields .document-attachment-preview {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin-left: 0.8rem;
    margin-top: 0.8rem;
    padding: 0.8rem;
    background: #f8f8f8;
    border-radius: 4px;

    .document-icon {
      flex-shrink: 0;
    }

    .document-info {
      flex-grow: 1;
      min-width: 0;
    }

    .document-title {
      font-weight: 500;
    }

    .document-subtitle {
      font-size: 0.9em;
      color: #666;
    }
  }
}
todos-index {
  display: block;
  max-width: 640px;

  .todos-index-header {
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;

    .new-task-button {
      margin-left: auto;
    }
  }
}
.todo-like-list {
  display: block;

  &:not([has-errors]) {
    .errors.list-errors {
      display: none;
      visibility: hidden;
    }
  }

  &:not([data-item-count="0"]), &:not([data-loaded]) {
    .no-todos-notice {
      display: none;
      visibility: hidden;
    }
  }

  .pagination-link-next {
    background-color: #777;
    color: white;
    display: flex;
    flex-direction: row;
    gap: 2px;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    margin: 1rem auto 0;
    width: fit-content;
    border: 1px solid;
    padding: 0.3rem 0.8rem 0.3rem 1rem;
    border-radius: 1.5rem;
    height: 3rem;

    .chevron-down {
      display: block;
    }

    &:hover:not(.loading) .chevron-down {
      animation: bob 0.6s ease-in-out infinite;
    }

    &.loading {
      opacity: 0.6;
      cursor: default;
      pointer-events: none;

      .chevron-down {
        display: none;
      }

      &::after {
        content: "";
        display: block;
        width: 1.2rem;
        height: 1.2rem;
        margin: 0.1rem 0 0 0.3rem;
        border: 3px solid currentColor;
        border-top-color: transparent;
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
      }
    }
  }
}

/* @keyframes must stay at the top level, not nested in a style rule — the CSS */
/* Nesting spec drops a nested @keyframes silently, so the animation never runs. */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes bob {
  0%, 50%, 100% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(1px);
  }
  75% {
    transform: translateY(-1px);
  }
}

todos-list {
  display: block;

  .results-page {
    margin-top: 1rem;
  }

  &[data-patient-id] .results-page {
    margin-top: 0;
  }
}

.todo-card-placeholder {
  .placeholder-header {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    height: 10.5rem;
    padding: 1rem;
  }

  &.compact {
    .placeholder-header {
      height: 9rem;
    }

    .placeholder-second-line {
      display: none;
    }
  }

  .placeholder-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: placeholder-shimmer 1.5s infinite;
    flex-shrink: 0;
  }

  .placeholder-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }

  .placeholder-line {
    height: 0.875rem;
    border-radius: 0.25rem;
    background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: placeholder-shimmer 1.5s infinite;

    &.placeholder-line-short {
      width: 30%;
    }

    &.placeholder-line-medium {
      width: 60%;
    }

    &.placeholder-line-long {
      width: 85%;
    }
  }
}

@keyframes placeholder-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

other-todo {
  display: block;
  background-color: #f7f7f7;

  animatable-accordion {
    gap: 1rem;

    > .header {
      align-items: center;
      display: grid;
      column-gap: 0.3rem;
      grid-template-columns: 1.5rem 2.5rem 5fr 1fr 1fr;
      grid-template-rows: repeat(2, min-content);
      grid-template-areas:
        "chevron avatar date badges badges"
        "chevron avatar title title title";

      > .chevron {
        align-self: start;
        grid-area: chevron;

        .svg-icon {
          width: 1.5rem;
          height: 1.5rem;
          opacity: 0.6;
        }
      }

      > .avatar {
        align-self: start;
        grid-area: avatar;
      }

      .date {
        grid-area: date;
        font-weight: bold;
      }

      .badges {
        display: flex;
        gap: 0.3rem;
        grid-area: badges;
        justify-self: end;

        .label {
          font-size: 1.1rem;
          white-space: nowrap;
        }
      }

      .title {
        grid-area: title;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  &:not([data-urgent]) .urgent-label {
    display: none;
    visibility: hidden;
  }
}
other-todos-for-document {
  display: block;

  .other-todos-heading {
    font-weight: bold;
    margin-top: 1rem;
  }

  .other-todos-list {
    margin-top: 1rem;

    todo-card.card {
      border: none;
      border-left: 8px solid #eee;
      border-radius: 0;
      box-shadow: none;

      .widget & {
        box-shadow: none;
      }

      animatable-accordion .accordion-body {
        padding: 0 0 0 1rem;
      }

      animatable-accordion[open] .accordion-body {
        padding: 1rem 0 1rem 1rem;
      }

      todo-card-body {
        border-left: none;
        padding-left: 0;
      }
    }

    animatable-accordion {
      .header, .accordion-body {
        padding-right: 0;
      }
    }
  }
}
other-todos-for-actionable {
  display: block;

  .other-todos-heading {
    font-weight: bold;
    margin-top: 1rem;
  }

  .other-todos-list {
    margin-top: 1rem;

    todo-card.card {
      border: none;
      border-left: 8px solid #eee;
      border-radius: 0;
      box-shadow: none;

      .widget & {
        box-shadow: none;
      }

      animatable-accordion .accordion-body {
        padding: 0 0 0 1rem;
      }

      animatable-accordion[open] .accordion-body {
        padding: 1rem 0 1rem 1rem;
      }

      todo-card-body {
        border-left: none;
        padding-left: 0;
      }
    }

    animatable-accordion {
      .header, .accordion-body {
        padding-right: 0;
      }
    }
  }
}
todos-sort-select {
  display: block;
  height: auto;
  min-width: 0;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .sort-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .sort-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    min-width: 100%;
  }
}
todos-user-filter-select {
  display: block;
  height: auto;
  min-width: 0;

  &.form-control {
    padding: 0.4rem 0;
    width: 100%;
  }

  .user-filter-dropdown-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;

    .user-filter-dropdown-title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .dropdown-menu {
    width: max-content;
    min-width: 100%;
  }
}
nav-bar-avatar-menu-component .dropdown-menu > li > a {
  padding: 0;
}

@media (max-width: 1149px) {
  nav-bar-avatar-menu-component .dropdown-menu {
    font-size: 150%;
  }
}
top-navigation-toggle-notices-drawer {
  notices-drawer-unread-counter-badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
    background-color: #ef4444;
    color: white;
    cursor: pointer;
    display: flex;
    font-size: 1rem;
    font-weight: 600;
    min-width: 1.6rem;
    height: 1.6rem;
    padding: 0 0.4rem;
    border-radius: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  button {
    background: transparent;
    border: none;
    padding: 0;
    position: relative;

    &:focus,
    &:focus-visible {
      outline: none;
      border: none;
      box-shadow: none;
    }
  }
}
top-navigation {
  display: block;
  z-index: 1041;
}

top-navigation .page-title {
  align-self: center;
  font-size: 1.8rem;
  flex-grow: 1;
}
triage-protocol {
  &.card {
    display: block;
    margin: 0;
    padding: 0.5rem;
  }

  .triage-protocol-heading {
    svg.glyphicon.glyphicon-random {
      transform: rotate(-90deg);
    }
  }

  .triage-protocol-body {
    padding: 0.5rem;
  }
}
.user-licenses-index-item {
  background-color: #fff;
  overflow-y: scroll;
  padding: 1rem;
  border: 1px solid #ccc;
  margin-bottom: 1rem;
  max-height: 70vh;
}

.user-licenses-index-agree-disagree-options {
  display: flex;
  gap: 1rem;
}
signature-editor {
  display: contents;
}

signature-editor .signature-canvas {
  display: block;
  width: 100%;
  /* Locked aspect: canvas scales width and height together as the container
   * resizes, so a drawn shape keeps its proportions. min-width is set
   * explicitly (= min-height × aspect ratio) so the aspect is preserved even
   * when the container is narrower than min-width — the canvas overflows
   * and the wrapper scrolls. In practice the modal width keeps this from
   * happening. */
  aspect-ratio: 3 / 1;
  min-height: 12rem;
  min-width: 36rem;
  cursor: crosshair;
  /* Subtle tint so the drawing surface is visible against the modal body. */
  background: rgb(248 250 252);
  touch-action: none;
}

signature-editor .canvas-baseline {
  position: absolute;
  left: 1.5rem;
  right: 1.5rem;
  bottom: 2.5rem;
  border-bottom: 1px dashed rgb(226 232 240);
  pointer-events: none;
}

signature-editor [data-mode-panel]:not([data-visible]) {
  display: none;
}

signature-editor .closing-phrase-chip[data-active] {
  background-color: rgb(239 246 255);
  border-color: rgb(147 197 253);
  color: var(--color-primary);
}

signature-editor .mode-tab[data-active] {
  background-color: white;
  color: rgb(15 23 42);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
}

/* Mobile-first: the dialog is full-screen by default. Height uses dvh, not vh:
 * on iOS Safari 100vh is the large-viewport height (ignores the address bar),
 * so the footer ends up rendered behind the browser chrome. dvh tracks the
 * visible area as the address bar shows/hides. */
signature-editor shared-dialog dialog[open] {
  max-width: 100vw;
  width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  margin: 0;

  .dialog-header {
    background-color: oklch(100% 0.00011 271.152); /* Tailwind white */
    border-bottom: 1px solid oklch(92.9% .013 255.508); /* Tailwind slate-200 */

    .dialog-title {
      color: oklch(15.3% 0.011 256.079); /* Tailwind slate-900 */
    }
  }
}

/* From the 768px breakpoint up (same switch the letter writer uses to go
 * single-column), restore shared-dialog's centred, constrained box. These
 * mirror shared-dialog's own dialog:modal defaults — re-asserted here because
 * the full-screen base rule above shadows them at every width. */
@media (min-width: 768px) {
  signature-editor shared-dialog dialog[open] {
    max-width: 600px;
    width: calc(100% - 2rem);
    height: fit-content;
    max-height: calc(100dvh - 2rem);
    border-radius: 0.6rem;
    margin: auto;
  }
}
billing-items {
  display: flex;
  flex-flow: column;
  gap: 2rem;
}

billing-selections {
  height: 100%;

  ul.nav-tabs li {
    display: flex;

    a {
      padding: 8px;
      text-align: center;
    }
  }
}

.billing-summary {
  display: flex;
  flex-direction: column;
  border-radius: 5px;
  align-items: center;
  width: 100%;
  max-width: var(--max-element-width);
  margin: 1rem 0;
  overflow: hidden;
}

.billing-summary .total {
  background: rgba(0, 0, 0, 0.1);
  font-weight: bold;
}
charging-gap-line {
  display: flex;
  gap: 0.5rem;
}
medical-info {
  .form-section-grid {
    display: grid;
    gap: 1rem;

    .medical-info-medical-problem-at-booking {
      grid-area: main;
    }

    .medical-info-triage-response {
      grid-area: secondary;
    }

    .triage-proto-container {
      grid-area: side;
    }

    @media (max-width: 999px) {
      grid-template-areas:
        "main"
        "side"
        "secondary";
      grid-template-columns: 1fr;

      triage-protocol {
        max-width: 640px;
      }
    }


    @media (min-width: 1000px) {
      grid-template-areas:
        "main side"
        "secondary side";
        grid-template-columns: minmax(0, 640px) 1fr;
        grid-template-rows: auto 1fr;
    }

    triage-protocol {
      &.card {
        @media (min-width: 1000px) {
          /* This little hack is so when it appears to the right of a labelled element (the reason for appointment field),
           * it aligns with the top of that field, not the label.
           * The sizes are derived from [body line height] * [body font-size] + [padding top + bottom] */
          margin-top: calc(2rem + 5px);
        }
      }
    }
  }
}
visit-mini-card {
  display: block;

  .workflow-row {
    margin-top: 0.6rem;
  }
}
propose-bulk-billing ul {
  padding: 2rem 0;
}

propose-bulk-billing aside {
  padding: 2rem 0;
  font-size: 90%;
}

schedule-visit-form-address {
  .badges {
    text-align: right;

    .label {
      white-space: nowrap;
    }
  }
}
schedule-visit-form-shifts {
  .shifts-dropdown {
    position: relative;

    .shifts-dropdown-button {
      border: none;
      background: transparent;
      padding: 0;
      margin-left: 4px;
      text-align: left;
    }

    .dropdown-menu {
      margin-left: -8px;
    }
  }
}
/*

 */

table.patient-details th:first-of-type {
  white-space: nowrap;
  width: 15%;
}