/* =========================================================
   goad.se — UI Refresh (CSS-only, no HTML changes)
   – Сет переменных, тёмная тема по умолчанию
   – Оптимизированные отступы, контраст, фокус
   – Карточки объявлений, формы, кнопки, пагинация, таблицы
   <link rel="stylesheet" href="/css/ui-refresh.css">
   ========================================================= */

:root{
  /* Цвета */
  --bg: #0b1222;
  --bg-elev: #0f172a;
  --bg-hover: #121a33;
  --border: #1f2a44;
  --muted: #9aa4b2;
  --text: #e6eefc;
  --text-inv: #0b1222;
  --primary: #6c5ce7;  /* фиолетовый */
  --primary-2: #5a4db8;
  --success: #22c55e;
  --warning: #f59e0b;
  --danger:  #ef4444;
  --info:    #38bdf8;

  /* Радиусы/тени/отступы */
  --r-lg: 14px;
  --r-xl: 20px;
  --shadow: 0 8px 24px rgba(0,0,0,.25);
  --gap-1: 8px;
  --gap-2: 12px;
  --gap-3: 16px;
  --gap-4: 24px;
  --gap-5: 32px;

  /* Типографика */
  --font: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --fs-base: 16px;
  --lh: 1.55;
}

/* База */
html{font-size: var(--fs-base);}
body{
  margin:0; background: var(--bg); color: var(--text);
  font-family: var(--font); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Контейнеры без изменения HTML — общие классы и теги */
.container, .wrap, main, .content, .page, .section{
  max-width: 1140px; margin: 0 auto; padding: 0 var(--gap-3);
}

/* Карточки (универсально для .card и блоков без класса) */
.card, .panel, .box{
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--gap-4);
  box-shadow: var(--shadow);
}

/* Заголовки */
h1,h2,h3{line-height:1.25;margin: 0 0 var(--gap-3)}
h1{font-size: clamp(24px, 3.2vw, 34px);}
h2{font-size: clamp(20px, 2.6vw, 28px);}
h3{font-size: clamp(18px, 2.2vw, 22px);}
p{margin: 0 0 var(--gap-3); color: var(--text);}

