/* ==========================================================================
   Netsoif — App Shell Layout (floating glass sidebar + topbar)
   ========================================================================== */
/* Fixed-viewport shell: the sidebar column never moves; only .app-main (topbar + page) scrolls */
.app-shell{display:flex;align-items:stretch;gap:var(--xb-shell-gap);padding:var(--xb-shell-gap);height:100vh;height:100dvh;overflow:hidden}
.sidebar-col{flex:none;width:var(--xb-sidebar-w);height:100%;transition:width var(--xb-transition)}
.app-shell.sidebar-collapsed .sidebar-col{width:var(--xb-sidebar-w-collapsed)}

/* ---------- Sidebar (rounded floating glass card, in its own column) ---------- */
.sidebar{
  position:relative;width:100%;height:100%;
  background:var(--xb-glass-panel);border:1px solid var(--xb-glass-border);border-radius:var(--xb-radius-2xl);
  box-shadow:var(--xb-glass-inset),var(--xb-shadow-2);
  -webkit-backdrop-filter:var(--xb-blur-strong);backdrop-filter:var(--xb-blur-strong);
  display:flex;flex-direction:column;overflow:hidden;z-index:var(--xb-z-sidebar);
}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 var(--xb-sp-5);height:var(--xb-topbar-h);border-bottom:1px solid var(--xb-border-1);flex:none}
.sidebar-brand .logo-mark{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,#C2668F,var(--xb-brand-600));display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--xb-on-brand);flex:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px -4px rgba(var(--xb-brand-rgb),.6)}
.sidebar-brand .logo-text{font-weight:800;font-size:var(--xb-fs-md);letter-spacing:-.02em;white-space:nowrap;overflow:hidden}
.sidebar.collapsed .logo-text,.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-section-title,.sidebar.collapsed .sidebar-collapse-btn span{display:none}
.sidebar.collapsed .nav-item{justify-content:center;padding-inline:0}
.sidebar.collapsed .nav-badge{position:absolute;top:4px;inset-inline-end:8px}

.sidebar-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--xb-sp-3);scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{width:0;height:0}
.sidebar-nav:hover{scrollbar-width:thin}
.sidebar-nav:hover::-webkit-scrollbar{width:6px}
.nav-item.active{background:var(--xb-primary);color:#fff;box-shadow:0 8px 20px -8px rgba(var(--xb-brand-rgb),.7)}
.nav-item.active svg{color:#fff}
.nav-section-title{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--xb-text-3);font-weight:700;padding:16px 12px 8px}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--xb-radius-md);
  color:var(--xb-text-2);font-size:var(--xb-fs-sm);font-weight:600;margin-bottom:3px;position:relative;
  transition:background var(--xb-transition),color var(--xb-transition),box-shadow var(--xb-transition);
}
.nav-item svg{width:19px;height:19px;flex:none}
.nav-item:hover{background:var(--xb-bg-3);color:var(--xb-text-0)}
.nav-item.active{
  background:rgba(var(--xb-brand-rgb),.20);color:var(--xb-text-0);font-weight:700;
  box-shadow:inset 0 0 0 1px rgba(var(--xb-brand-rgb),.38),inset 0 1px 0 rgba(255,255,255,.16);
}
.nav-item.active svg{color:var(--xb-brand-400)}
.nav-item .nav-badge{margin-inline-start:auto;background:var(--xb-danger);color:#fff;font-size:10px;font-weight:800;border-radius:999px;min-width:19px;height:19px;display:flex;align-items:center;justify-content:center;padding:0 5px}

.sidebar-footer{padding:var(--xb-sp-3);border-top:1px solid var(--xb-border-1)}
.sidebar-collapse-btn{width:100%;justify-content:flex-start;color:var(--xb-text-2)}
.sidebar-collapse-btn:hover{color:var(--xb-text-0)}

/* ---------- Topbar (floating glass bar) ---------- */
.topbar{
  height:var(--xb-topbar-h);flex:none;
  background:var(--xb-glass-panel);border:1px solid var(--xb-glass-border);border-radius:var(--xb-radius-xl);
  box-shadow:var(--xb-glass-inset),var(--xb-shadow-1);
  -webkit-backdrop-filter:var(--xb-blur);backdrop-filter:var(--xb-blur);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--xb-sp-5);
  position:sticky;top:0;z-index:var(--xb-z-topbar);gap:var(--xb-sp-4);
}
.topbar-left{display:flex;align-items:center;gap:var(--xb-sp-3);min-width:0}
.topbar-title{font-weight:800;font-size:var(--xb-fs-md);white-space:nowrap;letter-spacing:-.01em}
.topbar-search{display:flex;align-items:center;gap:8px;background:var(--xb-bg-3);border:1px solid var(--xb-border-1);border-radius:var(--xb-radius-pill);height:40px;padding:0 16px;width:280px;color:var(--xb-text-3);transition:var(--xb-transition)}
.topbar-search svg{width:16px;height:16px;flex:none;color:inherit}
.topbar-search:focus-within{border-color:var(--xb-brand-500);background:var(--xb-bg-4);box-shadow:0 0 0 4px rgba(var(--xb-brand-rgb),.22);color:var(--xb-text-1)}
.topbar-search input{background:transparent;border:none;color:var(--xb-text-0);font-size:var(--xb-fs-sm);width:100%}
.topbar-search input:focus{outline:none}
.topbar-search input::placeholder{color:var(--xb-text-3)}
.topbar-right{display:flex;align-items:center;gap:10px}
.topbar-divider{width:1px;height:26px;background:var(--xb-border-2)}

