/* Struktur shell (header, tab-bar) khusus Portal Klien (Index.html) */
  /* ---------- APP SHELL ---------- */
  #appScreen{display:none;min-height:100vh;}
  #appScreen.active{animation:fadeIn .4s var(--ease);}
  .app-header{background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);padding:28px 90px 24px 24px;display:flex;align-items:flex-start;justify-content:space-between;border-bottom:1px solid var(--glass-border);box-shadow:var(--shadow-sm);position:relative;z-index:2;}
  .header-brand-row{display:flex;align-items:center;gap:12px;}
  .header-logo{width:36px;height:36px;object-fit:contain;flex-shrink:0;}
  .app-header h2{font-size:19px;}
  .booking-row{display:flex;align-items:center;gap:6px;margin-top:3px;}
  .booking-row span{font-size:11px;color:var(--ink-dim);}
  .copy-icon-btn{background:none;border:none;padding:2px;display:flex;color:var(--ink-dim);transition:color .2s var(--ease),transform .2s var(--ease);}
  .copy-icon-btn:hover{color:var(--maroon-bright);transform:scale(1.15);}
  .copy-icon-btn svg{width:12px;height:12px;}
  .logout-btn{background:none;border:1px solid var(--rule);color:var(--ink-dim);padding:8px 14px;border-radius:8px;font-size:12px;}
  .logout-btn:hover{border-color:var(--maroon-bright);color:var(--maroon-bright);}

  .tabs{display:flex;background:var(--glass-bg);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur);border-bottom:1px solid var(--glass-border);overflow-x:auto;position:relative;}
  .tab-btn{flex:1;min-width:74px;padding:13px 8px 11px;background:none;border:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:var(--ink-dim);white-space:nowrap;transition:color .25s var(--ease);}
  .tab-btn svg{width:20px;height:20px;stroke:url(#tabIconGrad);fill:none;opacity:.55;transition:opacity .25s var(--ease),transform .3s var(--ease-bounce);}
  :root[data-theme="light"] .tab-btn svg{stroke:currentColor;opacity:1;}
  .tab-btn span{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
  .tab-btn.active{color:var(--nova);}
  .tab-btn.active svg{transform:translateY(-1px) scale(1.1);opacity:1;filter:drop-shadow(0 0 6px var(--nova-glow));}
  :root[data-theme="light"] .tab-btn.active{color:var(--maroon-bright);}
  :root[data-theme="light"] .tab-btn.active svg{filter:none;}
  .tab-btn.soon{opacity:.5;position:relative;}
  .tab-btn.soon .tab-soon-dot{position:absolute;top:8px;right:calc(50% - 24px);width:6px;height:6px;border-radius:50%;background:var(--warning);}
  .tab-soon-badge{display:none;}
  .tab-btn.soon .tab-soon-badge{
    display:inline-block;font-size:7px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
    color:var(--warning);border:1px solid var(--warning);border-radius:20px;padding:2px 6px;
    white-space:nowrap;line-height:1.4;
  }
  .tab-indicator{position:absolute;bottom:0;height:2px;background:linear-gradient(90deg,var(--maroon),var(--maroon-bright));border-radius:2px 2px 0 0;transition:left .35s var(--ease),width .35s var(--ease);box-shadow:0 0 10px var(--maroon-glow);}

  /* ---------- DESKTOP: sidebar (bukan tab-bar horizontal diperbesar) ---------- */
  @media(min-width:1024px){
    #appScreen.active{
      display:grid !important;
      grid-template-columns:232px 1fr;
      grid-template-rows:auto 1fr;
      grid-template-areas:"header header" "sidebar main";
      min-height:100vh;
      align-items:start;
    }
    .app-header{grid-area:header;padding:20px 40px;}
    .tabs{
      grid-area:sidebar;flex-direction:column;align-items:stretch;gap:2px;
      border-bottom:none;border-right:1px solid var(--rule);
      overflow-x:visible;overflow-y:auto;padding:20px 12px;position:relative;
    }
    .tab-btn{flex-direction:row;justify-content:flex-start;gap:14px;padding:13px 16px;min-width:0;border-radius:9px;}
    .tab-btn span{font-size:12.5px;text-transform:none;letter-spacing:.01em;font-weight:600;}
    .tab-btn svg{width:19px;height:19px;flex-shrink:0;}
    .tab-btn.active{background:linear-gradient(90deg,var(--maroon-glow),transparent);}
    .tab-indicator{display:none;}
    .tab-panel{grid-area:main;width:100%;}
  }
  @media(min-width:1024px) and (hover:hover) and (pointer:fine){
    .tab-btn:not(.active):hover{background:var(--surface-2);color:var(--ink);}
  }

  /* ---------- MOBILE: bottom navigation ala aplikasi native ---------- */
  @media(max-width:767px){
    .tabs{
      position:fixed;left:0;right:0;bottom:0;z-index:50;
      border-bottom:none;border-top:1px solid var(--glass-border);
      box-shadow:0 -4px 20px rgba(0,0,0,.25);
      padding-bottom:calc(6px + env(safe-area-inset-bottom));
      background:var(--glass-bg);
    }
    .tab-indicator{bottom:auto;top:0;border-radius:0 0 2px 2px;}
  }