/* Grundläggande layout för sidomeny och huvuddel */
body {
    display: block;
    font-family: Arial, sans-serif;
    padding-bottom: 20px;
    /* no vertical scrolling*/
    height: 100vh;
    margin: 0;
}

body.app-shell,
body.report-shell {
    overflow: hidden;
}

/* Ett skal som fyller hela höjden (ta med ev. header ovanför tabellen) */
.report-shell {
    display: flex;
    flex-direction: column;
    overflow: clip;
    height: 100vh;
    /* eller 100% om du föredrar */
}

/* Scrollbar container */
.report-container {
    flex: 1 1 auto;
    /* fyll kvarvarande höjd */
    overflow: auto;
    /* både X och Y här */
    -webkit-overflow-scrolling: touch;
    padding: 0;
}

/* 4) Inre wrapper + tabell */
.report-inner {
    display: block;
    width: max-content;
    margin-inline: auto;
}

/* Se till att tabellen inte tvingas krympa till 100% */
#dynamic-table {
    width: max-content;
    /* eller ta bort ev. width:100% du satt tidigare */
    max-width: none;
}

#dynamic-table {
    display: block;
    max-width: 900px;
    /* Maximal bredd */
    min-width: fit-content;
    margin: 20px;
    padding: 20px;
    background-color: white;
    border: 1px solid #bfbfbf;
    border-radius: 8px;
}

/* --- Topbar --- */
.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    /* background-color: #f4f4f4; */
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 16px;
    z-index: 2;
    box-shadow: 0 2px 5px rgba(225, 229, 232, .8);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand {
    font-weight: 700;
    font-size: 24px;
    color: #1053c7;
    margin-right: 24px;
}

.topbar-company {
    min-width: 220px;
}

button,
.icon-btn {
    background: white;
    border: 1px solid #bfbfbf;
    border-radius: 8px;
    height: 32px;
    min-width: 32px;
    padding: 0 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    /* vertikal centrering */
    gap: 4px;
}

.icon-btn:hover {
    background: #e5e7eb;
}

/* Kebab popover */
.more {
    position: relative;
}

.menu-popover {
    position: absolute;
    top: 40px;
    right: 0;
    min-width: 180px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
    padding: 6px;
    display: none;
    z-index: 10001;
}

.menu-popover.open {
    display: block;
}

.menu-popover .menu-item {
    display: block;
    margin: 0;
    padding: 8px 10px;
    color: #111827;
    text-decoration: none;
    border-radius: 8px;
}

.menu-popover .menu-item:hover {
    background: #f3f4f6;
}


.page-container {
    width: calc(100% - 8px);
    /* Gör iframe bred som hela sidan */
    /* height: calc(100vh - 0px);           Gör iframe lika hög som hela viewporten */
}

/* Styra iframe så att den täcker hela huvudsidan */
#main-iframe {
    width: calc(100% - 8px);
    /* Gör iframe bred som hela sidan */
    height: calc(100vh - 62px);
    /* Gör iframe lika hög som hela viewporten */
    overflow: scroll;
}

/* Stil för sidomenyn */
/* --- Modern left nav --- */
.sidebar {
    width: 240px;
    padding: 16px 14px;
    /* border-right: 1px solid #e5e7eb; */
    position: fixed;
    top: 56px;
    height: calc(100vh - 56px);
    overflow-y: auto;
}

/* ==== Submenyer: flyout bara på hover; inline när öppnad ==== */
.sidebar {
    overflow: visible;
}

.sidebar .menu-item {
    position: relative;
}

/* Grundläge: dold och inline-stil (används när .open sätts) */
.sidebar .submenu {
    display: none;
    list-style-type: disc;
    position: static;
    margin-left: 50px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* ÖPPEN meny eller hover */
.sidebar .menu-item.open>.submenu,
.sidebar .menu-item:hover>.submenu {
    display: block;
}

/* HOVER men ej öppen → visa flyout till höger */
.sidebar .menu-item:not(.open):hover>.submenu {
    display: block;
    list-style-type: none;
    position: absolute;
    top: 100%;
    right: -50px;
    width: max-content;
    min-width: 140px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    margin: 0;
    /* inga inline-marginaler i flyout */
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .12);
    z-index: 60;

    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 1s;
    /* ta bort delay när vi öppnar */
}

