/* ==========================================================================
   app_ios/ui.css — оформление приложения «Джип Алерт» в стиле панели x-15.ru/panel
   Вынесено в отдельный файл из /app_ios/index.php. 2026-10-06
   Палитра/шрифты — как в /panel/: тёмный фон, зелёный акцент, IBM Plex Mono.
   ========================================================================== */

:root{
  --bg:#020408; --panel:rgba(6,14,22,0.82); --glass:rgba(10,20,32,0.55);
  --border:rgba(100,240,200,0.12); --border-bright:rgba(100,240,200,0.3);
  --text:#e8f4f0; --dim:#6a8a82; --accent:#64f0c8; --accent2:#44ccff;
  --warn:#ffb84c; --danger:#ff5f63;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
}

/* --- база --- */
*{box-sizing:border-box}
body,body.bg_dark,body.bg_gray{
  margin:0; padding:12px 12px calc(24px + env(safe-area-inset-bottom));
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-text-size-adjust:100%; min-height:100vh;
}
body a{color:inherit; text-decoration:none}
body img{max-width:100%; height:auto}

/* фоновые слои как в панели */
.ja-bg-grid,.ja-bg-radial,.ja-scan{position:fixed; inset:0; pointer-events:none}
.ja-bg-grid{z-index:0; background-image:
    linear-gradient(rgba(100,240,200,0.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(100,240,200,0.035) 1px,transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 12%,black 18%,transparent 72%);
  mask-image:radial-gradient(ellipse at 50% 12%,black 18%,transparent 72%)}
.ja-bg-radial{z-index:0; background:
    radial-gradient(ellipse at 50% 0%,rgba(40,120,100,0.18),transparent 55%),
    radial-gradient(ellipse at 85% 15%,rgba(40,100,180,0.10),transparent 45%)}
.ja-scan{z-index:1; overflow:hidden; opacity:.7}
.ja-scan::after{content:''; position:absolute; left:0; width:100%; height:2px;
  background:linear-gradient(90deg,transparent,rgba(100,240,200,0.12),transparent);
  animation:jaScan 5s linear infinite}
@keyframes jaScan{0%{top:-2px}100%{top:100%}}
.ja-wrap{position:relative; z-index:2; max-width:640px; margin:0 auto}

/* --- шапка --- */
.ja-top{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px; margin-bottom:12px; border:1px solid var(--border);
  background:var(--panel); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px)}
.ja-brand{display:flex; align-items:center; gap:10px; min-width:0}
.ja-logo{width:38px; height:38px; object-fit:contain; flex:0 0 auto}
.ja-brand b{display:block; font-family:var(--mono); font-weight:700; font-size:13px;
  letter-spacing:.1em; text-transform:uppercase; line-height:1.2}
.ja-brand span{display:block; font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:.05em}
.ja-chip{display:inline-flex; align-items:center; gap:6px; padding:5px 10px;
  font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid rgba(100,240,200,.28); color:#c9fff0; background:rgba(100,240,200,.07); white-space:nowrap}
.ja-chip .dot{width:6px; height:6px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 8px var(--accent); animation:jaPulse 1.6s infinite}
@keyframes jaPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* --- панели --- */
.ja-panel{border:1px solid var(--border); background:var(--panel); margin-bottom:12px;
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px)}
.ja-head{display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:9px 13px; border-bottom:1px solid var(--border)}
.ja-head h3{margin:0; font-family:var(--mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim)}
.ja-badge{font-family:var(--mono); font-size:9px; padding:2px 7px; border:1px solid var(--border); color:var(--accent)}
.ja-body{padding:10px 13px}

/* --- ряд с показателем --- */
.ja-row{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 0; border-bottom:1px solid rgba(255,255,255,.05);
  font-family:var(--mono); font-size:11px}
.ja-row:last-child{border-bottom:none}
.ja-row .lab{color:var(--dim); letter-spacing:.04em}
.ja-row .val{color:var(--accent); font-weight:600}
.ja-row .val.b{color:var(--accent2)} .ja-row .val.w{color:var(--warn)}

/* --- KPI --- */
.ja-kpi{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:12px;
  position:relative; z-index:2}
.ja-kpi .k{border:1px solid var(--border); background:var(--panel); padding:11px 13px; position:relative; overflow:hidden}
.ja-kpi .k .kl{font-family:var(--mono); font-size:9px; text-transform:uppercase; letter-spacing:.09em; color:var(--dim)}
.ja-kpi .k .kv{font-family:var(--mono); font-size:24px; font-weight:600; margin-top:6px; color:var(--accent); line-height:1}
.ja-kpi .k::after{content:''; position:absolute; left:0; top:0; width:100%; height:2px;
  background:linear-gradient(90deg,var(--accent),transparent); opacity:.5}
