.media-preview{display:block;width:100%;max-height:180px;object-fit:cover;margin:6px 0 12px;border:1px solid var(--line);border-radius:6px;background:#f4f7fb}.avatar-preview{width:112px;height:112px}.action-badge{cursor:pointer}.action-badge:hover{border-color:var(--blue);box-shadow:0 0 0 2px rgba(40,103,199,.12)}
.content-row{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;padding:12px 0;border-bottom:1px solid var(--line)}.content-row label{margin:0}.muted{color:var(--muted)}
@media(max-width:720px){.content-row{grid-template-columns:1fr}.content-row .icon-btn{justify-self:end}}
.staff-editor-foot .button-danger{min-height:40px;padding:0 14px;border:1px solid #efcfd0;border-radius:5px;background:#fff;color:var(--danger)}
.staff-editor-foot .button-danger:hover{background:#fff5f5;border-color:#db9c9f}
@media(max-width:760px){.staff-editor-foot .button-danger{min-height:44px}}

/* Desktop keeps the existing compact zoom control; mobile uses a two-finger pinch on the timeline itself. */
.calendar-scale-controls{display:inline-flex;align-items:center;gap:0;height:36px;border:1px solid var(--line);border-radius:7px;background:#fff;overflow:hidden;color:var(--ink)}
.calendar-scale-controls button{width:32px;height:34px;padding:0;border:0;background:transparent;color:var(--blue-dark);font-size:19px;line-height:1}
.calendar-scale-controls button:hover:not(:disabled){background:var(--blue-soft);color:var(--blue)}
.calendar-scale-controls button:disabled{color:#b6c2d1;cursor:not-allowed}
.calendar-scale-controls output{min-width:44px;text-align:center;font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.mobile-week-picker,.mobile-menu-button,.mobile-drawer,.mobile-menu-backdrop,.mobile-date-picker{display:none}
.cal-wrap{--calendar-rail:64px;--calendar-col:150px}

/* Keep German navigation labels and the language control from colliding at zoomed desktop widths. */
@media (min-width:761px) and (max-width:1180px){
  .topbar{min-width:0;overflow:hidden}
  .brand{width:168px;min-width:168px;padding-inline:12px}
  .topnav{min-width:0}
  .topnav button{padding-inline:5px;font-size:12px}
  .topbar-right{gap:3px;padding-inline:6px}
  .lang-select select{width:82px;min-width:82px;padding-inline:8px;font-size:11px}
  .conn{gap:0;font-size:0;white-space:nowrap}
  .conn i{width:8px;height:8px}
}
@media (min-width:761px) and (max-width:1660px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:52px 42px;height:auto;min-height:94px;padding-inline:8px}
  .brand{grid-column:1;grid-row:1;width:auto;min-width:0;max-width:100%;padding-inline:6px}
  .topbar-right{grid-column:2;grid-row:1;justify-self:end}
  .topnav{grid-column:1/-1;grid-row:2;width:calc(100vw - 16px);height:42px;min-height:42px;margin:0;border-top:1px solid rgba(255,255,255,.1)}
  .topnav button{height:42px;padding-inline:8px;font-size:12px}
  .workspace{min-height:calc(100vh - 94px)}
}
@media (min-width:761px) and (max-width:940px){
  .topbar-right .logout-btn{display:none}
}

/* Unavailable calendar intervals should read as intentionally blocked, not empty white space. */
.col .cal-slot.unavailable{background:#e5e8ed}
.col .cal-slot.outside-hours:not(:disabled){background:#e9edf1}
.col .cal-slot.outside-hours:not(:disabled):hover{background:#e0e9f2}
.col .hour-block.past .cal-slot.unavailable{background:#dfe3e8}
.col.day-off-column .cal-slot.unavailable{background:#dfe3e8}
.col .cal-slot.unavailable:not(:last-child){border-bottom-color:#d1d6dd}
@media (max-width:760px){
  .col .cal-slot.unavailable{background:#e2e6eb}
}

/* Keep German navigation readable without pushing the header off-screen. */
@media (min-width:761px) and (max-width:1660px){
  .topbar{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:54px 44px;width:100%;min-width:0;height:auto;min-height:98px;padding-inline:10px;overflow:hidden}
  .brand{grid-column:1;grid-row:1;width:auto;min-width:0;max-width:100%;padding-inline:6px}
  .topbar-right{grid-column:2;grid-row:1;justify-self:end;min-width:0;max-width:100%;overflow:hidden}
  .topnav{grid-column:1/-1;grid-row:2;width:100%;min-width:0;max-width:100%;height:44px;min-height:44px;margin:0;border-top:1px solid rgba(255,255,255,.1);overflow-x:auto}
  .topnav button{height:44px;flex:0 0 auto;padding-inline:10px;font-size:12px}
  .topbar-right .conn{min-width:0;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .workspace{min-height:calc(100vh - 98px)}
}

/* Unavailable time cells must remain visibly gray even when older rules are cached. */
.cal-body .col .cal-slot.unavailable{background:#e2e6eb!important;color:transparent!important}
.cal-body .col .cal-slot.unavailable:hover{background:#d9dee5!important}
.cal-body .col .cal-slot.outside-hours:not(:disabled){background:#eef1f4!important}
.cal-body .col .hour-block.after-hours{background:#eef1f4!important;box-shadow:inset 0 -2px 0 #dce4eb!important}
.cal-body .col .hour-block.after-hours .cal-slot{background:#eef1f4!important}
.cal-body .col .hour-block.after-hours .cal-slot:hover:not(:disabled){background:#e7ebef!important}
/* Fill the scroll container below the final visible hour with the same gray. */
.cal-wrap{background:#eef1f4!important}
.cal-body{background:#eef1f4!important}
.cal-body .col{background:#eef1f4!important}
.cal-body .rail{background:linear-gradient(to bottom,#fbfcfe 0, #fbfcfe calc(var(--hour) * 15), #eef1f4 calc(var(--hour) * 15), #eef1f4 100%)!important}

/* Product editor uses the shared admin modal markup; keep it fixed and centered instead of in document flow. */
.admin-modal-backdrop{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(14,30,52,.56);overflow-y:auto;overscroll-behavior:contain}
.admin-modal.shop-product-modal{display:flex;flex-direction:column;width:min(940px,calc(100vw - 48px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;overflow:hidden;border:1px solid #dfe5ec;border-radius:10px;background:#fff;box-shadow:0 24px 70px rgba(12,28,50,.3)}
.admin-modal.shop-product-modal>header{display:flex;flex:none;align-items:center;justify-content:space-between;gap:16px;min-height:68px;padding:12px 22px;border-bottom:1px solid #e4e9ef;background:#fff}
.admin-modal.shop-product-modal>header h3{margin:3px 0 0;color:#17345c;font-size:21px;line-height:1.3}
.admin-modal.shop-product-modal>.admin-modal-body{flex:1;min-height:0;overflow:auto;padding:20px 22px;overscroll-behavior:contain}
.admin-modal.shop-product-modal>footer{display:flex;flex:none;align-items:center;gap:10px;min-height:68px;padding:12px 22px;border-top:1px solid #e4e9ef;background:#fff}
@media(max-width:760px){
  .admin-modal-backdrop.shop-product-modal-backdrop{align-items:stretch;padding:0}
  .admin-modal.shop-product-modal{width:100%;max-height:100vh;max-height:100dvh;margin:0;border:0;border-radius:0}
  .admin-modal.shop-product-modal>header{min-height:60px;padding:10px 14px}
  .admin-modal.shop-product-modal>header h3{font-size:18px}
  .admin-modal.shop-product-modal>.admin-modal-body{padding:14px}
  .admin-modal.shop-product-modal>footer{gap:8px;min-height:62px;padding:9px 12px}
  .admin-modal.shop-product-modal>footer button{min-height:42px}
}

@media (max-width:760px){
  /* The older tablet rules switch the topbar to a two-row grid. On phones
     the menu, brand and account controls must stay in one stable row. */
  .topbar{display:flex;height:52px;min-height:52px;flex-wrap:nowrap;padding:0 8px;gap:6px;position:sticky;top:0;z-index:30}
  .mobile-menu-button{display:grid;place-items:center;width:38px;height:38px;flex:none;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:7px;background:rgba(255,255,255,.08);color:#fff;font-size:21px;line-height:1}
  .mobile-menu-button:hover,.mobile-menu-button[aria-expanded=true]{background:rgba(255,255,255,.18)}
  .brand{width:auto;min-width:0;flex:1;height:52px;padding:0 4px;background:transparent}
  .brand small{display:none}
  .brand strong{max-width:170px;font-size:13px}
  .topnav{display:none}
  .topbar-right{min-height:52px;gap:3px;padding:0}
  .topbar-right .icon-btn{width:31px;height:34px;padding:4px!important;font-size:20px!important}
  .topbar-right .icon-btn:nth-child(3),.topbar-right .conn,.topbar-right .logout-btn{display:none}
  .topbar-right .avatar-user{width:30px;height:30px}
  .lang-select select{min-width:68px;width:68px;height:32px;padding-inline:7px;font-size:10px}
  .mobile-menu-backdrop{display:block;position:fixed;inset:52px 0 0;z-index:25;background:rgba(8,26,56,.3)}
  .mobile-drawer{display:block;position:fixed;left:0;top:52px;bottom:0;z-index:26;width:min(292px,86vw);padding:14px 10px 24px;background:#fff;box-shadow:10px 0 28px rgba(13,39,76,.2);overflow:auto}
  .mobile-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:2px 5px 14px;border-bottom:1px solid var(--line);color:var(--blue-dark)}
  .mobile-drawer-head strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
  .mobile-drawer-head button{width:32px;height:32px;border:1px solid var(--line);border-radius:6px;background:#fff;color:var(--muted);font-size:22px;line-height:1}
  .mobile-drawer-nav{display:grid;gap:4px;padding-top:12px}
  .mobile-drawer-nav button{min-height:45px;padding:10px 13px;border:1px solid transparent;border-radius:7px;background:#fff;color:var(--ink);text-align:left;font-size:14px;font-weight:600}
  .mobile-drawer-nav button:hover,.mobile-drawer-nav button.active{border-color:#c8d9ec;background:var(--blue-soft);color:var(--blue-dark)}

  .workspace{display:block;min-height:calc(100svh - 52px)}
  .sidebar{display:none}
  .content:has(.cal-wrap){padding:0 0 18px}
  .toolbar-row{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;gap:8px;padding:10px 10px 9px;border-bottom:1px solid var(--line);min-height:0}
  .mobile-week-picker{display:block;grid-column:1 / -1;margin:0 -1px;background:#fff}
  .mobile-week-toolbar{display:grid;grid-template-columns:45px minmax(0,1fr) 45px 76px;align-items:stretch;gap:8px}
  .mobile-week-arrow,.mobile-week-today,.mobile-week-range{min-width:0;height:72px;border:1px solid #d4dfef;border-radius:12px;background:#fff;color:#102f57}
  .mobile-week-arrow,.mobile-week-today{display:grid;place-items:center;padding:0;font-size:25px;line-height:1}
  .mobile-week-arrow:hover,.mobile-week-today:hover{border-color:#9fb9da;background:#f8fbff}
  .mobile-week-today{font-size:15px;font-weight:600;white-space:nowrap}
  .mobile-week-range{position:relative;display:flex;align-items:center;justify-content:center;gap:9px;padding:8px 14px;color:#101010;font-size:17px;font-weight:700;line-height:1.2;text-align:center}
  .mobile-week-range-text{min-width:0;overflow-wrap:anywhere}
  .mobile-week-chevron{color:#8796aa;font-size:19px;font-weight:400;line-height:1;transform:translateY(-1px)}
  .mobile-week-date-input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
  .mobile-week-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:14px 2px 10px;border-bottom:1px solid #dce5f0}
  .mobile-week-days button{display:flex;min-width:0;min-height:62px;flex-direction:column;align-items:center;justify-content:flex-start;gap:9px;padding:0;border:0;background:transparent;color:#1c1c1c;font:inherit}
  .mobile-week-days button span{font-size:12px;font-weight:500;line-height:16px;color:#5b6470}
  .mobile-week-days button strong{display:grid;width:42px;height:42px;place-items:center;border-radius:50%;font-size:17px;font-weight:500;line-height:1}
  .mobile-week-days button.today strong{background:#090909;color:#fff}
  .mobile-week-days button.selected:not(.today) strong{background:#edf4ff;color:#1e5fb5}
  .mobile-week-days button:focus-visible,.mobile-week-arrow:focus-visible,.mobile-week-today:focus-visible,.mobile-week-range:focus-within{outline:2px solid #2b70c9;outline-offset:2px}
  .date-nav{display:none}
  .toolbar-row .spacer{display:none}
  .toolbar-row .calendar-create-button,.toolbar-row > select{display:none}
  .calendar-scale-controls{display:none}
  .mobile-calendar-strip{display:none}

  .cal-wrap{--calendar-rail:46px;max-width:100vw;height:calc(100svh - 240px);min-height:360px;max-height:none;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:thin}
  .cal-head,.cal-body{min-width:max(100%,360px)}
  .cal-head{position:sticky;top:0;z-index:8}
  .cal-head .h-col{min-height:54px;padding:7px 3px;flex-direction:column;gap:3px;font-size:11px;line-height:1.1;text-align:center}
  .cal-head .h-time{min-width:0}
  .avatar{width:22px;height:22px;font-size:10px}
  .rail div{font-size:10px;padding:6px 3px 0 0}
  /* Appointment cards use a strict vertical stack on narrow columns. The desktop
     absolute meta/tag positions make the two top labels collide on phones. */
  .appt{display:flex;flex-direction:column;padding:6px 7px 5px;border-left-width:3px;text-align:left;line-height:1.15}
  .appt .meta{position:static;display:block;order:1;max-width:100%;margin:0 0 5px;color:#5e7699;font-size:9px;line-height:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .appt b{display:block;order:2;max-width:100%;margin:0;font-size:11px;line-height:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .appt .svc{display:-webkit-box;order:3;max-width:100%;max-height:28px;margin:3px 0 0;color:var(--blue);font-size:10px;line-height:14px;white-space:normal;overflow:hidden;text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
  .appt .tag{position:static;display:none}
  .calendar-block{left:0;right:0;padding:3px 5px;border-left-width:3px}
  .calendar-block strong,.calendar-block small{font-size:10px;line-height:14px}
  .calendar-now-label{font-size:9px;line-height:14px;padding:2px 4px}
  .empty{padding-inline:10px}
}

/* Full mobile back-office layout. Desktop tables remain available above the
   mobile breakpoint; phones use readable cards instead of cropped columns. */
.mobile-booking-list,
.mobile-client-list { display: none; }

@media (max-width: 760px) {
  html, body, #app { max-width: 100%; overflow-x: hidden; }
  .content:not(:has(.cal-wrap)) {
    padding: 16px 12px 40px;
    overflow-x: hidden;
  }
  .content > * { min-width: 0; max-width: 100%; }
  .page-head,
  .booking-page-head,
  .staff-page-head,
  .settings-page-head,
  .clients-page-head,
  .service-page-head {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
  }
  .page-head h2,
  .booking-page-head h2,
  .staff-page-head h2,
  .settings-page-head h2,
  .clients-page-head h2,
  .service-page-head h2 {
    max-width: 100%;
    font-size: 22px;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }
  .page-head p,
  .booking-page-head p,
  .staff-page-head p,
  .settings-page-head p,
  .service-page-head p {
    max-width: 100%;
    font-size: 12px;
    line-height: 1.55;
    overflow-wrap: anywhere;
  }
  .booking-head-actions,
  .staff-page-actions,
  .client-page-actions {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .booking-head-actions button,
  .staff-page-actions > button,
  .client-page-actions button { width: 100%; min-width: 0; min-height: 44px; padding-inline: 9px; }
  .staff-page-actions .staff-guide { grid-column: 1 / -1; }

  /* Overview numbers stay useful without becoming three tall panels. */
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 14px; }
  .stats div { min-width: 0; padding: 10px 8px; border-radius: 8px; }
  .stats span { min-height: 30px; margin-bottom: 4px; font-size: 9px; line-height: 1.3; overflow-wrap: anywhere; }
  .stats strong { font-size: 20px; }

  /* Booking list: the table is desktop-only on a phone. */
  .booking-page-head ~ .table-wrap { display: none; }
  .mobile-booking-list { display: grid; gap: 9px; min-width: 0; }
  .mobile-list-day {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 3px 2px;
    color: var(--blue-dark);
    font-size: 13px;
  }
  .mobile-list-day span { color: var(--muted); font-size: 11px; white-space: nowrap; }
  .mobile-booking-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 13px;
    border: 1px solid #dce5f0;
    border-left: 4px solid #2b68c8;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 3px 12px rgba(23,54,97,.06);
    color: var(--ink);
  }
  .mobile-booking-card:hover,
  .mobile-booking-card:focus-within { border-color: #a9c4e5; box-shadow: 0 5px 16px rgba(23,54,97,.1); }
  .mobile-booking-card.archived { opacity: .72; border-left-color: #8995a8; }
  .mobile-booking-card-head { display: flex; align-items: center; gap: 9px; min-width: 0; }
  .mobile-booking-card-head .booking-checkbox { flex: 0 0 24px; }
  .mobile-booking-time { min-width: 0; flex: 1; color: var(--blue-dark); font-size: 16px; line-height: 1.25; font-variant-numeric: tabular-nums; }
  .mobile-booking-card-head .status { flex: 0 0 auto; max-width: 42%; overflow: hidden; text-overflow: ellipsis; }
  .mobile-booking-main { display: grid; gap: 2px; min-width: 0; padding-left: 33px; }
  .mobile-booking-customer { min-width: 0; color: var(--blue-dark); font-size: 15px; overflow-wrap: anywhere; }
  .mobile-booking-contact { min-width: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
  .mobile-booking-service { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 9px; min-width: 0; padding: 9px 10px; border-radius: 7px; background: #f5f8fd; }
  .mobile-booking-service .mobile-booking-label { grid-row: 1 / span 2; align-self: start; color: var(--muted); font-size: 10px; text-transform: uppercase; }
  .mobile-booking-service strong { min-width: 0; color: #355b91; font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
  .mobile-booking-service small { min-width: 0; color: #8190a3; font-size: 11px; overflow-wrap: anywhere; }
  .mobile-booking-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; min-width: 0; }
  .mobile-booking-meta span { display: grid; gap: 2px; min-width: 0; }
  .mobile-booking-meta small { color: var(--muted); font-size: 10px; line-height: 1.2; }
  .mobile-booking-meta strong { min-width: 0; color: #3b5578; font-size: 11px; font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; }
  .mobile-booking-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
  .mobile-archived-note { color: var(--muted); font-size: 11px; }

  .booking-filters { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 10px; margin-bottom: 10px; border-radius: 9px; }
  .booking-filters > input,
  .booking-filters > select { height: 42px; font-size: 13px; }
  .booking-filters label { min-width: 0; font-size: 9px; }
  .booking-filters label input { height: 42px; width: 100%; font-size: 12px; }
  .booking-filters .button-secondary,
  .booking-filters .filter-reset { min-height: 42px; height: 42px; padding-inline: 7px; font-size: 12px; }
  .booking-filters .archive-toggle { min-height: 42px; padding: 7px 9px; border-radius: 7px; }
  .booking-bulk-bar { gap: 8px; margin-bottom: 10px; padding: 10px; border-radius: 8px; }
  .booking-bulk-count { min-width: 0; }

  /* Client list: same information as the table, reflowed for one thumb column. */
  .clients-page-head ~ .client-table-wrap { display: none; }
  .mobile-client-list { display: grid; gap: 9px; }
  .client-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
  .client-stat { min-width: 0; min-height: 65px; padding: 10px 8px; border-radius: 8px; }
  .client-stat strong { font-size: 20px; }
  .client-stat span { font-size: 10px; line-height: 1.25; overflow-wrap: anywhere; }
  .client-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; margin-bottom: 10px; }
  .client-toolbar .button-secondary { min-height: 42px; padding-inline: 10px; }
  .client-search input { min-height: 42px; font-size: 13px; }
  .mobile-client-card { display: grid; gap: 10px; min-width: 0; padding: 13px; border: 1px solid #dce5f0; border-radius: 10px; background: #fff; box-shadow: 0 3px 12px rgba(23,54,97,.06); }
  .mobile-client-card:hover, .mobile-client-card:focus-within { border-color: #a9c4e5; box-shadow: 0 5px 16px rgba(23,54,97,.1); }
  .mobile-client-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; min-width: 0; }
  .mobile-client-card-head > div { display: grid; gap: 2px; min-width: 0; }
  .mobile-client-card-head strong { color: var(--blue-dark); font-size: 15px; overflow-wrap: anywhere; }
  .mobile-client-card-head small { color: var(--muted); font-size: 11px; }
  .mobile-client-card-head .status-pill { flex: 0 0 auto; max-width: 45%; }
  .mobile-client-contact { display: grid; gap: 3px; min-width: 0; color: #516a8c; font-size: 12px; }
  .mobile-client-contact span { min-width: 0; overflow-wrap: anywhere; }
  .mobile-client-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 9px 10px; border-radius: 7px; background: #f5f8fd; }
  .mobile-client-stats span { display: grid; gap: 2px; min-width: 0; }
  .mobile-client-stats small { color: var(--muted); font-size: 10px; line-height: 1.25; }
  .mobile-client-stats strong { min-width: 0; color: #355b91; font-size: 12px; line-height: 1.3; overflow-wrap: anywhere; }
  .mobile-card-action { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 40px; padding: 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--blue); text-align: left; font-size: 12px; font-weight: 700; }
  .mobile-card-action span { font-size: 20px; line-height: 1; }

  /* Staff schedule and service catalogue use one readable column. */
  .staff-card { padding: 14px; border-radius: 9px; }
  .staff-card-head { align-items: flex-start; flex-direction: column; gap: 12px; }
  .staff-summary { width: 100%; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .staff-summary-item { min-width: 0; padding: 8px 6px; border-radius: 6px; }
  .staff-summary-item strong { font-size: 17px; overflow-wrap: anywhere; }
  .staff-summary-item span { font-size: 9px; line-height: 1.25; overflow-wrap: anywhere; }
  .staff-week-head { padding-top: 12px; font-size: 11px; }
  .schedule-day-card { padding: 11px 9px; }
  .schedule-day-fields { grid-template-columns: 1fr; gap: 11px; }
  .schedule-time-range { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .schedule-time-range input { min-width: 0; width: 100%; }
  .schedule-break-row { grid-template-columns: 20px minmax(0, 1fr) 32px; }
  .staff-card-foot { align-items: stretch; flex-wrap: wrap; gap: 7px; }
  .staff-card-foot .schedule-feedback { flex-basis: 100%; }
  .staff-card-foot button { flex: 1 1 calc(50% - 7px); min-width: 0; min-height: 43px; padding-inline: 7px; font-size: 11px; }
  .service-image-guide { align-items: flex-start; padding: 11px 12px; }
  .popular-manager { padding: 14px; }
  .popular-manager-head { align-items: flex-start; }
  .popular-manager-add { grid-template-columns: minmax(0, 1fr); }
  .popular-manager-add button { width: 100%; min-height: 42px; }
  .popular-manager-row { grid-template-columns: 26px minmax(0, 1fr); gap: 8px; padding: 10px 0; }
  .popular-manager-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
  .service-subnav { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: thin; }
  .service-subnav button { flex: 0 0 auto; min-height: 40px; }
  .service-search-row { grid-template-columns: minmax(0, 1fr) auto; }
  .service-catalog-row { min-width: 0; }
  .category-team-editor { padding: 12px; }

  /* Settings, content management and review cards must never force page width. */
  .settings-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-bottom: 14px; }
  .settings-overview > button { min-width: 0; min-height: 64px; padding: 10px; gap: 7px; }
  .settings-overview strong { font-size: 10px; white-space: normal; line-height: 1.25; }
  .settings-overview-icon { width: 27px; height: 27px; }
  .settings-panel { min-width: 0; border-radius: 9px; }
  .settings-panel-head { align-items: flex-start; padding: 13px; gap: 8px; }
  .settings-panel-title h3 { font-size: 14px; overflow-wrap: anywhere; }
  .settings-panel-title p { font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
  .settings-status { max-width: 82px; margin-left: auto; font-size: 9px; white-space: normal; text-align: center; }
  .settings-panel-body { padding: 13px; }
  .settings-fields-two, .settings-fields-three { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .settings-fields-three .settings-field:first-child { grid-column: auto; }
  .settings-field input, .settings-field select { min-height: 42px; height: 42px; font-size: 13px; }
  .settings-field small { min-height: 0; line-height: 1.4; overflow-wrap: anywhere; }
  .settings-panel-foot { align-items: stretch; flex-direction: column; gap: 9px; padding: 11px 13px; }
  .settings-panel-foot > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .settings-panel-foot button { width: 100%; min-height: 43px; padding-inline: 6px; font-size: 11px; }
  .settings-feedback { min-height: 0; overflow-wrap: anywhere; }
  .settings-flow { padding: 12px; }
  .settings-flow-steps { overflow-x: auto; justify-content: flex-start; }
  .content-tabs { margin-inline: 0; overflow-x: auto; flex-wrap: nowrap; }
  .content-tabs > * { flex: 0 0 auto; }
  .content-tab-title { min-width: 145px; }
  .content-tabs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; overflow: visible; }
  .content-tabs .save { width: 100%; min-width: 0; }
  .hero-preview, .content-editor, .content-section, .member { min-width: 0; max-width: 100%; }
  .member-fields, .member-field-grid { grid-template-columns: minmax(0, 1fr); }
  .member-actions { flex-wrap: wrap; }
  .member-actions button { min-height: 42px; }
  .review-toolbar { overflow-x: auto; flex-wrap: nowrap; }
  .review-toolbar button { flex: 0 0 auto; min-height: 42px; }
  .review-admin-card { min-width: 0; padding: 14px; }
  .review-admin-card header { align-items: flex-start; flex-direction: column; gap: 6px; }

  /* Full-screen editors and drawers retain a usable header, body scroll and footer. */
  .modal-backdrop, .service-modal-backdrop, .drawer-backdrop, .detail-backdrop { padding: 0; align-items: stretch; }
  .modal, .service-editor-modal, .import-modal, .client-drawer, .staff-editor-drawer { width: 100%; max-width: none; min-height: 100svh; max-height: 100svh; border-radius: 0; }
  .modal-head, .service-editor-head, .client-drawer-head, .staff-editor-head { padding: 15px 14px 13px; }
  .modal-head h2, .service-editor-head h2, .client-drawer-head h2, .staff-editor-head h2 { max-width: calc(100vw - 76px); font-size: 19px; overflow-wrap: anywhere; }
  .modal-body, .service-editor-body, .client-drawer-body, .staff-editor-body { min-width: 0; padding: 13px; overflow-x: hidden; }
  .modal-foot, .service-editor-foot, .client-drawer-foot, .staff-editor-foot { gap: 7px; padding: 10px 12px; }
  .modal-foot .foot-left, .modal-foot .foot-right { width: 100%; }
  .modal-foot button, .service-editor-foot button, .client-drawer-foot button, .staff-editor-foot button { flex: 1 1 0; min-width: 0; min-height: 44px; padding-inline: 7px; font-size: 12px; }
  .service-editor-tabs { padding-inline: 12px; overflow-x: auto; }
  .service-editor-tabs button { flex: 0 0 auto; white-space: nowrap; }
  .service-editor-grid { grid-template-columns: minmax(0, 1fr); gap: 15px; }
  .price-editor-row { min-width: 0; }
  .staff-form-grid, .staff-language-fields, .field-grid.two { grid-template-columns: minmax(0, 1fr); }
  .staff-editor-section, .client-drawer-section { min-width: 0; padding: 14px; }
  .import-source-grid, .import-stats { grid-template-columns: minmax(0, 1fr); }
  .import-preview-table { max-width: 100%; overflow-x: auto; }
  .booking-modal .modal-body { min-width: 0; }
  .booking-modal .panel { min-width: 0; }
  .service-picker-drawer, .booking-customer-picker { width: 100%; max-width: none; max-height: 100svh; border-radius: 0; }
  .service-picker-option { min-width: 0; }
  .termin-customer-dialog { width: calc(100vw - 20px); max-height: calc(100svh - 20px); padding: 18px 14px; }
}

@media (max-width: 380px) {
  .content:not(:has(.cal-wrap)) { padding-inline: 9px; }
  .booking-head-actions, .client-page-actions { grid-template-columns: 1fr; }
  .mobile-booking-meta, .mobile-client-stats { gap: 4px; }
  .mobile-booking-meta small, .mobile-client-stats small { font-size: 9px; }
  .mobile-booking-meta strong, .mobile-client-stats strong { font-size: 10px; }
  .client-toolbar { grid-template-columns: minmax(0, 1fr); }
  .client-toolbar .button-secondary { width: 100%; }
}

/* Reviews and gift cards use the shared admin header, toolbar and state
   components. Keep them in the same responsive rhythm as the other pages. */
.admin-page-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.admin-page-head > div { min-width: 0; }
.admin-page-head h2 {
  margin: 5px 0 5px;
  color: var(--blue-dark);
  font-size: 28px;
  line-height: 1.2;
}
.admin-page-head p {
  max-width: 700px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}
.admin-page-head > .button-primary,
.admin-page-head > .button-secondary { flex: 0 0 auto; white-space: nowrap; }
.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.segmented-control {
  display: inline-flex;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid #cbd9e9;
  border-radius: 7px;
  background: #fff;
}
.segmented-control button {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-right: 1px solid #dce5f0;
  background: #fff;
  color: #496483;
  font-size: 12px;
  font-weight: 700;
}
.segmented-control button:last-child { border-right: 0; }
.segmented-control button.active { background: var(--blue-soft); color: var(--blue-dark); }
.integration-state {
  display: grid;
  gap: 3px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border: 1px solid #cfe0f5;
  border-left: 3px solid #5b83bb;
  background: #f5f9ff;
  color: #5f7594;
  font-size: 12px;
  line-height: 1.45;
}
.integration-state.warning { border-left-color: #d2a34d; background: #fffaf0; }
.integration-state.error { border-left-color: #d47b78; background: #fff6f5; color: #94514f; }
.review-admin-list { display: grid; gap: 10px; }
.review-admin-card {
  min-width: 0;
  padding: 16px;
  border: 1px solid #dce5f0;
  border-radius: 9px;
  background: #fff;
  box-shadow: 0 3px 12px rgba(23,54,97,.06);
}
.review-admin-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.review-admin-card header > div { display: grid; gap: 4px; min-width: 0; }
.review-admin-card header strong { color: var(--blue-dark); overflow-wrap: anywhere; }
.review-stars { color: #d39b2c; font-size: 13px; letter-spacing: 1px; }
.review-source { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.review-admin-text { margin-top: 12px; color: #48617f; line-height: 1.55; overflow-wrap: anywhere; }
.review-admin-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; color: var(--muted); font-size: 11px; }
.review-admin-card footer { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.empty-state { padding: 18px; color: var(--muted); text-align: center; }
.settings-notice strong,
.settings-info-strip strong { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.settings-notice span,
.settings-info-strip span { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 760px) {
  .admin-page-head {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
  }
  .admin-page-head h2 { font-size: 22px; line-height: 1.25; }
  .admin-page-head p { font-size: 12px; line-height: 1.5; }
  .admin-page-head > .button-primary,
  .admin-page-head > .button-secondary { width: 100%; min-height: 43px; }
  .admin-toolbar { align-items: stretch; flex-direction: column; gap: 8px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
  .review-toolbar .segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .review-toolbar .segmented-control button { width: 100%; min-height: 42px; padding-inline: 7px; }
  .review-toolbar > .button-secondary { width: 100%; min-height: 42px; }
  .settings-notice,
  .settings-info-strip { align-items: flex-start; flex-direction: column; gap: 4px; }
  .settings-notice strong,
  .settings-info-strip strong { flex: none; }
  .review-admin-card { padding: 13px; }
  .review-admin-card header { flex-direction: column; gap: 5px; }
  .review-source { align-self: flex-start; }
  .review-admin-card footer { justify-content: stretch; }
  .review-admin-card footer button { width: 100%; min-height: 42px; }
}

.client-account-tabs-admin { display: flex; gap: 6px; margin: 0 0 18px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.client-account-tabs-admin button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 13px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--muted); font: inherit; cursor: pointer; }
.client-account-tabs-admin button.active { border-bottom-color: #347354; color: var(--ink); font-weight: 650; }
.client-account-tabs-admin button span { display: inline-grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 10px; background: #edf2ee; color: #496052; font-size: 11px; }
.client-accounts-panel { min-width: 0; }
.client-accounts-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 12px; }
.client-accounts-summary > div { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.client-accounts-summary strong { font-size: 20px; font-variant-numeric: tabular-nums; }
.client-accounts-summary span, .client-accounts-hint { color: var(--muted); font-size: 12px; }
.client-accounts-hint { margin: 0 0 12px; }
.client-accounts-table td small { display: block; margin-top: 3px; color: var(--muted); }
.client-account-mobile-dates { display: grid; gap: 4px; padding-top: 9px; color: var(--muted); font-size: 11px; }
.client-accounts-mobile-list { display: none; }

@media (max-width: 760px) {
  .client-account-tabs-admin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 0; border-radius: 7px; background: #edf2ee; }
  .client-account-tabs-admin button { justify-content: center; min-width: 0; min-height: 42px; padding: 5px; border: 0; border-radius: 5px; font-size: 13px; }
  .client-account-tabs-admin button.active { background: #fff; box-shadow: 0 1px 4px rgba(25, 46, 34, .12); }
  .client-accounts-summary { gap: 6px; }
  .client-accounts-summary > div { padding: 10px 8px; }
  .client-accounts-summary strong { font-size: 17px; }
  .client-accounts-summary span { font-size: 10px; line-height: 1.3; }
  .client-accounts-table { display: none; }
  .client-accounts-mobile-list { display: grid; }
  .client-accounts-mobile-list .mobile-client-card { cursor: default; }
  .client-accounts-mobile-list .mobile-card-action { width: 100%; }
}

.activity-trigger { display: grid !important; place-items: center; }
.activity-bell { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.activity-trigger .notice-dot { display: grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border: 2px solid #fff; border-radius: 10px; background: #e95454; color: #fff; font-size: 9px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.activity-backdrop { position: fixed; inset: 0; z-index: 2800; display: flex; justify-content: flex-end; align-items: flex-start; padding: 66px 18px 18px; background: rgba(19, 34, 46, .16); }
.activity-panel { display: flex; flex-direction: column; width: min(430px, calc(100vw - 32px)); max-height: min(690px, calc(100dvh - 84px)); overflow: hidden; border: 1px solid #dce3df; border-radius: 7px; background: #fff; box-shadow: 0 18px 48px rgba(23, 40, 32, .2); outline: none; }
.activity-panel-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 68px; padding: 12px 18px; border-bottom: 1px solid #e8ece9; background: #fff; }
.activity-panel-title-wrap small { display: block; margin-bottom: 3px; color: #7b8a80; font-size: 9px; font-weight: 700; }
.activity-panel-title-wrap h2 { margin: 0; color: #22352a; font-size: 17px; font-weight: 600; line-height: 1.25; }
.activity-close { display: none; width: 38px; height: 38px; border: 0; border-radius: 5px; background: transparent; color: #53635a; font-size: 26px; line-height: 1; }
.activity-mark-all { min-height: 34px; padding: 6px 9px; border: 1px solid #d6e2d9; border-radius: 5px; background: #f6faf6; color: #45694d; font-size: 11px; font-weight: 600; white-space: nowrap; }
.activity-mark-all:hover { background: #edf5ee; }
.activity-list { min-height: 120px; overflow: auto; overscroll-behavior: contain; }
.activity-state { margin: 0; padding: 30px 20px; color: #78837c; font-size: 13px; text-align: center; }
.activity-error { color: #a24545; }
.activity-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 8px; align-items: center; gap: 12px; width: 100%; min-height: 82px; padding: 12px 17px; border: 0; border-bottom: 1px solid #edf0ee; background: #fff; color: #25342b; text-align: left; cursor: pointer; }
.activity-row:hover { background: #f8faf8; }
.activity-row.unread { background: #fbfdfb; }
.activity-row-icon { display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid currentColor; border-radius: 6px; font-size: 17px; font-weight: 500; line-height: 1; }
.activity-row.type-created .activity-row-icon { color: #718c54; }
.activity-row.type-cancelled .activity-row-icon { color: #b34c43; font-size: 21px; }
.activity-row.type-rescheduled .activity-row-icon { color: #b56f39; font-size: 18px; }
.activity-row.type-updated .activity-row-icon { color: #397f82; font-size: 16px; }
.activity-row-content { display: grid; min-width: 0; gap: 4px; }
.activity-row-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; min-width: 0; }
.activity-row-heading strong { overflow: hidden; color: #25342b; font-size: 14px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.activity-row-heading time { flex: none; color: #8a918c; font-size: 10px; font-variant-numeric: tabular-nums; }
.activity-row-kind { overflow: hidden; color: #66736a; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.activity-row-date { color: #59675d; font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; }
.activity-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #e45b52; }

/* Payment is independent of the appointment's pending/confirmed/completed status. */
.appt[data-payment="paid"]:not([data-status="cancelled"]) { background: #ccefe5; border-color: #91cbb8; border-left-color: #08765a; }
.appt[data-payment="paid"]:not([data-status="cancelled"]):hover { background: #bce8db; }
.appt[data-payment="partial"]:not([data-status="cancelled"]) { background: #fff0ce; border-color: #e3c279; border-left-color: #a16812; }
.appt .tag.booking-payment-badge { display: block; position: absolute; top: 6px; right: 6px; max-width: calc(100% - 12px); height: auto; min-height: 18px; padding: 1px 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; line-height: 16px; color: #475569; }
.appt[data-payment="paid"]:not([data-status="cancelled"]) .tag { color: #075d45; background: #f0fff8; }
.appt[data-payment="partial"]:not([data-status="cancelled"]) .tag { color: #7e4d0b; background: #fffaf0; }
.appt .meta { right: 116px; overflow: hidden; text-overflow: ellipsis; }
.booking-payment-status { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.5; color: #68758a; }
.booking-payment-status[data-payment="paid"], .booking-settled-marker { color: #08704f; }
.booking-payment-status[data-payment="partial"] { color: #95600f; }
.booking-payment-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 10px; padding: 9px 12px; border: 1px solid #d7deea; border-radius: 4px; background: #f5f7fa; font-size: 13px; line-height: 1.5; }
.booking-payment-summary[data-payment="paid"] { color: #075c44; border-color: #a2d5bd; background: #e6f6ec; }
.booking-payment-summary[data-payment="partial"] { color: #82520a; border-color: #e3c279; background: #fff5df; }
.booking-payment-summary span { font-size: 12px; }
.booking-settled-marker { display: inline-flex; align-items: center; min-height: 42px; padding: 8px 12px; font-weight: 700; font-size: 13px; }
.booking-checkout-button { color: #076349; border-color: #9fcebd; }
.mobile-booking-card[data-payment="paid"] { border-left: 4px solid #08765a; }
.mobile-booking-card[data-payment="partial"] { border-left: 4px solid #a16812; }
.appt.is-overtime:not([data-status="cancelled"]) { background: #fff0d5; border-color: #ddbd7d; border-left-color: #ac7315; }
.appt.is-overtime:not([data-status="cancelled"]):hover { background: #ffe8c0; }
.appt.is-overtime[data-payment="paid"]:not([data-status="cancelled"]) { background: #e2efcf; border-left-color: #ac7315; }
.appt-overtime-badge { display: block; position: absolute; bottom: 5px; right: 7px; max-width: calc(100% - 14px); padding: 1px 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: #fff9e9; color: #80510d; font-size: 10px; line-height: 16px; border-radius: 2px; }
.booking-overtime-notice { display: block; margin: 8px 0 0; color: #8a5a10; font-size: 12px; line-height: 1.5; }
@media (max-width: 760px) {
  .appt .tag.booking-payment-badge { max-width: 68px; padding-inline: 4px; font-size: 9px; }
  .appt .meta { max-width: calc(100% - 74px); min-height: 13px; }
  .booking-payment-summary { flex-direction: column; align-items: flex-start; }
  .booking-modal .foot-left { display: flex; flex-wrap: wrap; gap: 8px; }
  .booking-modal .foot-left > button { flex: 1 1 130px; min-width: 0; white-space: normal; }
}

@media (max-width: 760px) {
  .activity-backdrop { inset: 0; display: block; padding: 0; background: #fff; }
  .activity-panel { width: 100%; height: 100vh; height: 100dvh; max-height: none; border: 0; border-radius: 0; box-shadow: none; }
  .activity-panel-head { grid-template-columns: 42px minmax(0, 1fr) 42px; gap: 8px; min-height: 58px; padding: max(6px, env(safe-area-inset-top)) 12px 6px; }
  .activity-close { display: block; }
  .activity-panel-title-wrap { text-align: center; }
  .activity-panel-title-wrap small { display: none; }
  .activity-panel-title-wrap h2 { font-size: 16px; }
  .activity-mark-all { display: none; }
  .activity-panel-head:not(:has(.activity-mark-all))::after { content: ''; width: 38px; }
  .activity-list { flex: 1; min-height: 0; padding-bottom: env(safe-area-inset-bottom); }
  .activity-row { grid-template-columns: 28px minmax(0, 1fr) 7px; gap: 11px; min-height: 86px; padding: 13px 17px; }
  .activity-row-heading strong { font-size: 15px; }
  .activity-row-heading time { font-size: 11px; }
  .activity-row-kind { font-size: 13px; }
  .activity-row-date { font-size: 12px; }
}
/* ── Independent shop management ── */
.shop-admin-head{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;margin-bottom:24px}
.shop-admin-head h2{margin:5px 0 8px;font-size:clamp(24px,3vw,36px);letter-spacing:0}
.shop-admin-head p{max-width:680px;margin:0;color:var(--muted,#6f736e)}
.shop-admin-actions,.shop-admin-toolbar,.shop-order-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.shop-admin-toolbar{border-top:1px solid var(--line,#e5e7e2);border-bottom:1px solid var(--line,#e5e7e2);padding:14px 0;margin-bottom:20px}
.shop-admin-search{flex:1 1 260px;max-width:440px}
.shop-admin-search input{width:100%;min-height:42px;border:1px solid var(--line,#dfe2dc);border-radius:8px;padding:0 14px;background:#fff;color:inherit}
.shop-admin-count{color:var(--muted,#6f736e);font-size:13px}
.shop-admin-message{margin:10px 0;color:#a43e2b;font-size:14px}
.shop-admin-product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.shop-admin-product-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line,#e5e7e2);border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 8px 24px rgba(24,36,30,.04)}
.shop-admin-product-card.inactive{opacity:.75;background:#fafbf9}
.shop-admin-product-media{height:180px;background:#eef1ed;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-admin-product-media img{width:100%;height:100%;object-fit:cover}
.shop-admin-product-placeholder{color:#8a918a;font-size:13px}
.shop-admin-product-status{position:absolute;top:12px;right:12px;padding:5px 9px;border-radius:999px;background:#fff;font-size:12px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.shop-admin-product-status.active{color:#267052}.shop-admin-product-status.inactive{color:#8a5a29}
.shop-admin-product-copy{padding:16px 16px 12px;flex:1}
.shop-admin-product-title{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.shop-admin-product-title h3{font-size:17px;line-height:1.25;margin:0;letter-spacing:0}.shop-admin-product-title code{font-size:10px;color:#8a918a;overflow-wrap:anywhere;text-align:right}
.shop-admin-product-copy p{font-size:13px;line-height:1.55;color:var(--muted,#6f736e);min-height:42px;margin:10px 0 14px}
.shop-admin-product-copy dl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0}.shop-admin-product-copy dt{font-size:10px;color:#8a918a;text-transform:uppercase}.shop-admin-product-copy dd{margin:4px 0 0;font-size:14px;font-weight:700}
.shop-admin-product-actions{display:flex;gap:8px;padding:12px 16px 16px;border-top:1px solid #edf0eb;flex-wrap:wrap}.shop-admin-product-actions button{flex:1 1 auto}
.button-danger{border:1px solid #dfb8ad;border-radius:7px;background:#fff;color:#a43e2b;padding:9px 12px;cursor:pointer}.button-danger:hover{background:#fff4f1}
.shop-admin-orders{margin-top:38px;border-top:1px solid var(--line,#e5e7e2);padding-top:28px}.shop-admin-section-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-end;margin-bottom:14px}.shop-admin-section-head h3{margin:4px 0 0;font-size:22px;letter-spacing:0}.shop-order-filter select{min-height:38px;border:1px solid var(--line,#dfe2dc);border-radius:7px;background:#fff;padding:0 10px;color:inherit}
.shop-order-list{display:grid;gap:8px}.shop-order-row{display:grid;grid-template-columns:minmax(190px,1.1fr) minmax(180px,1.5fr) auto minmax(150px,180px);align-items:center;gap:16px;padding:14px 16px;border:1px solid var(--line,#e5e7e2);border-radius:8px;background:#fff}.shop-order-main{display:grid;gap:4px}.shop-order-main strong{font-size:14px}.shop-order-main span{font-size:13px}.shop-order-main small{color:#8a918a;font-size:12px}.shop-order-items{display:flex;flex-wrap:wrap;gap:5px}.shop-order-items span{font-size:12px;color:#59635c;background:#f2f5f1;padding:5px 7px;border-radius:5px}.shop-order-total{white-space:nowrap}.shop-order-status-select{min-height:36px;border:1px solid var(--line,#dfe2dc);border-radius:7px;background:#fff;padding:0 8px;color:inherit}
.shop-product-modal{width:min(940px,calc(100vw - 32px));max-height:min(900px,calc(100vh - 32px))}.shop-product-form{display:grid;gap:22px}.shop-product-form-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:12px}.shop-product-form label,.shop-product-language label,.shop-product-image-editor>label{display:grid;gap:7px;font-size:12px;font-weight:700;color:#59635c}.shop-product-form input,.shop-product-form textarea{width:100%;box-sizing:border-box;border:1px solid var(--line,#dfe2dc);border-radius:7px;background:#fff;padding:10px 11px;color:inherit;font:inherit;font-weight:400}.shop-product-form textarea{resize:vertical;line-height:1.45}.shop-product-active-toggle{display:flex!important;align-items:center;gap:8px!important;width:max-content}.shop-product-active-toggle input{width:17px}.shop-product-languages{border-top:1px solid #edf0eb;padding-top:18px}.shop-product-languages h4,.shop-product-image-editor h4{margin:0 0 12px;font-size:14px}.shop-product-language-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.shop-product-language{display:grid;gap:10px;padding:13px;border:1px solid #e7ebe5;border-radius:8px;background:#fbfcfa}.shop-product-language>strong{font-size:13px;color:#267052}.shop-product-image-editor{display:grid;grid-template-columns:1.4fr 150px 1fr;gap:14px;align-items:end;border-top:1px solid #edf0eb;padding-top:18px}.shop-product-image-editor p{margin:0}.shop-product-image-preview{width:150px;height:110px;border-radius:7px;overflow:hidden;background:#eef1ed;display:flex;align-items:center;justify-content:center;color:#8a918a;font-size:11px}.shop-product-image-preview img{width:100%;height:100%;object-fit:cover}.shop-product-image-preview.empty{border:1px dashed #cfd6cd}.shop-product-image-actions{display:flex;gap:8px;align-items:center}.shop-product-image-actions .upload-btn{white-space:nowrap}.shop-product-modal footer{display:flex;align-items:center;justify-content:flex-end;gap:9px}.shop-product-modal footer .form-feedback{margin-right:auto}
@media (max-width:860px){.shop-admin-head,.shop-admin-section-head{align-items:stretch;flex-direction:column}.shop-admin-actions{justify-content:flex-start}.shop-order-row{grid-template-columns:1fr 1fr}.shop-order-items{grid-column:1/-1}.shop-order-status-select{width:100%}.shop-product-form-grid{grid-template-columns:1fr 1fr}.shop-product-form-grid label:first-child{grid-column:1/-1}.shop-product-language-grid{grid-template-columns:1fr}.shop-product-image-editor{grid-template-columns:1fr 120px}.shop-product-image-editor>label{grid-column:1/-1}.shop-product-image-preview{width:120px;height:90px}.shop-product-image-actions{align-self:center}.shop-product-modal{width:min(100vw - 20px,700px)}}
@media (max-width:520px){.shop-admin-actions button{flex:1}.shop-order-row{grid-template-columns:1fr}.shop-order-total{order:3}.shop-order-status-select{grid-column:1}.shop-product-form-grid{grid-template-columns:1fr}.shop-product-form-grid label:first-child{grid-column:auto}.shop-product-image-editor{grid-template-columns:1fr}.shop-product-image-preview{width:100%;height:180px}.shop-product-image-actions{justify-content:flex-start}.shop-product-modal footer{position:sticky;bottom:0;background:#fff;margin:0 -16px -16px;padding:12px 16px;border-top:1px solid #edf0eb}}

/* Booking origin stays distinct from payment/status colors. */
.appt:not([data-status="cancelled"])[data-origin="website"] { background-color: #e3f2e9; border-left-color: #16815d; }
.appt:not([data-status="cancelled"])[data-origin="website"]:hover { background-color: #d8eee2; }
.appt:not([data-status="cancelled"])[data-origin="manual"] { background-color: #e5eef9; border-left-color: #3973b6; }
.appt:not([data-status="cancelled"])[data-origin="manual"]:hover { background-color: #d9e7f7; }
.appt:not([data-status="cancelled"])[data-origin="third_party"] { background-color: #f1e5ef; border-left-color: #8c4f79; }
.appt:not([data-status="cancelled"])[data-origin="third_party"]:hover { background-color: #ead9e7; }
.appt .appt-origin,
.booking-origin-chip { display: inline-flex; align-items: center; width: fit-content; max-width: 100%; padding: 1px 5px; border-radius: 3px; font-size: 10px; font-weight: 700; line-height: 1.45; vertical-align: middle; }
.appt .appt-origin[data-origin="website"],
.booking-origin-chip[data-origin="website"] { color: #126b4e; background: #e2f2ea; }
.appt .appt-origin[data-origin="manual"],
.booking-origin-chip[data-origin="manual"] { color: #285b99; background: #e7effa; }
.appt .appt-origin[data-origin="third_party"],
.booking-origin-chip[data-origin="third_party"] { color: #784267; background: #f3e8f0; }
.booking-origin-field { display: grid; gap: 7px; margin-top: 16px; color: var(--ink, #243650); font-size: 13px; font-weight: 650; }
.booking-origin-field select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid #d5e0ed; border-radius: 5px; background: #fff; color: var(--ink, #243650); font: inherit; font-weight: 400; }
.booking-origin-field select:focus-visible { outline: 2px solid #3973b6; outline-offset: 2px; }