/* -------------------------------------------------------------
 * google fonts
 * -----------------------------------------------------------*/
/* roboto-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/roboto-v47-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 100;
  src: url("./fonts/roboto-v47-latin-100italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/roboto-v47-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 200;
  src: url("./fonts/roboto-v47-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/roboto-v47-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/roboto-v47-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/roboto-v47-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/roboto-v47-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/roboto-v47-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/roboto-v47-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/roboto-v47-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/roboto-v47-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/roboto-v47-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/roboto-v47-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/roboto-v47-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/roboto-v47-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/roboto-v47-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/roboto-v47-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-100 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/poppins-v23-latin-100.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-100italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 100;
  src: url("./fonts/poppins-v23-latin-100italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/poppins-v23-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 200;
  src: url("./fonts/poppins-v23-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/poppins-v23-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/poppins-v23-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/poppins-v23-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/poppins-v23-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/poppins-v23-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/poppins-v23-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/poppins-v23-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/poppins-v23-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/poppins-v23-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/poppins-v23-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/poppins-v23-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/poppins-v23-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/poppins-v23-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Poppins";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/poppins-v23-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-200 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 200;
  src: url("./fonts/source-code-pro-v23-latin-200.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-200italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 200;
  src: url("./fonts/source-code-pro-v23-latin-200italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-300 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/source-code-pro-v23-latin-300.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-300italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 300;
  src: url("./fonts/source-code-pro-v23-latin-300italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/source-code-pro-v23-latin-regular.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 400;
  src: url("./fonts/source-code-pro-v23-latin-italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-500 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/source-code-pro-v23-latin-500.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-500italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 500;
  src: url("./fonts/source-code-pro-v23-latin-500italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-600 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 600;
  src: url("./fonts/source-code-pro-v23-latin-600.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-600italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 600;
  src: url("./fonts/source-code-pro-v23-latin-600italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-700 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/source-code-pro-v23-latin-700.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-700italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 700;
  src: url("./fonts/source-code-pro-v23-latin-700italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-800 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 800;
  src: url("./fonts/source-code-pro-v23-latin-800.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-800italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 800;
  src: url("./fonts/source-code-pro-v23-latin-800italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-900 - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/source-code-pro-v23-latin-900.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* source-code-pro-900italic - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Source Code Pro";
  font-style: italic;
  font-weight: 900;
  src: url("./fonts/source-code-pro-v23-latin-900italic.woff2") format("woff2");
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font:
    "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Poppins", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
  --background-color: #ffffff;
  /* Background color for the entire website, including individual sections */
  --default-color: #1e3a5f;
  /* Default color used for the majority of the text content across the entire website */
  --heading-color: #1e3a5f;
  /* Color for headings, subheadings and title throughout the website */
  --accent-color: #f4c430;
  /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff;
  /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #1e3a5f;
  /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  font-family: var(--default-font);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  font-weight: 600;
}

h1,
h2,
h3 {
  letter-spacing: -0.02em;
}

/*--------------------------------------------------------------
# Brand Theme (light mode)
# Remaps Bootstrap's primary/link colours to the WageWave navy
# (#1e3a5f) and uses the gold accent (#f4c430) for highlights.
--------------------------------------------------------------*/
:root,
[data-bs-theme="light"] {
  --bs-primary: #1e3a5f;
  --bs-primary-rgb: 30, 58, 95;
  --bs-link-color: #1e3a5f;
  --bs-link-color-rgb: 30, 58, 95;
  --bs-link-hover-color: #16304f;
  --bs-link-hover-color-rgb: 22, 48, 79;
}

a {
  transition: color 0.15s ease-in-out;
}

.btn-primary {
  --bs-btn-bg: #1e3a5f;
  --bs-btn-border-color: #1e3a5f;
  --bs-btn-hover-bg: #16304f;
  --bs-btn-hover-border-color: #142c49;
  --bs-btn-active-bg: #142c49;
  --bs-btn-active-border-color: #122841;
  --bs-btn-disabled-bg: #1e3a5f;
  --bs-btn-disabled-border-color: #1e3a5f;
  --bs-btn-focus-shadow-rgb: 64, 88, 119;
}

.btn-outline-primary {
  --bs-btn-color: #1e3a5f;
  --bs-btn-border-color: #1e3a5f;
  --bs-btn-hover-bg: #1e3a5f;
  --bs-btn-hover-border-color: #1e3a5f;
  --bs-btn-active-bg: #1e3a5f;
  --bs-btn-active-border-color: #1e3a5f;
  --bs-btn-disabled-color: #1e3a5f;
  --bs-btn-disabled-border-color: #1e3a5f;
  --bs-btn-focus-shadow-rgb: 30, 58, 95;
}

