/* Linkweave. Brand tokens and shared component classes. */

:root {
  /* Brand colors */
  --clr-primary: #0F9D77;
  --clr-primary-light: #D8F3EA;
  --clr-primary-dark: #0B7A5C;
  --clr-secondary: #5A6B7B;

  /* Accent. Used for the hover state of an already active sidebar item, which referenced
     --bg-accent for a long time without anything ever defining it, so that hover silently
     had no background at all. Defaults to the dark primary shade. */
  --clr-accent: var(--clr-primary-dark);

  --clr-gray: #aeaeae;
  --clr-red: #dc2626;

  /* Categorical chart palette. See lib/ChartPalette.php: the brand token leads the sequence
     and is not repeated here, so a re-theme moves the lead colour through the charts. These
     are the secondary and tertiary hues, chosen to stay apart from each other and from the
     semantic amber/rose/success a status chart uses. charts.js reads them off :root, so the
     dark values below are what a chart picks up once .dark is on the html element. */
  --chart-2: #7C3AED;
  --chart-3: #DB2777;
  --chart-4: #0D9488;
  --chart-5: #4F46E5;
  --chart-6: #EA580C;

  /* Brand colors as space separated RGB triplets, for rgb(var(--x) / alpha) */
  --clr-primary-rgb: 15 157 119;
  --clr-secondary-rgb: 90 107 123;
  --clr-accent-rgb: 11 122 92;

  --clr-gray-rgb: 174 174 174;
  --clr-red-rgb: 220 38 38;

  /* ================= Sidebar =================
     The sidebar background is the one themed surface the compiled Tailwind owns: style.css
     paints .sidebar a literal white. These tokens plus the two rules further down move it
     onto the token system so it can be themed like everything else. Dark mode is deliberately
     left to :is(.dark .sidebar), which outranks .sidebar on specificity, so a light theme
     choice never leaks into the dark chrome. */
  --sidebar-bg: var(--bg-base);
  --sidebar-active: var(--bg-primary);
  --sidebar-active-rgb: var(--bg-primary-rgb);

  /* ================= Background Colors ================= */
  --bg-base: #ffffff; /* White */
  --bg-muted: #4b5563; /* Slate Gray */
  --bg-black: #000000; /* Black */
  --bg-primary: var(--clr-primary);
  --bg-primary-light: var(--clr-primary-light);
  --bg-primary-dark: var(--clr-primary-dark);
  --bg-secondary: var(--clr-secondary);
  --bg-accent: var(--clr-accent);
  --bg-gray: var(--clr-gray);
  --bg-red: var(--clr-red);

  /* ================= Background Colors (RGB) ================= */
  --bg-base-rgb: 255 255 255;
  --bg-muted-rgb: 75 85 99;
  --bg-black-rgb: 00 00 00;
  --bg-primary-rgb: var(--clr-primary-rgb);
  --bg-secondary-rgb: var(--clr-secondary-rgb);
  --bg-accent-rgb: var(--clr-accent-rgb);
  --bg-gray-rgb: var(--clr-gray-rgb);
  --bg-red-rgb: var(--clr-red-rgb);

  /* ================= Text Colors ================= */
  --txt-white: #ffffff;
  --txt-muted: #6b7280;
  --txt-strong: #111827;
  --txt-primary: var(--clr-primary);
  --txt-primary-light: var(--clr-primary-light);
  --txt-primary-dark: var(--clr-primary-dark);
  --txt-secondary: var(--clr-secondary);
  --txt-accent: var(--clr-accent);
  --txt-gray: var(--clr-gray);
  --txt-red: var(--clr-red);

  /* ================= Text Colors (RGB) ================= */
  --txt-white-rgb: 255 255 255;
  --txt-muted-rgb: 107 114 128;
  --txt-black-rgb: 00 00 00;
  --txt-primary-rgb: var(--clr-primary-rgb);
  --txt-secondary-rgb: var(--clr-secondary-rgb);
  --txt-accent-rgb: var(--clr-accent-rgb);
  --txt-gray-rgb: var(--clr-gray-rgb);
  --txt-red-rgb: var(--clr-red-rgb);

  /* ================= Border Colors ================= */
  --border-base: #ebecf0;
  --border-primary: var(--clr-primary);
  --border-primary-light: var(--clr-primary-light);
  --border-primary-dark: var(--clr-primary-dark);
  --border-secondary: var(--clr-secondary);
  --border-accent: var(--clr-accent);
  --border-red: var(--clr-red);

  /* ================= Border Colors (RGB) ================= */
  --border-base-rgb: 235 236 239;
  --border-primary-rgb: var(--clr-primary-rgb);
  --border-red-rgb: var(--clr-red-rgb);
}

html {
  scroll-behavior: smooth;
}

/* A meter fill starts empty and is widened from a data attribute by page JS.
   The compiled Tailwind build has no w-0 utility, and a block level div with no width set
   fills its parent, so without this a meter reads as 100 percent for the moment before the
   script runs. Sizing cannot be a class (no fractional width utilities are compiled) and
   RULES section 3 rules out a style attribute in the markup. */
.meter-fill {
  width: 0;
}

/* sm:w-auto is used by every modal footer in this app and is NOT in the compiled Tailwind build,
   so those buttons stayed full width on desktop while the markup said otherwise. Same class of
   defect as the w-0 note above: a class that looks right, reviews as right, and does nothing.
   Defined here rather than dropped from the markup because full width buttons on a wide modal are
   the bug, not the intent. The breakpoint matches the compiled build's sm, which is 576px, not
   Tailwind's stock 640px, so this lines up with the sm:flex-row it sits beside. */
@media (min-width: 576px) {
  .sm\:w-auto {
    width: auto;
  }
}

/* Hide Scrollbar ================= */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

* {
  scrollbar-width: none;
}

/* ::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: #a9a9a9;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #888b91;
}
::-webkit-scrollbar-track {
  background: transparent;
} */

a:hover {
  cursor: pointer;
}

/* ------------------------------------------------------------------------ */
/* Global Classes ================================================= End */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* Utility Classes ================================================= Start */
/* ------------------------------------------------------------------------ */

