/* Rapport v853 — 2026-10-04 | Städning steg 3. */
/* Rapport v852 — 2026-10-04 | Städning steg 2. */
/* Rapport v851 — 2026-10-04 | Städning: regler för dialogen Text och bild borttagna. */
/* Rapport v804 — 2026-10-02 | Ramar och blågrå ytor som variabler (färgteman). */
/* Rapport v803 — 2026-10-02 | Neutrala bakgrunder som variabler (Färga även bakgrunderna). */
/* Rapport v802 — 2026-10-02 | Färgteman: accentfärger som variabler (tools/gen/palette_vars.py). */
/* Rapport v801 — 2026-10-02 | Döda selektorer i selektorlistor borttagna (bara sådana alla webbläsare förstår).
   v800 — Städad: överskrivna deklarationer och regler som aldrig kan matcha borttagna. */
/* Rapport v747 — 2026-09-30 | Ikonreferenser ?v=241. */
/*
Rapport v700 — 2026-09-28 | En publicerad demokälla för alla; originalbilder utan omfärgning.
Rapport v698 — 2026-09-28 | Gäster redigerar isolerad sessionsdata; inga privata API-anrop eller databasskrivningar.
Rapport v697 — 2026-09-28 | Tre demokunder för 2024–2026 och skrivskyddad gästdemo.
*/

.header-field-control-row{
  display:flex;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  flex-wrap:nowrap;
}
.header-field-control-row > select,
.header-field-control-row > input{
  flex:1 1 auto;
  width:auto;
  min-width:0;
}
.header-field-control-row > button{
  flex:0 0 auto;
  margin:0;
}