.link-primary {
  color: rgba(var(--bs-primary-rgb), var(--bs-link-opacity, 1)) !important;
}

.link-primary:hover,
.link-primary:focus {
  color: rgba(
    var(--bs-link-hover-color-rgb),
    var(--bs-link-opacity, 1)
  ) !important;
}

/* --- form focus states in brand navy --- */
.form-control:focus,
.form-select:focus {
  border-color: #5b7ea8;
  box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.2);
}

.form-check-input:checked {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
}

.form-check-input:focus {
  border-color: #5b7ea8;
  box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.2);
}

.selectize-input.focus,
.selectize-control.single .selectize-input.input-active.focus {
  border-color: #5b7ea8;
  box-shadow: 0 0 0 0.25rem rgba(30, 58, 95, 0.2);
}

/* --- gold accent: active nav underline --- */
.nav-underline .nav-link.active,
.nav-underline .show > .nav-link {
  border-bottom-color: var(--accent-color);
}

/* --- gold accent: keyboard focus rings --- */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--accent-color);
  outline-offset: 2px;
  box-shadow: none;
}

/*--------------------------------------------------------------
# Navbar
--------------------------------------------------------------*/
#header {
  border-bottom: 1px solid var(--bs-border-color);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}

#header .navbar-brand h1 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--heading-color);
  letter-spacing: -0.01em;
}

.nav-link {
  font-family: var(--nav-font);
}

/*--------------------------------------------------------------
# Surfaces (cards, modals, accordions)
--------------------------------------------------------------*/
.card {
  --bs-card-border-radius: 0.625rem;
  --bs-card-inner-border-radius: calc(0.625rem - 1px);
  --bs-card-border-color: var(--bs-border-color-translucent);
  box-shadow:
    0 1px 2px rgba(16, 24, 40, 0.04),
    0 1px 3px rgba(16, 24, 40, 0.06);
}

.modal {
  --bs-modal-border-radius: 0.625rem;
  --bs-modal-inner-border-radius: calc(0.625rem - 1px);
}

.accordion {
  --bs-accordion-border-radius: 0.625rem;
  --bs-accordion-inner-border-radius: calc(0.625rem - 1px);
}

/*--------------------------------------------------------------
# Tables (native + Tabulator)
--------------------------------------------------------------*/
.table > thead {
  --bs-table-bg: var(--bs-tertiary-bg);
}

.table {
  --bs-table-hover-bg: rgba(30, 58, 95, 0.06);
}

[data-bs-theme="dark"] .table {
  --bs-table-hover-bg: #272e36;
}

/* muted header + navy row hover for tabulator in light mode
 * (dark mode equivalents live in the dark overrides section) */
html[data-bs-theme="light"] .tabulator .tabulator-header,
html[data-bs-theme="light"] .tabulator .tabulator-header .tabulator-col {
  background-color: var(--bs-tertiary-bg);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="light"]
    .tabulator
    .tabulator-row.tabulator-selectable:hover,
  html[data-bs-theme="light"]
    .tabulator
    .tabulator-row.tabulator-selectable:hover
    .tabulator-cell {
    background-color: rgba(30, 58, 95, 0.06);
  }
}

.tabulator .tabulator-footer .tabulator-page.active {
  background-color: #1e3a5f;
  border-color: #1e3a5f;
  color: #fff;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
footer.footer {
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  padding-top: 1.5rem;
}

.timesheet-row-pending {
  position: relative;
  border-left: 4px solid #ffc107;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.08),
    rgba(255, 193, 7, 0.08) 10px,
    rgba(255, 193, 7, 0.16) 10px,
    rgba(255, 193, 7, 0.16) 20px
  );
}

#offline-status-banner .badge {
  min-width: 40px;
}

#offline-status-banner .btn {
  white-space: nowrap;
}

@keyframes ww-spin {
  to {
    transform: rotate(360deg);
  }
}

.sync-spinning {
  display: inline-block;
  animation: ww-spin 0.75s linear infinite;
}

/* -------------------------------------------------------------
 * timesheet inline save toast
 * -----------------------------------------------------------*/
