/* ==========================================================================
   eLMS Modern Layout — CSS-only refresh (2014 → 2026)
   Preserves all existing class names & PHP structure
   ========================================================================== */

:root {
  --elms-primary: #1e40af;
  --elms-primary-dark: #1e3a8a;
  --elms-primary-light: #3b82f6;
  --elms-accent: #059669;
  --elms-accent-light: #10b981;
  --elms-surface: #ffffff;
  --elms-bg: #f1f5f9;
  --elms-bg-alt: #e2e8f0;
  --elms-text: #1e293b;
  --elms-text-muted: #64748b;
  --elms-border: #e2e8f0;
  --elms-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --elms-shadow: 0 4px 6px -1px rgba(15, 23, 42, 0.08), 0 2px 4px -2px rgba(15, 23, 42, 0.06);
  --elms-shadow-lg: 0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -4px rgba(15, 23, 42, 0.06);
  --elms-radius: 12px;
  --elms-radius-sm: 8px;
  --elms-font: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --elms-max-width: 1280px;
  --elms-transition: 0.2s ease;
}

/* ---- Base ---- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--elms-font) !important;
  font-size: 14px;
  line-height: 1.6;
  color: var(--elms-text);
  background: var(--elms-bg);
  -webkit-font-smoothing: antialiased;
}

p,
h1, h2, h3, h4, h5, h6 {
  font-family: var(--elms-font) !important;
}

a {
  color: var(--elms-primary);
  transition: color var(--elms-transition);
}

a:hover {
  color: var(--elms-primary-light);
}

/* ---- Layout container ---- */
.wrapper {
  width: 100%;
  max-width: var(--elms-max-width);
  padding: 0 24px;
  box-sizing: border-box;
}

/* ---- Header ---- */
#header {
  background: var(--elms-surface);
  box-shadow: var(--elms-shadow-sm);
  border-bottom: 1px solid var(--elms-border);
  padding: 8px 0;
}

.logo2 {
  width: auto;
  max-width: 280px;
}

.logo2 img {
  width: auto;
  max-height: 72px;
  margin: 8px 0;
  object-fit: contain;
}

.header-right {
  width: auto;
  float: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  padding-top: 12px;
}

#header .top-links {
  float: none;
  width: auto;
  padding-left: 0 !important;
}

#header .top-links ul {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#header .top-links li {
  width: auto !important;
  float: none;
}

#header .top-links li a {
  display: inline-block;
  padding: 8px 16px;
  color: var(--elms-text);
  font-weight: 500;
  font-size: 13px;
  border-radius: var(--elms-radius-sm);
  transition: background var(--elms-transition), color var(--elms-transition);
}

#header .top-links li a:hover {
  background: var(--elms-bg);
  color: var(--elms-primary);
  text-decoration: none;
}

.social {
  float: none;
  display: flex;
  gap: 8px;
  padding-top: 0;
}

.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--elms-bg);
  transition: background var(--elms-transition), transform var(--elms-transition);
}

.social a:hover {
  background: var(--elms-primary-light);
  transform: translateY(-2px);
}

.social img {
  float: none;
  margin: 0;
  width: 18px;
  height: 18px;
  opacity: 0.7;
}

.social a:hover img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

/* ---- Navigation ---- */
#menu {
  height: auto;
  min-height: 52px;
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 100%);
  box-shadow: var(--elms-shadow);
  position: sticky;
  top: 0;
  z-index: 1000;
}

#menu .wrapper {
  display: flex;
  align-items: stretch;
}

#menu ul#dropdown_menu {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

#menu ul#dropdown_menu li {
  float: none;
  width: auto;
  flex: 0 1 auto;
  line-height: 1.4;
  padding: 0;
  position: relative;
}

#menu ul#dropdown_menu li a {
  display: block;
  padding: 16px 20px;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background var(--elms-transition);
}

#menu ul#dropdown_menu li:hover,
#menu ul#dropdown_menu li.active {
  background: rgba(255, 255, 255, 0.12);
}

#menu ul#dropdown_menu li ul {
  left: 0 !important;
  top: 100% !important;
  margin-left: 0 !important;
  min-width: 220px;
  border-radius: 0 0 var(--elms-radius-sm) var(--elms-radius-sm);
  box-shadow: var(--elms-shadow-lg);
  overflow: hidden;
  background: var(--elms-primary-dark);
}

#menu ul#dropdown_menu li ul li {
  width: 100% !important;
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#menu ul#dropdown_menu li ul li:last-child {
  border-bottom: none;
}

#menu ul#dropdown_menu li ul li a {
  padding: 12px 20px;
  font-size: 13px;
}

#menu ul#dropdown_menu li ul li:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* ---- Main content area ---- */
#middle {
  float: none;
  display: flow-root;
  margin-top: 24px;
  min-height: 480px;
  width: 100%;
}

/* Full-width admin pages (no sidebars) */
#middle:not(:has(.leftbar)) {
  background: var(--elms-surface);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
  padding: 28px 32px;
  box-sizing: border-box;
}

/* Three-column homepage layout */
#middle:has(.leftbar) {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 24px;
  align-items: start;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

#middle:has(.leftbar) .callbacks_container {
  grid-column: 1 / -1;
}

#middle:has(.leftbar) .leftbar {
  grid-column: 1;
}

#middle:has(.leftbar) section.content,
#middle:has(.leftbar) .content {
  grid-column: 2;
}

#middle:has(.leftbar) .rightbar {
  grid-column: 3;
}

#middle:has(.leftbar) > .clear {
  grid-column: 1 / -1;
  clear: both;
}

.leftbar,
.content,
.rightbar {
  float: none;
  box-sizing: border-box;
  width: 100%;
}

.content,
section.content {
  margin-left: 0;
  background: var(--elms-surface);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
  padding: 28px 32px;
  min-height: 320px;
}

.rightbar {
  margin-left: 0;
}

/* Keep login panel visible and easy to find on homepage */
#login-box {
  position: sticky;
  top: 16px;
  z-index: 2;
}

#login-box .blue-box {
  border: 2px solid rgba(37, 99, 235, 0.15);
}

#login-box .blue-box h2 {
  font-size: 16px;
}

/* ---- Cards / widgets ---- */
.blue-box {
  background: var(--elms-surface);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
  padding: 0;
  overflow: hidden;
}

.blue-box h2 {
  background: linear-gradient(135deg, var(--elms-accent) 0%, var(--elms-accent-light) 100%);
  font-size: 15px;
  font-weight: 600;
  text-shadow: none;
  padding: 14px 18px;
  margin: 0;
  letter-spacing: 0.02em;
}

.blue-inner {
  background: var(--elms-surface);
  box-shadow: none;
  margin-top: 0;
  padding: 16px 18px;
}

