@import url("https://fonts.googleapis.com/css2?family=Montserrat&display=swap");

:root {
  --transition-duration: 0.3s;
  --bg-success:#32dbb4;
}

html {
  transition: background-color var(--transition-duration), color var(--transition-duration);
  overflow: hidden !important;
}

:root, [data-bs-theme=light] { 
    --bs-primary-bg: #F5F5F6;
    --bs-primary-rgb: 68,87,117;
    --bs-secondary-rgb: 120, 136, 153;
    --bs-success-rgb: 50,219,180;
    --bs-primary: #272A3C;
    --bs-primary-text: #445675;
    --bs-primary-text-table-header: #445775;
    --bs-nav-maim-bg: #272A3C; 
    --sidebar-header-bg: #151e25;
    --bs-link-color: #272A3C;
    --bs-primary-hover:#32dbb4; 
    --ft-color-dropzone: #007bff;
    --main-color-primary: #445875;
    --main-color-primary-hover:#2b384c;
    --main-color-success: #34DBB4;
    --main-color-success-hover: #34DBB4;
    --bs-success: #34DBB4;

}

[data-bs-theme="dark"] .tabulator-footer-contents {
  background-color: #2b3035;
}

[data-bs-theme="dark"] {
    --bs-primary-bg: #1b1f22;
    --bs-secondary-rgb: 88, 96, 112; /* Soft steel blue, contrasts with very dark primary bg */
    --bs-primary-text: #32dbb4;
     --bs-primary: #32dbb4;
    --bs-btn-active-bg: #2bcfa9;
    --bs-success-bg-subtle: #125142 ;
    --bs-success-border-subtle:#33dbb4;
    --bs-success-text-emphasis:#33dbb4;
    --bs-link-color-rgb:50,219,180;
    --bs-primary-text-table-header: #32DBB4;
    --bs-nav-maim-bg: #181a25;
    --sidebar-header-bg: #030d15;
    --bs-link-color: #32DBB4;
    --bs-link-hover-color: #165f4e;
    --ft-color-dropzone: #32dbb4;
    --main-color-primary: #445875;
    --main-color-success: #34DBB4;
    --main-color-success-hover: #34DBB4;

    
}

[data-bs-theme="dark"] .brand-icon-cl{
  filter:invert(1);



}


[data-user-theme="aqua"] {
  --bs-primary: #00d9ff;
  --bs-primary-rgb: 3, 73, 86;
  --bs-secondary-rgb: 0, 110, 130; /* Deep aqua, complements 3,73,86 while contrasting enough */
  --bs-primary-text: #00d9ff;
  --main-color-primary: #00d9ff;
  --main-color-primary-hover: #00b0cc;

  --main-color-success: #32dbb4;
  --main-color-success-hover: #25b498;

  --bs-primary-bg: #002f3d;
  --bs-body-bg: #034956;
  --bs-secondary-bg: #05525f;

  --bs-link-color: #00d9ff;
  --bs-link-hover-color: #00b0cc;

  --bs-tertiary-bg-rgb: 1, 48, 57;
  --bs-tertiary-bg: #023f4b;

  --bs-success-bg-subtle: #014d57;
  --bs-border-color: #00c1e5;

  --bs-body-color: #dee2e6;
  --bs-emphasis-color: #dee2e6;

  --bs-light-text-emphasis: #e2f8ff;
  --bs-light-bg-subtle: #014d57;
  --bs-light-border-subtle: #008cb2;
}


[data-user-theme="habs"] .habsclr {
    color: #ffffff !important;
  }

/* ——— CRM FIDGI Theme: Habs Light ——— */
[data-user-theme="habs"] {
  /* Team palette */
  --team-red:   #AF1E2D;   /* Canadiens red */
  --team-blue:  #001E62;   /* Canadiens blue */
  --team-white: #ffffff;

  

  /* Core Bootstrap tokens (light UI) */
  --bs-primary: var(--team-red);
  --bs-primary-rgb: 175, 30, 45;

  --bs-secondary: var(--team-blue);
  --bs-secondary-rgb: 0, 30, 98;



  /* Keep your success color for charts/UI consistency */
  --bs-success: #32DBB4;
  --bs-success-rgb: 50, 219, 180;

  /* Body / surfaces */
  --bs-body-bg: #f9fbff;        /* “ice” white-blue */
  --bs-body-color: #1f2733;     /* readable on light bg */
  --bs-emphasis-color: #0d1320;

  --bs-primary-bg: #fff6f7;     /* subtle red-tinted surface */
  /* --bs-primary-bg: #fff6f7d9; */
  --bs-secondary-bg: #f2f6ff;   /* subtle blue-tinted surface */
  --bs-tertiary-bg: #f6f8fe;
  --bs-tertiary-bg-rgb: 149, 26, 40;

  --bs-border-color: #dce3f2;
  --bs-link-color: var(--team-blue);
  --bs-link-hover-color: #1730a8; /* slightly brighter blue */

  --bs-light-text-emphasis: #4e5b73;
  --bs-light-bg-subtle: #eef3ff;
  --bs-light-border-subtle: #d5def2;

  /* Buttons */
  --bs-btn-color: #fff;
  --bs-btn-hover-bg: #951a28; 
  --bs-btn-hover-border-color: #8b1724;

  /* Badges / chips accents */
  --chip-info-bg:    #e9f2ff;
  --chip-success-bg: #e9fdf7;
  --chip-warning-bg: #fff5e2;
  --chip-muted-bg:   #f3f6fb;

    --bs-primary: #AF1E2D;       /* Habs red */
  --bs-primary-rgb: 175,30,45;

  /* Custom helper variable for text colored in primary */
  --bs-primary-text: #AF1E2D;

  /* Focus ring tuned to team blue for accessibility */
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: rgba(0, 30, 98, 0.35);

  /* Cards / dropdowns / modals */
  --bs-card-bg: #ffffff;
  --bs-dropdown-bg: #ffffff;
  --bs-modal-bg: #ffffff;
}