html.auth-checking body{visibility:hidden!important}:root{--ink:#252525;--muted:#667078;--line:var(--datoden-bg-d7dee5,#d7dee5);--brand:#252525;--paper:var(--datoden-bg-ffffff,#fff);--bg:var(--datoden-bg-f3f6f8,#f3f6f8);}*{box-sizing:border-box;}body{margin:0;background:var(--bg);color:var(--ink);font-family:Segoe UI,Arial,sans-serif;}header{background:linear-gradient(135deg,#252525,#3a3a3a);color:#fff;padding:12px 24px 10px;position:sticky;top:0;z-index:5;box-shadow:0 2px 12px #0002;}.topline{display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap;}h1{font-size:20px;margin:0;font-weight:650;}.tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;position:relative;}.tool-buttons{display:flex;flex-direction:row;gap:5px;justify-content:flex-end;position:relative;}.tool-buttons button{display:inline-flex;align-items:center;justify-content:center;}.button-icon{color:#fff;font-family:"Segoe UI Symbol","Arial Unicode MS",sans-serif;font-size:24px;line-height:1;}input[type=search]{width:min(330px,75vw);border:0;border-radius:8px;padding:10px 12px;font-size:14px;}body>header .tool-buttons button,body>header .settings-tabs button,body>header nav button{border:1px solid #ffffff44;background:#ffffff1a;color:#fff;border-radius:8px;padding:9px 12px;cursor:pointer;font-size:13px;}body>header .tool-buttons button:hover,body>header .settings-tabs button:hover,body>header nav button:hover{background:var(--sub-datoden-interaction);border-color:var(--sub-datoden-interaction);}nav{display:flex;gap:6px;overflow-x:auto;padding-top:14px;scrollbar-width:thin;}nav button{white-space:nowrap;padding:6px 12px;min-width:72px;line-height:1.15;}nav button small{display:block;margin-top:3px;font-size:10px;font-weight:500;opacity:.9;}nav button.active{background:var(--datoden-bg-ffffff,#fff);color:var(--brand);border-color:var(--datoden-bg-ffffff,#fff);font-weight:650;}.header-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:8px;padding:10px;background:transparent;border-radius:10px;}.company-picker{margin-top:8px;}.company-picker label{color:#fff;font-size:12px;}.company-picker select{min-width:220px;border:0;border-radius:6px;padding:8px;font:inherit;color:var(--ink);background:var(--datoden-bg-ffffff,#fff);}.header-field{display:flex;flex-direction:column;gap:4px;min-width:0;}.header-field > span{color:#fff;font-size:11px;}.header-field:first-child > span{font-size:0;}.header-field input,.header-field select{width:100%;min-width:0;border:0;border-radius:6px;padding:8px;font:inherit;color:var(--ink);background:var(--datoden-bg-ffffff,#fff);}.orderer-tools{margin-top:0;}.orderer-tools label{color:#fff;font-size:12px;}.orderer-tools select{min-width:190px;border:0;border-radius:6px;padding:8px;font:inherit;color:var(--ink);background:var(--datoden-bg-ffffff,#fff);}.settings-tabs{overflow-x:auto;margin-top:8px;padding-bottom:4px;}.settings-tabs button{white-space:nowrap;padding:7px 12px;}.settings-tabs button.active{background:var(--datoden-bg-ffffff,#fff);color:var(--brand);border-color:var(--datoden-bg-ffffff,#fff);font-weight:700;}.settings-panel{margin-top:0;padding:0 10px 8px;border-radius:10px;}.settings-panel[hidden]{display:none;}.collapsible-body{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}.customer-panel>.company-picker{margin-top:0;}.customer-panel>.header-form{margin-top:8px;}.collapsible-body select{min-width:190px;border:0;border-radius:6px;padding:8px;font:inherit;color:var(--ink);background:var(--datoden-bg-ffffff,#fff);}.inline-entry{min-width:180px;border:0;border-radius:6px;padding:8px;font:inherit;color:var(--ink);background:var(--datoden-bg-ffffff,#fff);}.shared-description-tools{display:block;margin-top:8px;padding:0 10px 8px;border-radius:10px;}.shared-company-data-tools{display:block;margin-top:8px;padding:0 10px 8px;border-radius:10px;}.print-company{display:none;}.report-header{display:grid;grid-template-columns:180px minmax(260px,1fr) 280px;align-items:center;min-height:84px;background:var(--datoden-bg-ffffff,#fff);}.report-logo{display:flex;align-items:center;justify-content:flex-start;padding:10px 14px;min-height:84px;}.report-logo img{max-width:150px;max-height:64px;object-fit:contain;}.report-title{padding:12px 18px;font-size:23px;font-weight:750;letter-spacing:.2px;text-align:center;}.report-details{align-self:stretch;display:grid;grid-template-columns:1fr auto;align-content:center;gap:6px 16px;padding:12px 14px;font-size:13px;}.report-details span:nth-child(odd){text-align:right;}.report-details span:nth-child(even){text-align:right;min-width:82px;display:flex;align-items:center;justify-content:flex-end;gap:6px;}.report-details select{width:82px;border:1px solid #8db7c5;border-radius:4px;padding:3px 4px;font:inherit;color:inherit;background:var(--datoden-bg-f7fcfd,#f7fcfd);transform:translateY(-2px);}main{max-width:1400px;margin:12px auto;padding:0 18px 28px;}.notice{font-size:12px;color:var(--muted);margin:0 0 10px;}.sheet-card{background:var(--paper);border-radius:12px;overflow:auto;}table{border-collapse:collapse;min-width:100%;table-layout:fixed;}td{border:1px solid var(--line);padding:6px 8px;height:26px;vertical-align:middle;white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;background:var(--datoden-bg-ffffff,#fff);}table col:first-child,table td:first-child{display:none;}td.empty{background:var(--datoden-bg-fbfcfd,#fbfcfd);}.cell-editor{width:100%;min-width:70px;border:1px solid #8db7c5;border-radius:4px;padding:4px 5px;font:inherit;color:inherit;background:var(--datoden-bg-f7fcfd,#f7fcfd);}.auto-company-cell{min-width:150px;white-space:nowrap;}.auto-company-cell .cell-editor{min-width:130px;}.auto-company-heading{font-weight:700;white-space:nowrap;}#sheet table col:nth-child(2){width:160px !important;}#sheet table col:nth-child(3){width:180px !important;}#sheet table col:nth-child(4){width:135px !important;}#sheet table col:nth-child(5){width:380px !important;}#sheet table col:nth-child(6){width:130px !important;}#sheet table tr:first-child td{height:34px;white-space:nowrap;font-weight:700;}.cell-editor:focus{outline:2px solid #0b5b73;background:var(--datoden-bg-ffffff,#fff);}textarea.cell-editor{display:block;resize:vertical;overflow:hidden;}#sheet,#sheet table,#sheet td,.sheet-card,.settings-panel,.header-form,.shared-description-tools,.shared-company-data-tools{border:0 !important;box-shadow:none !important;}#sheet .cell-editor,#sheet .extra-hours-editor{border:1px solid #8db7c5;background:var(--datoden-bg-f7fcfd,#f7fcfd);}.report-header{border-bottom:0;}.report-details{border-left:0;}.sort-button{width:100%;padding-block:0;padding-right:0;font:inherit;font-weight:700;text-align:left;cursor:pointer;}.footer{display:none;}#sheet table tbody tr.summary-row td,#sheet table tbody tr.empty-entry-row td{border:0;background:var(--datoden-bg-ffffff,#fff);}.print-extra-value{display:none;}.print-footer{display:none;}#settingsTabs button[data-panel]::after{display:inline-block;font-size:.9em;line-height:1;transition:transform .15s ease;}#settingsTabs button[data-panel][aria-expanded="true"]::after{content:"▾";}@media screen and (max-width:768px){.tools{position:relative !important;display:flex !important;flex-direction:row !important;align-items:center !important;gap:5px !important;width:100% !important;z-index:50;}.tool-buttons{display:flex !important;flex:1 1 auto !important;flex-direction:row !important;grid-template-columns:none !important;gap:5px !important;width:auto !important;min-width:0;}.tool-buttons button{flex:1 1 0 !important;width:auto !important;min-width:0 !important;height:40px;padding:7px 8px !important;display:flex;align-items:center;justify-content:center;white-space:nowrap;}#search{display:none !important;}#mobileSearchOverlay{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.68);padding:14px;align-items:flex-start;}#mobileSearchBox{width:100%;display:flex;gap:7px;padding-top:6px;position:relative;z-index:9999;}#mobileSearchInput{flex:1 1 auto;min-width:0;height:44px;border:0;border-radius:7px;padding:0 12px;font-size:16px;outline:none;background:var(--datoden-bg-ffffff,#fff);color:#111;}#mobileSearchClose{flex:0 0 44px;width:44px;height:44px;border:0;border-radius:7px;font-size:23px;cursor:pointer;}}@media screen and (max-width:600px){.tool-buttons button{flex:0 0 40px !important;width:40px !important;padding:0 !important;}.tool-buttons button .button-icon,.tool-buttons button .button-icon-svg{margin:0 !important;}.tool-buttons button{font-size:0 !important;}.tool-buttons button .button-icon{font-size:20px !important;}.tools{justify-content:flex-end !important;}}#tabs button{flex:0 0 auto !important;width:78px !important;min-width:78px !important;max-width:78px !important;}#tabs .month-toggle-button{width:auto !important;min-width:92px !important;max-width:none !important;padding-left:12px !important;padding-right:12px !important;}#tabs.months-hidden button:not(.month-toggle-button){display:none !important;}@media screen and (max-width:768px){#tabs button{flex:0 0 auto !important;width:68px !important;min-width:68px !important;max-width:68px !important;}#tabs .month-toggle-button{width:auto !important;min-width:92px !important;max-width:none !important;}}#settingsTabs{flex-wrap:wrap !important;overflow:visible !important;width:100% !important;}#settingsTabs>button[data-panel]{flex:0 0 auto !important;width:auto !important;min-width:max-content !important;max-width:none !important;white-space:nowrap !important;}#settingsTabs .settings-toggle-button{flex:0 0 auto !important;width:auto !important;min-width:92px !important;max-width:none !important;white-space:nowrap !important;padding-left:12px !important;padding-right:12px !important;}#settingsTabs.settings-tabs-hidden>button[data-panel]{display:none !important;}#tabs .month-toggle-button::after,#settingsTabs .settings-toggle-button::after{content:"−" !important;display:inline-block !important;margin-left:7px !important;font-size:1.05em !important;font-weight:700 !important;line-height:1 !important;}#tabs.months-hidden .month-toggle-button::after,#settingsTabs.settings-tabs-hidden .settings-toggle-button::after{content:"+" !important;}.button-icon-svg{display:inline-block;width:18px;height:18px;flex:0 0 18px;vertical-align:middle;}@media screen and (max-width:600px){.tool-buttons button .button-icon-svg{width:20px !important;height:20px !important;}}#settingsTabs>button[data-panel]::after{content:"" !important;display:inline-block !important;width:7px !important;height:7px !important;margin-left:8px !important;border-right:1.8px solid currentColor !important;border-bottom:1.8px solid currentColor !important;vertical-align:2px;transform:rotate(45deg);transition:transform .16s ease;transform-origin:center;}#settingsTabs>button[data-panel][aria-expanded="false"]::after{transform:rotate(225deg);}.topline>div:first-child{align-self:center;}#mobileSearchOverlay{display:none !important;}@media screen and (max-width:768px){#mobileSearchOverlay.open{display:flex !important;}}@media screen and (max-width:768px){main{box-sizing:border-box !important;width:100% !important;max-width:100% !important;margin:0 !important;padding:8px !important;overflow-x:hidden !important;}}#sheet.sheet-card{position:relative !important;}#sheet .sort-core-status{margin-left:6px !important;color:#777 !important;font-weight:700 !important;white-space:nowrap !important;}#sheet .sort-clear{color:#777 !important;font-size:14px !important;font-weight:400 !important;}#sheet .sort-clear:hover{background:rgba(0,0,0,.07) !important;color:#555 !important;}#sheet .sort-button{justify-content:flex-start !important;}button.remove-action-icon,button[data-floppy-icon="1"]{display:inline-flex !important;align-items:center !important;justify-content:center;gap:6px !important;}button.remove-action-icon::before{align-items:center !important;justify-content:center !important;box-sizing:border-box !important;width:18px !important;height:18px !important;flex:0 0 18px !important;margin:0 !important;border:1.5px solid currentColor !important;border-radius:50% !important;font-weight:500 !important;}button[data-floppy-icon="1"]>.button-icon-svg{display:block !important;width:18px !important;height:18px !important;flex:0 0 18px !important;margin:0 !important;}.tool-buttons button{gap:6px !important;}.tool-buttons button>.button-icon,.tool-buttons button>.button-icon-svg{margin:0 !important;}button.remove-action-icon::before{line-height:14px !important;padding:0 0 2px 0 !important;font-family:Arial,sans-serif !important;font-size:15px !important;text-align:center !important;}button.remove-action-icon::before{content:none !important;display:none !important;}button.remove-action-icon>.remove-icon-svg{display:block !important;width:18px !important;height:18px !important;flex:0 0 18px !important;margin:0 !important;}.report-details>span:has(.extra-hours-manual){text-align:right !important;}.report-details>span:has(.extra-hours-manual){display:flex !important;justify-content:flex-end !important;width:100% !important;}.report-details .extra-hours-manual-persistent{box-sizing:border-box !important;display:block !important;width:138px !important;min-width:138px !important;max-width:138px !important;height:30px !important;margin-left:auto !important;margin-right:0 !important;padding:5px 7px !important;text-align:right !important;}.report-details input.extra-hours-manual-persistent{box-sizing:border-box !important;display:block !important;width:82.8px !important;min-width:82.8px !important;max-width:82.8px !important;height:26px !important;margin-left:auto !important;margin-right:0 !important;padding:5px 7px !important;text-align:right !important;}.report-details select.extra-hours-editor{display:inline-block !important;visibility:visible !important;opacity:1 !important;}@media screen and (min-width:769px){#sheet td:nth-child(4) input,#sheet td:nth-child(4) select,#sheet td:nth-child(5) input,#sheet td:nth-child(5) textarea,#sheet td:nth-child(6) input,#sheet td:nth-child(6) select{max-width:100% !important;box-sizing:border-box !important;}}@media screen and (min-width:769px){#sheet table{width:100% !important;max-width:100% !important;table-layout:fixed !important;}#sheet,#sheet.sheet-card{max-width:100% !important;overflow-x:hidden !important;}#sheet th,#sheet td,#sheet input,#sheet select,#sheet textarea{min-width:0 !important;max-width:100% !important;box-sizing:border-box !important;}}@media screen and (min-width:769px){#sheet table col:nth-child(1){width:0 !important;}#sheet table col:nth-child(2){width:20% !important;}#sheet table col:nth-child(3){width:20% !important;}#sheet table col:nth-child(4){width:9.6% !important;}#sheet table col:nth-child(5){width:43.2% !important;}#sheet table col:nth-child(6){width:7.2% !important;}}#sheet table tbody tr.summary-row td:last-child{text-align:right !important;}#descriptionTools{flex-wrap:wrap;align-items:end;gap:8px;}#descriptionTools label{flex:0 0 100%;}#descriptionSelect,#newDescription{min-width:180px;}#newDescription{padding:7px 9px;}#sheet input.cell-editor[list="reportDescriptionChoices"]{cursor:text;}.description-click-picker{position:absolute;background:var(--datoden-bg-ffffff,#fff);}.description-click-picker button{cursor:pointer;}.description-click-picker{color:#222 !important;}.description-click-picker button{color:#222 !important;background:var(--datoden-bg-ffffff,#fff)!important;font-family:inherit !important;font-size:13px !important;font-weight:400 !important;line-height:1.35 !important;}.description-click-picker button:hover,.description-click-picker button:focus{color:#111 !important;background:var(--datoden-bg-eef5f7,#eef5f7)!important;}#sheet tbody tr{content-visibility:auto;contain-intrinsic-size:32px;}#sheet input,#sheet select,#sheet textarea{contain:layout style !important;}#sheet table tbody tr:not(.summary-row)>td{vertical-align:top !important;align-content:start !important;}#sheet table tbody tr:not(.summary-row)>td>input,#sheet table tbody tr:not(.summary-row)>td>select,#sheet table tbody tr:not(.summary-row)>td>textarea{margin-top:0 !important;vertical-align:top !important;}@media screen and (min-width:769px){#sheet table tbody tr:not(.summary-row){align-items:start !important;}#sheet table tbody tr:not(.summary-row)>td{align-self:start !important;}}#sheet textarea.cell-editor,#sheet input.cell-editor{-webkit-user-select:text !important;user-select:text !important;}#sheet{contain:layout paint style !important;}#sheet table{contain:layout style !important;}#sheet tbody tr{contain:layout style !important;}@media screen and (min-width:769px){#settingsTabs{visibility:visible !important;opacity:1 !important;}#settingsTabs.settings-tabs-hidden{display:flex !important;}#settingsTabs>button:not(.settings-toggle-button){display:inline-flex !important;visibility:visible !important;opacity:1 !important;}#settingsTabs>.settings-toggle-button{display:none !important;}}.account-overlay{position:fixed;inset:0;display:none;align-items:flex-start;justify-content:center;z-index:13000;padding:70px 18px 18px;background:rgba(0,0,0,.52);}.account-overlay.open{display:flex;}.account-page{width:min(620px,100%);max-height:calc(100vh - 90px);overflow:auto;padding:24px;border-radius:12px;background:var(--datoden-bg-ffffff,#fff);color:#222;box-shadow:0 12px 36px rgba(0,0,0,.28);}.account-page-head{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px;}.account-page h2{margin:0;font-size:22px;}.account-info-grid{display:grid;grid-template-columns:150px 1fr;gap:12px 16px;}.account-info-grid dt{font-weight:700;color:#666;}.account-info-grid dd{margin:0;}@media(max-width:768px){.account-page{padding:18px;}.account-info-grid{grid-template-columns:1fr;}}html[data-theme="light"] header{background:var(--datoden-bg-f2f3f4,#f2f3f4)!important;color:#222 !important;}html[data-theme="light"] header input,html[data-theme="light"] header select{background:var(--datoden-bg-ffffff,#fff)!important;color:#222 !important;}@media screen{html[data-theme="dark"] body,html[data-theme="dark"] main{background:var(--datoden-bg-1f2021,#1f2021)!important;color:#e9e9e9 !important;}html[data-theme="dark"] #sheet,html[data-theme="dark"] #sheet.sheet-card{background:var(--datoden-bg-292a2b,#292a2b)!important;color:#e9e9e9 !important;}html[data-theme="dark"] #sheet table,html[data-theme="dark"] #sheet thead,html[data-theme="dark"] #sheet tbody,html[data-theme="dark"] #sheet tr,html[data-theme="dark"] #sheet th,html[data-theme="dark"] #sheet td{background:var(--datoden-bg-292a2b,#292a2b)!important;color:#e9e9e9 !important;}html[data-theme="dark"] #sheet .report-header,html[data-theme="dark"] #sheet .report-details{background:var(--datoden-bg-292a2b,#292a2b)!important;color:#e9e9e9 !important;}html[data-theme="dark"] #sheet input,html[data-theme="dark"] #sheet select,html[data-theme="dark"] #sheet textarea{background:var(--datoden-bg-353738,#353738)!important;color:#f2f2f2 !important;border-color:var(--datoden-bg-62686b,#62686b) !important;}html[data-theme="dark"] #sheet input::placeholder,html[data-theme="dark"] #sheet textarea::placeholder{color:#9a9a9a !important;opacity:1 !important;}html[data-theme="dark"] #sheet select option{background:var(--datoden-bg-353738,#353738)!important;color:#f2f2f2 !important;}html[data-theme="dark"] .description-click-picker button:hover,html[data-theme="dark"] .description-click-picker button:focus{background:var(--datoden-bg-484b4d,#484b4d)!important;color:#fff !important;}html[data-theme="dark"] .account-page select,html[data-theme="dark"] .account-page input{background:var(--datoden-bg-353738,#353738)!important;color:#f2f2f2 !important;border-color:var(--datoden-bg-62686b,#62686b) !important;}}@media screen and (max-width:600px){header{position:relative !important;padding-top:58px !important;}}@media screen and (max-width:600px){.tool-buttons button{display:inline-flex !important;align-items:center !important;justify-content:center !important;}.tool-buttons button .button-icon-svg,.tool-buttons button>svg,.tool-buttons button>img{display:block !important;flex:0 0 auto !important;vertical-align:middle !important;}}@media screen and (max-width:600px){.tool-buttons button{position:relative !important;}.tool-buttons button .button-icon-svg,.tool-buttons button>svg,.tool-buttons button>img{position:absolute !important;left:50% !important;top:50% !important;margin:0 !important;padding:0 !important;transform:translate(-50%,-50%) !important;transform-origin:center center !important;}.tool-buttons button .button-text{display:none !important;}}#ordererTools,#descriptionTools{display:block!important}.admin-panel-intro{font-style:italic;font-size:13px;margin:2px 0 10px;opacity:.9}.admin-section{padding:12px 0;border-top:1px solid rgba(255,255,255,.14)}.admin-section:first-of-type{border-top:0}.admin-section-title{font-size:15px;font-weight:700;margin-bottom:8px}.admin-primary-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px}.admin-primary-row select{min-width:230px}.admin-create-row,.customer-create-row{display:none;flex-wrap:wrap;align-items:center;gap:9px;width:100%;min-width:0;margin-top:10px}.admin-create-row.open,.customer-create-row.open{display:flex}.admin-create-row>input,.customer-create-row>input{flex:1 1 120px;min-width:0;max-width:100%}.admin-create-row>button,.customer-create-row>button{flex:0 0 auto}.admin-danger-link{background:var(--datoden-bg-4a4a4a,#4a4a4a)!important}.header-permanent-bar{justify-content:space-between;gap:12px;padding:10px 16px;background:inherit;}.header-permanent-title{margin:0;font-size:18px;font-weight:700;white-space:nowrap;}#headerMasterToggle svg{margin:0;}body.header-master-collapsed #headerMasterToggle svg{transform:rotate(180deg)}body.header-master-collapsed>header{min-height:0 !important;height:auto !important;padding:0 !important;}@media screen and (max-width:600px){.header-permanent-bar{padding:9px 15px}.header-permanent-title{font-size:17px}button[id*="toggle"][data-label*="Visa"],button[aria-label*="Visa/dölj"]{display:none !important;}}.header-permanent-bar{user-select:none !important;-webkit-user-select:none !important;}#headerMasterToggle{border:0 !important;border-radius:0 !important;background:transparent !important;box-shadow:none !important;color:inherit !important;pointer-events:none !important;}#headerMasterToggle:hover,#headerMasterToggle:focus{background:transparent !important;}body.header-master-collapsed>header>*:not(.header-permanent-bar){display:none !important;}body.header-master-collapsed>header>*{display:revert;}.header-permanent-bar{width:100% !important;max-width:none !important;box-sizing:border-box !important;margin-left:0 !important;margin-right:0 !important;align-self:stretch !important;}body>header{width:100% !important;max-width:none !important;box-sizing:border-box !important;}@media screen and (max-width:600px){.header-permanent-bar{margin-top:0 !important;}body:not(.header-master-collapsed)>header{min-height:0 !important;height:auto !important;}}#headerMasterCollapsible{margin-top:0 !important;padding-top:0 !important;}body>header,body:not(.header-master-collapsed)>header,body.header-master-collapsed>header{padding-top:0 !important;margin-top:0 !important;}body>header>.header-permanent-bar{margin:0 !important;}body:not(.header-master-collapsed) #headerMasterCollapsible{margin:0 !important;padding-top:0 !important;}body>header>.header-permanent-bar{max-width:none !important;align-self:stretch !important;margin-left:calc(0px - var(--header-side-gap,0px)) !important;margin-right:calc(0px - var(--header-side-gap,0px)) !important;}body.header-master-collapsed>header>.header-permanent-bar{margin-left:0 !important;margin-right:0 !important;max-width:100% !important;overflow:hidden !important;}body.header-master-collapsed>header{box-sizing:border-box !important;overflow:hidden !important;}body.header-master-collapsed .header-permanent-title{min-width:0 !important;overflow:hidden !important;text-overflow:ellipsis !important;white-space:nowrap !important;}.contextual-delete[hidden]{display:none!important}.contextual-delete{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}.function-info-icon{margin:0 3px!important;}.function-info-backdrop{display:none;position:fixed;inset:0;z-index:90000;background:rgba(0,0,0,.4);align-items:center;justify-content:center;padding:16px;box-sizing:border-box}.function-info-backdrop.open{display:flex!important}.function-info-modal{width:min(430px,100%);padding:18px;background:var(--datoden-bg-ffffff,#fff);color:#222;border-radius:10px;box-shadow:0 14px 40px rgba(0,0,0,.45)}.function-info-modal-head{display:flex;justify-content:space-between;align-items:center;gap:12px;}.function-info-modal-title{font-size:17px;font-weight:700}.function-info-modal-close{width:32px!important;height:32px!important;min-width:32px!important;padding:0!important;border:0!important;background:transparent!important;color:inherit!important;font-size:24px!important}.function-info-modal-text{font-size:14px;line-height:1.5}.contextual-delete::before,.contextual-delete::after{content:none!important;display:none!important}.remove-action-icon .remove-icon-svg{display:block!important;flex:0 0 auto!important;margin:0!important}.contextual-delete + .function-info-icon{display:inline-flex!important;}.contextual-delete[hidden] + .function-info-icon{display:none!important;}.remove-action-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important}.remove-action-icon>.remove-icon-svg{display:block!important;width:20px!important;height:20px!important;min-width:20px!important;flex:0 0 20px!important;margin:0!important;padding:0!important}.account-info-grid input{width:100%;box-sizing:border-box;padding:10px 11px;border:1px solid var(--datoden-bg-bbbbbb,#bbb);border-radius:6px;font:inherit}.function-info-icon{margin-left:-5px!important;margin-right:0!important;}.admin-primary-row{column-gap:6px!important;}.admin-primary-row .function-info-icon + *{margin-left:7px!important;}@media(max-width:600px){.function-info-icon{margin-left:-4px!important;margin-right:2px!important;}}@media screen and (max-width:600px){#tabs button[data-month-toggle],#tabs button[aria-label*="Visa/dölj"],#tabs button[aria-label*="Visa / dölj"]{display:none!important;}}.customer-remove-btn[hidden]{display:none!important}.company-picker{display:flex;flex-wrap:wrap;align-items:center;gap:9px}#settingsTabs>button svg,.settings-tabs>button svg{display:block!important;flex:0 0 auto!important;align-self:center!important;}#settingsTabs>button::before,#settingsTabs>button::after,.settings-tabs>button::before,.settings-tabs>button::after{vertical-align:middle!important;}@media screen and (min-width:601px){body>header,body:not(.header-master-collapsed)>header,body.header-master-collapsed>header{box-sizing:border-box!important;width:var(--locked-header-width)!important;max-width:var(--locked-header-width)!important;min-width:0!important;margin-left:auto!important;margin-right:auto!important;overflow:hidden!important;}body>header>.header-permanent-bar,body:not(.header-master-collapsed)>header>.header-permanent-bar,body.header-master-collapsed>header>.header-permanent-bar{box-sizing:border-box!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:0!important;left:auto!important;right:auto!important;transform:none!important;}}#settingsTabs,.settings-tabs{display:flex!important;align-items:center!important;gap:8px!important;}#settingsTabs>button,.settings-tabs>button{position:relative!important;display:inline-flex!important;align-items:center!important;justify-content:flex-start!important;flex:0 0 auto!important;width:auto!important;min-width:0!important;max-width:none!important;height:36px!important;min-height:36px!important;padding:0 30px 0 14px!important;box-sizing:border-box!important;white-space:nowrap!important;line-height:1!important;}#settingsTabs>button svg,.settings-tabs>button svg,#settingsTabs>button .chevron,.settings-tabs>button .chevron{position:absolute!important;right:11px!important;width:11px!important;height:11px!important;min-width:11px!important;max-width:11px!important;margin:0!important;padding:0!important;transform-origin:50% 50%!important;}#settingsTabs>button::after,.settings-tabs>button::after{position:absolute!important;right:11px!important;width:8px!important;height:8px!important;min-width:8px!important;margin:0!important;transform-origin:50% 50%!important;}#settingsTabs>button.active,.settings-tabs>button.active,#settingsTabs>button[aria-expanded="true"],.settings-tabs>button[aria-expanded="true"],#settingsTabs>button[aria-expanded="false"],.settings-tabs>button[aria-expanded="false"]{padding-left:14px!important;padding-right:30px!important;width:auto!important;}@media(max-width:600px){#settingsTabs,.settings-tabs{gap:5px!important}#settingsTabs>button,.settings-tabs>button{height:34px!important;min-height:34px!important;padding-left:10px!important;padding-right:26px!important;}#settingsTabs>button svg,.settings-tabs>button svg,#settingsTabs>button .chevron,.settings-tabs>button .chevron{right:9px!important;width:10px!important;height:10px!important;}#settingsTabs>button::after,.settings-tabs>button::after{right:9px!important}}#settingsTabs>button svg,.settings-tabs>button svg,#settingsTabs>button .chevron,.settings-tabs>button .chevron{top:calc(50% - 2px)!important;}#settingsTabs>button::after,.settings-tabs>button::after{top:calc(50% - 2px)!important;}#settingsTabs button[data-panel]::after{content:""!important;position:absolute!important;right:11px!important;top:50%!important;width:7px!important;height:7px!important;margin:0!important;padding:0!important;border-right:2px solid currentColor!important;border-bottom:2px solid currentColor!important;box-sizing:border-box!important;transform-origin:50% 50%!important;}#settingsTabs button[data-panel][aria-expanded="false"]::after{transform:translateY(-65%) rotate(45deg)!important;}#settingsTabs button[data-panel][aria-expanded="true"]::after{transform:translateY(-35%) rotate(225deg)!important;}#settingsTabs button[data-panel],#settingsTabs button[data-panel].active,#settingsTabs button[data-panel][aria-expanded="true"],#settingsTabs button[data-panel][aria-expanded="false"],.settings-tabs button[data-panel],.settings-tabs button[data-panel].active{font-weight:400!important;}#headerForm select[data-ref="A2"],#headerForm select[data-ref="A2"] option{font-family:inherit!important;font-size:16px!important;font-weight:400!important;line-height:1.25!important;}.report-header{position:relative!important}.tool-buttons{align-items:center}.report-actions-below-header{display:flex;align-items:center;justify-content:flex-end;gap:7px;box-sizing:border-box;margin:8px auto 8px;padding:0;}.report-actions-below-header button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;white-space:nowrap!important;}@media(max-width:600px){.report-actions-below-header{width:100%;padding:0 10px;justify-content:flex-end;margin-top:7px;}}.report-sheet-search{display:flex;align-items:center;gap:6px;margin-right:4px}.report-sheet-search input{width:285px;height:40px;box-sizing:border-box;padding:8px 11px;border:1px solid var(--datoden-bg-bbbbbb,#bbb);border-radius:6px;font:inherit}.report-sheet-search button{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;height:40px!important;white-space:nowrap!important}.report-sheet-search svg{display:block;width:18px;height:18px}.year-search-results{display:none;width:min(540px,calc(100vw - 24px));max-height:390px;overflow:auto;background:var(--datoden-bg-ffffff,#fff);color:#222;border-radius:8px;box-shadow:0 10px 30px #0006;padding:7px}.year-search-results.open{display:block}.year-search-result{display:block!important;width:100%;text-align:left;border:0;background:transparent;color:inherit;padding:9px 10px;border-radius:5px;cursor:pointer}.year-search-result:hover{background:var(--datoden-bg-eeeeee,#eee)}.year-search-result strong,.year-search-result small{display:block}.year-search-result small{opacity:.75;margin-top:3px}@media(max-width:600px){.report-actions-below-header{flex-wrap:wrap}.report-sheet-search{width:100%;margin:0}.report-sheet-search input{flex:1;width:auto;min-width:0}.report-sheet-search button span{display:none}.report-sheet-search button{width:40px!important;padding:0!important}}.report-sheet-search>button{display:none!important;}#yearSearch,#sheetSearch{background-image:url("../media/icons.svg?v=287#icon-search")!important;background-repeat:no-repeat!important;background-position:11px 50%!important;background-size:18px 18px!important;padding-left:38px!important;}@media(prefers-color-scheme:dark){body:not(.theme-light) #yearSearch,body:not(.theme-light) #sheetSearch{background-image:url("../media/icons.svg?v=287#icon-search")!important;}}#reportActionsBelowHeader{position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:7px!important;box-sizing:border-box!important;margin:10px auto!important;padding:0!important;clear:both!important;float:none!important;transform:none!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;z-index:10!important;}#reportActionsBelowHeader .report-sheet-search{margin:0!important;}.header-permanent-actions{margin-left:auto;display:flex;align-items:center;justify-content:flex-end;}.header-permanent-actions #yearSearch{width:min(410px,32vw);}.header-permanent-actions #undo{flex:0 0 auto;}.header-permanent-bar{align-items:center!important;}.header-permanent-bar .header-master-toggle{flex:0 0 auto!important;margin-left:10px!important;}@media(max-width:600px){.header-permanent-actions #yearSearch{width:min(42vw,190px);}.header-permanent-actions #undo span{display:none!important;}}.header-permanent-actions{gap:10px!important;}.header-permanent-actions #undo{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;}.header-permanent-actions #undo .button-icon,.header-permanent-actions #undo .button-icon-svg,.header-permanent-actions #undo svg{display:block!important;flex:0 0 auto!important;margin:0!important;}@media(max-width:600px){.header-permanent-actions #yearSearch{display:none!important;}.header-permanent-actions #mobileYearSearchToggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;height:40px!important;padding:0!important;border-radius:7px!important;}#mobileYearSearchRow{display:none;flex:0 0 100%;width:100%;order:20;padding:7px 0 0;box-sizing:border-box;}#mobileYearSearchRow.open{display:flex!important;}#mobileYearSearchRow #yearSearch{display:block!important;width:100%!important;max-width:none!important;min-width:0!important;height:40px!important;box-sizing:border-box!important;margin:0!important;}}@media(min-width:601px){#mobileYearSearchToggle,#mobileYearSearchRow{display:none!important}}@media(max-width:600px){#mobileYearSearchToggle,.header-permanent-actions #undo,.header-permanent-bar .header-master-toggle{width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;padding:0!important;margin:0!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;border-radius:7px!important;flex:0 0 40px!important;line-height:1!important;}.header-permanent-bar .header-master-toggle{position:relative!important;}.header-permanent-bar .header-master-toggle::before,.header-permanent-bar .header-master-toggle::after{position:absolute!important;left:50%!important;top:50%!important;margin:0!important;transform-origin:50% 50%!important;}.header-permanent-bar .header-master-toggle{margin-left:7px!important;}}@media(max-width:600px){#mobileYearSearchToggle,.header-permanent-actions #undo,.header-permanent-actions #headerMasterToggle{width:46px!important; min-width:46px!important; max-width:46px!important; height:46px!important; min-height:46px!important; max-height:46px!important;flex:0 0 40px!important;padding:0!important;margin:0!important;border-radius:7px!important;box-sizing:border-box!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:0!important;line-height:1!important;}.header-permanent-actions .account-menu-text,.header-permanent-actions #undo .undo-mobile-text{display:none!important;}#mobileYearSearchToggle svg,.header-permanent-actions #undo svg,.header-permanent-actions #headerMasterToggle svg{width:20px!important;min-width:20px!important;max-width:20px!important;height:20px!important;min-height:20px!important;max-height:20px!important;display:block!important;margin:0!important;padding:0!important;flex:0 0 20px!important;}.header-permanent-actions #headerMasterToggle{background:var(--button-bg,#454545)!important;color:inherit!important;border:0!important;}}@media(max-width:600px){#headerMasterToggle{min-height:40px!important;max-height:40px!important;border:0!important;border-radius:7px!important;background:var(--datoden-bg-454545,#454545)!important;color:#fff!important;box-sizing:border-box!important;}#headerMasterToggle:hover{background:var(--datoden-bg-505050,#505050)!important}#headerMasterToggle svg{min-width:20px!important;max-width:20px!important;margin:0!important;padding:0!important;}}.header-permanent-bar{cursor:default!important}.header-permanent-bar:focus{outline:none!important}#headerMasterToggle{cursor:pointer!important}@media(max-width:600px){#headerMasterToggle{pointer-events:auto!important;cursor:pointer!important;}.header-permanent-actions #headerMasterToggle{margin-left:0!important;margin-right:0!important;}}@media(max-width:600px){.header-permanent-bar,body.header-master-collapsed .header-permanent-bar{display:flex!important;align-items:center!important;gap:5px!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;}.header-permanent-title,body.header-master-collapsed .header-permanent-title{flex:1 1 auto!important;min-width:0!important;margin:0!important;}.header-permanent-actions,body.header-master-collapsed .header-permanent-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;flex:0 0 auto!important;margin-left:auto!important;margin-right:0!important;padding:0!important;transform:none!important;}#headerMasterToggle,body.header-master-collapsed #headerMasterToggle{flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;margin:0!important;padding:0!important;transform:none!important;}.header-permanent-actions #mobileYearSearchToggle,.header-permanent-actions #undo,body.header-master-collapsed .header-permanent-actions #mobileYearSearchToggle,body.header-master-collapsed .header-permanent-actions #undo{flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;margin:0!important;transform:none!important;}}@media(max-width:600px){.header-permanent-actions>#mobileYearSearchToggle,.header-permanent-actions>#undo{margin:0!important;flex:0 0 40px!important;width:40px!important;min-width:40px!important;max-width:40px!important;}}@media(max-width:600px){.header-permanent-actions{display:flex!important;align-items:center!important;justify-content:flex-start!important;width:auto!important;max-width:none!important;margin-left:auto!important;margin-right:0!important;padding:0!important;}#mobileYearSearchToggle,.header-permanent-actions #undo{position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;transform:none!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;flex:0 0 40px!important;margin:0!important;padding:0!important;}}@media(max-width:600px){.header-permanent-actions,body.header-master-collapsed .header-permanent-actions{gap:5px!important;}}@media(min-width:601px){#mobileMonthSearchToggle,#mobileMonthSearchRow{display:none!important;}}.month-toggle-button,.settings-toggle-button,button[aria-label="Visa eller dölj månadsknapparna"],button[aria-label="Visa eller dölj inställningsflikarna"]{display:none!important;}button[aria-label^="Visa/dölj"],button[aria-label^="Visa / dölj"],button[aria-label^="Visa eller dölj"]{display:none!important;}@media(min-width:601px){#headerMasterToggle{border:0!important;border-radius:7px!important;background:var(--datoden-bg-454545,#454545)!important;color:#fff!important;box-shadow:none!important;pointer-events:auto!important;cursor:pointer!important;}#headerMasterToggle:hover,#headerMasterToggle:focus{background:var(--datoden-bg-505050,#505050)!important;}#headerMasterToggle svg{min-height:20px!important;max-height:20px!important;margin:0!important;padding:0!important;}}@media(min-width:601px){.header-permanent-bar,body.header-master-collapsed .header-permanent-bar{display:flex!important;align-items:center!important;width:100%!important;overflow:visible!important;}.header-permanent-actions,body.header-master-collapsed .header-permanent-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;overflow:visible!important;}#headerMasterToggle,body.header-master-collapsed #headerMasterToggle{margin:0!important;flex:0 0 40px!important;}}@media(min-width:601px){.header-permanent-actions #undo{margin:0!important;}.header-permanent-bar,.header-permanent-actions,body>header{overflow:visible!important;}.header-permanent-bar{position:relative!important;z-index:20010!important;}}@media(min-width:601px){#headerMasterToggle{max-width:40px!important;flex:0 0 40px!important;box-sizing:border-box!important;}#headerMasterToggle svg{min-width:18px!important;max-width:18px!important;}}@media(min-width:601px){#headerMasterToggle{min-height:38px!important;max-height:38px!important;align-self:center!important;}}@media(min-width:601px){.header-permanent-bar,body.header-master-collapsed .header-permanent-bar{gap:7px!important;}.header-permanent-actions,body.header-master-collapsed .header-permanent-actions{gap:7px!important;margin-left:auto!important;margin-right:0!important;padding-left:0!important;padding-right:0!important;transform:none!important;}.header-permanent-actions #undo,body.header-master-collapsed .header-permanent-actions #undo{margin-left:0!important;margin-right:0!important;transform:none!important;}#headerMasterToggle,body.header-master-collapsed #headerMasterToggle{margin-left:0!important;margin-right:0!important;transform:none!important;}}@media screen and (min-width:601px){body>header{border-radius:0 0 18px 18px !important;}}@media(min-width:601px){#reportActionsBelowHeader::before{border-top-right-radius:18px!important;}#reportActionsBelowHeader::after{border-top-left-radius:18px!important;}#reportActionsBelowHeader .report-sheet-search{margin:0!important;}}@media(min-width:601px){#reportActionsBelowHeader{--report-tab-bg:var(--datoden-bg-292a2b,#292a2b);position:relative!important;box-sizing:border-box!important;z-index:4!important;}#reportActionsBelowHeader::before,#reportActionsBelowHeader::after{position:absolute!important;bottom:0!important;top:auto!important;width:22px!important;height:22px!important;background:transparent!important;pointer-events:none!important;}#reportActionsBelowHeader::before{left:-22px!important;border-bottom-right-radius:22px!important;box-shadow:11px 11px 0 11px var(--report-tab-bg)!important;}#reportActionsBelowHeader::after{right:-22px!important;border-bottom-left-radius:22px!important;box-shadow:-11px 11px 0 11px var(--report-tab-bg)!important;}main{margin-top:0!important;}}@media(min-width:601px){#reportActionsBelowHeader{align-self:center!important;}#reportActionsBelowHeader .report-sheet-search{width:auto!important;min-width:0!important;flex:0 0 auto!important;}}@media(min-width:601px){#reportActionsBelowHeader{inline-size:max-content!important;min-width:0!important;flex:none!important;}}@media(min-width:601px){#reportActionsBelowHeader{transform:none!important;}}@media(min-width:601px){#reportActionsBelowHeader{margin:18px auto 0!important;border:0!important;overflow:visible!important;}}@media(min-width:601px){#reportActionsBelowHeader{margin-top:9px!important;}}html[data-theme="light"] [data-account-action="logout"]{color:#222!important;}html[data-theme="light"] #customerPanel label,html[data-theme="light"] #customerPanel .header-form label,html[data-theme="light"] #customerPanel .company-picker label{color:#222!important;}html[data-theme="light"] #customerPanel #headerForm label.header-field,html[data-theme="light"] #customerPanel #headerForm label.header-field>span,html[data-theme="light"] #headerForm .header-field,html[data-theme="light"] #headerForm .header-field>span{color:#222!important;opacity:1!important;-webkit-text-fill-color:#222!important;}#settingsTabs,.settings-tabs{margin-bottom:12px!important;}.email-cc-label{display:inline-flex!important;align-items:center!important;gap:6px!important}#headerForm .header-field-label{display:inline-flex!important;align-items:center!important;gap:6px!important;}.function-info-modal-text{white-space:pre-line!important}.report-logo .custom-report-logo{display:block;max-width:150px;max-height:64px;object-fit:contain}#customerPanel #headerForm .header-field-label,
#customerPanel #headerForm .header-field-label>label,
#customerPanel #headerForm .email-cc-label {font-family:Arial,Helvetica,sans-serif!important;font-size:12px!important;font-weight:700!important;line-height:15px!important;letter-spacing:0!important;font-style:normal!important;text-transform:none!important;}html.hide-info-fields button.function-info-icon{display:none!important;visibility:hidden!important;pointer-events:none!important;}#functionInfoBackdrop .function-info-modal-text strong,#functionInfoBackdrop .function-info-modal-text b{font-weight:700!important}.print-footer a,.footer-column a{font:inherit!important;}.print-footer a u,.footer-column a u,.print-footer u,.footer-column u{text-decoration:underline!important;}.function-info-modal-text a,.print-footer a,.footer-column a{color:inherit!important;text-decoration:none!important}.function-info-modal-text a u,.print-footer a u,.footer-column a u{text-decoration:underline!important}.header-permanent-bar{flex-wrap:nowrap!important;}.header-permanent-actions{flex-wrap:nowrap!important;white-space:nowrap!important;flex:0 0 auto!important;min-width:0!important;}.header-permanent-actions #yearSearch,.header-permanent-actions input[type="search"]{min-width:80px!important;flex:1 1 260px!important;}@media (min-width:601px){.header-permanent-bar{min-width:0!important}.header-permanent-title{min-width:0!important;flex:1 1 auto!important}.header-permanent-actions{max-width:100%!important}}@media (min-width:601px){body>header .header-permanent-bar,body.header-master-collapsed>header .header-permanent-bar{display:grid!important;grid-template-columns:minmax(0,1fr) auto 40px!important;grid-template-rows:40px!important;align-items:center!important;column-gap:7px!important;width:100%!important;min-width:0!important;flex-wrap:nowrap!important;}body>header .header-permanent-title{grid-column:1!important;grid-row:1!important;min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;}body>header .header-permanent-actions,body.header-master-collapsed>header .header-permanent-actions{grid-column:2!important;grid-row:1!important;display:grid!important;grid-template-columns:minmax(120px,410px) max-content max-content!important;grid-auto-flow:column!important;align-items:stretch!important;gap:7px!important;width:auto!important;min-width:0!important;max-width:min(70vw,680px)!important;margin:0!important;padding:0!important;white-space:nowrap!important;}body>header .header-permanent-actions #yearSearch{grid-column:1!important;width:100%!important;min-width:120px!important;max-width:410px!important;height:40px!important;margin:0!important;}body>header .header-permanent-actions #undo{grid-column:2!important;width:auto!important;min-width:max-content!important;height:40px!important;margin:0!important;white-space:nowrap!important;}body>header #headerMasterToggle,body.header-master-collapsed>header #headerMasterToggle{grid-column:3!important;grid-row:1!important;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;max-height:40px!important;margin:0!important;}}
/* Sökmarkering */
#sheet td.match{background:color-mix(in srgb,var(--sub-datoden-interaction) .22,transparent)!important;box-shadow:inset 0 2px var(--sub-datoden-interaction),inset 0 -2px var(--sub-datoden-interaction)}
#sheet td.match+td.match{border-left-color:transparent!important}
.search-hit-focus>td{background:color-mix(in srgb,var(--sub-datoden-interaction) .30,transparent)!important;border-top:3px solid var(--sub-datoden-interaction)!important;border-bottom:3px solid var(--sub-datoden-interaction)!important}
.search-hit-focus>td:first-child{border-left:3px solid var(--sub-datoden-interaction)!important}
.search-hit-focus>td:last-child{border-right:3px solid var(--sub-datoden-interaction)!important}

/* Dölj databasstyrd text tills state är laddad */
html.db-state-loading body>header .topline h1,
html.db-state-loading body>header .header-permanent-title,
html.db-state-loading #sheet .report-title,
html.db-state-loading #sheet [data-editable-info],
html.db-state-loading .print-footer{visibility:hidden!important}

/* Logotypvarianter */

/* Mitt konto: exakt samma typografi som övriga headerkontroller */

/* Ny fysisk rapportflik — vinn över gamla transparent-regler */

/* Header collapse: endast innehållet under toppraden döljs */
.header-permanent-bar{display:flex!important}

body.header-master-collapsed>header>.header-permanent-bar{visibility:visible!important}

/* Toppraden ska ha identisk geometri öppen/stängd */
body>header>.header-permanent-bar,
body.header-master-collapsed>header>.header-permanent-bar{
 display:flex!important;
 align-items:center!important;
 width:100%!important;
 min-width:0!important;
 box-sizing:border-box!important;
}

body>header>.header-permanent-bar>.header-permanent-actions,
body.header-master-collapsed>header>.header-permanent-bar>.header-permanent-actions{
 display:flex!important;
 align-items:center!important;
 justify-content:flex-end!important;
 gap:7px!important;
 margin-left:auto!important;
 margin-right:0!important;
 width:auto!important;
 min-width:0!important;
 max-width:none!important;
 flex:0 0 auto!important;
 transform:none!important;
}

body>header>.header-permanent-bar .topline,
body.header-master-collapsed>header>.header-permanent-bar .topline{
 width:100%!important;
}

/* Collapse får endast påverka själva collapsible-blocket */
body.header-master-collapsed>header{width:auto!important;min-width:0!important;max-width:none!important}

/* Desktop: header följer samma maxbredd som innehållet */
@media(min-width:769px){
  body>header>.header-permanent-bar,
 body.header-master-collapsed>header>.header-permanent-bar{
  min-width:0!important;
 }
}

/* Header: identisk sidpadding öppen/stängd */
@media(min-width:769px){
  body>header>.header-permanent-bar,
 body:not(.header-master-collapsed)>header>.header-permanent-bar,
 body.header-master-collapsed>header>.header-permanent-bar{
  padding-left:0!important;
  padding-right:0!important;
  margin-left:0!important;
  margin-right:0!important;
  box-sizing:border-box!important;
 }
}

/* === KANONISK UI-BAS EFTER STÄDNING === */

/* Header desktop */
@media(min-width:769px){
 body>header,body:not(.header-master-collapsed)>header,body.header-master-collapsed>header{
  width:calc(100% - 36px)!important;max-width:1400px!important;min-width:0!important;
  margin-left:auto!important;margin-right:auto!important;padding-left:24px!important;padding-right:24px!important;
  box-sizing:border-box!important
 }
 body>header>.header-permanent-bar,body.header-master-collapsed>header>.header-permanent-bar{
  display:flex!important;align-items:center!important;width:100%!important;max-width:100%!important;
  margin:0!important;padding-left:0!important;padding-right:0!important;box-sizing:border-box!important
 }
}
#headerMasterCollapsible{display:block}
#headerMasterCollapsible.collapsed,body.header-master-collapsed>header>#headerMasterCollapsible{display:none!important}
#headerMasterToggle{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:40px!important;min-width:40px!important;height:40px!important;padding:0!important;margin:0!important}
#headerMasterToggle svg{display:block!important;width:20px!important;height:20px!important;transition:transform .18s ease}
#headerMasterToggle.collapsed svg{transform:rotate(180deg)}

/* Konto-dropdown */
@media(min-width:601px){
 body>header{position:relative!important;z-index:50000!important;overflow:visible!important}
  }

/* Popup-lager */
.account-overlay.open,.function-info-backdrop.open,#functionInfoBackdrop.open{position:fixed!important;z-index:2147483646!important}
.account-overlay.open .account-page,.function-info-backdrop.open .function-info-modal,#functionInfoBackdrop.open .function-info-modal{position:relative!important;z-index:2147483647!important}

/* Rapportactions: fysisk HTML-position + modern shape() */
@media(min-width:601px){
 #reportActionsBelowHeader{
  --tab-girth:12px;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;
  width:max-content!important;max-width:calc(100% - 32px)!important;margin-left:auto!important;margin-right:auto!important;
  padding:9px calc(14px + var(--tab-girth)) 10px!important;background:var(--paper,#fff)!important;border-radius:0!important;box-shadow:none!important;
  clip-path:shape(from bottom left,curve to var(--tab-girth) calc(100% - var(--tab-girth)) with var(--tab-girth) 100%,vline to var(--tab-girth),curve to calc(var(--tab-girth) * 2) 0 with var(--tab-girth) 0,hline to calc(100% - calc(var(--tab-girth) * 2)),curve to calc(100% - var(--tab-girth)) var(--tab-girth) with calc(100% - var(--tab-girth)) 0,vline to calc(100% - var(--tab-girth)),curve to 100% 100% with calc(100% - var(--tab-girth)) 100%)
 }
 #reportActionsBelowHeader::before,#reportActionsBelowHeader::after{content:none!important;display:none!important}
 html[data-theme="dark"] #reportActionsBelowHeader{background:var(--datoden-bg-292a2b,#292a2b)!important}
 @supports not (clip-path:shape(from top left,hline to 0)){#reportActionsBelowHeader{clip-path:none!important;padding-inline:14px!important;border-radius:12px 12px 0 0!important}}
}

/* Sortering */
#sheet .sort-button{position:relative!important;display:flex!important;align-items:center!important;width:100%!important;padding-block:6px!important;padding-right:48px!important;min-height:32px!important;margin:-2px -4px!important;box-sizing:border-box!important;text-align:left!important}
/* Utskriftsrubrikernas befintliga geometri bevaras; den centrala titelstilen gäller skärm. */
@media print{
 .sort-button{border:0;background:transparent;color:inherit;}
 #sheet .sort-button{padding-left:8px!important;border-radius:6px!important;}
}

#sheet .sort-core-status{position:absolute!important;right:6px!important;top:50%!important;transform:translateY(-50%)!important;display:inline-flex!important;align-items:center!important;gap:2px!important;font-size:12px!important;line-height:1!important}
#sheet .sort-clear{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-width:18px!important;width:18px!important;height:18px!important;padding:0!important;border-radius:5px!important;cursor:pointer!important}

/* Tema */
html[data-theme="dark"] .account-page,html[data-theme="dark"] .function-info-modal,html[data-theme="dark"] .description-click-picker,html[data-theme="dark"] .year-search-results{background:var(--datoden-bg-292a2b,#292a2b)!important;color:#e9e9e9!important;border-color:var(--datoden-bg-62686b,#62686b)!important}
html[data-theme="dark"] .description-click-picker button,html[data-theme="dark"] .year-search-result{background:transparent!important;color:#e9e9e9!important}
html[data-theme="dark"] .description-click-picker button:hover,html[data-theme="dark"] .year-search-result:hover{background:var(--datoden-bg-484b4d,#484b4d)!important;color:#fff!important}

.year-search-results{position:fixed!important;z-index:2147483600!important}

/* Mitt konto: aldrig dubbla linjer / ingen slutlinje på sista valet */
.account-page details:last-child{
 border-bottom:0!important;
 box-shadow:none!important;
}

/* Utfälld sektion: sista innehållsraden ska inte skapa en extra linje */
.account-page details[open] > :last-child,
.account-page details[open] > div:last-child,
.account-page details[open] > section:last-child{
 border-bottom:0!important;
 box-shadow:none!important;
}

/* Sista summary/menyvalet i respektive Mitt konto-vy */
.account-page details:last-of-type > summary,
.account-page [role="menu"] > :last-child{
 border-bottom:0!important;
}

/* Rapportflik: samma mellanrum Sök–Skicka som Skicka–Skriv ut */
#reportActionsBelowHeader .report-actions-buttons{
 display:flex!important;
 align-items:center!important;
 gap:8px!important;
}

/* Mitt konto: rätt element ritar separatorerna */

/* Databashantering: innehållsgriden ska inte rita en andra horisontell linje */

/* Text och bild: Sidfot är sista menyvalet och ska sakna slutlinje */

@media screen and (max-width:768px){
 body>header,
 body:not(.header-master-collapsed)>header,
 body.header-master-collapsed>header{
  width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;padding:8px 10px!important;box-sizing:border-box!important;overflow:visible!important
 }
 body>header>.header-permanent-bar,
 body.header-master-collapsed>header>.header-permanent-bar{
  width:100%!important;max-width:100%!important;min-width:0!important;
  margin:0!important;box-sizing:border-box!important;overflow:visible!important
 }
 body>header .topline{
  flex-direction:column!important;gap:7px!important;
  min-width:0!important;margin:0!important;padding:0!important
 }
 body>header .topline>div:first-child{width:100%!important;min-width:0!important}
 body>header h1{font-size:18px!important;}

 /* Dölj desktopplaceringen av yearSearch; raden öppnas under knapparna */
 #mobileYearSearchRow{display:none!important;}

 body>header .tools{width:100%!important;min-width:0!important;}

 /* Exakt en horisontell rad: Sök, Ångra, Mitt konto, pil */
 body>header .tool-buttons{
  grid-template-columns:40px 40px 40px 40px!important;
  max-width:100%!important;
  }

 #mobileYearSearchToggle svg,#undo svg,#headerMasterToggle svg{
  flex:0 0 20px!important
 }
    #headerMasterToggle{transform:none!important}

 /* Search row directly below the button row */

 /* Hide the mobile-only search button on desktop handled outside media */
}
@media screen and (min-width:769px){
 #mobileYearSearchToggle{display:none!important}
 #mobileYearSearchRow{display:contents!important}
}

@media screen and (max-width:768px){
 /* Fysisk ordning i HTML är nu: Sök, Ångra, Pil, Mitt konto */
 body>header .tool-buttons{
  width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important
 }

   #mobileYearSearchToggle,#undo,#headerMasterToggle{
  display:flex!important;align-items:center!important;justify-content:center!important;
 }
  #mobileYearSearchToggle svg,#undo svg,#headerMasterToggle svg{
  display:block!important;

  }
  }

@media screen and (max-width:768px){
 /* Ingen egen bakgrund eller extra högerpadding på top-header */
 body>header,
 body:not(.header-master-collapsed)>header,
 body.header-master-collapsed>header{
  padding-left:10px!important;
  padding-right:0!important;
  box-shadow:none!important
 }
 body>header>.header-permanent-bar,
 body.header-master-collapsed>header>.header-permanent-bar,
 body>header .topline{
  background:transparent!important;
  background-color:transparent!important;
  box-shadow:none!important
 }

 /* Titel + knappgrupp på exakt samma rad och vertikalt centrerade */
 body>header>.header-permanent-bar,
 body.header-master-collapsed>header>.header-permanent-bar{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  column-gap:8px!important;
  padding:0!important;
  min-height:40px!important
 }
 body>header>.header-permanent-bar>.topline{display:contents!important}

 body>header .topline>div:first-child{
  align-self:center!important;
  display:flex!important;
  align-items:center!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;padding:0!important
 }
 body>header h1{
  display:flex!important;
  align-items:center!important;
  height:40px!important;
  min-height:40px!important;
  margin:0!important;padding:0!important;
  line-height:1!important
 }

 body>header .tools{
  align-self:center!important;
  display:block!important;
  height:40px!important;
  margin:0!important;padding:0!important
 }

 #mobileYearSearchToggle,#undo,#headerMasterToggle{
  align-self:center!important;
  vertical-align:middle!important;

  top:auto!important;bottom:auto!important
 }

 /* Sökfältet är enda rad två */
  #mobileYearSearchRow.open{margin-right:10px!important}
}

@media screen and (max-width:768px){
 body>header .tool-buttons{
  display:flex!important;flex-flow:row nowrap!important;justify-content:flex-end!important;align-items:center!important;
  gap:7px!important;height:40px!important;margin:0!important;padding:0!important
 }
 #mobileYearSearchToggle,#undo,#headerMasterToggle{
  position:relative!important;flex:0 0 40px!important;
  width:40px!important;min-width:40px!important;max-width:40px!important;
  height:40px!important;min-height:40px!important;max-height:40px!important;
  margin:0!important;padding:0!important;box-sizing:border-box!important
 }

 #mobileYearSearchToggle svg,#undo svg,#headerMasterToggle svg{
  position:absolute!important;left:50%!important;top:50%!important;
  width:20px!important;height:20px!important;min-width:20px!important;max-width:20px!important;
  margin:0!important;padding:0!important;
  transform:translate(-50%,-50%)!important;transform-origin:center!important
 }
 #headerMasterToggle.collapsed svg{transform:translate(-50%,-50%) rotate(180deg)!important}
 #undo{font-size:0!important;text-indent:0!important;line-height:0!important}
 }