.blue-inner a {
  color: var(--elms-primary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
}

.blue-inner a:hover {
  color: var(--elms-accent);
  text-decoration: none;
}

.gray-box {
  background: var(--elms-surface);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
}

.gray-inner {
  background: var(--elms-bg);
  border: none;
  border-radius: var(--elms-radius-sm);
  padding: 8px;
}

.gray-inner ul li a {
  background: none;
  padding: 10px 12px 10px 28px;
  border-radius: var(--elms-radius-sm);
  position: relative;
  line-height: 1.4;
  transition: background var(--elms-transition);
}

.gray-inner ul li a::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--elms-accent);
}

.gray-inner ul li a:hover {
  background: var(--elms-surface);
  color: var(--elms-primary);
}

/* ---- News ticker ---- */
.news {
  font-family: var(--elms-font) !important;
  font-size: 13px;
}

.vticker li {
  padding: 12px 0;
  border-bottom: 1px solid var(--elms-border);
}

.vticker li:last-child {
  border-bottom: none;
}

.month {
  background: var(--elms-primary);
  border-radius: var(--elms-radius-sm) 0 0 var(--elms-radius-sm);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 4px;
}

.day {
  background: var(--elms-bg);
  font-weight: 700;
  font-size: 18px;
  color: var(--elms-primary);
  padding: 4px;
}

.news_detail {
  padding-left: 12px;
}

/* ---- Login form ---- */
.login-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  height: auto;
  padding: 10px 14px;
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius-sm);
  box-shadow: none;
  font-family: var(--elms-font);
  font-size: 14px;
  transition: border-color var(--elms-transition), box-shadow var(--elms-transition);
  margin-bottom: 8px;
}

.login-input:focus {
  border-color: var(--elms-primary-light);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
  outline: none;
}

.login-button {
  background: linear-gradient(135deg, var(--elms-primary) 0%, var(--elms-primary-light) 100%);
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 12px 20px;
  line-height: 1.4;
  font-size: 15px;
  font-weight: 600;
  border-radius: var(--elms-radius-sm);
  margin-top: 12px;
  cursor: pointer;
  transition: transform var(--elms-transition), box-shadow var(--elms-transition);
  box-shadow: var(--elms-shadow-sm);
}

.login-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--elms-shadow);
}

/* ---- Support box ---- */
.support {
  background: var(--elms-surface);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
  height: auto;
  min-height: 120px;
  padding: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.support h2 {
  position: static;
  font-size: 16px !important;
  font-weight: 600;
  color: var(--elms-primary) !important;
  width: auto;
  line-height: 1.3;
  background: none !important;
  text-shadow: none !important;
  flex: 1 1 100%;
}

.support a {
  position: static;
  float: none;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--elms-accent);
  text-decoration: none;
  padding: 8px 16px;
  background: var(--elms-bg);
  border-radius: var(--elms-radius-sm);
  transition: background var(--elms-transition);
}

.support a:hover {
  background: var(--elms-accent);
  color: #fff;
}

.support img {
  position: static;
  width: 64px;
  opacity: 0.9;
}

/* ---- Typography ---- */
h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--elms-primary-dark);
  margin-top: 0;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}

h2 {
  font-size: 20px;
  font-weight: 600;
  color: var(--elms-text);
  background: none;
  text-shadow: none;
  margin-bottom: 12px;
}

h3 {
  font-size: 16px;
  font-weight: 500;
  color: var(--elms-text-muted);
}

h4 {
  background: linear-gradient(135deg, var(--elms-primary) 0%, var(--elms-primary-light) 100%);
  border-radius: var(--elms-radius-sm);
  width: 100%;
  max-width: 100%;
  height: auto;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
}

/* ---- Buttons ---- */
#blue-button {
  background: linear-gradient(135deg, var(--elms-primary) 0%, var(--elms-primary-light) 100%);
  width: auto;
  min-width: 200px;
  height: auto;
  padding: 14px 28px;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--elms-radius-sm);
  cursor: pointer;
  box-shadow: var(--elms-shadow);
  transition: transform var(--elms-transition), box-shadow var(--elms-transition);
  text-align: center;
}

#blue-button:hover {
  transform: translateY(-2px);
  box-shadow: var(--elms-shadow-lg);
}

input[type=submit],
input[type=button],
button {
  background: linear-gradient(135deg, var(--elms-accent) 0%, var(--elms-accent-light) 100%) !important;
  color: #fff !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: var(--elms-radius-sm) !important;
  font-family: var(--elms-font);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: transform var(--elms-transition), box-shadow var(--elms-transition);
  box-shadow: var(--elms-shadow-sm);
}

input[type=submit]:hover,
input[type=button]:hover,
button:hover {
  background: linear-gradient(135deg, var(--elms-primary) 0%, var(--elms-primary-light) 100%) !important;
  box-shadow: var(--elms-shadow) !important;
  transform: translateY(-1px);
}

.btn1, .btn2, .btn3 {
  background: linear-gradient(135deg, var(--elms-primary) 0%, var(--elms-primary-light) 100%) !important;
  width: auto !important;
  min-width: 114px !important;
  height: auto !important;
  padding: 8px 16px !important;
  border-radius: var(--elms-radius-sm) !important;
  line-height: 1.4 !important;
}

/* ---- Form inputs ---- */
input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
select,
textarea {
  padding: 10px 14px !important;
  border-radius: var(--elms-radius-sm) !important;
  border: 1px solid var(--elms-border) !important;
  font-family: var(--elms-font);
  font-size: 14px;
  transition: border-color var(--elms-transition), box-shadow var(--elms-transition);
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus,
select:focus,
textarea:focus {
  border-color: var(--elms-primary-light) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12) !important;
  outline: none;
}

/* ---- Tables / grids ---- */
.grid {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--elms-radius);
  overflow: hidden;
  box-shadow: var(--elms-shadow);
  background: var(--elms-surface);
}

.grid th {
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 100%) !important;
  color: #fff !important;
  font-weight: 600;
  font-size: 13px;
  padding: 14px 16px !important;
  height: auto;
  border: none;
}

.grid td {
  padding: 12px 16px !important;
  height: auto;
  border-bottom: 1px solid var(--elms-border);
  font-size: 13px;
}

.grid tr:last-child td {
  border-bottom: none;
}

.grid tr:nth-child(even) td {
  background: var(--elms-bg);
}

.grid tr:hover td {
  background: rgba(59, 130, 246, 0.04);
}

table#detail,
table#pagination {
  border-radius: var(--elms-radius);
  overflow: hidden;
  box-shadow: var(--elms-shadow);
  border: none !important;
}

table#detail td,
table#detail th,
table#pagination td,
table#pagination th {
  border-color: var(--elms-border) !important;
  padding: 10px 14px !important;
}

