/* ==========================================================================
   SKILLPATH UNIFIED KEMIS + LMS FULL-SCREEN PORTAL ENGINE (v3.1.0)
   Exact Light/Dark Theme, Left Collapsible Sidebar, Top Search/Notification Bar,
   Gradient Module Headers, Hybrid Mark Sheets, Affective/Psychomotor Grids & Print
   ========================================================================== */

:root {
  --k-bg: #f3f4f8;
  --k-surface: #ffffff;
  --k-sidebar: #ffffff;
  --k-topbar: #ffffff;
  --k-border: #e5e7eb;
  --k-text: #1e293b;
  --k-muted: #64748b;
  --k-primary: #6c3ce9;
  --k-primary-dark: #4f28c4;
  --k-primary-soft: #f1ecfe;
  --k-blue: #1e6de0;
  --k-blue-soft: #e8f1fd;
  --k-green: #10b981;
  --k-orange: #f59e0b;
  --k-red: #ef4444;
  --k-shadow: 0 2px 10px rgba(15, 23, 42, 0.05);
}

.kemis-app[data-theme="dark"] {
  --k-bg: #0f172a;
  --k-surface: #1e293b;
  --k-sidebar: #162033;
  --k-topbar: #162033;
  --k-border: #334155;
  --k-text: #f1f5f9;
  --k-muted: #94a3b8;
  --k-primary: #8b5cf6;
  --k-primary-soft: rgba(139, 92, 246, 0.18);
  --k-blue-soft: rgba(59, 130, 246, 0.18);
  --k-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

/* Standalone Document Reset */
body.kemis-standalone-body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100%;
  min-height: 100vh;
  background: #f3f4f8;
  overflow-x: hidden;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Belt-and-Suspenders: If .kemis-app ever mounts inside a regular WP theme page, break out full-screen! */
body:not(.kemis-standalone-body) .kemis-app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  max-width: 100vw !important;
  z-index: 999999 !important;
  overflow-y: auto !important;
}

/* Core Full-Screen App Shell */
.kemis-app,
.kemis-app * {
  box-sizing: border-box;
}

.kemis-app {
  display: flex !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--k-bg);
  color: var(--k-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

/* Left Collapsible Sidebar */
.kemis-sidebar {
  width: 260px;
  min-width: 260px;
  flex: 0 0 260px;
  background: var(--k-sidebar);
  border-right: 1px solid var(--k-border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 950;
  transition: width 0.2s ease, min-width 0.2s ease, transform 0.25s ease;
}

.kemis-app.is-collapsed .kemis-sidebar {
  width: 0;
  min-width: 0;
  flex: 0 0 0;
  overflow: hidden;
  border-right: 0;
}

.kemis-brand {
  height: 64px;
  min-height: 64px;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--k-border);
  gap: 10px;
}

.kemis-brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none !important;
  color: var(--k-primary) !important;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.kemis-brand-logo img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--k-border);
  padding: 2px;
  flex-shrink: 0;
}

.kemis-burger {
  background: transparent !important;
  border: 1px solid transparent !important;
  color: var(--k-text) !important;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 !important;
  flex-shrink: 0;
}
.kemis-burger:hover {
  background: var(--k-primary-soft) !important;
  color: var(--k-primary) !important;
}

.kemis-nav {
  flex: 1;
  overflow-y: auto;
  padding: 12px 12px;
}

.kemis-nav-group {
  margin-bottom: 4px;
}

.kemis-nav-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--k-text) !important;
  font-size: 13.5px;
  font-weight: 600 !important;
  cursor: pointer;
  text-align: left;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease;
}

.kemis-nav-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.kemis-ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--k-muted);
}

.kemis-chevron {
  font-size: 11px;
  color: var(--k-muted);
  transition: transform 0.18s ease;
}

.kemis-nav-group.is-open > .kemis-nav-trigger .kemis-chevron {
  transform: rotate(180deg);
}

.kemis-nav-trigger:hover,
.kemis-nav-group.is-open > .kemis-nav-trigger {
  background: var(--k-primary-soft) !important;
  color: var(--k-primary) !important;
}

