/* ─────────────────────────────────────────────────────────────
   TYPOGRAPHY & BASIC TAGS
────────────────────────────────────────────────────────────── */
body { font-family: "Roboto", sans-serif; }
h4 { color: var(--primary-color); }

/* ─────────────────────────────────────────────────────────────
   VISIBILITY HELPERS
────────────────────────────────────────────────────────────── */
.hidden { display: none; }
.visible { display: block; }
.hidden_important { display: none!important; }
.visible_important { display: block!important; }

/* ─────────────────────────────────────────────────────────────
   LOADER
────────────────────────────────────────────────────────────── */
.loader-spinner-container {
  position: fixed; top: 0; left: 0;
  width: 100% !important; height: 100vh !important;
  z-index: 9999; display: flex; justify-content: center; align-items: center;
  background: var(--background-dark2);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
}
.loader_spinner_css {
  width: 100px; aspect-ratio: 1; display: grid;
  border: 6px solid #0000; border-radius: 50%;
  border-right-color: var(--text-color-light);
  animation: l15 1s infinite linear;
}
.loader_spinner_css::before,
.loader_spinner_css::after {
  content: ""; grid-area: 1/1; margin: 4px;
  border: inherit; border-radius: 50%; animation: l15 2s infinite;
}
.loader_spinner_css::after { margin: 10px; animation-duration: 3s; }
@keyframes l15 { 100% { transform: rotate(1turn); } }

/* ─────────────────────────────────────────────────────────────
   FORMS: INPUT GROUPS
────────────────────────────────────────────────────────────── */
.input-group { flex-wrap: nowrap!important; }
.input-group .input-group-prepend {
  background-color: var(--primary-color);
  display: flex !important; align-items: center !important; justify-content: center !important;
  border-right: 1px solid #ddd; border-radius: 5px; height: 60px !important;
}
.input-group .input-group-prepend-select2-multiple {
  align-self: stretch!important; height: auto!important;
  display: flex!important; align-items: center!important;
  background-color: var(--primary-color);
  border-right: 1px solid #ddd; border-radius: 5px;
}
.input-group-prepend-phone {
  padding: 5px 10px 5px 10px !important; border-radius: 0 !important;
  color: var(--text-color-light) !important; background: var(--background-overlay);
}
.input-group .input-group-text {
  height: 60px !important; border: none !important; font-size: 1.4rem;
  color: var(--text-color-light);
  border-radius: 10px 0 0 10px !important; background: var(--primary-color);
}
.input-group .input-group-text-select2-multiple {
  display: flex !important; align-items: center !important; justify-content: center !important;
  height: 100% !important; border: none !important; font-size: 1.4rem;
  color: var(--text-color-light); border-radius: 10px 0 0 10px !important; padding: 0.375rem 0.75rem;
}
.input-group .form-control {
  flex: 1 !important; border: none !important; padding: 10px !important;
  font-size: 1rem !important; color: var(--text-color); border-radius: 0 10px 10px 0;
}
.input-group .form-control:focus {
  border-color: var(--primary-color); box-shadow: 0 0 8px var(--primary-color); outline: none;
}
.input-group .toggle-password {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  cursor: pointer; color: var(--text-color); font-size: 1.4rem; z-index: 1040;
}
.input-group .toggle-password:hover { color: var(--primary-color); }