table#pagination th {
  background: var(--elms-primary) !important;
}

/* ---- Pagination ---- */
.pagin a,
.pagin span {
  background: var(--elms-surface) !important;
  border: 1px solid var(--elms-border) !important;
  border-radius: var(--elms-radius-sm) !important;
  font-weight: 500;
  transition: background var(--elms-transition), border-color var(--elms-transition);
}

.pagin a:hover {
  background: var(--elms-primary) !important;
  border-color: var(--elms-primary) !important;
  color: #fff !important;
}

span.current {
  background: var(--elms-primary) !important;
  color: #fff !important;
  border-radius: var(--elms-radius-sm);
  padding: 0 10px;
}

#pagination .pagin {
  background: transparent !important;
  color: var(--elms-text);
}

/* ---- Alerts ---- */
#error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--elms-radius-sm);
  color: #dc2626;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px 12px 40px;
  width: auto;
  max-width: 100%;
  height: auto;
  line-height: 1.5;
}

#success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: var(--elms-radius-sm);
  color: #16a34a;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 16px 12px 40px;
  width: auto;
  max-width: 100%;
  height: auto;
  line-height: 1.5;
}

/* ---- Footer ---- */
#footer {
  float: none;
  width: 100%;
  height: auto;
  padding: 48px 0 0;
  margin-top: 48px;
  border-top: none;
  background: var(--elms-primary-dark);
  color: rgba(255, 255, 255, 0.85);
}

#footer .wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 32px;
  padding-bottom: 32px;
}

.footer-links,
.footer-middle,
.contact-us {
  float: none;
  width: auto;
  padding: 0;
}

.footer-links h1,
.contact-us h1 {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0 0 16px;
}

.footer-links ul {
  list-style: none;
  margin-top: 0;
}

.footer-links li {
  margin-bottom: 8px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.75);
  padding: 0;
  font-size: 14px;
  transition: color var(--elms-transition);
}

.footer-links a:hover {
  color: #fff;
  text-decoration: none;
}

.footer-middle {
  text-align: center;
  padding-top: 0;
}

.footer-middle img {
  max-width: 100%;
  height: auto;
  opacity: 0.9;
  border-radius: var(--elms-radius-sm);
}

.contact-us {
  font-size: 13px;
  line-height: 1.7;
}

.contact-us a {
  color: var(--elms-accent-light);
}

.copyright {
  background: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  padding: 16px 0;
  height: auto;
  text-align: center;
}

.copyright .wrapper {
  display: block;
  padding-bottom: 0;
}

/* ---- Live chat panels ---- */
#live-chat-box,
#live-admin-chat-box {
  background: var(--elms-surface);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius) var(--elms-radius) 0 0;
  box-shadow: var(--elms-shadow-lg);
  width: 320px;
  max-width: 95vw;
}

.heading {
  background: var(--elms-primary);
  padding: 10px 14px;
  border-radius: var(--elms-radius-sm) var(--elms-radius-sm) 0 0;
}

/* ---- Banner slider ---- */
.callbacks_container {
  border-radius: var(--elms-radius);
  overflow: hidden;
  box-shadow: var(--elms-shadow-lg);
  margin-bottom: 24px;
}

.callbacks_container img,
.rslides img {
  border-radius: var(--elms-radius);
}

/* ---- Content tables (index page etc.) ---- */
.content table {
  border-collapse: separate;
  border-spacing: 0;
}

.content table td {
  padding: 8px 12px;
  vertical-align: top;
}

.content table img {
  border-radius: var(--elms-radius-sm);
  box-shadow: var(--elms-shadow-sm);
}

/* ---- Menu sidebar ---- */
.menu ul li a {
  background: var(--elms-bg);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius-sm);
  width: 100%;
  box-sizing: border-box;
  transition: background var(--elms-transition), color var(--elms-transition);
}

.menu ul li a:hover {
  background: var(--elms-primary);
  color: #fff;
}

.menu ul li {
  background: none;
  margin-bottom: 6px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  #middle:has(.leftbar) {
    grid-template-columns: 1fr 1fr;
  }

  #middle:has(.leftbar) .leftbar {
    grid-column: 1;
    grid-row: 2;
  }

  #middle:has(.leftbar) section.content,
  #middle:has(.leftbar) .content {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  #middle:has(.leftbar) .rightbar {
    grid-column: 2;
    grid-row: 2;
  }

  #footer .wrapper {
    grid-template-columns: 1fr 1fr;
  }

  .footer-middle {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .wrapper {
    padding: 0 16px;
  }

  .logo2,
  .header-right {
    width: 100%;
    float: none;
    text-align: center;
  }

  .header-right {
    align-items: center;
  }

  #header .top-links ul {
    justify-content: center;
  }

  #middle:has(.leftbar) {
    grid-template-columns: 1fr;
  }

  #middle:has(.leftbar) .leftbar,
  #middle:has(.leftbar) section.content,
  #middle:has(.leftbar) .content,
  #middle:has(.leftbar) .rightbar {
    grid-column: 1;
  }

  #middle:not(:has(.leftbar)) {
    padding: 20px 16px;
  }

  #menu ul#dropdown_menu li a {
    padding: 12px 14px;
    font-size: 12px;
  }

  #menu ul#dropdown_menu li {
    flex: 1 1 50%;
  }

  .content {
    padding: 20px 16px;
  }

  #footer .wrapper {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .contact-us {
    padding-left: 0 !important;
  }

  h1 {
    font-size: 22px;
  }
}

@media (max-width: 480px) {
  #menu ul#dropdown_menu li {
    flex: 1 1 100%;
  }

  #menu ul#dropdown_menu li a {
    text-align: center;
  }
}

/* ==========================================================================
   Auth & account pages (login sidebar, forget/reset password, signup)
   ========================================================================== */

/* Sidebar login form labels */
.rightbar .blue-inner form {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rightbar .blue-inner form br {
  display: none;
}

.rightbar .blue-inner > form,
.rightbar .blue-inner form {
  font-size: 13px;
  font-weight: 500;
  color: var(--elms-text-muted);
}

.rightbar .blue-inner p {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--elms-border);
  font-size: 13px;
  line-height: 1.8;
}

.rightbar .blue-inner p a {
  color: var(--elms-accent);
  font-weight: 500;
}

.rightbar .blue-inner p a:hover {
  color: var(--elms-primary);
}

.rightbar #error {
  width: 100%;
  margin-bottom: 12px;
  box-sizing: border-box;
  font-size: 12px;
  padding: 10px 12px 10px 36px;
  background-position: 10px center;
}

/* Standalone auth forms */
#frm-add {
  max-width: 560px;
  margin: 0 auto;
}

#frm-add h3 {
  text-align: center;
  margin-bottom: 24px;
  color: var(--elms-text-muted);
  font-weight: 400;
}

