/* ===== Сменный журнал — «щит КИПиА» ===== */

/* ---- Шрифты IBM Plex (локально, кириллица+латиница) ---- */
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ibm-plex-sans-cyrillic-400-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/ibm-plex-sans-cyrillic-600-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/ibm-plex-sans-cyrillic-700-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Sans';font-style:normal;font-weight:700;font-display:swap;
  src:url('/fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/ibm-plex-mono-cyrillic-500-normal.woff2') format('woff2');
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2074,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}

:root{
  --steel:#e6eaef; --panel:#ffffff;
  --ink:#0f141b; --ink-2:#2a323d; --muted:#5e6b7a;
  --line:#d7dde4; --line-2:#c6cdd6;
  --brand:#0c7b8a; --brand-2:#095e6a; --brand-soft:#dff0f2;
  --work:#c2760e; --work-bg:#f8efdb;          /* лампа «в работе» */
  --done:#1d8a50; --done-bg:#e4f1e9;          /* лампа «завершено» */
  --danger:#bf3a2c; --danger-bg:#f8eae8;
  --sans:'Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:'Plex Mono', ui-monospace, "Cascadia Code", Consolas, monospace;
  --shadow:0 1px 2px rgba(16,21,28,.04), 0 10px 26px rgba(16,21,28,.06);
  --shadow-lg:0 6px 14px rgba(16,21,28,.08), 0 22px 50px rgba(16,21,28,.12);
  --r:12px; --r-sm:8px;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; font-family:var(--sans); font-size:16px; line-height:1.5; color:var(--ink);
  background:
    linear-gradient(180deg,#edf0f4,#e3e8ee) fixed;
  min-height:100vh; min-height:100dvh; -webkit-font-smoothing:antialiased;
}

/* легенда-метка моноширинным (как гравировка на пульте) */
.legend{font-family:var(--mono);font-weight:500;text-transform:uppercase;letter-spacing:.12em;}

/* ---- Шапка-пульт ---- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(135deg,#1b2531,#0f151c);
  color:#fff; display:flex; align-items:center; gap:12px;
  /* отступы учитывают «безопасные зоны» iPhone (чёлка/Dynamic Island, статус-бар) */
  padding:calc(12px + env(safe-area-inset-top,0px)) calc(18px + env(safe-area-inset-right,0px)) 12px calc(18px + env(safe-area-inset-left,0px));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 3px 16px rgba(8,12,18,.35);
  border-bottom:1px solid #000;
}
.topbar .logo{width:28px;height:28px;flex:none;stroke:var(--brand);filter:drop-shadow(0 0 6px rgba(12,123,138,.55));}
.topbar h1{
  margin:0; font-family:var(--mono); font-weight:500; font-size:15px;
  text-transform:uppercase; letter-spacing:.22em; color:#eef3f5;
}
.topbar h1::after{content:'·'; color:var(--brand); margin-left:.5em; }
.topbar .spacer{flex:1;}
.topbar a,.topbar button{
  color:#cdd6df; text-decoration:none; font-size:13px; font-weight:600;
  background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.10); cursor:pointer;
  padding:7px 12px; border-radius:var(--r-sm); font-family:var(--sans);
  transition:background .15s,color .15s,border-color .15s,transform .08s;
}
.topbar a:hover,.topbar button:hover{background:rgba(255,255,255,.16);color:#fff;}
.topbar a:active,.topbar button:active{transform:translateY(1px);}
.topbar-user{
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:#9fb6bd;
  padding:0 2px; max-width:220px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
#btn-install{background:var(--brand);border-color:var(--brand);color:#fff;}
#btn-install:hover{background:var(--brand-2);}

/* ---- Контейнер ---- */
.wrap{max-width:1240px; margin:0 auto; padding:18px 24px;}

/* ---- Экран входа ---- */
.login-screen{display:flex;align-items:center;justify-content:center;padding:8vh 20px;}
.login-box{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:34px 28px; width:100%; max-width:360px; text-align:center;
  position:relative; overflow:hidden;
}
.login-box::before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:var(--brand);}
.login-box .logo-big{width:62px;height:62px;margin:4px auto 14px;padding:14px;display:block;
  background:var(--brand-soft);border-radius:14px;stroke:var(--brand);}
.login-box h2{margin:0 0 6px;font-family:var(--mono);font-weight:500;font-size:18px;
  text-transform:uppercase;letter-spacing:.14em;}
.login-box .login-hint,.login-box .login-sub{color:var(--muted);font-size:13.5px;margin:0 0 18px;}
.login-box .field{margin-bottom:14px;text-align:left;}

/* ---- Раскладка: меню слева + контент ---- */
.layout{display:flex;gap:18px;align-items:flex-start;}
.content{flex:1;min-width:0;}

/* ---- Вкладки (тумблеры пульта) ---- */
.tabs{display:flex;flex-direction:column;gap:8px;width:184px;flex:none;position:sticky;top:74px;}
.tab{
  font-family:var(--mono);font-weight:500;font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;
  text-align:left;padding:13px 14px;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r-sm);cursor:pointer;color:var(--muted);box-shadow:var(--shadow);
  transition:color .15s,border-color .15s,background .15s,box-shadow .15s;
  display:flex;align-items:center;gap:9px;
}
.tab::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none;transition:.15s;}
.tab:hover{color:var(--ink);border-color:var(--line-2);}
.tab.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.tab.active::before{background:var(--brand);box-shadow:0 0 8px var(--brand);}

