/*
 * Sellios V1 light workspace foundation.
 *
 * This is deliberately a final cascade layer shared by Demo and Production:
 * it changes presentation only, while the existing shell, navigation contract,
 * data adapters, and module renderers remain the authority for behaviour.
 */
:root {
  --sellios-bg: #f6f7fb;
  --sellios-surface: #ffffff;
  --sellios-surface-muted: #fbfbfe;
  --sellios-border: #e6e8f0;
  --sellios-border-strong: #d7dbe7;
  --sellios-text: #202338;
  --sellios-text-secondary: #535a6d;
  --sellios-text-muted: #71768a;
  --sellios-text-faint: #98a0b3;
  --sellios-primary: #6d3de1;
  --sellios-primary-hover: #5930c7;
  --sellios-primary-soft: #f1edff;
  --sellios-primary-border: #ddd2ff;
  --sellios-success: #17835a;
  --sellios-success-soft: #e8f7ef;
  --sellios-warning: #a86605;
  --sellios-warning-soft: #fff4dc;
  --sellios-danger: #c33e4a;
  --sellios-danger-soft: #ffeaed;
  --sellios-info: #2d67bd;
  --sellios-info-soft: #eaf2ff;
  --sellios-radius-sm: 8px;
  --sellios-radius-md: 12px;
  --sellios-radius-lg: 16px;
  --sellios-radius-xl: 20px;
  --sellios-radius-control: 12px;
  --sellios-radius-card: 16px;
  --sellios-radius-panel: 20px;
  --sellios-shadow-sm: 0 1px 2px rgba(30, 35, 56, .035);
  --sellios-shadow-md: 0 8px 26px rgba(35, 39, 60, .055);
  --sellios-shadow-card: 0 8px 26px rgba(35, 39, 60, .055);
  --sellios-control-height: 40px;
  --sellios-content-gutter: clamp(16px, 3vw, 40px);
}

body,
body.production-app-page,
body[data-production-page="app"] {
  background: var(--sellios-bg);
  color: var(--sellios-text);
}

/* Shared desktop shell ---------------------------------------------------- */
.sidebar,
.production-sidebar {
  background: var(--sellios-surface) !important;
  border-right: 1px solid var(--sellios-border) !important;
  box-shadow: 1px 0 0 rgba(31, 35, 55, .015) !important;
  color: var(--sellios-text) !important;
}

.brand-lockup,
.production-brand-lockup {
  min-height: 72px;
  padding-bottom: 22px;
}

.brand-lockup .brand-logo-white,
.production-brand-lockup img {
  display: block;
  width: 142px;
  height: auto;
}

.brand-lockup .brand-mark-white { display: none; }

.main-nav,
.production-navigation {
  scrollbar-color: #d9dce8 transparent;
}

.nav-section-title,
.nav-section-subtitle,
.production-nav-section-title {
  color: var(--sellios-text-faint) !important;
  opacity: 1 !important;
}

.nav-section-dashboard + .nav-section,
.sidebar-footer,
.production-sidebar-footer {
  border-color: var(--sellios-border) !important;
}

.nav-item,
.production-nav-item {
  border-radius: var(--sellios-radius-control) !important;
  color: #4a5064 !important;
}

.nav-item svg,
.production-nav-icon,
.production-nav-item .production-nav-icon {
  color: #8991a5 !important;
  opacity: 1 !important;
}

.nav-item:hover,
.production-nav-item:hover,
.nav-item.is-unavailable:hover,
.production-nav-item.is-unavailable:hover {
  background: #f7f6fb !important;
  color: var(--sellios-primary) !important;
}

.nav-item:hover svg,
.production-nav-item:hover .production-nav-icon {
  color: var(--sellios-primary) !important;
}

.nav-item.is-active,
.production-nav-item.is-active {
  background: var(--sellios-primary-soft) !important;
  box-shadow: inset 0 0 0 1px var(--sellios-primary-border) !important;
  color: var(--sellios-primary) !important;
  font-weight: 750 !important;
}

.nav-item.is-active svg,
.production-nav-item.is-active .production-nav-icon {
  color: var(--sellios-primary) !important;
}

.nav-item.is-active::before,
.production-nav-item.is-active::before {
  background: var(--sellios-primary) !important;
}

