/* Panel klienta 2.1 — pełny układ mobilny */
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}

@media (max-width: 900px){
  body{min-width:0}
  .panel-topbar{
    position:sticky;top:0;z-index:1200;
    width:100%;height:58px;padding:0 12px;gap:10px;
    background:#080b11!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  }
  .panel-topbar__brand{min-width:0;flex:1;gap:8px}
  .panel-topbar__brand img{width:32px;height:32px;flex:0 0 32px}
  .panel-topbar__brand span{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .panel-topbar nav{display:none!important}
  .topbar-actions{margin-left:auto;gap:6px;flex:0 0 auto}
  .notification-bell{width:38px;height:38px;border-radius:11px}
  .panel-topbar__home{width:38px;height:38px;padding:0;display:grid;place-items:center;font-size:0;border-radius:11px}
  .panel-topbar__home::before{content:'⌂';font-size:20px;color:#fff}

  .role-panel{min-height:calc(100dvh - 58px);padding:8px!important}
  .dashboard{display:block!important;width:100%;max-width:none;margin:0}
  .dashboard-side,.dashboard-main{width:100%;min-width:0;border-radius:15px}
  .dashboard-side{
    position:static!important;height:auto!important;padding:10px!important;margin-bottom:8px;
    display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;
    background:#0b0f17!important;
  }
  .brand-mini{display:none!important}
  .account-card{margin:0!important;padding:8px!important;min-width:0}
  .account-row{min-width:0}
  .account-row>div{min-width:0}
  .account-row strong,.account-row small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .account-row img,.account-row .login-logo{width:36px;height:36px;flex-basis:36px}
  .panel-nav{
    grid-column:1/-1;display:flex!important;gap:7px!important;width:100%;overflow-x:auto;
    padding:2px 0 5px;scrollbar-width:none;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  }
  .panel-nav::-webkit-scrollbar{display:none}
  .panel-nav button{
    flex:0 0 auto!important;width:auto!important;min-height:42px;padding:10px 13px!important;
    border:1px solid rgba(255,255,255,.08)!important;border-radius:11px!important;
    background:#101620!important;text-align:center!important;white-space:nowrap;scroll-snap-align:start;
  }
  .panel-nav button.active{background:rgba(115,108,255,.2)!important;border-color:rgba(115,108,255,.45)!important}
  .logout-btn{position:static!important;width:auto!important;min-width:44px;height:44px;margin:0!important;padding:0 12px!important;font-size:0}
  .logout-btn::before{content:'Wyloguj';font-size:11px}

  .dashboard-main{padding:10px!important;background:#090d14!important}
  .dashboard-head{align-items:center;margin-bottom:10px;padding:0 2px}
  .dashboard-head>div{min-width:0}
  .dashboard-head h1{font-size:20px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:68vw}
  .role-badge{flex:0 0 auto}

  .panel-card{padding:12px!important;border-radius:13px!important;margin-bottom:9px!important}
  .panel-card h2{font-size:16px!important}
  .panel-card-head{display:grid!important;grid-template-columns:1fr;gap:8px!important}
  .panel-card-head .btn,.panel-card-head button{width:100%}
  .dashboard-columns{grid-template-columns:1fr!important;gap:0!important}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .stat-card{min-width:0;padding:11px!important}
  .stat-card strong{font-size:18px!important;overflow-wrap:anywhere}
  .quick-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .quick-actions button{min-width:0;min-height:46px;padding:10px 8px!important;font-size:12px!important}
  .compact-item,.notification-item{align-items:flex-start!important;padding:10px!important;min-width:0}
  .compact-item>span,.notification-item>span{min-width:0}
  .compact-item strong,.notification-item strong,.compact-item small,.notification-item small{overflow-wrap:anywhere}
  .compact-item time,.notification-item time{flex:0 0 auto;font-size:9px!important;white-space:nowrap}

  /* Zamówienia: lista nad rozmową, bez rozciągania strony */
  .ticket-shell{
    display:grid!important;grid-template-columns:1fr!important;grid-template-rows:auto minmax(420px,1fr)!important;
    width:100%!important;height:auto!important;min-height:0!important;max-height:none!important;
    gap:8px!important;background:transparent!important;border:0!important;
  }
  .ticket-sidebar{width:100%!important;min-width:0!important;max-width:none!important;border:1px solid var(--line)!important;border-radius:13px!important;background:#0d121b!important;padding:9px!important}
  .create-ticket{width:100%!important;min-height:44px!important;margin-bottom:8px!important}
  .ticket-list{display:flex!important;gap:7px!important;overflow-x:auto!important;overflow-y:hidden!important;max-height:none!important;padding:0 0 5px!important;scrollbar-width:none}
  .ticket-list::-webkit-scrollbar{display:none}
  .ticket-item{flex:0 0 min(78vw,290px)!important;width:auto!important;min-height:62px!important;text-align:left!important;border:1px solid var(--line)!important;border-radius:11px!important;background:#101620!important;padding:10px!important}
  .ticket-main{min-width:0!important;width:100%!important;height:min(68dvh,650px)!important;min-height:430px!important;border:1px solid var(--line)!important;border-radius:13px!important;overflow:hidden!important;background:#0d121b!important}
  .ticket-head{min-height:58px!important;padding:9px 10px!important;gap:8px!important}
  .ticket-head>div{min-width:0}
  .ticket-head strong,.ticket-head small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:58vw}
  .ticket-close-button{flex:0 0 auto;padding:7px 9px!important;font-size:10px!important}
  .ticket-messages{padding:10px!important}
  .ticket-message{max-width:92%!important}
  .ticket-bubble{overflow-wrap:anywhere;word-break:break-word}
  .ticket-form{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:7px!important;padding:8px!important}
  .ticket-form textarea{min-width:0!important;min-height:46px!important;max-height:120px!important;padding:10px!important}
  .ticket-form button{min-width:72px!important;padding:0 11px!important}

  .review-form,.favorite-form{grid-template-columns:1fr!important;gap:9px!important}
  .review-form button,.favorite-form button{width:100%;min-height:44px}
  .reviews-list,.favorites-list{grid-template-columns:1fr!important}
  .favorite-card{display:grid!important;grid-template-columns:1fr!important;gap:10px!important}
  .favorite-card>div:last-child{display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
  .favorite-card .btn{width:100%!important}
  .settings-form label{align-items:flex-start!important;gap:10px!important}
  .settings-form label>span{min-width:0}
  .profile-card{align-items:flex-start!important}
  .profile-card img{width:56px!important;height:56px!important;flex:0 0 56px}
  .admin-table{max-height:58dvh!important;overflow:auto!important}
  .admin-row{min-width:560px!important;grid-template-columns:60px 1.2fr 1fr 110px!important}

  .login-card{margin:8vh auto!important;width:min(100%,430px);padding:24px 16px!important}
}

@media (max-width: 520px){
  .role-panel{padding:6px!important}
  .dashboard-side{padding:8px!important}
  .dashboard-main{padding:8px!important}
  .stats-grid{grid-template-columns:1fr 1fr!important}
  .stat-card span{font-size:10px!important}
  .stat-card strong{font-size:16px!important}
  .quick-actions{grid-template-columns:1fr 1fr!important}
  .panel-card{padding:10px!important}
  .notification-item{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important}
  .notification-item>span:last-child{min-width:0}
  .notification-item time{grid-column:2;white-space:normal!important}
  .ticket-main{height:66dvh!important;min-height:410px!important}
  .ticket-form{grid-template-columns:1fr!important}
  .ticket-form button{width:100%!important;min-height:42px!important}
  .ticket-head strong,.ticket-head small{max-width:54vw}
  .favorite-card>div:last-child{grid-template-columns:1fr!important}
}

@media (max-width: 360px){
  .panel-topbar__brand span{display:none}
  .stats-grid,.quick-actions{grid-template-columns:1fr!important}
  .dashboard-head h1{max-width:58vw;font-size:18px!important}
  .panel-nav button{padding:9px 11px!important;font-size:12px!important}
}

/* Przesuwane zakładki panelu — wyraźna nawigacja mobilna */
.panel-nav-wrap{display:contents}
.panel-nav-arrow,.panel-nav-hint{display:none}

@media (max-width:900px){
  .panel-nav-wrap{
    grid-column:1/-1;
    position:relative;
    display:grid;
    grid-template-columns:32px minmax(0,1fr) 32px;
    grid-template-rows:auto 20px;
    gap:4px 6px;
    align-items:center;
    width:100%;
    min-width:0;
    padding-top:2px;
  }
  .panel-nav{
    grid-column:2!important;
    grid-row:1!important;
    padding:2px 3px 5px!important;
    scroll-behavior:smooth;
    mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);
  }
  .panel-nav-arrow{
    display:grid;
    place-items:center;
    width:32px;
    height:38px;
    padding:0;
    border:1px solid rgba(255,255,255,.11);
    border-radius:10px;
    background:#121925;
    color:#fff;
    font-size:25px;
    line-height:1;
    cursor:pointer;
    touch-action:manipulation;
    z-index:3;
  }
  .panel-nav-arrow--left{grid-column:1;grid-row:1}
  .panel-nav-arrow--right{grid-column:3;grid-row:1}
  .panel-nav-arrow:disabled{opacity:.28;cursor:default}
  .panel-nav-arrow:not(:disabled):active{transform:scale(.94);background:#1a2433}
  .panel-nav-hint{
    grid-column:1/-1;
    grid-row:2;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:6px;
    height:20px;
    color:rgba(255,255,255,.55);
    font-size:10px;
    letter-spacing:.04em;
    transition:opacity .25s ease,transform .25s ease;
    pointer-events:none;
  }
  .panel-nav-hint b{font-size:14px;color:#8f89ff;animation:panelSwipeHint 1.4s ease-in-out infinite}
  .panel-nav-hint.is-hidden{opacity:0;transform:translateY(-4px)}
  .panel-nav button.active{box-shadow:0 0 0 1px rgba(143,137,255,.18),0 8px 20px rgba(69,61,190,.18)!important}
}

@keyframes panelSwipeHint{0%,100%{transform:translateX(-3px)}50%{transform:translateX(3px)}}

@media (max-width:380px){
  .panel-nav-wrap{grid-template-columns:29px minmax(0,1fr) 29px;gap:4px}
  .panel-nav-arrow{width:29px;height:36px;font-size:22px}
}