@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

:root {
  --font-family: 'Inter', sans-serif;
  --font-size: clamp(10px, 14px, 4vw);
  --font-size-h1: clamp(14px, 24px, 8vw);
  --font-size-h2: clamp(12px, 20px, 6vw);
  --font-size-h3: clamp(10px, 16px, 5vw);
  --font-size-h4: clamp(9px, 14px, 4vw);
  --font-size-small: clamp(8px, 12px, 3.5vw);
  --font-size-large: clamp(11px, 16px, 5vw);
  --font-size-xsmall: clamp(7px, 10px, 2.5vw);
  --icon-size: clamp(16px, 28px, 8vw);
  --icon-size-medium: clamp(14px, 24px, 7vw);
  --icon-size-small: clamp(12px, 20px, 6vw);
  --icon-size-small-wide: clamp(11px, 18px, 5.6vw);
  --icon-weight: 600;

  --font-weight-light: 340;
  --font-weight-normal: 420;
  --font-weight-semi-bold: 560;
  --font-weight-bold: 620;

  --font-variation-settings-small: 'FILL' 0, 'wght' 300, 'GRAD' 200, 'opsz' 10;
  --font-variation-settings-medium: 'FILL' 0, 'wght' 350, 'GRAD' 100, 'opsz' 24;

  font-size: var(--font-size);
  font-weight: var(--font-weight-normal);

  --table-line-height: 2rem;
  --input-height: 2.25rem;
  --button-height: 2.25rem;
  --border-radius: 4px;
  --inner-border-radius: 2px;
  --overlay-border-radius: 8px;
  --large-border-radius: 16px;
  --button-padding: 0 var(--gapXL);

  /* accessibility */
  --quick-transition-time: 0.15s;
  --slow-transition-time: 0.3s;

  /* spacing */
  --gapXXS: 0.1rem;
  --gapXS: 0.14rem;
  --gapS: 0.28rem;
  --gapSM: 0.375rem;
  --gapM: 0.5rem;
  --gapML: 0.625rem;
  --gapL: 0.75rem;
  --gapXL: 1rem;
  --gapXXL: 1.5rem;

  /* light theme */
  --background-color: #fafafa;
  --surface: #dbe3e6;
  --header-color: #2a3a4a;
  --text-color: #0e0e0e;
  --nav-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  --text-color-faded: #6c6c6c;
  --text-color-half-faded: #515151;
  --outline-color: #b1b1b1;
  --input-background: #f1f0f0;
  --input-background-focus: #eaeff0;
  --input-background-hover: #f8f8fb;
  --on-input-background: #3d3d3d;
  --special: #3c5767;
  --special-variant: #2a3a4a;
  --special-faded: #617683;
  --special-extra-faded: #a4b0b8;
  --special-faded-variant: #a1b5c2;
  --on-special: #fafafa;
  --on-special: white;
  --error-color: #b00020;
  --error-variant: #790000;
  --error-faded: #f3e0e2;
  --on-error: white;

  /* calculated vars */
  --special-transparent: rgb(from var(--special-faded-variant) r g b / 0.4);
  --overlay-background: rgb(from var(--background-color) r g b / 0.65);
  --inset-shadow: inset 0 0px .5rem -.2rem rgb(from var(--text-color) r g b / 0.3);
  --surface-shadow: 0 0 .4rem -.1rem rgb(from var(--text-color) r g b / 0.6);
  --overlay-shadow: 0 4px 12px -4px var(--text-color), 0 2px 6px -4px var(--text-color);
  --opacity-disabled: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --quick-transition-time: 0s;
    --slow-transition-time: 0s;
  }
}

html {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* -- LAYOUT -- */
body {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  margin: 0;
  overflow: auto;

  &:has(#main_nav) {
    padding-top: calc(var(--icon-size) + var(--gapL) * 2);

    &:has(.top-bar) {
      padding-top: calc(var(--icon-size) + var(--gapL) * 2 + var(--input-height) + var(--gapSM) * 2);
    }
  }
}

main {
  flex: 1;
  padding: var(--gapSM);
  display: flex;
  flex-direction: column;
  gap: var(--gapSM);
  overflow: clip;

  &.align-center {
    align-items: center;
  }

  &.padded {
    padding-top: 10vh;
  }

  &:has(.top-bar) {
    padding-top: 0;
  }

  &:has(.bottom-dock) {
    padding-bottom: 0;
  }
}

html {
  background: var(--background-color);
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--text-color);

}
& ::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: var(--border-radius);
  background-color: var(--input-background-focus);
}

& ::-webkit-scrollbar {
  width: 6px;
  background-color: var(--input-background-focus);
      border-radius: var(--border-radius);
  margin-left: var(--gapXS);
}

& ::-webkit-scrollbar-thumb {
  background-color: var(--special-faded);
  border-radius: var(--border-radius);
}

* {
  font-family: var(--font-family);
  box-sizing: border-box;
}

#main_nav {
  display: flex;
  gap: var(--gapS);
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 2;
  background: var(--background-color);
  padding-bottom: var(--gapM);
  box-shadow: var(--nav-shadow);
  padding: var(--gapL);

  & a {
    text-decoration: none;
    height: var(--icon-size);
  }

  & .material-symbols-outlined {
    color: var(--header-color);
    font-size: var(--icon-size);
    font-variation-settings: 'FILL' 0,
      'wght' 600,
      'GRAD' 0,
      'opsz' 24
  }

}