.s4a-file{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;border:1px solid var(--third-color);background:var(--third-light-color);border-radius:12px;}
.s4a-file__icon{width:40px;height:30px;border-radius:8px;background:var(--primary-color);display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:1.1rem;}
.s4a-file__text{line-height:1.1;}
.s4a-file__text strong{color:var(--primary-color);display:block;}
.s4a-file__text small{color:#6b6b6b;display:block;}
.s4a-file__btn{margin-left:auto;padding:8px 14px;border-radius:10px;border:1px solid var(--third-color);background:var(--third-color);color:#222;font-weight:600;cursor:pointer;transition:.18s ease;}
.s4a-file__btn:hover{filter:brightness(0.95);}
.s4a-file__clear{display:none;margin-left:6px;width:36px;height:36px;border-radius:50%;border:1px solid var(--third-color);background:transparent;color:#444;cursor:pointer;transition:.18s ease;}
.s4a-file__clear:hover{background:var(--secondary-light-color);color:#111;}
.s4a-file--has-file .s4a-file__clear{display:inline-flex;align-items:center;justify-content:center;}
.s4a-file__filename{margin-top:6px;font-size:.92rem;color:#6b6b6b;}

/* ─────────────────────────────────────────────────────────────
   FORMS: GENERAL
────────────────────────────────────────────────────────────── */
.form-group { margin-bottom: 1.5rem; }
.form-group label {
  display: block; margin-bottom: 0.5rem; font-size: 1rem; color: var(--primary-color);
}
.form-control {
  width: 100%; padding: 0.8rem; font-size: 1rem;
  border: 1px solid var(--text-color-light); border-radius: 5px;
  color: var(--text-color-light);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.form-control:focus { border-color: var(--secondary-color); outline: none; }

/* ─────────────────────────────────────────────────────────────
   BUTTONS
────────────────────────────────────────────────────────────── */

.btn-primary-theme { background: var(--primary-color)!important; color: var(--text-color-light)!important; border: none!important; padding: 12px 25px!important; font-size: 1rem!important; border-radius: 0px 15px 15px 0px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-primary-theme:hover { background: var(--secondary-color)!important; color: var(--text-color-light)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-info-info { background: none; border: none; padding: 10px!important; cursor: pointer; }
.btn-info-info-select2-multiple { align-self: stretch; height: auto; padding: 10px!important; display: flex; align-items: center; }
.btn-secondary-theme { background: var(--secondary-color)!important; color: var(--text-color-light)!important; border: none!important; padding: 12px 25px!important; font-size: 1rem!important; border-radius: 0px 15px 15px 0px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-secondary-theme:hover { background: var(--background-dark_3)!important; color: var(--text-color-light)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-third-theme { background: var(--third-color)!important; color: var(--text-color)!important; border: none!important; padding: 12px 25px!important; font-size: 1rem!important; border-radius: 0px 15px 15px 0px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-third-theme:hover { background: var(--background-dark_3)!important; color: var(--text-color)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-primary-theme-compact { background: var(--primary-color)!important; color: #fff!important; border: none!important; padding: 7px 15px!important; font-size: 0.95rem!important; border-radius: 6px!important; cursor: pointer!important; transition: background 0.2s, transform 0.18s!important; box-shadow: 0 2px 4px rgba(0,0,0,0.13), inset 0 1px 2px rgba(255,255,255,0.18)!important; font-weight: 500; min-width: 34px; display: inline-flex!important; align-items: center; gap: 5px; }
.btn-primary-theme-compact:hover { background: var(--secondary-color)!important; color: #fff!important; transform: translateY(-3px)!important; }
.btn-grey-theme-compact { background: var(--background-secondary-settings)!important; color: #fff!important; border: none!important; padding: 7px 15px!important; font-size: 0.95rem!important; border-radius: 6px!important; cursor: pointer!important; transition: background 0.2s, transform 0.18s!important; box-shadow: 0 2px 4px rgba(0,0,0,0.13), inset 0 1px 2px rgba(255,255,255,0.18)!important; font-weight: 500; min-width: 34px; display: inline-flex!important; align-items: center; gap: 5px; }
.btn-grey-theme-compact:hover { background: #50555c!important; color: #fff!important; transform: translateY(-3px)!important; }
.btn-secondary-theme-compact { background: var(--secondary-color)!important; color: #fff!important; border: none!important; padding: 7px 15px!important; font-size: 0.95rem!important; border-radius: 6px!important; cursor: pointer!important; transition: background 0.2s, transform 0.18s!important; box-shadow: 0 2px 4px rgba(0,0,0,0.13), inset 0 1px 2px rgba(255,255,255,0.18)!important; font-weight: 500; min-width: 34px; display: inline-flex!important; align-items: center; gap: 5px; }
.btn-secondary-theme-compact:hover { background: var(--secondary-light-color)!important; color: #fff!important; transform: translateY(-3px)!important; }
.btn-third-theme-compact { background: var(--third-color)!important; color: var(--text-color)!important; border: none!important; padding: 7px 15px!important; font-size: 0.95rem!important; border-radius: 6px!important; cursor: pointer!important; transition: background 0.2s, transform 0.18s!important; box-shadow: 0 2px 4px rgba(0,0,0,0.13), inset 0 1px 2px rgba(255,255,255,0.20)!important; font-weight: 500; min-width: 34px; }
.btn-third-theme-compact:hover { background: var(--third-light-color)!important; color: var(--text-color)!important; transform: translateY(-3px)!important; box-shadow: 0 5px 10px rgba(0,0,0,0.18)!important; }
.btn-delete-theme-compact { background-color: var(--example-text-color)!important; color: var(--text-color-light)!important; border: none!important; padding: 7px 15px!important; font-size: 0.95rem!important; border-radius: 6px!important; cursor: pointer!important; transition: background 0.2s, transform 0.16s!important; box-shadow: 0 2px 6px rgba(0,0,0,0.13), inset 0 1px 2px rgba(255,255,255,0.20)!important; font-weight: 500; min-width: 34px; display: inline-flex!important; align-items: center; gap: 5px; }
.btn-delete-theme-compact:hover { background-color: var(--error-border-color)!important; color: var(--text-color-light)!important; transform: translateY(-3px) scale(1.01)!important; box-shadow: 0 5px 10px rgba(0,0,0,0.18)!important; }
.btn-delete-theme { background-color: var(--example-text-color)!important; color: var(--text-color-light)!important; border: none!important; padding: 12px 25px!important; font-size: 1rem!important; border-radius: 0px 15px 15px 0px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-delete-theme:hover { background-color: var(--error-border-color)!important; color: var(--text-color-light)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-primary-theme-container { background: var(--primary-color)!important; color: var(--text-color-light)!important; border: none!important; padding: 5px 15px!important; font-size: 1rem!important; border-radius: 5px 5px 5px 5px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-primary-theme-container:hover { background: var(--secondary-color)!important; color: var(--text-color-light)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-third-theme-container { background: var(--third-color)!important; color: var(--text-color)!important; border: none!important; padding: 5px 15px!important; font-size: 1rem!important; border-radius: 5px 5px 5px 5px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-third-theme-container:hover { background: var(--third-light-color)!important; color: var(--text-color)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-primary-theme-container-secondary { background: var(--background-secondary-settings)!important; color: var(--text-color-light)!important; border: none!important; padding: 5px 15px!important; font-size: 1rem!important; border-radius: 5px 5px 5px 5px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-delete-theme-container { background-color: var(--example-text-color)!important; color: var(--text-color-light)!important; border: none!important; padding: 5px 15px!important; font-size: 1rem!important; border-radius: 5px 5px 5px 5px!important; cursor: pointer!important; transition: background 0.3s ease, transform 0.2s ease!important; box-shadow: 0 4px 6px rgba(0,0,0,0.2), inset 0 1px 2px rgba(255,255,255,0.3)!important; }
.btn-delete-theme-container:hover { background-color: var(--secondary-color)!important; color: var(--text-color-light)!important; transform: translateY(-3px)!important; box-shadow: 0 8px 16px rgba(0,0,0,0.3)!important; }
.btn-primary-theme:focus,.btn-primary-theme-container:focus,.btn-primary-theme-container-secondary:focus { border: none!important; outline: none!important; }
.btn-primary-theme:active,.btn-primary-theme-container:active,.btn-primary-theme-container-secondary:active { border: none!important; outline: none!important; }
.loader-inside-button-theme { display: none!important; margin-left: 6px!important; width: 20px!important; padding: 5px!important; aspect-ratio: 1/1!important; border-radius: 50%!important; background: var(--text-color)!important; --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box!important; -webkit-mask: var(--_m)!important; mask: var(--_m)!important; -webkit-mask-composite: source-out!important; mask-composite: subtract!important; animation: l3 1s infinite linear!important; vertical-align: middle!important; align-items: center!important; justify-content: center!important; }
.loader-inside-button-theme-light { display: none!important; margin-left: 6px!important; width: 20px!important; padding: 5px!important; aspect-ratio: 1/1!important; border-radius: 50%!important; background: var(--text-color-light)!important; --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box!important; -webkit-mask: var(--_m)!important; mask: var(--_m)!important; -webkit-mask-composite: source-out!important; mask-composite: subtract!important; animation: l3 1s infinite linear!important; vertical-align: middle!important; align-items: center!important; justify-content: center!important; }
.loader-inside-button-theme-show { display: inline-flex!important; }
@keyframes l3 { to { transform: rotate(1turn); } }
.btn-primary-theme-container-info { background: var(--log-info-color)!important; }
.btn-primary-theme-container-warning { background: var(--log-warning-color)!important; }
.btn-primary-theme-container-error { background: var(--log-error-color)!important; }
.btn-primary-theme-container-critical { background: var(--log-critical-color)!important; }
.btn-primary-theme-container i { font-size: 1.2rem!important; }
.btn-primary-theme-whole-round { border-radius: 15px!important; }
.btn-primary-modal-right { margin-right: 2rem!important; }
.btn-disabled-style { background-color: var(--disabled-bg-color-dark)!important; color: var(--disabled-color)!important; border: none!important; cursor: not-allowed!important; pointer-events: none!important; }
.btn-disabled-style i { color: var(--disabled-color)!important; }

/* ─────────────────────────────────────────────────────────────
   POPOVERS
────────────────────────────────────────────────────────────── */
.popover-info {
  color: var(--text-color-light) !important;
  border: 1px solid var(--secondary-color) !important; border-radius: 8px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.15); max-width: 200px;
}
.popover-info .popover-header {
  background-color: var(--secondary-color);
  color: var(--text-color-dark); font-size: 1rem; font-weight: bold;
  border-bottom: none; border-radius: 8px 8px 0 0;
}
.popover-info .popover-body { font-size: 0.9rem; line-height: 1.5; padding: 8px 12px; }

/* ─────────────────────────────────────────────────────────────
   VALIDATION STATES
────────────────────────────────────────────────────────────── */
.input-valid {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%27http%3A//www.w3.org/2000/svg%27 viewBox%3D%270 0 24 24%27 fill%3D%27green%27%3E%3Cpath d%3D%27M20.285 6.709l-11.532 11.532c-.392.392-.901.615-1.45.615-.549 0-1.059-.223-1.451-.615l-4.286-4.286c-.392-.392-.615-.902-.615-1.451s.223-1.058.615-1.451c.393-.393.902-.615 1.451-.615.548 0 1.058.222 1.451.615l2.835 2.835 9.846-9.846c.393-.392.902-.615 1.451-.615s1.058.223 1.451.615c.392.393.615.903.615 1.451s-.223 1.059-.615 1.451z%27/%3E%3C/svg%3E")!important;
  background-size: 30px!important; background-position: right 10px center!important; background-repeat: no-repeat!important;
}
.input-valid-parent { box-shadow: 0 0 5px green!important; border-radius: 5px 15px 15px 5px!important; }

.input-error {
  background-image: url('data:image/svg+xml;charset=UTF-8,%3Csvg xmlns%3D%22http://www.w3.org/2000/svg%22 viewBox%3D%220 0 24 24%22%3E%3Ccircle cx%3D%2212%22 cy%3D%2212%22 r%3D%2210%22 fill%3D%22none%22 stroke%3D%22red%22 stroke-width%3D%222%22/%3E%3Ctext x%3D%2212%22 y%3D%2213.5%22 fill%3D%22red%22 font-size%3D%2214%22 font-family%3D%22Arial%2C%20sans-serif%22 text-anchor%3D%22middle%22 alignment-baseline%3D%22middle%22%3E%21%3C/text%3E%3C/svg%3E')!important;
  background-size: 30px!important; background-position: right 10px center!important; background-repeat: no-repeat!important;
}
.input-error-parent { box-shadow: 0 0 5px red!important; border-radius: 5px 15px 15px 5px!important; }

.input-reset { background-image: none!important; }
.input-reset-parent { box-shadow: none!important; border-radius: 5px 15px 15px 5px!important; }

.error { background: var(--error-bg-color); border-left: 4px solid var(--error-border-color); padding: 1.25rem; }
.error-message { color: var(--error-text-color); }
.error-examples { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.75rem; }
.required { color: red; font-weight: bold; }
.example {
  background: var(--example-bg-color); padding: 0.25rem 0.5rem; border-radius: 4px;
  font-size: 0.8rem; color: var(--example-text-color); border: 1px solid var(--example-border-color);
}

/* ─────────────────────────────────────────────────────────────
   SELECT2
────────────────────────────────────────────────────────────── */
.select2-search input { background-color: var(--secondary-color); color: var(--text-color-light); }
.select2-container .select2-selection--single { height: 60px!important; display: flex; align-items: center; border: none; background: var(--background-dark)!important; color: var(--text-color)!important; border-radius: 0 10px 10px 0; box-shadow: none; }
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 60px!important; color: var(--text-color); padding: 0 10px; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 50px!important; display: flex; align-items: center; justify-content: center; color: var(--text-color-light)!important; }
.select2-container .select2-dropdown { background: var(--header-bg-color); border: none; color: var(--text-color-light); border-radius: 0 0 10px 10px; }
.select2-container .select2-results__option { padding: 10px; font-size: 1rem; color: var(--text-color-light); }
.select2-container--default .select2-results__option--selected { background: var(--secondary-color)!important; color: var(--text-color-dark)!important; }
.select2-container .select2-results__option--highlighted { background: var(--third-color)!important; color: var(--text-color-dark)!important; }
.select2-container .select2-results__options::-webkit-scrollbar { width: 8px; height: 8px; }
.select2-container .select2-results__options::-webkit-scrollbar-thumb { background-color: var(--secondary-color); border-radius: 4px; border: 2px solid var(--header-bg-color); }
.select2-container .select2-results__options::-webkit-scrollbar-track { background-color: var(--header-bg-color); border-radius: 4px; }
.select2-container .select2-results__option--disabled { color: var(--disabled-bg-color-dark)!important; background: var(--disabled-color)!important; cursor: not-allowed!important; opacity: 0.75; }
.select2-container .select2-results__options { scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--header-bg-color); }
.whole-round-select-white-bg + .select2-container { background-color: var(--background-dark_1)!important; border-radius: 12px!important; }
.whole-round-select-white-bg + .select2-container .select2-selection--single { height: 60px!important; display: flex; align-items: center; border: none; background: var(--background-dark)!important; color: var(--text-color)!important; border-radius: 10px; box-shadow: none; }
.select2-container { background-color: var(--background-dark0)!important; border-radius: 0 12px 12px 0!important; }

/* Disabled states */
.select2-container--disabled .select2-selection--single, .select2-container--disabled .select2-selection--multiple, .select2-container--disabled .selection .select2-selection { background: var(--disabled-bg-color)!important; color: var(--disabled-color)!important; cursor: not-allowed!important; filter: grayscale(0.25) brightness(1.07) opacity(0.9); border: 1.5px dashed #d2d2d2!important; box-shadow: none!important; }
.select2-container--disabled .select2-selection__rendered, .select2-container--disabled .select2-selection__arrow, .select2-container--disabled .select2-selection__choice { color: var(--disabled-bg-color)!important; background: var(--disabled-color)!important; }
.select2-container--disabled .select2-selection__choice__remove { color: var(--third-color)!important; pointer-events: none; }
.select2-container--disabled .select2-search__field { background: var(--disabled-bg-color)!important; color: var(--disabled-color)!important; pointer-events: none; }

/* Multiple tags */
.select2-selection__choice { background: #ffe5b5!important; border: none!important; color: #2a2931!important; padding: 5px 26px 5px 13px!important; margin: 4px 8px 4px 0!important; border-radius: 2em!important; font-size: 0.97rem!important; position: relative; box-shadow: 0 2px 7px 0 rgba(247,176,79,0.08); display: inline-block!important; vertical-align: middle; overflow-wrap: anywhere; word-break: break-word; white-space: normal!important; max-width: 50%; }
.select2-selection__choice__remove { position: static!important; margin-right: 8px; margin-left: 2px; background: transparent!important; color: #e59e3c!important; font-size: 1.15em!important; border: none!important; width: auto!important; height: auto!important; padding: 0 4px!important; border-radius: 50%!important; line-height: 1!important; display: inline-flex!important; align-items: center!important; justify-content: center!important; cursor: pointer!important; transform: none!important; }
.select2-selection__choice__remove:hover, .select2-selection__choice__remove:focus { color: #fff!important; background: #f44444!important; }

/* Clear-all (x) */
.select2-selection__clear { position: absolute!important; right: 10px!important; top: 50%!important; transform: translateY(-50%); background: none!important; border: none!important; color: #e59e3c!important; margin: 0!important; opacity: 0.7; font-size: 2em; cursor: pointer!important; z-index: 2; box-shadow: none!important; }
.select2-selection__clear:hover { color: #f44444!important; background: none!important; opacity: 1; }

/* Multiple selection container */
.advanced_search_multiple_select .select2-container--default .select2-selection--multiple { min-height: 60px!important; display: flex; align-items: stretch; border: none; background: var(--background-dark)!important; color: var(--text-color)!important; box-shadow: none; padding: 4px 10px; margin-left: 0!important; font-size: 0.9rem; color: #223d4f; box-shadow: 0 1.5px 12px 0 rgba(54,81,123,0.04); transition: border 0.18s; }

/* ─────────────────────────────────────────────────────────────
   DATATABLE
────────────────────────────────────────────────────────────── */
.table-blur-datatable-theme { position: relative; filter: blur(4px); pointer-events: none; user-select: none; opacity: 0.6; }
.table-blur-datatable-theme::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--primary-color) 10%, transparent); pointer-events: none; }
.delete-item-datatable { color: var(--error-text-color)!important; }
.delete-item-datatable:hover { color: var(--example-text-color)!important; background-color: var(--example-border-color)!important; }
.recently-viewed { background: rgba(147, 208, 214, 0.7) !important; }
.dt-input { margin-right: 0.5rem; }
table.dataTable { border-collapse: collapse !important; width: 100% !important; font-size: 0.9rem !important; color: #333 !important; margin-bottom: 20px !important; background-color: rgba(255, 255, 255, 0.5) !important; backdrop-filter: blur(10px) !important; border-radius: 12px !important; overflow: visible; }
table.dataTable th, table.dataTable td { text-align: center !important; vertical-align: middle !important; padding: 10px !important; border-bottom: 1px solid #ddd !important; }
table.dataTable td { background-color: rgba(255, 255, 255, 0.3) !important; }
.dataTables_info, .dt-info { font-size: 0.85rem !important; color: #666 !important; }
.dt-buttons .dt-button { margin-bottom: 1rem!important; background: var(--primary-color); color: var(--background-white); border: none!important; border-radius: 14px !important; font-weight: 600; font-size: 1.04rem; padding: 0.48em 1.7em; margin-right: 0.7em; box-shadow: 0 2px 6px 0 var(--background-dark4); outline: none !important; display: inline-flex; align-items: center; gap: 0.4em; letter-spacing: 0.01em; transition: background 0.15s, box-shadow 0.13s; }
.dt-buttons .dt-button:hover, .dt-buttons .dt-button:focus { background: var(--secondary-color); color: var(--background-white); box-shadow: 0 4px 14px 0 var(--background-dark2); }
.btn-profit-theme-table { background: var(--profit-color) !important; color: var(--text-color-light) !important; }
.btn-profit-theme-table:hover { background: var(--profit-color-darker) !important; color: var(--text-color-light) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important; }
.btn-excel-theme-table { background: var(--excel-color) !important; color: var(--text-color-light) !important; }
.btn-excel-theme-table:hover { background: var(--excel-color-darker) !important; color: var(--text-color-light) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important; }
.btn-pdf-theme-table { background: var(--pdf-color) !important; color: var(--text-color-light) !important; }
.btn-pdf-theme-table:hover { background: var(--pdf-color-darker) !important; color: var(--text-color-light) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important; }
.btn-primary-theme-table { background: var(--primary-color) !important; color: var(--text-color-light) !important; }
.btn-primary-theme-table:hover { background: var(--secondary-color) !important; color: var(--text-color-light) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3) !important; }
.dt-buttons .dt-button:last-child { margin-right: 0; }
.dt-btn-right { float: right !important; margin-left: 12px; border: none !important; background: transparent !important; pointer-events: none; box-shadow: none !important; padding: 0 !important; }
.dt-buttons .buttons-excel, .dt-buttons .buttons-pdf { background: var(--primary-color) !important; color: var(--background-white) !important; }
.dt-search { float: right; margin-bottom: 1vh; }
div.dt-container .dt-paging .dt-paging-button { box-sizing: border-box; display: inline-block; min-width: 1.5em; padding: 0.5em 1em; margin: 2px; text-align: center; text-decoration: none !important; cursor: pointer; color: var(--text-color-light) !important; border: 1px solid transparent; border-radius: 5px; background-color: var(--secondary-color) !important; transition: background-color 0.3s ease, border-color 0.3s ease; }
div.dt-container .dt-paging .dt-paging-button:hover { background-color: var(--primary-color) !important; background: var(--primary-color) !important; border-color: var(--primary-color) !important; color: var(--text-color-light) !important; }
div.dt-container .dt-paging .dt-paging-button.disabled { background-color: var(--background-dark3)!important; color: var(--text-color-light) !important; cursor: not-allowed; }
div.dt-container .dt-paging .dt-paging-button.disabled:hover { background-color: var(--primary-color)!important; color: var(--text-color-light) !important; cursor: not-allowed; }
.dt-container .dataTables_length select, .dt-container .dataTables_filter input { padding: 5px; border-radius: 4px; border: 1px solid #ddd; margin-left: 5px; font-size: 0.9rem; }
.dt-container .dataTables_length, .dt-container .dataTables_filter { margin-bottom: 15px; }
.dt-container .btn { padding: 8px 10px; border-radius: 5px; font-size: 0.85rem; margin-right: 5px; }
.dt-container .btn i { margin-right: 5px; }
.table { background-color: var(--background-overlay); border-radius: 10px; overflow: hidden; margin-top: 20px; animation: fadeIn 1s ease-out; color: var(--primary-color); width: 100% !important; }
.table th, table.dataTable th { background-color: var(--primary-color); color: var(--text-color-light); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--breadcrumb-bg); }
.table-striped tbody tr:nth-of-type(even) { background-color: var(--secondary-color); }
.dt-container { padding: 20px; background-color: var(--background-color) !important; border-radius: 12px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); border: 2px solid var(--gradient-primary-start) !important; max-width: 100%; width: 100% !important; }
table.dataTable tbody tr:hover { background-color: var(--background-dark2); cursor: pointer; }
.dt-paging-button { background-color: var(--primary-color); color: var(--text-color-light); border: 1px solid transparent; border-radius: 5px; transition: background-color 0.3s ease; }
.dt-paging-button:hover { background-color: var(--gradient-primary-start); }
div.dt-container .dt-paging .dt-paging-button.current, div.dt-container .dt-paging .dt-paging-button.current:hover { background: var(--primary-color) !important; background-color: var(--primary-color) !important; border-color: var(--secondary-color) !important; color: var(--text-color-light) !important; }
.btn-table { cursor: pointer !important; color: var(--text-color-light) !important; display: flex !important; align-items: center !important; text-align: center !important; justify-content: center !important; }
.btn-table .btn i { font-size: 1.2rem !important; }
.btn-action-table { background-color: var(--primary-color); color: var(--text-color-light); }
.btn-action-table:hover { background-color: var(--secondary-color); color: var(--text-color-light); }
.btn-action-table[title] { position: relative; }
.btn-action-table[title]::after { content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background-color: var(--primary-color); color: var(--text-color-light); padding: 5px 8px; border-radius: 4px; font-size: 0.75rem; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity 0.2s; z-index: 10; pointer-events: none; }
.btn-action-table:hover[title]::after { opacity: 1; visibility: visible; }
.btn-group { position: relative; }
.btn-group .dropdown-toggle::before { display: none !important; }
.btn-group .dropdown-toggle::after { display: none !important; }
.dropdown-menu { background-color: #f8f9fa; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); padding: 0; }
.dropdown-item { padding: 10px 15px; font-size: 14px; color: var(--header-bg-color); text-decoration: none; display: flex; align-items: center; gap: 10px; transition: all 0.3s ease; cursor: pointer; }
.dropdown-item:hover { background-color: var(--primary-color); color: var(--text-color-light); }
.btn-primary-theme-datatable-help { background: transparent !important; border: none !important; padding: 0px !important; font-size: 0.5rem !important; margin: 0px!important; border-radius: 25px !important; cursor: pointer !important; transition: background 0.3s ease, transform 0.2s ease !important; }

/* ─────────────────────────────────────────────────────────────
   TEXTAREA SCROLLBARS
────────────────────────────────────────────────────────────── */
textarea::-webkit-scrollbar { width: 8px; height: 8px; }
textarea::-webkit-scrollbar-thumb {
  background-color: var(--secondary-color); border-radius: 4px; border: 2px solid var(--header-bg-color);
}
textarea::-webkit-scrollbar-track { background-color: var(--header-bg-color); border-radius: 4px; }
textarea { scrollbar-width: thin; scrollbar-color: var(--secondary-color) var(--header-bg-color); }

/* ─────────────────────────────────────────────────────────────
   SWEETALERT2
────────────────────────────────────────────────────────────── */
.swal2-icon.swal2-info { color: var(--secondary-color) !important; border-color: var(--secondary-color) !important; }
.swal2-icon.swal2-info .swal2-icon-content { color: var(--secondary-color) !important; }
.swal2-container{ z-index: 1080!important; }

/* Scrollable content inside popup */
.swal2-popup .swal2-html-container::-webkit-scrollbar { width: 8px !important; height: 8px !important; }
.swal2-popup .swal2-html-container::-webkit-scrollbar-thumb {
  background-color: var(--secondary-color) !important; border-radius: 4px !important;
  border: 2px solid var(--background-color) !important;
}
.swal2-popup .swal2-html-container::-webkit-scrollbar-track {
  background-color: var(--background-color) !important; border-radius: 4px !important;
}
.swal2-popup .swal2-html-container::-webkit-scrollbar-button { display: none !important; }
.swal2-popup .swal2-html-container {
  scrollbar-width: thin !important; scrollbar-color: var(--secondary-color) var(--background-color) !important;
}

/* Buttons */
.swal2-confirm {
  background-color: var(--primary-color) !important; color: var(--text-color-light) !important;
  font-weight: bold !important; border: none !important; border-radius: 5px !important;
  padding: 10px 20px !important; margin: 0 10px !important; transition: background-color 0.3s ease !important;
}
.swal2-confirm:hover { background-color: var(--gradient-primary-end) !important; color: #fff !important; }
.swal2-cancel {
  background-color: var(--error-border-color) !important; color: var(--text-color-light) !important;
  font-weight: bold !important; border: none !important; border-radius: 5px !important;
  padding: 10px 20px !important; margin: 0.5rem !important; transition: background-color 0.3s ease !important;
}
.swal2-cancel:hover { background-color: var(--error-text-color) !important; color: #fff !important; }
.swal2-actions { margin-top: 20px !important; }

/* Popup */
.swal2-popup {
  background-color: var(--background-color) !important; color: var(--text-color) !important;
  border-radius: 10px !important; padding: 20px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2) !important;
}
.swal2-title {
  color: var(--primary-color) !important; font-size: 1.5rem !important; font-weight: bold !important; margin-bottom: 10px !important;
}
.swal2-html-container {
  color: var(--secondary-color) !important; font-size: 1rem !important; margin-bottom: 20px !important; text-align: center !important;
}

/* ─────────────────────────────────────────────────────────────
   MODALS
────────────────────────────────────────────────────────────── */
.modal { overflow-y: scroll; }
.modal-header {
  border-bottom: 1px solid #ddd; padding-bottom: 15px; padding-top: 10px;
}
.modal-header .modal-title { font-size: 1.5rem; font-weight: 600; color: var(--primary-color); }
.modal-header .btn {
  font-size: 0.9rem; padding: 10px 15px; border-radius: 8px; transition: background-color 0.3s ease;
  color: var(--text-color-light); background-color: var(--primary-color); border: none;
}
.modal-body { padding: 20px; font-size: 1rem; line-height: 1.6; color: #555; }
.modal-dialog-centered {
  display: flex; align-items: center; justify-content: center; min-height: calc(100% - 1rem);
}
.modal-header .close {
  font-size: 1.5rem; color: #bbb; opacity: 1; border: none; background: none; outline: none;
  transition: color 0.3s ease, transform 0.3s ease; cursor: pointer;
}
.modal-header .close:hover { color: #ff4b4b; transform: scale(1.2); }
.modal-content {
  background-color: var(--background-color); border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15); color: var(--primary-color);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ─────────────────────────────────────────────────────────────
   CUSTOM CHECKBOX
────────────────────────────────────────────────────────────── */
.custom-checkbox { display: flex!important; align-items: center!important; padding-left: 0px!important; }
.custom-checkbox input { width:25px!important; height:22px!important; }
.custom-checkbox .form-check-input {
  background-color: var(--background-dark)!important; border: 2px solid var(--secondary-color)!important;
  width: 18px; height: 18px; cursor: pointer; margin: 0;
}
.custom-checkbox .form-check-input:checked {
  background-color: var(--secondary-color) !important; border-color: var(--secondary-color) !important;
}
.custom-checkbox .form-check-label { color: var(--text-color); font-size: 1rem; margin-left: 8px; }
.custom-checkbox a { color: var(--primary-color); text-decoration: none; font-weight: bold; }
.custom-checkbox a:hover { text-decoration: underline; color: var(--secondary-color); }

/* Checked icon for bootstrap-like inputs */
.form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")!important;
}

/* ─────────────────────────────────────────────────────────────
   ZOOM / IMAGES
────────────────────────────────────────────────────────────── */
.zoom-container {
  position: relative; width: 100%; max-height: 70vh;
  display: flex; justify-content: center; align-items: center;
}
.zoomedImage {
  position: relative; user-select: none; max-width: 100%; width:95%!important; height:95%!important;
  cursor: grab; transition: transform 0.2s ease, left 0.2s ease, top 0.2s ease;
}
.zoomedImage:active { cursor: grabbing; }
.zoom-controls { position: absolute; top: 10px; right: 10px; display: flex; gap: 5px; }
.zoom-controls button {
  background: rgba(0, 0, 0, 0.5); color: white; border: none; padding: 8px; cursor: pointer; border-radius: 5px;
}
.zoom-controls button:hover { background: rgba(0, 0, 0, 0.8); }
.imageForZoom { position: relative; display: inline-block; }
.imageForZoom:hover { cursor: zoom-in; }

/* ─────────────────────────────────────────────────────────────
   CARDS
────────────────────────────────────────────────────────────── */
.card { background: var(--background-dark_1)!important; box-shadow: var(--tz-box-shadow), 0px 4px 12px rgba(0, 0, 0, 0.1); border-radius: var(--tz-border-radius); }
.card-header { margin-bottom: 1rem; display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.5rem; border-bottom: 2px solid var(--primary-color); }
.card-map { min-height: 20rem !important; }
.card-mini-card { min-height: 5rem !important; }
.card-table .card-body table { min-height: 20rem !important; max-height: 30rem !important; }
.card-table-small .card-body table { min-height: 10rem !important; max-height: 20rem !important; }
.card-title { font-size: 1.5rem; font-weight: bold; color: var(--primary-color); margin: 0; }
.card-buttons-right { display: flex!important; gap: 0.5rem!important; margin-left: auto!important; }
.card-buttons .btn { border: none!important; border-radius: 5px!important; padding: 0.4rem 0.8rem!important; font-size: 0.85rem!important; font-weight: 500!important; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1)!important; transition: all 0.3s ease!important; }
.card-buttons .btn:hover { transform: translateY(-2px); }
.card-body { display: flex; justify-content: space-between; align-items: center; padding: 1rem; width: 100%; }
.text-card-precentage { color: var(--text-color-light) !important; }

/* ─────────────────────────────────────────────────────────────
   DASHBOARD THEME BASE
────────────────────────────────────────────────────────────── */

/* Footer */
.app-footer {background-color: var(--header-bg-color) !important;}
.app-footer p {margin-bottom: 0 !important;}

/* Header & Main */
.app-header {background-color: var(--header-bg-color) !important;}
.app-main {background-color: var(--background-color) !important;}
.app-content-header {padding: 1.5rem 0; background-color: var(--background-color); border-bottom: 1px solid var(--secondary-color);}
.app-content-header-no-border {border: none !important;}
.app-content-header h3 {font-size: 1.75rem; font-weight: 600; color: var(--primary-color); margin: 0;}

/* Sidebar & Navbar */
.side-bar-dark {background: var(--bg-primary-end) !important;}
.navbar-nav .nav-item .nav-link {display: flex !important; align-items: center !important; gap: 5px !important; font-size: 14px !important;}
.sidebar_seperator {margin: 1rem 0px 0px 0px!important; border: 1px var(--background-color) solid!important; width: 100%!important;}

/* Session Timeout */
.session-timeout-wrapper {background-color: var(--background-dark4); border: 1px solid var(--background-overlay); border-radius: 8px; text-align: center; max-width: 300px; padding: 10px 15px; margin: 0 auto; box-shadow: 0 2px 4px var(--background-overlay);}
.session-timeout-content {display: flex; align-items: center; justify-content: center; gap: 8px;}
.session-timeout-message {font-size: 14px; color: var(--text-color-light); margin: 0;}
.countdown {font-weight: bold; color: var(--status-off-color); font-size: 16px;}
.countdown-icon {font-size: 18px; color: var(--text-color-light);}

/* Footer Links */
.footer-link-dashboard {color: var(--background-color) !important; text-decoration: none; font-size: 1rem; font-weight: 500; transition: all 0.3s ease-in-out;}
.footer-link-dashboard:hover {color: var(--secondary-color) !important; transform: translateY(-3px);}

/* Navbar Interactions */
.button-navbar-left-theme .nav-item {transition: all 0.3s ease;}
.button-navbar-left-theme .nav-item:hover {background-color: var(--secondary-color); transform: translateY(-5px); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);}
.button-navbar-left-theme .nav-item:hover .nav-link {color: var(--text-color-light); text-decoration: none;}

/* Navbar Badge */
.navbar-badge {position: absolute; top: 1px!important; right: -5px!important; z-index: 10; font-size: 0.7rem; font-weight: bold; padding: 0.10rem 0.50rem; border-radius: 1.2em; min-width: 1.7em; min-height: 1.7em; line-height: 1.3em; text-align: center; background: rgb(from var(--secondary-color) r g b / 0.88) !important; color: #fff; box-shadow: 0 2px 10px rgba(44,62,80,0.07); display: inline-block; border: none; transition: background 0.15s; pointer-events: none;}
.navbar-badge[data-count]:not([data-count=""]):not([data-count="0"]) {display: inline-block;}

/* Notifications Dropdown */
.notifications-dropdown-menu {box-shadow: 0 8px 36px rgba(60,72,88,0.15) !important; border-radius: 16px !important; border: 1px solid #f1f1f5 !important; background: #f8fafd !important; min-width: 340px !important; max-width: 440px !important; max-height: 62vh !important; overflow-y: auto !important; padding-bottom: 0.5rem !important; margin-top: 12px !important; scrollbar-width: thin !important; scrollbar-color: #c7e4ef #f8fafd !important;}
.notifications-dropdown-menu::-webkit-scrollbar {width: 7px !important; background: var(--background-white, #fff) !important;}
.notifications-dropdown-menu::-webkit-scrollbar-thumb {background: var(--background-dark_2, #93d0d6) !important; border-radius: 8px !important;}
.notifications-dropdown-menu::-webkit-scrollbar-thumb:hover {background: var(--background-dark_4, #93d0d6) !important;}
.notifications-dropdown-menu .dropdown-header {font-weight: bold !important; color: var(--secondary-color, #03738c) !important; font-size: 1.08em !important; background: var(--background-white, #fff) !important; border-bottom: none !important; padding-bottom: 0.4em !important; position: sticky !important; top: 0 !important; z-index: 2 !important;}
.notifications-dropdown-menu .dropdown-divider {position: sticky !important; top: 2.2em !important; z-index: 1 !important; background: var(--background-white, #fff) !important; margin-bottom: 0 !important;}
.notifications-dropdown-list-scroll {overflow-y: auto !important; max-height: 52vh !important; min-height: 50px;}
.notification-item {display: flex !important; align-items: flex-start !important; gap: 0.8em !important; padding: 0.82em 1.15em 0.82em 1.15em !important; cursor: pointer !important; background: transparent !important; transition: background 0.12s !important; border-bottom: 1px solid var(--background-dark_1, #e9e9e9) !important;}
/*.notification-item.unread {background: var(--background-dark_2, #e8f6fc) !important;}*/
.notification-item:hover {background: var(--background-dark_4, #f4faff) !important;}
.notification-icon {font-size: 1.26em !important; margin-top: 2px !important; color: var(--secondary-color, #03738c) !important; opacity: 0.83 !important;}
.notification-content {flex: 1 1 auto !important; min-width: 0 !important;}
.notification-title {font-weight: 600 !important; font-size: 1.09em !important; color: var(--text-color, #22223b) !important;}
.notification-date {font-size: 0.97em !important; color: var(--breadcrumb-active, #6c757d) !important; margin-top: 0.1em !important; letter-spacing: 0.03em !important;}
.notification-message {font-size: 1em !important; color: var(--text-color, #22223b) !important; margin-top: 0.08em !important; font-weight: 400 !important; word-break: break-word !important;}
.notification-title .badge {background: var(--third-color, #FFC04A) !important; color: #fff !important; font-size: 0.78em !important; padding: 0.20em 0.6em !important; vertical-align: middle !important; margin-left: 0.4em !important;}

/* Inputs / Select2 helpers */
.input-without-help-icon{ background-color: var(--background-dark) !important; border-radius: 0px 12px 12px 0px!important; }
.input-with-help-icon{ background-color: var(--background-dark) !important; border-radius: 0px !important; }
.input-with-help-icon + .select2-container .select2-selection--single {border-radius: 12px 0px 0px 12px!important;}
.select2-no-arrow .select2-selection__arrow {display: none !important;}

/* Admin Installer */
.admin_installer_info_form {display:none;}

/* Profile Header & Cover */
.profile-header {text-align: center; position: relative; background: linear-gradient(to bottom, var(--gradient-primary-start), var(--gradient-primary-end)); color: var(--text-color-light); border-radius: var(--tz-border-radius); overflow: hidden;}
.profile-cover {width: 100%; height: 250px; overflow: hidden; position: relative;}
.cover-image {width: 100%!important; height: 100%!important; object-fit: cover; filter: brightness(0.7); position: absolute; top: 0; left: 0; z-index: 1;}
.profile-info {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--text-color-light); text-shadow: 0 2px 5px var(--background-dark3);}
.profile-image .image-circle {width: 120px!important; height: 120px!important; border-radius: 50%; border: 5px solid var(--text-color-light); object-fit: cover; box-shadow: var(--tz-box-shadow);}
.profile-name {font-size: 24px; font-weight: bold; margin: 0;}
.profile-title {font-size: 18px; margin: 5px 0;}
.profile-location {font-size: 14px; font-weight: 300; color: var(--inactive-color);}
.small_header_tagline {font-size: 0.8rem!important;}
.profile-image{position:relative;display:inline-block}
.profile-edit-btn{ position:absolute;right:-8px;bottom:-8px;width:36px;height:36px;border-radius:50%;border:0; background:var(--secondary-color);color:var(--text-color-light);display:flex;align-items:center;justify-content:center; box-shadow:0 2px 8px rgba(0,0,0,.15);cursor:pointer }
.profile-edit-btn:hover{transform:scale(1.06)}
.swal-avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:12px}
.swal-avatar-item{ position:relative; border-radius:50%; padding:4px; border:2px solid transparent; cursor:pointer; transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.swal-avatar-item:hover{ border-color:var(--third-color); transform:translateY(-2px) scale(1.05); box-shadow:0 6px 16px rgba(0,0,0,.2); }
.swal-avatar-item.selected{ border-color:var(--primary-color); box-shadow:0 0 0 3px rgba(13,110,253,.2); }
.swal-avatar-item img{ width:64px;height:64px;border-radius:50%;display:block;margin:auto; pointer-events:none; }
.swal-wide{ width: 70vw !important; }
.swal-avatar-badge{ position:absolute; left:50%; bottom:-6px; transform:translateX(-50%); padding:2px 8px; border-radius:9999px; font-size:11px; line-height:1.2; color:#fff; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); opacity:0; transition:opacity .12s ease, transform .12s ease; }
.swal-avatar-item:hover .swal-avatar-badge{opacity:1; transform:translate(-50%, -2px);}

/* Profile Tabs */
.profile-tabs ul {display: flex; justify-content: center; list-style: none; margin: 20px 0; padding: 0; border-bottom: 2px solid var(--breadcrumb-bg);}
.profile-tabs ul li {padding: 10px 20px; font-size: 16px; font-weight: bold; color: var(--text-color); cursor: pointer; transition: color 0.3s, border-bottom 0.3s;}
.profile-tabs ul li.active {color: var(--primary-color); border-bottom: 3px solid var(--primary-color);}
.profile-tabs ul li:hover {color: var(--primary-color);}
.tab-content-profile-page {display: none; border-radius: var(--tz-border-radius); box-shadow: var(--tz-box-shadow); margin-bottom: 10px;}
.tab-content-profile-page.active {display: block;}

/* Profile Info Table */
.profile-page-user-info-table {width: 100%; border-collapse: collapse; margin-top: 20px; background: var(--example-bg-color); border-radius: var(--tz-border-radius); overflow: hidden;}
.profile-page-user-info-table td {padding: 15px; border: 1px solid var(--breadcrumb-bg); font-size: 14px; color: var(--text-color);}
.profile-page-user-info-table td:first-child {font-size: 1.2rem; font-weight: bold; width: 50%; background-color: var(--background-dark2);}
.profile-page-user-info-table td:last-child {font-size: 1.2rem; background-color: var(--background-dark); width: 50%;}

/* Misc Layout Helpers */
.center-form {display: flex; justify-content: center;}
.profile-email-container {display: flex; align-items: center; gap: 10px;}
.status-badge {display: inline-flex; align-items: center; font-weight: bold;}
.input-loader {position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; display: none;}

/* OTP Section */
.container_otp {text-align: center !important; border-top: 2px solid var(--primary-color); width: 100% !important;}
.container_otp h1 {color: var(--text-color) !important; font-size: 1.8rem !important; margin-bottom: 1rem !important;}
.container_otp p {color: var(--text-color) !important; font-size: 1rem !important; margin-bottom: 1.5rem !important;}
.otp-input {display: flex !important; justify-content: center !important; margin-bottom: 2rem !important;}
.otp-input input {width: 50px !important; height: 50px !important; margin: 0 8px !important; text-align: center !important; font-size: 1.5rem !important; border: 2px solid var(--primary-color) !important; border-radius: 12px !important; background-color: var(--background-dark) !important; color: var(--text-color) !important; transition: all 0.3s ease !important;}
.otp-input input:focus {border: 1px solid var(--secondary-color) !important; box-shadow: 0 0 0 2px var(--secondary-color) !important; outline: none !important;}
.otp-input input::-webkit-outer-spin-button, .otp-input input::-webkit-inner-spin-button {-webkit-appearance: none !important; margin: 0 !important;}
#timerDisplay {font-size: 1rem !important; color: var(--secondary-color) !important; font-weight: 500 !important; margin-left: 10px !important;}
.resend-text {margin-top: 1rem !important; font-size: 0.9rem !important; color: #b0b0b0 !important;}
.resend-link {color: var(--primary-color) !important; text-decoration: none !important; cursor: pointer !important; transition: color 0.3s ease !important;}
.resend-link:hover {color: var(--secondary-color) !important; text-decoration: underline !important;}
#email_otp {color: var(--secondary-color) !important; font-weight: 500 !important;}

/* Breadcrumbs Modern */
.breadcrumb-modern {display: flex; align-items: center; padding: 0; margin: 0; background-color: transparent; list-style: none; font-size: 0.95rem;}
.breadcrumb-modern li {display: flex; align-items: center;}
.breadcrumb-modern li + li::before {content: ">"; color: var(--breadcrumb-separator); padding: 0 0.5rem; font-size: 0.95rem;}
.breadcrumb-modern .breadcrumb-item a {text-decoration: none; color: var(--breadcrumb-link); transition: color 0.3s;}
.breadcrumb-modern .breadcrumb-item a:hover {color: var(--breadcrumb-active);}
.breadcrumb-modern .breadcrumb-item.active {color: var(--breadcrumb-active); font-weight: bold;}

/* Widget Cards */
.widget-flat {position: relative; overflow: hidden; border-radius: var(--tz-border-radius); display: flex; align-items: center; justify-content: space-between; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);}
.widget-flat:hover {box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);}
.gradient-primary {background: linear-gradient(45deg, var(--gradient-primary-start), var(--gradient-primary-end));}
.text-color-light {color: var(--text-color-light) !important;}
.text-color-light i {font-size: 1.4rem;}
.bg-very-light {background: var(--background-color) !important;}
.bg-light {background: var(--gradient-primary-start) !important;}
.bg-dark {background: var(--bg-primary-end) !important;}
.bg-icons {background: var(--gradient-primary-start) !important; opacity: 0.9; font-size: 0.65rem !important;}
.content h6 {font-size: 1rem; font-weight: 600; margin: 0; color: var(--text-color-light);}
.content h2 {font-size: 2rem; font-weight: bold; margin: 0.5rem 0; color: var(--text-color-light);}
.content p {margin: 0; font-size: 0.875rem; color: var(--text-color-light);}
.icon {background: rgba(255, 255, 255, 0.2); color: var(--text-color-light); text-align: center; border-radius: 0 3px 3px 0; position: absolute; min-width: 80px; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center;}
.icon i {font-size: 2.5rem;}

/* Right Glassy Sidebar */
#sidebar-toggle-right {position: fixed; top: 20%; right: 40px; transform: rotate(270deg); transform-origin: right top; background: var(--background-dark4); backdrop-filter: blur(5px); color: #ffffff; padding: 8px 16px; border-radius: 10px 10px 0 0; cursor: pointer; z-index: 999; font-weight: bold; font-size: 1rem;}
#glassySidebarRight {position: fixed; top: 0; right: -65%; height: 100%; width: 60%; max-width: 1000px; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(12px); box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2); transition: all 0.4s ease; z-index: 1035 !important; padding: 20px; overflow-y: auto; border-left: 1px solid rgba(255, 255, 255, 0.1); border-top-left-radius: 20px; border-bottom-left-radius: 20px;}
#glassySidebarRight.active {right: 0;}
#sidebar-toggle-right-inner {position: absolute; left: -5px; top: 50%; transform: translateY(-50%); width: 30px; height: 60px; background: var(--background-dark_2); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); border-radius: 8px 0 0 8px; display: flex; justify-content: center; align-items: center; cursor: pointer; z-index: 1050; box-shadow: 0 0 5px rgba(0,0,0,0.3);}
#sidebar-arrow-icon {font-size: 1.4rem; color: #fff; transition: transform 0.3s ease;}
#glassySidebarRight.active #sidebar-arrow-icon {transform: rotate(180deg);}

/* Quick Buttons */
.theme-quick-btn {background: var(--primary-color); border: none; color: var(--text-color-light) !important; font-weight: 500; border-radius: 50%; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 7px var(--background-dark, rgba(3,115,140,0.07)); transition: background 0.18s, color 0.18s;}
.theme-quick-btn:hover, .theme-quick-btn:focus {background: var(--secondary-color); color: var(--text-color-light) !important;}
.OR-quick-btn {background: var(--third-color);}
.OR-quick-btn:hover, .OR-quick-btn:focus {background: var(--third-light-color); color: var(--text-color-light) !important;}
.AND-quick-btn {background: var(--secondary-color);}
.AND-quick-btn:hover, .AND-quick-btn:focus {background: var(--secondary-light-color); color: var(--text-color-light) !important;}

/* Preset Pills */
.theme-preset-btn {background: var(--background-dark_4); border: 1px solid var(--primary-color); color: var(--primary-color) !important; border-radius: 20px; font-weight: 500; padding: 4px 16px 4px 10px; margin: 0 6px 6px 0; font-size: 14px; transition: background 0.18s, color 0.18s, border 0.18s;}
.theme-preset-btn:hover, .theme-preset-btn:focus {background: var(--secondary-color); border-color: var(--secondary-color); color: var(--text-color-light) !important;}

/* Theme Tabs */
.theme-tabs {width: 100%; margin-bottom: 1.5rem;}
.theme-tab-header {display: flex; border-bottom: 2px solid var(--gradient-primary-start); background: var(--background-dark_1); padding-bottom: 0; border-radius: 12px 12px 0 0;}
.theme-tab-btn {background: none; border: none; color: var(--primary-color); font-weight: 600; padding: 12px 28px; font-size: 1.08rem; transition: background 0.2s, color 0.2s; border-radius: 12px 12px 0 0; margin-right: 6px; outline: none; cursor: pointer; position: relative;}
.theme-tab-btn.active, .theme-tab-btn:focus {background: var(--background-dark2); color: var(--secondary-color); border-bottom: 3px solid var(--gradient-primary-start); z-index: 2;}
.theme-tab-btn:not(.active):hover {background: var(--third-color); color: var(--text-color);}
.theme-tab-btn-positive.active, .theme-tab-btn-positive:focus {background: var(--background-status-on-color-light); color: var(--secondary-color); border-bottom: 3px solid var(--gradient-primary-start); z-index: 2;}
.theme-tab-btn-negative.active, .theme-tab-btn-negative:focus {background: var(--background-status-off-color-light); color: var(--secondary-color); border-bottom: 3px solid var(--gradient-primary-start); z-index: 2;}
.theme-tab-content {background: var(--background-dark_1); border-radius: 0 0 12px 12px; padding: 22px 12px 12px 12px; box-shadow: 0 2px 12px rgba(2, 83, 115, 0.07); border-top: none;}
.theme-tab-pane {display: none;}
.theme-tab-pane.active {display: block;}

#PrivacyPolicyModal,#TermsandConditionsModal { z-index:9999!important; }

.blur-transition { transition: filter 0.5s ease, opacity 0.5s ease; }

/* ─────────────────────────────────────────────────────────────
   LEAFLET POPUPS & TOOLTIPS
────────────────────────────────────────────────────────────── */
.leaflet-popup { width: 100vw!important; max-width: 400px!important; }
.leaflet-popup-content { color: var(--primary-color); background-color: var(--background-color); border: 1px solid var(--breadcrumb-bg); border-radius: 8px; padding: 15px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); margin: 0 auto!important; width: 100%!important; max-width: 400px!important; }
.leaflet-tooltip.marker-tooltip { background-color: var(--header-bg-color-footer); border: 1px solid var(--background-dark4); color: var(--text-color-light); font-weight: bold; padding: 5px 10px; border-radius: 8px; white-space: nowrap; text-align: center; backdrop-filter: blur(8px); box-shadow: 0 4px 6px var(--glass-box-shadow); transition: all 0.3s ease-in-out; }
.popup-header { margin: 0; font-size: 1.3rem; color: var(--primary-color); text-align: center; font-weight: bold; }
.popup-separator { border-top: 1px solid var(--gradient-primary-end); }
.popup-separator-items { border-top: 2px solid var(--background-dark2); }
.popup-content { display: flex; justify-content: space-between; margin: 8px 0; width: 100%!important; max-width: 400px!important; }
.popup-content b { color: var(--primary-color); font-weight: bold; text-align: left; }
.popup-content span { color: var(--primary-color); text-align: right; }
.popup-footer { color: var(--breadcrumb-active); font-size: 0.8rem; text-align: center; margin-top: 10px; }
.popup-container { width: 100%!important; max-width: 400px!important; max-height: 40vh!important; overflow: auto!important; scrollbar-width: thin; scrollbar-color: var(--background-dark_1) var(--background-dark); }
.popup-container::-webkit-scrollbar { width: 8px; height: 8px; }
.popup-container::-webkit-scrollbar-thumb { background-color: var(--background-dark_1)!important; border-radius: 4px!important; border: 2px solid var(--header-bg-color)!important; }
.popup-container::-webkit-scrollbar-track { background-color: var(--header-bg-color)!important; border-radius: 4px!important; }
.popup-wrapper .btn-outline-primary { border:1px solid var(--primary-color); color:var(--primary-color); }
.popup-wrapper .btn-outline-primary:hover { background-color:var(--primary-color); color:white; }
.popup-wrapper .btn-outline-danger { border:1px solid var(--status-off-color); color:var(--status-off-color); }
.popup-wrapper .btn-outline-danger:hover { background-color:var(--status-off-color); color:white; }
.popup-wrapper .btn-outline-info { border:1px solid var(--secondary-color); color:var(--secondary-color); }
.popup-wrapper .btn-outline-info:hover { background-color:var(--secondary-color); color:white; }

/* ─────────────────────────────────────────────────────────────
   STATUS INDICATORS
────────────────────────────────────────────────────────────── */
.status-indicator { display: flex; justify-content: center; align-items: center; height: 100%; }
.circle { width: 20px; height: 20px; border-radius: 50%; position: relative; }
.circle::after { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-radius: 50%; transform: translate(-50%, -50%); background-color: var(--inner-circle-color); }
.pulse { animation: pulse-animation 1.5s infinite; }
.status-on { background: var(--status-on-color); box-shadow: 0 0 5px rgba(var(--status-on-rgba), 0.8); animation: pulse-animation 1.5s infinite; }
.status-withdrawal { background: var(--status-withdrawal-color); box-shadow: 0 0 5px rgba(var(--status-withdrawal-rgba), 0.8); animation: pulse-animation-withdrawal 1.5s infinite; }
.status-off { background: var(--status-off-color); box-shadow: 0 0 5px rgba(var(--status-off-rgba), 0.8); animation: pulse-animation-off 1.5s infinite; }
.status-warning { background: var(--status-warning-color); box-shadow: 0 0 5px rgba(var(--status-warning-rgba), 0.8); animation: pulse-animation-warning 1.5s infinite; }
.status-active-map { color: var(--background-color)!important; background: var(--status-on-color); box-shadow: 0 0 5px rgba(var(--status-on-rgba), 0.8); font-weight: bold; animation: pulse-animation-map 1.5s infinite; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.status-inactive-map { color: var(--background-color)!important; background: var(--status-off-color); box-shadow: 0 0 5px rgba(var(--status-off-rgba), 0.8); font-weight: bold; animation: pulse-animation-off-map 1.5s infinite; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.status-warning-map { color: var(--background-color)!important; background: var(--status-warning-color); box-shadow: 0 0 5px rgba(var(--status-warning-rgba), 0.8); font-weight: bold; animation: pulse-animation-warning-map 1.5s infinite; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.status-unknown-map { color: var(--background-color)!important; background: var(--background-dark4); font-weight: bold; animation: pulse-animation-unknown-map 1.5s infinite; padding: 2px 6px; border-radius: 4px; display: inline-block; }
.status-badge { padding: 5px 10px; border-radius: 15px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 5px; color: #fff; }
.status-badge i { font-size: 16px; }
.status-badge--active { background-color: var(--status-on-color); }
.status-badge--problematic { background-color: var(--status-warning-color); }
.status-badge--offline { background-color: var(--status-off-color); }

/* ─────────────────────────────────────────────────────────────
   LEAFLET SEARCH LOADER
────────────────────────────────────────────────────────────── */
.loader_searching { display:none; width:24px; height:24px; border-radius:50%; transform:translateY(-50%); position:absolute; top:30%; right:20px; animation:rotate 1s linear infinite; }
.loader_searching::before, .loader_searching::after { content:""; box-sizing:border-box; position:absolute; inset:0px; border-radius:50%; border:3px solid #FFF; animation:prixClipFix 2s linear infinite; }
.loader_searching::after { border-color:var(--primary-color); animation:prixClipFix 2s linear infinite, rotate 0.5s linear infinite reverse; inset:3px; }

@keyframes rotate { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes prixClipFix {
  0%{clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
  25%{clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
  50%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
  75%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
  100%{clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
}

/* ─────────────────────────────────────────────────────────────
   MEASUREMENTS
────────────────────────────────────────────────────────────── */
.measurements-container { width: 100%; display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem; border: 1px solid var(--primary-color); border-radius: 5px; background-color: var(--background-dark_1); }
.measurement-item { display: flex; justify-content: space-between; padding: 0.5rem; border: 1px solid var(--primary-color); border-radius: 3px; background-color: var(--background-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); }
.measurement-key { font-weight: bold; color: var(--bs-gray-800); }
.measurement-value { color: var(--bs-primary); }
.no-measurements { padding: 0.5rem; text-align: center; color: var(--bs-danger); font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   MAP LAYOUT & WIDGETS
────────────────────────────────────────────────────────────── */
#map { position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#opacity-control { margin-top: 10px; }
.map-widget { position: absolute; left: 100px; z-index: 1000; padding: 10px 14px; border-radius: 12px; backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.25); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); color: #333; }
.map-widget-legend { position: absolute; z-index: 1000; bottom: 60px; right: 20px; padding: 10px 14px; max-width: 400px; border-radius: 12px; backdrop-filter: blur(8px); background: rgba(255, 255, 255, 0.8); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); color: #333; }
#opacitySliderWrapper { display: none; top: 60px; }
#legendWrapper { display: none; }
#customSearchWrapper { display: none; top: 150px; }
.glassy-widget input[type="range"] { width: 100%; accent-color: var(--primary-color)!important; }
.glassy-widget .widget-label { font-weight: 600; font-size: 1rem; margin-bottom: 6px; text-align: center; display: block; color: var(--primary-color); }
.map-search-input { width: 220px!important; border-radius: 12px!important; padding: 12px 12px!important; font-size: 14px!important; background: rgba(255, 255, 255, 0.25)!important; backdrop-filter: blur(6px)!important; border: 1px solid rgba(255, 255, 255, 0.3)!important; color: #2c2c2c!important; font-weight: 500; transition: all 0.2s ease!important; padding-right: 36px!important; }
.map-search-input::placeholder { color: rgba(44, 44, 44, 0.6); }
.map-search-input:focus { outline: none; border-color: var(--primary-color)!important; background: rgba(255, 255, 255, 0.4); }

/* ─────────────────────────────────────────────────────────────
   ANIMATIONS
────────────────────────────────────────────────────────────── */
@keyframes pulse-animation { 0% { box-shadow: 0 0 0 0px rgba(var(--status-on-rgba), 0.8); } 100% { box-shadow: 0 0 0 15px rgba(var(--status-on-rgba), 0); } }
@keyframes pulse-animation-off { 0% { box-shadow: 0 0 0 0px rgba(var(--status-off-rgba), 0.8); } 100% { box-shadow: 0 0 0 15px rgba(var(--status-off-rgba), 0); } }
@keyframes pulse-animation-warning { 0% { box-shadow: 0 0 0 0px rgba(var(--status-warning-rgba), 0.8); } 100% { box-shadow: 0 0 0 15px rgba(var(--status-warning-rgba), 0); } }
@keyframes pulse-animation-withdrawal { 0% { box-shadow: 0 0 0 0px rgba(var(--status-withdrawal-rgba), 0.8); } 100% { box-shadow: 0 0 0 10px rgba(var(--status-withdrawal-rgba), 0); } }
@keyframes pulse-animation-unknown-map { 0% { box-shadow: 0 0 0 0px rgba(var(--status-withdrawal-rgba), 0.8); } 100% { box-shadow: 0 0 0 10px rgba(var(--status-withdrawal-rgba), 0); } }
@keyframes pulse-animation-map { 0% { box-shadow: 0 0 0 0px rgba(var(--status-on-rgba), 0.8); } 100% { box-shadow: 0 0 0 10px rgba(var(--status-on-rgba), 0); } }
@keyframes pulse-animation-off-map { 0% { box-shadow: 0 0 0 0px rgba(var(--status-off-rgba), 0.8); } 100% { box-shadow: 0 0 0 10px rgba(var(--status-off-rgba), 0); } }
@keyframes pulse-animation-warning-map { 0% { box-shadow: 0 0 0 0px rgba(var(--status-warning-rgba), 0.8); } 100% { box-shadow: 0 0 0 10px rgba(var(--status-warning-rgba), 0); } }

/* ─────────────────────────────────────────────────────────────
   QUERY BUILDER GROUPS
────────────────────────────────────────────────────────────── */
.query-group { position: relative!important; margin-left: 28px!important; padding-left: 22px!important; box-sizing: border-box!important; }
.query-group::before { content: ""!important; position: absolute!important; left: -14px!important; top: 26px!important; width: 4px!important; height: calc(100% - 26px)!important; background: #ffc107!important; z-index: 0!important; border-top-left-radius: 6px!important; }
.query-group::after { content: ""!important; position: absolute!important; left: -14px!important; top: 26px!important; width: 38px!important; height: 4px!important; background: #ffc107!important; z-index: 0!important; box-sizing: border-box!important; border-top-left-radius: 6px!important; }
.query-group .bottom-line { content: ""; position: absolute; left: -14px; bottom: 0; width: 38px; height: 4px; background: #ffc107; z-index: 0; box-sizing: border-box; pointer-events: none; border-bottom-left-radius: 6px!important; }
.query-condition-label { position: absolute!important; left: -33px!important; top: 50%!important; background-color: #ffc107!important; color: #000!important; font-size: 0.89rem!important; font-weight: bold!important; padding: 2px 9px!important; border-radius: 11px!important; min-width: 28px!important; text-align: center!important; z-index: 2!important; box-shadow: 0 1px 6px #ffe08240!important; }
.query-group > .query-rules { margin-top: 0!important; margin-bottom: 0!important; margin-left: 1rem!important; }
.query-group > input:first-child { margin-right: 16px!important; }
.query-actions { margin-left: 1rem!important; }
.query-group, .query-group::before, .query-group::after { box-sizing: border-box!important; }

/* ─────────────────────────────────────────────────────────────
   QUERY BUILDER INPUTS
────────────────────────────────────────────────────────────── */
.rule-input { background: #fff!important; border: 1.5px solid #d3dee7!important; color: #222!important; font-size: 1.12rem!important; border-radius: 9px!important; padding: 9px 13px!important; box-shadow: none!important; min-height: 40px!important; transition: border 0.2s, box-shadow 0.2s; }
.rule-input:focus { border: 2px solid #ffb94a!important; outline: none!important; background: #fffbe9!important; box-shadow: 0 0 0 2px #fff2cf; }
.rule-input::placeholder { color: #bbb!important; opacity: 1; font-style: italic; }

/* ─────────────────────────────────────────────────────────────
   QUERY BUILDER TOKENS
────────────────────────────────────────────────────────────── */
.hl-contenteditable { min-height: 60px; margin-top: 7px; padding: 0.12rem 0.5rem; border-radius: 18px; background: rgba(255,255,255,0.75); backdrop-filter: blur(3px); box-shadow: 0 4px 18px 0 rgba(2,83,115,0.12); border: 3px solid var(--primary-color, #025373); font-family: var(--font-login, "IBM Plex Mono", monospace); font-size: 1rem; color: var(--text-color, #22223b); display: flex; flex-wrap: wrap; gap: .21em; align-items: center; transition: box-shadow .13s, border-color .13s, background .13s; letter-spacing: .01em; }
.tok-op { background: var(--third-color, #FFC04A); color: var(--primary-color, #025373); font-weight: 700; border-radius: 11px; padding: 0.04em 0.6em; margin: 0 0.04em; font-size: 1.07em; letter-spacing: .01em; box-shadow: 0 1px 4px rgba(255, 192, 74, 0.09); border: none; }
.tok-term { background: var(--secondary-light-color, #4e9dae); color: #fff; border-radius: 11px; padding: 0.04em 0.6em; margin: 0 0.04em; font-weight: 700; font-size: 1.07em; box-shadow: 0 1px 4px rgba(4, 60, 80, 0.10); border: none; }
.tok-par { background: #d8d8d8; color: #555; border-radius: 11px; padding: 0.16em 0.60em; margin: 0 0.04em; font-size: 1.07em; font-weight: 700; box-shadow: 0 1px 4px rgba(140,140,140,0.08); border: none; }

/* ─────────────────────────────────────────────────────────────
   TAGS
────────────────────────────────────────────────────────────── */
.tags-filter-wrapper { margin-bottom:1rem; width:100%; }
.tags-filter-label { display:block; margin-bottom:6px; font-weight:bold; color:var(--primary-color); font-size:0.95rem; }
.tags-filter-bar { display:flex; align-items:center; justify-content:flex-end; gap:0.6rem; width:100%; margin:0; padding:0.2rem 0.3rem 0.6rem 0; }
.tags-filter-bar label { font-weight:600; color:var(--primary-color,#22557e); font-size:1.07rem; margin-bottom:0; white-space:nowrap; }
.tags-filter-bar .select2-container { min-width:320px; max-width:500px; width:100%!important; font-size:1rem; }
td.tags-cell small.badge { font-size:0.75rem; padding:4px 6px; background-color:var(--secondary-color); color:#fff; }
.view-all-tags { border:1px solid var(--secondary-color); background-color:var(--background-dark2); color:var(--text-color); padding:4px 6px; border-radius:4px; font-size:0.9rem; transition:background 0.3s; }
.view-all-tags:hover { background-color:var(--secondary-color); color:#fff; }

/* badges */
.badge.tag{background:var(--secondary-color);color:#fff;border-radius:12px}
.badge.tag--banned{background:#ffe5e9 !important;color:#b30021 !important;border:1px solid #ffccd5}
.badge.tag--banned:hover{background:#e60026 !important;color:#fff !important}
.btn.has-banned { background-color: #ffe5e9 !important; border-color: #ffccd5 !important; color: #b30021 !important; } 
.btn.has-banned:hover { background-color: #e60026 !important; border-color: #b30021 !important; color: #fff !important; }

/* ─────────────────────────────────────────────────────────────
   NOTES & SUMMERNOTE
────────────────────────────────────────────────────────────── */
.note-editor { width: 100%!important; border-radius: 12px!important; background-color: var(--background-color)!important; border: 2px solid var(--secondary-color)!important; box-shadow: 0 4px 10px rgba(0,0,0,0.1)!important; }
.note-toolbar { background-color: var(--primary-color)!important; border-bottom: 2px solid var(--secondary-color)!important; border-radius: 10px 10px 0 0!important; }
.note-btn { background-color: var(--secondary-color)!important; color: var(--text-color-light)!important; border: 1px solid var(--third-color)!important; }
.note-btn:hover { background-color: var(--primary-color)!important; border-color: var(--third-color)!important; }
.note-editable { background-color: var(--background-dark_1)!important; min-height: 60vh!important; max-height: 80vh!important; overflow-y: auto!important; color: var(--text-color)!important; padding: 15px!important; border-radius: 0 0 12px 12px!important; }
.note-placeholder { color: var(--text-color-light)!important; font-style: italic!important; }
.note-dropdown-menu { background-color: var(--primary-color)!important; border: 1px solid var(--secondary-color)!important; color: var(--text-color-light)!important; }
.note-dropdown-menu .dropdown-item { color: var(--text-color-light)!important; }
.note-dropdown-menu .dropdown-item:hover { background-color: var(--secondary-color)!important; color: var(--text-color-light)!important; }
.note-btn.dropdown-toggle { color: var(--text-color-light)!important; }
.note-statusbar { background-color: var(--background-dark2)!important; border-top: 1px solid var(--secondary-color)!important; }

/* Popover */
.note-popover-content { position: absolute; background: var(--background-color); border: 1px solid var(--secondary-color); border-radius: 4px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); min-width: 160px; padding: 4px 0; z-index: 9999; }
.note-popover.popover { z-index: 9999!important; position: absolute; }

/* Hints */
.note-hint-item { padding: 8px 12px; color: var(--text-color); cursor: pointer; }
.note-hint-item.active, .note-hint-item:hover { background-color: var(--background-dark2); font-weight: bold; }
.note-hint .dropdown-menu { position: absolute!important; top: auto!important; left: auto!important; display: block!important; z-index: 3000!important; margin: 0!important; }
.note-hint .dropdown-menu li { padding: .25em .75em; cursor: pointer; }
.note-hint .dropdown-menu li:hover { background: #eee; }

/* ─────────────────────────────────────────────────────────────
   HELP DOCS & FAQ
────────────────────────────────────────────────────────────── */
.help-doc,
.help-doc * { text-align: left !important; }
.help-doc.login-form { align-items: stretch !important; justify-content: flex-start !important; }
.help-toc{ border-left:4px solid var(--secondary-color); padding:.6rem 1rem; margin-bottom:1rem; background:var(--background-dark2); border-radius:12px; }
.help-toc ul{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.6rem 1rem; }
.help-toc a{ text-decoration:none; font-weight:600; color:var(--primary-color); }
.help-toc a:hover{ color:var(--header-bg-color); }
.help-toc a.is-hidden{ opacity:.45; pointer-events:none; }
.faq-section { max-width:1100px; }
.faq-item { margin-bottom:1rem; border:1px solid var(--secondary-color); border-radius:12px; background:var(--background-dark_4); padding:10px 15px; transition:background .3s ease; }
.faq-item:hover { background:rgba(0,0,0,0.03); }
.faq-question { background:none; border:none; font-size:18px; font-weight:700; color:var(--primary-color); text-align:left; width:100%; cursor:pointer; padding:10px 0; }
.faq-answer { max-height:0; overflow:hidden; transition:max-height .3s ease, opacity .3s ease; opacity:0; padding:10px 0 0 0; }
.faq-answer p { margin:0 0 10px; line-height:1.6; }
.faq-item.active .faq-answer { max-height:600px; opacity:1; margin-top:5px; }
.d-none{display:none!important;}
.help-doc { text-align:left; }
.help-doc h1,.help-doc h2,.help-doc h3,.help-doc h4,.help-doc p,.help-doc li { text-align:left !important; }
.help-doc h1{ font-size:2.2rem; margin:0 0 .6rem 0; color:var(--primary-color); }
.help-doc h2{ font-size:1.6rem; margin:1.4rem 0 .4rem 0; color:var(--primary-color); border-bottom: 2px solid #f0f0f0; padding-bottom: 5px;}
.help-doc h3{ font-size:1.2rem; margin:1rem 0 .3rem 0; color: #333; }
.help-doc p{ margin:.2rem 0 .6rem; line-height: 1.6; }
.help-doc ul{ margin:.2rem 0 .8rem 1.1rem; }
.help-doc li{ margin-bottom: 0.4rem; }
.help-doc .muted{ color:#6b7280; }
.help-highlight{ background: #fff3cd; border-radius:4px; padding:0 2px; }
.help-search{width:50%; min-width:320px; max-width:736px}
@media (max-width: 992px){ .help-search{width:100%} }


/* ─────────────────────────────────────────────────────────────
   QUERY BUILDER GROUPS
────────────────────────────────────────────────────────────── */
.promo-ribbonable{position:relative;overflow:visible}
.promo-ribbon{
  --f:0;
  position:absolute;top:0;color:#fff;padding:.1em 1.6em;
  background: color-mix(in srgb, var(--third-color, var(--third-color)) 80%, transparent);border-bottom:var(--f) solid #0007;
  clip-path:polygon(100% calc(100% - var(--f)),100% 100%,calc(100% - var(--f)) calc(100% - var(--f)),var(--f) calc(100% - var(--f)),0 100%,0 calc(100% - var(--f)),999px calc(100% - var(--f) - 999px),calc(100% - 999px) calc(100% - var(--f) - 999px));
  pointer-events:none;font-weight:700;font-size:10px;letter-spacing:.06em;text-transform:uppercase;z-index:2
}

.promo-ribbon.inset{ right:0px !important; top:0px !important; }
.promo-ribbon.right{right:0;transform:translate(calc((1 - cos(45deg))*100%), -100%) rotate(55deg);transform-origin:0% 100%}
.promo-ribbon.left{left:0;transform:translate(calc((cos(45deg) - 1)*100%), -100%) rotate(-55deg);transform-origin:100% 100%}
.promo-ribbon.sm{ --f:8px; font-size:10px; padding:.15em 2em; }

.promo-ribbon.is-pro{--c:var(--promo-pro-bg);color:var(--promo-light-text)}
.promo-ribbon.is-premium{background:linear-gradient(90deg,var(--promo-premium-start),var(--promo-premium-end));color:var(--promo-dark-text)}
.promo-ribbon.is-new{--c:var(--promo-new-bg);color:var(--promo-light-text)}
@supports (-moz-appearance:none){
  .promo-ribbon{background:linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box,linear-gradient(var(--c,#45ADA8) 0 0) 50%/calc(100% - 2px) calc(100% - 2px) no-repeat border-box;border-bottom-color:#0000}
  .promo-ribbon.is-premium{background:linear-gradient(to top,#0000 1px,#0005 0 var(--f),#0000 0) border-box,linear-gradient(90deg,var(--promo-premium-start),var(--promo-premium-end)) 50%/calc(100% - 2px) calc(100% - 2px) no-repeat border-box}
}

@media screen and (max-width:1200px){.login-video{height:60vh;}.modal-xl{max-width:95%!important;}}
@media screen and (max-width:900px){.login-video{height:40vh;}}
@media screen and (max-width:600px){.login-video{height:30vh;border-radius:0;}}
@media screen and (max-width:768px){
.s4a-file__icon { display:none }
.cookie-consent{bottom:15vw;width:95vw!important;}
.login-container{flex-direction:column;width:90%;}
.login-video,.login-image{height:200px;border-radius:20px 20px 0 0;}
.login-form{border-radius:0 0 20px 20px;}
.login-form h1{font-size:1.8rem;}
.login-form p{font-size:0.9rem;}
.login-form button{font-size:0.9rem;}
.login-form button[type="submit"],.modal-footer button{padding:1rem;font-size:1rem;width:100%;}
.login-form-padding{padding:15px 15px 5px 15px;}
.content{margin:0;font-family:"Roboto",sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%!important;padding:20px;box-sizing:border-box;}
.login-container{display:flex;border-radius:20px;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,0.3),inset 0 1px 3px rgba(255,255,255,0.3);backdrop-filter:blur(20px);width:100%;max-width:600px;margin:20px 0;border:1px solid rgba(255,255,255,0.2);box-sizing:border-box;}
.note-toolbar,.note-toolbar .note-btn-group{display:flex;flex-wrap:wrap;justify-content:center;}
.note-toolbar .note-btn-group button{margin:3px 2px!important;}
.econ-summary-row{flex-direction:column;gap:7px 0;}
.econ-summary-row>div{min-width:0;width:100%;}
.econ-modal-details{padding:13px 4vw;}
.econ-modal-row,.econ-modal-flexgrid div{flex-direction:column;align-items:flex-start;}
.econ-modal-flexgrid{grid-template-columns:1fr;}
.profile-image .image-circle{width:100px!important;height:100px!important;}
.profile-name{font-size:20px;}
.profile-title{font-size:16px;}
.profile-page-user-info-table{width:100%;display:block;overflow-x:auto;}
.notifications-dropdown-menu{min-width:100vw!important;max-width:100vw!important;border-radius:0 0 18px 18px!important;margin-top:3.2rem!important;top:0!important;left:0!important;right:0!important;position:fixed!important;z-index:9999!important;transform:none!important;box-shadow:0 12px 32px rgba(60,72,88,0.12)!important;font-size:1.07em!important;padding-bottom:0.6rem!important;max-height:70vh!important;background:#fff!important;overflow-y:scroll!important;scrollbar-width:auto!important;scrollbar-color:#b0c5d9 #f5f6fa!important;}
.navbar .dropdown-menu.notifications-dropdown-menu{left:0!important;right:0!important;}
.notification-item{padding:1.13em 1.15em!important;font-size:1.04em!important;gap:0.7em!important;}
.notification-icon{font-size:1.32em!important;}
.notification-title{font-size:1.07em!important;}
.notification-message,.notification-date{font-size:0.99em!important;}
.notifications-dropdown-menu .dropdown-header{font-size:1.06em!important;padding-left:1.2em!important;padding-right:1.2em!important;}
.notifications-dropdown-menu::-webkit-scrollbar{width:10px!important;background:#f5f6fa!important;}
.notifications-dropdown-menu::-webkit-scrollbar-thumb{background:#b0c5d9!important;border-radius:10px!important;border:2px solid #f5f6fa!important;box-shadow:0 0 6px #ccd8e3 inset!important;}
#glassySidebarRight{right:-100%;width:100%;}
#sidebar-toggle-right{top:50%;}
.dt-container{padding-left:10px;}
.select2InModalWithHelpIcon{max-width:50vw!important;}
.leaflet-popup{width:70vw!important;max-width:300px!important;}
.leaflet-popup-content{width:70vw!important;max-width:300px!important;}
.popup-container{width:100%!important;max-width:400px!important;max-height:60vh!important;overflow:auto!important;}
.btn-primary-theme-container-mobile-100{width:100%;}
.select2-container{max-width:300px!important;}
.tagsFilterWatchList .select2-container{max-width:1200px!important;}
.tagsFilterPersonal .select2-container{max-width:600px!important;}
.button-navbar-left-theme .nav-item .nav-link span,.button-navbar-left-theme .nav-item span span{display:none!important;}
.button-navbar-left-theme .nav-item .nav-link i,.button-navbar-left-theme .nav-item span i{font-size:1.5rem!important;}
.compact-search{flex-direction:column!important;height:auto;gap:4px;}
.compact-search button{width:100%;}
.compact-search .form-control,.compact-search .form-select{width:100%;}
.mobile-friendly-btn-icon button span,.mobile-friendly-btn-icon button span span{display:none!important;}
.mobile-friendly-btn-icon button .nav-link i,.mobile-friendly-btn-icon button span i{font-size:1.5rem!important;}
}
@media screen and (max-width:480px){
.login-container{width:100%;border-radius:0;}
.login-form-padding{padding:20px 20px 5px 20px;}
.login-form h1{font-size:1.5rem;}
.login-form p{font-size:0.85rem;}
.login-form button{font-size:0.8rem;}
.login-form button[type="submit"],.modal-footer button{padding:1rem;font-size:1rem;width:100%;}
.content{margin:0;font-family:"Roboto",sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;width:100%!important;padding:20px;box-sizing:border-box;}
.login-container{display:flex;border-radius:20px;overflow:hidden;box-shadow:0 8px 16px rgba(0,0,0,0.3),inset 0 1px 3px rgba(255,255,255,0.3);backdrop-filter:blur(20px);width:100%;max-width:600px;margin:20px 0;border:1px solid rgba(255,255,255,0.2);box-sizing:border-box;}
}
@media (max-width:1000px){
.note-toolbar .note-btn-group{flex-wrap:wrap!important;justify-content:center;}
.note-toolbar{display:flex;flex-wrap:wrap;justify-content:center;}
.note-toolbar .note-btn-group button{margin:3px 2px!important;}
}