/* bartender.css — BarTender-likt skal för etikettdesignern.
   Allt är scopat under .bt-app och prefixat med bt- för att INTE krocka
   med Bootstrap eller site.css. Värden tagna verbatim från godkänd mockup. */

.bt-app{
  --bt-chrome:#2b579a; --bt-chrome-d:#1e3f73;
  --bt-ribbon:#fafafa; --bt-ribbon-line:#d9d9d9;
  --bt-panel:#f5f5f5; --bt-panel-hd:#e9e9e9; --bt-border:#cfcfcf;
  --bt-ink:#222; --bt-muted:#666; --bt-workspace:#8f8f8f;
  --bt-hover:#eaf1fb; --bt-sel:#dceafb; --bt-sel-b:#2b579a;

  position:fixed; inset:0;
  font-family:'Segoe UI',system-ui,sans-serif; font-size:13px; color:var(--bt-ink);
  display:flex; flex-direction:column; overflow:hidden; background:#e6e6e6;
}
.bt-app *{box-sizing:border-box;}

/* Title bar */
.bt-titlebar{height:30px;background:var(--bt-chrome);color:#fff;display:flex;align-items:center;
      padding:0 12px;font-size:12.5px;gap:8px;flex-shrink:0;}
.bt-titlebar .bt-dot{margin-left:auto;display:flex;gap:8px;color:#cdd9ee;}

/* Ribbon */
.bt-ribbon{background:var(--bt-ribbon);border-bottom:1px solid var(--bt-ribbon-line);flex-shrink:0;}
.bt-tabs{display:flex;gap:2px;padding:0 8px;border-bottom:1px solid var(--bt-ribbon-line);height:30px;align-items:flex-end;}
.bt-tab{padding:6px 16px;font-size:12.5px;color:var(--bt-muted);cursor:pointer;border:1px solid transparent;border-bottom:none;border-radius:4px 4px 0 0;}
.bt-tab.bt-active{background:#fff;color:var(--bt-chrome);font-weight:600;border-color:var(--bt-ribbon-line);position:relative;top:1px;}
.bt-ribbon-body{display:flex;align-items:stretch;padding:6px 4px;gap:0;min-height:84px;}
.bt-group{display:flex;flex-direction:column;align-items:center;padding:0 10px;border-right:1px solid #e6e6e6;}
.bt-group-row{display:flex;gap:4px;flex:1;align-items:flex-start;}
.bt-group-label{font-size:10.5px;color:var(--bt-muted);margin-top:4px;}
.bt-rb{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;
      width:60px;padding:6px 4px;border-radius:4px;cursor:pointer;text-align:center;border:1px solid transparent;}
.bt-rb:hover{background:var(--bt-hover);border-color:#bcd3f3;}
.bt-rb i{font-size:22px;color:var(--bt-chrome);}
.bt-rb span{font-size:10.5px;line-height:1.1;color:#333;}
.bt-rb.bt-sm{flex-direction:row;width:auto;padding:4px 8px;gap:6px;}
.bt-rb.bt-sm i{font-size:15px;}
.bt-rb.bt-primary i{color:#fff;} .bt-rb.bt-primary{background:#2e8b57;border-color:#27764a;}
.bt-rb.bt-primary span{color:#fff;font-weight:600;}

/* Body */
.bt-body{flex:1;display:flex;min-height:0;}
.bt-toolbox{width:46px;background:#f0f0f0;border-right:1px solid var(--bt-border);display:flex;flex-direction:column;align-items:center;padding-top:6px;gap:2px;flex-shrink:0;}
.bt-tool{width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;color:#444;font-size:17px;}
.bt-tool:hover{background:var(--bt-hover);} .bt-tool.bt-active{background:var(--bt-sel);color:var(--bt-chrome);border:1px solid #b9d2f2;}

.bt-workspace{flex:1;background:var(--bt-workspace);display:flex;align-items:center;justify-content:center;overflow:auto;
      background-image:radial-gradient(circle,#9d9d9d 1px,transparent 1px);background-size:18px 18px;}
.bt-label{width:360px;height:200px;background:#fff;box-shadow:0 6px 22px rgba(0,0,0,.35);position:relative;border:1px solid #bbb;}
.bt-label .bt-ph{position:absolute;border:1px dashed #2b579a;background:rgba(43,87,154,.05);padding:2px 6px;font-size:13px;}
.bt-label .bt-txt{position:absolute;font-weight:600;}
.bt-label .bt-qr{position:absolute;width:64px;height:64px;background:
      repeating-linear-gradient(0deg,#000 0 4px,#fff 4px 8px),
      repeating-linear-gradient(90deg,#000 0 4px,#fff 4px 8px);background-blend-mode:multiply;border:3px solid #fff;}

/* Right panels */
.bt-right{width:300px;border-left:1px solid var(--bt-border);background:var(--bt-panel);display:flex;flex-direction:column;flex-shrink:0;}
.bt-panel{border-bottom:1px solid var(--bt-border);display:flex;flex-direction:column;}
.bt-panel-hd{background:var(--bt-panel-hd);padding:6px 10px;font-size:11.5px;font-weight:600;color:#444;display:flex;align-items:center;gap:6px;}
.bt-panel-bd{padding:8px 10px;}
.bt-tpl{padding:7px 9px;border:1px solid #e0e0e0;border-radius:4px;background:#fff;margin-bottom:5px;cursor:pointer;font-size:12.5px;}
.bt-tpl:hover{background:var(--bt-hover);} .bt-tpl.bt-sel{border:1px solid var(--bt-sel-b);background:var(--bt-sel);}
.bt-tpl small{color:var(--bt-muted);}
.bt-dtabs{display:flex;gap:2px;margin-bottom:8px;}
.bt-dtab{flex:1;text-align:center;padding:5px;font-size:12px;border:1px solid var(--bt-border);background:#ececec;cursor:pointer;border-radius:4px;}
.bt-dtab.bt-active{background:#fff;border-bottom-color:#fff;font-weight:600;color:var(--bt-chrome);}
.bt-field{display:flex;gap:6px;margin-bottom:8px;}
.bt-field input{flex:1;padding:5px 8px;border:1px solid var(--bt-border);border-radius:4px;font-size:12.5px;}
.bt-field button{background:var(--bt-chrome);color:#fff;border:none;border-radius:4px;padding:5px 10px;cursor:pointer;}
.bt-kv{font-size:12px;color:#333;margin:3px 0;} .bt-kv b{color:#000;}

/* Status bar */
.bt-status{height:26px;background:var(--bt-chrome-d);color:#dfe8f6;display:flex;align-items:center;gap:18px;padding:0 12px;font-size:11.5px;flex-shrink:0;}
.bt-status .bt-seg{display:flex;align-items:center;gap:5px;} .bt-status .bt-seg b{color:#fff;}
.bt-status .bt-right-seg{margin-left:auto;}
.bt-status select{background:#24467a;color:#fff;border:1px solid #3a5d96;border-radius:4px;font-size:11.5px;padding:1px 6px;line-height:1.4;}
.bt-status select:focus{outline:none;border-color:#6f93c8;}

/* --- Integration: koppling mot befintlig funktion --- */
/* Bootstrap-flikarna i datapanelen får samma look som mockupens bt-dtab */
.bt-dtab.active{background:#fff;border-bottom-color:#fff;font-weight:600;color:var(--bt-chrome);}
/* Datapanelen växer och scrollar */
.bt-panel.bt-grow{flex:1;min-height:0;}
.bt-panel.bt-grow .bt-panel-bd{flex:1;overflow-y:auto;}
/* Mall-dropdown i Mallbibliotek-panelen */
.bt-tplselect{width:100%;font-size:12.5px;padding:5px 8px;border:1px solid var(--bt-border);border-radius:4px;background:#fff;}
/* Ribbon-dropdown (BC-fält) ska ligga under knappen */
.bt-rb-dd{position:relative;}
/* Konva-scenen centrerad i arbetsytan */
.bt-workspace > #konvaStage{margin:auto;}

/* Datapanelens flikar (Bootstrap nav-pills) i BarTender-stil */
.bt-dtabs.nav-pills{gap:2px;margin-bottom:8px;flex-wrap:nowrap;}
.bt-dtabs.nav-pills .nav-item{flex:1;}
.bt-dtabs.nav-pills .nav-link{width:100%;padding:5px 6px;font-size:12px;border:1px solid var(--bt-border);background:#ececec;color:#444;border-radius:4px;}
.bt-dtabs.nav-pills .nav-link.active{background:#fff;border-bottom-color:#fff;font-weight:600;color:var(--bt-chrome);}

/* "Fäst rutnät" aktivt: label-designer togglar .btn-light på #btnSnap */
.bt-rb.btn-light{background:var(--bt-sel);border-color:#b9d2f2;}

/* Ribbon-dropdowns (BC-fält, Ny etikett): KOMPAKT — mindre luft i höjdled, INGEN scroll.
   OBS: site.css har en mer specifik regel (#bcFieldDropdown .dropdown-item, 8px) som
   annars vinner — därför ID i selektorerna nedan, så dessa slår den. Bredden orörd. */
.bt-app .dropdown-menu{padding-top:3px;padding-bottom:3px;}
.bt-app .dropdown-menu .dropdown-item,
.bt-app #bcFieldDropdown .dropdown-item,
.bt-app #newLabelSizes .dropdown-item{padding-top:5px;padding-bottom:5px;line-height:1.35;}
.bt-app .dropdown-menu .dropdown-header,
.bt-app #bcFieldDropdown .dropdown-header{padding-top:6px;padding-bottom:2px;}
.bt-app .dropdown-menu .dropdown-divider{margin:3px 0;}

/* ===== Admin i BarTender-stil (egna literal-färger, ej .bt-app-scopade vars) ===== */
body.adm-page{background:#f5f5f7;}
.adm-titlebar{height:32px;background:#263238;color:#fff;display:flex;align-items:center;padding:0 14px;gap:8px;font-size:12.5px;}
.adm-titlebar .brand{font-weight:600}
.adm-titlebar .spacer{margin-left:auto}
.adm-titlebar a{color:#cdd9ee;text-decoration:none;font-size:12px}
.adm-titlebar a:hover{color:#fff}
.adm-wrap{max-width:1000px;margin:22px auto;padding:0 18px;}
.adm-tabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px;border:0;}
.adm-tabs .nav-link{display:flex;align-items:center;gap:6px;padding:8px 14px;font-size:13px;border:1px solid #cfcfcf;background:#ececec;color:#444;border-radius:8px;cursor:pointer;}
.adm-tabs .nav-link:hover{background:#f5f8ff}
.adm-tabs .nav-link.active{background:#fff;color:#2b579a;font-weight:600;border-color:#2b579a;}
.adm-card{background:#fff;border:1px solid #cfcfcf;border-radius:12px;box-shadow:0 1px 3px rgba(0,0,0,.05),0 6px 18px rgba(0,0,0,.05);padding:18px 20px;}
.adm-card-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.adm-card-hd h6{margin:0;font-weight:600;font-size:1.05rem;}
.adm-wrap .btn-primary{--bs-btn-bg:#2b579a;--bs-btn-border-color:#2b579a;--bs-btn-hover-bg:#1e3f73;--bs-btn-hover-border-color:#1e3f73;}
.pill-out{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600}
.pill-zpl{background:#e8f0fe;color:#1b4ea8}
.pill-xl{background:#e7f6ec;color:#1e7d44}

/* Mappträd i Spara-dialogen */
.folder-tree{max-height:170px;overflow:auto;font-size:.9rem;padding:4px;background:#fff;}
.folder-tree .fnode{display:flex;align-items:center;gap:5px;padding:3px 6px;border-radius:4px;cursor:pointer;white-space:nowrap;}
.folder-tree .fnode:hover{background:#eaf1fb;}
.folder-tree .fnode.sel{background:#dceafb;outline:1px solid #2b579a;}
.folder-tree .fnode i.bi-folder{color:#e0a32e;}
.folder-tree .fnode.root i{color:#888;}

/* Mallbiblioteks-trädet i panelen */
#templateTree{max-height:240px;border:0;}
.folder-tree .fnode.tmpl-leaf i{color:#6c8cba;}