.lang-switch{display:flex;background:var(--xb-bg-3);border:1px solid var(--xb-border-1);border-radius:var(--xb-radius-pill);padding:3px}
.lang-switch button{padding:6px 12px;font-size:11px;font-weight:800;border-radius:999px;color:var(--xb-text-2);transition:var(--xb-transition)}
.lang-switch button:hover{color:var(--xb-text-0)}
.lang-switch button.active{background:var(--xb-brand-500);color:var(--xb-on-brand);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 4px 12px -4px rgba(var(--xb-brand-rgb),.7)}

.user-menu-trigger{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:var(--xb-radius-pill);background:var(--xb-bg-3);border:1px solid var(--xb-border-1);transition:var(--xb-transition)}
.user-menu-trigger:hover{background:var(--xb-bg-4);border-color:var(--xb-border-2)}
[dir="rtl"] .user-menu-trigger{padding:4px 4px 4px 10px}
.user-menu-trigger .uname{font-size:var(--xb-fs-xs);font-weight:700;text-align:start}
.user-menu-trigger .ulevel{font-size:10px;color:var(--xb-text-3);text-align:start}
.user-menu-trigger svg{width:14px;height:14px;flex:none;color:var(--xb-text-3);transition:transform var(--xb-transition)}
.dropdown.open .user-menu-trigger svg{transform:rotate(180deg)}
.dropdown-item svg{width:16px;height:16px;flex:none;color:var(--xb-text-3)}
.dropdown-item:hover svg{color:var(--xb-text-0)}

/* ---------- Main content ---------- */
.app-main{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;gap:var(--xb-shell-gap);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--xb-border-2) transparent;overscroll-behavior:contain}
.app-main > *{flex-shrink:0}
.page{padding:var(--xb-sp-2) var(--xb-sp-2) var(--xb-sp-6);max-width:1600px;width:100%;margin:0 auto}
.page.full-bleed{max-width:none;padding:0}
.page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--xb-sp-4);margin-bottom:var(--xb-sp-6);flex-wrap:wrap}
.page-title{font-size:var(--xb-fs-xl);font-weight:800;letter-spacing:-.02em}
.page-desc{color:var(--xb-text-2);font-size:var(--xb-fs-sm);margin-top:4px}
.breadcrumbs{display:flex;align-items:center;gap:6px;font-size:var(--xb-fs-xs);color:var(--xb-text-3);margin-bottom:10px}
.breadcrumbs a:hover{color:var(--xb-text-0)}

.grid{display:grid;gap:var(--xb-sp-5)}
.grid > *,.trip-layout > *,.tc-layout > *,.admin-shell > *{min-width:0}
.grid-cols-2{grid-template-columns:repeat(2,1fr)}
.grid-cols-3{grid-template-columns:repeat(3,1fr)}
.grid-cols-4{grid-template-columns:repeat(4,1fr)}
.grid-cols-5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1200px){.grid-cols-4{grid-template-columns:repeat(2,1fr)}.grid-cols-5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.grid-cols-2,.grid-cols-3,.grid-cols-4,.grid-cols-5{grid-template-columns:1fr}}

