/* mobile.css — общие стили «приложения» для owner.html и employee.html:
   нижняя панель вкладок, лист «Ещё», кнопки −/+, уведомления, офлайн-плашка,
   таблицы-карточки на телефоне и отступы под вырез / домашнюю полоску iPhone.
   Цвета и размеры берутся из переменных :root каждой страницы. */

html{-webkit-text-size-adjust:100%; touch-action:manipulation;}
[hidden]{display:none !important;}
.tabbar, .tab, .sheet-tile, .nav-item, .btn, .pay-btn, .role-btn, .chip{
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;}

/* ══ Нижняя панель вкладок (только телефон) ══ */
.tabbar{display:none;}

@media (max-width:820px){
  .tabbar{
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:2px;
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    padding:6px 6px calc(6px + var(--safe-b));
    background:var(--glass-bg);
    backdrop-filter:blur(var(--glass-blur)); -webkit-backdrop-filter:blur(var(--glass-blur));
    border-top:1px solid var(--glass-border);
  }
  .tab{
    position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:3px; min-height:52px; padding:0 2px; border-radius:12px;
    color:var(--text-muted); font-size:10.5px; font-weight:600; line-height:1.15; text-align:center;
    transition:color var(--t), transform var(--t-fast);
  }
  .tab svg{width:22px; height:22px; stroke-width:1.9; flex:none;}
  .tab:active{transform:scale(.92);}
  .tab.active{color:var(--accent);}
  .tab.active::before{
    content:''; position:absolute; top:-7px; left:28%; right:28%; height:3px;
    border-radius:0 0 4px 4px; background:var(--accent);
  }
  /* центральная крупная кнопка (главное действие) */
  .tab-main .tab-icon{
    width:48px; height:48px; margin-top:-14px; border-radius:16px;
    display:flex; align-items:center; justify-content:center;
    background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(208,96,122,.45);
  }
  .tab-main .tab-icon svg{width:24px; height:24px;}
  .tab-main.active{color:var(--accent);}
  .tab-main.active::before{display:none;}
  .tab-badge{
    position:absolute; top:2px; left:calc(50% + 5px);
    min-width:18px; height:18px; padding:0 5px; border-radius:999px;
    background:var(--danger); color:#fff; font-size:10.5px; font-weight:700;
    display:inline-flex; align-items:center; justify-content:center;
  }

  /* модальные окна — «листы» снизу экрана */
  .modal-overlay{align-items:flex-end !important;}
  .modal-sheet{
    width:100% !important; max-width:none !important;
    border-radius:22px 22px 0 0 !important;
    padding:22px 20px calc(22px + var(--safe-b)) !important;
  }
  /* кнопки листа всегда видны внизу, даже если состав длинный */
  .modal-sheet:has(> .modal-actions){padding-bottom:0 !important;}
  .modal-sheet > .modal-actions{
    position:sticky; bottom:0; z-index:2;
    margin:18px -20px 0; padding:12px 20px calc(14px + var(--safe-b));
    background:var(--surface); border-top:1px solid var(--border);
  }

  /* iOS увеличивает страницу при фокусе на поле со шрифтом < 16px */
  input, select, textarea{font-size:16px !important;}
}

/* ══ Лист «Ещё» ══ */
.sheet-handle{width:40px; height:4px; border-radius:2px; background:var(--border-strong); margin:-6px auto 16px;}
.sheet-title{font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--text-dim); font-weight:600; margin:0 0 10px;}
.sheet-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px;}
.sheet-grid + .sheet-title{margin-top:18px;}
.sheet-tile{
  position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:7px;
  min-height:82px; padding:12px 6px; border-radius:14px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text); font-size:12.5px; font-weight:600; line-height:1.25; text-align:center;
  transition:border-color var(--t), background var(--t), transform var(--t-fast);
}
.sheet-tile svg{width:22px; height:22px; stroke-width:1.9; color:var(--accent); flex:none;}
.sheet-tile .tile-emoji{font-size:21px; line-height:1;}
.sheet-tile:active{transform:scale(.95);}
.sheet-tile.active{border-color:var(--accent); background:var(--accent-dim); color:var(--accent);}
.sheet-tile.danger{color:var(--danger);}
.sheet-tile.danger svg{color:var(--danger);}
.sheet-tile .nav-badge{position:absolute; top:8px; right:8px; margin:0;}