/* Ссылки */
a{color: var(--text); text-underline-offset: 2px;}
a:hover{color:#ffffff; text-decoration: underline;}
a.btn, .btn, button, [type="button"], [type="submit"]{
  appearance: none; border: 1px solid var(--border);
  background: var(--bg-elev); color: var(--text);
  padding: 10px 16px; border-radius: 10px;
  text-decoration: none; cursor: pointer; transition: .15s ease;
}
a.btn.primary, .btn.primary, [data-variant="primary"]{
  background: var(--primary); border-color: transparent; color: #fff;
}
a.btn.primary:hover, .btn.primary:hover, [data-variant="primary"]:hover{ background: var(--primary-2); }
.btn:hover, button:hover{background: var(--bg-hover);}

/* Фокус — доступность */
:focus-visible{
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* Инпуты и селекты */
input, select, textarea{
  width: 100%; padding: 12px 14px; border-radius: 10px;
  border: 1px solid var(--border); background: #0c1428; color: var(--text);
}
input::placeholder, textarea::placeholder{color: var(--muted);}
input:focus, select:focus, textarea:focus{border-color: var(--primary); outline: none;}
label{display:block; margin: 0 0 6px; color: var(--muted);}

/* Форм-сетки без изменения HTML */
.form, .form-section{display:block;}
.form .row, .row{display:flex; gap: var(--gap-4); flex-wrap: wrap;}
.form .row > *{flex:1 1 260px;}

/* Бэйджи (для статусов) */
.badge{
  display:inline-block; padding: 4px 8px; border-radius: 999px;
  font-size: 12px; line-height:1; border:1px solid var(--border); color: var(--muted);
}
.badge.success{background: rgba(34,197,94,.12); color:#86efac; border-color: rgba(34,197,94,.35);}
.badge.warn{background: rgba(245,158,11,.12); color:#fde68a; border-color: rgba(245,158,11,.35);}
.badge.danger{background: rgba(239,68,68,.12); color:#fecaca; border-color: rgba(239,68,68,.35);}

/* ====== Герой и поиск (если есть секция сверху) ====== */
.hero_area{
  min-height: 48vh; display:flex; flex-direction:column; justify-content:center;
  background: linear-gradient(180deg, rgba(12,20,40,.0), rgba(12,20,40,.6)), var(--bg);
}
.hero_area .headline{font-size: clamp(26px,3.4vw,40px); margin-bottom: var(--gap-3);}
.hero_area .sub{color: var(--muted); max-width: 60ch;}

/* Поисковая плашка без HTML-правок: ищем форму по атрибутам */
form[action*="search"], form[action*="Find"], .searchbar{
  display:flex; gap: var(--gap-2); align-items:center; padding: var(--gap-3);
  background: var(--bg-elev); border:1px solid var(--border); border-radius: var(--r-xl);
}
form[action*="search"] input[type="text"],
.searchbar input[type="text"]{flex: 1 1 auto;}
form[action*="search"] .btn, .searchbar .btn{white-space: nowrap;}

/* ====== Сетка объявлений без изменения HTML ====== */
.listings, .cards, .grid{
  display:grid; gap: var(--gap-4);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.listing, .listing-card, .grid > article, .cards > article{
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); overflow:hidden; transition: transform .15s ease, box-shadow .15s ease;
}
.listing:hover, .listing-card:hover, .grid > article:hover{ transform: translateY(-2px); box-shadow: var(--shadow); }

.listing .thumb, .listing-card .thumb, .grid > article .thumb{
  display:block; aspect-ratio: 16 / 9; overflow:hidden; background:#0b1222;
}
.listing .thumb img, .listing-card .thumb img, .grid > article .thumb img{
  width:100%; height:100%; object-fit:cover; display:block;
}
.listing .body, .listing-card .body, .grid > article .body{ padding: var(--gap-3); }
.listing .title, .listing-card .title{ font-weight: 600; margin-bottom: 6px; }
.listing .meta, .listing-card .meta{ color: var(--muted); font-size: 13px; }

.price{ font-weight: 700; }
.price .unit{ font-weight: 500; color: var(--muted); }

/* ====== Пагинация (без HTML-правок) ====== */
.pagination, nav[aria-label*="Pagination"], .pager{
  display:flex; justify-content:center; gap: var(--gap-2); margin: var(--gap-5) 0;
}
.pagination a, .pagination span, .pager a, .pager span{
  display:inline-flex; align-items:center; justify-content:center;
  min-width: 40px; height: 40px; padding: 0 12px;
  border-radius: 10px; border:1px solid var(--border); background: var(--bg-elev); color: var(--text);
  text-decoration:none;
}
.pagination a:hover{ background: var(--bg-hover); }
.pagination .active, .pager .active{ background: var(--primary); border-color: transparent; }

/* ====== Таблицы и списки (админ/табличные) ====== */
table{ width:100%; border-collapse: collapse; border-spacing: 0; }
thead th{ text-align:left; font-weight:600; color:#cbd5e1; }
th, td{ padding: 12px 14px; border-bottom: 1px solid var(--border); }
tbody tr:hover{ background: rgba(255,255,255,.02); }

/* ====== Алёрты ====== */
.alert{ padding: 12px 14px; border-radius: 10px; border:1px solid var(--border); margin: var(--gap-3) 0; }
.alert.info{ background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.35); color:#bae6fd; }
.alert.success{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color:#86efac; }
.alert.warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color:#fde68a; }
.alert.danger{ background: rgba(239,68,68,.12); border-color: rgba(239,68,68,.35); color:#fecaca; }

/* ====== Форматирование markdown-like описаний ====== */
.prose h1,.prose h2,.prose h3{margin: 1.2em 0 .6em;}
.prose p{margin: .8em 0;}
.prose ul, .prose ol{padding-left: 1.2em; margin: .6em 0;}
.prose code{background:#0c1428; border:1px solid var(--border); padding:.2em .4em; border-radius:6px;}

/* ====== Шапка/футер, если без классов ====== */
header, .site-header{ background: linear-gradient(180deg, rgba(12,20,40,.6), rgba(12,20,40,0)); padding: var(--gap-3) 0; border-bottom: 1px solid transparent; }
footer, .site-footer{ border-top:1px solid var(--border); padding: var(--gap-5) 0; color: var(--muted); }

/* ====== Мелкие утилиты ====== */
.mt-0{margin-top:0!important} .mt-1{margin-top:var(--gap-1)!important} .mt-2{margin-top:var(--gap-2)!important} .mt-3{margin-top:var(--gap-3)!important} .mt-4{margin-top:var(--gap-4)!important}
.mb-0{margin-bottom:0!important} .mb-1{margin-bottom:var(--gap-1)!important} .mb-2{margin-bottom:var(--gap-2)!important} .mb-3{margin-bottom:var(--gap-3)!important} .mb-4{margin-bottom:var(--gap-4)!important}
.text-muted{color: var(--muted)!important}
.center{display:flex; align-items:center; justify-content:center}

/* ====== Адаптив ====== */
@media (max-width: 980px){
  .container, .wrap, main, .content, .page, .section{padding: 0 var(--gap-2);}
}
@media (max-width: 640px){
  .card, .panel, .box{ padding: var(--gap-3); }
  form[action*="search"], .searchbar{ flex-direction: column; align-items: stretch; }
  .pagination a, .pagination span{ min-width: 36px; height: 36px; }
}