/* ============================================
   WA Robotos — Layout System
   Replaces inline styles for structural layout.
   All pages should use these classes instead of
   inline style="" for layout concerns.
   ============================================ */

/* ---- Application Shell ---- */
.wa-shell {
  margin-left: var(--wa-sidebar-width);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: margin-left 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Sidebar structure ---- */
#wa-sidebar {
  background: var(--wa-sidebar-bg);
  border-right: 1px solid var(--wa-sidebar-border);
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  z-index: var(--wa-z-sticky);
  transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: visible;
}
#wa-sidebar.wa-sidebar-expanded { width: var(--wa-sidebar-width); }
#wa-sidebar.wa-sidebar-collapsed { width: var(--wa-sidebar-collapsed); }

/* Sidebar header */
.wa-sb-header {
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--wa-sidebar-border);
  min-height: var(--wa-topbar-height);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.wa-sb-brand {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 0;
}
.wa-sb-logo {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--wa-radius-xl);
  background: linear-gradient(135deg, var(--wa-primary), var(--wa-accent));
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--wa-primary) 35%, transparent);
}

/* Collapse toggle — icon button in header */
.wa-sb-collapse-btn {
  width: 2rem;
  height: 2rem;
  border-radius: var(--wa-radius-lg);
  border: none;
  background: transparent;
  color: var(--wa-sidebar-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  flex-shrink: 0;
}
.wa-sb-collapse-btn svg {
  width: 1.125rem;
  height: 1.125rem;
}
.wa-sb-collapse-btn:hover {
  background: var(--wa-sidebar-accent);
  color: var(--wa-sidebar-fg);
}

/* Nav items */
.wa-sb-nav { padding: 0.5rem; }
.wa-sb-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0.75rem;
  border-radius: var(--wa-radius-xl);
  font-size: 0.8125rem;
  margin-bottom: 0.25rem;
  text-decoration: none;
  color: var(--wa-sidebar-fg);
  font-weight: 500;
  transition: all 120ms;
  overflow: hidden;
  white-space: nowrap;
}
.wa-sb-active {
  background: var(--wa-primary) !important;
  color: var(--wa-primary-fg) !important;
  font-weight: 800;
}
.wa-sb-icon {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  opacity: 0.45;
  overflow: visible;
}
.wa-sb-active .wa-sb-icon { opacity: 1; }
.wa-sb-badge {
  background: var(--wa-primary);
  color: white;
  font-size: 0.625rem;
  padding: 0.125rem 0.4375rem;
  border-radius: var(--wa-radius-full);
  font-weight: 700;
  min-width: 1.25rem;
  text-align: center;
  line-height: 1.125rem;
  flex-shrink: 0;
}
.wa-sb-divider {
  height: 1px;
  background: var(--wa-sidebar-border);
  margin: 0.375rem 0.75rem;
}
.wa-sb-label {
  font-size: 0.5625rem;
  font-weight: 700;
  color: var(--wa-sidebar-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.875rem 0.75rem 0.375rem;
  opacity: 0.7;
  white-space: nowrap;
}

/* Profile card */
.wa-sb-profile-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem;
  border-radius: var(--wa-radius-2xl);
  cursor: pointer;
  background: var(--wa-bg-secondary);
  border: 1px solid var(--wa-border);
  transition: all 150ms;
  overflow: hidden;
}
.wa-sb-profile-card:hover { background: var(--wa-card); }
.wa-sb-avatar {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--wa-radius-full);
  background: var(--wa-primary-muted);
  color: var(--wa-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ---- COLLAPSED STATE ---- */
.wa-sidebar-collapsed .wa-sb-text { display: none !important; }
.wa-sidebar-collapsed .wa-sb-header {
  padding: 0.5rem 0.375rem 0.75rem;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}
.wa-sidebar-collapsed .wa-sb-brand { justify-content: center; }
.wa-sidebar-collapsed .wa-sb-logo { width: 2.25rem; height: 2.25rem; font-size: 0.625rem; }
.wa-sidebar-collapsed .wa-sb-collapse-btn { width: 1.75rem; height: 1.75rem; order: -1; }
.wa-sidebar-collapsed .wa-sb-nav { padding: 0.375rem; }
.wa-sidebar-collapsed .wa-sb-item {
  justify-content: center;
  padding: 0.625rem;
  gap: 0;
  position: relative;
  border-radius: var(--wa-radius-lg);
  overflow: visible;
}
.wa-sidebar-collapsed .wa-sb-icon { width: 1.25rem; height: 1.25rem; }
.wa-sidebar-collapsed .wa-sb-badge {
  position: absolute;
  top: 0.0625rem;
  right: 0.0625rem;
  font-size: 0.5rem;
  padding: 0 0.25rem;
  min-width: 0.875rem;
  line-height: 0.875rem;
}
.wa-sidebar-collapsed .wa-sb-divider { margin: 0.25rem; }
.wa-sidebar-collapsed .wa-sb-label { display: none; }
.wa-sidebar-collapsed .wa-sb-profile { padding: 0.375rem; }
.wa-sidebar-collapsed .wa-sb-profile-card {
  justify-content: center;
  padding: 0.375rem;
  gap: 0;
  border-radius: var(--wa-radius-xl);
}
.wa-sidebar-collapsed .wa-sb-profile-card > div:first-child > div:last-child { display: none; }

/* Profile dropdown positioning */
.wa-sb-profile-dropdown {
  bottom: calc(100% + 4px);
  left: 0.75rem;
  right: 0.75rem;
  min-width: 0;
  border-radius: var(--wa-radius-2xl);
}
.wa-sidebar-collapsed .wa-sb-profile-dropdown {
  bottom: calc(100% + 4px);
  left: 100%;
  right: auto;
  min-width: 15rem;
  margin-left: 0.5rem;
  border-radius: var(--wa-radius-2xl);
  z-index: var(--wa-z-popover);
  box-shadow: var(--wa-shadow-xl);
}

/* Tooltip on hover for collapsed nav items */
.wa-sidebar-collapsed .wa-sb-item::after {
  content: attr(title);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--wa-fg);
  color: var(--wa-bg);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 0.3125rem 0.75rem;
  border-radius: var(--wa-radius-md);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
  z-index: var(--wa-z-tooltip);
  box-shadow: var(--wa-shadow-lg);
}
.wa-sidebar-collapsed .wa-sb-item:hover::after { opacity: 1; }