/* Optional: make primary/secondary buttons feel on-brand */
[data-user-theme="habs"] .btn-primary {
  background-color: var(--team-red);
  border-color: var(--team-red);
}
[data-user-theme="habs"] .btn-primary:hover {
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
[data-user-theme="habs"] .btn-secondary {
  background-color: var(--team-blue);
  border-color: var(--team-blue);
}
[data-user-theme="habs"] .btn-secondary:hover {
  background-color: #0a1a76; /* slightly lighter than pure team blue */
  border-color: #0a1a76;
}

/* Table/header tints for the light theme */
[data-user-theme="habs"] .table thead {
  background: linear-gradient(0deg, #f3f6ff, #ffffff);
}
[data-user-theme="habs"] .list-group-item {
  border-color: var(--bs-border-color);
}

/* Activity chips (if you keep those) */
[data-user-theme="habs"] .icon-call    { background: var(--chip-success-bg); }
[data-user-theme="habs"] .icon-email   { background: var(--chip-info-bg); }
[data-user-theme="habs"] .icon-meeting { background: var(--chip-muted-bg); }
[data-user-theme="habs"] .icon-note    { background: var(--chip-muted-bg); }
[data-user-theme="habs"] .icon-other   { background: var(--chip-muted-bg); }
[data-user-theme="habs"] .icon-quote   { background: #ffe9ed; }
[data-user-theme="habs"] .icon-invoice { background: #eef3ff; }
[data-user-theme="habs"] .icon-payment { background: #e9fdf2; }

/* ——— Background theming (opt-in) ———
   Apply to a wrapper like <main class="themed-bg">…</main>
   and switch data-bg on <html> or body: data-bg="ice|stripes|banner"  */

/* Default (no bg) keeps it clean */
.themed-bg { background: var(--app-bg, transparent); }

/* Base variables for patterns */
[data-user-theme="habs"] {
  --bg-ice: radial-gradient(1500px 900px at 50% -20%, #ffffff 0%, #f5f9ff 55%, #eef4ff 100%);
  --bg-stripes:
    repeating-linear-gradient(
      135deg,
      rgba(175,30,45,0.08) 0 12px,
      rgba(0,30,98,0.08) 12px 24px
    ),
    linear-gradient(0deg, #ffffff, #f7f9fe);
  --bg-banner:
    radial-gradient(40% 60% at 20% 0%, rgba(175,30,45,.12), transparent 60%),
    radial-gradient(35% 55% at 80% 0%, rgba(0,30,98,.12), transparent 60%),
    linear-gradient(0deg, #ffffff, #f7f9fe);
}

/* Choose bg by attribute (set on <html> or <body>) */
[data-user-theme="habs"][data-bg="ice"]      .themed-bg { --app-bg: var(--bg-ice); }
[data-user-theme="habs"][data-bg="stripes"]  .themed-bg { --app-bg: var(--bg-stripes); }
[data-user-theme="habs"][data-bg="banner"]   .themed-bg { --app-bg: var(--bg-banner); }

/* Optional: subtle border on cards against patterns */
[data-user-theme="habs"][data-bg] .card {
  border: 1px solid var(--bs-border-color);
  backdrop-filter: saturate(1.05) blur(0px);
}

[data-user-theme="habs"][data-bg="jersey"] body {
  background:
    linear-gradient(
      to bottom,
      /* Top red until stripe */
      #AF1E2D 0 40%,
      /* thin white stripe above */
      #ffffff 40% 42%,
      /* blue stripe */
      #001E62 42% 58%,
      /* thin white stripe below */
      #ffffff 58% 60%,
      /* back to red */
      #AF1E2D 60% 100%
    );
  background-attachment: fixed;
  min-height: 100dvh;
}

[data-user-theme="sunset"] {
  --bs-primary: #ff6b6b;
  --bs-primary-rgb: 60, 26, 16;
  --bs-secondary-rgb: 217, 92, 51; /* Warm orange-red, contrasts with the dark base tones */
  --bs-primary-text: #ff6b6b;
  --main-color-primary: #ff6b6b;
  --main-color-primary-hover: #e05555;

  --main-color-success: #ffc107;
  --main-color-success-hover: #e0a800;

  --bs-primary-bg: #2f0a0a;
  --bs-body-bg: #3c1a10;
  --bs-secondary-bg: #502419;

  --bs-link-color: #ff6b6b;
  --bs-link-hover-color: #e05555;

  --bs-tertiary-bg-rgb: 221, 101, 3;
  --bs-tertiary-bg: #4a1e0d;

  --bs-success-bg-subtle: #471c14;
  --bs-border-color: #ff998a;

  --bs-body-color: #dee2e6;
  --bs-emphasis-color: #dee2e6;

  --bs-light-text-emphasis: #ffe2e2;
  --bs-light-bg-subtle: #602c1c;
  --bs-light-border-subtle: #ff8a7c;
}

[data-user-theme="forest"] {
  --bs-primary: #4caf50;
  --bs-primary-rgb: 45, 68, 34;
  --bs-secondary-rgb: 96, 130, 74; /* Muted leafy green, contrasts with forest darks */
  --bs-primary-text: #4caf50;
  --main-color-primary: #4caf50;
  --main-color-primary-hover: #3e8e41;

  --main-color-success: #a2e85c;
  --main-color-success-hover: #89cf49;

  --bs-primary-bg: #1e2f1b;
  --bs-body-bg: #2d4422;
  --bs-secondary-bg: #385d2f;

  --bs-link-color: #4caf50;
  --bs-link-hover-color: #3e8e41;

  --bs-tertiary-bg-rgb: 34, 78, 34;
  --bs-tertiary-bg: #264a2f;

  --bs-success-bg-subtle: #2a532a;
  --bs-border-color: #68c671;

  --bs-body-color: #dee2e6;
  --bs-emphasis-color: #dee2e6;

  --bs-light-text-emphasis: #e8ffe9;
  --bs-light-bg-subtle: #2d5030;
  --bs-light-border-subtle: #6fcf72;
}

[data-user-theme="pink"] {
  --bs-primary: #f06292;
  --bs-primary-rgb: 74, 34, 55;
  --bs-secondary-rgb: 210, 115, 155; /* Balanced contrast against deep pinks */
  --bs-primary-text: #f06292;
  --main-color-primary: #f06292;
  --main-color-primary-hover: #e91e63;

  --main-color-success: #f9c2d5;
  --main-color-success-hover: #f28db3;

  --bs-primary-bg: #3b1e2e;
  --bs-body-bg: #4a2237;
  --bs-secondary-bg: #622a48;

  --bs-link-color: #f06292;
  --bs-link-hover-color: #e91e63;

  --bs-tertiary-bg-rgb: 255, 182, 193;
  --bs-tertiary-bg: #5c2b41;

  --bs-success-bg-subtle: #5e2c42;
  --bs-border-color: #f48fb1;

  --bs-body-color: #dee2e6;
  --bs-emphasis-color: #dee2e6;

  --bs-light-text-emphasis: #ffe5f0;
  --bs-light-bg-subtle: #71324f;
  --bs-light-border-subtle: #f79ab9;
}


[data-user-theme="neonpulse"] {
  /* Core Brand Colors (deep violet as primary) */
  --bs-primary: #7400b8;
  --bs-primary-rgb: 116, 0, 184;
  --bs-secondary-rgb: 83, 144, 217; /* mid blue for contrast */
  --bs-primary-text: #80ffdb; /* light mint for text contrast */
  --main-color-primary: #7400b8;
  --main-color-primary-hover: #6930c3;

  /* Success Accent Colors (minty turquoise) */
  --main-color-success: #64dfdf;
  --main-color-success-hover: #72efdd;

  /* Backgrounds */
  --bs-primary-bg: #1a0033;
  --bs-body-bg: linear-gradient(
    135deg,
    #7400b8 0%,
    #5e60ce 30%,
    #4ea8de 60%,
    #80ffdb 100%
  );
  --bs-secondary-bg: #5390d9;

  /* Tertiary and Gradient Overlays */
  --bs-tertiary-bg-rgb: 114, 239, 221;
  --bs-tertiary-bg: linear-gradient(
    135deg,
    #6930c3 0%,
    #56cfe1 50%,
    #80ffdb 100%
  );

  /* Frosted-glass Inspired Surfaces */
  --bs-light-text-emphasis: #e0f7fa;
  --bs-light-bg-subtle: rgba(72, 191, 227, 0.07);
  --bs-light-border-subtle: #4ea8de;

  /* Links */
  --bs-link-color: #56cfe1;
  --bs-link-hover-color: #72efdd;

  /* Borders, Success, Typography */
  --bs-success-bg-subtle: #164e63;
  --bs-border-color: #64dfdf;
  --bs-body-color: #e0fcff;
  --bs-emphasis-color: #ffffff;
}

[data-user-theme="neonflare"] {
  /* Core Brand Colors */
  --bs-primary: #c850c0;                           /* magenta purple */
  --bs-primary-rgb: 131, 58, 180; 
  --bs-secondary-rgb: 255, 153, 102; /* Warm glow orange-peach, contrasts with rich purple base */
  --bs-primary-text: #fcb045;                      /* bright orange-yellow accent */
  --main-color-primary: #c850c0;
  --main-color-primary-hover: #aa00ff;

  /* Success Accent Colors */
  --main-color-success: #ffdd57;                   /* warm glowing yellow */
  --main-color-success-hover: #facc15;

  /* Backgrounds */
  --bs-primary-bg: #230046; 
  --bs-body-bg:#833ab4;                       /* very deep purple backdrop */
  --bs-body-bg: linear-gradient(
    135deg,
    #833ab4 0%,
    #c850c0 25%,
    #fcb045 60%,
    #ffdd57 100%
  );
  
  --bs-secondary-bg: rgba(255, 255, 255, 0.04);     /* for cards on top */

  /* Tertiary and Gradient Overlays */
  --bs-tertiary-bg-rgb: 255, 108, 179;
  --bs-tertiary-bg:#833ab4;
  --bs-tertiary-bg: linear-gradient(135deg, #833ab4 0%, #fd1d1d 50%, #fcb045 100%);

  /* Frosted-glass Inspired Surfaces */
  --bs-light-text-emphasis: #fff3e0;
  --bs-light-bg-subtle: rgba(255, 255, 255, 0.08);
  --bs-light-border-subtle: #fcb045;

  /* Links */
  --bs-link-color: #fd1d1d;
  --bs-link-hover-color: #ff6f61;

  /* Borders, Success, Typography */
  --bs-success-bg-subtle: #423003;
  --bs-border-color: #fcb045;
  --bs-body-color: #fffaf4;
  --bs-emphasis-color: #ffffff;
}

.neon-gradient-bg {
  background: linear-gradient(145deg, #8b5cf6 0%, #d946ef 35%, #ec4899 65%, #f43f5e 100%);
  color: white;
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 0 15px rgba(236, 72, 153, 0.5),
              0 0 30px rgba(139, 92, 246, 0.3),
              inset 0 0 10px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.neon-glow {
  animation: neonPulse 2.5s infinite alternate ease-in-out;
}

@keyframes neonPulse {
  0% {
    box-shadow: 0 0 8px #f43f5e, 0 0 12px #ec4899, 0 0 16px #8b5cf6;
  }
  100% {
    box-shadow: 0 0 12px #f43f5e, 0 0 20px #ec4899, 0 0 24px #8b5cf6;
  }
}

.neon-flare-glow-pulse {
  border: 2px solid var(--bs-border-color);
  animation: neonFlarePulse 2s ease-in-out infinite alternate;
}

@keyframes neonFlarePulse {
  0% {
    box-shadow:
      0 0 6px #fcb045,
      0 0 12px #fd1d1d,
      0 0 18px #c850c0;
  }
  100% {
    box-shadow:
      0 0 12px #fcb045,
      0 0 20px #fd1d1d,
      0 0 30px #c850c0;
  }
}

body {
  background: var(--bs-body-bg);
  background-attachment: fixed;
  background-size: cover;
}

.profile-img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.profile-pic {
  width: 20px;
  height: 20px;
  object-fit: cover;
  border-radius: 50%;
  transition: transform 0.2s ease;
}

.profile-btn:hover .profile-img {
  transform: scale(1.05);
}

.theme-swatch {
  padding: 6px 12px;
  border-radius: 6px;
  background-color: var(--theme-color, #ccc);
  color: #fff;
  text-align: center;
  font-weight: 500;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.theme-swatch:hover {
  transform: scale(1.03);
  opacity: 0.9;
}

.theme-selector {
  display: flex;
  align-items: center;
}
#currentThemeName {
  transition: color 0.3s ease;
}

.profile-btn {
  background: transparent;
}

.profile-btn:hover .profile-img {
  transform: scale(1.05);
}


.form-check-input:checked {
  background-color:  var(--bs-primary-text);
  border-color:  var(--bs-primary-text);
}

h1, h2, h3, h4, h5 {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    color: var(--bs-primary-text);
}

body,
p,
span,
li,
button,
input,
textarea,
.form-label,
.table,
.card,
.nav-link {
  font-family: 'Poppins', sans-serif !important;
}

.nav-pills {
  --bs-nav-pills-border-radius: var(--bs-border-radius);
  --bs-nav-pills-link-active-color: #000;
  --bs-nav-pills-link-active-bg: #32dbb4;
}







.bodyContainerMain {
  max-height: 93vh;
  overflow: hidden;
  padding: 20px;
  border-radius: 15px;
  width: calc(100% - 40px);
  height: calc(100vh - 90px);
  margin: 20px;
  border: var(--bs-border-width) solid var(--bs-border-color);
  background-color: var(--bs-primary-bg);
}

.bodyContainerMain > .container-fluid.py-3{
  min-height: 0 !important; /* override the 100dvh */
  height: 100%;
  overflow-y: auto;
}

/* On small screens: relax height, remove margins, allow scroll */
@media (max-width: 767.98px) {
  .bodyContainerMain {
    width: 100%;
    height: calc(100vh - 61px);
    max-height: calc(100vh - 61px);
    
    margin: 0;
    border-radius: 0;
    padding: 0px;
  
  }

  .bodyContainerMain > .container-fluid.py-3{
  min-height: 0 !important; /* override the 100dvh */
  height: 100%;
  overflow-y: auto;
}
}


.records_list_x {
  background-color: var(--bs-tertiary-bg);
}

.records_list_x:hover {
  background-color: var(--bs-dark-bg-subtle);
  color: var(--bs-emphasis-color);
}

.records_list_y {
  background-color: var(--bs-secondary-bg);
}

.records_list_y:hover {
  background-color: var(--bs-dark-bg-subtle);
  color: var(--bs-emphasis-color);
}

.tooltip {
  opacity: 1 !important;
}

.tooltip-inner {
  opacity: 1 !important;
}


.btn-primary {
    color: #fff;
    background-color: var(--main-color-primary) ;
    border-color: var(--main-color-primary) ;
}

.btn-primary:hover {
  background-color: var(--main-color-primary-hover) ;
  border-color: var(--main-color-primary) ;
}


.btn-outline-primary {
    --bs-btn-color: var(--main-color-primary);
    --bs-btn-border-color: var(--main-color-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--main-color-primary);
    --bs-btn-hover-border-color: var(--main-color-primary);
    --bs-btn-focus-shadow-rgb: 13, 110, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--main-color-primary);
    --bs-btn-active-border-color: var(--main-color-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: var(--main-color-primary);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--main-color-primary);
    --bs-gradient: none;
}
    
.btn-success {
    color: #171e29;
    background-color: var(--main-color-success) !important;
    border-color: var(--main-color-success) !important;
}

.btn-success:hover {
  color: #171e29;
  background-color: var(--main-color-success-hover) !important;
  border-color: var(--main-color-success) !important;
  filter: brightness(.93);
}

.main_header{

  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footertext {
    font-size: 10px;
    margin-bottom: 0px !important;
    max-height: 5vh;
    padding: 5px 0 0;
    text-align: center;
    bottom: 10px;
    width: 100%;
    position: fixed;
    display: flex;
    justify-content: center;
  
}

/* Dark Mode Start */


.toggle-checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.toggle-slot {
  position: relative;
  height: 1.665em;  /* 3.33em / 2 */
  width: 3.335em;   /* 6.67em / 2 */
  border: 0.835px solid #e4e7ec;  /* 1.67px / 2 */
  border-radius: 1.665em;  /* 3.33em / 2 */
  background-color: white;
  transition: background-color 250ms;
}

.toggle-checkbox:checked ~ .toggle-slot {
  background-color: #374151;
}

.toggle-button {
  transform: translate(1.96em, 0.29em);  /* 3.92em / 2, 0.58em / 2 */
  position: absolute;
  height: 1.085em;  /* 2.17em / 2 */
  width: 1.085em;  /* 2.17em / 2 */
  border-radius: 50%;
  background-color: #ffeccf;
  box-shadow: inset 0px 0px 0px 0.125em #ffbb52;  /* 0.25em / 2 */
  transition: background-color 250ms, border-color 250ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .toggle-button {
  background-color: #485367;
  box-shadow: inset 0px 0px 0px 0.125em white;  /* 0.25em / 2 */
  transform: translate(0.29em, 0.29em);  /* 0.58em / 2 */
}

.sun-icon {
  position: absolute;
  height: 1em;  /* 2em / 2 */
  width: 1em;  /* 2em / 2 */
  color: #ffbb52;
}

.sun-icon-wrapper {
  position: absolute;
  height: 1em;  /* 2em / 2 */
  width: 1em;  /* 2em / 2 */
  opacity: 1;
  transform: translate(0.335em, 0.335em) rotate(15deg);  /* 0.67em / 2, 0.67em / 2 */
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .sun-icon-wrapper {
  opacity: 0;
  transform: translate(0.5em, 0.335em) rotate(0deg);  /* 1em / 2, 0.67em / 2 */
}

.moon-icon {
  position: absolute;
  height: 1em;  /* 2em / 2 */
  width: 1em;  /* 2em / 2 */
  color: white;
}

.moon-icon-wrapper {
  position: absolute;
  height: 1em;  /* 2em / 2 */
  width: 1em;  /* 2em / 2 */
  opacity: 0;
  transform: translate(1.835em, 0.335em) rotate(0deg);  /* 3.67em / 2, 0.67em / 2 */
  transform-origin: 50% 50%;
  transition: opacity 150ms, transform 500ms cubic-bezier(.26,2.5,.46,.71);
}

.toggle-checkbox:checked ~ .toggle-slot .moon-icon-wrapper {
  opacity: 1;
  transform: translate(2em, 0.335em) rotate(-15deg);  /* 4em / 2, 0.67em / 2 */
}



/* Dark Mode End */
.nowrap-ellipsis {
    white-space: nowrap;           /* don’t wrap to next line */
    overflow: hidden;              /* hide overflow text */
    text-overflow: ellipsis;       /* show … */
    max-width: 100%;               /* or specify px width if needed */
    display: inline-block;         /* or block depending on context */
}

.btn.nowrap-ellipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px; /* adjust as needed */
    display: inline-block;
}

.workbook-tabs {
    position: relative;
    padding-top: 0.25rem;
}

.workbook-tabs::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 0;
    height: 4px;
    width: 100%;
    background-color: var(--main-color-success);
    z-index: 1;
    border-radius: 2rem;
}

.workbook-tabs .btn {
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 .5rem .5rem;
    background-color: #f1f1f1;
    color: #fff;
    font-weight: normal;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.1);
    position: relative;
    bottom: 1px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    z-index: 1;
}

.workbook-tabs .btn-secondary {  
    color: #000000 !important;
}

.workbook-tabs .btn:hover {
    background-color: #e7e7e7;
}

.workbook-tabs .btn.active {
    background-color: #fff;
    font-weight: 500;
    z-index: 2;
    box-shadow: 0 -2px 3px rgba(0,0,0,0.1);
    bottom: 4px;
    transform: translateY(-4px);
    border-top: 4px solid #fff; /* matches background */
}




.statsDiv {

  padding: 10px;
  height: 100%;
  border-radius: .375rem;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
}

.thirdH {
  height: 28% !important;
  max-height: 28% !important;
  min-height: 28% !important;
}

.tableTitle {
  text-align: center;
    margin-bottom: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--bs-primary-text);
}

ul,
li {
  list-style: none;
}


.tabulator .tabulator-footer .tabulator-page.active {
  border-color: var(--main-color-primary);
  background-color: var(--main-color-primary);
  color: #fff;
}

.tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {
  border-color: #dee2e6;
  background: #e9ecef;
  color: var(--main-color-primary);
}

.tabulator .tabulator-footer .tabulator-page {
  padding: 3px 20px;
  margin: 2px;
}


#loadingOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999; /* Ensure it overlays on top of everything */
}

.spinner {
  border: 16px solid #f3f3f3;       /* Light grey */
  border-top: 16px solid #3498db;   /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite; /* Spinner animation */
}

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

.choices {
  margin-bottom: 0px !important; 
  
max-height: 38px !important;
min-height: 38px !important;

}

.choices__item {

color:var(--bs-body-color) !important;
}

@media (min-width: 640px) {
.choices__list--dropdown .choices__item--selectable, .choices__list[aria-expanded] .choices__item--selectable {
  padding-right: 10px !important;  
}
}

.choices__inner {
display: inline-block !important;
vertical-align: top !important;
width: 100% !important;
background-color: var(--bs-body-bg) !important;
border: var(--bs-border-width) solid var(--bs-border-color) !important;

border-radius: .375rem;
min-height: 38px !important;
max-height: 38px !important;
overflow: hidden;


padding: .375rem .75rem !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.5 !important;
}

.choices__list--dropdown, .choices__list[aria-expanded] {
z-index: 1;
position: absolute;
width: 100%;
background-color: var(--bs-body-bg) !important;
border: var(--bs-border-width) solid var(--bs-border-color) !important;
top: 100%;
margin-top: -1px;
border-bottom-left-radius: 2.5px;
border-bottom-right-radius: 2.5px;
overflow: hidden;
word-break: break-all;
will-change: visibility;
}

.choices[data-type*=select-one] .choices__input {
display: block;
width: 100%;
padding: 10px;
background-color: var(--bs-body-bg) !important;
border: var(--bs-border-width) solid var(--bs-border-color) !important;
margin: 0;
}
.choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--bs-primary-text);
}


.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-80 { width: 80% !important; }
.w-90 { width: 90% !important; }
.w-100 { width: 100% !important; }


.custom-tooltip .tooltip-inner {
  max-width: 300px; /* Set the max width you want */
  width: 300px; /* Force the width */
  white-space: normal; /* Allow text to wrap */
}

.language-switcher {
  position: relative;
  display: inline-block;
}

.flag-button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
}

.flag-icon {
  width: 35px;
  height: 25px;
  vertical-align: middle;
}

.flag-icon-footer{

  width: 20px;
  height: 15px;

}

.dropdown-content {
  display: none;
  position: absolute;
  border: var(--bs-border-width) solid var(--bs-border-color) !important;
  background-color: var(--bs-primary-bg);
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
  border-radius: 5px;
  z-index: 100;
}

.dropdown-content button {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
}

.dropdown-content button:hover {
  background-color: var(--bs-primary-hover);
  color: #030d15;
  border-radius: 5px;
}

.language-switcher:hover .dropdown-content {
  display: block;
}

.selected-option {
  font-weight: bold;
}

.sticky-header {
  position: sticky;
  top: -20px;
  background-color: var(--bs-primary-bg);
  padding: 10px 0;
  z-index: 10;
}


.sticky-footer {
  position: fixed;
    bottom: 7px;
    background-color: var(--bs-primary-bg);
    padding: 10px;
    display: flex;
    justify-content: space-around;
    z-index: 1000;
    width: 74%;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.mapping-section {
  flex: 1;
  padding-bottom: 60px; 
}

.form-select:focus {
  border-color: #32DBB4 ;
  outline: 0;
  box-shadow:0 0 0 .25rem rgba(13, 253, 165, 0.25);
 
}

.loader {
  display: inline-flex;
  gap: 10px;
}

.loader:before,
.loader:after {
  content: "";
  height: 20px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side,#000 95%,#0000) 35% 35%/6px 6px no-repeat
    #fff;
  transform: scaleX(var(--s,1)) rotate(0deg);
  animation: l6 1s infinite linear;
}

.loader:after {
  --s: -1;
  animation-delay: -0.1s;
}

@keyframes l6 {
  100% {
    transform: scaleX(var(--s,1)) rotate(360deg);
  }
}


.loader_main {
  --ANIMATION-DELAY-MULTIPLIER: 70ms;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.loader_main span {
  padding: 0;
  margin: 0;
  letter-spacing: -5rem;
  animation-delay: 0s;
  transform: translateY(4rem);
  animation: hideAndSeek 1s alternate infinite cubic-bezier(0.86, 0, 0.07, 1);
}
.loader_main .l {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 0);
}
.loader_main .o {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 1);
}
.loader_main .a {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 2);
}
.loader_main .d {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 3);
}
.loader_main .ispan {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 4);
}
.loader_main .n {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 5);
}
.loader_main .g {
  animation-delay: calc(var(--ANIMATION-DELAY-MULTIPLIER) * 6);
}
.letter {
  width: fit-content;
  height: 3rem;
}
.i {
  margin-inline: 5px;
}
@keyframes hideAndSeek {
  0% {
    transform: translateY(4rem);
  }
  100% {
    transform: translateY(0rem);
  }
}





/* From Uiverse.io by Nawsome */ 
.wheel-and-hamster {
  --dur: 1s;
  position: relative;
  width: 12em;
  height: 12em;
  font-size: 14px;
}

.wheel,
.hamster,
.hamster div,
.spoke {
  position: absolute;
}

.wheel,
.spoke {
  border-radius: 50%;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.wheel {
  background: radial-gradient(100% 100% at center,hsla(0,0%,60%,0) 47.8%,hsl(0,0%,60%) 48%);
  z-index: 2;
}

.hamster {
  animation: hamster var(--dur) ease-in-out infinite;
  top: 50%;
  left: calc(50% - 3.5em);
  width: 7em;
  height: 3.75em;
  transform: rotate(4deg) translate(-0.8em,1.85em);
  transform-origin: 50% 0;
  z-index: 1;
}

.hamster__head {
  animation: hamsterHead var(--dur) ease-in-out infinite;
  background: hsl(30,90%,55%);
  border-radius: 70% 30% 0 100% / 40% 25% 25% 60%;
  box-shadow: 0 -0.25em 0 hsl(30,90%,80%) inset,
		0.75em -1.55em 0 hsl(30,90%,90%) inset;
  top: 0;
  left: -2em;
  width: 2.75em;
  height: 2.5em;
  transform-origin: 100% 50%;
}

.hamster__ear {
  animation: hamsterEar var(--dur) ease-in-out infinite;
  background: hsl(0,90%,85%);
  border-radius: 50%;
  box-shadow: -0.25em 0 hsl(30,90%,55%) inset;
  top: -0.25em;
  right: -0.25em;
  width: 0.75em;
  height: 0.75em;
  transform-origin: 50% 75%;
}

.hamster__eye {
  animation: hamsterEye var(--dur) linear infinite;
  background-color: hsl(0,0%,0%);
  border-radius: 50%;
  top: 0.375em;
  left: 1.25em;
  width: 0.5em;
  height: 0.5em;
}

.hamster__nose {
  background: hsl(0,90%,75%);
  border-radius: 35% 65% 85% 15% / 70% 50% 50% 30%;
  top: 0.75em;
  left: 0;
  width: 0.2em;
  height: 0.25em;
}

.hamster__body {
  animation: hamsterBody var(--dur) ease-in-out infinite;
  background: hsl(30,90%,90%);
  border-radius: 50% 30% 50% 30% / 15% 60% 40% 40%;
  box-shadow: 0.1em 0.75em 0 hsl(30,90%,55%) inset,
		0.15em -0.5em 0 hsl(30,90%,80%) inset;
  top: 0.25em;
  left: 2em;
  width: 4.5em;
  height: 3em;
  transform-origin: 17% 50%;
  transform-style: preserve-3d;
}

.hamster__limb--fr,
.hamster__limb--fl {
  clip-path: polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);
  top: 2em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  transform-origin: 50% 0;
}

.hamster__limb--fr {
  animation: hamsterFRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 80%,hsl(0,90%,75%) 80%);
  transform: rotate(15deg) translateZ(-1px);
}

.hamster__limb--fl {
  animation: hamsterFLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 80%,hsl(0,90%,85%) 80%);
  transform: rotate(15deg);
}

