@import url("./core/tokens.css");
@import url("./core/themes.css");
@import url("./core/base.css");
@import url("./core/utilities.css");

@import url("./components/ui-button.css");
@import url("./components/buttons.css");
@import url("./components/cards.css");
@import url("./components/panel.css");
@import url("./components/ui-page-header.css");
@import url("./components/ui-status.css");
@import url("./components/forms.css");
@import url("./components/alerts.css");
@import url("./components/hero.css");
@import url("./components/modals.css");
@import url("./components/empty-states.css");

@import url("./layout/shell.css");
@import url("./layout/navbar.css");
@import url("./layout/footer.css");
@import url("./layout/auth.css");

@import url("./pages/dashboard.css");
@import url("./pages/company.css");
@import url("./pages/clients.css");
@import url("./pages/client_form.css");
@import url("./pages/client_search.css");
@import url("./pages/settings.css");
@import url("./pages/company_signup.css");
@import url("./pages/auth.css");
@import url("./pages/public_home.css");

/* =========================================================
   HOTFIX DESIGN SYSTEM FINAL
   À charger en dernier
   ========================================================= */

/* Boutons ouvrir clients */
.client-open-btn,
.client-open-btn:visited {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
  text-decoration: none !important;
}

.client-open-btn:hover,
.client-open-btn:focus {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
  text-decoration: none !important;
}

/* Dropdown Materialize */
.dropdown-content,
.select-dropdown.dropdown-content {
  background: var(--theme-surface) !important;
  border: 1px solid var(--theme-border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
}

.dropdown-content li,
.select-dropdown.dropdown-content li {
  background: var(--theme-surface) !important;
}

.dropdown-content li > span,
.dropdown-content li > a,
.select-dropdown.dropdown-content li > span {
  color: var(--theme-text) !important;
}

.dropdown-content li:hover,
.dropdown-content li.active,
.dropdown-content li.selected {
  background: var(--theme-surface-soft) !important;
}

.dropdown-content li:hover > span,
.dropdown-content li.active > span,
.dropdown-content li.selected > span {
  color: var(--theme-text) !important;
}

/* Settings */
.settings-action-row .settings-btn,
.settings-action-row .btn,
.settings-btn-dark,
.settings-btn-soft,
.settings-btn-primary {
  min-width: 132px !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-transform: none !important;
  box-shadow: none !important;
}

.settings-btn-dark,
.settings-btn-soft,
.settings-btn-primary {
  background: var(--theme-surface-soft) !important;
  color: var(--theme-text) !important;
  border: 1px solid var(--theme-border) !important;
}

.settings-btn-dark:hover,
.settings-btn-soft:hover,
.settings-btn-primary:hover {
  background: var(--theme-surface) !important;
  color: var(--theme-text) !important;
}

/* Dark mode */
html[data-theme="dark"] .dropdown-content,
html[data-theme="dark"] .select-dropdown.dropdown-content {
  background: #0f172a !important;
  border-color: #22324d !important;
}

html[data-theme="dark"] .dropdown-content li,
html[data-theme="dark"] .select-dropdown.dropdown-content li {
  background: #0f172a !important;
}

html[data-theme="dark"] .dropdown-content li > span,
html[data-theme="dark"] .dropdown-content li > a {
  color: #f8fafc !important;
}

html[data-theme="dark"] .dropdown-content li:hover,
html[data-theme="dark"] .dropdown-content li.active,
html[data-theme="dark"] .dropdown-content li.selected {
  background: #13203a !important;
}

html[data-theme="dark"] .client-open-btn,
html[data-theme="dark"] .settings-btn-dark,
html[data-theme="dark"] .settings-btn-soft,
html[data-theme="dark"] .settings-btn-primary {
  background: #13203a !important;
  color: #f8fafc !important;
  border-color: #29405f !important;
}
/* Support / SAV status */
.support-nav-badge {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 0.45rem;
  max-width: 300px;
  min-height: 38px;
  margin-right: 0.85rem;
  padding: 0.2rem 0.35rem 0.2rem 0.65rem;
  border: 1px solid rgba(167, 243, 208, 0.72);
  border-radius: 999px;
  background: #047857;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(4, 120, 87, 0.28);
}

.support-nav-badge > .material-icons {
  color: #bbf7d0;
  font-size: 1.15rem;
}

.support-nav-badge span {
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0;
}

.support-nav-badge strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 800;
}

.support-nav-badge form {
  display: inline-flex;
  margin: 0;
}

.support-nav-badge button,
.support-nav-badge a {
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  cursor: pointer;
  padding: 0;
}

.support-nav-badge button .material-icons,
.support-nav-badge a .material-icons {
  color: inherit;
  font-size: 1rem;
}

.support-nav-badge button:hover,
.support-nav-badge button:focus,
.support-nav-badge a:hover,
.support-nav-badge a:focus {
  background: rgba(255, 255, 255, 0.26);
}

.support-nav-badge--pending {
  background: #16a34a;
  border-color: rgba(187, 247, 208, 0.8);
  box-shadow: 0 8px 22px rgba(22, 163, 74, 0.25);
}

.support-nav-badge--client-active {
  background: #059669;
  border-color: rgba(187, 247, 208, 0.95);
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.14),
    0 8px 22px rgba(5, 150, 105, 0.32);
}

.support-nav-badge--client-active span {
  white-space: nowrap;
}

.support-nav-badge--floating {
  position: fixed;
  top: 92px;
  left: 18px;
  z-index: 1300;
  margin-right: 0;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.support-nav-badge--dragging {
  cursor: grabbing;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.18),
    0 14px 30px rgba(4, 120, 87, 0.38);
}

.support-request-notice {
  padding: 0.85rem 1.25rem;
  background: #ecfdf5;
  border-bottom: 1px solid #a7f3d0;
  color: #064e3b;
}

.support-request-notice-item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 0.75rem;
  align-items: center;
  width: min(1180px, 100%);
  margin: 0 auto;
}

.support-request-notice-item .material-icons {
  color: #047857;
}

.support-request-notice-item strong,
.support-request-notice-item span {
  display: block;
}

.support-request-notice-item strong {
  font-weight: 900;
}

.support-request-notice-item span {
  color: #065f46;
  font-weight: 650;
}

.support-request-notice-item .btn-small {
  background: #047857;
  color: #ffffff;
  border-radius: 8px;
  font-weight: 800;
  text-transform: none;
}

@media (max-width: 860px) {
  .support-nav-badge {
    max-width: 220px;
    margin-right: 0.5rem;
  }

  .support-nav-badge--floating {
    top: 84px;
    left: 10px;
    margin-right: 0;
  }

  .support-nav-badge--client-active strong {
    display: none;
  }

  .support-request-notice-item {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .support-request-notice-item .btn-small {
    grid-column: 2;
    width: fit-content;
    margin-top: 0.5rem;
  }
}