/* Background Color ================= */
.bg-cstm-primary {
  background-color: var(--bg-primary);
}
.bg-cstm-primary-5 {
  background-color: rgb(var(--bg-primary-rgb) / 0.05);
}
.bg-cstm-primary-10 {
  background-color: rgb(var(--bg-primary-rgb) / 0.1);
}
.bg-cstm-primary-20 {
  background-color: rgb(var(--bg-primary-rgb) / 0.2);
}
.bg-cstm-primary-30 {
  background-color: rgb(var(--bg-primary-rgb) / 0.3);
}
.bg-cstm-primary-40 {
  background-color: rgb(var(--bg-primary-rgb) / 0.4);
}
.bg-cstm-primary-50 {
  background-color: rgb(var(--bg-primary-rgb) / 0.5);
}
.bg-cstm-primary-60 {
  background-color: rgb(var(--bg-primary-rgb) / 0.6);
}
.bg-cstm-primary-70 {
  background-color: rgb(var(--bg-primary-rgb) / 0.7);
}
.bg-cstm-primary-80 {
  background-color: rgb(var(--bg-primary-rgb) / 0.8);
}
.bg-cstm-primary-90 {
  background-color: rgb(var(--bg-primary-rgb) / 0.9);
}

.bg-cstm-secondary {
  background-color: var(--bg-secondary);
}
.bg-cstm-secondary-10 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.1);
}
.bg-cstm-secondary-20 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.2);
}
.bg-cstm-secondary-30 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.3);
}
.bg-cstm-secondary-40 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.4);
}
.bg-cstm-secondary-50 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.5);
}
.bg-cstm-secondary-60 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.6);
}
.bg-cstm-secondary-70 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.7);
}
.bg-cstm-secondary-80 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.8);
}
.bg-cstm-secondary-90 {
  background-color: rgb(var(--bg-secondary-rgb) / 0.9);
}

.bg-cstm-black-10 {
  background-color: rgb(var(--bg-black-rgb) / 0.1);
}
.bg-cstm-black-20 {
  background-color: rgb(var(--bg-black-rgb) / 0.2);
}
.bg-cstm-black-30 {
  background-color: rgb(var(--bg-black-rgb) / 0.3);
}
.bg-cstm-black-40 {
  background-color: rgb(var(--bg-black-rgb) / 0.4);
}
.bg-cstm-black-50 {
  background-color: rgb(var(--bg-black-rgb) / 0.5);
}
.bg-cstm-black-60 {
  background-color: rgb(var(--bg-black-rgb) / 0.6);
}
.bg-cstm-black-70 {
  background-color: rgb(var(--bg-black-rgb) / 0.7);
}
.bg-cstm-black-80 {
  background-color: rgb(var(--bg-black-rgb) / 0.8);
}
.bg-cstm-black-90 {
  background-color: rgb(var(--bg-black-rgb) / 0.9);
}

/* Gradient BG Colors */
.bg_main_gradient {
    background: linear-gradient(135deg, #ebd7ff 0%, #d9c2ff 100%);
}
.bg-cstm-primary-gradient-light {
  background: linear-gradient(
    90deg,
    rgb(var(--bg-primary-rgb) / 0.2) 0.12%,
    #fdf8f7 99.89%
  ) !important;
}
.bg-cstm-primary-gradient-dark {
  background: linear-gradient(
    146deg,
    var(--bg-primary) -50%,
    rgb(15 15 15 / 1)
  ) !important;
}
.bg-cstm-danger-gradient-light {
  background: linear-gradient(
    90deg,
    rgb(var(--bg-red-rgb) / 0.2) 0.12%,
    #fdf8f7 99.89%
  ) !important;
}
.bg-cstm-danger-gradient-dark {
  background: linear-gradient(90deg, #651e1e 0.12%, #000000 99.89%) !important;
}
.bg-cstm-common-gradient-light {
  background: linear-gradient(90deg, #f7e9ff 0.12%, #fdf8f7 99.89%) !important;
}

/* Hover Background */
.hover\:bg-cstm-primary:hover {
  background-color: var(--bg-primary);
}
.hover\:bg-cstm-primary-10:hover {
  background-color: rgb(var(--bg-primary-rgb) / 0.1);
}
.hover\:bg-cstm-primary-20:hover {
  background-color: rgb(var(--bg-primary-rgb) / 0.2);
}
.hover\:bg-cstm-primary-30:hover {
  background-color: rgb(var(--bg-primary-rgb) / 0.3);
}
.hover\:bg-cstm-primary-40:hover {
  background-color: rgb(var(--bg-primary-rgb) / 0.4);
}
.hover\:bg-cstm-primary-50:hover {
  background-color: rgb(var(--bg-primary-rgb) / 0.5);
}
.hover\:bg-cstm-primary-light:hover {
  background-color: var(--bg-primary-light);
}
.hover\:bg-cstm-primary-dark:hover {
  background-color: var(--bg-primary-dark);
}

.hover\:bg-cstm-secondary:hover {
  background-color: var(--bg-secondary);
}
.hover\:bg-cstm-secondary-10:hover {
  background-color: rgb(var(--bg-secondary-rgb) / 0.1);
}
.hover\:bg-cstm-secondary-20:hover {
  background-color: rgb(var(--bg-secondary-rgb) / 0.2);
}
.hover\:bg-cstm-secondary-30:hover {
  background-color: rgb(var(--bg-secondary-rgb) / 0.3);
}
.hover\:bg-cstm-secondary-40:hover {
  background-color: rgb(var(--bg-secondary-rgb) / 0.4);
}
.hover\:bg-cstm-secondary-50:hover {
  background-color: rgb(var(--bg-secondary-rgb) / 0.5);
}

/* Text ================= */
.text-cstm-primary {
  color: var(--txt-primary);
}
.text-cstm-primary-10 {
  color: rgb(var(--txt-primary-rgb) / 0.1);
}
.text-cstm-primary-20 {
  color: rgb(var(--txt-primary-rgb) / 0.2);
}
.text-cstm-primary-30 {
  color: rgb(var(--txt-primary-rgb) / 0.3);
}
.text-cstm-primary-40 {
  color: rgb(var(--txt-primary-rgb) / 0.4);
}
.text-cstm-primary-50 {
  color: rgb(var(--txt-primary-rgb) / 0.5);
}
.text-cstm-primary-60 {
  color: rgb(var(--txt-primary-rgb) / 0.6);
}
.text-cstm-primary-70 {
  color: rgb(var(--txt-primary-rgb) / 0.7);
}
.text-cstm-primary-80 {
  color: rgb(var(--txt-primary-rgb) / 0.8);
}
.text-cstm-primary-90 {
  color: rgb(var(--txt-primary-rgb) / 0.9);
}
.green_color_bg {
    background: linear-gradient(135deg, #f97316, #f59e0b);
}

.text-cstm-secondary {
  color: var(--txt-secondary);
}
.text-cstm-secondary-10 {
  color: rgb(var(--txt-secondary-rgb) / 0.1);
}
.text-cstm-secondary-20 {
  color: rgb(var(--txt-secondary-rgb) / 0.2);
}
.text-cstm-secondary-30 {
  color: rgb(var(--txt-secondary-rgb) / 0.3);
}
.text-cstm-secondary-40 {
  color: rgb(var(--txt-secondary-rgb) / 0.4);
}
.text-cstm-secondary-50 {
  color: rgb(var(--txt-secondary-rgb) / 0.5);
}
.text-cstm-secondary-60 {
  color: rgb(var(--txt-secondary-rgb) / 0.6);
}
.text-cstm-secondary-70 {
  color: rgb(var(--txt-secondary-rgb) / 0.7);
}
.text-cstm-secondary-80 {
  color: rgb(var(--txt-secondary-rgb) / 0.8);
}
.text-cstm-secondary-90 {
  color: rgb(var(--txt-secondary-rgb) / 0.9);
}

/* Hover Text */
.hover\:text-cstm-primary:hover {
  color: var(--txt-primary);
}
.hover\:text-cstm-primary-10:hover {
  color: rgb(var(--txt-primary-rgb) / 0.1);
}
.hover\:text-cstm-primary-20:hover {
  color: rgb(var(--txt-primary-rgb) / 0.2);
}
.hover\:text-cstm-primary-30:hover {
  color: rgb(var(--txt-primary-rgb) / 0.3);
}
.hover\:text-cstm-primary-40:hover {
  color: rgb(var(--txt-primary-rgb) / 0.4);
}
.hover\:text-cstm-primary-50:hover {
  color: rgb(var(--txt-primary-rgb) / 0.5);
}
.hover\:text-cstm-primary-60:hover {
  color: rgb(var(--txt-primary-rgb) / 0.6);
}
.hover\:text-cstm-primary-70:hover {
  color: rgb(var(--txt-primary-rgb) / 0.7);
}
.hover\:text-cstm-primary-80:hover {
  color: rgb(var(--txt-primary-rgb) / 0.8);
}
.hover\:text-cstm-primary-90:hover {
  color: rgb(var(--txt-primary-rgb) / 0.9);
}

.hover\:text-cstm-secondary:hover {
  color: var(--txt-secondary);
}
.hover\:text-cstm-secondary-10:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.1);
}
.hover\:text-cstm-secondary-20:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.2);
}
.hover\:text-cstm-secondary-30:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.3);
}
.hover\:text-cstm-secondary-40:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.4);
}
.hover\:text-cstm-secondary-50:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.5);
}
.hover\:text-cstm-secondary-60:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.6);
}
.hover\:text-cstm-secondary-70:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.7);
}
.hover\:text-cstm-secondary-80:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.8);
}
.hover\:text-cstm-secondary-90:hover {
  color: rgb(var(--txt-secondary-rgb) / 0.9);
}