.page-title {
  font-size: var(--font-size-h4);
  height: var(--icon-size);
  position: absolute;
  top: calc(var(--gapL) + 1px);
  left: calc(var(--icon-size) + var(--gapL));
  right: calc(var(--gapS) * 3 + var(--icon-size) * 3);
  line-height: var(--icon-size);
  padding-inline: var(--gapS);
  margin: 0;
  position: fixed;
  z-index: 2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  &:has(+ .page-subtitle) {
    line-height: var(--font-size-h4);
    height: var(--font-size-h4);

    &+.page-subtitle {
      position: absolute;
      top: calc(var(--gapL) + var(--font-size));
      left: calc(var(--icon-size) + var(--gapL));
      right: calc(var(--gapS) * 3 + var(--icon-size) * 3);
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-normal);
      color: var(--text-color-half-faded);
      padding-inline: var(--gapS);
      margin: 0;
      position: fixed;
      z-index: 2;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}


.title {
  margin-block: var(--gapL) var(--gapXL);

  &:has(+.subtitle) {
    margin-bottom: 0;

    &+.subtitle {
      margin-block: var(--gapXS) var(--gapXL);
    }
  }
}

/*  -- SECTION -- */

section {
  margin-top: var(--gapM);

  &:not(:has(.matterTable)) {
    padding-inline: var(--gapM);
  }

  &.divided:first-of-type {
    padding-bottom: var(--gapSM);
  }

  &.divided:not(:first-of-type) {
    border-top: 1px solid var(--outline-color);
    padding-top: var(--gapS);
  }

  &.spacing:not(:first-of-type) {
    margin-top: var(--gapXXL);
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: var(--gapM);
  margin-bottom: var(--gapM);

  & .material-symbols-outlined {
    font-size: var(--icon-size-small);
    font-variation-settings: var(--font-variation-settings-small);
  }

  & h3 {
    margin: 0;
  }
}

/* -- GENERIC ELEMENTS -- */

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  font: inherit;
  color: currentColor;
  width: var(--font-size-small);
  height: var(--font-size-small);
  border: 0.15em solid var(--text-color-half-faded);
  border-radius: 0.15em;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--text-color-half-faded);
  transform-origin: bottom left;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.matterTable {
  display: flex;
  flex-direction: column;

  & .alert {
    margin-inline: auto;
    padding-block: var(--gapM);
  }

  & .matterTableRow {
    display: grid;
    cursor: pointer;
    padding: var(--gapS) var(--gapM);
    border-radius: var(--border-radius);
    gap: var(--gapXS) var(--gapSM);


    &:hover {
      background-color: var(--input-background-focus);
    }

    & .matterNo {
      grid-row: 2;
      grid-column: 1;
      color: var(--text-color-faded);
      min-width: max-content;
      font-weight: var(--font-weight-light);
    }

    & .matterDesc {
      grid-row: 1;
      grid-column: 1 / span 2;
      font-weight: var(--font-weight-bold);
      color: var(--header-color);
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }

    & .client {
      grid-row: 2;
      grid-column: 2;
      color: var(--text-color-faded);
      text-align: end;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: var(--font-size-small);
      align-content: end;
    }
  }
}

.alert {
  margin-inline: auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--header-color);

  & h1 {
    font-size: var(--font-size-h1);
  }

  & h2 {
    font-size: var(--font-size-h2);
  }

  & h3 {
    font-size: var(--font-size-h3);
  }

  & h4 {
    font-size: var(--font-size-h4);
  }
}

.form-row {
  display: flex;
  align-items: center;

  &:not(:first-child) {
    padding-top: var(--gapXL);
  }

  &:not(:has(input+button)) {
    gap: var(--gapM);
  }

  & input:has(+button) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right-width: 0;
    width: min(180px, 60vw);
    text-align: start;
    transition: border-radius var(--quick-transition-time) ease, border-right-width var(--quick-transition-time) ease,
      width var(--quick-transition-time) ease, text-align var(--quick-transition-time) ease, padding var(--quick-transition-time) ease;

    &+button {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      max-width: min(100px, 40vw);
      transition: background-color var(--quick-transition-time) ease, max-width var(--quick-transition-time) ease,
        opacity var(--quick-transition-time) ease, padding var(--quick-transition-time) ease;
    }
  }

  & label {
    position: relative;
    display: flex;
    height: var(--input-height);

    &>span {
      position: absolute;
      background: linear-gradient(var(--background-color) 0,
          var(--background-color) calc(50% - 0.25px),
          var(--input-background) calc(50% + 0.75px),
          var(--input-background) 100%);
      white-space: nowrap;
      top: 0;
      left: var(--gapS);
      padding-inline: var(--gapS);
      font-size: var(--font-size-xsmall);
      transform: translateY(-50%);
      line-height: 1;
      color: var(--text-color-half-faded);
    }

    &:not(:has(span)) {
      height: fit-content;
    }
  }

  &>:first-child:last-child {
    margin-inline: auto;
  }

  &.vertical {
    flex-direction: column;
    align-items: start;
    row-gap: var(--gapS);

    & label {
      font-size: var(--font-size-small);
    }
  }
}


input:not([type="checkbox"]) {
  height: var(--input-height);
  font-size: var(--font-size);
  padding: 0 var(--gapM);
  border: 1px solid var(--outline-color);
  border-radius: var(--border-radius);
  outline: none;
  box-sizing: border-box;
  background-color: var(--input-background);

  &:focus {
    border-color: var(--special);
    box-shadow: none;
    background-color: var(--input-background-focus);
  }

  &::selection {
    background: var(--special);
    color: white;
  }
}

label.checkbox {
  user-select: none;
  --checkbox-size: 1.4rem;
  --checkbox-width: calc(var(--checkbox-size) * 1.65);
  --checkbox-border-radius: calc(var(--checkbox-size) * 0.5);
  --checkbox-padding: calc(var(--checkbox-size) / 6);
  padding-block: var(--gapSM);
  position: relative;
  cursor: pointer;
  max-width: fit-content;

  & input {
    display: none;
  }

  &:before {
    opacity: 1;
    position: absolute;
    background-color: var(--surface);
    content: "";
    height: var(--checkbox-size);
    width: var(--checkbox-width);
    border-radius: var(--checkbox-border-radius);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color var(--slow-transition-time) ease;
    box-shadow: var(--inset-shadow);
  }

  &:after {
    content: "";
    opacity: 1;
    position: absolute;
    background-color: var(--special);
    height: calc(var(--checkbox-size) - var(--checkbox-padding) * 2);
    aspect-ratio: 1;
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    left: var(--checkbox-padding);
    transition: left var(--slow-transition-time) ease, background-color var(--slow-transition-time) ease;
  }

  &:has(input:checked) {
    &:before {
      background-color: var(--special);
    }

    &:after {
      left: calc(var(--checkbox-width) - var(--checkbox-padding) - (var(--checkbox-size) - var(--checkbox-padding) * 2));
      background-color: var(--surface);
    }
  }

  & span {
    margin-inline-start: var(--checkbox-width);
    padding-inline-start: var(--gapM);
  }
}

select {
  height: var(--input-height);
  font-size: var(--font-size);
  padding: 0 var(--gapM);
  border: 1px solid var(--outline-color);
  border-radius: var(--border-radius);
  outline: none;
  background-color: var(--input-background);
  box-sizing: border-box;
}

.error {
  color: var(--error-color);
}

#spinner, #loginSpinner {
  &.spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--overlay-background);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: wait;
  }

  & .spinner-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      
      & .loader {
        border: 8px solid var(--special-extra-faded);
        border-top: 8px solid var(--special-variant);
        border-radius: 50%;
        width: 40px;
        height: 40px;
        animation: spin 1s linear infinite;
        background: transparent;
        margin: auto;
        transform-origin: 50% 50%;
      }
  }
}

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

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



#codeForm {
  margin: 0;
}

/* login page */
#codeForm label .material-symbols-outlined {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: fit-content;
  right: var(--gapS);
  align-items: center;
  justify-content: center;
  height: var(--input-height);
  font-size: var(--icon-size-small);
  font-variation-settings: var(--font-variation-settings-small);
  cursor: pointer;
}