/* ---- Topbar ---- */
.wa-topbar {
  height: var(--wa-topbar-height);
  border-bottom: 1px solid var(--wa-border);
  background: var(--wa-bg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.5rem;
  position: sticky;
  top: 0;
  z-index: var(--wa-z-sticky);
  backdrop-filter: blur(8px);
  background: color-mix(in srgb, var(--wa-bg) 85%, transparent);
}

/* ---- Page Content ---- */
.wa-page {
  padding: 2.5rem 2.5rem;
  max-width: var(--wa-content-max);
  margin: 0 auto;
  width: 100%;
}
.wa-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.wa-page-title {
  font-size: 2.25rem;
  font-weight: 800;
  color: var(--wa-fg);
  margin: 0;
  letter-spacing: -0.03em;
  line-height: 1.15;
  font-family: var(--wa-font-heading);
}
.wa-page-subtitle {
  font-size: 0.8125rem;
  color: var(--wa-fg-muted);
  margin: 0.375rem 0 0;
  letter-spacing: 0.01em;
}
.wa-page-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wa-primary);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.5rem;
  font-family: var(--wa-font-sans);
}
.wa-page-desc {
  color: var(--wa-fg-muted);
  font-size: 0.9375rem;
  margin-top: 0.5rem;
  font-family: var(--wa-font-sans);
}
.wa-section-title {
  font-size: 1.25rem;
  font-weight: 800;
  font-family: var(--wa-font-heading);
  letter-spacing: -0.02em;
  color: var(--wa-fg);
  margin-bottom: 1rem;
}

/* ---- Grid Layouts ---- */
.wa-grid-kpi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}
.wa-grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1.5rem;
}
.wa-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.wa-grid-2col-wide {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.5rem;
}
.wa-grid-settings {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 1.5rem;
}

/* ---- Flex Utilities ---- */
.wa-flex { display: flex; }
.wa-flex-col { display: flex; flex-direction: column; }
.wa-flex-center { display: flex; align-items: center; justify-content: center; }
.wa-flex-between { display: flex; align-items: center; justify-content: space-between; }
.wa-flex-wrap { flex-wrap: wrap; }
.wa-gap-xs { gap: 0.25rem; }
.wa-gap-sm { gap: 0.5rem; }
.wa-gap-md { gap: 0.75rem; }
.wa-gap-lg { gap: 1rem; }
.wa-gap-xl { gap: 1.5rem; }

/* ---- Spacing ---- */
.wa-mb-sm { margin-bottom: 0.5rem; }
.wa-mb-md { margin-bottom: 1rem; }
.wa-mb-lg { margin-bottom: 1.5rem; }
.wa-mb-xl { margin-bottom: 2rem; }
.wa-mb-section { margin-bottom: 2.5rem; }
.wa-mt-md { margin-top: 1rem; }
.wa-mt-lg { margin-top: 1.5rem; }
.wa-p-md { padding: 1rem; }
.wa-p-lg { padding: 1.25rem; }
.wa-p-xl { padding: 1.5rem; }

/* ---- Full-height layouts (inbox, flow editor) ---- */
.wa-full-height {
  height: calc(100vh - var(--wa-topbar-height));
  overflow: hidden;
}