/* Länkar i submenu (oförändrat, men bra att ha samlat) */
.submenu .nav-link {
    display: block;
    padding: 8px 10px;
    border-radius: 8px;
    color: #111827;
    text-decoration: none;
    white-space: nowrap;
}

.submenu .nav-link:hover {
    background: #f3f4f6;
}

/* Aktiv markering (rubrik eller länk) */
.nav-link.is-active,
.menu-header.is-active {
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
}

.nav {
    margin: 0;
    padding: 0;
}

.nav-section {
    margin-bottom: 14px;
}

.nav-section-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
}

.nav-section-toggle:hover {
    background: #f3f4f6;
}

.nav-section-toggle .chevron {
    margin-left: auto;
    transition: transform .2s ease;
}

.nav-sub {
    list-style: none;
    margin: 8px 0 0;
    padding: 6px;
    border-left: 2px solid #e5e7eb;
    margin-top: 0;
}

.nav-sub.is-collapsed {
    display: none;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #111827;
    text-decoration: none;
    font-weight: 500;
}

.nav-link:hover {
    background: #eef2ff;
}

.nav-link.is-active {
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
}



/* Stil för dropdownen */
select,
input {
    white-space: nowrap;
    /* Förhindra att text bryts */
    overflow: hidden;
    /* Dölj text som överstiger bredden */
    text-overflow: ellipsis;
    /* Visa "..." om texten är för lång */
    padding: 5px;
    border: 1px solid #bfbfbf;
    border-radius: 4px;
    background: white;
    font-size: 14px;
    cursor: pointer;
    height: 32px;
    margin-left: 10px;
}

select:hover,
input:hover {
    background: #e5e7eb;
}

#compareCount {
    padding: 0;
    padding-left: auto;
    text-align: center;
}

table input {
    padding: 3px;
    height: auto;
    margin-left: 1px;
}

#loginForm input,
#registerForm input,
#passwordResetForm input {
    padding: 3px;
    height: auto;
    margin-left: 10px;
}

#uploadForm input {
    border: none;
}

#uploadForm input:hover {
    background: none;
}

/* För dropdownmenyn som expanderar */
select option {
    white-space: nowrap;
    /* Håll texten i en rad */
    background: white;
}

.budget-select {
    display: inline-block;
    width: 100%;
}

#budgetSelect {
    border-style: groove;
    border-radius: 4px;
    padding: 2px;
}


/* Huvudinnehållet */
.main-content {
    margin-left: 270px;
    margin-top: 58px;
    width: calc(100% - 260px);
    height: calc(100% - 50px);
    /* height: calc(100vh - 10px);
    padding: 0px 20px; */
    background: #f7f4f4;
    /* padding-right: 0; */
    display: inline-block;
}

.modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    border-radius: 10px;
    width: fit-content;
}

.modal-content h4 {
    margin-top: 0;
}

.modal-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
}

/* Styling för sidhuvudet */
#page_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    min-width: 700px;
}

/* Gör att headern omsluter sina floatar (bra för PDF/layout) */
#page_header::after {
    content: "";
    display: table;
    clear: both;
}

.edited-headings {
    display: inline-block;

}

/* Företagsdata styling */
#company_data {
    font-size: 14px;
}

#company_data #report_title {
    font-size: 18px;
    font-weight: bold;
    display: block;
}

#company_data #company_name {
    font-weight: bold;
    display: block;
}

#company_data #org_number {
    display: block;
}

/* Rapportdata styling */
#report_data {
    float: right;
    width: fit-content;
    font-size: 14px;
    padding-right: 0px;
    padding-left: 0px;
}

