/* RastaYar Professional UI System
   Central visual contract loaded after module styles.
   Presentation-only: no business logic, API or persistence coupling. */
:root{
  --ui-bg:#f3f7f5;
  --ui-surface:#ffffff;
  --ui-surface-soft:#f8fbfa;
  --ui-surface-muted:#eef5f2;
  --ui-text:#15211e;
  --ui-text-strong:#0d1916;
  --ui-muted:#66756f;
  --ui-subtle:#8b9994;
  --ui-border:#dfe8e4;
  --ui-border-strong:#cbd9d3;
  --ui-brand:#20c879;
  --ui-brand-strong:#0e7654;
  --ui-brand-soft:#e9f8f1;
  --ui-info:#1689a2;
  --ui-warning:#b56f08;
  --ui-danger:#be3f51;
  --ui-radius-sm:10px;
  --ui-radius-md:14px;
  --ui-radius-lg:20px;
  --ui-radius-xl:26px;
  --ui-shadow-sm:0 4px 14px rgba(22,50,41,.055);
  --ui-shadow-md:0 12px 34px rgba(22,50,41,.08);
  --ui-shadow-lg:0 22px 60px rgba(13,34,27,.12);
  --ui-focus:0 0 0 4px rgba(32,200,121,.16);
  --ui-control-height:44px;
  --ui-dark:#111d1a;
  --ui-dark-2:#172723;
  --ui-dark-card:#1c2d28;
  --ui-dark-text:#edf7f2;
  --ui-dark-muted:#a8beb5;
  --ui-dark-border:rgba(214,238,228,.14);

  /* keep legacy variables aligned with the professional system */
  --bg:var(--ui-bg);
  --surface:var(--ui-surface);
  --surface2:var(--ui-surface-soft);
  --text:var(--ui-text);
  --muted:var(--ui-muted);
  --line:var(--ui-border);
  --brand:var(--ui-brand);
  --brand-dark:var(--ui-brand-strong);
  --shadow:var(--ui-shadow-lg);
  --radius:var(--ui-radius-lg);
}