main.loaded:not(:has(#code:focus)) {
  & #codeForm {
    position: relative;

    input {
      border-top-right-radius: var(--border-radius);
      border-bottom-right-radius: var(--border-radius);
      border-right-width: 1px;
      width: 10ch;
      text-align: center;
      color: var(--text-color-faded);
      pointer-events: none;
      cursor: default;
      padding-inline-end: 4ch;
      height: var(--input-height);
    }

    & button {
      opacity: 0;
      max-width: 0;
      pointer-events: none;
      padding-inline: 0;
    }

    & label .material-symbols-outlined {
      display: flex;
    }
  }
}

/* documents page */
.top-bar {
  display: flex;
  flex-direction: column;
  box-shadow: var(--nav-shadow);
  gap: var(--gapS);
  padding: var(--gapSM);
  position: fixed;
  top: calc(var(--icon-size) + var(--gapL) * 2);
  background-color: var(--background-color);
  z-index: 1;
  left: 0;
  right: 0;

  & .row {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: var(--gapS);
    flex-direction: row;
    align-items: center;
  }

  
  & .doc-form {
    display: flex;
    gap: var(--gapS);
    align-items: center;
    position: relative;
    --icon-width: 2rem;
    flex: 1;
    
    & .search-icon {
      position: absolute;
      left: var(--gapXS);
      top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      color: var(--text-color-half-faded);
      font-size: var(--icon-size-small);
      font-variation-settings: var(--font-variation-settings-small);
      height: var(--input-height);
      width: var(--icon-width);
      pointer-events: none;
    }

    & #filterInput {
      padding-left: var(--icon-width);
      height: var(--input-height);
      width: 100%;
      max-width: 280px;
    }
    
  }
  
  & .checkbox {
    display: flex;
    align-items: center;
    gap: var(--gapXS);
    margin-inline: var(--gapXS) var(--gapS);
  }

  & .file-type-filter {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: start;
    margin-inline: var(--gapXS) var(--gapXS);
    font-size: var(--font-size-small);
    gap: 0px;

    & label {
      display: flex;
      align-items: center;
      flex-direction: row;
      height: var(--font-size-large);
    }

    & #allFileTypesLabel {
      padding-left: var(--gapL);
      background-color: var(--background-color);
      height: var(--icon-size);
      border-radius: var(--large-border-radius) 0 0 var(--large-border-radius);
      box-shadow: var(--inset-shadow);
      font-weight: var(--font-weight-semi-bold);
    }

    & #allFileTypesLabel.checked {
      padding-right: var(--gapL);
      border-radius: var(--large-border-radius);
    }

    & .specific-file-types {
      display: flex;
      flex-direction: row;
      gap: var(--gapS);
      align-items: center;
      padding: var(--gapXS) var(--gapL) var(--gapXS) var(--gapS);
      margin-right: var(--gaps);
      background-color: var(--special-faded-variant);
      height: var(--icon-size);
      box-shadow: var(--inset-shadow);
      border-radius: 0 var(--large-border-radius) var(--large-border-radius) 0;


      &.hidden {
          display: none;
      }

      & label {
          background-color: var(--background-color);
          padding: var(--gapXXS);
          border-radius: var(--overlay-border-radius);
          box-shadow: var(--nav-shadow);
      }
    }
  }

  & .global-search-filter {
    display: none;
    align-items: center;
    justify-content: start;
    gap: var(--gapS);
    margin-inline: var(--gapXS) var(--gapS);
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-semi-bold);

    &.visible {
      display: flex;
    }

    & .search-section {
      height: var(--input-height);
      background-color: var(--input-background);
      padding-inline: var(--gapXS);
      display: flex;
      align-items: center;
      border: 1px solid var(--outline-color);
      border-radius: var(--border-radius);
      cursor: text;
      position: relative;
      gap: var(--gapS);
      width: 90vw;

      & input {
        border: none;
        flex: 1;
        background-color: transparent;
        color: var(--on-input-background);
        height: 100%;
        padding: 0;
      }

      & .material-symbols-outlined {
        font-size: var(--icon-size-small);
        font-variation-settings: var(--font-variation-settings-small);
      }
    }
  }
  
}

.documents-container {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin-block: var(--gapM) 0;

  & .folder {
    user-select: none !important;
    --input-background-focus: var(--surface);

    & .addSubfolder,
    .confirm,
    .cancel {
      border-radius: var(--inner-border-radius);

      &.addSubfolder {
        margin-inline-start: auto;
        opacity: 0;
        pointer-events: none;
      }

      &:hover {
        background-color: var(--surface);
      }
    }

    &:has(input) :is(.subFilesCount, .addSubfolder) {
      display: none;
    }

    &:hover .addSubfolder {
      opacity: 1 !important;
      pointer-events: all;
    }

    &:has(+ul.hide) .folder_open {
      display: none;
    }

    &:not(:has(+ul.hide)) .folder_closed {
      display: none;
    }

    & .material-symbols-outlined {
      position: relative;
      font-size: var(--icon-size-medium);
      font-variation-settings: var(--font-variation-settings-medium);

      &.hover {
        position: absolute;
        opacity: 0;
        color: var(--special);
        font-variation-settings: 'FILL' 1
      }
    }

    &:hover .hover {
      opacity: 1;
    }
  }

  & li:has(>.folder):has(.document-item input:checked)>.folder>.material-symbols-outlined:not(.addSubfolder) {
    &::after {
      content: "";
      position: absolute;
      right: calc(-1 * var(--gapXS));
      top: 0;
      width: calc(var(--font-size-large) / 2);
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: var(--special-variant);
      border: 2px solid var(--background-color);
    }
  }


  &>li {
    margin-bottom: var(--gapXXS);
    padding-right: var(--gapM) !important;
  }

  &>.hide {
    display: none;
  }

  & ul {
    list-style-type: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gapXXS);
    position: relative;

    &.hide,
    & .hide {
      &:not(:has(.selected)) {
        display: none;
      }
    }
  }

  & li,
  label {
    padding: 0 0 0 var(--gapM);
    border-radius: var(--border-radius);

    & .folder {
      padding-block: var(--gapS);
      align-items: center;
      display: flex;
      gap: var(--gapM);
      cursor: pointer;
      font-weight: var(--font-weight-bold);
    }
  }

  &#folderTree, &#createDocFolderTree {
    inset: 100% 0 auto 0;
    border: 2px solid var(--special);
    box-shadow: var(--overlay-shadow);
    border-radius: var(--overlay-border-radius);
    position: absolute;
    display: none;
    background: var(--background-color);
    max-height: 50vh;
    padding-block: var(--gapM);

    & input {
      display: none;
    }

    & li {
      padding: 0 !important;
      padding-inline: var(--gapS) !important;
      box-shadow: none !important;
      background: transparent !important;

      &.expanded>.folder .arrow-down {
        transform: scaleY(-1);
      }

      & li {
        padding-inline-end: 0 !important;

      }

      &.selected .folder {
        background-color: var(--input-background-focus) !important;
      }
    }

    &.search {
      li {
        &:not(.show) {
          &:not(:has(.show)) {
            display: none;
          }

          &>.folder {
            display: none;
          }

        }
      }

      & ul:has(.show) {
        display: block
      }

      & .arrow-down {
        display: none;
      }
    }

    & ul:after {
      left: 2px !important;
      bottom: 0 !important;
    }

    & .folder {
      list-style: none;
      padding: var(--gapXS);
      border-radius: var(--inner-border-radius);
      height: calc(var(--icon-size-medium) + var(--gapXS));

      & .folder-icon {
        margin-inline-start: var(--gapXS);
      }

      &:hover:not(:has(.arrow-down:hover, input:checked)) {
        background-color: var(--input-background-focus) !important;
      }

      &:has(input:checked) {
        background-color: var(--special-faded);
      }
    }

    & .folder:has(> input:checked) {
      background-color: var(--special-faded);
      box-shadow: var(--inset-shadow);
      color: var(--on-special);
      --text-color-half-faded: var(--on-special);
    }

    & .material-symbols-outlined {
      font-size: var(--icon-size-small);
    }

    & .arrow-down {
      margin-inline: auto var(--gapS);
      border-radius: var(--inner-border-radius);

      font-size: var(--icon-size-medium);

      &:hover {
        background-color: var(--input-background-focus);
      }
    }
  }
}

