/* Fonts temporarily disabled - CDN unavailable
@font-face {
  font-family: 'TT Norms Pro';
  src: url('https://cdn.jsdelivr.net/gh/grofinans/fonts@main/TTNormsPro-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms Pro';
  src: url('https://cdn.jsdelivr.net/gh/grofinans/fonts@main/TTNormsPro-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TT Norms Pro';
  src: url('https://cdn.jsdelivr.net/gh/grofinans/fonts@main/TTNormsPro-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

:root {
    --success: #a8f2b1;
    --neutral: #fff;
    --error: #f4aeae;
    --pending: #f4efae;
    --primary-color: #00342d;
    --primary-text-color: rgb(255 255 255 / 100%);
    --primary-background-color: #121212;
    --drawerBackgroundColor: #000;
    --success-background-color: #a8f2b1;
    --success-text-color: #000;
    --error-background-color: #f4aeae;
    --error-text-color: #000;
    --borderColor: rgb(255 255 255 / 20%);
    --card: rgb(255 255 255 / 5%);
    --filled: rgb(0 0 0 / 100%);
    --card-filled: rgb(50, 50, 50);
    --radius: 4px;
    --labelPadding: 8px;
    --big: 32px;
    --small: 12px;
    --font: 'TT Norms Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  }

  /* Light theme variables */
  body.light-theme {
    --primary-color: #00342d;
    --primary-text-color: #000000;
    --primary-background-color: #f0f2f2;
    --drawerBackgroundColor: #f0f2f2;
    --borderColor: rgb(0 0 0 / 20%);
    --card: #ffffff;
    --filled: #00342d;
    --card-filled: rgb(230, 232, 232);
    --success-background-color: #a8f2b1;
    --success-text-color: #000;
    --error-background-color: #f4aeae;
    --error-text-color: #000;
  }

  body.light-theme input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
  body.light-theme select,
  body.light-theme textarea {
    background: #ffffff;
    color: #000000;
  }

  body.light-theme .badge.ok {
    border-color: #1a7a3a;
    color: #1a7a3a;
  }

tag {color: var(--primary-background-color); padding-left: 8px; padding-right: 8px; font-weight: 500; padding-top: 4px; padding-bottom: 4px; font-size: var(--small)}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, button, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video,text {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align:middle;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/*
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
* { box-sizing: border-box; }

body,html {font-weight: 300; background: var(--primary-background-color); color: var(--primary-text-color); margin: 0; padding: 0; font-family: var(--font); scrollbar-gutter: stable; overflow-x: hidden;}
body { transition: padding-left 0.25s ease; }
input,select,textarea,button {color: var(--primary-text-color); background: none; height: 44px; width: 100%;
    border: 1px var(--borderColor) solid;
    outline: none;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 16px;
    border-radius: 8px;
    font-family: var(--font)
}
textarea {resize: none; padding-top: 12px; min-height: 120px;}
textarea[style*="resize: vertical"] {resize: vertical !important;}
input:focus {  border: 1px var(--primary-color) solid;}
section {width: 100%; min-height: 100dvh; position: relative; box-sizing: border-box;}

button {cursor: pointer;}
button.cta {background: var(--primary-color); color: var(--primary-background-color); font-weight: 500;}
button:not(.cta):not(.tablinks):hover {
  background: var(--card-filled);
}

.hide {
  display: none !important;
}
button.ghost {border: 1px var(--primary-color) solid; color: var(--primary-color); background: none; font-weight: 500;}
#login video {position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; z-index: 1;}
#login > img {position: absolute; top: 0; left: 0; object-fit: cover; width: 100%; height: 100%; z-index: 1;}
#login .loginWrapper {
    position: absolute; top: 0; left: 0; width: 100%; max-width: 450px; z-index: 2; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    align-items: center;
    display: flex;
    padding: 32px;
    box-sizing: border-box;
}
#login .loginWrapper .header {position: absolute; top: 0; left: 0; padding: 32px;}
#login .loginWrapper .footer {position: absolute; bottom: 0; left: 0;  padding: 32px;}
#login .loginWrapper .body {width: 100%;}
.marginLeftAuto {margin-left: auto;}
nav {
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30;
    background: var(--filled);
    align-items:flex-start;
    padding: 8px 16px;
    border-bottom: 1px var(--borderColor) solid;
    box-sizing: border-box;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
}
nav .header {padding-bottom: 32px;}
nav .footer {position: absolute; bottom: 0; left: 0;  padding: 32px;}
nav .body {width: 100%; display: flex; gap: 8px;}
.sticky {position: sticky; bottom: 0;}
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 24px;
  }

  .grid > div {
    margin-top: 8px;
    margin-bottom: 8px;
  }

  .grid-medium {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
    gap: 24px;
    margin-bottom: 0px;
    margin-top: 0px;
  }

  .biggrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 32px;
    width: 100%;
  }

  .list-item.active .list-body.biggrid {display: grid !important;}

  #customerFiles {border: 1px var(--borderColor) solid; height: 44px;}

  .max100 {max-width: 100px;}
.fullWidth {width: 100%;}
  .btnList button {
    text-align: left;
    margin-bottom: 8px;
  }

  .salegrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 32px;
  }

  tabs.grid button {display: flex; align-items: center;}
counter {display: none; background: var(--primary-color); padding-left: 6px; padding-right: 6px; color: var(--primary-background-color); min-width: 20px; min-height: 20px;  align-items: center; justify-content: center; height: 20px; border-radius: 999px; font-weight: 800;}
counter.active {display: flex;}
#login .loginWrapper input {margin-bottom: 12px; color: white; background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.5);}
#login .loginWrapper input::placeholder {color: rgba(255,255,255,0.6);}
#login .loginWrapper input:focus {border: 1px solid rgba(255,255,255,0.9);}
#login .loginWrapper #mfa-step input {margin-bottom: 12px;}
#login .loginWrapper #mfa-step button {margin-bottom: 8px; width: 100%;}
#login .loginWrapper .mfa-hint {margin-bottom: 16px; font-size: 0.95rem; line-height: 1.5; color: #fff;}
#recaptcha-container {position: fixed; bottom: 16px; left: 16px; z-index: 9999;}
#login .header svg {
    height: 20px;
    width: auto;
    fill: var(--primary-color);
}

nav .header svg {
    height: 20px;
    width: auto;
    fill: var(--primary-text-color);
    opacity: 0.7;
}

nav .body button svg {
    height: 20px;
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}
nav .body button.active svg {stroke: var(--primary-color);}
nav .body button.active {background-color: var(--borderColor); opacity: 1;}
nav .body button {opacity: 0.7;}
toast {
    position: fixed;
    width: 100%;
    height: 100px;
    bottom: -100px;
    display: flex; 
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 24px;
    transition: bottom 0.35s;
    z-index: 10000;
}
toast.active {bottom: 0;}
toast div {border-radius: var(--radius); width: fit-content; padding: 8px;}
toast div.success {
    background: var(--success-background-color);
    color: var(--success-text-color)
}
toast div.error, .rowError td {
    background: var(--error-background-color);
    color: var(--error-text-color);
}
button[disabled] {opacity: 0.5;}
#edit input[disabled] {padding: 0; border: 0; height: 24px;}
#edit input[disabled].calculated-field {padding-left: 16px; padding-right: 16px; border: 1px var(--borderColor) solid; height: 44px; opacity: 0.6; cursor: not-allowed;}



.loader {
    width: 24px;
    height: 24px;
    border: 2px solid var(--primary-background-color);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
   
    }

sum .loader {
    border: 2px solid var(--primary-text-color); border-bottom-color: transparent;  
}

    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
    } 



section {display: none;}
section.active {display: block;}

h1,h2,h3,h4,h5 {margin: 0; font-weight: 500;}
h1 {font-size: 32px;}
h2 {font-size: 24px;}

legend.h1 {font-size: 28px; font-weight: 600;}


nav button:hover {background-color: var(--borderColor);}
nav button {padding: 0; display: flex;padding-left: 12px; padding-right: 12px; width: fit-content; align-items: center; gap: 12px; font-size: 18px; border-radius: var(--radius); border: 0;}

.gap12 {gap: 12px;}

.sectionHeader {display: flex; align-items: center;  margin-bottom: 24px;}
.sectionHeader button {width: fit-content; height: 38px; margin-left: auto;}
.section {width: 100%; padding: 32px; box-sizing: border-box; max-width: 100%;}
@media only screen and (max-width: 900px) {

    table {width: 100%;}

    div#dealsSearchRow {display: block; }
    div#dataFilter,div#selectedYear {width: 100%;}
    div.search-wrapper {max-width: 100%; margin-bottom: 12px;}
    .salegrid {display: none;}
    .salegrid.active {display: grid;}

    #deals tabs.active {display: block;}

    /* Top nav scrolls away with the page on mobile instead of staying stuck at the top.
       Keep position:relative (not static) so it still establishes a stacking context —
       otherwise its z-index:30 is ignored and the settings/user dropdown menus (z-index:10000)
       render behind later page content instead of on top of it. */
    nav:not(#side-nav) {
        position: relative;
        z-index: 30;
    }

    /* Drawer sub-header (tabs bar etc.) also scrolls away instead of sticking */
    /* !important needed: base .sticky-top-50 rule is declared later in this file and would otherwise win */
    .sticky-top-50 {
        position: static !important;
    }

    /* Company/marketing filter tabs (Alla/Leverantörer/Slutkunder/...) scroll instead of clipping */
    .innerTab {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .innerTab button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Top horizontal nav: icon-only on phones so the full row of nav buttons + user/settings menus always fits without clipping */
    nav:not(#side-nav) .body {
        gap: 2px;
        flex-wrap: nowrap;
    }
    nav:not(#side-nav) .body button.nav {
        gap: 0;
        padding-left: 10px;
        padding-right: 10px;
        flex-shrink: 0;
    }
    nav:not(#side-nav) .body button.nav span {
        display: none;
    }
    #userImpersonationContainer {
        flex-shrink: 0;
    }
    .user-dropdown-label {
        display: none;
    }
    .user-dropdown-btn, .cogwheel-btn {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Any tab bar (not just tabs.grid) can overflow with many tabs — make them scrollable instead of clipped */
    tabs, tabs.grid {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        gap: 8px;
        padding: 0px;
        scrollbar-width: thin;
        scrollbar-color: #ccc transparent;
        margin-bottom: 0 !important;
        margin-top: 16px;
        margin-right: -16px;
        padding-right: 24px;
    }
    tabs button, tabs.grid button {flex-shrink: 0;}

    tabs.grid .errorCounter {display: none;}
    tabs.grid counter {margin-left: 12px;}
    .section {margin-left: 0; width: 100%; padding: 16px;}

    /* Deals/companies action rows (search + filter buttons) stack instead of squeezing */
    #dealsActionsRow, #companiesActionsRow {
        flex-wrap: wrap;
    }
    #dealsActionsRow > #dealsSearchRow, #companiesActionsRow .search-wrapper {
        flex: 1 1 100%;
    }
    /* Company users mobile layout */
    li.plainRow {
        flex-wrap: wrap;
    }
    li.plainRow input[data-id="displayName"] {
        flex: 1 1 100%;
        min-width: 100%;
        font-size: 16px;
        font-weight: 500;
    }
    li.plainRow input[data-id="title"] {
        flex: 1 1 calc(50% - 6px);
        min-width: auto;
    }
    li.plainRow input[data-id="email"] {
        flex: 1 1 100%;
        min-width: 100%;
    }
    li.plainRow input[data-id="phoneNumber"] {
        font-size: 16px !important;
    }
    li.plainRow input[data-id="phoneNumber"] + a,
    li.plainRow div > input[data-id="phoneNumber"] {
        flex: 1;
    }
    li.plainRow div > input[data-id="phoneNumber"] ~ * {
        flex-shrink: 0;
    }
    li.plainRow > div {
        flex: 1 1 100%;
        max-width: 100% !important;
    }
    li.plainRow select[data-id="role"] {
        flex: 1 1 calc(50% - 6px);
        min-width: auto;
    }
}

