*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #F5F5F7; }
a { color: inherit; text-decoration: none; }
a:hover { opacity: .78; }
.nl:hover { opacity: .6; }
.pb:hover { background: #2459B8 !important; opacity: 1; }
.gb:hover { filter: brightness(1.1); opacity: 1; transform: translateY(-2px); }
.ob:hover { background: #E6EEFB !important; opacity: 1; }
.btn:hover { opacity: 1; transform: translateY(-2px); }
.tab:hover { background: #EBEBF0; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 3px solid #3070DE; outline-offset: 2px; }

/* Админ-панель */
.admin-wrap { overflow-x: auto; border: 1.5px solid #E5E5EA; border-radius: 20px; background: #FFFFFF; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.admin-table th { text-align: left; white-space: nowrap; padding: 14px 16px; background: #EBEBF0; font-weight: 600; }
.admin-table td { padding: 12px 16px; border-top: 1px solid #E5E5EA; vertical-align: top; }
.admin-table td.nowrap { white-space: nowrap; }

/* Кабинет исполнителя: боковое меню и карточки */
.side-nav { display: flex; flex-direction: column; gap: 6px; }
.side-item { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 8px 18px; border: 0; border-radius: 18px; background: transparent; color: #1D1D1F; font-family: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; }
.side-item:hover { background: rgba(255, 255, 255, .55); }
.side-item-on, .side-item-on:hover { background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); }
.side-badge { flex: 0 0 auto; min-width: 26px; padding: 2px 8px; border-radius: 999px; background: #3070DE; color: #FFFFFF; font-size: 14px; font-weight: 700; text-align: center; }
.side-badge-news { background: #F6E48C; }
.side-badge-green { background: #2FA84F; }
.dash-main > section { background: #F5F5F7; border-radius: 28px; padding: 28px; max-width: none !important; }
@media (max-width: 860px) {
  .dash-side { flex-basis: 100% !important; }
  .side-nav { flex-direction: row; flex-wrap: wrap; }
  .side-item { width: auto; }
  .dash-main { padding: 18px !important; }
  .dash-main > section { padding: 20px; }
}

/* печать сметы: показываем только блок #est-print */
#est-print { display: none; }
@page { size: A4; margin: 8mm; }
@media print {
  body > *:not(#est-print) { display: none !important; }
  #est-print { display: block !important; padding: 0; color: #000; background: #fff; font-family: 'Inter', Arial, sans-serif; font-size: 14px; }
  #est-print table { width: 100%; border-collapse: collapse; }
  #est-print th, #est-print td { border: 1px solid #999; padding: 6px 8px; text-align: left; }
  #est-print td.num, #est-print th.num { text-align: right; white-space: nowrap; }
  #est-print .timing-paper { max-width: none; border-radius: 0; }
}

/* предпросмотр сметы рядом с формой */
.est-cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
.est-prev { min-width: 0; }
.est-prev #e-prev { overflow-x: auto; }
@media (min-width: 1180px) {
  .est-cols { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .est-prev { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
}

/* редактор пользовательского соглашения в админке: правка прямо на макете страницы */
.agr-ed [contenteditable] { border-radius: 6px; outline: 1.5px dashed transparent; outline-offset: 3px; cursor: text; min-width: 40px; }
.agr-ed [contenteditable]:hover { outline-color: #A1A1A6; }
.agr-ed [contenteditable]:focus { outline: 2px solid #3070DE; }
.agr-ed [contenteditable]:empty::before { content: attr(data-ph); color: #A1A1A6; }
.agr-ed .agr-row { position: relative; }
.agr-ed .agr-tools { position: absolute; top: -6px; right: -6px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; z-index: 2; }
.agr-ed .agr-row:hover .agr-tools, .agr-ed .agr-row:focus-within .agr-tools { opacity: 1; }
.agr-ed .agr-tools button { width: 28px; height: 28px; padding: 0; border: 1.5px solid #D2D2D7; border-radius: 50%; background: #FFFFFF; color: #1D1D1F; font-family: inherit; font-size: 15px; line-height: 1; cursor: pointer; }

/* ---------- телефоны: меню-«бургер» в шапке и выпадающий список разделов кабинета ---------- */
.m-burger, .m-sel { display: none; }
@media (max-width: 860px) {
  .m-burger { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-left: auto; padding: 0; border: 1.5px solid #D2D2D7; border-radius: 14px; background: #FFFFFF; color: #1D1D1F; font-family: inherit; font-size: 24px; line-height: 1; cursor: pointer; }
  .m-burger:focus-visible, .m-sel:focus-visible { outline: 3px solid #3070DE; outline-offset: 2px; }
  nav.m-collapsible.m-head { display: none !important; flex: 1 1 100%; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; padding: 8px; border-radius: 20px; background: #FFFFFF; box-shadow: 0 8px 28px rgba(0, 0, 0, .12); box-sizing: border-box; }
  nav.m-collapsible.m-head.m-open { display: flex !important; }
  nav.m-collapsible.m-head > a, nav.m-collapsible.m-head > button { display: flex !important; align-items: center; width: 100%; min-height: 48px; box-sizing: border-box; padding: 10px 16px !important; border-radius: 12px !important; font-size: 17px !important; border: 0 !important; background: transparent; }
  nav.m-collapsible.m-head > a:hover { background: #F5F5F7; }
  nav.m-collapsible.m-head > a[href*="registr"], nav.m-collapsible.m-head > a.m-cta { background: linear-gradient(100deg, #6E33B0 0%, #A02C6E 52%, #CF2E33 100%) !important; color: #FFFFFF !important; justify-content: center; margin-top: 4px; }

  .m-sel { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 0 18px; border: 0; border-radius: 18px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, .10); color: #1D1D1F; font-family: inherit; font-size: 17px; font-weight: 600; text-align: left; cursor: pointer; }
  .m-sel .m-sel-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .m-sel .m-sel-c { flex: 0 0 auto; transition: transform .15s; }
  .m-sel[aria-expanded="true"] .m-sel-c { transform: rotate(180deg); }
  .side-nav.m-collapsible { display: none; padding-top: 6px; }
  .side-nav.m-collapsible.m-open { display: flex; flex-direction: column; flex-wrap: nowrap; }
  .side-nav.m-collapsible .side-item { width: 100%; }
}
@media (max-width: 860px) {
  header > div { flex-basis: 100%; }
  header { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ---------- телефоны: таблицы и формы смет карточками ---------- */
.est-lbl { display: none; }
@media (max-width: 700px) {
  #stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  #stats > div { padding: 14px 16px !important; }

  .admin-wrap { overflow: visible; border: 0; background: transparent; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; width: 100%; box-sizing: border-box; }
  .admin-table thead { display: none; }
  .admin-table tr { margin: 0 0 12px; padding: 8px 16px; border: 1.5px solid #E5E5EA; border-radius: 18px; background: #FFFFFF; }
  .admin-table td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 8px 0; border-top: 1px solid #F0F0F3; text-align: right; overflow-wrap: break-word; word-break: normal; }
  .admin-table td:first-child { border-top: 0; }
  .admin-table td::before { content: attr(data-label); flex: 0 0 41%; max-width: 41%; overflow-wrap: normal; color: #6E6E73; font-size: 13px; font-weight: 600; text-align: left; }
  .admin-table td.nowrap { white-space: normal; }
  .admin-table td > * { min-width: 0; }

  .est-head { display: none !important; }
  .est-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; padding: 14px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 2px 10px rgba(0, 0, 0, .06); align-items: end !important; }
  .est-row > .est-cell:nth-child(1) { grid-column: 1 / -1; }
  .est-row > .est-cell:nth-child(6) { grid-column: 1 / -1; justify-self: end; }
  .est-row > .est-cell:nth-child(5) { text-align: right; align-self: center; }
  .est-lbl { display: block; margin-bottom: 4px; color: #515154; font-size: 13px; font-weight: 600; }
  #e-rows { gap: 12px; }
}
fieldset { min-width: 0; max-width: 100%; box-sizing: border-box; }

/* ---------- телефоны, кабинет исполнителя: нижняя панель вкладок и лист «Ещё» (js/app-nav.js) ---------- */
.app-bar, .app-sheet { display: none; }
@media (max-width: 640px) {
  body.app-m { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
  body.app-m .m-sel, body.app-m #tabs { display: none !important; }
  body.app-m .app-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: rgba(255, 255, 255, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid #E5E5EA; }
  .app-b { position: relative; flex: 1 1 0; min-width: 0; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 4px 2px; border: 0; border-radius: 16px; background: transparent; color: #6E6E73; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; }
  .app-b-on { color: #3070DE; }
  .app-b-on .app-ic { background: #E4ECFB; }
  .app-ic { display: flex; align-items: center; justify-content: center; width: 52px; height: 30px; border-radius: 999px; }
  .app-bl { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-badge { position: absolute; top: 2px; left: calc(50% + 8px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #B5E3BE; color: #1D1D1F; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
  .app-b:focus-visible, .app-tile:focus-visible { outline: 3px solid #3070DE; outline-offset: 2px; }
  body.app-m .app-sheet:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 60; }
  .app-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .4); }
  .app-box { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto; padding: 10px 16px calc(24px + env(safe-area-inset-bottom, 0px)); border-radius: 28px 28px 0 0; background: #FFFFFF; box-shadow: 0 -10px 40px rgba(0, 0, 0, .2); }
  .app-grab { width: 40px; height: 5px; margin: 0 auto 14px; border-radius: 3px; background: #D1D1D6; }
  .app-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .app-tile { position: relative; min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; padding: 14px 4px 12px; border: 0; border-radius: 20px; background: #F5F5F7; color: #1D1D1F; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; text-align: center; overflow-wrap: normal; cursor: pointer; }
  .app-tile .app-ic { width: 40px; height: 40px; border-radius: 14px; background: #E4ECFB; color: #3070DE; }
  .app-tile-on { box-shadow: inset 0 0 0 2px #3070DE; }
  .app-tile-gift { background: #FCF3C4; }
  .app-tile-gift .app-ic { background: #FFFFFF; color: #C0495F; }
  .app-tile-dark { background: #1D1D1F; color: #FFFFFF; }
  .app-tile-dark .app-ic { background: #3A3A3F; color: #FFFFFF; }
  .app-tile .app-badge { top: 8px; left: auto; right: 8px; }
}

/* ---------- телефоны, кабинет заказчика: шапка без кнопок (они в нижней панели), лист «Мои праздники» и «Профиль» (js/app-nav-c.js) ---------- */
@media (max-width: 640px) {
  body.app-c #support-btn, body.app-c #logout, body.app-c #settings-btn { display: none !important; }
  body.app-c #settings { position: fixed !important; top: auto !important; left: 12px !important; right: 12px !important; bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; max-width: none !important; max-height: 70vh; overflow-y: auto; z-index: 70 !important; }
  .app-ttl { margin: 0 0 12px; font-family: 'Inter', sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
  .app-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-rows { display: flex; flex-direction: column; gap: 8px; }
  .app-row { min-height: 52px; padding: 0 18px; border: 0; border-radius: 18px; background: #F5F5F7; color: #1D1D1F; font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
  .app-row-on { background: #E4ECFB; box-shadow: inset 0 0 0 2px #3070DE; }
  .app-row-new { background: transparent; box-shadow: inset 0 0 0 1.5px #A1A1A6; color: #3070DE; }
  .app-row:focus-visible { outline: 3px solid #3070DE; outline-offset: 2px; }
}
#pw-open { align-items: center; justify-content: center; }

/* ---------- телефоны, главная: компактная шапка и нижняя панель (js/app-nav-i.js) ---------- */
a.app-b { text-decoration: none; }
@media (max-width: 640px) {
  body.app-i header nav, body.app-i header .m-burger, body.app-i header a[href="#top"] > span:last-child { display: none !important; }
  body.app-i header > div { min-height: 52px !important; padding: 0 20px !important; }
  body.app-i #top { padding-top: 28px !important; }
  body.app-i .app-b { font-size: 10.5px; padding-left: 0; padding-right: 0; letter-spacing: -0.01em; }
  body.app-i .app-ic { width: 44px; }
}

/* телефоны: клетки календаря «Свободные даты» квадратные, а не вытянутые */
@media (max-width: 640px) {
  .cal-grid { gap: 4px !important; margin-left: -8px; margin-right: -8px; }
  .cal-day { min-height: 0 !important; aspect-ratio: 1 / 1; padding: 0 !important; border-radius: 10px !important; font-size: 15px !important; }
}

/* Смета на телефоне: четыре вкладки сеткой 2×2 */
@media (max-width: 640px) {
  #est-tabs { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px !important; }
  #est-tabs button { padding: 6px 8px !important; font-size: 15px !important; line-height: 1.2; min-height: 52px !important; width: 100%; overflow-wrap: anywhere; }
}
