/* app.css — Light Slate UI с фирменным сливовым акцентом (GymnastPro) */

/* ------------------ THEME ------------------ */
:root{
  /* Фон */
  --bg-1:#f3f4f6;     /* gray-100 */
  --bg-2:#eef2f7;     /* мягкий градиент */

  /* Поверхности */
  --card:#ffffff;

  /* Текст/границы */
  --text:#0f172a;          /* slate-900 */
  --text-header:#111827;   /* заголовки */
  --muted:#6b7280;         /* подписи */
  --border:rgba(2,6,23,.12);
  --shadow:0 10px 24px rgba(2,6,23,.06);

  /* Фирменные цвета (под лого) */
  --brand:#604573;     /* глубокий сливовый */
  --brand-200:#a97fb9; /* светлый акцент */
  --brand-100:#e8d9f0; /* очень светлый фон */
  --success:#16a34a;
  --warn:#f59e0b;
  --danger:#b91c1c;
}

/* ------------------ RESETS ------------------ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ------------------ LAYOUT ------------------ */
body.sg-body{
  min-height:100dvh;
  background:linear-gradient(180deg,var(--bg-1),var(--bg-2)) !important;
  color:var(--text);
}

.container{max-width:1600px;margin:0 auto;padding:24px}
.center{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px}
.wrap{min-height:100dvh;display:flex;flex-direction:column}
.vstack-16{display:flex;flex-direction:column;gap:16px}
.flex-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.flex-1{flex:1;min-width:260px}
.right{text-align:right}
.mt-6{margin-top:6px}
.mt-8{margin-top:8px}
.mt-10{margin-top:10px}
.mt-12{margin-top:12px}
.fw-700{font-weight:700}
.small{font-size:12px}

/* ------------------ HEADER ------------------ */
.sg-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:16px 24px;
  background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
  backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(2,6,23,.08);
}
.sg-title{font-size:20px; font-weight:800; color:var(--text-header)}
.sg-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sg-grow{flex:1}
.sg-muted{color:var(--muted)}
.sg-name{font-weight:800}

/* Тонкая бренд-полоса (как на логине) — по желанию добавляйте <div class="brand-line"></div> */
.brand-line{
  height:4px; width:100%;
  background:linear-gradient(90deg, var(--brand), var(--brand-200));
  border-radius:999px;
}

/* ------------------ LINKS ------------------ */
a.link{
  color:var(--brand);
  border-bottom:1px dashed rgba(96,69,115,.45);
}
a.link:hover{ color:#4f3b62; border-bottom-color:#4f3b62 }

/* ------------------ CARDS & FIELDS ------------------ */
.sg-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:14px;
  box-shadow:var(--shadow);
}
.sg-input, .sg-select, textarea.sg-input{
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff; color:var(--text);
  outline:none; min-width:0;
  transition:border-color .15s, box-shadow .15s;
}
.sg-input:focus, .sg-select:focus, textarea.sg-input:focus{
  border-color:var(--brand-200);
  box-shadow:0 0 0 3px rgba(169,127,185,.25);
}
.sg-input.sm, .sg-select.sm{ padding:6px 8px; border-radius:10px; }
.sg-select{-webkit-appearance:auto;appearance:auto}

/* ------------------ BUTTONS (брендовая окантовка) ------------------ */
.sg-btn{
  display:inline-flex;align-items:center;justify-content:center; gap:8px;
  padding:10px 14px; border-radius:12px; min-height:40px;

  border:1px solid var(--brand-200);
  background:#fff;
  color:var(--brand);

  font-weight:700; cursor:pointer;
  box-shadow:0 6px 16px rgba(96,69,115,.10);
  transition:transform .15s, box-shadow .15s, border-color .15s, color .15s;
}
.sg-btn:hover{
  transform:translateY(-1px);
  border-color:var(--brand);
  box-shadow:0 12px 24px rgba(96,69,115,.16);
}
.sg-btn:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(96,69,115,.12) }
.sg-btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(169,127,185,.28), 0 8px 20px rgba(96,69,115,.12);
}

/* Заполненная версия для главных действий */
.sg-btn.primary{
  border-color:transparent;
  background:linear-gradient(90deg, var(--brand-200), var(--brand));
  color:#fff;
  box-shadow:0 10px 24px rgba(96,69,115,.25);
}
.sg-btn.primary:hover{ box-shadow:0 14px 30px rgba(96,69,115,.32); transform:translateY(-1px) }

