/* Notifications (js/notify.js), the notification-style picker in Settings, and the Reports tab. */

/* ---- bell in the topbar ---- */
.og-bell{position:relative;flex:0 0 auto}
.og-bell .og-bell-n{position:absolute;top:2px;right:1px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--red);color:#fff;font:600 10.5px/17px var(--og-font-alt);text-align:center;display:none;box-shadow:0 0 0 2px var(--panel)}
.og-bell.has{color:var(--ink)}
.og-bell.has .og-bell-n{display:block}
.og-bell.urgent svg{animation:ogn-ring 1.6s ease 2}
@keyframes ogn-ring{0%,100%{transform:rotate(0)}10%,30%{transform:rotate(12deg)}20%,40%{transform:rotate(-12deg)}50%{transform:rotate(0)}}

/* ---- corner banners (temporary + persistent) ---- */
.ogn-layer{position:fixed;top:76px;right:18px;z-index:55;display:flex;flex-direction:column;gap:10px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.ogn-card{pointer-events:auto;position:relative;overflow:hidden;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--ink-2);border-radius:var(--rs);box-shadow:var(--shadow-lg);padding:12px 14px 12px;opacity:0;transform:translateX(24px);transition:opacity .3s ease,transform .45s cubic-bezier(.23,1,.32,1)}
.ogn-card.show{opacity:1;transform:none}
.ogn-card.out{opacity:0;transform:translateX(24px)}
.ogn-card.lv-action{border-left-color:var(--red)}
.ogn-card.lv-urgent{border-left-color:var(--red);background:linear-gradient(0deg,var(--red-soft),var(--red-soft)),var(--panel)}
.ogn-card b{display:block;font-weight:600;color:var(--ink);font-size:14px;line-height:1.35;margin-top:6px}
.ogn-card p{margin:4px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.ogn-c-top{display:flex;align-items:center;gap:8px}
.ogn-c-top .kicker{font-size:10.5px;color:var(--red)}
.ogn-c-top .pill{padding:2px 8px;font-size:11px}
.ogn-x{margin-left:auto;background:transparent;border:0;color:var(--muted);font-size:13px;cursor:pointer;padding:2px 4px;border-radius:6px}
.ogn-x:hover{color:var(--ink);background:var(--bg-2)}
.ogn-c-act{display:flex;gap:8px;margin-top:10px}
.ogn-timer{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform-origin:left;animation:ogn-shrink linear forwards}
.ogn-card.hold .ogn-timer{animation-play-state:paused}
@keyframes ogn-shrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.ogn-more{border-left-color:var(--line-2);font:500 12.5px/1 var(--og-font-title);letter-spacing:.2em;text-transform:uppercase;color:var(--muted);cursor:pointer;text-align:center;padding:12px}
.ogn-more:hover{color:var(--red)}

/* ---- action-required pop-up ---- */
.ogn-modal,.ogn-full{position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;opacity:0;transition:opacity .3s ease}
.ogn-modal.show,.ogn-full.show{opacity:1}
.ogn-modal{background:rgba(0,0,0,.38);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ogn-box{width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--panel);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:24px 24px 18px;transform:translateY(12px) scale(.98);transition:transform .45s cubic-bezier(.23,1,.32,1)}
.ogn-modal.show .ogn-box{transform:none}
.ogn-box-h h2{margin:8px 0 14px;font-size:26px;line-height:1.1}
.ogn-list{display:flex;flex-direction:column}
.ogn-item{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:12px 0 12px 12px;border-top:1px solid var(--line);border-left:3px solid var(--line-2)}
.ogn-item.lv-action,.ogn-item.lv-urgent{border-left-color:var(--red)}
.ogn-item b{display:block;color:var(--ink);font-weight:600;font-size:14px;margin-top:4px}
.ogn-item p{margin:3px 0 0;font-size:13px;color:var(--muted)}
.ogn-item .kicker{font-size:10.5px;color:var(--red)}
.ogn-item .pill{padding:2px 8px;font-size:11px}
.ogn-item-act{display:flex;gap:8px}
.ogn-box-f{display:flex;justify-content:flex-end;border-top:1px solid var(--line);padding-top:14px;margin-top:2px}

/* ---- full-screen alert ---- */
.ogn-full{background:var(--panel)}
html[data-theme=dark] .ogn-full{background:#000}
.ogn-full-in{width:min(640px,100%);text-align:center;display:flex;flex-direction:column;align-items:center}
.ogn-full-in .ogn-mono{width:64px;height:64px;margin-bottom:26px;opacity:.9}
.ogn-full-in .title{margin:12px 0 0;font:300 clamp(32px,6vw,58px)/1.04 var(--og-font-title);letter-spacing:.01em;color:var(--ink)}
.ogn-full-in.lv-urgent .title{color:var(--red)}
.ogn-full-in .sub{margin:14px auto 0;font-size:15px}
.ogn-full-act{display:flex;gap:12px;margin-top:30px;flex-wrap:wrap;justify-content:center}
.ogn-full-count{margin-top:18px;font-size:13px;color:var(--muted)}

/* ---- drawer list ---- */
.ogn-row{grid-template-columns:10px 1fr auto;align-items:start}
.ogn-row .kicker{display:block;font-size:10.5px;margin-bottom:4px}
.ogn-row b{display:block}
.ogn-row .dim{display:block;margin-top:2px}
.ogn-dot{width:8px;height:8px;border-radius:50%;background:var(--red);margin-top:5px}
.ogn-row.seen .ogn-dot{background:transparent;border:1px solid var(--line-2)}
.ogn-row.seen b{font-weight:500;color:var(--ink-2)}
.ogn-row-act{display:flex;gap:8px;align-items:center}
.ogn-row-act .pill{padding:2px 8px;font-size:11px}

/* ---- Settings: notification style picker + rule editors ---- */
.ogn-styles{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px}
.ogn-style{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line-2);border-radius:var(--rs);padding:12px 14px 12px;cursor:pointer;transition:var(--t);color:var(--ink)}
.ogn-style:hover{border-color:var(--ink-2)}
.ogn-style.on{border-color:var(--red);box-shadow:0 0 0 3px var(--red-soft)}
.ogn-style b{display:block;font-weight:600;font-size:14px;margin-top:8px}
.ogn-style small{display:block;color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:3px}
.ogn-mini{display:block;height:46px;border-radius:7px;background:var(--bg-2);position:relative;overflow:hidden}
.ogn-mini i{position:absolute;background:var(--panel);border:1px solid var(--line-2);border-radius:4px}
.ogn-mini.temporary i{top:6px;right:6px;width:44%;height:11px;opacity:.6}
.ogn-mini.persistent i{top:6px;right:6px;width:44%;height:11px;border-left:3px solid var(--red)}
.ogn-mini.persistent i+i{top:21px}
.ogn-mini.popup i{left:25%;right:25%;top:9px;bottom:9px;border-top:3px solid var(--red)}
.ogn-mini.fullscreen{background:var(--ink)}
.ogn-mini.fullscreen i{left:30%;right:30%;top:19px;height:7px;background:var(--red);border:0}
.ogn-style.on .ogn-mini:after{content:'✓';position:absolute;left:8px;top:6px;font-size:12px;color:var(--red);font-weight:700}
.ogn-style.on .ogn-mini.fullscreen:after{color:#fff}
.rule-list{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.rule-line{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center}
.rule-line .input{padding:9px 12px;font-size:14px}
.rule-line .check{margin:0;font-size:13px;white-space:nowrap}
.rule-x{background:transparent;border:1px solid var(--line-2);color:var(--muted);border-radius:8px;width:32px;height:32px;cursor:pointer}
.rule-x:hover{color:var(--red);border-color:var(--red)}
.rule-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.rule-grid .field{margin-bottom:8px}
.rule-grid .field input{padding:9px 12px}
.rule-note{font-size:12.5px;color:var(--muted);margin:-4px 0 12px;line-height:1.5}
.role-sel{width:auto;min-width:140px;padding:8px 34px 8px 12px;font-size:13.5px}
.st-wide{margin-top:18px}

/* ---- Reports ---- */
.rep-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.rep-grid .full{grid-column:1/-1}
.rep-table{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.rep-table table{width:100%;border-collapse:collapse;font-size:13.5px}
.rep-table th{text-align:left;font:400 11px/1.2 var(--og-font-title);letter-spacing:.2em;text-transform:uppercase;color:var(--muted-2);padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.rep-table td{padding:9px 10px;border-bottom:1px solid var(--line);color:var(--ink-2);vertical-align:top}
.rep-table td.n,.rep-table th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rep-table tr:last-child td{border-bottom:0}
.rep-table tr.tot td{font-weight:700;color:var(--ink);border-top:1px solid var(--line-2)}
.rep-table tr.grp td{background:var(--bg-2);font-weight:600;color:var(--ink)}
.rep-table tbody tr[onclick]{cursor:pointer}
.rep-table tbody tr[onclick]:hover td{background:var(--panel-2)}
.rep-empty{padding:18px 4px;color:var(--muted);font-size:13.5px}
.rep-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.rep-filters select{width:auto;min-width:180px;border-radius:100px;padding:9px 34px 9px 14px;font-size:13.5px}
.rep-note{font-size:12.5px;color:var(--muted);margin:8px 0 0}

@media(max-width:1000px){.rep-grid{grid-template-columns:1fr}}
@media(max-width:760px){
  .ogn-layer{top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));right:16px;left:16px;width:auto}
  .ogn-card{transform:translateY(16px)}.ogn-card.out{transform:translateY(16px)}
  .ogn-item{grid-template-columns:1fr}
  .ogn-styles{grid-template-columns:1fr}
  .rule-line{grid-template-columns:1fr auto}
  .rule-line .check{grid-column:1/-1;order:3}
}

/* rule editor fixes: checkboxes inside .field keep their native look; pipelines on two lines */
#st-rules .field .check input[type=checkbox],#st-notif .field .check input[type=checkbox]{width:18px;height:18px;padding:0;margin:0;border:0;box-shadow:none;-webkit-appearance:auto;appearance:auto;accent-color:var(--red);flex:0 0 auto}
#st-rules .pipe-line{grid-template-columns:1fr 1fr auto 32px;grid-template-areas:"name name name x" "side code prov prov";gap:8px 8px;padding:10px 0;border-top:1px solid var(--line)}
#st-rules .pipe-line:first-child{border-top:0;padding-top:0}
#st-rules .pipe-line [data-f=name]{grid-area:name}
#st-rules .pipe-line [data-f=side]{grid-area:side;min-width:0;width:100%}
#st-rules .pipe-line [data-f=code]{grid-area:code;min-width:0;width:100%}
#st-rules .pipe-line .check{grid-area:prov;grid-column:auto}
#st-rules .pipe-line .rule-x{grid-area:x}
@media(max-width:760px){#st-rules .pipe-line{grid-template-columns:1fr 1fr 32px;grid-template-areas:"name name x" "side code code" "prov prov prov"}}
#st-rules .field label.check{display:flex;align-items:center;gap:8px;font-weight:400;font-size:14px;margin:6px 0}