/* Buttons ===============*/
.btn {
  font-size: 12px;
  transition-duration: 300ms;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .btn {
    font-size: 14px;
    transition-duration: 300ms;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}
/* primary Btn */
.btn-cstm-primary {
  background-color: var(--bg-primary);
  color: var(--txt-white) !important;
  border: 1.5px solid var( --border-primary);
}

.btn-cstm-primary:hover {
  background-color: var(--bg-primary-dark);
  color: var(--bg-base);
}


/* Secondary Btn */
.btn-cstm-secondary {
  background-color: transparent;
  border: 1.5px solid var( --border-primary-dark);
  color: var(--txt-primary-dark);
  transition: all .25s ease;
}

.dark .btn-cstm-secondary {
  border-color: var(--border-primary-dark);
  color: var(--txt-primary-dark);
}
.dark .btn-cstm-secondary span {
  color: var(--txt-primary-dark);
}

.btn-cstm-secondary:hover {
  background-color: var(--bg-primary);
  color: var(--txt-white);
  border-color: var(--border-primary);
}

.btn-cstm-secondary:hover span {
  color: var(--txt-white);
}



/* Muted Btn */
.btn-cstm-muted {
  background-color: var(--bg-gray);
  color: var(--txt-white);
  border: 1.5px solid var(--bg-gray);
}
.btn-cstm-muted:hover {
  background-color: rgb(var(--bg-gray-rgb) / 0.85);
  color: var(--txt-white);
}

/* Danger btn Dark*/
.btn-cstm-danger {
  background-color: var(--bg-red);
  color: var(--txt-white);
}
.btn-cstm-danger:hover {
  background-color: rgb(var(--bg-red-rgb) / 0.85);
  color: var(--txt-white);
}

/* Danger btn Light*/
.btn-cstm-danger.light {
  background-color: var(--bg-base);
  color: var(--txt-red);
  border: 1px solid var(--border-red);
}
.dark .btn-cstm-danger.light {
  background-color: unset;
}
.btn-cstm-danger.light:hover {
  background-color: var(--bg-base);
  color: var(--txt-red);
  border: 1px solid rgb(var(--border-red-rgb) / 0.85);
}

/* Border ================= */
.border-cstm-primary {
  border-color: var(--border-primary);
}
.border-t-cstm-primary {
  border-top-color: var(--border-primary);
}
.border-b-cstm-primary {
  border-bottom-color: var(--border-primary);
}
.border-l-cstm-primary {
  border-left-color: var(--border-primary);
}
.border-r-cstm-primary {
  border-right-color: var(--border-primary);
}

.border-cstm-secondary {
  border-color: var(--border-secondary);
}

/* Outline =============== */
.outline-cstm-primary {
  outline-color: var(--border-primary);
}

/* Clamp for limit lines ================= */
.cstm-limit-line {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 1.5em;
}

.cstm-limit-line-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 3em;
}

/* Scroll Bar ==================== */
.cstm-scroll-sm {
  scrollbar-width: thin;
  scrollbar-color: #cecece transparent;
}
.cstm-scroll-sm::-webkit-scrollbar {
  width: 6px;
}
.cstm-scroll-sm::-webkit-scrollbar-thumb {
  background-color: #d4d8df;
  border-radius: 9999px;
  min-height: 30px;
  margin: 4px;
}
.cstm-scroll-sm::-webkit-scrollbar-thumb:hover {
  background-color: #a5aab5;
}
.cstm-scroll-sm::-webkit-scrollbar-track {
  background: transparent;
}

/* Hedden scroll */
.scroll-hidden {
  overflow: auto;
  scrollbar-width: none; /* Firefox */
}
.scroll-hidden::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Edge */
}

/* Common Spacing ============================ */
.cstm-inline-space {
  padding-inline: 20px;
}
.cstm-block-space {
  padding-block: 20px;
}

@media (min-width: 768px) {
  .cstm-inline-space {
    padding-inline: 40px;
  }
  .cstm-block-space {
    padding-block: 40px;
  }
}