body:has(#selectedContainer.moveCopy) {
  overflow: clip;

  &:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 0.3);
    z-index: 999;
    transition: background-color var(--slow-transition-time) ease;

    @starting-style {
      background-color: transparent;
    }
  }
}

.bottom-dock{
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  margin-top: auto;
  border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;


  & .bottom-options {
    display: flex;
    height: var(--input-height);
    justify-content: space-between;
    margin-bottom: var(--gapSM);
    transition: opacity var(--quick-transition-time) ease;

    .addContainer {
      display: flex;
      align-items: center;
      position: relative;
      border-radius: var(--large-border-radius);
      box-shadow: var(--surface-shadow);
      background-color: var(--background-color);

    
      & .doc-action {
        height: var(--input-height);
        width: var(--input-height);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: var(--inner-border-radius);
        cursor: pointer;
    
        &:hover {
          background-color: var(--surface);
        }
    
        &.hover {
          position: absolute;
          opacity: 0;
          color: var(--special);
          font-variation-settings: 'FILL' 1
        }
      }
    
      &:hover {
        z-index: 1;
        border-radius: var(--large-border-radius);

    
        & .addDropdown {
          opacity: 1;
          pointer-events: all;
        }
    
        &:not(:has(div:hover)) .hover {
          opacity: 1;
          border-radius: var(--large-border-radius);

        }
      }
    
      & .addDropdown {
        position: absolute;
        left: unset;
        right: 0; 
        bottom: 100%;
        top: unset;
        background: var(--background-color);
        border-radius: var(--border-radius);
        box-shadow: var(--surface-shadow);
        border: 1px solid var(--special);
        padding: var(--gapXS);
        opacity: 0;
        pointer-events: none;
        transition: opacity var(--quick-transition-time) ease;
        margin-bottom: var(--gapXS); 
          
        & .row {
          text-wrap: nowrap;
          min-width: max-content;
          font-weight: var(--font-weight-semi-bold);
          display: flex;
          align-items: center;
          gap: var(--gapS);
          padding-inline: 0 var(--gapL);
          justify-content: start;
          border-radius: var(--inner-border-radius);
          cursor: pointer;
          transition: background-color var(--quick-transition-time) ease;
    
          &:hover {
            background-color: var(--surface);
          }
        }
    
        &:after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          top: 100%;
          height: var(--gapXS);
          z-index: -1;
        }
      }
    }

    & .file-view-checkbox {
      padding: var(--gapSM);
      display: flex;
      position: sticky;
      align-items: center;
      margin-left: var(--gapXS);
      gap: var(--gapXS);
      border-radius: var(--large-border-radius);
      box-shadow: var(--surface-shadow);
      background-color: var(--background-color);


      &:hover {
        background-color: var(--surface);
      }
    }
  }

  & #selectedContainer {
    position: relative;
    min-height: 43px;
    background-color: var(--background-color);
    box-shadow: var(--overlay-shadow);
    overflow: auto;
    border: 2px solid var(--special);
    border-width: 2px 2px 0 2px;
    border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
    transition: ease, min-height var(--slow-transition-time) ease, transform var(--slow-transition-time) ease;
    display: flex;
    flex-direction: column;

    /* Default selected files view */
    & .default-view {
      & .title-row {
        display: flex;
        align-items: center;
        gap: var(--gapS);
        padding: var(--gapM) var(--gapSM);
        position: sticky;
        background-color: var(--background-color);
        border-bottom: 1px solid var(--special);
        margin: 0;
        top: 0;
        left: 0;
        right: 0;
        border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;

        & .material-symbols-outlined {
          font-size: var(--icon-size-medium);
          font-variation-settings: var(--font-variation-settings-medium);

          &.hover {
            position: absolute;
            opacity: 0;
            color: var(--special);
            background-color: rgb(from var(--background-color) r g b / 0.7);
            color: var(--error-color);
            border-radius: var(--inner-border-radius);
            cursor: pointer;

            &:hover {
              background-color: var(--error-faded);
            }
          }
        }

        & h4 {
          margin-block: 0;
          display: flex;
          gap: 0.3em;
        }

        & .doc-action-bar {
          display: flex;
          left: 0;
          right: 0;
          margin-inline-start: auto;
          gap: var(--gapS);

          & .doc-action {
            padding: var(--gapS);
            background: var(--special-transparent);
            display: flex;
            align-items: center;
            gap: var(--gapXS);
            cursor: pointer;
            border-radius: var(--border-radius);
            font-size: var(--icon-size-small);
            font-variation-settings: var(--font-variation-settings-small);

            &:hover {
              background-color: var(--special-extra-faded);
            }

            &.compose-only.disabled {
              opacity: var(--opacity-disabled);
              cursor: default;
            }
          }
        }
      }

      &:hover .material-symbols-outlined.hover {
        opacity: 1;
      }

      & #selectedList {
        margin: 0;
        padding: var(--gapS) var(--gapM);
        list-style: none;
        display: flex;
        flex-direction: column;
        transition: padding var(--slow-transition-time) ease, max-height var(--slow-transition-time) ease, min-height var(--slow-transition-time) ease;
        max-height: max(20vh, 160px);
        overflow: auto;


        & li {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: var(--gapXS) 0 var(--gapXS) var(--gapS);
          line-height: 1;
          font-size: var(--font-size-small);
          max-height: 30px;

          &:not(:last-child) {
            border-bottom: 1px solid rgb(from var(--outline-color) r b g /0.5);
          }

          & .material-symbols-outlined {
            opacity: 0;
            font-size: var(--icon-size-small);
            font-variation-settings: var(--font-variation-settings-small);
            border-radius: var(--inner-border-radius);
            transition: opacity var(--quick-transition-time) ease, background-color var(--quick-transition-time) ease, color var(--quick-transition-time) ease;
            cursor: pointer;

            &:hover {
              background-color: var(--special-transparent);
            }
          }

          &:hover .material-symbols-outlined {
            opacity: 1;
          }
        }

        &:has(>li:first-child:last-child) {
          min-height: 32px;
          max-height: 32px;
        }
      }
    }

    /* Hide default view when drawer is empty */
    &:has(.default-view #selectedList:empty) {
      transform: translateY(100%);
      min-height: 0;
      border-width: 0;
      max-height: 0;
      overflow: hidden;

      & .default-view #selectedList {
        min-height: 0;
        max-height: 0;
        padding-block: 0;
      }
    }

    & .drawer {
      display: none;
      position: relative;
      overflow: visible;
      flex-direction: column;
      gap: var(--gapM);
      flex: 1;

      & .drawer-header {
        padding: var(--gapL) var(--gapM);
        display: flex;
        align-items: center;
        gap: var(--gapS);
        position: sticky;
        background-color: var(--background-color);
        border-bottom: 1px solid var(--special);
        border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
        margin: 0;
        top: 0;
        left: 0;
        right: 0;

        & .material-symbols-outlined {
          font-size: var(--icon-size-medium);
          font-variation-settings: var(--font-variation-settings-medium);
        }

        & h3 {
          margin: 0;
        }
      }

      & .drawer-content {
        padding: var(--gapM);
        flex: 1;
        transition: max-height var(--slow-transition-time) ease;
        display: flex;
        flex-direction: column;
        width: max-content;
        margin-inline: auto;
        overflow: auto;
        max-height: 85vh;

        & h5 {
          margin: var(--gapS) 0;
        }
      }

      & .drawer-footer {
        margin-top: auto;
        display: flex;
        flex-direction: column;
        gap: var(--gapL);
        border-top: 1px solid var(--outline-color);
        padding: var(--gapM);
        transition: opacity var(--slow-transition-time) ease;

        & .drawer-actions {
          display: flex;
          flex-direction: row;
          justify-content: flex-end;
          gap: var(--gapM);
        }
      }
    }

    /* Active drawer state */
    &.drawer-active {
      min-height: 75vh;
      z-index: 1000;

      & .default-view{
        display: none;
      }

      & .drawer {
        display: flex;

        & .drawer-content {
          max-height: 75vh;

          @starting-style {
            max-height: 0;
          }
        }

        & .drawer-footer {
          opacity: 1;

          @starting-style {
            opacity: 0;
          }
        }
      }
    }
  }
}
/* Backdrop for active drawer */
body:has(#selectedContainer.drawer-active) {
  overflow: clip;

  &:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0 0 0 / 0.3);
    z-index: 999;
    transition: background-color var(--slow-transition-time) ease;

    @starting-style {
      background-color: transparent;
    }
  }
}

