/* =========================================================================
   공통 프레임 셸 (다우형)
   - 상단바 / 좌측 아이콘 레일(대메뉴) / 2차 메뉴바(중·하메뉴) / 상세 프레임 / 하단바
   - 전체는 뷰포트에 고정되어 스크롤되지 않고, 오직 상세 프레임(.app-detail)만 스크롤한다.
   - body.app-shell-on 이 붙은 경우에만 적용된다(JS가 셸 구성에 성공했을 때).
   - 데스크톱(>=768px) 전용. 모바일에서는 기존 AdminLTE 레이아웃을 유지한다.
   ========================================================================= */

:root {
  --app-rail-w: 88px;
  --app-submenu-w: 224px;
  --app-bottombar-h: 42px;
  --app-shell-nav: #214789;
  --app-shell-nav-2: #1b3c72;
  --app-rail-active: #2f5aa8;
  --app-submenu-bg: #f4f6fa;
  --app-submenu-border: #e2e8f0;
  --app-accent: #214789;
  --app-accent-soft: #d9e4f5;
  --app-rail-mark: #ffd54a;
  --app-surface: #ffffff;
  --app-surface-muted: #f4f6f9;
  --app-border: #e2e8f0;
  --app-row-hover: #eef3fa;
  --app-text: #1f2d3d;
  --app-text-muted: #6c7a90;
}