/* Rapportdata – klassiskt tvåkolumnsutseende */
#report_data {
    border-collapse: separate;
    /* separata rader, lättare radluft */
    border-spacing: 0 2px;
    /* liten vertikal luft mellan rader */
    width: auto;
    /* justera vid behov */
    line-height: 1;
}

#report_data th,
#report_data td {
    padding: 0;
    /* håll det tight som i gamla */
    vertical-align: top;
    white-space: nowrap;
    background: white;
}

/* Vänsterspalt (etiketter) */
#report_data th {
    font-weight: normal;
    /* ser ut som i bilden */
    text-align: left;
    padding-right: 16px;
    /* mellanrum till värdespalt */
    width: 100px;
    /* låser kolumnbredden för snygg align */
}

/* Högerspalt (värden) */
#report_data td {
    text-align: left;
}

/* Flera räkenskapsår: stapla prydligt under varandra */
#report_data .fy-list>span {
    display: block;
}

.company-summary {
    padding: 20px;
    padding-bottom: 0;
    margin: 20px;
    max-width: 900px;
    /* Maximal bredd */
    background-color: white;
    border: 1px solid #bfbfbf;
    border-radius: 8px;
}

.company-summary h3 {
    margin-top: 0;
    font-size: 18px;
    color: #333;
}

.company-summary ul {
    padding-left: 20px;
}

.upload {
    padding: 20px;
    padding-top: 0;
    margin: 20px;
    max-width: 900px;
    /* Maximal bredd */
    background-color: white;
    border: 1px solid #bfbfbf;
    border-radius: 8px;
}

.header-row {
    text-align: left;
    padding-top: 20px;
}

.total-row td.total-heading {
    min-width: 360px;
    /* tvingar fram utrymme */
    white-space: normal;
    /* tillåter radbrytning om texten blir lång */
}

.account-row {
    display: table-row;
}

.table-header {
    display: table-row;
}

.header-row[data-level="2"] td.col-konto,
.header-row[data-level="2"] td.header-td,
.total-row[data-level="2"] td.col-konto,
.total-row[data-level="2"] td.total-heading {
    padding-left: 16px;
}

.header-row[data-level="3"] td.col-konto,
.header-row[data-level="3"] td.header-td,
.total-row[data-level="3"] td.col-konto,
.total-row[data-level="3"] td.total-heading {
    padding-left: 32px;
}

.header-row[data-level="4"] td.col-konto,
.header-row[data-level="4"] td.header-td,
.total-row[data-level="4"] td.col-konto,
.total-row[data-level="4"] td.total-heading {
    padding-left: 48px;
}

.account-row[data-level="2"] td.col-konto {
    padding-left: 16px;
}

.account-row[data-level="3"] td.col-konto {
    padding-left: 32px;
}

.account-row[data-level="4"] td.col-konto {
    padding-left: 48px;
}

.page-break-buttons {
    margin-top: 10px;
}

.print-button {
    float: right;
    margin-top: 10px;
    margin-left: 10px;
}

/* Markera klickbara rader */
.highlight-row {
    background-color: #f0f8ff;
    /* Ljusblå markering */
    transition: background-color 0.2s;
}

.highlight-row:hover {
    background-color: #add8e6;
    /* Mörkare blå vid hovring */
}

.page-break {
    color: red;
    border-top: 2px dashed red;
}

.page-break .td {
    margin-top: 2px;
}

/* Knapp för att ta bort sidbrytning */
.remove-page-break {
    background: none;
    border: 1px solid;
    border-radius: 5px;
    color: red;
    font-size: 12px;
    cursor: pointer;
    margin-left: 10px;
    position: absolute;
}

.remove-page-break:hover {
    color: darkred;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Centrering av hela spinner och text */
#loading-spinner-container {
    text-align: center;
}

.spinner {
    display: block;
    /* Säkerställer att spinnern behandlas som en blocknivå */
    margin: 0 auto;
    /* Centrerar spinnern horisontellt */
}