body:has(#selectedContainer.drawer-active) .bottom-options {
  display: none;
}

/* Move/Copy specific content styles */
#moveCopy {
  .drawer-header {
    display: none !important;
  }

  &.copy {
    .drawer-header.copy {
      display: flex !important;
    }
  }

  &.move {
    .drawer-header.move {
      display: flex !important;
    }
  }

  & .drawer-content {
    & .move-copy-selected-filelist {
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
      overflow:auto;
      max-height: 50vh;

      & li {
        list-style: none;
        display: flex;
        align-items: center;
        padding-right:var(--gapXS);

        & label {
          flex: 1;
          display: flex;
          align-items: center;
          gap: var(--gapM);
          cursor: pointer;
          position: relative;
          padding-block: var(--gapS);

          & input {
            flex: 1;
            max-width: unset;
            background: transparent;
            border: none;
            pointer-events: none;
            border-radius: 0;
            height: var(--icon-size-small);
            padding: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            &:focus {
              pointer-events: all;
            }
          }

          & .rename-btn {
            cursor: pointer;
            border-radius: var(--inner-border-radius);
          }

          &::after {
            content: "";
            position: absolute;
            inset: calc(100% - var(--gapS)) calc(var(--gapM) + var(--icon-size-small)) 0 calc(var(--gapM) + var(--icon-size-small));
            height: 1px;
            background: linear-gradient(to right, var(--special) 0, var(--special) 33.33%, var(--special-extra-faded) 33.33%, var(--special-extra-faded) 66.66%, transparent 66.66%, transparent 100%);
            background-size: 300% 100%;
            background-position: right center;
            transition: background-position var(--slow-transition-time) ease;
          }

          &:hover::after {
            background-position: center center;
          }

          &:has(input:focus)::after {
            background-position: left center;
          }
        }

        &:hover {
          & input:after {
            background-position: center center;
          }

          & .rename-btn {
            background-color: var(--special-transparent);
          }
        }

        & .material-symbols-outlined {
          font-size: var(--icon-size-small);
          font-variation-settings: var(--font-variation-settings-small);
        }
      }
    }

    & .search-section {
      height: var(--input-height);
      background-color: var(--input-background);
      padding-inline: var(--gapXS);
      display: flex;
      align-items: center;
      border: 1px solid var(--outline-color);
      border-radius: var(--border-radius);
      margin-bottom: var(--gapL);
      cursor: pointer;
      width: min(36ch, calc(100vw - 2 * var(--gapL) - 2 * var(--gapM)));
      position: relative;

      & input {
        display: none;
        border: none;
        flex: 1;
        background-color: transparent;
        color: var(--on-input-background);

        &.show {
          display: block;
        }

        &#folderInput {
          display: block;
        }
      }

      & #matterList,
      #folderTree {
        position: absolute;
        inset: 100% 0 auto 0;
        margin-top: var(--gapS);
        background: var(--background-color);
        border: 1px solid var(--outline-color);
        box-shadow: var(--nav-shadow);
        border-radius: var(--border-radius);
        max-height: 30vh;
        overflow: auto;
        display: none;
        z-index: 10;

        & li {
          padding: var(--gapSM) var(--gapM);
          cursor: pointer;

          &:hover {
            background-color: var(--input-background-focus);
          }
        }
      }

      &#matterSearchSection {
        & .matterTitle {
          display: flex;
          align-items: center;
          gap: var(--gapS);
        }

        &:has(.show) {
          cursor: auto;

          & .matterTitle {
            display: none;
          }

          & .arrow {
            display: none;
          }

          & .close,
          .search {
            display: block;
          }
        }

        & .search {
          display: none;
        }

        & .close {
          display: none;
          cursor: pointer;
        }
      }

      &#folderSearchSection.browse {
        & #folderTree {
          display: block;
        }
      }
    }
  }

  & .drawer-footer {
    & .move-copy-options {
      display: flex;
      flex-direction: column;
      gap: var(--gapM);

      & .move-copy-option {
        display: flex;
        flex-direction: row;
        gap: var(--gapS);
        align-items: center;
        cursor: pointer;
      }
    }

    & label {
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
}

/* Attach Files specific content styles */
#attachFiles {
  & .drawer-content {

    & #attachSelectedFilesHeader {
      display: flex;
      justify-content: space-between;
      align-items: center;

      & h5 {
        margin: var(--gapS) 0;
      }
    }

    & .move-copy-selected-filelist {
      padding: 0;
      margin-top: 0;
      margin-bottom: 0;
      max-height: 50vh;
      overflow: auto;

      & li {
        list-style: none;
        display: flex;
        align-items: center;
        padding: var(--gapS) 0;
        gap: var(--gapM);
        border-bottom: 1px solid rgb(from var(--outline-color) r b g /0.5);


        & label.attach-files-edit-filename {
          flex: 1;
          display: flex;
          align-items: center;
          gap: var(--gapM);
          cursor: pointer;
          position: relative;
          height: var(--icon-size-small);

          & input.newFileName {
            flex: 1;
            max-width: unset;
            background: transparent;
            border: none;
            pointer-events: none;
            border-radius: 0;
            height: var(--icon-size-small);
            padding: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: var(--font-size-small);

            &:focus {
              pointer-events: all;
            }
          }

          & .material-symbols-outlined {
            font-size: var(--icon-size-small);
            font-variation-settings: var(--font-variation-settings-small);
            cursor: pointer;
            border-radius: var(--inner-border-radius);

            &:hover:not(.docs) {
              background-color: var(--special-transparent);
            }

            &.docs {
              cursor: default;
            }

            &.error:hover {
              background-color: var(--error-faded);
            }
          }
        }

        /* Hide rename and close buttons by default */
        & .rename-btn,
        & .close-file-btn {
          display: none;
        }

        &:hover {
          & .material-symbols-outlined {

            &.rename-btn,
            &.close-file-btn {
              display: block;
            }
          }
        }

        & .material-symbols-outlined {
          font-size: var(--icon-size-small);
          font-variation-settings: var(--font-variation-settings-small);
          cursor: pointer;
          border-radius: var(--inner-border-radius);

          &:hover:not(.docs) {
            background-color: var(--special-transparent);
          }

          & .docs {
            cursor: default;
          }

          &.error:hover {
            background-color: var(--error-faded);
          }
        }

        &:has(.convert-pdf-checkbox:disabled) {
          &:after {
            content: "-";
            width: 14px;
            margin-inline: var(--gapSM);
            text-align: center;
          }

          &:has(.convert-pdf-checkbox.checked):after {
            content: "✓";
          }
        }

        & .convert-pdf-checkbox {

          margin-right: var(--gapSM);
          cursor: pointer;

          &:disabled {
            display: none;
          }

          &:checked {
            accent-color: var(--special-faded);
          }
        }
      }
    }

    & #convertAll {
      display: flex;
      align-items: center;
      gap: var(--gapS);
      cursor: pointer;
      align-self: end;
      font-size: var(--font-size-small);
      font-weight: var(--font-weight-semi-bold);
      padding-top: var(--gapM);

      & #convertAllCheckbox {
        margin-right: var(--gapSM);
        cursor: pointer;

        &:checked {
          accent-color: var(--special-faded);
        }
      }
    }

    & .search-section {
      height: var(--input-height);
      background-color: var(--input-background);
      padding-inline: var(--gapXS);
      display: flex;
      align-items: center;
      border: 1px solid var(--outline-color);
      border-radius: var(--border-radius);
      margin-bottom: var(--gapL);
      cursor: text;
      width: min(36ch, calc(100vw - 2 * var(--gapL) - 2 * var(--gapM)));
      position: relative;
      gap: var(--gapS);

      & input {
        border: none;
        flex: 1;
        background-color: transparent;
        color: var(--on-input-background);
        height: 100%;
        padding: 0;
      }

      & .material-symbols-outlined {
        font-size: var(--icon-size-small);
        font-variation-settings: var(--font-variation-settings-small);
      }
    }

    & .checkbox {
      margin-block: var(--gapM);
    }

    & #zipAttachFilesName {
      transition: opacity var(--slow-transition-time) ease, max-height var(--slow-transition-time) ease;
      overflow: hidden;
    }

    &:not(:has(#zipAttachFiles:checked)) #zipAttachFilesName {
      opacity: 0;
      max-height: 0;
      margin-bottom: 0;
    }

    &:not(:has(#attachFilesSelectedList input[type="checkbox"]:not(:disabled))) #convertAll {
      display: none;
    }
  }
}

