/* pdfjs-theme-override.css */
/* Overrides pdfJS viewer colors to match the main application theme using direct values */

/* Define the base colors from main.css if they might not be globally available */
*::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
  scrollbar-width: none; /* Firefox */
}

html {
    --bg-color: #fafafa;
    --second-bg-color: #fff;
    --contrast-bg-color: #f3f3f3;
    --primary-color: hsl(210, 88%, 70%);
    --primary-color-atenued: hsla(210, 88%, 70%, .6);
    --heading-color: hsl(202, 50%, 12.5%);
    --text-color: hsl(202, 10%, 30%);
    --border-color: hsla(210, 60%, 30%, .15);
    --box-shadow-color: #d3d3d3;
}

:root {
  /* General */
  --main-color: hsl(202, 10%, 30%); /* --text-color */
  --body-bg-color: #fafafa; /* --bg-color */

  /* Toolbar / Sidebar */
  --sidebar-narrow-bg-color: #fafafa; /* --bg-color */
  --sidebar-toolbar-bg-color: #f3f3f3; /* --contrast-bg-color */
  --toolbar-bg-color: #fff; /* --second-bg-color */
  --toolbar-border-color: hsla(210, 60%, 30%, .15); /* --border-color */
  --toolbar-box-shadow: 0 1px 0 hsla(210, 60%, 30%, .15); /* --border-color */
  --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.1), 0 1px 0 hsla(210, 60%, 30%, .15), 0 0 1px rgb(0 0 0 / 0.05); /* --border-color */

  /* Buttons & Interactions */
  --button-hover-color: hsla(210, 88%, 70%, .6); /* --primary-color-atenued */
  --toggled-btn-color: hsl(202, 50%, 12.5%); /* --heading-color */
  --toggled-btn-bg-color: hsla(210, 88%, 70%, .6); /* --primary-color-atenued */
  --toggled-hover-active-btn-color: hsl(210, 88%, 70%); /* --primary-color */
  --dropdown-btn-bg-color: #f3f3f3; /* --contrast-bg-color */
  --dialog-button-bg-color: #f3f3f3; /* --contrast-bg-color */
  --dialog-button-hover-bg-color: hsla(210, 88%, 70%, .6); /* --primary-color-atenued */

  /* Fields & Inputs */
  --field-color: hsl(202, 10%, 30%); /* --text-color */
  --field-bg-color: #fff; /* --second-bg-color */
  --field-border-color: hsla(210, 60%, 30%, .15); /* --border-color */

  /* Tree View / Thumbnails */
  --treeitem-color: hsl(202, 10%, 30%); /* --text-color */
  --treeitem-bg-color: transparent;
  --treeitem-hover-color: hsl(202, 50%, 12.5%); /* --heading-color */
  --treeitem-selected-color: hsl(202, 50%, 12.5%); /* --heading-color */
  --treeitem-selected-bg-color: hsla(210, 88%, 70%, .6); /* --primary-color-atenued */
  --thumbnail-hover-color: hsla(210, 88%, 70%, .6); /* --primary-color-atenued */
  --thumbnail-selected-color: hsl(210, 88%, 70%); /* --primary-color */

  /* Popups / Doorhangers */
  --doorhanger-bg-color: #fff; /* --second-bg-color */
  --doorhanger-border-color: hsla(210, 60%, 30%, .15); /* --border-color */
  --doorhanger-hover-color: hsl(210, 88%, 70%); /* --primary-color */
  --doorhanger-separator-color: hsla(210, 60%, 30%, .15); /* --border-color */

  /* Other Elements */
  --progressBar-color: hsl(210, 88%, 70%); /* --primary-color */
  --progressBar-bg-color: #f3f3f3; /* --contrast-bg-color */
  --separator-color: hsla(210, 60%, 30%, .15); /* --border-color */

  /* Icons */
  --toolbar-icon-bg-color: hsl(202, 10%, 30%); /* --text-color */
  --toolbar-icon-hover-bg-color: hsl(210, 88%, 70%); /* --primary-color */
}

