@import url("@gouvfr-lasuite/integration/dist/css/gaufre.css");

@layer grist-custom {
  :root {
    /* colors from the La Suite UI Kit. names match names in Figma.
    Example: --uikit-gray-850 is the figma variable Gray/850.

    Notes: we directly use the primitives instead of the ui kit semantic tokens. The ui kit semantic tokens often don't really
    match existing tokens in Grist depending on the light/dark appearance, so it would this code quite hard to understand. */
    --uikit-black-100: #181b24;

    --uikit-gray-025: #F6F8F9;
    --uikit-gray-050: #EEF1F4;
    --uikit-gray-100: #DFE2EA;
    --uikit-gray-150: #CFD5DE;
    --uikit-gray-250: #B2B9C7;
    --uikit-gray-400: #8891A4;
    --uikit-gray-450: #7B8498;
    --uikit-gray-500: #6D778C;
    --uikit-gray-550: #626A80;
    --uikit-gray-600: #555E74;
    --uikit-gray-650: #4A5267;
    --uikit-gray-700: #3F4759;
    --uikit-gray-750: #363B4C;
    --uikit-gray-850: #222631;
    --uikit-gray-900: #181B24;
    --uikit-gray-950: #0F1117;

    --uikit-brand-050: #EDF0FF;
    --uikit-brand-150: #C8D3FF;
    --uikit-brand-250: #a2b6ff;
    --uikit-brand-400: #6C89FE;
    --uikit-brand-550: #3E5DE7;
    --uikit-brand-600: #304DDF;
    --uikit-brand-650: #2845C1;
    --uikit-brand-700: #223E9E;
    --uikit-brand-750: #1F367D;
    --uikit-brand-800: #1B2E5F;
    --uikit-brand-850: #172446;
    --uikit-brand-900: #121B30;

    --uikit-error-100: #FFDAD7;
    --uikit-error-450: #F63A45;
    --uikit-error-500: #E32C39;
    --uikit-error-550: #CF202D;
    --uikit-error-600: #BD0F23;

    --uikit-warning-400: #D7790C;
    --uikit-warning-550: #A75400;

    --uikit-success-100: #BAEECF;
    --uikit-success-500: #40836F;
    --uikit-success-600: #2B695A;

    --uikit-info-400: #5092E7;
    --uikit-info-550: #2F6ABB;

    /* common theme vars that are applied to all themes */
    --grist-theme-very-light: var(--uikit-gray-050); /* text that is always light, whatever the current appearance (light or dark theme) */
    --grist-theme-primary: var(--uikit-brand-550); /* main accent color used mostly on interactive elements */
    --grist-theme-primary-muted: var(--uikit-brand-650); /* alternative primary color, mostly used on hover effects */
    --grist-theme-primary-dim: var(--uikit-brand-700); /* dimmer primary color, rarely used */
    --grist-theme-primary-emphasis: var(--uikit-brand-400); /* more pronounced primary color variant, rarely used  */
    --grist-theme-primary-translucent: #3E5DE755;
    --grist-theme-control-primary-fg: var(--uikit-brand-050); /* foreground color for primary control elements */
    --grist-theme-token-cursor: var(--grist-theme-primary); /* cursor color in widgets */
    --grist-theme-error: var(--uikit-error-550);
    --grist-theme-text-error: var(--grist-theme-error);
    --grist-theme-error-light: var(--uikit-error-450);
    --grist-theme-warning: var(--uikit-warning-550);
    --grist-theme-warning-light: var(--uikit-warning-400);
    --grist-theme-info: var(--uikit-info-550);
    --grist-theme-info-light: var(--uikit-info-400);
    --grist-theme-control-border: 1px solid var(--grist-theme-primary-muted);
    /* Custom inputs tags colors (like switch inputs in cells) */
    --custom-control-bg: var(--grist-theme-primary);
    --grist-actual-cell-color: var(--custom-control-bg);
    --accent-color: var(--custom-control-bg);
    --grist-theme-switch-active-slider: var(--custom-control-bg);
    --custom-allow-bg: var(--uikit-success-100);
    --custom-allow-fg: var(--uikit-success-600);
    --custom-deny-bg: var(--uikit-error-100);
    --custom-deny-fg: var(--uikit-error-600);

    /* logo */
    --icon-GristLogo: url("ui-icons/Logo/logo.svg");
    --grist-theme-logo-bg: #ffffff;
    --grist-theme-logo-size: 22px 22px;
    --color-logo-bg: var(--grist-theme-bg);
  }

  /* START loading screen logo */
  .grist-logo {
    --color-logo-row: #c83f49;
    --color-logo-col: #2845c1;
    --color-logo-cell: #2845c1;
    background: #fff !important;
    border-radius: 22px !important;
    padding: 20px 24px !important;
    border: 1px solid #ccc !important;
  }
  /* fix vertical centering that is a bit off */
  .grist-logo > * {
    position: relative !important;
    top: 4px !important;
  }
  /* END loading screen logo */

  /* START logo beta at user PP position*/
  .test-dm-logo {
    background-size: 100% !important;
  }
  /* END logo beta at user PP position*/

  /* START logo beta at grist ressources position */
  [style^="background-image: var(--icon-GristLogo)"] {
    width: 48px !important;
    height: 48px !important;
  }
  /* END logo beta at grist ressources position */

  /* START gaufre changes */
  /* We use gaufre v1, which uses the old la suite colors and design.
  Until we migrate to gaufre v2, we need to override things. */
  .lasuite-gaufre-btn--vanilla {
    /* adapt button color to the custom primary color that changes with the current theme */
    color: var(--grist-theme-primary) !important;
    box-shadow: none !important;
  }
  /* replace the behave hexagon icon with a square/dots icon (match new gaufre design) */
  .lasuite-gaufre-btn--vanilla::before {
    mask-image: url('data:image/svg+xml,<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><defs><path fill="currentColor" id="square" d="M2.7959 0.5C3.26483 0.5 3.49956 0.49985 3.68848 0.564453C4.03934 0.684581 4.31542 0.960658 4.43555 1.31152C4.50015 1.50044 4.5 1.73517 4.5 2.2041V2.7959C4.5 3.26483 4.50015 3.49956 4.43555 3.68848C4.31542 4.03934 4.03934 4.31542 3.68848 4.43555C3.49956 4.50015 3.26483 4.5 2.7959 4.5H2.2041C1.73517 4.5 1.50044 4.50015 1.31152 4.43555C0.960658 4.31542 0.684581 4.03934 0.564453 3.68848C0.49985 3.49956 0.5 3.26483 0.5 2.7959V2.2041C0.5 1.73517 0.49985 1.50044 0.564453 1.31152C0.684581 0.960658 0.960658 0.684581 1.31152 0.564453C1.50044 0.49985 1.73517 0.5 2.2041 0.5H2.7959Z"></path></defs><use href="%23square" transform="translate(0, 0)"></use><use href="%23square" transform="translate(6.5, 0)"></use><use href="%23square" transform="translate(13, 0)"></use><use href="%23square" transform="translate(0, 6.5)"></use><use href="%23square" transform="translate(6.5, 6.5)"></use><use href="%23square" transform="translate(13, 6.5)"></use><use href="%23square" transform="translate(0, 13)"></use><use href="%23square" transform="translate(6.5, 13)"></use><use href="%23square" transform="translate(13, 13)"></use></svg>') !important;
    margin-left: 0.25rem !important;
    margin-right: 0.25rem !important;
    --icon-size: 1.5rem !important;
  }
  /* END gaufre changes */

  /* START Custom toggle switch colors */
  /* When in a table or card, the toggle switch has particular styling rules to handle potential user-selected color,
  making it a impossible to override only with a CSS variable, we must force a rule */
  .field_clip .test-toggle-switch {
    --grist-theme-switch-active-slider: var(--grist-actual-cell-color, var(--custom-control-bg)) !important;
  }
  /* END Custom toggle switch colors */

  /* START Custom tooltip colors */
  .test-tooltip {
    background-color: var(--custom-tooltip-bg) !important;
    color: var(--custom-tooltip-fg) !important;
    border: 1px solid var(--custom-tooltip-border) !important;
    box-shadow: 0 1px 5.4px 0 rgba(0, 0, 0, 0.15) !important;
  }
  .test-tooltip-close [style*=CrossSmall]{
    background-color: var(--custom-tooltip-fg) !important;
  }
  /* END Custom tooltip colors */

  /* START Custom ACL colors */
  .test-rule-permissions [class*=deny] {
    background-color: var(--custom-deny-bg) !important;
    background-image: linear-gradient(-45deg, var(--custom-deny-bg) 14px, var(--custom-deny-fg) 15px 16px, var(--custom-deny-bg) 16px) !important;
    border-color: var(--custom-deny-bg) !important;
    color: var(--custom-deny-fg) !important;
  }

  .test-rule-permissions [class*=allow] {
    background-color: var(--custom-allow-bg) !important;
    border-color: var(--custom-allow-bg) !important;
    color: var(--custom-allow-fg) !important;
  }
  /* END Custom ACL colors */

  /* START Custom document card in home page colors */
  .test-dm-public {
    --icon-color: #cecece !important;
  }

  .test-dm-pinned-initials {
    border-color: #cecece !important;
  }
  /* END Custom document card in home page colors */

  /* START Custom Fullframe Card View Colors */
  .test-close-button {
    --icon-color: #929292 !important;
  }

  .test-close-button:hover {
    --icon-color: #cecece !important;
  }
  /* END Custom Fullframe Card View Colors */

  /* START Custom toast notification Colors */
  .test-notifier-toast-custom-action {
    color:#cacafb !important;
  }
  /* END Custom toast notification Colors */

  /* START Custom home page images hue */
  /* Home page svgs*/
  [src*="webinars.svg"],
  [src*="help-center.svg"],
  .test-dm-pinned-initials + div{
    filter: hue-rotate(93deg) saturate(20) !important;
  }
  /* END Custom home page images hue */

  /* END common overrides */

  /* START Form custom colors */

  /* We do this to have WCAG compliant color combinations */
  /* Forms don't support themes. They are always loaded with GristLight theme,
  but don't necessarily consume the same tokens as components in the app
  and need some specific overrides. */
  /* Note: here, we target specific things, as the dark-grey variable is used for other
  things that inputs and we don't want to change it in that case (ie. sections) */
  :root[data-grist-form] :is(input, select, textarea, label, .test-form-search-select) {
    --grist-color-dark-grey: var(--uikit-gray-400);
  }

  /* END Form custom colors */

  /* Light theme overrides (both GristLight and HighContrastLight themes) to match UI kit colors */
  :root[data-grist-appearance="light"] {
    --grist-theme-bg-color: #fff;
    --grist-theme-body: var(--uikit-gray-850); /* main body text */
    --grist-theme-emphasis: var(--uikit-gray-950); /* pronounced text */
    --grist-theme-secondary: var(--uikit-gray-600); /* secondary, less visually pronounced text */
    --grist-theme-text-medium: var(--grist-theme-secondary);

    --grist-theme-bg-secondary: var(--uikit-gray-025); /* bg color mostly used on panels */
    --grist-theme-bg-tertiary: #181b241a; /* transparent bg, mostly used on hover effects (transparent ui kit black) */
    --grist-theme-bg-emphasis: var(--uikit-gray-850); /* pronounced bg color, mostly used on selected items */

    --grist-theme-decoration: var(--uikit-gray-150); /* main decoration color, mostly used on borders */
    --grist-theme-decoration-secondary: var(--uikit-gray-050); /* less pronounced decoration color */
    --grist-theme-decoration-tertiary: var(--grist-theme-decoration);
    --grist-theme-page-panels-border: var(--grist-theme-decoration);
    --grist-theme-right-panel-tab-border: var(--grist-theme-decoration);

    --grist-theme-token-cursor-inactive: var(--uikit-brand-150);
    --grist-theme-token-hover: var(--uikit-gray-150); /* non-transparent hover effect color, rarely used */

    /* these are here because the theme tokens are not 100% clean and some specific parts of the UI
    still have hard-coded colors in the theme files, mostly some gray shades. We need to update them manually for now.
    You can see all hard-coded colors in the theme files (GristLight.ts, GristDark.ts, etc.). */
    --grist-theme-attachments-cell-icon-bg: var(--uikit-gray-100);
    --grist-control-bg: var(--uikit-gray-600); /* control-bg is used for the attachment icon FG, meaning the attachment clip icon color itself, not its background color */
    --grist-theme-attachments-cell-icon-hover-bg: var(--grist-theme-token-hover);
    /* this below matches the result of the transparent shade --grist-theme-selection-header on a default gray column header,
       so that the selected column header and selected row header look the same.
       We don't want to simply reuse --grist-theme-selection-header here (the one used for column headers),
       because we need an opaque color for the row header, not a transparent one (because of overflow scrolling on mobile). */
    --grist-theme-table-header-selected-bg: #dfe2e4;
    --grist-theme-table-header-border: var(--grist-theme-decoration);
    --grist-theme-card-form-border: var(--grist-theme-decoration);
    --grist-theme-right-panel-field-settings-button-bg: var(--grist-theme-decoration);
    --grist-theme-document-history-table-border: var(--grist-theme-decoration);
    --grist-theme-ace-autocomplete-border: var(--grist-theme-decoration);
    --grist-theme-formula-icon: var(--grist-theme-decoration);
    --grist-theme-right-panel-subtab-fg: var(--uikit-gray-600);

    --grist-theme-token-selection: #3e5de726; /* transparent background of selected cells */
    --grist-theme-token-selection-opaque: var(--uikit-brand-050);
    --grist-theme-token-selection-darker-opaque: #e6eaff; /* slightly darker version of selection-opaque */
    --grist-theme-token-selection-darker: #3e5de740;
    --grist-theme-token-selection-darkest: #3e5de759;
    --grist-theme-backdrop: #222631e5; /* transparent modal backdrop bg color */

    --grist-theme-control-disabled-bg: var(--uikit-gray-500);
    --grist-theme-checkbox-disabled-bg: var(--uikit-gray-150);

    --custom-marked-borders: var(--uikit-gray-400); /* Note: this is important to have a color that matches a 3:1 contrast ratio with common bg colors (white and panel bg). */
    /* make _some_ important borders more pronounced so that they are WCAG compliant by default, basically all form input borders */
    --grist-theme-switch-inactive-pill: var(--custom-marked-borders);
    --grist-theme-input-border: var(--custom-marked-borders);
    --grist-theme-app-header-border: var(--custom-marked-borders);
    --grist-theme-select-button-border: var(--custom-marked-borders);
    --grist-theme-button-group-border: var(--custom-marked-borders);
    --grist-theme-highlighted-code-border: var(--custom-marked-borders);
    --grist-theme-checkbox-border: var(--custom-marked-borders);
    --grist-theme-access-rules-formula-editor-border-hover: var(--custom-marked-borders);
    --grist-theme-app-header-border-hover: var(--custom-marked-borders);
    --grist-theme-cell-zebra-bg: var(--uikit-gray-025);

    --custom-tooltip-bg: var(--uikit-gray-050);
    --custom-tooltip-border: var(--uikit-gray-150);
    --custom-tooltip-fg: var(--uikit-gray-650);
  }

  /* for the high contrast theme, make the primary color and a few borders/tokens more contrasted,
  and adapt a few specific tokens */
  :root[data-grist-theme="HighContrastLight"] {
    --grist-theme-body: #000;
    --grist-theme-secondary: var(--uikit-gray-700);
    --grist-theme-right-panel-subtab-fg: var(--grist-theme-secondary);
    --grist-theme-primary: var(--uikit-brand-700);
    --grist-theme-primary-muted: var(--uikit-brand-800);
    --grist-theme-control-primary-fg: #fff;
    --grist-theme-token-hover: #000;
    --uikit-border-semantic-neutral-tertiary: var(--uikit-gray-400);
    --uikit-background-semantic-overlay-primary-hover: #181b2421;

    --custom-marked-borders: var(--uikit-gray-650);
    --grist-theme-decoration: var(--uikit-gray-400);
    --grist-theme-decoration-secondary: var(--uikit-gray-250);
    --grist-theme-decoration-tertiary: var(--uikit-gray-100);
    --grist-theme-choice-token-bg: var(--uikit-gray-150);
    /* this below kinda shows the default value is wrong in the HighContrastLight theme, we should fix it in grist-core.
       In the meantime, we override it. We need a transparent value here, as it is used for the column header bg that can have
       user-defined background and text colors. */
    --grist-theme-selection-header: var(--grist-theme-bg-tertiary);
    --grist-theme-table-header-border: var(--uikit-gray-700);
    --grist-theme-checkbox-disabled-bg: var(--uikit-gray-250);
    --grist-theme-right-panel-field-settings-button-bg: var(--grist-theme-decoration-tertiary);
    --grist-theme-left-panel-page-options-hover-bg: #fff;
    --grist-theme-cell-zebra-bg: #E6E9F0;
  }

  :root[data-grist-theme="GristDark"] {
    --grist-theme-body: var(--uikit-gray-050);
    --grist-theme-emphasis: #fff;
    --grist-theme-secondary: var(--uikit-gray-100);

    --grist-theme-bg: var(--uikit-gray-900);
    --grist-theme-bg-color: var(--uikit-gray-900);
    --grist-theme-bg-default: var(--uikit-gray-900);
    --grist-theme-bg-secondary: var(--uikit-gray-850);
    --grist-theme-bg-emphasis: var(--uikit-gray-600);

    --grist-theme-decoration: var(--uikit-gray-450);
    --grist-theme-decoration-secondary: var(--uikit-gray-650);
    --grist-theme-decoration-tertiary: var(--uikit-gray-700);

    --grist-theme-primary: var(--uikit-brand-250);
    --grist-theme-primary-dim: var(--uikit-brand-600);
    --grist-theme-control-primary-bg: var(--uikit-brand-650);
    --grist-theme-control-border: 1px solid var(--grist-theme-primary);

    --grist-theme-token-cursor: var(--uikit-brand-400);
    --grist-theme-token-cursor-inactive: #cacafb;
    --grist-theme-token-selection: hsla(240, 81.5%, 74.5%, 0.15);
    --grist-theme-token-selection-opaque: #ececfe;
    --grist-theme-token-selection-darker-opaque: #e3e3fd;
    --grist-theme-token-selection-darker: hsla(240, 78.1%, 39.4%, 0.25);
    --grist-theme-token-selection-darkest: hsla(240, 78.1%, 39.4%, 0.35);
    --grist-theme-primary-translucent: #a2b6ff8d;

    --grist-theme-token-hover: #666;
    --grist-theme-backdrop: #3a3a3a;
    --grist-theme-error: var(--uikit-error-450);

    --custom-control-bg: var(--uikit-brand-250);
    --custom-tooltip-bg: var(--uikit-gray-750);
    --custom-tooltip-border: var(--uikit-gray-700);
    --custom-tooltip-fg: var(--uikit-gray-250);

    --icon-GristLogo: url("ui-icons/Logo/logo-dark.svg");

    /* Manual overrides of hard-coded color strings of original GristDark theme */
    --grist-theme-app-header-border: var(--grist-theme-decoration);
    --grist-theme-add-new-circle-fg: var(--grist-theme-control-primary-fg);
    --grist-theme-add-new-circle-bg: var(--uikit-brand-550);
    --grist-theme-add-new-circle-hover-bg: var(--uikit-brand-750);
    --grist-theme-importer-active-file-bg: var(--grist-theme-primary-muted);
    --grist-theme-toast-control-fg: var(--grist-theme-primary);
    --grist-theme-left-panel-page-options-selected-hover-bg: var(--uikit-gray-450);
    --grist-theme-right-panel-tab-selected-icon: var(--grist-theme-primary);
    --grist-theme-right-panel-tab-button-hover-bg: var(--grist-theme-primary-muted);
    --grist-theme-choice-token-bg: var(--grist-theme-bg-emphasis);
    --grist-theme-cell-zebra-bg: #303030;
    --grist-theme-switch-inactive-pill: var(--uikit-gray-250);
    --grist-theme-breadcrumbs-tag-bg: var(--grist-theme-decoration-secondary);
    --grist-theme-button-group-selected-bg: var(--uikit-brand-750);
    --grist-theme-widget-active-border: var(--grist-theme-primary);
  }

  [data-grist-theme="GristDark"] input[type="checkbox"] {
    --grist-theme-control-primary-fg: #2c3245;
    --grist-theme-control-primary-bg: var(--grist-theme-primary);
  }
}