/* ==========================================================================
   Techworx layout: SIDEBAR (inspired by a classic admin layout)
   White sidebar with section headings, page title + user in the header,
   grey table header, pagination left / count right, footer with links.
   Load after techworx-base.css and techworx-split.css.
   Needs techworx.js (one <script> line in templates/common/base.html)
   for the collapse button, page title, user chip, extra links and footer.
   Icons: Lucide (lucide.dev, ISC licence), embedded as CSS masks.
   ========================================================================== */
:root {
  --twi-chevrons-up-down: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22m7 15 5 5 5-5%22/><path d=%22m7 9 5-5 5 5%22/></svg>");
  --twi-chevron-up: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22m18 15-6-6-6 6%22/></svg>");
  --twi-check: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M20 6 9 17l-5-5%22/></svg>");
  --twi-x: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M18 6 6 18%22/><path d=%22m6 6 12 12%22/></svg>");
  --twi-folder: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z%22/></svg>");
  --twi-share: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2218%22 cy=%225%22 r=%223%22/><circle cx=%226%22 cy=%2212%22 r=%223%22/><circle cx=%2218%22 cy=%2219%22 r=%223%22/><line x1=%228.59%22 x2=%2215.42%22 y1=%2213.51%22 y2=%2217.49%22/><line x1=%2215.41%22 x2=%228.59%22 y1=%226.51%22 y2=%2210.49%22/></svg>");
  --twi-shield: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z%22/><path d=%22m9 12 2 2 4-4%22/></svg>");
  --twi-globe: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20%22/><path d=%22M2 12h20%22/></svg>");
  --twi-link: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71%22/><path d=%22M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71%22/></svg>");
  --twi-lifebuoy: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%2210%22/><path d=%22m4.93 4.93 4.24 4.24%22/><path d=%22m14.83 9.17 4.24-4.24%22/><path d=%22m14.83 14.83 4.24 4.24%22/><path d=%22m9.17 14.83-4.24 4.24%22/><circle cx=%2212%22 cy=%2212%22 r=%224%22/></svg>");
  --twi-chevrons-left: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22m11 17-5-5 5-5%22/><path d=%22m18 17-5-5 5-5%22/></svg>");
  --twi-chevron-down: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22m6 9 6 6 6-6%22/></svg>");
  --twi-arrow-up-right: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M7 7h10v10%22/><path d=%22M7 17 17 7%22/></svg>");
  --twi-search: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2211%22 cy=%2211%22 r=%228%22/><path d=%22m21 21-4.3-4.3%22/></svg>");
  --twi-folder-plus: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M12 10v6%22/><path d=%22M9 13h6%22/><path d=%22M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z%22/></svg>");
  --twi-upload: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4%22/><polyline points=%2217 8 12 3 7 8%22/><line x1=%2212%22 x2=%2212%22 y1=%223%22 y2=%2215%22/></svg>");
  --twi-file: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z%22/><path d=%22M14 2v4a2 2 0 0 0 2 2h4%22/></svg>");
  --twi-home: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z%22/><polyline points=%229 22 9 12 15 12 15 22%22/></svg>");
  --twi-more: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><circle cx=%2212%22 cy=%2212%22 r=%221%22/><circle cx=%2219%22 cy=%2212%22 r=%221%22/><circle cx=%225%22 cy=%2212%22 r=%221%22/></svg>");
  --twi-eye: url("data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22><path d=%22M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0%22/><circle cx=%2212%22 cy=%2212%22 r=%223%22/></svg>");
}