.kemis-nav-trigger:hover .kemis-ico,
.kemis-nav-group.is-open > .kemis-nav-trigger .kemis-ico {
  color: var(--k-primary);
}

.kemis-nav-children {
  display: none;
  padding: 4px 0 6px 14px;
}

.kemis-nav-group.is-open > .kemis-nav-children {
  display: block;
}

.kemis-sublink {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 7px;
  color: var(--k-muted) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.kemis-sublink::before {
  content: "";
  width: 8px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  opacity: 0.65;
  flex-shrink: 0;
}

.kemis-sublink:hover {
  color: var(--k-primary) !important;
  background: var(--k-primary-soft);
}

.kemis-sublink.is-active {
  color: var(--k-primary) !important;
  background: var(--k-primary-soft);
  font-weight: 700;
}

.kemis-sidebar-footer {
  border-top: 1px solid var(--k-border);
  padding: 12px 14px;
  font-size: 11.5px;
  color: var(--k-muted);
}

.kemis-user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  background: var(--k-bg);
  border: 1px solid var(--k-border);
  border-radius: 9px;
  margin-bottom: 8px;
  color: var(--k-text) !important;
  font-weight: 600;
  font-size: 12.5px;
  text-decoration: none !important;
  transition: border-color 0.15s ease;
}
.kemis-user-chip:hover {
  border-color: var(--k-primary);
}

.kemis-logout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--k-green);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
}

/* Main Workspace Column */
.kemis-main-col {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Top Utility Header */
.kemis-topbar {
  height: 64px;
  min-height: 64px;
  background: var(--k-topbar);
  border-bottom: 1px solid var(--k-border);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  position: sticky;
  top: 0;
  z-index: 900;
}

.kemis-search-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 360px;
  max-width: 440px;
  min-width: 0;
}

.kemis-search-input {
  width: 100%;
  min-width: 160px;
  height: 38px;
  padding: 0 14px;
  border: 1px solid var(--k-border) !important;
  border-radius: 8px !important;
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  font-size: 13px;
  margin: 0 !important;
}

.kemis-top-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.kemis-icon-pill {
  position: relative;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--k-border) !important;
  background: var(--k-surface) !important;
  color: var(--k-text) !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.kemis-icon-pill:hover {
  border-color: var(--k-primary) !important;
  color: var(--k-primary) !important;
}

.kemis-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kemis-counter.purple { background: var(--k-primary); }
.kemis-counter.green  { background: var(--k-green); }
.kemis-counter.orange { background: var(--k-orange); }

.kemis-profile-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--k-border);
  max-width: 260px;
}

.kemis-profile-badge > div {
  min-width: 0;
  overflow: hidden;
}