.hamster__limb--br,
.hamster__limb--bl {
  border-radius: 0.75em 0.75em 0 0;
  clip-path: polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);
  top: 1em;
  left: 2.8em;
  width: 1.5em;
  height: 2.5em;
  transform-origin: 50% 30%;
}

.hamster__limb--br {
  animation: hamsterBRLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,80%) 90%,hsl(0,90%,75%) 90%);
  transform: rotate(-25deg) translateZ(-1px);
}

.hamster__limb--bl {
  animation: hamsterBLLimb var(--dur) linear infinite;
  background: linear-gradient(hsl(30,90%,90%) 90%,hsl(0,90%,85%) 90%);
  transform: rotate(-25deg);
}

.hamster__tail {
  animation: hamsterTail var(--dur) linear infinite;
  background: hsl(0,90%,85%);
  border-radius: 0.25em 50% 50% 0.25em;
  box-shadow: 0 -0.2em 0 hsl(0,90%,75%) inset;
  top: 1.5em;
  right: -0.5em;
  width: 1em;
  height: 0.5em;
  transform: rotate(30deg) translateZ(-1px);
  transform-origin: 0.25em 0.25em;
}

.spoke {
  animation: spoke var(--dur) linear infinite;
  background: radial-gradient(100% 100% at center,hsl(0,0%,60%) 4.8%,hsla(0,0%,60%,0) 5%),
		linear-gradient(hsla(0,0%,55%,0) 46.9%,hsl(0,0%,65%) 47% 52.9%,hsla(0,0%,65%,0) 53%) 50% 50% / 99% 99% no-repeat;
}

