/* KATIQ Final Modal Layer — viewport centered, theme aware, mobile safe */
:root{
  --kq-modal-overlay:rgba(12,16,22,.46);
  --kq-modal-surface:#fff;
  --kq-modal-surface-2:#f7f8fa;
  --kq-modal-text:#20242a;
  --kq-modal-muted:#68717d;
  --kq-modal-border:rgba(24,30,38,.10);
  --kq-modal-shadow:0 28px 90px rgba(12,18,28,.20);
}
html.dark,html.dark-theme,html[data-theme="dark"],body.dark,body.dark-theme,body[data-theme="dark"]{
  --kq-modal-overlay:rgba(0,0,0,.62);
  --kq-modal-surface:#3a3f45;
  --kq-modal-surface-2:#444a51;
  --kq-modal-text:#f5f7fa;
  --kq-modal-muted:#c0c6cd;
  --kq-modal-border:rgba(255,255,255,.10);
  --kq-modal-shadow:0 30px 90px rgba(0,0,0,.48);
}

/* AI must never be visible on initial page load. JS explicitly opens it. */
.katiq-ai-modal[hidden], .katiq-ai-modal[aria-hidden="true"]{display:none !important;}
.katiq-ai-modal.is-open[aria-hidden="false"]{display:flex !important;}

/* Every modal layer gets its own viewport stacking context. */
:is(.modal-overlay,.modal-backdrop,.kpi-detail-overlay,.product-analytics-overlay,
.katiq-modal-overlay,.annual-plan-month-modal,.upload-source-overlay,.upload-password-overlay,
.salary-expense-overlay,.katiq-product-analytics-modal,.marketplace-settings-modal,
.kq-account-modal,.kq-password-modal,.kq-legal-modal,.katiq-ai-modal){
  position:fixed !important;
  inset:0 !important;
  left:0 !important;
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  width:100vw !important;
  min-width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  margin:0 !important;
  box-sizing:border-box !important;
  z-index:200000 !important;
}

:is(.modal-overlay,.modal-backdrop,.kpi-detail-overlay,.product-analytics-overlay,
.katiq-modal-overlay,.annual-plan-month-modal,.upload-source-overlay,.upload-password-overlay,
.salary-expense-overlay,.katiq-product-analytics-modal,.marketplace-settings-modal,
.kq-account-modal,.kq-password-modal,.kq-legal-modal,.katiq-ai-modal){
  background:var(--kq-modal-overlay) !important;
  backdrop-filter:blur(9px) saturate(.92) !important;
  -webkit-backdrop-filter:blur(9px) saturate(.92) !important;
}

:is(.modal-overlay,.annual-plan-month-modal,.upload-source-overlay,.upload-password-overlay,
.salary-expense-overlay,.katiq-product-analytics-modal,.marketplace-settings-modal,
.kq-account-modal,.kq-password-modal,.kq-legal-modal,.katiq-ai-modal)[data-modal-visible]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(10px,2.2vw,24px) !important;
}

:is(.modal,.kq-island,.kpi-detail-dialog,.kpi-popup-content,.kpi-modal-content,
.product-analytics-dialog,.katiq-product-analytics-dialog,.marketplace-settings-dialog,
.salary-expense-dialog,.upload-source-dialog,.upload-password-dialog,
.kq-account-island,.kq-password-island,.kq-legal-island){
  position:relative !important;
  z-index:1 !important;
  box-sizing:border-box !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 32px) !important;
  margin:0 auto !important;
  background:var(--kq-modal-surface) !important;
  color:var(--kq-modal-text) !important;
  border:1px solid var(--kq-modal-border) !important;
  box-shadow:var(--kq-modal-shadow) !important;
}

.modal-overlay .modal{width:min(680px,calc(100vw - 32px)) !important;}
.katiq-product-analytics-dialog,.product-analytics-dialog{width:min(1180px,calc(100vw - 32px)) !important;}
.kpi-detail-dialog,.kpi-popup-content,.kpi-modal-content{width:min(720px,calc(100vw - 32px)) !important;}
.marketplace-settings-dialog{width:min(760px,calc(100vw - 32px)) !important;}
.salary-expense-dialog{width:min(520px,calc(100vw - 32px)) !important;}

/* Never let an inner modal inherit the page's left-side positioning. */
:is(.modal,.kq-island,.kpi-detail-dialog,.kpi-popup-content,.kpi-modal-content,
.product-analytics-dialog,.katiq-product-analytics-dialog,.marketplace-settings-dialog,
.salary-expense-dialog,.upload-source-dialog,.upload-password-dialog,
.kq-account-island,.kq-password-island,.kq-legal-island){
  transform:none !important;
  float:none !important;
  inset:auto !important;
}

.kpi-icon{
  width:30px !important;
  height:30px !important;
  min-width:30px !important;
  display:inline-grid !important;
  place-items:center !important;
  border-radius:10px !important;
  color:currentColor !important;
  background:rgba(16,187,216,.10) !important;
  line-height:1 !important;
  vertical-align:middle !important;
}
.kpi-icon svg{width:17px !important;height:17px !important;display:block !important;}
.kpi-title{display:flex !important;align-items:center !important;gap:9px !important;min-width:0 !important;}
.kpi-title .kpi-icon{flex:0 0 30px !important;}
.kpi-header .drr-icon{font-weight:800 !important;font-size:15px !important;}
.stock-icon{display:none !important;}

/* Accessible light/dark KPI icon treatment */
html.dark .kpi-icon,body.dark .kpi-icon,html[data-theme="dark"] .kpi-icon,body[data-theme="dark"] .kpi-icon{
  background:rgba(99,216,238,.12) !important;
  color:#8de6f5 !important;
}

