/* ESS Portal v32 — Corporate enterprise UI (no emoji, SVG icons only) */
:root{
  --p-bg:#f5f7fa;
  --p-surface:#ffffff;
  --p-ink:#0f172a;
  --p-ink-2:#1e293b;
  --p-mute:#64748b;
  --p-mute-2:#94a3b8;
  --p-border:#e2e8f0;
  --p-border-2:#cbd5e1;
  --p-brand:#1e40af;
  --p-brand-2:#1d4ed8;
  --p-brand-dark:#172554;
  --p-brand-soft:#eff4ff;
  --p-success:#15803d;
  --p-success-bg:#dcfce7;
  --p-warn:#b45309;
  --p-warn-bg:#fef3c7;
  --p-danger:#b91c1c;
  --p-danger-bg:#fee2e2;
  --p-info:#1e40af;
  --p-info-bg:#dbeafe;
  --p-shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --p-shadow:0 1px 3px rgba(15,23,42,.06),0 1px 2px rgba(15,23,42,.04);
  --p-shadow-lg:0 8px 24px -12px rgba(15,23,42,.18);
  --p-radius:8px;
  --p-radius-lg:10px;
  --p-radius-xl:14px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
.portal-body{
  background:var(--p-bg);
  font-family:'Inter','Poppins',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--p-ink);
  -webkit-font-smoothing:antialiased;
  font-size:14px;line-height:1.5;
  padding-top:env(safe-area-inset-top);
  padding-bottom:env(safe-area-inset-bottom);
}
body.nav-lock{overflow:hidden}
a{color:var(--p-brand)}

/* ---------- Layout shell ---------- */
.layout{display:flex;min-height:100vh}
.sb{
  width:248px;flex:0 0 248px;
  background:#fff;border-right:1px solid var(--p-border);
  display:flex;flex-direction:column;gap:.15rem;
  padding:1rem .75rem 1.25rem;
  position:sticky;top:0;height:100vh;overflow-y:auto;
  z-index:40;
}
.sb .brand{display:flex;align-items:center;gap:.65rem;padding:.4rem .5rem 1.1rem;border-bottom:1px solid var(--p-border);margin-bottom:.85rem}
.sb .brand img{height:38px;width:auto}
.sb a{
  display:flex;align-items:center;gap:.7rem;
  padding:.55rem .75rem;border-radius:6px;
  color:var(--p-ink-2);text-decoration:none;font-weight:500;font-size:.875rem;
  transition:background .12s,color .12s;
}
.sb a:hover{background:#f1f5f9;color:var(--p-brand-dark)}
.sb a.active{background:var(--p-brand-soft);color:var(--p-brand);font-weight:600;box-shadow:inset 3px 0 0 var(--p-brand)}
.sb a .ic{width:18px;height:18px;flex:0 0 18px;display:inline-flex;align-items:center;justify-content:center;color:var(--p-mute)}
.sb a:hover .ic,.sb a.active .ic{color:var(--p-brand)}
.sb .nav-section{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--p-mute-2);padding:.9rem .75rem .35rem}

.main{flex:1;min-width:0;padding:1.25rem clamp(1rem,2.5vw,2rem) 2.5rem;background:var(--p-bg)}
.sb-overlay{display:none}

/* ---------- Mobile menu ---------- */
.menu-toggle{
  display:none;position:fixed;top:.75rem;left:.75rem;z-index:60;
  width:42px;height:42px;border-radius:8px;border:1px solid var(--p-border);
  background:#fff;color:var(--p-ink);cursor:pointer;
  box-shadow:var(--p-shadow);align-items:center;justify-content:center;
}
@media (max-width:960px){
  .menu-toggle{display:inline-flex}
  .sb{
    position:fixed;top:0;left:0;height:100vh;
    transform:translateX(-105%);transition:transform .25s ease;
    box-shadow:var(--p-shadow-lg);width:78vw;max-width:290px;
  }
  .layout.nav-open .sb{transform:translateX(0)}
  .layout.nav-open .sb-overlay{
    display:block;position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:35;
  }
  .main{padding:4rem 1rem 3rem}
}

