/* Патруль Р — светлая тема: фарфор / сталь / глубокий синий
   Строгая спокойная гамма под охранную тематику.
   Крупные элементы — интерфейс рассчитан в т.ч. на возрастных сотрудников. */
:root{
  --bg:#F2F4F5;            /* холодный светлый фон */
  --panel:#FFFFFF;
  --ink:#1C2733;           /* глубокий сине-графитовый текст */
  --muted:#6E7B87;
  --line:#DDE3E8;
  --accent:#2C5F8A;        /* стальной синий — основной акцент */
  --accent-dark:#204767;
  --accent-soft:#E8F0F7;   /* подложка под акцент */
  --ok:#2F7D4F;
  --ok-soft:#E4F2E9;
  --warn:#B23A2E;
  --warn-soft:#FBEAE7;
  --radius:12px;
  --shadow:0 1px 3px rgba(28,39,51,.08);
  --shadow-lift:0 4px 14px rgba(28,39,51,.10);
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.45;min-height:100vh;
}

.screen{min-height:100vh;padding:24px 16px}
.hidden{display:none}

/* ================= ВХОД ================= */
#screen-login{display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(180deg, #E9EEF2 0%, var(--bg) 45%);
}
#screen-login.hidden{display:none}
.login-box{
  background:var(--panel);border:1px solid var(--line);border-radius:16px;
  box-shadow:var(--shadow-lift);padding:36px 30px;width:100%;max-width:380px;
  display:flex;flex-direction:column;gap:12px;text-align:center;
}
.logo{
  font-size:1.8rem;font-weight:800;letter-spacing:.05em;
  color:var(--ink);
}
.logo::first-letter{color:var(--accent)}
.logo-sub{
  color:var(--muted);margin:-6px 0 18px;font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;
}
.input{
  width:100%;padding:14px 16px;
  font-size:17px; /* >=16px — iOS не зумит при фокусе */
  border-radius:10px;border:1.5px solid var(--line);
  background:#FBFCFD;color:var(--ink);font-family:inherit;
  transition:border-color .15s, background .15s;
}
.input::placeholder{color:#9AA6B0}
.input:focus{outline:none;border-color:var(--accent);background:#fff}
.error-text{color:var(--warn);font-size:.9rem;min-height:20px}

/* ТЕСТ: удалить вместе с разметкой перед сдачей */
.dev-login{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--line);
  display:flex;flex-direction:column;gap:8px;
}
.dev-login-label{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em}
.dev-btn{padding:11px;font-size:.95rem;font-weight:600;background:var(--accent-soft);color:var(--accent-dark)}
.dev-btn:hover{background:#DCE8F2}

/* ================= КНОПКИ ================= */
.btn{
  width:100%;padding:16px;font-size:1.1rem;font-weight:700;
  border-radius:12px;border:none;cursor:pointer;font-family:inherit;
  background:#E7EBEE;color:var(--ink);
  transition:background .15s, transform .1s;
}
.btn:active{transform:scale(.985)}
.btn-main{
  background:var(--accent);color:#fff;
  box-shadow:0 3px 10px rgba(44,95,138,.28);
}
.btn-main:hover{background:var(--accent-dark)}
.btn:disabled{opacity:.5;cursor:default}

.link-btn{
  background:none;border:none;color:var(--muted);
  font-size:1rem;cursor:pointer;font-family:inherit;padding:8px 0;
}
.link-btn:hover{color:var(--accent)}

/* ================= ГЛАВНЫЙ ЭКРАН ================= */
#screen-main,#screen-patrol,#screen-photo{max-width:520px;margin:0 auto}
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:18px;
}
.topbar-name{font-size:1.2rem;font-weight:800}

.object-info{
  background:var(--panel);
  border:1px solid var(--line);
  border-left:5px solid var(--accent);   /* фирменная деталь — стальная кромка поста */
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:18px 20px;margin-bottom:22px;
}
.object-name{font-size:1.15rem;font-weight:800;margin-bottom:3px}
.object-address{font-size:.92rem;color:var(--muted)}

.menu{display:flex;flex-direction:column;gap:14px}
.menu-item{
  display:flex;align-items:center;gap:16px;width:100%;
  padding:22px 20px;font-size:1.2rem;font-weight:700;
  color:var(--ink);background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);cursor:pointer;text-align:left;font-family:inherit;
  transition:box-shadow .15s, transform .1s;
}
.menu-item:hover{box-shadow:var(--shadow-lift)}
.menu-item:active{transform:scale(.99)}
.menu-icon{
  font-size:1.25rem;width:46px;height:46px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:var(--accent-soft);color:var(--accent);
  border-radius:12px;
}

/* смена идёт — карточка зеленеет целиком, видно с первого взгляда */
.menu-item.on{background:var(--ok-soft);border-color:var(--ok);color:var(--ok)}
.menu-item.on .menu-icon{background:#fff;color:var(--ok)}

/* ================= ОБХОД ================= */
.section-title{font-size:1.35rem;font-weight:800;margin-bottom:16px}
.checkpoint-list{display:flex;flex-direction:column;gap:12px}
.checkpoint-item{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;background:var(--panel);
  border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);
}
.checkpoint-item.done{background:var(--ok-soft);border-color:#BFE0CC}
.checkpoint-name{font-size:1.02rem;font-weight:700}
.checkpoint-time{font-size:.84rem;color:var(--muted);margin-top:2px}
.checkpoint-item.done .checkpoint-time{color:var(--ok);font-weight:600}
.checkpoint-btn{
  flex-shrink:0;padding:12px 18px;font-size:.95rem;font-weight:700;
  border-radius:10px;border:none;cursor:pointer;font-family:inherit;
  background:var(--accent);color:#fff;
}
.checkpoint-btn:hover{background:var(--accent-dark)}
.checkpoint-item.done .checkpoint-btn{background:var(--ok);color:#fff;cursor:default}
.checkpoint-btn:disabled{opacity:.9}

/* ================= ФОТООТЧЁТ ================= */
.photo-hint{font-size:1rem;color:var(--muted);margin-bottom:18px}
.photo-status{margin-top:16px;font-size:1rem;color:var(--ok);font-weight:700}
.photo-preview{
  width:100%;max-width:320px;border-radius:var(--radius);
  border:1px solid var(--line);box-shadow:var(--shadow);
  display:block;margin:0 auto 16px;
}
.photo-preview.hidden{display:none}

/* ================= ДЕСКТОП ================= */
@media (min-width:760px){
  .screen{padding:48px 24px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}