/* ============================================================
   Senditto unified theme — loaded LAST.
   One light design system across every page generation:
   pp- (pages/pro/enterprise/settings/activity), tpl- (templates,
   campaigns), wm- (workspaces), se- (send), an- (analytics),
   sd-/cr- (overview + CRM, already on-system).
   Calm light surfaces, one blue, one button, one table, one card.
   ============================================================ */

/* ---------------- shared scopes ---------------- */
/* :is() carries ID specificity so these later rules win without !important */

/* ---------------- buttons ---------------- */

:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn) {
  height: 40px;
  border: 1px solid var(--sd-line, #e3e9f2);
  border-radius: 10px;
  background: #fff;
  color: var(--sd-ink, #0f172a);
  font-weight: 700;
  font-size: 13px;
  box-shadow: none;
  transition: box-shadow 0.16s ease, transform 0.16s ease, background 0.16s ease, border-color 0.16s ease;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):hover {
  border-color: #c9d6ea;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
  transform: translateY(-1px);
  background: #fff;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):active {
  transform: translateY(0);
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):is(.primary, .danger-solid) {
  background: linear-gradient(180deg, #4a8bf7, #367ef5);
  border-color: #1e5fd6;
  color: #fff;
  box-shadow: 0 6px 16px rgba(54, 126, 245, 0.26);
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):is(.primary):hover {
  background: linear-gradient(180deg, #5895f8, #2f74ea);
  border-color: #1e5fd6;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):is(.small, .sm) {
  height: 33px;
  border-radius: 9px;
  font-size: 12.5px;
  padding: 0 11px;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):is(.danger, .destructive) {
  color: #b32020;
  border-color: #f0c9c9;
  background: #fff;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .cr-modal)
  :is(.pp-btn, .tpl-btn, .wm-btn, .se-btn):is(.danger, .destructive):hover {
  background: rgba(220, 38, 38, 0.05);
  border-color: #e4a9a9;
}

/* ---------------- inputs & selects ---------------- */

:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-input, .tpl-input, .tpl-textarea, .wm-input, .wm-select, .se-input, .an-select, textarea.pp-input) {
  background: #fff;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  color: var(--sd-ink, #0f172a);
  font-weight: 600;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal, .cr-modal)
  :is(.pp-input, .tpl-input, .tpl-textarea, .wm-input, .wm-select, .se-input, .an-select):focus {
  border-color: #9dbdf5;
  box-shadow: 0 0 0 3px rgba(54, 126, 245, 0.12);
  outline: none;
  background: #fff;
}
:is(#senditto-platform-root, .pp-modal, .tpl-modal, .wm-modal, .se-modal)
  :is(.pp-label-text, .tpl-label-text, .wm-label-text) {
  color: #47566d;
  font-weight: 700;
  font-size: 12.5px;
}

/* ---------------- cards & panels ---------------- */

#senditto-platform-root :is(.pp-card, .tpl-card, .an-card, .wm-card, .pro-card) {
  background: #fff;
  border: 1px solid var(--sd-line, #e3e9f2);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05), 0 4px 14px rgba(15, 23, 42, 0.05);
}

/* stat tiles under page heads follow the KPI card look */
#senditto-platform-root .pp-stats > * {
  background: #fff;
  border: 1px solid var(--sd-line, #e3e9f2);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* ---------------- page headers ---------------- */

#senditto-platform-root
  :is(.pp-head, .se-head, .tpl-head, .wm-head, .an-head, .sup-head, .st-head) h1 {
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--sd-ink, #0f172a);
}
#senditto-platform-root
  :is(.pp-head, .se-head, .tpl-head, .wm-head, .an-head, .sup-head, .st-head) > div > p {
  color: var(--sd-mut, #5b6b82);
}
#senditto-platform-root :is(.pp-kicker, .se-kicker, .tpl-kicker, .wm-kicker, .an-kicker) {
  color: #1e5fd6;
  letter-spacing: 0.12em;
  font-weight: 800;
}

/* ---------------- tables & list rows ---------------- */

#senditto-platform-root :is(.pp-table-head, .pro-table-head, thead th) {
  color: #8b99ad;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 800;
}
#senditto-platform-root :is(.pp-row, .pro-table-row) {
  border-color: #eef2f8;
  transition: background 0.13s ease;
}
#senditto-platform-root :is(.pp-row, .pro-table-row):hover {
  background: #f7faff;
}

/* ---------------- badges / status chips ---------------- */

#senditto-platform-root :is(.pp-badge, .tpl-badge, .wm-badge) {
  border-radius: 999px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ---------------- modals ---------------- */

:is(.pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal) {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}
:is(.pp-backdrop, .tpl-backdrop, .wm-backdrop, .se-backdrop) {
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(3px);
}
:is(.pp-modal, .tpl-modal, .wm-modal, .se-modal, .an-modal) > :is(section, .pp-modal-card, div[class*="modal-card"]) {
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
  border: 1px solid #eef2f8;
}

/* ---------------- code blocks → light ---------------- */

#senditto-platform-root .pp-code,
.pp-modal .pp-code {
  background: #f8fafd;
  color: #33415a;
  border: 1px solid #e7edf6;
  border-radius: 12px;
  text-shadow: none;
}
#senditto-platform-root .se-code-workspace textarea,
.se-modal .se-code-workspace textarea {
  background: #f8fafd;
  color: #33415a;
  border: 1px solid #e7edf6;
  caret-color: #1e5fd6;
}

/* ---------------- settings / enterprise nav rails ---------------- */

#senditto-platform-root :is(.st-nav, .ent-settings-nav) button {
  border-radius: 10px;
  color: var(--sd-mut, #5b6b82);
  font-weight: 700;
}
#senditto-platform-root :is(.st-nav, .ent-settings-nav) button:hover {
  background: #f3f6fb;
  color: var(--sd-ink, #0f172a);
}
#senditto-platform-root :is(.st-nav, .ent-settings-nav) button.active {
  background: rgba(54, 126, 245, 0.09);
  color: #1e5fd6;
}

/* ---------------- misc harmonization ---------------- */

/* one accent for links & pro checkmarks */
#senditto-platform-root .pro-check { color: #147c3d; }

/* soften any leftover strong primary fills to the brand gradient */
#senditto-platform-root :is(.tpl-btn, .wm-btn, .se-btn, .pp-btn)[class*="primary"] svg {
  color: #fff;
}

/* toast: keep readable but light */
.se-toast {
  background: #ffffff;
  color: var(--sd-ink, #0f172a);
  border: 1px solid var(--sd-line, #e3e9f2);
  box-shadow: 0 16px 44px rgba(15, 23, 42, 0.18);
}
.se-toast svg { color: #147c3d; }

/* focus visibility everywhere */
#senditto-platform-root :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid rgba(54, 126, 245, 0.55);
  outline-offset: 2px;
  border-radius: 8px;
}

/* content background stays calm */
#senditto-platform-root {
  background: #f6f8fc;
}

/* ---------------- floating sample-data control ---------------- */

#senditto-demo-fab {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 65;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--sd-line, #e3e9f2);
  background: #ffffff;
  color: var(--sd-ink, #0f172a);
  border-radius: 999px;
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.12);
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}
#senditto-demo-fab svg { width: 15px; height: 15px; color: #b48b0e; }
#senditto-demo-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.16);
  border-color: #c9d6ea;
}
#senditto-demo-fab.seeded svg { color: #b32020; }
@media (max-width: 760px) {
  #senditto-demo-fab span { display: none; }
  #senditto-demo-fab { padding: 11px; }
}