/* ---------- Topbar ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:1rem;margin-bottom:1.25rem;
  padding:1rem 1.25rem;
  background:#fff;border:1px solid var(--p-border);
  border-radius:var(--p-radius-lg);box-shadow:var(--p-shadow-sm);
}
.topbar h1{margin:.1rem 0 0;font-size:1.25rem;font-weight:600;letter-spacing:-.01em;color:var(--p-ink)}
.topbar .crumb{font-size:.72rem;color:var(--p-mute);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.topbar .who{display:flex;align-items:center;gap:.75rem}
.topbar .who .avatar{
  width:38px;height:38px;border-radius:50%;
  background:var(--p-brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.9rem;
}
.topbar .who .meta{text-align:right}
.topbar .who .meta strong{display:block;font-weight:600;font-size:.875rem;color:var(--p-ink)}
.topbar .who .meta small{color:var(--p-mute);font-size:.75rem}

/* ---------- Role switcher ---------- */
.role-switcher{margin:.25rem .15rem .9rem;padding:.6rem .7rem;background:#f8fafc;border:1px solid var(--p-border);border-radius:8px}
.role-switcher .role-label{font-size:.65rem;color:var(--p-mute);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}
.role-switcher select{
  width:100%;padding:.5rem;border-radius:6px;border:1px solid var(--p-border-2);
  background:#fff;font-weight:500;color:var(--p-ink);font-family:inherit;font-size:.85rem;
}

/* ---------- Page header (replaces hero) ---------- */
.page-head{
  background:#fff;border:1px solid var(--p-border);border-radius:var(--p-radius-lg);
  padding:1.25rem 1.5rem;margin-bottom:1.25rem;box-shadow:var(--p-shadow-sm);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
}
.page-head h2{margin:0 0 .25rem;font-size:1.3rem;font-weight:600;color:var(--p-ink);letter-spacing:-.01em}
.page-head .sub{margin:0;color:var(--p-mute);font-size:.875rem}

/* ---------- Stat cards ---------- */
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.9rem;margin-bottom:1.25rem}
.stat-card{
  background:#fff;border:1px solid var(--p-border);border-radius:var(--p-radius-lg);
  padding:1.1rem 1.25rem;box-shadow:var(--p-shadow-sm);
  display:flex;justify-content:space-between;align-items:flex-start;gap:.75rem;
  transition:border-color .12s,box-shadow .12s;
}
.stat-card:hover{border-color:var(--p-border-2);box-shadow:var(--p-shadow)}
.stat-card .label{font-size:.7rem;color:var(--p-mute);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
.stat-card .value{font-size:1.65rem;font-weight:700;color:var(--p-ink);margin-top:.25rem;line-height:1.1;letter-spacing:-.02em}
.stat-card .sub{font-size:.75rem;color:var(--p-mute);margin-top:.35rem}
.stat-card .ic{
  width:38px;height:38px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--p-brand-soft);color:var(--p-brand);flex:0 0 38px;
}
.stat-card.success .ic{background:var(--p-success-bg);color:var(--p-success)}
.stat-card.warn .ic{background:var(--p-warn-bg);color:var(--p-warn)}
.stat-card.danger .ic{background:var(--p-danger-bg);color:var(--p-danger)}

/* ---------- Panels (cards) ---------- */
.panel{
  background:#fff;border:1px solid var(--p-border);border-radius:var(--p-radius-lg);
  padding:1.25rem 1.4rem;margin-bottom:1.1rem;box-shadow:var(--p-shadow-sm);
}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:.85rem;margin-bottom:1rem;border-bottom:1px solid var(--p-border)}
.panel h2,.panel-head h2{margin:0;font-size:.95rem;color:var(--p-ink);font-weight:600;display:inline-flex;align-items:center;gap:.55rem}
.panel h2 .ic,.panel-head h2 .ic{color:var(--p-brand);display:inline-flex}
.panel .panel-sub{color:var(--p-mute);font-size:.8rem;margin:-.5rem 0 1rem}
.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:1.1rem}
.panel-grid.two{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}

/* ---------- Quick actions ---------- */
.quick-actions{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:.85rem;margin-bottom:1.25rem;
}
.qa{
  background:#fff;border:1px solid var(--p-border);border-radius:var(--p-radius-lg);
  padding:1rem;text-decoration:none;color:var(--p-ink);
  display:flex;align-items:center;gap:.85rem;
  transition:border-color .12s,box-shadow .12s,transform .12s;
  font-weight:500;font-size:.875rem;box-shadow:var(--p-shadow-sm);
}
.qa:hover{border-color:var(--p-brand);box-shadow:var(--p-shadow);transform:translateY(-1px)}
.qa .ic{
  width:38px;height:38px;border-radius:8px;flex:0 0 38px;
  background:var(--p-brand-soft);color:var(--p-brand);
  display:inline-flex;align-items:center;justify-content:center;
}
.qa .qa-label{flex:1;line-height:1.2}
.qa .qa-label strong{display:block;font-weight:600;color:var(--p-ink);font-size:.9rem}
.qa .qa-label small{color:var(--p-mute);font-size:.72rem}