/* Force light theme colors for dark mode selectors using !important */
@media (prefers-color-scheme: dark) {
  :root:where(:not(.is-light)) {
    /* General */
    --main-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --body-bg-color: #fafafa !important; /* --bg-color */

    /* Toolbar / Sidebar */
    --sidebar-narrow-bg-color: #fafafa !important; /* --bg-color */
    --sidebar-toolbar-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --toolbar-bg-color: #fff !important; /* --second-bg-color */
    --toolbar-border-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */
    --toolbar-box-shadow: 0 1px 0 hsla(210, 60%, 30%, .15) !important; /* --border-color */
    --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.1), 0 1px 0 hsla(210, 60%, 30%, .15), 0 0 1px rgb(0 0 0 / 0.05) !important; /* --border-color */

    /* Buttons & Interactions */
    --button-hover-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --toggled-btn-color: hsl(202, 50%, 12.5%) !important; /* --heading-color */
    --toggled-btn-bg-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --toggled-hover-active-btn-color: hsl(210, 88%, 70%) !important; /* --primary-color */
    --dropdown-btn-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --dialog-button-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --dialog-button-hover-bg-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */

    /* Fields & Inputs */
    --field-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --field-bg-color: #fff !important; /* --second-bg-color */
    --field-border-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */

    /* Tree View / Thumbnails */
    --treeitem-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --treeitem-bg-color: transparent !important;
    --treeitem-hover-color: hsl(202, 50%, 12.5%) !important; /* --heading-color */
    --treeitem-selected-color: hsl(202, 50%, 12.5%) !important; /* --heading-color */
    --treeitem-selected-bg-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --thumbnail-hover-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --thumbnail-selected-color: hsl(210, 88%, 70%) !important; /* --primary-color */

    /* Popups / Doorhangers */
    --doorhanger-bg-color: #fff !important; /* --second-bg-color */
    --doorhanger-border-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */
    --doorhanger-hover-color: hsl(210, 88%, 70%) !important; /* --primary-color */
    --doorhanger-separator-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */

    /* Other Elements */
    --progressBar-color: hsl(210, 88%, 70%) !important; /* --primary-color */
    --progressBar-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --separator-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */

    /* Icons */
    --toolbar-icon-bg-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --toolbar-icon-hover-bg-color: hsl(210, 88%, 70%) !important; /* --primary-color */
  }
}

:root:where(.is-dark) {
    /* General */
    --main-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --body-bg-color: #fafafa !important; /* --bg-color */

    /* Toolbar / Sidebar */
    --sidebar-narrow-bg-color: #fafafa !important; /* --bg-color */
    --sidebar-toolbar-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --toolbar-bg-color: #fff !important; /* --second-bg-color */
    --toolbar-border-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */
    --toolbar-box-shadow: 0 1px 0 hsla(210, 60%, 30%, .15) !important; /* --border-color */
    --toolbarSidebar-box-shadow: inset calc(-1px * var(--dir-factor)) 0 0 rgb(0 0 0 / 0.1), 0 1px 0 hsla(210, 60%, 30%, .15), 0 0 1px rgb(0 0 0 / 0.05) !important; /* --border-color */

    /* Buttons & Interactions */
    --button-hover-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --toggled-btn-color: hsl(202, 50%, 12.5%) !important; /* --heading-color */
    --toggled-btn-bg-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --toggled-hover-active-btn-color: hsl(210, 88%, 70%) !important; /* --primary-color */
    --dropdown-btn-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --dialog-button-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --dialog-button-hover-bg-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */

    /* Fields & Inputs */
    --field-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --field-bg-color: #fff !important; /* --second-bg-color */
    --field-border-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */

    /* Tree View / Thumbnails */
    --treeitem-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --treeitem-bg-color: transparent !important;
    --treeitem-hover-color: hsl(202, 50%, 12.5%) !important; /* --heading-color */
    --treeitem-selected-color: hsl(202, 50%, 12.5%) !important; /* --heading-color */
    --treeitem-selected-bg-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --thumbnail-hover-color: hsla(210, 88%, 70%, .6) !important; /* --primary-color-atenued */
    --thumbnail-selected-color: hsl(210, 88%, 70%) !important; /* --primary-color */

    /* Popups / Doorhangers */
    --doorhanger-bg-color: #fff !important; /* --second-bg-color */
    --doorhanger-border-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */
    --doorhanger-hover-color: hsl(210, 88%, 70%) !important; /* --primary-color */
    --doorhanger-separator-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */

    /* Other Elements */
    --progressBar-color: hsl(210, 88%, 70%) !important; /* --primary-color */
    --progressBar-bg-color: #f3f3f3 !important; /* --contrast-bg-color */
    --separator-color: hsla(210, 60%, 30%, .15) !important; /* --border-color */

    /* Icons */
    --toolbar-icon-bg-color: hsl(202, 10%, 30%) !important; /* --text-color */
    --toolbar-icon-hover-bg-color: hsl(210, 88%, 70%) !important; /* --primary-color */
}

/* Hide Toolbars */
#toolbarContainer,
#secondaryToolbar {
  display: none !important;
}