/* ------------------------------------------------------------------------ */
/* Utility Classes ================================================= End */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* Dark Mode ================================================= Start */
/* ------------------------------------------------------------------------ */

.dark {
  /* Categorical chart palette, lifted for the near black card. The :root values are tuned
     for a white surface; on neutral-800 the 600 shades read muddy, so each hue moves up a
     step or two. The brand token is left alone: it is the same colour in both themes. */
  --chart-2: #A78BFA;
  --chart-3: #F472B6;
  --chart-4: #2DD4BF;
  --chart-5: #818CF8;
  --chart-6: #FB923C;

  /* Dark Mode Color Conflict */
  .text-cstm-primary {
    color: var(--txt-primary-light);
  }
  .bg-cstm-primary {
    background-color: var(--bg-primary-light);
  }

  /* Text */
  .drk-text-cstm-primary {
    color: var(--txt-primary-light);
  }

  /* Text Hover */
  .hover\:drk-text-cstm-primary:hover {
    color: var(--txt-primary-light);
  }

  /* Background */
  .drk-bg-cstm-primary {
    background-color: var(--bg-primary-light);
  }
  .drk-bg-cstm-primary-10 {
    background-color: rgb(var(--bg-primary-rgb) / 0.1);
  }
  .drk-bg-cstm-primary-20 {
    background-color: rgb(var(--bg-primary-rgb) / 0.2);
  }
  .drk-bg-cstm-primary-30 {
    background-color: rgb(var(--bg-primary-rgb) / 0.3);
  }
  .drk-bg-cstm-primary-40 {
    background-color: rgb(var(--bg-primary-rgb) / 0.4);
  }
  .drk-bg-cstm-primary-50 {
    background-color: rgb(var(--bg-primary-rgb) / 0.5);
  }

  /* BG Hover */
  .hover\:drk-bg-cstm-primary:hover {
    background-color: var(--bg-primary-light);
  }

  /* Gradient BG */
  .drk-bg-cstm-primary-gradient-light {
    background: linear-gradient(
      90deg,
      rgb(var(--bg-primary-rgb) / 0.2) 0.12%,
      #fdf8f7 99.89%
    ) !important;
  }
  .drk-bg-cstm-primary-gradient-dark {
    background: linear-gradient(
      146deg,
      var(--bg-primary) -50%,
      rgb(15 15 15 / 1)
    ) !important;
  }
  .drk-bg-cstm-danger-gradient-light {
    background: linear-gradient(
      90deg,
      rgb(var(--bg-red-rgb) / 0.2) 0.12%,
      #fdf8f7 99.89%
    ) !important;
  }
  .drk-bg-cstm-danger-gradient-dark {
    background: linear-gradient(
      90deg,
      #651e1e 0.12%,
      #000000 99.89%
    ) !important;
  }
  .drk-bg-cstm-common-gradient-light {
    background: linear-gradient(90deg, #374151 100%, #374151 100%) !important;
  }
}

/* ------------------------------------------------------------------------ */
/* Dark Mode ================================================= End */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* Default Settings ================================================= Start */
/* ------------------------------------------------------------------------ */

/* Search Bar ============================= */
.navbar-search input {
  background-color: var(--bg-base);
}

/* Select Dropdown Setting ================ */
select,
::picker(select) {
  appearance: base-select;
  border: 1px solid #dddddd;
  border-radius: 5px;
  margin-top: 4px;
}
select::picker-icon {
  visibility: hidden;
}
.dark option {
  background: #374151;
  color: var(--txt-white);
}
option[selected],
option:hover {
  background-color: var(--bg-primary);
  color: var(--txt-white);
}
option::checkmark {
  padding-left: 10px;
}

/* Check Box ==================*/
input:checked ~ .peer-checked\:bg-cstm-primary {
  background-color: var(--bg-primary);
}

/* Pseudo Setting ================= */
[type="text"],
[type="string"],
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
  font-size: 14px;
}
[type="checkbox"]:checked,
[type="radio"]:checked,
.dark [type="checkbox"]:checked,
.dark [type="radio"]:checked,
[type="checkbox"]:indeterminate,
[type="checkbox"]:indeterminate:hover,
[type="checkbox"]:indeterminate:focus {
  background-color: var(--bg-primary);
}
[type="text"]:focus,
[type="string"]:focus,
[type="checkbox"]:focus,
[type="string"]:focus,
[type="email"]:focus,
[type="url"]:focus,
[type="password"]:focus,
[type="number"]:focus,
[type="date"]:focus,
[type="datetime-local"]:focus,
[type="month"]:focus,
[type="search"]:focus,
[type="tel"]:focus,
[type="time"]:focus,
[type="week"]:focus,
[multiple]:focus,
textarea:focus,
select:focus {
  --tw-ring-color: var(--border-primary);
  border-color: var(--border-primary) !important;
}

/* Table Settings */
.table th,
.table td {
  text-align: start;
}
.table td:last-child,
.table th:last-child {
  text-align: center;
}

/* ------------------------------------------------------------------------ */
/* Default Settings ================================================= End */
/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* Custom Styles ================================================= Start */
/* ------------------------------------------------------------------------ */

/* Main Body UI ================ */
.dashboard-main-body {
  width: 100%;
}
.dashboard-main {
  transition: all 0.3s;
}

/* When sidebar is active but NOT hovered → hide text */
.sidebar.active .sidebar-menu li a span,
.sidebar.active #plan-box-content {
  display: inline-block;
  transform: translateX(-50px);
  opacity: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.3s ease-in-out,
    width 0.3s ease-in-out;
}
.sidebar #sidebar-plan-box .menu-icon  {
  display: none;
}

.sidebar.active #sidebar-plan-box .menu-icon  {
  display: block;
}

.sidebar.active:hover #sidebar-plan-box .menu-icon  {
  display: none;
}


/* When hovering active sidebar → reveal text smoothly */
.sidebar.active:hover .sidebar-menu li a span ,
.sidebar.active:hover #plan-box-content{
  display: inline-block;
  transform: translateX(0);
  opacity: 1;
  width: auto; /* expands to natural width */
  height: 100%;
}

/* Navbar ====================== */

/* style.css pins `.navbar-header { height: 4.5rem }` while both of its inner rows are
   flex-wrap. Below roughly 500px the left row wraps the Upgrade button onto a second line,
   the content grows past the fixed box, and the overflow paints straight over the page
   heading underneath. It is the shared navbar, so it did that on every page.

   Fixed here rather than in style.css because that file is compiled Tailwind and this repo
   has no config for it. custom-style.css is linked after it and this selector has the same
   specificity, so the later rule wins: the same mechanism the .sidebar background below
   uses. The bar keeps its exact size at every width where it already fitted, and is allowed
   to grow at the widths where it did not. */
