/*
 * app-layout.css — Bank ABC Portal API Sandbox
 * Shell layout: Top App Bar + Sidebar + Main Canvas
 * Sesi 9 V1.1 Refactor
 *
 * Depends on: tokens.css, base.css
 * RULE: Tidak ada hardcoded hex. Semua via var(--*).
 *
 * Sub-sections 1-22: Core shell layout
 * Sub-sections 23-30: Avatar dropdown
 * Responsive breakpoints: mobile-first (default, sm 640, lg 1024, xl 1440)
 */

/* ─── 1. .app-root ──────────────────────────────────────────── */
.app-root {
  display: flex;
  min-height: 100vh;
  background: var(--surface-canvas);
  position: relative;
}

/* ─── 2. .top-app-bar ───────────────────────────────────────── */
.top-app-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-bar-height);
  background: #1b3a5c;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  padding: 0 var(--space-6);
  gap: var(--space-4);
}

.top-app-bar__left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.top-app-bar__center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 480px;
}

.top-app-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
  margin-left: auto;
}

/* ─── 3. .top-app-bar__brand ────────────────────────────────── */
.top-app-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: var(--space-1);
  transition: opacity var(--transition-fast);
}

.top-app-bar__brand:hover {
  opacity: 0.8;
}

.top-app-bar__brand-logo {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: #1b3a5c;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
}

.top-app-bar__brand-name {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: #fff;
  white-space: nowrap;
}

/* ─── 4. .top-app-bar__env-badge ────────────────────────────── */
.top-app-bar__env-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--space-2);
  background: var(--brand-accent-subtle);
  color: var(--env-badge-text);
  border: 1px solid var(--brand-accent);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  white-space: nowrap;
}

.top-app-bar__env-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--brand-accent);
  flex-shrink: 0;
}

/* ─── 5. .top-app-bar__search ───────────────────────────────── */
.top-app-bar__search {
  flex: 0 1 480px;
  display: none; /* hidden on mobile, shown sm+ */
  align-items: center;
  width: 100%;
  max-width: 480px;
  height: 36px;
  padding: 0 var(--space-3);
  background: var(--surface-subtle);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-full);
  cursor: pointer;
  gap: var(--space-2);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.top-app-bar__search:hover {
  border-color: var(--text-tertiary);
  background: var(--surface-card);
}

.top-app-bar__search:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-subtle);
}

.top-app-bar__search-icon-inner {
  color: var(--text-tertiary);
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.top-app-bar__search-placeholder {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-app-bar__search-kbd {
  flex-shrink: 0;
}

/* ─── 6. .top-app-bar__actions ──────────────────────────────── */
.top-app-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
  flex-shrink: 0;
}

.top-app-bar__notification {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.top-app-bar__notification:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.top-app-bar__notification-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  background: var(--status-danger);
  color: var(--text-inverse);
  font-size: 9px;
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #1b3a5c;
}

/* ─── 7. .top-app-bar__hamburger ────────────────────────────── */
.top-app-bar__hamburger {
  display: inline-flex; /* visible on mobile */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.top-app-bar__hamburger:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Mobile-only search icon button (replaces full search on <640px) */
.top-app-bar__search-icon {
  display: inline-flex; /* visible on mobile */
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  color: rgba(255, 255, 255, 0.72);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  flex-shrink: 0;
}

.top-app-bar__search-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Lang toggle */
.lang-toggle {
  display: none; /* hidden on mobile, shown sm+ */
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 2px;
}

.lang-toggle__option {
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: rgba(255, 255, 255, 0.65);
  background: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  line-height: 1.4;
}

.lang-toggle__option:hover {
  color: #fff;
}

.lang-toggle__option--active {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-weight: var(--font-semibold);
  box-shadow: none;
}

/* ─── 8. .sidebar ───────────────────────────────────────────── */
.sidebar {
  position: fixed;
  left: 0;
  top: var(--top-bar-height);
  width: var(--sidebar-width);
  height: calc(100vh - var(--top-bar-height));
  background: var(--surface-card);
  border-right: 1px solid var(--surface-muted);
  z-index: var(--z-sticky);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 0;

  /* Mobile: start off-screen, slide in via transform */
  transform: translateX(-100%);
  transition: transform var(--transition-slow) ease-out;
}

.sidebar--open {
  transform: translateX(0);
}

/* ─── 9. .sidebar__section ──────────────────────────────────── */
.sidebar__section {
  margin-bottom: var(--space-2);
}

/* ─── 10. .sidebar__section-label ──────────────────────────── */
.sidebar__section-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-tertiary);
  padding: 0 var(--space-4) var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.075em;
  line-height: var(--leading-tight);
}