/* ---- Responsive ---- */
@media (max-width: 1279px) {
  .wa-shell { margin-left: 0; }
  .wa-grid-2col { grid-template-columns: 1fr; }
  .wa-grid-2col-wide { grid-template-columns: 1fr; }
  .wa-grid-settings { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .wa-page { padding: 1rem; }
  .wa-page-header { flex-direction: column; align-items: flex-start; }
  .wa-grid-kpi { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .wa-grid-cards { grid-template-columns: 1fr; }
}

/* ---- Text Utilities ---- */
.wa-text-sm { font-size: 0.8125rem; }
.wa-text-xs { font-size: 0.75rem; }
.wa-text-xxs { font-size: 0.6875rem; }
.wa-text-muted { color: var(--wa-fg-muted); }
.wa-text-subtle { color: var(--wa-fg-subtle); }
.wa-text-danger { color: var(--wa-destructive); }
.wa-text-sm-muted { font-size: 0.8125rem; color: var(--wa-fg-muted); }
.wa-text-xs-muted { font-size: 0.75rem; color: var(--wa-fg-muted); }
.wa-text-xxs-muted { font-size: 0.6875rem; color: var(--wa-fg-muted); }
.wa-text-xxs-subtle { font-size: 0.6875rem; color: var(--wa-fg-subtle); }
.wa-text-center { text-align: center; }
.wa-text-mono { font-family: var(--wa-font-mono); font-size: 0.8125rem; }
.wa-font-medium { font-weight: 500; }
.wa-font-semibold { font-weight: 600; }

/* ---- Card sub-heading (bold name inside card, e.g. plan name, feature name) ---- */
.wa-card-heading {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--wa-fg);
  font-family: var(--wa-font-heading);
}

/* ---- Uppercase micro label (inside cards, tables) ---- */
.wa-micro-label {
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--wa-fg-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--wa-font-sans);
}

/* ---- Modal header row ---- */
.wa-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* ---- Common flex patterns ---- */
.wa-flex-gap-sm { display: flex; gap: 0.5rem; }
.wa-flex-gap-xs { display: flex; gap: 0.25rem; }
.wa-flex-col-gap { display: flex; flex-direction: column; gap: 1rem; }
.wa-flex-items { display: flex; align-items: center; gap: 0.5rem; }

/* ---- Overflow hidden (for card+table combos) ---- */
.wa-overflow-hidden { overflow: hidden; }

/* ---- Display none (for hidden elements toggled by JS) ---- */
.wa-hidden { display: none; }

/* ---- Relative positioning ---- */
.wa-relative { position: relative; }

/* ---- Width utilities ---- */
.wa-w-auto { width: auto; }
.wa-w-full { width: 100%; }
.wa-flex-1 { flex: 1; }

/* ---- Icon sizing ---- */
.wa-icon-sm { width: 1rem; height: 1rem; }
.wa-icon-md { width: 1.25rem; height: 1.25rem; }

/* ---- Card padding standard ---- */
.wa-card-pad { padding: 2rem; }

/* ---- More text utilities ---- */
.wa-text-xs-muted-nowrap { font-size: 0.75rem; color: var(--wa-fg-muted); white-space: nowrap; }
.wa-text-xs-subtle { font-size: 0.75rem; color: var(--wa-fg-subtle); }

/* ---- More flex utilities ---- */
.wa-flex-between { display: flex; justify-content: space-between; }

/* ---- SVG icon sizes ---- */
.wa-icon-close { border-radius: var(--wa-radius-full); width: 2rem; height: 2rem; font-size: 1.25rem; }

/* ---- Margin utilities ---- */
.wa-mb-0 { margin-bottom: 0; }

/* ---- Responsive show/hide ---- */
.wa-lg-show { display: none; }
.wa-lg-hide { display: block; }
@media (min-width: 1024px) {
  .wa-lg-show { display: flex !important; }
  .wa-lg-hide { display: none !important; }
}

/* ---- KPI bento grid responsive ---- */
@media (max-width: 1023px) {
  .wa-kpi-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 639px) {
  .wa-kpi-grid { grid-template-columns: 1fr !important; }
}

/* ---- Settings side nav ---- */
.wr-snav { padding:0.625rem 1rem;border-radius:var(--wa-radius-xl);color:var(--wa-fg-muted);font-size:0.875rem;font-weight:500;text-decoration:none;transition:all 120ms; }
.wr-snav:hover { background:var(--wa-muted);color:var(--wa-fg);text-decoration:none; }
.wr-snav.active { background:var(--wa-primary-muted);color:var(--wa-primary);font-weight:600; }
.wr-snav.wa-text-danger:hover { background:var(--wa-destructive-muted); }

/* ---- Plan limits table input ---- */
.wa-limit-input {
  width: 5rem;
  text-align: center;
  margin: 0 auto;
  display: block;
}