/* PhantomPhiber styles — genereret, scoped pr. side (html.pp-host / html.pp-designer) */

/* ===================== HOST / OVERSIGT ===================== */
html.pp-host{ 
            --primary: #0078d4; 
            --bg: #f4f7f6; 
            --card-bg: #fff; 
            --text: #333;
            --border: #dee2e6;
            --stat-bg: #f8f9fa;
            --hover: #e2e2e2;
            --success-bg: #d4edda;
            --success-border: #c3e6cb;
            --success-text: #155724;
        }html.pp-host body.dark-mode{
            --primary: #4da3ff; --bg: #121212; --card-bg: #1e1e1e; --text: #e0e0e0; 
            --border: #333; --stat-bg: #2d2d2d; --hover: #333;
            --success-bg: #1e4620; --success-border: #2b5e2e; --success-text: #d4edda;
        }html.pp-host body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: var(--bg); color: var(--text); padding: 20px; font-size: 14px; margin: 0; }html.pp-host .container{ max-width: 1800px; margin: auto; padding-bottom: 50px; }html.pp-host .card{ background: var(--card-bg); padding: 15px 20px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 15px; border: 1px solid var(--border); }html.pp-host .flex-header{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }html.pp-host .btn{ padding: 6px 12px; cursor: pointer; border: none; border-radius: 4px; font-weight: 600; margin: 0 2px; color: white; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; height: 32px; }html.pp-host .btn-success{ background: #28a745; }html.pp-host .btn-info{ background: var(--primary); }html.pp-host .btn-danger{ background: #dc3545; }html.pp-host .btn-warning{ background: #f39c12; }html.pp-host .btn-secondary{ background: #6c757d; }html.pp-host .btn-dark{ background: #343a40; }html.pp-host .btn:hover{ opacity: 0.9; }html.pp-host .grid{ display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; }html.pp-host .top-grid{ display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 15px; margin-bottom: 15px; }html.pp-host .stat-box{ 
            background: var(--stat-bg); 
            padding: 10px 15px 5px 15px; 
            border-radius: 8px; 
            border: 1px solid var(--border); 
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 75px; 
            box-sizing: border-box;
            position: relative;
        }html.pp-host .stat-box.completed{
            background-color: var(--success-bg);
            border-color: var(--success-border);
        }html.pp-host .stat-box.check-box-container{ align-items: flex-start; justify-content: center; gap: 5px; }html.pp-host .corner-check{
            position: absolute;
            top: 5px;
            right: 5px;
            font-size: 10px;
            display: flex;
            align-items: center;
            gap: 3px;
            z-index: 10;
            background: rgba(255,255,255,0.7);
            padding: 2px 4px;
            border-radius: 4px;
        }html.pp-host .corner-check input{ width: auto !important; margin: 0 !important; cursor: pointer; }html.pp-host .lf-box{ cursor: pointer; position: relative; }html.pp-host .lf-box:hover{ transform: scale(1.02); border-color: var(--primary); }html.pp-host .lf-box.drag-over{ background: rgba(0,120,212,0.1); border: 2px dashed var(--primary); transform: scale(1.05); z-index: 1001; }html.pp-host .lf-title{ cursor: text; text-decoration: underline dotted; }html.pp-host .sticky-section{ position: sticky; top: 10px; z-index: 100; background: var(--bg); padding-bottom: 5px; margin-bottom: 10px; }html.pp-host input, html.pp-host select{ width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid #ccc; background: var(--card-bg); color: var(--text); box-sizing: border-box; }html.pp-host input[type="range"]{ width: 100%; height: 10px; cursor: pointer; margin: 0; padding: 0; display: block; margin-top: auto; }html.pp-host .addr-input{ width: 95%; border: 1px solid var(--border); padding: 4px; border-radius: 3px; font-size: 11px; background: var(--card-bg); color: var(--text); }html.pp-host table{ width: 100%; border-collapse: collapse; margin-top: 10px; }html.pp-host th, html.pp-host td{ border: 1px solid var(--border); padding: 6px; text-align: left; font-size: 12px; vertical-align: top; }html.pp-host th{ background: var(--stat-bg); position: sticky; top: 0; z-index: 10; user-select: none; cursor: pointer; color: var(--text); }html.pp-host th:hover{ background: var(--hover); }html.pp-host .sort-arrow{ font-size: 10px; margin-left: 3px; color: #888; }html.pp-host .dawa-sub{ display: block; font-size: 10px; color: #999; margin-top: 3px; line-height: 1; }html.pp-host .city-td{ position: relative; cursor: help; text-decoration: underline dotted #ccc; }html.pp-host .city-td:hover::after{ content: "Postnr: " attr(data-postal); position: absolute; left: 0; bottom: 100%; background: #333; color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; white-space: nowrap; z-index: 20; pointer-events: none; }html.pp-host .todo-list{ list-style: none; padding: 0; margin-top: 10px; }html.pp-host .todo-item{ display: flex; align-items: flex-start; background: var(--card-bg); padding: 8px 12px; margin-bottom: 6px; border-radius: 6px; border: 1px solid var(--border); gap: 12px; }html.pp-host .todo-item input[type="checkbox"]{ width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; cursor: pointer; }html.pp-host .todo-item span{ flex-grow: 1; font-size: 13px; line-height: 1.4; word-break: break-word; }html.pp-host .todo-done span{ text-decoration: line-through; opacity: 0.6; }html.pp-host .modal{ display:none; position:fixed; z-index:2000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.6); overflow-y: auto; }html.pp-host .modal-content{ background:var(--card-bg); color:var(--text); margin:2% auto; padding:25px; border-radius:12px; width:80%; max-width: 1000px; box-shadow: 0 5px 30px rgba(0,0,0,0.5); }html.pp-host .phase-section{ border-left: 4px solid var(--primary); padding-left: 15px; margin-bottom: 25px; background: var(--stat-bg); padding: 15px; border-radius: 0 8px 8px 0; }html.pp-host .phase-title{ font-weight: bold; color: var(--primary); font-size: 16px; margin-bottom: 10px; display: flex; align-items: center; gap: 10px; }html.pp-host .date-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 10px; }html.pp-host .checklist-item{ display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }html.pp-host .checklist-item input{ width: auto; transform: scale(1.2); margin: 0; }html.pp-host .tab-menu{ display: flex; border-bottom: 2px solid var(--border); margin-bottom: 15px; }html.pp-host .tab-btn{ background: none; border: none; padding: 10px 20px; font-size: 14px; font-weight: bold; color: #888; cursor: pointer; transition: 0.2s; }html.pp-host .tab-btn.active{ color: var(--primary); border-bottom: 3px solid var(--primary); }html.pp-host .tab-btn:hover{ color: var(--text); }html.pp-host .tab-content{ display: none; }html.pp-host .tab-content.active{ display: block; }html.pp-host #map{ height: 600px; width: 100%; border-radius: 8px; z-index: 1; }html.pp-host .gantt-chart{ overflow-x: auto; margin-top: 20px; border: 1px solid var(--border); border-radius: 8px; padding: 10px; background: var(--stat-bg); min-height: 200px; position: relative; }html.pp-host .gantt-header{ display: flex; height: 30px; border-bottom: 1px solid #ccc; background: rgba(0,0,0,0.05); position: relative; min-width: 100%; }html.pp-host .gantt-month{ border-right: 1px solid #ccc; font-size: 11px; text-align: center; line-height: 30px; position: absolute; height: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }html.pp-host .gantt-bars-container{ position: relative; min-height: 200px; }html.pp-host .gantt-row{ height: 40px; border-bottom: 1px solid var(--border); position: relative; margin-top: 10px; }html.pp-host .gantt-bar{ position: absolute; height: 25px; background: var(--primary); top: 7px; border-radius: 4px; color: white; font-size: 11px; display: flex; align-items: center; padding-left: 10px; white-space: nowrap; overflow: hidden; box-shadow: 0 2px 4px rgba(0,0,0,0.2); opacity: 0.9; }html.pp-host .gantt-label{ position: absolute; left: 10px; top: -18px; font-size: 11px; font-weight: bold; color: var(--text); z-index: 5; }html.pp-host .project-selector{ background: #e3f2fd; padding: 10px; border-radius: 8px; border: 1px solid #b3d7ff; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; color: #333; }html.pp-host body.dark-mode .project-selector{ background: #2c3e50; border-color: #444; color: white; }html.pp-host .floors{ margin-top: 8px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }html.pp-host .floor-input{ display: flex; flex-direction: column; background: var(--stat-bg); padding: 8px; border-radius: 8px; border: 1px solid var(--border); }html.pp-host .col-badge{ display: inline-flex; align-items: center; background: var(--stat-bg); padding: 2px 8px; border-radius: 12px; margin-right: 5px; font-size: 11px; border: 1px solid var(--border); }html.pp-host .col-badge .delete-x{ color: #dc3545; font-weight: bold; margin-left: 6px; cursor: pointer; }

        @media print {html.pp-host .no-print{ display: none !important; }html.pp-host .card{ box-shadow: none; border: 1px solid #ddd; }html.pp-host #printHeaderInfo{ display: block !important; }html.pp-host .sticky-section{ position: relative; top: 0; }html.pp-host body{ background: white; color: black; } }html.pp-host #printHeaderInfo{ display: none; }
    

/* ===================== DESIGNER ===================== */
html.pp-designer{ --accent:#0d9488; --accent-dk:#0f766e; --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --panel:#ffffff; }html.pp-designer *{ box-sizing:border-box; }html.pp-designer body{ margin:0; overflow:hidden; font-family:"Manrope",system-ui,sans-serif; color:var(--ink); background:#eef2f5; user-select:none; -webkit-user-select:none; }html.pp-designer #app{ position:relative; width:100%; height:100vh; display:flex; overflow:hidden; }html.pp-designer #sidebar{ width:368px; min-width:368px; background:var(--panel); border-right:1px solid var(--line); z-index:20; display:flex; flex-direction:column; overflow-y:auto; }html.pp-designer #sidebar::-webkit-scrollbar{ width:8px; }html.pp-designer #sidebar::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; }html.pp-designer .pad{ padding:14px 16px; }html.pp-designer .sec-h{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 8px; }html.pp-designer #stage{ position:relative; flex-grow:1; overflow:hidden; background-color:#eef2f5; background-image:radial-gradient(#cdd5de 1px, transparent 1px); background-size:22px 22px; }html.pp-designer #map{ position:absolute; inset:0; z-index:1; display:none; }html.pp-designer #map-canvas{ display:block; background:transparent; outline:none; cursor:crosshair; position:relative; z-index:2; user-select:none; -webkit-user-select:none; touch-action:none; }html.pp-designer body.geo #stage{ background-image:none; }html.pp-designer .leaflet-container{ background:#dfe6ea; font-family:inherit; }html.pp-designer .btn{ font-size:12px; font-weight:700; border-radius:9px; padding:9px 8px; border:1.5px solid var(--line); background:#f8fafc; color:#334155; cursor:pointer; transition:.12s; display:flex; align-items:center; justify-content:center; gap:6px; line-height:1; }html.pp-designer .btn:hover{ background:#f1f5f9; }html.pp-designer .btn.active{ border-color:var(--accent); background:#ecfdf5; color:var(--accent-dk); box-shadow:0 0 0 3px rgba(13,148,136,.12); }html.pp-designer .btn-accent{ background:var(--accent); color:#fff; border-color:var(--accent); }html.pp-designer .btn-accent:hover{ background:var(--accent-dk); }html.pp-designer .btn-danger{ background:#fff1f2; color:#be123c; border-color:#fecdd3; }html.pp-designer .btn-danger:hover{ background:#ffe4e6; }html.pp-designer .field label{ display:block; font-size:11px; font-weight:700; color:#475569; margin-bottom:4px; }html.pp-designer .field input, html.pp-designer .field select, html.pp-designer .field textarea{ width:100%; font-size:13px; padding:7px 9px; border:1.5px solid var(--line); border-radius:8px; background:#fff; font-family:inherit; }html.pp-designer .field input:focus, html.pp-designer .field select:focus, html.pp-designer .field textarea:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(13,148,136,.12); }html.pp-designer .field{ margin-bottom:12px; }html.pp-designer .hint{ font-size:10.5px; color:var(--muted); margin-top:3px; line-height:1.35; }html.pp-designer .bom-row{ display:flex; justify-content:space-between; align-items:center; font-family:"JetBrains Mono",monospace; font-size:12px; padding:2px 0; }html.pp-designer .bom-row strong{ font-weight:700; }html.pp-designer .chip{ display:inline-flex; align-items:center; gap:7px; }html.pp-designer .pal-group{ font-size:10px; font-weight:700; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin:10px 0 5px; }html.pp-designer .pal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }html.pp-designer .pipe-btn{ position:relative; justify-content:flex-start; padding:8px 9px; font-size:11.5px; }html.pp-designer .pipe-btn .del{ position:absolute; top:-6px; right:-6px; width:17px; height:17px; border-radius:50%; background:#fee2e2; color:#b91c1c; border:1px solid #fecaca; font-size:11px; line-height:15px; text-align:center; display:none; }html.pp-designer .pipe-btn:hover .del{ display:block; }html.pp-designer .float{ position:absolute; z-index:15; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:12px; box-shadow:0 6px 20px rgba(15,23,42,.08); }html.pp-designer #zoomctl{ bottom:16px; left:16px; display:flex; align-items:center; padding:5px; gap:3px; }html.pp-designer #zoomctl button{ width:34px; height:34px; border:0; background:transparent; border-radius:8px; font-size:16px; font-weight:800; color:#334155; cursor:pointer; }html.pp-designer #zoomctl button:hover{ background:#f1f5f9; }html.pp-designer #zoomctl .lvl{ font-family:"JetBrains Mono",monospace; font-size:12px; font-weight:700; min-width:48px; text-align:center; color:#475569; }html.pp-designer #legend{ bottom:16px; right:16px; padding:11px 13px; font-size:11px; max-width:230px; max-height:46vh; overflow:auto; }html.pp-designer #legend .lg{ display:flex; align-items:center; gap:8px; margin:4px 0; }html.pp-designer #status{ top:16px; left:50%; transform:translateX(-50%); padding:8px 16px; font-size:12px; font-weight:700; color:var(--accent-dk); opacity:0; transition:opacity .25s; pointer-events:none; z-index:100001; }html.pp-designer #status.show{ opacity:1; }html.pp-designer #tiphint{ top:16px; right:16px; padding:9px 12px; font-size:11px; color:var(--muted); max-width:230px; }html.pp-designer kbd{ font-family:"JetBrains Mono",monospace; background:#f1f5f9; border:1px solid #e2e8f0; border-bottom-width:2px; border-radius:5px; padding:1px 5px; font-size:10px; color:#334155; }html.pp-designer .warn{ font-size:11px; background:#fffbeb; border:1px solid #fde68a; color:#92400e; border-radius:8px; padding:7px 9px; margin-top:6px; line-height:1.4; }html.pp-designer .warn .fixbtn{ display:inline-block; margin-left:6px; margin-top:3px; font-size:10.5px; padding:2px 8px; border-radius:6px; border:1px solid #f59e0b; background:#fef3c7; color:#92400e; cursor:pointer; font-weight:700; }html.pp-designer .warn .fixbtn:hover{ background:#fde68a; }html.pp-designer .ai-msg{ margin:6px 0; line-height:1.45; }html.pp-designer .ai-user{ color:#0f172a; }html.pp-designer .ai-assistant{ color:#0f172a; background:#f1f5f9; padding:6px 8px; border-radius:8px; }html.pp-designer .ai-error{ color:#b91c1c; background:#fef2f2; padding:6px 8px; border-radius:8px; }html.pp-designer .ai-card{ border:1px solid #f59e0b; background:#fffbeb; border-radius:8px; padding:7px 9px; margin:6px 0; }html.pp-designer .ai-card-txt{ margin-bottom:5px; }html.pp-designer .ai-card-btns .btn{ padding:2px 10px; }html.pp-designer .ai-ok{ border-color:#16a34a; }html.pp-designer .ai-approved{ color:#16a34a; font-weight:700; }html.pp-designer .ai-rejected{ color:#b91c1c; font-weight:700; }html.pp-designer .cdd-tools{ margin-left:auto; display:flex; gap:2px; }html.pp-designer .cdd-tools button{ border:1px solid #cbd5e1; background:#fff; border-radius:6px; padding:0 5px; font-size:11px; cursor:pointer; line-height:18px; }html.pp-designer .cdd-tools button:hover{ background:#eef2ff; }html.pp-designer .cdd-del:hover{ background:#fee2e2 !important; }html.pp-designer .ok{ font-size:11px; color:#15803d; }html.pp-designer .modal-bg{ position:fixed; inset:0; background:rgba(15,23,42,.45); z-index:50; display:none; align-items:center; justify-content:center; }html.pp-designer #dkModal{ z-index:100000; }html.pp-designer .modal-bg.show{ display:flex; }html.pp-designer .modal{ background:#fff; width:420px; max-width:92vw; max-height:88vh; overflow:auto; border-radius:16px; box-shadow:0 24px 60px rgba(15,23,42,.3); }html.pp-designer .modal.wide{ width:1100px; }html.pp-designer #addrTableWrap{ overflow:auto; max-height:52vh; border:1px solid var(--line); border-radius:10px; }html.pp-designer table.addr{ border-collapse:collapse; width:100%; font-size:12px; }html.pp-designer table.addr th{ position:sticky; top:0; background:#f1f5f9; text-align:left; padding:7px 8px; border-bottom:2px solid #cbd5e1; white-space:nowrap; font-weight:700; z-index:1; }html.pp-designer table.addr td{ padding:4px 8px; border-bottom:1px solid #eef2f6; white-space:nowrap; }html.pp-designer table.addr tr:hover td{ background:#f8fafc; }html.pp-designer table.addr input[type=text], html.pp-designer table.addr select{ font-size:12px; padding:3px 5px; border:1px solid var(--line); border-radius:6px; }html.pp-designer table.addr input.gnxs-input{ font-family:'JetBrains Mono',monospace; width:120px; }html.pp-designer .kat-A{ color:#15803d; font-weight:700; }html.pp-designer .kat-B{ color:#b45309; font-weight:700; }html.pp-designer .kat-C{ color:#dc2626; font-weight:700; }html.pp-designer .modal-h{ padding:16px 18px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; }html.pp-designer .modal-h h3{ margin:0; font-size:15px; font-weight:800; }html.pp-designer .modal-b{ padding:16px 18px; }html.pp-designer .modal-f{ padding:14px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end; }html.pp-designer .x{ cursor:pointer; border:0; background:transparent; font-size:20px; color:#94a3b8; line-height:1; }html.pp-designer .pattern-pick{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px; }html.pp-designer .pattern-pick label{ border:1.5px solid var(--line); border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; font-size:11px; font-weight:700; color:#475569; }html.pp-designer .pattern-pick input{ display:none; }html.pp-designer .pattern-pick label:has(input:checked){ border-color:var(--accent); background:#ecfdf5; color:var(--accent-dk); box-shadow:0 0 0 3px rgba(13,148,136,.12); }html.pp-designer .swatches{ display:flex; flex-wrap:wrap; gap:6px; }html.pp-designer .swatches button{ width:26px; height:26px; border-radius:7px; border:2px solid #fff; box-shadow:0 0 0 1px var(--line); cursor:pointer; }html.pp-designer .fiber-strip{ display:flex; flex-wrap:wrap; gap:5px; }html.pp-designer .fiber-chip{ display:flex; align-items:center; gap:5px; font-size:10.5px; font-family:"JetBrains Mono",monospace; background:#f8fafc; border:1px solid var(--line); border-radius:6px; padding:2px 6px; }html.pp-designer .fiber-dot{ width:12px; height:12px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.15); }