.navbar-header {
  height: auto;
  min-height: 4.5rem;
  box-shadow: 0px 0px 10px #00000030;
}

/* Below 480px both groups inside the bar wrap on their own, so the site name ends up beside
   the theme toggle and the upgrade button beside nothing. Letting the row itself wrap moves
   the whole right hand group down as one piece instead. */
@media (max-width: 480px) {
  .navbar-row {
    flex-wrap: wrap;
    row-gap: 0.75rem;
  }
}

/* Data tables ================= */

/* One treatment for all seven result tables: the six audit reports that audit-table.js
   drives, and the link opportunities table that partials/suggested-link-row.php renders.
   Both put `stacked-table` on the <table> and a `data-label` on every labelled cell, so this
   is the only place the behaviour is described.

   Why not leave the horizontal scroll RULES 11.4 prescribes. A scrolling table is the right
   answer when the job is comparing values down a column, because the alignment is the point.
   These are not that. Each row is one independent finding with one action, and the action and
   the status are the rightmost columns, so on a phone the two things a person came to do were
   the two furthest out of reach. On link opportunities it was worse: the whole point of that
   screen is seeing the change and the button together, and you could not.

   Above 640px nothing here applies and the markup stays class for class what RULES 11.4
   specifies. The overflow wrapper stays too; below the breakpoint the table is 100% wide, so
   there is nothing left for it to scroll. */
.stacked-table td {
  vertical-align: top;
}

@media (max-width: 639px) {
  .stacked-table thead {
    display: none;
  }

  /* min-width matters as much as width here. style.css gives `.table` a
     `min-width: max-content`, which is what makes a wide table scroll rather than squash,
     and a minimum beats a width: without releasing it the stacked table stayed as wide as
     its longest line and still ran off the side, header hidden and labels printed, looking
     for all the world like the treatment had worked. */
  .stacked-table,
  .stacked-table tbody,
  .stacked-table tr,
  .stacked-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .stacked-table tr {
    padding: 0.75rem 0;
  }

  /* A cell with no label and nothing in it, which is the tick box column on a row that
     cannot be selected. As a block it would be a blank band across the top of the card. */
  .stacked-table td:empty {
    display: none;
  }

  /* The theme gives `.table` a border and every cell a bottom rule, both of which look right
     collapsed into a grid and wrong once the cells are stacked: an outline around the whole
     list and a line under every single field. The row divider on the tbody already separates
     one finding from the next, so it is the only one kept. */
  .stacked-table {
    border-width: 0;
  }

  .stacked-table td {
    border-bottom-width: 0;
  }

  /* Only labelled cells are restyled. The loading, empty and error rows are a single
     colspan cell carrying text-center, and they have no label, so they keep it. */
  .stacked-table td[data-label] {
    padding: 0.25rem 0;
    text-align: start;
  }

  .stacked-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 0.125rem;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-transform: uppercase;
    color: #737373;
  }
}

/* Sidebar ===================== */
.cstm-sidebar.active .sidebar-logo img {
  max-height: 3rem;
}

/* The sidebar background, moved off the compiled Tailwind literal.
   style.css paints `.sidebar { background-color: rgb(255 255 255 / var(--tw-bg-opacity)) }`.
   custom-style.css is linked after it and this selector has the same specificity, so the
   later rule wins and the surface becomes themable. `:is(.dark .sidebar)` is (0,2,0) and
   still outranks both, which is deliberate: the dark chrome keeps its own colour. */
.sidebar {
  background-color: var(--sidebar-bg);
}

.cstm-sidebar-menu li > a.active-page,
.cstm-sidebar-menu .dropdown-open > a,
.cstm-sidebar-menu li.dropdown.open > a {
  background-color: var(--sidebar-active) !important;
  color: var(--txt-white) !important;
}
.cstm-sidebar-menu .dropdown-open {
  padding-top: 5px;
  transition-duration: 300ms;
}
.cstm-sidebar-menu .dropdown {
  transition-duration: 300ms;
}
.cstm-sidebar-menu li > a.active-page:hover {
  background-color: var(--bg-accent);
}
.cstm-sidebar-menu li a:hover {
  color: var(--txt-primary);
}

/* Progress Bar Brightness */
#completion-bar::after {
  content: "";
  position: absolute;
  bottom: 2px;
  padding: 4px 2px;
  background: #ffffff;
  border-radius: 9999px;
  box-shadow:
    0 0 5px 2px rgba(255, 255, 255, 0.8),
    /* Inner glow */ 0 0 10px 4px rgba(255, 255, 255, 0.5);
  right: 3px;
}

/* View Profile ================= */
.cstm-avatar-upload .avatar-preview {
  border-color: var(--border-primary);
}
.cstm-tab-style-gradient button[aria-selected="true"] {
  /* background: linear-gradient(180deg,  rgb(var(--bg-primary-rgb)/ 0.1) 0%, rgba(72, 127, 255, 0.03) 100%);
  border-top: 2px solid var(--border-primary); */
  background: no-repeat;
  border-top: none;
  border-bottom: 4px solid var(--border-primary);
  color: var(--txt-primary);
}
.cstm-tab-style-gradient button[aria-selected="true"]:hover {
  color: var(--clr-primary);
}
.dark .cstm-tab-style-gradient button[aria-selected="true"] {
  color: var(--clr-primary);
}

/* Faq ===========================*/
.cstm-accordion-item [aria-expanded="true"],
.cstm-accordion-item [aria-expanded="true"] span {
  color: var(--txt-primary);
}
.cstm-accordion-item [aria-expanded="true"] {
  background-color: rgb(var(--bg-primary-rgb) / 0.1);
}
.cstm-accordion-item [aria-expanded="true"]:hover {
  background-color: rgb(var(--bg-primary-rgb) / 0.1);
}

/* Schema Template =============== */
.cstm-form-select {
  padding-inline-end: 2.25rem !important;
}

/* Alert Container ================= */
.toast-hidden {
  opacity: 0;
  transform: translateY(-10px);
}