/* Tablet: keep the real table (not the phone card layout) but let it side-scroll instead of squeezing columns */
@media only screen and (min-width: 601px) and (max-width: 900px) {
    .table-scroll {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .table-scroll table {
        table-layout: auto;
        min-width: 700px;
    }
}

/* Phone: table rows become cards, and column headers are dropped entirely (no room for them) */
@media only screen and (max-width: 600px) {
    table tr, table td, table th {display: block; height: auto; border: 0; border-radius: var(--radius);}
    table tbody tr:first-of-type { margin-top: 24px; }
    table tbody tr {padding: 8px; border-radius: 0; background: none; border-bottom: 1px var(--borderColor) solid; width: 100%;}
    table tbody td {padding-top: 6px; padding-bottom: 6px; padding-left: 0; padding-right: 0;}
    table thead {display: none;}
    table {background: none !important; margin-bottom: 24px; overflow: visible !important; border: 0 !important;}
    table tbody td:first-of-type {font-size: 20px;}
}

thead {
position: sticky;
top: 0;
z-index: 2; 
background: var(--drawerBackgroundColor);
}

tbody {
  background: transparent;
  position: relative;
  z-index: 1;
}

table {
    background: var(--card);
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: 16px;
    padding-top: 8px;
    color: var(--primary-text-color);
    table-layout: fixed;
    border: 1px var(--borderColor) solid;
    width: 100%;
    overflow: visible;
    max-width: 100%;
}

.card {
    background: var(--card);
    border: 1px var(--borderColor) solid;
    width: 100%;
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: 16px;
    color: var(--primary-text-color);
}

.salegrid .card {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.salegrid .card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.salegrid .card.selected {
    border: 2px solid var(--primary-color);
    background: linear-gradient(135deg, var(--card) 0%, rgba(var(--primary-color-rgb, 79, 70, 229), 0.05) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(var(--primary-color-rgb, 79, 70, 229), 0.2);
}

.summary-card-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.1);
    color: var(--primary-text-color);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s ease;
    z-index: 10;
}

.summary-card-close:hover {
    background: rgba(0, 0, 0, 0.2);
}

.tightCard {
    background: var(--card);
    border: 1px var(--borderColor) solid;
    width: 100%;
    border-radius: var(--radius);
    box-sizing: border-box;
    padding: 10px;
    color: var(--primary-text-color);
    position: relative;
}

.tightCard svg {
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}

.tightCard .icon {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
}

.search-wrapper {width: 100%;}

#dealSearchWrapper {
    max-width: 100%;
}

#dealsSearchRow {
    display: flex;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

#dealsSearchRow .flex {
    width: auto;
}

