/* ===== Coffee Network · industrial / кофейный ===== */

:root{
  --bg:        #e9dfcb;   /* крафт */
  --bg-deep:   #e0d4ba;
  --ink:       #1f1a14;   /* эспрессо */
  --ink-soft:  #3a3026;
  --paper:     #f3ecdb;
  --line:      #1f1a14;
  --accent:    #9e5f2d;   /* кофейный */
  --accent-d:  #7d4a22;
  --ok:        #5a6b3a;   /* открыто — оливковый */
  --ok-bg:     #cdd0b0;
  --warn:      #c9a227;   /* предупреждение */
  --warn-bg:   #ead08a;
  --bad:       #b5471f;   /* позднее открытие / переработка */
  --bad-bg:    #e6b79a;
  --mute:      #6b6052;
  --shadow:    6px 6px 0 var(--ink);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family:"Archivo",system-ui,sans-serif;
  color:var(--ink);
  background:var(--bg);
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}

/* крафтовая зернистость */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:50; opacity:.35;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.10  0 0 0 0 0.08  0 0 0 0.5 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode:multiply;
}

.hidden{display:none !important}

/* ===== PIN-гейт ===== */
.gate{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 120% at 50% 30%, var(--bg) 0%, var(--bg-deep) 100%);
}
.gate-card{
  width:min(380px,92vw);
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  padding:34px 30px 28px;
  text-align:center;
}
.gate-stamp{
  font-family:"Bebas Neue",sans-serif;
  font-size:40px; line-height:.9; letter-spacing:2px;
  color:var(--ink);
  border:2px solid var(--ink);
  padding:10px 0;
  margin:0 auto 22px;
  width:170px;
  transform:rotate(-2deg);
  background:var(--bg-deep);
}
.gate-label{
  display:block; font-size:11px; letter-spacing:3px; text-transform:uppercase;
  color:var(--mute); margin-bottom:10px; font-weight:600;
}
.gate-input{
  width:100%; text-align:center;
  font-family:"IBM Plex Mono",monospace;
  font-size:30px; letter-spacing:14px; font-weight:600;
  padding:12px 0 12px 14px;
  border:2px solid var(--ink);
  background:var(--bg);
  color:var(--ink);
  outline:none;
}
.gate-input:focus{background:#fff}
.gate-btn{
  margin-top:16px; width:100%;
  font-family:"Bebas Neue",sans-serif; font-size:24px; letter-spacing:3px;
  background:var(--ink); color:var(--paper);
  border:2px solid var(--ink);
  padding:10px 0; cursor:pointer;
  transition:transform .08s;
}
.gate-btn:active{transform:translate(2px,2px)}
.gate-error{color:var(--bad); font-size:13px; min-height:18px; margin-top:12px; font-weight:600}

/* ===== верхняя панель ===== */
.topbar{
  display:flex; align-items:center; gap:18px;
  background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--ink);
  padding:14px 22px;
  position:relative;
}
.topbar::after{
  content:""; position:absolute; left:0; right:0; bottom:-7px; height:4px;
  background:var(--accent);
}
.topbar-brand{display:flex; align-items:center; gap:10px}
.brand-mark{color:var(--accent); font-size:20px}
.brand-name{font-family:"Bebas Neue",sans-serif; font-size:26px; letter-spacing:2px}