@media screen and (min-width: 768px) {
  body.app-shell-on {
    overflow: hidden;
  }
  body.app-shell-on .wrapper {
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  body.app-shell-on.role-debug-active .wrapper {
    height: calc(100vh - 38px);
    padding-bottom: 0;
  }

  body.app-shell-on .main-sidebar {
    display: none !important;
  }
  body.app-shell-on .main-header,
  body.app-shell-on .content-wrapper,
  body.app-shell-on .main-footer {
    margin-left: 0 !important;
  }

  /* 상단바 — 레일 네이비와 톤을 맞춤 */
  body.app-shell-on .main-header.navbar {
    flex: 0 0 auto;
    z-index: 5;
    background: #e8eef6 !important;
    border-bottom: 1px solid #d0dae8 !important;
    box-shadow: none !important;
  }
  body.app-shell-on .main-header .nav-link {
    color: var(--app-text) !important;
  }
  body.app-shell-on .main-header .nav-link:hover {
    color: var(--app-accent) !important;
  }
  body.app-shell-on .main-header .form-control-navbar {
    background: #fff;
    border-color: #c5d0e0;
  }
  body.app-shell-on .main-header .btn-navbar {
    background: #fff;
    border-color: #c5d0e0;
    color: var(--app-text-muted);
  }

  body.app-shell-on .app-main {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
  }

  .app-rail {
    flex: 0 0 var(--app-rail-w);
    width: var(--app-rail-w);
    background: var(--app-shell-nav);
    color: #fff;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 0;
    scrollbar-width: thin;
  }
  .app-rail::-webkit-scrollbar { width: 6px; }
  .app-rail::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 3px; }

  .app-rail-btn {
    appearance: none;
    background: transparent;
    border: 0;
    color: rgba(255,255,255,.82);
    width: 100%;
    padding: 10px 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    border-left: 3px solid transparent;
    transition: background .12s ease, color .12s ease;
    position: relative;
  }
  .app-rail-btn > i {
    font-size: 18px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .app-rail-btn > .app-rail-label {
    display: block;
    max-width: 100%;
    word-break: keep-all;
  }
  .app-rail-btn:hover {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  .app-rail-btn.active {
    background: var(--app-rail-active);
    color: #fff;
    border-left-color: var(--app-rail-mark);
  }
  .app-rail-btn .app-rail-badge {
    position: absolute;
    top: 6px;
    right: 14px;
    background: #dc3545;
    color: #fff;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1;
    padding: 2px 5px;
    font-weight: 700;
  }

  .app-submenu {
    flex: 0 0 var(--app-submenu-w);
    width: var(--app-submenu-w);
    background: var(--app-submenu-bg);
    border-right: 1px solid var(--app-submenu-border);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .app-submenu.is-empty {
    display: none;
  }
  .app-submenu-title {
    flex: 0 0 auto;
    padding: 14px 16px 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--app-text);
    border-bottom: 1px solid var(--app-submenu-border);
  }
  .app-submenu-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 6px 6px 16px;
  }
  .app-submenu .nav-treeview {
    display: block !important;
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .app-submenu .nav {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }
  .app-submenu .nav-item { width: 100%; }
  .app-submenu .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 6px;
    color: #2b3a4b;
    font-size: 13.5px;
    font-weight: 600;
    white-space: normal;
    word-break: keep-all;
    border-left: 3px solid transparent;
  }
  .app-submenu .nav-link > p {
    margin: 0;
    line-height: 1.3;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
  }
  .app-submenu .nav-link .nav-icon {
    width: 18px;
    text-align: center;
    font-size: 13px;
    color: var(--app-text-muted);
    line-height: 1.3;
    align-self: center;
  }
  .app-submenu .nav-link .badge.right { margin-left: auto; }
  .app-submenu .nav-link:hover { background: #e6ecf5; color: #16233a; }
  .app-submenu .nav-link.nav-current,
  .app-submenu .nav-link.active {
    background: var(--app-accent-soft);
    color: #17408b;
    font-weight: 800;
    border-left-color: var(--app-rail-mark);
  }
  .app-submenu .nav-item > .nav-link[href="#"] {
    color: #8a97a8;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: none;
    cursor: default;
    padding: 10px 12px 4px;
    margin-top: 6px;
    border-left-color: transparent;
  }
  .app-submenu .nav-item > .nav-link[href="#"]:hover { background: transparent; }
  .app-submenu .nav-chevron { display: none !important; }
  .app-submenu .nav-treeview .nav-treeview { padding-left: 10px; }

  body.app-shell-on .app-detail {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    overflow-y: scroll; /* auto면 스크롤바 출렁이며 가로폭이 흔들림 */
    overflow-x: hidden;
    scrollbar-gutter: stable;
    background: var(--app-surface-muted);
    position: relative;
  }
  /* PJAX 로딩 — 상단 2px progress bar (레이아웃 높이 불변) */
  body.app-shell-on .app-detail.app-detail-loading {
    pointer-events: none;
    cursor: wait;
  }
  body.app-shell-on .app-detail.app-detail-loading::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: block;
    height: 2px;
    z-index: 40;
    pointer-events: none;
    background: linear-gradient(
      90deg,
      transparent 0%,
      var(--app-accent) 35%,
      var(--app-rail-mark) 50%,
      var(--app-accent) 65%,
      transparent 100%
    );
    background-size: 220% 100%;
    animation: app-detail-progress 0.9s linear infinite;
  }
  @keyframes app-detail-progress {
    0% { background-position: 100% 0; }
    100% { background-position: -100% 0; }
  }

  body.app-shell-on .app-detail .content-wrapper {
    min-height: 0;
    height: auto;
  }

  /* 하단바 — 페이징 없어도 높이 고정 */
  body.app-shell-on .app-bottombar {
    flex: 0 0 var(--app-bottombar-h);
    min-height: var(--app-bottombar-h);
    height: var(--app-bottombar-h);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 16px;
    background: var(--app-surface);
    border-top: 1px solid var(--app-border);
    box-sizing: border-box;
  }
  body.app-shell-on .app-bottombar:empty::after {
    content: "";
    flex: 1;
  }
  body.app-shell-on .app-bottombar .pagination { margin: 0; }
  body.app-shell-on .app-bottombar .app-bottombar-info {
    margin-right: auto;
    font-size: 12px;
    color: #6c757d;
  }

  body.app-shell-on .content-wrapper.mail-shell {
    height: auto;
    overflow: visible;
    display: block;
  }
  body.app-shell-on .content-wrapper.mail-shell > .content,
  body.app-shell-on .content-wrapper.mail-shell > .content > .container-fluid {
    display: block;
  }
  body.app-shell-on .content-wrapper.mail-shell .mail-main-col,
  body.app-shell-on .content-wrapper.mail-shell .mail-sidebar-col {
    max-height: none;
    overflow: visible;
  }
  body.app-shell-on .mail-list-card {
    height: auto;
  }
  body.app-shell-on .mail-list-card .mail-list-scroll {
    overflow: visible;
  }
}

.app-rail,
.app-submenu,
.app-bottombar {
  display: none;
}
body.app-shell-on .app-rail,
body.app-shell-on .app-submenu:not(.is-empty),
body.app-shell-on .app-bottombar {
  display: flex;
}