@media screen and (max-width:768px){
 /* Lite luft efter sista pilikonen mot högerkanten */
 body>header .tool-buttons{padding-right:8px!important}

 /* Sökfältet ska öppnas på en egen rad direkt under ikonraden */
 body>header>.header-permanent-bar,
 body.header-master-collapsed>header>.header-permanent-bar{
  grid-template-rows:40px auto!important
 }
   }

@media screen and (max-width:768px){
 /* Sökfältet är nu fysiskt syskon under toppradens ikonrad */
 body>header .topline{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  grid-template-rows:40px auto!important;
  align-items:center!important;
  column-gap:8px!important;
  width:100%!important
 }
 body>header .topline>div:first-child{grid-column:1!important;grid-row:1!important}
 body>header .tools{grid-column:2!important;grid-row:1!important}
 #mobileYearSearchRow{
  grid-column:1 / -1!important;
  grid-row:2!important;
  position:static!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  padding:0 8px 0 0!important;
  margin:0!important;
  box-sizing:border-box!important;
  transform:none!important
 }
 #mobileYearSearchRow.open{
  display:block!important;
  margin-top:7px!important
 }
 #mobileYearSearchRow #yearSearch{
  position:static!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:40px!important;
  margin:0!important;
  transform:none!important;
  box-sizing:border-box!important
 }
}