/* Animations */
@keyframes hamster {
  from, to {
    transform: rotate(4deg) translate(-0.8em,1.85em);
  }

  50% {
    transform: rotate(0) translate(-0.8em,1.85em);
  }
}

@keyframes hamsterHead {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(8deg);
  }
}

@keyframes hamsterEye {
  from, 90%, to {
    transform: scaleY(1);
  }

  95% {
    transform: scaleY(0);
  }
}

@keyframes hamsterEar {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(12deg);
  }
}

@keyframes hamsterBody {
  from, 25%, 50%, 75%, to {
    transform: rotate(0);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-2deg);
  }
}

@keyframes hamsterFRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(50deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-30deg) translateZ(-1px);
  }
}

@keyframes hamsterFLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-30deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(50deg);
  }
}

@keyframes hamsterBRLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(-60deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(20deg) translateZ(-1px);
  }
}

@keyframes hamsterBLLimb {
  from, 25%, 50%, 75%, to {
    transform: rotate(20deg);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(-60deg);
  }
}

@keyframes hamsterTail {
  from, 25%, 50%, 75%, to {
    transform: rotate(30deg) translateZ(-1px);
  }

  12.5%, 37.5%, 62.5%, 87.5% {
    transform: rotate(10deg) translateZ(-1px);
  }
}