#dealsPagination, #companiesPagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 16px 0 8px;
}
#dealsPagination button, #companiesPagination button {
    width: auto;
    padding: 0 16px;
    height: 36px;
    font-size: 14px;
}
#dealsPagination span, #companiesPagination span {
    font-size: 14px;
    opacity: 0.7;
}
#dealsPagination select, #companiesPagination select {
    height: 28px;
    font-size: 13px;
    padding: 0 6px;
    width: auto;
}

/* ---- Column filter button in th ---- */
th { position: relative; user-select: none; }
.th-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    white-space: nowrap;
    width: 100%;
}
.th-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- Column resize handle ---- */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
}
.col-resize-handle:hover {
    background: rgba(0, 52, 45, 0.2);
}
th.resizing {
    background: rgba(0, 52, 45, 0.05);
}

.col-filter-btn {
    background: none;
    border: none;
    cursor: pointer;
      font-size: 22px;
    padding: 0 2px;
    opacity: 0.4;
    color: inherit;
    line-height: 1;
    width: auto;
    height: auto;
    min-width: 0;
    flex-shrink: 0;
}
.col-filter-btn:hover { opacity: 1; }
.col-filter-btn.col-filter-active {
    opacity: 1;
    color: var(--primary-color);
    font-weight: 700;
}
th.th-filtered {
    border-bottom: 2px solid var(--primary-color);
    font-weight: 600;
}

/* ---- Column filter popup ---- */
#colFilterPopup {
    display: none;
    position: absolute;
    z-index: 9999;
    background: var(--card, #fff);
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.13);
    min-width: 210px;
    max-width: 330px;
}
#colFilterPopup.active { display: block; }
/* Inline flatpickr date calendar */
.cfp-date-hidden-input {
    position: absolute; opacity: 0; height: 0; padding: 0; border: none; pointer-events: none;
}
.cfp-date-cal .flatpickr-calendar.inline {
    box-shadow: none !important;
    border: none !important;
    margin: 0;
    width: 100%;
}
/* Brand green overrides for flatpickr */
#colFilterPopup .flatpickr-day.selected,
#colFilterPopup .flatpickr-day.startRange,
#colFilterPopup .flatpickr-day.endRange,
#colFilterPopup .flatpickr-day.selected:hover,
#colFilterPopup .flatpickr-day.startRange:hover,
#colFilterPopup .flatpickr-day.endRange:hover {
    background: #00342d; border-color: #00342d; color: #fff;
}
#colFilterPopup .flatpickr-day.inRange {
    background: rgba(0,52,45,0.15);
    border-color: transparent;
    box-shadow: -5px 0 0 rgba(0,52,45,0.15), 5px 0 0 rgba(0,52,45,0.15);
}
#colFilterPopup .flatpickr-day.today { border-color: #00342d; }
#colFilterPopup .flatpickr-day.today:hover { background: #00342d; border-color: #00342d; color: #fff; }
.cfp-header { padding: 10px 10px 6px; border-bottom: 1px solid #eee; }
.cfp-search {
    width: 100%;
    margin-bottom: 6px;
    padding: 5px 8px;
    font-size: 13px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
}
.cfp-actions { display: flex; gap: 8px; }
.cfp-actions button { flex: 1; font-size: 12px; padding: 3px 8px; height: auto; }
.cfp-list { max-height: 220px; overflow-y: auto; padding: 6px 4px; }
.cfp-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 8px;
    font-size: 13px;
    cursor: pointer;
    border-radius: 4px;
    font-weight: normal;
}
.cfp-item:hover { background: var(--card-filled, #f5f5f5); }
.cfp-item input[type=checkbox] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    cursor: pointer;
    accent-color: #00342d;
}
.cfp-footer {
    padding: 8px 10px;
    border-top: 1px solid #eee;
    display: flex;
    gap: 8px;
}
.cfp-apply { flex: 1; font-size: 13px; height: 30px; }
.cfp-clear-date { font-size: 13px; height: 30px; padding: 0 12px; width: auto; }
.page-hide { display: none !important; }

th,td {text-align: left;
    overflow: hidden;
    white-space: nowrap;
    border: none;
    text-overflow: ellipsis; 
    max-width: 200px;
    padding: 12px;
}
tr {height: 44px; cursor: pointer; transition: none;}
tr img {width: 44px; height: 44px; object-fit: cover; border-radius:var(--radius)}

tbody tr.active {display: table-row; background: var(--card-filled);}
tbody tr:hover {background: var(--card-filled);}
tbody tr[data-starred="true"] td:first-child::before { content: "★"; color: #f5a623; margin-right: 5px; font-size: 13px; vertical-align: text-top; }

th { color: var(--primary-text-color); }
td { color: var(--primary-text-color);}
td,th {border-bottom: 1px var(--borderColor) solid; font-weight: 400;}
th:hover, th.asc, th.desc {background: var(--borderColor);}
[contentEditable] {outline: none;}
[contentEditable]:focus {border-bottom: 1px var(--primary-color) solid;}

.gap8 {gap: 8px;}
.gap16 {gap: 16px;}
.gap24 {gap: 24px;}

input[type="file"] {
    display: none;
  }


  section.drawer {
    width: 100%;
    height: 100dvh;
    position: fixed;
    top: 0;
    right: 0;
    transform: translateX(100%); /* start off-screen */
    transition: transform 0.25s ease-in-out; /* smooth motion */
    z-index: 10000;
    display: flex;
    justify-content: end;
    pointer-events: none; /* prevent clicks when drawer is hidden */
  }
  
  .drawer.active {
    transform: translateX(0); /* slide in */
    pointer-events: auto; /* allow clicks when drawer is visible */
  }
  

.drawer .content {
    background: var(--drawerBackgroundColor);
    width: 100%; height: 100%; max-width: 450px;
    padding: 0;
    box-sizing: border-box;
    overflow: auto;
    border-left: 1px var(--borderColor) solid;
}
    
.close {width: 100%; height: 100%; position: absolute; z-index: -1; top: 0; left: 0;}

.drop-zone {
  min-height: 80px;
  width: 100%;
  border: 2px var(--borderColor) dashed;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius);
  cursor: pointer;
  transition: border-color 0.2s ease;
  font-size: 14px;
  opacity: 0.8;
}

.drop-zone:hover {
  border-color: var(--primary-color);
  opacity: 1;
}

.sticky-top {top: 0; position: sticky;}

.drawer .header {z-index: 1; display: flex; align-items: center; flex-shrink: 0; background: var(--drawerBackgroundColor); padding: 16px 24px;}

#dealUpdatedAt { margin-left: auto; font-size: 13px; color: #000; white-space: nowrap; display: flex; align-items: center; gap: 3px; }
.drawer .footer {display: flex; align-items: center; flex-shrink: 0; background: var(--drawerBackgroundColor);}

.deal-save-bar-bottom-right {
  display: flex;
  justify-content: flex-end;
  padding: 16px 0 0 0;
}
.deal-save-bar-bottom-right .deal-save-bar {
  width: auto;
}
.deal-save-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  background: var(--drawerBackgroundColor);
  gap: 12px;
}
.deal-save-label {
  font-size: 13px;
  color: #000;
  flex: 1;
}
.deal-save-actions {
  display: flex;
  gap: 8px;
}
.deal-save-actions button {
  min-width: 90px;
}

