/* CQlass shared visual language — all roles
   Lightweight only: existing optimized WebP + inline SVG vine. No extra raster assets.
*/
:root{
  --cq-font-body:'Plus Jakarta Sans','Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --cq-font-heading:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --cq-font-ui:'Plus Jakarta Sans','Inter',system-ui,sans-serif;
  --cq-hero-image:url('login-bg.webp?v=20260910-opt1');
}

/* ===== GLOBAL TYPOGRAPHY =====
   All role accounts use one consistent CQlass typography system.
   Plus Jakarta Sans is used across body, headings, navigation, controls, and data tables.
   Weight and size remain component-specific so dense operational screens stay readable.
*/
html,body,#app-screen{
  font-family:var(--cq-font-body)!important;
}
#app-screen :is(div,span,p,a,button,input,select,textarea,label,table,thead,tbody,tfoot,tr,th,td,ul,ol,li,nav,section,article,header,footer,form,small,strong,b,em):not(.material-icons):not(.material-symbols-outlined):not(.fa):not(.fas):not(.far):not(.fab){
  font-family:var(--cq-font-body)!important;
}
#app-screen :is(h1,h2,h3,h4,h5,h6,.page-title,.rd-title,.ak7-title,.cq-role-hero-title,.card-title,.modal-title,.hrd-board-head h2,.hrd-detail-top h3){
  font-family:var(--cq-font-heading)!important;
}
#app-screen :is(.nav-item,.nav-group-title,.sidebar-title,.btn,button,.role-badge,.topbar-title,.topbar-right,.cq-role-hero-eye){
  font-family:var(--cq-font-ui)!important;
}

/* ===== SHARED SIDEBAR =====
   A single vector vine is painted as a background layer so it remains lightweight,
   visible at the bottom, and cannot block clicks or be clipped by menu content.
*/
#app-screen .sidebar{
  isolation:isolate;
  border-right:1px solid #d9ebe6!important;
  background-color:#fff!important;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 330'%3E%3Cg fill='none' stroke='%2378cbb1' stroke-width='2.2' stroke-linecap='round' opacity='.62'%3E%3Cpath d='M16 330C18 280 42 250 31 207C22 169 38 130 71 102C88 87 98 65 94 39'/%3E%3Cpath d='M31 208C52 188 69 178 91 173'/%3E%3Cpath d='M36 151C53 137 66 125 74 109'/%3E%3Cpath d='M49 256C70 239 88 233 111 235'/%3E%3Cpath d='M23 287C42 273 57 270 73 272'/%3E%3C/g%3E%3Cg fill='%239edac7' opacity='.38'%3E%3Cellipse cx='18' cy='300' rx='13' ry='29' transform='rotate(-18 18 300)'/%3E%3Cellipse cx='45' cy='267' rx='12' ry='27' transform='rotate(45 45 267)'/%3E%3Cellipse cx='80' cy='236' rx='13' ry='30' transform='rotate(70 80 236)'/%3E%3Cellipse cx='63' cy='186' rx='11' ry='25' transform='rotate(58 63 186)'/%3E%3Cellipse cx='45' cy='143' rx='10' ry='23' transform='rotate(-36 45 143)'/%3E%3Cellipse cx='82' cy='110' rx='10' ry='24' transform='rotate(35 82 110)'/%3E%3Cellipse cx='96' cy='57' rx='9' ry='21' transform='rotate(-8 96 57)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(180deg,#ffffff 0%,#f1faf7 100%)!important;
  background-repeat:no-repeat,no-repeat!important;
  background-position:left bottom,left top!important;
  background-size:190px 330px,100% 100%!important;
}
#app-screen .sidebar::after{display:none!important}
#app-screen .sidebar>*{position:relative;z-index:1}

/* ===== BUILDING HERO ===== */
#app-screen .rd-hero,
#app-screen .hrd-hero,
#app-screen .cq-role-hero{
  background-image:
    linear-gradient(90deg,rgba(4,72,67,.95) 0%,rgba(8,117,104,.88) 43%,rgba(15,133,111,.60) 70%,rgba(255,255,255,.08) 100%),
    var(--cq-hero-image)!important;
  background-position:center 48%!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  border:1px solid rgba(255,255,255,.78)!important;
  box-shadow:0 16px 38px rgba(7,59,56,.10)!important;
}
#app-screen .hrd-hero{color:#fff!important}