/* ---- Панели ---- */
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:18px;box-shadow:var(--shadow);margin-bottom:16px;
}
.panel h2{
  margin:0 0 16px;font-family:var(--mono);font-weight:500;font-size:12px;
  text-transform:uppercase;letter-spacing:.16em;color:var(--brand-2);
  display:flex;align-items:center;gap:9px;
}
.panel h2::before{content:'';width:14px;height:2px;background:var(--brand);}

/* ---- Форма ---- */
.field{margin-bottom:15px;}
.field label{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:6px;
  text-transform:uppercase;letter-spacing:.05em;}
.field .hint{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0;}
input[type=text],input[type=password],input[type=date],
input[type=datetime-local],select,textarea{
  width:100%;padding:12px 13px;font-size:16px;font-family:var(--sans);color:var(--ink);
  border:1px solid var(--line-2);border-radius:var(--r-sm);background:#f6f8fa;
  -webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s,background .15s;
}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%235e6b7a' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
textarea{min-height:96px;resize:vertical;line-height:1.5;}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brand);background:#fff;box-shadow:0 0 0 3px var(--brand-soft);
}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.other-input{margin-top:8px;}

/* ---- Кнопки ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 18px;font-size:14.5px;font-weight:600;cursor:pointer;font-family:var(--sans);
  border-radius:var(--r-sm);border:1px solid transparent;width:100%;
  background:var(--brand);color:#fff;box-shadow:0 2px 8px rgba(12,123,138,.25);
  transition:background .15s,box-shadow .15s,transform .08s,border-color .15s;
}
.btn:hover{background:var(--brand-2);}
.btn:active{transform:translateY(1px);box-shadow:0 1px 3px rgba(12,123,138,.25);}
.btn.secondary{background:var(--panel);color:var(--ink);border-color:var(--line-2);box-shadow:none;}
.btn.secondary:hover{background:#f1f4f7;border-color:#b6bfca;}
.btn.small{width:auto;padding:9px 13px;font-size:13px;}
.btn.danger{background:var(--panel);color:var(--danger);border-color:var(--line-2);box-shadow:none;}
.btn.danger:hover{background:var(--danger-bg);border-color:#e3b3ad;}
.btn:disabled{opacity:.5;cursor:default;transform:none;}

/* ---- Доступность и тач-эргономика ---- */
button,a,.tab,.chip,summary,[role="button"],label[for]{touch-action:manipulation;}
/* кольцо фокуса показываем только при навигации с клавиатуры, мыши не мешаем */
:where(.btn,.tab,.topbar a,.topbar button,.lightbox-close,.thumb button):focus-visible{
  outline:2px solid var(--brand);outline-offset:2px;
}
:focus:not(:focus-visible){outline:none;}
/* тач-цели не мельче ~40px (рекомендация 44px) */
.btn.small{min-height:40px;}
.topbar a,.topbar button{display:inline-flex;align-items:center;gap:6px;min-height:38px;}
#btn-install svg{width:15px;height:15px;flex:none;}