/* ---------- Tables ---------- */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--p-border);border-radius:8px}
table.portal-tbl{width:100%;border-collapse:collapse;font-size:.875rem;min-width:520px}
table.portal-tbl th,table.portal-tbl td{padding:.7rem 1rem;border-bottom:1px solid var(--p-border);text-align:left;vertical-align:middle}
table.portal-tbl tr:last-child td{border-bottom:0}
table.portal-tbl th{background:#f8fafc;color:var(--p-mute);font-weight:600;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em}
table.portal-tbl tbody tr:hover td{background:#f9fafc}
table.portal-tbl td a{color:var(--p-brand);font-weight:500;text-decoration:none}
table.portal-tbl td a:hover{text-decoration:underline}

/* ---------- Badges ---------- */
.badge{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:999px;font-size:.7rem;font-weight:600;border:1px solid transparent}
.badge-pending{background:var(--p-warn-bg);color:var(--p-warn);border-color:#fde68a}
.badge-approved,.badge-paid{background:var(--p-success-bg);color:var(--p-success);border-color:#bbf7d0}
.badge-rejected{background:var(--p-danger-bg);color:var(--p-danger);border-color:#fecaca}
.badge-info{background:var(--p-info-bg);color:var(--p-info);border-color:#bfdbfe}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  padding:.6rem 1.05rem;min-height:40px;
  border-radius:8px;border:1px solid var(--p-brand);
  background:var(--p-brand);color:#fff;font-weight:600;
  cursor:pointer;text-decoration:none;font-size:.875rem;font-family:inherit;
  transition:background .12s,border-color .12s,box-shadow .12s;
  box-shadow:0 1px 2px rgba(30,64,175,.2);
}
.btn:hover{background:var(--p-brand-2);border-color:var(--p-brand-2)}
.btn:active{transform:translateY(1px)}
.btn-secondary{background:#fff;color:var(--p-ink);border-color:var(--p-border-2);box-shadow:none}
.btn-secondary:hover{background:#f8fafc;border-color:var(--p-mute-2)}
.btn-ghost{background:transparent;color:var(--p-ink);border-color:transparent;box-shadow:none}
.btn-ghost:hover{background:#f1f5f9}
.btn-danger{background:var(--p-danger);border-color:var(--p-danger)}
.btn-danger:hover{background:#991b1b;border-color:#991b1b}
.btn-success{background:var(--p-success);border-color:var(--p-success)}
.btn-success:hover{background:#166534;border-color:#166534}
.btn-block{width:100%}
.btn-sm{padding:.4rem .75rem;min-height:32px;font-size:.8rem}
.btn svg{flex:0 0 auto}
.btn-row{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.25rem}

/* ---------- Forms (corporate) ---------- */
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem 1.25rem}
.form-grid .col-1{grid-column:span 1}
.form-grid .col-2{grid-column:span 2}
.field{display:flex;flex-direction:column;gap:.35rem}
.field label,.form-row label{font-size:.78rem;color:var(--p-ink-2);font-weight:600;letter-spacing:.01em}
.field .hint,.form-hint{font-size:.72rem;color:var(--p-mute);margin-top:.1rem}
.field input,.field select,.field textarea,
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:.6rem .75rem;border-radius:6px;
  border:1px solid var(--p-border-2);font-family:inherit;font-size:16px;
  background:#fff;color:var(--p-ink);line-height:1.4;
  transition:border-color .12s,box-shadow .12s;
}
@media(min-width:768px){
  .field input,.field select,.field textarea,
  .form-row input,.form-row select,.form-row textarea{font-size:.875rem}
}
.field input:focus,.field select:focus,.field textarea:focus,
.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  outline:0;border-color:var(--p-brand);box-shadow:0 0 0 3px rgba(30,64,175,.12);
}
.field textarea,.form-row textarea{min-height:96px;resize:vertical}
.field input:disabled,.form-row input:disabled{background:#f1f5f9;color:#475569;cursor:not-allowed}
.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem 1.25rem;margin-bottom:1rem}
.form-row.single{grid-template-columns:1fr}
.form-row > div{display:flex;flex-direction:column;gap:.35rem}

.form-section{margin-bottom:.5rem}
.form-section-head{display:flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding-bottom:.6rem;border-bottom:1px solid var(--p-border)}
.form-section-head .ic{width:32px;height:32px;border-radius:7px;background:var(--p-brand-soft);color:var(--p-brand);display:inline-flex;align-items:center;justify-content:center;flex:0 0 32px}
.form-section-head h3{margin:0;font-size:.95rem;color:var(--p-ink);font-weight:600}
.form-section-head .sub{margin:.1rem 0 0;font-size:.75rem;color:var(--p-mute);font-weight:400}

.form-actions{display:flex;flex-wrap:wrap;gap:.6rem;padding-top:1rem;border-top:1px solid var(--p-border);margin-top:.5rem}

/* ---------- Alerts ---------- */
.alert{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem 1rem;border-radius:8px;margin-bottom:1rem;font-size:.875rem;border:1px solid transparent}
.alert .ic{flex:0 0 18px;margin-top:1px}
.alert-info{background:var(--p-info-bg);color:#1e3a8a;border-color:#bfdbfe}
.alert-error,.alert-danger{background:var(--p-danger-bg);color:#7f1d1d;border-color:#fecaca}
.alert-success{background:var(--p-success-bg);color:#14532d;border-color:#bbf7d0}
.alert-warn{background:var(--p-warn-bg);color:#78350f;border-color:#fde68a}

/* ---------- Toasts (PRG flash) ---------- */
.toast-wrap{position:fixed;top:1rem;right:1rem;z-index:80;display:flex;flex-direction:column;gap:.5rem;max-width:90vw}
.toast{background:#fff;border-left:4px solid var(--p-brand);border-radius:8px;padding:.8rem 1rem;box-shadow:var(--p-shadow-lg);font-size:.875rem;color:var(--p-ink);min-width:260px;animation:toast-in .2s ease}
.toast.success{border-color:var(--p-success)}
.toast.error{border-color:var(--p-danger)}
@keyframes toast-in{from{transform:translateY(-8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ---------- Cards (documents/benefits/payslips) ---------- */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}
.doc-card{
  background:#fff;border:1px solid var(--p-border);border-radius:var(--p-radius-lg);
  padding:1.1rem;display:flex;flex-direction:column;gap:.65rem;
  transition:border-color .12s,box-shadow .12s;box-shadow:var(--p-shadow-sm);
}
.doc-card:hover{border-color:var(--p-brand);box-shadow:var(--p-shadow)}
.doc-card .doc-icon{
  width:40px;height:40px;border-radius:8px;
  background:var(--p-brand-soft);color:var(--p-brand);
  display:inline-flex;align-items:center;justify-content:center;
}
.doc-card .kicker{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--p-brand)}
.doc-card .title{font-weight:600;color:var(--p-ink);font-size:.95rem;line-height:1.3}
.doc-card .meta{font-size:.78rem;color:var(--p-mute);line-height:1.5}

/* ---------- Timeline (attendance) ---------- */
.timeline{display:flex;flex-direction:column;gap:.55rem}
.tl-item{display:flex;gap:.85rem;align-items:center;padding:.7rem .9rem;background:#f8fafc;border:1px solid var(--p-border);border-radius:8px}
.tl-item .tl-dot{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  background:var(--p-success-bg);color:var(--p-success);
  display:inline-flex;align-items:center;justify-content:center;
}
.tl-item.out .tl-dot{background:var(--p-warn-bg);color:var(--p-warn)}
.tl-item .tl-body{flex:1;min-width:0}
.tl-item .tl-body strong{display:block;font-size:.88rem;color:var(--p-ink)}
.tl-item .tl-body small{color:var(--p-mute);font-size:.75rem}

/* ---------- Empty state ---------- */
.empty{text-align:center;padding:2rem 1rem;color:var(--p-mute)}
.empty .empty-ic{width:48px;height:48px;border-radius:12px;background:#f1f5f9;color:var(--p-mute-2);display:inline-flex;align-items:center;justify-content:center;margin-bottom:.6rem}
.empty strong{display:block;color:var(--p-ink);font-weight:600;margin-bottom:.2rem;font-size:.95rem}
.empty p{margin:0;font-size:.825rem}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#1e40af 0%,#172554 100%);padding:1.5rem;padding-top:max(1.5rem,env(safe-area-inset-top));padding-bottom:max(1.5rem,env(safe-area-inset-bottom))}
.login-card{background:#fff;border-radius:var(--p-radius-xl);padding:2.25rem;max-width:440px;width:100%;box-shadow:0 25px 50px -12px rgba(0,0,0,.4)}
.login-card .logo{display:flex;align-items:center;gap:.7rem;margin-bottom:1.75rem}
.login-card .logo img{height:48px;width:auto}
.login-card h1{margin:0 0 .25rem;font-size:1.4rem;color:var(--p-ink);font-weight:700}
.login-card p.sub{margin:0 0 1.5rem;color:var(--p-mute);font-size:.875rem}
.login-card .form-row{grid-template-columns:1fr}
.login-card .btn{width:100%;justify-content:center;padding:.85rem 1rem;font-size:.92rem}
.login-card .links{display:flex;justify-content:space-between;margin-top:1.25rem;font-size:.82rem}
.login-card .links a{color:var(--p-brand);text-decoration:none;font-weight:600}
.login-card .links a:hover{text-decoration:underline}

/* Password toggle (eye) */
.pw-wrap{position:relative}
.pw-wrap .pw-eye{position:absolute;right:.4rem;top:50%;transform:translateY(-50%);width:34px;height:34px;border:0;background:transparent;cursor:pointer;color:var(--p-mute);display:flex;align-items:center;justify-content:center;border-radius:6px}
.pw-wrap .pw-eye:hover{background:#f1f5f9;color:var(--p-ink)}
.pw-wrap input{padding-right:2.4rem}

/* ---------- Responsive ---------- */
@media(max-width:768px){
  .form-grid{grid-template-columns:1fr}
  .form-grid .col-2{grid-column:span 1}
}
@media(max-width:640px){
  .topbar{padding:.85rem 1rem;align-items:flex-start;flex-direction:column}
  .topbar h1{font-size:1.05rem}
  .page-head{padding:1rem 1.1rem}
  .panel{padding:1rem 1.1rem}
  .stat-card .value{font-size:1.4rem}
  .form-row{grid-template-columns:1fr}
  .quick-actions{grid-template-columns:1fr}
}

/* =====================================================================
   V39 Universal Mobile/Touch/Scroll Fix — employee ESS portal
   ===================================================================== */

@supports (height:100dvh){
  .layout{min-height:100dvh}
  .sb{height:100dvh}
}

/* Sidebar always scrolls internally so every menu item is reachable */
.sb{
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y;
  scrollbar-width:thin;
  scrollbar-color:rgba(30,64,175,.45) rgba(0,0,0,.05);
}
@media (max-width:1024px){
  .sb{
    padding-top:max(1rem,env(safe-area-inset-top));
    padding-bottom:max(2.5rem,env(safe-area-inset-bottom));
  }
}

/* Smooth touch scroll everywhere */
html,body{
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
}
body{ touch-action:manipulation; }
.main{
  -webkit-overflow-scrolling:touch;
  touch-action:pan-y pan-x;
  scrollbar-width:thin;
  scrollbar-color:rgba(30,64,175,.4) rgba(0,0,0,.05);
}

/* Visible scrollbars */
.sb::-webkit-scrollbar,
.main::-webkit-scrollbar,
.table-wrap::-webkit-scrollbar,
.card::-webkit-scrollbar{ width:10px;height:10px; }
.sb::-webkit-scrollbar-track,
.main::-webkit-scrollbar-track,
.table-wrap::-webkit-scrollbar-track{ background:rgba(0,0,0,.04);border-radius:8px; }
.sb::-webkit-scrollbar-thumb,
.main::-webkit-scrollbar-thumb,
.table-wrap::-webkit-scrollbar-thumb,
.card::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#3b82f6,#1e3a8a);
  border-radius:8px;border:2px solid transparent;background-clip:padding-box;
}

/* Tables horizontal scroll */
.table-wrap{ touch-action:pan-x pan-y; overscroll-behavior-x:contain; }

/* Small phones */
@media (max-width:480px){
  .sb a{ min-height:44px; }
  .btn{ min-height:44px; }
  .field input,.field select,.field textarea,
  .form-row input,.form-row select,.form-row textarea{
    min-height:44px;font-size:16px;
  }
  .main{ padding-left:.75rem;padding-right:.75rem; }
}
@media (max-width:360px){
  .sb{ width:88vw; }
}

/* Tablet portrait */
@media (min-width:600px) and (max-width:1024px){
  .sb{ width:300px; }
}

/* Touch devices */
@media (hover:none) and (pointer:coarse){
  .btn,.sb a,input,select,textarea{ min-height:44px; }
  *{ -webkit-tap-highlight-color:rgba(30,64,175,.15); }
}

/* Landscape phones */
@media (max-width:900px) and (orientation:landscape){
  .sb{ max-height:100dvh;overflow-y:auto; }
}