/*main:has(#hideFolders:checked) {
  & .folder {
    display: none;
  }

  & li {
    padding-block: 0 !important;

    & li {
      padding-inline: 0;
    }
  }

  & ul.hide {
    display: block;
  }
}*/

main:not(:has(.document-item input:checked)) .fileSelected {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

main:not(:has(#hideFolders:checked)) {
  & .documents-container {

    &>li:has(>ul:not(.hide)) {
      box-shadow: var(--inset-shadow);
      background-color: var(--input-background-focus);
      --background-color: var(--input-background-focus);
    }

    & ul:after {
      content: "";
      position: absolute;
      left: 0;
      top: 2px;
      bottom: 6px;
      width: 2px;
      border-radius: 1px;
      background: var(--special-extra-faded);
    }
  }

}

.context-menu {
  display: none;
  position: absolute;
  z-index: 1000;
  background-color: var(--input-background);
  border: 1px solid var(--outline-color);
  box-shadow: var(--nav-shadow);
  border-radius: var(--border-radius);
  font-size: var(--font-size-small);
  padding: var(--gapS);

  & ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gapXXS);

    & li {
      cursor: pointer;
      padding: var(--gapSM) var(--gapSM) var(--gapSM) var(--gapXS);
      display: flex;
      align-items: center;
      gap: var(--gapXS);
      text-wrap: nowrap;
      border-radius: var(--inner-border-radius);

      &:hover {
        background-color: var(--surface);
      }

      & .material-symbols-outlined {
        font-size: var(--icon-size-small);
        font-variation-settings: 'FILL' 0,
          'wght' 400,
          'GRAD' 200,
          'opsz' 20;
        margin-right: var(--gapXS);
      }

      &.compose-only.disabled {
        opacity: var(--opacity-disabled);
        cursor: default;
      }
    }
  }
}