#error-message {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    color: red;
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 20px;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 10000;
    text-align: center;
}

#error-message button {
    margin-top: 10px;
    padding: 5px 10px;
    border: none;
    background: #3498db;
    color: white;
    border-radius: 3px;
    cursor: pointer;
}

#error-message button:hover {
    background: #1d6fa5;
}

.header-td {
    padding-top: 8px;
    padding-bottom: 5px;
}

.section-header {
    background-color: #ffff99;
    font-weight: bold;
    text-align: left;
}

.total-row {
    background: #e2ebff;
    border-top: 5px solid white;
    border-bottom: 10px solid white;
}

/* Gör header-row och total-row med data-level="1" bold */
tr.header-row[data-level="1"],
tr.total-row[data-level="1"] {
    font-weight: bold;
}

.padding-tb {
    padding-top: 10px;
    padding-bottom: 10px;
}

.budget-total {
    margin-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.top-heading {
    white-space: normal;
    width: 1px
}

.flex-start {
    align-content: flex-start;
}

.nowrap {
    white-space: nowrap;
}

.copy-number {
    width: auto;
    white-space: nowrap;
    padding-left: 10px;
}

.budget {
    width: 50px;
}

.price {
    width: 90px;
}

/* Göm knappen som standard */
.add-account-btn {
    display: none;
    margin-left: 20px;
    margin-right: 50px;
}

/* Visa knappen när musen är över headerRow */
.header-row:hover .add-account-btn {
    display: inline-block;
}

/* Visa knappen när musen är över headerRow */
.account:hover .add-account-btn {
    display: inline-block;
}

.account-dropdown-container {
    display: inline-flex;
    max-height: 22px;
    margin-top: 5px;
}

/* Ta bort stegknappar för Chrome, Safari och Edge */
input.no-spin[type="number"]::-webkit-outer-spin-button,
input.no-spin[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Ta bort stegknappar för Firefox */
input.no-spin[type="number"] {
    -moz-appearance: textfield;
}

.account {
    width: 0px;
}

.flex-line {
    display: flex;
    align-items: center;
    gap: 5px;
}

.minus-span {
    align-self: flex-start;
}

.object-title {
    min-width: 350px;
}

.left {
    text-align: left;
    /* align-content: flex-start; */

}

.right {
    text-align: right;
    align-content: flex-start;
}

/* För inställningarna ovanför tabellen */
.sticky-header {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 4;
    display: flex;
    flex-direction: column;
    /* stapla barn under varandra */
    align-items: center;
    /* centrera horisontellt */
    text-align: center;
    /* centrera text */
    padding: 5px 5px;
    max-width: max-content;
    background-color: white;
    /* Endast sidor + botten */
    border-left: 1px solid #bfbfbf;
    border-right: 1px solid #bfbfbf;
    border-bottom: 1px solid #bfbfbf;
    border-top: none;
    /* Endast nedre hörn rundade */
    border-radius: 8px 8px 8px 8px;
    /* Skugga bara nedåt */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* innehållet som fälls ut */
.sticky-header .collapsible-content {
    display: none;
    margin-top: 10px;
}

.flex {
    display: flex;
}

/* när vi expanderar */
.sticky-header:hover {
    text-align: left;
}

.sticky-header:hover .collapsible-content,
.sticky-header:hover .date-container {
    display: inline-block;
}

.sticky-header:hover .icon-btn,
.sticky-header:hover select {
    float: right;
}

.sticky-header:hover #toggleSettings {
    transform: rotate(180deg);
}

.sticky-header:hover .toggle-btn {
    display: none;
}

/* synlig när kalendern är synlig */
.sticky-header.calendar-open {
    max-height: 500px;
    /* tvinga expanderat läge */
    overflow: visible;
}

.sticky-header.calendar-open .collapsible-content,
.sticky-header.calendar-open .date-container {
    display: inline-block;
}

.sticky-header.calendar-open {
    text-align: left;
}

.sticky-header.calendar-open .icon-btn,
.sticky-header.calendar-open select {
    float: right;
}

.sticky-header.calendar-open #toggleSettings {
    transform: rotate(180deg);
}

.sticky-header.calendar-open .toggle-btn {
    display: none;
}


/* expandera med javascript */
.sticky-header.force-show .collapsible-content,
.sticky-header.force-show .date-container {
    display: inline-block;
}

.sticky-header.force-show {
    text-align: left;
}

.sticky-header.force-show .icon-btn,
.sticky-header.force-show select {
    float: right;
}

.sticky-header.force-show #toggleSettings {
    transform: rotate(180deg);
}

