@media (max-width: 640px) {
  [hidden],
  .hidden {
    display: none !important;
  }

  body {
    overflow-x: hidden;
  }

  body > .min-h-screen > header > div,
  body > div.min-h-screen > header > div {
    min-height: 4rem;
    height: auto !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    gap: 0.75rem !important;
  }

  main {
    padding-top: 1rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  main > section:first-child,
  main > div:first-child {
    margin-bottom: 1rem !important;
  }

  header button,
  header a,
  main button,
  main input,
  main select {
    min-width: 0;
  }

  header button,
  header a {
    min-height: 2.5rem;
  }

  header button[id="logoutBtn"] {
    border: 1px solid #d8b8b8 !important;
    background: #f7ecec !important;
    color: #733133 !important;
    font-weight: 700 !important;
  }

  main input[type="date"],
  main input[type="month"],
  main select,
  main input[type="text"],
  main input[type="email"],
  main input[type="password"] {
    width: 100% !important;
  }

  section.rounded-2xl,
  div.rounded-2xl {
    border-radius: 0.75rem !important;
  }

  .p-6 {
    padding: 1rem !important;
  }

  .px-6 {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-8 {
    padding-top: 1rem !important;
    padding-bottom: 1.5rem !important;
  }

  .mb-8 {
    margin-bottom: 1rem !important;
  }

  .gap-4 {
    gap: 0.75rem !important;
  }

  .text-2xl {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
  }

  .text-3xl {
    font-size: 1.7rem !important;
    line-height: 1.15 !important;
  }

  .w-44,
  .min-w-48 {
    width: 100% !important;
    min-width: 0 !important;
  }

  main > section.flex.flex-wrap {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end !important;
  }

  main > section.flex.flex-wrap > * {
    min-width: 0 !important;
  }

  main > section.flex.flex-wrap button {
    width: 100%;
    justify-content: center;
  }

  #regularDateControls {
    display: grid !important;
    grid-template-columns: minmax(86px, auto) minmax(0, 1fr);
    gap: 0.5rem !important;
  }

  #regularDateControls[hidden],
  #regularDateControls.hidden {
    display: none !important;
  }

  #regularDateControls > * {
    width: 100%;
  }

  .overflow-x-auto {
    border-radius: 0.75rem;
    max-width: 100%;
  }

  table {
    min-width: 680px;
  }

  #branchesList,
  #servicesList,
  #notificationList {
    display: grid;
    gap: 0.75rem;
    padding: 0.75rem;
    background: #f8fafc;
  }

  #branchesList > *,
  #servicesList > *,
  #notificationList > * {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.75rem !important;
    background: #ffffff !important;
  }

  #servicesList .group {
    grid-template-columns: minmax(0, 1fr) 64px 84px !important;
    padding: 0.875rem !important;
  }

  #servicesList .group > div:last-child,
  #newServiceRow > div > div:last-child {
    opacity: 1 !important;
  }

  #newServiceRow > div {
    grid-template-columns: minmax(0, 1fr) 64px 84px !important;
    padding: 0.875rem !important;
  }

  #calendarBody {
    overflow-x: auto;
  }

  #calendarBody > div,
  #calendarBody + div {
    min-width: 700px;
  }

  .fixed.inset-0 > div:not(.fixed) {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }

  #branchModal > div,
  #notificationModal > div {
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
  }
}