/* ---- Icon helper: Lucide outline icons drawn with CSS masks ------------- */
.twx-ico, .twx-ext, .twx-chevron, .twx-collapse::before,
.app-sidebar-navs .menu-icon i, #kt_app_content .card-header .ki-magnifier,
#id_create_dir_button > i, button[data-bs-target="#modal_upload"] > i,
table.dataTable td .ki-folder, table.dataTable td .ki-file, table.dataTable td .ki-file-right,
[data-kt-filemanager-table-nav-bar="base"] .ki-home {
  display: inline-block; flex: none; width: 20px; height: 20px; font-size: 0 !important;
  background-color: currentColor !important;
  -webkit-mask: var(--twx-icon) center / contain no-repeat; mask: var(--twx-icon) center / contain no-repeat;
}
.app-sidebar-navs .menu-icon i > *, #kt_app_content .card-header .ki-magnifier > *,
#id_create_dir_button > i > *, button[data-bs-target="#modal_upload"] > i > *,
table.dataTable td .ki-folder > *, table.dataTable td .ki-file > *, table.dataTable td .ki-file-right > *,
[data-kt-filemanager-table-nav-bar="base"] .ki-home > * { display: none !important; }
.app-sidebar-navs .ki-folder { --twx-icon: var(--twi-folder); }
.app-sidebar-navs .ki-share { --twx-icon: var(--twi-share); }
.app-sidebar-navs .ki-shield { --twx-icon: var(--twi-shield); }
.twx-ico-globe .twx-ico { --twx-icon: var(--twi-globe); }
.twx-ico-link .twx-ico { --twx-icon: var(--twi-link); }
.twx-help .twx-ico { --twx-icon: var(--twi-lifebuoy); }
.twx-ext { --twx-icon: var(--twi-arrow-up-right); width: 12px; height: 12px; opacity: .55; }
.twx-chevron { --twx-icon: var(--twi-chevron-down); width: 16px; height: 16px; }
#kt_app_content .card-header .ki-magnifier { --twx-icon: var(--twi-search); width: 16px; height: 16px; color: var(--bs-gray-500); margin-left: 16px !important; }
#id_create_dir_button > i { --twx-icon: var(--twi-folder-plus); width: 17px; height: 17px; }
button[data-bs-target="#modal_upload"] > i { --twx-icon: var(--twi-upload); width: 17px; height: 17px; }
table.dataTable td .ki-folder { --twx-icon: var(--twi-folder); width: 20px; height: 20px; }
table.dataTable td .ki-file, table.dataTable td .ki-file-right { --twx-icon: var(--twi-file); width: 20px; height: 20px; color: var(--bs-gray-500) !important; }
[data-kt-filemanager-table-nav-bar="base"] .ki-home { --twx-icon: var(--twi-home); width: 16px; height: 16px; }