/* Mobile: sidebar becomes an off-canvas floating glass sheet */
@media (max-width:960px){
  .app-shell{padding:10px;gap:10px}
  .sidebar-col,.app-shell.sidebar-collapsed .sidebar-col{display:contents}
  .sidebar{position:fixed;inset-inline-start:10px;top:10px;bottom:10px;height:auto;width:270px;transform:translateX(calc(-100% - 24px))}
  [dir="rtl"] .sidebar{transform:translateX(calc(100% + 24px))}
  .sidebar.mobile-open{transform:none}
  .sidebar.collapsed{width:270px}
  .sidebar-scrim{position:fixed;inset:0;background:var(--xb-scrim);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:calc(var(--xb-z-sidebar) - 1);display:none}
  .sidebar-scrim.show{display:block}
  .topbar{top:0;border-radius:var(--xb-radius-lg);padding:0 var(--xb-sp-3)}
  .topbar-search{display:none}
  .page{padding:var(--xb-sp-2) 2px}
}

/* ---------- Auth pages ---------- */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--xb-sp-5)}
.auth-card{
  width:100%;max-width:440px;background:var(--xb-glass-strong);border:1px solid var(--xb-glass-border);border-radius:var(--xb-radius-2xl);
  box-shadow:var(--xb-glass-inset),var(--xb-shadow-2);-webkit-backdrop-filter:var(--xb-blur-strong);backdrop-filter:var(--xb-blur-strong);
  padding:var(--xb-sp-10) var(--xb-sp-8);
}
.auth-brand{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:var(--xb-sp-6)}

/* ---------- Mobile tab bar (floating glass pill) ---------- */
.mobile-tabbar{display:none}
@media (max-width:960px){
  .mobile-tabbar{
    display:flex;position:fixed;bottom:12px;inset-inline:12px;z-index:var(--xb-z-topbar);
    background:var(--xb-glass-panel);border:1px solid var(--xb-glass-border);border-radius:var(--xb-radius-2xl);
    -webkit-backdrop-filter:var(--xb-blur-strong);backdrop-filter:var(--xb-blur-strong);
    box-shadow:var(--xb-glass-inset),var(--xb-shadow-2);padding:6px 6px calc(env(safe-area-inset-bottom) + 6px);
  }
  .mobile-tabbar a{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 6px;color:var(--xb-text-3);font-size:10px;font-weight:700;border-radius:22px;transition:var(--xb-transition)}
  .mobile-tabbar a.active{color:var(--xb-brand-400);background:rgba(var(--xb-brand-rgb),.16);box-shadow:inset 0 0 0 1px rgba(var(--xb-brand-rgb),.28)}
  .mobile-tabbar svg{width:20px;height:20px}
  .page{padding-bottom:100px}
}

/* ---------- personal suggestions strip ---------- */
.reco-strip{display:flex;align-items:center;gap:10px;margin-bottom:14px;min-width:0}
.reco-strip:empty{display:none}
.reco-title{flex:none;font-size:var(--xb-fs-xs);font-weight:800;color:var(--xb-brand-400);white-space:nowrap}
.reco-items{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px}
.reco-items::-webkit-scrollbar{display:none}
.reco-chip{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:7px 12px;border-radius:14px;border:1px solid var(--xb-glass-border);background:var(--xb-glass-panel);color:var(--xb-text-0);cursor:pointer;font:inherit;text-decoration:none;transition:var(--xb-transition)}
.reco-chip b{font-size:13px;font-weight:700}
.reco-chip small{font-size:10.5px;color:var(--xb-text-3)}
.reco-chip:hover{border-color:rgba(var(--xb-brand-rgb),.5)}
.reco-chip.hot{border-color:rgba(var(--xb-brand-rgb),.55);background:rgba(var(--xb-brand-rgb),.14)}
@media (max-width:960px){.reco-strip{flex-direction:column;align-items:stretch;gap:6px}.reco-items{margin-inline:-2px}}

/* language menu (all languages) */
.lang-pick{display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border-radius:var(--xb-radius-pill);background:var(--xb-bg-3);border:1px solid var(--xb-border-1);color:var(--xb-text-1);cursor:pointer}
.lang-pick svg{width:16px;height:16px;flex:none}
.lang-pick select{appearance:none;-webkit-appearance:none;background:transparent;border:0;color:inherit;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;outline:none;max-width:120px}
.lang-pick select option{color:#0b1530;background:#fff}
@media (max-width:960px){.lang-pick{height:34px;padding:0 8px}.lang-pick select{max-width:84px;font-size:12px}}