/* ─── 11. .sidebar__nav-list ────────────────────────────────── */
.sidebar__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ─── 12. .sidebar__nav-item ────────────────────────────────── */
.sidebar__nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  border-radius: 0;
  position: relative;
  min-height: 40px;
  transition: background var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}

.sidebar__nav-item:hover {
  background: var(--surface-subtle);
  color: var(--text-primary);
}

/* ─── 13. .sidebar__nav-item--active ────────────────────────── */
.sidebar__nav-item--active {
  background: var(--brand-primary-subtle);
  color: var(--brand-primary);
  font-weight: var(--font-semibold);
}

/* Active strip — left border 3px brand-primary */
.sidebar__nav-item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--brand-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ─── 14. .sidebar__nav-icon ────────────────────────────────── */
.sidebar__nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar__nav-tag {
  margin-left: auto;
  flex-shrink: 0;
}

/* ─── 15. .sidebar__footer ──────────────────────────────────── */
.sidebar__footer {
  margin-top: auto;
  padding: var(--space-4);
  border-top: 1px solid var(--surface-muted);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
}

.sidebar__version {
  font-variant-numeric: tabular-nums;
}

.sidebar__separator {
  user-select: none;
}

.sidebar__faq-link {
  color: var(--text-tertiary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.sidebar__faq-link:hover {
  color: var(--text-secondary);
  text-decoration: underline;
}

/* ─── 16. .sidebar-backdrop ─────────────────────────────────── */
.sidebar-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  z-index: calc(var(--z-sticky) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

.sidebar-backdrop--open {
  opacity: 1;
  pointer-events: auto;
}

/* ─── 17. .main-canvas ──────────────────────────────────────── */
.main-canvas {
  flex: 1;
  min-height: 100vh;
  padding-top: var(--top-bar-height);

  /* Mobile: no left margin (sidebar is drawer, off-screen) */
  margin-left: 0;
}

/* ─── 18. .main-canvas__inner ───────────────────────────────── */
.main-canvas__inner {
  max-width: var(--canvas-max-width);
  margin: 0 auto;
  padding: var(--canvas-pad-mobile);
  min-height: calc(100vh - var(--top-bar-height));
  display: flex;
  flex-direction: column;
}

/* ─── 19. .page-header (within main-canvas) ─────────────────── */
/* Defined in components.css — this rule extends it for app context */
.main-canvas .page-header {
  padding-top: var(--space-2);
}

/* ─── 20. .page-header__meta ────────────────────────────────── */
/* Breadcrumb → page-title → page-subtitle stacked */
.page-header__meta .breadcrumb {
  margin-bottom: var(--space-2);
}

/* ─── 21. .page-header__actions ─────────────────────────────── */
/* flex row, button group, right-aligned — defined in components.css */

/* ─── 22. .content-area ─────────────────────────────────────── */
.content-area {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  flex: 1;
}

/* Grid utility for card grids */
.grid-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

/* ─── 23. .avatar-dropdown ──────────────────────────────────── */
.avatar-dropdown {
  position: relative;
}

/* ─── 24. .avatar-button ────────────────────────────────────── */
.avatar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: 2px;
  transition: background var(--transition-fast);
  flex-shrink: 0;
}

.avatar-button:hover {
  background: rgba(255, 255, 255, 0.1);
}

.avatar-button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ─── 25. .avatar-menu ──────────────────────────────────────── */
.avatar-menu {
  position: absolute;
  top: calc(100% + var(--space-2));
  right: 0;
  width: 240px;
  background: var(--surface-card);
  border: 1px solid var(--surface-muted);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2);
  z-index: var(--z-overlay);

  /* Entrance animation */
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

.avatar-menu--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

/* ─── 26. .avatar-menu__header ──────────────────────────────── */
.avatar-menu__header {
  padding: var(--space-3) var(--space-3) var(--space-2);
  border-bottom: 1px solid var(--surface-muted);
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-2);
}

.avatar-menu__name {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  line-height: var(--leading-snug);
}

.avatar-menu__email {
  font-size: var(--text-xs);
  color: var(--text-secondary);
  line-height: var(--leading-normal);
}

/* ─── 27. .avatar-menu__item ────────────────────────────────── */
.avatar-menu__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  text-decoration: none;
  min-height: 36px;
  transition: background var(--transition-fast), color var(--transition-fast);
  background: none;
  border: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}