html{scroll-behavior:smooth;background:var(--ui-bg)}
body{
  color:var(--ui-text);
  background:
    radial-gradient(circle at 8% 0%,rgba(32,200,121,.055),transparent 28rem),
    linear-gradient(180deg,#f7faf9 0,#f3f7f5 180px,var(--ui-bg) 100%);
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
::selection{background:rgba(32,200,121,.2);color:var(--ui-text-strong)}

/* keyboard accessibility and touch targets */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ui-brand)!important;
  outline-offset:2px;
  box-shadow:var(--ui-focus);
}
:where(.primary,.secondary,.ghost,.icon-btn,.notification-button,.nav-item){min-height:40px}
.small{min-height:34px}
:where(input,select){min-height:var(--ui-control-height)}
:where(button,input,select,textarea){transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease,color .18s ease,transform .18s ease}
:where(input,select,textarea):hover:not(:disabled){border-color:var(--ui-border-strong)}
:where(input,select,textarea):disabled{background:#f1f4f3;color:#8c9994;cursor:not-allowed;opacity:.82}

/* shell */
.portal{background:transparent}
.main{background:transparent}
.content{width:100%;max-width:1560px;padding:28px clamp(18px,2.2vw,34px) 44px}
.topbar{
  min-height:88px;
  height:auto;
  padding-block:14px;
  background:rgba(255,255,255,.9);
  border-bottom:1px solid rgba(203,217,211,.78);
  box-shadow:0 8px 28px rgba(21,48,39,.04);
}
.topbar h1{color:var(--ui-text-strong);font-weight:900;letter-spacing:-.015em}
.top-actions{gap:10px}
.notification-button,.icon-btn{
  border:1px solid var(--ui-border);
  background:var(--ui-surface);
  border-radius:12px;
  color:var(--ui-text);
}
.notification-button:hover,.icon-btn:hover{background:var(--ui-brand-soft);border-color:#c7e8d8}

/* sidebar */
.sidebar{
  background:linear-gradient(180deg,#0c1714 0%,#10231d 56%,#0d1d19 100%);
  box-shadow:-10px 0 34px rgba(5,17,13,.08) inset;
  border-left:1px solid rgba(255,255,255,.04);
}
.brand-row{border-bottom:1px solid rgba(255,255,255,.06);margin-bottom:10px;padding-bottom:20px}
.brand-row img{box-shadow:0 10px 24px rgba(0,0,0,.22)}
.nav-item{min-height:46px;border:1px solid transparent}
.nav-item:hover{transform:translateX(-2px)}
.nav-item.active{box-shadow:0 9px 24px rgba(8,94,61,.16) inset,0 1px 0 rgba(255,255,255,.03)}
.sidebar-footer{background:linear-gradient(180deg,transparent,rgba(255,255,255,.015))}

/* typography rhythm */
:where(h1,h2,h3,h4){color:var(--ui-text-strong);line-height:1.35}
:where(h2,h3,h4){letter-spacing:-.01em}
:where(p){line-height:1.85}
.eyebrow,.command-eyebrow{font-weight:900;letter-spacing:.085em}
.muted,.hint{color:var(--ui-muted)}

/* cards and panels */
:where(.panel,.kpi,.quick-card,.student-workspace-head,.credential-box){
  border-color:var(--ui-border);
  box-shadow:var(--ui-shadow-sm);
}
.panel{border-radius:var(--ui-radius-lg);background:rgba(255,255,255,.98)}
.panel-head{min-height:62px;padding:16px 20px;background:linear-gradient(180deg,#fff,#fbfdfc)}
.panel-head h3{font-size:1rem;font-weight:900}
.kpi{border-radius:18px;padding:19px;position:relative;overflow:hidden}
.kpi:before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,var(--ui-brand),transparent);opacity:.45}
.kpi strong{color:var(--ui-text-strong);font-weight:900;letter-spacing:-.02em}
.kpi-icon{background:linear-gradient(145deg,#e8f8f0,#f3fbf7);border:1px solid #dcefe6}
.quick-card{background:linear-gradient(180deg,#fff,#f9fcfa)}
.quick-card:hover{border-color:#cbe5d8;box-shadow:var(--ui-shadow-md)}

/* buttons */
.primary,.secondary,.ghost{
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  line-height:1.1;
}
.primary{background:linear-gradient(135deg,#22c97b,#0ea695);box-shadow:0 8px 20px rgba(25,178,111,.18)}
.primary:hover{filter:none;transform:translateY(-1px);box-shadow:0 11px 25px rgba(25,178,111,.23)}
.secondary{background:#edf8f3;color:#126949;border:1px solid #d6eee2}
.secondary:hover{background:#e4f5ed;border-color:#bfe4d2}
.ghost:hover{background:rgba(21,46,37,.055)}
.link-btn{text-decoration:none;border-radius:7px}
.link-btn:hover{text-decoration:underline;text-underline-offset:3px}

/* forms */
:where(input,select,textarea){
  border-color:var(--ui-border);
  border-radius:12px;
  background:#fff;
  color:var(--ui-text);
}
:where(input,select,textarea)::placeholder{color:#9aa7a2}
:where(label,.field){color:#34433e}
:where(input,select,textarea):focus{border-color:#52c999;box-shadow:var(--ui-focus)}
.form-error:not(:empty){padding:9px 11px;border-radius:10px;background:#fff0f2;border:1px solid #f2cdd3}

/* tables */
.table-wrap{border-radius:14px;scrollbar-width:thin;scrollbar-color:#bdcec7 transparent}
table{background:var(--ui-surface)}
th{background:#f4f8f6;color:#5e6e68;font-weight:900;letter-spacing:.01em}
th,td{border-bottom-color:#e8efec}
tbody tr{transition:background-color .15s ease}
tbody tr:hover{background:#f7fbf9}
tbody tr:last-child td{border-bottom:0}

/* badges and states */
.badge{border:1px solid transparent;line-height:1.25}
.badge.ok{border-color:#ccebd9}.badge.warn{border-color:#f0dcae}.badge.danger{border-color:#efcfd4}.badge.info{border-color:#c9e5e7}
.password-warning{box-shadow:inset 3px 0 0 #e5a62d}

/* empty / zero-data states */
.empty{
  margin:10px;
  min-height:92px;
  display:grid;
  place-items:center;
  padding:24px;
  border:1px dashed var(--ui-border-strong);
  border-radius:14px;
  background:linear-gradient(180deg,#fbfdfc,#f7faf8);
  color:var(--ui-muted);
  line-height:1.8;
}

/* modal */
.modal::backdrop{background:rgba(7,18,14,.62);backdrop-filter:blur(7px)}
.modal-card{border:1px solid rgba(223,232,228,.9);border-radius:24px;box-shadow:0 30px 80px rgba(7,25,18,.22)}
.modal-close{border:1px solid var(--ui-border);background:#f5f8f7;color:#52615c}
.modal-close:hover{background:#edf4f1;color:var(--ui-text)}

/* known dark operational surfaces: enforce readable hierarchy without guessing module themes */
:is(.cw-shell,.hf7-shell){color:var(--ui-dark-text)}
:is(.cw-shell,.hf7-shell) :where(h1,h2,h3,h4,strong,b){color:var(--ui-dark-text)}
:is(.cw-shell,.hf7-shell) :where(p,small,.muted){color:var(--ui-dark-muted)}
:is(.cw-shell,.hf7-shell) .empty{
  background:rgba(255,255,255,.045);
  border-color:var(--ui-dark-border);
  color:var(--ui-dark-muted);
}
:is(.cw-shell,.hf7-shell) :where(.secondary,.ghost){border-color:rgba(208,234,222,.16)}

/* density and spacing consistency */
:where(.grid-2,.grid-3,.kpi-grid,.quick-grid){align-items:stretch}
:where(.page-head,.exam-auto-hero){min-height:48px}
.page-head h2,.page-head h3{margin-block:0}
.row-actions{align-items:center}
.toolbar{align-items:center}

/* scrolling polish */
*{scrollbar-width:thin;scrollbar-color:#b7c9c1 transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-thumb{background:#b7c9c1;border:2px solid transparent;background-clip:padding-box;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#96aaa1;border:2px solid transparent;background-clip:padding-box}

/* responsive contract */
@media(max-width:1100px){
  .content{padding-inline:22px}
  .topbar{padding-inline:22px}
}
@media(max-width:820px){
  .topbar{min-height:76px;padding-block:10px}
  .content{padding:18px 14px 32px}
  .sidebar{box-shadow:-14px 0 45px rgba(5,20,14,.24)}
  .modal-card{padding:22px 18px}
  :where(input,select){min-height:46px}
}
@media(max-width:520px){
  .topbar{gap:10px}
  .topbar h1{font-size:1.14rem}
  .top-actions{gap:6px}
  .content{padding-inline:10px}
  .panel,.kpi{border-radius:16px}
  .kpi{padding:16px}
  .panel-head{padding:14px 15px}
  .primary,.secondary,.ghost{min-height:42px}
  .small{min-height:36px}
  .empty{margin:8px;min-height:82px;padding:18px 12px}
}

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