.login-screen{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#f4f6fb} .auth-loading{display:flex;min-height:100vh;align-items:center;justify-content:center;background:#f4f6fb;color:#667;font-size:14px} .no-access-message{max-width:480px;margin:40px auto} /* SchematicEditor overlay */ .se-header{background:var(--brand-dark);color:#fff;padding:12px 18px;display:flex;align-items:center;gap:12px;flex:none;box-shadow:0 2px 8px rgba(0,0,0,.25)} .se-close-btn{background:rgba(255,255,255,.15);border:none;color:#fff;border-radius:6px;padding:6px 13px;font-size:13px;font-weight:600;cursor:pointer} .se-title{font-size:15px;font-weight:700;flex:1} .se-toolbar-btn{font-size:12.5px;padding:6px 12px} .se-toolbar-btn--wide{padding:6px 14px} .se-menu-wrap{position:relative;display:inline-flex} .se-menu-wrap-inner{position:relative} .se-export-menu{position:absolute;right:0;top:100%;z-index:300;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);min-width:160px;overflow:hidden} .se-export-menu-item{display:block;width:100%;padding:9px 14px;text-align:left;font-size:12.5px;font-weight:600;border:none;background:none;cursor:pointer;font-family:inherit;color:var(--ink)} .se-export-menu-item:hover{background:var(--accent)} .se-body{display:flex;flex:1;overflow:hidden} .se-sidebar{width:190px;flex:none;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden} .se-sidebar-tabs{display:flex;flex:none;border-bottom:1.5px solid var(--line)} .se-tab-btn{flex:1;padding:7px 4px;font-size:11px;font-weight:700;border:none;cursor:pointer;font-family:inherit} .se-tab-btn--active{background:var(--brand);color:#fff} .se-tab-btn--inactive{background:transparent;color:var(--ink)} .se-panel{flex:1;overflow-y:auto} .se-panel--symbols{padding:10px 0} .se-canvas-wrap{flex:1;position:relative;overflow:hidden} .se-stage-container{width:100%;height:100%} .se-props-panel{width:220px;flex:none;background:var(--card);border-left:1px solid var(--line);padding:14px;overflow-y:auto;font-size:13.5px;box-shadow:-2px 0 8px rgba(0,0,0,.04);position:relative} .se-props-empty{font-size:12.5px;text-align:center;margin-top:40px} .se-props-close-btn{display:none;position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:none;background:var(--accent);color:var(--brand-dark);font-size:13px;line-height:1;cursor:pointer} .se-mobile-only{display:none} .se-template-form{position:absolute;top:60px;right:14px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px;width:300px;box-shadow:0 8px 30px rgba(0,0,0,.2);z-index:10} .se-note-swatches{display:flex;gap:6px;flex-wrap:wrap} .se-note-swatch{width:22px;height:22px;border-radius:6px;border:2px solid transparent;cursor:pointer;padding:0} .se-note-swatch--active{border-color:var(--brand)} #se-note-text{width:100%;font-family:inherit;resize:vertical;padding:6px 8px;border:1px solid var(--line);border-radius:6px} .se-symbol-item--armed{background:var(--brand)} .se-symbol-item--armed *{color:#fff} .se-touch-hint{font-size:11px;color:var(--muted);padding:6px 10px;margin:0 0 4px} /* SchematicEditor on phones (field technicians): the fixed-width three-column desktop layout has no room to fit on a ~375px viewport, so the symbol palette and properties panel become slide-up bottom sheets that overlay the (now full-width/full-height) canvas instead of squeezing into a permanent strip. Only one sheet is open at a time — see the mutual-exclusion logic in _renderProps()/#se-toggle-palette. */ @media(max-width:700px){ .se-header{padding:8px 10px;gap:6px;flex-wrap:wrap} .se-title{order:-1;width:100%;font-size:14px} .se-toolbar-btn{font-size:11.5px;padding:6px 9px} .se-mobile-only{display:inline-flex} .se-body{flex-direction:column;position:relative;overflow:hidden} .se-canvas-wrap{flex:1 1 auto;width:100%;min-height:0} .se-sidebar,.se-props-panel{ position:absolute;left:0;right:0;bottom:0;top:auto;width:auto; max-height:60vh;flex:none;z-index:6;padding-top:16px; border-radius:14px 14px 0 0;box-shadow:0 -6px 20px rgba(0,0,0,.18); border-right:none;border-left:none;border-top:1px solid var(--line); transform:translateY(100%);transition:transform .22s ease; } .se-props-panel{z-index:7} .se-sidebar--open,.se-props-panel--open{transform:translateY(0)} .se-sidebar::before,.se-props-panel::before{ content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%); width:36px;height:4px;border-radius:2px;background:var(--line); } .se-props-close-btn{display:block} .se-template-form{left:14px;right:14px;width:auto} } /* DeviceLibraryManager */ .dlm-body{padding:6px 8px 8px 10px;background:#fafbfc;border-radius:0 0 6px 6px} .se-symbol-item{display:flex;align-items:center;gap:8px;padding:6px 10px;cursor:grab;user-select:none;border-radius:6px;margin:0 4px;transition:background 0.15s} .se-symbol-item:hover{background:var(--accent)} .agreement-list-card{cursor:pointer;margin-bottom:10px;transition:box-shadow 0.15s} .agreement-list-card:hover{box-shadow:0 4px 12px rgba(14,122,130,.12)} .am-company-group{margin-bottom:22px} .am-company-group:last-child{margin-bottom:0} .am-site-group{padding-left:16px;margin-bottom:14px} .am-site-group:last-child{margin-bottom:0} .am-group-header{display:flex;justify-content:space-between;align-items:baseline;gap:10px} .am-group-header-company{font-size:16px;font-weight:700;color:var(--brand-dark); padding-bottom:6px;border-bottom:2px solid var(--line);margin-bottom:10px} .am-group-header-site{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:8px} .am-row{display:flex;align-items:center;justify-content:space-between;gap:8px 12px;flex-wrap:wrap;padding:10px 14px;margin-bottom:6px} .am-row-title-wrap{display:flex;align-items:baseline;gap:10px;flex:1 1 140px;min-width:140px} .am-row-title{font-weight:700;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .am-row-date{flex:none} .am-row-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex:none} .cm-list-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px} .cm-list-head h2{margin:0;color:var(--brand-dark);font-size:20px;line-height:1.2;font-weight:800;letter-spacing:0} .cm-list-head p{margin:4px 0 0;color:var(--muted);font-size:13px} .cm-list-controls{display:grid;grid-template-columns:auto minmax(220px,1fr) auto 220px;gap:8px 10px;align-items:center;margin-bottom:12px} .cm-list-controls label{margin:0;font-size:12px;text-transform:uppercase;letter-spacing:.03em} .cm-list-scroll{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--card)} .cm-customer-table{min-width:980px} .cm-customer-table th,.cm-customer-table td{text-align:left;vertical-align:middle;padding:12px 14px} .cm-customer-table th{background:#f7faf9;border-bottom:1px solid var(--line)} .cm-customer-table th:last-child,.cm-customer-table td:last-child{position:sticky;right:0;background:var(--card);box-shadow:-8px 0 12px rgba(10,36,38,.05)} .cm-customer-table th:last-child{background:#f7faf9;z-index:1} .cm-customer-row{cursor:pointer;transition:background .15s} .cm-customer-row:hover{background:#f7fbfb} .cm-customer-row:hover td:last-child{background:#f7fbfb} .cm-customer-name{font-weight:750;font-size:14.5px;color:var(--ink);line-height:1.25} .cm-customer-meta,.cm-metric-line,.cm-quick-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap} .cm-customer-meta{margin-top:5px;color:var(--muted);font-size:12.5px} .cm-contact-main,.cm-address{font-size:13.5px;line-height:1.35;color:var(--ink)} .cm-quick-actions{justify-content:flex-end;min-width:210px} .cm-quick-actions .btn{min-height:36px;white-space:nowrap} .cm-empty-state{border:1px dashed var(--line);border-radius:var(--radius-md);padding:28px;text-align:center;color:var(--muted);background:#fbfcfc} .btn:disabled{opacity:.48;cursor:not-allowed;box-shadow:none} .btn:disabled:hover{background:var(--accent)} @media(max-width:700px){ .cm-list-head{align-items:stretch;flex-direction:column} .cm-list-head .btn{min-height:44px;justify-content:center} .cm-list-controls{grid-template-columns:1fr} .cm-list-controls label{margin-top:4px} .cm-list-scroll{margin-left:-2px;margin-right:-2px} .cm-customer-table{min-width:0} .cm-customer-table th:nth-child(2),.cm-customer-table td:nth-child(2), .cm-customer-table th:nth-child(3),.cm-customer-table td:nth-child(3), .cm-customer-table th:nth-child(4),.cm-customer-table td:nth-child(4){display:none} .cm-customer-table th,.cm-customer-table td{padding:14px 12px} .cm-customer-table th:last-child,.cm-customer-table td:last-child{position:static;box-shadow:none;width:196px} .cm-customer-meta{display:block} .cm-customer-meta span{display:block;margin-top:3px} .cm-quick-actions{min-width:0;justify-content:flex-end} .cm-quick-actions .btn{min-height:44px} } :root{ /* "Signal & kalibrering" — signalturkos istället för corporate-blå, grågrön bas (inte blåtonad), se CLAUDE.md-planen för resonemang. */ --bg:#f1f4f3; --card:#ffffff; --ink:#161b22; --muted:#5b6b70; --line:#dce3e2; --brand:#0e7a82; --brand-dark:#0a4f57; --good:#1e8e5a; --good-bg:#e7f5ee; --warn:#b5720a; --warn-bg:#fff3e0; --bad:#c22b1e; --bad-bg:#fdebe9; --accent:#e4f1f1; /* Portriktning (kabelskiss/produktbibliotek) — en genuin tredelad kategori (in/ut/bidirektionell), inte en status. Samma hex som redan användes utspritt som rå färg i flera komponenter, nu ett namngivet token-lager. */ --port-in:#22c55e; --port-out:#f97316; --port-bidir:#8b5cf6; /* Navigeringskanaler — varje flikgrupp får en egen kanalfärg, samma idé som färgkodningen på en patch-panel/kabeldragning. */ --brand-salj:#b5720a; --brand-drift:#0e7a82; --brand-admin:#6b5ca5; /* Delade sticky-variabler (issue: grafik/responsivitet-stabilisering) — en gemensam offset/z-index-skala så sticky-element (resultkort, quicknav, bottom action bars, modalhuvud/-fot) inte behöver gissa sig till egna magiska tal och inte hamnar i konflikt med varandra. */ --sticky-top-z:5; --sticky-bottom-z:20; --sticky-bottom-offset:0px; --safe-bottom:env(safe-area-inset-bottom, 0px); --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --shadow-sm:0 1px 2px rgba(10,36,38,.06); --shadow-md:0 4px 12px rgba(10,36,38,.10); --shadow-lg:0 12px 40px rgba(10,36,38,.18); --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px; --font-body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-display-wide:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --font-mono:"IBM Plex Mono","SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace; } *{box-sizing:border-box} /* Overflow hanteras lokalt i komponenter som faktiskt kan bli bredare än viewporten (tabeller/.table-scroll, kalendrar/.gantt-scroll, editorn, modaler) — ingen global html{overflow-x:clip} som tyst kapar innehåll som annars borde vara nåbart via en avsiktlig scrollbar. */ body{margin:0;max-width:100vw;background:var(--bg);color:var(--ink); font-family:var(--font-body); font-size:15px;line-height:1.45} header{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff;padding:20px 26px;position:relative} /* Signaturdetalj: en tunn flerfärgad "kalibreringsrand", en återhållsam eko av en projektor-testbild (SMPTE-färgstreck) — används en gång. */ header::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px; background:repeating-linear-gradient(90deg, var(--brand-salj) 0 20%, var(--brand-drift) 20% 40%, var(--brand-admin) 40% 60%, var(--ink) 60% 80%, var(--port-bidir) 80% 100%)} .head-inner{display:flex;align-items:center;gap:18px;max-width:1180px;margin:0 auto;flex-wrap:wrap;row-gap:8px} .logo-badge{background:#fff;border-radius:10px;padding:8px 13px;display:inline-flex;flex:none} .logo-badge img{height:34px;width:auto;display:block} .head-title{flex:1 1 auto;min-width:0} header h1{margin:0;font-size:21px;font-weight:800;font-family:var(--font-display-wide);letter-spacing:.02em} header p{margin:4px 0 0;opacity:.85;font-size:13.5px} header #current-user-badge{color:rgba(255,255,255,.85)} .head-title-short{display:none} .wrap{max-width:1180px;margin:0 auto;padding:22px;display:grid; grid-template-columns:1.15fr .85fr;gap:22px;align-items:start} .wrap > *{min-width:0} @media(max-width:920px){.wrap{grid-template-columns:1fr}} .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg); padding:18px 20px;margin-bottom:20px;box-shadow:var(--shadow-sm);min-width:0} .card h2{margin:0 0 14px;font-size:15px;text-transform:uppercase;letter-spacing:.06em; color:var(--brand-dark);font-weight:800;font-family:var(--font-display-wide)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px} .grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px 16px} @media(max-width:520px){.grid2,.grid3{grid-template-columns:1fr}} label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:4px;font-weight:600} .hint{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:3px} input[type=number],input[type=text],input[type=date],input[type=time],input[type=datetime-local],input[type=email],input[type=password],input[type=tel],input[type=url],input[type=search],textarea,select{width:100%;padding:9px 11px; border:1px solid var(--line);border-radius:8px;font-size:15px;font-family:inherit;background:#fff;color:var(--ink)} input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(14,122,130,.12)} .inputwrap{position:relative} .unit{position:absolute;right:11px;top:50%;transform:translateY(-50%);font-size:12px;color:var(--muted);pointer-events:none} table{width:100%;border-collapse:collapse} th,td{padding:8px;text-align:right;font-size:14px} th{font-size:11.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted); border-bottom:2px solid var(--line);font-weight:700} td:first-child,th:first-child{text-align:left} tbody tr{border-bottom:1px solid var(--line)} td input{width:80px;min-width:0;text-align:right;padding:6px 8px} td input.name{width:150px;min-width:0;text-align:left} .btn{display:inline-flex;align-items:center;gap:6px;background:var(--accent);color:var(--brand-dark); border:1px solid var(--line);border-radius:var(--radius-md);padding:8px 13px;font-size:13.5px;font-weight:600; cursor:pointer;font-family:var(--font-display);transition:background .15s,box-shadow .15s} .btn:hover{background:#e4eefb} .btn-primary{background:var(--brand);color:#fff;border-color:var(--brand)} .btn-primary:hover{background:var(--brand-dark)} .btn-del{background:none;border:none;color:var(--bad);cursor:pointer;font-size:17px;padding:2px 6px;line-height:1} .btn-del:hover{color:#8a1f15} .btn-icon{width:16px;height:16px;flex:none} .result-card{position:sticky;top:18px;z-index:var(--sticky-top-z)} @media(max-width:920px){.result-card{position:static}} .bigrow{display:flex;justify-content:space-between;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)} .bigrow:last-child{border-bottom:none} .bigrow .lab{font-size:13.5px;color:var(--muted)} .bigrow .val{font-size:17px;font-weight:650;font-family:var(--font-mono);font-variant-numeric:tabular-nums} .headline{background:var(--brand-dark);color:#fff;border-radius:var(--radius-md);padding:16px 18px;margin-bottom:16px} .headline .lab{font-size:12.5px;text-transform:uppercase;letter-spacing:.07em;opacity:.8;font-family:var(--font-display-wide);font-weight:800} .headline .val{font-size:30px;font-weight:700;margin-top:2px;font-family:var(--font-mono);font-variant-numeric:tabular-nums} .headline .sub{font-size:12.5px;opacity:.8;margin-top:3px} .pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:99px;font-size:12px;font-weight:700} .pill:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .pill.good{background:var(--good-bg);color:var(--good)} .pill.warn{background:var(--warn-bg);color:var(--warn)} .pill.bad{background:var(--bad-bg);color:var(--bad)} .pill.neutral{background:var(--line);color:var(--muted)} .breakdown td{font-size:13.5px} .breakdown tfoot td{font-weight:700;border-top:2px solid var(--line);padding-top:9px} .muted{color:var(--muted)} .small{font-size:12.5px} textarea{min-height:60px;resize:vertical} .footer{max-width:1180px;margin:0 auto;padding:0 22px 30px;color:var(--muted);font-size:12px} .toolbar{max-width:1180px;margin:0 auto;padding:14px 22px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center} .item-head,.item-row{display:grid;grid-template-columns:40px minmax(180px,1fr) 104px 100px 96px 32px;align-items:center;gap:10px} .item-head{padding:4px 0 6px;color:var(--muted);font-size:11px;font-weight:700;text-transform:uppercase} .item-row{padding:7px 0;border-bottom:1px solid var(--line)} .item-row:last-child{border-bottom:none} .item-row input[type=checkbox]{width:18px;height:18px;accent-color:var(--brand);flex:none;cursor:pointer} .item-row input.iname{width:100%;min-width:0;border:1px solid transparent;background:transparent;padding:6px 8px} .item-row input.iname:hover{border-color:var(--line);background:#fff} .item-row .icost{width:100%;text-align:right} .item-row select.iunit{width:100%;padding:6px 8px} .tag{font-size:11px;font-weight:700;padding:2px 7px;border-radius:5px;background:var(--accent);color:var(--brand-dark)} .row-highlight{background:var(--accent);transition:background 2s ease} /* OFFER / AGREEMENT MODAL */ #offerModal{display:none} body.modal-open{overflow:hidden} body.modal-open #offerModal{display:block;position:fixed;inset:0;z-index:50;background:rgba(20,35,60,.55);overflow:auto} .offer-sheet{background:#fff;max-width:780px;margin:26px auto;border-radius:12px;padding:46px 52px; box-shadow:0 12px 50px rgba(0,0,0,.3)} .offer-bar{position:sticky;top:0;background:#fff;display:flex;gap:10px;justify-content:flex-end; padding:14px 22px;border-bottom:1px solid var(--line);z-index:var(--sticky-top-z)} .offer-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:3px solid var(--brand-dark);padding-bottom:16px} .offer-head .logo-img{height:46px;width:auto} .offer-head .meta{text-align:right;font-size:13px;color:var(--muted)} .offer-sheet h2{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:var(--brand-dark); margin:28px 0 12px;border-bottom:1px solid var(--line);padding-bottom:6px;font-family:var(--font-display)} .offer-to{margin-top:22px;font-size:15px} .offer-to .big{font-size:19px;font-weight:700} .offer-table{width:100%;border-collapse:collapse;font-size:14px} .offer-table td,.offer-table th{padding:8px 6px;border-bottom:1px solid var(--line)} .incl-list{list-style:none;padding:0;margin:0} .incl-list li{padding:7px 0 7px 26px;position:relative;font-size:14.5px;border-bottom:1px solid #f0f2f6} .incl-list li:before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:800} .incl-list li .pr{float:right;color:var(--muted);font-weight:600} .incl-total-table{margin-top:10px} .incl-total-table td{font-weight:700} .price-box{background:var(--accent);border-radius:10px;padding:20px 24px;margin-top:18px; display:flex;justify-content:space-between;align-items:center} .price-box .lab{font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em} .price-box .amt{font-size:30px;font-weight:700;color:var(--brand-dark);font-family:var(--font-mono);font-variant-numeric:tabular-nums} .offer-foot{margin-top:30px;font-size:12px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px} .parties{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px;font-size:14px} .parties .ptitle{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700;margin-bottom:4px} .parties .pname{font-weight:700} .sig-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:18px} .sig-box .sline{border-bottom:1px solid #333;height:38px} .sig-box .scap{font-size:11.5px;color:var(--muted);margin-top:5px} .terms{font-size:13.5px;line-height:1.55} .terms p{margin:0 0 8px} /* Room/Equipment View rows */ .rev-row{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line)} .rev-row:last-child{border-bottom:none} .rev-row-info{flex:1;min-width:0} .rev-row-title{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rev-row-sub{font-size:12.5px;color:var(--muted);margin-top:2px} /* ── Tab navigation ── */ .tab-bar { background: var(--card); border-bottom: 2px solid var(--line); display: flex; gap: 2px; width: 100%; padding: 0 22px; position: relative; } .tab-group { position: relative; flex-shrink: 0; } .tab-group-btn { background: none; border: none; border-bottom: 3px solid transparent; color: var(--muted); cursor: pointer; font-family: var(--font-display); font-size: 14px; font-weight: 700; margin-bottom: -2px; padding: 14px 16px 11px; display: flex; align-items: center; gap: 4px; transition: color 0.15s, border-color 0.15s; } .tab-group-btn:hover { color: var(--ink); } .tab-group-btn.active { border-bottom-color: var(--brand); color: var(--brand-dark); } .tab-group-caret { font-size: 10px; } .tab-group-panel { display: none; position: absolute; top: 100%; left: 0; background: var(--card); border: 1px solid var(--line); border-radius: 0 0 var(--radius-md) var(--radius-md); box-shadow: var(--shadow-md); flex-direction: column; min-width: 200px; z-index: 30; padding: 6px; } .tab-group-panel.open { display: flex; } .tab-btn { background: none; border: none; border-radius: var(--radius-sm); color: var(--muted); cursor: pointer; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-align: left; padding: 10px 14px; transition: color 0.15s, background 0.15s; } .tab-group-panel .tab-btn { width: 100%; } .tab-btn:hover { color: var(--ink); background: var(--accent); } .tab-btn.active { color: var(--brand-dark); background: var(--accent); } /* Navigeringskanaler: sedan Fas 1-menyombyggnaden (issue #278) finns sju flikgrupper istället för de tre gamla (salj/drift/admin), så den tidigare 1:1-färgkodningen per grupp (samma idé som en kabeldragnings- färg på ett patch-panel) skalar inte längre snyggt till sju kanaler. Aktivt tillstånd faller nu tillbaka på den generiska --brand/--brand-dark- stylingen ovan (.tab-group-btn.active/.tab-btn.active). --brand-salj/ -drift/-admin lever kvar oförändrade för header::after-kalibrerings- randen (se längre ner), bara denna per-grupp-tillämpning togs bort. */ /* Ensam synlig flikgrupp (en roll som bara någonsin ser en av de sju huvudgrupperna): hoppa över dropdown-chromen helt — panelen visas alltid öppen istället för att kräva ett extra tryck för att nå de få flikar rollen någonsin ser. Klassen sätts av applyRoleUI() i src/auth/session.js. */ .tab-bar.single-group .tab-group-btn { display: none; } .tab-bar.single-group .tab-group-panel { display: flex; position: static; box-shadow: none; border: none; border-radius: 0; padding: 6px 0; min-width: 0; flex-direction: row; flex-wrap: wrap; } @media(max-width:820px) { .tab-bar { flex-wrap: wrap; padding: 0 12px; } .tab-group { flex: 1 1 140px; min-width: 0; } .tab-group-btn { width: 100%; padding: 12px 10px 9px; justify-content: space-between; } .tab-group-panel { max-width: calc(100vw - 24px); } } @media(max-width:700px) { .tab-bar { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; padding:6px; } .tab-group { width:100%; min-width:0; } .tab-group-btn { width:100%; padding:7px 10px; justify-content:space-between; min-height:36px; font-size:13px; } .tab-group-panel { position: static; display: none; box-shadow: none; border: none; border-radius: 0; padding: 2px 0 4px; min-width: 0; } .tab-group-panel.open { display: flex; } .tab-btn { min-height:36px; padding:7px 10px; font-size:13px; } .tab-bar.single-group { display:flex; } .tab-bar.single-group .tab-group-panel { flex-direction: column; padding: 4px; } } /* ── Prospektering: quick-nav to jump between Leads / anrikade prospekt ── */ #pm-leads-heading, #pm-prospects-heading { scroll-margin-top: 54px; } /* ── Planering (issue #253): samma quick-nav-mönster, hoppar mellan Bokningar/Kalender/Teknikeröversikt-sektionerna på samma flik. ── */ #tab-planering, #planering-kalender, #planering-tekniker { scroll-margin-top: 54px; } .pm-quicknav { display: flex; gap: 8px; flex-wrap: wrap; position: sticky; top: 0; z-index: var(--sticky-top-z); background: var(--bg); padding: 8px 0; margin-bottom: 10px; } .pm-quicknav-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ink); cursor: pointer; font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 10px 12px; min-height: 40px; transition: background 0.15s, border-color 0.15s; } .pm-quicknav-btn:hover, .pm-quicknav-btn:active { background: var(--accent); border-color: var(--brand); } .pm-quicknav-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--accent); color: var(--brand-dark); font-size: 11px; font-weight: 700; } /* Läst/oläst (059_opportunity_reads.sql): checkbox + titel/källa-block i varje lead-kort */ .pm-lead-row { display: flex; align-items: flex-start; gap: 8px; } /* Osynlig, förstorad träffyta runt checkboxen (padding + motsvarande negativ margin) så att ett tryck som missar den 18px stora rutan med några pixlar ändå träffar checkboxen istället för kortet bakom (som öppnar leadets detaljvy) — checkboxens synliga storlek/layout påverkas inte. */ .pm-lead-check { display: flex; align-items: center; justify-content: center; padding: 16px; margin: -16px; cursor: pointer; touch-action: manipulation; } .pm-lead-row input[type=checkbox] { margin: 0; width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; } /* Verktygsfältet ovanför leadlistan: olästa-filter som riktig knapp (inte en lätt-missad checkbox), "markera alla synliga" så man slipper pricka in varje enskild checkbox, och bulk-läs-knappen. */ .pm-lead-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 10px; } .pm-filter-toggle { display: inline-flex; align-items: center; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; color: var(--ink); cursor: pointer; font-family: var(--font-display); font-size: 13px; font-weight: 700; padding: 9px 16px; min-height: 40px; transition: background 0.15s, border-color 0.15s, color 0.15s; } .pm-filter-toggle:hover { border-color: var(--brand); } .pm-filter-toggle.active { background: var(--brand); border-color: var(--brand); color: #fff; } .pm-select-all { display: flex; align-items: center; gap: 8px; cursor: pointer; padding: 8px 0; } .pm-select-all input[type=checkbox] { margin: 0; width: 18px; height: 18px; accent-color: var(--brand); cursor: pointer; } .pm-lead-bulkbar { display: flex; align-items: center; gap: 8px; margin-left: auto; } /* TemplateConfigurator (rendered inline in the Inställningar-fliken) */ .tc-body { padding-top: 10px; } .tc-section { margin-bottom: 28px; } .tc-section h3 { font-size: 14px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 14px; } .tc-toggle { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; padding: 6px 0; } .tc-toggle input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--brand); } .tc-footer { display: flex; justify-content: flex-end; padding-top: 6px; } .tab-section { display: none; } .tab-section.active { display: block; } #tab-avtalslista, #tab-kunder-avtal, #tab-arenden, #tab-mallbibliotek, #tab-kunder, #tab-prospektering, #tab-dashboard, #tab-felanmalningar, #tab-planering, #tab-tekniker, #tab-rapporter, #tab-users, #tab-installningar { max-width: 1180px; margin: 0 auto; padding: 22px; } .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .table-scroll table{min-width:360px} .reports-table{min-width:760px} .reports-table td:last-child{white-space:nowrap;display:flex;gap:6px;flex-wrap:wrap} /* Breda, kolumnrika tabeller: en relevant min-width så .table-scroll faktiskt scrollar istället för att kolumner/knappar hoppressas till oläsbarhet (issue: grafik/responsivitet-stabilisering). Sista kolumnen (oftast åtgärdsknappar) får inte kapas utan en avsiktlig scroll. */ .case-table{min-width:960px} .user-table{min-width:640px} .planering-table{min-width:640px} .inv-line-table{min-width:900px} .inv-case-groups-table{min-width:760px} .inv-missing-order-table{min-width:520px} #inv-order-table{min-width:880px} .ext-tech-table{min-width:640px} .ext-request-table{min-width:640px} .contacts-table,.sites-table{min-width:560px} .archived-agreements-table{min-width:520px} .kpi-breakdown-table{min-width:520px} .queue-table{min-width:760px} .inv-order-conflict-table{min-width:680px} .inv-history-table{min-width:480px} .unassigned-report-lines{min-width:700px} .inv-line-table td:last-child,.case-table td:last-child,.user-table td:last-child, .planering-table td:last-child{white-space:nowrap} @media(max-width:820px) and (min-width:701px){ .case-table{min-width:720px} .inv-line-table{min-width:720px} #inv-order-table{min-width:720px} } /* Avtalsbesök att planera (issue #236): på mobil renderas listan som kort istället för en hoppressad fler-kolumnstabell — samma data, två markup-varianter delade av PlaneringManager.js, växlade här. */ .hide-mobile{display:block} .show-mobile{display:none} @media(max-width:700px){ .hide-mobile{display:none} .show-mobile{display:block} } .avtalsbesok-cards{display:flex;flex-direction:column;gap:10px} .avtalsbesok-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px} .avtalsbesok-card-title{font-weight:700} .avtalsbesok-card-fields{margin:8px 0 0} .avtalsbesok-card-fields div{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:3px 0} .avtalsbesok-card-fields dt{color:#667;font-size:.85em} .avtalsbesok-card-fields dd{margin:0;text-align:right} .avtalsbesok-card-action{width:100%;margin-top:10px;min-height:44px} @media(max-width:600px){ /* Offert-/avtalsmodalen: helskärmsliknande på mobil (ingen yttre marginal/skugga/hörnradie), mindre padding, och de fyra tvåkolumns- blocken i en kolumn med vänsterställd metadata — bara skärmlayouten, @media print nedan styr fortfarande utskriften separat och orörd (issue: grafik/responsivitet-stabilisering). */ .offer-sheet{padding:16px; margin:0; max-width:100%; border-radius:0; box-shadow:none} .offer-head{flex-direction:column; gap:12px} .offer-head .meta{text-align:left} .price-box{flex-direction:column; align-items:flex-start; gap:10px; padding:16px} .parties{grid-template-columns:1fr; gap:16px} .sig-grid{grid-template-columns:1fr; gap:22px} .item-head{display:none} .item-row{grid-template-columns:24px minmax(0,1fr) 92px 96px 24px 32px;gap:6px} .item-row input.iname{min-width:0} .toolbar{padding:10px 12px 0} .wrap{padding:12px} header{padding:10px 14px} .head-inner{gap:10px} .logo-badge{padding:5px 9px} .logo-badge img{height:24px} header h1{font-size:16px} header p{display:none} .head-title-full{display:none} .head-title-short{display:inline} /* Kontoinformation + knappar (Byt lösenord/Logga ut) får en egen, fullbred rad under logga+titel istället för att pressas in i samma rad — annars är det just den kombinationen som riskerar att gå utanför viewporten på en telefon (issue: grafik/responsivitet). */ .head-actions.u-ml-auto-ta-right-fs-13px{ display:flex; align-items:center; gap:6px; font-size:11.5px; min-width:0; flex:1 1 100%; margin-left:0; justify-content:flex-end; flex-wrap:wrap; } #current-user-badge{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .head-actions.u-ml-auto-ta-right-fs-13px .btn{padding:6px 10px;font-size:12px;flex:none;white-space:nowrap} .footer{padding:0 12px 20px} } @media print{ html,body{width:auto!important;max-width:none!important} body.modal-open header,body.modal-open .tab-bar,body.modal-open .toolbar,body.modal-open .wrap, body.modal-open .footer,body.modal-open .offer-bar{display:none!important} body.modal-open #offerModal{position:static;background:#fff;width:100%} .offer-sheet{box-shadow:none;margin:0;max-width:100%;width:100%;padding:0;border-radius:0} @page{size:A4;margin:15mm} } /* Modal.js Styles */ /* Separat klass från body.modal-open (offert-/avtalsmodalen i core.js, som redan har sin egen betydelse i @media print ovan) — Modal.js låser bakomliggande scroll via en egen, refräknad klass så flera samtidigt öppna generiska modaler hanteras korrekt (se open()/close() nedan). */ body.generic-modal-open { overflow: hidden; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; } .modal-overlay.modal-open { opacity: 1; } .modal-overlay.modal-closing { opacity: 0; } .modal { background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-width: 500px; width: 90%; max-height: min(90dvh, 900px); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.95); transition: transform 0.3s ease; } .modal-lg { max-width: 900px; } .modal-overlay.modal-open .modal { transform: scale(1); } /* Header/footer stannar kvar synliga — bara .modal-body scrollar (issue: grafik/responsivitet-stabilisering, generiska modaler). */ .modal-header, .modal-footer { flex: 0 0 auto; } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid var(--line); } .modal-title { margin: 0; font-size: 20px; font-weight: 700; color: var(--brand-dark); font-family: var(--font-display); } .modal-close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--muted); padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); transition: background 0.2s, color 0.2s; } .modal-close-btn:hover { background: var(--accent); color: var(--ink); } .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 20px; color: var(--ink); line-height: 1.6; } .modal-body p { margin: 0 0 12px 0; } .modal-body p:last-child { margin-bottom: 0; } .modal-footer { display: flex; gap: 12px; justify-content: flex-end; padding: 20px; border-top: 1px solid var(--line); } .modal-btn { padding: 10px 16px; border-radius: var(--radius-sm); border: none; font-size: 14px; font-weight: 600; font-family: var(--font-display); cursor: pointer; transition: background 0.2s, color 0.2s; } .modal-btn.btn-primary { background: var(--brand); color: white; } .modal-btn.btn-primary:hover { background: var(--brand-dark); } .modal-btn.btn-secondary { background: var(--accent); color: var(--brand-dark); } .modal-btn.btn-secondary:hover { background: var(--line); } .form-group { margin-bottom: 16px; display: flex; flex-direction: column; } .form-group:last-child { margin-bottom: 0; } .form-group label { font-weight: 600; margin-bottom: 6px; color: var(--muted); font-size: 14px; } .form-group input, .form-group textarea, .form-group select { padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; font-family: inherit; transition: border 0.2s, box-shadow 0.2s; } .form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(14,122,130,.12); } .form-group textarea { resize: vertical; min-height: 100px; } @media (max-width: 640px) { .modal { width: 95%; } .modal-header, .modal-body, .modal-footer { padding: 16px; } .modal-footer { flex-direction: column-reverse; } .modal-btn { width: 100%; } } #tab-service { max-width:1180px; margin:0 auto; padding:22px; } .service-page-head,.service-session-head,.library-title-row,.checklist-library-head, .checklist-profile-head,.section-title-row,.report-send-row { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; flex-wrap:wrap; } .service-page-head h2,.service-session-head h2,.library-title-row h2 { margin:2px 0 0; } .service-eyebrow { color:var(--brand); font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; font-family:var(--font-display-wide); } .technician-field { width:min(280px,100%); } .service-assignment-grid,.service-room-grid,.checklist-profile-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin:18px 0 28px; } .review-summary-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px 16px; margin:0; } .review-summary-grid dt { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:0; } .review-summary-grid dd { margin:2px 0 0; font-weight:600; } .job-history-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; } .job-history-list li { display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; font-size:13px; } .job-history-list time { color:var(--muted); font-variant-numeric:tabular-nums; } .service-card,.service-room-card { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; box-shadow:0 2px 8px rgba(25,44,75,.05); display:flex; flex-direction:column; gap:8px; } .service-card-active { border:2px solid var(--brand); } .service-card h3,.service-room-card h3 { margin:0; font-size:17px; } .service-card p,.service-room-card p { margin:0; color:var(--muted); } .service-card-actions { margin-top:auto; display:flex; gap:8px; flex-direction:column; } .service-primary-action,.service-secondary-action,.service-room-card .btn { min-height:44px; display:flex; align-items:center; justify-content:center; } .unscheduled-service,.service-completion,.service-checklist,.room-equipment-summary, .service-notes,.service-photos { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; margin-top:16px; } .unscheduled-row,.duration-fields,.custom-check-row { display:flex; gap:10px; align-items:flex-end; } .unscheduled-row select { flex:1; } .service-breadcrumb { margin-bottom:16px; } .service-breadcrumb a, .service-breadcrumb button.linklike { color:var(--brand); font-weight:650; text-decoration:none; min-height:44px; display:inline-flex; align-items:center; } /* Delad "se ut som en länk"-knapp, för brödsmulor som navigerar via JS (switchTab/openCaseView) istället för en riktig href — se JobDetail.js/ JobNew.js's "Tillbaka"-länkar. */ .linklike { background:none; border:none; padding:0; cursor:pointer; font-size:inherit; font-family:inherit; } /* Job detail mobile tabs (Field Service Management Phase 5) */ /* Verkligt horisontellt scrollbar flikrad: knapparna sizear efter sitt eget innehåll (flex:0 0 auto) istället för att pressas ihop (flex:1;min-width:0), som fick text att kapas/överlappa eftersom overflow-x:auto och krympande flex-item motverkade varandra (issue: grafik/responsivitet-stabilisering). */ .job-tabs { display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch; margin:16px 0; padding-bottom:2px; } .job-tab-btn { flex:0 0 auto; min-height:44px; padding:8px 14px; border:1px solid var(--line); border-radius:10px; background:#fff; font-weight:650; font-size:13.5px; white-space:nowrap; cursor:pointer; } .job-tab-btn.active { background:var(--brand); color:#fff; border-color:var(--brand); } .job-tab-panel[hidden] { display:none; } .completion-actions { display:flex; flex-direction:column; gap:10px; margin-top:16px; } .signature-canvas { display:block; margin-top:12px; border:1px solid var(--line); border-radius:10px; background:#fff; touch-action:none; -ms-touch-action:none; /* Skalar ner på smala viewports men behåller höjd/bredd-förhållandet så SignaturePad.js kan skala om den interna pixelbufferten proportionellt (ingen förvrängning) — se _applySize() i src/shared/SignaturePad.js. */ width:100%; max-width:400px; aspect-ratio:400/150; height:auto; } .danger-zone { margin-top:32px; padding-top:16px; border-top:1px solid var(--line); } .btn-danger { background:#fff; color:var(--bad); border-color:var(--bad); } .btn-danger:hover { background:var(--bad-bg); } .service-time-card { background:var(--accent); border-radius:10px; padding:12px 18px; min-width:150px; } .service-time-card span { display:block; color:var(--muted); font-size:12px; } .service-time-card strong { font-size:18px; } .service-progress { height:10px; background:var(--line); border-radius:99px; overflow:hidden; margin-top:18px; } .service-progress span { display:block; height:100%; background:var(--good); transition:width .2s ease; } .service-progress-text { color:var(--muted); font-size:13px; } .status-completed { border-color:var(--good); } .status-skipped { border-color:var(--warn); } .service-warning { background:var(--warn-bg); color:var(--warn); padding:10px 12px; border-radius:8px; } .service-error { background:var(--bad-bg); color:var(--bad); padding:12px; border-radius:8px; } /* Förenklat teknikerflöde: "Ny planering krävs" ska synas tydligt oavsett vilken flik som är öppen — samma varningsfärger som .service-warning. */ .service-warning-banner { background:var(--warn-bg); color:var(--warn); padding:12px 16px; border-radius:10px; margin:16px 0; font-size:14px; } .avrapportering-form label { display:flex; flex-direction:column; gap:4px; font-size:13.5px; margin-bottom:10px; } .avrapportering-form label.checkbox-label { flex-direction:row; align-items:center; } /* Ny avrapporteringsvy (issue "avrapportering-slutsteg"): ett slutsteg, inte ett andra dokumentationssteg — se JobDetail.js _avrapporteringFormHtml. */ .avrapportering-summary { background:var(--good-bg); color:var(--good); border-radius:10px; padding:12px 16px; margin-bottom:16px; } .avrapportering-check { font-weight:700; margin:0 0 6px; } .avrapportering-summary ul { margin:0; padding-left:18px; color:inherit; } .avrapportering-result { border:none; padding:0; margin:0 0 16px; } .avrapportering-result legend { font-weight:650; font-size:13.5px; margin-bottom:6px; padding:0; } .avrapportering-result .radio-label { display:flex; align-items:center; gap:6px; min-height:36px; font-size:14px; margin-bottom:0; } .avrapportering-customer,.avrapportering-time,.avrapportering-material { margin-top:16px; } .avrapportering-customer h4,.avrapportering-time h4,.avrapportering-material h4 { margin:0 0 8px; font-size:14px; color:var(--brand-dark); } .service-loading,.service-empty { padding:24px; text-align:center; color:var(--muted); } .room-equipment-summary article { display:grid; grid-template-columns:minmax(160px,1fr) minmax(140px,1fr) 150px auto; gap:10px; align-items:end; border-top:1px solid var(--line); padding:12px 0; } .room-equipment-summary article span { color:var(--muted); font-size:13px; } /* Brytpunkter för utrustningsraden (desktop: fyra kolumner ovan): surfplatta två kolumner, mobil en kolumn — så namn/beskrivning/brukstimmar-fält och åtgärdsknappen aldrig pressas ihop eller kapas (issue: grafik/responsivitet-stabilisering). */ @media (max-width:900px) { .room-equipment-summary article { grid-template-columns:1fr 1fr; } .room-equipment-summary article strong,.room-equipment-summary article span { grid-column:1/-1; } } @media (max-width:480px) { .room-equipment-summary article { grid-template-columns:1fr; gap:8px; } .room-equipment-summary article strong,.room-equipment-summary article span, .room-equipment-summary article label,.room-equipment-summary article button { grid-column:1/-1; } .room-equipment-summary article button { min-height:40px; width:100%; } } .service-checklist h4 { margin:20px 0 8px; color:var(--brand-dark); } .checklist-row { border:1px solid var(--line); border-radius:9px; padding:12px; margin-bottom:8px; } .checklist-copy { display:flex; flex-direction:column; gap:3px; } .checklist-copy small { color:var(--muted); } .checklist-options { display:flex; flex-wrap:wrap; gap:14px; margin:10px 0; } .checklist-options label { min-height:36px; display:flex; align-items:center; gap:4px; } .checklist-note { width:100%; } .checklist-row.status-completed { background:var(--good-bg); } .checklist-row.status-failed { background:var(--bad-bg); } .custom-check-row input { flex:1; } .photo-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; } .photo-grid figure { margin:0; } .photo-grid img,.photo-placeholder { width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; background:var(--accent); } .photo-placeholder { display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:12px; } .photo-capture { min-height:44px; margin-top:12px; display:inline-flex; align-items:center; } .room-finish-actions { position:sticky; bottom:var(--sticky-bottom-offset); display:flex; gap:10px; padding:12px 12px calc(12px + var(--safe-bottom)); margin-top:18px; background:rgba(255,255,255,.96); border:1px solid var(--line); border-radius:10px; z-index:var(--sticky-bottom-z); } .room-finish-actions .btn { min-height:48px; flex:1; } /* Sticky bottenbar täcker annars sista fältet/kortet ovanför den medan man scrollar — reservera plats i botten av vyn så sista formulärfältet/knappen alltid går att nå (issue: grafik/responsivitet-stabilisering). */ #tab-service:has(.room-finish-actions) { padding-bottom:calc(84px + var(--safe-bottom)); } .report-summary { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .report-summary div { background:var(--accent); padding:10px; border-radius:8px; } .report-summary dt { color:var(--muted); font-size:12px; } .report-summary dd { margin:2px 0 0; font-weight:700; } .report-room { border-top:2px solid var(--line); margin-top:18px; padding-top:12px; } .report-room h4 { display:flex; justify-content:space-between; } .pi-new-room-block { border-top:1px solid var(--line); margin-top:12px; padding-top:12px; } .job-room-card { border:1px solid var(--line); border-radius:8px; padding:12px; margin-bottom:10px; background:var(--bg); } .job-room-card .job-room-checkbox { font-weight:600; } .job-room-card .form-group { margin-top:8px; } .room-instructions { background:var(--accent); padding:10px; border-radius:8px; margin:8px 0; } .room-instructions-preview { color:var(--muted); font-size:13px; margin:2px 0; } .report-profile h5 { margin:12px 0 4px; } .report-profile ul { margin:0; padding-left:20px; } .report-send-row { align-items:end; margin-top:18px; flex-wrap:wrap; } .visit-reports-summary ul { display:flex; gap:8px; flex-wrap:wrap; } .visit-reports-summary ul li { display:flex; align-items:center; gap:6px; } .report-category-summary { width:100%; border-collapse:collapse; margin-top:10px; font-size:13px; } .report-category-summary th,.report-category-summary td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--line); } .report-category-summary tfoot td { font-weight:700; border-top:2px solid var(--line); border-bottom:none; } .report-send-row label { flex:1; min-width:240px; } .report-preview-frame { width:100%; height:65vh; border:0; border-radius:6px; } .report-preview-summary { margin-top:16px; } .report-preview-summary summary { cursor:pointer; font-weight:700; color:var(--muted); } .report-preview-summary textarea { width:100%; min-height:140px; font-family:monospace; font-size:12px; margin-top:8px; padding:10px; border:1px solid var(--line); border-radius:8px; resize:vertical; } .library-tabs { display:flex; gap:8px; flex-wrap:wrap; } [hidden] { display:none !important; } .checklist-library-head h3 { margin:0; } .checklist-profile-title { font-size:16px; font-weight:750; display:flex; gap:8px; align-items:center; } .checklist-profile-actions,.checklist-item-actions,.form-actions { display:flex; gap:6px; flex-wrap:wrap; } .checklist-profile-items { padding-left:22px; } .checklist-profile-items li { padding:10px 0; border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:12px; } .checklist-edit-form { margin:14px 0; display:grid; gap:10px; } .checklist-edit-form h4 { margin:0; } .service-settings-panel { background:var(--accent); padding:12px; border-radius:8px; margin-bottom:12px; } .profile-selector { border:0; padding:0; margin:8px 0; } .profile-selector legend { font-size:12px; font-weight:700; margin-bottom:4px; } .check-row { display:flex; align-items:center; gap:7px; min-height:36px; } .calc-existing-room-row { display:grid; grid-template-columns:minmax(0,1fr) 160px; gap:10px; align-items:end; padding:8px 0; border-bottom:1px solid #e3e8ef; } .calc-existing-room-row .form-group { margin:0; } .calc-existing-room-row input[type="number"] { width:100%; } .order-number-session { display:block; margin-top:14px; max-width:320px; font-weight:700; } .order-number-display { margin:12px 0 0; font-size:15px; } .room-card-actions { display:flex; flex-direction:column; gap:8px; margin-top:auto; } .order-search-section { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; margin-top:16px; } .order-search-section h3 { margin:0 0 12px; } #order-search-results { margin-top:16px; display:flex; flex-direction:column; gap:12px; } .order-result-card { background:var(--accent); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:8px; } .order-result-head { display:flex; justify-content:space-between; align-items:center; gap:8px; } .order-result-number { font-size:16px; } .order-result-title { margin:0; color:var(--muted); font-size:13px; } .order-result-dl { display:grid; grid-template-columns:1fr 1fr; gap:6px; margin:0; } .order-result-dl div { background:#fff; padding:8px 10px; border-radius:7px; } .order-result-dl dt { font-size:11px; color:var(--muted); } .order-result-dl dd { margin:2px 0 0; font-weight:700; font-size:14px; } .order-search-empty { color:var(--muted); padding:8px 0; } /* Incident management styles */ .incidents-section { background:#fff; border:1px solid var(--line); border-radius:12px; padding:18px; margin-top:16px; } .incidents-section-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; } .incidents-section-head h3 { margin:0; } .incidents-sub-heading { margin:16px 0 8px; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); } .incidents-sub-heading--escalated { color:var(--bad); } .incident-card-grid { display:flex; flex-direction:column; gap:10px; } .incident-card { background:var(--accent); border-radius:10px; padding:14px; display:flex; flex-direction:column; gap:6px; border-left:4px solid var(--warn); } .incident-card--escalated { border-left-color:var(--bad); } .incident-card-head { display:flex; justify-content:space-between; align-items:center; gap:8px; } .incident-case-number { font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; } .incident-case-number.large { font-size:17px; display:block; margin-bottom:4px; } .incident-title { font-size:15px; } .incident-meta { margin:0; font-size:13px; color:var(--muted); } .incident-last-note { margin:0; font-size:13px; color:var(--muted); font-style:italic; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .pill-orange { background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn); } .pill-red { background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad); } /* Incident detail */ .incident-detail-head { margin-bottom:16px; } .incident-detail-head h2 { margin:4px 0 2px; } .incident-description { margin:6px 0 0; font-size:14px; color:var(--muted); white-space:pre-wrap; } .incident-schematics { margin:12px 0; display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:14px; } .incident-equipment { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; } .incident-equipment h3 { margin:0 0 8px; font-size:15px; } .incident-equipment-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:4px; font-size:14px; } .incident-equipment-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; border-bottom:1px solid var(--line); } .incident-equipment-row-actions { display:flex; gap:6px; flex:none; } .incident-equipment-form { display:grid; grid-template-columns:1fr 1fr; gap:10px 14px; padding:12px; margin:8px 0; background:var(--accent); border-radius:8px; } .incident-equipment-form label { display:flex; flex-direction:column; gap:4px; font-size:13.5px; } .incident-equipment-form label.checkbox-label { flex-direction:row; align-items:center; } .incident-equipment-form .incident-action-buttons { grid-column:1/-1; margin-top:2px; } .room-equipment-summary article.jr-eq-row { display:block; border-top:1px solid var(--line); padding:12px 0; } .jr-eq-row .jr-eq-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .jr-eq-row .jr-eq-fields { display:flex; flex-wrap:wrap; gap:14px; margin-top:8px; align-items:end; } .jr-eq-row .jr-eq-fields label { display:flex; flex-direction:column; gap:4px; font-size:13px; min-width:140px; } .incident-timeline { background:#fff; border:1px solid var(--line); border-radius:10px; padding:14px; margin:12px 0; } .incident-timeline h3 { margin:0 0 12px; font-size:15px; } .incident-events { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; } .incident-event { border-left:3px solid var(--line); padding-left:12px; } .incident-event--resolved { border-left-color:var(--good); } .incident-event--escalated { border-left-color:var(--bad); } .incident-event--onsite_started { border-left-color:var(--brand); } .incident-event p { margin:4px 0 0; font-size:13px; color:var(--muted); white-space:pre-wrap; } .incident-event-type { display:block; font-weight:700; font-size:13px; } .incident-event-tech { font-size:13px; color:var(--muted); margin-right:8px; } .incident-event time { font-size:12px; color:var(--muted); } .incident-resolution { background:var(--good-bg); border:1px solid var(--good); border-radius:10px; padding:14px; margin:12px 0; } .incident-resolution h3 { margin:0 0 6px; color:var(--good); } .incident-actions { background:#fff; border:1px solid var(--line); border-radius:10px; padding:16px; margin:12px 0; } .incident-actions h3 { margin:0 0 12px; font-size:15px; } .incident-actions label { display:flex; flex-direction:column; gap:4px; font-size:14px; margin-bottom:12px; } .incident-action-buttons { display:flex; flex-wrap:wrap; gap:8px; margin-top:4px; } /* Incident new form */ .incident-form { background:#fff; border:1px solid var(--line); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:0; } .incident-form .form-group { margin-bottom:14px; } .incident-form label { display:flex; flex-direction:column; gap:5px; font-size:14px; font-weight:500; } .incident-form-actions { display:flex; gap:10px; margin-top:6px; } .incident-room-preview { margin:0 0 14px; } .incident-room-info { background:var(--accent); border-radius:8px; padding:12px; font-size:14px; } .incident-room-info strong { display:block; margin-bottom:6px; } .incident-schematic-links { margin:6px 0; } /* Dashboard KPI cards (Field Service Management Phase 4) */ .dashboard-section-title { margin:22px 0 10px; font-size:16px; color:var(--muted); font-family:var(--font-display-wide); font-weight:800; letter-spacing:.02em; } .kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; } .kpi-card { display:flex; flex-direction:column; gap:6px; padding:18px; } .kpi-card h3 { margin:0; font-size:14px; color:var(--muted); font-family:var(--font-display-wide); font-weight:700; letter-spacing:.01em; } .kpi-number { margin:0; font-size:34px; font-weight:700; line-height:1; font-family:var(--font-mono); font-variant-numeric:tabular-nums; } .kpi-number-warn { color:var(--warn); } .kpi-number-bad { color:var(--bad); } .kpi-breakdown { list-style:none; padding:0; margin:6px 0 0; display:flex; flex-direction:column; gap:4px; font-size:13px; } .kpi-card--clickable { cursor:pointer; transition:box-shadow 0.15s; } .kpi-card--clickable:hover { box-shadow:0 4px 12px rgba(14,122,130,.12); } .clickable-row { cursor:pointer; } .clickable-row:hover { background:var(--accent); } /* Nästa handling-köer (issue #203/ADR-001§13) — QueueBoard.js */ .queue-board { display:flex; flex-direction:column; gap:14px; margin-bottom:22px; } .queue-grouped-board { display:flex; flex-direction:column; gap:18px; margin-bottom:22px; } .queue-group { display:flex; flex-direction:column; gap:10px; } .queue-group-head h3 { margin:0; font-size:16px; } .queue-group .queue-board { margin-bottom:0; } .queue-card { padding:16px; } .queue-card-head { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:8px; } .queue-card-head h3 { margin:0; font-size:15px; } .queue-card-meta { display:flex; gap:6px; flex-wrap:wrap; } .queue-empty { margin:4px 0 0; } .queue-row { cursor:pointer; } .queue-row:hover, .queue-row:focus-visible { background:var(--accent); outline:none; } @media (max-width:700px) { .queue-card-head { flex-direction:column; align-items:flex-start; } } .sortable-col { cursor:pointer; user-select:none; white-space:nowrap; } .queue-table .sortable-col,.planering-table .sortable-col { background:none; border:none; padding:0; color:inherit; font:inherit; text-align:left; } .sortable-col:hover { background:var(--accent); } @media (max-width:700px) { #tab-service { padding:14px; } .service-page-head,.service-session-head,.library-title-row,.checklist-library-head { flex-direction:column; } .technician-field { width:100%; } .service-assignment-grid,.service-room-grid,.checklist-profile-grid { grid-template-columns:1fr; } .unscheduled-row,.duration-fields { align-items:stretch; flex-direction:column; } .checklist-profile-items li { flex-direction:column; } .service-time-card { width:100%; } .checklist-options { gap:6px; } .checklist-options label { flex:1; min-height:48px; justify-content:center; border-radius:8px; background:var(--accent); border:1.5px solid var(--line); font-size:15px; font-weight:600; } .checklist-options label:has(input[value="completed"]:checked) { background:var(--good-bg); border-color:var(--good); } .checklist-options label:has(input[value="failed"]:checked) { background:var(--bad-bg); border-color:var(--bad); } .checklist-options label:has(input[value="na"]:checked) { background:var(--accent); border-color:var(--muted); color:var(--muted); } .checklist-options input[type="radio"] { display:none; } .custom-check-row { flex-direction:column; align-items:stretch; } .order-result-dl { grid-template-columns:1fr; } } /* Auto-generated utility classes from converted inline styles */ .u-maxw-340px-w-90{max-width:340px; width:90%} .u-login-logo{margin-bottom:16px} .u-mt-0{margin-top:0} .u-mt-10px{margin-top:10px} .u-c-v-bad-minh-1-2em-m-10px-0-0{color:var(--bad); min-height:1.2em; margin:10px 0 0} .u-mt-8px-c-v-muted-bg-none-bd-none-cur-pointer-fs-13px-td-underline{margin-top:8px; color:var(--muted); background:none; border:none; cursor:pointer; font-size:13px; text-decoration:underline; display:block; width:100%; text-align:center; font-family:inherit} .u-mt-10px-w-100{margin-top:10px; width:100%} .u-ml-auto-ta-right-fs-13px{margin-left:auto; text-align:right; font-size:13px} .u-w-auto-minw-210px{width:auto; min-width:210px} .u-flex-1{flex:1} .u-gc-1-1{grid-column:1 / -1} .u-mt-12px{margin-top:12px} .u-mt-8px{margin-top:8px} .u-d-flex-ai-center-gap-8px-fs-14px-c-v-ink{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); margin-bottom:12px; font-weight:600} .u-w-18px-h-18px-accc-v-brand-cur-pointer{width:18px; height:18px; accent-color:var(--brand); cursor:pointer} .u-d-flex-ai-center-gap-8px-fs-14px-c-v-ink-2{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink); margin-bottom:16px; font-weight:600} .u-mt-22px{margin-top:22px} .u-w-104px-ta-left{width:104px; text-align:left} .u-ta-right{text-align:right} .u-fw-700-bdt-2px-solid-v-li{font-weight:700; border-top:2px solid var(--line)} .u-ta-left{text-align:left} .u-mt-6px{margin-top:6px} .u-h-40px-mb-8px-d-block{height:40px; margin-bottom:8px; display:block} .u-mt-32px-pt-12px-bdt-1px-solid-e3e8-fs-11px-c-65758b{margin-top:32px; padding-top:12px; border-top:1px solid #e3e8ef; font-size:11px; color:#65758b; text-align:center} .u-ws-pre-line-fs-13px{white-space:pre-line; font-size:13px} .u-mt-20px{margin-top:20px} .u-p-7px-10px-3px-fs-10px-c-v-muted-lh-1-5{padding:7px 10px 3px; font-size:10px; color:var(--muted); line-height:1.5} .u-p-4px-8px{padding:4px 8px} .u-w-100-p-6px-fs-11px-fw-700-bg-v-brand{width:100%; padding:6px; font-size:11px; font-weight:700; background:var(--brand); color:#fff; border:none; border-radius:6px; cursor:pointer; font-family:inherit} .u-d-flex-ai-center-gap-6px-p-5px-8px-cur-pointer{display:flex; align-items:center; gap:6px; padding:5px 8px; cursor:pointer; border-radius:6px; background:var(--accent); font-size:12px; user-select:none} .u-flex-1-fw-600{flex:1; font-weight:600} .u-fs-10px-c-v-muted{font-size:10px; color:var(--muted)} .u-fs-10px-fw-700-c-22c55e-mb-3px{font-size:10px; font-weight:700; color:var(--port-in); margin-bottom:3px} .u-fs-10px-c-v-muted-mb-2px{font-size:10px; color:var(--muted); margin-bottom:2px} .u-d-flex-ai-center-gap-4px-m-2px-0{display:flex; align-items:center; gap:4px; margin:2px 0} .u-w-7px-h-7px-br-50-bg-22c55e-flex-none{width:7px; height:7px; border-radius:50%; background:var(--port-in); flex:none} .u-flex-1-fs-11px{flex:1; font-size:11px} .u-c-v-bad-bg-none-bd-none-cur-pointer-fs-14px{color:var(--bad); background:none; border:none; cursor:pointer; font-size:14px; padding:0 3px; line-height:1} .u-fs-10-5px-c-22c55e-bg-none-bd-none-cur-pointer{font-size:10.5px; color:var(--port-in); background:none; border:none; cursor:pointer; padding:3px 0; font-family:inherit} .u-fs-10px-fw-700-c-f97316-m-7px-0-3px{font-size:10px; font-weight:700; color:var(--port-out); margin:7px 0 3px} .u-w-7px-h-7px-br-50-bg-f97316-flex-none{width:7px; height:7px; border-radius:50%; background:var(--port-out); flex:none} .u-fs-10-5px-c-f97316-bg-none-bd-none-cur-pointer{font-size:10.5px; color:var(--port-out); background:none; border:none; cursor:pointer; padding:3px 0; font-family:inherit} .u-fs-10px-fw-700-c-8b5cf6-m-7px-0-3px{font-size:10px; font-weight:700; color:var(--port-bidir); margin:7px 0 3px} .u-w-7px-h-7px-br-50-bg-8b5cf6-flex-none{width:7px; height:7px; border-radius:50%; background:var(--port-bidir); flex:none} .u-fs-10-5px-c-8b5cf6-bg-none-bd-none-cur-pointer{font-size:10.5px; color:var(--port-bidir); background:none; border:none; cursor:pointer; padding:3px 0; font-family:inherit} .u-fs-10px-fw-700-c-v-brand-m-7px-0-3px{font-size:10px; font-weight:700; color:var(--brand); margin:7px 0 3px} .u-fs-10-5px-c-v-brand-bg-none-bd-none-cur-pointer{font-size:10.5px; color:var(--brand); background:none; border:none; cursor:pointer; padding:3px 0; font-family:inherit} .u-d-flex-gap-4px-m-4px-0{display:flex; gap:4px; margin:4px 0} .u-flex-1-p-3px-7px-fs-11px-bd-1-5px-solid-v-li-br-5px{flex:1; padding:3px 7px; font-size:11px; border:1.5px solid var(--line); border-radius:5px; outline:none; font-family:inherit} .u-d-flex-ai-center-gap-6px-p-4px-cur-pointer{display:flex; align-items:center; gap:6px; padding:4px; cursor:pointer; user-select:none} .u-w-12px-h-12px-br-3px-flex-none{width:12px; height:12px; border-radius:3px; flex:none} .u-flex-1-fs-12px{flex:1; font-size:12px} .u-fs-10px-p-3px-6px-bg-none-bd-1px-solid-v-li-br-5px{font-size:10px; padding:3px 6px; background:none; border:1px solid var(--line); border-radius:5px; cursor:pointer; font-family:inherit} .u-w-100-h-27px-p-1px-bd-1px-solid-v-li-br-5px{width:100%; height:27px; padding:1px; border:1px solid var(--line); border-radius:5px} .u-d-flex-ai-center-gap-6px-p-5px-2px-fs-11px-fw-700-c-v-brand-dark-cur-pointer{display:flex; align-items:center; gap:6px; padding:5px 2px; font-size:11px; font-weight:700; color:var(--brand-dark); cursor:pointer; user-select:none} .u-d-flex-gap-6px-mt-8px{display:flex; gap:6px; margin-top:8px} .u-flex-1-fs-10px-p-3px-6px-bg-v-accent-bd-1px-solid-v-li{flex:1; font-size:10px; padding:3px 6px; background:var(--accent); border:1px solid var(--line); border-radius:4px; cursor:pointer; font-family:inherit} .u-fs-10px-p-3px-6px-bg-none-bd-1px-solid-v-ba-c-v-bad{font-size:10px; padding:3px 6px; background:none; border:1px solid var(--bad); color:var(--bad); border-radius:4px; cursor:pointer; font-family:inherit} .u-d-flex-gap-4px-ai-center-m-4px-0{display:flex; gap:4px; align-items:center; margin:4px 0} .u-fs-11px-p-3px-6px-bg-v-line-bd-none-br-5px{font-size:11px; padding:3px 6px; background:var(--line); border:none; border-radius:5px; cursor:pointer; font-family:inherit} .u-m-6px-8px-p-10px-bd-1-5px-solid-v-br-8px-bg-v-accent{margin:6px 8px; padding:10px; border:1.5px solid var(--brand); border-radius:8px; background:var(--accent)} .u-fs-11px-fw-700-c-v-brand-dark-mb-8px{font-size:11px; font-weight:700; color:var(--brand-dark); margin-bottom:8px} .u-d-grid-gtc-1fr-60px-gap-6px-mb-6px{display:grid; grid-template-columns:1fr 60px; gap:6px; margin-bottom:6px} .u-fs-10px-c-v-muted-fw-600{font-size:10px; color:var(--muted); font-weight:600} .u-w-100-p-5px-8px-fs-12px-bd-1px-solid-v-li-br-5px{width:100%; padding:5px 8px; font-size:12px; border:1px solid var(--line); border-radius:5px; font-family:inherit} .u-w-100-p-5px-8px-fs-12px-bd-1px-solid-v-li-br-5px-2{width:100%; padding:5px 8px; font-size:12px; border:1px solid var(--line); border-radius:5px; font-family:inherit; text-transform:uppercase} .u-mb-8px{margin-bottom:8px} .u-d-flex-gap-6px{display:flex; gap:6px} .u-flex-1-p-6px-fs-11px-fw-700-bg-v-brand{flex:1; padding:6px; font-size:11px; font-weight:700; background:var(--brand); color:#fff; border:none; border-radius:5px; cursor:pointer; font-family:inherit} .u-p-6px-10px-fs-11px-bg-v-line-bd-none-br-5px{padding:6px 10px; font-size:11px; background:var(--line); border:none; border-radius:5px; cursor:pointer; font-family:inherit} .u-ml-6px-fs-11px{margin-left:6px; font-size:11px} .u-w-420px-maxw-95vw-p-24px{width:420px; max-width:95vw; padding:24px} .u-fw-700-fs-16px-mb-16px-c-v-brand-dark{font-weight:700; font-size:16px; margin-bottom:16px; color:var(--brand-dark)} .u-d-flex-gap-10px-mt-18px{display:flex; gap:10px; margin-top:18px} .u-w-100-ff-inherit-fs-13px-p-8px-bd-1px-solid-v-li{width:100%; font-family:inherit; font-size:13px; padding:8px; border:1px solid var(--line); border-radius:6px; resize:vertical} .u-h-50px-mb-12px-d-block{height:50px; margin-bottom:12px; display:block} .u-ws-pre-line-fs-12px-lh-1-7{white-space:pre-line; font-size:12px; line-height:1.7} .u-mt-8px-fw-700{margin-top:8px; font-weight:700} .u-fs-11px-c-65758b-ml-8px{font-size:11px; color:#65758b; margin-left:8px} .u-m-0-0-10px{margin:0 0 10px} .u-m-0-0-12px{margin:0 0 12px} .u-d-flex-gap-12px-ai-flex-start-p-10px-0-bdb-1px-solid-v-li{display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line)} .u-d-flex-fdir-column-gap-5px-minw-90px-pt-1px{display:flex; flex-direction:column; gap:5px; min-width:90px; padding-top:1px} .u-d-flex-ai-center-gap-5px-fs-13px-fw-600{display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--good); cursor:pointer} .u-d-flex-ai-center-gap-5px-fs-13px-fw-600-2{display:flex; align-items:center; gap:5px; font-size:13px; font-weight:600; color:var(--bad); cursor:pointer} .u-d-flex-ai-center-gap-5px-fs-13px-c-v-muted{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); cursor:pointer} .u-fs-14px-lh-1-4-mb-5px{font-size:14px; line-height:1.4; margin-bottom:5px} .u-w-100-p-5px-8px-bd-1px-solid-v-li-br-5px-fs-13px{width:100%; padding:5px 8px; border:1px solid var(--line); border-radius:5px; font-size:13px; font-family:inherit; background:#fff} .u-c-v-good-fw-700{color:var(--good); font-weight:700} .u-c-v-bad-fw-700{color:var(--bad); font-weight:700} .u-c-v-muted{color:var(--muted)} .u-bdb-1px-solid-v-li{border-bottom:1px solid var(--line)} .u-p-7px-4px-fs-13-5px{padding:7px 4px; font-size:13.5px} .u-p-7px-4px-ws-nowrap-ta-right{padding:7px 4px; white-space:nowrap; text-align:right} .u-p-7px-4px-fs-12-5px-c-v-muted{padding:7px 4px; font-size:12.5px; color:var(--muted)} .u-bg-v-good-bg-br-8px-p-12px-16px-mb-14px{background:var(--good-bg); border-radius:8px; padding:12px 16px; margin-bottom:14px} .u-c-v-good{color:var(--good)} .u-fs-13-5px-mt-4px{font-size:13.5px; margin-top:4px} .u-bg-v-accent-c-v-brand-dark{background:var(--accent); color:var(--brand-dark)} .u-bg-v-bad-bg-br-8px-p-10px-14px-mb-14px-fs-13-5px{background:var(--bad-bg); border-radius:8px; padding:10px 14px; margin-bottom:14px; font-size:13.5px; color:var(--bad)} .u-w-100-bc-collapse{width:100%; border-collapse:collapse} .u-ta-left-fs-11-5px-tt-uppercase-ls-03em-c-v-muted{text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:5px 4px; border-bottom:2px solid var(--line)} .u-fs-11-5px-tt-uppercase-ls-03em-c-v-muted-p-5px-4px{font-size:11.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--muted); padding:5px 4px; border-bottom:2px solid var(--line); text-align:right} .u-p-0-0-4px-bdb-2px-solid-v-li-mb-4px{padding:0 0 4px; border-bottom:2px solid var(--line); margin-bottom:4px} .u-fs-10-5px-fw-700-tt-uppercase-ls-06em-c-v-brand-dark{font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brand-dark); padding:8px 10px 4px} .u-minw-0{min-width:0} .u-fs-12px-fw-600-ws-nowrap-ov-hidden-to-ellipsis{font-size:12px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .u-fs-10px-c-v-muted-ws-nowrap-ov-hidden-to-ellipsis{font-size:10px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .u-p-0-0-4px{padding:0 0 4px} .u-fs-12-5px{font-size:12.5px} .u-fs-12-5px-ta-center-mt-40px{font-size:12.5px; text-align:center; margin-top:40px} .u-fw-700-mb-12px-c-v-brand-dark{font-weight:700; margin-bottom:12px; color:var(--brand-dark)} .u-fs-13px{font-size:13px} .u-mt-10px-d-grid-gtc-1fr-1fr-gap-8px{margin-top:10px; display:grid; grid-template-columns:1fr 1fr; gap:8px} .u-mt-14px-w-100-fs-12-5px{margin-top:14px; width:100%; font-size:12.5px} .u-mt-8px-w-100-fs-12-5px-p-6px-bd-1px-solid-v-li{margin-top:8px; width:100%; font-size:12.5px; padding:6px; border:1px solid var(--line); border-radius:6px} .u-mb-6px{margin-bottom:6px} .u-fs-11px-mb-10px-p-5px-8px-bg-v-accent-br-6px{font-size:11px; margin-bottom:10px; padding:5px 8px; background:var(--accent); border-radius:6px; color:var(--ink)} .u-c-f97316-fw-600{color:var(--port-out); font-weight:600} .u-c-22c55e-fw-600{color:var(--port-in); font-weight:600} .u-d-flex-gap-8px-mt-14px{display:flex; gap:8px; margin-top:14px} .u-bg-v-card-br-12px-p-20px-maxw-700px-w-95vw{background:var(--card); border-radius:12px; padding:20px; max-width:700px; width:95vw; max-height:80vh; display:flex; flex-direction:column; gap:12px} .u-d-flex-ai-center-jc-space-between{display:flex; align-items:center; justify-content:space-between} .u-fw-700-c-v-brand-dark{font-weight:700; color:var(--brand-dark)} .u-bg-none-bd-none-fs-18px-cur-pointer-c-v-muted{background:none; border:none; font-size:18px; cursor:pointer; color:var(--muted)} .u-flex-1-minh-300px-ff-monospace-fs-12px-p-10px{flex:1; min-height:300px; font-family:monospace; font-size:12px; padding:10px; border:1px solid var(--line); border-radius:6px; resize:vertical; color:var(--ink); overflow-x:auto; white-space:pre} .u-d-flex-gap-8px{display:flex; gap:8px} .u-flex-1-p-8px-fs-13px-fw-700-bg-v-brand{flex:1; padding:8px; font-size:13px; font-weight:700; background:var(--brand); color:#fff; border:none; border-radius:6px; cursor:pointer; font-family:inherit} .u-p-8px-14px-fs-13px-fw-600-bg-v-accent-c-v-brand-dark{padding:8px 14px; font-size:13px; font-weight:600; background:var(--accent); color:var(--brand-dark); border:1px solid var(--line); border-radius:6px; cursor:pointer; font-family:inherit} .u-p-20px{padding:20px} .u-p-20px-c-v-bad{padding:20px; color:var(--bad)} .u-d-flex-jc-space-between-ai-flex-start-gap-12px{display:flex; justify-content:space-between; align-items:flex-start; gap:12px} .u-fw-700-fs-15-5px{font-weight:700; font-size:15.5px} .u-mt-3px{margin-top:3px} .u-d-flex-jc-space-between-ai-center-mb-18px{display:flex; justify-content:space-between; align-items:center; margin-bottom:18px} .u-m-0-fs-18px-fw-700-c-v-brand-dark{margin:0; font-size:18px; font-weight:700; color:var(--brand-dark)} .u-mb-16px-bdc-v-brand{margin-bottom:16px; border-color:var(--brand)} .u-d-grid-gtc-1fr-1fr-gap-12px{display:grid; grid-template-columns:1fr 1fr; gap:12px} .u-d-flex-gap-8px-mt-12px{display:flex; gap:8px; margin-top:12px} .u-mt-4px-c-v-good{margin-top:4px; color:var(--good)} .u-fs-12px-p-5px-12px-bg-v-good-bdc-v-good{font-size:12px; padding:5px 12px; background:var(--good); border-color:var(--good)} .u-mb-16px-d-flex-ai-center-gap-10px{margin-bottom:16px; display:flex; align-items:center; gap:10px} .u-fw-600{font-weight:600} .u-mb-16px{margin-bottom:16px} .u-d-flex-jc-space-between-ai-flex-start{display:flex; justify-content:space-between; align-items:flex-start} .u-fw-700-fs-17px{font-weight:700; font-size:17px} .u-mt-4px{margin-top:4px} .u-d-flex-ai-center-gap-8px-fwrap-wrap-jc-flex-end{display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end} .u-fs-12px-p-5px-12px{font-size:12px; padding:5px 12px} .u-fs-12px-p-5px-10px-c-v-bad-bdc-v-bad{font-size:12px; padding:5px 10px; color:var(--bad); border-color:var(--bad)} .u-fs-12px-p-5px-10px-c-v-good-bdc-v-good{font-size:12px; padding:5px 10px; color:var(--good); border-color:var(--good)} .u-fs-12px-p-5px-10px{font-size:12px; padding:5px 10px} .u-mt-14px-d-flex-gap-8px-ai-center{margin-top:14px; display:flex; gap:8px; align-items:center} .u-flex-1-p-5px-9px-bd-1-5px-solid-v-br-6px-fs-14px{flex:1; padding:5px 9px; border:1.5px solid var(--brand); border-radius:6px; font-size:14px; font-weight:600; outline:none} .u-flex-none-fs-12px-p-5px-10px{flex:none; font-size:12px; padding:5px 10px} .u-flex-1-minw-0{flex:1; min-width:0} .u-fw-600-fs-14-5px-ws-nowrap-ov-hidden-to-ellipsis{font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .u-d-flex-ai-center-gap-6px-mt-6px-fwrap-wrap{display:flex; align-items:center; gap:6px; margin-top:6px; flex-wrap:wrap} .u-flex-none{flex:none} .u-flex-none-bg-v-good-bg-c-v-good{flex:none; background:var(--good-bg); color:var(--good)} .u-flex-none-fs-12px-p-4px-9px{flex:none; font-size:12px; padding:4px 9px} .u-flex-none-fs-12-5px-p-5px-11px{flex:none; font-size:12.5px; padding:5px 11px} .u-d-flex-ai-center-gap-8px{display:flex; align-items:center; gap:8px} .u-d-flex-ai-center-gap-14px{display:flex; align-items:center; gap:14px} .u-d-flex-gap-8px-ai-center-mt-12px{display:flex; gap:8px; align-items:center; margin-top:12px; flex-wrap:wrap} .u-fs-13px-c-v-muted-minw-14px-flex-none{font-size:13px; color:var(--muted); min-width:14px; flex:none} .u-p-8px-0-4px-22px-bdt-1px-solid-v-li-mt-8px{padding:8px 0 4px 22px; border-top:1px solid var(--line); margin-top:8px} .u-d-flex-gap-8px-fwrap-wrap-mt-8px{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px} /* Datum/Start/Slut-raden i addDayRow (PlaneringManager.js) blandar en