.sticky-header.force-show .toggle-btn {
    display: none;
}

button {
    cursor: pointer;
    text-align: center;
    user-select: none;
}

button:hover {
    background: #e5e7eb;
}

.toggle-btn {
    font-size: 20px;
    margin-top: 4px;
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-content: center;
    align-items: center;
    cursor: pointer;
}

/* För tabellens rubrikrad */
.report-shell thead {
    position: sticky;
    top: 0px;
    background-color: white;
    /* Bakgrundsfärg så att den täcker innehåll när du scrollar */
    z-index: 2;
    /* Se till att rubriken ligger över andra innehåll */
}

table {
    width: 100%;
    max-width: 900px;
    border-collapse: collapse;
    border: none;
    padding-left: 5px;
    padding-right: 5px;
    table-layout: auto;
    background-color: white;
}

/* Sätt fast bredd för vissa kolumner */
.col-konto {
    min-width: 120px;
}

.col-apris {
    width: 110px;
}

.col-utfall {
    width: auto;
}

tr {
    border-width: 1px;
}

th,
td {
    border: none;
    padding: 2px 5px;
    text-align: right;
}

th {
    background-color: #ccdfff;
    font-weight: bold;
}

td {
    text-align: right;
}

/* Date range picker */
.date-range-picker {
    /* float: right;
    position: relative; */
}

#dateRange {
    cursor: pointer;
    text-align: center;
}

.arrow-down-img {
    padding: 0;
    width: 10px;
    height: 10px;
}

.arrow-down {
    position: absolute;
    bottom: -20%;
    right: 5px;
    /* Justera avståndet från kanten */
    transform: translateY(-50%) scale(1, 0.6);
    /* Halvera höjden */
    /* Vertikal centrering */
    font-size: 14px;
    font-weight: 400;
    color: #333;
    pointer-events: none;
}

.calendar {
    display: inline-block;
    margin: 5px;
}

#calendarContainer {
    /* background: white; */
    padding: 10px;
    position: absolute;
    z-index: 100;
    left: 10px;
    top: 71px;
}

.in-range {
    background-color: #b3d4fc;
    color: #333;
    border-radius: 50%;
}

.flatpickr-day.prevMonthDay.in-range,
.flatpickr-day.nextMonthDay.in-range {
    background: #b3d4fc60;
}

.container {
    display: inline-flex;
    gap: 20px;
    padding: 20px;
    width: -webkit-fill-available;
    max-width: 900px;
}

.user-list,
.user-details {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    flex: 1;
    background-color: white;
}

.user-list {
    flex: unset;
    max-height: 600px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
}

.user-item {
    padding: 10px;
    cursor: pointer;
    border-bottom: 1px solid #ccc;
    border-radius: 5px;
}

.user-item:hover {
    background-color: #f0f0f0;
}

.user-item.selected {
    background-color: #e0e7ff;
    /* color: white; */
    font-weight: bold;
}

.user-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    padding: 20px;
}

.container h3 {
    margin-top: 0;
}

.company-item {
    display: block;
    margin-bottom: 5px;
}

#userCompanyList .company-item {
    display: flex;
    justify-content: space-between;
}

.action-buttons {
    min-width: fit-content;
}