/* Нейтральная/вторичная */
.sg-btn.neutral{ color:#0f172a; border-color:#d1d5db; box-shadow:0 6px 16px rgba(2,6,23,.06) }

/* Опасная */
.sg-btn.danger{ background:#fff; color:var(--danger); border-color:#fecaca; box-shadow:none }

/* Индикатор загрузки — фирменный */
.sg-btn[aria-busy="true"]{
  position:relative; pointer-events:none; opacity:.9;
}
.sg-btn[aria-busy="true"]::after{
  content:""; width:16px; height:16px; border-radius:50%;
  border:2px solid rgba(169,127,185,.5); border-top-color:var(--brand);
  display:inline-block; margin-left:6px; animation:spin .8s linear infinite;
}
@keyframes spin{ to{ transform:rotate(360deg) } }

/* ------------------ TABS / CHIPS / BADGES ------------------ */
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tab{
  padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:#fff; color:var(--text);
}
.tab.active{ border-color:var(--brand-200); box-shadow:0 0 0 2px rgba(169,127,185,.18) inset; color:var(--brand) }

.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--brand-200);border-radius:999px;background:#fff;color:var(--brand)}
.chip .rm{border:1px solid var(--border);background:#fff;border-radius:8px;padding:2px 6px;cursor:pointer}

.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{display:inline-block;padding:4px 10px;border:1px solid var(--border);border-radius:999px;background:#fff;font-size:12px}
.badge.brand{border-color:var(--brand-200); color:var(--brand); background:linear-gradient(180deg,#fff,var(--brand-100))}
.badge.ok{border-color:#c7f3d7; background:#f0fdf4; color:#166534}
.badge.warn{border-color:#fde68a; background:#fffbeb; color:#92400e}

/* ------------------ HERO TILES (как карточки на главной) ------------------ */
.hero-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:1200px;margin:24px auto 0}
@media (max-width:720px){ .hero-grid{grid-template-columns:1fr} }

.hero-tile{
  min-height:180px;
  display:flex; align-items:center; justify-content:center; flex-direction:column;
  text-align:center; padding:20px;
  color:var(--text-header);
  background:#fff; border:1px solid var(--border); border-radius:22px;
  box-shadow: var(--shadow);
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.hero-tile:hover{ transform: translateY(-2px); box-shadow:0 16px 40px rgba(2,6,23,.10); border-color:#cbd5e1; }
.hero-tile .title{ font-size:22px; font-weight:900; letter-spacing:.2px; }
.hero-tile .sub{ margin-top:6px; color:var(--muted); }

/* ------------------ GRIDS ------------------ */
.grid-6{display:grid; grid-template-columns:repeat(6, 1fr); gap:16px}
@media (max-width:1600px){ .grid-6{grid-template-columns:repeat(5,1fr)} }
@media (max-width:1400px){ .grid-6{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1120px){ .grid-6{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px) { .grid-6{grid-template-columns:repeat(2,1fr)} }
@media (max-width:540px) { .grid-6{grid-template-columns:1fr} }

/* ------------------ ATHLETES ------------------ */
.ath-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.ath-photo{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;border:1px solid var(--border);background:#f3f4f6}
.name{font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meta{color:var(--muted); font-size:13px}
.note{font-size:14px;line-height:1.35;max-height:3.6em;overflow:hidden}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* ------------------ COACHES ------------------ */
.coach-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow)}
.coach-top{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.coach-left{display:flex;gap:8px;align-items:center}
.coach-actions{display:flex;gap:8px;align-items:center}
.coach-ath-title{color:var(--muted); font-size:12px}

/* ------------------ AVATARS ------------------ */
.avatar-64, .avatar-96, .avatar-120{
  border-radius:999px; object-fit:cover; border:1px solid var(--border); background:#f3f4f6
}
.avatar-64{width:64px;height:64px}
.avatar-96{width:96px;height:96px}
.avatar-120{width:120px;height:120px;border-radius:12px}
.avatar-fallback{display:flex;align-items:center;justify-content:center;color:#64748b}

/* ------------------ TAGS ------------------ */
.tags{display:flex;gap:8px;flex-wrap:wrap}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--border);border-radius:999px;background:#fff}
.tag .rm{border:1px solid var(--border);background:#fff;border-radius:8px;padding:2px 6px;cursor:pointer}

/* ------------------ MODALS ------------------ */
.modal{position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:200}
.modal.open{display:flex}
.overlay{position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter: blur(2px)}
.sheet{
  position:relative; width:min(820px, 94vw); max-height:90dvh; overflow:auto;
  border-radius:16px; border:1px solid var(--border);
  background:#fff; box-shadow:0 30px 80px rgba(2,6,23,.12); padding:18px
}
.sheet-head{position:sticky; top:0; display:flex;align-items:center;gap:10px;margin-bottom:6px; background:#fff; padding-bottom:6px}
.sheet-head h3{flex:1;margin:0;color:var(--text-header)}

/* Поле-файл */
.file-wrap{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--border);border-radius:12px;padding:10px 12px;background:#fff;color:var(--muted);cursor:pointer}
.file-input{display:none}
.file-fake{pointer-events:none}

/* ------------------ KPI ------------------ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;padding:0 24px}
@media (max-width:900px){ .kpi-grid{grid-template-columns:repeat(2,1fr)} }
.kpi{background:#fff;border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.kpi .num{font-size:22px;font-weight:800;color:var(--text-header)}
.muted{color:var(--muted)}

/* ------------------ TABLES / WORKOUT BLOCK ------------------ */
table{width:100%;border-collapse:collapse;background:#fff}
th,td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top}
tbody tr:hover{background:#fafafe} /* лёгкий hover */

.workout{
  border:1px solid var(--border);border-radius:12px;margin:10px 0;overflow:hidden;box-shadow:var(--shadow);background:#fff;
  overflow-x:auto;
}
.workout-head{padding:12px 14px;display:flex;align-items:center;gap:10px;background:#f9fafb;border-bottom:1px solid var(--border);flex-wrap:wrap}
.workout table{width:100%; border-collapse:collapse; min-width:780px;}
.workout th, .workout td{border-bottom:1px solid var(--border);padding:10px;text-align:left;vertical-align:top;background:#fff}
.chk{display:inline-flex;align-items:center;gap:6px}

/* ------------------ PREVIEWS / ATTACHMENTS ------------------ */
.attwrap{display:flex;flex-wrap:wrap;gap:8px}
.att-item{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#f9fafb;position:relative}
.att-item.hide{display:none}
.processing{
  position:absolute;right:6px;bottom:6px;
  background:#111827;color:#fff;border-radius:8px;padding:2px 6px;font-size:11px;opacity:.85
}
.thumb{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#f9fafb}
.thumb img{display:block;width:160px;height:100px;object-fit:cover}
.thumb video{display:block;width:200px;height:120px;background:#111827}

.file-card{display:flex;flex-direction:column;gap:8px;width:220px;padding:10px;background:#fff;border:1px solid var(--border);border-radius:10px;position:relative}
.file-card .meta{font-size:12px;color:#6b7280}
.file-card .btns{display:flex;gap:8px}

/* ------------------ UPLOADER PROGRESS (брендовый) ------------------ */
.uploader{
  display:none;
  flex:1; min-width:160px; max-width:260px;
  height:8px; background:#e9e0f0; border-radius:999px; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(96,69,115,.15);
}
.uploader .bar{
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--brand-200), var(--brand));
  animation: progressStripe 1.2s linear infinite;
}
@keyframes progressStripe{
  0%{ filter:brightness(1) }
  50%{ filter:brightness(1.08) }
  100%{ filter:brightness(1) }
}

/* ------------------ ICONS (универсальная система) ------------------ */
.sg-icon { width:42px; height:42px }
.sg-icon *{ vector-effect: non-scaling-stroke; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round }
.icon-on-card{ color:#374151 }
.icon-muted{ color:#9ca3af }
.icon-fill *{ fill: currentColor; stroke: none }

/* ------------------------------------
   RESPONSIVE
------------------------------------- */
@media (max-width:1024px){
  .container{padding:18px}
  .sg-header{padding:14px 18px}
  .hero-tile{min-height:160px}
  .workout table{min-width:720px}
}
@media (max-width:820px){
  .container{padding:16px}
  .sg-header{gap:10px}
  .sg-btn{min-height:44px}
  .grid-6{gap:14px}
  .sg-input, .sg-select{padding:9px 11px}
  .sheet{width:96vw}
}
@media (max-width:640px){
  .container{padding:12px}
  .center{padding:12px}
  .sg-header{padding:12px; gap:8px}
  .sg-title{font-size:18px}
  .hero-grid{gap:16px}
  .sg-btn{width:100%; min-height:46px}
  .actions{flex-direction:row; gap:8px}
  .radio-row{flex-wrap:wrap}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .ath-photo{aspect-ratio:4/3}
  .sheet{ width:100vw; height:100dvh; max-height:none; border-radius:0; padding:16px }
  .overlay{background:rgba(0,0,0,.45)}
  .workout{overflow-x:auto}
  .workout table{min-width:680px}
}
@media (max-width:480px){
  .auth-logo{width:56px;height:56px}
  .auth-logo svg,.auth-logo img{width:38px;height:38px}
}
@supports (padding: max(0px)) {
  .sheet{ padding-bottom: max(16px, env(safe-area-inset-bottom)); }
}

/* ===== LEGACY BUTTONS BRIDGE: перекрашиваем старые .btn в фирменный стиль ===== */
.btn, .button{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px; border-radius:12px; min-height:40px;
  border:1px solid var(--brand-200); background:#fff; color:var(--brand);
  font-weight:700; cursor:pointer; box-shadow:0 6px 16px rgba(96,69,115,.10);
  transition:transform .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--brand); box-shadow:0 12px 24px rgba(96,69,115,.16) }
.btn-primary{ border-color:transparent; background:linear-gradient(90deg, var(--brand-200), var(--brand)); color:#fff; box-shadow:0 10px 24px rgba(96,69,115,.25) }
.btn-outline, .btn-alt{ background:#fff; color:var(--brand); border-color:var(--brand-200); box-shadow:none }
.btn-danger{ background:#fff; color:#b91c1c; border-color:#fecaca; box-shadow:none }

/* На всякий случай: принудительно гасим «оранжевые» модификаторы */
:where(.sg-btn).orange, :where(.btn).orange, :where(button).orange{
  background:#fff !important; color:var(--brand) !important; border-color:var(--brand-200) !important;
  box-shadow:0 6px 16px rgba(96,69,115,.10) !important;
}

/* ==== HARD OVERRIDE: убираем наследованные оранжевые стили кнопок ==== */
body.sg-body .sg-btn{
  background:#fff !important;
  color:var(--brand) !important;
  border:1px solid var(--brand-200) !important;
  box-shadow:0 6px 16px rgba(96,69,115,.10) !important;
}
body.sg-body .sg-btn:hover{
  border-color:var(--brand) !important;
  box-shadow:0 12px 24px rgba(96,69,115,.16) !important;
}
body.sg-body .sg-btn.primary{
  background:linear-gradient(90deg, var(--brand-200), var(--brand)) !important;
  color:#fff !important;
  border-color:transparent !important;
}
body.sg-body .sg-btn.alt{
  background:#fff !important;
  color:var(--brand) !important;
  border-color:var(--brand-200) !important;
  box-shadow:none !important;
}
body.sg-body .sg-btn.danger{
  background:#fff !important;
  color:#b91c1c !important;
  border-color:#fecaca !important;
  box-shadow:none !important;
}

/* ===== FORMS: единый современный стиль ===== */

/* сетка формы */
.form-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
@media (max-width:900px){ .form-grid{grid-template-columns:1fr} }

.sg-field{display:flex;flex-direction:column;gap:6px}
.sg-label{font-size:12px;font-weight:700;color:#374151}

/* инпуты/селекты/textarea — усиленный brand-focus */
.sg-input,.sg-select,textarea.sg-input{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff; color:var(--text);
  padding:10px 12px; min-height:44px; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.sg-input:focus,.sg-select:focus,textarea.sg-input:focus{
  border-color:var(--brand-200);
  box-shadow:0 0 0 4px rgba(169,127,185,.22);
}
.sg-input::placeholder, textarea.sg-input::placeholder{color:#94a3b8}
textarea.sg-input{min-height:96px}

/* date чуть больше места под иконку календаря */
input[type="date"].sg-input{padding-right:36px}

/* кастомный file без «серых» системных кнопок */
input[type="file"].sg-input{
  padding:0; min-height:auto; line-height:1; /* выравнивание */
}
input[type="file"].sg-input::file-selector-button{
  margin-right:10px;
  border:none; border-right:1px solid rgba(2,6,23,.08);
  padding:10px 12px;
  border-radius:12px 0 0 12px;
  background:linear-gradient(90deg, var(--brand-200), var(--brand));
  color:#fff; font-weight:700; cursor:pointer;
}
input[type="file"].sg-input:hover::file-selector-button{ filter:brightness(1.03) }

/* компактная кнопка-иконка (крестик в модалке и т.п.) */
.icon-btn{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--brand-200); border-radius:10px;
  background:#fff; color:var(--brand); cursor:pointer;
  transition:border-color .15s, box-shadow .15s;
}
.icon-btn:hover{ border-color:var(--brand); box-shadow:0 6px 16px rgba(96,69,115,.10) }


/* ===== LEGACY BUTTON SHIM: превращаем старые .btn в брендовые ===== */
.btn, a.btn, .button {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; min-height:40px;
  border-radius:12px; border:1px solid var(--brand-200);
  background:#fff; color:var(--brand);
  font-weight:700; cursor:pointer; text-decoration:none;
  box-shadow:0 6px 16px rgba(96,69,115,.10);
  transition:transform .15s, box-shadow .15s, border-color .15s, color .15s, background .15s;
}
.btn:hover, a.btn:hover, .button:hover{
  transform:translateY(-1px);
  border-color:var(--brand);
  box-shadow:0 12px 24px rgba(96,69,115,.16);
}
.btn:active, a.btn:active, .button:active{ transform:translateY(0); box-shadow:0 6px 14px rgba(96,69,115,.12) }

/* «Заполненные» старые варианты */
.btn-primary, .btn.fill, .btn.brand, .btn.purple {
  border-color:transparent;
  background:linear-gradient(90deg, var(--brand-200), var(--brand));
  color:#fff;
  box-shadow:0 10px 24px rgba(96,69,115,.25);
}
.btn-primary:hover, .btn.fill:hover, .btn.brand:hover, .btn.purple:hover{
  box-shadow:0 14px 30px rgba(96,69,115,.32); transform:translateY(-1px);
}

/* «Опасные» */
.btn-danger, .button.danger {
  background:#fff; color:var(--danger); border:1px solid #fecaca; box-shadow:none;
}

/* «Контурные/альтернативные» */
.btn-outline, .btn.alt { background:#fff; color:var(--brand); border-color:var(--brand-200); box-shadow:none }

/* Компактные */
.btn-sm, .btn.small { padding:6px 10px; min-height:34px; border-radius:10px }

/* На всякий случай гасим старые оранжевые модификаторы */
.btn.orange, .btn--orange, .btn.orange:hover{
  background:#fff; color:var(--brand); border-color:var(--brand-200);
  box-shadow:0 6px 16px rgba(96,69,115,.10);
}

/* Кнопки-ссылки в тегах/чипах */
.tag .rm{ border:1px solid var(--brand-200); color:var(--brand) }
.tag .rm:hover{ border-color:var(--brand) }

/* ── Calendar ───────────────────────────────────────── */
.calendar { width:100%; }
.cal-weekdays {
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin:6px 0 8px;
  font-size:12px; color:#6b7280; text-align:center;
}
.cal-grid {
  display:grid; grid-template-columns:repeat(7,1fr); gap:6px;
}
.cal-cell {
  display:flex; flex-direction:column; gap:6px; min-height:84px;
  border:1px solid #e5e7eb; border-radius:10px; padding:8px;
  text-decoration:none; color:inherit; background:#fff;
}
.cal-cell:hover { box-shadow:0 1px 0 0 #e5e7eb inset; }
.cal-cell.muted { background:#fafafa; color:#9ca3af; }
.cal-cell.active { outline:2px solid #3b82f6; outline-offset:0; }
.cal-date { font-weight:600; font-size:14px; }
.pill { display:inline-block; padding:2px 6px; border-radius:999px; font-size:11px; }
.pill.ok { background:#e6f4ea; color:#137333; }

@media (max-width: 768px) {
  .cal-cell { min-height:66px; padding:6px; }
  .cal-date { font-size:13px; }
}