.avatar-menu__item:hover {
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.avatar-menu__item svg,
.avatar-menu__item-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: inherit;
}

/* ─── 28. .avatar-menu__divider ─────────────────────────────── */
.avatar-menu__divider {
  border-top: 1px solid var(--surface-muted);
  margin: var(--space-1) 0;
}

/* ─── 29. .avatar-menu__item--danger ────────────────────────── */
.avatar-menu__item--danger {
  color: var(--status-danger);
}

.avatar-menu__item--danger:hover {
  background: var(--status-danger-bg);
  color: var(--status-danger);
}

/* ─── 30. .avatar-menu__item--mobile-only ───────────────────── */
/* Mobile-only items (notif, lang) — visible only on small screens */
.avatar-menu__item--mobile-only {
  display: none; /* hidden on desktop */
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS — MOBILE-FIRST
   ═══════════════════════════════════════════════════════════════ */

/*
 * Default = mobile (<640px)
 * Sidebar = drawer (off-screen, transforms in on .sidebar--open)
 * Canvas = full-width, mobile padding
 * Search = icon-only
 * Hamburger = visible
 * Lang toggle = hidden (inside avatar dropdown on mobile)
 */

/* sm: 640px — search bar visible, lang toggle visible */
@media (min-width: 640px) {
  .main-canvas__inner {
    padding: var(--space-6);
  }

  /* Show full search bar, hide icon-only variant */
  .top-app-bar__search {
    display: flex;
    max-width: 320px;
  }

  .top-app-bar__search-icon {
    display: none;
  }

  /* Show language toggle */
  .lang-toggle {
    display: flex;
  }

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

/* lg: 1024px — sidebar permanent, hamburger hidden, backdrop hidden */
@media (min-width: 1024px) {
  /* Sidebar: permanent (no more transform needed) */
  .sidebar {
    transform: translateX(0);
    position: fixed;
  }

  /* Backdrop: not needed on desktop */
  .sidebar-backdrop {
    display: none;
  }

  /* Hamburger: hidden on desktop */
  .top-app-bar__hamburger {
    display: none;
  }

  /* Canvas: push right to accommodate permanent sidebar */
  .main-canvas {
    margin-left: var(--sidebar-width);
  }

  /* Desktop padding */
  .main-canvas__inner {
    padding: var(--canvas-pad-desktop);
  }

  /* Search wider on desktop */
  .top-app-bar__search {
    max-width: 480px;
  }

  /* Mobile-only items: hidden in avatar menu on desktop */
  .avatar-menu__item--mobile-only {
    display: none;
  }

  /* Card grid: 3-col on large */
  .grid-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* max 639px — mobile-only items shown in avatar dropdown */
@media (max-width: 639px) {
  .avatar-menu__item--mobile-only {
    display: flex;
  }

  /* Top bar: center brand, search icon right of hamburger */
  .top-app-bar {
    padding: 0 var(--space-4);
  }

  /* Notification hidden standalone on mobile (inside avatar menu) */
  .top-app-bar__notification {
    display: none;
  }

  .top-app-bar__brand-name {
    display: none; /* show logo only on very small screens */
  }
}

/* xl: 1440px — canvas already at max-width, no change needed */
@media (min-width: 1440px) {
  .main-canvas__inner {
    padding: var(--canvas-pad-desktop);
  }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY ENHANCEMENTS FOR SHELL
   ═══════════════════════════════════════════════════════════════ */

/* Ensure all icon-only buttons in top bar have visible focus ring */
.top-app-bar button:focus-visible,
.top-app-bar a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* Sidebar nav focus ring */
.sidebar__nav-item:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
  z-index: 1;
}

/* Prevent content reflow during sidebar animation */
.sidebar * {
  backface-visibility: hidden;
}

/* ─── APP PAGE HERO — shared blue gradient header (all app pages) ─── */
/*
 * !important is intentional: page-specific CSS loads after this file
 * (higher cascade order) so the gradient/border overrides need it.
 * Layout (display, gap, flex-wrap) is NOT forced — each page's
 * header class handles its own flex direction.
 */
.app-page-hero {
  background: linear-gradient(145deg, #eef4fb 0%, #dde8f5 100%) !important;
  border-bottom: 1px solid rgba(27, 58, 92, 0.10) !important;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
  /* Bleed edge-to-edge by reversing the parent canvas padding */
  margin-top:    calc(-1 * var(--canvas-pad-mobile)) !important;
  margin-left:   calc(-1 * var(--canvas-pad-mobile)) !important;
  margin-right:  calc(-1 * var(--canvas-pad-mobile)) !important;
  margin-bottom: var(--space-6) !important;
  padding-top:    var(--space-7) !important;
  padding-left:   var(--canvas-pad-mobile) !important;
  padding-right:  var(--canvas-pad-mobile) !important;
  padding-bottom: var(--space-6) !important;
}

@media (min-width: 640px) {
  .app-page-hero {
    margin-top:   calc(-1 * var(--space-6)) !important;
    margin-left:  calc(-1 * var(--space-6)) !important;
    margin-right: calc(-1 * var(--space-6)) !important;
    padding-left:  var(--space-6) !important;
    padding-right: var(--space-6) !important;
    padding-top:   var(--space-8) !important;
  }
}

@media (min-width: 1024px) {
  .app-page-hero {
    margin-top:   calc(-1 * var(--canvas-pad-desktop)) !important;
    margin-left:  calc(-1 * var(--canvas-pad-desktop)) !important;
    margin-right: calc(-1 * var(--canvas-pad-desktop)) !important;
    padding-left:  var(--canvas-pad-desktop) !important;
    padding-right: var(--canvas-pad-desktop) !important;
  }
}

/* Text: eyebrow / title / subtitle — covers all page-specific naming */
.app-page-hero [class*="eyebrow"] {
  color: rgba(27, 58, 92, 0.55) !important;
}
.app-page-hero h1,
.app-page-hero [class*="__title"] {
  color: #1b3a5c !important;
}
.app-page-hero [class*="subtitle"] {
  color: rgba(27, 58, 92, 0.72) !important;
}
/* SVGs inside header */
.app-page-hero h1 svg,
.app-page-hero [class*="__title"] svg {
  color: #003D79 !important;
}
/* Links inside subtitle */
.app-page-hero a {
  color: #003D79 !important;
  text-decoration-color: rgba(0, 61, 121, 0.35);
}
/* Chips / hint / sla — tinted on light bg */
.app-page-hero [class*="hint"],
.app-page-hero [class*="__sla"],
.app-page-hero [class*="onboarding-hint"] {
  background: rgba(27, 58, 92, 0.08) !important;
  color: rgba(27, 58, 92, 0.80) !important;
  border-color: rgba(27, 58, 92, 0.18) !important;
}
/* Dashboard status pill — tinted variant on light bg */
.app-page-hero .dash-status-pill {
  background: rgba(27, 58, 92, 0.08) !important;
  border-color: rgba(27, 58, 92, 0.18) !important;
  color: rgba(27, 58, 92, 0.85) !important;
}
.app-page-hero .dash-status-pill:hover {
  background: rgba(27, 58, 92, 0.13) !important;
}
.app-page-hero .status-dot--ok {
  background: #16a34a !important;
  box-shadow: 0 0 0 2px rgba(22, 163, 74, 0.25) !important;
}