table#detail {
  width: 100% !important;
  max-width: 560px;
  margin: 0 auto;
  background: var(--elms-surface);
  border-radius: var(--elms-radius);
  overflow: hidden;
}

table#detail tr:first-child td {
  border-top: none;
}

table#detail td.tright {
  text-align: right;
  font-weight: 500;
  color: var(--elms-text-muted);
  width: 35%;
}

table#detail td.tright label {
  font-weight: 500;
}

table#detail td[colspan="2"] {
  text-align: center;
  padding: 20px;
}

table#detail input[type=text],
table#detail input[type=password],
table#detail input[type=email] {
  width: 100%;
  max-width: 320px;
}

#back {
  text-align: center;
  padding: 24px 0 8px;
  max-width: 560px;
  margin: 0 auto;
}

#back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--elms-primary);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 20px;
  background: var(--elms-bg);
  border-radius: var(--elms-radius-sm);
  transition: background var(--elms-transition), color var(--elms-transition);
}

#back a:hover {
  background: var(--elms-primary);
  color: #fff;
  font-weight: 500;
  text-decoration: none;
}

#back a::before {
  content: '←';
  font-size: 16px;
}

#middle:has(#feedbackform) {
  padding: 28px 32px;
}

#middle:has(#feedbackform) > h1 {
  margin-bottom: 8px;
}

#feedbackform {
  margin-top: 8px;
}

#feedbackform #SaveAccount,
#feedbackform input[type=submit].right {
  float: right;
  margin-top: 16px;
  padding: 12px 32px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Contact page */
.content ul {
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

.content ul li {
  padding: 12px 16px;
  background: var(--elms-bg);
  border-radius: var(--elms-radius-sm);
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--elms-primary);
  border-left: 4px solid var(--elms-accent);
}

.content p strong {
  color: var(--elms-text);
  font-size: 15px;
}

#middle .spcaer_div:has(.leftbar) {
  display: contents;
}

#middle #middle {
  /* contact-us.php nested middle — flatten */
  display: contents;
}

/* ==========================================================================
   Live chat panels (index.php floating boxes)
   ========================================================================== */

#live-chat-box,
#live-admin-chat-box {
  background: var(--elms-surface);
  border: 1px solid var(--elms-border) !important;
  border-radius: var(--elms-radius) var(--elms-radius) 0 0;
  box-shadow: var(--elms-shadow-lg);
  width: 340px !important;
  max-width: 95vw;
  bottom: 0;
  right: 16px;
  position: fixed;
  z-index: 1000;
  overflow: hidden;
}

#live-chat-box table,
#live-admin-chat-box table {
  width: 100%;
  border-collapse: collapse;
}

#live-chat-box .heading,
#live-admin-chat-box .heading {
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 100%);
  color: #fff;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
}

#live-chat-box td.heading a,
#live-admin-chat-box td.heading a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.15);
  transition: background var(--elms-transition);
}

#live-chat-box td.heading a:hover,
#live-admin-chat-box td.heading a:hover {
  background: rgba(255, 255, 255, 0.25);
}

#live-chat-box fieldset.s,
#live-admin-chat-box fieldset.s {
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius-sm);
  padding: 16px;
  margin: 0;
  background: var(--elms-bg);
}

#live-chat-box fieldset.s legend,
#live-admin-chat-box fieldset.s legend {
  font-size: 14px;
  font-weight: 600;
  color: var(--elms-primary);
  padding: 0 8px;
}

#live-chat-box fieldset.s table td,
#live-admin-chat-box fieldset.s table td {
  padding: 8px 4px;
  font-size: 13px;
  color: var(--elms-text-muted);
}

#live-chat-box input[type=text],
#live-chat-box input[type=password],
#live-chat-box textarea,
#live-admin-chat-box input[type=text],
#live-admin-chat-box input[type=password] {
  width: 100%;
  box-sizing: border-box;
}

#live-chat-box input[type=submit],
#live-admin-chat-box input[type=submit] {
  margin-top: 8px;
}

#live-chat-box td[colspan="2"],
#live-admin-chat-box td[colspan="2"] {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--elms-text-muted);
  line-height: 1.6;
}

#start-chat,
#start-admin-chat {
  position: static !important;
  float: none !important;
  margin: 0 !important;
}

@media (max-width: 480px) {
  #live-chat-box,
  #live-admin-chat-box {
    width: 100% !important;
    right: 0;
    border-radius: var(--elms-radius) var(--elms-radius) 0 0;
  }
}

/* ==========================================================================
   Admin list & add/edit pages
   ========================================================================== */

.height10,
.clear.height10 {
  height: 10px;
}

/* Page action toolbar (Add, Search, filters) */
.spcaer_div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px 20px;
  background: var(--elms-bg);
  border-radius: var(--elms-radius-sm);
  border: 1px solid var(--elms-border);
}

.spcaer_div .btn1,
.spcaer_div .btn2,
.spcaer_div .btn3 {
  float: none !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 110px !important;
  padding: 8px 16px !important;
}

.spcaer_div form#frm-add {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  max-width: none;
}

.spcaer_div form#frm-add select,
.spcaer_div form#frm-add input[type=text] {
  margin: 0;
}

.spcaer_div form#frm-add input[type=submit] {
  margin: 0;
}

/* All data grids full width */
table.grid {
  width: 100% !important;
  max-width: 100%;
  margin-top: 8px;
}

/* Horizontal scroll wrapper for wide grids on small screens */
#middle:has(table.grid) {
  overflow-x: auto;
}

.grid td:first-child {
  white-space: nowrap;
}

.grid td:first-child a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin: 1px;
  border-radius: 6px;
  transition: background var(--elms-transition);
}

.grid td:first-child a:hover {
  background: rgba(30, 64, 175, 0.08);
}

.grid td:first-child a img {
  width: 16px;
  height: 16px;
  opacity: 0.85;
}

.grid td a:not(:has(img)) {
  color: var(--elms-primary);
  font-weight: 500;
}

.grid td a:not(:has(img)):hover {
  color: var(--elms-accent);
  text-decoration: underline;
}

/* Override legacy inline zebra striping */
.grid tr[bgcolor] td,
.grid tr[bgcolor="#DBDBDB"] td {
  background: #f1f5f9 !important;
}

.grid tr td[bgcolor],
.grid tr td[bgcolor="#f3f3f3"],
.grid tr td[bgcolor="#A8D6A7"] {
  background: var(--elms-surface) !important;
}

.grid tr td[colspan][style*="font-size:20px"],
.grid tr td[colspan][style*="font-weight:bold"] {
  background: linear-gradient(135deg, var(--elms-accent) 0%, var(--elms-accent-light) 100%) !important;
  color: #fff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  padding: 14px !important;
  text-align: center !important;
  letter-spacing: 0.02em;
}