/* Unsaved-changes dialog */
.unsaved-dialog-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unsaved-dialog-box {
  background: var(--drawerBackgroundColor);
  border-radius: var(--radius, 8px);
  padding: 28px 32px;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.unsaved-dialog-box h2 {
  margin-bottom: 10px;
}
.unsaved-dialog-box p {
  margin-bottom: 24px;
  color: #000;
  font-size: 14px;
}
.unsaved-dialog-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.unsaved-dialog-actions button {
  width: 100%;
}
.unsaved-dialog-actions button.ghost {
  background: transparent;
  border: none;
  color: #000;
}
.unsaved-dialog-actions button.ghost:hover {
  color: var(--text-color);
  background: var(--card-filled);
}
.drawer .header h2 {flex: 1; text-align: center;}
.drawer .body {padding: 0 24px 24px 24px;}

.drawer select, .drawer input, .drawer textarea {
  background: var(--card-filled);
}

.drawer .header button {height: 50px; width: 50px; padding: 0; border: 0;}
.drawer .btnList button.active {
    border: 1px var(--success) solid; color: var(--success)
}
.drawer .header svg {
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}

table svg {
    width: auto;
    fill: none;
    stroke: var(--primary-text-color);
}

.drawer .header button.back {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.drawer .header button.back svg {
    height: 28px;
    width: auto;
    margin-left: -4px;
    transition: transform 0.3s ease;
}

.drawer.active .header button.back svg {
    transform: rotate(180deg);
}

.drawer .header button.trash svg {
    height: 20px;
}

.drawer .header button.trash {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}



.fullscreenLoader {
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: 100%; height: 100dvh; z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    position: fixed;
}

.row {display: block; margin-bottom: 24px; line-height: 20px;}
.label {display: block; font-size: var(--small); text-transform: uppercase; opacity: 0.7;letter-spacing: 0.5px; padding-top: var(--labelPadding); font-weight: 500;}

label {display: block; font-size: var(--small); text-transform: uppercase; opacity: 0.7;letter-spacing: 0.5px; padding-bottom: var(--labelPadding); font-weight: 500;}


.row label.switch {padding: 0; opacity: 1;}
.row img {width: 70px; height: 70px; border: 1px var(--borderColor) solid;}


.section tabs {margin-bottom: 0;}
tabs {display: flex; gap: 24px;}
.content tabs button { background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);}
tabs button.active {background: var(--primary-color); color: var(--primary-background-color);}
tabs button:not(.active):not(.disabled) { opacity: 0.5; }
tabs button.disabled {
  opacity: 0.3;
  text-decoration: line-through;
  pointer-events: none;
}

/* Sub-tabs: second-level phase filters */
subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 0;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--borderColor);
  border-radius: var(--radius);
  min-height: 0;
}
subtabs:empty {
  display: none;
}
subtabs button {
  font-size: 13px;
  padding: 4px 12px;
  height: 32px;
  opacity: 0.75;
  border: 1px solid var(--borderColor);
  background: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
subtabs button:hover { opacity: 1; }
subtabs button.active {
  background: var(--borderColor);
  opacity: 1;
}
.tab-info-icon {
  display: inline-flex;
  align-items: center;
  opacity: 0.5;
  margin-left: 4px;
  vertical-align: middle;
  cursor: default;
}
.tab-info-icon:hover { opacity: 1; }

subtabs counter {
  font-size: 11px;
  min-height: 16px;
  height: 16px;
  min-width: 16px;
  padding-left: 4px;
  padding-right: 4px;
}

group {background: var(--card); display: none; padding: 24px; margin-top: 24px; border-radius: var(--radius)}
group.active {display: block;}
group h2 {padding-bottom: 24px;}

.sortable-ghost {opacity: 0;    }

.switch {
    position: relative;
    display: inline-block;
    width: 60px;

    min-width: 60px;
    height: 44px;
    padding-bottom: 0;
    opacity: 1 !important;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0px;
    bottom: 0;
    background-color: transparent;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: var(--radius);
    border: 1px var(--borderColor) solid;
  }
  
  .slider:before {
    position: absolute;
    content: "";
    height: 36px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: var(--borderColor);
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: var(--radius)
  }


  input[type="checkbox"]:checked + .slider {
    background-color: var(--primary-color);
  }
  
  input[type="checkbox"]:focus + .slider {
    box-shadow: 0 0 1px var(--primary-color);
  }
  
  input[type="checkbox"]:checked + .slider:before {
    -webkit-transform: translateX(33px);
    -ms-transform: translateX(33px);
    transform: translateX(33px);
  }
  
  .slider.round {
    border-radius: var(--radius);
  }
  
  .slider.round:before {
    border-radius: var(--radius);
  }

  input[type="checkbox"]:checked + .slider:before {
   background-color: var(--primary-background-color);
  }

  .success {
    background: var(--success)
  }

  .neutral {
    background: var(--neutral)
  }

  .error {
    background: var(--error)
}

  widgets {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    margin-top: 24px;
  }

  widget {
    background:var(--card);
    padding: 16px;
    border-radius: var(--radius);
    border: 1px var(--borderColor) solid;
  }
  widget:hover {background: var(--borderColor)}

  
.big {font-size: var(--big)}

 .flex {display: flex;}
 .card .flex {padding-top: 4px; padding-bottom: 4px;}
 .card .big {border-bottom: 1px var(--borderColor) solid; display: block; padding-bottom: 12px; margin-bottom: 12px; color:var(--primary-color);}

.sply {display: block; font-size: 0.8rem; margin-top: -8px; margin-bottom: 10px; opacity: 0.85;}
.sply-up {color: #16a34a;}
.sply-down {color: #dc2626;}

.message {display: none;}

.company-notice { display: block; margin-top: 12px; padding: 10px 14px; background: #fff8e1; border: 1px solid #ffe082; border-radius: 6px; color: #5c4a00; font-size: 14px; line-height: 1.4; white-space: pre-wrap; }

.two-column-wrapper {display: flex; gap: 48px;}
.two-column-wrapper #deal-external, .two-column-wrapper #notices {width: 100%;}
.two-column-wrapper #notices {max-width: 350px;}

.sticky-top-50 {position: sticky; top: 74px; background: var(--drawerBackgroundColor); z-index: 1;}

.innerTab {display: flex; gap: 16px;}
.innerTab button {
  padding: 8px 16px;
  border: 1px solid var(--borderColor);
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s ease;
}
.innerTab button:hover {
  background: var(--card-filled);
}
.innerTab button.active {
  background: var(--primary-color);
  color: var(--primary-background-color);
  border-color: var(--primary-color);
}
.innerTab button.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.marginTop48 {margin-top: 48px;}
.marginTop32 {margin-top: 32px;}
.marginTop24 {margin-top: 24px;}
.marginTop12 {margin-top: 12px;}
.marginTop8 {margin-top: 8px;}

.marginBottom24 {margin-bottom: 24px;}
.marginBottom16 {margin-bottom: 16px;}

.paddingTop48 {padding-top: 48px;}
.paddingTop32 {padding-top: 32px;}
.paddingTop24 {padding-top: 24px;}

.list-item {background: var(--card); border: 1px var(--borderColor) solid; border-top: 0;}
.list-header:hover {background: var(--borderColor);}
.sales-container {border-top: 1px var(--borderColor) solid; border-radius:var(--radius); overflow: hidden;}
.list-header {padding: 16px; display: flex; align-items: center; cursor: pointer; font-weight: 500;}
.backoffice-header {padding: 0px; display: flex; align-items: center; cursor: pointer; margin-bottom: 24px;}
.list-body {padding: 16px; display: none;}
.list-item.active .list-body {display: block;}
.verifier {margin-left: auto;}

.backoffice-item:first-of-type {
    margin-top: 0;
}

.backoffice-item {background: var(--card); border: 1px var(--borderColor) solid; padding: 16px; border-radius: var(--radius); margin-top: 24px;}

.innerTabcontent {display: none; margin-top: 24px; position: relative; z-index: 0;}
.innerTabcontent.active {display: block;}

/* Modal styling */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.modal.active {
  display: flex;
}

.modalClose {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.modalInner {
  background: var(--primary-background-color);
  padding: 32px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  z-index: 1;
  border: 1px solid var(--borderColor);
  box-sizing: border-box;
}

.credit-attempt-edit-modal-inner {
  max-width: 520px;
}

.credit-attempt-edit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}

.credit-attempt-edit-header h2 {
  font-size: 20px;
  margin-bottom: 6px;
}

.credit-attempt-edit-header p {
  color: var(--borderColor);
  font-size: 13px;
}

.credit-attempt-edit-header .modal-close {
  width: 32px;
  min-width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 32px;
}

.credit-attempt-edit-fields {
  display: grid;
  row-gap: 10px;
}

.credit-attempt-edit-fields label {
  font-size: 13px;
  margin-top: 8px;
}

.credit-attempt-edit-fields input,
.credit-attempt-edit-fields select,
.credit-attempt-edit-fields textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--borderColor);
  border-radius: 6px;
  background: var(--card);
  color: var(--primary-text-color);
  font: inherit;
}

.credit-attempt-edit-fields textarea {
  min-height: 100px;
  resize: vertical;
}

.credit-attempt-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 24px;
}

.alignCenter {align-items: center;}
.justifyCenter {justify-content: center;}
.dialog {position: fixed; top: 0; left: 0; width: 100%; height: 100vh; z-index: 10000;}
.dialog .card {background: var(--primary-background-color);}
.dialog .inner {max-width: 450px;}

.productRow {cursor: pointer; box-sizing: initial;height: 40px; align-items: center; padding-top: 8px; padding-bottom: 8px; border-bottom: 1px var(--borderColor) solid;}
.productRow .image img {height: 40px; width: 40px; object-fit: cover;}
.productRow span {width: 100%;}
.productRow:hover {background: var(--borderColor);}
.productRow span.qty {max-width: 40px;}
.productRow span.image {max-width: 40px;}
.productRow span.icons {max-width: 40px; margin-left: auto;}
.productRow span.price {max-width: 105px; text-align: right;}

#product-image {width: 100px; height: 100px; object-fit: cover;}
.image {position: relative;}
.image button {width: 44px; position: absolute; top: -6px; right: -6px; background: var(--primary-background-color); display: flex; align-items: center; justify-content: center;}
#product-qty {text-align: center;}
#product-attachments a {color: var(--primary-text-color)}
#product-attachments button {width: 44px; padding: 0; margin-left: auto;}
#product-attachments li {padding-top: 6px; padding-bottom: 6px; border-bottom: 1px var(--borderColor) solid;}
#product-attachments li:last-of-type {border-bottom: 0;}
bar {display: block; width: 0; transition: all 0.25s; background: var(--borderColor);}

.icon {width: 44px; height: 44px; position: relative; display: block; display: flex; align-items: center;}
.icon counter {display: inline-block; position: absolute; top: 0px; right: 0;}

.loaderWrapper {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}


  .tag-chips {
    display:flex;
    flex-wrap:wrap;
    width: 100%;
    gap: 8px;
}

  .tag-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    background:var(--card);
    border:1px solid var(--borderColor);
    border-radius:var(--radius);
    font-size:14px;
    padding-right: 0;
    margin-bottom: 8px;
  }
  .tag-chip button{
    border:none;
    background:transparent;
    cursor:pointer;
    color:var(--chip-x);
    font-size:16px;
    height: 30px;
    padding: 0;
    padding-left: 12px;
    padding-right: 12px;
  }
 

  .autocomplete {
    position: relative;
  }
  .autocomplete-items {
    position: absolute;
    border: 1px solid var(--borderColor);
    border-bottom: none;
    border-top: none;
    z-index: 99;
    /*position the autocomplete items to be the same width as the container:*/
    top: 100%;
    left: 0;
    right: 0;
  }
  .autocomplete-items div {
    padding: 10px;
    cursor: pointer;
    background-color: var(--primary-background-color);
    border-bottom: 1px solid var(--borderColor);
  }
  .autocomplete-items div:hover {
    /*when hovering an item:*/
    background-color: var(--card-filled);
  }
  .autocomplete-active {
    /*when navigating through the items using the arrow keys:*/
    background-color: var(--borderColor) !important;
  }

  .resultList li {list-style-type: none; border: 1px var(--borderColor) solid; padding: 8px; margin-top: -1px; cursor: pointer;}
  .resultList li label {padding-bottom: 0; padding-top: var(--labelPadding)}
  .resultList li:hover {background: var(--borderColor);}
  .resultList li:first-of-type {padding-top: 16px;}


  [contenteditable] {
    border: 1px var(--borderColor) solid;
    padding-left: 16px; padding-right: 16px; padding-top: 13px; padding-bottom: 13px;
  }


  #internalNotices li input {border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--card);}
  #internalNotices li [contenteditable] {border-top: 0; margin-bottom: 24px; border-radius: 0 0 var(--radius) var(--radius); background: var(--card);}
  #internalNotices li svg {
    stroke: var(--primary-text-color);
  }

  .collectionList a {
    color: var(--primary-text-color);
  }

  .collectionList li {padding-top: 8px; padding-bottom: 8px; border-bottom: 1px var(--borderColor) solid;}

  .collectionList li:last-of-type {border-bottom: 0;}

  .collectionList svg {
    stroke: var(--primary-text-color);
  }

  .collectionList button {padding: 0; max-width: 44px;}
  .marginLeft {margin-left: auto;}

  /* Company List Table */
  #companies table {
    table-layout: auto;
  }


  .underline {
    background: var(--primary-color);
    padding-left: 4px;
    padding-right: 4px;
    padding-top: 4px;
    padding-bottom: 4px;
    border-radius: var(--radius);
    color: var(--primary-background-color);
    margin-left: 6px;
    font-weight: 600;
    display: inline-block;
    margin-top: -8px;
    cursor: pointer;
  }

  .underline:hover {opacity: 0.7;}

  embed {width: 100%; height: 450px;}

  a {color: var(--primary-text-color);}

  .questions li {display: flex; gap: 16px; padding-top: 16px; padding-bottom: 16px; border-bottom: 1px var(--borderColor) solid;}
  .card.inner h2 {margin-bottom: 24px;}


  .green input, .green select {
    background: url("svg/check.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }

  #creditCheckScreeningPassedCheckbox {
    accent-color: #198754;
  }

  .orange input, .orange select {
    background: url("svg/pending.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }

  .red input, .red select {
    background: url("svg/denied.svg") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
  }


  select {
    appearance: none;            /* Tar bort standardpilen */
    -webkit-appearance: none;
    -moz-appearance: none;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23666' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px auto;  
  }


/* 🎨 Gemensam stil för date och datetime-local */
input[type="date"],
input[type="datetime-local"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  /* Ta bort standardikonen */
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px auto;

  /* 🔽 Kalenderikon som inline-SVG */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-calendar'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");

  padding-right: 40px; /* Plats för ikonen till höger */
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 16px;
  cursor: pointer;
}


.searchCompany input {
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 20px auto;

  /* 🔽 Kalenderikon som inline-SVG */
  

}


/* 🧹 Dölj standardkalender-ikon i Chrome, Edge, Safari */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  opacity: 0;
  display: none;
  -webkit-appearance: none;
}

/* 🧹 Dölj i Firefox */
input[type="date"]::-moz-focus-inner,
input[type="date"]::-moz-calendar-picker-indicator,
input[type="datetime-local"]::-moz-focus-inner,
input[type="datetime-local"]::-moz-calendar-picker-indicator {
  display: none;
}

/* 🧹 Dölj i äldre Edge-versioner */
input[type="date"]::-ms-clear,
input[type="date"]::-ms-expand,
input[type="datetime-local"]::-ms-clear,
input[type="datetime-local"]::-ms-expand {
  display: none;
}



#fakeDropZone {
  background-color: rgb(0 0 0 / 80%);
  position: fixed;
  inset: 0;           /* ersätter top/left/width/height */
  min-height: 100dvh; /* bättre på mobiler */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: #fff;
  z-index: -1;        /* gömd från början */
  opacity: 0;
  pointer-events: none; /* blockera inte klick/drop underliggande yta */
  transition: opacity .15s ease;
}

#fakeDropZone.dragover { /* <= matchar JS */
  z-index: 100000;
  opacity: 1;
}

