/* Shared components used by public, portal, and administration surfaces. */
.language-switcher .dropdown-toggle { min-height: 38px; border: 1px solid transparent; }
.language-switcher .dropdown-toggle:hover { border-color: var(--sx-border); background: #fff; }
.language-switcher .dropdown-menu { min-width: 10rem; }
.language-switcher .dropdown-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.language-globe { display: inline-grid; place-items: center; inline-size: 1.35rem; block-size: 1.35rem; color: var(--sx-primary); font-size: 1rem; }

.notification-menu { position: relative; }
.notification-button { inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center; border: 1px solid var(--sx-border); border-radius: 50%; background: #fff; color: var(--sx-text-secondary); box-shadow: var(--sx-shadow-sm); transition: color var(--sx-transition), border-color var(--sx-transition), background var(--sx-transition), box-shadow var(--sx-transition); }
.notification-button:hover { border-color: #cbbff8; background: var(--sx-primary-soft); color: var(--sx-primary); box-shadow: var(--sx-shadow-md); }
.notification-button:focus-visible { outline: 0; box-shadow: var(--sx-focus); }
.notification-button svg { inline-size: 20px; block-size: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.notification-count, .portal-nav-badge {
  position: absolute;
  inset-block-start: -.28rem;
  inset-inline-end: -.38rem;
  min-width: 1.2rem;
  height: 1.2rem;
  display: grid;
  place-items: center;
  padding-inline: .28rem;
  border: 2px solid #fff;
  border-radius: 999px;
  background: var(--sx-red);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
}
.portal-nav-badge { position: static; margin-inline-start: auto; border-width: 0; }
.notification-dropdown { width: min(390px, calc(100vw - 1.25rem)); overflow: hidden; padding: 0; }
.notification-dropdown-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1.05rem; border-bottom: 1px solid var(--sx-border); background: var(--sx-surface-soft); }
.notification-dropdown-head span { color: var(--sx-text-muted); font-size: .74rem; }
.notification-row { width: 100%; display: flex; gap: .75rem; border: 0; border-bottom: 1px solid var(--sx-border); padding: .85rem 1rem; background: #fff; color: var(--sx-text); text-align: start; }
.notification-row:hover { background: var(--sx-primary-soft); }
.notification-row > span:last-child { min-width: 0; display: grid; gap: .15rem; }
.notification-row strong, .notification-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notification-row small { color: var(--sx-text-secondary); }
.notification-row time { color: var(--sx-text-muted); font-size: .7rem; }
.notification-dot { inline-size: .55rem; block-size: .55rem; flex: 0 0 auto; margin-block-start: .35rem; border-radius: 50%; background: var(--sx-blue); }
.notification-dot.type-success { background: var(--sx-green); }
.notification-dot.type-warning { background: var(--sx-amber); }
.notification-dot.type-error { background: var(--sx-red); }
.notification-view-all { display: block; padding: .8rem; background: var(--sx-surface-soft); text-align: center; font-size: .8rem; font-weight: 750; }
.notification-empty { padding: 2rem 1rem; color: var(--sx-text-secondary); text-align: center; }
.notification-list-page { display: grid; }
.notification-page-item { margin: 0; border-bottom: 1px solid var(--sx-border); }
.notification-page-item:last-child { border-bottom: 0; }
.notification-page-item.unread { background: var(--sx-primary-soft); }
.notification-page-item button { width: 100%; display: flex; align-items: flex-start; gap: .85rem; border: 0; padding: 1rem 1.1rem; background: transparent; color: var(--sx-text); text-align: start; }
.notification-page-item button:hover { background: var(--sx-surface-soft); }
.notification-page-item button > span:nth-child(2) { min-width: 0; }
.notification-page-item strong, .notification-page-item small, .notification-page-item time { display: block; overflow-wrap: anywhere; }
.notification-page-item small { margin-block-start: .25rem; color: var(--sx-text-secondary); }
.notification-page-item time { margin-block-start: .4rem; color: var(--sx-text-muted); font-size: .7rem; }

.sx-confirm-dialog { border: 1px solid var(--sx-border); border-radius: var(--sx-radius-xl); box-shadow: var(--sx-shadow-lg); }
.sx-confirm-note { padding: .85rem; border-radius: var(--sx-radius-md); background: var(--sx-surface-soft); color: var(--sx-text-secondary); }
.branding-upload-card { display: flex; align-items: center; gap: 1rem; padding: 1rem; border: 1px dashed #c8cad9; border-radius: var(--sx-radius-md); background: var(--sx-surface-soft); }
.branding-preview { inline-size: 5rem; block-size: 5rem; flex: 0 0 auto; overflow: hidden; display: grid; place-items: center; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); background: #fff; color: var(--sx-primary); font-size: 1.4rem; font-weight: 850; }
.branding-preview img { width: 100%; height: 100%; object-fit: contain; }
.favicon-preview { inline-size: 4rem; block-size: 4rem; border-radius: var(--sx-radius-md); }
.logo-preview { max-inline-size: 12rem; max-block-size: 4rem; object-fit: contain; }

.empty-panel, .empty-state { display: grid; place-items: center; align-content: center; min-height: 15rem; padding: clamp(1.5rem, 5vw, 3rem); border: 1px dashed #d7d2e8; border-radius: var(--sx-radius-xl); background: var(--sx-gradient-soft); text-align: center; }
.empty-panel.compact { min-height: 11rem; max-width: 720px; margin-inline: auto; }
.empty-icon, .success-mark { inline-size: 3.75rem; block-size: 3.75rem; display: grid; place-items: center; margin: 0 auto 1rem; border-radius: 1.15rem; background: var(--sx-primary-soft); color: var(--sx-primary); font-size: 1.35rem; font-weight: 850; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block: 2rem 1rem; }
.section-heading h2 { margin: .2rem 0 0; }
.store-grid, .plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 1rem; }
.store-card, .plan-card, .progress-card, .wizard-card { border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); padding: clamp(1.05rem, 2.5vw, 1.45rem); background: #fff; box-shadow: var(--sx-shadow-sm); }
.store-card { transition: transform var(--sx-transition), box-shadow var(--sx-transition), border-color var(--sx-transition); }
.store-card:hover { transform: translateY(-2px); border-color: #cec5ed; box-shadow: var(--sx-shadow-md); }
.store-card-top, .store-actions, .progress-header, .deployment-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.store-mark { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: .9rem; background: var(--sx-gradient-primary); color: #fff; font-weight: 850; }
.store-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-block: 1.1rem; }
.store-meta span { min-width: 0; display: grid; gap: .15rem; color: var(--sx-text-muted); font-size: .73rem; }
.store-meta strong { overflow-wrap: anywhere; color: var(--sx-text); font-size: .84rem; }
.log-panel { overflow: hidden; margin-block-start: 1rem; border-radius: var(--sx-radius-md); background: #202235; color: #d9dbee; }
.log-title { padding: .7rem 1rem; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .76rem; font-weight: 800; }
.log-panel pre { min-height: 7rem; margin: 0; padding: 1rem; color: inherit; white-space: pre-wrap; overflow-wrap: anywhere; }
.page-heading { margin-block-end: 1.25rem; }
.page-heading h1 { margin: 0 0 .35rem; }
.page-heading p { margin: 0; color: var(--sx-text-secondary); }

.sx-page { display: grid; gap: 1.25rem; }
.sx-page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-block-end: 1.25rem; }
.sx-page-header__content { min-width: 0; }
.sx-page-header__content h1 { margin: .2rem 0 .35rem; }
.sx-page-header__content p { max-width: 760px; margin: 0; color: var(--sx-text-secondary); }
.sx-page-header__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; }
.sx-card__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--sx-border); background: var(--sx-surface-soft); }
.sx-card__body { padding: 1.2rem; }
.sx-card__footer { padding: .9rem 1.2rem; border-top: 1px solid var(--sx-border); background: var(--sx-surface-soft); }
.sx-toolbar { display: grid; grid-template-columns: minmax(16rem, 1.4fr) repeat(2, minmax(10rem, .65fr)) auto; gap: .75rem; align-items: end; padding: .9rem; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); background: #fff; box-shadow: var(--sx-shadow-sm); }
.sx-table-card { overflow: hidden; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); background: #fff; box-shadow: var(--sx-shadow-sm); }
.sx-data-table { width: 100%; margin: 0; vertical-align: middle; }
.sx-data-table th { background: #fafaff !important; color: var(--sx-text-secondary) !important; }
.sx-data-table td { min-width: 0; }
.sx-data-table__primary { display: block; color: var(--sx-text); font-weight: 760; }
.sx-data-table__secondary { display: block; margin-block-start: .15rem; color: var(--sx-text-muted); font-size: .78rem; overflow-wrap: anywhere; }
.sx-data-table__actions { display: flex; justify-content: flex-end; gap: .4rem; }
.sx-progress { min-inline-size: 8rem; display: grid; gap: .35rem; }
.sx-progress__meta { display: flex; justify-content: space-between; color: var(--sx-text-secondary); font-size: .74rem; }
.sx-progress__track { overflow: hidden; block-size: .48rem; border-radius: 999px; background: #ececf3; }
.sx-progress__fill { block-size: 100%; border-radius: inherit; background: var(--sx-gradient-primary); }
.sx-tabs { min-width: 0; }
.sx-tabs__list { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: thin; padding: .35rem; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); background: #fff; box-shadow: var(--sx-shadow-sm); }
.sx-tabs__button { min-height: 42px; flex: 0 0 auto; border: 0; border-radius: var(--sx-radius-md); padding: .65rem .9rem; background: transparent; color: var(--sx-text-secondary); font-weight: 720; white-space: nowrap; }
.sx-tabs__button:hover { background: var(--sx-surface-muted); color: var(--sx-text); }
.sx-tabs__button[aria-selected="true"] { background: var(--sx-primary-soft); color: var(--sx-primary-strong); box-shadow: inset 0 0 0 1px #d9ceff; }
.sx-tabs__panel { padding-block-start: 1.25rem; }
.sx-tabs__panel[hidden] { display: none !important; }
.sx-technical-value { max-inline-size: 100%; display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .38rem .28rem .55rem; border: 1px solid var(--sx-border); border-radius: .65rem; background: var(--sx-surface-muted); color: #484d60; vertical-align: middle; }
.sx-technical-value__text { max-inline-size: min(28rem, 50vw); overflow: hidden; color: inherit; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
.sx-technical-value__copy { inline-size: 1.7rem; block-size: 1.7rem; display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: .45rem; background: #fff; color: var(--sx-text-secondary); }
.sx-technical-value__copy:hover { background: var(--sx-primary-soft); color: var(--sx-primary); }
.sx-technical-value__copy svg { inline-size: 1rem; block-size: 1rem; }
.sx-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: .8rem; }
.sx-metric { min-height: 116px; display: grid; align-content: space-between; gap: .7rem; padding: 1rem; border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); background: #fff; box-shadow: var(--sx-shadow-sm); }
.sx-metric strong { font-size: 1.6rem; line-height: 1; }
.sx-form-section { padding: clamp(1.1rem, 2vw, 1.4rem); border: 1px solid var(--sx-border); border-radius: var(--sx-radius-lg); background: #fff; box-shadow: var(--sx-shadow-sm); }
.sx-form-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.sx-action-menu .dropdown-toggle::after { display: none; }

[dir="rtl"] .dropdown-menu-end { --bs-position: start; }
[dir="rtl"] .form-check { padding-right: 1.5em; padding-left: 0; }
[dir="rtl"] .form-check .form-check-input { float: right; margin-right: -1.5em; margin-left: 0; }