@keyframes spoke {
  from {
    transform: rotate(0);
  }

  to {
    transform: rotate(-1turn);
  }
}

#loading-text {
  font-weight: 500;
  font-size: 20pt;
  padding: 5px 8px;
  color: black;
  border-radius: 5px;
  background-color: #32DBB4;
  width: 40%;
  text-align: center;
  border: 1px solid #999999;
}

.dropzone-custom {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px dashed var(--ft-color-dropzone);
  border-radius: 8px !important;
  background-color: var(--bs-primary-bg);;
  padding: 20px;
  cursor: pointer;
  text-align: center;
}

.dropzone-custom:hover {
  background-color: var(--bs-gray-200); /* For light mode */
}

:root {
  --dropzone-hover-color: var(--bs-gray-200); /* Default for light mode */
}

[data-bs-theme="dark"] .dropzone-custom:hover {
  background-color: var(--bs-gray-800); /* Adjust for dark mode */
}

.dropzone-custom h4 {
  color: var(--ft-color-dropzone);

}
  



.upload-content {
  display: flex;
  align-items: center;
  gap: 15px; /* Space between the icon and text */
}

.upload-icon {
  font-size: 2rem; /* Adjust the size of the icon */
  color: var(--ft-color-dropzone);
}

.upload-text {
  text-align: left;
}