.grid td input[type=checkbox] {
  accent-color: var(--elms-primary);
  margin-right: 8px;
  width: 16px;
  height: 16px;
  vertical-align: middle;
}

#pagination-top,
#pagination-bottom {
  margin: 12px 0;
}

.multiselect {
  width: 100%;
  max-width: 320px;
  min-height: 120px;
  border: 1px solid var(--elms-border) !important;
  border-radius: var(--elms-radius-sm);
  padding: 8px;
  background: var(--elms-surface);
}

#middle #frm-add + table#detail,
#middle > #frm-add table#detail {
  margin-top: 8px;
}

.link {
  color: var(--elms-accent);
  font-weight: 500;
}

.link:hover {
  color: var(--elms-primary);
}

/* ==========================================================================
   Student & teacher dashboard (home.php)
   ========================================================================== */

#middle:has(.leftbar) > h1 {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 55%, var(--elms-primary-light) 100%);
  color: #fff;
  padding: 24px 28px;
  border-radius: var(--elms-radius);
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 600;
  box-shadow: var(--elms-shadow);
  letter-spacing: -0.01em;
}

#middle:has(.leftbar) > h1 + .leftbar {
  /* normal grid flow */
}

/* Query list on admin home */
.content > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.content > ul > li.news,
.content ul li.news {
  padding: 14px 18px;
  margin-bottom: 8px;
  background: var(--elms-bg);
  border-radius: var(--elms-radius-sm);
  border-left: 4px solid var(--elms-primary-light);
  font-size: 14px;
  line-height: 1.5;
  color: var(--elms-text);
}

.content > ul > li.news img {
  vertical-align: middle;
  margin-left: 8px;
}

.content h2 {
  font-size: 18px;
  font-weight: 600;
  color: var(--elms-primary-dark);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--elms-border);
  background: none;
  text-shadow: none;
}

/* Course tiles (student & teacher home) */
.content table.grid,
section.content table.grid {
  margin-bottom: 20px;
}

.content table.grid th,
section.content table.grid th {
  font-size: 15px !important;
  height: auto !important;
  padding: 14px 16px !important;
}

.grid td:has(.course-list),
.content td:has(.course-list) {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 16px !important;
  align-items: stretch;
}

.course-list {
  float: none !important;
  width: 108px !important;
  min-height: 108px;
  height: auto !important;
  margin: 0 !important;
  padding: 14px 10px !important;
  border: 1px solid var(--elms-border) !important;
  border-radius: var(--elms-radius-sm) !important;
  background: var(--elms-surface);
  box-shadow: var(--elms-shadow-sm);
  text-align: center;
  transition: transform var(--elms-transition), box-shadow var(--elms-transition), border-color var(--elms-transition);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.course-list:hover {
  transform: translateY(-3px);
  box-shadow: var(--elms-shadow);
  border-color: var(--elms-primary-light) !important;
}

.course-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--elms-text);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
}

.course-list a:hover {
  color: var(--elms-primary);
}

.course-list img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* Voucher / course selection inside dashboard */
.content #frm-add table#detail,
section.content form table#detail {
  max-width: 100%;
  margin-bottom: 20px;
}

.content form table.grid td {
  padding: 10px 16px !important;
}

/* ==========================================================================
   Student services (icon grid — tables without header row)
   ========================================================================== */

#middle > table.grid:not(:has(th)) tr {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

#middle > table.grid:not(:has(th)) td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  vertical-align: top;
}

#middle > table.grid:not(:has(th)) tr:only-child td:only-child {
  flex: 1 1 100%;
  padding: 24px !important;
  text-align: center;
  color: var(--elms-text-muted);
  background: var(--elms-bg) !important;
  border-radius: var(--elms-radius-sm) !important;
  border: 1px dashed var(--elms-border) !important;
}

#middle > table.grid:not(:has(th)) td > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 140px;
  padding: 24px 16px;
  background: var(--elms-surface);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow-sm);
  color: var(--elms-text);
  font-weight: 600;
  font-size: 13px;
  text-align: center;
  line-height: 1.4;
  transition: transform var(--elms-transition), box-shadow var(--elms-transition), border-color var(--elms-transition);
  flex: 1 1 180px;
  box-sizing: border-box;
}

#middle > table.grid:not(:has(th)) td > a:hover {
  transform: translateY(-4px);
  box-shadow: var(--elms-shadow);
  border-color: var(--elms-primary-light);
  color: var(--elms-primary);
  text-decoration: none;
}

#middle > table.grid:not(:has(th)) td > a img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  transition: transform var(--elms-transition);
}

#middle > table.grid:not(:has(th)) td > a:hover img {
  transform: scale(1.08);
}

/* Reset student-services grid when inside .content with sidebars */
.content table.grid tr,
section.content table.grid tr {
  display: table-row;
}

.content table.grid td,
section.content table.grid td {
  display: table-cell;
}

/* ==========================================================================
   Grade book & account book
   ========================================================================== */

/* Student info summary panel (grade-book.php) */
#middle > div[style*="border"] > table:not(.grid),
#middle > div[style*="border-radius"] > table:not(.grid) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--elms-radius);
  overflow: hidden;
  box-shadow: var(--elms-shadow);
  border: 1px solid var(--elms-border);
  margin-bottom: 8px;
}

#middle > div[style*="border"],
#middle > div[style*="border-radius"] {
  border: none !important;
  border-radius: 0;
  margin-bottom: 20px;
}

#middle > div[style*="border"] > table:not(.grid) th,
#middle > div[style*="border-radius"] > table:not(.grid) th {
  background: var(--elms-bg);
  font-weight: 600;
  font-size: 13px;
  color: var(--elms-text-muted);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--elms-border);
  width: 25%;
}

#middle > div[style*="border"] > table:not(.grid) td,
#middle > div[style*="border-radius"] > table:not(.grid) td {
  padding: 12px 16px;
  font-weight: 500;
  color: var(--elms-text);
  background: var(--elms-surface) !important;
  border-bottom: 1px solid var(--elms-border);
  text-align: center;
}

#middle > div[style*="border"] > table:not(.grid) tr:last-child th,
#middle > div[style*="border"] > table:not(.grid) tr:last-child td,
#middle > div[style*="border-radius"] > table:not(.grid) tr:last-child th,
#middle > div[style*="border-radius"] > table:not(.grid) tr:last-child td {
  border-bottom: none;
}

/* View / profile pages with content section */
section.content[style*="width"] {
  width: 100% !important;
  max-width: 100%;
}

section.content form table#detail img {
  border-radius: var(--elms-radius-sm);
  box-shadow: var(--elms-shadow-sm);
  object-fit: cover;
}

