/* ========================================
   ADMIN ACCOUNT SHOW - Single-Page Class Vocabulary
   Long-scroll redesign replacing the old tab-panel layout.
   All information that used to live behind tabs (Overview,
   Resources, Billing, Team) now renders as stacked sections on
   one page, jumped to via a sticky section rail.

   Class vocabulary (flat, unscoped -- mirrors the avm-* prefix
   convention established in admin_vm_show.css):

     Layout
       .aas-layout                 root two-column grid: rail + content
       .aas-content                right column, stacked section cards
       .aas-rail                   sticky section nav (left on desktop,
                                    top pill strip on mobile)
       .aas-rail-nav
       .aas-rail-link              jump link; .is-active = current section
       .aas-rail-link-count        trailing count badge

     Hero header
       .aas-hero                   gradient header; .is-suspended state
       .aas-hero-content
       .aas-hero-icon
       .aas-hero-text
       .aas-hero-title
       .aas-hero-subtitle
       .aas-hero-actions

     Section cards
       .aas-section                 anchor target; sets scroll-margin-top
                                     so #id jumps clear the sticky rail/navbar
       .aas-section-card            card chrome (surface, border, shadow)
       .aas-section-header
       .aas-section-heading / .aas-section-heading .icon
       .aas-section-count
       .aas-section-actions
       .aas-section-body            .is-flush removes body padding
                                     (edge-to-edge tables)
       .aas-section-grid            side-by-side sub-cards within a section
                                     (e.g. VMs + IP Blocks)

     Data grid (key/value fields, e.g. Account Details, Pricing)
       .aas-data-grid / .aas-data-item / .aas-data-label / .aas-data-value

     Tables
       .aas-table                   density modifier, combine with .table
       .aas-table tr.is-unpaid      unpaid-invoice row emphasis (Invoices section)

     Small components carried over from the tab-era page
       .tag-ghost / .tag-alert      bespoke hero tags
       .member-avatar(--owner|--admin)
       .status-dot(--success|--warning|--danger|--info)
       .empty-state-panel
       .table tbody tr.is-clickable
       .invoice-summary-cell        already defined globally in invoices.css;
                                     reused here, not redeclared
   ======================================== */

/* ----------------------------------------
   LAYOUT - sticky rail + content column
   ---------------------------------------- */
.aas-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--arp-space-8);
  align-items: start;
}

.aas-content {
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-6);
  min-width: 0;
}

.aas-rail {
  position: sticky;
  top: calc(var(--navbar-height) + var(--arp-space-6));
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-1);
  padding: var(--arp-space-3);
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-lg);
  box-shadow: var(--arp-shadow-sm);
}

.aas-rail-nav {
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-1);
}

.aas-rail-link {
  display: flex;
  align-items: center;
  gap: var(--arp-space-2);
  padding: var(--arp-space-2) var(--arp-space-3);
  border-radius: var(--arp-radius-sm);
  color: var(--arp-text-secondary);
  font-size: var(--bulma-size-normal);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.aas-rail-link:hover {
  background: var(--arp-surface-muted);
  color: var(--arp-text-primary);
}

.aas-rail-link.is-active {
  background: var(--arp-accent-bg);
  color: var(--arp-accent);
  font-weight: 600;
}

.aas-rail-link .icon {
  color: inherit;
  flex-shrink: 0;
}

.aas-rail-link-count {
  margin-left: auto;
  font-size: var(--bulma-size-normal);
  color: var(--arp-text-muted);
}

.aas-rail-link.is-active .aas-rail-link-count {
  color: var(--arp-accent);
}

/* ----------------------------------------
   HERO HEADER - Indigo/Purple gradient (royal feel)
   ---------------------------------------- */
.aas-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--arp-space-6);
  padding: var(--arp-space-5) var(--arp-space-6);
  background: linear-gradient(135deg, #7c3aed 0%, #5b21b6 100%);
  border-radius: var(--arp-radius-md);
  margin-bottom: var(--arp-space-6);
  box-shadow: var(--arp-shadow-md);
}

[data-theme="dark"] .aas-hero {
  background: linear-gradient(135deg, #3d3260 0%, #2a2248 100%);
  box-shadow: var(--arp-shadow-xl);
  border: 1px solid rgba(139, 92, 246, 0.25);
}

.aas-hero.is-suspended {
  background: linear-gradient(135deg, #991b1b 0%, #7f1d1d 100%);
}

[data-theme="dark"] .aas-hero.is-suspended {
  background: linear-gradient(135deg, #5c1a1a 0%, #3b1111 100%);
  border-color: rgba(239, 68, 68, 0.25);
}

.aas-hero-content {
  display: flex;
  align-items: center;
  gap: var(--arp-space-5);
  flex-wrap: wrap;
}

.aas-hero-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bulma-size-large);
  color: white;
  flex-shrink: 0;
}

.aas-hero-title {
  color: white;
  font-size: var(--bulma-size-large);
  font-weight: 600;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--arp-space-2);
}

.aas-hero-subtitle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--arp-space-2);
  margin-top: var(--arp-space-1);
}

.aas-hero .tag-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: white;
}

.aas-hero .tag-alert {
  background: #b04068;
  border: 1px solid #c76088;
  color: white;
}

.aas-hero .button.is-static {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="dark"] .aas-hero .button.is-static {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.15);
}

.aas-hero-actions {
  display: flex;
  align-items: center;
  gap: var(--arp-space-4);
  flex-wrap: wrap;
}

.aas-hero-actions .buttons {
  margin-bottom: 0;
  flex-wrap: wrap;
}