.badge {padding-left: 10px; padding-right: 10px; background: var(--card); color: var(--primary-text-color);border-radius: var(--radius); margin-top: 8px; padding-top: 4px; padding-bottom: 4px; border: 1px var(--borderColor) solid; display: inline-block; margin-right: 5px;}
.badge.ok {border: 1px var(--success) solid; color: var(--success);}
.badge.error {border: 1px var(--error) solid; color: var(--error);}

/* Theme Toggle Slider */
.theme-toggle-container {
  display: flex;
  align-items: center;
  margin-left: auto;
  gap: 8px;
}

.theme-toggle {
  position: relative;
  width: 50px;
  height: 26px;
}

.theme-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.theme-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--borderColor);
  transition: .3s;
  border-radius: 34px;
  border: 1px solid var(--borderColor);
}

.theme-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: var(--primary-text-color);
  transition: .3s;
  border-radius: 50%;
}

.theme-toggle input:checked + .theme-slider {
  background-color: var(--primary-color);
}

.theme-toggle input:checked + .theme-slider:before {
  transform: translateX(24px);
  background-color: #00342d;
}

/* Light theme adjustments */
body.light-theme .theme-slider {
  background-color: white;
  border: 1px solid #ccc;
}

body.light-theme .theme-toggle input:checked + .theme-slider {
  background-color: white;
  border: 1px solid var(--primary-color);
}