/* ---- Превью в форме ---- */
.thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;}
.thumb{position:relative;width:78px;height:78px;border-radius:var(--r-sm);overflow:hidden;border:1px solid var(--line-2);}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block;background:#0f141b;}
.thumb .vbadge{position:absolute;left:3px;bottom:3px;background:rgba(15,20,27,.72);color:#fff;
  font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase;padding:1px 5px;border-radius:5px;pointer-events:none;}
.thumb button{position:absolute;top:3px;right:3px;width:22px;height:22px;border-radius:50%;border:0;
  background:rgba(15,20,27,.65);color:#fff;cursor:pointer;font-size:14px;line-height:1;}

/* ---- Поиск ---- */
.search-row{display:grid;grid-template-columns:1fr;gap:10px;}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin-top:12px;}
.filters .full{grid-column:1/-1;}
.search-actions{display:flex;gap:10px;margin-top:14px;}

/* ---- Журнал: счётчик ---- */
.count{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase;margin:0 2px 12px;}

/* ---- Запись: строка вахтенного лога с лампой статуса ---- */
.entry{
  display:flex;align-items:stretch;gap:0;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  margin-bottom:14px;box-shadow:var(--shadow);transition:box-shadow .15s,border-color .15s;
}
.entry:hover{box-shadow:var(--shadow-lg);border-color:var(--line-2);}
.entry-rail{flex:none;width:38px;position:relative;display:flex;justify-content:center;padding-top:20px;}
.lamp{width:12px;height:12px;border-radius:50%;background:var(--line-2);z-index:1;}
.entry.in_progress .lamp{background:var(--work);box-shadow:0 0 0 4px var(--work-bg),0 0 12px rgba(194,118,14,.6);
  animation:lampPulse 2.4s ease-in-out infinite;}
.entry.done .lamp{background:var(--done);box-shadow:0 0 0 4px var(--done-bg);}
.entry-rail::after{content:'';position:absolute;top:38px;bottom:-15px;left:50%;width:2px;
  background:var(--line);transform:translateX(-50%);}
.entry:last-child .entry-rail::after{display:none;}
@keyframes lampPulse{0%,100%{box-shadow:0 0 0 4px var(--work-bg),0 0 0 1px rgba(194,118,14,.5);}
  50%{box-shadow:0 0 0 4px var(--work-bg),0 0 0 7px rgba(194,118,14,0);}}

.entry-body{flex:1;min-width:0;padding:16px 16px 16px 4px;}
.entry-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.chip{
  font-family:var(--mono);font-weight:500;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;border:1px solid transparent;
}
.chip.in_progress{background:var(--work-bg);color:var(--work);border-color:#ecd6a8;}
.chip.done{background:var(--done-bg);color:var(--done);border-color:#bfe0cb;}
.entry-where{font-weight:700;font-size:18px;letter-spacing:-.01em;}
.entry-where .equip{color:var(--brand-2);}
.entry-meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin:2px 0 10px;}
.entry-meta b{color:var(--ink);font-weight:500;}
.entry-meta .m-eng{margin-bottom:3px;color:var(--ink-2);}
.entry-meta .m-line{line-height:1.65;}
.entry-desc{white-space:pre-wrap;word-break:break-word;margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);}
.entry-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;}
.entry-actions:empty{display:none;}
.entry-media{flex:none;width:236px;align-content:start;display:grid;grid-template-columns:repeat(2,1fr);
  gap:8px;padding:16px 16px 16px 0;}