.upload-message {
  font-size: 1rem;
 
  margin: 0;
}

.upload-limit {
  font-size: 0.9rem;
  
  margin: 0;
}


.button_google {
  width: 100%;
  display: flex;
  padding: 0.5rem 1.4rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;
  align-items: center;
  border-radius: 0.5rem;
  border: 1px solid rgba(0, 0, 0, 0.25);
  gap: 0.75rem;
  color: rgb(65, 63, 63);
  background-color: #fff;
  cursor: pointer;
  transition: all .6s ease;
  text-decoration: none;
}

.button_google svg {
  height: 24px;
}

.button_google:hover {
  transform: scale(1.02);
}


.tagify {
  --tags-disabled-bg: #F1F1F1;
  --tags-border-color: #DDD;
  --tags-hover-border-color: #CCC;
  --tags-focus-border-color: #3595f6;
  --tag-border-radius: 3px;
  --tag-bg: #E5E5E5;
  --tag-hover: #D3E2E2;
  --tag-text-color: black;
  --tag-text-color--edit: black;
  --tag-pad: 0.3em 0.5em;
  --tag-inset-shadow-size: 1.2em;
  --tag-invalid-color: #D39494;
  --tag-invalid-bg: rgba(211, 148, 148, 0.5);
  --tag--min-width: 1ch;
  --tag--max-width: 100%;
  --tag-hide-transition: 0.3s;
  --tag-remove-bg: rgba(211, 148, 148, 0.3);
  --tag-remove-btn-color: black;
  --tag-remove-btn-bg: none;
  --tag-remove-btn-bg--hover: #c77777;
  --input-color: inherit;
  --placeholder-color: rgba(0, 0, 0, 0.4);
  --placeholder-color-focus: rgba(0, 0, 0, 0.25);
  --loader-size: 0.8em;
  --readonly-striped: 1;
}

/* Dark mode overrides for Bootstrap dark themes */
@media (prefers-color-scheme: dark) {
  .tagify {
    /* Use dark gray shades that complement Bootstrap’s dark backgrounds */
    --tags-disabled-bg: #343a40; /* similar to Bootstrap’s .bg-dark */
    --tags-border-color: #555;   /* a slightly lighter gray border */
    --tags-hover-border-color: #666;
    --tags-focus-border-color: #80bdff; /* a soft blue focus ring */
    
    --tag-bg: #495057;         /* a dark background for each tag */
    --tag-hover: #6c757d;       /* a lighter hover state */
    
    /* Light text on dark backgrounds */
    --tag-text-color: #f8f9fa;
    --tag-text-color--edit: #f8f9fa;
    
    /* For invalid/error states, use a red tone that pops on dark */
    --tag-invalid-color: #e4606d;
    --tag-invalid-bg: rgba(228, 96, 109, 0.5);
    
    --tag-remove-btn-color: #f8f9fa;
    --tag-remove-btn-bg--hover: #dc3545; /* Bootstrap’s danger color */
    
    /* Lighter placeholder colors for dark backgrounds */
    --placeholder-color: rgba(248, 249, 250, 0.4);
    --placeholder-color-focus: rgba(248, 249, 250, 0.25);
  }
}