body.light-theme .theme-toggle input:checked + .theme-slider:before {
  background-color: var(--primary-color);
}

body.light-theme button.cta {
  background: #00342d;
  color: #ffffff;
}

body.light-theme nav {
  background: #00342d;
}

body.light-theme nav button {
  color: #fff;
}

body.light-theme nav .body button svg {
  stroke: #fff;
}

body.light-theme nav .body button.active svg {
  stroke: #ffffff;
}

body.light-theme nav .body button.active {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.light-theme #globalSearchInput {
  background: rgba(255, 255, 255, 0.7);
  color: #00342d;
  border: 1px solid #ccc;
}

body.light-theme #globalSearchInput::placeholder {
  color: rgba(0, 52, 45, 0.6);
}

body.light-theme .side-nav-item,
body.light-theme #side-nav-footer-items .user-dropdown-btn,
body.light-theme #side-nav-footer-items #settingsDropdownBtn {
  color: #ffffff;
}

body.light-theme .side-nav-item svg,
body.light-theme #side-nav-footer-items .user-dropdown-btn svg,
body.light-theme #side-nav-footer-items #settingsDropdownBtn svg {
  stroke: #ffffff;
}

body.light-theme .side-nav-item.active svg {
  stroke: #ffffff;
}

body.light-theme #side-nav-footer-items #settingsDropdownBtn {
  color: #ffffff !important;
}

body.light-theme button:not(.cta):not(.tablinks):hover {
  background: rgba(0, 0, 0, 0.1);
}

body.light-theme tabs button:not(.active):not(.disabled),
body.light-theme .innerTab button:not(.active):not(.disabled) {
  background: #ffffff;
  opacity: 1;
  color: #000000;
}

body.light-theme subtabs button:not(.active) {
  background: #ffffff;
}

body.light-theme .content tabs button:not(.active) {
  background: #ffffff;
  opacity: 1;
  color: #000000;
}

body.light-theme button.ghost {
  border: 1px #00342d solid;
  color: #00342d;
}
a .badge.ok {
  background: var(--success); color: var(--primary-background-color); font-weight: 500;
}
.stack {margin-top: 24px;}

/* Company manager filter dropdown */
#companyManagerFilter {
  width: auto;
  min-width: 200px;
  background: var(--primary-background-color);
  color: var(--primary-text-color);
}

#companyManagerFilter option {
  background: var(--primary-background-color);
  color: var(--primary-text-color);
}

body.light-theme #companyManagerFilter {
  background: #ffffff;
  color: #000000;
}

body.light-theme #companyManagerFilter option {
  background: #ffffff;
  color: #000000;
}

/* Column Selector Modal */
.column-selector-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.5);
  justify-content: center;
  align-items: center;
}
.column-selector-modal.active {
  display: flex;
}
.column-selector-modal-content {
  background: var(--drawerBackgroundColor);
  border-radius: var(--radius);
  padding: 0;
  min-width: 320px;
  max-width: 700px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}
.column-selector-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--borderColor);
}
.column-selector-modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}
.column-selector-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 0;
}
.column-selector-close:hover {
  background: var(--card-filled);
}
.column-selector-modal-body {
  padding: 12px 20px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.column-selector-modal-body .column-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  white-space: nowrap;
}
.column-selector-modal-body .column-option:hover {
  background: var(--card-filled);
}
.column-selector-modal-body .column-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--primary-color);
}

/* Two-panel layout */
.col-selector-panels {
  display: flex;
  gap: 16px;
}
.col-selector-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.col-selector-panel-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.5;
  margin-bottom: 6px;
}

/* Active column items (right panel) */
.col-active-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 4px;
  font-size: 14px;
  background: var(--card);
  border: 1px solid var(--borderColor);
  cursor: default;
  user-select: none;
}
.col-active-item:hover {
  background: var(--card-filled);
}
.drag-handle {
  cursor: grab;
  opacity: 0.4;
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}
.drag-handle:active {
  cursor: grabbing;
}

/* Export section */
.export-wrapper {
  padding: 16px 0;
  max-width: 600px;
}
.export-wrapper .col-selector-panels {
  gap: 24px;
}
.export-wrapper .col-selector-panel-title {
  font-size: 11px;
  margin-bottom: 4px;
}
.export-wrapper .column-option,
#summarySettingsPopover .column-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  white-space: nowrap;
}
.export-wrapper .column-option:hover,
#summarySettingsPopover .column-option:hover {
  background: var(--card-filled);
}
.export-wrapper .column-option input[type="checkbox"],
#summarySettingsPopover .column-option input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: #00342d;
  flex-shrink: 0;
}

/* -------------------------------------------------------
   Cogwheel / Settings Dropdown
------------------------------------------------------- */
#settingsDropdownContainer {
  position: relative;
  display: flex;
  align-items: center;
  padding-right: 12px;
}

.cogwheel-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
  opacity: 1 !important;
}

.cogwheel-btn:hover {
  color: var(--primary-text-color);
  background: var(--card);
}

.settings-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  min-width: 210px;
  z-index: 10000;
  box-shadow: 0 6px 20px rgba(0,0,0,0.35);
  overflow: hidden;
}