/* ══ Кнопки −/+ у количества ══ */
.stepper{
  display:grid; grid-template-columns:38px minmax(0,1fr) 38px; align-items:stretch;
  min-width:0; min-height:44px; border-radius:10px; overflow:hidden;
  border:1px solid var(--border); background:var(--surface-2);
  transition:border-color var(--t), box-shadow var(--t);
}
.stepper:focus-within{border-color:var(--accent); box-shadow:0 0 0 3px rgba(208,96,122,.15);}
.stepper input[type="number"]{
  width:100%; min-width:0; min-height:0; margin:0; padding:0 2px;
  border:none; border-radius:0; background:transparent; box-shadow:none;
  color:var(--text); text-align:center; font-weight:600; -moz-appearance:textfield; appearance:textfield;
}
.stepper input[type="number"]:focus{outline:none; border:none; box-shadow:none;}
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.stepper [data-step]{
  display:flex; align-items:center; justify-content:center;
  color:var(--accent); font-size:20px; font-weight:600; line-height:1;
  transition:background var(--t-fast);
}
.stepper [data-step]:active{background:var(--accent-dim);}

/* ══ Поиск и фильтры над списками ══ */
.list-tools{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px;}
.search-input{
  flex:1 1 200px; min-width:0; padding:11px 14px 11px 38px; min-height:44px;
  border-radius:10px; border:1px solid var(--border); color:var(--text); font-size:15px;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B8A6AA' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E") no-repeat 12px center / 17px;
  transition:border-color var(--t), box-shadow var(--t);
}
.search-input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(208,96,122,.15);}
.search-input::placeholder{color:var(--text-dim);}
.chip-group{display:flex; gap:6px; flex-wrap:wrap;}
.chip{
  padding:9px 14px; min-height:40px; border-radius:999px; cursor:pointer;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
  font-size:13px; font-weight:600; white-space:nowrap;
  transition:background var(--t), color var(--t), border-color var(--t), transform var(--t-fast);
}
.chip:active{transform:scale(.95);}
.chip.active{background:var(--accent-dim); border-color:var(--accent); color:var(--accent);}