.move-copy-selected-filelist li,
.document-item {

  & .notes,
  .table,
  .mail,
  .stickyNote,
  .sheets {
    display: none;

    &:is(.mail, .sheets) {
      font-size: var(--icon-size-small-wide) !important;
      width: var(--icon-size-small) !important;
      padding-inline: 1px;
    }
  }

  &:is([id$=".xls"], [id$=".xlsx"], [data-id$=".xls"], [data-id$=".xlsx"]) {
    & .article {
      display: none;
    }

    & .table {
      display: block;
    }
  }

  &:is([id$=".txt"], [data-id$=".txt"]) {
    & .article {
      display: none;
    }

    & .notes {
      display: block;
    }
  }

  &:is([id$=".msg"], [data-id$=".msg"]) {
    & .article {
      display: none;
    }

    & .mail {
      display: block;
    }
  }

  &:is([id$=".pdf"], [data-id$=".pdf"]) {
    & .article {
      display: none;
    }

    & .stickyNote {
      display: block;
    }
  }

  &:is([id$=".ppt"], [id$=".pptx"], [data-id$=".ppt"], [data-id$=".pptx"]) {
    & .article {
      display: none;
    }

    & .sheets {
      display: block;
    }
  }
}

.document-item {
  margin-inline-start: var(--gapS);
  padding: var(--gapS) var(--gapS) var(--gapS) var(--gapXS) !important;
  display: flex;
  font-size: var(--font-size-small);
  align-items: center;
  gap: var(--gapS);
  transition: background-color 0.05s ease;
  position: relative;
  height: var(--table-line-height);
  user-select: none;

  &:hover {
    background-color: var(--surface);
    cursor: pointer;
  }

  & .material-symbols-outlined {
    font-size: var(--icon-size-small);
    font-variation-settings: var(--font-variation-settings-small);
  }

  &:last-child {
    margin-bottom: var(--gapS);
  }

  & .doc-select {
    display: none;
    font-size: var(--font-size-small);
    height: 1rem;
  }

  & .doc-date {
    text-align: end;
    text-wrap: nowrap;
    color: var(--text-color-half-faded);
    font-family: monospace;
    letter-spacing: -0.05em;
    max-width: 80%;
    min-width: max-content;
    transition: max-width var(--quick-transition-time) ease;
    overflow: clip;
    margin-inline-start: auto;
  }

  & .doc-name {
    text-wrap: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    transition: opacity var(--quick-transition-time) ease;
    position: relative;
  }

  & .rename-btn {
    font-size: var(--font-size-large);
    display: none;
    border-radius: var(--inner-border-radius);
    height: var(--icon-size-small);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;

    &:hover {
      background-color: var(--special-transparent);
    }
  }

  &:has(.rename-form.show) {
    pointer-events: none;

    & .doc-name {
      flex: 1;
      height: 100%;

      &>span {
        opacity: 0;
        display: none;
      }
    }

    & .rename-btn {
      display: none;
    }

    & .doc-date {
      max-width: 0;
      min-width: 0;
    }

    & .rename-form {
      pointer-events: all;
    }

    & .save-btn,
    .cancel-btn {
      border-radius: var(--inner-border-radius);

      &:hover {
        background-color: var(--special-transparent);
      }
    }
  }



  &:hover .rename-btn {
    display: flex;
  }

  &:has(input:checked) {
    background-color: var(--special-faded);
    box-shadow: var(--inset-shadow);
    color: var(--on-special);
    --text-color-half-faded: var(--on-special);
  }

  &.timestampFirst {
    & .doc-name {
      order: 1;
    }

    & .rename-btn {
      order: 2;
    }

    & .doc-date {
      text-align: start;
      flex: 0;
      margin-inline-start: 0;
    }
  }

  & .rename-form {
    gap: var(--gapXS);
    position: absolute;
    display: none;
    width: 100%;

    &.show {
      opacity: 1;
      display: flex;
    }

    & .rename-input {
      flex: 1;
      height: unset;
      display: flex;
      font-size: var(--font-size-small);

      &:focus {
        background-color: var(--background-color) !important;
      }
    }

    & button {
      margin-left: var(--gapXS);
      cursor: pointer;
      height: 100%;
      padding: 0 !important;
    }
  }

}

/* move/copy file page*/
#selectedFilesContainer {
  max-height: max(20vh, 160px);
  background-color: var(--background-color);
  box-shadow: var(--overlay-shadow);
  overflow: auto;
  border-radius: var(--border-radius);
  width: 100%;

  & .title-row {
    display: flex;
    align-items: center;
    gap: var(--gapS);
    padding: var(--gapS) var(--gapSM);
    position: sticky;
    background-color: var(--background-color);
    box-shadow: var(--nav-shadow);
    margin: 0;
    top: 0;
    left: 0;
    right: 0;

    & .material-symbols-outlined {
      font-size: var(--icon-size-medium);
      font-variation-settings: var(--font-variation-settings-medium);
    }
  }

  & ul {
    margin: 0;
    padding: var(--gapM) var(--gapM);
    list-style: none;
    display: flex;
    flex-direction: column;
  }

  &:has(ul:empty) {
    display: none;
  }

  & li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--gapS) 0 var(--gapS) var(--gapS);
    line-height: 1;
    font-size: var(--font-size-small);
    text-wrap: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;

    &:not(:last-child) {
      border-bottom: 1px solid rgb(from var(--outline-color) r b g /0.5);
    }
  }
}

#moveCopyTitle {
  text-wrap: nowrap;
  display: flex;
  align-items: center;
}

/* modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--special-transparent);
  z-index: 1000;
  align-items: center;
  justify-content: center;

  &.show {
    display: flex;
  }
  
  &#openFileDialog {
    z-index: 10000 !important;
  }

  & .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--gapS);
    
    & .material-symbols-outlined {
      font-size: var(--icon-size-medium);
      font-variation-settings: var(--font-variation-settings-medium);

      &:hover {
        cursor: pointer;
        background-color: var(--input-background-focus);
        border-radius: var(--inner-border-radius);
      }
    }
    
    & h3 {
      margin: 0;
    }
  }
  
  & .modal-content {
    display: flex;
    flex-direction: column;
    width: 90%;
    min-width: 0; /* Prevents flex items from overflowing */
    max-width: 600px; /* optional: prevents it from being too wide */
    max-height: 90vh; /* prevents overflow on small screens */
    background-color: var(--background-color);
    padding: var(--gapXL);
    border: 1px solid var(--outline-color);
    border-radius: var(--border-radius);
    gap: var(--gapXL);
    box-shadow: var(--overlay-shadow);
    pointer-events: auto;
    cursor: default;
    overflow: auto;

    & h3 {
      margin-block: 0;
    }
    
    & .modal-button-container {
      display: flex;
      flex-direction: row;
      margin-inline-start: auto;
      margin-top: var(--gapS);
      margin-right: var(--gapXS);
      gap: var(--gapM);
    }
  }
  &#errorMessageBox, &#infoMessageBox {
    & .modal-content {
      max-width: 80%;
    }
  }
}