.action-buttons button {
    margin-left: 5px;
    padding: 5px 10px;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.action-buttons button.edit {
    background-color: #2196f3;
    color: white;
}

.action-buttons button.add {
    background-color: #4caf50;
    color: white;
}

.action-buttons button.remove {
    background-color: #f44336;
    color: white;
}

.addBtn {
    margin-top: 10px;
    width: fit-content;
}

.close-button {
    float: right;
    font-size: 1.5em;
    cursor: pointer;
}

.company-list {
    display: block;
    /* max-height: 190px; */
    overflow-y: auto;
}

#roleSelect {
    width: 100%;
    margin-top: 5px;
}

.role-dropdown option {
    text-align: left;
    /* Centers text in the dropdown list */
}

.role-dropdown:focus {
    box-shadow: 0 0 4px #0078f8;
    /* Highlight on focus */
    border-radius: none;
    background-color: white;
    color: black;
}

.company-checkbox {
    margin-right: 10px;
}

.success {
    border: 4px solid green;
    transition: border 0.3s ease;
}

.error {
    border: 4px solid red;
    transition: border 0.3s ease;
}

form {
    display: inline-flex;
    flex-direction: column;
    width: fit-content;
    justify-content: space-between;
}

form input {
    float: right;
    margin-left: 10px;
    margin-bottom: 3px;
}

form button {
    float: right;
    margin-top: 7px;
}

#fileInput {
    float: none;
    margin-left: 0;
}

#uploadForm button {
    float: none;
    width: fit-content;
}

.dragging {
    opacity: 0.3;
}

.hide {
    display: none;
}

/* Material Symbols baseline */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
    font-size: 20px;
    font-weight: 100;
    /* matchar dina .icon-btn ~32px knappar */
    line-height: 1;
    text-align: center;
    vertical-align: middle;
    width: 1em;
    opacity: 90%;
    display: inline-block;
}

/* Icon buttons host Material Symbols nicely */
.icon-btn .material-symbols-outlined {
    font-size: 20px;
    margin: 0;
    /* passar 32px höga knappar */
}

#import .material-symbols-outlined {
    margin-right: 6px;
}

/* Align nav-link icons and text */
.nav-link .material-symbols-outlined {
    font-size: 22px;
    margin-right: 6px;
}

.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* Medan ikoner laddar */
.icons-loading .material-symbols-outlined {
    visibility: hidden;
    /* behåller utrymmet, men ingen text visas */
}

.report-settings {
    display: flex;
    align-items: center;
}


.report-settings span {
    margin-left: 0;
    margin-right: 5px;

}

.report-settings input,
.report-settings select,
.report-settings button {
    margin-left: 0;
    margin-right: 10px;
}

.edits button {
    margin-left: 0;
    margin-right: 5px;
    margin-top: 10px;
}

.column {
    flex-direction: column;
}

.row {
    flex-direction: row;
}

/* ===== Auth Modal ===== */
.no-scroll {
    overflow: hidden;
}

.modal__dialog {
    position: relative;
    margin: clamp(24px, 6vh, 60px) auto;
    max-width: 440px;
    width: fit-content;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .2);
    overflow: hidden;
    animation: modalIn .16s ease-out;
}

.modal__title {
    margin: 0;
    padding: 16px 20px 0 20px;
    font-size: 1.25rem;
    font-weight: 600;
}

.modal__body {
    padding: 16px 20px 20px 20px;
}

.modal__actions {
    padding-top: 0;
    gap: 10px;
    display: flex;
    justify-content: center;
}

.modal__close {
    position: absolute;
    top: 8px;
    right: 10px;
    border: none;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
}