@media screen and (max-width:768px){
 body>header,
 body:not(.header-master-collapsed)>header,
 body.header-master-collapsed>header{
  background:var(--header-bg,#292a2b)!important;
  background-color:var(--header-bg,#292a2b)!important;
 }
 html[data-theme="light"] body>header,
 html[data-theme="light"] body:not(.header-master-collapsed)>header,
 html[data-theme="light"] body.header-master-collapsed>header{
  background:var(--datoden-bg-f2f3f4,#f2f3f4)!important;
  background-color:var(--datoden-bg-f2f3f4,#f2f3f4)!important;
 }
 html[data-theme="dark"] body>header,
 html[data-theme="dark"] body:not(.header-master-collapsed)>header,
 html[data-theme="dark"] body.header-master-collapsed>header{
  background:var(--datoden-bg-292a2b,#292a2b)!important;
  background-color:var(--datoden-bg-292a2b,#292a2b)!important;
 }

 /* Bara de inre top-headerlagren ska vara transparenta */
 body>header>.header-permanent-bar,
 body>header .topline{
  background:transparent!important;
  background-color:transparent!important;
 }
}

/* Summeringsrader ska aldrig visa kolumnrubriker */
#sheet tbody tr.summary-row>td::before{
 content:none!important;
 display:none!important;
}

.description-click-picker{
 z-index:2147483600!important;
 max-width:min(420px,calc(100vw - 16px))!important;
 max-height:min(320px,50vh)!important;
 overflow:auto!important;
 padding:6px!important;
 border:1px solid rgba(127,127,127,.35)!important;
 border-radius:8px!important;
 box-shadow:0 8px 24px rgba(0,0,0,.22)!important;
 box-sizing:border-box!important;
}
.description-click-picker button{
 display:block!important;width:100%!important;margin:0!important;padding:8px 10px!important;
 border:0!important;border-radius:5px!important;text-align:left!important;box-shadow:none!important
}
html[data-theme="light"] .description-click-picker{background:var(--datoden-bg-ffffff,#fff)!important;color:#222!important}
html[data-theme="light"] .description-click-picker button{background:var(--datoden-bg-ffffff,#fff)!important;color:#222!important}
html[data-theme="light"] .description-click-picker button:hover{background:var(--datoden-bg-eef1f3,#eef1f3)!important}
html[data-theme="dark"] .description-click-picker{background:var(--datoden-bg-292a2b,#292a2b)!important;color:#e9e9e9!important}
html[data-theme="dark"] .description-click-picker button{background:transparent!important;color:#e9e9e9!important}
html[data-theme="dark"] .description-click-picker button:hover{background:var(--datoden-bg-484b4d,#484b4d)!important}

.quantity-manual-wrap{align-items:center!important;gap:6px!important;}.quantity-manual-wrap .quantity-manual-editor{flex:1 1 auto!important;}
/* CSS flyttad från app.js vid städning */

 .quantity-manual-wrap{
   min-width:0!important;
 }
 .quantity-manual-wrap .quantity-manual-editor{
   display:block!important;
   min-width:0!important;
 }

 #sheet select.quantity-select{
   min-height:32px!important;
   height:32px!important;
   padding-top:3px!important;
   padding-bottom:3px!important;
   line-height:1.15!important;
 }
 #sheet select.quantity-select option{
   font-size:13px!important;
   line-height:1.15!important;
   padding-top:2px!important;
   padding-bottom:2px!important;
 }
 .quantity-manual-wrap{
   position:static!important;
   display:block!important;
   width:100%!important;
 }
 .quantity-manual-wrap .quantity-manual-editor{
   width:100%!important;
   max-width:100%!important;
   box-sizing:border-box!important;
 }

 #sheet .timbank-change-value .extra-hours-manual-persistent.quantity-manual-editor{
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  height:32px!important;
  min-height:32px!important;
  margin:0!important;
  box-sizing:border-box!important;
 }

/* === KANONISK RAPPORTFÄLT-GEOMETRI ===
   Alla enradiga rapportfält: 30px.
   Beskrivning: startar på 30px men får växa. */
@media screen and (min-width:769px){
 #sheet tbody tr:not(.summary-row) select.cell-editor,
 #sheet tbody tr:not(.summary-row) input.cell-editor{
  box-sizing:border-box!important;
  height:32px!important; min-height:32px!important; max-height:32px!important;
  margin:0!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
  line-height:20px!important;
  vertical-align:top!important;
 }
 #sheet tbody tr:not(.summary-row) textarea.cell-editor{

  margin:0!important;

  overflow:hidden!important;
  vertical-align:top!important;
 }
}

/* Förändring timbank: 30px, normal ram, ingen extra färgad fokus-ring. */
#sheet .report-details .timbank-change-value select.extra-hours-editor,
#sheet .timbank-change-value select.extra-hours-editor{
 box-sizing:border-box!important;
 height:30px!important;
 min-height:30px!important;
 max-height:30px!important;
 padding:4px 5px!important;
 line-height:20px!important;
 margin:0!important;
 transform:none!important;
}
#sheet .report-details .timbank-change-value select.extra-hours-editor:focus,
#sheet .report-details .timbank-change-value select.extra-hours-editor:focus-visible,
#sheet .timbank-change-value select.extra-hours-editor:focus,
#sheet .timbank-change-value select.extra-hours-editor:focus-visible{
 outline:none!important;
 box-shadow:none!important;
}

/* v04 — Förändring timbank: kompaktare bredd */
#sheet .report-details .timbank-change-value select.extra-hours-editor,
#sheet .timbank-change-value select.extra-hours-editor{
 width:82px!important;
 min-width:82px!important;
 max-width:82px!important;
}

/* v05 — manuellt Förändring timbank-fält efter + */
#sheet .report-details .timbank-change-value input.extra-hours-manual-persistent.quantity-manual-editor,
#sheet .timbank-change-value input.extra-hours-manual-persistent.quantity-manual-editor{
  box-sizing:border-box!important;
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  height:30px!important;
  min-height:30px!important;
  max-height:30px!important;
  margin:0!important;
  padding:4px 5px!important;
  line-height:20px!important;
  text-align:right!important;
  outline:none!important;
  box-shadow:none!important;
}
#sheet .report-details .timbank-change-value input.extra-hours-manual-persistent.quantity-manual-editor:focus,
#sheet .report-details .timbank-change-value input.extra-hours-manual-persistent.quantity-manual-editor:focus-visible,
#sheet .timbank-change-value input.extra-hours-manual-persistent.quantity-manual-editor:focus,
#sheet .timbank-change-value input.extra-hours-manual-persistent.quantity-manual-editor:focus-visible{
  outline:none!important;
  outline-offset:0!important;
  box-shadow:none!important;
}

/* v09 — samma textstorlek i båda väljarna */
#sheet .report-details .timbank-change-value select.extra-hours-editor,
#sheet .timbank-change-value select.extra-hours-editor,
#sheet select.quantity-select{
  font-size:13px!important;
}

/* === SLUT PÅ KANONISK v10 CLEAN === */

/* Text och bild > Väljaralternativ */

/* v12 — Väljaralternativ som undergrupp under Innehåll */

/* Desktop v18 — top-header återställd utan påverkan på mobil */
@media screen and (min-width:769px){
 body>header .tools{
  margin-left:auto!important;
  width:auto!important;
  min-width:0!important;
 }
 body>header .tool-buttons{
  display:flex!important;
  flex-flow:row nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:7px!important;
  width:auto!important;
  min-width:0!important;
  margin-left:auto!important;
  margin-right:0!important;
  padding:0!important;
 }
 body>header .tool-buttons #yearSearch{
  display:block!important;
  order:initial!important;
  width:285px!important;
  min-width:180px!important;
  max-width:285px!important;
  height:40px!important;
  margin:0!important;
  flex:0 1 285px!important;
  box-sizing:border-box!important;
 }
 body>header .tool-buttons #undo{
  order:initial!important;
 }
}

/* Desktop v19 — Mitt konto-dropdown ska ligga ovanför header/innehåll även vid hover */

/* Desktop v20 — vinn över gamla regeln som kräver .mobile-account-open */

/* Desktop v26 — andra klicket döljer dropdownen på riktigt, inte bara z-index/open-klass */

/* Desktop v29 — mouseleave motsvarar alltid "musen är utanför", aldrig ett nytt hoverläge */

/* Desktop v30 — efter andra klick: hover ignoreras tills pekaren faktiskt lämnat kontomenyn */

/* Desktop v31 — hover är grundläget; gamla click-close/suppress states används inte längre */

/* Desktop v32 — CSS är ensam källa för hover efter andra klicket */

/* Desktop v33 — efter andra klicket: endast riktig hover styr musläget */

/* Desktop v34 — Mitt konto-dropdown ovanför allt rapportinnehåll */
@media screen and (min-width:769px){
 body>header{
  position:relative!important;
  z-index:2147480000!important;
  overflow:visible!important;
  isolation:auto!important;
 }
 body>header>.header-permanent-bar,
 body>header .topline,
 body>header .tools,
 body>header .tool-buttons{
  position:relative!important;
  overflow:visible!important;
  z-index:auto!important;
 }
   body>main,
 #reportActionsBelowHeader{
  position:relative!important;
  z-index:1!important;
 }
}

/* Desktop v35 — portalen ligger direkt under body och kan inte hamna bakom #sheet */

/* Desktop v36 — dropdownens högerkant linjerar exakt med knappens högerkant */

/* Mobil v39 — när rapportverktygen annars bryts till två rader används sökknapp.
   Desktop >=769px är helt orörd. */
@media screen and (max-width:768px){
 #reportActionsBelowHeader{
  flex-flow:row nowrap!important;
 }

 /* Dölj det breda månadssökfältet i verktygsraden. */

 /* Visa befintlig mobila sökknapp i samma format som top-headern. */
 #mobileMonthSearchToggle{

  align-items:center!important;
  justify-content:center!important;
  flex:0 0 40px!important;
  width:40px!important;
  min-width:40px!important;
  max-width:40px!important;
  height:40px!important;
  min-height:40px!important;
  max-height:40px!important;
  margin:0!important;
  padding:0!important;
  border-radius:7px!important;
 }

 #mobileMonthSearchToggle svg{
  display:block!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
 }

 #reportActionsBelowHeader .report-actions-buttons{
  display:flex!important;
  flex:0 0 auto!important;
  align-items:center!important;
  gap:7px!important;
  margin:0!important;
 }

 /* Sökfältet som öppnas av knappen ligger på egen rad först när användaren begär det. */
  #mobileMonthSearchRow.open{
  flex:0 0 100%!important;
  width:min(340px,calc(100vw - 32px))!important;
 }

}

/* Mobil v40 — faktisk sökknapp i rapportverktygen */
#mobileMonthSearchToggle{display:none!important}
@media screen and (max-width:768px){
 #reportActionsBelowHeader #mobileMonthSearchToggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 40px!important;
  width:40px!important;min-width:40px!important;max-width:40px!important;
  height:40px!important;min-height:40px!important;max-height:40px!important;
  margin:0!important;padding:0!important;
 }
 #reportActionsBelowHeader #mobileMonthSearchToggle svg{
  width:20px!important;height:20px!important;margin:0!important;display:block!important;
 }
}

/* Mobil v41b — endast sökfältets öppning under befintliga knappar.
   Befintlig knappplacering, flikbredd och övrig layout lämnas orörd. */
@media screen and (max-width:768px){
 #mobileMonthSearchRow{
  display:none!important;
  flex:0 0 100%!important;
  width:100%!important;
  box-sizing:border-box!important;
 }
 #mobileMonthSearchRow.open{
  display:block!important;
  margin:7px 0 0!important;
  padding:0!important;
 }
 #mobileMonthInlineSearch{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  height:40px!important;
  margin:0!important;
  box-sizing:border-box!important;
  padding:8px 11px 8px 36px!important;
  border-radius:6px!important;
  font:inherit!important;
  background-image:url("../media/icons.svg?v=287#icon-search")!important;
  background-repeat:no-repeat!important;
  background-position:11px 50%!important;
  background-size:18px 18px!important;
 }
}

/* Mobil v41c — sökraden ska alltid ligga på en egen rad UNDER knapparna */
@media screen and (max-width:768px){
  #reportActionsBelowHeader #mobileMonthSearchRow{
  order:99!important;
  flex:0 0 100%!important;
  width:100%!important;
  min-width:100%!important;
  max-width:100%!important;
  clear:both!important;
 }
 #reportActionsBelowHeader #mobileMonthSearchRow.open{
  display:block!important;
 }
}

/* Mobil v41d — gamla rapportsök-containern får inte uppta osynlig plats */
@media screen and (max-width:768px){
 #reportActionsBelowHeader .report-sheet-search{
  display:none!important;
  width:0!important;
  min-width:0!important;
  max-width:0!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  flex:0 0 0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
 }

 /* De synliga knapparna får hela raden och centreras i den befintliga fliken. */
 #reportActionsBelowHeader .report-actions-buttons{
  margin-left:auto!important;
  margin-right:auto!important;
  justify-content:center!important;
 }
}

/* Mobil v42 — Kund: responsivt upplägg i samma anda som Företag och Beställare */
@media screen and (max-width:600px){
 #customerPanel{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  padding-left:10px!important;
  padding-right:10px!important;
  overflow:visible!important;
 }

 #customerPanel>.company-picker{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  width:100%!important;
  min-width:0!important;
  gap:9px!important;
 }

 #customerPanel>.company-picker>*{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 #customerPanel>.company-picker>select,
 #customerPanel>.company-picker>#companySelect,
 #customerPanel>.company-picker>.customer-remove-btn{
  width:100%!important;
 }

 #customerPanel .customer-create-row,
 #customerPanel .customer-create-row.open{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 #customerPanel .customer-create-row>input,
 .admin-create-row>input{
  flex-basis:100%!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 #customerPanel>#headerForm,
 #customerPanel #headerForm{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
  gap:9px!important;
 }

 /* Rubrik/infoikon följer samma responsiva princip som admin-primary-row. */
 #customerPanel #headerForm .header-field-label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 30px!important;
  align-items:center!important;
  column-gap:4px!important;
  width:100%!important;
  min-width:0!important;
 }
 #customerPanel #headerForm .header-field-label>.function-info-icon{grid-column:2!important;
  justify-self:end!important;
  margin:0!important;}
}

/* Mobil v43 — headerflikarna Kund / Företag och Beställare / Beskrivningar responsiva */
@media screen and (max-width:600px){
 #settingsTabs,
 .settings-tabs{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  margin:8px 0 12px!important;
  padding:0!important;
  overflow:visible!important;
  box-sizing:border-box!important;
 }

 #settingsTabs>button,
 .settings-tabs>button{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  height:auto!important;
  min-height:40px!important;
  margin:0!important;
  padding:7px 6px!important;
  box-sizing:border-box!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  text-align:center!important;
  line-height:1.15!important;
 }

 /* Själva Beskrivningar-panelen följer samma responsiva helbreddsprincip. */
 #descriptionToolsPanel,
 #descriptionToolsPanel #descriptionTools{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 #descriptionToolsPanel #descriptionTools{
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;

 }

 #descriptionToolsPanel #descriptionTools>*{
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 #descriptionToolsPanel input,
 #descriptionToolsPanel select,
 #descriptionToolsPanel textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }
}

/* Mobil v44 — Kund: behåll knapparnas originalstorlek */
@media screen and (max-width:600px){

 /* Fält/select fortsätter vara responsiva; endast knappar återgår till originalbredd. */
 #customerPanel>.company-picker>select,
 #customerPanel>.company-picker>#companySelect{
  width:100%!important;
  max-width:100%!important;
 }
}

/* Mobil v45 — Kund: ALLA riktiga knappar behåller originalstorlek.
   Select, input och textarea påverkas inte. */

/* Mobil v46 — knapparnas radplacering i Kund, Företag och Beställare, Beskrivningar. */
@media screen and (max-width:600px){

 /* Panelernas formulärkontroller förblir responsiva och får INTE knappmåtten. */
 #customerPanel select,
 #customerPanel input:not([type="button"]):not([type="submit"]):not([type="reset"]),
 #customerPanel textarea,
 #ordererToolsPanel select,
 #ordererToolsPanel input:not([type="button"]):not([type="submit"]):not([type="reset"]),
 #ordererToolsPanel textarea,
 #descriptionToolsPanel select,
 #descriptionToolsPanel input:not([type="button"]):not([type="submit"]):not([type="reset"]),
 #descriptionToolsPanel textarea{
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 /* Företag/Beställare och Beskrivningar: knappar behåller naturlig bredd även i
    de mobilrader som tidigare gav alla barn 100%. */
 #ordererToolsPanel .admin-primary-row>button,
 #ordererToolsPanel .admin-create-row>button,
 #descriptionToolsPanel .admin-primary-row>button,
 #descriptionToolsPanel .admin-create-row>button{
  width:auto!important;
  max-width:none!important;
  justify-self:start!important;
 }
}

/* Mobil v47 — Företag och Beställare: "Ej aktiv" med kryssruta i vänsterkant */

/* Mobil v48 — Kund: infoikon till höger på samma rad som objektet den förklarar */
@media screen and (max-width:600px){
 #customerPanel #headerForm .header-field{
  row-gap:4px!important;
 }/* Rubriken ligger över objektet i vänsterspalten. */
 #customerPanel #headerForm .header-field>.header-field-label,
#customerPanel #headerForm .header-field>.email-cc-label {
  grid-column:1 / -1!important;
  grid-row:auto!important;
  display:block!important;
  width:100%!important;
  min-width:0!important;
 }/* Infoikonen tas ur rubriken och placeras bredvid själva fältet. */
 #customerPanel #headerForm .header-field>.header-field-label>.function-info-icon,
#customerPanel #headerForm .header-field>.email-cc-label>.function-info-icon {position:absolute!important;
  margin:0!important;}

 }

/* Mobil v49 — Kundfält samma breddprincip som Företag och Beställare */
@media screen and (max-width:600px){
 #customerPanel #headerForm .header-field{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 30px!important;
  column-gap:4px!important;
  padding-right:0!important;
  width:100%!important;
  min-width:0!important;
  max-width:100%!important;
  box-sizing:border-box!important;
 }

 #customerPanel #headerForm .header-field input,
 #customerPanel #headerForm .header-field select,
 #customerPanel #headerForm .header-field textarea{
  grid-column:1!important;
  width:100%!important;
  min-width:0!important;
  max-width:none!important;
  box-sizing:border-box!important;
 }/* Infoikonen använder exakt den separata 27px-kolumnen till höger. */
 #customerPanel #headerForm .header-field>.header-field-label>.function-info-icon,
#customerPanel #headerForm .header-field>.email-cc-label>.function-info-icon {right:0!important;}
}

/* Mobil v50 — Kund: info-knappar vertikalt centrerade mot objektet de tillhör */
@media screen and (max-width:600px){
 #customerPanel #headerForm .header-field{
  align-items:center!important;
 }#customerPanel #headerForm .header-field>.header-field-label>.function-info-icon,
#customerPanel #headerForm .header-field>.email-cc-label>.function-info-icon {top:auto!important;
  bottom:5px!important;
  align-self:center!important;}/* 27px info-knapp centreras mot standardfältets höjd på raden. */
 }

/* Mobil v53 — Nytt år: exakt samma typografi som Ny kund */

/* Mobil v54 — Kund: info-knappen centreras mot själva vallistan/textfältet */
@media screen and (max-width:600px){
 #customerPanel #headerForm .header-field{
  position:relative!important;
 }

 /* Standardfält är 38px höga. Info 27px => (38 - 27) / 2 = 5.5px från fältets nederkant. */
 #customerPanel #headerForm .header-field:has(> input) .function-info-icon,
 #customerPanel #headerForm .header-field:has(> select) .function-info-icon,
 #customerPanel #headerForm .header-field:has(> textarea) .function-info-icon{top:auto!important;
  bottom:5.5px!important;
  margin:0!important;}/* Om kontrollen ligger inuti ett extra wrapper-element används samma fältcentrering. */
 #customerPanel #headerForm .header-field:has(input)>.header-field-label>.function-info-icon,
#customerPanel #headerForm .header-field:has(select)>.header-field-label>.function-info-icon,
#customerPanel #headerForm .header-field:has(textarea)>.header-field-label>.function-info-icon,
#customerPanel #headerForm .header-field:has(input)>.email-cc-label>.function-info-icon {top:auto!important;
  bottom:5.5px!important;
  margin:0!important;}
}

@media screen and (max-width:600px){
 #customerPanel #headerForm .header-field:not(:has(#addYear))>.header-field-label>.function-info-icon,
 #customerPanel #headerForm .header-field:not(:has(#addYear))>.email-cc-label>.function-info-icon{top:auto!important;
  bottom:0.5px!important;
  margin:0!important;}
}

/* v70 — Kund: info bredvid Välj kund och Ny kund i alla vyer */
#customerPanel .customer-picker-control-row,
#customerPanel .customer-new-control-row{
 display:inline-flex;
 align-items:center;

 min-width:0;
}
#customerPanel .customer-picker-control-row{
 flex:0 1 auto;
}
#customerPanel .customer-picker-control-row #companySelect{
 min-width:220px;
}

/* v74 — responsiva månadsflikar i alla vyer: fyll hela tillgängliga området */

/* På smalare vyer får texten krympa i stället för att skapa horisontell overflow. */

/* v75 — månadsområdet: knapparna ska fylla hela bottenavsnittets bredd */
#months{
 width:100%!important;
 max-width:100%!important;
 display:flex!important;
 flex-wrap:nowrap!important;
 gap:0!important;
}

#months>*{
 flex:1 1 0!important;
 width:auto!important;
 min-width:0!important;
 max-width:none!important;
 box-sizing:border-box!important;
 text-align:center!important;
}

#months button{
 flex:1 1 0!important;
 min-width:0!important;
 width:100%!important;
}

/* v76 — centrera innehållet i månads-knapparna */
#months button{
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 text-align:center!important;
}

/* v77 — rätt månadscontainer är #tabs.
   Centrera hela månadsraden och låt månadsknapparna fylla tillgänglig bredd. */
#tabs{
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:stretch!important;
 justify-content:center!important;
 width:100%!important;
 max-width:100%!important;
 gap:6px!important;
 overflow:visible!important;
}
#tabs>button:not(.month-toggle-button){
 flex:1 1 0!important;
 width:auto!important;
 min-width:0!important;
 max-width:none!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 text-align:center!important;
}
#tabs>button:not(.month-toggle-button)>span,
#tabs>button:not(.month-toggle-button)>small{
 width:100%!important;
 text-align:center!important;
}

/* Om månadsraden behöver brytas på mycket smal skärm, centrera även raderna. */
@media screen and (max-width:600px){
 #tabs{
  flex-wrap:wrap!important;
  justify-content:center!important;
 }
 #tabs>button:not(.month-toggle-button){
  flex:1 1 calc((100% - 30px)/6)!important;
  max-width:calc((100% - 30px)/6)!important;
 }
}

/* v78 — månadsnamnet visas överst i varje månadsknapp */
#tabs>button:not(.month-toggle-button){
 flex-direction:column-reverse!important;
}

/* v79 — Innehåll/Beskrivning: rader och textfält får växa med längre text.
   Tar bort fasta höjdbegränsningar utan att ändra bredd eller övrig layout. */
[data-field="description"],
[data-role="description"]{
 height:auto!important;
 min-height:0;
 max-height:none!important;
}

textarea[data-field="description"],
textarea[data-role="description"]{
 height:auto!important;
 min-height:38px!important;
 max-height:none!important;
 overflow-y:hidden!important;
 resize:none;
 box-sizing:border-box!important;
}

/* v80 — FIX: Beskrivning ska göra hela Innehåll-raden högre.
   Tidigare contain:layout på tabellraden hindrade rad/cell från att följa
   textarea-höjden trots att textarea redan auto-resizas i app.js. */
#sheet tbody tr:has(textarea.cell-editor){
 contain:none!important;

}
#sheet tbody tr:has(textarea.cell-editor)>td{

 overflow:visible!important;
 vertical-align:top!important;
}
#sheet tbody tr:has(textarea.cell-editor) textarea.cell-editor{

 overflow:hidden!important;
 box-sizing:border-box!important;
}

/* v81 — Text och bild > Innehåll: redigerbara textfält växer med texten */

/* v82 — rapportens riktiga Beskrivning-fält och Innehåll-rad växer med texten */
#sheet textarea.cell-editor.description-area{
 display:block!important;
 width:100%!important;

 overflow:hidden!important;
 resize:none!important;
 white-space:pre-wrap!important;
 overflow-wrap:anywhere!important;
 box-sizing:border-box!important;
}

/* v83 — Innehåll > Beskrivning: textarea och rad följer innehållets höjd */
#sheet td textarea.cell-editor{
 box-sizing:border-box;
}
#sheet td textarea.cell-editor.description-area,
#sheet td:has(textarea.cell-editor) textarea.cell-editor{

 overflow:hidden!important;
 resize:none!important;
 white-space:pre-wrap!important;
 overflow-wrap:anywhere!important;
}
#sheet tbody tr:has(textarea.cell-editor),
#sheet tbody tr:has(textarea.cell-editor)>td{

 overflow:visible!important;
}

/* v84 — Innehåll > Beskrivning: låt webbläsaren själv storleksanpassa textarea efter innehållet.
   Chrome/Edge: field-sizing:content gör att fältet växer/krymper utan JavaScript. */
#sheet tbody textarea.cell-editor[data-key*="!D"]{
 field-sizing:content!important;

 overflow:hidden!important;
 resize:none!important;
 white-space:pre-wrap!important;
 overflow-wrap:anywhere!important;
}
#sheet tbody tr:has(textarea.cell-editor[data-key*="!D"]),
#sheet tbody tr:has(textarea.cell-editor[data-key*="!D"])>td{

 overflow:visible!important;
}

/* v85 — DevTools-fix: slå ut desktop height:30px !important för Beskrivning */

/* v87 — Mobil: undvik dubbla sorteringstitlar.
   De befintliga mobilrubrikerna behålls, extra pseudoetiketter döljs. */

/* v88 — Mobil: dölj tabellens ursprungliga rubrikrad.
   Sorteringen sköts redan av #mobileSortBar, så denna rad ska inte visas en gång till. */

/* v89 — Desktop: Beskrivning visar hela texten och raden följer textarea-höjden.
   Mobilreglerna lämnas orörda. */
@media screen and (min-width:769px){
 #sheet tbody textarea.cell-editor[data-key*="!D"]{

  overflow:hidden!important;
  white-space:pre-wrap!important;
  overflow-wrap:anywhere!important;
  resize:none!important;
 }

 #sheet tbody tr:has(textarea.cell-editor[data-key*="!D"]),
 #sheet tbody tr:has(textarea.cell-editor[data-key*="!D"])>td{

  overflow:visible!important;
 }
}

/* v90 — Mobil: Beskrivning har samma min-höjd som övriga fält.
   Längre text kan fortfarande göra fältet högre automatiskt. */

/* v91 — Mobil: Beskrivning får samma faktiska grundhöjd som övriga fält.
   JS kan fortfarande sätta större inline-höjd när texten behöver flera rader. */

