.app-layout-page {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      box-sizing: border-box;      
      height: 100vh;
      overflow: hidden;
    }

    .app-layout-header {
      background: var(--header);
      border-radius: var(--radius);
      border-bottom: var(--border);
      height: var(--header-height);
      flex-shrink: 0;
      line-height: var(--header-height);      
      font-size: 20px;
      z-index: 100;
    }

    .app-layout-container {
      display: flex;
      flex: 1;
      min-height: 0;
      gap: 0;
      box-sizing: border-box;
      position: relative;
    }

    .app-layout-sidebar {
      background: var(--sidebar);
      border-radius: var(--radius);
      height: 100%;
      width: 250px;
      display: flex;
      flex-shrink: 0;
      transition: width 0.3s ease, opacity 0.3s ease;
      overflow: hidden;
      border-right: var(--border);
    }

    .app-layout-content {
      background: var(--content);
      border-radius: var(--radius);
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0 10px;
    }

    .app-layout-right-sidebar {
      background: var(--sidebar);
      border-radius: var(--radius);
      border-left: var(--border);
      height: 100%;
      width: 350px;
      flex-shrink: 0;
      overflow-y: auto;
      transition: width 0.3s ease, overflow 0.3s ease;
    }

    .app-layout-right-sidebar--hidden {
      width: 0;
      overflow: hidden;
      border-left: none;
    }

    /* ── Responsive ─────────────────────────────────────────── */

    /* Tablet/Mobile: right panel becomes overlay drawer */
    @media (max-width: 1024px) {
      .app-layout-right-sidebar {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        width: 100%;
        z-index: 200;
        overflow: hidden;
        border-left: var(--border);
        transform: translateX(100%);
        transition: transform 0.3s ease;
      }

      /* --hidden keeps the panel off-screen (override desktop width:0) */
      .app-layout-right-sidebar--hidden {
        width: 320px;
        overflow: hidden;
        border-left: var(--border);
        transform: translateX(100%);
      }

      /* Panel open: slide in from the right */
      .app-layout-right-sidebar:not(.app-layout-right-sidebar--hidden) {
        transform: translateX(0);
        overflow-y: auto;
      }

      /* Backdrop behind open right panel */
      .app-layout-container:has(.app-layout-right-sidebar:not(.app-layout-right-sidebar--hidden))::after {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 199;
      }
    }

    /* Mobile: sidebar becomes overlay drawer */
    @media (max-width: 768px) {
      .app-layout-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        z-index: 200;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        border-right: var(--border);
      }

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

      /* Backdrop via container :has() — outside overflow:hidden of sidebar */
      .app-layout-container:has(.app-layout-sidebar--open)::before {
        content: '';
        position: fixed;
        inset: 0;
        z-index: 199;
      }
    }