/* Support button: light blue-grey from the brand palette (#B1C6C9), dark teal text */
/* Active menu item ("Filer", "Delningar", "2FA") - change these four values to try another look */
[data-bs-theme=light] {
  --twx-active-bg: #e6eff1;          /* soft blue-grey */
  --twx-active-fg: #1d4553;          /* dark petrol text */
  --twx-active-icon: #327389;        /* petrol icon */
  --twx-active-bar: inset 3px 0 0 #327389;   /* marker on the left edge (use none to remove) */
}
[data-bs-theme=dark] {
  --twx-active-bg: #23363d; --twx-active-fg: #e3f0f3; --twx-active-icon: #7fbccd; --twx-active-bar: inset 3px 0 0 #7fbccd;
}
[data-bs-theme=light] { --twx-thead: #f2f5f6; --twx-help-bg: #d3e1e3; --twx-help-hover: #b1c6c9; --twx-help-fg: #1d4553; }
[data-bs-theme=dark] { --twx-thead: #2a2930; --twx-help-bg: #2c4a55; --twx-help-hover: #36606e; --twx-help-fg: #dbe9ec; }

@media (min-width: 992px) {
  :root { --bs-app-sidebar-width: 256px; --tw-header-h: 64px; }
  [data-kt-app-header-fixed=true] { --bs-app-header-height: var(--tw-header-h); }

  /* ---- Header: page title left, user right ------------------------------ */
  .app-header {
    height: var(--tw-header-h) !important; background: var(--bs-body-bg) !important;
    border-bottom: 1px solid var(--bs-border-color); box-shadow: none !important;
  }
  #kt_app_header_container { padding-left: 32px !important; padding-right: 32px !important; }
  .twx-page-title { margin: 0; font-size: 1.35rem; font-weight: 700; color: var(--bs-gray-900); letter-spacing: -.01em; }
  .twx-user {
    width: auto !important; height: 40px !important; padding: 0 10px 0 4px !important;
    display: inline-flex !important; align-items: center; gap: 10px; border-radius: 999px !important;
  }
  .twx-avatar {
    width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
    background: var(--tw-teal); color: #fff; font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  }
  .twx-user-name { font-weight: 600; color: var(--bs-gray-900); font-size: .95rem; }
  .twx-chevron { color: var(--bs-gray-600); }

  /* ---- Sidebar ---------------------------------------------------------- */
  .app-sidebar { border-right: 1px solid var(--bs-border-color) !important; }
  .app-sidebar-header { margin: 0 !important; padding: 14px 16px 6px 20px !important; }
  .app-sidebar-header > div { margin-bottom: 18px !important; display: flex !important; align-items: center; justify-content: space-between; }
  .app-sidebar-logo img { height: 34px !important; }
  .app-sidebar-logo .text-sidebar { padding-left: 12px !important; font-size: 1.15rem !important; }
  .twx-collapse {
    width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--bs-gray-600);
    display: grid; place-items: center; cursor: pointer; padding: 0;
  }
  .twx-collapse::before { content: ""; --twx-icon: var(--twi-chevrons-left); width: 18px; height: 18px; transition: transform .2s ease; }
  .twx-collapse:hover { background: var(--bs-gray-100); color: var(--tw-teal); }
  .twx-collapse:focus-visible { outline: 2px solid var(--tw-orange); outline-offset: 2px; }

  #kt_app_sidebar_navs_wrappers { margin: 0 12px !important; }
  .twx-nav-label { font-size: .8rem; font-weight: 600; color: var(--bs-gray-600); padding: 14px 10px 8px; }
  .app-sidebar-navs .menu { gap: 2px; margin: 0 0 8px !important; padding: 0 !important; }
  .app-sidebar-navs .menu .menu-item .menu-link { margin: 0 !important; }
  .app-sidebar-navs .menu .menu-item { padding: 0 !important; }
  .app-sidebar-navs .menu .menu-item .menu-link, .twx-nav-link {
    border-radius: 9px !important; padding: 10px 12px !important; display: flex; align-items: center; gap: 12px;
  }
  .app-sidebar-navs .menu .menu-icon { width: auto !important; margin: 0 !important; }
  .app-sidebar-navs .menu .menu-item .menu-link .menu-title,
  .twx-nav-link .twx-nav-text { font-size: .98rem !important; font-weight: 500 !important; color: var(--bs-gray-800) !important; }
  .app-sidebar-navs .menu-icon i { color: var(--bs-gray-700) !important; }
  .app-sidebar-navs .menu .menu-item .menu-link.active { background: var(--twx-active-bg) !important; box-shadow: var(--twx-active-bar) !important; }
  .app-sidebar-navs .menu .menu-item .menu-link.active .menu-title { color: var(--twx-active-fg) !important; font-weight: 600 !important; }
  .app-sidebar-navs .menu .menu-item .menu-link.active .menu-icon i { color: var(--twx-active-icon) !important; }
  .app-sidebar-navs .menu .menu-item .menu-link:hover:not(.active), .twx-nav-link:hover { background: var(--bs-gray-100) !important; }
  .twx-nav-link { text-decoration: none; }
  .twx-nav-link .twx-ico { color: var(--bs-gray-700); }
  .twx-nav-link .twx-nav-text { flex: 1; }

  .twx-help {
    position: absolute; left: 12px; right: 12px; bottom: 16px;
    display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 9px;
    background: var(--twx-help-bg); color: var(--twx-help-fg) !important; font-weight: 700; text-decoration: none;
  }
  .twx-help:hover { background: var(--twx-help-hover); }

  /* ---- Content ---------------------------------------------------------- */
  #kt_app_content_container { padding: 28px 32px 0 !important; }
  #kt_app_content { padding-top: 0 !important; }
  .card.card-flush { border-radius: 12px !important; }
  .card.card-flush > .card-header { padding: 22px 26px 8px !important; min-height: 0 !important; }
  .card.card-flush > .card-body { padding: 0 0 8px !important; }
  input[name="search"].w-250px { height: 42px; padding-left: 44px !important; border-radius: 9px !important; }
  #id_create_dir_button, button[data-bs-target="#modal_upload"] { height: 42px; border-radius: 9px !important; gap: 8px; }
  .card-body > .d-flex.flex-stack { padding: 0 26px !important; min-height: 46px; }
  [data-kt-filemanager-table-nav-bar="base"] { padding: 4px 0 14px !important; font-size: 1rem !important; }

  /* Bar shown when files are selected: "171 objekt markerade · Markera över flera sidor · Åtgärder" */
  [data-kt-filemanager-table-toolbar="selected"]:not(.d-none) {
    display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px 22px;
    width: 100%; margin: 0 0 14px; padding: 7px 7px 7px 18px;
    background: var(--bs-primary-light); border: 1px solid var(--bs-primary-border-subtle); border-radius: 10px;
  }
  [data-kt-filemanager-table-toolbar="selected"] > div { margin: 0 !important; }
  [data-kt-filemanager-table-toolbar="selected"] > .fw-bold { color: var(--bs-primary-text-emphasis); font-size: .98rem; }
  [data-kt-filemanager-table-toolbar="selected"] .form-check-label { color: var(--bs-gray-800) !important; font-weight: 500 !important; }
  [data-kt-filemanager-table-toolbar="selected"] > div:last-child { margin-left: auto !important; }
  [data-kt-filemanager-table-toolbar="selected"] .btn-light-primary {
    height: 38px; padding: 0 16px !important; border-radius: 8px !important;
    background: var(--bs-body-bg) !important; border: 1px solid var(--bs-primary-border-subtle) !important; color: var(--bs-primary) !important;
  }
  [data-kt-filemanager-table-toolbar="selected"] .btn-light-primary:hover { background: var(--bs-primary) !important; color: #fff !important; }
  [data-kt-filemanager-table-toolbar="selected"] .btn-light-primary:hover i, [data-kt-filemanager-table-toolbar="selected"] .btn-light-primary:hover i span { color: #fff !important; }

  /* Table: grey header band, airy rows */
  table.dataTable { margin: 0 !important; }
  table.dataTable thead tr th {
    background-color: var(--twx-thead) !important; text-transform: none !important; letter-spacing: 0 !important;
    font-size: .82rem !important; font-weight: 600 !important; color: var(--bs-gray-700) !important;
    padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 0 !important;
  }
  table.dataTable thead th:first-child, table.dataTable tbody td:first-child { padding-left: 26px !important; }
  table.dataTable thead th:last-child, table.dataTable tbody td:last-child { padding-right: 26px !important; }
  table.dataTable tbody td { padding-top: 15px !important; padding-bottom: 15px !important; border-bottom: 1px solid var(--bs-border-color) !important; }
  table.dataTable tbody td a.text-gray-800 { font-weight: 600; }
  table.dataTable tbody tr:hover td { background: var(--bs-gray-100) !important; }
  table.dataTable td .ki-folder { color: var(--tw-teal) !important; }

  /* Pagination left, "Visar 1 till 8 av 8" right */
  .dt-container > .row { flex-direction: row-reverse; padding: 14px 26px 6px; margin: 0; }
  .dt-container > .row > div { justify-content: flex-end !important; padding: 0; gap: 14px; }
  .dt-container > .row > div.col-md-7 { justify-content: flex-start !important; }
  .dt-container > .row .dt-toolbar > div:first-child { order: 2; }
  .dt-container .dt-info { color: var(--bs-gray-600); }
  .dt-container .page-item .page-link { border-radius: 8px !important; min-width: 36px; height: 36px; font-weight: 600; }
  .dt-container .page-item.active .page-link { background: var(--tw-teal) !important; color: #fff !important; }

  /* ---- Footer ----------------------------------------------------------- */
  #kt_app_footer { padding: 0 32px; }
  .twx-footer {
    border-top: 1px solid var(--bs-border-color); padding: 18px 0 !important; max-width: none !important;
    display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center;
  }
  .twx-copy { color: var(--bs-gray-700); font-size: .9rem; }
  .twx-footer-links { display: flex; gap: 22px; }
  .twx-footer-links a { color: var(--bs-gray-700); font-size: .9rem; }
  .twx-footer-links a:hover { color: var(--tw-teal); }

  /* ---- Collapsed sidebar ----------------------------------------------- */
  [data-twx-sidebar=collapsed] { --bs-app-sidebar-width: 76px; }
  [data-twx-sidebar=collapsed] .app-sidebar-header { padding: 14px 0 6px !important; }
  [data-twx-sidebar=collapsed] .app-sidebar-header > div { flex-direction: column; gap: 10px; justify-content: center !important; }
  [data-twx-sidebar=collapsed] .app-sidebar-logo .text-sidebar,
  [data-twx-sidebar=collapsed] .twx-nav-label,
  [data-twx-sidebar=collapsed] .twx-ext { display: none !important; }
  [data-twx-sidebar=collapsed] .twx-collapse::before { transform: rotate(180deg); }
  [data-twx-sidebar=collapsed] #kt_app_sidebar_navs_wrappers { margin: 0 !important; overflow: visible !important; }
  [data-twx-sidebar=collapsed] .app-sidebar,
  [data-twx-sidebar=collapsed] .app-sidebar-navs { overflow: visible !important; }
  [data-twx-sidebar=collapsed] .app-sidebar-navs .menu, [data-twx-sidebar=collapsed] .twx-nav-links { display: flex; flex-direction: column; align-items: center; gap: 6px; }
  [data-twx-sidebar=collapsed] .twx-nav-links { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--bs-border-color); }
  [data-twx-sidebar=collapsed] .menu-item, [data-twx-sidebar=collapsed] .twx-nav-link { position: relative; }
  [data-twx-sidebar=collapsed] .app-sidebar-navs .menu .menu-item .menu-link,
  [data-twx-sidebar=collapsed] .twx-nav-link { width: 46px; height: 46px; padding: 0 !important; justify-content: center; }
  [data-twx-sidebar=collapsed] .app-sidebar-navs .menu .menu-item .menu-link .menu-title,
  [data-twx-sidebar=collapsed] .app-sidebar-navs .twx-nav-link .twx-nav-text {
    display: block !important; position: absolute; left: 58px; top: 50%; transform: translateY(-50%);
    background: var(--tw-charcoal); color: #fff !important; white-space: nowrap; padding: 6px 12px; border-radius: 8px;
    font-size: .88rem !important; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 200;
  }
  [data-twx-sidebar=collapsed] .app-sidebar-navs .menu .menu-item .menu-link:hover .menu-title,
  [data-twx-sidebar=collapsed] .app-sidebar-navs .twx-nav-link:hover .twx-nav-text { opacity: 1; }
  [data-twx-sidebar=collapsed] .twx-help { left: 15px; right: 15px; justify-content: center; padding: 11px 0; }
  [data-twx-sidebar=collapsed] .twx-help .twx-nav-text { display: none; }
  .app-sidebar, .app-wrapper, .app-header { transition: width .2s ease, margin-left .2s ease, left .2s ease; }
}

/* JS-added parts are hidden on phones (SFTPGo's own slide-in menu is used there) */
@media (max-width: 991.98px) {
  .twx-collapse, .twx-help, .twx-nav-links, .twx-nav-label, .twx-user-name, .twx-chevron { display: none !important; }
  .twx-avatar { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tw-teal); color: #fff; font-size: .75rem; font-weight: 700; }
  .twx-page-title { font-size: 1.1rem; margin: 0; font-weight: 700; }
  .twx-footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .twx-footer-links { display: flex; gap: 16px; }
}

/* Switch in the selection bar: visible track when off */
[data-kt-filemanager-table-toolbar="selected"] .form-switch .form-check-input:not(:checked) {
  background-color: var(--bs-gray-300) !important; border-color: var(--bs-gray-300) !important;
}

/* ---- Active search filter: highlighted field, "Filtrerat" tag and × button ---- */
#kt_app_content .card-header .position-relative { position: relative; }
#kt_app_content input[name="search"]:not(:placeholder-shown) {
  border-color: var(--bs-primary) !important; background-color: var(--bs-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12) !important;
  color: var(--bs-primary-text-emphasis) !important; font-weight: 600; padding-right: 46px !important;
}
#kt_app_content .card-header .position-relative:has(input[name="search"]:not(:placeholder-shown)) .ki-magnifier { color: var(--bs-primary) !important; }
/* "Filtrerat" tag to the right of the field */
#kt_app_content .card-header .position-relative:has(input[name="search"]:not(:placeholder-shown))::after {
  content: "Filtrerat"; position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
  padding: 4px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--tw-orange); color: var(--tw-charcoal); font-size: .78rem; font-weight: 700; letter-spacing: .02em;
}
/* × button (added by techworx.js), only visible while there is a search */
.twx-clear {
  display: none; position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--bs-primary); color: #fff;
}
.twx-clear::before {
  content: ""; display: block; width: 14px; height: 14px; margin: auto; background: currentColor;
  -webkit-mask: var(--twi-x) center / contain no-repeat; mask: var(--twi-x) center / contain no-repeat;
}
.twx-clear:hover { background: var(--bs-primary-active); }
.twx-clear:focus-visible { outline: 2px solid var(--tw-orange); outline-offset: 2px; }
#kt_app_content input[name="search"]:not(:placeholder-shown) ~ .twx-clear { display: grid; place-items: center; }

