/* SafeSpace eMail — interior visual proposal v1 */
main[ui-view="mailboxes"].ss-app-page {
  --ss-app-bg: #f2f6fb;
  --ss-surface: #ffffff;
  --ss-surface-soft: #f7faff;
  --ss-sidebar: #f8fafc;
  --ss-sidebar-head: #0b3157;
  --ss-toolbar: #0b3157;
  --ss-text: #142a43;
  --ss-muted: #667a91;
  --ss-border: #dce5ef;
  --ss-active: #e6f1ff;
  --ss-active-text: #075fb9;
  --ss-blue: #0877ee;
  --ss-hover: #f0f6fd;
  --ss-shadow: 0 12px 34px rgba(27, 61, 95, 0.1);
  color: var(--ss-text) !important;
  background: var(--ss-app-bg) !important;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

.ss-theme-dark main[ui-view="mailboxes"].ss-app-page {
  --ss-app-bg: #07111c;
  --ss-surface: #0d1b29;
  --ss-surface-soft: #102131;
  --ss-sidebar: #091722;
  --ss-sidebar-head: #071c31;
  --ss-toolbar: #071c31;
  --ss-text: #edf5fc;
  --ss-muted: #9db0c3;
  --ss-border: #24384a;
  --ss-active: #123657;
  --ss-active-text: #79bcff;
  --ss-blue: #1687f8;
  --ss-hover: #11283b;
  --ss-shadow: 0 16px 42px rgba(0, 0, 0, 0.28);
}

.ss-app-page *, .ss-app-page button, .ss-app-page input {
  font-family: inherit !important;
}

.ss-app-page .material-icons,
.ss-app-page md-icon,
.ss-app-page md-icon * {
  font-family: "Material Icons" !important;
  font-weight: normal !important;
  font-style: normal !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: "liga" !important;
  -webkit-font-smoothing: antialiased !important;
}

.ss-app-page md-sidenav.md-sidenav-left {
  width: 288px !important;
  min-width: 288px !important;
  border-right: 1px solid var(--ss-border);
  color: var(--ss-text) !important;
  background: var(--ss-sidebar) !important;
  box-shadow: none !important;
}

main[ui-view="mailboxes"].ss-app-page md-sidenav.md-sidenav-left > md-toolbar.sg-padded {
  min-height: 128px;
  color: #f8fbff !important;
  background: var(--ss-sidebar-head) !important;
}

.ss-app-page md-sidenav.md-sidenav-left > md-toolbar md-icon,
.ss-app-page md-sidenav.md-sidenav-left > md-toolbar .md-button {
  color: #f8fbff !important;
}

.ss-app-page md-sidenav md-content,
.ss-app-page .sg-account-section {
  color: var(--ss-text) !important;
  background: var(--ss-sidebar) !important;
}

.ss-app-page .sg-account-section > md-list:first-child {
  margin: 8px 10px 4px;
  border-bottom: 1px solid var(--ss-border);
}

.ss-app-page .sg-mailbox-list-item {
  min-height: 42px;
  margin: 3px 10px;
  overflow: hidden;
  border-radius: 9px;
  color: var(--ss-text) !important;
  background: transparent !important;
}

.ss-app-page .sg-mailbox-list-item:hover {
  background: var(--ss-hover) !important;
}

.ss-app-page .sg-mailbox-list-item.sg-selected,
.ss-app-page .sg-mailbox-list-item.md-bg {
  color: var(--ss-active-text) !important;
  background: var(--ss-active) !important;
}

.ss-app-page .sg-mailbox-list-item md-icon,
.ss-app-page .sg-mailbox-list-item .md-button {
  color: inherit !important;
}

.ss-app-page section[ui-view="mailbox"] {
  background: var(--ss-app-bg) !important;
}

main[ui-view="mailboxes"].ss-app-page section[ui-view="mailbox"] > md-toolbar.toolbar-main {
  min-height: 64px;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #f8fbff !important;
  background: var(--ss-toolbar) !important;
  box-shadow: 0 5px 18px rgba(7, 35, 61, 0.16);
}

main[ui-view="mailboxes"].ss-app-page .toolbar-main md-icon,
main[ui-view="mailboxes"].ss-app-page .toolbar-main .md-button {
  color: #f8fbff !important;
}

.ss-app-page .view-list {
  border-right: 1px solid var(--ss-border);
  color: var(--ss-text) !important;
  background: var(--ss-surface) !important;
  box-shadow: 8px 0 28px rgba(30, 63, 93, 0.04);
}

.ss-app-page .view-list > md-toolbar.md-accent,
.ss-app-page .view-list > md-toolbar.md-hue-1 {
  color: var(--ss-text) !important;
  background: var(--ss-surface-soft) !important;
  border-bottom: 1px solid var(--ss-border);
  box-shadow: none !important;
}

.ss-app-page .view-list > md-toolbar md-icon,
.ss-app-page .view-list > md-toolbar .md-button {
  color: var(--ss-text) !important;
}

.ss-app-page #messagesList,
.ss-app-page #messagesList > md-list {
  color: var(--ss-text) !important;
  background: var(--ss-surface) !important;
}

