/* ================================================================
   NUKHBA SARA — Responsive hardening / visual consistency layer
   Added without changing application logic.
   ================================================================ */
html,body{width:100%;max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box}
img,video,canvas,svg{max-width:100%}
button,input,select,textarea{max-width:100%;font:inherit}

/* ---------------- Student dashboard ---------------- */
.dashboard-app{width:100%;min-width:0;overflow-x:hidden}
.dashboard-main{min-width:0;width:calc(100% - var(--sidebar-width));max-width:100%;overflow-x:hidden}
.dashboard-content{width:100%;min-width:0;max-width:1450px;overflow:visible}
.dashboard-section,.dashboard-card,.settings-card,.security-card,.resource-card,.stat-card,.quick-action,.welcome-card,.profile-hero{min-width:0;max-width:100%}
.section-heading,.pro-card-head,.request-top,.topbar-actions{min-width:0}
.section-heading>div,.pro-card-head>div,.welcome-content,.profile-content{min-width:0}
.info-value,.stat-help,.quick-action small,.resource-card p,.pro-card-note,.pro-field,.form-group{overflow-wrap:anywhere}
.form-input,.pro-field input,.pro-field select,.pro-field textarea,.form-group input,.form-group select,.form-group textarea{min-width:0;max-width:100%}
.table-wrap{width:100%;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain}
.data-table{min-width:680px}

@media (max-width:900px){
  .dashboard-main{width:100%!important;margin-right:0!important}
  .dashboard-content{padding:16px 14px 28px!important}
  .dashboard-topbar{width:100%;padding:10px 14px!important;gap:10px;min-height:68px;height:auto}
  .topbar-title{flex:1;min-width:0;overflow:hidden}
  .topbar-title h1,.topbar-title span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-actions{flex:0 0 auto}
  .welcome-card{width:100%;gap:18px}
  .pro-kpis,.stats-grid,.quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .cert-grid,.security-grid,.resource-grid{grid-template-columns:1fr!important}
  .settings-grid{grid-template-columns:1fr!important}
  .chat-shell{grid-template-columns:1fr!important;min-height:0}
  .chat-info,.chat-main{min-height:0}
  .pro-id-card-stage{grid-template-columns:1fr!important}
  .pro-id-front{grid-template-columns:64px minmax(0,1fr) 62px!important;gap:8px!important}
  .pro-id-avatar{width:64px;height:78px}
  .pro-id-qr{width:62px;height:62px}
  .verification-grid{grid-template-columns:1fr!important}
}

@media (max-width:600px){
  .dashboard-content{padding:12px 10px 26px!important}
  .dashboard-topbar{padding:9px 10px!important}
  .topbar-title h1{font-size:13px!important}
  .topbar-title span{font-size:8px!important}
  .sidebar-open{width:38px!important;height:38px!important;flex:0 0 38px}
  .topbar-profile{max-width:42px;padding:4px!important;gap:0!important}
  .topbar-profile>span:last-child{display:none!important}
  .welcome-card{padding:18px 13px!important;align-items:center!important;text-align:center!important}
  .welcome-content{width:100%;text-align:center!important}
  .welcome-content h2{font-size:18px!important;line-height:1.7}
  .welcome-content p{font-size:9px!important}
  .stats-grid,.quick-grid,.pro-kpis{grid-template-columns:1fr!important}
  .section-heading{align-items:stretch!important;gap:8px}
  .section-heading h2{font-size:17px!important;line-height:1.7}
  .section-heading p{font-size:9px!important}
  .dashboard-card,.settings-card,.security-card,.pro-card{padding:13px!important;border-radius:15px}
  .form-grid,.cert-request-grid{grid-template-columns:1fr!important}
  .form-group.full,.pro-field.full{grid-column:auto!important}
  .form-actions,.pro-action-row,.resource-actions,.barcode-actions{flex-direction:column!important;display:flex!important}
  .form-actions>* ,.pro-action-row>* ,.resource-actions>* ,.barcode-actions>*{width:100%!important;flex:1 1 auto!important}
  .profile-hero{flex-direction:column!important;align-items:center!important;text-align:center!important}
  .profile-content{width:100%;text-align:center}
  .info-grid{grid-template-columns:1fr!important}
  .pro-id-front{grid-template-columns:58px minmax(0,1fr)!important}
  .pro-id-qr{display:none}
  .pro-id-avatar{width:58px;height:72px}
  .pro-id-name{font-size:14px}
  .pro-id-code-row{grid-template-columns:1fr!important}
  .chat-compose{flex-direction:column}
  .chat-compose button{width:100%;min-height:42px}
  .pro-cert-viewer{padding:7px}
  .pro-cert-viewer-box{height:94vh;border-radius:13px}
  .data-table{min-width:620px}
}

@media (max-width:380px){
  .dashboard-content{padding-left:8px!important;padding-right:8px!important}
  .dashboard-topbar{padding-left:8px!important;padding-right:8px!important}
  .dashboard-card,.settings-card,.security-card,.pro-card{padding:11px!important}
  .welcome-card{padding:15px 10px!important}
  .section-heading h2{font-size:15px!important}
}