/* ==========================================================================
   jQuery UI datepicker (calender fields)
   ========================================================================== */

.ui-datepicker {
  font-family: var(--elms-font) !important;
  font-size: 13px !important;
  border-radius: var(--elms-radius-sm) !important;
  border: 1px solid var(--elms-border) !important;
  box-shadow: var(--elms-shadow-lg) !important;
  padding: 8px !important;
  width: auto !important;
}

.ui-datepicker-header {
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 100%) !important;
  border: none !important;
  border-radius: var(--elms-radius-sm) var(--elms-radius-sm) 0 0 !important;
  color: #fff !important;
}

.ui-datepicker-title {
  color: #fff !important;
  font-weight: 600;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  cursor: pointer;
}

.ui-datepicker-calendar th {
  color: var(--elms-text-muted);
  font-weight: 600;
  font-size: 11px;
}

.ui-datepicker-calendar td a,
.ui-datepicker-calendar td span {
  text-align: center;
  border-radius: 6px !important;
  border: none !important;
  background: transparent !important;
  padding: 6px !important;
}

.ui-datepicker-calendar td a:hover {
  background: var(--elms-bg) !important;
  color: var(--elms-primary) !important;
}

.ui-datepicker-calendar .ui-state-active,
.ui-datepicker-calendar .ui-state-active:hover {
  background: var(--elms-primary) !important;
  color: #fff !important;
}

.ui-datepicker .ui-state-default {
  background: transparent !important;
}

input.calender,
input.hasDatepicker {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 2a1 1 0 0 0-1 1v1h14V3a1 1 0 0 0-1-1H2zm13 3H1v9a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px !important;
  cursor: pointer;
}

/* ==========================================================================
   Responsive — admin & dashboard
   ========================================================================== */

@media (max-width: 768px) {
  .spcaer_div {
    flex-direction: column;
    align-items: stretch;
  }

  .spcaer_div form#frm-add {
    margin-left: 0;
    width: 100%;
  }

  .spcaer_div .btn1,
  .spcaer_div .btn2,
  .spcaer_div .btn3 {
    width: 100% !important;
  }

  #middle:has(.leftbar) > h1 {
    font-size: 18px;
    padding: 18px 20px;
  }

  .course-list {
    width: calc(50% - 6px) !important;
    min-width: 100px;
  }

  #middle > table.grid:not(:has(th)) td > a {
    flex: 1 1 calc(50% - 8px);
    min-height: 120px;
    padding: 16px 12px;
  }

  #middle > div[style*="border"] > table:not(.grid) th,
  #middle > div[style*="border"] > table:not(.grid) td,
  #middle > div[style*="border-radius"] > table:not(.grid) th,
  #middle > div[style*="border-radius"] > table:not(.grid) td {
    display: block;
    width: 100% !important;
    text-align: left;
  }

  .grid th,
  .grid td {
    font-size: 12px !important;
    padding: 8px 10px !important;
  }
}

@media (max-width: 480px) {
  .course-list {
    width: calc(50% - 6px) !important;
  }

  #middle > table.grid:not(:has(th)) td > a {
    flex: 1 1 100%;
  }
}

/* ==========================================================================
   Discussion board
   ========================================================================== */

/* Lecture info bar (view / expand pages) */
#middle > table[style*="2247B1"],
#middle > table[style*="border:2px"],
table[style*="2247B1"][width="100%"] {
  width: 100% !important;
  border: 1px solid var(--elms-border) !important;
  border-radius: var(--elms-radius) !important;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  box-shadow: var(--elms-shadow-sm);
  margin-bottom: 16px;
  font-size: 14px !important;
}

#middle > table[style*="2247B1"] th,
table[style*="2247B1"] th {
  background: var(--elms-bg);
  font-weight: 600;
  font-size: 12px;
  color: var(--elms-text-muted);
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--elms-border);
}

#middle > table[style*="2247B1"] td,
table[style*="2247B1"] td {
  padding: 12px 14px;
  font-weight: 500;
  background: var(--elms-surface) !important;
  border-bottom: 1px solid var(--elms-border);
}

/* Status badges in discussion grids */
.grid td font[color="#006600"],
.grid td font[color="#006600"] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 600;
  background: #dcfce7;
  color: #16a34a !important;
}

.grid td font[color="#FF0000"],
.grid td font[color="#ff0000"] {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px !important;
  font-weight: 600;
  background: #fee2e2;
  color: #dc2626 !important;
}

/* Discussion action links in grid */
.grid td a[href*="discussion-board"],
.grid td a[href*="Pending"],
.grid td a[href*="Expand"] {
  display: inline-block;
  padding: 4px 10px;
  margin: 2px 4px 2px 0;
  border-radius: var(--elms-radius-sm);
  font-size: 12px;
  font-weight: 500;
  background: var(--elms-bg);
  color: var(--elms-primary);
  transition: background var(--elms-transition), color var(--elms-transition);
}

.grid td a[href*="discussion-board"]:hover,
.grid td a[href*="Pending"]:hover {
  background: var(--elms-primary);
  color: #fff;
  text-decoration: none;
}

.grid td a[href*="Expand"]:hover {
  background: var(--elms-accent);
  color: #fff;
  text-decoration: none;
}

/* Post message button outside toolbar */
#middle > a.btn1,
#middle > a.btn2 {
  float: none !important;
  display: inline-flex !important;
  margin: 0 0 16px !important;
}

#middle > a.btn1.right,
#middle > a.btn2.right {
  margin-left: auto !important;
  float: right !important;
}

/* Thread / message view (expand page) */
.grid th[colspan="2"] {
  text-align: center !important;
  font-size: 15px !important;
}

.grid tr td[bgcolor="#f3f3f3"] {
  background: var(--elms-bg) !important;
  border-right: 1px solid var(--elms-border) !important;
  vertical-align: top !important;
  padding: 16px !important;
  width: 200px;
  min-width: 160px;
}

.grid tr td font[style*="2247B1"],
.grid tr td font[style*="color:#2247B1"] {
  color: var(--elms-primary) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.grid tr td[bgcolor="#f3f3f3"] font[style*="2247B1"] {
  display: block;
  font-size: 18px !important;
  margin-bottom: 8px;
}

/* Message body cell */
.grid tr:has(td[bgcolor="#f3f3f3"]) td:not([bgcolor]) {
  padding: 16px 20px !important;
  line-height: 1.7;
  font-size: 14px;
}

.grid tr td hr {
  border: none;
  border-top: 1px solid var(--elms-border);
  margin: 12px 0;
}

/* ==========================================================================
   Quiz & exam pages
   ========================================================================== */

/* Countdown timer (quiz.php) */
#txt {
  display: block !important;
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px;
  margin: 0 auto 20px !important;
  padding: 12px 20px !important;
  border: 2px solid var(--elms-primary-light) !important;
  border-radius: var(--elms-radius) !important;
  font-family: var(--elms-font) !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%) !important;
  color: var(--elms-primary-dark) !important;
  text-align: center !important;
  box-shadow: var(--elms-shadow);
  letter-spacing: 0.05em;
}