.ss-app-page #messagesList > div:first-child {
  color: var(--ss-muted) !important;
  border-bottom: 1px solid var(--ss-border);
  background: var(--ss-surface) !important;
}

.ss-app-page .sg-message-list-item {
  min-height: 64px;
  margin: 0 8px;
  border-bottom: 1px solid var(--ss-border);
  color: var(--ss-text) !important;
  background: var(--ss-surface) !important;
}

.ss-app-page .sg-message-list-item:hover {
  border-radius: 8px;
  background: var(--ss-hover) !important;
}

.ss-app-page .sg-message-list-item.sg-selected,
.ss-app-page .sg-message-list-item.md-bg {
  border-radius: 8px;
  background: var(--ss-active) !important;
}

.ss-app-page .sg-message-list-item .sg-md-subhead,
.ss-app-page .sg-message-list-item .md-list-item-text > h3 {
  color: var(--ss-text) !important;
  font-weight: 600;
}

.ss-app-page .sg-message-list-item p,
.ss-app-page .sg-message-list-item .md-secondary {
  color: var(--ss-muted) !important;
}

.ss-app-page #detailView,
.ss-app-page #detailView md-content,
.ss-app-page #detailView md-card {
  color: var(--ss-text) !important;
  background: var(--ss-app-bg) !important;
}

.ss-app-page #detailView > md-content {
  margin: 18px;
  border: 1px solid var(--ss-border);
  border-radius: 14px;
  background: var(--ss-surface-soft) !important;
  box-shadow: var(--ss-shadow);
}

.ss-app-page #detailView > md-content > div {
  color: var(--ss-muted) !important;
}

.ss-app-page .md-fab,
.ss-app-page .md-button.md-fab {
  color: #fff !important;
  background: var(--ss-blue) !important;
  box-shadow: 0 10px 26px rgba(8,119,238,.28) !important;
}

.ss-app-theme-switcher {
  display: inline-grid;
  grid-template-columns: repeat(3, 34px);
  gap: 2px;
  margin-right: 8px;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
}

.ss-app-theme-switcher button {
  display: grid;
  width: 34px;
  height: 30px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  place-items: center;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: transparent;
  cursor: pointer;
}

.ss-app-theme-switcher button.is-active {
  background: var(--ss-blue);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
}

.ss-app-theme-switcher .material-icons { font-size: 17px; }

@media (max-width: 959px) {
  main[ui-view="mailboxes"].ss-app-page section[ui-view="mailbox"] > md-toolbar.toolbar-main { background: var(--ss-toolbar) !important; }
  .ss-app-page .view-list { border-right: 0; }
  .ss-app-page .sg-message-list-item { min-height: 66px; }
  .ss-app-page #detailView > md-content { margin: 0; border: 0; border-radius: 0; }
}

@media (max-width: 599px) {
  .ss-app-theme-switcher { grid-template-columns: repeat(2, 30px); margin-right: 2px; }
  .ss-app-theme-switcher button { width: 30px; height: 28px; }
  .ss-app-theme-switcher button[data-ss-theme="system"] { display: none; }
  .ss-app-page .toolbar-main { min-height: 56px; }
}