.aas-hero-actions .buttons .button {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  color: white;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.aas-hero-actions .buttons .button:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.5);
}

/* ----------------------------------------
   SECTION CARDS
   ---------------------------------------- */
.aas-section {
  scroll-margin-top: calc(var(--navbar-height) + var(--arp-space-4));
}

@media screen and (max-width: 1023px) {
  .aas-section {
    scroll-margin-top: calc(var(--navbar-height) + var(--arp-space-12));
  }
}

.aas-section-card {
  background: var(--arp-surface-raised);
  border: 1px solid var(--arp-border);
  border-radius: var(--arp-radius-lg);
  box-shadow: var(--arp-shadow-sm);
  overflow: hidden;
}

.aas-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arp-space-4);
  padding: var(--arp-space-4) var(--arp-space-6);
  border-bottom: 1px solid var(--arp-border-subtle);
  flex-wrap: wrap;
}

.aas-section-heading {
  display: flex;
  align-items: center;
  gap: var(--arp-space-2);
  font-size: var(--bulma-size-medium);
  font-weight: 600;
  color: var(--arp-text-primary);
  margin: 0;
}

.aas-section-heading .icon {
  color: var(--arp-accent);
}

.aas-section-count {
  font-size: var(--bulma-size-normal);
}

.aas-section-actions {
  display: flex;
  align-items: center;
  gap: var(--arp-space-2);
  flex-wrap: wrap;
}

.aas-section-body {
  padding: var(--arp-space-6);
}

.aas-section-body.is-flush {
  padding: 0;
}

.aas-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--arp-space-6);
  align-items: start;
}

.aas-section-grid > .aas-section-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.aas-section-grid > .aas-section-card > .aas-section-body {
  flex: 1;
}

/* ----------------------------------------
   DATA GRID - key/value field display
   ---------------------------------------- */
.aas-data-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--arp-space-5) var(--arp-space-6);
}

.aas-data-item {
  display: flex;
  flex-direction: column;
  gap: var(--arp-space-1);
}

.aas-data-label {
  font-size: var(--bulma-size-small);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--arp-text-disabled);
}

[data-theme="dark"] .aas-data-label {
  color: var(--arp-text-muted);
}

.aas-data-value {
  font-size: var(--bulma-size-normal);
  color: var(--arp-text-primary);
}

/* ----------------------------------------
   TABLE DENSITY - compact rows for a data-heavy long page
   ---------------------------------------- */
.aas-table.table td,
.aas-table.table th {
  padding: var(--arp-space-2) var(--arp-space-4);
  font-size: var(--bulma-size-normal);
  vertical-align: middle;
}

.aas-table.table thead th {
  font-weight: 600;
  color: var(--arp-text-muted);
  border-bottom: 2px solid var(--arp-border-strong);
}

.table tbody tr.is-clickable {
  cursor: pointer;
}

.aas-table tr.is-unpaid {
  background: var(--arp-status-warning-bg);
}

.aas-table tr.is-unpaid:hover {
  background: var(--arp-status-warning-bg);
}

.aas-table tr.is-unpaid td:first-child {
  box-shadow: inset 3px 0 var(--arp-status-warning-border);
}

/* ----------------------------------------
   MEMBER AVATARS
   ---------------------------------------- */
.member-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bulma-size-normal);
  font-weight: 700;
  color: white;
  background: linear-gradient(135deg, var(--arp-blue-500) 0%, #1d4ed8 100%);
  flex-shrink: 0;
}

.member-avatar--owner {
  background: linear-gradient(135deg, var(--arp-amber-500) 0%, var(--arp-amber-600) 100%);
}

.member-avatar--admin {
  background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* ----------------------------------------
   STATUS DOTS
   ---------------------------------------- */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: var(--arp-space-2);
}

.status-dot--success { background: var(--arp-green-500); box-shadow: 0 0 6px #10b98180; }
.status-dot--warning { background: var(--arp-amber-500); box-shadow: 0 0 6px #f59e0b80; }
.status-dot--danger { background: var(--arp-red-500); box-shadow: 0 0 6px #ef444480; }
.status-dot--info { background: var(--arp-blue-500); box-shadow: 0 0 6px #3b82f680; }

/* ----------------------------------------
   EMPTY STATE - Uses Bulma's standard title/subtitle classes
   ---------------------------------------- */
.empty-state-panel {
  text-align: center;
  padding: var(--arp-space-8) var(--arp-space-6);
  background: var(--bulma-scheme-main-bis);
  border-radius: var(--arp-radius-sm);
}

.empty-state-panel .icon {
  color: var(--bulma-text-weak);
  margin-bottom: var(--arp-space-4);
  opacity: 0.5;
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */
@media screen and (max-width: 1023px) {
  .aas-layout {
    grid-template-columns: 1fr;
  }

  .aas-rail {
    position: sticky;
    top: var(--navbar-height);
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    z-index: 30;
  }

  .aas-rail::-webkit-scrollbar {
    display: none;
  }

  .aas-rail-nav {
    flex-direction: row;
  }

  .aas-rail-link {
    flex-shrink: 0;
  }

  .aas-rail-link-count {
    margin-left: var(--arp-space-1);
  }
}

@media screen and (max-width: 768px) {
  .aas-hero {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--arp-space-4);
  }

  .aas-hero-actions {
    flex-wrap: wrap;
    width: 100%;
  }

  .aas-hero-actions .buttons {
    flex-wrap: wrap;
    flex-shrink: 1;
    justify-content: flex-start;
  }
}