/* =========================================================
   کتابخانه آنلاین — لایهٔ ریسپانسیو حرفه‌ای
   (موبایل / تبلت / دسکتاپ) — بعد از app.css و extra.css بارگذاری می‌شود
   ========================================================= */

img, canvas, iframe, video { max-width: 100%; }
html { -webkit-text-size-adjust: 100%; }

/* ---------- هدر سایت: منوی موبایل ---------- */
.topbar{position:sticky;top:0;z-index:60}
.topbar-inner{gap:20px}
.header-collapse{display:flex;align-items:center;gap:20px;flex:1;min-width:0}
.header-collapse .main-nav{flex:none}
.header-collapse .search-box{flex:1 1 auto;min-width:0;max-width:260px;margin-inline-start:auto}
.header-actions{display:flex;align-items:center;gap:10px;flex:none}
.brand{flex:none;min-width:0}
.brand-text{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.brand-text b{font-size:14px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-text small{font-size:9.5px;color:var(--muted)}
.menu-toggle{
  display:none;align-items:center;justify-content:center;width:42px;height:42px;flex:none;
  border:1px solid var(--line);background:#fff;border-radius:12px;color:#3d4f48;cursor:pointer;
}
.menu-toggle:hover{border-color:var(--brand-2);color:var(--brand)}
.menu-toggle .ic{width:20px;height:20px}

/* ---------- ریسپانسیو عمومی ---------- */
.container{padding:24px 22px 56px}
.section-head{flex-wrap:wrap;gap:10px}
.section-head h2{font-size:22px;line-height:1.5}
.pagination{flex-wrap:wrap}
.book-actions .btn{white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap table{min-width:640px}
.form-actions{flex-wrap:wrap}
.panel{padding:18px}

/* ---------- مرور کتاب‌ها (کاربر) ---------- */
.book-grid{align-items:stretch}
.book-card{display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent}
.book-card:active{transform:translateY(-2px)}
.book-card .book-cover{flex:none}
.book-card .book-body{display:flex;flex-direction:column;flex:1;min-width:0}
.book-card .book-actions{margin-top:auto}
.book-card .book-title a{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chips{scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.chip{scroll-snap-align:start}
.search-box{min-width:0}

/* ---------- تبلت ---------- */
@media (max-width:1024px){
  .topbar-inner{gap:14px}
  .header-collapse{gap:14px}
  .header-collapse .search-box{max-width:200px}
  .stat-card b{font-size:19px}
  .kstat b{font-size:24px}
}

/* ---------- موبایل / تبلت کوچک ---------- */
@media (max-width:900px){
  .topbar-inner{flex-wrap:nowrap;justify-content:flex-start;gap:12px;padding:10px 14px}
  .brand{margin-inline-end:auto}
  .menu-toggle{display:inline-flex;order:2}
  .brand-text small{display:none}
  .header-collapse{
    display:none;position:absolute;top:100%;left:0;right:0;z-index:80;
    flex-direction:column;align-items:stretch;gap:14px;background:#fff;
    border-bottom:1px solid var(--line);padding:16px 16px 20px;
    box-shadow:0 20px 40px rgba(15,46,37,.14);max-height:calc(100vh - 64px);overflow-y:auto;
  }
  .topbar.header-open .header-collapse{display:flex;animation:menuDrop .2s ease}
  .header-collapse .main-nav{flex-direction:column;gap:2px;background:#f1f5f3;border-radius:14px;padding:6px;order:0;width:100%}
  .header-collapse .nav-btn{justify-content:space-between;text-align:right;padding:12px 14px;font-size:13.5px;border-radius:10px}
  .header-collapse .nav-btn.active{box-shadow:none;background:var(--brand);color:#fff}
  .header-collapse .nav-btn.active .nav-badge{background:rgba(255,255,255,.22);color:#fff}
  .header-collapse .search-box{max-width:none;margin:0;width:100%;order:1}
  .header-actions{order:2;flex-wrap:wrap;gap:8px;width:100%;padding-top:12px;border-top:1px solid var(--line)}
  .header-actions .header-admin{width:100%;justify-content:center;padding:11px}
  .header-actions .user-chip{border-inline-start:0;padding-inline-start:0;margin-inline-end:auto}
  .header-actions .user-chip .avatar{width:38px;height:38px;border-radius:12px}
  .header-actions .user-chip-meta strong{font-size:13px;white-space:nowrap}
  .header-actions .user-chip-meta span{font-size:10.5px}
  .header-actions form{flex:none}
  .header-actions .btn-sm{padding:9px 14px}
  @keyframes menuDrop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  .container{padding:20px 16px 48px}
  .hero{padding:28px 22px;grid-template-columns:1fr}
  .hero h1{font-size:28px}
  .hero-visual{display:none}
  .hero-stats{flex-wrap:wrap;gap:22px;margin:20px 0}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:18px}

  .book-detail{grid-template-columns:1fr;gap:22px}
  .book-detail-cover{max-width:230px;margin:0 auto}
  .book-detail-actions{flex-wrap:wrap}

  /* پیشخوان: نوار بالا به‌جای سایدبار */
  .admin .sidebar{
    position:sticky;top:0;z-index:70;flex-direction:row;align-items:center;gap:10px;
    width:100%;height:auto;padding:10px 12px;overflow-x:auto;overflow-y:hidden;
  }
  .admin .sidebar .brand{flex:none;padding:0 4px 0 0}
  .admin .sidebar .brand > div{display:none}
  .admin .side-nav{
    flex-direction:row;flex:1;gap:6px;background:transparent;border:0;padding:0;
    overflow-x:auto;scrollbar-width:none;
  }
  .admin .side-nav::-webkit-scrollbar{display:none}
  .admin .nav-item{white-space:nowrap;scroll-snap-align:start}
  .admin .admin-site-link{display:none}
  .admin-main{padding:18px 16px 46px}
  .admin-head{align-items:center}
  .admin-head h1{font-size:21px}
  .admin-tools{width:100%;gap:8px}
  .admin-search{flex:1;width:auto}
  .admin-body{padding:18px 16px 46px}
}

/* ---------- موبایل ---------- */
@media (max-width:640px){
  .brand-text b{font-size:13px}
  .container{padding:16px 13px 42px}
  .hero{padding:24px 18px;border-radius:20px}
  .hero h1{font-size:23px}
  .hero-lead{font-size:13px}
  .hero-stats b{font-size:19px}
  .section-head h2{font-size:19px}
  .count-pill{font-size:11px;padding:3px 10px}
  .toolbar{gap:10px}
  .chips{gap:14px}
  .chip{padding:7px 13px;font-size:11.5px}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:14px}
  .cover-copy strong{font-size:15px}
  .book-body{padding:11px 12px 12px}
  .book-title{font-size:12.5px}
  .book-meta{gap:9px;margin:8px 0 10px}
  .book-actions .btn{padding:7px 9px;font-size:11px}
  .book-actions .btn.icon-only{width:34px;height:34px}

  .book-detail-actions{flex-direction:column;align-items:stretch}
  .book-detail-actions .btn{width:100%;justify-content:center}
  .book-detail-meta{grid-template-columns:1fr 1fr}

  /* فرم‌ها */
  .form-row{grid-template-columns:1fr !important}
  .form-actions{flex-direction:column;align-items:stretch}
  .form-actions .btn{width:100%;justify-content:center}
  .field{margin-bottom:14px}
  .cat-form{flex-wrap:wrap}
  .cat-form .input{min-width:180px;flex:1}
  .cat-form .btn{width:100%}
  .panel input[type="file"]{width:100%;max-width:100%}

  /* پیشخوان */
  .admin-head h1{font-size:19px}
  .admin-head p{font-size:11px}
  .admin-tools .icon-plain{display:none}
  .stats{gap:10px}
  .kstats{grid-template-columns:1fr 1fr;gap:10px}
  .kstat{padding:14px}
  .kstat b{font-size:22px}
  .dash-grid{gap:12px}
  .bars{height:150px;gap:9px}
  .table-toolbar{flex-wrap:wrap;gap:8px}
  .table-toolbar .btn{width:100%;justify-content:center}
  .pagination{justify-content:center}

  /* خوانندهٔ PDF */
  .pdf-topbar-inner{padding:8px 12px;gap:8px;row-gap:8px;flex-wrap:wrap}
  .pdf-title{font-size:12px;flex:1 1 auto;min-width:0;order:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pdf-title small{display:none}
  .pdf-toolbar{
    order:3;margin-inline-start:0;width:100%;justify-content:flex-start;gap:6px;
    flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;scrollbar-width:none;
  }
  .pdf-toolbar::-webkit-scrollbar{display:none}
  .pdf-zoom-label{display:none}
  .pdf-btn{min-width:36px;height:36px;padding:0 9px;font-size:11.5px}
  .pdf-pager{height:36px;flex:none}
  .pdf-stage{padding:14px 8px 40px}
  .pdf-pages{gap:14px}

  /* ورود / ثبت‌نام */
  .login{padding:24px 14px}
  .login-panel{padding:20px 14px}
  .login-card{padding:26px 20px 24px;border-radius:18px}
  .login-card h2{font-size:22px}
  .login-card .lead{margin-bottom:22px}
  .login-art-copy h1{font-size:30px}
  .books-stack{height:230px}
  .stack-book{width:118px;height:170px;padding:14px 12px}
  .stack-book strong{font-size:15px}

  /* پیام‌ها */
  .toast{left:12px;right:12px;bottom:12px;max-width:none}
  .alert{font-size:12.5px}
  .empty-state{padding:40px 18px}
}

@media (max-width:480px){
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(136px,1fr))}
  .hero-stats{gap:16px}
  .login-marks{gap:16px;font-size:10px}
  .login-marks b{font-size:18px}
}

/* ---------- جدول‌های پیشخوان در موبایل: حالت کارتی ---------- */
@media (max-width:700px){
  .table-wrap{overflow:visible}
  .table-wrap table{min-width:0;width:100%;display:block}
  .table-wrap thead{display:none}
  .table-wrap tbody{display:block}
  .table-wrap tr{
    display:block;background:#fff;border:1px solid var(--line);border-radius:14px;
    padding:12px 14px;margin-bottom:12px;box-shadow:var(--shadow-sm);
  }
  .table-wrap tbody tr:last-child{margin-bottom:0}
  .table-wrap td{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    border:0;padding:7px 0;font-size:12.5px;width:100%;
  }
  .table-wrap td:before{
    content:attr(data-label);color:var(--muted);font-size:11px;font-weight:700;flex:none;
  }
  .table-wrap td:not([data-label]):before{content:""}
  .table-wrap td[colspan]{justify-content:center}
  .table-wrap td.row-actions{
    border-top:1px dashed var(--line);margin-top:6px;padding-top:10px;
    flex-wrap:wrap;justify-content:flex-start;gap:8px;
  }
  .table-wrap td.row-actions:before{margin-inline-end:auto}
  .table-wrap td.row-actions .icon-btn{margin:0}
  .table-wrap td.row-actions .btn{margin:0}
  .table-wrap td.row-actions form{margin:0}
  .table-wrap .book-cell,.table-wrap .user-cell{min-width:0}
  .table-wrap .book-cell{justify-content:flex-start}
  .table-wrap .book-cell > div{min-width:0}
}

/* ---------- مرور کتاب‌ها توسط کاربر: چیدمان منظم و حرفه‌ای ---------- */
@media (max-width:900px){
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:16px}
  .toolbar{gap:12px}
  .section-head{margin-bottom:14px}
  .section-head h2{font-size:20px}
}

@media (max-width:640px){
  .container{padding:16px 13px 44px}
  .hero{margin-bottom:22px}
  .hero-stats{gap:18px;margin:18px 0 0}
  .hero-stats b{font-size:18px}
  .hero-stats span{font-size:10.5px}

  .section-head{align-items:center;gap:8px}
  .section-head > div{min-width:0}
  .section-head h2{font-size:18px}
  .section-head p{font-size:11px;line-height:1.7}
  .count-pill{font-size:10.5px;padding:4px 10px;flex:none}

  .toolbar{flex-direction:column;align-items:stretch;gap:10px;margin-bottom:18px}
  .search-box{width:100%;min-width:0}
  .search-box input{padding:11px 40px 11px 14px;font-size:12.5px;border-radius:12px}
  .chips{
    width:100%;flex-wrap:wrap;gap:7px;padding:2px 0 0;overflow:visible;
    scroll-snap-type:none;scrollbar-width:none;
  }
  .chips::-webkit-scrollbar{display:none}
  .chip{flex:0 0 auto;padding:7px 13px;font-size:11px;scroll-snap-align:none}
  .chip.active{box-shadow:0 4px 12px rgba(15,118,110,.2)}

  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:stretch}
  .book-card{border-radius:14px;height:100%}
  .book-card:hover{transform:none}
  .book-cover{padding:12px;aspect-ratio:3/3.8}
  .cover-cat{font-size:8.5px;padding:2px 7px;margin-bottom:6px}
  .cover-copy strong{
    font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;min-height:calc(1.5em * 2);
  }
  .cover-author{font-size:9.5px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .cover-flag{top:9px;right:9px;font-size:8.5px;padding:2px 7px}
  .fav-btn{top:8px;left:8px;width:29px;height:29px}
  .fav-btn .ic{width:14px;height:14px}
  .book-body{padding:10px 11px 11px;gap:0}
  .book-title{font-size:12.5px;line-height:1.6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-author{font-size:10px;margin-top:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .book-meta{gap:9px;font-size:9.5px;margin:8px 0 9px}
  .book-meta .ic{width:12px;height:12px}
  .book-actions{gap:6px}
  .book-actions .btn{flex:1;justify-content:center;padding:7px 8px;font-size:10.5px;border-radius:9px}
  .book-actions .btn.icon-only{flex:none;width:32px;height:32px}

  .empty-state{padding:44px 16px;border-radius:16px}
  .empty-state .empty-icon{width:54px;height:54px;border-radius:16px}
  .empty-state h3{font-size:14.5px}
  .empty-state p{font-size:11.5px}
}

@media (max-width:380px){
  .book-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .cover-copy strong{font-size:13px}
  .book-title{font-size:11.5px}
  .book-actions .btn{font-size:10px}
}

/* ---------- صفحه‌های لمسی: هدف‌های بزرگ‌تر ---------- */
@media (hover:none){
  .nav-btn,.chip,.btn,.page-btn,.icon-btn,.icon-plain,.fav-btn,.pdf-btn{min-height:40px}
  .fav-btn{width:36px;height:36px}
}