@keyframes modalIn {
    from {
        transform: translateY(8px);
        opacity: .92;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.form__links {
    display: flex;
    align-items: center;
    /* Vertikal centrering */
    justify-content: space-between;
    gap: 0.5rem;
    /* Mellanrum mellan span och button */
}

.form__links span,
.form__links button {
    font-size: 0.9rem;
    margin-top: 0;
}

.dim-filter {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dim-mode label {
    margin-right: 12px;
}

.dim-rows.hide {
    display: none;
}

.dim-rows-header {
    display: inline-block;
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    margin-right: 10px;
}

.dim-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
}

.dim-row input {
    margin-left: 0;
}

.dim-row input[type="text"].dim {
    width: 110px;
}

.dim-row input[type="text"].objs {
    flex: 1;
}

.dim-row .rm {
    cursor: pointer;
}

.dim-ms.hide {
    display: none;
}

.dim-ms {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
}

.dim-ms-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.dim-ms-row select {
    width: 100%;
    min-width: 240px;
    padding: 4px;
}

.hint {
    grid-column: 1 / -1;
    color: #666;
}

/* Triggers som visar valet (chips-likt) */
.ms-triggers {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.ms-triggers .dim-ms-row {
    flex: 1;
    min-width: 260px;
}

.ms-trigger {
    width: 100%;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ms-trigger:focus {
    outline: 2px solid #60a5fa;
    outline-offset: 1px;
}

.ms-trigger .label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Popover som innehåller dina select-listor */
.ms-popover {
    position: absolute;
    inset: auto auto auto auto;
    z-index: 9999;
    display: none;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
    padding: 16px;
    gap: 24px;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

.ms-popover.open {
    display: flex;
}

.ms-popover .dim-ms-row {
    flex: 1;
    min-width: 260px;
}

.dim-ms-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

.dim-ms-row select {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px;
    height: auto;
    max-height: 100%;
    overflow-y: auto;
    white-space: normal;
}

.dim-ms .hint {
    display: block;
    margin-top: 8px;
    color: #475569;
}

.ms-actions {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}
.ms-actions button {
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #cbd5e1;
  background: #fff;
  cursor: pointer;
}
.ms-actions button.primary {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.ms-actions button:focus { outline: 2px solid #60a5fa; outline-offset: 1px; }

/* Chips-container: radbryt när det behövs */
#filterChips {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;     /* ⬅️ tillåt radbrytning */
  gap: 0.75rem;
  max-width: 100%;
  width: 100%;
  margin-top: 8px;
  min-width: 0;        /* ⬅️ viktigt om föräldern är flex: låt den krympa */
  max-width: inherit;
  font-size: small;
}

/* Enskild chip */
#filterChips .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 6px 10px;
  border-radius: 9999px;
  background: #f1f3f5;       /* din färg */
  border: 1px solid #e2e8f0; /* din kant */
  flex: 0 1 auto;            /* ⬅️ får krympa */
  max-width: 100%;           /* ⬅️ aldrig bredare än containern */
  white-space: nowrap;       /* håll chippen på en rad */
  overflow: hidden;          /* klipp lång text… */
  text-overflow: ellipsis;   /* …med ellipsis */
  min-width: 0;              /* ⬅️ krävs för ellipsis i flex */
}

/* “x”-knappen ska aldrig klippas bort */
#filterChips .chip__x {
  flex: 0 0 auto;
  cursor: pointer;
  line-height: 1;
}

/* Om du ibland har ord utan mellanslag (t.ex. långa koder), låt dem brytas inne i chippen vid behov */
#filterChips .chip {
  overflow-wrap: anywhere;   /* valfritt: bryt superlånga ord */
}

/* Rubrik på egen rad */
.chip-dim-heading {
  font-weight: bold;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

/* Rad med chips för en dimension */
.chip-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Tooltip för filtrerade objekt */
.obj-col { cursor: help; }

/*account transactions model */
 #transactions-modal .modal__dialog {
    width: 90vw;          /* make it almost full screen width */
    max-width: 910px;    /* but not too huge */
    height: 90vh;         /* large height */
    max-height: 90vh;
  }

  #transactions-modal .modal__body {
    overflow-y: auto;     /* scroll table if it’s long */
    max-height: calc(90vh - 100px); /* prevent overflow past title + padding */
  }