/* ---- "Ny mapp": a roomy panel instead of a cramped row ------------------ */
.new_folder_divider { display: none !important; }
#file_manager_new_folder:not(.d-none) {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 12px;
  margin: 2px 26px 18px; padding: 14px 16px;
  background: var(--bs-primary-light); border: 1px dashed var(--bs-primary-border-subtle); border-radius: 12px;
}
#file_manager_new_folder > span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--bs-body-bg); }
#file_manager_new_folder > span .ki-folder {
  font-size: 0 !important; width: 20px; height: 20px; margin: 0 !important; color: var(--bs-primary) !important; background-color: currentColor !important;
  -webkit-mask: var(--twi-folder-plus) center / contain no-repeat; mask: var(--twi-folder-plus) center / contain no-repeat;
}
#file_manager_new_folder > span .ki-folder > * { display: none !important; }
#file_manager_new_folder_input {
  flex: 1 1 260px; max-width: 440px !important; height: 42px; margin: 0 !important;
  border-radius: 9px !important; background: var(--bs-body-bg) !important;
}
#file_manager_new_folder_input:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15) !important; }
#file_manager_add_folder, #file_manager_cancel_folder {
  width: auto !important; height: 42px !important; margin: 0 !important; padding: 0 16px !important;
  border-radius: 9px !important; display: inline-flex !important; align-items: center; gap: 8px; font-weight: 600;
}
#file_manager_add_folder { background: var(--bs-primary) !important; color: #fff !important; }
#file_manager_add_folder:hover { background: var(--bs-primary-active) !important; }
#file_manager_add_folder .indicator-label { display: inline-flex; align-items: center; gap: 8px; }
#file_manager_add_folder .indicator-label i { display: none !important; }
#file_manager_add_folder .indicator-label::before {
  content: ""; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--twi-check) center / contain no-repeat; mask: var(--twi-check) center / contain no-repeat;
}
#file_manager_add_folder .indicator-label::after { content: "Skapa mapp"; }
#file_manager_cancel_folder { background: transparent !important; color: var(--bs-gray-700) !important; border: 1px solid var(--bs-border-color) !important; }
#file_manager_cancel_folder:hover { background: var(--bs-body-bg) !important; color: var(--bs-gray-900) !important; }
#file_manager_cancel_folder i { display: none !important; }
#file_manager_cancel_folder::after { content: "Avbryt"; }
/* "Ny mapp" button keeps its light look while the panel is open */
#id_create_dir_button:focus, #id_create_dir_button:active, #id_create_dir_button.active {
  background: var(--bs-primary-light) !important; color: var(--bs-primary) !important;
}
#id_create_dir_button:focus > i, #id_create_dir_button:active > i { color: var(--bs-primary) !important; }
[data-bs-theme=dark] #file_manager_add_folder { color: #0f1a1e !important; }
/* Active menu item wins over the older dark-mode rule in techworx-split.css */
[data-bs-theme] .app-sidebar-navs .menu .menu-item .menu-link.active .menu-title { color: var(--twx-active-fg) !important; }
[data-bs-theme] .app-sidebar-navs .menu .menu-item .menu-link.active .menu-icon i,
[data-bs-theme] .app-sidebar-navs .menu .menu-item .menu-link.active .menu-icon i span { color: var(--twx-active-icon) !important; }