/* Administration v21 — API/behörighetskoppling */
/* Administration v22 — inbjudningsstatus och åtgärder */
/* Administration v23 — e-poststatus */
/* Administration prototype v1 */
.admin-users-overlay{position:fixed;inset:0;z-index:2147482000;display:grid;place-items:center;padding:18px}
.admin-users-overlay[hidden]{display:none!important}

/* Administration: gemensam blå status för väntande och uppmärksamhetskrävande information. */

/* Kolumnbredder: en samlad markering ersätter de tidigare överlappande färgreglerna. */
#accountOverlay :is(.column-widths-v105-total,.print-column-widths-v106-total){
 border-radius:8px!important;padding:10px 12px!important;transition:background-color .15s ease!important;
}
html #accountOverlay :is(.column-widths-v105-total,.print-column-widths-v106-total):is(.is-under-100-v327,.total-under-100){
 background:rgba(var(--datoden-brand-rgb,57,83,164),.12)!important;color:var(--sub-datoden-interaction,var(--datoden-accent,#3953a4))!important;
 border:1px solid var(--sub-datoden-interaction,var(--datoden-accent,#3953a4))!important;box-shadow:none!important;
}
html[data-theme="dark"] #accountOverlay :is(.column-widths-v105-total,.print-column-widths-v106-total):is(.is-under-100-v327,.total-under-100){
 background:rgba(var(--datoden-brand-rgb,57,83,164),.28)!important;color:var(--datoden-accent-tint-2,#c3cff4)!important;
}

/* Mörkt läge */

/* Företagsfältet i Mina uppgifter */

/* Ljust läge */

/* Mörkt läge – återanvänd appens befintliga ytor/menyfärger */

.admin-users-overlay{
 backdrop-filter:blur(2px);
}

/* mörkt: samma panel-/fältstruktur som appens övriga menyer */

/* Ljust */

/* Mörkt */

/* Overlay neutral även den */
.admin-users-overlay{background:rgba(0,0,0,.28)!important}
html[data-theme="dark"] .admin-users-overlay{background:rgba(0,0,0,.58)!important}

/* Textmarkering/highlight i administrationsdialogen */

/* Mörkt tema */

/* Stöd i webbläsare som tillåter styling av option */

select{
  accent-color:var(--sub-datoden-interaction)!important;
}
select:hover,
select:focus,
select:focus-visible{
  border-color:var(--sub-datoden-interaction)!important;
  outline-color:var(--sub-datoden-interaction)!important;
  box-shadow:0 0 0 2px rgba(var(--datoden-brand-rgb,57,83,164),.16)!important;
}

/* Native option-styling där webbläsaren stödjer det */
select option:checked{
  background:var(--sub-datoden-interaction)!important;
  background-color:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
}
select option:hover,
select option:focus{
  background:var(--sub-datoden-interaction)!important;
  background-color:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
}

/* Egna dropdowns använder samma blå accent */

/* Preview av menybehörigheter */

/* Administration v21 — API-koppling + borttagning */

/* Administration v22 — väntande inbjudningar */

/* Administration v23 — status för e-postutskick */

/* Administration v24 — Företag använder samma inputstil som övriga Mina uppgifter-fält */

/* v28 — Mina uppgifter: rubriker vertikalt centrerade mot respektive fält */
@media (min-width:601px){
  .account-info-grid > label{
    display:flex!important;
    align-items:center!important;
    min-height:40px!important;
    margin:0!important;
  }
  }

/* v30 — Text och bild: textfälten är själva facit; dubblerade fasta fältrubriker tas bort */

/* v37 — Ägarens backupval */

/* v38 — Backupalternativ med brödtext och avgränsare */

/* v40 — Databasbackup layout */

/* v41 — Databashantering byggd direkt i showSettings, utan dynamiska efterhandsändringar */

/* v42 — Backup och import intuitivt parvis */

/* v43 — Backup och import av databas visas som vanlig brödtext */

/* v59 — riktig Konsult-kolumn, vanlig tabell */

/* ==========================================================================
   v344 — Administration / Företagsflikar
   Definitiv komponent-CSS. Företagsflikarna undantas visuellt från den
   generella button-looken genom hög specificitet + all: unset.
   ========================================================================== */

/* Ingen separat linje mellan tabstrip och första användaren. */

/* Gamla accordion-knappen ska aldrig synas när tab-komponenten används. */

/* ==========================================================================
   v345 — Administration / små företagsflikar
   ========================================================================== */

/* ==========================================================================
   v346 — Administration / små företagsflikar, endast app.css
   Dessa regler äger nu hela tabutseendet. Generella admin-button-regler i
   app.js exkluderar .admin-company-tab-v336.
   ========================================================================== */

/* ==========================================================================
   v348 CSS policy
   All future static/presentation styling belongs in this file.
   JavaScript is reserved for behavior and truly runtime-calculated values only.
   ========================================================================== */

/* ======================================================================
   v349 — CSS migration batch 1: Account/Administration components
   Moved manually as a small testable batch from app.js.
   ====================================================================== */

/* migrated from app.js: settings-unified-controls-v268 */
#accountOverlay .account-page select,
 #accountOverlay .account-page input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
 #accountOverlay .account-page textarea{box-sizing:border-box!important;
   margin:0!important;
   font:inherit!important;
   font-size:16px!important;
   font-weight:400!important;
   transition:border-color .14s ease,background-color .14s ease,box-shadow .14s ease!important;}

 #accountOverlay .account-page select{
   cursor:pointer!important;
 }

 #accountOverlay .account-page input::placeholder,
 #accountOverlay .account-page textarea::placeholder{
   color:#aeb3b7!important;
   opacity:1!important;
 }

 #accountOverlay .account-page select:disabled,
 #accountOverlay .account-page input:disabled,
 #accountOverlay .account-page textarea:disabled{
   opacity:.55!important;
   cursor:not-allowed!important;
 }

/* migrated from app.js: settings-textareas-select-height-v269 */
#accountOverlay .account-page textarea{
   height:46px!important;
   min-height:46px!important;
   max-height:46px!important;
   padding:0 14px!important;
   line-height:44px!important;
   resize:none!important;
   overflow:hidden!important;
   box-sizing:border-box!important;
 }

/* migrated from app.js: administration-viewport-scroll-v288 */

/* migrated from app.js: admin-invite-exact-width-v292 */

/* migrated from app.js: admin-invite-native-role-v296 */

/* migrated from app.js: owner-invite-single-controls-v297 */

/* migrated from app.js: admin-invite-options-fullwidth-v298 */
/* Rollväljaren och dess öppnade options ska använda hela fältbredden. */

 /* Chromiums öppna native select kan ärva en äldre maxbredd från menyregler.
    field-sizing där det stöds gör popupen minst lika bred som selecten. */

/* migrated from app.js: administration-stable-ui-v301 */

 /* Den ENDA rollväljaren under Ny inbjudan. */

/* ==========================================================================
   v350 — Enhetliga textinmatningsfält
   Grundutseende: "Ny ägare inbjudan".
   Höjd matchar standardknapparna: 46px.
   ========================================================================== */