/* ---------------- Admin dashboard ---------------- */
.admin-app,.main,.content,.content-section{min-width:0;max-width:100%;overflow-x:hidden}
.content{width:100%}
.section-card,.card,.users-grid,.resource-grid,.stats{min-width:0;max-width:100%}
.form-row{min-width:0}
.form-group,.inline-edit-form{min-width:0;max-width:100%}
.form-group input,.form-group select,.form-group textarea,.inline-edit-form input,.inline-edit-form textarea{min-width:0;max-width:100%}
.table-wrap{max-width:100%;overflow-x:auto}

@media(max-width:800px){
  .main{width:100%!important;margin-right:0!important}
  .content{padding:14px 11px 30px!important}
  .topbar{width:100%;min-height:64px;height:auto;padding:9px 10px!important;gap:7px}
  .topbar-title{min-width:0;flex:1}
  .topbar-title h1{font-size:14px!important;line-height:1.6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-title p{font-size:8px!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .admin-top{min-width:0;flex:0 0 auto}
  .admin-top-avatar{width:35px;height:35px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .users-grid,.resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .form-row{grid-template-columns:1fr!important}
}
@media(max-width:520px){
  .content{padding:10px 8px 26px!important}
  .stats,.users-grid,.resource-grid{grid-template-columns:1fr!important}
  .card-header,.card-body{padding:12px!important}
  .section-heading{gap:7px}
  .section-heading h2{font-size:15px!important;line-height:1.7}
  .modal{padding:7px!important}
  .modal-box{width:100%!important;max-width:100%!important;max-height:calc(100dvh - 14px)!important;overflow:auto}
  .admin-top span{max-width:90px}
}

/* ---------------- Seamless book loop ---------------- */
#books-section .relative.w-full.overflow-hidden{overflow:hidden!important}
#books-section .animate-book-marquee{display:flex!important;align-items:stretch!important;width:max-content!important;gap:0!important;padding:0!important;margin:0!important;animation:infiniteBookMarquee 24s linear infinite!important;will-change:transform}
#books-section .book-marquee-set{display:flex!important;align-items:stretch!important;gap:0!important;padding:0!important;margin:0!important;flex:0 0 auto!important;width:max-content!important}
#books-section .book-marquee-set>*{margin:0!important;border-radius:0!important;box-shadow:none!important}
#books-section .book-marquee-set>*+*{border-right:0}
#books-section .book-marquee-set:first-child>*:first-child,#books-section .book-marquee-set:nth-child(2)>*:first-child{border-right:1px solid #e2e8f0}
@keyframes infiniteBookMarquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
@media(max-width:639px){#books-section .animate-book-marquee{animation-duration:20s!important}}
@media(prefers-reduced-motion:reduce){#books-section .animate-book-marquee{animation:none!important;overflow:auto!important;transform:none!important}}

/* ---------------- Homepage stories ---------------- */
.nk-story-section{position:relative;background:linear-gradient(180deg,#f7fbf8 0%,#fff 100%);border-bottom:1px solid #e5eee8;overflow:hidden}
.nk-story-shell{width:100%;max-width:1180px;margin:0 auto;padding:0 16px}
.nk-story-row{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:flex-start;gap:14px;overflow-x:auto;overflow-y:hidden;padding:5px 2px 12px;scroll-snap-type:x proximity;direction:rtl;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.nk-story-row::-webkit-scrollbar{display:none}
.nk-story-item{flex:0 0 92px!important;width:92px;min-width:92px;max-width:92px;display:block;text-align:center;cursor:pointer;border:0;background:transparent;padding:0;font-family:inherit;scroll-snap-align:start}
.nk-story-ring{display:block;width:82px;height:82px;margin:0 auto;border-radius:50%;padding:3px;background:conic-gradient(#16a34a,#22c55e,#15803d,#4ade80,#16a34a);box-shadow:0 7px 20px rgba(22,163,74,.15)}
.nk-story-ring img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid #fff;background:#edf7f0}
.nk-story-name{display:block;margin-top:7px;font-size:10px;font-weight:900;color:#26342c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.nk-story-count{display:block;margin-top:2px;font-size:9px;color:#6d7972;line-height:1.4}
.nk-story-empty{min-width:100%;padding:18px;text-align:center;border:1px dashed #cfe0d5;border-radius:16px;color:#718078;font-size:10px;background:#fbfdfc}
.nk-story-modal{z-index:99999}
.nk-story-viewer{width:min(430px,100%);height:min(820px,92dvh);max-height:92dvh}
.nk-story-media-host{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#07140c}
.nk-story-media{display:block;width:100%;height:100%;object-fit:cover}
.nk-story-media-host video.nk-story-media{background:#000}
.nk-story-open{overflow:hidden}
.nk-story-like.liked{background:#ef4444!important}
@media(max-width:639px){
  .nk-story-shell{padding:0 10px}
  .nk-story-head{align-items:flex-start;flex-direction:column;gap:5px;margin-bottom:12px}
  .nk-story-head h2{font-size:18px}
  .nk-story-head p{font-size:9px}
  .nk-story-row{gap:10px;padding-bottom:10px}
  .nk-story-item{flex-basis:78px!important;width:78px;min-width:78px;max-width:78px}
  .nk-story-ring{width:70px;height:70px}
  .nk-story-ring img{border-width:2px}
  .nk-story-name{font-size:9px;margin-top:6px}
  .nk-story-count{font-size:8px}
  .nk-story-modal{padding:0}
  .nk-story-viewer{width:100%;height:100dvh;max-height:100dvh;border-radius:0}
  .nk-story-close{width:36px;height:36px}
}