/* Smaller "Ny mapp" and "Ladda upp filer" buttons */
@media (min-width: 992px) {
  #id_create_dir_button, button[data-bs-target="#modal_upload"] {
    height: 36px !important; padding: 0 14px !important; font-size: .9rem !important; gap: 7px; border-radius: 8px !important;
  }
  #id_create_dir_button > i, button[data-bs-target="#modal_upload"] > i { width: 15px !important; height: 15px !important; }
  #id_create_dir_button { margin-right: 8px !important; }
}

/* ---- Empty folder: upload area with side spacing, small "Spara" button -- */
#upload_files_empty_container { margin: 24px 26px 22px !important; }
#upload_files_empty { padding: 26px 24px !important; min-height: 0 !important; }
#upload_files_empty .dz-message { margin: 0 !important; }
#upload_files_empty_container > .d-flex { margin-top: 14px !important; }
#upload_files_empty_button {
  height: 36px !important; padding: 0 16px !important; font-size: .9rem !important; border-radius: 8px !important;
  display: inline-flex !important; align-items: center;
}

/* ==== "Välj målmapp" (Kopiera / Flytta) - same look as the rest of the portal ==== */
#modal_move_or_copy .modal-content { overflow: hidden; }
#modal_move_or_copy .modal-header { background: var(--tw-teal); padding: 18px 26px !important; }
#modal_move_or_copy .modal-header .modal-title { color: #fff !important; font-size: 1.15rem; }
#modal_move_or_copy .modal-header .btn i, #modal_move_or_copy .modal-header .btn i span { color: #fff !important; }
#modal_move_or_copy .modal-body { padding: 18px 26px 6px !important; }
/* Short help text under the title */
#modal_move_or_copy .modal-body::before {
  content: "Klicka på en mapp för att öppna den. Filerna hamnar i mappen som visas under Målmapp.";
  display: block; margin-bottom: 16px; color: var(--bs-gray-600); font-size: .9rem;
}
/* Path row: "Hem / Arkiv / Underlag" like the file list */
#modal_move_or_copy .modal-body > .row { margin: 0 0 14px !important; align-items: center; }
#modal_move_or_copy .modal-body > .row > div { padding: 0 !important; }
#modal_move_or_copy .modal-body > .row .badge { background: transparent !important; padding: 0 !important; font-size: 1rem !important; font-weight: 600; }
#dirs_browser_nav a { color: var(--bs-gray-600) !important; border-radius: 6px; padding: 2px 6px; }
#dirs_browser_nav a:hover { color: var(--bs-primary) !important; background: var(--bs-primary-light); }
#dirs_browser_nav a:last-of-type { color: var(--bs-gray-900) !important; font-weight: 700; }
#dirs_browser_nav .ki-home {
  font-size: 0 !important; width: 16px; height: 16px; margin-right: 2px !important; background-color: var(--bs-primary) !important;
  -webkit-mask: var(--twi-home) center / contain no-repeat; mask: var(--twi-home) center / contain no-repeat;
}
#dirs_browser_nav .ki-right { font-size: 0 !important; margin: 0 2px !important; }
#dirs_browser_nav .ki-right::before { content: "/"; font-family: var(--bs-font-sans-serif); font-size: 1rem; font-weight: 400; font-style: normal; color: var(--tw-sand); }
/* "Lägg till" -> orange "Ny mapp", same size as the other buttons */
#id_dir_browser_create_dir {
  height: 36px !important; padding: 0 14px !important; border-radius: 8px !important; gap: 7px; font-size: .9rem !important;
  background: var(--tw-orange) !important; border-color: var(--tw-orange) !important; color: var(--tw-charcoal) !important;
}
#id_dir_browser_create_dir:hover { background: var(--tw-orange-dark) !important; }
#id_dir_browser_create_dir > i {
  font-size: 0 !important; width: 15px; height: 15px; background-color: currentColor !important; color: var(--tw-charcoal) !important;
  -webkit-mask: var(--twi-folder-plus) center / contain no-repeat; mask: var(--twi-folder-plus) center / contain no-repeat;
}
#id_dir_browser_create_dir > i > * { display: none !important; }
#id_dir_browser_create_dir > span { font-size: 0; }
#id_dir_browser_create_dir > span::after { content: "Ny mapp"; font-size: .9rem; }
/* Folder list: framed, rounded, clear hover */
#modal_move_or_copy .dt-container { border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; }
#modal_move_or_copy table.dataTable thead tr th { padding-top: 11px !important; padding-bottom: 11px !important; }
#modal_move_or_copy table.dataTable tbody td { padding-top: 11px !important; padding-bottom: 11px !important; }
#modal_move_or_copy table.dataTable thead th:first-child, #modal_move_or_copy table.dataTable tbody td:first-child { padding-left: 16px !important; }
#modal_move_or_copy table.dataTable tbody td a { color: var(--bs-gray-800) !important; font-weight: 600; }
#modal_move_or_copy table.dataTable tbody tr:hover td a { color: var(--bs-primary) !important; }
#modal_move_or_copy .dt-container > .row { padding: 8px 16px !important; }
#modal_move_or_copy .dt-container .page-link { min-width: 30px; height: 30px; }
/* New folder inside the dialog: same panel as in the file list */
.dir_browser_folder_divider { display: none !important; }
#dirsbrowser_new_folder:not(.d-none) {
  display: flex !important; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; padding: 12px 14px;
  background: var(--bs-primary-light); border: 1px dashed var(--bs-primary-border-subtle); border-radius: 10px;
}
#dirsbrowser_new_folder > span { display: none; }
#dirsbrowser_new_folder_input { flex: 1 1 220px; max-width: none !important; height: 38px; margin: 0 !important; border-radius: 8px !important; background: var(--bs-body-bg) !important; }
#dirsbrowser_add_folder, #dirsbrowser_cancel_folder { width: auto !important; height: 38px !important; margin: 0 !important; padding: 0 14px !important; border-radius: 8px !important; font-weight: 600; display: inline-flex !important; align-items: center; }
#dirsbrowser_add_folder { background: var(--bs-primary) !important; color: #fff !important; }
#dirsbrowser_add_folder .indicator-label i { display: none !important; }
#dirsbrowser_add_folder .indicator-label::after { content: "Skapa"; }
#dirsbrowser_cancel_folder { background: transparent !important; border: 1px solid var(--bs-border-color) !important; color: var(--bs-gray-700) !important; }
#dirsbrowser_cancel_folder i { display: none !important; }
#dirsbrowser_cancel_folder::after { content: "Avbryt"; }
[data-bs-theme=dark] #dirsbrowser_add_folder { color: #0f1a1e !important; }
/* Destination: "Målmapp" highlighted, "Målnamn" as a normal field */
#modal_move_or_copy .form-floating { margin: 16px 0 0 !important; }
#modal_move_or_copy .form-floating > .form-control {
  background: var(--bs-body-bg) !important; border: 1px solid var(--bs-border-color) !important; border-radius: 9px !important;
}
#modal_move_or_copy .form-floating > .form-control:focus { border-color: var(--bs-primary) !important; box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .15) !important; }
#modal_move_or_copy .form-floating > #move_copy_folder {
  background: var(--bs-primary-light) !important; border-color: var(--bs-primary-border-subtle) !important;
  box-shadow: inset 3px 0 0 var(--bs-primary) !important; color: var(--bs-primary-text-emphasis) !important; font-weight: 700;
}
#move_copy_name_container { margin-top: 12px !important; }
/* Footer: compact buttons, Kopiera = outline, Flytta = filled */
#modal_move_or_copy .modal-footer { padding: 14px 26px 20px !important; gap: 10px; }
#modal_move_or_copy .modal-footer .btn { height: 36px !important; padding: 0 18px !important; font-size: .9rem !important; border-radius: 8px !important; margin: 0 !important; display: inline-flex; align-items: center; }
#id_copy_button.btn-light-primary { background: var(--bs-body-bg) !important; border: 1px solid var(--bs-primary-border-subtle) !important; color: var(--bs-primary) !important; }
#id_copy_button.btn-light-primary:hover { background: var(--bs-primary-light) !important; }
[data-bs-theme=dark] #id_move_button { color: #0f1a1e !important; }
/* Folder list in the dialog: no "Visar 1 till 2..." and no page numbers when everything fits on one page */
#modal_move_or_copy .dt-container > .row .dt-toolbar { display: none !important; }
#modal_move_or_copy .dt-container > .row:has(.disabled .previous):has(.disabled .next) { display: none !important; }