/* Quiz question form */
#middle form#frm-add:has(#txt) {
  max-width: 720px;
  margin: 0 auto;
}

#middle form#frm-add:has(#txt) table#detail {
  max-width: 100%;
  background: var(--elms-surface);
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow);
  overflow: hidden;
}

#middle form#frm-add:has(#txt) table#detail tr:first-child td {
  background: var(--elms-bg);
  padding: 20px 24px !important;
  font-size: 16px;
  line-height: 1.6;
  color: var(--elms-text);
  border-bottom: 2px solid var(--elms-border);
}

#middle form#frm-add:has(#txt) table#detail tr:first-child td b {
  font-weight: 600;
  color: var(--elms-primary-dark);
}

/* Radio answer options */
#middle form#frm-add:has(#txt) table#detail input[type=radio] {
  accent-color: var(--elms-primary);
  width: 18px;
  height: 18px;
  margin-right: 10px;
  vertical-align: middle;
}

#middle form#frm-add:has(#txt) table#detail tr:nth-child(2) td {
  padding: 16px 24px !important;
  line-height: 2.4;
  font-size: 14px;
}

#middle form#frm-add:has(#txt) table#detail tr:last-child td {
  padding: 16px 24px !important;
  background: var(--elms-bg);
  border-top: 1px solid var(--elms-border);
  text-align: right;
}

#middle form#frm-add:has(#txt) table#detail input[type=submit] {
  min-width: 120px;
  padding: 12px 28px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* Rules & regulations (checkpoint.php — no timer) */
#middle form#frm-add:not(:has(#txt)) table#detail th {
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 100%);
  color: #fff;
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  border: none;
}

#middle form#frm-add:not(:has(#txt)) table#detail tr td {
  padding: 16px 24px !important;
  font-size: 14px;
  line-height: 1.7;
}

/* Quiz list — student "Start Quiz" column */
.grid td a[href*="quiz.php"],
.grid td a[href*="checkpoint.php"] {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--elms-accent) 0%, var(--elms-accent-light) 100%);
  color: #fff !important;
  border-radius: var(--elms-radius-sm);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid td a[href*="quiz.php"]:hover,
.grid td a[href*="checkpoint.php"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--elms-shadow-sm);
  text-decoration: none;
}

/* Papers / exams list */
.grid td a[href*="view-student-paper"],
.grid td a[href*="papers.php"] {
  font-weight: 500;
}

/* Empty grid message */
.grid tr td[colspan] {
  text-align: center;
  padding: 32px 16px !important;
  color: var(--elms-text-muted);
  font-style: italic;
}

/* Quiz solutions / view pages toolbar spacing */
#middle > .clear + .clear + #pagination-top,
#middle > div[style*="height:20px"] {
  height: 0 !important;
  margin: 0;
}

@media (max-width: 768px) {
  .grid tr td[bgcolor="#f3f3f3"] {
    display: block;
    width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid var(--elms-border) !important;
  }

  .grid tr:has(td[bgcolor="#f3f3f3"]) td:not([bgcolor]) {
    display: block;
    width: 100% !important;
  }

  #txt {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   CMS & public content pages (content.php)
   ========================================================================== */

section.content > h1,
.content > h1 {
  margin-top: 0 !important;
  padding-bottom: 16px;
  margin-bottom: 24px;
  border-bottom: 3px solid var(--elms-primary);
  font-size: 28px;
  letter-spacing: -0.02em;
}

/* CMS / news body (HTML from database) */
section.content > p,
.content > p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--elms-text);
  margin-bottom: 16px;
}

section.content > p img,
.content > p img,
section.content img,
.content img {
  max-width: 100%;
  height: auto;
  border-radius: var(--elms-radius-sm);
  margin: 16px 0;
  box-shadow: var(--elms-shadow-sm);
}

section.content > p a,
.content > p a,
section.content a,
.content a:not(.btn1):not(.btn2):not(.btn3) {
  color: var(--elms-primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--elms-transition);
}

section.content > p a:hover,
.content > p a:hover {
  color: var(--elms-accent);
}

section.content > p ul,
section.content > p ol,
.content ul,
.content ol {
  margin: 16px 0 16px 24px;
  line-height: 1.8;
}

section.content > p li,
.content li {
  margin-bottom: 8px;
}

section.content > p table,
.content table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--elms-radius-sm);
  overflow: hidden;
  box-shadow: var(--elms-shadow-sm);
  margin: 20px 0;
  border: 1px solid var(--elms-border);
}

section.content > p table th,
.content table th {
  background: var(--elms-primary) !important;
  color: #fff !important;
  padding: 10px 14px !important;
  font-size: 13px;
  font-weight: 600;
}

section.content > p table td,
.content table td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--elms-border);
  font-size: 14px;
}

section.content > p h2,
section.content > p h3,
section.content > p h4,
.content h2,
.content h3,
.content h4 {
  margin: 28px 0 12px;
  color: var(--elms-primary-dark);
  background: none !important;
  text-shadow: none !important;
}

section.content > p blockquote,
.content blockquote {
  margin: 20px 0;
  padding: 16px 20px;
  border-left: 4px solid var(--elms-accent);
  background: var(--elms-bg);
  border-radius: 0 var(--elms-radius-sm) var(--elms-radius-sm) 0;
  font-style: italic;
  color: var(--elms-text-muted);
}

/* Sidebar CMS page layout (content.php, contact-us.php) */
#middle .spcaer_div:has(section.content) {
  display: contents;
}

#middle:has(.spcaer_div .leftbar) {
  display: grid;
  grid-template-columns: minmax(220px, 260px) minmax(0, 1fr) minmax(240px, 280px);
  gap: 24px;
  align-items: start;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

#middle:has(.spcaer_div .leftbar) .spcaer_div .leftbar {
  grid-column: 1;
}

#middle:has(.spcaer_div .leftbar) .spcaer_div section.content,
#middle:has(.spcaer_div .leftbar) .spcaer_div .content {
  grid-column: 2;
}

#middle:has(.spcaer_div .leftbar) .spcaer_div .rightbar {
  grid-column: 3;
}

#middle:has(.spcaer_div .leftbar) > .clear,
#middle:has(.spcaer_div .leftbar) .spcaer_div + .clear {
  grid-column: 1 / -1;
}

/* ==========================================================================
   Assignments
   ========================================================================== */

