/* * Nightshift portal — bygget efter design.pen. * Farver, typografi og mål følger designets variabler, så UI og design ikke * driver fra hinanden. Dark mode er standard i sikkerhedsrummet. */ :root{ --bg:#10151D;--surface:#1B2431;--panel:#202A39;--text:#F5F7FB;--muted:#9AA8BA;--border:#303D50; --purple:#865DD1;--freddies:#E85D52;--molly:#43C996;--warning:#F2B84B; --sidebar:#0B0F15;--nav-active:#2A2540;--chip:#243144;--alert:#29213A; --badge-freddies-bg:#402D31;--badge-freddies:#FF9E92; --badge-molly-bg:#244239;--badge-molly:#87E1B7; --badge-offline-bg:#3F3049;--badge-offline:#D5B8FF; --preview-a:#41546A;--preview-b:#5A443C;--preview-c:#31545A;--preview-off:#171D28; font:14px Inter,-apple-system,Segoe UI,Arial,sans-serif;color:var(--text) } /* html.pre-light sættes af inline-scriptet i , så temaet ikke blinker. */ body.light,html.pre-light body{ --bg:#F6F7FB;--surface:#FFFFFF;--panel:#EFF2F7;--text:#182131;--muted:#66758A;--border:#DCE2EB; --chip:#E4EAF3;--alert:#EFE8FA; --badge-freddies-bg:#FBE3E0;--badge-freddies:#B8382D; --badge-molly-bg:#DCF3E9;--badge-molly:#1D7A55; --badge-offline-bg:#EAE1F5;--badge-offline:#5E3E93 } *{box-sizing:border-box} body{margin:0;background:var(--bg);display:flex;min-height:100vh} h1{font-size:30px;font-weight:700;margin:0 0 9px;letter-spacing:-.3px} h2{margin:0;font-size:20px;font-weight:700} h3{margin:0;font-size:13px;font-weight:700} a{color:var(--purple)} /* ── Sidebar ───────────────────────────────────────────────────────────── */ aside{width:232px;flex:none;background:var(--sidebar);padding:32px 16px;color:#fff} aside strong{display:block;font-size:20px;font-weight:700;letter-spacing:1.5px;padding:0 14px} aside small{display:block;color:#9AA8BA;font-size:9px;font-weight:700;letter-spacing:1.4px;padding:0 14px;margin-top:7px} nav{margin-top:34px} nav span{display:block;color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.4px;padding:0 14px;margin:26px 0 10px} nav span:first-child{margin-top:0} nav a{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px;text-decoration:none; padding:12px 14px;border-radius:9px;line-height:1} nav a:hover{color:#fff;background:#141a24} nav a.active{background:var(--nav-active);color:#fff;font-weight:700;border-left:4px solid var(--purple);padding-left:10px} nav .dot{width:7px;height:18px;border-radius:4px;flex:none} nav .dot-freddies{background:var(--freddies)} nav .dot-molly{background:var(--molly)} /* ── Hovedområde ───────────────────────────────────────────────────────── */ main{width:min(1216px,calc(100% - 232px));padding:34px 40px;margin:0 auto} header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px} header p,.toolbar p,.section-label{color:var(--muted);font-size:10px;font-weight:700;letter-spacing:1.4px;margin:0 0 10px} header small{display:block;color:var(--muted);font-size:14px} .header-side{display:flex;align-items:center;gap:12px;flex:none;flex-wrap:wrap;justify-content:flex-end} /* Statuspille: "14 af 15 kameraer online" */ .status-chip{display:inline-flex;align-items:center;gap:10px;background:var(--chip);border-radius:9px;padding:13px 16px; font-size:12px;font-weight:700} .status-chip:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--molly)} .status-chip.warn:before{background:var(--warning)} /* ── Varslingsbanner ───────────────────────────────────────────────────── */ .alert{display:flex;align-items:center;gap:18px;margin:30px 0;padding:14px 20px 14px 0;background:var(--alert); border-radius:10px;border-left:5px solid var(--purple)} .alert-body{flex:1;padding-left:20px} .alert-body b{display:block;font-size:13px;margin-bottom:5px} .alert-body span{color:var(--muted);font-size:11px} /* ── Værktøjslinje ─────────────────────────────────────────────────────── */ .toolbar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;margin:34px 0 20px;flex-wrap:wrap} .toolbar-actions{display:flex;gap:10px;align-items:center} button,select,input,.btn{font:inherit;border:0;border-radius:8px;background:var(--panel);color:var(--text); padding:10px 14px;cursor:pointer} select{padding-right:10px} .btn-primary{background:var(--purple);color:#fff;font-size:11px;font-weight:700;padding:10px 16px} .btn-primary:hover{filter:brightness(1.12)} .btn-ghost{background:transparent;border:1px solid var(--border);color:var(--muted);font-size:12px;padding:9px 13px} .btn-ghost:hover{color:var(--text);border-color:var(--purple)} .btn-danger{background:var(--freddies);color:#fff} /* ── Kameragitter ──────────────────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px} .camera{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px} .preview{position:relative;height:157px;border-radius:7px;padding:12px;background:var(--preview-a);overflow:hidden} .camera:nth-child(4n+2) .preview{background:var(--preview-b)} .camera:nth-child(4n+3) .preview{background:var(--preview-c)} .camera.offline .preview{background:var(--preview-off)} /* Blød bundskygge som i designets "scene shadow". */ .preview:after{content:"";position:absolute;inset:auto 0 0 0;height:72px; background:linear-gradient(180deg,transparent,#0009);pointer-events:none} .state{position:relative;z-index:1;display:flex;align-items:center;gap:7px;font-size:8px;font-weight:700;color:#fff;letter-spacing:.5px} .state:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--molly)} .offline .state{color:var(--warning)} .offline .state:before{background:var(--warning)} .badge{position:absolute;right:10px;top:10px;z-index:1;display:inline-flex;align-items:center; padding:5px 9px;border-radius:11px;font-size:8px;font-weight:700;letter-spacing:.6px} .badge-freddies{background:var(--badge-freddies-bg);color:var(--badge-freddies)} .badge-molly{background:var(--badge-molly-bg);color:var(--badge-molly)} .badge-offline{background:var(--badge-offline-bg);color:var(--badge-offline)} .camera h3{margin:14px 0 5px} .camera p{margin:0;color:var(--muted);font-size:10px} .open{position:absolute;left:12px;bottom:12px;z-index:1;background:var(--purple);color:#fff;font-size:11px; font-weight:700;padding:8px 12px} /* ── Hurtig adgang ─────────────────────────────────────────────────────── */ .quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:20px} .quick article{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px} .quick h3{font-size:14px;margin-bottom:6px} .quick p{margin:0;color:var(--muted);font-size:11px} .quick .action{display:block;width:100%;text-align:left;margin-top:20px;padding:14px;border-radius:7px; background:var(--panel);color:var(--text);font-size:11px;text-decoration:none} .quick .action.ok{color:var(--molly);font-weight:700} /* ── Notefelt nederst ──────────────────────────────────────────────────── */ .note{display:flex;justify-content:space-between;align-items:center;gap:24px;margin-top:28px;padding:20px 24px; background:var(--panel);border-radius:12px} .note b{display:block;font-size:13px;margin-bottom:8px} .note p{margin:0 0 4px;color:var(--muted);font-size:11px;line-height:1.5} .theme-toggle{display:inline-flex;align-items:center;gap:10px;flex:none;background:var(--chip);border-radius:19px; padding:5px 16px 5px 5px;font-size:11px;font-weight:700;color:var(--text)} .theme-toggle:before{content:"";width:28px;height:28px;border-radius:50%;background:#FFCA65} body.light .theme-toggle:before{background:#5B6C86} /* ── Modal ─────────────────────────────────────────────────────────────── */ dialog{background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:12px;padding:24px; max-width:440px} dialog::backdrop{background:#000a} dialog h2{margin:16px 0 10px} dialog p{color:var(--muted);margin:0} /* ── Responsivt: tablet = 2 kolonner ───────────────────────────────────── */ @media(max-width:1100px){ main{width:calc(100% - 232px);padding:28px} .grid{grid-template-columns:repeat(2,minmax(0,1fr))} .quick{grid-template-columns:1fr} .note{flex-direction:column;align-items:flex-start} } @media(max-width:900px){ aside{width:190px;padding:24px 12px} main{width:calc(100% - 190px)} } /* ── Responsivt: mobil = ét feed ad gangen + fast bundnavigation ───────── */ @media(max-width:640px){ body{display:block} main{width:100%;padding:22px 20px 96px} header{flex-direction:column;align-items:stretch} .header-side{justify-content:flex-start} h1{font-size:24px} .grid{grid-template-columns:1fr;gap:18px} .preview{height:207px} .toolbar{align-items:stretch} aside{position:fixed;left:0;right:0;bottom:0;z-index:20;width:100%;height:76px;padding:0; display:flex;align-items:center;justify-content:space-around} aside strong,aside small{display:none} nav{display:flex;width:100%;justify-content:space-around;margin:0} nav span{display:none} nav a{flex-direction:column;gap:6px;font-size:12px;padding:10px 8px;border-radius:0;background:none} nav a.active{background:none;border-left:0;padding-left:8px;color:#fff; border-top:3px solid var(--purple)} /* Bundnavigationen viser kun de primære punkter, som i mobildesignet. */ nav a.secondary{display:none} }