.topbar-live{display:flex; align-items:center; gap:8px; margin-left:6px}
.live-dot{
  width:11px; height:11px; border-radius:50%;
  background:#e0463a; border:2px solid #fff;
  animation:pulse 1.6s infinite;
}
.live-dot.stale{background:var(--warn); animation:none}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.live-text{font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:2px; color:#e0463a}
.live-dot.stale + .live-text, .topbar-live.stale .live-text{color:var(--warn)}

.topbar-meta{margin-left:auto; display:flex; align-items:center; gap:10px;
  font-family:"IBM Plex Mono",monospace; font-weight:500}
.clock{font-size:18px}
.meta-sep{color:var(--accent)}
.today-label{font-size:14px; text-transform:uppercase; letter-spacing:1px}

/* ===== карточки точек ===== */
.points{
  display:grid; grid-template-columns:repeat(2,1fr); gap:18px;
  padding:22px;
}
.card{
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  padding:0 0 12px;
  position:relative;
  display:flex; flex-direction:column;
}
.card-head{
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:12px 14px 10px;
  border-bottom:2px solid var(--ink);
  background:var(--bg-deep);
}
.card-name{
  font-family:"Bebas Neue","Oswald",sans-serif; font-size:28px; line-height:.95;
  letter-spacing:1px; text-transform:uppercase;
}
.card-schedule{
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--mute);
  margin-top:3px; letter-spacing:.5px;
}
.status{
  display:flex; align-items:center; gap:7px;
  font-family:"Bebas Neue",sans-serif; font-size:16px; letter-spacing:1.5px;
  padding:3px 9px; border:2px solid var(--ink); white-space:nowrap;
}
.status .s-dot{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--ink)}
.status.open{ background:var(--ok-bg); color:var(--ink) }
.status.open .s-dot{background:var(--ok)}
.status.closed{ background:#d8cdb6; color:var(--ink-soft) }
.status.closed .s-dot{background:transparent}
.status.no_shift{ background:#d8cdb6; color:var(--mute) }
.status.no_shift .s-dot{background:transparent; border-color:var(--mute)}

.card-shift{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:10px 14px 2px;
}
.shift-barista{
  font-size:14px; font-weight:700; color:var(--ink);
}
.shift-barista .b-label{display:block; font-size:9px; letter-spacing:2px;
  color:var(--mute); font-weight:600; text-transform:uppercase; margin-bottom:1px}
.shift-open{
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px;
}
.shift-open .o-label{display:block; font-size:9px; letter-spacing:2px;
  color:var(--mute); font-weight:600; text-transform:uppercase; text-align:right; margin-bottom:1px}
.shift-times{
  display:flex; flex-direction:column; align-items:flex-end; gap:2px;
  font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:14px;
}
.shift-time-row{display:flex; align-items:baseline; gap:8px; justify-content:flex-end}
.shift-time-row .o-label{
  font-size:9px; letter-spacing:2px;
  color:var(--mute); font-weight:600; text-transform:uppercase;
}
.shift-time-row .o-val{font-size:14px}

/* крупный штамп выручки */
.revenue-stamp{
  margin:6px 14px 10px;
  border:2px dashed var(--ink);
  background:var(--bg);
  padding:8px 12px;
  display:flex; align-items:baseline; justify-content:space-between;
  gap:8px;
  position:relative;
}
.revenue-stamp::before{
  content:"ВЫРУЧКА · СЕЙЧАС";
  position:absolute; top:-8px; left:10px;
  background:var(--paper); padding:0 5px;
  font-size:9px; letter-spacing:2px; font-weight:700; color:var(--mute);
}
.rev-amount{
  display:inline-flex; align-items:baseline;
  gap:2px; min-width:0; max-width:100%;
}
.rev-num{
  font-family:"Bebas Neue",sans-serif; font-size:38px; line-height:.9;
  letter-spacing:1px; color:var(--ink);
  word-break:break-word; overflow-wrap:anywhere;
  min-width:0;
}
.rev-num.zero{color:var(--mute)}
.rev-cur{font-family:"Bebas Neue",sans-serif; font-size:22px; color:var(--accent); margin-left:0; flex-shrink:0}

/* ===== строка заказов под выручкой ===== */
.orders-bar{
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
  margin:0 14px 12px; padding:8px 12px 9px;
  background:var(--bg-deep); border:2px solid var(--ink);
  position:relative;
}
.orders-bar::before{
  content:"ЧЕКИ"; position:absolute; top:-7px; left:8px;
  background:var(--bg-deep); padding:0 4px;
  font-size:8px; letter-spacing:2px; font-weight:700; color:var(--mute);
}
.orders-metric{display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0}
.orders-metric .om-k{font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--mute); font-weight:700; white-space:nowrap}
.orders-metric .om-v{font-family:"IBM Plex Mono",monospace; font-weight:700; font-size:18px; color:var(--ink); white-space:nowrap}
.orders-metric.bad .om-v{color:var(--bad)}
.orders-metric.bad .om-k{color:var(--bad)}

/* ===== нижняя панель ===== */
.bottom{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:18px;
  padding:0 22px 22px;
}
.panel{
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  padding:14px 16px 16px;
  min-height:180px;
}
.panel-tag{
  font-size:10px; letter-spacing:2.5px; font-weight:700; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
  display:inline-block; padding:3px 9px; margin-bottom:12px;
}

/* сеть */
.net-total{display:flex; align-items:baseline; gap:4px; margin:2px 0 14px; flex-wrap:wrap}
.net-num{font-family:"Bebas Neue",sans-serif; font-size:54px; line-height:.9; letter-spacing:1px; word-break:break-word; overflow-wrap:anywhere; min-width:0}
.net-cur{font-family:"Bebas Neue",sans-serif; font-size:24px; color:var(--accent); flex-shrink:0}
.net-sub{display:flex; flex-direction:column; gap:10px}
.net-sub-item{display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--ink); padding-top:7px}
.nsi-k{font-size:11px; letter-spacing:1px; color:var(--mute); text-transform:uppercase; font-weight:600}
.nsi-v{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:15px}