@media(max-width:700px){
  :is(.modal-overlay,.annual-plan-month-modal,.upload-source-overlay,.upload-password-overlay,
  .salary-expense-overlay,.katiq-product-analytics-modal,.marketplace-settings-modal,
  .kq-account-modal,.kq-password-modal,.kq-legal-modal,.katiq-ai-modal)[data-modal-visible]{
    padding:8px !important;
  }
  :is(.modal,.kq-island,.kpi-detail-dialog,.kpi-popup-content,.kpi-modal-content,
  .product-analytics-dialog,.katiq-product-analytics-dialog,.marketplace-settings-dialog,
  .salary-expense-dialog,.upload-source-dialog,.upload-password-dialog,
  .kq-account-island,.kq-password-island,.kq-legal-island){
    width:calc(100vw - 16px) !important;
    max-width:none !important;
    max-height:calc(100dvh - 16px) !important;
    border-radius:18px !important;
  }
  .kpi-icon{width:28px !important;height:28px !important;min-width:28px !important;border-radius:9px !important;}
  .kpi-icon svg{width:16px !important;height:16px !important;}
}
@media(max-width:380px){
  :is(.modal,.kq-island,.kpi-detail-dialog,.kpi-popup-content,.kpi-modal-content,
  .product-analytics-dialog,.katiq-product-analytics-dialog,.marketplace-settings-dialog,
  .salary-expense-dialog,.upload-source-dialog,.upload-password-dialog,
  .kq-account-island,.kq-password-island,.kq-legal-island){
    width:calc(100vw - 10px) !important;
    max-height:calc(100dvh - 10px) !important;
    border-radius:15px !important;
  }
}

/* KATIQ_MODAL_VISIBILITY_FIX */
.modal-overlay[hidden],.annual-plan-month-modal[hidden],.modal[hidden],.katiq-modal[hidden]{display:none!important}.annual-plan-month-modal{display:none}.annual-plan-month-modal.open{display:flex!important}

/* KATIQ_MODAL_CANONICAL_FULL_SCREEN_FIX
   All application modal overlays are viewport layers. Content dialogs are centered.
*/
:is(.kpi-detail-modal,.katiq-admin-ai-modal){
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  min-width:100vw !important;
  height:100dvh !important;
  min-height:100dvh !important;
  margin:0 !important;
  box-sizing:border-box !important;
  z-index:300000 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:clamp(10px,2.2vw,24px) !important;
  background:var(--kq-modal-overlay,rgba(12,16,22,.46)) !important;
  backdrop-filter:blur(9px) saturate(.92) !important;
  -webkit-backdrop-filter:blur(9px) saturate(.92) !important;
}
.kpi-detail-modal[aria-hidden="true"],
.kpi-detail-modal:not(.open),
.kpi-detail-modal[hidden],
.katiq-admin-ai-modal[aria-hidden="true"],
.katiq-admin-ai-modal[hidden]{
  display:none !important;
}
.kpi-detail-modal.open[aria-hidden="false"],
.katiq-admin-ai-modal:not([hidden])[aria-hidden="false"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.kpi-detail-modal .kpi-detail-dialog{
  width:min(720px,calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 32px) !important;
  margin:auto !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  transform:none !important;
}
.katiq-admin-ai-modal .katiq-admin-ai-dialog{
  width:min(520px,calc(100vw - 32px)) !important;
  max-width:calc(100vw - 32px) !important;
  max-height:calc(100dvh - 32px) !important;
  margin:auto !important;
  position:relative !important;
  inset:auto !important;
}
.katiq-ai-modal.is-open[aria-hidden="false"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.katiq-ai-modal .katiq-ai-dialog{
  position:relative !important;
  inset:auto !important;
  right:auto !important;
  bottom:auto !important;
  margin:auto !important;
  width:min(760px,calc(100vw - 32px)) !important;
  height:min(720px,calc(100dvh - 32px)) !important;
  max-height:calc(100dvh - 32px) !important;
}
.annual-plan-month-modal[hidden]{display:none !important;}
.annual-plan-month-modal:not(.open){display:none !important;}
.annual-plan-month-modal.open{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.annual-plan-month-modal .annual-plan-month-dialog{
  margin:auto !important;
  position:relative !important;
  inset:auto !important;
  transform:none !important;
}
@media(max-width:699px){
  .kpi-detail-modal,.katiq-admin-ai-modal,.katiq-ai-modal.is-open[aria-hidden="false"]{
    padding:8px !important;
  }
  .kpi-detail-modal .kpi-detail-dialog,
  .katiq-admin-ai-modal .katiq-admin-ai-dialog,
  .katiq-ai-modal .katiq-ai-dialog{
    width:calc(100vw - 16px) !important;
    max-width:none !important;
    max-height:calc(100dvh - 16px) !important;
  }
}

/* KATIQ_MODAL_INTERACTION_FIX */
.katiq-product-analytics-modal[hidden],
.katiq-ai-modal[hidden],
.katiq-admin-ai-modal[hidden]{display:none!important}
.katiq-product-analytics-modal,
.katiq-ai-modal,
.katiq-admin-ai-modal{
  position:fixed!important; inset:0!important; width:100vw!important; height:100dvh!important;
  max-width:none!important; max-height:none!important; margin:0!important;
  z-index:99990!important; box-sizing:border-box;
}
.katiq-product-analytics-backdrop,
.katiq-ai-backdrop,
.katiq-admin-ai-backdrop{position:absolute!important;inset:0!important}
.katiq-product-analytics-dialog,
.katiq-ai-dialog,
.katiq-admin-ai-dialog{position:relative!important;z-index:2}