.toast-show {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

.toast-hide {
  opacity: 0;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Setup Wizard  =========================================*/

/* Step 2 - Analysis */

.loader-dot {
  animation: pulse 1.5s ease-in-out infinite;
}

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

@keyframes pulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
}

/* Unblur */
.result-card-blurred {
  filter: blur(2px);
  transition:
    filter 0.8s ease-out,
    opacity 0.8s ease-out;
  opacity: 0.5;
}

.result-card-unblurred {
  filter: blur(0);
  opacity: 1;
}

/* Icon Fade-in Effect */
.status-icon-placeholder {
  transition: opacity 0.7s ease-in;
  opacity: 0;
}

.status-icon-visible {
  opacity: 1;
}

/* ---Icon Success Animation (Pop/Jiggle Effect) --- */
@keyframes success-pop {
  0% {
    transform: scale(0.7) rotate(-20deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.2) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
.animate-success-pop {
  animation: success-pop 0.5s ease-out forwards;
}

/* Icon Warning Animation (Subtle Shake/Pulse) --- */
@keyframes warning-pulse {
  0%,
  100% {
    transform: translateX(0);
    opacity: 1;
  }
  25% {
    transform: translateX(-1px);
  }
  50% {
    transform: translateX(1px);
  }
  75% {
    transform: translateX(-1px);
  }
}
.animate-warning-pulse {
  animation: warning-pulse 0.5s ease-in-out 2;
}

/* Step-3 */
@keyframes scan-line {
  0% {
    transform: translateX(-100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.scanning-loader {
  position: relative;
  width: 35%;
  height: 10px;
  background-color: #e5e7eb;
  border-radius: 5px;
  overflow: hidden;
}

.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    var(--bg-primary) 50%,
    transparent
  );
  animation: scan-line 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

/* * 2. ANIMATED PROGRESS BARS */
.progress-bar-inner {
  transition: width 0.9s ease-out;
}

/* Aleart Popup Icon =====================  */

.alert-popup-title {
  font-size: 32px;
  font-weight: 700;
  color: rgb(62, 182, 62);
  margin-top: 20px;
  margin-bottom: 15px;
  position: relative;
}
.alert-popup-message {
  color: #555;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.5;
  margin-bottom: 25px;
}
/* --- Success Checkmark Styles (Corrected & Enhanced) --- */

.check-icon {
  /* ... (rest of the styles are fine) ... */
  width: 100px;
  height: 100px;
  position: relative;
  border-radius: 50%;
  box-sizing: content-box;
  border: 5px solid rgb(62, 182, 62);
}

/* Fix for the masking elements (::before and ::after) */
.check-icon::before {
  top: 5px;
  left: -3px;
  width: 40px;
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}
.check-icon::after {
  top: 0;
  left: 40px;
  width: 70px;
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  /* This animation definition is the key: */
  animation: rotate-circle 1.2s ease-in-out;
}

.check-icon::before {
  top: 5px;
  left: -3px;
  width: 40px; /* Adjusted width */
  transform-origin: 100% 50%;
  border-radius: 100px 0 0 100px;
}

.check-icon::after {
  top: 0;
  left: 40px; /* Adjusted left position */
  width: 70px; /* Adjusted width */
  transform-origin: 0 50%;
  border-radius: 0 100px 100px 0;
  animation: rotate-circle 1.2s ease-in-out; /* Faster, more punchy animation */
}

.icon-line {
  height: 6px; /* Slightly thicker line */
  background-color: rgb(62, 182, 62);
  display: block;
  border-radius: 3px; /* Softer edges */
  position: absolute;
  z-index: 10;
}

.icon-line.line-tip {
  top: 55px;
  left: 20px;
  width: 30px; /* Adjusted size */
  transform: rotate(45deg);
  animation: icon-line-tip 0.75s ease-out 0.2s; /* Delayed to start after circle animation */
}

.icon-line.line-long {
  top: 45px;
  right: 10px;
  width: 55px; /* Adjusted size */
  transform: rotate(-45deg);
  animation: icon-line-long 0.75s ease-out 0.2s; /* Delayed to start after circle animation */
}

.icon-circle {
  top: -5px;
  left: -5px;
  z-index: 10;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  box-sizing: content-box;
  /* Added a subtle pulsating shadow for polish */
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.2);
  animation: circle-pulse 1.2s ease-out 1;
}

.icon-fix {
  top: 10px;
  width: 6px; /* Adjusted size */
  left: 40px; /* Adjusted position */
  z-index: 1;
  height: 95px; /* Adjusted size */
  position: absolute;
  transform: rotate(-45deg);
  background-color: #ffffff;
}

/* --- Keyframes --- */

@keyframes rotate-circle {
  0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-45deg);
  } /* Keep the mask stationary initially */
  /* Increased the rotation from -405deg to -420deg to ensure full completion */
  100% {
    transform: rotate(-420deg);
  }
}

@keyframes circle-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
  }
  50% {
    box-shadow: 0 0 0 15px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

@keyframes icon-line-tip {
  0% {
    width: 0;
    left: 10px;
    top: 40px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 30px;
    left: 17px;
    top: 55px;
  } /* Final position */
}

@keyframes icon-line-long {
  0% {
    width: 0;
    right: 50px;
    top: 50px;
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    width: 55px;
    right: 10px;
    top: 45px;
  } /* Final position */
}
/* Aleart Popup Icon =====================  */

/* SPINNER ORBITS =================================*/
.spinner-box {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
}
.leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.blue-orbit {
  width: 165px;
  height: 165px;
  border: 3px solid var(--txt-primary);
  -webkit-animation: spin3D 3s linear 0.2s infinite;
}
.green-orbit {
  width: 120px;
  height: 120px;
  border: 3px solid var(--txt-primary);
  -webkit-animation: spin3D 2s linear 0s infinite;
}
.red-orbit {
  width: 90px;
  height: 90px;
  border: 3px solid var(--txt-primary);
  -webkit-animation: spin3D 1s linear 0s infinite;
}
.white-orbit {
  width: 60px;
  height: 60px;
  border: 3px solid var(--txt-primary);
  -webkit-animation: spin3D 10s linear 0s infinite;
}

.w1 {
  transform: rotate3D(1, 1, 1, 90deg);
}

.w2 {
  transform: rotate3D(1, 2, 0.5, 90deg);
}

.w3 {
  transform: rotate3D(0.5, 1, 2, 90deg);
}

@keyframes spin3D {
  from {
    transform: rotate3d(0.5, 0.5, 0.5, 360deg);
  }

  to {
    transform: rotate3d(0deg);
  }
}

/* Check Animation Step 3 */
.checkmark__circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 50px;
  stroke-miterlimit: 20;
  stroke: rgb(62, 182, 62);
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: block;
  stroke-width: 4;
  stroke: #fff;
  stroke-miterlimit: 10;
  margin: 10% auto;
  box-shadow: inset 0px 0px 0px rgb(62, 182, 62);
  animation:
    fill 0.4s ease-in-out 0.4s forwards,
    scale 0.3s ease-in-out 0.9s both;
}
.checkmark__check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%,
  100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 30px #7ac142;
  }
}