/* alerts */
.alerts{display:flex; flex-direction:column; gap:7px; max-height:230px; overflow:auto}
.alert{
  display:grid; grid-template-columns:auto 1fr auto; gap:8px; align-items:center;
  border-left:5px solid var(--ink);
  padding:6px 9px; background:var(--bg);
  font-size:12px;
}
.alert.open_late{border-left-color:var(--bad); background:var(--bad-bg)}
.alert.close_early{border-left-color:var(--warn); background:var(--warn-bg)}
.alert.close_late{border-left-color:var(--bad); background:var(--bad-bg)}
.a-date{font-family:"IBM Plex Mono",monospace; font-weight:600; font-size:11px; white-space:nowrap}
.a-date .a-wd{color:var(--mute)}
.a-txt{line-height:1.25; min-width:0}
.a-txt .a-point{font-weight:700}
.a-delta{font-family:"Bebas Neue",sans-serif; font-size:20px; line-height:.9; white-space:nowrap; flex-shrink:0}
.alert.open_late .a-delta::after, .alert.close_late .a-delta::after{content:"↓+" attr(data-d) "м"; display:none}
.alerts-empty{color:var(--mute); font-size:13px; padding:8px 0; font-style:italic}

/* footer */
.footer{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px 22px 24px; font-size:11px; color:var(--mute);
  font-family:"IBM Plex Mono",monospace; letter-spacing:.5px;
}
.footer-sep{color:var(--accent)}
.updated{font-weight:600}
.updated.err{color:var(--bad)}