.settings-dropdown.open {
  display: block;
}

.settings-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid #e0e0e0;
  color: #000 !important;
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  transition: background 0.15s;
}

.settings-dropdown-item:last-child {
  border-bottom: none;
}

.settings-dropdown-item:hover {
  background: #f5f5f5;
}

.settings-dropdown-item.active {
  font-weight: 600;
}

.settings-dropdown-item.active::after {
  content: '';
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  flex-shrink: 0;
}

.settings-dropdown-darkmode {
  cursor: default;
}

.settings-dropdown-sideNav {
  cursor: default;
}

.settings-dropdown-signout {
  color: #e55;
}

/* -------------------------------------------------------
   Referenseräntor Modal
------------------------------------------------------- */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 100000;
  align-items: center;
  justify-content: center;
}

.modal-overlay.open {
  display: flex;
}

.modal-content {
  background: var(--drawerBackgroundColor);
  border: 1px solid var(--borderColor);
  border-radius: 14px;
  padding: 28px;
  width: 90%;
  max-width: 460px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.modal-header h2 {
  margin: 0;
  font-size: 18px;
}

.modal-close {
  background: transparent;
  border: none;
  color: var(--primary-text-color);
  font-size: 20px;
  cursor: pointer;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.modal-close:hover {
  background: var(--card);
}

.modal-body .grid {
  display: grid;
  gap: 14px;
  margin-bottom: 4px;
}

.modal-body label {
  display: block;
  font-size: 13px;
  margin-bottom: 4px;
  color: #000;
}

.modal-body input[type="number"] {
  width: 100%;
}

/* ======================================================
   ORDER DOCUMENT MODAL  (.order-modal-*)
====================================================== */
button.btn-sm { height: auto; padding: 6px 12px; font-size: 12px; width: auto; }

.order-modal-content {
  max-width: 680px;
  width: 95%;
}

.order-modal-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.order-modal-section {
  background: var(--card);
  border: 1px solid var(--borderColor);
  border-radius: 8px;
  padding: 12px 14px;
}

.order-modal-section h4 {
  font-size: 13px;
  margin-bottom: 10px;
  color: var(--primary-text-color);
}

/* Editable field rows inside the order modal */
.odr-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 8px;
}
.odr-field:last-child { margin-bottom: 0; }
.odr-label {
  font-size: 12px;
  color: #000;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.odr-input {
  height: 32px !important;
  font-size: 13px !important;
  padding: 4px 8px !important;
  width: 100% !important;
  border: 1px solid var(--borderColor) !important;
  border-radius: 6px !important;
  background: var(--primary-background-color) !important;
}
.odr-field--missing .odr-input {
  border-color: #e55 !important;
  background: rgba(238,85,85,0.06) !important;
}
.odr-field--missing .odr-label { color: #e55; }

/* Read-only product rows */
.order-preview-row {
  display: flex;
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--borderColor);
  font-size: 12px;
}
.order-preview-row:last-child { border-bottom: 0; }
.opr-label { color: #000; flex-shrink: 0; width: 110px; }
.opr-value { font-weight: 500; word-break: break-word; }

/* Products missing warning */
.odr-missing-warning {
  font-size: 12px;
  color: #e55;
  margin: 4px 0 0 0;
}

.order-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 4px;
}

/* ── Order document list (inside "Beställning & leverans") ── */
.order-doc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--borderColor);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
}

.order-doc-item svg {
  flex-shrink: 0;
  opacity: 0.5;
}

.order-doc-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-doc-date {
  color: #000;
  font-size: 13px;
  flex-shrink: 0;
}

.order-doc-link {
  flex-shrink: 0;
  font-size: 12px;
  padding: 3px 10px;
  border: 1px solid var(--borderColor);
  border-radius: 6px;
  color: var(--primary-text-color);
  text-decoration: none;
}

.order-doc-link:hover {
  background: var(--card);
}

.order-doc-remove {
  flex-shrink: 0;
  width: auto !important;
  height: auto !important;
  padding: 3px 8px !important;
  font-size: 12px;
  border: 1px solid var(--borderColor);
  border-radius: 6px;
  opacity: 0.5;
  cursor: pointer;
}
.order-doc-remove:hover { opacity: 1; border-color: #e55; color: #e55; }

.order-docs-empty {
  color: #000;
  font-size: 13px;
  margin: 0;
}


.dashboard-panel {
  background: var(--card);
  border: 1px var(--borderColor) solid;
  border-radius: var(--radius);
  padding: 20px;
  box-sizing: border-box;
}

/* ======================================================
   VERTICAL SIDEBAR (alternative nav, Azure DevOps style)
====================================================== */

/* The sidebar is hidden by default; shown when body has .sidebar-mode */
#side-nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 100dvh;
  width: 160px;
  background: var(--filled);
  border-right: 1px var(--borderColor) solid;
  display: none;
  flex-direction: column;
  z-index: 30;
  transition: width 0.25s ease;
  /* overflow:hidden removed — dropdown needs to escape the sidebar bounds */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  /* override global nav { padding: 16px } */
  padding: 0;
}

body.sidebar-mode #side-nav {
  display: flex;
}

/* Hide the horizontal top nav when sidebar mode is active */
body.sidebar-mode > nav:not(#side-nav) {
  display: none;
}

/* Push page content away from the left sidebar.
   padding-left shrinks the usable content area so sections never slide under the navbar. */
body.sidebar-mode {
  padding-left: 160px;
}

body.sidebar-mode.sidebar-collapsed {
  padding-left: 56px;
}

/* Collapsed sidebar — icon-only width */
body.sidebar-mode.sidebar-collapsed #side-nav {
  width: 56px;
}

/* ---- Nav body (scrollable items area) ---- */
#side-nav {
  align-items: stretch;
}

.side-nav-body {
  flex: 1;
  width: 100%;
  padding: 12px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  overflow-x: clip;
}

/* ---- Individual nav items ---- */
.side-nav-item,
#side-nav-footer-items .user-dropdown-btn,
#side-nav-footer-items #settingsDropdownBtn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  width: 100%;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--primary-text-color);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  font-size: 15px;
  font-family: var(--font);
  opacity: 0.7;
  transition: background 0.15s, opacity 0.15s;
  text-align: left;
  box-sizing: border-box;
}

.side-nav-item svg,
#side-nav-footer-items .user-dropdown-btn svg,
#side-nav-footer-items #settingsDropdownBtn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--primary-text-color);
  fill: none;
  transition: stroke 0.15s;
}

.side-nav-item:hover,
#side-nav-footer-items .user-dropdown-btn:hover,
#side-nav-footer-items #settingsDropdownBtn:hover {
  background: var(--borderColor);
  opacity: 1;
}

.side-nav-item.active {
  background: var(--borderColor);
  opacity: 1;
}

.side-nav-item.active svg {
  stroke: var(--primary-color);
}

/* ---- Labels (hide when collapsed) ---- */
.side-nav-label {
  overflow: hidden;
  white-space: nowrap;
  transition: opacity 0.2s ease;
  opacity: 1;
}

body.sidebar-mode.sidebar-collapsed .side-nav-label {
  opacity: 0;
  width: 0;
  pointer-events: none;
}

/* override global `nav button { width: fit-content }` */
#side-nav .side-nav-item,
#side-nav .side-nav-collapse-btn {
  width: 100%;
}

/* Center icons when collapsed */
body.sidebar-mode.sidebar-collapsed .side-nav-item,
body.sidebar-mode.sidebar-collapsed .side-nav-collapse-btn {
  justify-content: center;
  gap: 0;
  padding: 10px 0;
  width: 100%;
}