.entry-media img,.entry-media video{width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-sm);border:1px solid var(--line-2);background:#0f141b;}
.entry-media img{cursor:pointer;}
.entry-media :only-child{grid-column:1/-1;aspect-ratio:16/10;}

/* ---- Пусто ---- */
.empty{text-align:center;color:var(--muted);padding:48px 16px;}
.empty svg{width:44px;height:44px;opacity:.4;margin-bottom:8px;}

/* ---- Тост ---- */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:12px 18px;border-radius:var(--r-sm);
  font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:50;max-width:90vw;
  border-left:3px solid var(--brand);}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast.error{border-left-color:var(--danger);}

/* ---- Модальное окно ---- */
.modal{position:fixed;inset:0;background:rgba(15,20,27,.55);display:none;
  align-items:center;justify-content:center;z-index:60;padding:20px;}
.modal.show{display:flex;}
.modal-box{background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow-lg);
  padding:22px;width:100%;max-width:360px;border-top:3px solid var(--brand);}
.modal-box h3{margin:0 0 16px;font-family:var(--mono);font-weight:500;font-size:15px;
  text-transform:uppercase;letter-spacing:.1em;}
.modal-actions{display:flex;gap:10px;justify-content:flex-end;}
.modal-actions .btn{width:auto;}

/* ---- Лайтбокс ---- */
.lightbox{position:fixed;inset:0;background:rgba(8,11,15,.88);display:none;
  align-items:center;justify-content:center;z-index:60;padding:20px;}
.lightbox.show{display:flex;}
.lightbox img{max-width:100%;max-height:100%;border-radius:var(--r-sm);}
.lightbox-close{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:50%;
  border:0;background:rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;line-height:1;
  display:flex;align-items:center;justify-content:center;}
.lightbox-close:hover{background:rgba(255,255,255,.28);}

.back-btn{display:none;}

/* ---- Админка: списки ---- */
.list-item{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:8px;background:#f6f8fa;}
.list-item .name{flex:1;font-weight:600;}
.list-item .eng-dept{width:auto;flex:0 0 auto;max-width:200px;padding:8px 30px 8px 11px;font-size:14px;}
.list-item .dept-tg{width:auto;flex:0 1 200px;min-width:120px;padding:8px 11px;font-size:14px;font-family:var(--mono);}
.add-row{display:flex;gap:8px;margin-top:12px;flex-wrap:wrap;}
.add-row input{flex:1;min-width:140px;}
.add-row select{flex:0 0 auto;width:auto;min-width:150px;}
.add-row .btn{width:auto;}

.hidden{display:none !important;}

/* ===== Мобильная раскладка ===== */
@media (max-width:720px){
  .wrap{padding:12px 10px;}
  .topbar{padding:calc(11px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) 11px calc(12px + env(safe-area-inset-left,0px));gap:8px;}
  .topbar h1{font-size:12px;letter-spacing:.1em;}
  .topbar h1::after{display:none;}
  .layout{flex-direction:column;gap:10px;}
  .tabs{flex-direction:row;width:auto;gap:8px;position:static;top:auto;}
  .tab{flex:1;justify-content:center;padding:11px 8px;}
  .content{width:100%;}
  .row2,.filters{grid-template-columns:1fr;}
  .entry{flex-wrap:wrap;}
  .entry-media{width:100%;grid-template-columns:repeat(3,1fr);padding:0 14px 16px 14px;}
  .entry-media :only-child{aspect-ratio:16/9;max-width:100%;}
  .entry-where{font-size:17px;}
}

@media (prefers-reduced-motion:reduce){
  .entry.in_progress .lamp{animation:none;}
  *{transition:none !important;}
}