/* ===== окно точки ===== */
.modal{position:fixed; inset:0; z-index:90; display:flex; align-items:center; justify-content:center}
.modal-backdrop{
  position:absolute; inset:0;
  background:rgba(31,26,20,.55);
  backdrop-filter:blur(2px);
}
.modal-window{
  position:relative; z-index:1;
  width:min(1080px,96vw); height:min(860px,92vh);
  background:var(--paper);
  border:3px solid var(--ink);
  box-shadow:var(--shadow);
  display:flex; flex-direction:column;
}
body.modal-open{overflow:hidden}
.modal-head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  padding:14px 16px 12px;
  background:var(--ink); color:var(--paper);
  border-bottom:3px solid var(--accent);
}
.modal-title-wrap{min-width:0; flex:1}
.modal-title{
  font-family:"Bebas Neue",sans-serif; font-size:30px; line-height:.95;
  letter-spacing:1.5px; text-transform:uppercase;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-period{
  font-family:"IBM Plex Mono",monospace; font-size:11px; color:#c9bfa8;
  margin-top:3px; letter-spacing:.5px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.modal-actions{display:flex; gap:8px; flex-shrink:0}
.modal-btn{
  font-family:"Bebas Neue",sans-serif; font-size:18px; letter-spacing:1px;
  background:transparent; color:var(--paper);
  border:2px solid var(--paper);
  padding:4px 10px; cursor:pointer; line-height:1;
  flex-shrink:0;
}
.modal-btn:hover{background:var(--paper); color:var(--ink)}
.modal-body{overflow-y:auto; padding:16px; flex:1}

.modal-loading{
  font-family:"IBM Plex Mono",monospace; font-size:14px; color:var(--mute);
  padding:40px 0; text-align:center; letter-spacing:1px;
}
.modal-err{color:var(--bad)}

/* карточка кликабельна */
.card.clickable{cursor:pointer}
.card.clickable:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--ink)}
.card.clickable:active{transform:translate(2px,2px); box-shadow:3px 3px 0 var(--ink)}

/* секции окна */
.ps{margin-bottom:24px}
.ps-tag{
  font-size:11px; letter-spacing:2.5px; font-weight:700; text-transform:uppercase;
  color:var(--paper); background:var(--ink);
  display:inline-block; padding:3px 9px; margin-bottom:10px;
}
.ps-title{font-size:12px; color:var(--mute); margin:-6px 0 10px; font-style:italic}
.pd-note{font-size:15px; color:var(--ink-soft); padding:2px 0}

/* сводка */
.pd-totals{display:flex; gap:14px; flex-wrap:wrap}
.pd-total{
  flex:1 1 130px; min-width:130px;
  background:var(--bg); border:2px solid var(--ink);
  padding:8px 12px; display:flex; flex-direction:column; gap:2px;
}
.pt-k{font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--mute); font-weight:700}
.pt-v{font-family:"Bebas Neue",sans-serif; font-size:32px; line-height:.95; color:var(--ink); word-break:break-word}
.pt-v.good{color:var(--ok)}

/* таблицы */
.tbl-wrap{overflow-x:auto; border:2px solid var(--ink)}
.tbl{width:100%; border-collapse:collapse; font-size:15px; background:var(--paper)}
.tbl th{
  font-size:11px; letter-spacing:1.5px; text-transform:uppercase; font-weight:700;
  color:var(--paper); background:var(--ink);
  padding:9px 12px; text-align:left; white-space:nowrap;
}
.tbl th.num{text-align:right}
.tbl td{padding:9px 12px; border-top:1px solid #d8cdb6; vertical-align:middle; font-size:15px}
.tbl tbody tr:nth-child(even){background:var(--bg)}
.td-date{font-family:"IBM Plex Mono",monospace; font-weight:600; white-space:nowrap}
.td-live{display:inline-block; margin-left:6px; vertical-align:middle}
.td-time{white-space:nowrap}
.td-num{font-family:"IBM Plex Mono",monospace; font-weight:600; text-align:right; white-space:nowrap}
.delta{font-size:12px; margin-left:7px; color:var(--mute); font-weight:700}
.delta.bad{color:var(--bad)}
.delta.warn{color:var(--warn)}
.open-tag{font-size:13px; color:var(--ok); font-weight:700; text-transform:uppercase; letter-spacing:1px}

/* гистограмма по часам */
.hist{
  display:flex; align-items:flex-end; gap:6px;
  border:2px solid var(--ink); background:var(--bg);
  padding:12px 12px 8px; overflow-x:auto;
  min-height:190px;
}
.hist-col{flex:1 1 0; min-width:34px; display:flex; flex-direction:column; align-items:center; gap:3px}
.hist-num{font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:600; color:var(--mute); white-space:nowrap}
.hist-barzone{height:110px; display:flex; align-items:flex-end; width:100%}
.hist-bar{width:100%; background:var(--accent); border:1.5px solid var(--ink); transition:height .2s}
.hist-hour{font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft); font-weight:600}