.ts-toast {
  display: none;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.25rem 0.6rem;
  line-height: 1.3;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ts-toast.ts-visible {
  display: inline-flex;
}

.ts-toast.ts-show {
  opacity: 1;
}

.ts-toast.ts-success {
  background: #e7f8ed;
  color: #1f6f3c;
  border: 1px solid #bce7c8;
}

.ts-toast.ts-error {
  background: #fdecec;
  color: #a12a2a;
  border: 1px solid #f7c0c0;
}

.ts-toast-close {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.15rem;
  cursor: pointer;
  line-height: 1;
  color: inherit;
  opacity: 0.6;
  font-size: 0.95rem;
}

.ts-toast-close:hover {
  opacity: 1;
}

[data-bs-theme="dark"] .ts-toast.ts-success {
  background: #0d2818;
  color: #6ee7a0;
  border-color: #1a4731;
}

[data-bs-theme="dark"] .ts-toast.ts-error {
  background: #2d0f0f;
  color: #f88;
  border-color: #5c1a1a;
}

/* -------------------------------------------------------------
 * approval page sticky alerts
 * -----------------------------------------------------------*/
#approval-message {
  position: sticky;
  top: 70px;
  /* adjust based on navbar height */
  z-index: 1020;
}

#approval-message:empty {
  display: none;
}

/* -------------------------------------------------------------
 * htmx button loading state
 * -----------------------------------------------------------*/
.htmx-btn .loading-indicator {
  display: none;
}

.htmx-btn.htmx-request {
  pointer-events: none;
  opacity: 0.65;
}

.htmx-btn.htmx-request .label {
  display: none;
}

.htmx-btn.htmx-request .loading-indicator {
  display: flex;
}

/* -------------------------------------------------------------
 * generic htmx loading indicator
 * -----------------------------------------------------------*/
.htmx-indicator {
  display: none;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: opacity 200ms ease-in;
}

/* -------------------------------------------------------------
 * bootstrap tables
 * -----------------------------------------------------------*/
.h-400 {
  max-height: 400px;
}

/* =============================================================
 * DARK MODE OVERRIDES
 * Bootstrap 5.3+ handles most component colours automatically
 * via data-bs-theme="dark". The rules below only cover custom
 * variables and hardcoded colours used elsewhere in this file.
 * ============================================================*/
[data-bs-theme="dark"] {
  /* -- app custom properties -- */
  --background-color: #1a1d21;
  --default-color: #c9d1d9;
  --heading-color: #e6edf3;
  --accent-color: #f4c430;
  --surface-color: #1e2228;
  --contrast-color: #e6edf3;

  /* -- soften Bootstrap's dark palette --
   * The stock values (#212529 bg, #dee2e6 text, #495057 borders)
   * are high-contrast.  These overrides shift to a GitHub-style
   * softer dark that is easier on the eyes.  Because Tabulator's
   * Bootstrap 5 theme and all native <table> elements inherit
   * from these variables, everything benefits at once.
   * ---------------------------------------------------------- */
  --bs-body-bg: #1e2228;
  --bs-body-color: #c9d1d9;
  --bs-border-color: #3d434a;
  --bs-tertiary-bg: #272c33;
  --bs-secondary-bg: #2b3035;
  --bs-secondary-color: #8b949e;
  --bs-emphasis-color: #e6edf3;
  --bs-table-bg: #1e2228;
  --bs-table-color: #c9d1d9;
  --bs-table-border-color: #3d434a;
  --bs-table-striped-bg: #242930;
  --bs-table-striped-color: #c9d1d9;
  --bs-table-hover-bg: #272e36;
  --bs-table-hover-color: #c9d1d9;
  --bs-table-active-bg: #2a3f5f;
  --bs-table-active-color: #c9d1d9;

  /* -- brand palette, lightened for dark surfaces -- */
  --bs-primary: #8ab4dd;
  --bs-primary-rgb: 138, 180, 221;
  --bs-link-color: #8ab4dd;
  --bs-link-color-rgb: 138, 180, 221;
  --bs-link-hover-color: #a6c7ea;
  --bs-link-hover-color-rgb: 166, 199, 234;

  /* -- subtle scrollbars (scrollbar-color is inherited) -- */
  scrollbar-color: #4a525c #1e2228;
}

/* --- brand components in dark mode --- */
[data-bs-theme="dark"] .btn-primary {
  --bs-btn-bg: #2c527f;
  --bs-btn-border-color: #2c527f;
  --bs-btn-hover-bg: #356394;
  --bs-btn-hover-border-color: #35618f;
  --bs-btn-active-bg: #3d6fa3;
  --bs-btn-active-border-color: #356394;
  --bs-btn-disabled-bg: #2c527f;
  --bs-btn-disabled-border-color: #2c527f;
  --bs-btn-focus-shadow-rgb: 138, 180, 221;
}