/* ---------------- shell upgrade: sections, collapse, popovers ---------------- */

/* per-section accent colors (light, calm) */
.dashboard-sidebar .nav-group:nth-of-type(1) button.active { background: rgba(54,126,245,.10); color: #1e5fd6; }
.dashboard-sidebar .nav-group:nth-of-type(2) button.active { background: rgba(124,92,245,.10); color: #6d4fd8; }
.dashboard-sidebar .nav-group:nth-of-type(3) button.active { background: rgba(13,148,136,.10); color: #0f766e; }
.dashboard-sidebar .nav-group:nth-of-type(4) button.active { background: rgba(180,139,14,.12); color: #92610c; }
.dashboard-sidebar .nav-group:nth-of-type(5) button.active { background: rgba(225,29,72,.09); color: #be123c; }
.dashboard-sidebar .nav-group:nth-of-type(6) button.active { background: rgba(14,165,233,.10); color: #0369a1; }
.dashboard-sidebar .nav-group:nth-of-type(7) button.active { background: rgba(99,102,241,.10); color: #4f46e5; }
.dashboard-sidebar .nav-group:nth-of-type(8) button.active { background: rgba(100,116,139,.12); color: #334155; }
.dashboard-sidebar .nav-group:nth-of-type(1) > small { color: #1e5fd6; }
.dashboard-sidebar .nav-group:nth-of-type(2) > small { color: #6d4fd8; }
.dashboard-sidebar .nav-group:nth-of-type(3) > small { color: #0f766e; }
.dashboard-sidebar .nav-group:nth-of-type(4) > small { color: #92610c; }
.dashboard-sidebar .nav-group:nth-of-type(5) > small { color: #be123c; }
.dashboard-sidebar .nav-group:nth-of-type(6) > small { color: #0369a1; }
.dashboard-sidebar .nav-group:nth-of-type(7) > small { color: #4f46e5; }
.dashboard-sidebar .nav-group:nth-of-type(8) > small { color: #334155; }
.dashboard-sidebar .nav-group > small { font-weight: 800; letter-spacing: .09em; }

/* hidden sidebar sign out (moved to profile dropdown) */
.sd-hidden-signout { display: none !important; }

/* sidebar usage widget */
.sd-side-usage {
  margin: 6px 10px 10px;
  padding: 12px 13px;
  border: 1px solid var(--sd-line, #e3e9f2);
  border-radius: 13px;
  background: #fbfcfe;
}
.sd-side-usage-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.sd-side-usage-top span { font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #8b99ad; }
.sd-side-usage-top b { font-size: 13px; font-variant-numeric: tabular-nums; }
.sd-side-usage small { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: #8b99ad; font-size: 10.5px; }
.sd-ok-dot { width: 6px; height: 6px; border-radius: 50%; background: #16a34a; display: inline-block; box-shadow: 0 0 0 2.5px rgba(22,163,74,.15); }
.dashboard-shell.collapsed .sd-side-usage { display: none; }

/* collapsed sidebar: icon-only, labels and group titles hidden */
.dashboard-shell.collapsed .dashboard-sidebar .nav-group > small { display: none; }
.dashboard-shell.collapsed .dashboard-sidebar nav button span { display: none; }
.dashboard-shell.collapsed .dashboard-sidebar nav button { justify-content: center; }
.dashboard-shell.collapsed .sidebar-bottom button span { display: none; }
/* collapse toggle reads as an arrow and flips */
.sidebar-brand > button { transition: transform .25s ease; border-radius: 9px; }
.sidebar-brand > button:hover { background: #f1f5fb; }
.dashboard-shell.collapsed .sidebar-brand > button { transform: rotate(180deg); }

/* proper popover shade (profile / notifications / help) */
.profile-popover, .notification-popover, .top-popover, .search-popover, .docs-popover {
  border: 1px solid #e6ecf5 !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06), 0 18px 48px rgba(15, 23, 42, 0.14) !important;
  background: #ffffff !important;
  overflow: hidden;
}
.sd-pop-signout {
  display: flex; align-items: center; gap: 9px; width: calc(100% - 16px); margin: 6px 8px 8px;
  border: 0; background: transparent; border-radius: 9px; padding: 9px 10px;
  font-size: 13px; font-weight: 700; color: #b32020; cursor: pointer; text-align: left;
}
.sd-pop-signout svg { width: 15px; height: 15px; }
.sd-pop-signout:hover { background: rgba(220, 38, 38, 0.07); }

/* Analytics: clear gaps between stacked cards */
#senditto-platform-root .an-page { display: flex; flex-direction: column; gap: 16px; }
#senditto-platform-root .an-page > * { margin-top: 0 !important; margin-bottom: 0 !important; }
#senditto-platform-root .an-main { gap: 16px; }