/* disable text selection */
.select-none {
  user-select: none;
}

/* make element 60% opaque */
.opacity-60 {
  opacity: 0.6;
}

/* apply grayscale filter */
.grayscale {
  filter: grayscale(100%);
}

/* apply 1px blur filter */
.blur-\[1px\] {
  filter: blur(1px);
}
.blur-\[2px\] {
  filter: blur(2px);
}

/* Review Popup Styles - Start */
.review-numbers-selected {
  transform: scale(1.1);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.5),
    0 0 0 6px var(--clr-primary);
  opacity: 0.9;
}
.review-numbers:hover {
  transform: scale(1.1);
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, 0.5),
    0 0 0 6px var(--clr-primary);
  opacity: 0.9;
}

/* 10-Step Color Gradient (HSL adjusted for smooth Red-to-Green transition) */
.bg-c1 {
  background-color: hsl(0, 80%, 65%);
}

/* Red (1) */
.bg-c2 {
  background-color: hsl(13, 80%, 65%);
}

.bg-c3 {
  background-color: hsl(27, 80%, 65%);
}

.bg-c4 {
  background-color: hsl(40, 80%, 60%);
}

.bg-c5 {
  background-color: hsl(53, 80%, 55%);
}

/* Yellow */
.bg-c6 {
  background-color: hsl(67, 80%, 50%);
}

.bg-c7 {
  background-color: hsl(80, 75%, 45%);
}

.bg-c8 {
  background-color: hsl(93, 70%, 40%);
}

.bg-c9 {
  background-color: hsl(107, 65%, 35%);
}

.bg-c10 {
  background-color: hsl(120, 60%, 30%);
}

/* Green (10) */
/* Review Popup Styles - End */

#progressCircle {
  transition: background 0.6s linear;
}
#progressText {
  transition: all 0.3s ease-in-out;
}

.max-w-setup-wizard {
  max-width: 82rem;
}

.break-words{
  overflow-wrap: anywhere;
}

/* ==================================================================
   Pricing page utilities.

   style.css is a pre-compiled Tailwind build with no config in this
   repo, and it never emitted these class names even though pricing.php
   uses them. The result: the mobile card view never hid on desktop
   (no .lg\:hidden), prices had no size (no .text-4xl/.text-5xl), the
   "Most Popular" badge never offset (no .-top-3) and feature lists had
   no vertical rhythm (no .space-y-*).

   Everything here is scoped to .pricing-page on purpose. These same
   class names appear in the navbar, popups and admin pages, where they
   are currently inert; defining them globally would silently restyle
   those screens. Breakpoints match the compiled build:
   sm 576, md 768, lg 992, xl 1200.
================================================================== */
.max-w-custom-pricing {
    max-width: 80rem;
}
.pricing-page .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
.pricing-page .text-5xl { font-size: 3rem; line-height: 1; }
.pricing-page .tracking-wide { letter-spacing: 0.025em; }
.pricing-page .leading-relaxed { line-height: 1.625; }

.pricing-page .-top-3 { top: -0.75rem; }
.pricing-page .-bottom-3 { bottom: -0.75rem; }
.pricing-page .-right-4 { right: -1rem; }
.pricing-page .-right-20 { right: -5rem; }
.pricing-page .bottom-4 { bottom: 1rem; }
.pricing-page .bottom-10 { bottom: 2.5rem; }

.pricing-page .align-top { vertical-align: top; }
.pricing-page .align-middle { vertical-align: middle; }
.pricing-page .border-l { border-left-width: 1px; }
.pricing-page .h-auto { height: auto; }
.pricing-page .h-fit { height: -moz-fit-content; height: fit-content; }

.pricing-page .max-w-max { max-width: -moz-max-content; max-width: max-content; }
.pricing-page .max-w-md { max-width: 28rem; }
.pricing-page .max-w-xs { max-width: 20rem; }

.pricing-page .ml-1 { margin-left: 0.25rem; }
.pricing-page .mr-2 { margin-right: 0.5rem; }
.pricing-page .duration-200 { transition-duration: 200ms; }

.pricing-page .space-y-3 > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }
.pricing-page .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; }
.pricing-page .space-y-10 > :not([hidden]) ~ :not([hidden]) { margin-top: 2.5rem; }

.pricing-page .hover\:border-cstm-primary:hover { border-color: var(--bg-primary); }

:is(.dark .pricing-page .dark\:text-neutral-100) { color: rgb(245 245 245); }
:is(.dark .pricing-page .dark\:text-neutral-300) { color: rgb(212 212 212); }
:is(.dark .pricing-page .dark\:border-neutral-700) { border-color: rgb(64 64 64); }

/* Keep the 4 column plan comparison legible on narrow desktops; its
   wrapper already has overflow-x-auto so it scrolls instead of squashing. */
.pricing-page .pricing-compare-table { min-width: 860px; }

.pricing-page .border-dashed { border-style: dashed; }
.pricing-page .italic { font-style: italic; }

/* Feature tooltips.

   The reference gives each one a `.tooltip_btn` trigger and a `.tooltip` panel, neither of
   which the compiled build defines, then makes up the difference in script: it moves every
   tooltip to document.body on load and recomputes top and left against the viewport on
   every hover. This does it with attr(), the same mechanism the collapsed sidebar uses for
   its labels, so there is no positioning code and nothing to move. */
.pricing-page .pricing-tooltip {
    position: relative;
    cursor: help;
}

.pricing-page .pricing-tooltip::after {
    content: attr(data-pricing-tooltip);
    position: absolute;
    inset-inline-start: 50%;
    bottom: calc(100% + 0.5rem);
    transform: translateX(-50%);
    z-index: 30;
    width: max-content;
    max-width: 18rem;
    white-space: normal;
    text-align: start;
    border-radius: 0.5rem;
    background-color: #111827;
    color: #ffffff;
    padding: 0.5rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.4;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

.pricing-page .pricing-tooltip:hover::after,
.pricing-page .pricing-tooltip:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.dark .pricing-page .pricing-tooltip::after {
    background-color: #f3f4f6;
    color: #111827;
}

@media (min-width: 992px) {
  /* Without this the mobile plan cards render underneath the desktop table. */
  .pricing-page .lg\:hidden { display: none; }
  .pricing-page .lg\:items-end { align-items: flex-end; }
  .pricing-page .lg\:text-5xl { font-size: 2.25rem; line-height: 1; }
}
.toggle-btn.active {
    background: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, .15);
}


.custom-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 9999px;
    background: var(--bg-primary);
    color: #fff;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all 0.25s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}