.nav-item b,
.production-nav-item b {
  background: var(--sellios-primary) !important;
  color: #fff !important;
  border-radius: 999px !important;
}

.nav-item i,
.production-nav-item i {
  background: #f4f1ff !important;
  color: #6b47bd !important;
  border-radius: 999px !important;
}

.help-card,
.account-card,
.production-help-card,
.production-profile-card {
  border-radius: var(--sellios-radius-control) !important;
  color: #535a6d !important;
}

.help-card:hover,
.account-card:hover,
.production-help-card:hover,
.production-profile-card:hover {
  background: #f7f6fb !important;
}

.help-card strong,
.account-card strong,
.production-help-card strong,
.production-profile-card strong {
  color: var(--sellios-text) !important;
}

.help-card span,
.account-card span,
.help-card > svg,
.account-card > svg,
.production-help-card small,
.production-profile-card small,
.production-footer-chevron,
.production-profile-chevron {
  color: var(--sellios-text-muted) !important;
}

.help-icon,
.production-help-icon,
.production-profile-avatar,
.avatar-owner {
  background: var(--sellios-primary-soft) !important;
  color: var(--sellios-primary) !important;
  box-shadow: none !important;
}

.production-profile-menu {
  border-color: var(--sellios-border) !important;
  border-radius: var(--sellios-radius-card) !important;
  background: var(--sellios-surface) !important;
  box-shadow: 0 16px 36px rgba(30, 35, 56, .13) !important;
}

