/* ===== AMOM Layout ===== */

/* App Shell */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  grid-template-rows: var(--header-height) 1fr;
  min-height: 100vh;
  transition: grid-template-columns var(--transition-base);
}
.app-shell.sidebar-collapsed {
  grid-template-columns: var(--sidebar-collapsed-width) 1fr;
}

/* ── Sidebar ── */
.sidebar {
  grid-row: 1 / -1;
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: var(--z-sidebar);
  transition: width var(--transition-base);
  width: var(--sidebar-width);
}
.sidebar-collapsed .sidebar { width: var(--sidebar-collapsed-width); }

.sidebar-brand {
  height: var(--header-height);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--color-border);
  gap: var(--sp-3);
  flex-shrink: 0;
}
.sidebar-logo {
  width: 36px; height: 36px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-glow-primary);
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  color: #fff;
  letter-spacing: -1px;
}
.sidebar-title {
  font-size: var(--text-lg);
  font-weight: var(--font-bold);
  background: var(--gradient-primary);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-base), width var(--transition-base);
}
.sidebar-subtitle {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
  white-space: nowrap;
  display: block;
  margin-top: -2px;
}
.sidebar-collapsed .sidebar-title,
.sidebar-collapsed .sidebar-subtitle { opacity: 0; width: 0; }

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--sp-4) 0;
}
.sidebar-nav::-webkit-scrollbar { width: 3px; }

.nav-section {
  margin-bottom: var(--sp-2);
}
.nav-section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--color-text-subtle);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: var(--sp-3) var(--sp-5) var(--sp-1);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity var(--transition-base);
}
.sidebar-collapsed .nav-section-label { opacity: 0; }

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5);
  margin: 1px var(--sp-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  white-space: nowrap;
  user-select: none;
}
.nav-item:hover {
  background: rgba(56, 189, 248, 0.08);
  color: var(--color-primary);
}
.nav-item.active {
  background: linear-gradient(135deg, rgba(14,165,233,0.2), rgba(20,184,166,0.15));
  color: var(--color-primary);
  box-shadow: inset 2px 0 0 var(--color-primary), 0 2px 8px rgba(14,165,233,0.15);
}
.nav-item.active .nav-icon { color: var(--color-primary); }
.nav-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  color: var(--color-text-subtle);
  transition: color var(--transition-fast);
  display: flex; align-items: center; justify-content: center;
}
.nav-item:hover .nav-icon { color: var(--color-primary); }
.nav-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  transition: opacity var(--transition-base);
  overflow: hidden;
}
.sidebar-collapsed .nav-label { opacity: 0; width: 0; }
.nav-badge {
  margin-left: auto;
  background: var(--color-danger);
  color: white;
  font-size: 10px;
  font-weight: var(--font-bold);
  padding: 1px 6px;
  border-radius: var(--radius-full);
  transition: opacity var(--transition-base);
}
.sidebar-collapsed .nav-badge { opacity: 0; }

.sidebar-footer {
  padding: var(--sp-4) var(--sp-3);
  border-top: 1px solid var(--color-border);
  flex-shrink: 0;
}
.user-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background var(--transition-fast);
  overflow: hidden;
}
.user-card:hover { background: var(--color-surface); }
.user-avatar {
  width: 36px; height: 36px;
  border-radius: var(--radius-full);
  background: var(--gradient-secondary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  color: white;
  flex-shrink: 0;
}
.user-info { overflow: hidden; flex: 1; }
.user-name  { font-size: var(--text-sm); font-weight: var(--font-semibold); white-space: nowrap; }
.user-role  { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; }
.sidebar-collapsed .user-info { opacity: 0; width: 0; }

/* ── Header ── */
.main-header {
  grid-column: 2;
  height: var(--header-height);
  background: var(--header-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  gap: var(--sp-4);
  position: sticky;
  top: 0;
  z-index: var(--z-header);
}

.header-toggle-btn {
  width: 36px; height: 36px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.header-toggle-btn:hover { background: var(--color-surface); color: var(--color-text); }

.header-breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
  min-width: 0;
}
.breadcrumb-sep { color: var(--color-text-subtle); }
.breadcrumb-current { color: var(--color-text); font-weight: var(--font-medium); }

.header-actions {
  display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0;
}

.header-btn {
  width: 38px; height: 38px;
  border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  position: relative;
  transition: all var(--transition-fast);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.header-btn:hover { color: var(--color-text); border-color: var(--color-border2); background: var(--color-surface2); }
.notif-dot {
  position: absolute; top: 6px; right: 6px;
  width: 8px; height: 8px;
  background: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-bg);
  animation: pulse 2s infinite;
}

/* ── Main Content ── */
.main-content {
  grid-column: 2;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--color-bg);
  min-height: calc(100vh - var(--header-height));
}

.page {
  padding: var(--sp-6);
  max-width: var(--content-max-width);
  margin: 0 auto;
  animation: pageIn 0.3s ease;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
  gap: var(--sp-4);
}
.page-title { font-size: var(--text-2xl); font-weight: var(--font-bold); }
.page-subtitle { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 2px; }
.page-actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }

/* ── Login Layout ── */
.login-wrapper {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
@media (max-width: 900px) {
  .login-wrapper { grid-template-columns: 1fr; }
  .login-banner  { display: none; }
}

.login-banner {
  background: var(--sidebar-bg);
  color: var(--color-text);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-12);
  position: relative;
  overflow: hidden;
}
.login-banner::before {
  content: '';
  position: absolute;
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(14,165,233,0.15) 0%, transparent 70%);
  top: -100px; left: -100px;
}
.login-banner::after {
  content: '';
  position: absolute;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(20,184,166,0.12) 0%, transparent 70%);
  bottom: -100px; right: -50px;
}
.banner-content { position: relative; z-index: 1; text-align: center; max-width: 400px; }
.banner-logo {
  width: 80px; height: 80px;
  background: var(--gradient-primary);
  border-radius: var(--radius-2xl);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: white;
  margin: 0 auto var(--sp-6);
  box-shadow: var(--shadow-glow-primary);
}
.banner-title { font-size: var(--text-4xl); font-weight: var(--font-bold); margin-bottom: var(--sp-2); }
.banner-title span { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.banner-tagline { font-size: var(--text-lg); color: var(--color-text-muted); margin-bottom: var(--sp-8); }
.banner-features { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.banner-feature { display: flex; align-items: center; gap: var(--sp-3); }
.feature-icon { width: 32px; height: 32px; border-radius: var(--radius-md); background: rgba(56,189,248,0.12); display: flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; }

.login-form-side {
  display: flex; align-items: center; justify-content: center;
  background: var(--color-bg-alt);
  padding: var(--sp-8);
}
.login-card { width: 100%; max-width: 400px; }
.login-header { margin-bottom: var(--sp-8); }
.login-greeting { font-size: var(--text-3xl); font-weight: var(--font-bold); margin-bottom: var(--sp-1); }
.login-desc { color: var(--color-text-muted); font-size: var(--text-sm); }

/* Responsive */
@media (max-width: 1200px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page { padding: var(--sp-4); }
  .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: 0 1fr; }
  .sidebar { position: fixed; left: 0; width: var(--sidebar-width); transform: translateX(-100%); }
  .sidebar.mobile-open { transform: translateX(0); }
  .main-header { grid-column: 1; }
  .main-content { grid-column: 1; }
  .page-header { flex-direction: column; align-items: flex-start; }
}