.cust-inpt-gr-txt{

    min-width: 180px; /* Adjust this value as needed */
    text-align: right; /* Align text properly */
    justify-content: center; /* Center the text inside */

}

.choicesrad .choices__inner{
  border-radius: 0rem .375rem .375rem 0rem;
}

.input-group .choices__inner{
  border-radius: 0rem .375rem .375rem 0rem;
}

.noselect {
    -webkit-user-select: none; /* Chrome, Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none;         /* Standard */
}



#easter-egg-game {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background: radial-gradient(#000, #111); */
  backdrop-filter: blur(15px);
  z-index: 9999;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
 
}

#easter-egg-game h2 {
  font-size: 1.2rem;
  margin: 20px 0;
  color: #0f0;
}

#snakeCanvas {
  background: #111;
  border: 4px solid #0f0;
  box-shadow: 0 0 5px #0f0;
  border-radius: 0.375rem;
}

#leaderboard {
  margin-top: 20px;
  display: none;
  color: #0f0;
  border: 2px solid #0f0;
  padding: 10px;
  background: rgba(0,0,0,0.6);
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  border-radius: 0.375rem;
}

#leaderboard h3 {
  font-size: 1rem;
  margin-bottom: 10px;
  color: #0f0;
  text-shadow: 0 0 5px #0f0;
}

#leaderboard table {
  width: 80%;
  margin: auto;
  background: transparent;
  border-collapse: collapse;
}

#leaderboard table th,
#leaderboard table td {
  border: 1px solid #0f0;
  padding: 5px;
  font-size: 0.7rem;
}

#leaderboard table th {
  background: #222;
}

#leaderboard table tr:nth-child(even) {
  background: rgba(0, 255, 0, 0.05);
}

#leaderboard table tr:hover {
  background: rgba(0, 255, 0, 0.1);
}

.scanlines {
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 255, 0, 0.05) 3px
  );
  pointer-events: none;
}

.footer-hover:hover {
    transform: scale(1.2);
    transition: transform 0.3s ease;
}

.footer-hover .heart {
    display: inline-block;
    transition: transform 0.3s ease;
}

.footer-hover:hover .heart {
    animation: heartbeat 1.5s infinite;
}

@keyframes heartbeat {
    0%   { transform: scale(1); }
    10%  { transform: scale(1.3); }
    20%  { transform: scale(1); }
    30%  { transform: scale(1.2); }
    40%  { transform: scale(1); }
    100% { transform: scale(1); }
}

#password-strength-bar {
    transition: width 0.3s ease-in-out;
}

#password-criteria li {
    margin-bottom: 2px;
}

.link-hover-effect {
    transition: transform 0.2s ease, color 0.2s ease;
}
.link-hover-effect:hover {
    transform: scale(1.05);
    color: #0a58ca; /* Slightly darker than Bootstrap primary */
}

#inactiveSummaryChart {
  width: 100% !important;   /* fill available width */
  height: 100% !important;  /* fill the 300px container height */
  display: block;           /* remove default inline-block whitespace */
}

.page-header {
    position: sticky;
    top: 0;
    z-index: 1020;          
    background-color: var(--bs-primary-bg);;  /* match your page bg */
    padding-top: .75rem;
    padding-bottom: .75rem;
  }

 
  .table-container {
    max-height: calc(100% - 100px);
    overflow-y: auto;
  }

 
  .table-container table thead th {
    position: sticky;
    top: 0;
    background-color: var(--bs-primary-bg);  /* so it doesn’t show grid lines beneath */
    z-index: 1010;           /* just under the page header */
  }


  @keyframes smoothPulse {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(50, 219, 180, 0.7);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 0 10px 6px rgba(50, 219, 180, 0.3);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(50, 219, 180, 0);
    }
  }

  .pulsating {
    animation: smoothPulse 2.2s ease-in-out infinite;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    will-change: transform, box-shadow;
    border: none;
    outline: none;
  }

  .fade-in {
    opacity: 0;
    transition: opacity 0.6s ease-in-out;
  }

  .fade-in.show {
      opacity: 1;
  }


   .opacity-50 { opacity: .5; pointer-events: auto; }
  /* Modern glass widget */
.tts-widget{
  position:fixed; right:1rem; bottom:1rem;
  display:none; /* toggle to flex in JS */
  z-index:100000;
  padding:.6rem .75rem;
  gap:.5rem; align-items:center;
  background:rgba(20,22,26,.7);
  backdrop-filter:saturate(180%) blur(10px);
  border:1px solid rgba(255,255,255,.1);
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  color:#fff;
}



.tts-btn {
  width:44px; height:44px; /* bigger button */
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  border:2px solid #28c76f; /* green = active */
  background:rgba(255,255,255,.05);
  color:#fff;
  font-size:1.4rem; /* bigger icon */
  transition:border-color 0.2s ease, background 0.2s ease;
}

.tts-btn.muted {
  border-color:#e74c3c; /* red = muted */
}

.tts-btn:hover {
  background:rgba(255,255,255,.12);
}

.tts-dot{
  width:8px;height:8px;border-radius:999px;margin-left:6px;
  background:#28c76f; /* on */
  box-shadow:0 0 0 2px rgba(40,199,111,.25);
}
.tts-btn.muted .tts-dot{ background:#e74c3c; box-shadow:0 0 0 2px rgba(231,76,60,.25); }

.tts-select{
  min-width:220px; width:auto;
  background:rgba(255,255,255,.06);
  color:#fff; border:1px solid rgba(255,255,255,.12);
}
.tts-select:focus{ box-shadow:none; border-color:rgba(255,255,255,.25); }

/* Light mode safety (if page theme is light) */
:root:has(body.bg-light) .tts-widget,
[data-bs-theme="light"] .tts-widget{
  background:rgba(255,255,255,.8);
  color:#111; border-color:rgba(0,0,0,.08);
}
[data-bs-theme="light"] .tts-btn{
  background:rgba(0,0,0,.04); color:#111; border-color:rgba(0,0,0,.08);
}
[data-bs-theme="light"] .tts-select{
  background:rgba(0,0,0,.03); color:#111; border-color:rgba(0,0,0,.1);
}

/* Mobile: make it a compact bar */
@media (max-width: 576px){
  .tts-widget{
    left:.75rem; right:.75rem; bottom:.75rem;
    justify-content:space-between; gap:.4rem;
  }
  .tts-select{ flex:1; min-width:0; }
}


  .transition-chev { transition: transform .2s ease; }
  .rotate-180 { transform: rotate(180deg); }


  /* Light mode: show as-is */
.brand-logo {
  filter: none;
  opacity: .95;            /* optional: polish */
}

/* Dark mode: flip dark logos to light-looking */
html[data-bs-theme="dark"] .brand-logo {
  filter: invert(1) grayscale(1) brightness(1.4) contrast(1.05);
}


/* Grid layout */
  .dealership-layout {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 1rem;
     height: 100%;
    min-height: 0;
  }

  @media (max-width: 992px) {
    .dealership-layout { grid-template-columns: 1fr; }
  }
  .dealership-layout > div[style*="overflow:scroll"] {
  overflow: visible !important;
  height: auto !important;
}

main {
  position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem - 90px);
    overflow: auto;
    padding-bottom: 150px;
    border-radius: 14px;

}

