/* PLV shared responsive polish. Loaded after page-level styles. */
@font-face{font-family:"Phosphor";src:url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/regular/Phosphor.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"Phosphor-Fill";src:url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/fill/Phosphor-Fill.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}
@font-face{font-family:"Phosphor-Bold";src:url("https://unpkg.com/@phosphor-icons/web@2.1.2/src/bold/Phosphor-Bold.woff2") format("woff2");font-weight:normal;font-style:normal;font-display:swap}
*{box-sizing:border-box;min-width:0}
html{width:100%;max-width:100%;overflow-x:hidden;text-size-adjust:100%;-webkit-text-size-adjust:100%}
body{width:100%;max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%;height:auto}
button,a,input,select,textarea{font:inherit}
input,select,textarea{max-width:100%;min-width:0}
textarea{line-height:1.5}
.glass,.card,.panel,.modal-box,.modal-card,.lock-card{max-width:100%}
.table-wrap,.table-container,.records-table-wrap,.spreadsheet-wrap,.master-table-wrap,.attendance-table-wrap,.grades-table-wrap,.scores-table-wrap,.accounts-table-wrap,.list-table-wrap,.data-table-wrap{max-width:100%;overflow-x:auto;overflow-y:visible;-webkit-overflow-scrolling:touch;scrollbar-gutter:stable}
table{max-width:100%;border-collapse:separate}
.btn,button{min-height:42px;touch-action:manipulation}
.btn:not(.btn-icon),button:not(.icon-btn):not(.btn-icon){white-space:normal}
.header,.topbar,.toolbar,.filters,.actions,.modal-actions,.form-actions,.header-actions{flex-wrap:wrap}
.header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:0 0 auto;margin-left:auto;flex-wrap:nowrap!important}
.header-actions>.icon-btn{margin:0!important;flex:0 0 auto}
.header h1,.page-title h1,.main-wrapper h1{font-size:clamp(24px,5vw,38px);line-height:1.12}
.header p,.page-title p{font-size:clamp(13px,2.8vw,16px);line-height:1.55}
.sidebar .nav-item a{transition:background-color .22s ease,color .22s ease,transform .22s ease,box-shadow .22s ease!important}
.sidebar .nav-item a:focus-visible,.mobile-nav-bar a:focus-visible{outline:3px solid color-mix(in srgb,var(--accent-primary,#2563eb) 38%,transparent)!important;outline-offset:2px!important}
@media (hover:hover){.sidebar .nav-item a:hover{transform:translateX(3px)}}

/* Shared performance layer: retain the glass look without continuously repainting the page. */
.ambient-mesh .blob{animation:none!important;filter:blur(96px)!important;will-change:auto!important;transform:translate3d(0,0,0)}
.glass,.sidebar,.mobile-nav-bar{backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
.section-card{content-visibility:auto;contain-intrinsic-size:auto 420px}
.student-card{content-visibility:auto;contain-intrinsic-size:auto 110px}
.activity-item,
.announce-item{content-visibility:auto;contain-intrinsic-size:auto 86px}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media (max-width:1180px){
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{padding:30px 24px!important}
  .dashboard-grid,.cards-grid,.stats-grid,.content-grid,.records-grid,.settings-grid,.form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))!important}
  .panel,.card,.glass{border-radius:20px}
}

@media (max-width:900px){
  body{display:block!important;min-height:100svh}
  .ambient-mesh{position:fixed}
  .sidebar{position:sticky!important;top:0!important;z-index:900!important;width:100%!important;min-width:0!important;max-width:none!important;height:auto!important;max-height:none!important;padding:14px 14px!important;display:flex!important;flex-direction:row!important;align-items:center!important;gap:12px!important;overflow-x:auto!important;overflow-y:hidden!important;border-right:0!important;border-bottom:1px solid var(--glass-border,rgba(148,163,184,.25))!important;background:rgba(255,255,255,.72)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;scrollbar-width:none!important}
  .dark-theme .sidebar,body.dark-theme .sidebar{background:rgba(4,9,20,.78)!important;border-bottom-color:rgba(255,255,255,.08)!important}
  .sidebar::-webkit-scrollbar{display:none}
  .logo-container{margin:0!important;padding:0!important;gap:10px!important;flex:0 0 auto!important}
  .logo-img,.logo-container img{width:44px!important;height:44px!important}
  .logo-text h2{font-size:18px!important;line-height:1.05!important}
  .logo-text p{font-size:10px!important;line-height:1.2!important}
  .nav-menu{display:flex!important;flex:1 1 auto!important;flex-direction:row!important;gap:8px!important;overflow-x:auto!important;overflow-y:hidden!important;padding:2px 2px 4px!important;scrollbar-width:none!important}
  .nav-menu::-webkit-scrollbar{display:none}
  .nav-item{flex:0 0 auto!important}
  .nav-item a{min-height:44px!important;padding:10px 13px!important;border-radius:14px!important;white-space:nowrap!important;font-size:13px!important;gap:8px!important}
  .nav-item a i{font-size:20px!important}
  .nav-item[style*="margin-top"]{margin-top:0!important}
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{width:100%!important;max-width:100%!important;margin:0!important;padding:22px 16px 92px!important}
  .header,.topbar,.page-header{align-items:flex-start!important;gap:12px!important}
  .icon-btn,.theme-toggle{width:46px!important;height:46px!important;flex:0 0 auto!important}
  .form-grid,.grid-2,.grid-3,.profile-grid,.settings-grid{grid-template-columns:1fr!important}
  .filters,.toolbar,.actions{gap:9px!important}
  .filters>* ,.toolbar>*{flex:1 1 min(100%,220px)!important}
  .modal-overlay,.modal,.security-lock{padding:14px!important}
  .modal-box,.modal-card,.lock-card{width:min(100%,680px)!important;max-height:calc(100svh - 28px)!important;overflow:auto!important;border-radius:22px!important;padding:22px!important}
  .glass,.sidebar,.mobile-nav-bar{backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important}
}

@media (max-width:760px){
  body:has(.mobile-nav-bar) .main-wrapper,body:has(.mobile-nav-bar) .main-content,body:has(.mobile-nav-bar) .content{padding-bottom:calc(104px + env(safe-area-inset-bottom))!important}
  body:has(.mobile-nav-bar) .sidebar .nav-menu{display:none!important}
  body:has(.mobile-nav-bar) .mobile-nav-bar{display:block!important;position:fixed!important;inset:auto 0 0!important;z-index:1200!important;padding:5px 0 max(7px,env(safe-area-inset-bottom))!important;border-top:1px solid var(--glass-border,rgba(148,163,184,.22))!important;background:rgba(248,250,252,.94)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;box-shadow:0 -14px 38px rgba(15,23,42,.14)!important;isolation:isolate}
  body.dark-theme:has(.mobile-nav-bar) .mobile-nav-bar,.dark-theme .mobile-nav-bar{background:rgba(4,9,20,.94)!important;border-top-color:rgba(255,255,255,.08)!important}
  .mobile-nav-bar ul{display:flex!important;align-items:stretch!important;justify-content:flex-start!important;gap:4px!important;width:100%!important;max-width:100%!important;margin:0!important;padding:2px 10px!important;overflow-x:auto!important;overflow-y:hidden!important;list-style:none!important;scrollbar-width:none!important;-ms-overflow-style:none!important;-webkit-overflow-scrolling:touch!important;overscroll-behavior-x:contain!important;scroll-behavior:smooth!important;scroll-snap-type:x proximity!important;touch-action:pan-x!important}
  .mobile-nav-bar ul::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
  .mobile-nav-bar ul>li{flex:0 0 72px!important;width:72px!important;min-width:72px!important;max-width:72px!important;margin:0!important;padding:0!important;scroll-snap-align:center!important}
  .mobile-nav-bar ul>li>a{position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:4px!important;width:100%!important;min-width:0!important;min-height:60px!important;margin:0!important;padding:7px 5px 8px!important;border:1px solid transparent!important;border-radius:16px!important;background:transparent!important;color:var(--text-muted,#64748b)!important;text-decoration:none!important;text-align:center!important;font-size:9px!important;font-weight:800!important;line-height:1.05!important;letter-spacing:.15px!important;text-transform:uppercase!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;box-shadow:none!important;transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease!important;-webkit-tap-highlight-color:transparent!important;touch-action:manipulation!important}
  .mobile-nav-bar ul>li>a i{display:block!important;flex:0 0 auto!important;font-size:23px!important;line-height:1!important;transition:transform .2s ease!important}
  .mobile-nav-bar ul>li>a:hover{color:var(--accent-primary,#2563eb)!important;background:var(--accent-light,rgba(37,99,235,.08))!important}
  .mobile-nav-bar ul>li>a.active,.mobile-nav-bar ul>li>a[aria-current="page"]{color:var(--accent-primary,#2563eb)!important;background:var(--accent-light,rgba(37,99,235,.1))!important;border-color:color-mix(in srgb,var(--accent-primary,#2563eb) 16%,transparent)!important;box-shadow:0 6px 16px color-mix(in srgb,var(--accent-primary,#2563eb) 13%,transparent)!important;transform:translateY(-2px)!important}
  .mobile-nav-bar ul>li>a.active i,.mobile-nav-bar ul>li>a[aria-current="page"] i{transform:scale(1.08)!important}
  .mobile-nav-bar ul>li>a.active::after,.mobile-nav-bar ul>li>a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:3px;width:4px;height:4px;border-radius:50%;background:currentColor;transform:translateX(-50%)}
  .header h1,.page-title h1{font-size:clamp(23px,7vw,30px)!important}
  .header{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;align-items:start!important;column-gap:12px!important;row-gap:10px!important;width:100%!important}
  .header-actions{align-self:start!important;gap:8px!important;margin-left:0!important}
  .header-actions>.icon-btn{width:44px!important;height:44px!important}
  .panel,.card,.glass{border-radius:18px!important}
  .panel,.card{padding:18px!important}
  .table-wrap,.table-container,.records-table-wrap{margin-inline:-6px;padding-inline:6px}
  .btn{justify-content:center}
}

@media (max-width:370px){
  .mobile-nav-bar ul{padding-inline:7px!important}
  .mobile-nav-bar ul>li{flex-basis:68px!important;width:68px!important;min-width:68px!important;max-width:68px!important}
  .mobile-nav-bar ul>li>a{font-size:8.5px!important;padding-inline:3px!important}
}

@media (max-width:520px){
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{padding-inline:12px!important}
  .logo-text p{display:none!important}
  .nav-item a{font-size:12px!important;padding:9px 11px!important}
  .filters>* ,.toolbar>* ,.actions .btn,.actions button{flex:1 1 100%!important;width:100%!important}
  input,select,textarea{font-size:16px!important}
  .modal-actions{display:grid!important;grid-template-columns:1fr!important}
  .modal-actions .btn,.modal-actions button{width:100%!important;justify-content:center!important}
  .header{column-gap:9px!important}
  .header-actions{gap:7px!important}
  .header-actions>.icon-btn{width:42px!important;height:42px!important}
}

/* Login page */
@media (max-width:760px){
  .login-card,.auth-card,.login-box{width:min(100%,420px)!important;margin-inline:auto!important;border-radius:24px!important}
  .school-header,.brand-header{padding-inline:16px!important}
}

/* Global application responsive system. */
:root{
  --plv-mobile-gutter:clamp(12px,4vw,20px);
  --plv-touch-target:46px;
  --plv-mobile-radius:18px;
}
body{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
::selection{background:color-mix(in srgb,var(--accent-primary,#2563eb) 22%,transparent);color:var(--text-main,#0f172a)}
:where(h1,h2,h3,h4,p,span,label,td,th){overflow-wrap:anywhere}
:where(button,a,input,select,textarea,[role="button"],[tabindex]):focus-visible{
  outline:3px solid color-mix(in srgb,var(--accent-primary,#2563eb) 42%,transparent)!important;
  outline-offset:3px!important;
}
:where(button,a,[role="button"]){-webkit-tap-highlight-color:transparent}
:where(button,input,select,textarea):disabled{cursor:not-allowed;opacity:.58}
.card-header,.section-header,.modal-header,.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-header>:first-child,.section-header>:first-child,.modal-header>:first-child,.modal-head>:first-child{min-width:0}
.badge,.status-badge,.chip{font-variant-numeric:tabular-nums}

@media (pointer:coarse){
  :where(button,.btn,.icon-btn,.btn-icon,[role="button"],input,select){min-height:var(--plv-touch-target)}
  :where(button,.btn,.icon-btn,.btn-icon,[role="button"]){touch-action:manipulation}
}

@media (max-width:900px){
  .sidebar{padding-top:max(14px,env(safe-area-inset-top))!important;padding-left:max(14px,env(safe-area-inset-left))!important;padding-right:max(14px,env(safe-area-inset-right))!important}
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{
    padding-left:max(16px,env(safe-area-inset-left))!important;
    padding-right:max(16px,env(safe-area-inset-right))!important;
  }
  .header>div:first-child,.page-header>div:first-child{min-width:0}
  .toolbar,.directory-toolbar,.filter-row,.filter-bar,.table-controls-wrapper{max-width:100%}
  .card-header,.section-header{flex-wrap:wrap}
  .modal-overlay,.modal,.security-lock{padding-top:max(14px,env(safe-area-inset-top))!important;padding-right:max(14px,env(safe-area-inset-right))!important;padding-bottom:max(14px,env(safe-area-inset-bottom))!important;padding-left:max(14px,env(safe-area-inset-left))!important}
}

@media (max-width:760px){
  body{min-height:100svh;overscroll-behavior-x:none}
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{gap:18px!important}
  body:has(.mobile-nav-bar) .main-wrapper,body:has(.mobile-nav-bar) .main-content,body:has(.mobile-nav-bar) .content{
    padding-bottom:calc(92px + env(safe-area-inset-bottom))!important;
  }
  .header,.page-header,.topbar{margin-bottom:2px!important}
  .header h1,.page-title h1{letter-spacing:-.7px!important}
  .header p,.page-title p{margin-top:4px!important}
  .card.records-card{padding:0!important}
  .card.card-hero,.card.card-mega-hero,.card.card-hero-summary{padding:22px!important}
  .card-header,.section-header{align-items:flex-start!important;gap:10px!important}
  .card-header h2,.card-header h3,.section-header h2,.section-header h3{font-size:clamp(16px,4.6vw,20px)!important;line-height:1.25!important}
  .bento-grid,.dashboard-grid,.cards-grid,.stats-grid,.content-grid,.records-grid{gap:14px!important}
  .hero-layout,.hero-top-row,.summary-stats{gap:18px!important}
  .hero-stats{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px 14px!important}
  .hero-stats>div[style*="width:1px"]{display:none!important}
  .hero-stat .value{font-size:clamp(27px,8vw,34px)!important}
  .stat-card{min-height:104px!important;padding:16px!important;gap:12px!important}
  .stat-icon{width:42px!important;height:42px!important;border-radius:13px!important}
  .form-grid,.grid-2,.grid-3,.info-grid,.profile-grid,.settings-grid,.del-mode-grid{grid-template-columns:1fr!important;gap:14px!important}
  .form-group.full,.form-section-title{grid-column:1/-1!important}
  .form-group label,.filter-control label{display:block;margin-bottom:7px;font-size:11px!important;font-weight:800!important;letter-spacing:.45px}
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),select,textarea{
    min-height:48px!important;
    border-radius:12px!important;
  }
  textarea{min-height:112px!important;resize:vertical}
  .filters,.filter-row,.filter-bar,.toolbar,.directory-toolbar,.table-controls-wrapper{gap:10px!important}
  .filters>*,.filter-row>*,.filter-bar>*,.toolbar>*,.directory-toolbar>*{min-width:0!important;max-width:100%!important}
  .tabs,.tab-controls,.term-toggle,.score-filter-group{
    max-width:100%!important;
    overflow-x:auto!important;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .tabs::-webkit-scrollbar,.tab-controls::-webkit-scrollbar,.term-toggle::-webkit-scrollbar,.score-filter-group::-webkit-scrollbar{display:none}
  .tab-btn,.term-btn,.score-filter-btn{min-height:44px!important;flex:0 0 auto}
  .table-wrap,.table-container,.records-table-wrap,.spreadsheet-wrap,.master-table-wrap,.attendance-table-wrap,.grades-table-wrap,.scores-table-wrap,.accounts-table-wrap,.list-table-wrap,.data-table-wrap,.grid-scroll,.ss-wrap,.batch-table-wrap{
    border-radius:14px!important;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
    scrollbar-gutter:stable;
  }
  :where(.modern-table,.grid-table,.batch-table,.ranking-table,.ss-table) th{padding:12px 13px!important;font-size:10px!important;white-space:nowrap}
  :where(.modern-table,.grid-table,.batch-table,.ranking-table,.ss-table) td{padding:12px 13px!important;font-size:12px!important}
  .modal-box,.modal-card,.modal-content,.lock-card,.del-modal-box,.qr-large-modal-box{
    width:min(100%,680px)!important;
    max-width:100%!important;
    max-height:calc(100svh - 28px)!important;
    border-radius:22px!important;
    padding:20px!important;
    overscroll-behavior:contain;
  }
  .modal-close-btn,.close-modal{width:44px!important;height:44px!important;min-height:44px!important;flex:0 0 auto}
  .modal-actions,.form-actions{gap:10px!important}
  .mobile-nav-bar{padding-left:env(safe-area-inset-left)!important;padding-right:env(safe-area-inset-right)!important}
  .mobile-nav-bar ul:not(:has(>li:nth-child(7))){justify-content:space-around!important;overflow-x:hidden!important;scroll-snap-type:none!important}
  .mobile-nav-bar ul:not(:has(>li:nth-child(7)))>li{flex:1 1 0!important;width:auto!important;min-width:0!important;max-width:none!important}
  .mobile-nav-bar ul:not(:has(>li:nth-child(7)))>li>a{padding-inline:2px!important}
}

@media (max-width:520px){
  :root{--plv-mobile-gutter:12px;--plv-mobile-radius:16px}
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{
    padding-left:max(12px,env(safe-area-inset-left))!important;
    padding-right:max(12px,env(safe-area-inset-right))!important;
  }
  .sidebar{min-height:64px!important;padding-block:10px!important}
  .logo-img,.logo-container img{width:40px!important;height:40px!important}
  .logo-text h2{font-size:17px!important}
  .panel,.card:not(.records-card):not(.card-hero):not(.card-mega-hero):not(.card-hero-summary){padding:16px!important}
  .card.card-hero,.card.card-mega-hero,.card.card-hero-summary{padding:20px!important}
  .panel,.card,.glass{border-radius:var(--plv-mobile-radius)!important}
  .bento-grid:not(:has(.stat-card)),.dashboard-grid,.cards-grid,.content-grid,.records-grid{grid-template-columns:1fr!important}
  .bento-grid:has(.stat-card){grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .stat-card{min-height:96px!important;padding:14px!important}
  .stat-card .stat-value{font-size:clamp(24px,8vw,29px)!important}
  .actions,.modal-actions,.form-actions{display:grid!important;grid-template-columns:1fr!important;width:100%!important}
  .actions>.btn,.actions>button,.modal-actions>.btn,.modal-actions>button,.form-actions>.btn,.form-actions>button{width:100%!important;justify-content:center!important}
  .modal-overlay,.modal,.security-lock{align-items:flex-end!important;padding:0!important}
  .modal-box,.modal-card,.modal-content,.lock-card,.del-modal-box,.qr-large-modal-box{
    width:100%!important;
    max-height:92svh!important;
    margin:0!important;
    padding:20px max(18px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(18px,env(safe-area-inset-left))!important;
    border-radius:24px 24px 0 0!important;
  }
  .toast{left:max(12px,env(safe-area-inset-left))!important;right:max(12px,env(safe-area-inset-right))!important;bottom:calc(82px + env(safe-area-inset-bottom))!important;width:auto!important;text-align:center}
  .files-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  .file-card{padding:12px!important}
  .mobile-nav-bar ul>li>a{min-height:58px!important;font-size:8.5px!important;border-radius:14px!important}
}

@media (max-width:360px){
  .main-wrapper,.main-content,.content,.dashboard-content,.page-content{
    padding-left:max(10px,env(safe-area-inset-left))!important;
    padding-right:max(10px,env(safe-area-inset-right))!important;
  }
  .panel,.card:not(.records-card){padding:14px!important}
  .card.records-card{padding:0!important}
  .header h1,.page-title h1{font-size:22px!important}
  .header-actions>.icon-btn{width:40px!important;height:40px!important}
  .hero-stats{gap:14px 10px!important}
  .stat-card{padding:12px!important;gap:9px!important}
  .stat-icon{width:38px!important;height:38px!important}
  .mobile-nav-bar ul{padding-inline:4px!important;gap:2px!important}
  .mobile-nav-bar ul:not(:has(>li:nth-child(7)))>li>a{font-size:8px!important}
}

@media (max-width:900px) and (max-height:600px) and (orientation:landscape){
  .sidebar{position:relative!important;min-height:56px!important;padding-block:7px!important}
  .logo-img,.logo-container img{width:36px!important;height:36px!important}
  body:has(.mobile-nav-bar) .main-wrapper,body:has(.mobile-nav-bar) .main-content,body:has(.mobile-nav-bar) .content{padding-bottom:74px!important}
  .mobile-nav-bar ul>li>a{min-height:48px!important;padding-block:5px!important}
  .mobile-nav-bar ul>li>a i{font-size:19px!important}
  .modal-box,.modal-card,.modal-content,.lock-card,.del-modal-box,.qr-large-modal-box{max-height:96svh!important}
}