:root{
  --blue:#2563EB;--blue-h:#1D4ED8;--blue-pale:#EFF4FF;--blue-mid:#BFCFFD;
  --navy:#1E2D4E;--navy3:#16213A;
  --g100:#F4F6FA;--g200:#E8EDF4;--g300:#CBD2DF;--g500:#6B7A99;--g700:#374259;
  --white:#fff;--ok:#16A34A;--warn:#D97706;--err:#DC2626;
  --sb:230px;--tb:54px;--r:10px;
  --sh:0 1px 3px rgba(30,45,78,.08),0 1px 2px rgba(30,45,78,.04);
  --shm:0 4px 18px rgba(30,45,78,.13);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Segoe UI',system-ui,-apple-system,sans-serif;font-size:14px;color:var(--navy);background:var(--g100)}
button,input,select,textarea{font-family:inherit}

/* LOGIN */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#EFF4FF,#E8EDF4 60%,#F4F6FA)}
.lcard{background:#fff;border-radius:16px;padding:44px 40px;width:400px;max-width:95vw;box-shadow:0 8px 40px rgba(30,45,78,.12)}
.llogo{display:flex;align-items:center;gap:10px;margin-bottom:24px}
.llogo-text{font-size:22px;font-weight:700;color:var(--navy)}
.llogo-text span{color:var(--blue)}
.ltitle{font-size:20px;font-weight:700;margin-bottom:3px}
.lsub{font-size:13px;color:var(--g500);margin-bottom:20px}
.role-tabs{display:flex;background:var(--g100);border-radius:8px;padding:3px;gap:3px;margin-bottom:18px}
.rtab{flex:1;padding:7px;border-radius:6px;font-size:13px;font-weight:500;cursor:pointer;color:var(--g500);border:none;background:transparent;transition:all .12s}
.rtab.active{background:#fff;color:var(--navy);box-shadow:var(--sh)}
.fg{margin-bottom:14px}
.fl{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g700);margin-bottom:5px}
.fi{width:100%;padding:9px 12px;border:1.5px solid var(--g200);border-radius:7px;font-size:13px;color:var(--navy);outline:none;transition:border-color .15s;background:#fff}
.fi:focus{border-color:var(--blue)}
.btn-login{width:100%;padding:11px;background:var(--blue);color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:700;cursor:pointer;transition:background .12s;margin-top:4px}
.btn-login:hover{background:var(--blue-h)}
.lhint{text-align:center;margin-top:10px;font-size:11px;color:var(--g500)}

/* APP */
/* Dold tills doLogin()/startAdmin() i main.js aktivt sätter display:flex vid
   lyckad inloggning. #app satt tidigare display:flex direkt (ingen
   default display:none), så #login-screen (min-height:100vh) + #app
   (height:100vh) staplades på varandra i normalt dokumentflöde och gjorde
   HELA sidan skrollbar redan på inloggningsskärmen — man kunde skrolla ner
   och se det tomma, oinloggade app-skalet (sidomeny m.m.) bakom
   inloggningskortet. dt-landing-active-klassen (se landing.css) döljer
   visserligen både #login-screen och #app medan startsidans intro visas,
   men den klassen tas bort så fort man klickar "Logga in" ELLER om
   introt hoppas över helt (t.ex. #login i URL:en, eller redan sedd denna
   session) — i båda fallen återgick #app annars till sitt eget
   display:flex innan någon faktiskt loggat in.*/
#app{display:none;height:100vh;overflow:hidden}
.sidebar{width:var(--sb);background:var(--navy3);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;z-index:10}
.sb-logo{padding:16px;border-bottom:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:9px}
.sb-logo-text{font-size:17px;font-weight:700;color:#fff;letter-spacing:-.3px}
.sb-logo-text span{color:#60A5FA}
nav#sidebar-nav{padding:8px 0;flex:1}
.nav-section{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.25);padding:12px 16px 4px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;margin:1px 8px;border-radius:7px;color:rgba(255,255,255,.55);cursor:pointer;font-size:13px;border:none;background:transparent;width:calc(100% - 16px);text-align:left;transition:all .12s}
.nav-item:hover{background:rgba(255,255,255,.07);color:rgba(255,255,255,.9)}
.nav-item.active{background:rgba(37,99,235,.35);color:#fff;font-weight:500}
.nav-item svg{flex-shrink:0;opacity:.8}
.nav-item.active svg{opacity:1}
.nav-badge{margin-left:auto;background:var(--err);color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;line-height:1.4}
.nav-badge.blue{background:var(--blue)}
.sb-footer{padding:12px;border-top:1px solid rgba(255,255,255,.07);margin-top:auto}
.user-chip{display:flex;align-items:center;gap:8px;padding:8px;border-radius:8px}
.uav{width:30px;height:30px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0}
.uname{font-size:12px;font-weight:500;color:#fff}
.urole{font-size:10px;color:rgba(255,255,255,.4)}
.logout-btn{margin-left:auto;background:transparent;border:none;cursor:pointer;color:rgba(255,255,255,.35);padding:4px;border-radius:4px;display:flex}
.logout-btn:hover{color:rgba(255,255,255,.7)}

/* TOPBAR */
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.topbar{height:var(--tb);background:#fff;border-bottom:1px solid var(--g200);display:flex;align-items:center;padding:0 20px;gap:10px;flex-shrink:0}
.tb-title{font-size:15px;font-weight:600;color:var(--navy);flex:1}
.tb-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.content{flex:1;overflow:auto;display:flex;flex-direction:column}
.sidebar-toggle-btn{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:7px;border:1px solid var(--g200);background:#fff;color:var(--navy);cursor:pointer;flex-shrink:0}
.sidebar-toggle-btn:hover{background:var(--g100)}
.sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(22,33,58,.45);z-index:19}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:#fff;color:var(--navy);transition:all .12s;text-decoration:none;white-space:nowrap}
.btn:hover{background:var(--g100)}
.btn-primary{background:var(--blue);color:#fff;border-color:var(--blue)}
.btn-primary:hover{background:var(--blue-h)}
.btn-sm{padding:5px 10px;font-size:12px}
.btn-danger{background:var(--err);color:#fff;border-color:var(--err)}
.btn-danger:hover{background:#B91C1C}
.btn-block{width:100%;justify-content:center}

/* CARDS / PAGE */
.page{padding:24px;max-width:1100px}
.page-hd{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.page-title{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.3px;margin-bottom:2px}
.page-sub{font-size:13px;color:var(--g500)}
.card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:14px}
.card-head{padding:13px 16px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.card-title{font-size:13px;font-weight:600;color:var(--navy)}
.card-body{padding:14px 16px}

/* STAT GRID */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}
.stat{background:#fff;border:1px solid var(--g200);border-radius:var(--r);padding:16px;box-shadow:var(--sh)}
.stat-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g500);margin-bottom:6px}
.stat-val{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.stat-sub{font-size:11px;color:var(--ok);margin-top:3px}

/* TABLE */
.tbl-wrap{overflow-x:auto}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{text-align:left;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g500);padding:9px 14px;border-bottom:1px solid var(--g200)}
table.tbl td{padding:10px 14px;border-bottom:1px solid var(--g100);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tr:hover td{background:var(--g100)}

/* BADGES */
.badge{display:inline-flex;align-items:center;padding:2px 8px;border-radius:20px;font-size:10px;font-weight:700}
.badge-blue{background:var(--blue-pale);color:#0C447C}
.badge-green{background:#F0FDF4;color:#15803D}
.badge-amber{background:#FFFBEB;color:#B45309}
.badge-red{background:#FEF2F2;color:#B91C1C}
.badge-gray{background:var(--g100);color:var(--g500)}

/* MAP */
.map-layout{display:flex;flex:1;overflow:hidden;height:100%}
.leaflet-map{flex:1;z-index:1;min-height:300px}
.map-side{width:288px;background:#fff;border-left:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.map-side-head{padding:14px 16px;border-bottom:1px solid var(--g200);font-size:13px;font-weight:600;color:var(--navy);display:flex;align-items:center;justify-content:space-between}
.map-side-body{flex:1;overflow-y:auto;padding:10px}
.prop-card{border:1.5px solid var(--g200);border-radius:8px;padding:11px 13px;margin-bottom:8px;cursor:pointer;transition:all .12s}
.prop-card:hover{border-color:var(--blue-mid);background:var(--blue-pale)}
.prop-card.active{border-color:var(--blue);background:var(--blue-pale)}
.pc-name{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.pc-addr{font-size:11px;color:var(--g500);margin-bottom:7px}
.pc-tags{display:flex;gap:5px;flex-wrap:wrap}
.pc-tag{font-size:10px;font-weight:600;padding:1px 7px;border-radius:10px;border:1px solid var(--g200);color:var(--g500);background:#fff}
.pc-tag.bim{background:var(--blue-pale);border-color:var(--blue-mid);color:var(--blue)}
.pc-tag.issue{background:#FEF2F2;border-color:#FCA5A5;color:var(--err)}
.map-stat-row{padding:12px 14px;border-top:1px solid var(--g200);display:grid;grid-template-columns:1fr 1fr;gap:8px}
.map-stat{font-size:12px;color:var(--g500)}
.map-stat b{display:block;font-size:16px;font-weight:700;color:var(--navy)}

/* POPUP */
.leaflet-popup-content-wrapper{border-radius:10px;box-shadow:var(--shm);border:1px solid var(--g200)}
.leaflet-popup-content{margin:12px 14px;font-size:13px}
.pop-title{font-weight:700;margin-bottom:3px}
.pop-sub{font-size:11px;color:var(--g500);margin-bottom:9px}

/* 3D VIEWER */
.viewer-layout{display:flex;flex:1;overflow:hidden;height:100%}
.canvas-wrap{flex:1;position:relative;background:var(--navy3);min-width:0}
canvas{display:block;width:100%!important;height:100%!important;outline:none}
.drop-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:2}
.drop-hint p{font-size:14px;font-weight:600;color:rgba(255,255,255,.45);margin-top:12px}
.drop-hint small{font-size:12px;color:rgba(255,255,255,.25);margin-top:4px}
.vtoolbar{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:4px;z-index:10}
.vtool{width:34px;height:34px;border-radius:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.7);backdrop-filter:blur(6px);transition:all .12s}
.vtool:hover{background:rgba(255,255,255,.2);color:#fff}
.vtool.on{background:rgba(37,99,235,.6);border-color:#60A5FA;color:#fff}
.vbar{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;z-index:10;pointer-events:none}
.vchip{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);border-radius:5px;padding:4px 10px;color:rgba(255,255,255,.65);font-size:11px;font-family:monospace;backdrop-filter:blur(4px)}
.loading-ov{position:absolute;inset:0;background:rgba(22,33,58,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;backdrop-filter:blur(4px)}
.spinner{width:36px;height:36px;border:3px solid rgba(37,99,235,.3);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-ov p{color:#fff;font-size:14px;font-weight:600}
.loading-ov small{color:rgba(255,255,255,.4);font-size:12px;margin-top:3px}

/* RIGHT PANEL */
.rpanel{width:272px;background:#fff;border-left:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.rp-tabs{display:flex;border-bottom:1px solid var(--g200);flex-shrink:0}
.rp-tab{flex:1;padding:10px 2px;text-align:center;font-size:10px;font-weight:700;cursor:pointer;color:var(--g500);border:none;border-bottom:2px solid transparent;background:transparent;letter-spacing:.05em;text-transform:uppercase;transition:all .12s}
.rp-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.rp-body{display:none;flex:1;overflow-y:auto;padding:14px}
.rp-body.active{display:block}
.prop-empty{color:var(--g500);font-size:12px;text-align:center;padding:28px 8px;line-height:1.7}
.prop-group{margin-bottom:12px}
.prop-gtitle{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g500);border-bottom:1px solid var(--g200);padding-bottom:4px;margin-bottom:6px}
.prop-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--g100);font-size:12px;gap:8px}
.prop-row:last-child{border-bottom:none}
.prop-k{color:var(--g500);flex-shrink:0}
.prop-v{font-weight:500;text-align:right;word-break:break-all}
.filter-item{display:flex;align-items:center;justify-content:space-between;padding:7px 8px;border-radius:6px;cursor:pointer;margin-bottom:2px;transition:background .1s}
.filter-item:hover{background:var(--g100)}
.filter-item.off{opacity:.45}
.fi-left{display:flex;align-items:center;gap:8px;font-size:12px}
.fi-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0}
.fi-count{font-size:11px;font-weight:600;background:var(--g100);color:var(--g500);padding:1px 7px;border-radius:10px}
.info-box{background:var(--g100);border-radius:8px;padding:11px;font-size:12px;line-height:1.6;color:var(--g700);margin-bottom:12px}
.mresult{background:var(--blue-pale);border:1px solid var(--blue-mid);border-radius:8px;padding:12px;margin-bottom:10px;display:none}
.mnum{font-size:26px;font-weight:700;color:var(--blue);letter-spacing:-.5px}
.upload-zone{border:2px dashed var(--g300);border-radius:10px;padding:20px 12px;text-align:center;cursor:pointer;color:var(--g500);font-size:12px;margin-bottom:10px;transition:all .15s}
.upload-zone:hover{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.photo-entry{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--g100);cursor:pointer}
.photo-entry img{width:42px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--g200);flex-shrink:0}

/* ÄRENDEN */
.issue-list{}
.issue-item{display:flex;align-items:flex-start;gap:10px;padding:11px 0;border-bottom:1px solid var(--g100);cursor:pointer;transition:background .1s}
.issue-item:last-child{border-bottom:none}
.issue-item:hover{background:var(--g100);margin:0 -16px;padding:11px 16px}
.idot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.idot.red{background:var(--err)}
.idot.amber{background:var(--warn)}
.idot.green{background:var(--ok)}
.idot.blue{background:var(--blue)}
.ititle{font-size:13px;font-weight:500;color:var(--navy)}
.isub{font-size:11px;color:var(--g500);margin-top:2px}
.issue-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}

/* ÄRENDEDETALJ */
.adetail-header{background:var(--navy);color:#fff;padding:20px 24px}
.adetail-title{font-size:18px;font-weight:700;margin-bottom:4px}
.adetail-sub{font-size:13px;opacity:.6}
.adetail-body{padding:20px 24px}
.adetail-section{margin-bottom:20px}
.adetail-section-title{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--g500);margin-bottom:10px;border-bottom:1px solid var(--g200);padding-bottom:5px}
.timeline-item{display:flex;gap:12px;padding-bottom:14px;position:relative}
.timeline-item::before{content:'';position:absolute;left:13px;top:28px;width:1px;bottom:0;background:var(--g200)}
.timeline-item:last-child::before{display:none}
.tl-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;font-size:11px}
.tl-dot.blue{background:var(--blue-pale);color:var(--blue)}
.tl-dot.green{background:#F0FDF4;color:var(--ok)}
.tl-dot.amber{background:#FFFBEB;color:var(--warn)}
.tl-text{font-size:13px;font-weight:500;color:var(--navy)}
.tl-sub{font-size:11px;color:var(--g500);margin-top:2px}
.sign-box{border:2px solid var(--g200);border-radius:10px;padding:20px;text-align:center;margin-top:16px}
.sign-name-input{width:100%;padding:10px 14px;border:1.5px solid var(--g200);border-radius:8px;font-size:15px;font-weight:600;text-align:center;outline:none;margin:10px 0}
.sign-name-input:focus{border-color:var(--blue)}

/* SIGNERING PUBLIC */
#sign-screen{min-height:100vh;background:var(--g100);display:flex;align-items:center;justify-content:center;padding:20px}
.sign-wrap{background:#fff;border-radius:16px;padding:32px;width:520px;max-width:100%;box-shadow:var(--shm)}
.sign-logo{display:flex;align-items:center;gap:9px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--g200)}
.sign-field{margin-bottom:14px}
.sign-result{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:10px;padding:20px;text-align:center}
.sign-result-icon{font-size:32px;margin-bottom:8px}
.sign-result-title{font-size:16px;font-weight:700;color:#15803D;margin-bottom:4px}
.sign-result-sub{font-size:13px;color:#166534}

/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(30,45,78,.45);z-index:500;align-items:center;justify-content:center;padding:20px}
.modal-overlay.open{display:flex}
.modal{background:#fff;border-radius:14px;width:520px;max-width:100%;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(30,45,78,.2)}
.modal-head{padding:18px 22px 14px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:#fff;z-index:1}
.modal-head span{font-size:15px;font-weight:700;color:var(--navy)}
.modal-x{width:26px;height:26px;border-radius:6px;border:none;background:var(--g100);color:var(--g500);cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center}
.modal-x:hover{background:var(--g200)}
#modal-body{padding:20px 22px 22px}

/* FORM */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--g700);margin-bottom:5px}
.form-input{width:100%;padding:9px 12px;border:1.5px solid var(--g200);border-radius:7px;font-size:13px;color:var(--navy);outline:none;resize:none;transition:border-color .15s;background:#fff}
.form-input:focus{border-color:var(--blue)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--g200)}

/* KOSTNADSRAPPORT */
.cost-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.cost-card{background:var(--g100);border-radius:8px;padding:14px;text-align:center}
.cost-val{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.cost-label{font-size:11px;color:var(--g500);margin-top:3px}

/* TOAST */
.toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:9px;font-size:13px;font-weight:500;box-shadow:var(--shm);z-index:999;transform:translateY(60px);opacity:0;transition:all .2s;max-width:300px;pointer-events:none}
.toast.show{transform:translateY(0);opacity:1}

/* DOCS */
.doc-item{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--g100);cursor:pointer}
.doc-item:last-child{border-bottom:none}
.doc-icon{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:800;flex-shrink:0}
.doc-icon.ifc{background:#F0FDF4;color:#15803D}
.doc-icon.dwg{background:var(--blue-pale);color:var(--blue)}
.doc-icon.pdf{background:#FEF2F2;color:#B91C1C}

/* RESPONSIVE */
@media(max-width:768px){
  :root{--sb:0px;--tb:52px}
  /* Sidebar becomes an off-canvas drawer instead of just vanishing — it's
     the only way to reach any nav item (Ärenden, Dokument, Fastigheter…),
     so it needs a way back in, not just a smaller layout. */
  .sidebar{display:flex;position:fixed;top:0;left:0;width:260px;max-width:82vw;height:100vh;transform:translateX(-100%);transition:transform .2s ease;z-index:20;box-shadow:var(--shm)}
  .sidebar.open{transform:translateX(0)}
  .sidebar-toggle-btn{display:flex}
  .sidebar-backdrop.show{display:block}
  .stat-row{grid-template-columns:1fr 1fr}
  .map-side,.rpanel{width:100%;border-left:none;border-top:1px solid var(--g200);max-height:250px}
  .map-layout,.viewer-layout{flex-direction:column}
  .form-row{grid-template-columns:1fr}
  .cost-summary{grid-template-columns:1fr}
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--g300);border-radius:2px}

/* ══ FLOOR PLAN ══ */
.split-layout{display:flex;flex:1;overflow:hidden;height:100%}
.fp-panel{width:42%;border-right:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;background:#fff;min-width:320px}
.viewer-panel-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

.fp-header{padding:10px 14px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#fff}
.fp-header-title{font-size:12px;font-weight:600;color:var(--navy)}
.fp-header-sub{font-size:10px;color:var(--g500);margin-top:1px}

.fp-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden}
.fp-floor-tabs{display:flex;gap:3px;padding:8px 10px;border-bottom:1px solid var(--g200);flex-shrink:0;overflow-x:auto}
.fp-tab{padding:5px 12px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:#fff;color:var(--g500);transition:all .12s;white-space:nowrap;font-family:inherit}
.fp-tab:hover{background:var(--g100);color:var(--navy)}
.fp-tab.active{background:var(--blue);color:#fff;border-color:var(--blue)}

.fp-canvas-wrap{flex:1;position:relative;overflow:hidden;padding:10px}
.fp-canvas{width:100%;height:100%;position:relative;border:1px solid var(--g200);border-radius:8px;overflow:hidden;background:#FAFBFC}
.fp-uploaded{width:100%;height:100%;position:relative;border:1px solid var(--g200);border-radius:8px;overflow:hidden}
.fp-upload-overlay{position:absolute;bottom:0;left:0;right:0;padding:4px 8px;background:rgba(0,0,0,.4);text-align:center}

.fp-room{position:absolute;border-radius:3px;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;overflow:hidden}
.fp-room:hover{filter:brightness(.95);z-index:2;box-shadow:0 0 0 2px var(--blue)}
.fp-room.fp-selected{z-index:3;box-shadow:0 0 0 2.5px var(--blue);filter:brightness(.92)}
.fp-room-label{text-align:center;padding:2px;z-index:1}
.fp-room-name{font-size:10px;font-weight:600;color:var(--navy);line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:90%}
.fp-room-area{font-size:9px;color:var(--g500);margin-top:1px}
.fp-room-type-dot{position:absolute;top:4px;right:4px;width:6px;height:6px;border-radius:50%;opacity:.7}
.fp-issue-dot{position:absolute;top:4px;left:4px;width:8px;height:8px;border-radius:50%;background:var(--danger);border:1.5px solid #fff;animation:pulse 1.5s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}

.fp-legend{position:absolute;bottom:14px;right:14px;background:rgba(255,255,255,.95);border:0.5px solid var(--g200);border-radius:6px;padding:6px 9px;display:flex;flex-direction:column;gap:3px}
.fp-legend-item{display:flex;align-items:center;gap:5px;font-size:9px;color:var(--g700)}
.fp-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* Room info panel (shown on click) */
.room-info-bar{background:var(--navy);color:#fff;padding:10px 14px;flex-shrink:0;display:none}
.room-info-bar.show{display:flex;align-items:center;gap:12px}
.rib-name{font-size:13px;font-weight:600}
.rib-meta{font-size:11px;opacity:.6;margin-left:4px}
.rib-actions{margin-left:auto;display:flex;gap:6px}
.rib-btn{padding:5px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;border:none;font-family:inherit;transition:all .12s}
.rib-btn-primary{background:#2563EB;color:#fff}
.rib-btn-primary:hover{background:#1D4ED8}
.rib-btn-secondary{background:rgba(255,255,255,.15);color:#fff}
.rib-btn-secondary:hover{background:rgba(255,255,255,.25)}

/* Viewer sub-header */
.viewer-subhead{height:38px;background:var(--navy3);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 10px;gap:6px;flex-shrink:0}
.vsh-label{font-size:11px;color:rgba(255,255,255,.5);margin-right:4px}
.vsh-loc{font-size:11px;font-weight:500;color:rgba(255,255,255,.8);background:rgba(37,99,235,.4);padding:2px 8px;border-radius:4px}
.fly-indicator{font-size:10px;color:rgba(37,99,235,.8);margin-left:auto;display:none;animation:fadeInOut 2s ease-in-out}
@keyframes fadeInOut{0%{opacity:0}20%{opacity:1}80%{opacity:1}100%{opacity:0}}

/* Upload zone for floor plans (admin) */
.fp-upload-zone{border:2px dashed var(--g300);border-radius:8px;padding:16px;text-align:center;cursor:pointer;font-size:12px;color:var(--g500);transition:all .15s;margin-bottom:8px}
.fp-upload-zone:hover{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}

/* ══ FLOOR PLAN v4 ══ */
.fp-floor-btn{padding:5px 12px;border-radius:6px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:#fff;color:var(--g500);transition:all .12s;white-space:nowrap;font-family:inherit}
.fp-floor-btn:hover{background:var(--g100);color:var(--navy)}
.fp-floor-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
@keyframes fpPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}

/* ══ SPLIT LAYOUT ══ */
.split-layout{display:flex;flex:1;overflow:hidden;height:100%;min-height:0}
.fp-panel{width:42%;min-width:300px;max-width:560px;border-right:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;background:#fff;flex-shrink:0}
.viewer-side{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.fp-header{padding:10px 14px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;background:#fff}
.fp-header-title{font-size:13px;font-weight:600;color:var(--navy)}
.fp-header-sub{font-size:10px;color:var(--g500);margin-top:1px}
.fp-body{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.room-info-bar{background:var(--navy);color:#fff;padding:10px 14px;flex-shrink:0;display:none;align-items:center;gap:12px}
.room-info-bar.show{display:flex}
.rib-name{font-size:13px;font-weight:600}
.rib-meta{font-size:11px;opacity:.55;margin-left:4px}
.rib-actions{margin-left:auto;display:flex;gap:6px}
.rib-btn{padding:5px 11px;border-radius:6px;font-size:11px;font-weight:600;cursor:pointer;border:none;font-family:inherit}
.rib-btn-p{background:#2563EB;color:#fff}.rib-btn-p:hover{background:#1D4ED8}
.rib-btn-s{background:rgba(255,255,255,.15);color:#fff}.rib-btn-s:hover{background:rgba(255,255,255,.25)}
.viewer-subhead{height:36px;background:var(--navy3);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 12px;gap:8px;flex-shrink:0}
.vsh-label{font-size:10px;color:rgba(255,255,255,.4)}
.vsh-loc{font-size:11px;font-weight:500;color:rgba(255,255,255,.85);background:rgba(37,99,235,.4);padding:2px 9px;border-radius:4px;max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fly-anim{font-size:10px;color:#60A5FA;margin-left:auto;opacity:0;transition:opacity .3s}
.fly-anim.show{opacity:1}
.canvas-wrap{flex:1;position:relative;background:var(--navy3);overflow:hidden;min-height:0}
canvas{display:block;width:100%!important;height:100%!important;outline:none}
.drop-hint{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;z-index:2;text-align:center}
.drop-hint p{font-size:13px;font-weight:600;color:rgba(255,255,255,.4);margin-top:10px}
.drop-hint small{font-size:11px;color:rgba(255,255,255,.22);margin-top:4px}
.vtoolbar-inline{display:flex;gap:3px;margin-left:auto}
.vtool{width:28px;height:28px;border-radius:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.7);transition:all .12s}
.vtool:hover{background:rgba(255,255,255,.2);color:#fff}
.vtool.on{background:rgba(37,99,235,.6);border-color:#60A5FA;color:#fff}
.vbar{position:absolute;bottom:10px;left:10px;display:flex;gap:5px;z-index:10;pointer-events:none}
.vchip{background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:3px 9px;color:rgba(255,255,255,.65);font-size:10px;font-family:monospace;backdrop-filter:blur(4px)}
.loading-ov{position:absolute;inset:0;background:rgba(22,33,58,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20}
.spinner{width:34px;height:34px;border:3px solid rgba(37,99,235,.3);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px}
@keyframes spin{to{transform:rotate(360deg)}}
.loading-ov p{color:#fff;font-size:13px;font-weight:600}
.measure-bar{padding:8px 14px;background:var(--blue-pale);border-top:1px solid var(--blue-mid);font-size:12px;color:#0C447C;display:flex;align-items:center;gap:12px;flex-shrink:0}

/* ══ DOKUMENT v5 ══ */
.doc-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.doc-search{flex:1;min-width:160px;padding:8px 12px;border:1.5px solid var(--g200);border-radius:7px;font-size:13px;font-family:inherit;outline:none;color:var(--navy)}
.doc-search:focus{border-color:var(--blue)}
.doc-filter-btns{display:flex;gap:4px}
.doc-filter-btn{padding:7px 13px;border-radius:7px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:#fff;color:var(--g500);font-family:inherit;transition:all .12s}
.doc-filter-btn:hover{background:var(--g100)}
.doc-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.doc-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .15s;box-shadow:var(--sh)}
.doc-card:hover{box-shadow:var(--shm);transform:translateY(-1px)}
.doc-card-top{height:100px;display:flex;align-items:center;justify-content:center;position:relative}
.doc-card-top.pdf{background:linear-gradient(135deg,#FEF2F2,#FEE2E2)}
.doc-card-top.dwg{background:linear-gradient(135deg,#EFF4FF,#DBEAFE)}
.doc-card-top.ifc{background:linear-gradient(135deg,#F0FDF4,#DCFCE7)}
.doc-type-icon{font-size:13px;font-weight:800;padding:6px 12px;border-radius:8px;letter-spacing:.05em}
.doc-type-icon.pdf{background:#FEF2F2;color:#B91C1C;border:1px solid #FCA5A5}
.doc-type-icon.dwg{background:var(--blue-pale);color:var(--blue);border:1px solid var(--blue-mid)}
.doc-type-icon.ifc{background:#F0FDF4;color:#15803D;border:1px solid #BBF7D0}
.doc-card-info{padding:10px 12px}
.doc-card-name{font-size:12px;font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:2px}
.doc-card-meta{font-size:10px;color:var(--g500)}
.doc-card-footer{padding:6px 12px;border-top:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.doc-by{font-size:10px;color:var(--g500)}
.doc-actions{display:flex;gap:4px}
.doc-action-btn{width:24px;height:24px;border-radius:5px;border:none;background:var(--g100);color:var(--g500);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:12px;transition:all .12s}
.doc-action-btn:hover{background:var(--g200);color:var(--navy)}
.doc-action-btn.del:hover{background:#FEF2F2;color:var(--err)}
.doc-empty{text-align:center;padding:40px 20px;color:var(--g500)}
.doc-empty svg{display:block;margin:0 auto 12px;opacity:.25}
.doc-stats{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap}
.doc-stat{background:var(--g100);border-radius:6px;padding:5px 12px;font-size:11px;color:var(--g500)}
.doc-stat b{color:var(--navy)}
.drop-upload-zone{border:2px dashed var(--g300);border-radius:10px;padding:28px;text-align:center;cursor:pointer;transition:all .15s;color:var(--g500);font-size:13px;margin-bottom:16px;position:relative}
.drop-upload-zone:hover,.drop-upload-zone.drag-over{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.drop-upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.drop-upload-zone svg{display:block;margin:0 auto 10px;opacity:.4}
.doc-viewer-overlay{position:fixed;inset:0;background:rgba(22,33,58,.85);z-index:600;display:flex;align-items:center;justify-content:center;padding:20px}
.doc-viewer-box{background:#fff;border-radius:14px;width:800px;max-width:95vw;max-height:90vh;display:flex;flex-direction:column;overflow:hidden}
.doc-viewer-head{padding:14px 18px;border-bottom:1px solid var(--g200);display:flex;align-items:center;gap:10px;flex-shrink:0}
.doc-viewer-title{font-size:14px;font-weight:600;color:var(--navy);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-viewer-body{flex:1;overflow:auto;padding:0;background:var(--g100)}
.doc-viewer-body iframe{width:100%;height:100%;min-height:500px;border:none}
.doc-viewer-body .no-preview{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;color:var(--g500)}

/* ══ DASHBOARD ══ */
.dash-wrap{padding:22px;max-width:1000px}
.dash-greeting{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.3px;margin-bottom:3px}
.dash-sub{font-size:13px;color:var(--g500);margin-bottom:20px}
/* auto-fit i stället för ett fast antal kolumner: Översikt har fem nyckeltal
   och skickade tidigare med style="grid-template-columns:repeat(5,1fr)" direkt
   i markupen, vilket slog ut mediefrågan nedan (inline vinner alltid) och lät
   två av korten hamna utanför skärmen på telefon. Nu radbryter rutnätet av
   sig självt, oavsett om vyn har fyra eller fem kort. */
.dash-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.ds{background:#fff;border:1px solid var(--g200);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;transition:all .12s}
.ds:hover{box-shadow:var(--shm);transform:translateY(-1px)}
.ds-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-bottom:10px}
.ds-icon.blue{background:var(--blue-pale);color:var(--blue)}
.ds-icon.amber{background:#FFFBEB;color:var(--warn)}
.ds-icon.green{background:#F0FDF4;color:var(--ok)}
.ds-icon.red{background:#FEF2F2;color:var(--err)}
.ds-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g500);margin-bottom:5px}
.ds-val{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.ds-sub{font-size:11px;color:var(--ok);margin-top:3px}
.dash-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.dash-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.dc-head{padding:12px 16px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.dc-title{font-size:13px;font-weight:600;color:var(--navy)}
.dc-body{padding:12px 16px}
.activity-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--g100)}
.activity-item:last-child{border-bottom:none}
.act-dot{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:11px}
.act-dot.blue{background:var(--blue-pale);color:var(--blue)}
.act-dot.green{background:#F0FDF4;color:var(--ok)}
.act-dot.amber{background:#FFFBEB;color:var(--warn)}
.act-dot.red{background:#FEF2F2;color:var(--err)}
.act-text{font-size:12px;font-weight:500;color:var(--navy)}
.act-sub{font-size:11px;color:var(--g500);margin-top:1px}

/* ══ ISSUE BILD ══ */
.issue-img-preview{width:100%;max-height:180px;object-fit:cover;border-radius:8px;display:block;border:1px solid var(--g200);margin-top:8px}
.issue-img-thumb{width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid var(--g200);flex-shrink:0;cursor:pointer}

/* ══ FASTIGHET HISTORIK ══ */
.prop-history{padding:0}
.ph-item{display:flex;gap:10px;padding:10px 16px;border-bottom:1px solid var(--g100);font-size:12px}
.ph-item:last-child{border-bottom:none}
.ph-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;margin-top:4px}
.ph-date{font-size:10px;color:var(--g500);white-space:nowrap;flex-shrink:0;width:70px}

/* ══ RESPONSIVE DASH ══ */
@media(max-width:700px){
  .dash-stats{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr}
}

/* ══ ADMIN ══ */
.admin-wrap{padding:22px;max-width:1100px}
.admin-hero{background:linear-gradient(135deg,#16213A 0%,#1E2D4E 100%);border-radius:var(--r);padding:20px 24px;margin-bottom:20px;display:flex;align-items:center;justify-content:space-between}
.admin-hero-title{font-size:18px;font-weight:700;color:#fff;letter-spacing:-.3px;margin-bottom:2px}
.admin-hero-sub{font-size:12px;color:rgba(255,255,255,.45)}
.a-stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.a-stat{background:#fff;border:1px solid var(--g200);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;transition:all .12s}
.a-stat:hover{box-shadow:var(--shm);transform:translateY(-1px)}
.a-stat-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g500);margin-bottom:6px}
.a-stat-val{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.a-stat-sub{font-size:11px;color:var(--ok);margin-top:3px}
.a-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px}
.a-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.a-card-head{padding:12px 16px;border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between}
.a-card-title{font-size:13px;font-weight:600;color:var(--navy)}
.a-card-body{padding:0}
.cust-row{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid var(--g100);cursor:pointer;transition:background .1s}
.cust-row:last-child{border-bottom:none}
.cust-row:hover{background:var(--g100)}
.cust-av{width:34px;height:34px;border-radius:50%;background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.cust-name{font-size:13px;font-weight:600;color:var(--navy)}
.cust-sub{font-size:11px;color:var(--g500);margin-top:1px}
.imp-banner{background:var(--warn);color:#fff;padding:8px 18px;display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;flex-shrink:0;z-index:30}
.imp-back-btn{background:rgba(0,0,0,.2);border:none;border-radius:5px;color:#fff;padding:4px 12px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;margin-left:auto}
.imp-back-btn:hover{background:rgba(0,0,0,.35)}
.bim-tip{background:var(--blue-pale);border:1px solid var(--blue-mid);border-radius:8px;padding:12px 16px;font-size:12px;color:#0C447C;line-height:1.6;margin-bottom:16px}
.prop-bim-row{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--g100)}
.prop-bim-row:last-child{border-bottom:none}
.sidebar.admin-mode{background:#0F1A2E!important}

/* ══ KOMPONENTER ══ */
.comp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;margin-bottom:16px}
.comp-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;cursor:pointer;transition:all .15s}
.comp-card:hover{box-shadow:var(--shm);transform:translateY(-1px)}
.comp-card-top{height:6px}
.comp-card-body{padding:13px 14px}
.comp-name{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.comp-model{font-size:11px;color:var(--g500);margin-bottom:8px}
.comp-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:8px}
.comp-meta{font-size:11px;color:var(--g500);display:flex;align-items:center;gap:5px}
.comp-service-ok{color:var(--ok)}
.comp-service-warn{color:var(--warn)}
.comp-service-due{color:var(--err)}
.cat-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.comp-filter-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.comp-filter-btn{padding:5px 12px;border-radius:20px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:#fff;color:var(--g500);font-family:inherit;transition:all .12s}
.comp-filter-btn:hover{background:var(--g100)}
.comp-filter-btn.active{background:var(--blue);color:#fff;border-color:var(--blue)}
.service-timeline{display:flex;flex-direction:column;gap:0}
.st-row{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--g100);font-size:12px}
.st-row:last-child{border-bottom:none}
.st-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.st-date{width:80px;color:var(--g500);flex-shrink:0;font-size:11px}

/* ══ BESIKTNINGAR ══ */
.insp-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden}
.insp-header{padding:12px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--g100)}
.insp-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.insp-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.insp-sub{font-size:11px;color:var(--g500)}
.insp-body{padding:12px 16px}
.checklist-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--g100);cursor:pointer;font-size:13px;color:var(--navy);transition:background .1s}
.checklist-item:last-child{border-bottom:none}
.checklist-item:hover{background:var(--g100);margin:0 -16px;padding:7px 16px}
.checklist-cb{width:18px;height:18px;border-radius:4px;border:2px solid var(--g300);display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .15s}
.checklist-cb.done{background:var(--ok);border-color:var(--ok);color:#fff;font-size:11px}
.insp-progress{height:4px;background:var(--g200);border-radius:2px;margin-top:8px;overflow:hidden}
.insp-progress-bar{height:100%;background:var(--ok);border-radius:2px;transition:width .3s}

/* ══ HYRESGÄSTER ══ */
.tenant-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);margin-bottom:12px;overflow:hidden;cursor:pointer;transition:all .12s}
.tenant-card:hover{box-shadow:var(--shm)}
.tenant-header{padding:13px 16px;display:flex;align-items:center;gap:12px}
.tenant-av{width:38px;height:38px;border-radius:9px;background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.tenant-name{font-size:13px;font-weight:600;color:var(--navy)}
.tenant-sub{font-size:11px;color:var(--g500);margin-top:1px}
.tenant-meta{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.lease-bar{height:5px;background:var(--g200);border-radius:3px;overflow:hidden;margin-top:6px}
.lease-bar-fill{height:100%;background:var(--blue);border-radius:3px}

/* ══ PUBLIKT FELANMÄLNINGSFORMULÄR ══ */
#public-report-screen{min-height:100vh;background:var(--g100);display:flex;align-items:center;justify-content:center;padding:20px}
.pr-wrap{background:#fff;border-radius:16px;padding:32px;width:540px;max-width:100%;box-shadow:var(--shm)}
.pr-logo{display:flex;align-items:center;gap:9px;margin-bottom:20px;padding-bottom:16px;border-top:1px solid var(--g200)}
.pr-step{display:none}
.pr-step.active{display:block}
.pr-success{background:#F0FDF4;border:1px solid #BBF7D0;border-radius:10px;padding:24px;text-align:center}

/* ══ RITNINGSLAGER ══ */
.layer-controls{display:flex;gap:5px;padding:6px 10px;border-bottom:1px solid var(--g200);flex-shrink:0;flex-wrap:wrap}
.layer-btn{padding:4px 10px;border-radius:5px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid var(--g200);background:#fff;color:var(--g500);font-family:inherit;transition:all .12s;display:flex;align-items:center;gap:4px}
.layer-btn:hover{background:var(--g100)}
.layer-btn.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.layer-btn .lbdot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

/* ══ PLANRITNING MED LAGER ══ */
.fp-layer-tabs{display:flex;gap:0;border-bottom:1px solid var(--g200);flex-shrink:0;background:#fff;overflow-x:auto}
.fp-layer-tab{display:flex;align-items:center;gap:6px;padding:9px 16px;font-size:12px;font-weight:500;cursor:pointer;border:none;background:transparent;color:var(--g500);border-bottom:2px solid transparent;font-family:inherit;transition:all .12s;white-space:nowrap}
.fp-layer-tab:hover{color:var(--navy);background:var(--g100)}
.fp-layer-tab.active{color:var(--navy);border-bottom-color:var(--navy);font-weight:600}
.fp-layer-tab .tab-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* PIN SYSTEM */
.fp-pin{position:absolute;transform:translate(-50%,-100%);cursor:pointer;z-index:10;transition:transform .15s}
.fp-pin:hover{transform:translate(-50%,-100%) scale(1.2);z-index:20}
.fp-pin-inner{display:flex;flex-direction:column;align-items:center}
.fp-pin-bubble{border-radius:8px;padding:4px 8px;font-size:10px;font-weight:700;color:#fff;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.25);max-width:120px;overflow:hidden;text-overflow:ellipsis;text-align:center}
.fp-pin-tail{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;margin-top:-1px}
.fp-pin-icon{width:32px;height:32px;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;font-size:14px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.fp-pin-tail-icon{width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;margin-top:-1px}

/* POPUP */
.fp-popup{position:absolute;z-index:30;background:#fff;border-radius:10px;box-shadow:0 4px 20px rgba(0,0,0,.18);border:1px solid var(--g200);width:220px;transform:translate(-50%,-100%);margin-top:-44px}
.fp-popup-head{padding:10px 12px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:8px}
.fp-popup-title{font-size:12px;font-weight:600;color:var(--navy);flex:1}
.fp-popup-close{width:20px;height:20px;border-radius:4px;border:none;background:var(--g100);color:var(--g500);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.fp-popup-body{padding:10px 12px}
.fp-popup-meta{font-size:11px;color:var(--g500);margin-bottom:6px;line-height:1.5}
.fp-popup-actions{display:flex;gap:5px;margin-top:8px}

/* ROOM OVERLAYS */
.fp-room-overlay{position:absolute;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3);cursor:pointer;transition:opacity .2s;text-align:center;padding:2px}
.fp-room-overlay:hover{opacity:.85;z-index:5}

/* KOMMENTAR-DOT */
.fp-comment-dot{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--blue);border:2px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:10px;font-weight:700;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2);z-index:10;transform:translate(-50%,-50%)}
.fp-comment-dot:hover{transform:translate(-50%,-50%) scale(1.2)}

/* NUMMER-PIN (besiktning) */
.fp-number-pin{position:absolute;width:26px;height:26px;border-radius:50%;border:2.5px solid #fff;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:800;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25);z-index:10;transform:translate(-50%,-50%);transition:transform .15s}
.fp-number-pin:hover{transform:translate(-50%,-50%) scale(1.25);z-index:20}

/* LAYER INFO PANEL */
.fp-info-panel{width:260px;background:#fff;border-left:1px solid var(--g200);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0}
.fp-info-head{padding:12px 14px;border-bottom:1px solid var(--g200);font-size:13px;font-weight:600;color:var(--navy)}
.fp-info-body{flex:1;overflow-y:auto;padding:10px 14px}
.fp-info-item{padding:8px 0;border-bottom:1px solid var(--g100);cursor:pointer}
.fp-info-item:last-child{border-bottom:none}
.fp-info-item:hover{background:var(--g100);margin:0 -14px;padding:8px 14px}
.fp-info-name{font-size:12px;font-weight:600;color:var(--navy)}
.fp-info-sub{font-size:11px;color:var(--g500);margin-top:1px}
.fp-info-badge{display:flex;gap:4px;margin-top:4px;flex-wrap:wrap}

/* ══ KOMMENTARER & CHAT ══ */
.chat-wrap{display:flex;flex-direction:column;height:100%;min-height:0}
.chat-messages{flex:1;overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.chat-msg{display:flex;gap:9px;align-items:flex-end}
.chat-msg.mine{flex-direction:row-reverse}
.chat-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-bottom:2px}
.chat-avatar.owner{background:var(--blue);color:#fff}
.chat-avatar.staff{background:#7C3AED;color:#fff}
.chat-avatar.other{background:var(--g300);color:var(--g700)}
.chat-bubble{max-width:75%;padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.5;color:var(--navy)}
.chat-msg:not(.mine) .chat-bubble{background:#F0F4F8;border-bottom-left-radius:4px}
.chat-msg.mine .chat-bubble{background:var(--blue);color:#fff;border-bottom-right-radius:4px}
.chat-meta{font-size:10px;margin-top:3px;color:var(--g500)}
.chat-msg.mine .chat-meta{text-align:right}
.chat-input-wrap{padding:12px 14px;border-top:1px solid var(--g200);display:flex;gap:8px;align-items:flex-end;flex-shrink:0;background:#fff}
.chat-input{flex:1;padding:9px 12px;border:1.5px solid var(--g200);border-radius:20px;font-size:13px;font-family:inherit;outline:none;resize:none;max-height:100px;min-height:38px;transition:border-color .15s;line-height:1.4}
.chat-input:focus{border-color:var(--blue)}
.chat-send-btn{width:36px;height:36px;border-radius:50%;background:var(--blue);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .12s}
.chat-send-btn:hover{background:var(--blue-h)}
.chat-send-btn:disabled{background:var(--g300);cursor:not-allowed}
.chat-empty{text-align:center;padding:30px 16px;color:var(--g500);font-size:13px}

/* ══ ISSUE DETAIL MODAL v2 (med tabs) ══ */
.issue-tabs{display:flex;border-bottom:1px solid var(--g200);flex-shrink:0}
.issue-tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:600;cursor:pointer;color:var(--g500);border:none;border-bottom:2px solid transparent;background:transparent;font-family:inherit;transition:all .12s}
.issue-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.issue-tab-body{display:none;flex:1;flex-direction:column;min-height:0;overflow:hidden}
.issue-tab-body.active{display:flex}

/* ══ FASTIGHETS-LISTA FÖRBÄTTRAD ══ */
.prop-card-new{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;cursor:pointer;transition:all .15s;display:flex;flex-direction:column}
.prop-card-new:hover{box-shadow:var(--shm);transform:translateY(-2px)}
.prop-card-img{height:120px;background:linear-gradient(135deg,#16213A,#1E2D4E);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.prop-card-img svg{opacity:.15}
.prop-card-overlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 12px;background:linear-gradient(0deg,rgba(22,33,58,.8) 0%,transparent 60%)}
.prop-card-name{font-size:14px;font-weight:700;color:#fff;letter-spacing:-.2px}
.prop-card-addr{font-size:11px;color:rgba(255,255,255,.6);margin-top:1px}
.prop-card-body{padding:12px 14px}
.prop-card-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:10px}
.pcs{text-align:center}
.pcs-val{font-size:16px;font-weight:700;color:var(--navy)}
.pcs-label{font-size:9px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--g500);margin-top:1px}
.prop-card-tags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:10px}
.prop-card-actions{display:flex;gap:6px}
.prop-card-actions .btn{flex:1;justify-content:center;font-size:11px}
.props-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;padding:20px}

/* ══ DASHBOARD DIAGRAM ══ */
.dash-charts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
@media(max-width:700px){
  /* This rule lives after the "RESPONSIVE DASH" block earlier in the file
     (.dash-charts itself is defined here, further down), so its own
     mobile override has to sit down here too — otherwise the unconditional
     rule above would win the cascade and the 2-column grid would never
     collapse, overflowing a 390px phone screen. */
  .dash-charts{grid-template-columns:1fr}
}
.chart-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);padding:16px}
.chart-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:14px}
.donut-wrap{position:relative;display:flex;align-items:center;gap:20px}
.donut-canvas{flex-shrink:0}
.donut-center{position:absolute;left:0;top:0;width:110px;height:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none}
.donut-val{font-size:22px;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.donut-label{font-size:10px;color:var(--g500);margin-top:1px}
.legend-list{display:flex;flex-direction:column;gap:6px}
.legend-item{display:flex;align-items:center;gap:7px;font-size:11px;cursor:pointer}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.legend-name{flex:1;color:var(--navy)}
.legend-val{font-weight:600;color:var(--navy)}
.legend-pct{color:var(--g500);font-size:10px;margin-left:2px}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.bar-label{width:90px;font-size:11px;color:var(--navy);text-align:right;flex-shrink:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-track{flex:1;height:8px;background:var(--g100);border-radius:4px;overflow:hidden}
.bar-fill{height:100%;border-radius:4px;transition:width .4s ease}
.bar-val{width:50px;font-size:11px;font-weight:600;color:var(--navy);text-align:right;flex-shrink:0}
.trend-row{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--g100);font-size:12px}
.trend-row:last-child{border-bottom:none}
.trend-up{color:var(--ok)}
.trend-down{color:var(--err)}

/* ══ FASTIGHETER - SPLIT LAYOUT ══ */
.oversikt-split{display:flex;flex:1;overflow:hidden;height:100%}
.oversikt-left{width:55%;display:flex;flex-direction:column;overflow:hidden;border-right:1px solid var(--g200)}
.oversikt-right{flex:1;position:relative;min-width:0}
.oversikt-cards{flex:1;overflow-y:auto;padding:14px}
.oversikt-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}

/* ══ EXPORT ══ */
.export-option{display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px solid var(--g200);border-radius:var(--r);cursor:pointer;transition:all .12s;background:#fff}
.export-option:hover{border-color:var(--blue);background:var(--blue-pale)}
.export-icon{width:40px;height:40px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.export-name{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.export-desc{font-size:11px;color:var(--g500)}

/* ══ AREA ══ */
.area-bar-wrap{margin-bottom:10px}
.area-prop-label{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:4px;display:flex;justify-content:space-between}
.area-segments{display:flex;height:28px;border-radius:6px;overflow:hidden;gap:1px}
.area-seg{display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;transition:flex .4s;cursor:pointer;min-width:4px}
.area-seg:hover{filter:brightness(1.1)}

/* ══ FASTIGHETER — MAP CARDS OVERLAY ══ */
.map-overlay-wrap{position:relative;flex:1;overflow:hidden}
.map-full{width:100%;height:100%;z-index:1}
.map-cards-panel{position:absolute;top:0;left:0;bottom:0;width:320px;z-index:10;display:flex;flex-direction:column;pointer-events:none}
.map-cards-inner{flex:1;overflow-y:auto;padding:12px 10px 12px 12px;display:flex;flex-direction:column;gap:8px;pointer-events:all}
.map-cards-inner::-webkit-scrollbar{width:3px}
.map-cards-inner::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:2px}
.map-top-bar{pointer-events:all;padding:10px 12px;display:flex;gap:7px;align-items:center;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid rgba(0,0,0,.06);flex-shrink:0}

/* Property card — vertical, overlaid on map */
/* HITTAD BUGG (2026-09): .map-cards-inner är en flex-kolumn, och där krymper
   barn som standard (flex-shrink:1). När korten inte fick plats krympte de
   alltså i stället för att listan började scrolla — och eftersom kortet har
   overflow:hidden klipptes knappraden (historik, ärenden, 3D →) bort nedtill.
   Med fyra fastigheter märktes det knappt, med fler försvann knapparna helt.
   flex-shrink:0 gör att korten behåller sin höjd och listan scrollar i
   stället, som det var tänkt. */
.prop-map-card{background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-radius:12px;box-shadow:0 2px 16px rgba(0,0,0,.15);overflow:hidden;cursor:pointer;transition:all .2s;border:1.5px solid transparent;flex-shrink:0}
.prop-map-card:hover{box-shadow:0 4px 24px rgba(0,0,0,.22);transform:translateX(2px)}
.prop-map-card.selected{border-color:var(--blue);box-shadow:0 4px 20px rgba(37,99,235,.25)}
.pmc-header{padding:11px 13px 8px;display:flex;align-items:flex-start;gap:9px}
.pmc-icon{width:34px;height:34px;border-radius:8px;background:var(--navy3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.pmc-name{font-size:13px;font-weight:700;color:var(--navy);line-height:1.2;margin-bottom:1px}
.pmc-addr{font-size:10px;color:var(--g500)}
.pmc-status{margin-left:auto;flex-shrink:0}
.pmc-stats{padding:0 13px 10px;display:flex;gap:0}
.pmc-stat{flex:1;text-align:center;padding:6px 4px;border-right:1px solid var(--g100)}
.pmc-stat:last-child{border-right:none}
.pmc-stat-val{font-size:14px;font-weight:700;color:var(--navy)}
.pmc-stat-label{font-size:9px;color:var(--g500);text-transform:uppercase;letter-spacing:.04em;margin-top:1px}
.pmc-footer{padding:8px 13px;border-top:1px solid var(--g100);display:flex;gap:5px}
.pmc-footer .btn{flex:1;font-size:11px;padding:5px 8px;justify-content:center}

/* Cluster markers */
.cluster-marker{background:var(--navy);color:#fff;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.3);cursor:pointer;transition:transform .15s}
.cluster-marker:hover{transform:scale(1.1)}

/* Map pin enhanced */
.map-pin-enhanced{display:flex;flex-direction:column;align-items:center;cursor:pointer;transition:transform .15s}
.map-pin-enhanced:hover{transform:scale(1.15) translateY(-2px)}
.map-pin-label{background:#fff;border-radius:5px;padding:2px 7px;font-size:10px;font-weight:600;color:var(--navy);box-shadow:0 1px 5px rgba(0,0,0,.15);white-space:nowrap;margin-bottom:3px}
.map-pin-dot{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.map-pin-line{width:2px;height:8px;background:inherit}

/* Cluster zoom popup */
.cluster-popup{border-radius:10px!important}
.leaflet-popup-content-wrapper{border-radius:10px!important;border:1px solid var(--g200)!important;box-shadow:0 4px 20px rgba(0,0,0,.15)!important}
.leaflet-popup-content{margin:10px 12px!important;font-size:12px!important}

/* ══ MINA FASTIGHETER PÅ MOBIL ══
   .map-cards-panel är ett 320 px brett överlägg ovanpå kartan. Snyggt på en
   dator, men på en telefon (390 px) äter det 82 % av skärmen: kvar blir en
   70 px remsa karta som inte går att använda till något, samtidigt som
   korten trycks ihop till 298 px i stället för att få hela bredden.
   Under 700 px blir det i stället en karta som band överst och listan i full
   bredd under, som kartvyerna i resten av appen (se .map-side vid 768 px).
   OBS: fitBounds i renderOversikt räknar ut sin marginal efter SAMMA
   brytpunkt — ändrar du 700 här måste du ändra den där också. */
@media(max-width:700px){
  .map-overlay-wrap{display:flex;flex-direction:column}
  .map-full{flex:0 0 190px;height:190px;width:100%}
  .map-cards-panel{position:static;width:100%;flex:1 1 auto;min-height:0;pointer-events:auto}
  .map-cards-inner{padding:10px}
  /* Hover-förskjutningen fastnar på pekskärm — ett tryck lämnar kortet
     förskjutet tills man rör något annat. */
  .prop-map-card:hover{transform:none}
  /* Knappraden (historik, ärenden, 3D) var ~26 px hög — för litet för ett
     finger. */
  .pmc-footer .btn{padding:9px 8px;font-size:12px}
}

/* ══ DIGITAL TVILLING v2 — SMÄLT 2D+3D ══ */
.twin-wrap{display:flex;flex-direction:column;flex:1;overflow:hidden;height:100%}
.twin-toolbar{height:44px;background:var(--navy3);border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;padding:0 14px;gap:6px;flex-shrink:0}
.twin-prop-label{font-size:12px;color:rgba(255,255,255,.5);margin-right:4px}
.twin-prop-name{font-size:12px;font-weight:600;color:rgba(255,255,255,.85);background:rgba(255,255,255,.1);padding:2px 10px;border-radius:4px}
.twin-loc{font-size:11px;color:rgba(255,255,255,.5);margin-left:6px}
.twin-tools{display:flex;gap:3px;margin-left:auto}
.twin-tool{width:30px;height:30px;border-radius:6px;background:rgba(255,255,255,.1);border:0.5px solid rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;cursor:pointer;color:rgba(255,255,255,.65);font-size:11px;transition:all .12s;font-family:inherit}
.twin-tool:hover{background:rgba(255,255,255,.2);color:#fff}
.twin-tool.on{background:rgba(37,99,235,.6);border-color:#60A5FA;color:#fff}
.twin-tool-sep{width:1px;background:rgba(255,255,255,.12);margin:6px 2px}
.twin-filter-panel{position:absolute;top:calc(100% + 6px);right:0;background:var(--navy3);border:1px solid rgba(255,255,255,.15);border-radius:8px;box-shadow:0 12px 30px rgba(0,0,0,.35);padding:8px;width:190px;z-index:50}
.twin-filter-title{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:rgba(255,255,255,.4);padding:2px 4px 6px}
.twin-filter-row{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.85);padding:5px 4px;border-radius:5px;cursor:pointer}
.twin-filter-row:hover{background:rgba(255,255,255,.08)}
.twin-filter-count{margin-left:auto;font-size:10px;color:rgba(255,255,255,.4)}
.twin-filter-clear{width:100%;margin-top:6px;background:rgba(255,255,255,.1);border:none;border-radius:5px;color:#fff;font-size:11px;padding:6px;cursor:pointer;font-family:inherit}
.twin-filter-clear:hover{background:rgba(255,255,255,.18)}
.twin-filter-empty{font-size:11px;color:rgba(255,255,255,.4);padding:6px 4px}
.twin-main{flex:1;display:flex;overflow:hidden;position:relative;min-height:0}

/* Split panels */
.twin-left{display:flex;flex-direction:column;overflow:hidden;border-right:2px solid rgba(255,255,255,.1);position:relative;transition:width .2s}
.twin-right{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative;min-width:0}

/* Resize handle */
.twin-resize{width:6px;background:transparent;cursor:col-resize;position:absolute;right:-3px;top:0;bottom:0;z-index:20;display:flex;align-items:center;justify-content:center}
.twin-resize:hover .twin-resize-line{background:var(--blue)}
.twin-resize-line{width:2px;height:40px;background:rgba(255,255,255,.15);border-radius:1px;transition:background .12s}

/* 2D panel */
.twin-2d{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#1a2440}
.twin-2d-header{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;flex-shrink:0}
.twin-2d-title{font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}
.twin-2d-badge{font-size:9px;font-weight:700;background:rgba(37,99,235,.4);color:#60A5FA;padding:1px 7px;border-radius:8px}
.twin-2d-canvas{flex:1;overflow:hidden;position:relative}
/* Room polygons in the generated floor plan (renderRoomsFloorPlan) — the
   whole room is clickable, so give it hover/active feedback like Dalux does. */
.twin-2d-canvas .fp-room-poly{transition:filter .1s}
.twin-2d-canvas .fp-room-poly:hover{filter:brightness(.92)}
.twin-2d-canvas .fp-room-poly.fp-room-active{filter:brightness(.85) saturate(1.3);outline:2px solid #2563EB;outline-offset:-2px}

/* 3D panel */
.twin-3d{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--navy3)}
.twin-3d-header{padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:8px;flex-shrink:0}
.twin-3d-title{font-size:11px;font-weight:600;color:rgba(255,255,255,.7)}

/* Measure overlay bar */
.measure-overlay{position:absolute;bottom:10px;left:50%;transform:translateX(-50%);background:rgba(37,99,235,.9);backdrop-filter:blur(8px);border-radius:20px;padding:6px 16px;font-size:11px;font-weight:600;color:#fff;display:flex;align-items:center;gap:10px;z-index:20;pointer-events:all;white-space:nowrap}
.measure-val{font-size:14px;font-weight:800;letter-spacing:-.3px}
.measure-clear{background:rgba(255,255,255,.2);border:none;border-radius:10px;color:#fff;padding:2px 8px;font-size:10px;cursor:pointer;font-family:inherit}

/* 2D measure canvas */
.fp-measure-canvas{position:absolute;inset:0;z-index:15;cursor:crosshair}
.fp-measure-point{position:absolute;width:10px;height:10px;background:#FBBF24;border:2px solid #fff;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none;z-index:16}
.fp-measure-line{position:absolute;background:#FBBF24;height:2px;transform-origin:left center;pointer-events:none;z-index:16}
.fp-measure-label{position:absolute;background:#FBBF24;color:var(--navy);font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;transform:translate(-50%,-50%);pointer-events:none;z-index:17;white-space:nowrap}

/* Mode toggle */
.view-mode-toggle{display:flex;background:rgba(255,255,255,.1);border-radius:6px;padding:2px;gap:2px}
.vmt-btn{padding:4px 10px;border-radius:4px;font-size:10px;font-weight:600;cursor:pointer;border:none;background:transparent;color:rgba(255,255,255,.55);font-family:inherit;transition:all .12s}
.vmt-btn.on{background:rgba(255,255,255,.15);color:#fff}

/* ══ TVILLINGVYN PÅ MOBIL ══
   HITTAD BUGG (2026-09): .twin-main är en vågrät flexbox och ingen mediefråga
   rörde .twin-left/.twin-right. På en telefon (390 px, sidomenyn hopfälld) blev
   det två paneler på knappt 190 px var — både planritningen och 3D-modellen var
   oanvändbara, trots att sidan lovar "Fungerar på dator och mobil".
   Under 700 px ligger panelerna på varandra i stället för bredvid varandra i
   Delad-läge. Att ha kvar båda är poängen: klick på ett rum i planritningen ska
   flyga kameran i 3D, och den återkopplingen försvinner om bara en panel syns.
   2D och 3D finns kvar som helskärmslägen. Vilket läge som gäller styrs av
   klassen mode-split/mode-2d/mode-3d som setViewMode sätter på #twin-main. */
@media(max-width:700px){
  /* Verktygsfältet radbryts i stället för att klippas — annars går knapparna
     längst till höger (ladda upp ritning, IFC) inte att nå alls. */
  .twin-toolbar{height:auto;min-height:44px;padding:8px 10px;flex-wrap:wrap;row-gap:8px}
  .twin-prop-label{display:none}
  .twin-tools{margin-left:0;width:100%;flex-wrap:wrap;gap:6px}
  .twin-tool{width:34px;height:34px}
  .vmt-btn{padding:7px 15px;font-size:12px}

  .twin-main{flex-direction:column}
  .twin-left{border-right:none;min-height:0;transition:none}
  .twin-main.mode-split>.twin-left{flex:0 0 50%;width:100%!important;border-bottom:2px solid rgba(255,255,255,.1)}
  .twin-main.mode-2d>.twin-left{flex:1 1 auto;width:100%!important}
  /* Dragreglaget drar i sidled och har ingen mening när panelerna ligger på
     varandra. */
  .twin-resize{display:none!important}

  /* Texten i mät- och felanmälningsremsan får plats på flera rader i stället
     för att sticka ut utanför skärmen. */
  .measure-overlay{white-space:normal;max-width:calc(100% - 24px);text-align:center;line-height:1.35;bottom:8px}
}

/* ══ LEVERANTÖRER ══ */
.sup-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;display:flex;align-items:flex-start;gap:12px;cursor:pointer;transition:all .12s;margin-bottom:8px}
.sup-card:hover{box-shadow:var(--shm);border-color:var(--blue-mid)}
.sup-av{width:40px;height:40px;border-radius:10px;background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.sup-name{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.sup-cat{font-size:11px;color:var(--g500)}
.sup-contact{font-size:11px;color:var(--g500);margin-top:3px}

/* ══ SCHEMALÄGGNING ══ */
.sched-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);padding:13px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.sched-icon{width:36px;height:36px;border-radius:8px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.sched-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.sched-meta{font-size:11px;color:var(--g500)}
.sched-toggle{position:relative;width:36px;height:20px;flex-shrink:0;cursor:pointer}
.sched-toggle input{opacity:0;width:0;height:0}
.sched-slider{position:absolute;inset:0;background:var(--g300);border-radius:10px;transition:.2s}
.sched-slider:before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s}
.sched-toggle input:checked + .sched-slider{background:var(--ok)}
.sched-toggle input:checked + .sched-slider:before{transform:translateX(16px)}

/* ══ CSV IMPORT ══ */
.csv-drop{border:2px dashed var(--g300);border-radius:10px;padding:28px;text-align:center;cursor:pointer;transition:all .15s;color:var(--g500);font-size:13px;margin-bottom:14px;position:relative}
.csv-drop:hover,.csv-drop.drag{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.csv-template{background:var(--g100);border-radius:8px;padding:10px 14px;font-size:12px;color:var(--g700);margin-bottom:12px;line-height:1.6}
.csv-preview{max-height:200px;overflow-y:auto;border:1px solid var(--g200);border-radius:7px;font-size:11px}
.csv-preview table{width:100%;border-collapse:collapse}
.csv-preview th{background:var(--g100);padding:6px 10px;text-align:left;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--g500);border-bottom:1px solid var(--g200)}
.csv-preview td{padding:5px 10px;border-bottom:1px solid var(--g100);color:var(--navy)}

/* ══ EDIT HISTORY ══ */
.hist-item{display:flex;gap:10px;padding:7px 0;border-bottom:1px solid var(--g100);font-size:12px}
.hist-item:last-child{border-bottom:none}
.hist-field{font-weight:600;color:var(--navy)}
.hist-old{color:var(--err);text-decoration:line-through}
.hist-new{color:var(--ok)}
.hist-by{color:var(--g500);font-size:10px;margin-top:1px}

/* ══ LASERSKANNING ══ */
.scan-hero{background:linear-gradient(135deg,var(--navy3),#0f2d4e);border-radius:var(--r);padding:24px;margin-bottom:16px;color:#fff}
.scan-hero-title{font-size:20px;font-weight:700;letter-spacing:-.3px;margin-bottom:6px}
.scan-hero-sub{font-size:13px;opacity:.6;line-height:1.6;max-width:500px}
.scan-package{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:10px;cursor:pointer;transition:all .12s}
.scan-package:hover{box-shadow:var(--shm);border-color:var(--blue-mid)}
.scan-package.selected{border-color:var(--blue);box-shadow:0 0 0 2px var(--blue-mid)}
.sp-head{padding:14px 16px;display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--g100)}
.sp-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.sp-name{font-size:14px;font-weight:700;color:var(--navy)}
.sp-price{font-size:13px;color:var(--g500);margin-top:1px}
.sp-body{padding:12px 16px}
.sp-feature{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--g700);padding:3px 0}
.sp-feature::before{content:'✓';color:var(--ok);font-weight:700;flex-shrink:0}

/* ══ LEVERANTÖRER ══ */
.sup-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.sup-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);padding:14px 16px;cursor:pointer;transition:all .12s}
.sup-card:hover{box-shadow:var(--shm);border-color:var(--blue-mid);transform:translateY(-1px)}
.sup-av{width:40px;height:40px;border-radius:10px;background:var(--blue-pale);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;margin-bottom:10px}
.sup-name{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.sup-cat{font-size:11px;color:var(--g500);margin-bottom:6px}
.sup-contact{font-size:11px;color:var(--g500);display:flex;align-items:center;gap:5px}

/* ══ SCHEMALÄGGNING ══ */
.sched-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);padding:13px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;transition:border-color .12s}
.sched-card.active-card{border-left:3px solid var(--ok)}
.sched-card.paused-card{border-left:3px solid var(--g300)}
.sched-icon{width:36px;height:36px;border-radius:8px;background:var(--blue-pale);display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.sched-title{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:2px}
.sched-meta{font-size:11px;color:var(--g500)}
.toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:var(--g300);border-radius:10px;cursor:pointer;transition:.2s}
.toggle-slider:before{content:'';position:absolute;height:14px;width:14px;left:3px;bottom:3px;background:#fff;border-radius:50%;transition:.2s;box-shadow:0 1px 3px rgba(0,0,0,.2)}
.toggle-switch input:checked + .toggle-slider{background:var(--ok)}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(16px)}

/* ══ CSV IMPORT ══ */
.csv-drop{border:2px dashed var(--g300);border-radius:10px;padding:24px;text-align:center;cursor:pointer;transition:all .15s;color:var(--g500);font-size:13px;margin-bottom:12px}
.csv-drop:hover,.csv-drop.over{border-color:var(--blue);background:var(--blue-pale);color:var(--blue)}
.csv-preview{max-height:180px;overflow-y:auto;border:1px solid var(--g200);border-radius:7px}
.csv-preview table{width:100%;border-collapse:collapse}
.csv-preview th{background:var(--g100);padding:5px 10px;font-size:10px;font-weight:700;text-transform:uppercase;color:var(--g500);border-bottom:1px solid var(--g200);text-align:left}
.csv-preview td{padding:5px 10px;border-bottom:0.5px solid var(--g100);font-size:11px;color:var(--navy)}

/* ══ EDIT HISTORY ══ */
.hist-row{display:flex;gap:8px;padding:6px 0;border-bottom:0.5px solid var(--g100);font-size:11px}
.hist-row:last-child{border-bottom:none}
.hist-field{font-weight:600;color:var(--navy);min-width:80px}
.hist-change{display:flex;align-items:center;gap:5px;flex:1}
.hist-old{color:var(--err);text-decoration:line-through}
.hist-new{color:var(--ok);font-weight:500}
.hist-by{color:var(--g500);font-size:10px;margin-top:1px}

/* ══ LASERSKANNING ══ */
.scan-hero{background:linear-gradient(135deg,#0f1e38,#1a3a6e);border-radius:var(--r);padding:24px;margin-bottom:16px;position:relative;overflow:hidden}
.scan-hero::after{content:'☁';position:absolute;right:24px;top:50%;transform:translateY(-50%);font-size:80px;opacity:.06}
.scan-hero-title{font-size:20px;font-weight:700;color:#fff;letter-spacing:-.3px;margin-bottom:6px}
.scan-hero-sub{font-size:13px;color:rgba(255,255,255,.55);line-height:1.6;max-width:480px}
.scan-packages{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:16px}
.scan-pkg{background:#fff;border:1.5px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;transition:all .15s;cursor:pointer}
.scan-pkg:hover{box-shadow:var(--shm);transform:translateY(-2px)}
.scan-pkg.popular{border-color:var(--blue)}
.scan-pkg-head{padding:16px;background:var(--g100);border-bottom:1px solid var(--g200)}
.scan-pkg-icon{font-size:24px;margin-bottom:8px}
.scan-pkg-name{font-size:14px;font-weight:700;color:var(--navy);margin-bottom:2px}
.scan-pkg-price{font-size:12px;color:var(--g500)}
.scan-pkg-popular{display:inline-block;background:var(--blue);color:#fff;font-size:9px;font-weight:700;padding:1px 7px;border-radius:8px;margin-top:4px}
.scan-pkg-body{padding:14px 16px}
.scan-pkg-feat{display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--g700);padding:3px 0;line-height:1.4}
.scan-pkg-feat::before{content:'✓';color:var(--ok);font-weight:700;flex-shrink:0;margin-top:1px}
.scan-cta{background:linear-gradient(135deg,var(--blue),#1d4ed8);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;width:100%;margin-top:10px;transition:opacity .12s}
.scan-cta:hover{opacity:.9}

/* ══ EGENBYGGDA FÄLT ══ */
.custom-field-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:0.5px solid var(--g100)}
.custom-field-row:last-child{border-bottom:none}
.cf-label{font-size:12px;font-weight:500;color:var(--navy);width:120px;flex-shrink:0}
.cf-val{font-size:12px;color:var(--g700);flex:1}
.cf-edit{font-size:10px;color:var(--blue);cursor:pointer;padding:2px 6px;border-radius:4px;background:var(--blue-pale)}
.cf-edit:hover{background:var(--blue-mid)}

/* ══ BYGGNADSVÄLJARE ══ */
.prop-selector{display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--g200);background:#fff;height:40px;flex-shrink:0}
.prop-selector-label{font-size:11px;color:var(--g500);font-weight:500;flex-shrink:0}
.prop-selector-tabs{display:flex;gap:2px;overflow-x:auto;flex:1}
.prop-selector-tabs::-webkit-scrollbar{display:none}
.prop-tab{padding:4px 12px;border-radius:16px;font-size:11px;font-weight:500;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--g500);font-family:inherit;transition:all .12s;white-space:nowrap;display:flex;align-items:center;gap:5px}
.prop-tab:hover{background:var(--g100);color:var(--navy)}
.prop-tab.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.prop-tab.active .pt-dot{background:rgba(255,255,255,.5)}
.pt-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.pt-badge{background:rgba(220,38,38,.9);color:#fff;font-size:9px;font-weight:700;padding:0 4px;border-radius:6px;min-width:14px;text-align:center}
.prop-tab.active .pt-badge{background:rgba(255,255,255,.3)}

/* ══ FASTIGHETSVY — KORT PER BYGGNAD ══ */
.building-view{padding:0}
.bv-header{padding:16px 20px 12px;border-bottom:1px solid var(--g200);display:flex;align-items:center;gap:10px;background:#fff;flex-shrink:0}
.bv-icon{width:42px;height:42px;border-radius:10px;background:var(--navy3);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.bv-name{font-size:16px;font-weight:700;color:var(--navy);letter-spacing:-.2px}
.bv-addr{font-size:12px;color:var(--g500);margin-top:1px}
.bv-stats-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--g200);border-bottom:1px solid var(--g200)}
.bv-stat{background:#fff;padding:12px 16px;text-align:center;cursor:pointer;transition:background .1s}
.bv-stat:hover{background:var(--g100)}
.bv-stat.active{background:var(--blue-pale)}
.bv-stat-val{font-size:20px;font-weight:700;color:var(--navy);letter-spacing:-.5px}
.bv-stat-label{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--g500);margin-top:2px}
.bv-stat-sub{font-size:10px;margin-top:1px}
.bv-content{flex:1;overflow-y:auto;padding:16px 20px}
.bv-section-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g500);margin-bottom:10px;display:flex;align-items:center;justify-content:space-between}

/* ══ NOTISER ══ */
.notif-bell{position:relative;width:34px;height:34px;border-radius:8px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--g500);transition:all .12s;font-family:inherit}
.notif-bell:hover{background:var(--g100);color:var(--navy)}
.notif-badge{position:absolute;top:4px;right:4px;width:16px;height:16px;background:#DC2626;border-radius:50%;border:2px solid #fff;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;pointer-events:none}
.notif-dropdown{position:absolute;top:calc(100% + 8px);right:0;width:340px;background:#fff;border:1px solid var(--g200);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.15);z-index:200;overflow:hidden}
.notif-head{padding:12px 16px;border-bottom:1px solid var(--g200);display:flex;align-items:center;justify-content:space-between}
.notif-head-title{font-size:13px;font-weight:700;color:var(--navy)}
.notif-mark-all{font-size:11px;color:var(--blue);cursor:pointer;background:none;border:none;font-family:inherit;padding:0}
.notif-mark-all:hover{text-decoration:underline}
.notif-list{max-height:360px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:11px 16px;border-bottom:0.5px solid var(--g100);cursor:pointer;transition:background .1s;align-items:flex-start}
.notif-item:hover{background:var(--g100)}
.notif-item.unread{background:#FAFBFF}
.notif-item.unread::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--blue)}
.notif-item{position:relative}
.notif-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.notif-icon.ok{background:#F0FDF4}
.notif-icon.warn{background:#FFFBEB}
.notif-icon.err{background:#FEF2F2}
.notif-icon.blue{background:var(--blue-pale)}
.notif-title{font-size:12px;font-weight:600;color:var(--navy);margin-bottom:2px}
.notif-body{font-size:11px;color:var(--g500);line-height:1.4}
.notif-time{font-size:10px;color:var(--g400);margin-top:2px}
.notif-empty{padding:28px;text-align:center;font-size:13px;color:var(--g500)}

/* ══ GLOBAL SEARCH ══ */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:300;display:flex;align-items:flex-start;justify-content:center;padding-top:80px;backdrop-filter:blur(3px)}
.search-box{width:600px;max-width:calc(100vw - 32px);background:#fff;border-radius:14px;box-shadow:0 16px 48px rgba(0,0,0,.2);overflow:hidden}
.search-input-wrap{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--g200)}
.search-input-wrap svg{flex-shrink:0;color:var(--g400)}
.search-input{flex:1;border:none;outline:none;font-size:15px;color:var(--navy);font-family:inherit;background:transparent}
.search-input::placeholder{color:var(--g400)}
.search-kbd{padding:2px 8px;background:var(--g100);border:1px solid var(--g200);border-radius:5px;font-size:10px;font-weight:600;color:var(--g500)}
.search-results{max-height:440px;overflow-y:auto}
.search-section{padding:8px 18px 4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--g500)}
.search-result{display:flex;align-items:center;gap:10px;padding:9px 18px;cursor:pointer;transition:background .1s}
.search-result:hover,.search-result.focused{background:var(--g100)}
.sr-icon{width:30px;height:30px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.sr-title{font-size:13px;font-weight:500;color:var(--navy)}
.sr-sub{font-size:11px;color:var(--g500);margin-top:1px}
.sr-tag{margin-left:auto;flex-shrink:0}
.search-empty{padding:28px;text-align:center;font-size:13px;color:var(--g500)}
.search-footer{padding:9px 18px;border-top:1px solid var(--g100);display:flex;gap:12px;font-size:11px;color:var(--g500)}
.search-footer kbd{background:var(--g100);border:1px solid var(--g200);border-radius:4px;padding:1px 5px;font-size:10px}

/* ══ ÄRENDESTATUS ══ */
.status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:12px;font-size:11px;font-weight:600}
.status-pill.open{background:#FEF3C7;color:#92400E}
.status-pill.in-progress{background:#EFF6FF;color:#1E40AF}
.status-pill.closed{background:#F0FDF4;color:#166534}
.status-dot-open{background:#F59E0B}
.status-dot-progress{background:#3B82F6}
.status-dot-closed{background:#22C55E}
.status-selector{display:flex;gap:4px;margin-top:6px}
.ss-btn{padding:5px 10px;border-radius:8px;font-size:11px;font-weight:500;cursor:pointer;border:1.5px solid var(--g200);background:#fff;color:var(--g500);font-family:inherit;transition:all .12s}
.ss-btn:hover{border-color:var(--navy);color:var(--navy)}
.ss-btn.active-open{background:#FEF3C7;border-color:#F59E0B;color:#92400E}
.ss-btn.active-progress{background:#EFF6FF;border-color:#3B82F6;color:#1E40AF}
.ss-btn.active-closed{background:#F0FDF4;border-color:#22C55E;color:#166534}

/* ══ SEARCH BTN IN TOPBAR ══ */
.topbar-search-btn{display:flex;align-items:center;gap:6px;padding:5px 12px;border:1px solid var(--g200);border-radius:8px;background:#fff;color:var(--g500);font-size:12px;cursor:pointer;font-family:inherit;transition:all .12s}
.topbar-search-btn:hover{border-color:var(--navy);color:var(--navy)}
.topbar-search-btn .search-shortcut{background:var(--g100);border:1px solid var(--g200);border-radius:4px;padding:1px 5px;font-size:10px;font-weight:700}

/* ══ PERSONAL DROPDOWN I ÄRENDE ══ */
.assign-dropdown{position:relative}
.assign-selected{display:flex;align-items:center;gap:8px;padding:9px 12px;border:1.5px solid var(--g200);border-radius:8px;cursor:pointer;background:#fff;transition:border-color .12s;min-height:38px}
.assign-selected:hover{border-color:var(--navy)}
.assign-selected.open{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.assign-avatar{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.assign-name{font-size:13px;color:var(--navy);flex:1}
.assign-placeholder{font-size:13px;color:var(--g400);flex:1}
.assign-menu{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1px solid var(--g200);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:100;overflow:hidden;max-height:260px;overflow-y:auto}
.assign-option{display:flex;align-items:center;gap:10px;padding:10px 14px;cursor:pointer;transition:background .1s}
.assign-option:hover{background:var(--g100)}
.assign-option.selected{background:var(--blue-pale)}
.assign-option-name{font-size:13px;font-weight:500;color:var(--navy)}
.assign-option-role{font-size:11px;color:var(--g500);margin-top:1px}
.assign-option-props{font-size:10px;color:var(--blue);margin-top:2px}

/* ══ ARBETSVY — ÄRENDEN PER PERSON ══ */
.workload-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:16px}
.workload-card{background:#fff;border:1px solid var(--g200);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.wc-header{padding:12px 14px;border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:10px}
.wc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.wc-name{font-size:13px;font-weight:600;color:var(--navy)}
.wc-role{font-size:11px;color:var(--g500);margin-top:1px}
.wc-body{padding:8px 0}
.wc-issue{display:flex;align-items:center;gap:8px;padding:7px 14px;border-bottom:0.5px solid var(--g100);cursor:pointer;transition:background .1s}
.wc-issue:hover{background:var(--g100)}
.wc-issue:last-child{border-bottom:none}
.wc-empty{padding:16px 14px;font-size:12px;color:var(--g500);text-align:center}

/* ══════════════════════════════════════════════════════════════════════════
   MOBIL — GENERELLA RÄTTNINGAR (≤ 700 px)

   Framtaget genom att köra det byggda paketet i 390 px och gå igenom alla 16
   vyer i menyn. Två mönster återkom nästan överallt, och de sitter i delade
   komponenter — därför ett block här i stället för en lapp per vy.
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:700px){

  /* 1. TOPPLISTEN rymdes inte i 13 av 16 vyer. Den är en flexrad med fast
     höjd och utan radbrytning, så knapparna till höger (+ Felanmälan, Ny
     besiktning, Kopiera felanmälningslänk …) sköts utanför skärmkanten med
     mellan 25 och 159 px beroende på vy — i Hyresgäster gick knappen inte
     att nå alls. Nu får listen brytas på flera rader och växa i höjd.
     Höger-gruppen har ingen egen klass i markupen, därav :not(.tb-title). */
  .topbar{height:auto;min-height:var(--tb);flex-wrap:wrap;padding:8px 12px;row-gap:8px}
  .tb-title{font-size:14px;flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar>div:not(.tb-title){flex:1 1 100%;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:8px;min-width:0}
  .tb-right{min-width:0}
  /* "Ctrl K" är meningslöst på en telefon och tog 45 px. */
  .topbar-search-btn{min-height:36px}
  .topbar-search-btn .search-shortcut{display:none}

  /* 2. TRYCKYTOR. Filterknapparna i Ärenden, Komponenter, Leverantörer och
     Dokument var 25–30 px höga, och ikonknapparna på dokumentraderna 24×24.
     Rekommenderad minsta yta för ett finger är 44 px; 36 är en kompromiss
     som rymmer de långa filterraderna utan att de tar halva skärmen. */
  .btn{min-height:36px}
  .ss-btn,.comp-filter-btn,.doc-filter-btn{min-height:36px;padding:8px 14px;font-size:12px}
  .doc-action-btn{width:36px;height:36px}

  /* 3. NYCKELTALSRUTOR. Etiketterna är versaler med teckenmellanrum, och ett
     långt ord som HYRESINTÄKT/MÅN blir bredare än sin spalt. Låt det brytas
     i stället för att trycka ut hela raden utanför skärmen. */
  .stat{padding:12px}
  .stat-label{overflow-wrap:anywhere}
}

/* 3D-vyn måste få fingret själv. Utan touch-action:none tolkar webbläsaren
   drag och nyp över canvasen som sidscroll och sidzoom, och gesterna i
   viewer.js får aldrig se rörelsen — modellen går inte att styra på en
   telefon. Gäller alla skärmstorlekar: en dator med pekskärm har samma
   problem. */
#three-canvas{touch-action:none}