.production-profile-menu strong { color: var(--sellios-text) !important; }
.production-profile-menu small { color: var(--sellios-text-muted) !important; }
.production-profile-menu button { color: #4e5568 !important; background: #f8f8fc !important; }
.production-profile-menu button:hover { background: var(--sellios-primary-soft) !important; color: var(--sellios-primary) !important; }

/* Current-account menus are intentionally compact. Team membership and role
   management remain in Tim & Akses; workspace switching remains separate. */
.account-popover,
.production-profile-menu { padding: 12px !important; }
.profile-menu-eyebrow { margin: 0 0 8px !important; color: var(--sellios-text-faint) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .09em !important; line-height: 1.25 !important; }
.profile-menu-identity { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px 2px 12px; }
.profile-menu-identity > span:last-child { display: grid; min-width: 0; gap: 2px; }
.profile-menu-identity strong { overflow: hidden; color: var(--sellios-text) !important; font-size: 13px !important; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-identity small { overflow: hidden; color: var(--sellios-text-muted) !important; font-size: 11px !important; text-overflow: ellipsis; white-space: nowrap; }
.profile-menu-actions,
.account-debug-role-preview { display: grid; gap: 3px; }
.account-menu-action,
.production-profile-menu .account-menu-action,
.production-profile-menu .profile-menu-logout { display: grid; width: 100%; min-height: 36px; align-items: center; margin: 0 !important; padding: 8px 10px !important; border: 0; border-radius: 9px; background: transparent !important; color: #4e5568 !important; font: inherit; font-size: 12px !important; font-weight: 720 !important; line-height: 1.3; text-align: left; cursor: pointer; }
.account-menu-action:hover,
.production-profile-menu .account-menu-action:hover,
.production-profile-menu .profile-menu-logout:hover { background: var(--sellios-primary-soft) !important; color: var(--sellios-primary) !important; }
.account-menu-action small { margin-top: 2px; color: var(--sellios-text-muted); font-size: 10px; font-weight: 600; }
.account-menu-action.is-current { color: var(--sellios-primary) !important; background: var(--sellios-primary-soft) !important; }
.profile-menu-divider { height: 1px; margin: 9px 0; background: var(--sellios-border); }
.profile-menu-logout { color: #a44955 !important; }
.profile-menu-logout:hover { background: #fff3f4 !important; color: #a44955 !important; }
.account-debug-role-preview { margin-top: 0; }
.account-debug-role-preview .profile-menu-eyebrow { margin-top: 1px !important; }

/* Shared top bar ---------------------------------------------------------- */
.topbar,
.production-topbar {
  min-height: 76px;
  border-bottom-color: var(--sellios-border) !important;
  background: rgba(255, 255, 255, .94) !important;
  box-shadow: 0 1px 0 rgba(31, 35, 55, .02);
}

/* The primary account control belongs with header utilities, never in the
   navigation rail. The same control IDs and data bindings are preserved. */
.topbar .account-topbar-wrap,
.production-topbar .production-topbar-profile { position: relative; order: 3; flex: 0 0 auto; }
.topbar .account-card { width: auto; min-width: 0; min-height: 42px; padding: 5px 8px; gap: 9px; border: 1px solid var(--sellios-border); border-radius: var(--sellios-radius-control); background: var(--sellios-surface); }
.topbar .account-card > div:nth-child(2) { min-width: 0; }
.topbar .account-card strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .account-card > svg { flex: 0 0 auto; }
.topbar .account-popover { position: absolute; top: calc(100% + 8px); right: 0; bottom: auto; left: auto; z-index: 22; width: min(275px, calc(100vw - 24px)); }

@media (min-width: 561px) and (max-width: 1010px) {
  .topbar .account-card > div:nth-child(2) { display: grid; }
  .topbar .account-card > svg { display: block; }
}

.brand-switcher,
.production-topbar .brand-switcher {
  border: 1px solid var(--sellios-border) !important;
  border-radius: var(--sellios-radius-control) !important;
  background: var(--sellios-surface) !important;
  box-shadow: var(--sellios-shadow-sm) !important;
  color: var(--sellios-text) !important;
}

.brand-switcher:hover,
.production-topbar .brand-switcher:hover {
  border-color: #cfc1fb !important;
  background: #fdfcff !important;
}

.brand-switcher strong,
.production-topbar .brand-switcher strong { color: var(--sellios-text) !important; }
.brand-switcher small,
.production-topbar .brand-switcher small { color: var(--sellios-text-muted) !important; }
.workspace-icon,
.workspace-icon::before,
.workspace-icon span { border-color: #697188 !important; }
.workspace-icon span { background: #697188 !important; }

.icon-button,
.production-topbar-tool {
  border-color: var(--sellios-border) !important;
  border-radius: var(--sellios-radius-control) !important;
  background: var(--sellios-surface) !important;
  color: #687085 !important;
}

.icon-button:hover,
.production-topbar-tool:hover {
  border-color: #cfc1fb !important;
  background: var(--sellios-primary-soft) !important;
  color: var(--sellios-primary) !important;
}

.notification-button b,
.production-notification-count {
  background: var(--sellios-primary) !important;
  color: #fff !important;
}

.brand-menu,
.production-topbar .brand-menu,
.production-nav-search-popover,
.production-notification-popover {
  border-color: var(--sellios-border) !important;
  border-radius: var(--sellios-radius-card) !important;
  background: var(--sellios-surface) !important;
  box-shadow: 0 16px 38px rgba(30, 35, 56, .12) !important;
}

/* Shared workspace canvas and reusable cards ---------------------------- */
.workspace,
.production-main,
.content,
.production-content {
  background: var(--sellios-bg);
}

.content,
.production-content {
  padding-top: clamp(28px, 4vw, 48px);
  color: var(--sellios-text);
}

.workspace-page-header h1,
.command-center-header h1,
.page-heading h1 {
  color: var(--sellios-text) !important;
}

.workspace-page-header>div>p:not(.workspace-eyebrow),
.command-center-header p,
.page-heading > div > p:last-child {
  color: var(--sellios-text-muted) !important;
}

.workspace-eyebrow,
.command-center-eyebrow,
.page-heading .eyebrow {
  color: #7754cc !important;
}

.workspace-button,
.button,
.production-button {
  min-height: var(--sellios-control-height);
  border-radius: var(--sellios-radius-control) !important;
}

.workspace-button-primary,
.button-primary,
.production-button-primary {
  background: var(--sellios-primary) !important;
  border-color: var(--sellios-primary) !important;
  box-shadow: 0 8px 18px rgba(109, 61, 225, .18);
}

.workspace-button-primary:hover,
.button-primary:hover,
.production-button-primary:hover { background: var(--sellios-primary-hover) !important; }

.workspace-button-secondary,
.button-secondary,
.production-button-secondary {
  border-color: var(--sellios-border) !important;
  background: var(--sellios-surface) !important;
  color: #50586b !important;
}

.workspace-panel,
.workspace-metric,
.workspace-module-stat,
.command-center-kpi,
.command-center-panel,
.metric-card,
.panel,
.card {
  border-color: var(--sellios-border) !important;
  border-radius: var(--sellios-radius-card) !important;
  background: var(--sellios-surface) !important;
  box-shadow: var(--sellios-shadow-card) !important;
}

.command-center-header { margin-bottom: 26px; }
.command-center-kpi { min-height: 116px; }

/* The panel and its inner list share a historical class name. Keep the list
   flush, but restore the panel's own breathing room explicitly. */
section.command-center-panel.command-center-conversations {
  padding: 24px !important;
}

section.command-center-panel.command-center-conversations > header {
  padding-bottom: 16px;
}

section.command-center-panel.command-center-conversations > ul.command-center-conversations {
  padding: 5px 0 0;
}

.command-center-kpi-icon,
.command-center-list-icon,
.command-center-mini-icon,
.command-center-timeline-icon,
.command-center-avatar {
  background: var(--sellios-primary-soft) !important;
  color: var(--sellios-primary) !important;
}

.command-center-panel>header,
.workspace-panel-heading { border-bottom-color: var(--sellios-border) !important; }
.command-center-panel>header h2,
.workspace-panel-heading h2 { color: var(--sellios-text) !important; }
.command-center-panel>header p,
.workspace-panel-heading p { color: var(--sellios-text-muted) !important; }
.workspace-command-action,
.workspace-text-action { color: var(--sellios-primary) !important; }
.command-center-progress { background: #eeeaf8 !important; }
.command-center-progress span { background: var(--sellios-primary) !important; }
.command-center-ai { border-radius: var(--sellios-radius-card) !important; }

input,
select,
textarea {
  border-color: var(--sellios-border);
  border-radius: var(--sellios-radius-control);
  background: var(--sellios-surface);
  color: var(--sellios-text);
}

/* These are intentionally app-canvas primitives only. Public storefronts
   have their own template stylesheet and never import this final layer. */
#content :is(input, select) { min-height: var(--sellios-control-height); }
#content :is(input, select, textarea):disabled {
  background: var(--sellios-surface-muted);
  color: var(--sellios-text-faint);
  cursor: not-allowed;
}
#content :is(input, select, textarea):focus {
  border-color: var(--sellios-primary-border);
  box-shadow: 0 0 0 3px rgba(109, 61, 225, .12);
  outline: 0;
}

input::placeholder,
textarea::placeholder { color: #a0a6b6; }

/* Keyboard visibility is part of the global shell contract. */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(109, 61, 225, .28) !important;
  outline-offset: 2px;
}

/* The compact navigation and drawer use the same light surface on mobile. */
@media (max-width: 768px) {
  .sidebar { background: var(--sellios-surface) !important; box-shadow: 10px 0 30px rgba(30, 35, 56, .12) !important; }
  .production-mobile-navigation { border-top-color: var(--sellios-border) !important; background: rgba(255, 255, 255, .97) !important; }
  .production-mobile-nav-item.is-active,
  .production-mobile-drawer-item.is-active { background: var(--sellios-primary-soft) !important; color: var(--sellios-primary) !important; }
  .production-mobile-drawer { border-color: var(--sellios-border) !important; background: var(--sellios-surface) !important; }
  .production-content,
  .content { padding-inline: 16px; }
}

@media (max-width: 560px) {
  .topbar,
  .production-topbar { min-height: 68px; }
  .brand-switcher { max-width: calc(100vw - 150px); }
  .topbar .account-card > div:nth-child(2) { display: none; }
  .topbar .account-card { min-width: 42px; justify-content: center; padding: 4px; }
  .command-center-header h1,
  .workspace-page-header h1 { font-size: clamp(28px, 8vw, 36px) !important; }
  .command-center-kpi { min-height: 104px; }
  section.command-center-panel.command-center-conversations { padding: 18px !important; }
}

/* Customer 360 has a detail rail on wide screens. At phone width, keep its
   actions below the heading so neither the merchant title nor its primary CTA
   competes for the same narrow row. The table and customer authority stay
   untouched. */
@media (max-width: 620px) {
  .customer-master-workspace .customer-workspace-header {
    display: block;
  }

  .customer-master-workspace .contacts-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin-top: 16px;
    gap: 10px;
  }

  .customer-master-workspace .contacts-panel-actions .button {
    min-width: 0;
    padding-inline: 10px;
    white-space: normal;
  }
}