[data-bs-theme="dark"] .btn-outline-primary {
  --bs-btn-color: #8ab4dd;
  --bs-btn-border-color: #8ab4dd;
  --bs-btn-hover-bg: #8ab4dd;
  --bs-btn-hover-color: #101418;
  --bs-btn-hover-border-color: #8ab4dd;
  --bs-btn-active-bg: #8ab4dd;
  --bs-btn-active-color: #101418;
  --bs-btn-active-border-color: #8ab4dd;
  --bs-btn-disabled-color: #8ab4dd;
  --bs-btn-disabled-border-color: #8ab4dd;
  --bs-btn-focus-shadow-rgb: 138, 180, 221;
}

/* text-bg-primary badges: light navy pill with dark text */
[data-bs-theme="dark"] .text-bg-primary {
  color: #101418 !important;
  background-color: #8ab4dd !important;
}

/* form focus states in dark mode */
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  border-color: #6b93c4;
  box-shadow: 0 0 0 0.25rem rgba(138, 180, 221, 0.25);
}

[data-bs-theme="dark"] .form-check-input:checked {
  background-color: #2c527f;
  border-color: #2c527f;
}

[data-bs-theme="dark"] .form-check-input:focus {
  border-color: #6b93c4;
  box-shadow: 0 0 0 0.25rem rgba(138, 180, 221, 0.25);
}

/* --- timesheet pending row --- */
[data-bs-theme="dark"] .timesheet-row-pending {
  border-left-color: #ffc107;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 193, 7, 0.06),
    rgba(255, 193, 7, 0.06) 10px,
    rgba(255, 193, 7, 0.12) 10px,
    rgba(255, 193, 7, 0.12) 20px
  );
}

/* --- btn-outline-dark: swap to light tones in dark mode --- */
[data-bs-theme="dark"] .btn-outline-dark {
  --bs-btn-color: var(--bs-light);
  --bs-btn-border-color: var(--bs-light);
  --bs-btn-hover-color: var(--bs-dark);
  --bs-btn-hover-bg: var(--bs-light);
  --bs-btn-hover-border-color: var(--bs-light);
  --bs-btn-active-color: var(--bs-dark);
  --bs-btn-active-bg: var(--bs-light);
  --bs-btn-active-border-color: var(--bs-light);
  --bs-btn-disabled-color: var(--bs-light);
  --bs-btn-disabled-border-color: var(--bs-light);
}

/* --- theme toggle button --- */
#theme-toggle-btn {
  font-size: 1.15rem;
  line-height: 1;
  text-decoration: none;
}

#theme-toggle-btn:hover {
  opacity: 0.75;
}

#theme-toggle-btn:focus-visible {
  box-shadow: 0 0 0 0.2rem rgba(244, 196, 48, 0.45);
}