/* ==== Row actions: option A - only icons (eye + three dots) ==== */

table.dataTable td:last-child .ki-eye, table.dataTable td:last-child .ki-dots-square {
  font-size: 0 !important; width: 17px; height: 17px; margin: 0 !important; background-color: currentColor !important;
  -webkit-mask: var(--twx-icon) center / contain no-repeat; mask: var(--twx-icon) center / contain no-repeat;
}
table.dataTable td:last-child .ki-eye { --twx-icon: var(--twi-eye); }
table.dataTable td:last-child .ki-dots-square { --twx-icon: var(--twi-more); width: 19px; height: 19px; }
table.dataTable td:last-child .ki-eye > *, table.dataTable td:last-child .ki-dots-square > * { display: none !important; }
table.dataTable td:last-child .btn.btn-icon { width: 34px !important; height: 34px !important; transition: background-color .15s, color .15s, border-color .15s, opacity .15s; }
table.dataTable td:last-child .ms-2 { margin-left: 6px !important; }
/* A: Ghost - only the icons, soft circle on hover */
table.dataTable td:last-child .btn.btn-icon { background: transparent !important; border: 0 !important; border-radius: 50% !important; color: var(--bs-gray-600) !important; }
table.dataTable td:last-child .btn.btn-icon i { color: var(--bs-gray-600) !important; }
table.dataTable td:last-child .btn.btn-icon:hover, table.dataTable td:last-child .btn.btn-icon.show { background: var(--bs-primary-light) !important; }
table.dataTable td:last-child .btn.btn-icon:hover i, table.dataTable td:last-child .btn.btn-icon.show i { color: var(--bs-primary) !important; }