aside{
   border-radius: 14px;
}
  /* Sticky sidebar */
  /* .dealership-sidebar {
    position: sticky;
    top: 1rem;
    max-height: calc(100vh - 2rem - 90px);
    overflow: auto;
    padding-bottom: 150px;
  } */

  /* Header look */
  .dealership-header {
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, rgba(0,0,0,.03), rgba(0,0,0,.06));
  }
  html[data-bs-theme="dark"] .dealership-header {
    background: linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.07));
  }

  .brand-chip {
    display: inline-flex; align-items:center; gap:.5rem;
    border-radius: 999px; padding: .4rem .75rem;
    background: var(--bs-secondary-bg);
    border: 1px solid var(--bs-border-color);
    font-weight: 500;
  }

  .status-badge {
    border-radius: 999px; padding: .35rem .7rem; font-size: .8rem;
  }
  .status-prospect { background: #fff3cd; color: #7a5600; }
  .status-active   { background: #d1e7dd; color: #0f5132; }
  .status-inactive { background: #f8d7da; color: #842029; }

  .section-card { border-radius: 14px; }
  .section-title { font-weight: 600; }

  /* Tagify polish (optional) */
  .tagify {
    --tags-border-color: var(--bs-border-color);
    --tag-bg: var(--bs-secondary-bg);
    --tag-text-color: var(--bs-body-color);
    --tag-remove-bg: transparent;
  }

  /* Floating save on mobile */
  @media (max-width: 992px) {
    .floating-save {
      position: sticky; bottom: .5rem; z-index: 9;
      display: flex; justify-content: end; margin-top: .5rem;
    }
  }

  .timeline { position: relative; max-height: 60vh;
    overflow: scroll; }
.timeline::before {
  content: ""; position: absolute; left: 18px; top: 0; bottom: 0;
  width: 2px; background: var(--bs-border-color);
}
.timeline-item { position: relative; padding-left: 56px; margin-bottom: 16px; }
.timeline-marker {
  position: absolute; left: 8px; top: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.timeline-marker i { font-size: 12px; line-height: 1; }
.timeline-content .card-body { padding: 12px 14px; }

/* ensure the calendar has space to render */
#calendarWrap { min-height: 480px; }
#calendar { height: 100%; }

/* if a parent has overflow:hidden (like .bodyContainerMain),
   let the calendar scroll inside itself (optional) */
#calendarWrap { overflow: auto; }


/* Map fills the card body */
.location-map-bg{
  position:absolute;
  inset:0;              /* top/right/bottom/left: 0 */
  z-index:1;
}

/* Give the container a height so the absolute map can show */


/* Right-side floating form panel */
.address-panel{
  position:relative;
  z-index:2;
  margin-left:auto;     /* pushes the panel to the right */
  width:min(520px,100%);
  background: color-mix(in srgb, var(--bs-body-bg) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left:1px solid var(--bs-border-color);
  padding:16px;
}
.main_info_panel {
  position:relative;
  z-index:2;
  background: color-mix(in srgb, var(--bs-body-bg) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
    width:100%;
  padding:16px;
}

.weatherCard_header{
  position:relative;
  z-index:2;
  background: color-mix(in srgb, var(--bs-body-bg) 30%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding:16px;
}
/* Mobile: make the panel a bottom sheet */
@media (max-width: 768px){
  .address-panel{
    width:100%;
    border-left:none;
    border-top:1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    position:absolute;
    bottom:0;
  }
  .section-card .card-body.p-0{ min-height:520px; }
}










 




.location-map-bg{
  position:absolute; inset:0;
  /* responsive heights when content is short (mobile) */
  /* min-height: 360px; */
}
@media (min-width: 768px){ .location-map-bg{ min-height: 440px; } }
@media (min-width: 1200px){ .location-map-bg{ min-height: 520px; } }

/* subtle glass effect to keep text legible on top of map */
.glass-panel{
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(0,0,0,.06);
  
  backdrop-filter: saturate(140%) blur(6px);
}

/* chips/badges */
.brand-chip{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.9rem; padding:.25rem .5rem; border-radius:999px;
  background:#f5f7fb; color:#445675;
}
.status-badge{
  display:inline-block; padding:.25rem .55rem; border-radius:999px; font-size:.8rem;
  background:#eef2ff; color:#334155;
}
.status-active{ background:#e8fff6; color:#176B5B; }

@keyframes reminderPulse {
  0%, 100% { background-color: transparent; }
  50%      { background-color: rgba(255, 230, 150, 0.6); }
}
.reminder-flash {
  animation: reminderPulse 1.2s ease-in-out 4; /* ~5s total */
  border-left: 4px solid #f0ad4e;
}

/* === CRM FIDGI — Habs Light theme button fixes === */
[data-user-theme="habs"] .btn-primary {
  /* Base */
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--team-red);
  --bs-btn-border-color: var(--team-red);

  /* Hover */
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #951a28;          /* darker Habs red */
  --bs-btn-hover-border-color: #8b1724;

  /* Active (pressed) */
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #7c1420;
  --bs-btn-active-border-color: #7c1420;

  /* Focus ring tinted to team blue (matches your vars) */
  --bs-btn-focus-shadow-rgb: 0, 30, 98;
}

/* Optional: outline-primary to match brand */
[data-user-theme="habs"] .btn-outline-primary {
  --bs-btn-color: var(--team-red);
  --bs-btn-border-color: var(--team-red);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--team-red);
  --bs-btn-hover-border-color: var(--team-red);

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #951a28;
  --bs-btn-active-border-color: #951a28;

  --bs-btn-focus-shadow-rgb: 0, 30, 98;
}

/* Secondary button tuned to Habs blue */
[data-user-theme="habs"] .btn-secondary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--team-blue);
  --bs-btn-border-color: var(--team-blue);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0a1a76;         /* slightly lighter than pure team blue */
  --bs-btn-hover-border-color: #0a1a76;

  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #08145e;
  --bs-btn-active-border-color: #08145e;

  --bs-btn-focus-shadow-rgb: 0, 30, 98;
}