/* P.R.M 8.0.1 — طبقة توافق نهائية لكل الشاشات (جوال، تابلت، لابتوب، شاشات كبيرة)
   تُحمَّل آخر شيء عشان تتغلب على luxe/modern/inferno اللي كانت تلغي تعديلات responsive.css */

/* ===== أساسيات لكل الأجهزة ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
.app,.main,.content,.topbar,.card,.dash-panel,.dash-workspace>*,.dash-bottom>*,.inferno-hero{min-width:0!important;max-width:100%}
img,video,iframe{max-width:100%;height:auto}
svg,canvas{max-width:100%}
pre,code,.mono{overflow-wrap:anywhere;word-break:break-word}
.table-wrap,.table-container{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ===== شاشات كبيرة جدًا (2K/4K) ===== */
@media (min-width:1700px){
  .content{max-width:1640px;margin-inline:auto}
  .topbar{max-width:1640px;margin-inline:auto}
}
@media (min-width:2400px){
  html{font-size:112.5%}
  .content,.topbar{max-width:1900px}
}

/* ===== لابتوب صغير وتابلت بالعرض (900–1199) ===== */
@media (min-width:900px) and (max-width:1199px){
  .app{grid-template-columns:248px minmax(0,1fr)!important}
  .main{padding-inline:clamp(14px,2vw,26px)!important}
  .dash-workspace{grid-template-columns:minmax(0,1fr)!important}
  .search-btn{min-width:0!important}
  .inferno-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* ===== تابلت بالطول والجوالات (≤899) ===== */
@media (max-width:899px){
  .app{display:block!important}
  .main{width:100%!important;padding-inline:clamp(10px,3vw,20px)!important}
  .sidebar{width:min(86vw,320px)!important;max-width:min(86vw,320px)!important;overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:calc(20px + env(safe-area-inset-bottom))}
  .dash-workspace{grid-template-columns:minmax(0,1fr)!important}
  .dash-bottom{grid-template-columns:minmax(0,1fr)!important}
  .search-btn{min-width:0!important;flex:1 1 160px}
  .topbar{flex-wrap:wrap;gap:10px}
  .top-actions{flex-wrap:wrap!important;max-width:100%}
  .modal{width:min(560px,calc(100vw - 20px))!important;max-width:calc(100vw - 20px)!important;max-height:calc(100dvh - 30px);overflow-y:auto}
  .bottom-tabs{left:0;right:0;max-width:100vw;overflow-x:auto;scrollbar-width:none}
  .bottom-tabs::-webkit-scrollbar{display:none}
}

/* ===== جوالات (≤600) ===== */
@media (max-width:600px){
  .grid,.stats,.plans-grid,.system-grid,.server-grid,.inferno-status-list{grid-template-columns:minmax(0,1fr)!important}
  .dash-metrics,.dash-shortcuts,.inferno-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .inferno-verify-row{grid-template-columns:minmax(0,1fr)!important}
  .inferno-hero{padding:18px!important;min-height:0!important}
  .inferno-hero h2{font-size:clamp(22px,7vw,30px)!important;letter-spacing:0}
  .dash-welcome{padding:20px 18px!important;flex-direction:column;align-items:stretch!important}
  .dash-welcome .row{justify-content:flex-start!important}
  .topbar h1{font-size:clamp(17px,5vw,21px)!important}
  .topbar .pill{max-width:45vw!important}
  .row>*,.card-head>*,.dash-panel-head>*{max-width:100%}
  table{min-width:480px!important}
  input,select,textarea{font-size:16px!important} /* يمنع تكبير سفاري التلقائي */
  .toast{left:12px!important;right:12px!important;max-width:none!important}
  .login-v6{min-height:100dvh}
  .login-story h1{font-size:clamp(24px,8vw,34px)!important}
}

/* ===== جوالات صغيرة (≤380) ===== */
@media (max-width:380px){
  .dash-metrics,.dash-shortcuts,.inferno-metrics,.inferno-actions{grid-template-columns:minmax(0,1fr)!important}
  .main{padding-inline:8px!important}
  .top-actions>.btn,.top-actions>button{flex:1 1 auto}
  table{min-width:420px!important}
}

/* ===== جوال بالعرض (ارتفاع قصير) ===== */
@media (max-height:500px) and (orientation:landscape){
  .login-v6{grid-template-columns:minmax(0,1fr)!important}
  /* v12.1: البانر يبقى ظاهر بالعرض — بس أصغر (قبل كان display:none ويختفي الشعار والعنوان) */
  .login-story{display:flex!important;min-height:auto!important;padding:14px 20px!important;border:0!important}
  .login-story .brand{margin-bottom:6px!important}
  .login-story h1{font-size:clamp(18px,4.2vw,26px)!important;margin:6px 0!important;line-height:1.4!important}
  .login-story h1 br{display:none}
  .login-story .hero-banner{max-height:34vh;width:auto;max-width:100%;margin:0 auto 8px!important}
  .login-story>p,.login-highlights,.login-signature{display:none!important}
  .sidebar{max-height:100dvh;overflow-y:auto}
  .main{padding-bottom:calc(80px + env(safe-area-inset-bottom))!important}
}

/* ===== لمس ===== */
@media (pointer:coarse){
  button,.btn,.icon-btn,[role="button"],.bt-tab,select{min-height:42px}
}