/* Vanliga textfält i appen och kontosidorna. */
input[type="text"]:not([hidden]),
input[type="email"]:not([hidden]),
input[type="password"]:not([hidden]),
input[type="search"]:not([hidden]),
input[type="tel"]:not([hidden]),
input[type="url"]:not([hidden]),
input[type="number"]:not([hidden]),
textarea:not([hidden]){
    box-sizing: border-box !important;
    min-height: 46px !important;
    height: 46px !important;
    padding: 0 14px !important;
    border: 1px solid var(--datoden-bg-596168,#596168) !important;
    border-radius: 8px !important;
    background:var(--datoden-bg-1f1f1f,#1f1f1f)!important;
    background-color:var(--datoden-bg-1f1f1f,#1f1f1f)!important;
    color: #fff !important;
    font: inherit !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 44px !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Textarea som ska kunna växa får samma grundutseende men inte låsas till en rad. */
textarea:not([rows="1"]),
#accountOverlay textarea:not([rows="1"]) {
    height: auto !important;
    min-height: 46px !important;
    padding-top: 11px !important;
    padding-bottom: 11px !important;
    line-height: 1.4 !important;
}

/* Placeholder matchar Ny ägare inbjudan. */
input::placeholder,
textarea::placeholder {
    color: #9a9a9a !important;
    opacity: 1 !important;
}

/* Focus utan dimensionshopp. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus {
    border-color: var(--datoden-bg-737c83,#737c83) !important;
    box-shadow: none !important;
}

/* Text och bild: editorfältet ska fylla sin gridcell men behålla samma 46px höjd. */

/* Light mode: samma geometri, ljus variant av samma komponent. */
html[data-theme="light"] input[type="text"]:not([hidden]),
html[data-theme="light"] input[type="email"]:not([hidden]),
html[data-theme="light"] input[type="password"]:not([hidden]),
html[data-theme="light"] input[type="search"]:not([hidden]),
html[data-theme="light"] input[type="tel"]:not([hidden]),
html[data-theme="light"] input[type="url"]:not([hidden]),
html[data-theme="light"] input[type="number"]:not([hidden]),
html[data-theme="light"] textarea:not([hidden]){
    background:var(--datoden-bg-ffffff,#fff)!important;
    background-color:var(--datoden-bg-ffffff,#fff)!important;
    color: #24282b !important;
    border-color: var(--datoden-bg-b9c2c8,#b9c2c8) !important;
}

html[data-theme="light"] input::placeholder,html[data-theme="light"] textarea::placeholder{color:#777 !important;opacity:1 !important;}

/* ==========================================================================
   v351 — Administration / Ny ägare inbjudan
   Säkerställ exakt 46px fälthöjd trots äldre mer specifika regler.
   ========================================================================== */

/* ==========================================================================
   v352 — Gemensam kontrollhöjd
   Alla normala inmatningsfält, select och knappar = exakt 46px.
   Undantag: checkbox/radio/range/file, ikon-/mini-/close-knappar, tabs samt
   komponenter som uttryckligen är små verktygskontroller.
   ========================================================================== */
:root {
    --app-control-height: 46px;
}

/* Textbaserade inmatningsfält */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="hidden"]),
select,
textarea[rows="1"] {
    box-sizing: border-box !important;
    height: var(--app-control-height) !important;
    min-height: var(--app-control-height) !important;
    max-height: var(--app-control-height) !important;
}

/* Account/Mina uppgifter — äldre gridregler får inte ge 43.2px. */

/* Administrationens formulär och rollväljare. */

/* Text och bild: vanliga editorfält, inte små ikonknappar. */

/* Flerradiga textareas måste fortfarande kunna växa. */
textarea:not([rows="1"]) {
    height: auto !important;
    max-height: none !important;
}

/* v353 — Administration / Ny ägare inbjudan: alla formulärfält 100% bredd */

/* ==========================================================================
   v354 — Administration / företagsflikar
   Företagsnamn använder samma typografi som rollrubriken "Ägare".
   Lite rymligare padding utan att göra flikarna höga.
   ========================================================================== */

/* ==========================================================================
   v355 — Administration / rollväljare
   Alternativen fyller hela dropdownens bredd, även hover/focus/selected.
   ========================================================================== */

/* ==========================================================================
   v356 — Text och bild / Antal + Förändring timbank
   Dessa värdefält får radbrytning och automatisk höjd så hela innehållet syns.
   ========================================================================== */
#accountOverlay textarea[data-uitext="time"],
#accountOverlay textarea[data-uitext="timeChange"],
#accountOverlay textarea[data-uitext="hours"],
#accountOverlay textarea[data-uitext="hourChange"],
#accountOverlay textarea[data-uitext="quantity"],
#accountOverlay textarea[data-uitext="changeHours"] {
    height: auto !important;
    min-height: 46px !important;
    max-height: none !important;
    padding: 10px 14px !important;
    line-height: 1.35 !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    overflow-y: visible !important;
    resize: vertical !important;
}

/* ==========================================================================
   v357 — Väljaralternativ
   Exakta fält: #quantitySelectorOptions och #timeBankSelectorOptions.
   rows="9" ska visas som riktiga flerradsfält, inte pressas ned av 46px-regler.
   ========================================================================== */

/* Säkerställ att grid/label inte klipper det högre textfältet. */

/* ==========================================================================
   v358 — Top-header / Mitt konto
   Samma vertikala linjering och 46px kontrollhöjd som övriga headerkontroller.
   ========================================================================== */
#topline [data-account-menu],
#topline button[data-account-toggle],
header [data-account-menu],
header button[data-account-toggle]{
    box-sizing: border-box !important;
    height: var(--app-control-height, 46px) !important;
    min-height: var(--app-control-height, 46px) !important;
    max-height: var(--app-control-height, 46px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
    vertical-align: middle !important;
}

/* Headerns högra kontrollgrupp ska centrera alla kontroller på samma axel. */
#headerForm #yearSelect {
    margin: 0 !important;
}#headerForm #yearSelect {
    box-sizing: border-box !important;
    height: var(--app-control-height, 46px) !important;
    min-height: var(--app-control-height, 46px) !important;
    max-height: var(--app-control-height, 46px) !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    align-self: center !important;
}/* År-fältet ska ligga i samma gridrad som Kundnamn/Avtalsnr {
    align-items: center !important;
    align-content: center !important;
}

#customerPanel #headerForm #customerYearSelect {
    box-sizing: border-box !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    margin: 0 !important;
    align-self: center !important;
}

/* Årväljaren fyller sin kolumn; ikonknappens mått kommer från sub-datoden.css. */

/* Väljare + knapp på samma kontrollrad som övriga 46px-fält. */

#customerPanel #headerForm select#customerYearSelect {
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-width: 1px !important;
    line-height: normal !important;
    align-self: stretch !important;
}

/* Vanligt förekommande kontrollrader i flikarna ska centrera 46px-knappen
   mot sitt tillhörande input/select. */
#headerMasterCollapsible .settings-panel .customer-picker-control-row,
#headerMasterCollapsible .settings-panel .header-field-control-row,
#headerMasterCollapsible .settings-panel .edit-control-row {
    align-items: center !important;
}

/* Kontrollraderna får samma vertikala centrum som respektive 46px select. */

/* ==========================================================================
   v369 — Administration / theme-switch stability
   Växling till ljust läge får inte återaktivera gamla företagsaccordions eller
   dölja den aktiva företagsflikens användardata.
   ========================================================================== */

/* Gamla stora företagsknappar är ersatta av tabs och ska ALDRIG visas,
   oavsett tema eller äldre light-mode button-regler. */

/* Själva tablisten ska alltid vara den synliga företagsnavigationen. */

/* Endast aktivt företag visas, men dess användardata får inte döljas av
   theme-specifika legacy-regler. */

/* Light mode: tabs ska behålla tabutseendet, inte ärva den gamla
   Administration-knappstilen. */

/* v370 — legacy company accordion controls must never render once tabs are active. */

/* v371 — Administration company tabs remain the only company navigation. */

/* v373 — endast v336 är giltig företagsnavigation i Administration. */

/* ==========================================================================
   v375 — Light mode / range sliders
   Ljusa slider-handtag i stället för mörkgrå.
   ========================================================================== */

html[data-theme="light"] input[type="range"]::-ms-thumb {
    background:var(--datoden-bg-ffffff,#ffffff)!important;
    background-color:var(--datoden-bg-ffffff,#ffffff)!important;
    border: 1px solid var(--datoden-bg-aeb7bd,#aeb7bd) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18) !important;
}

/* ==========================================================================
   v376 — Light mode sliders
   Behåll endast det ljusa handtaget från v375.
   Återställ slider-spårets/fyllnadens normala färger.
   ========================================================================== */

/* Chromium / Brave: låt inputens befintliga accent-color åter styra färgad fyllnad. */

/* Återställ track så v375 inte gör den visuellt färglös. */

/* Endast själva knappen/handtaget ska vara ljust. */
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb {
    background:var(--datoden-bg-ffffff,#fff)!important;
    background-color:var(--datoden-bg-ffffff,#fff)!important;
    border: 1px solid var(--datoden-bg-aeb7bd,#aeb7bd) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}

html[data-theme="light"] input[type="range"]::-moz-range-thumb {
    background:var(--datoden-bg-ffffff,#fff)!important;
    background-color:var(--datoden-bg-ffffff,#fff)!important;
    border: 1px solid var(--datoden-bg-aeb7bd,#aeb7bd) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}
#customerPanel #headerForm #customerYearSelect {
    box-sizing: border-box !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 14px !important;
    align-self: stretch !important;
}

/* ==========================================================================
   v387 — År: korrekt labelposition + RÄTT popupklass
   ========================================================================== */

/* År-labeln låg ca 15px högre än sibling-labels. Kontrollraden lämnas orörd. */

/* Den verkliga popupen heter year-add-popup-v146.
   Legacy-CSS för den följde med ett gammalt JS-styleblock som togs bort i v381,
   vilket gjorde popupen position:static och ökade sidans scrollhöjd. */
.year-add-popup-v146 {
    position: fixed !important;
    z-index: 2147483000 !important;
    min-width: 230px !important;
    max-width: min(360px, calc(100vw - 20px)) !important;
    max-height: min(70vh, 520px) !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

.year-add-popup-v146[role="menu"] {
    display: flex !important;
    flex-direction: column !important;
}

/* ==========================================================================
   v388 — Gemensam kompakt action-popup
   År-menyn använder nu samma neutrala menyutseende som övriga popupkontroller.
   ========================================================================== */

.year-add-popup-v146.customer-change-popup-v151 {
    position: fixed !important;
    z-index: 2147483000 !important;
}

/* ==========================================================================
   v391 — År label/info utan positionsanpassning
   Ingen top/bottom/translate/absolute som flyttar blocket uppåt.
   ========================================================================== */

#customerPanel #headerForm .header-field:has(#customerYearSelect)
> .header-field-label {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}

#customerPanel #headerForm #customerYearSelect {
    grid-column: 1 !important;
    grid-row: 2 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
}

/* ==========================================================================
   v401 — Säker År-rensning efter jämförelse v393 -> v394
   Endast nuvarande markup. Generella header-field-label-regler bevaras.
   ========================================================================== */
#customerPanel #headerForm .header-field:has(> #customerYearSelect) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 46px !important;
    grid-template-rows: auto 46px !important;
    column-gap: 8px !important;
    row-gap: 8px !important;
    min-width: 0 !important;
}
#customerPanel #headerForm .header-field:has(> #customerYearSelect) > .header-field-label {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
}
#customerPanel #headerForm .header-field:has(> #customerYearSelect) > #customerYearSelect {
    grid-column: 1 !important;
    grid-row: 2 !important;
}

/* ==========================================================================
   v403 — År desktop: samma vertikala rytm som vanliga header-field
   Bas: v401. Ingen komprimerad labelrad från v402.
   Enda specialiteten är extra 46px-kolumn för ikonknappen.
   ========================================================================== */
@media (min-width: 701px) {
    #customerPanel #headerForm .header-field:has(> #customerYearSelect) {
        align-items: end !important;
    }

    #customerPanel #headerForm .header-field:has(> #customerYearSelect) > #customerYearSelect {
        align-self: end !important;
    }

}

/* ==========================================================================
   v404 — År desktop efter tidigare layoutrensning
   ========================================================================== */
@media (min-width: 701px) {
    #customerPanel #headerForm .header-field:has(> #customerYearSelect) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 46px !important;
        grid-template-rows: auto 46px !important;
        column-gap: 8px !important;
        row-gap: 4px !important;
        align-self: stretch !important;
        align-content: start !important;
        min-width: 0 !important;
    }

    #customerPanel #headerForm .header-field:has(> #customerYearSelect) > .header-field-label {
        grid-column: 1 / -1 !important;
        grid-row: 1 !important;
        position: static !important;
        inset: auto !important;
        transform: none !important;
    }

    #customerPanel #headerForm .header-field:has(> #customerYearSelect) > #customerYearSelect {
        grid-column: 1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        margin: 0 !important;
    }

}

/* ==========================================================================
   v405 — År label/info kompakt som övriga rubriker
   Kontrollraden från v404 lämnas helt orörd.
   ========================================================================== */
@media (min-width: 701px) {
    #customerPanel #headerForm
    .header-field:has(> #customerYearSelect)
    > .header-field-label {
        display: inline-flex !important;
        align-items: center !important;
        align-self: start !important;
        width: max-content !important;
        height: 27px !important;
        min-height: 27px !important;

        margin: 0 !important;
        padding: 0 !important;
        gap: 6px !important;
        overflow: visible !important;
    }

    #customerPanel #headerForm
    .header-field:has(> #customerYearSelect)
    > .header-field-label
    > .function-info-icon {position: static !important;
        inset: auto !important;
        margin: 0 !important;
        align-self: center !important;}
}

/* ==========================================================================
   v407 — Headerfält: div-wrapper i stället för label-wrapper
   Endast själva info-button är interaktiv.
   ========================================================================== */
html[data-theme="light"] #customerPanel #headerForm div.header-field,
html[data-theme="light"] #customerPanel #headerForm div.header-field > span {
    color: #222 !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #222 !important;
}

/* ==========================================================================
   v412 — Kundflikens två övre info-knappar: normalt avstånd
   Gamla v70/special-gap tas bort. Samma 8px rytm som .company-picker.
   ========================================================================== */
#customerPanel > .company-picker > .customer-picker-control-row,
#customerPanel > .company-picker > .customer-new-control-row {
    gap: 8px !important;
    column-gap: 8px !important;
}

#customerPanel > .company-picker > .customer-picker-control-row > .function-info-icon,
#customerPanel > .company-picker > .customer-new-control-row > .function-info-icon {margin-left: 0 !important;
    margin-right: 0 !important;}

/* ==========================================================================
   v413 — Dölj gamla Ta bort-knappar i Företag och Beställare
   De är legacy/contextual controls och ska inte visas i den nuvarande UI:n.
   ========================================================================== */
#ordererToolsPanel .contextual-delete,
#ordererToolsPanel .remove-action-icon,
#ordererToolsPanel button[id^="remove"],
#ordererToolsPanel button[id*="Remove"],
#ordererToolsPanel button[id*="remove"] {
    display: none !important;
}

/* ==========================================================================
   v415 — Dropdowns: neutral markering, neutral aktiv option
   ========================================================================== */
#customerPanel select option:checked,
#headerMasterCollapsible select option:checked,
#ordererToolsPanel select option:checked,
#descriptionToolsPanel select option:checked {
    background:var(--datoden-bg-e3e3e3,#e3e3e3)!important;
    background-color:var(--datoden-bg-e3e3e3,#e3e3e3)!important;
    color: #222 !important;
}

/* Firefox/native select kan kombinera :checked + hover/focus. Behåll neutral markering. */
#customerPanel select option:checked:hover,
#customerPanel select option:checked:focus,
#headerMasterCollapsible select option:checked:hover,
#headerMasterCollapsible select option:checked:focus,
#ordererToolsPanel select option:checked:hover,
#ordererToolsPanel select option:checked:focus,
#descriptionToolsPanel select option:checked:hover,
#descriptionToolsPanel select option:checked:focus {
    background:var(--datoden-bg-e3e3e3,#e3e3e3)!important;
    background-color:var(--datoden-bg-e3e3e3,#e3e3e3)!important;
    color: #222 !important;
}

/* ==========================================================================
   v416 — Dropdown: samma ljusgrå markering i mörkt läge
   ========================================================================== */
html[data-theme="dark"] #customerPanel select option:checked,
html[data-theme="dark"] #headerMasterCollapsible select option:checked,
html[data-theme="dark"] #ordererToolsPanel select option:checked,
html[data-theme="dark"] #descriptionToolsPanel select option:checked,
html[data-theme="dark"] #customerPanel select option:checked:hover,
html[data-theme="dark"] #headerMasterCollapsible select option:checked:hover,
html[data-theme="dark"] #ordererToolsPanel select option:checked:hover,
html[data-theme="dark"] #descriptionToolsPanel select option:checked:hover,
html[data-theme="dark"] #customerPanel select option:checked:focus,
html[data-theme="dark"] #headerMasterCollapsible select option:checked:focus,
html[data-theme="dark"] #ordererToolsPanel select option:checked:focus,
html[data-theme="dark"] #descriptionToolsPanel select option:checked:focus {
    background:var(--datoden-bg-e3e3e3,#e3e3e3)!important;
    background-color:var(--datoden-bg-e3e3e3,#e3e3e3)!important;
    color: #222 !important;
}

/* ==========================================================================
   v418 — Mitt konto: enhetliga menyikoner och menyrader
   ========================================================================== */

/* ==========================================================================
   v419 — Mitt konto: Logga ut exakt samma radgeometri
   Gamla logout margin-top/padding-top är borttagna.
   ========================================================================== */

/* ==========================================================================
   v420 — Mitt konto: EN gemensam radklass
   Logga ut har nu exakt samma klassbas som alla andra menyval.
   ========================================================================== */

/* ==========================================================================
   v421 — Mitt konto: styling följer dropdownen även när den portaleras till body
   ========================================================================== */

/* Logga ut: endast separatorn skiljer raden från övriga. */

/* ==========================================================================
   v422 — faktisk live/portal Mitt konto-meny
   Klasser sätts runtime även på äldre redan existerande DOM.
   ========================================================================== */

/* v427 — Administration > System och databas */

/* ==========================================================================
   v446 — Light mode / kolumnbredds-sliders
   Behåll vitt handtag men visa den färgade slider-fyllnaden blå igen.
   ========================================================================== */
html[data-theme="light"] input[type="range"] {
    accent-color: #0d6efd !important;
    appearance: auto !important;
    -webkit-appearance: auto !important;
}
/* Låt webbläsarens native track/fyllnad använda accent-color. */
html[data-theme="light"] input[type="range"]::-webkit-slider-runnable-track {
    background: revert !important;
    background-color: revert !important;
}
html[data-theme="light"] input[type="range"]::-moz-range-track {
    background: revert !important;
    background-color: revert !important;
}
html[data-theme="light"] input[type="range"]::-moz-range-progress {
    background: #0d6efd !important;
    background-color: #0d6efd !important;
}
/* Handtaget ska fortsatt vara ljust. */
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb,
html[data-theme="light"] input[type="range"]::-moz-range-thumb {
    background:var(--datoden-bg-ffffff,#fff)!important;
    background-color:var(--datoden-bg-ffffff,#fff)!important;
    border: 1px solid var(--datoden-bg-aeb7bd,#aeb7bd) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,.18) !important;
}

/* ==========================================================================
   v459 — Rapportverktyg mobil: ikonläge och centrering
   Skicka och Skriv ut hämtar färg och knappform från sub-datoden.css.
   Flikens design kommer fortsatt från v454 och ändras inte här.
   ========================================================================== */
@media screen and (max-width:768px){

  #reportActionsBelowHeader #mobileMonthSearchToggle{
    border:1px solid transparent!important;
    border-radius:7px!important;
    box-shadow:none!important;
  }

  /* Lokala färger för mobilens sök- och sorteringsverktyg. */

  /* Lokalt kantläge för sök- och sorteringsverktyg. */

  /* Fliken ska fortsatt möta rapportinnehållet på mobil. */

  main{padding-top:0!important}

}

/* ==========================================================================
   v464 — Rapportverktygsflik mobil
   Alla mobillägen använder exakt samma flikdesign som 601–768 px.
   ========================================================================== */
@media screen and (max-width:768px){
 #reportActionsBelowHeader{
  --tab-girth:12px!important;
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex-wrap:wrap!important;
  gap:8px!important;
  width:max-content!important;
  min-width:0!important;
  max-width:calc(100% - 32px)!important;
  margin:7px auto 0!important;
  padding:9px calc(14px + var(--tab-girth)) 10px!important;
  background:var(--paper,#fff)!important;
  border-radius:0!important;
  box-shadow:none!important;
  clip-path:shape(from bottom left,curve to var(--tab-girth) calc(100% - var(--tab-girth)) with var(--tab-girth) 100%,vline to var(--tab-girth),curve to calc(var(--tab-girth) * 2) 0 with var(--tab-girth) 0,hline to calc(100% - calc(var(--tab-girth) * 2)),curve to calc(100% - var(--tab-girth)) var(--tab-girth) with calc(100% - var(--tab-girth)) 0,vline to calc(100% - var(--tab-girth)),curve to 100% 100% with calc(100% - var(--tab-girth)) 100%)!important;
  overflow:visible!important;
  box-sizing:border-box!important;
 }
 #reportActionsBelowHeader::before,
 #reportActionsBelowHeader::after{
  content:none!important;
  display:none!important;
 }
 html[data-theme="dark"] #reportActionsBelowHeader{background:var(--datoden-bg-292a2b,#292a2b)!important}
 html[data-theme="light"] #reportActionsBelowHeader{background:var(--paper,#fff)!important}
 @supports not (clip-path:shape(from top left,hline to 0)){
  #reportActionsBelowHeader{
   clip-path:none!important;
   padding-inline:14px!important;
   border-radius:12px 12px 0 0!important;
  }
 }
}

/* ==========================================================================
   Gemensam kontrollkomponent
   .control-row = fält + tillhörande funktionsknappar
   ========================================================================== */
.control-row{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:8px;
  min-width:0;
}

.control-row > :is(select,input:not([type="checkbox"]),textarea,.checkbox-select){flex:1 1 0;
  min-width:0;}

.control-row > :is(button:not(.checkbox-select-trigger),.function-info-icon){flex:0 0 auto;
  margin:0;}

@media screen and (max-width:600px){
  .control-row{
    width:100%;
  }

  .control-row > :is(select,input:not([type="checkbox"]),textarea){
    width:0 !important;
    max-width:none !important;
  }

  .control-row > button:not(.checkbox-select-trigger){width:auto;
    max-width:none;
    align-self:center;}
}

@media screen and (max-width:600px){
  #customerPanel #headerForm .header-field > .control-row{
    width:100%;
  }
}

/* Checkbox-väljare: samma visuella språk som övriga select-fält. */
.checkbox-select{position:relative;
  flex:1 1 0;
  width:auto;
  min-width:0;}

.checkbox-select-trigger{display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  width:100%;
  min-width:0;
  height:var(--app-control-height,46px);
  padding:8px;
  border:0;
  font:inherit;
  text-align:left;}

.checkbox-select-trigger svg{width:18px;
  height:18px;
  flex:0 0 18px;}

.checkbox-select-menu{position:absolute;

  top:calc(100% + 2px);
  left:0;
  width:100%;
  min-width:100%;
  padding:4px;
  box-sizing:border-box;
  border:1px solid var(--line);}

.checkbox-select-option{display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  min-height:38px;}

.checkbox-select-name{display:block;
  width:100%;
  min-width:0;
  padding:8px;
  border:0;
  font:inherit;
  text-align:left;}

.checkbox-select-state{display:inline-flex;
  align-items:center;
  gap:5px;
  padding-right:8px;
  white-space:nowrap;
  font:inherit;
  font-size:12px;}

.checkbox-select-state input{width:auto !important;
  min-width:0 !important;
  margin:0;}

@media screen and (max-width:600px){
  .control-row > .checkbox-select{flex:1 1 0;
    width:0;
    min-width:0;}
}

/* Custom select-trigger är ett fält, aldrig en action-knapp. */
.control-row .checkbox-select{flex:1 1 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;}

.control-row .checkbox-select > .checkbox-select-trigger{display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  height:var(--app-control-height,46px) !important;
  min-height:var(--app-control-height,46px) !important;
  max-height:var(--app-control-height,46px) !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:8px !important;
  border:0 !important;
  font:inherit !important;
  text-align:left !important;
  transform:none !important;}

.checkbox-select-state{opacity:1 !important;}

.checkbox-select .checkbox-select-trigger,
.checkbox-select .checkbox-select-trigger:hover,
.checkbox-select .checkbox-select-trigger:focus,
.checkbox-select .checkbox-select-trigger:focus-visible,
.checkbox-select .checkbox-select-trigger:active,
.checkbox-select .checkbox-select-trigger[aria-expanded="true"]{transform:none !important;}

.checkbox-select-menu .checkbox-select-name,
.checkbox-select-menu .checkbox-select-name:hover,
.checkbox-select-menu .checkbox-select-name:focus,
.checkbox-select-menu .checkbox-select-name:focus-visible,
.checkbox-select-menu .checkbox-select-name:active,
.checkbox-select-menu .checkbox-select-option:hover > .checkbox-select-name,
.checkbox-select-menu .checkbox-select-option.selected > .checkbox-select-name{transform:none !important;}

.checkbox-select-menu .checkbox-select-name,
.checkbox-select-menu .checkbox-select-name:hover,
.checkbox-select-menu .checkbox-select-name:focus,
.checkbox-select-menu .checkbox-select-name:focus-visible,
.checkbox-select-menu .checkbox-select-name:active{transform:none !important;}

/* Checkbox-select ska bete sig visuellt som en vanlig vallista. */
#ordererToolsPanel .control-row .checkbox-select > button.checkbox-select-trigger,
#ordererToolsPanel .control-row .checkbox-select > button.checkbox-select-trigger:hover,
#ordererToolsPanel .control-row .checkbox-select > button.checkbox-select-trigger:focus,
#ordererToolsPanel .control-row .checkbox-select > button.checkbox-select-trigger:focus-visible,
#ordererToolsPanel .control-row .checkbox-select > button.checkbox-select-trigger:active,
#ordererToolsPanel .control-row .checkbox-select > button.checkbox-select-trigger[aria-expanded="true"]{transform:none !important;}

/* Gemensam vallistekomponent. */
.app-select{position:relative;
  flex:1 1 0;
  min-width:0;}

.app-select > select{position:absolute !important;
  width:1px !important;
  height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  white-space:nowrap !important;
  border:0 !important;}

.app-select-trigger{display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:8px !important;
  width:100% !important;
  min-width:0 !important;
  height:var(--app-control-height,46px) !important;
  box-sizing:border-box !important;
  padding:8px !important;
  border:0 !important;
  font:inherit !important;
  text-align:left !important;
  transform:none !important;}

.app-select-trigger svg{flex:0 0 18px;
  width:18px;
  height:18px;}

.app-select-menu{position:absolute;

  top:calc(100% + 2px);
  left:0;

  padding:4px;
  border:1px solid var(--line);}

.app-select-option{display:block !important;
  width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding:8px !important;
  border:0 !important;
  font:inherit !important;
  text-align:left !important;
  transform:none !important;}

.control-row > .app-select{flex:1 1 0 !important;
  width:0 !important;
  min-width:0 !important;
  max-width:none !important;}

#ordererToolsPanel .control-row .app-select > button.app-select-trigger,
#descriptionToolsPanel .control-row .app-select > button.app-select-trigger,
#customerPanel .control-row .app-select > button.app-select-trigger{width:100% !important;
  min-width:100% !important;
  max-width:100% !important;}

#ordererToolsPanel .control-row .app-select > button.app-select-trigger:hover,
#descriptionToolsPanel .control-row .app-select > button.app-select-trigger:hover,
#customerPanel .control-row .app-select > button.app-select-trigger:hover,
.app-select-trigger:focus,
.app-select-trigger:focus-visible,
.app-select-trigger:active,
.app-select-trigger[aria-expanded="true"]{transform:none !important;}

.app-select-menu,
.app-select-menu > .app-select-option{width:100% !important;
  min-width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;}

.app-select-menu > .app-select-option{
  flex:none !important;
  height:auto !important;
  max-height:none !important;
  }

.app-select-menu > .app-select-option{position:relative !important;
  isolation:isolate !important;
  overflow:hidden !important;}

.app-select-menu > .app-select-option::before{content:"" !important;
  position:absolute !important;
  z-index:-1 !important;
  inset:0 !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  pointer-events:none !important;}

.app-select-menu > .app-select-option:hover,
.app-select-menu > .app-select-option:focus,
.app-select-menu > .app-select-option:focus-visible,
.app-select-menu > .app-select-option.selected{transform:none !important;}

.app-select-menu > .app-select-option{display:block !important;
  width:100% !important;
  min-width:100% !important;
  max-width:100% !important;

  box-sizing:border-box !important;
  margin:0 !important;
  padding:8px !important;
  border:0 !important;
  font:inherit !important;
  text-align:left !important;
  cursor:pointer !important;}

.app-select-menu > .app-select-option[aria-disabled="true"]{cursor:default !important;
  opacity:.55;}

/* Öppna custom-vallistor ska alltid ligga ovanför efterföljande panelinnehåll. */
.app-select:has(.app-select-menu:not([hidden])),
.checkbox-select:has(.checkbox-select-menu:not([hidden])){z-index:1000 !important;}

.control-row:has(.app-select-menu:not([hidden])),
.control-row:has(.checkbox-select-menu:not([hidden])),
.admin-section:has(.app-select-menu:not([hidden])),
.admin-section:has(.checkbox-select-menu:not([hidden])),
.settings-panel:has(.app-select-menu:not([hidden])),
.settings-panel:has(.checkbox-select-menu:not([hidden])){position:relative !important;
  z-index:999 !important;
  overflow:visible !important;}

.app-select-menu,
.checkbox-select-menu{z-index:1001 !important;}

.app-select-menu.app-select-menu-portal{position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2147483000 !important;
  margin:0 !important;
  max-height:min(360px,calc(100vh - 20px)) !important;
  overflow-y:auto !important;}

.app-select-menu.app-select-menu-portal{width:var(--app-select-portal-width) !important;
  min-width:var(--app-select-portal-width) !important;
  max-width:var(--app-select-portal-width) !important;}

header .app-select > .app-select-trigger:not(:disabled),
header .app-select > .app-select-trigger:not(:disabled):hover,
header .app-select > .app-select-trigger:not(:disabled):focus,
header .app-select > .app-select-trigger:not(:disabled):focus-visible,
header .app-select > .app-select-trigger:not(:disabled):active,
header .app-select > .app-select-trigger[aria-expanded="true"],
header .checkbox-select > .checkbox-select-trigger:not(:disabled),
header .checkbox-select > .checkbox-select-trigger:not(:disabled):hover{transform:none !important;}

/* app-select: uppmätt innehållsbredd är enda breddskällan på mobil. */
@media screen and (max-width:600px){

  .control-row > .app-select > .app-select-trigger{
    white-space:nowrap !important;}

  }

@media screen and (max-width:600px){
  .customer-picker-control-row.control-row{
    flex:0 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
  }

  .customer-picker-control-row.control-row > .app-select{flex:0 1 var(--app-select-content-width,100%) !important;
    width:var(--app-select-content-width,100%) !important;
    min-width:0 !important;
    max-width:100% !important;}

  }

@media screen and (max-width:600px){
  .app-select-menu > .app-select-option{
    overflow:visible !important;}
}

@media screen and (max-width:600px){
  .control-row > .app-select{flex:1 1 0 !important;
    width:0 !important;
    min-width:0 !important;
    max-width:none !important;}

  .control-row > .app-select > .app-select-trigger{width:100% !important;
    min-width:0 !important;
    max-width:100% !important;}

  .app-select-menu > .app-select-option{white-space:nowrap !important;}
}

@media screen and (max-width:600px){
  #customerPanel .customer-picker-control-row.control-row > .app-select{flex:0 0 var(--customer-select-width) !important;
    width:var(--customer-select-width) !important;
    min-width:var(--customer-select-width) !important;
    max-width:calc(100vw - 120px) !important;}

  #customerPanel .customer-picker-control-row.control-row > .app-select > .app-select-trigger{width:var(--customer-select-width) !important;
    min-width:var(--customer-select-width) !important;
    max-width:100% !important;}
}

@media screen and (max-width:600px){
  #customerPanel .app-select:has(> #companySelect){max-width:calc(100vw - 120px) !important;}

  #customerPanel .app-select:has(> #companySelect) > .app-select-trigger{max-width:100% !important;}
}

.header-field .app-select-trigger > span{font:inherit !important;
  font-size:inherit !important;
  opacity:1 !important;}

/* Rapporthuvud: app-select ersätter native extra-hours-editor utan dubbel kontroll. */
#sheet .report-details .timbank-change-value > .app-select{flex:0 0 82px !important;
  width:82px !important;
  min-width:82px !important;
  max-width:82px !important;
  margin:0 0 0 7px !important;}

#sheet .report-details .timbank-change-value:has(> .app-select){gap:0 !important;}

#sheet .app-select > select{position:absolute !important;
  inline-size:1px !important;
  block-size:1px !important;
  width:1px !important;
  min-width:1px !important;
  max-width:1px !important;
  height:1px !important;
  min-height:1px !important;
  max-height:1px !important;
  margin:-1px !important;
  padding:0 !important;
  border:0 !important;
  opacity:0 !important;
  overflow:hidden !important;
  clip:rect(0 0 0 0) !important;
  clip-path:inset(50%) !important;
  pointer-events:none !important;}

/* Rapporttabell: app-select behåller tabellens kompakta kontrollstorlek. */
#sheet td .app-select:has(> select.cell-editor){width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:32px !important; min-height:32px !important; max-height:32px !important;}

#sheet td .app-select:has(> select.cell-editor) > .app-select-trigger{width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:32px !important; min-height:32px !important; max-height:32px !important;
  padding:3px 7px !important;
  font-size:13px !important;
  line-height:20px !important;}

#sheet td .app-select:has(> select.cell-editor) > .app-select-trigger svg{width:16px !important;
  height:16px !important;
  flex-basis:16px !important;}

#sheet td .app-select:has(> select.cell-editor) > .app-select-trigger > span{white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;}

/* v44 — Markeringar använder samma Datoden-blå som övriga interaktioner. */
::selection{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
}
#sheet td.match,
.search-hit-focus>td,
#sheet :is(input,select,textarea,.app-select-trigger):focus,
#sheet :is(input,select,textarea,.app-select-trigger):focus-visible{
  border-color:var(--sub-datoden-interaction)!important;
}

/* v45 — exakt aktiv td.match-markering. */
td.match,
#sheet td.match{
  outline:2px solid var(--sub-datoden-interaction)!important;
  outline-offset:-2px!important;
}

/* v46 — sökkryssens statiska presentations-CSS flyttad från app.js. */

