/*
 * Waleria Panel — App Shell Layout
 *
 * CSS Grid layout: header + sidebar + main content area.
 * Responsive: sidebar collapses on mobile, overlay mode on tablet.
 *
 * Structure:
 *   .app-shell
 *     .app-header
 *     .app-sidebar  (w-sidebar component goes here)
 *     .app-main     (router renders pages here)
 */

/* ── App Shell Grid ── */
.app-shell {
  display: grid;
  grid-template-rows: var(--header-height) 1fr auto;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-areas:
    "header  header"
    "sidebar main"
    "footer  footer";
  height: 100vh;
  min-width: 480px;
  overflow: hidden;
}

.app-shell[data-sidebar-collapsed] {
  grid-template-columns: var(--sidebar-collapsed) 1fr;
}

/* ── Header ── */
.app-header {
  grid-area: header;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  background: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
  z-index: var(--z-header);
  gap: var(--space-md);
}

.app-header__left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.app-header__logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--color-text);
}
.app-header__logo img {
  height: 28px;
  width: auto;
}
.app-header__logo-text {
  font-size: var(--font-size-lg);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.app-header__logo-sub {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #8b949e);
  letter-spacing: 0.03em;
}

.app-header__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.app-header__hamburger:hover {
  background: var(--color-bg-hover);
  color: var(--color-text);
}

.app-header__right {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.app-header__user-info {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: default;
}
.app-header__user-name {
  font-weight: 600;
  color: var(--color-text);
}
.app-header__user-role {
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--color-primary-subtle);
  color: var(--color-primary);
}

.app-header__logout-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.app-header__logout-btn:hover {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

/* ── Sidebar ── */
.app-sidebar {
  grid-area: sidebar;
  background: var(--color-bg-surface);
  border-right: 1px solid var(--color-border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: var(--z-sidebar);
  transition: width var(--transition-normal);
}

/* ── Main Content ── */
.app-main {
  grid-area: main;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
  padding: var(--space-lg);
  background: var(--color-bg);
}

.app-main__content {
  max-width: var(--content-max-width);
  margin: 0 auto;
  min-width: 0;
  width: 100%;
}

/* ── Login Layout (no sidebar/header) ── */
.login-layout {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--color-bg);
  padding: var(--space-lg);
}

/* ── Page Header ── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  gap: var(--space-md);
  flex-wrap: wrap;
}
.page-header__title {
  font-size: var(--font-size-2xl);
  font-weight: 700;
}
.page-header__actions {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
}

/* ── Cards ── */
.card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.card--elevated {
  box-shadow: var(--shadow-md);
}

/* ── Dashboard grid ── */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.stat-card {
  background: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.stat-card__value {
  font-size: var(--font-size-3xl);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
}
.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}
.stat-card__icon {
  width: 36px;
  height: 36px;
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-xs);
}
.stat-card__icon--users     { background: var(--color-accent-subtle); color: var(--color-accent); }
.stat-card__icon--domains   { background: var(--color-success-subtle); color: var(--color-success); }
.stat-card__icon--databases { background: var(--color-warning-subtle); color: var(--color-warning); }
.stat-card__icon--jobs      { background: var(--color-info-subtle); color: var(--color-info); }

/* ── Section ── */
.section {
  margin-bottom: var(--space-xl);
  min-width: 0;
}
.section__title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

/* ── Footer ── */
.app-footer {
  grid-area: footer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-lg);
  height: 36px;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  gap: var(--space-md);
  flex-wrap: nowrap;
  z-index: var(--z-header);
}
.app-footer__left {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}
.app-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--transition-fast);
}
.app-footer__brand:hover {
  color: var(--color-accent);
}
.app-footer__brand-logo {
  height: 16px;
  width: auto;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}
.app-footer__brand:hover .app-footer__brand-logo {
  transform: rotateY(360deg) scale(1.2);
  filter: drop-shadow(0 0 6px var(--color-accent));
}
.app-footer__right {
  display: flex;
  align-items: center;
}
.app-footer__version {
  font-family: var(--font-mono);
  font-size: var(--font-size-xs);
  color: var(--color-text-disabled);
}

/* ── Responsive: Tablet ── */
@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: var(--sidebar-collapsed) 1fr;
  }
}

/* ── Responsive: Mobile ── */
@media (max-width: 768px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "main"
      "footer";
  }

  .app-header__hamburger {
    display: flex;
  }

  .app-sidebar {
    position: fixed;
    top: var(--header-height);
    left: 0;
    bottom: 0;
    width: var(--sidebar-width);
    transform: translateX(-100%);
    transition: transform var(--transition-normal);
    box-shadow: var(--shadow-xl);
  }
  .app-sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    top: var(--header-height);
    background: var(--color-bg-overlay);
    z-index: calc(var(--z-sidebar) - 1);
  }
  .sidebar-overlay.is-visible {
    display: block;
  }

  .app-main {
    padding: var(--space-md);
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}