/* Catalogul de servicii devine un ecran dens de aplicație pe telefon.
   Acest fișier este încărcat după bundle-urile dashboardului, astfel încât
   păstrează logica actuală și modifică doar prezentarea la ecrane mici. */
@media (max-width: 760px) {
  .price-modal {
    align-items: stretch;
    padding: 0 !important;
  }

  .price-modal__dialog {
    width: 100%;
    min-height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    padding: calc(54px + env(safe-area-inset-top)) 12px calc(12px + env(safe-area-inset-bottom));
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .price-modal__close {
    top: calc(10px + env(safe-area-inset-top));
    right: 12px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  .price-modal__heading {
    min-height: 38px;
    gap: 9px;
    margin: 0;
    padding-right: 40px;
  }

  .price-modal__icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    font-size: .9rem;
  }

  .price-modal__heading .eyebrow {
    margin-bottom: 1px;
    font-size: .52rem;
    letter-spacing: .11em;
  }

  .price-modal__heading h2 {
    font-size: 1.42rem !important;
    line-height: 1;
  }

  /* Căutarea rămâne vizibilă, iar acțiunile explică mereu ce fac. */
  .price-modal__toolbar {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 9px;
  }

  .price-modal__search {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 42px;
    border-radius: 10px;
  }

  .price-modal__search i {
    width: 31px;
    font-size: .72rem;
  }

  .price-modal__search input {
    min-width: 0;
    padding: 0 7px 0 0;
    font-size: .73rem;
  }

  .price-modal__toolbar > button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto;
    min-width: 0;
    min-height: 42px;
    padding: 0 10px;
    border-radius: 10px;
    font-size: .64rem;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
  }

  .price-modal__toolbar > button i {
    margin: 0;
    font-size: .82rem;
  }

  .price-modal__toolbar #membership-bonus-open { grid-column: 1 / -1; }

  .price-modal__toolbar > button:focus-visible,
  .catalog-row__actions button:focus-visible {
    outline: 3px solid rgba(225, 185, 62, .55);
    outline-offset: 2px;
  }

  .service-category-filters {
    gap: 5px;
    margin: 0 0 8px;
    padding: 1px 0 5px;
  }

  .service-category-filters button {
    min-height: 27px;
    padding: 0 8px;
    font-size: .54rem;
  }

  .service-category-filters button b {
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: .47rem;
  }

  .catalog-category-group {
    gap: 4px;
    padding: 7px 0 2px;
  }

  .catalog-category-group > header {
    min-height: 20px;
    padding: 0 1px;
  }

  .catalog-category-group > header span { font-size: .53rem; }
  .catalog-category-group > header small { padding: 3px 6px; font-size: .48rem; }

  .price-modal__list {
    gap: 5px;
    min-height: 150px !important;
    max-height: min(38dvh, 330px) !important;
    padding: 0 1px 3px 0;
  }

  .catalog-row {
    grid-template-columns: 40px minmax(0, 1fr) 30px !important;
    grid-template-areas: "image service actions" !important;
    min-height: 55px;
    gap: 7px !important;
    padding: 7px !important;
    border-radius: 11px !important;
  }

  .catalog-row > img {
    grid-area: image;
    width: 40px !important;
    height: 40px !important;
    border-radius: 8px !important;
  }

  .catalog-row .price-row__category,
  .catalog-row .price-row__service em { display: none; }

  .catalog-row .price-row__service {
    grid-area: service;
    min-width: 0;
  }

  .catalog-row .price-row__service strong {
    display: block;
    overflow: hidden;
    font-size: .69rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-row .price-row__service small {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    font-size: .53rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .catalog-row__price {
    display: none;
  }

  .catalog-row__actions {
    grid-area: actions;
    grid-column: auto;
    grid-row: auto;
    display: grid;
    grid-template-columns: 30px;
    grid-template-rows: repeat(2, 30px);
    gap: 4px;
    align-self: center;
  }

  .catalog-row__edit,
  .catalog-row__variant {
    width: 30px !important;
    height: 30px !important;
    min-height: 30px;
    border-radius: 8px !important;
    font-size: .62rem;
  }

  /* Editorul nu schimbă câmpurile sau validarea; doar le așază ca într-o aplicație. */
  .catalog-editor,
  .membership-bonus-editor {
    margin: 0 0 9px;
    padding: 11px;
    border-radius: 14px;
  }

  .catalog-editor__head,
  .membership-bonus-editor__head { gap: 8px; margin-bottom: 9px; }
  .catalog-editor__head h3,
  .membership-bonus-editor__head h3 { font-size: 1.18rem; line-height: 1; }
  .catalog-editor__head .eyebrow,
  .membership-bonus-editor__head .eyebrow { font-size: .52rem; }
  .catalog-editor__head > button,
  .membership-bonus-editor__head > button { width: 30px; height: 30px; min-height: 30px; }

  .catalog-editor__grid,
  .membership-bonus-editor__grid { gap: 8px; }

  .catalog-editor label,
  .membership-bonus-editor label { gap: 4px; font-size: .62rem; }

  .catalog-editor input,
  .catalog-editor select,
  .catalog-editor textarea,
  .membership-bonus-editor input,
  .membership-bonus-editor select {
    min-height: 38px;
    padding: 8px 9px;
    border-radius: 9px;
    font-size: 16px;
  }

  .catalog-editor textarea { min-height: 66px; }
  .catalog-editor textarea[data-field="detailItems"] { min-height: 88px; }

  .catalog-editor label > .catalog-editor__delete {
    justify-self: start;
    width: auto;
    min-height: 28px;
    margin-top: 1px;
    padding: 0 9px;
    border-radius: 8px;
    font-size: .58rem;
  }

  .catalog-editor__variants { gap: 5px; margin-bottom: 9px; padding:8px; }
  .catalog-editor__variants > span { font-size: .5rem; }
  .catalog-editor__variants [role="tablist"] { gap: 5px; }
  .catalog-editor__variants button { min-height: 27px; padding: 0 8px; font-size: .56rem; }

  .catalog-editor__buttons,
  .membership-bonus-editor__actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
    margin-top: 9px;
  }

  .catalog-editor__buttons button,
  .membership-bonus-editor__actions button {
    min-height: 36px;
    padding: 0 7px;
    border-radius: 9px;
    font-size: .57rem;
    line-height: 1.1;
  }

  .price-modal__security {
    gap: 7px;
    margin-top: 9px;
    padding: 9px;
    border-radius: 11px;
  }

  .price-modal__security label { gap: 6px; font-size: .66rem; }
  .price-modal__security input { min-height: 36px; padding: 7px 9px; font-size: 16px; }

  .price-modal__actions {
    position: sticky;
    bottom: calc(-12px - env(safe-area-inset-bottom));
    z-index: 2;
    gap: 6px;
    margin: 9px -12px calc(-12px - env(safe-area-inset-bottom));
    padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    background: rgba(255, 253, 247, .95);
    box-shadow: 0 -8px 18px rgba(4, 73, 54, .08);
    backdrop-filter: blur(10px);
  }

  .price-modal__actions button { min-height: 36px; padding: 0 9px; border-radius: 9px; font-size: .62rem; }
}

@media (max-width: 365px) {
  .price-modal__toolbar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .price-modal__toolbar > button { width: auto; min-width: 0; min-height: 38px; padding-inline: 7px; font-size: .57rem; }
  .catalog-row { grid-template-columns: 36px minmax(0, 1fr) 28px !important; padding: 6px !important; }
  .catalog-row > img { width: 36px !important; height: 36px !important; }
  .catalog-row__actions { grid-template-columns: 28px; grid-template-rows: repeat(2, 28px); gap: 3px; }
  .catalog-row__edit, .catalog-row__variant { width: 28px !important; height: 28px !important; min-height: 28px; }
}