.slick-next.custom-arrow {
    right: 0px;
}

.slick-prev.custom-arrow {
    left: 0px;
}
/* Collapsed sidebar ==========================================================
   The stock theme collapses to `width: auto` and then re-expands the whole panel on
   hover, so a collapsed sidebar is only ever collapsed while the pointer is elsewhere.
   That fights the collapse rather than supporting it: the layout jumps every time the
   pointer crosses the rail.

   Here a collapsed sidebar stays collapsed. It is pinned to the 5rem rail that
   `.dashboard-main.active` already reserves, shows the favicon in place of the wordmark,
   and names each item with a tooltip on hover instead of reflowing the page. The expanded
   sidebar is untouched. */

.cstm-sidebar.active {
    width: 5rem;
}

@media (min-width: 1200px) {
    .cstm-sidebar.active:hover {
        width: 5rem;
        inset-inline-start: 0;
    }
    /* Undo the theme's hover-to-expand. */
    .cstm-sidebar.active:hover .sidebar-logo img.light-logo,
    .cstm-sidebar.active:hover .sidebar-logo img.dark-logo {
        display: none;
    }
    .cstm-sidebar.active:hover .sidebar-logo img.logo-icon {
        display: inline-block;
    }
    .cstm-sidebar.active:hover .sidebar-menu li.sidebar-menu-group-title {
        display: none;
    }
    .cstm-sidebar.active:hover .sidebar-menu li a span {
        display: inline-block;
        transform: translateX(-50px);
        opacity: 0;
        width: 0;
        height: 0;
        overflow: hidden;
    }
    .cstm-sidebar.active:hover .sidebar-plan-box {
        display: none;
    }
}

/* The plan box is the one piece of sidebar content with no icon-sized form. The rail is
   5rem wide, the box is not, so on collapse its heading, its copy and its Upgrade button
   all overflowed the rail and sat on top of the page. It goes away entirely, the same way
   the wordmark gives way to the favicon and the group titles disappear. Expanded state is
   untouched: this rule only exists inside .cstm-sidebar.active. */
.cstm-sidebar.active .sidebar-plan-box {
    display: none;
}

.cstm-sidebar.active .sidebar-logo {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.cstm-sidebar.active .sidebar-menu-area {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.cstm-sidebar.active .sidebar-menu li a {
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

.cstm-sidebar.active .sidebar-menu li a .menu-icon {
    margin-inline-end: 0;
}

/* Tooltip. The label is read from data-label so no text is duplicated in the markup and
   nothing has to be generated by PHP or injected by script. */
.cstm-sidebar.active .sidebar-menu li a[data-label] {
    position: relative;
}

.cstm-sidebar.active .sidebar-menu li a[data-label]::after {
    content: attr(data-label);
    position: absolute;
    inset-inline-start: calc(100% + 0.75rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;
    white-space: nowrap;
    border-radius: 0.5rem;
    background-color: #111827;
    color: #ffffff;
    padding: 0.375rem 0.625rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-in-out;
}

.cstm-sidebar.active .sidebar-menu li a[data-label]:hover::after,
.cstm-sidebar.active .sidebar-menu li a[data-label]:focus-visible::after {
    opacity: 1;
    visibility: visible;
}

.dark .cstm-sidebar.active .sidebar-menu li a[data-label]::after {
    background-color: #f3f4f6;
    color: #111827;
}

/* No tooltips on touch layouts, where the sidebar is a full-width drawer anyway. */
@media (max-width: 1199px) {
    .cstm-sidebar.active {
        width: 250px;
    }
    .cstm-sidebar.active .sidebar-menu li a[data-label]::after {
        content: none;
    }
    .cstm-sidebar.active .sidebar-logo img.light-logo {
        display: inline-block;
    }
    .cstm-sidebar.active .sidebar-logo img.logo-icon {
        display: none;
    }
    .cstm-sidebar.active .sidebar-menu li a span {
        display: inline-block;
        transform: none;
        opacity: 1;
        width: auto;
        height: auto;
    }
    .cstm-sidebar.active .sidebar-menu li.sidebar-menu-group-title {
        display: block;
    }
    .cstm-sidebar.active .sidebar-logo,
    .cstm-sidebar.active .sidebar-menu li a {
        justify-content: flex-start;
    }
}

/*
 * Room for the reveal button inside a password field.
 *
 * The compiled style.css has no working right padding utility large enough for this. Its
 * .pe-* scale stops at 1.5rem, and .pr-8 is misbuilt: the rule sets padding-left, not
 * padding-right. The reference's admin sign in asks for .pr-11, which no stylesheet in
 * either project defines, so its own toggle sits on top of the typed password.
 *
 * Declared here rather than as an inline style attribute, which RULES section 3 forbids.
 */
.icon-field .form-control.has-trailing-action {
  padding-inline-end: 2.75rem;
}

/*
 * Profile dropdown positioning.
 *
 * The compiled theme has no position on .dropdown-menu or .dropdown-menu-sm, because the
 * reference relies on flowbite JS to place the panel. This app toggles the panel with
 * assets/js/app.js instead, so without a rule the panel joined the header flex row and
 * overflowed it. Anchored here under the avatar inside its relative wrapper, right aligned,
 * above the page, and capped so it never runs off a narrow viewport. Declared in a stylesheet
 * rather than an inline style attribute, which RULES section 3 forbids.
 */
.profile-dropdown {
  position: absolute;
  inset-inline-end: 0;
  top: calc(100% + 0.5rem);
  z-index: 30;
  max-width: calc(100vw - 2rem);
}

/*
 * The chip hover borders RULES section 11.3 prescribes.
 *
 * Section 11.3 pairs each chip accent with a matching hover border. None of those four pairings
 * worked. `hover:border-cstm-primary` is defined in this file but only under a `.pricing-page`
 * ancestor, so the audit summary cards on the dashboard and the audits screen have carried it
 * since they were written and have never drawn a border. The other three were never defined
 * anywhere, in either stylesheet, so a chip declaring `hover:border-success-500` declared nothing.
 *
 * Values are the literal triplets the compiled build uses for the matching `bg-` utilities rather
 * than custom properties: there are no `--success-500` style variables in this project, and a rule
 * referring to one would be a second class that reads correctly and paints nothing.
 */
.hover\:border-cstm-primary:hover { border-color: var(--bg-primary); }
.hover\:border-success-500:hover  { border-color: rgb(34 197 94); }
.hover\:border-warning-500:hover  { border-color: rgb(234 179 8); }
.hover\:border-danger-500:hover   { border-color: rgb(239 68 68); }
.hover\:border-neutral-400:hover  { border-color: rgb(156 163 175); }