/* --- selectize overrides for dark mode --- */
[data-bs-theme="dark"] .selectize-input,
[data-bs-theme="dark"] .selectize-control.single .selectize-input.input-active {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-input.full {
  background-color: var(--bs-body-bg);
}

[data-bs-theme="dark"] .selectize-input.focus,
[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input.input-active.focus {
  border-color: #6b93c4;
  box-shadow: 0 0 0 0.25rem rgba(138, 180, 221, 0.25);
}

[data-bs-theme="dark"] .selectize-input.dropdown-active::before {
  background: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-input > input {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown,
[data-bs-theme="dark"] .selectize-dropdown.form-control {
  background: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .active:not(.selected) {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .active,
[data-bs-theme="dark"] .selectize-dropdown .selected {
  background-color: #2c527f;
  color: #fff;
}

[data-bs-theme="dark"] .selectize-dropdown .option {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-dropdown .optgroup-header {
  color: var(--bs-secondary-color);
  background: var(--bs-body-bg);
}

[data-bs-theme="dark"] .selectize-dropdown .create {
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .selectize-control.multi .selectize-input > div {
  background: var(--bs-tertiary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .selectize-control.multi .selectize-input.disabled > div,
[data-bs-theme="dark"]
  .selectize-control.multi
  .selectize-input.disabled
  > div.active {
  color: var(--bs-secondary-color);
  background: var(--bs-secondary-bg);
  border-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"] .selectize-control .selectize-input.disabled {
  background-color: var(--bs-secondary-bg);
}

[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input:not(.no-arrow):after {
  border-color: var(--bs-body-color) transparent transparent transparent;
}

[data-bs-theme="dark"]
  .selectize-control.single
  .selectize-input:not(.no-arrow).dropdown-active:after {
  border-color: transparent transparent var(--bs-body-color) transparent;
}

[data-bs-theme="dark"]
  .selectize-dropdown.plugin-dropdown_header
  .selectize-dropdown-header {
  background: var(--bs-tertiary-bg);
  border-bottom-color: var(--bs-border-color);
}

[data-bs-theme="dark"]
  .selectize-dropdown.plugin-dropdown_header
  .selectize-dropdown-header-close {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-control.plugin-clear_button .clear {
  color: var(--bs-body-color);
}

[data-bs-theme="dark"] .selectize-control.plugin-remove_button .item .remove {
  border-left-color: var(--bs-border-color);
}

/* --- tabulator: softer dark mode ---
 * Tabulator's bootstrap5 theme hardcodes #212529 bg, #fff text,
 * and #4d5154 borders (many with !important) so the --bs-*
 * variable overrides above can't reach them.  We must override
 * every rule explicitly using the same values from our palette.
 * -----------------------------------------------------------*/
html[data-bs-theme="dark"] .tabulator {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header,
html[data-bs-theme="dark"] .tabulator:not(.thead-light) .tabulator-header {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-col,
html[data-bs-theme="dark"]
  .tabulator:not(.thead-light)
  .tabulator-header
  .tabulator-col {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* table-bordered variant: vertical column/cell separators */
html[data-bs-theme="dark"]
  .tabulator.table-bordered
  .tabulator-header
  .tabulator-col,
html[data-bs-theme="dark"]
  .tabulator.table-bordered
  .tabulator-tableholder
  .tabulator-table
  .tabulator-row
  .tabulator-cell {
  border-right-color: var(--bs-border-color);
}

/* frozen column edges */
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-frozen.tabulator-frozen-left,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-frozen.tabulator-frozen-left {
  border-right-color: var(--bs-border-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-frozen.tabulator-frozen-right,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
  border-left-color: var(--bs-border-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-bottom-color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable[aria-sort="ascending"]
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-bottom-color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col.tabulator-sortable[aria-sort="descending"]
  .tabulator-col-content
  .tabulator-col-sorter
  .tabulator-arrow {
  border-top-color: var(--bs-body-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator
    .tabulator-header
    .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
    background-color: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-header-filter
  input {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-col
  .tabulator-header-filter
  input:focus {
  background-color: var(--bs-secondary-bg);
  border-color: #6b93c4;
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-header .tabulator-calcs-holder,
html[data-bs-theme="dark"]
  .tabulator
  .tabulator-header
  .tabulator-calcs-holder
  .tabulator-row {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-tableholder {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-tableholder .tabulator-table {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-row,
html[data-bs-theme="dark"] .tabulator .tabulator-cell {
  background-color: var(--bs-body-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

/* remove striped rows from all tabulator tables */
.tabulator .tabulator-row.tabulator-row-even {
  background-color: inherit !important;
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"] .tabulator .tabulator-row:hover {
    background-color: var(--bs-table-hover-bg);
  }

  html[data-bs-theme="dark"] .tabulator .tabulator-row:hover .tabulator-cell {
    background-color: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-selected {
  background-color: var(--bs-table-active-bg);
}

html[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-calcs {
  background: var(--bs-tertiary-bg) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-row
  .tabulator-cell.tabulator-row-header {
  background: var(--bs-tertiary-bg);
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer {
  background-color: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-calcs-holder {
  background: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-calcs-holder
  .tabulator-row {
  background-color: var(--bs-tertiary-bg) !important;
  border-color: var(--bs-border-color) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-paginator {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-footer
  .tabulator-page:disabled {
  background: transparent;
  color: var(--bs-secondary-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator
    .tabulator-footer
    .tabulator-page:not(.disabled):hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--bs-emphasis-color);
  }
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page.active {
  background-color: #2c527f;
  border-color: #2c527f;
  color: #fff;
}

html[data-bs-theme="dark"] .tabulator .tabulator-footer .tabulator-page-size {
  background-color: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-tableholder
  .tabulator-placeholder
  .tabulator-placeholder-contents {
  color: var(--bs-secondary-color);
}

html[data-bs-theme="dark"] .tabulator input {
  background-color: var(--bs-secondary-bg) !important;
  color: var(--bs-body-color) !important;
}

html[data-bs-theme="dark"] .tabulator .tabulator-alert .tabulator-alert-msg {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"]
  .tabulator
  .tabulator-alert
  .tabulator-alert-msg.tabulator-alert-state-error {
  border-color: #f85149;
  color: #f85149;
}

html[data-bs-theme="dark"] .tabulator-popup-container {
  background: var(--bs-secondary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-edit-list {
  background: var(--bs-secondary-bg);
}

html[data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-item {
  color: var(--bs-body-color);
}

html[data-bs-theme="dark"] .tabulator-edit-list .tabulator-edit-list-group {
  color: var(--bs-secondary-color);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-row.tabulator-group {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
}

html[data-bs-theme="dark"] .tabulator-row.tabulator-group span {
  color: var(--bs-secondary-color);
}

@media (hover: hover) and (pointer: fine) {
  html[data-bs-theme="dark"]
    .tabulator-menu
    .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {
    background: var(--bs-table-hover-bg);
  }
}

html[data-bs-theme="dark"] .tabulator-menu .tabulator-menu-separator {
  border-color: var(--bs-border-color);
}

/* -------------------------------------------------------------
 * tabulator row highlights (theme-aware)
 * -----------------------------------------------------------*/
.tabulator .tabulator-row.tabulator-row-submitted,
.tabulator .tabulator-row.tabulator-row-submitted .tabulator-cell {
  background-color: #e8f5e9 !important;
}

.tabulator .tabulator-row.tabulator-row-total,
.tabulator .tabulator-row.tabulator-row-total .tabulator-cell {
  background-color: #f8f9fa !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-submitted,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-submitted
  .tabulator-cell {
  background-color: #1a3a2a !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-total,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-total
  .tabulator-cell {
  background-color: var(--bs-tertiary-bg) !important;
}

.tabulator .tabulator-row.tabulator-row-shared,
.tabulator .tabulator-row.tabulator-row-shared .tabulator-cell {
  background-color: #e3f2fd !important;
  font-style: italic !important;
}

[data-bs-theme="dark"] .tabulator .tabulator-row.tabulator-row-shared,
[data-bs-theme="dark"]
  .tabulator
  .tabulator-row.tabulator-row-shared
  .tabulator-cell {
  background-color: #0d2a45 !important;
}

/* -------------------------------------------------------------
 * equipment group card action toolbar
 * -----------------------------------------------------------*/
.eq-group-actions {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.375rem;
  overflow: hidden;
}

.eq-group-actions .btn,
.eq-group-actions form .btn {
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--bs-border-color);
  padding: 0.3rem 0.55rem;
  font-size: 0.8rem;
  color: var(--bs-secondary-color);
  background: transparent;
  transition:
    background 0.15s,
    color 0.15s;
}

.eq-group-actions form:last-child .btn,
.eq-group-actions > .btn:last-child {
  border-right: none;
}

.eq-group-actions .btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* hover tones per action */
.eq-group-actions .btn-action-rename:hover {
  color: #0d6efd;
  background: rgba(13, 110, 253, 0.08);
}
.eq-group-actions .btn-action-add:hover {
  color: #198754;
  background: rgba(25, 135, 84, 0.08);
}
.eq-group-actions .btn-action-remove:hover {
  color: #fd7e14;
  background: rgba(253, 126, 20, 0.08);
}
.eq-group-actions .btn-action-delete:hover {
  color: #dc3545;
  background: rgba(220, 53, 69, 0.08);
}

/* dark mode */
[data-bs-theme="dark"] .eq-group-actions {
  border-color: var(--bs-border-color);
}

[data-bs-theme="dark"] .eq-group-actions .btn,
[data-bs-theme="dark"] .eq-group-actions form .btn {
  border-right-color: var(--bs-border-color);
  color: var(--bs-secondary-color);
}

[data-bs-theme="dark"] .eq-group-actions .btn-action-rename:hover {
  color: #6ea8fe;
  background: rgba(110, 168, 254, 0.1);
}
[data-bs-theme="dark"] .eq-group-actions .btn-action-add:hover {
  color: #75b798;
  background: rgba(117, 183, 152, 0.1);
}
[data-bs-theme="dark"] .eq-group-actions .btn-action-remove:hover {
  color: #ffa94d;
  background: rgba(255, 169, 77, 0.1);
}
[data-bs-theme="dark"] .eq-group-actions .btn-action-delete:hover {
  color: #f85149;
  background: rgba(248, 81, 73, 0.1);
}