/* Remove horizontal padding from body/footer containers when collapsed so icons are truly centered */
body.sidebar-mode.sidebar-collapsed .side-nav-body,
body.sidebar-mode.sidebar-collapsed .side-nav-footer {
  padding-left: 0;
  padding-right: 0;
}

/* Hide user+settings footer items when collapsed — now icon-only instead */
body.sidebar-mode.sidebar-collapsed #side-nav-footer-items {
  padding-left: 0;
  padding-right: 0;
}

/* In collapsed mode: center each footer item and hide text */
body.sidebar-mode.sidebar-collapsed #side-nav-footer-items .user-icon {
  width: 20px;
  height: 20px;
}

body.sidebar-mode.sidebar-collapsed #side-nav-footer-items #settingsDropdownContainer {
  display: flex;
  justify-content: center;
  padding-right: 0;
}

body.sidebar-mode.sidebar-collapsed #side-nav-footer-items #settingsDropdownBtn {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

body.sidebar-mode.sidebar-collapsed #side-nav-footer-items #settingsDropdownBtn::after {
  display: none;
}

/* ---- Tooltips (show on hover when collapsed, appear to the right of the icon) ---- */
.side-nav-tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--filled);
  color: var(--primary-text-color);
  border: 1px var(--borderColor) solid;
  border-radius: var(--radius);
  padding: 5px 10px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: 200;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

body.sidebar-mode.sidebar-collapsed .side-nav-item:hover .side-nav-tooltip,
body.sidebar-mode.sidebar-collapsed .side-nav-collapse-btn:hover .side-nav-tooltip {
  opacity: 1;
}

/* ---- Footer / collapse button ---- */
.side-nav-footer {
  padding: 8px;
  border-top: 1px var(--borderColor) solid;
  flex-shrink: 0;
}

/* ---- Footer items (user + settings moved here in sidebar mode) ---- */
#side-nav-footer-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  border-bottom: 1px var(--borderColor) solid;
}

/* User icon */
.user-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  pointer-events: none;
}

/* User dropdown container — same pattern as #settingsDropdownContainer */
#userDropdownContainer {
  position: relative;
  display: flex;
  align-items: center;
}

#side-nav-footer-items #userDropdownContainer,
#side-nav-footer-items #settingsDropdownContainer {
  width: 100%;
  padding-right: 0;
}

/* User dropdown button — base styles for top nav; sidebar overrides via shared rule */
.user-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  color: var(--primary-text-color);
  font-size: 14px;
  font-family: var(--font);
  opacity: 0.7;
  transition: background 0.2s, opacity 0.2s;
  white-space: nowrap;
}

.user-dropdown-btn:hover {
  background: var(--card);
  opacity: 1;
}

.user-dropdown-label {
  font-size: 14px;
}

/* Sidebar footer: full-width styles already come from shared rule */
#side-nav-footer-items .user-dropdown-btn,
#side-nav-footer-items #settingsDropdownBtn {
  justify-content: flex-start;
}

/* Override marginLeftAuto when inside sidebar */
#side-nav-footer-items #userImpersonationContainer {
  margin-left: 0;
  width: 100%;
}

#side-nav-footer-items #userDropdownContainer {
  width: 100%;
}

/* Collapsed: hide label, center icon */
body.sidebar-mode.sidebar-collapsed .user-dropdown-label {
  display: none;
}

body.sidebar-mode.sidebar-collapsed #side-nav-footer-items .user-dropdown-btn {
  justify-content: center;
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

#side-nav-footer-items #settingsDropdownBtn::after {
  content: 'Inställningar';
  font-family: var(--font);
  font-size: 15px;
}

/* Counter cogwheel-btn's opacity: 1 !important so the settings btn matches other nav items */
#side-nav-footer-items #settingsDropdownBtn {
  opacity: 0.7 !important;
  color: var(--primary-text-color) !important;
}

#side-nav-footer-items #settingsDropdownBtn:hover {
  opacity: 1 !important;
}

/* Dropdowns open upward from the left sidebar footer */
#side-nav-footer-items .settings-dropdown {
  top: auto;
  bottom: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: 210px;
}

.side-nav-collapse-btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px;
  width: 100%;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--primary-text-color);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  font-size: 14px;
  opacity: 0.7;
  transition: background 0.15s, opacity 0.15s;
}

.side-nav-collapse-btn:hover {
  background: var(--borderColor);
  opacity: 1;
}

.side-nav-collapse-btn svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  stroke: var(--primary-text-color);
  fill: none;
  transition: transform 0.25s ease;
}

/* Flip the chevron when collapsed (points right = expand) */
body.sidebar-mode.sidebar-collapsed .side-nav-collapse-btn svg {
  transform: rotate(180deg);
}

/* ======================================================
   RESPONSIVE IMPROVEMENTS
====================================================== */

/* For screens between 800px and 1200px (common Mac non-fullscreen sizes) */
@media only screen and (max-width: 1200px) {
  /* Auto-collapse sidebar on medium screens to save space */
  body.sidebar-mode:not(.sidebar-collapsed) {
    padding-left: 56px;
  }
  
  body.sidebar-mode:not(.sidebar-collapsed) #side-nav {
    width: 56px;
  }
  
  /* Hide labels on medium screens when sidebar is expanded */
  body.sidebar-mode:not(.sidebar-collapsed) .side-nav-label {
    opacity: 0;
    width: 0;
    pointer-events: none;
  }
  
  body.sidebar-mode:not(.sidebar-collapsed) .side-nav-item,
  body.sidebar-mode:not(.sidebar-collapsed) .side-nav-collapse-btn {
    justify-content: center;
    gap: 0;
    padding: 10px 0;
  }
  
  body.sidebar-mode:not(.sidebar-collapsed) .side-nav-body,
  body.sidebar-mode:not(.sidebar-collapsed) .side-nav-footer {
    padding-left: 0;
    padding-right: 0;
  }
  
  /* Reduce section padding on medium screens */
  .section {
    padding: 24px;
  }
  
  /* Adjust drawer width for medium screens */
  .drawer .content {
    max-width: 400px;
  }
  
  /* Stack two-column layouts on medium screens */
  .two-column-wrapper {
    flex-direction: column;
    gap: 24px;
  }
  
  .two-column-wrapper #notices {
    max-width: 100%;
  }
}

/* For tablets and smaller (below 900px) */
@media only screen and (max-width: 900px) {
  /* Force sidebar to be hidden on mobile/tablet */
  body.sidebar-mode {
    padding-left: 0 !important;
  }
  
  body.sidebar-mode #side-nav {
    display: none !important;
  }
  
  /* Show top nav instead on mobile */
  body.sidebar-mode > nav:not(#side-nav) {
    display: flex !important;
  }
  
  /* Drawer takes full width on mobile */
  .drawer .content {
    max-width: 100%;
  }
  
  /* Reduce modal padding on mobile */
  .modalInner {
    padding: 20px;
    width: 95%;
  }
  
  /* Ensure modals fit on mobile */
  .modal-content {
    padding: 20px;
    width: 95%;
  }
  
  /* Adjust order modal for mobile */
  .order-modal-sections {
    grid-template-columns: 1fr;
  }

  /* Export page + column-selector two-panel layouts stack on mobile */
  #exportGrid {
    grid-template-columns: 1fr !important;
  }
  .col-selector-panels {
    flex-direction: column;
  }
}