.kemis-profile-badge strong {
  display: block;
  font-size: 13px;
  line-height: 1.25;
  color: var(--k-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kemis-profile-badge small {
  display: block;
  font-size: 11px;
  color: var(--k-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kemis-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--k-primary-soft);
  background: #fff;
  flex-shrink: 0;
}

/* Main Content Area */
.kemis-content {
  padding: 26px 30px 56px;
  flex: 1;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}

/* KEMIS Signature Gradient Module Banners */
.kemis-banner {
  border-radius: 14px;
  padding: 26px 30px;
  color: #ffffff;
  margin-bottom: 22px;
  box-shadow: 0 8px 24px rgba(108, 60, 233, 0.16);
}
.kemis-banner.purple { background: linear-gradient(125deg, #6c3ce9 0%, #7c4dff 55%, #5b21b6 100%); }
.kemis-banner.blue   { background: linear-gradient(125deg, #1d63dc 0%, #2575fc 60%, #1e40af 100%); }
.kemis-banner.teal   { background: linear-gradient(125deg, #0d9488 0%, #0284c7 100%); }
.kemis-banner.indigo { background: linear-gradient(125deg, #2e1b70 0%, #5b21b6 60%, #0074a6 100%); }

.kemis-banner h1 {
  color: #ffffff !important;
  font-size: 24px !important;
  font-weight: 800 !important;
  margin: 0 0 6px !important;
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1.25 !important;
}
.kemis-banner p {
  color: rgba(255, 255, 255, 0.92) !important;
  margin: 0 !important;
  font-size: 14px !important;
}

/* Cards, Filter Grids & KPI Tiles */
.kemis-card {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 22px 24px;
  margin-bottom: 20px;
  box-shadow: var(--k-shadow);
}

.kemis-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--k-text) !important;
  margin: 0 0 16px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--k-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.kemis-filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  gap: 14px;
  align-items: end;
}

.kemis-grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.kemis-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kemis-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.kemis-stat {
  background: var(--k-surface);
  border: 1px solid var(--k-border);
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: var(--k-shadow);
  min-width: 0;
}
.kemis-stat span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--k-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.kemis-stat strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  color: var(--k-primary);
  margin-top: 6px;
  line-height: 1.15;
}

/* Forms inside KEMIS */
.kemis-app label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--k-text);
  margin-bottom: 12px;
}
.kemis-app label .kemis-req {
  color: var(--k-red);
}
.kemis-app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.kemis-app select,
.kemis-app textarea {
  width: 100%;
  margin-top: 6px;
  padding: 9px 12px;
  border: 1px solid var(--k-border);
  border-radius: 8px;
  background: var(--k-surface);
  color: var(--k-text);
  font-family: inherit;
  font-size: 13.5px;
}
.kemis-app input[type="file"] {
  margin-top: 6px;
  font-size: 13px;
}
.kemis-app input:focus,
.kemis-app select:focus,
.kemis-app textarea:focus {
  outline: 2px solid var(--k-primary);
  border-color: var(--k-primary);
}

/* Buttons */
.kemis-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  border: 0 !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  cursor: pointer;
  text-decoration: none !important;
  background: var(--k-primary) !important;
  color: #ffffff !important;
  white-space: nowrap;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.kemis-btn:hover { filter: brightness(0.94); }
.kemis-btn.blue  { background: var(--k-blue) !important; }
.kemis-btn.green { background: var(--k-green) !important; }
.kemis-btn.orange{ background: var(--k-orange) !important; }
.kemis-btn.red   { background: var(--k-red) !important; }
.kemis-btn.ghost {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
  border: 1px solid var(--k-border) !important;
}
.kemis-btn.sm { padding: 6px 12px !important; font-size: 12px !important; }

/* Tables */
.kemis-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.kemis-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kemis-table th {
  background: var(--k-bg);
  color: var(--k-muted);
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.5px;
  font-weight: 700;
  padding: 11px 12px;
  text-align: left;
  border-bottom: 2px solid var(--k-border);
  white-space: nowrap;
}
.kemis-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--k-border);
  vertical-align: middle;
}
.kemis-table input.kemis-score-inp {
  width: 68px;
  padding: 6px 8px;
  margin-top: 0;
  text-align: center;
  font-weight: 700;
}

/* Badges */
.kemis-badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.kemis-badge.green  { background: #dcfce7; color: #166534; }
.kemis-badge.purple { background: #ede9fe; color: #5b21b6; }
.kemis-badge.blue   { background: #dbeafe; color: #1e40af; }
.kemis-badge.orange { background: #fef3c7; color: #92400e; }
.kemis-badge.red    { background: #fee2e2; color: #991b1b; }

/* Official A4 Holistic Result Dossier & Broadsheet Print Layout */
.sia-holistic-sheet {
  background: #ffffff;
  color: #111827;
  border: 2px solid #2e1b70;
  border-radius: 10px;
  padding: 26px 28px;
  margin-bottom: 28px;
  font-size: 12px;
}
.sia-holistic-header {
  display: grid;
  grid-template-columns: 84px 1fr 94px;
  gap: 16px;
  align-items: center;
  text-align: center;
  border-bottom: 3px double #2e1b70;
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.sia-holistic-header h2 {
  margin: 0;
  font-size: 21px !important;
  color: #2e1b70 !important;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.sia-holistic-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px 14px;
  background: #f8f7fc;
  border: 1px solid #d8d4eb;
  padding: 10px 14px;
  border-radius: 6px;
  margin-bottom: 14px;
}
.sia-domains-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
}
.sia-domain-box {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  overflow: hidden;
}
.sia-domain-box h4 {
  margin: 0;
  padding: 7px 10px;
  background: #2e1b70;
  color: #ffffff !important;
  font-size: 11.5px !important;
  text-transform: uppercase;
}
.sia-domain-box table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.sia-domain-box td, .sia-domain-box th {
  border-bottom: 1px solid #e2e8f0;
  padding: 4px 8px;
}
.sia-sig-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}
.sia-sig-box {
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  padding: 10px 14px;
}
.sia-sig-img {
  max-height: 44px;
  max-width: 150px;
  object-fit: contain;
  display: block;
  margin-top: 4px;
}

/* Student ID Card Print Grid */
.sia-idcard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 18px;
}
.sia-idcard {
  border: 2px solid #2e1b70;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #2e1b70 0 68px, #ffffff 68px 100%);
  padding: 14px 18px 18px;
  box-shadow: 0 6px 18px rgba(46, 27, 112, 0.1);
}

/* Mobile Backdrop */
.kemis-backdrop {
  display: none;
}

/* Responsive Tablet & Mobile */
@media (max-width: 1100px) {
  .kemis-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kemis-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .kemis-sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    transform: translateX(-100%);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
  }
  .kemis-app.mobile-open .kemis-sidebar {
    transform: translateX(0);
    width: 260px;
    min-width: 260px;
  }
  .kemis-app.mobile-open ~ .kemis-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 920;
  }
  .kemis-topbar {
    padding: 0 16px;
  }
  .kemis-content {
    padding: 18px 16px 40px;
  }
  .kemis-profile-badge > div {
    display: none;
  }
  .kemis-grid-3,
  .kemis-grid-2,
  .sia-domains-split,
  .sia-sig-grid {
    grid-template-columns: 1fr;
  }
  .sia-holistic-meta {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .kemis-grid-4,
  .kemis-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media print {
  .kemis-sidebar,
  .kemis-topbar,
  .kemis-banner,
  .kemis-no-print,
  .kemis-backdrop,
  #wpadminbar {
    display: none !important;
  }
  body.kemis-standalone-body,
  body:not(.kemis-standalone-body) .kemis-app,
  .kemis-app,
  .kemis-main-col,
  .kemis-content {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
    max-width: none !important;
  }
  .sia-holistic-sheet {
    page-break-after: always;
    box-shadow: none !important;
    border: 1.5px solid #000 !important;
  }
}

/* v3.2.0: credential, record-management, and responsive polish */
.sia-record-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--k-border); }
.sia-record-row:last-child { border-bottom:0; }
.sia-record-row > span { min-width:0; overflow-wrap:anywhere; }
.sia-inline-admin-action { display:inline-flex; margin:2px 4px 2px 0; }
.sia-inline-admin-action .kemis-btn { white-space:nowrap; }
.kemis-app :is(button,a,input,select,textarea):focus-visible { outline:3px solid #f9c600 !important; outline-offset:2px; }
.kemis-app .kemis-table-wrap { max-width:100%; }
.kemis-app .kemis-table { min-width:680px; }
.kemis-app .sia-idcard-grid { grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr)); }
.kemis-app .sia-idcard { break-inside:avoid; }
@media (max-width:700px) {
  .sia-record-row { align-items:flex-start; }
  .kemis-app .kemis-content { min-width:0; }
  .kemis-app .kemis-card { min-width:0; }
  .kemis-app .kemis-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .kemis-app .kemis-table { min-width:640px; }
}
@media (prefers-reduced-motion:reduce) {
  .kemis-app *, .kemis-app *::before, .kemis-app *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* v3.3.0: multi-class allocation and editable result remarks */
.sia-class-assignment-list label { font-size: 13px; margin: 0; }
.kemis-table td textarea { width: 100%; min-width: 170px; min-height: 54px; resize: vertical; padding: 7px 9px; border: 1px solid var(--k-border); border-radius: 7px; font: inherit; }
.sia-record-row form input:not([type="hidden"]) { min-width: 90px; padding: 7px 9px; border: 1px solid var(--k-border); border-radius: 7px; }
.sia-record-row form input[name="new_name"] { flex: 1; }
@media (max-width: 700px) {
  .sia-record-row { flex-wrap: wrap; }
  .sia-record-row form:first-child { flex-basis: 100%; }
  .sia-class-assignment-list { grid-template-columns: 1fr !important; }
}

/* v3.3.2: clearer, responsive class and subject management */
.sia-structure-section { margin: 22px 0 30px; }
.sia-structure-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:0 0 14px; }
.sia-structure-heading h2 { margin:3px 0 4px; color:var(--k-text); font-size:clamp(20px,2.2vw,26px); line-height:1.2; }
.sia-structure-heading p { margin:0; color:var(--k-muted); }
.sia-structure-kicker { color:var(--k-primary); font-size:10px; font-weight:800; letter-spacing:.12em; }
.sia-structure-grid { display:grid; grid-template-columns:minmax(280px,.8fr) minmax(0,1.6fr); align-items:start; gap:16px; }
.sia-structure-section .kemis-card { min-width:0; }
.sia-structure-form { display:grid; gap:14px; align-content:start; }
.sia-structure-fields { display:grid; grid-template-columns:1fr; gap:12px; }
.sia-structure-form label, .sia-subject-create-card label { display:flex; flex-direction:column; gap:6px; min-width:0; color:var(--k-text); font-size:13px; font-weight:650; }
.sia-structure-form input:not([type="checkbox"]), .sia-structure-form select,
.sia-subject-create-card input:not([type="checkbox"]), .sia-subject-create-card select,
.sia-structure-table input { width:100%; min-width:0; min-height:40px; padding:8px 10px; border:1px solid var(--k-border); border-radius:8px; background:var(--k-surface); color:var(--k-text); box-sizing:border-box; }
.sia-structure-check { display:flex !important; flex-direction:row !important; align-items:flex-start; gap:9px !important; font-weight:500 !important; line-height:1.45; }
.sia-structure-check input { margin:3px 0 0; flex:0 0 auto; }
.sia-structure-list { overflow:hidden; }
.sia-count-pill { display:inline-flex; min-width:25px; height:25px; align-items:center; justify-content:center; margin-left:8px; padding:0 7px; border-radius:999px; background:var(--k-primary-soft); color:var(--k-primary); font-size:11px; font-weight:800; }
.sia-structure-table { min-width:760px; }
.sia-structure-table td { vertical-align:top; }
.sia-structure-table td small { display:inline-block; margin-top:3px; color:var(--k-muted); }
.sia-final-tag { display:inline-block; margin-left:7px !important; padding:2px 7px; border-radius:99px; background:var(--k-primary-soft); color:var(--k-primary) !important; font-weight:700; }
.sia-row-actions { display:grid; gap:7px; min-width:200px; }
.sia-row-actions form { display:flex; align-items:center; gap:6px; }
.sia-row-actions .sia-inline-rename input { flex:1; }
.sia-row-actions .kemis-btn { flex:0 0 auto; }
.sia-empty-state { display:grid; gap:4px; padding:20px 10px; color:var(--k-muted); text-align:center; }
.sia-empty-state strong { color:var(--k-text); }
.sia-subject-create-card { display:grid; gap:14px; margin-bottom:16px; }
.sia-subject-create-grid { display:grid; grid-template-columns:repeat(3,minmax(150px,1fr)); gap:12px; }
.sia-class-picker { min-width:0; margin:0; padding:12px; border:1px solid var(--k-border); border-radius:10px; }
.sia-class-picker legend { padding:0 6px; color:var(--k-text); font-size:13px; font-weight:750; }
.sia-class-picker .sia-select-all-label { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0 0 10px; font-weight:700; }
.sia-class-assignment-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:7px; max-height:210px; overflow:auto; padding:2px; }
.sia-class-assignment-list label { display:flex; flex-direction:row; align-items:flex-start; gap:8px; margin:0; padding:7px 9px; border:1px solid var(--k-border); border-radius:8px; background:var(--k-bg); font-weight:500; cursor:pointer; }
.sia-class-assignment-list input { flex:0 0 auto; margin:3px 0 0; }
.sia-class-picker > small { display:block; margin-top:9px; color:var(--k-muted); }
.sia-subject-table { min-width:850px; }
.sia-subject-rename-form { display:grid; grid-template-columns:minmax(130px,1fr) 90px auto; align-items:center; gap:6px; min-width:330px; }
.sia-subject-rename-form .kemis-btn { white-space:nowrap; }
.sia-assigned-class-list { display:flex; flex-wrap:wrap; align-items:flex-start; gap:7px; min-width:280px; }
.sia-assignment-chip { display:inline-flex; align-items:center; gap:7px; max-width:100%; padding:6px 8px; border:1px solid var(--k-border); border-radius:9px; background:var(--k-bg); }
.sia-assignment-chip > span { display:grid; gap:1px; min-width:0; }
.sia-assignment-chip strong { overflow-wrap:anywhere; color:var(--k-text); }
.sia-assignment-chip small { color:var(--k-muted); font-size:10px; }
.sia-assignment-chip form { margin:0; }
.sia-unassign-button { width:23px; height:23px; border:0; border-radius:50%; background:rgba(239,68,68,.12); color:var(--k-red); font-size:18px; line-height:1; cursor:pointer; }
.sia-unassigned-label { color:var(--k-muted); font-style:italic; }
.sia-structure-section .screen-reader-text { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.kemis-table-wrap { max-width:100%; overscroll-behavior-x:contain; }
@media (max-width:900px) {
  .sia-structure-grid { grid-template-columns:1fr; }
  .sia-subject-create-grid { grid-template-columns:repeat(2,minmax(140px,1fr)); }
}
@media (max-width:600px) {
  .sia-structure-section { margin:16px 0 24px; }
  .sia-structure-heading { align-items:flex-start; }
  .sia-subject-create-grid { grid-template-columns:1fr; }
  .sia-row-actions { min-width:170px; }
  .sia-subject-rename-form { grid-template-columns:minmax(115px,1fr) 78px auto; min-width:290px; }
  .sia-class-assignment-list { grid-template-columns:1fr; }
}

/* v3.4.2 mobile fixes: prevent topbar, forms and unwrapped tables from forcing page overflow */
@media (max-width:700px) {
  .kemis-topbar {
    height:auto;
    min-height:0;
    flex-wrap:wrap;
    align-items:center;
    gap:8px;
    padding:9px 10px;
  }
  .kemis-search-wrap {
    flex:1 1 100%;
    width:100%;
    max-width:none;
    gap:7px;
  }
  .kemis-search-input { min-width:0; }
  .kemis-top-actions {
    width:100%;
    justify-content:flex-end;
    gap:7px;
  }
  .kemis-profile-badge { padding-left:8px; }
  .kemis-content { padding:14px 10px 32px; }
  .kemis-card { padding:15px 13px; border-radius:10px; }
  .kemis-card-title { align-items:flex-start; gap:8px; }
  .kemis-banner { padding:18px 16px; margin-bottom:14px; border-radius:11px; }
  .kemis-banner h1 { font-size:20px !important; line-height:1.25 !important; }
  .kemis-banner p { font-size:13px !important; line-height:1.5; }
  .kemis-app .kemis-content table.kemis-table {
    display:block;
    width:100%;
    max-width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .kemis-app input:not([type="checkbox"]):not([type="radio"]),
  .kemis-app select,
  .kemis-app textarea,
  .kemis-app input[type="file"] { max-width:100%; }
  .kemis-app .kemis-btn { max-width:100%; white-space:normal; }
  .sia-holistic-meta { grid-template-columns:1fr; }
}

@media (max-width:380px) {
  .kemis-content { padding-right:8px; padding-left:8px; }
  .kemis-topbar { padding-right:8px; padding-left:8px; }
  .kemis-top-actions { gap:5px; }
  .kemis-icon-pill { width:34px; height:34px; }
  .kemis-profile-badge { padding-left:6px; }
  .kemis-avatar { width:32px; height:32px; }
  .kemis-card { padding:13px 10px; }
  .kemis-banner { padding:16px 13px; }
}