/* Tidigare JS v191. */
.search-clear-wrap-v191{
   position:relative!important;display:inline-flex!important;align-items:center!important;
   min-width:0!important;box-sizing:border-box!important;
 }
 .search-clear-wrap-v191>input{width:100%!important;box-sizing:border-box!important;padding-right:38px!important;}
 .search-clear-button-v191{

   z-index:2147483646!important;

   border:0!important;border-radius:50%!important;background:transparent!important;color:#666!important;
   display:none!important;align-items:center!important;justify-content:center!important;cursor:pointer!important;
   font-size:0!important;line-height:1!important;
 }
 .search-clear-button-v191.visible{display:inline-flex!important;}
 .search-clear-button-v191:hover,.search-clear-button-v191:focus{background:rgba(127,127,127,.18)!important;color:#222!important;}
 .search-clear-button-v191 svg{display:block!important;width:17px!important;height:17px!important;pointer-events:none!important;}
 html[data-theme="dark"] .search-clear-button-v191{color:#777!important;}
 html[data-theme="dark"] .search-clear-button-v191:hover,
 html[data-theme="dark"] .search-clear-button-v191:focus{color:#ddd!important;}

 @media screen and (min-width:769px){
   body>header .tool-buttons>.search-clear-year-v191{width:285px!important;min-width:180px!important;max-width:285px!important;flex:0 1 285px!important;}
 }
 @media screen and (max-width:768px){
   #mobileYearSearchRow>.search-clear-wrap-v191,
   #mobileMonthSearchRow>.search-clear-wrap-v191,
   #mobileSearchBox>.search-clear-wrap-v191{width:100%!important;max-width:100%!important;flex:1 1 auto!important;}
 }

/* Tidigare JS v192. */
.search-clear-wrap-v191>input[type="search"]::-webkit-search-cancel-button{
   -webkit-appearance:none!important;
   appearance:none!important;
   display:none!important;
 }
 .search-clear-wrap-v191>input[type="search"]::-webkit-search-decoration{
   -webkit-appearance:none!important;
 }

/* Tidigare JS v193. */
.search-clear-button-v191,
 .search-clear-button-v191:hover,
 .search-clear-button-v191:focus,
 .search-clear-button-v191:focus-visible,
 .search-clear-button-v191:active{
   position:absolute!important;
   right:7px!important;
   top:50%!important;
   bottom:auto!important;
   left:auto!important;
   transform:translateY(-50%)!important;
   translate:none!important;
   width:28px!important;
   min-width:28px!important;
   max-width:28px!important;
   height:28px!important;
   min-height:28px!important;
   max-height:28px!important;
   margin:0!important;
   padding:5px!important;
   box-sizing:border-box!important;
   flex:none!important;
   align-self:auto!important;
   vertical-align:initial!important;
   outline:none!important;
 }
 .search-clear-button-v191:active{
   scale:1!important;
 }

/* Tidigare JS v196. */
header button.search-clear-button-v191:not(:disabled),
 header button.search-clear-button-v191:not(:disabled):hover,
 header button.search-clear-button-v191:not(:disabled):focus,
 header button.search-clear-button-v191:not(:disabled):focus-visible,
 header button.search-clear-button-v191:not(:disabled):active{
   position:absolute!important;
   right:7px!important;
   top:50%!important;
   bottom:auto!important;
   left:auto!important;
   transform:translateY(-50%)!important;
   translate:none!important;
   scale:1!important;
   width:28px!important;
   min-width:28px!important;
   max-width:28px!important;
   height:28px!important;
   min-height:28px!important;
   max-height:28px!important;
   margin:0!important;
   padding:5px!important;
   box-sizing:border-box!important;
   flex:none!important;
   filter:none!important;
   box-shadow:none!important;
   border:0!important;
   background:transparent!important;
   outline:none!important;
 }
 header button.search-clear-button-v191:not(:disabled):hover,
 header button.search-clear-button-v191:not(:disabled):focus,
 header button.search-clear-button-v191:not(:disabled):focus-visible{
   background:rgba(127,127,127,.16)!important;
 }

/* Tidigare JS v198. */

/* Tidigare JS v199. */
header button.search-clear-button-v191:not(:disabled):hover,
 header button.search-clear-button-v191:not(:disabled):focus-visible,
 header button.search-clear-button-v191:not(:disabled):active,
 .search-clear-button-v191:hover,
 .search-clear-button-v191:focus-visible,
 .search-clear-button-v191:active{
   color:var(--datoden-on-accent,#fff)!important;
   background:var(--datoden-accent,#3953a4)!important;
 }

/* v47 — sheet-search-clear CSS flyttad från search.js till app.css. */
.report-sheet-search .sheet-search-input-wrap{position:relative;display:flex;align-items:center;flex:1 1 auto;min-width:0}
.report-sheet-search .sheet-search-input-wrap>#sheetSearch{width:100%;min-width:0;padding-right:40px!important}
.report-sheet-search button.sheet-search-clear:not(.visible){display:none!important}
.report-sheet-search button.sheet-search-clear.visible{display:inline-flex!important}
.report-sheet-search button.sheet-search-clear,
.report-sheet-search button.sheet-search-clear:not(:disabled):hover,
.report-sheet-search button.sheet-search-clear:not(:disabled):focus,
.report-sheet-search button.sheet-search-clear:not(:disabled):focus-visible,
.report-sheet-search button.sheet-search-clear:not(:disabled):active{
 position:absolute!important;right:7px!important;top:50%!important;bottom:auto!important;left:auto!important;
 transform:translateY(-50%)!important;translate:none!important;scale:1!important;
 width:28px!important;min-width:28px!important;max-width:28px!important;
 height:28px!important;min-height:28px!important;max-height:28px!important;
 margin:0!important;padding:5px!important;box-sizing:border-box!important;
 border:0!important;border-radius:50%!important;background:transparent!important;color:#777!important;
 align-items:center!important;justify-content:center!important;z-index:5!important;
 box-shadow:none!important;filter:none!important;outline:none!important;
}
.report-sheet-search button.sheet-search-clear:not(:disabled):hover,
.report-sheet-search button.sheet-search-clear:not(:disabled):focus-visible,
.report-sheet-search button.sheet-search-clear:not(:disabled):active{
 transform:translateY(-50%)!important;

}
.report-sheet-search button.sheet-search-clear svg{width:17px!important;height:17px!important;pointer-events:none}
.report-sheet-search #sheetSearch::-webkit-search-cancel-button{-webkit-appearance:none!important;appearance:none!important;display:none!important}
@media(max-width:768px){.report-sheet-search .sheet-search-input-wrap{width:100%;max-width:100%}}
.report-sheet-search #sheetSearch[type="search"]::-webkit-search-cancel-button{
 -webkit-appearance:none!important;appearance:none!important;display:none!important;width:0!important;height:0!important;
}
.report-sheet-search #sheetSearch[type="search"]::-webkit-search-decoration{
 -webkit-appearance:none!important;appearance:none!important;
}
.report-sheet-search button.sheet-search-clear:not(:disabled):hover,
.report-sheet-search button.sheet-search-clear:not(:disabled):focus,
.report-sheet-search button.sheet-search-clear:not(:disabled):focus-visible,
.report-sheet-search button.sheet-search-clear:not(:disabled):active{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
  border-color:var(--sub-datoden-interaction)!important;
  filter:none!important;
  box-shadow:none!important;
}

/* v51 — Checkbox-vallistor: inget gap mellan innehåll och högerkant. */
.checkbox-select-option{
  gap:0;
}

/* v52 — Hover/focus/selected i gemensamma vallistor följer 6px-radius. */
.app-select-option:is(:hover,:focus,.selected),
.checkbox-select-option:is(:hover,:focus,.selected),
body>.app-select-menu.app-select-menu-portal>.app-select-option:is(:hover,:focus,.selected){
  border-radius:var(--sub-datoden-control-radius);
}

/* v62 — Öppna checkbox-vallistor i sidhuvudet får gå utanför header-ramen. */
header:has(.checkbox-select-menu:not([hidden])),
#headerMasterCollapsible:has(.checkbox-select-menu:not([hidden])),
.settings-panel:has(.checkbox-select-menu:not([hidden])),
#ordererToolsPanel:has(.checkbox-select-menu:not([hidden])),
#ordererTools:has(.checkbox-select-menu:not([hidden])){
  overflow:visible!important;
}
header:has(.checkbox-select-menu:not([hidden])),
#headerMasterCollapsible:has(.checkbox-select-menu:not([hidden])){
  position:relative!important;
  z-index:1000!important;
}

/* v63 — Företagsväljaren visar inte permanent blå bakgrund på valt alternativ. */

[data-company-checkbox-select] .checkbox-select-option.selected:hover,
[data-company-checkbox-select] .checkbox-select-option.selected:focus-within{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
}

/* v64 — Vald rad syns tydligt, men "Ej aktiv"-delen färgas inte blå. */
[data-company-checkbox-select] .checkbox-select-option.selected{
  background:transparent!important;
  color:inherit!important;
}
[data-company-checkbox-select] .checkbox-select-option.selected>.checkbox-select-name{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
  border-radius:var(--sub-datoden-control-radius)!important;
}
[data-company-checkbox-select] .checkbox-select-option.selected>.checkbox-select-state{
  background:transparent!important;
  color:inherit!important;
}

/* v65 — Kompakt hover/focus för "Ej aktiv" utan stor blå blockyta. */
[data-company-checkbox-select] .checkbox-select-state{
  justify-self:end;
  width:auto!important;
  min-width:0!important;
  border-radius:var(--sub-datoden-control-radius)!important;
  box-sizing:border-box;
}
[data-company-checkbox-select] .checkbox-select-option:hover>.checkbox-select-state,
[data-company-checkbox-select] .checkbox-select-option:focus-within>.checkbox-select-state,
[data-company-checkbox-select] .checkbox-select-state:hover,
[data-company-checkbox-select] .checkbox-select-state:focus-within{
  background:transparent!important;
  color:inherit!important;
}
[data-company-checkbox-select] .checkbox-select-state:hover,
[data-company-checkbox-select] .checkbox-select-state:focus-within{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
}
[data-company-checkbox-select] .checkbox-select-state input{
  margin:0!important;
  flex:0 0 auto;
}

/* v66 — Mjukare vänsteravslut på "Ej aktiv"-hover. */
[data-company-checkbox-select] .checkbox-select-state:hover,
[data-company-checkbox-select] .checkbox-select-state:focus-within{
  border-radius:999px var(--sub-datoden-control-radius) var(--sub-datoden-control-radius) 999px!important;
  padding-left:10px!important;
}

/* v67 — Hover på "Ej aktiv" markerar även företagets namn. */
[data-company-checkbox-select] .checkbox-select-option:has(.checkbox-select-state:hover)>.checkbox-select-name,
[data-company-checkbox-select] .checkbox-select-option:has(.checkbox-select-state:focus-within)>.checkbox-select-name{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
  border-radius:var(--sub-datoden-control-radius)!important;
}

/* v68 — Kompaktare alternativ inne i vallistor; själva väljarknapparna behåller sin höjd. */

/* v69 — Ännu kompaktare listalternativ och full klickyta för "Ej aktiv". */
.app-select-menu>.app-select-option,
.checkbox-select-menu>.checkbox-select-option{
  min-height:30px!important;
}
.app-select-menu>.app-select-option,
.checkbox-select-menu .checkbox-select-name{
  padding-top:3px!important;
  padding-bottom:3px!important;
}
[data-company-checkbox-select] .checkbox-select-option{
  align-items:stretch!important;
}
[data-company-checkbox-select] .checkbox-select-state{
  align-self:stretch!important;
  min-height:30px!important;
  height:auto!important;
  padding:0 8px!important;
  display:inline-flex!important;
  align-items:center!important;
  cursor:pointer!important;
}

/* v70 — Beskrivning matchar övriga vallistor typografiskt och i hörnradie. */
#sheet tbody textarea.cell-editor[data-key*="!D"]{
  border-radius:var(--sub-datoden-control-radius)!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
  }

/* v71 — Dropdown-alternativ i Innehåll använder exakt samma typografi som väljarknappen. */
#sheet .app-select-menu>.app-select-option{
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.2!important;
}

/* v72 — Innehållslistor ligger i body-portal; matcha cellväljarnas 13px även där. */
body>.app-select-menu.app-select-menu-portal>.app-select-option{
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
}
body>.app-select-menu.app-select-menu-portal{
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.2!important;
}

/* v76 — Företagsväljaren matchar övriga vallistor i typografi och radhöjd. */
[data-company-checkbox-select] .checkbox-select-trigger,
[data-company-checkbox-select] .checkbox-select-menu,
[data-company-checkbox-select] .checkbox-select-option,
[data-company-checkbox-select] .checkbox-select-name,
[data-company-checkbox-select] .checkbox-select-state{
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
  line-height:1.2!important;
}
[data-company-checkbox-select] .checkbox-select-option{
  min-height:30px!important;
}
[data-company-checkbox-select] .checkbox-select-name{
  min-height:30px!important;
  padding-top:3px!important;
  padding-bottom:3px!important;
  display:flex!important;
  align-items:center!important;
  box-sizing:border-box!important;
}

@media (min-width: 601px) {
  html[data-theme="dark"] #reportActionsBelowHeader {
    margin-bottom: -1px !important;
  }
}

/* v82 — Text och bild: UI-textfält hålls enradiga med horisontell scroll. */
#accountOverlay textarea[data-uitext]{
  box-sizing:border-box!important;
  width:100%!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
  padding:10px 14px!important;
  line-height:24px!important;
  white-space:pre!important;
  overflow-wrap:normal!important;
  word-break:normal!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  resize:none!important;
}

/* v83 — Info-popup: inget automatiskt mellanrum mellan första rubriken och innehållet. */

/* v85 — Info-popup: rubrikradens automatiska 10px-gap borttaget. */
.function-info-modal-head{
  margin-bottom:0!important;
}

/* v86 — Info-popup: stängknappen tas ur rubrikradens flöde. */
.function-info-modal{
  position:relative!important;
}
.function-info-modal-close{
  position:absolute!important;
  right:10px!important;
  z-index:2!important;
}

/* v87 — Info-popupens stängknapp följer samma komponentstil som övriga stängknappar. */
button.function-info-modal-close{
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  min-height:32px!important;
  padding:0!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  border:1px solid transparent!important;
  border-radius:6px!important;
  background:transparent!important;
  color:inherit!important;
  font-size:22px!important;
  font-weight:400!important;
  line-height:1!important;
  box-shadow:none!important;
  outline:none!important;
  cursor:pointer!important;
  filter:none!important;
  transform:none!important;
  transition:background-color .16s ease,border-color .16s ease,color .16s ease!important;
}
button.function-info-modal-close:hover,
button.function-info-modal-close:focus,
button.function-info-modal-close:focus-visible,
button.function-info-modal-close:active{
  background:var(--sub-datoden-interaction)!important;
  color:var(--datoden-on-accent,#fff)!important;
  border-color:transparent!important;
  box-shadow:none!important;
  outline:none!important;
  filter:none!important;
  transform:none!important;
}

/* v88 — Info-popupens stängknapp 10px från toppen. */
.function-info-modal-close{
  top:10px!important;
}

/* v569 — Företag och beställare: ren 3-kolumnslayout utan att åsidosätta [hidden]. */
#ordererTools{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:0 12px!important;
  align-items:start!important;
  width:100%!important;
}
#ordererTools > .admin-panel-intro{
  grid-column:1 / -1!important;
}
#ordererTools > .admin-section{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
}
#ordererTools > .admin-section .admin-primary-row{
  width:100%!important;
}
@media(max-width:900px){
  #ordererTools{grid-template-columns:1fr!important;row-gap:14px!important}
}

/* v570 — Beskrivningar-väljaren är max 33,3% bred på desktop. */
#descriptionToolsPanel .admin-section{
  width:33.333333%!important;
  max-width:33.333333%!important;
  box-sizing:border-box!important;
}
#descriptionToolsPanel .admin-primary-row{
  width:100%!important;
}
@media(max-width:900px){
  #descriptionToolsPanel .admin-section{
    width:100%!important;
    max-width:100%!important;
  }
}

/* v583 — Gemensam ellips för vald text utan påverkan på vallistans layout/höjd. */
.app-select-trigger > span{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.app-select-trigger > svg{
  flex:0 0 auto!important;
}

/* v587 — Mobil > innehåll: alla rapportfält 100% breda i en vertikal lista. */
@media screen and (max-width:768px){
  #sheet table,
  #sheet tbody,
  #sheet tbody tr{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
  }
  #sheet thead{
    display:none!important;
  }
  #sheet tbody tr{
    height:auto!important;
    min-height:0!important;
  }
  #sheet tbody tr > :is(.final-consultant-cell,.final-company-cell,.final-orderer-cell,.final-date-cell,.final-description-cell,.final-time-cell){
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    box-sizing:border-box!important;
    margin:0 0 10px!important;
    padding:0!important;
  }
  #sheet tbody tr > :is(.final-consultant-cell,.final-company-cell,.final-orderer-cell,.final-date-cell,.final-description-cell,.final-time-cell) .app-select,
  #sheet tbody tr > :is(.final-consultant-cell,.final-company-cell,.final-orderer-cell,.final-date-cell,.final-description-cell,.final-time-cell) .app-select-trigger,
  #sheet tbody tr > :is(.final-consultant-cell,.final-company-cell,.final-orderer-cell,.final-date-cell,.final-description-cell,.final-time-cell) select,
  #sheet tbody tr > :is(.final-consultant-cell,.final-company-cell,.final-orderer-cell,.final-date-cell,.final-description-cell,.final-time-cell) input,
  #sheet tbody tr > :is(.final-consultant-cell,.final-company-cell,.final-orderer-cell,.final-date-cell,.final-description-cell,.final-time-cell) textarea.cell-editor{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
    margin:0!important;
  }
}

/* v604 — Summeringsmeddelandet ligger i den riktiga första cellen på första summeringsraden. */
@media screen and (min-width:769px){
  #sheet tbody tr.summary-row > td.summary-message-cell{
    padding-left:10px!important;
    text-align:left!important;
    vertical-align:middle!important;
    font-family:inherit!important;
    font-size:10pt!important;
    font-weight:400!important;
    font-style:normal!important;
    line-height:normal!important;
    color:inherit!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
}

/* v608 — Mobil: rapportens sex kolumnrubriker ligger horisontellt. */
@media screen and (max-width:768px){
  #sheet tbody > tr:first-child{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0 0 12px!important;
    padding:0!important;
  }
  #sheet tbody > tr:first-child > td{
    display:block!important;
    flex:0 0 auto!important;
    width:auto!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    white-space:nowrap!important;
  }
}

/* v611 — Mobil: använd befintlig app-select fullt ut, samma komponent som desktop. */
@media screen and (max-width:768px){
  #sheet tbody tr:not(.summary-row) .app-select{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }
  #sheet tbody tr:not(.summary-row) .app-select > select{
    position:absolute!important;
    width:1px!important;
    height:1px!important;
    margin:-1px!important;
    padding:0!important;
    overflow:hidden!important;
    clip:rect(0 0 0 0)!important;
    clip-path:inset(50%)!important;
    white-space:nowrap!important;
    border:0!important;
    opacity:0!important;
    pointer-events:none!important;
  }
  #sheet tbody tr:not(.summary-row) .app-select-trigger{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:38px!important;
    min-height:38px!important;
    box-sizing:border-box!important;
    margin:0!important;

    text-align:left!important;
  }
  #sheet tbody tr:not(.summary-row) .app-select-trigger > span,
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger > span{
    display:block!important;
    flex:1 1 auto!important;
    min-width:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }
  #sheet tbody tr:not(.summary-row) .app-select-trigger > svg,
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger > svg{
    position:absolute!important;
    right:9px!important;
    top:50%!important;
    width:16px!important;
    height:16px!important;
    margin:0!important;
    transform:translateY(-50%) rotate(0deg)!important;
    transform-origin:50% 50%!important;
    transition:transform .16s ease!important;
    pointer-events:none!important;
  }
  #sheet tbody tr:not(.summary-row) .app-select-trigger[aria-expanded="true"] > svg{
    transform:translateY(-50%) rotate(180deg)!important;
  }
}

/* Portalen ligger i body och måste därför stylas separat från #sheet. */
body > .app-select-menu.app-select-menu-portal{
  z-index:2147483600!important;
  box-sizing:border-box!important;
  width:var(--app-select-portal-width)!important;
  min-width:var(--app-select-portal-width)!important;
  max-width:var(--app-select-portal-width)!important;
  max-height:min(320px,50vh)!important;
  overflow:auto!important;
  padding:4px!important;
  border:1px solid var(--datoden-bg-62686d,#62686d)!important;
  border-radius:6px!important;
  background:var(--datoden-bg-343638,#343638)!important;
  color:#fff!important;
  box-shadow:0 8px 24px rgba(0,0,0,.35)!important;
}
body > .app-select-menu.app-select-menu-portal > .app-select-option{
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:8px 10px!important;
  border:0!important;
  border-radius:4px!important;
  background:var(--datoden-bg-343638,#343638)!important;
  color:#fff!important;
  white-space:normal!important;
  line-height:1.25!important;
}
body > .app-select-menu.app-select-menu-portal > .app-select-option:hover,
body > .app-select-menu.app-select-menu-portal > .app-select-option:focus,
body > .app-select-menu.app-select-menu-portal > .app-select-option.selected{
  background:var(--datoden-bg-4a4d50,#4a4d50)!important;
}
html[data-theme="light"] body > .app-select-menu.app-select-menu-portal{
  border-color:var(--datoden-bg-b9bec2,#b9bec2)!important;
  background:var(--datoden-bg-ffffff,#fff)!important;
  color:#222!important;
  box-shadow:0 8px 24px rgba(0,0,0,.18)!important;
}
html[data-theme="light"] body > .app-select-menu.app-select-menu-portal > .app-select-option{
  background:var(--datoden-bg-ffffff,#fff)!important;
  color:#222!important;
}
html[data-theme="light"] body > .app-select-menu.app-select-menu-portal > .app-select-option:hover,
html[data-theme="light"] body > .app-select-menu.app-select-menu-portal > .app-select-option:focus,
html[data-theme="light"] body > .app-select-menu.app-select-menu-portal > .app-select-option.selected{
  background:var(--datoden-bg-eceeef,#eceeef)!important;
}

/* v614 — Mobil: luft och avgränsare mellan rapportens datarader. */
@media screen and (max-width:768px){
  #sheet tbody tr:not(:first-child):not(.summary-row):not(.empty-entry-row){
    margin:0!important;
    padding:0!important;
  }
  #sheet tbody tr:not(:first-child):not(.summary-row):not(.empty-entry-row) > .final-time-cell{
    margin-bottom:12px!important;
    padding-bottom:12px!important;
    border-bottom:1px solid rgba(127,127,127,.35)!important;
  }
}

/* v618 — Endast textfärg: Välj ... och Skriv ... ska vara exakt samma dämpade färg. */
#sheet .app-select-trigger.is-placeholder > span,
#sheet :is(input.cell-editor,textarea.cell-editor)::placeholder{
  color:#9a9a9a!important;
  opacity:1!important;
}
html[data-theme="light"] #sheet .app-select-trigger.is-placeholder > span,
html[data-theme="light"] #sheet :is(input.cell-editor,textarea.cell-editor)::placeholder{
  color:#777!important;
  opacity:1!important;
}

/* v619 — Endast textinmatningsfältets placeholder matchar Välj-knapptexten exakt. */
#sheet :is(input.cell-editor,textarea.cell-editor)::placeholder{
  color:#9a9a9a!important;
  opacity:1!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;
  font-style:normal!important;
  }
html[data-theme="light"] #sheet :is(input.cell-editor,textarea.cell-editor)::placeholder{
  color:#777!important;
  opacity:1!important;
}

/* v621 — KANONISK FÄLTYTA: samma kod för desktop och mobil. */
#sheet tbody tr:not(.summary-row) :is(.app-select-trigger,input.cell-editor,textarea.cell-editor),
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  margin:0!important;
  border:0!important;
  border-radius:6px!important;
  background:var(--datoden-bg-414345,#414345)!important;
  color:#fff!important;
  font-family:inherit!important;
  font-size:13px!important;
  font-weight:400!important;

}
#sheet tbody tr:not(.summary-row) .app-select-trigger,
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger{padding:7px 26px 7px 8px!important;}
#sheet tbody tr:not(.summary-row) :is(input.cell-editor,textarea.cell-editor){padding:7px 8px!important;}
#sheet tbody tr:not(.summary-row) :is(.app-select-trigger,input.cell-editor),
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger{
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
}

/* Utskriftens befintliga vita fältyta; skärm använder den centrala komponenten. */
@media print {
html[data-theme="light"] #sheet tbody tr:not(.summary-row) :is(.app-select-trigger,input.cell-editor,textarea.cell-editor),
html[data-theme="light"] #sheet .report-details .timbank-change-value > .app-select > .app-select-trigger{
  background:var(--datoden-bg-ffffff,#fff)!important;color:#222!important;
}
}

/* v626 — ENDA höjdkällan för Beskrivningsfältet. */
#sheet tbody tr:not(.summary-row) textarea.cell-editor{
  box-sizing:border-box!important;
  height:30px!important;
  min-height:30px!important;
  max-height:none!important;
  padding-top:4px!important;
  padding-bottom:4px!important;
  line-height:20px!important;
}

/* v631 — Mer faktisk textbredd i alla rapportvallistor. */
#sheet tbody tr:not(.summary-row) .app-select-trigger,
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger{
  gap:4px!important;
  padding-left:8px!important;
  padding-right:18px!important;
}
#sheet tbody tr:not(.summary-row) .app-select-trigger > span{
  flex:1 1 auto!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
}
#sheet tbody tr:not(.summary-row) .app-select-trigger > svg{
  right:3px!important;
  width:9px!important;
  height:9px!important;
  min-width:9px!important;
  max-width:9px!important;
  flex-basis:9px!important;
}
#sheet tbody tr:not(.summary-row) :is(input.cell-editor,textarea.cell-editor){
  padding-left:8px!important;
  padding-right:8px!important;
}