.icon-btn{
  width:44px; height:44px; flex:none; border-radius:12px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text-muted);
  transition:background var(--t), color var(--t), transform var(--t-fast);
}
.icon-btn svg{width:19px; height:19px;}
.icon-btn:active{transform:scale(.92);}
.icon-btn.spinning svg{animation:spin 700ms linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

.install-link{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  margin-top:14px; padding:12px; min-height:46px; border-radius:10px;
  border:1px dashed var(--border-strong); color:var(--accent); font-size:14px; font-weight:600;
  background:transparent;
}

/* ══ Уведомления ══ */
.toast-wrap{
  position:fixed; left:50%; transform:translateX(-50%); z-index:300;
  bottom:calc(24px + var(--safe-b));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  width:max-content; max-width:calc(100% - 32px); pointer-events:none;
}
.toast{
  padding:11px 16px; border-radius:12px; font-size:14px; font-weight:500; text-align:center;
  background:var(--surface-3); color:var(--text); border:1px solid var(--border-strong);
  box-shadow:0 12px 32px rgba(0,0,0,.45);
  animation:toastIn 260ms cubic-bezier(0.16,1,0.3,1) both;
}
.toast.ok{border-color:rgba(61,158,108,.5);}
.toast.error{border-color:rgba(239,91,69,.55); color:#FECDD3;}
.toast.out{opacity:0; transform:translateY(8px); transition:opacity 220ms, transform 220ms;}
@keyframes toastIn{from{opacity:0; transform:translateY(12px) scale(.97);} to{opacity:1; transform:none;}}
@media (max-width:820px){ .toast-wrap{bottom:calc(84px + var(--safe-b));} }

/* ══ Нет сети ══ */
.offline-banner{
  position:fixed; top:0; left:0; right:0; z-index:250;
  padding:calc(6px + env(safe-area-inset-top,0px)) 12px 6px;
  background:var(--warn); color:#1A1205; font-size:12.5px; font-weight:600; text-align:center;
}

/* ══ Подсказка по установке ══ */
.install-help h3{margin-bottom:14px;}
.install-steps{padding-left:22px; margin-bottom:12px; font-size:14.5px; line-height:1.6;}
.install-steps li{margin-bottom:8px;}
.install-hint{font-size:13px; color:var(--text-muted); line-height:1.55;}
.install-note{font-size:13px; line-height:1.55; margin-top:12px; padding:10px 12px; border-radius:10px;
  background:var(--warn-dim); color:var(--warn);}
.inline-icon{display:inline-flex; vertical-align:-4px; color:var(--info);}
.inline-icon svg{width:19px; height:19px;}

/* ══ Таблицы → карточки на телефоне ══ */
@media (max-width:820px){
  table{display:block; overflow:visible; white-space:normal; font-size:14px;}
  table thead{display:none;}
  table tbody{display:flex; flex-direction:column; gap:8px;}
  table tbody tr{
    display:block; padding:3px 14px; border-radius:12px;
    background:var(--surface-2); border:1px solid var(--border);
  }
  table tbody tr:hover{background:var(--surface-2);}
  table td{
    display:flex; align-items:center; justify-content:space-between; gap:14px;
    padding:9px 0; min-width:0; border-bottom:1px solid var(--border);
    text-align:right; overflow-wrap:anywhere;
  }
  table td:last-child{border-bottom:none;}
  table td[data-label]::before{
    content:attr(data-label); flex:none; max-width:45%;
    color:var(--text-muted); font-size:12.5px; font-weight:500; text-align:left;
  }
  /* первая колонка — заголовок карточки */
  table td:first-child{justify-content:flex-start; text-align:left; font-weight:600; font-size:15px;}
  table td:first-child::before{content:none !important;}
  table td:empty{display:none;}
  table td.empty, table td[colspan]{display:block; text-align:center; border:none; font-weight:400; font-size:13.5px;}
  table tbody tr:has(> td.empty:only-child){background:none; border:none;}
  table td input{max-width:100%;}
  table td:first-child input{width:100% !important;}
  table td.actions-cell, table td:not([data-label]):not(:first-child){justify-content:flex-end; flex-wrap:wrap;}
}


/* ══════════════ Тема «Флористика» (тёмная) ══════════════
   Тёплая тёмная палитра: приглушённый тёмно-сливовый фон, розовый акцент и розовое золото из логотипа.
   Блок дописывается сборкой в конец mobile.css — он подключён после стилей страницы и поэтому
   перекрывает их. Сами цвета (--bg, --accent …) заменены в :root каждой страницы. */
:root{
  color-scheme:dark;
  --gold:#DDAE9A;        /* розовое золото — надпись логотипа */
}

/* вход: мягкие розовые и зелёные отсветы вместо сетки */
#loginScreen{
  background-image:
    radial-gradient(60% 50% at 10% 6%, rgba(208,96,122,.20), transparent 70%),
    radial-gradient(55% 45% at 94% 96%, rgba(111,160,125,.14), transparent 70%);
  background-size:auto;
}
/* логотип нарисован на белом: показываем его на светлой «этикетке», а не делаем светлой всю карточку */
.login-brand{max-width:300px; margin:-4px auto 14px; padding:8px 12px; border-radius:18px; background:#F3E9E4; isolation:isolate;}
.login-brand img{display:block; width:100%; height:auto; mix-blend-mode:multiply;}
.login-sub{letter-spacing:.02em;}

/* название — курсивом с засечками, как надпись в логотипе */
.sidebar .brand, .app-bar-title b{
  font-family:Georgia,'Times New Roman',serif; font-style:italic; font-weight:400; letter-spacing:0; color:var(--gold);}
.sidebar .brand{font-size:21px;}
.app-bar-title b{font-size:18px; line-height:1.2;}

/* мелкий цветной текст на подкрашенном фоне — светлее, чтобы читался без усилия */
.badge.active, .chip.active, .sheet-tile.active{color:var(--accent-hover);}
.btn.danger, .remove-btn{color:#F4806D;}

/* оба магазина на одном проспекте — в шапке продавца адрес с номером дома виден целиком */
@media (max-width:820px){
  .topbar-info #storeName{white-space:normal; overflow:visible; line-height:1.3;}
}