/* Prevent body scroll when any modal is visible */
body:has(.modal.show) {
  overflow: hidden;
}

/* CreateDocument popup */

#createDocumentPopup {
  & .create-doc-modal {
    display: flex;
    flex-direction: column;
    border: 2px solid var(--special);
    border-width: 2px;
    border-radius: var(--overlay-border-radius);
    padding: var(--gapML);

    &.modal{
      background-color: var(--background-color);
      padding: var(--gapXL);
      width: min(90vw, 500px);
      padding-top: 0;
    }

    & #createDocContent {
      display: flex;
      flex-direction: column;
      overflow: auto;
      width: 100%;
      
      & h5 {
        margin: var(--gapS) 0;
      }
      
      & .template-section {
        display: flex;
        flex-direction: column;
        margin-bottom: var(--gapL);
        
        & .checkbox {
          display: flex;
          flex-direction: row;
          
          & label.checkbox {
            cursor: pointer;
            font-size: var(--font-size-small) !important;
          }
        }
      }
      
      & .search-section {
        height: var(--input-height);
        background-color: var(--input-background);
        padding-inline: var(--gapXS);
        display: flex;
        align-items: center;
        border: 1px solid var(--outline-color);
        border-radius: var(--border-radius);
        margin-bottom: var(--gapL);
        margin-right: var(--gapXS);
        cursor: pointer;
        position: relative;
        flex-wrap: wrap;
        
        &.subject-input {
          cursor: text;
          
          & input {
            pointer-events: all !important;
          }
        }
        
        & input {
          border: none;
          flex: 1;
          background-color: transparent;
          color: var(--on-input-background);
          display: block;
          
          &:not(.show) {
            pointer-events: none;
          }
          
          &#folderInput {
            display: block;
          }
        }
        
        & #templateList,
        #createDocFolderTree,
        #templateSignerList {
          position: absolute;
          inset: 100% 0 auto 0;
          margin-top: var(--gapS);
          background: var(--background-color);
          border: 1px solid var(--outline-color);
          box-shadow: var(--nav-shadow);
          border-radius: var(--border-radius);
          max-height: 30vh;
          overflow: auto;
          display: none;
          z-index: 10;
          
          & li {
            padding: var(--gapSM) var(--gapM);
            cursor: pointer;
            
            & input[type="radio"] {
              display: none;
            }
            
            &:hover {
              background-color: var(--input-background-focus);
            }
          }
        }
      }
      
      & #templateRecipientList {
        padding: 0;
        margin-top: 0;
        margin-right: var(--gapXS);
        max-height: 30vh;
        overflow: auto;
        display: flex;
        flex-direction: column;
        
        & li {
          list-style: none;
          padding: var(--gapS) var(--gapS);
          cursor: pointer;
          border-radius: var(--border-radius);
          transition: background-color 0.2s ease;
          
          & .recipientListItem{
            display: flex;
            align-items: center;
            gap: var(--gaps);
            font-size: var(--font-size-small);
            flex-wrap: nowrap;
            
            & .material-symbols-outlined {
              font-size: var(--icon-size-small);
              flex-shrink: 0;
            }
            
            & .recipient{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              min-width: 0;
            }
          }
          
          &:hover {
            background-color: var(--input-background-focus);
          }
          
          &.selected {
            background-color: var(--special-transparent);
            
            &:hover {
              background-color: var(--input-background-focus);
            }
          }
        }
      }
      
      & input {
        padding: 0;
        margin-left: var(--gapS);
        margin-right: var(--gapXS);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        
        &:focus {
          pointer-events: all;
        }
      }
      
      & .create-template-btn-container {
        display: flex;
        flex-direction: row;
        justify-content: end;
        gap: var(--gapM);
        margin-top: var(--gapL);
      }
    }
  }
}
  
  /* buttons */
  
  button {
    height: var(--button-height);
    padding: var(--button-padding);
    border: none;
    border-radius: var(--border-radius);
    background-color: var(--special);
    color: var(--on-special);
    cursor: pointer;
    transition: background-color var(--quick-transition-time) ease;
    display: flex;
  align-items: center;
  gap: var(--gapS);
  position: relative;

  span {
    font-size: var(--font-size);
    font-weight: var(--font-weight-semi-bold);
    overflow: visible;
    letter-spacing: 0.02em;
  }

  &:hover,
  &:active {
    background-color: var(--special-variant);
  }

  &.btn-outline {
    color: var(--special);
    border: 2px solid currentcolor;
    background: var(--background-color);

    &:hover {
      color: var(--special-variant);
      background-color: var(--special-transparent);
    }
  }

  &.btn-bad-outline {
    color: var(--error-color);
    border: 2px solid currentcolor;
    background: var(--background-color);

    &:hover,
    &:active {
      color: var(--error-variant);
      background-color: var(--error-faded);
    }
  }

  &.btn-bad {
    background-color: var(--error-color);
    color: var(--on-error);

    &:hover,
    &:active {
      background-color: var(--error-variant);
    }
  }

  & .material-symbols-outlined {
    font-size: var(--icon-size-small);
    transition: opacity var(--quick-transition-time) ease;

    &:is(.x, .check) {
      position: absolute;
      top: auto;
      bottom: auto;
      left: var(--gapL);
      opacity: 0;
    }
  }

  &:has(.material-symbols-outlined:first-child) {
    padding-inline-start: var(--gapL);
  }

  &:has(.material-symbols-outlined:last-child) {
    padding-inline-end: var(--gapL);
  }

  &.success {
    & .material-symbols-outlined {
      opacity: 0;

      &.check {
        opacity: 1;
      }

    }
  }

  &.error {
    background-color: var(--error-color);
    color: var(--on-error);
    opacity: 0.7;
    pointer-events: none;

    & .material-symbols-outlined {
      opacity: 0;

      &.x {
        opacity: 1;
      }
    }
  }
}

/* functional classes */
.float-end {
  margin-inline-start: auto;
}

.justify-center {
  display: flex;
  justify-content: center;
}

.text-center {
  text-align: center;
}

.space-between {
  justify-content: space-between;
}

.material-symbols-outlined {
  transition: all var(--quick-transition-time) ease;
  user-select: none;
}