#app-screen .cq-role-hero{
  min-height:142px;
  border-radius:24px;
  padding:23px 27px;
  margin:0 0 16px;
  display:flex;
  align-items:center;
  position:relative;
  overflow:hidden;
  color:#fff;
}
#app-screen .cq-role-hero::after{
  content:'';position:absolute;right:-75px;top:-105px;width:300px;height:300px;border-radius:50%;
  border:1px solid rgba(255,255,255,.20);box-shadow:0 0 0 35px rgba(255,255,255,.045),0 0 0 70px rgba(255,255,255,.025);
}
#app-screen .cq-role-hero-copy{position:relative;z-index:1;max-width:760px}
#app-screen .cq-role-hero-eye{font-size:10px!important;font-weight:800!important;line-height:1.3;letter-spacing:.13em;text-transform:uppercase;opacity:.83}
#app-screen .cq-role-hero-title{margin-top:6px;font-size:clamp(24px,3vw,31px)!important;font-weight:800!important;line-height:1.12;letter-spacing:-.025em}
#app-screen .cq-role-hero-sub{margin-top:7px;font-size:11.5px!important;font-weight:600!important;line-height:1.5;opacity:.88}

/* Hard visual guard: exactly one role-dashboard hero remains visible. */
#app-screen .cq-theme-hero-hidden{display:none!important}

@media(max-width:760px){
  #app-screen .sidebar{
    background-image:linear-gradient(180deg,#ffffff 0%,#f1faf7 100%)!important;
    background-size:100% 100%!important;
  }
  #app-screen .cq-role-hero{min-height:126px;padding:19px 20px;border-radius:19px}
  #app-screen .cq-role-hero-title{font-size:23px!important}
}


/* ===== CQlass UI consistency layer v4 =====
   Shared across roles: compact controls, predictable typography, aligned selectors,
   and usable wide tables without page-bottom horizontal scrolling.
*/
#app-screen .content{min-width:0}
#app-screen .content :is(button,.btn,input,select,textarea){font-size:13px!important}
#app-screen .content :is(button,.btn){min-height:36px;line-height:1.2;padding:8px 13px;border-radius:10px;font-weight:700}
#app-screen .content :is(input,select,textarea){
  min-height:38px;line-height:1.35;padding:8px 11px;border-radius:10px;
  border:1px solid #d7e3e0;background:#fff;color:#172b2a;
}
#app-screen .content select{padding-right:34px}
#app-screen .content label{font-size:12px!important;font-weight:700;line-height:1.35}
#app-screen .content :is(.page-title,h1){font-size:clamp(22px,2.4vw,30px)!important;line-height:1.18}
#app-screen .content h2{font-size:20px!important;line-height:1.25}
#app-screen .content h3{font-size:16px!important;line-height:1.3}
#app-screen .content :is(p,td,th,li,.form-control,.form-select){font-size:13px}
#app-screen .content :is(.card,.panel,.modal-box){max-width:100%;box-sizing:border-box}
#app-screen .content table{font-size:12.5px;max-width:none}
#app-screen .content th{font-size:11.5px!important;line-height:1.25}
#app-screen .content td{line-height:1.35}
#app-screen .content th,#app-screen .content td{padding-top:8px;padding-bottom:8px}

/* Any operational table can scroll inside its own viewport; page itself stays aligned. */
#app-screen .content .cq-table-scroll,
#app-screen .content .table-responsive,
#app-screen .content [class*="table-wrap"],
#app-screen .content [class*="table-container"]{
  max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-inline:contain;
}

/* Keep action controls compact and reachable when a module marks the action column. */
#app-screen .content .cq-action-col{white-space:nowrap}
#app-screen .content .cq-action-col :is(button,.btn){min-height:32px;padding:6px 9px;font-size:11.5px!important}

/* Filters/selectors use the same compact visual rhythm. */
#app-screen .content :is(.filter-bar,.filters,.toolbar,.form-row,[class*="filter-row"],[class*="selector"]){
  gap:10px;
}
#app-screen .content :is(.filter-bar,.filters,.toolbar,[class*="filter-row"]) select{
  min-width:140px;max-width:100%;
}

/* Prevent accidental local styles from producing jumbo operational buttons. */
#app-screen .content button:not(.cq-role-hero *):not(.ak7-hero *),
#app-screen .content .btn:not(.cq-role-hero *):not(.ak7-hero *){font-size:13px!important}