/* акции */
.disc-list{border:2px solid var(--ink); background:var(--paper)}
.disc-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 12px; border-top:1px solid #d8cdb6; font-size:15px;
}
.disc-row:first-child{border-top:none}
.disc-name{font-weight:700}
.disc-mid{color:var(--mute); font-size:13px; margin-left:auto; white-space:nowrap}
.disc-share{color:var(--mute)}
.disc-sum{font-family:"IBM Plex Mono",monospace; font-weight:700; white-space:nowrap; color:var(--bad)}
.disc-total{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  padding:9px 12px; border-top:2px solid var(--ink);
  background:var(--bg-deep); font-size:15px; font-weight:700;
}

@media (max-width:640px){
  .modal-window{width:100vw; height:100vh; height:100dvh; max-height:none; border-width:0 0 0 3px}
  .modal-title{font-size:24px}
  .modal-head{padding:12px 14px 10px; gap:8px}
  .modal-btn{min-width:40px; min-height:40px; padding:6px 10px; font-size:20px; text-align:center}
  .modal-body{padding:12px}
  .pd-total{flex:1 1 40%}
  .hist{gap:3px; padding:8px 6px 6px}
  .hist-col{min-width:26px}
  .disc-mid{display:none}
}

/* ===== адаптив ===== */
@media (max-width:1100px){
  .points{grid-template-columns:1fr}
  .bottom{grid-template-columns:1fr}
  .card{flex-direction:column; align-items:stretch}
  .card-head{flex-basis:auto}
}
@media (max-width:640px){
  .brand-name{font-size:20px}
  .clock{font-size:15px}
  .topbar{flex-wrap:wrap; gap:10px; padding:12px 14px}
  .topbar-meta{margin-left:0; width:100%; justify-content:space-between}
  .points,.bottom{padding:14px; gap:14px}
  .card-name{font-size:26px}
  .status{font-size:16px; padding:3px 8px}
  .rev-num{font-size:34px}
  .rev-cur{font-size:18px}
  .orders-bar{gap:6px; padding:7px 8px 8px; margin:0 12px 10px}
  .orders-metric .om-v{font-size:14px}
  .orders-metric .om-k{font-size:9px; letter-spacing:.3px}
  .orders-metric{align-items:center}
  .orders-metric:first-child{align-items:flex-start}
  .orders-metric:last-child{align-items:flex-end}
  .pay-mix{flex-direction:column; gap:6px}
  .pay{flex-direction:row; align-items:baseline; justify-content:space-between; gap:8px}
  .pay .p-v{font-size:16px}
  .net-num{font-size:40px}
  .net-cur{font-size:20px}
  .nsi-v{font-size:14px}
  .alert{grid-template-columns:1fr auto; gap:6px 10px; padding:8px 10px}
  .a-date{grid-column:1 / -1; order:-1}
  .a-txt{grid-column:1; font-size:12px}
  .a-delta{font-size:18px}
  .panel{padding:12px 14px 14px}
}
@media (max-width:380px){
  .rev-num{font-size:30px}
  .net-num{font-size:34px}
  .brand-name{font-size:18px; letter-spacing:1px}
  .live-text{font-size:16px}
  .orders-bar{gap:4px; padding:6px 6px 7px}
  .orders-metric .om-v{font-size:12px}
  .orders-metric .om-k{font-size:8px; letter-spacing:.2px}
}
@media (prefers-reduced-motion:reduce){
  .live-dot{animation:none}
}