.ja-kpi .k.blue .kv{color:var(--accent2)}
.ja-kpi .k.blue::after{background:linear-gradient(90deg,var(--accent2),transparent)}
.ja-kpi .k.warn .kv{color:var(--warn)}
.ja-kpi .k.warn::after{background:linear-gradient(90deg,var(--warn),transparent)}

/* --- сетка кнопок-разделов --- */
.ja-nav{display:grid; grid-template-columns:repeat(2,1fr); gap:10px}
.ja-tile{position:relative; display:flex; flex-direction:column; justify-content:center; gap:4px;
  min-height:78px; padding:13px 14px; border:1px solid var(--border);
  background:linear-gradient(135deg,rgba(100,240,200,.05),rgba(10,20,32,.5));
  transition:all .18s; overflow:hidden}
.ja-tile:active,.ja-tile:hover{border-color:var(--border-bright); background:rgba(100,240,200,.09)}
.ja-tile .t{font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--text); line-height:1.25}
.ja-tile .s{font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:.04em; line-height:1.35}
.ja-tile .ico{font-family:var(--mono); font-size:16px; color:var(--accent); line-height:1}
.ja-tile.wide{grid-column:1 / -1}
.ja-tile.alarm{border-color:rgba(255,95,99,.4);
  background:linear-gradient(135deg,rgba(255,95,99,.18),rgba(255,95,99,.05))}