/* Mobile/tablet: forms remain compact and controls do not overflow. */
@media(max-width:900px){
  #app-screen .content{padding-left:14px!important;padding-right:14px!important}
  #app-screen .content :is(.filter-bar,.filters,.toolbar,.form-row,[class*="filter-row"]){flex-wrap:wrap}
  #app-screen .content :is(input,select,textarea){max-width:100%}
  #app-screen .content table{min-width:max-content}
}


/* CQlass UI consistency audit v5 — role-safe responsive cleanup */
.content .av-title,.content .sac-head h1,.content .ksr2 h1,.content .tsv2-title{font-size:clamp(21px,2.2vw,26px)!important;line-height:1.15}
.content .av-kpi strong,.content .akpts-kpi strong,.content .ksr2-kpi strong{font-size:clamp(21px,2.4vw,25px)!important}
.content .av-table,.content .akpts-table,.content .cqtl-table,.content .sac table,.content .ksr2 table,.content .tsv2-table{max-width:100%}
.content .av-wrap,.content .akpts-wrap,.content .cqtl-wrap,.content .sac-table,.content .ksr2-table,.content .tsv2-tablewrap{max-width:100%;overflow:auto;-webkit-overflow-scrolling:touch}
@media(max-width:900px){
  .content .av-table{min-width:660px}
  .content .akpts-table{min-width:760px!important}
  .content .cqtl-table{min-width:760px}
  .content .sac table{min-width:720px}
  .content .ksr2 table{min-width:720px}
  .content .tsv2-table{min-width:760px}
  .content .hrd-priority-table{min-width:720px}
}
@media(max-width:600px){
  .content .av-hero{padding:16px!important;border-radius:16px}
  .content .av-kpis,.content .ksr2-grid,.content .tsv2-kpis{gap:8px}
  .content .av-table{min-width:620px}
  .content .akpts-table{min-width:700px!important}
  .content .cqtl-table{min-width:700px}
  .content .sac table,.content .ksr2 table{min-width:680px}
  .content .tsv2-table{min-width:700px}
}


/* ===== TEACHER / WALAS SIDEBAR POLISH v1 =====
   Same CQlass rhythm, clearer hierarchy, compact spacing, no visual noise.
*/
body.cq-role-guru #sidebar,
body.cq-role-walas #sidebar{
  width:220px;
  padding:14px 11px 18px!important;
  scrollbar-width:thin;
  scrollbar-color:#c9dfd9 transparent;
}
body.cq-role-guru #sidebar .nav-group-title,
body.cq-role-walas #sidebar .nav-group-title{
  margin:15px 10px 6px!important;
  padding:0!important;
  font-size:9.5px!important;
  line-height:1.25!important;
  font-weight:800!important;
  letter-spacing:.11em!important;
  text-transform:uppercase;
  color:#6f8b86!important;
}
body.cq-role-guru #sidebar .nav-group-title:first-child,
body.cq-role-walas #sidebar .nav-group-title:first-child{margin-top:5px!important}
body.cq-role-guru #sidebar .nav-item,
body.cq-role-walas #sidebar .nav-item{
  min-height:38px;
  margin:2px 0!important;
  padding:9px 11px!important;
  gap:9px!important;
  border-radius:10px!important;
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:600!important;
  color:#29413e!important;
  box-sizing:border-box;
}
body.cq-role-guru #sidebar .nav-item .nav-icon,
body.cq-role-walas #sidebar .nav-item .nav-icon{
  width:16px!important;height:16px!important;opacity:.76;
}
body.cq-role-guru #sidebar .nav-item:hover,
body.cq-role-walas #sidebar .nav-item:hover{
  background:#eaf7f3!important;color:#075f58!important;
}
body.cq-role-guru #sidebar .nav-item.active,
body.cq-role-walas #sidebar .nav-item.active{
  background:#0a6e6e!important;
  color:#fff!important;
  font-weight:700!important;
  box-shadow:0 3px 9px rgba(10,110,110,.16)!important;
}
body.cq-role-guru #sidebar .nav-item.active .nav-icon,
body.cq-role-walas #sidebar .nav-item.active .nav-icon{opacity:1}
body.cq-role-guru #sidebar .nav-badge,
body.cq-role-walas #sidebar .nav-badge{
  margin-left:auto;
  font-size:9px!important;
  line-height:1.2;
  padding:2px 6px!important;
}
@media(max-width:760px){
  body.cq-role-guru #sidebar,
  body.cq-role-walas #sidebar{padding:10px 8px 14px!important}
  body.cq-role-guru #sidebar .nav-item,
  body.cq-role-walas #sidebar .nav-item{min-height:36px;padding:8px 10px!important}
}