/* Course title banner row in assignment grids */
.grid tr:first-child th[colspan] {
  text-align: left !important;
  font-size: 16px !important;
  padding: 16px 20px !important;
  background: linear-gradient(135deg, var(--elms-primary-dark) 0%, var(--elms-primary) 100%) !important;
  letter-spacing: -0.01em;
}

/* File download links */
.grid td a[href*="download.php"],
section.content a[href*="download.php"],
a[href*="download.php"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--elms-bg);
  border: 1px solid var(--elms-border);
  border-radius: var(--elms-radius-sm);
  color: var(--elms-primary) !important;
  font-weight: 600;
  font-size: 12px;
  text-decoration: none !important;
  transition: background var(--elms-transition), border-color var(--elms-transition), transform var(--elms-transition);
}

.grid td a[href*="download.php"]::before,
a[href*="download.php"]::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231e40af' viewBox='0 0 16 16'%3E%3Cpath d='M8.5 1.5A1.5 1.5 0 0 0 7 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V5.5L8.5 1.5zM7 1.5 12.5 7H9a1 1 0 0 1-1-1V1.5zM2 1h5v5a2 2 0 0 0 2 2h5v9H2V1z'/%3E%3Cpath d='M8 9.5a.5.5 0 0 1 .5.5v2.793l1.146-1.147a.5.5 0 1 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 12.793V10a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

.grid td a[href*="download.php"]:hover,
a[href*="download.php"]:hover {
  background: var(--elms-primary);
  border-color: var(--elms-primary);
  color: #fff !important;
  transform: translateY(-1px);
  text-decoration: none !important;
}

.grid td a[href*="download.php"]:hover::before,
a[href*="download.php"]:hover::before {
  filter: brightness(0) invert(1);
}

/* Upload / submit actions */
.grid td a[href*="upload-solution"],
.grid td a[href*="upload-voucher"],
.grid td a[href*="post-discussion"] {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--elms-accent) 0%, var(--elms-accent-light) 100%);
  color: #fff !important;
  border-radius: var(--elms-radius-sm);
  font-weight: 600;
  font-size: 12px;
  text-decoration: none !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.grid td a[href*="upload-solution"]:hover,
.grid td a[href*="upload-voucher"]:hover {
  transform: translateY(-1px);
  box-shadow: var(--elms-shadow-sm);
  text-decoration: none !important;
}

/* Assignment solutions icon link */
.grid td a[href*="assignment-solution"] img,
.grid td a[title*="Assignment Solutions"] img {
  width: 18px;
  height: 18px;
}

/* Wide assignment table (student view) */
#middle > table.grid:has(th:nth-child(7)) {
  font-size: 13px;
}

#middle > table.grid:has(th:nth-child(7)) td,
#middle > table.grid:has(th:nth-child(7)) th {
  vertical-align: top;
}

/* ==========================================================================
   Course materials, lectures & videos
   ========================================================================== */

/* Material type label (4-column material tables only) */
table.grid:has(th:nth-child(4):last-child) tr td:nth-child(4):not(:has(a)) {
  display: inline-block;
  padding: 4px 12px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: var(--elms-primary);
  text-transform: capitalize;
}

/* Lecture / video number in first data column */
table.grid td:first-child:not(:has(a)) {
  font-weight: 600;
  color: var(--elms-text-muted);
}

/* Video player page */
#middle > table:not(.grid):not(#detail) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 16px;
}

#middle > table:not(.grid):not(#detail) video {
  max-width: 100%;
  width: 100%;
  height: auto;
  border-radius: var(--elms-radius);
  box-shadow: var(--elms-shadow-lg);
  background: #000;
}

#middle > table:not(.grid):not(#detail) td:first-child {
  vertical-align: top;
}

#middle > table:not(.grid):not(#detail) td:last-child .grid {
  margin-top: 0;
}

#middle > table:not(.grid):not(#detail) .grid td a[href*="view-video"] {
  font-weight: 600;
  color: var(--elms-primary);
}

#middle > table:not(.grid):not(#detail) .grid tr:has(a[href*="view-video.php?id="]) td:first-child a {
  display: block;
  padding: 10px 14px;
  border-radius: var(--elms-radius-sm);
  transition: background var(--elms-transition);
}

#middle > table:not(.grid):not(#detail) .grid tr:has(a[href*="view-video.php"]) td:first-child a:hover {
  background: var(--elms-bg);
  text-decoration: none;
}

/* Lectures / video list pages — toolbar button */
#middle > h1 + a.btn2,
#middle > h1 + a.btn1 {
  float: right;
  margin-top: -52px;
  margin-bottom: 16px;
}

/* ==========================================================================
   CMS admin
   ========================================================================== */

/* CMS title column (3-column CMS table) */
table.grid:has(th:nth-child(3):last-child) tr td:nth-child(3) {
  font-weight: 500;
  color: var(--elms-text);
}

table.grid:has(th:nth-child(3):last-child) tr td:nth-child(3) a {
  font-weight: 600;
  color: var(--elms-primary);
}

/* File upload fields on edit pages */
#frm-add input[type=file],
table#detail input[type=file] {
  padding: 8px;
  background: var(--elms-bg);
  border: 1px dashed var(--elms-border) !important;
  border-radius: var(--elms-radius-sm);
  font-size: 13px;
  width: 100%;
  max-width: 360px;
  cursor: pointer;
}

#frm-add input[type=file]:hover,
table#detail input[type=file]:hover {
  border-color: var(--elms-primary-light) !important;
  background: #eff6ff;
}

@media (max-width: 1024px) {
  #middle:has(.spcaer_div .leftbar) {
    grid-template-columns: 1fr 1fr;
  }

  #middle:has(.spcaer_div .leftbar) .spcaer_div section.content,
  #middle:has(.spcaer_div .leftbar) .spcaer_div .content {
    grid-column: 1 / -1;
  }

  #middle:has(.spcaer_div .leftbar) .spcaer_div .leftbar {
    grid-column: 1;
  }

  #middle:has(.spcaer_div .leftbar) .spcaer_div .rightbar {
    grid-column: 2;
  }

  #middle > table:not(.grid):not(#detail) tr {
    display: flex;
    flex-direction: column;
  }

  #middle > table:not(.grid):not(#detail) td {
    display: block;
    width: 100% !important;
  }

  #middle > h1 + a.btn2,
  #middle > h1 + a.btn1 {
    float: none;
    margin-top: 0;
    display: inline-flex !important;
    margin-bottom: 16px;
  }
}

@media (max-width: 768px) {
  section.content > h1,
  .content > h1 {
    font-size: 22px;
  }

  #middle:has(.spcaer_div .leftbar) {
    grid-template-columns: 1fr;
  }

  #middle:has(.spcaer_div .leftbar) .spcaer_div .leftbar,
  #middle:has(.spcaer_div .leftbar) .spcaer_div .rightbar {
    grid-column: 1;
  }
}