/* Final Mail, Voice, and usage closeout. Loaded last to keep these states stable. */

html body.tenant-app-body[data-app-surface="workspace"] #app-tab-sms .tenant-nav-icon {
  --hvx-nav-icon-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 4h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H9l-5 4v-4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2Zm2 5v2h12V9H6Zm0 4v2h8v-2H6Z'/%3E%3C/svg%3E") !important;
}

@media (min-width: 801px) {
  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-frame {
    grid-template-columns: 220px minmax(0, 1fr) !important;
  }

  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-sidebar {
    display: block !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
    padding: 8px 0 !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-sidebar .tenant-mail-nav > .tenant-nav-btn,
  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-sidebar .tenant-mail-nav > .tenant-nav-divider,
  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-sidebar .tenant-mail-nav > .tenant-sidebar-nav-label {
    display: none !important;
  }

  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-sidebar .tenant-workspace-compose-panel {
    left: 0 !important;
    width: 220px !important;
  }

  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"].tenant-mail-nav-focused #app-workspace-sidebar #app-mail-rail {
    left: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: 220px !important;
  }

  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"] #app-workspace-surface {
    grid-template-rows: minmax(0, 1fr) !important;
  }

  html body.tenant-app-body[data-app-surface="workspace"][data-active-tab="inbox"] #app-workspace-stage-header {
    display: none !important;
  }
}

.tenant-usage-meter-section {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid #d9e2ec;
  border-radius: 14px;
  background: #fff;
}

.tenant-usage-meter-heading,
.tenant-usage-meter-top,
.tenant-usage-meter-meta,
.tenant-user-package-usage-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tenant-usage-meter-heading h3 {
  margin: 2px 0 0;
  font-size: 18px;
}

.tenant-usage-meter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.tenant-usage-meter {
  min-width: 0;
  padding: 14px;
  border: 1px solid #dde5ee;
  border-radius: 12px;
  background: #f8fafc;
}

.tenant-usage-meter-top > div {
  display: grid;
  gap: 4px;
}

.tenant-usage-meter-top span,
.tenant-user-package-usage-head span {
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.tenant-usage-meter-top strong {
  font-size: 22px;
}

.tenant-usage-meter-top strong small {
  color: #64748b;
  font-size: 12px;
  font-weight: 600;
}

.tenant-usage-meter-top > b {
  color: #166534;
  font-size: 13px;
}

.tenant-usage-progress,
.tenant-user-shared-meter-grid i {
  display: block;
  height: 8px;
  margin: 12px 0 9px;
  overflow: hidden;
  border-radius: 999px;
  background: #e2e8f0;
}

.tenant-usage-progress i,
.tenant-user-shared-meter-grid em {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: #1a73e8;
}

.tenant-usage-meter.is-warning .tenant-usage-progress i { background: #d97706; }
.tenant-usage-meter.is-danger .tenant-usage-progress i { background: #c5221f; }
.tenant-usage-meter.is-warning .tenant-usage-meter-top > b { color: #92400e; }
.tenant-usage-meter.is-danger .tenant-usage-meter-top > b { color: #991b1b; }

.tenant-usage-meter-meta {
  align-items: flex-start;
  color: #475569;
  font-size: 11px;
}

.tenant-usage-meter-meta span:last-child { text-align: right; }
.tenant-usage-meter p { margin: 9px 0 0; color: #64748b; font-size: 11px; }

.tenant-central-usage-row {
  min-height: 0 !important;
  padding: 9px 12px !important;
}

.tenant-central-usage-row + .tenant-central-usage-row { margin-top: 4px !important; }

.tenant-user-package-field { margin-top: 12px; }

.tenant-user-package-usage {
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #dbe5f0;
  border-radius: 12px;
  background: #f8fafc;
}

.tenant-user-shared-meter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.tenant-user-shared-meter-grid > div {
  display: grid;
  min-width: 0;
}

.tenant-user-shared-meter-grid span { color: #475569; font-size: 11px; font-weight: 700; }
.tenant-user-shared-meter-grid b { margin-top: 2px; font-size: 12px; }
.tenant-user-shared-meter-grid i { height: 5px; margin: 6px 0 0; }
.tenant-user-package-usage > p { margin: 10px 0 0; }

@media (max-width: 900px) {
  .tenant-usage-meter-grid,
  .tenant-user-shared-meter-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Brand mark: the Mail tab draws the HexaVox "H" mark (mail-ui-closeout.css); every other
   workspace tab left the same box as an empty grey square. Match the Mail treatment everywhere. */
html body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body[data-app-surface="workspace"]:not([data-active-tab="inbox"]) .tenant-app-brand-header .tenant-app-brand-mark {
  place-items: center !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 6px !important;
  background: #0b57d0 !important;
  color: #fff !important;
  box-shadow: none !important;
}

html body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body.tenant-app-body[data-app-surface="workspace"]:not([data-active-tab="inbox"]) .tenant-app-brand-header .tenant-app-brand-mark::after {
  content: "H";
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
}