/* v637 — Headerverktygens verkliga DOM: alla tre knappar exakt 46px. */
body > header .tool-buttons > :is(#undo,#textImageHeaderButton,#headerMasterToggle){
  box-sizing:border-box!important;
  height:46px!important;
  min-height:46px!important;
  max-height:46px!important;
}
body > header .tool-buttons > #headerMasterToggle{
  width:46px!important;
  min-width:46px!important;
  max-width:46px!important;
}

/* v647 — Förändring timbank använder samma app-select-komponent som rapportinnehållet. */
#sheet .report-details .timbank-change-value > .app-select > .app-select-trigger{
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
}

/* v648 — EN gemensam pilgeometri för alla rapportens app-select-knappar. */
#sheet :is(
  tbody tr:not(.summary-row) .app-select-trigger,
  .report-details .timbank-change-value > .app-select > .app-select-trigger
){
  position:relative!important;
}
#sheet :is(
  tbody tr:not(.summary-row) .app-select-trigger,
  .report-details .timbank-change-value > .app-select > .app-select-trigger
) > svg{
  position:absolute!important;
  top:50%!important;
  right:3px!important;
  width:9px!important;
  height:9px!important;
  min-width:9px!important;
  max-width:9px!important;
  margin:0!important;
  padding:0!important;
  flex:0 0 9px!important;
  transform:translateY(-50%)!important;
  transform-origin:center!important;
}
#sheet :is(
  tbody tr:not(.summary-row) .app-select-trigger,
  .report-details .timbank-change-value > .app-select > .app-select-trigger
)[aria-expanded="true"] > svg{
  transform:translateY(-50%) rotate(180deg)!important;
}

/* v649 — Eget tal skrivs direkt på sista raden i öppnad vallista. */
.app-select-menu .app-select-manual-option{text-align:center!important;font-size:18px!important;line-height:1!important;}
.app-select-menu .app-select-manual-input{box-sizing:border-box!important;display:block!important;width:calc(100% - 8px)!important;height:32px!important;margin:4px!important;padding:0 8px!important;border:1px solid var(--datoden-bg-62686d,#62686d)!important;border-radius:5px!important;font:inherit!important;outline:none!important;}

/* v651 — Manuellt tal behåller exakt samma plats/utseende som vallistknappen. */
#sheet .report-details .timbank-change-value > :is(input.extra-hours-manual-persistent,input.quantity-manual-editor),
#sheet tbody tr:not(.summary-row) input.quantity-manual-editor{
  box-sizing:border-box!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  margin:0!important;
  padding:0 8px!important;
  border:0!important;
  border-radius:6px!important;
  background:var(--datoden-bg-414345,#414345)!important;
  color:#fff!important;
  font:inherit!important;
  font-size:13px!important;
  line-height:22px!important;
  box-shadow:none!important;
  appearance:none!important;
  -moz-appearance:textfield!important;
}
#sheet .report-details .timbank-change-value > :is(input.extra-hours-manual-persistent,input.quantity-manual-editor){
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
}

/* v652 — Förändring timbank ligger i sin naturliga gridrad, utan gamla top/left-offsets. */
#sheet .report-details .timbank-change-label,
#sheet .report-details .timbank-change-value{
  position:static!important;
  top:auto!important;
  left:auto!important;
  transform:none!important;
  align-self:center!important;
}
#sheet .report-details .timbank-change-value{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  width:82px!important;
  min-width:82px!important;
  max-width:82px!important;
  min-height:32px!important;
  margin:0!important;
  padding:0!important;
}
#sheet .report-details .timbank-change-value > :is(.app-select,input.extra-hours-manual-persistent,input.quantity-manual-editor){
  position:static!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
}

/* v654 — Eget tal är enradigt och har samma kompakta typografi som vallistan. */
#sheet input.quantity-manual-editor,
.app-select-menu .app-select-manual-input{
  font-size:13px!important;
  line-height:20px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* v655 — Inline Eget tal: mindre text och tätare padding; blur fäster värdet direkt. */
.app-select-menu .app-select-manual-input{
  font-size:11px!important;
  line-height:18px!important;
  padding-left:5px!important;
  padding-right:5px!important;
  text-overflow:clip!important;
}
.app-select-menu .app-select-manual-input::placeholder{
  font-size:11px!important;
  opacity:.72!important;
}

/* v656 — Verkliga inlinefältet i app-select-menyn: kompakt text som inte skrivs över av fältregler. */
body .app-select-menu input.app-select-manual-input{
  box-sizing:border-box!important;

  height:28px!important;
  min-height:28px!important;
  max-height:28px!important;
  padding:0 4px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
}
body .app-select-menu input.app-select-manual-input::placeholder{

  opacity:.72!important;
}

/* v658 — Manuellt inmatningsläge ligger kvar tills Enter eller fokus lämnar fältet. */
.app-select-menu .app-select-manual-input{
  background:var(--datoden-bg-343638,#343638)!important;
  color:#fff!important;
  caret-color:#fff!important;
}
.app-select-menu .app-select-manual-input:focus{
  background:var(--datoden-bg-343638,#343638)!important;
  border-color:var(--datoden-accent-2,#405db8)!important;
}

/* v660 — Förändring timbank linjeras mot högerkanten på Tid-kolumnen. */
#sheet .report-details .timbank-change-value{
  justify-self:end!important;
}

/* v661 — Timbankens högra kant linjerar med Tid-kolumnens kontroller. */
#sheet .report-details .timbank-change-value{
  transform:translateX(7px)!important;
}

/* Eget tal: 30% större än 10px = 13px. */
body .app-select-menu input.app-select-manual-input,
body .app-select-menu input.app-select-manual-input::placeholder{
  font-size:13px!important;
  line-height:18px!important;
}

/* Plus-raden följer samma vänsterkant/padding som talen ovan. */
body .app-select-menu .app-select-manual-option{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  width:100%!important;
  padding-left:12px!important;
  padding-right:12px!important;
  text-align:left!important;
  font-size:13px!important;
  line-height:1!important;
}

/* v666 — Företag/Ej aktiv-vallistan följer mörkt/ljust/system-tema. */
html[data-theme="dark"] .checkbox-select-menu,
html.datoden-theme-dark .checkbox-select-menu{
  background:var(--datoden-bg-292b2d,#292b2d)!important;
  color:#f5f5f3!important;
  border-color:var(--datoden-bg-55595d,#55595d)!important;
}
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-option,
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-name,
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-state,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-option,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-name,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-state{
  background:transparent!important;
  color:#f5f5f3!important;
}
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-option:hover,
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-option:focus-within,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-option:hover,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-option:focus-within{
  background:var(--sub-datoden-interaction,var(--datoden-accent-2,#405db8))!important;
  color:var(--datoden-on-accent,#fff)!important;
}
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-option:hover *,
html[data-theme="dark"] .checkbox-select-menu .checkbox-select-option:focus-within *,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-option:hover *,
html.datoden-theme-dark .checkbox-select-menu .checkbox-select-option:focus-within *{
  color:#fff!important;
}
html[data-theme="dark"] .checkbox-select-menu input[type="checkbox"],
html.datoden-theme-dark .checkbox-select-menu input[type="checkbox"]{
  accent-color:var(--sub-datoden-interaction,var(--datoden-accent-2,#405db8))!important;
}
@media(prefers-color-scheme:dark){
  html[data-theme="system"] .checkbox-select-menu{
    background:var(--datoden-bg-292b2d,#292b2d)!important;color:#f5f5f3!important;border-color:var(--datoden-bg-55595d,#55595d)!important;
  }
  html[data-theme="system"] .checkbox-select-menu :is(.checkbox-select-option,.checkbox-select-name,.checkbox-select-state){
    background:transparent!important;color:#f5f5f3!important;
  }
  html[data-theme="system"] .checkbox-select-menu .checkbox-select-option:hover,
  html[data-theme="system"] .checkbox-select-menu .checkbox-select-option:focus-within{
    background:var(--sub-datoden-interaction,var(--datoden-accent-2,#405db8))!important;color:var(--datoden-on-accent,#fff)!important;
  }
}

/* v667 — Sidfotens redigeringsytor följer mörkt/ljust/system-tema. */
html[data-theme="dark"] :is(.footer-new-rich-editor,.rich-footer-editor,.info-rich-editor),
html.datoden-theme-dark :is(.footer-new-rich-editor,.rich-footer-editor,.info-rich-editor){
  background:var(--datoden-bg-343638,#343638)!important;
  color:#f5f5f3!important;
  border-color:var(--datoden-bg-55595d,#55595d)!important;
  caret-color:#fff!important;
}
html[data-theme="dark"] :is(.footer-new-rich-editor,.rich-footer-editor,.info-rich-editor) a,
html.datoden-theme-dark :is(.footer-new-rich-editor,.rich-footer-editor,.info-rich-editor) a{
  color:inherit!important;
}
@media(prefers-color-scheme:dark){
  html[data-theme="system"] :is(.footer-new-rich-editor,.rich-footer-editor,.info-rich-editor){
    background:var(--datoden-bg-343638,#343638)!important;color:#f5f5f3!important;border-color:var(--datoden-bg-55595d,#55595d)!important;caret-color:#fff!important;
  }
  }

/* v670 — Ljust tema: formulärkontroller och app-select använder en enda ljus komponentyta. */
html[data-theme="light"] :is(
  .app-select-trigger,.checkbox-select-trigger,
  #customerPanel input,#customerPanel select,#customerPanel textarea,
  .datoden-admin-invite input,.datoden-admin-invite select,
  .datoden-admin-permissions select
){
  background:var(--datoden-bg-ffffff,#fff)!important;color:#222!important;border-color:var(--datoden-bg-aeb6bd,#aeb6bd)!important;
}

/* Centrala action-knappar ska vara mörka även i ljust tema. */

/* SVG-ikoner får aldrig en egen fast färg. */
.datoden-button-icon,.datoden-icon-button svg{color:currentColor!important;stroke:currentColor!important;}

/* v671 — Komplett ljust tema för Rapportens kontroller. */
html[data-theme="light"] :is(
  .app-select-trigger,.checkbox-select-trigger,
  #customerPanel input,#customerPanel select,#customerPanel textarea,
  .header-field input,.header-field select
){
  background:var(--datoden-bg-ffffff,#fff)!important;color:#202124!important;border:1px solid var(--datoden-bg-aeb6bd,#aeb6bd)!important;
}
html[data-theme="light"] :is(.app-select-trigger,.checkbox-select-trigger):hover{
  border-color:var(--datoden-bg-8f989f,#8f989f)!important;
}
html[data-theme="light"] :is(.app-select-trigger,.checkbox-select-trigger) > svg{
  color:#202124!important;stroke:currentColor!important;
}

html[data-theme="light"] .report-actions-buttons .datoden-button-icon{
  color:currentColor!important;stroke:currentColor!important;fill:none!important;
}
html[data-theme="light"] #sheet{
  background:var(--datoden-bg-ffffff,#fff)!important;color:#111!important;
}

html[data-theme="light"] .report-logo :is(svg,img){max-width:100%!important;height:auto!important;}

/* v672 — Ljust tema: app-select/checkbox-select fullt läsbara, utan mörka rester. */
html[data-theme="light"] :is(.app-select-menu,.checkbox-select-menu){
 background:var(--datoden-bg-ffffff,#fff)!important;color:#202124!important;border-color:var(--datoden-bg-aeb6bd,#aeb6bd)!important;color-scheme:light!important;
}
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option,.checkbox-select-name,.checkbox-select-state){
 background:transparent!important;color:#202124!important;opacity:1!important;
}
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option)[aria-selected="true"],
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option):hover,
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option):focus-within{
 background:var(--sub-datoden-interaction,var(--datoden-accent-2,#405db8))!important;color:var(--datoden-on-accent,#fff)!important;
}
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option)[aria-selected="true"] *,
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option):hover *,
html[data-theme="light"] :is(.app-select-option,.checkbox-select-option):focus-within *{
 color:var(--datoden-on-accent,#fff)!important;opacity:1!important;
}
html[data-theme="light"] .checkbox-select-state{
 border-left-color:var(--datoden-bg-c8cdd2,#c8cdd2)!important;
}
html[data-theme="light"] .checkbox-select-state input{accent-color:var(--sub-datoden-interaction,var(--datoden-accent-2,#405db8))!important;}
/* Text och bild: ikon och text ska ha samma kontrast som övriga centrala knappar. */

/* Rapportens dataceller är avsiktligt rena i ljust läge, men dropdown-pilar/text ska vara fullt synliga. */
html[data-theme="light"] #sheet .app-select-trigger > :is(span,svg){
 color:#202124!important;opacity:1!important;
}

/* Ångra följer central ljus knappstandard. */

/* v674 — Kvarvarande ljust-läge-fixar. */

/* Topploggan får aldrig beskäras i ljust läge. */
html[data-theme="light"] body>header .brand,
html[data-theme="light"] body>header .datoden-logo{
  overflow:visible!important;
}
html[data-theme="light"] body>header :is(.brand-logo,.datoden-logo) :is(svg,img){
  display:block!important;max-width:100%!important;height:auto!important;object-fit:contain!important;overflow:visible!important;
}

/* Datalägesindikator: länken öppnar Databashantering i den gemensamma panelen. */

/* Gästens banner använder den gemensamma komponenten, inte redigeringsspärrar. */
/* Rapport v703 — Användare har inte tillgång till Text och bild (knapp och menyval). */
body[data-real-role="user"] #textImageHeaderButton,body[data-real-role="user"] [data-account-page="appearance"],body[data-real-role="user"] [data-account-page="text-image"]{display:none!important}
/* Rapport v704 — Andras sparade rader är skrivskyddade för Användare. */
#sheet tr.rapport-row-locked .cell-editor,#sheet tr.rapport-row-locked select,#sheet tr.rapport-row-locked textarea,#sheet tr.rapport-row-locked input{opacity:.72;cursor:not-allowed}
/* Rapport v705 — Användare: fliken Kund visar bara kundväljaren; företag, beställare och beskrivningar kan bara läggas till. */
body[data-real-role="user"] #customerPanel .admin-panel-intro,
body[data-real-role="user"] #customerPanel #showNewCompany,
body[data-real-role="user"] #customerPanel #newCompanyBox,
body[data-real-role="user"] #customerPanel #removeCompany,
body[data-real-role="user"] #customerPanel #headerForm,
body[data-real-role="user"] #removeCustomer,
body[data-real-role="user"] #removeOrderer,
body[data-real-role="user"] #removeStandardOrderer,
body[data-real-role="user"] #removeDescription,
body[data-real-role="user"] .checkbox-select-option:not([data-own="1"]) .checkbox-select-state{display:none!important}
/* Rapport v706 — Användare: menyerna bakom inställningsikonen (Företag, Beställare, Standardbeställare, Beskrivningar) visar bara Lägg till. */
body[data-real-role="user"] .manage-popup-v154 [data-manage-rename],
body[data-real-role="user"] .manage-popup-v154 [data-manage-remove],
body[data-real-role="user"] .description-change-popup-v159 [data-description-rename],
body[data-real-role="user"] .description-change-popup-v159 [data-description-remove],
body[data-real-role="user"] [data-delete-active],
body[data-real-role="user"] [data-remove-customer],
body[data-real-role="user"] [data-rename-customer]{display:none!important}
/* Rapport v707 — Användare ser Ändra och Ta bort för poster de själva lagt till. */
body[data-real-role="user"][data-own-selected="1"] .manage-popup-v154 [data-manage-rename],
body[data-real-role="user"][data-own-selected="1"] .manage-popup-v154 [data-manage-remove],
body[data-real-role="user"][data-own-selected="1"] .description-change-popup-v159 [data-description-rename],
body[data-real-role="user"][data-own-selected="1"] .description-change-popup-v159 [data-description-remove]{display:block!important}
/* Rapport v708 — Förklaring i menyn när posten inte är användarens egen. */
.rapport-own-hint{max-width:245px;padding:8px 11px 6px;font-size:12px;line-height:1.4;opacity:.75}
/* Rapport v711 — Ingen linje mellan flik och innehåll: raden under flikarna och flikarnas underkant tas bort. */
html #headerMasterCollapsible #settingsTabs.settings-tabs{border-bottom:0!important}
html #headerMasterCollapsible #settingsTabs.settings-tabs>button{margin-bottom:0!important;border-bottom-width:0!important}
html #headerMasterCollapsible>.settings-panel{border-top:0!important;box-shadow:none!important}
/* Rapport v712 — Info-popupen: den sparade texten visas som den skrevs; ingen separat rubrik. */
.function-info-modal.function-info-rich .function-info-modal-title{display:none!important}
.function-info-modal.function-info-rich .function-info-modal-head{min-height:0!important;margin:0!important}
.function-info-modal.function-info-rich .function-info-modal-text{padding-right:34px}
/* Textstorlek (Small/Large; Medium är normal storlek) */
.function-info-modal-text [data-size="s"],.print-footer [data-size="s"],.footer-column [data-size="s"]{font-size:.8em}
.function-info-modal-text [data-size="l"],.print-footer [data-size="l"],.footer-column [data-size="l"]{font-size:1.35em;line-height:1.2}
.rich-size-menu{position:fixed;z-index:2147483647;min-width:150px;padding:6px;border:1px solid var(--datoden-bg-5c6062,#5c6062);border-radius:10px;background:var(--datoden-bg-292a2b,#292a2b);color:#f2f2f2;box-shadow:0 10px 28px rgba(0,0,0,.32)}
.rich-size-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:6px 10px;border:0;border-radius:7px;background:transparent;color:inherit;font:inherit;text-align:left;cursor:pointer}
.rich-size-menu>button:hover,.rich-size-menu>button:focus-visible{background:var(--datoden-bg-484b4d,#484b4d);outline:none}
.rich-size-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;flex:0 0 auto}
.rich-size-icon svg{display:block;width:24px;height:24px}
html[data-theme="light"] .rich-size-menu{background:var(--datoden-bg-ffffff,#fff);color:#222;border-color:var(--datoden-bg-c9c9c9,#c9c9c9)}
html[data-theme="light"] .rich-size-menu>button:hover,html[data-theme="light"] .rich-size-menu>button:focus-visible{background:var(--datoden-bg-e8ebf0,#e8ebf0)}
/* Rapport v713 — Liten radbrytning (Shift+Enter): en halv rad. */
.function-info-modal-text [data-gap="s"],.print-footer [data-gap="s"],.footer-column [data-gap="s"]{display:block;height:.5em;line-height:0;font-size:inherit}
/* Rapport v714 — Ingen linje mellan flik och innehåll. Raden under flikarna, panelens kant och skuggor tas bort, och den valda fliken
   överlappar panelen med 1 px så att ingen skarv kan synas (även vid bråkdelar av pixlar). */
html body #headerMasterCollapsible #settingsTabs.settings-tabs{margin-bottom:0!important;padding-bottom:0!important;border:0!important;box-shadow:none!important;outline:0!important;background:transparent!important;position:relative;z-index:2}
html body #headerMasterCollapsible #settingsTabs.settings-tabs::before,html body #headerMasterCollapsible #settingsTabs.settings-tabs::after{content:none!important;display:none!important}
html body #headerMasterCollapsible #settingsTabs.settings-tabs>button{border:0!important;box-shadow:none!important;outline:0!important;margin-bottom:0!important}
html body #headerMasterCollapsible #settingsTabs.settings-tabs>button:not(.active):not([aria-selected="true"]):not([aria-expanded="true"])::before{content:none!important;display:none!important}
html body #headerMasterCollapsible #settingsTabs.settings-tabs>button.active,html body #headerMasterCollapsible #settingsTabs.settings-tabs>button[aria-selected="true"],html body #headerMasterCollapsible #settingsTabs.settings-tabs>button[aria-expanded="true"]{position:relative!important;z-index:3!important;margin-bottom:-1px!important;padding-bottom:calc(9px + 1px)!important}
html body #headerMasterCollapsible>.settings-panel{border:0!important;box-shadow:none!important;outline:0!important;margin-top:0!important;position:relative;z-index:1}
/* Rapport v716 — Användare ser informationsikonen vid kundväljaren (bara Ändra-knappen är dold). */
body[data-real-role="user"] #customerPanel .customer-new-control-row{display:inline-flex!important}
/* Rapport v717 — Aktivt kundnamn i själva fliken Kund: "Kund: KR System". Namnet ligger som attribut och visas med CSS efter flikens text. */
html body #headerMasterCollapsible #settingsTabs.settings-tabs>button[data-panel="customerPanel"][data-active-customer]::after{content:": " attr(data-active-customer)!important;display:inline!important;position:static!important;width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;margin:0!important;padding:0!important;border:0!important;transform:none!important;font:inherit!important;white-space:pre-wrap!important;overflow-wrap:anywhere}
/* Rapport v720 — Beskrivningar får samma avstånd mellan översta texten och titeln som Företag och Beställare (sektionens egen padding och linje tas bort). */
#descriptionToolsPanel #descriptionTools{gap:14px!important}
#descriptionToolsPanel #descriptionTools>.admin-section{margin:0!important;padding:0!important;border:0!important}
/* Rubrikerna i Kund-fliken (År, Avtalsnr, Från föregående år, Skicka till e-post, Kopia till e-post, Utskickssätt) får samma storlek som Välj huvudkund. */
#customerPanel #headerForm .header-field-label,
#customerPanel #headerForm .header-field-label>label,
#customerPanel #headerForm .email-cc-label,
#customerPanel #headerForm .header-field>.header-field-label,
#customerPanel #headerForm .header-field:has(> #customerYearSelect) > .header-field-label{font-size:15px!important;line-height:20px!important;font-weight:700!important}