/**
 * _admin_base 레이아웃 전용 컴포넌트 클래스
 *
 * `templates/_bundled/sirsoft-admin_basic/layouts/_admin_base.json` 의
 * 1회 등장 컴포넌트(공통 선언)의 인라인 Tailwind 토큰을 id 와 동일한
 * 시맨틱 클래스로 캡슐화한다.
 *
 * 원칙:
 * - 컴포넌트 id 와 클래스명 1:1 매칭 (underscore_case)
 * - responsive variant 는 .{id}_portable 별도 클래스 (JSON responsive.portable 와 짝)
 * - 상태 토글(_global.sidebarOpen 등) 은 .{id}_open 변형 클래스
 *
 * 주의 (Tailwind v4 제약):
 * - @apply 는 Tailwind utility 만 참조 가능. 사용자 정의 클래스
 *   (.flex-between / .sidebar-scrollbar / .fas / .btn-icon) 는 @apply 불가
 * - 따라서 .flex-between 등이 필요한 경우 원자 토큰으로 풀어쓰며
 *   FontAwesome / sidebar-scrollbar 같은 외부 클래스는 JSON 의 className 에
 *   `{id} fa-* sidebar-scrollbar` 형태로 multi-class 병행
 */

@layer components {
  /* ========================================
   * 1. ROOT / OVERLAY
   * ======================================== */

  .admin_layout_root {
    @apply flex h-screen overflow-hidden bg-gray-50;
    @apply dark:bg-gray-900;
  }

  .mobile_overlay {
    @apply fixed inset-0 z-40;
    background-color: rgba(0, 0, 0, 0.5);
  }

  /* ========================================
   * 2. LEFT SIDEBAR AREA (with portable variant)
   * ======================================== */

  .left_sidebar_area {
    @apply relative inset-y-0 left-0 z-50 w-64 flex flex-col bg-white;
    @apply dark:bg-gray-800;
    transition: width 0.3s ease;
  }

  /*
   * 데스크톱 사이드바 접힘 변형 — 햄버거(menu_toggle_btn) 토글 시 _global.sidebarCollapsed
   * 가 true 가 되면 부여된다. 폭을 0 으로 줄이고 내용을 잘라 메인 영역(.right_content_area,
   * flex-1)이 자동으로 넓어지게 한다. 접힘 상태는 localStorage 로 영속되어 새로고침 후에도
   * 유지된다 (sidebarHandler.ts). 모바일은 별도 상태(.left_sidebar_area_portable)를 사용하므로
   * 본 변형은 데스크톱 전용이다.
   */
  .left_sidebar_area_collapsed {
    @apply w-0 overflow-hidden;
  }

  /*
   * 모바일 드로어. 모바일 헤더(.mobile_header_portable, h-16=4rem, relative)가 일반 흐름
   * 최상단에 있으므로, 드로어를 inset-y-0(top:0)로 두면 헤더 영역을 덮어 첫 메뉴 항목이
   * 잘려 보인다(#450). top 을 헤더 높이(4rem)만큼 내려 드로어가 헤더 아래에서 시작하게 한다.
   */
  .left_sidebar_area_portable {
    @apply fixed left-0 z-50 w-64 transition-transform duration-300 flex flex-col bg-white;
    @apply dark:bg-gray-800;
    top: 4rem;
    bottom: 0;
    transform: translateX(-100%);
  }

  .left_sidebar_area_portable_open {
    transform: translateX(0);
  }

  /* ========================================
   * 3. SIDEBAR HEADER (desktop) + LOGO
   * ======================================== */

  .sidebar_header {
    @apply flex items-center justify-between h-16 px-4;
  }

  .sidebar_logo {
    @apply flex items-center gap-2 min-w-0 flex-1 h-10;
  }

  .logo_image {
    @apply max-h-10 w-auto object-contain;
  }

  /* ========================================
   * 4. SIDEBAR MENU + EMPTY STATE
   *
   * sidebar-scrollbar 와 fas/fa-lock 은 JSON 의 className 에 함께 병행
   * (Tailwind v4 @apply 가 사용자 정의 클래스를 참조하지 못함)
   * ======================================== */

  .admin_sidebar_menu {
    @apply flex-1 overflow-y-auto pt-4;
    box-shadow: inset 3px 2px 2px var(--tw-shadow-color, #0000000a);
  }

  .admin_sidebar_menu_portable {
    @apply flex-1 overflow-y-auto pt-4;
  }

  .admin_sidebar_empty {
    @apply px-4 py-8 text-center text-sm text-gray-400;
    @apply dark:text-gray-500;
  }

  .admin_sidebar_empty_icon {
    @apply mb-2 text-lg text-gray-300;
    @apply dark:text-gray-600;
  }

  /* ========================================
   * 4-1. SIDEBAR FOOTER (사이트 보기 링크)
   *
   * 스크롤 메뉴(.admin_sidebar_menu) 밖의 형제로 사이드바 하단에 고정.
   * 관리자 → 유저 사이트 진입 링크. 데스크톱 접힘 시 아이콘만 표시.
   * ======================================== */

  .sidebar_footer {
    @apply flex-shrink-0 border-t border-gray-100 p-3;
    @apply dark:border-gray-700;
  }

  .sidebar_view_site_link {
    @apply flex items-center gap-2 h-9 px-3 rounded-lg no-underline;
    @apply text-sm font-medium text-slate-600 transition-colors;
    @apply hover:bg-slate-100 hover:text-slate-900;
    @apply dark:text-slate-300 dark:hover:bg-slate-700 dark:hover:text-white;
  }

  .sidebar_view_site_icon {
    @apply text-sm flex-shrink-0;
  }

  /*
   * 데스크톱 접힘 상태: 라벨을 숨기고 아이콘만 중앙 정렬.
   * (.left_sidebar_area_collapsed 는 w-0 overflow-hidden 이므로 접힘 시 자동으로
   *  footer 도 함께 잘리지만, 접힘 애니메이션 중 라벨 줄바꿈 방지를 위해 truncate 처리)
   */
  .sidebar_view_site_label {
    @apply truncate;
  }

  /* ========================================
   * 5. RIGHT CONTENT WRAPPER + AREA
   * ======================================== */

  .right_content_wrapper {
    @apply flex-1 flex flex-col min-w-0;
  }

  .right_content_area {
    @apply flex-1 overflow-x-auto overflow-y-auto min-h-0 min-w-0;
  }

  /* ========================================
   * 6. MAIN HEADER (desktop)
   * ======================================== */

  /*
   * 헤더 z-index 는 콘텐츠 영역의 .sticky-tab-nav (z-40) 보다 높아야 한다.
   * 헤더가 z-10 이면 자체 stacking context 가 sticky-tab-nav 아래로 깔려
   * 헤더 내부 UserProfile 드롭다운(z-50) 도 함께 가려짐 (#399 Phase 1.3 회귀).
   */
  .main_header {
    @apply h-16 flex items-center justify-between px-8 bg-white flex-shrink-0 relative z-50;
    @apply dark:bg-gray-800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .header_left {
    @apply flex-1 flex items-center;
  }

  .header_right {
    @apply flex items-center gap-2;
  }

  .menu_toggle_btn {
    @apply p-2 -ml-2 text-slate-500 rounded-lg transition-colors;
    @apply hover:text-slate-900 hover:bg-slate-100;
    @apply dark:text-slate-400;
    @apply dark:hover:text-white dark:hover:bg-slate-700;
  }

  .menu_toggle_btn_icon {
    @apply w-5 h-5;
  }

  /* ========================================
   * 7. USER AVATAR / INFO
   * ======================================== */

  .user_avatar_section {
    @apply relative flex items-center gap-3 cursor-pointer;
  }

  .user_avatar {
    @apply w-9 h-9 rounded-full overflow-hidden bg-gray-200;
    @apply flex items-center justify-center;
    @apply dark:bg-gray-600;
  }

  .user_avatar_img {
    @apply w-full h-full object-cover;
  }

  .user_info {
    @apply hidden md:block;
  }

  /* ========================================
   * 8. MOBILE HEADER (portable) + LOGO
   * ======================================== */

  .mobile_header_portable {
    @apply flex items-center justify-between h-16 px-4 bg-white relative z-50;
    @apply dark:bg-gray-800;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  }

  .mobile_header_left {
    @apply flex items-center gap-3;
  }

  .mobile_header_right {
    @apply flex items-center gap-2 flex-shrink-0;
  }

  .mobile_logo {
    @apply flex items-center gap-2 min-w-0 flex-1;
  }

  .mobile_logo_image {
    @apply h-8 w-auto max-w-full object-contain;
  }

  /* ========================================
   * 9. MAIN CONTENT SLOT + WARNINGS
   * ======================================== */

  .main_content {
    @apply min-h-fit;
  }

  .layout_warnings {
    @apply px-4 py-2;
  }
}