/* ==== Table: tighter rows, clear checkboxes, visible sort arrows ==== */
@media (min-width: 992px) {
  table.dataTable tbody td { padding-top: 9px !important; padding-bottom: 9px !important; }
  table.dataTable thead tr th { padding-top: 11px !important; padding-bottom: 11px !important; }
}
/* Checkboxes: white box with a clear border (header "select all" and every row) */
table.dataTable .form-check-input {
  width: 18px !important; height: 18px !important; border-radius: 5px !important;
  background-color: var(--bs-body-bg) !important; border: 1.5px solid var(--bs-gray-400) !important; cursor: pointer;
}
table.dataTable .form-check-input:hover { border-color: var(--bs-primary) !important; }
table.dataTable .form-check-input:checked, table.dataTable .form-check-input:indeterminate {
  background-color: var(--bs-primary) !important; border-color: var(--bs-primary) !important;
}
[data-bs-theme=dark] table.dataTable .form-check-input { border-color: var(--bs-gray-500) !important; }
/* Sorting: faint up/down arrows on every sortable column, teal arrow on the active one */
table.dataTable thead th.dt-orderable-asc { cursor: pointer; }
table.dataTable thead th .dt-column-order::before, table.dataTable thead th .dt-column-order::after { display: none !important; }
table.dataTable thead th.dt-orderable-asc .dt-column-order {
  display: inline-block !important; position: static !important; width: 14px !important; height: 14px !important;
  margin-left: 6px; vertical-align: -2px; background-color: var(--bs-gray-500); opacity: .5;
  -webkit-mask: var(--twi-chevrons-up-down) center / contain no-repeat; mask: var(--twi-chevrons-up-down) center / contain no-repeat;
}
table.dataTable thead th.dt-orderable-asc:hover .dt-column-order { opacity: 1; background-color: var(--bs-primary); }
table.dataTable thead th.dt-ordering-asc .dt-column-order, table.dataTable thead th.dt-ordering-desc .dt-column-order {
  opacity: 1; background-color: var(--bs-primary);
  -webkit-mask-image: var(--twi-chevron-up); mask-image: var(--twi-chevron-up);
}
table.dataTable thead th.dt-ordering-desc .dt-column-order { transform: rotate(180deg); }
table.dataTable thead th.dt-ordering-asc .dt-column-title, table.dataTable thead th.dt-ordering-desc .dt-column-title { color: var(--bs-primary) !important; }
table.dataTable thead th .dt-column-header { display: inline-flex; align-items: center; }
/* Hide the theme's own sort arrow (we draw our own) and keep arrows after the label */
table.dataTable thead th.dt-ordering-asc::after, table.dataTable thead th.dt-ordering-desc::after,
table.dataTable thead th.dt-orderable-asc::after { display: none !important; }
table.dataTable thead th .dt-column-header { flex-direction: row !important; justify-content: flex-start !important; }