.ja-tile.alarm .t{color:#ffd8d9}
.ja-tile.alarm .ico{color:var(--danger)}
.ja-tile.new{border-color:rgba(68,204,255,.35)}
.ja-tile.new .t{color:#d7f2ff}
.ja-tile.new .ico{color:var(--accent2)}

/* --- кнопки --- */
.ja-btn{display:block; width:100%; padding:13px; text-align:center; cursor:pointer;
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  border:1px solid var(--accent); color:#02120d; background:var(--accent); transition:all .2s}
.ja-btn:hover{filter:brightness(1.08)}
.ja-btn.ghost{background:rgba(68,204,255,.07); border-color:rgba(68,204,255,.3); color:var(--accent2)}
.ja-btn.ghost:hover{background:rgba(68,204,255,.16)}
.ja-btn.dim{background:rgba(255,255,255,.03); border-color:var(--border); color:var(--dim)}
.ja-btn.dim:hover{color:var(--text)}

/* --- инфо/предупреждение --- */
.ja-note{font-family:var(--mono); font-size:10px; color:var(--dim); line-height:1.65;
  padding:11px 13px; border:1px solid var(--border); background:rgba(6,14,22,.55)}
.ja-note b{color:var(--text)}
.ja-note.warn{border-color:rgba(255,184,76,.3); color:#ffd9a3}

/* --- счётчики-плашки --- */
.ja-stats{display:flex; flex-wrap:wrap; gap:8px; font-family:var(--mono); font-size:10px}
.ja-stats span{padding:5px 9px; border:1px solid var(--border); color:var(--dim); letter-spacing:.04em}
.ja-stats b{color:var(--accent); font-weight:600}

/* --- футер --- */
.ja-foot{margin-top:12px; display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:9px 13px; border:1px solid var(--border); background:var(--panel);
  font-family:var(--mono); font-size:9px; color:var(--dim); letter-spacing:.06em; text-transform:uppercase}
.ja-foot i{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:5px}

/* --- формы (сохраняем рабочую логику, но в стиле) --- */
body input[type=text],body input[type=tel],body input[type=password],body textarea,body select{
  width:100%; padding:10px 11px; font-family:var(--mono); font-size:12px;
  background:rgba(10,20,32,.9); color:var(--text); border:1px solid var(--border-bright)}
body button,body input[type=submit],body input[type=button],body input[type=reset],
body .btn,body .btn_menu,body .btn_blue{
  font-family:var(--mono); font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:11px 13px; cursor:pointer; border:1px solid var(--border-bright); border-radius:0;
  line-height:1.4; box-shadow:none;
  background:rgba(100,240,200,.08); color:var(--accent); transition:all .2s}
body button:hover,body input[type=submit]:hover,body input[type=button]:hover,body input[type=reset]:hover,
body .btn:hover,body .btn_menu:hover,body .btn_blue:hover{
  background:rgba(100,240,200,.2); color:#fff}
body .btn_blue{background:rgba(68,204,255,.08); border-color:rgba(68,204,255,.3); color:var(--accent2)}

/* у старых обёрток убираем рамки, чтобы сетка панели была чистой */
body .container,body .list_article,body .wrapper,
body .bar_info,body .reg{background:none; border:0; padding:0; margin:0; width:auto}
body .menu{background:none; border:0}

/* --- карточки заявок и новостей (классы старого шаблона) --- */
body .one_article,body .profile_about{
  background:linear-gradient(135deg,rgba(100,240,200,.05),rgba(10,20,32,.55));
  border:1px solid var(--border); border-radius:0; box-shadow:none;
  padding:13px 15px; margin-top:10px; color:var(--text);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
body a.a_one_article{display:block; color:inherit; text-decoration:none}
body a.a_one_article:active .one_article,
body a.a_one_article:hover .one_article{border-color:var(--border-bright); background:rgba(100,240,200,.09)}
body .one_article .data,body .profile_about .data{
  color:var(--dim); font-size:11px; line-height:1.45; font-style:normal}
body .one_article p,body .profile_about p{
  color:var(--text); font-size:15px; line-height:1.5; margin:7px 0 0; font-weight:400}
body .one_article p b,body .profile_about p b{color:var(--text)}
body .one_article p i{color:var(--accent)}
body .one_article small,body .profile_about small{color:var(--dim); font-size:10px;
  font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase}
body .one_article em,body .profile_about em{font-style:normal}
body .one_article a,body .profile_about a{color:var(--accent2)}
body .profile_about h3{color:var(--text); font-family:var(--mono); font-size:14px;
  letter-spacing:.05em; padding-bottom:10px; margin:0}
body .profile_about ul{color:var(--dim); padding:0 0 6px; list-style:none}
body .profile_about ul li{font-size:13px; line-height:1.5; padding-bottom:10px; color:var(--dim)}
body .profile_about ul li i{color:var(--accent)}

/* белые полосы навигации внутри разделов — в тёмном стиле */
body .nav_bar,body.bg_gray .nav_bar{background:transparent; border:1px solid var(--border); color:var(--text)}
body .nav_bar a{color:var(--accent2)}

/* строки в таблицах адресов/рейтинга: светлые полосы заменяем на тёмные */
body .line{background:rgba(255,255,255,.03); color:var(--text)}
body .line:nth-child(even){background:rgba(255,255,255,.06)}
body .line_head{background:rgba(100,240,200,.08) !important; color:var(--text) !important}

/* --- единая колонка как на главной (/app_ios/): на ПК не растягивается,
   ширина и центрирование — как в смартфоне --- */
body > .wrapper,
body > .container,
body > .content,
body > .one_article,
body > .list_article,
body > .cnt,
body > .menu,
body > .item_text,
body > #map,
body > #response,
body > #res_form,
body .list_article > .container,
body .wrapper > .container{
  width:100%; max-width:640px; margin-left:auto; margin-right:auto;
}

/* очень широкие таблицы/карты внутри колонки — не разъезжаются */
body > .wrapper, body > .container, body > .content,
body > .one_article, body > .list_article{overflow-x:auto}

/* --- статистика отправок по заявке (Push / MAX / TG) --- */
.ja-push{margin:10px 0 0; padding:10px 12px; border:1px solid var(--border);
  background:rgba(6,14,22,.55); font-family:var(--mono)}
.ja-push-t{font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim); margin-bottom:8px}
.ja-push-r{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 14px}
.ja-push-r .k{font-size:10px; color:var(--dim); letter-spacing:.04em}
.ja-push-r b{font-size:15px; color:var(--accent); font-weight:600}
.ja-push-r .k:nth-of-type(2)+b{color:var(--accent2)}
.ja-push-r .k:nth-of-type(3)+b{color:var(--warn)}
.ja-push-d{margin-top:8px; display:flex; flex-wrap:wrap; gap:5px 10px;
  font-size:9px; color:var(--dim); letter-spacing:.03em}
.ja-push-d b{color:var(--text)}

/* --- /app_ios/z/z/: карточки заявок ровной сеткой (было float+min-height 380px) --- */
body .container > .row{display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start}
body .container > .row > .block{flex:1 1 300px; max-width:340px; width:auto; min-height:0; float:none;
  border:1px solid var(--border); display:flex; flex-direction:column; margin:0; box-sizing:border-box}
body .container > .row > .block > .one_article{margin-top:0; flex:1 1 auto; display:flex; flex-direction:column}
body .container > .row > .block > .one_article > a{display:block; flex:1 1 auto}
@media(max-width:720px){
  body .container > .row > .block{flex:1 1 100%; max-width:none}
}

@media(max-width:360px){
  body,body.bg_dark,body.bg_gray{padding:10px 10px calc(20px + env(safe-area-inset-bottom))}
  .ja-tile{min-height:70px; padding:11px 12px}
  .ja-tile .t{font-size:11px}
  .ja-kpi .k .kv{font-size:20px}
}