/**
 * IMCOHAMS Portal - Design System
 * Imo State College of Health and Management Sciences, Amaigbo
 * Colors derived from official logo
 */

/* ============================================
   Logo-Inspired Color Palette
   ============================================ */
:root {
  /* Primary - Logo Navy Blue */
  --portal-primary: #1a237e;
  --portal-primary-dark: #0d1554;
  --portal-primary-light: #283593;
  --portal-primary-subtle: rgba(26, 35, 126, 0.08);
  
  /* Secondary - Logo Green (motto banner) */
  --portal-secondary: #166534;
  --portal-secondary-dark: #14532d;
  --portal-secondary-light: #22c55e;
  
  /* Accent - Logo Red (stars, highlights) */
  --portal-accent: #b71c1c;
  --portal-accent-dark: #7f1d1d;
  --portal-accent-light: #dc2626;
  
  /* Neutrals */
  --portal-white: #ffffff;
  --portal-gray-50: #f8fafc;
  --portal-gray-100: #f1f5f9;
  --portal-gray-200: #e2e8f0;
  --portal-gray-300: #cbd5e1;
  --portal-gray-400: #94a3b8;
  --portal-gray-500: #64748b;
  --portal-gray-600: #475569;
  --portal-gray-700: #334155;
  --portal-gray-800: #1e293b;
  --portal-gray-900: #0f172a;
  
  /* Semantic */
  --portal-success: #166534;
  --portal-warning: #d97706;
  --portal-error: #b91c1c;
  
  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', var(--font-sans);
  
  /* Spacing & Sizing */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   Login Page
   ============================================ */
/* Base responsive - prevent horizontal scroll */
html {
  overflow-x: hidden;
}

.portal-login-wrap,
.portal-register-wrap {
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

.portal-login-wrap .container-fluid.portal-login-container,
.portal-register-wrap .container {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.portal-login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--portal-white) 0%, var(--portal-gray-50) 40%, #e8f0fe 100%);
  font-family: var(--font-sans);
  font-size: 16px;
}

.portal-login-header {
  padding: 1rem 1.5rem;
  background: var(--portal-white);
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--portal-primary);
}

.portal-login-header-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2.5rem;
}

.portal-login-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.portal-login-logo a {
  display: block;
  line-height: 0;
}

.portal-login-logo img.portal-logo-img,
.portal-login-logo .portal-logo-img {
  height: 80px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
  display: block;
}

.portal-login-contact {
  font-size: 0.85rem;
  color: var(--portal-gray-600);
  flex-shrink: 0;
  font-weight: 400;
}

/* Login & Register: header support text */
.portal-login-wrap .portal-login-contact,
.portal-register-wrap .portal-login-contact {
  font-size: 0.85rem;
}

.portal-login-contact a {
  color: var(--portal-accent);
  text-decoration: none;
  font-weight: 500;
  font-size: inherit;
}

.portal-login-contact a:hover {
  text-decoration: underline;
}

.portal-login-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.5rem;
}

.portal-login-container {
  max-width: 1000px;
  margin: 0 auto;
}

.portal-login-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
}

.portal-login-card {
  background: var(--portal-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  flex: 1 1 380px;
  min-width: 0;
  max-width: 450px;
  padding: 2.5rem;
  border-top: 4px solid var(--portal-primary);
  width: 100%;
  box-sizing: border-box;
}

.portal-login-card h1 {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--portal-primary);
  margin-bottom: 0.4rem;
  letter-spacing: -0.02em;
}

.portal-login-card .portal-login-subtitle {
  font-size: 0.95rem;
  color: var(--portal-gray-500);
  margin-bottom: 1.75rem;
  font-weight: 400;
}

.portal-login-form .form-group {
  margin-bottom: 1.25rem;
}

.portal-login-form label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--portal-gray-700);
  margin-bottom: 0.4rem;
  letter-spacing: 0.01em;
}

.portal-login-form input[type="text"],
.portal-login-form input[type="password"],
.portal-login-form input[type="email"] {
  width: 100%;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  border: 1.5px solid var(--portal-gray-200);
  border-radius: var(--radius-md);
  background: var(--portal-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  min-height: 46px;
}

.portal-login-form input:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px var(--portal-primary-subtle);
}

.portal-login-form .btn-login {
  width: 100%;
  padding: 0.85rem 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--portal-white);
  background: var(--portal-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.3);
}

.portal-login-form .btn-login:hover {
  background: var(--portal-primary-dark);
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.4);
}

.portal-login-form .btn-login:active {
  transform: scale(0.98);
}

.portal-login-links {
  margin-top: 1.5rem;
  text-align: center;
}

.portal-login-links p {
  margin: 0.75rem 0;
  font-size: 1rem;
}

.portal-login-links a {
  font-size: 1rem;
  color: var(--portal-accent);
  text-decoration: none;
  font-weight: 500;
}

.portal-login-links a:hover {
  text-decoration: underline;
}

.portal-login-welcome {
  background: var(--portal-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  flex: 1 1 380px;
  min-width: 0;
  max-width: 450px;
  padding: 2.5rem;
  border-top: 4px solid var(--portal-secondary);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.portal-login-welcome h2 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--portal-primary);
  margin-bottom: 1rem;
  letter-spacing: -0.02em;
}

.portal-login-welcome p {
  font-size: 0.95rem;
  color: var(--portal-gray-600);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  font-weight: 400;
}

.portal-login-welcome .btn-create {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 1.5rem;
  font-size: 1.1rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--portal-white);
  background: var(--portal-secondary);
  border: none;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  text-align: center;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.3);
  cursor: pointer;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  /* Align with Sign in button - offset to match login form height (title + 2 inputs) */
  margin-top: 4.5rem;
}

.portal-login-welcome .btn-create:hover {
  background: var(--portal-secondary-dark);
  color: var(--portal-white);
  box-shadow: 0 4px 12px rgba(22, 101, 52, 0.4);
}

.portal-login-welcome .btn-create:active {
  transform: scale(0.98);
}

.portal-login-welcome .btn-create:focus {
  outline: none;
}

.portal-login-welcome .btn-create:focus-visible {
  outline: 2px solid var(--portal-secondary-dark);
  outline-offset: 2px;
}

.portal-login-error {
  background: #fef2f2;
  color: var(--portal-error);
  padding: 0.875rem 1.125rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  line-height: 1.45;
  margin-bottom: 1rem;
  border-left: 4px solid var(--portal-accent);
}

/* ============================================
   Portal Footer (Login & Account Verification)
   ============================================ */
.portal-footer {
  padding: 1.25rem 1.5rem;
  background: var(--portal-white);
  border-top: 2px solid var(--portal-gray-200);
  margin-top: auto;
}

.portal-footer-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.portal-footer p {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  color: var(--portal-gray-700);
}

.portal-footer a {
  color: var(--portal-primary);
  text-decoration: none;
  font-weight: 600;
}

.portal-footer a:hover {
  text-decoration: underline;
}

body.portal-register-wrap .portal-login-header .portal-login-contact {
  font-size: 1.7rem;
}

body.portal-register-wrap .portal-footer p {
  font-size: 2rem;
}

/* ============================================
   Register/Account Verification - Shared Layout
   ============================================ */
.portal-register-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(160deg, var(--portal-white) 0%, var(--portal-gray-50) 40%, #e8f0fe 100%);
  font-family: var(--font-sans);
  font-size: 20px;
}

.portal-register-header {
  padding: 1rem 1.5rem;
  background: var(--portal-white);
  box-shadow: var(--shadow-sm);
  border-bottom: 3px solid var(--portal-primary);
}

.portal-register-header-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2.5rem;
}

.portal-register-logo {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.portal-register-logo img.portal-logo-img,
.portal-register-logo img {
  height: 80px;
  width: auto;
  max-width: 320px;
  object-fit: contain;
}

.portal-register-main {
  flex: 1;
  padding: 2rem 1.5rem;
}

.portal-register-card {
  background: var(--portal-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  padding: 2rem;
  border-top: 4px solid var(--portal-primary);
  box-sizing: border-box;
}

.portal-register-card h1,
.portal-register-card h2,
.portal-register-card h4 {
  color: var(--portal-primary);
  margin-bottom: 1rem;
  font-size: 2.8rem;
}

.portal-register-card .btn-primary {
  background: var(--portal-primary);
  border-color: var(--portal-primary);
}

.portal-register-card .btn-primary:hover {
  background: var(--portal-primary-dark);
  border-color: var(--portal-primary-dark);
}

/* Register form overrides */
.portal-register-card .form-control {
  border: 2px solid var(--portal-gray-200);
  border-radius: var(--radius-md);
  padding: 1.125rem 1.375rem;
  font-size: 1.6rem !important;
  min-height: 54px;
}

.portal-register-card select.form-control {
  padding: 1.125rem 1.375rem;
  font-size: 1.6rem !important;
  min-height: 54px;
}

.portal-register-card .form-control:focus {
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px var(--portal-primary-subtle);
}

.portal-register-card .btn-info {
  background: var(--portal-primary) !important;
  border-color: var(--portal-primary) !important;
}

.portal-register-card .btn-info:hover {
  background: var(--portal-primary-dark) !important;
  border-color: var(--portal-primary-dark) !important;
}

.portal-register-card .pageheader h4 {
  color: var(--portal-primary) !important;
}

.portal-register-card select,
.portal-register-card .form-control select {
  width: 100%;
  padding: 1.125rem 1.375rem;
  font-size: 1.6rem !important;
  min-height: 54px;
}

/* Portal Account Verification - Clean form design */
.portal-verify-content {
  font-family: var(--font-sans);
}

.portal-verify-breadcrumb {
  margin-bottom: 1.25rem;
}

.portal-verify-breadcrumb a {
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--portal-gray-700);
  text-decoration: none;
}

.portal-verify-breadcrumb a:hover {
  color: var(--portal-primary);
}

.portal-verify-breadcrumb .fa {
  margin-right: 0.35rem;
}

.portal-verify-title {
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--portal-primary);
  margin-bottom: 1.5rem;
}

.portal-verify-form .portal-form-group {
  margin-bottom: 1.5rem;
}

.portal-verify-form .portal-form-group label {
  display: block;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--portal-gray-800);
  margin-bottom: 0.5rem;
}

.portal-verify-form .portal-form-control,
.portal-register-card .portal-form-control {
  width: 100%;
  padding: 1.125rem 1.375rem;
  font-size: 1.6rem;
  font-weight: 500;
  font-family: var(--font-sans);
  border: 2px solid var(--portal-gray-200);
  border-radius: var(--radius-md);
  background: var(--portal-white);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  min-height: 54px;
  color: var(--portal-gray-800);
}

.portal-verify-form .portal-form-control:focus,
.portal-register-card .portal-form-control:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px var(--portal-primary-subtle);
}

.portal-verify-form select.portal-form-control {
  appearance: auto;
  cursor: pointer;
  padding: 1.125rem 1.375rem;
  font-size: 1.6rem;
  min-height: 54px;
}

.portal-verify-note {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--portal-gray-700);
  margin: 1rem 0 1.5rem;
}

.portal-verify-actions {
  margin-top: 1.5rem;
}

.portal-btn-verify {
  padding: 1.125rem 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--portal-white);
  background: var(--portal-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s;
}

.portal-btn-verify:hover {
  background: var(--portal-primary-dark);
}

/* Labels and inputs across all register pages */
.portal-register-card label {
  font-size: 1.6rem !important;
  font-weight: 700;
  color: var(--portal-gray-800) !important;
}

.portal-register-card input[type="text"],
.portal-register-card input[type="password"],
.portal-register-card input[type="email"],
.portal-register-card input[type="tel"],
.portal-register-card input[type="number"] {
  padding: 1.125rem 1.375rem !important;
  font-size: 1.6rem !important;
  min-height: 54px;
}


/* Override legacy styles inside register card */
.portal-register-card .mycontainer,
.portal-register-card .pageheader,
.portal-register-card .span12,
.portal-register-card .span8,
.portal-register-card .wrapclass,
.portal-register-card .form-div {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

.portal-register-card .pageheader h4 {
  font-size: 2.8rem !important;
  margin-bottom: 1.25rem !important;
}

.portal-password-reset {
  max-width: 520px;
  margin: 0 auto;
}

.portal-password-reset-header {
  margin-bottom: 1.5rem;
}

.portal-password-reset-kicker {
  display: inline-block;
  margin-bottom: 0.75rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: var(--portal-primary-subtle);
  color: var(--portal-primary);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.portal-password-reset h1 {
  margin: 0 0 0.5rem;
  color: var(--portal-primary);
  font-size: 1.75rem !important;
  font-weight: 700;
  line-height: 1.2;
}

.portal-password-reset-header p {
  margin: 0;
  color: var(--portal-gray-600);
  font-size: 0.98rem;
  line-height: 1.65;
}

.portal-password-reset .portal-login-error {
  margin-bottom: 1rem;
}

.portal-password-reset-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  padding: 0.95rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(26, 35, 126, 0.06);
  color: var(--portal-gray-700);
  font-size: 0.95rem;
  line-height: 1.55;
}

.portal-password-reset-note i {
  color: var(--portal-primary);
  margin-top: 0.1rem;
}

.portal-password-reset .portal-login-form .form-group {
  margin-bottom: 1rem;
}

.portal-password-reset .portal-login-form label {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: var(--portal-gray-700) !important;
  margin-bottom: 0.45rem;
}

.portal-password-reset .portal-login-form input[type="text"],
.portal-password-reset .portal-login-form input[type="password"],
.portal-password-reset .portal-login-form input[type="email"],
.portal-password-reset .portal-login-form input[type="tel"],
.portal-password-reset .portal-login-form input[type="number"] {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem !important;
  border: 1.5px solid var(--portal-gray-200);
  border-radius: var(--radius-md);
  background: var(--portal-white);
  color: var(--portal-gray-800);
  font-size: 1rem !important;
  font-weight: 400;
  box-sizing: border-box;
}

.portal-password-reset .portal-login-form input:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px var(--portal-primary-subtle);
}

.portal-password-reset-actions {
  margin-top: 1.2rem;
}

.portal-password-reset .btn-login {
  width: 100%;
}

.portal-password-reset-links {
  margin-top: 1.35rem;
  text-align: center;
}

.portal-password-reset-links p {
  margin: 0.55rem 0;
  font-size: 0.95rem;
  color: var(--portal-gray-600);
}

.portal-password-reset-links a {
  color: var(--portal-accent);
  text-decoration: none;
  font-weight: 600;
}

.portal-password-reset-links a:hover {
  text-decoration: underline;
}

/* Normalize typography across register/account verification pages */
body.portal-register-wrap .portal-login-header .portal-login-contact,
body.portal-register-wrap .portal-login-header .portal-login-contact a,
body.portal-register-wrap .portal-footer p,
body.portal-register-wrap .portal-footer a,
body.portal-register-wrap .portal-register-card,
body.portal-register-wrap .portal-register-card h1,
body.portal-register-wrap .portal-register-card h2,
body.portal-register-wrap .portal-register-card h3,
body.portal-register-wrap .portal-register-card h4,
body.portal-register-wrap .portal-register-card h5,
body.portal-register-wrap .portal-register-card h6,
body.portal-register-wrap .portal-register-card p,
body.portal-register-wrap .portal-register-card label,
body.portal-register-wrap .portal-register-card a,
body.portal-register-wrap .portal-register-card button,
body.portal-register-wrap .portal-register-card .btn,
body.portal-register-wrap .portal-register-card input[type="text"],
body.portal-register-wrap .portal-register-card input[type="password"],
body.portal-register-wrap .portal-register-card input[type="email"],
body.portal-register-wrap .portal-register-card input[type="tel"],
body.portal-register-wrap .portal-register-card input[type="number"],
body.portal-register-wrap .portal-register-card select,
body.portal-register-wrap .portal-register-card textarea,
body.portal-register-wrap .portal-register-card .portal-verify-breadcrumb a,
body.portal-register-wrap .portal-register-card .portal-verify-title,
body.portal-register-wrap .portal-register-card .portal-verify-note,
body.portal-register-wrap .portal-register-card .portal-register-notice,
body.portal-register-wrap .portal-register-card .portal-btn-verify,
body.portal-register-wrap .portal-register-card .portal-password-reset-kicker,
body.portal-register-wrap .portal-register-card .portal-password-reset h1,
body.portal-register-wrap .portal-register-card .portal-password-reset-header p,
body.portal-register-wrap .portal-register-card .portal-password-reset-note,
body.portal-register-wrap .portal-register-card .portal-password-reset-links p,
body.portal-register-wrap .portal-register-card .portal-password-reset-links a,
body.portal-register-wrap .portal-register-card .portal-login-error {
  font-size: 1.4rem !important;
}

body.portal-register-wrap .portal-register-card h1,
body.portal-register-wrap .portal-register-card h2,
body.portal-register-wrap .portal-register-card h3,
body.portal-register-wrap .portal-register-card h4,
body.portal-register-wrap .portal-register-card h5,
body.portal-register-wrap .portal-register-card h6,
body.portal-register-wrap .portal-register-card .portal-verify-title,
body.portal-register-wrap .portal-register-card .portal-password-reset h1 {
  line-height: 1.3;
}

/* ============================================
   Dashboard - Sidebar & Topbar
   ============================================ */
.portal-modern .eduportal-topbar {
  background: var(--portal-white) !important;
  border-bottom: 2px solid var(--portal-gray-200) !important;
  padding: 1rem 1.5rem !important;
  box-shadow: var(--shadow-sm);
}

.portal-modern .eduportal-topbar h3 {
  color: var(--portal-primary) !important;
  font-weight: 700 !important;
}

.portal-modern .eduportal-topbar .user-detail .dropdown-toggle,
.portal-modern .eduportal-topbar .user-detail a {
  color: var(--portal-gray-800) !important;
}
.portal-modern .eduportal-topbar .user-detail .dropdown-toggle:hover,
.portal-modern .eduportal-topbar .user-detail a:hover {
  color: var(--portal-primary) !important;
}

/* User dropdown menu - ensure items are visible */
.portal-modern .eduportal-topbar .language-selector .dropdown-menu {
  background: var(--portal-white) !important;
  border: 1px solid var(--portal-gray-200) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.portal-modern .eduportal-topbar .language-selector .dropdown-menu > li > a {
  color: var(--portal-gray-800) !important;
  padding: 10px 20px;
}
.portal-modern .eduportal-topbar .language-selector .dropdown-menu > li > a:hover {
  background: var(--portal-gray-50) !important;
  color: var(--portal-primary) !important;
}
.portal-modern .eduportal-topbar .language-selector .dropdown-menu > li > a i,
.portal-modern .eduportal-topbar .language-selector .dropdown-menu > li > a span {
  color: inherit !important;
}

/* Topbar stacking: keep above main-content so profile dropdown overlays correctly */
.portal-modern .eduportal-topbar {
  position: relative;
  z-index: 200 !important;
  overflow: visible !important;
}
.portal-modern .eduportal-topbar .row,
.portal-modern .eduportal-topbar .eduportal-topbar-wrap,
.portal-modern .eduportal-topbar .edu-main-content,
.portal-modern .eduportal-topbar .user-detail,
.portal-modern .eduportal-topbar .list-inline {
  overflow: visible !important;
}

/* Profile dropdown: always appear above page content */
.portal-modern .language-selector {
  position: relative !important;
}
.portal-modern .language-selector .dropdown-menu {
  z-index: 99999 !important;
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: auto !important;
  display: none !important;
  min-width: 200px;
  background: #fff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
  padding: 6px 0 !important;
  margin-top: 4px !important;
}
.portal-modern .language-selector.open .dropdown-menu {
  display: block !important;
}
.portal-modern .language-selector .dropdown-menu > li > a {
  display: block !important;
  padding: 8px 16px !important;
  font-size: 1.4rem !important;
  color: #374151 !important;
  white-space: nowrap;
}
.portal-modern .language-selector .dropdown-menu > li > a:hover {
  background: #f3f4f6 !important;
  color: var(--portal-primary) !important;
}
.portal-modern .language-selector .dropdown-menu > li > a i {
  margin-right: 8px;
  width: 16px;
  text-align: center;
}

/* Webview / menu layout: right column never overlaps sidebar so menu clicks always work */
.portal-modern.page-body .portal-sidebar-layout {
  padding-left: 0 !important;
}
.portal-modern .portal-sidebar-layout .portal-right-column {
  margin-left: 280px !important;
  width: calc(100% - 280px) !important;
  min-width: 0;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.portal-modern .portal-right-column .main-content {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column;
  float: none !important;
}
.portal-modern .portal-right-column .main-content .portal-content-wrap {
  flex: 1 1 auto;
}
.portal-modern .portal-right-column .main-content .portal-footer {
  flex-shrink: 0;
  margin-top: auto !important;
}
.portal-modern .portal-sidebar-layout .sidebar-menu {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 280px !important;
  overflow-y: auto;
  overflow-x: hidden;
}
/* Desktop: keep sidebar expanded — override neon-custom.js tabletscreen collapse */
@media (min-width: 769px) {
  .portal-modern .page-container.sidebar-collapsed {
    padding-left: 280px !important;
  }
  .portal-modern .page-container.sidebar-collapsed .sidebar-menu {
    width: 280px !important;
    z-index: 100 !important;
  }
  .portal-modern .page-container.sidebar-collapsed .sidebar-menu #main-menu > li > a > span:not(.badge) {
    visibility: visible !important;
    opacity: 1 !important;
    position: static !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    display: inline !important;
  }
  .portal-modern .page-container.sidebar-collapsed .sidebar-menu #main-menu > li > a span {
    display: inline !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .portal-modern .page-container.sidebar-collapsed .portal-right-column {
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
  }
  .portal-modern .page-container.sidebar-collapsed .sidebar-menu .logo-env > div.logo {
    display: block !important;
    opacity: 1 !important;
  }
}

/* ═══════════════════════════════════════════════════════
   Mobile sidebar: hidden by default, slide-in overlay
   ═══════════════════════════════════════════════════════ */

/* Hamburger toggle button – visible only on mobile */
.portal-mobile-hamburger {
  display: none;
}

@media (max-width: 768px) {
  /* Show hamburger button */
  .portal-mobile-hamburger {
    display: none !important;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1100;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #1e3a5f;
    color: #fff;
    border: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s;
  }
  .portal-mobile-hamburger:hover,
  .portal-mobile-hamburger:active {
    background: #162d4a;
  }
  .portal-mobile-hamburger .bar {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: relative;
  }
  .portal-mobile-hamburger .bar::before,
  .portal-mobile-hamburger .bar::after {
    content: '';
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    position: absolute;
    left: 0;
    transition: transform 0.25s;
  }
  .portal-mobile-hamburger .bar::before { top: -6px; }
  .portal-mobile-hamburger .bar::after  { top: 6px; }

  /* Animate to X when open */
  .portal-mobile-menu-open .portal-mobile-hamburger .bar {
    background: transparent;
  }
  .portal-mobile-menu-open .portal-mobile-hamburger .bar::before {
    top: 0;
    transform: rotate(45deg);
  }
  .portal-mobile-menu-open .portal-mobile-hamburger .bar::after {
    top: 0;
    transform: rotate(-45deg);
  }

  /* Hide sidebar off-screen by default */
  /* Restore original always-visible sidebar on mobile */
  .portal-modern .portal-sidebar-layout .sidebar-menu {
    transform: none !important;
    width: 280px !important;
  }
  .portal-modern .portal-sidebar-layout {
    padding-left: 280px !important;
  }
  .portal-modern .portal-right-column {
    margin-left: 280px !important;
    width: calc(100% - 280px) !important;
    padding-top: 0 !important;
  }

  /* Dark backdrop behind sidebar */
  .portal-mobile-backdrop {
    display: none !important;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1040;
    -webkit-tap-highlight-color: transparent;
  }
  .portal-mobile-menu-open .portal-mobile-backdrop {
    display: none !important;
  }

  /* Hide neon's sidebar-collapse icon on mobile (we use our own hamburger) */
  .portal-modern .sidebar-menu .sidebar-collapse,
  .portal-modern .sidebar-menu .sidebar-mobile-menu {
    display: block;
  }

  /* Ensure main-menu is visible inside the sidebar when it slides in */
  .portal-modern.page-body .page-container .sidebar-menu #main-menu,
  .portal-modern .page-container.portal-sidebar-layout .sidebar-menu #main-menu {
    display: block !important;
  }
}

/* Text-style toggle button (no longer used, keep hidden) */
.portal-toggle-sidebar {
  display: none !important;
}

/* Override neon-core green #105618 - use navy for consistent branding */
.portal-modern .page-container .sidebar-menu,
.portal-modern .sidebar-menu {
  background: var(--portal-primary) !important;
  z-index: 100 !important;
  pointer-events: auto !important;
}

.portal-modern .sidebar-menu .logo-env {
  background: var(--portal-primary) !important;
}

/* Ensure menu links are clickable (fix menu not responding after login) */
.portal-modern .sidebar-menu #main-menu li a {
  pointer-events: auto !important;
  cursor: pointer !important;
}

.portal-modern .sidebar-menu .sidebar-logo-text {
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--portal-white) !important;
  text-decoration: none;
  padding: 0.6rem 0;
  letter-spacing: 0.02em;
  line-height: 1.3;
}
.portal-modern .sidebar-menu .sidebar-logo-text:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none;
}

/* --- Sidebar menu item states ---
   Active  = green (#16a34a)  — current page / open parent
   Hover   = red   (--portal-accent / #b71c1c)
   Default = semi-transparent white text on navy
*/

/* Default top-level link */
.portal-modern .sidebar-menu #main-menu > li > a {
  color: rgba(255, 255, 255, 0.85) !important;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  border-left: 3px solid transparent;
}

/* Hover on any top-level item (red) */
.portal-modern .sidebar-menu #main-menu > li:hover > a {
  color: var(--portal-white) !important;
  background: var(--portal-accent) !important;
  border-left-color: var(--portal-accent-light) !important;
}

/* Active top-level item — single page (green) */
.portal-modern .sidebar-menu #main-menu > li.active:not(.has-sub) > a {
  color: var(--portal-white) !important;
  background: #16a34a !important;
  border-left: 3px solid #22c55e !important;
  padding-left: 17px !important;
  box-shadow: none !important;
}

/* Active parent (has-sub opened) — subtle green tint so it's clear which group is current */
.portal-modern .sidebar-menu #main-menu > li.active.has-sub > a,
.portal-modern .sidebar-menu #main-menu > li.opened.active.has-sub > a {
  color: var(--portal-white) !important;
  background: rgba(22, 163, 74, 0.25) !important;
  border-left: 3px solid #22c55e !important;
  padding-left: 17px !important;
  box-shadow: none !important;
}

/* Sub-menu items — default */
.portal-modern .sidebar-menu #main-menu > li.has-sub ul > li > a {
  color: rgba(255, 255, 255, 0.8) !important;
  transition: background 0.15s ease, color 0.15s ease;
  border-left: 3px solid transparent;
}

/* Sub-menu items — hover (red) */
.portal-modern .sidebar-menu #main-menu > li.has-sub ul > li > a:hover {
  color: var(--portal-white) !important;
  background: var(--portal-accent) !important;
  border-left-color: var(--portal-accent-light) !important;
}

/* Sub-menu items — active / current page (green) */
.portal-modern .sidebar-menu #main-menu > li.has-sub ul > li.active > a {
  color: var(--portal-white) !important;
  background: #16a34a !important;
  border-left: 3px solid #22c55e;
  padding-left: 37px;
}

/* Submenu visibility: hide by default in EXPANDED sidebar; collapsed sidebar keeps neon's hover flyout */
.portal-modern .page-container:not(.sidebar-collapsed) #main-menu li > ul {
  display: none !important;
}
.portal-modern .page-container:not(.sidebar-collapsed) #main-menu li.opened > ul,
.portal-modern .page-container:not(.sidebar-collapsed) #main-menu li.portal-opened > ul {
  display: block !important;
}
.portal-modern .sidebar-menu #main-menu li.has-sub ul li a {
  pointer-events: auto !important;
  cursor: pointer !important;
  display: block !important;
}

.portal-modern .main-content {
  font-family: var(--font-sans);
  min-height: calc(100vh - 120px) !important;
  padding-bottom: 0 !important;
  background: #f8fafc !important;
  background-image: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1 !important;
}

.portal-modern .main-content .portal-content-wrap {
  padding-bottom: 0;
  flex: 1 0 auto !important;
  min-height: 0 !important;
}

/* Manage profile: keep default sticky footer so footer stays at bottom of viewport */
.portal-modern .main-content.portal-page-manage_profile .tab-content,
.portal-modern .main-content.portal-page-manage_profile .tab-pane {
  min-height: 0;
}

/* ============================================
   Dashboard Footer - Page-level, below the card
   ============================================ */
.portal-modern .main-content .portal-footer {
  display: block !important;
  width: 100% !important;
  clear: both !important;
  background: var(--portal-gray-900) !important;
  padding: 1rem 2rem !important;
  margin: 0 !important;
  margin-top: auto !important;
  border-top: none !important;
  border-radius: 0 !important;
  float: none !important;
  position: relative !important;
  z-index: 10 !important;
  flex-shrink: 0 !important;
}

.portal-modern .main-content .portal-footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.portal-modern .main-content .portal-footer p {
  margin: 0 !important;
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.portal-modern .main-content .portal-footer a {
  color: var(--portal-white) !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.portal-modern .main-content .portal-footer a:hover {
  color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================
   Portal-Wide: Forms, Inputs, Typography
   Applies to all dashboard pages (student, sadmin, admin)
   ============================================ */
.portal-modern .main-content,
.portal-modern .portal-content-wrap {
  font-family: var(--font-sans);
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--portal-gray-800);
}

/* Labels - consistent sizing and weight */
.portal-modern .main-content .form-group label,
.portal-modern .main-content .eduportal-form-group label,
.portal-modern .main-content .label-control,
.portal-modern .main-content label.control-label {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--portal-gray-700) !important;
  letter-spacing: 0.01em !important;
}

/* Form controls - inputs, selects, textareas */
.portal-modern .main-content .form-control,
.portal-modern .main-content .eduportal-input,
.portal-modern .main-content input[type="text"],
.portal-modern .main-content input[type="password"],
.portal-modern .main-content input[type="email"],
.portal-modern .main-content input[type="number"],
.portal-modern .main-content input[type="tel"],
.portal-modern .main-content select.form-control,
.portal-modern .main-content select,
.portal-modern .main-content textarea.form-control,
.portal-modern .main-content textarea {
  font-size: 1.5rem !important;
  font-family: var(--font-sans) !important;
  padding: 0.75rem 1rem !important;
  border: 2px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-md) !important;
  background: var(--portal-white) !important;
  color: var(--portal-gray-800) !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.portal-modern .main-content textarea.form-control,
.portal-modern .main-content textarea {
  min-height: 100px !important;
}

.portal-modern .main-content .form-control:focus,
.portal-modern .main-content .eduportal-input:focus,
.portal-modern .main-content input:focus,
.portal-modern .main-content select:focus,
.portal-modern .main-content textarea:focus {
  outline: none !important;
  border-color: var(--portal-primary) !important;
  box-shadow: 0 0 0 3px var(--portal-primary-subtle) !important;
}

/* Input groups - addon styling to match form fields */
.portal-modern .main-content .input-group-addon {
  font-size: 1.5rem !important;
  padding: 0.75rem 1rem !important;
  border: 2px solid var(--portal-gray-200) !important;
  background: var(--portal-gray-50) !important;
  color: var(--portal-gray-500) !important;
}

.portal-modern .main-content .input-group.input-group-lg .form-control,
.portal-modern .main-content .input-group.input-group-lg .eduportal-input,
.portal-modern .main-content .input-group.input-group-lg .input-group-addon {
  min-height: 48px !important;
}

/* Form groups - spacing */
.portal-modern .main-content .form-group,
.portal-modern .main-content .eduportal-form-group {
  margin-bottom: 1.25rem !important;
}

/* Buttons - primary actions */
.portal-modern .main-content .btn,
.portal-modern .main-content .btn-info,
.portal-modern .main-content .btn-primary {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  font-family: var(--font-sans) !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: var(--radius-md) !important;
  min-height: 48px !important;
}

.portal-modern .main-content .btn-info,
.portal-modern .main-content .btn-primary {
  background: var(--portal-primary) !important;
  border-color: var(--portal-primary) !important;
}

.portal-modern .main-content .btn-info:hover,
.portal-modern .main-content .btn-primary:hover {
  background: var(--portal-primary-dark) !important;
  border-color: var(--portal-primary-dark) !important;
}

/* Panels and cards */
.portal-modern .main-content .panel,
.portal-modern .main-content .widget {
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--portal-gray-200) !important;
  box-shadow: var(--shadow-sm) !important;
}

.portal-modern .main-content .panel-heading,
.portal-modern .main-content .widget-header {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: var(--portal-primary) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Alerts */
.portal-modern .main-content .alert {
  font-size: 1.5rem !important;
  padding: 1rem 1.25rem !important;
  border-radius: var(--radius-md) !important;
}

/* Tables - basic readability */
.portal-modern .main-content table {
  font-size: 1.5rem !important;
}

.portal-modern .main-content table th,
.portal-modern .main-content table td {
  padding: 0.75rem 1rem !important;
}

.portal-modern .main-content table thead th {
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  color: var(--portal-gray-800) !important;
}

/* ============================================
   Reprint Admissions Letter - Card layout
   ============================================ */
.portal-admission-card {
  background: var(--portal-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--portal-gray-200);
  padding: 2rem;
  max-width: 520px;
  margin: 2.5rem auto 2.5rem;
}

.portal-admission-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--portal-gray-100);
}

.portal-admission-card-header i {
  font-size: 2rem;
  color: var(--portal-primary);
}

.portal-admission-card-header h2 {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--portal-primary);
  font-family: var(--font-sans);
}

.portal-admission-alert {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: #fef2f2;
  color: var(--portal-error);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--portal-accent);
}

.portal-admission-alert i {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Form rows: label left, input right - clean grid alignment */
.portal-admission-form .portal-form-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem 1.25rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.portal-admission-form .portal-form-row label {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--portal-gray-700);
  margin: 0;
  line-height: 1.4;
}

.portal-admission-form .portal-form-field {
  min-width: 0;
}

.portal-admission-form .portal-input,
.portal-admission-form .portal-select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1.5rem;
  font-family: var(--font-sans);
  border: 2px solid var(--portal-gray-200);
  border-radius: var(--radius-md);
  background: var(--portal-white);
  color: var(--portal-gray-800);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
  min-height: 48px;
}

.portal-admission-form .portal-select {
  appearance: auto;
  cursor: pointer;
}

.portal-admission-form .portal-input:focus,
.portal-admission-form .portal-select:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 3px var(--portal-primary-subtle);
}

.portal-admission-form .portal-input[readonly] {
  background: var(--portal-gray-50);
  color: var(--portal-gray-600);
  cursor: not-allowed;
}

.portal-admission-form .portal-form-actions {
  margin-top: 1.75rem;
  padding-top: 1rem;
}

.portal-admission-form .portal-btn-view-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--portal-white);
  background: var(--portal-primary);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(26, 35, 126, 0.3);
}

.portal-admission-form .portal-btn-view-letter:hover {
  background: var(--portal-primary-dark);
  box-shadow: 0 4px 12px rgba(26, 35, 126, 0.4);
}

.portal-admission-form .portal-btn-view-letter:active {
  transform: scale(0.98);
}

.portal-admission-form .portal-btn-view-letter i {
  font-size: 1.5rem;
}

/* Admission card responsive */
@media (max-width: 768px) {
  .portal-admission-card {
    padding: 1.5rem;
    max-width: 100%;
  }
  .portal-admission-card-header h2 {
    font-size: 1.8rem;
  }
  .portal-admission-form .portal-form-row {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .portal-admission-form .portal-form-row label {
    font-size: 1.5rem;
  }
  .portal-admission-form .portal-btn-view-letter {
    width: 100%;
    padding: 1rem 1.5rem;
  }
}

/* Dashboard footer mobile */
@media (max-width: 768px) {
  .portal-modern .main-content .portal-footer {
    padding: 1rem 1.25rem !important;
  }
  .portal-modern .main-content .portal-footer p {
    font-size: 1.4rem !important;
  }
}

.portal-modern .main-content h3 {
  margin: 1.25rem 0 !important;
  color: var(--portal-primary) !important;
  font-weight: 700 !important;
  font-size: 2.2rem !important;
}

.portal-modern body {
  font-family: var(--font-sans);
}

/* ============================================
   Document layout (register, basic pages)
   ============================================ */
.portal-document {
  font-family: var(--font-sans);
}

.portal-document header {
  background: var(--portal-primary) !important;
  padding: 1rem 1.5rem !important;
}

.portal-document .headimg img {
  height: 56px;
  width: auto;
}

/* ============================================
   Responsive Design - Mobile First
   ============================================ */
@media (max-width: 1024px) {
  .portal-login-header-inner,
  .portal-register-header-inner {
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .portal-login-cards {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
  }
  
  .portal-login-card,
  .portal-login-welcome {
    max-width: 100%;
    min-width: 0;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .portal-login-welcome .btn-create {
    margin-top: 0;
  }
}

@media (max-width: 768px) {
  .portal-login-wrap,
  .portal-register-wrap {
    font-size: 15px;
  }
  
  /* Stack header on tablet/mobile to prevent overflow */
  .portal-login-header-inner,
  .portal-register-header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
  }
  
  .portal-login-header,
  .portal-register-header {
    padding: 1rem;
  }
  
  .portal-login-logo img.portal-logo-img,
  .portal-login-logo .portal-logo-img,
  .portal-register-logo img {
    height: 72px;
    max-width: 280px;
  }
  
  .portal-login-contact {
    font-size: 1.4rem;
    word-break: break-word;
  }
  
  .portal-login-wrap .portal-login-contact,
  .portal-register-wrap .portal-login-contact {
    font-size: 1.4rem;
  }
  
  .portal-login-main {
    padding: 1.25rem 1rem;
  }
  
  .portal-login-container {
    padding: 0 1rem;
    max-width: 100%;
    overflow-x: hidden;
  }
  
  .portal-register-wrap .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .portal-login-card,
  .portal-login-welcome {
    padding: 1.5rem;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
  }
  
  .portal-login-card h1 {
    font-size: 2.2rem;
  }
  
  .portal-login-welcome h2 {
    font-size: 2rem;
  }
  
  .portal-login-form label {
    font-size: 1.5rem;
  }
  
  .portal-login-form input[type="text"],
  .portal-login-form input[type="password"],
  .portal-login-form input[type="email"] {
    padding: 0.875rem 1rem;
    font-size: 1.6rem;
    min-height: 48px;
  }
  
  .portal-login-form .btn-login {
    padding: 1rem 1.25rem;
    font-size: 1.5rem;
    min-height: 48px; /* Touch target */
  }
  
  .portal-login-welcome .btn-create {
    height: 48px;
    padding: 0 1.5rem;
    font-size: 1.5rem;
    margin-top: 0;
  }
  
  .portal-register-main {
    padding: 1.5rem 1rem;
  }
  
  .portal-register-card {
    padding: 1.5rem;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  .portal-register-card label,
  .portal-verify-form .portal-form-group label {
    font-size: 1.5rem !important;
  }
  
  .portal-register-card .form-control,
  .portal-register-card input,
  .portal-verify-form .portal-form-control,
  .portal-register-card select {
    padding: 0.875rem 1rem !important;
    font-size: 1.6rem !important;
    min-height: 48px !important;
  }
  
  .portal-verify-title {
    font-size: 2rem;
  }
  
  .portal-verify-breadcrumb a {
    font-size: 1.5rem;
  }
  
  .portal-verify-note {
    font-size: 1.5rem;
  }
  
  .portal-btn-verify {
    width: 100%;
    padding: 1rem 1.5rem;
    font-size: 1.5rem;
    min-height: 48px;
  }
}

@media (max-width: 480px) {
  .portal-login-header,
  .portal-register-header {
    padding: 0.75rem;
  }
  
  .portal-login-header-inner,
  .portal-register-header-inner {
    gap: 0.75rem;
  }
  
  .portal-login-logo img.portal-logo-img,
  .portal-login-logo .portal-logo-img,
  .portal-register-logo img {
    height: 64px;
    max-width: 240px;
  }
  
  .portal-login-contact {
    font-size: 1.3rem;
    word-break: break-word;
  }
  
  .portal-login-wrap .portal-login-contact,
  .portal-register-wrap .portal-login-contact {
    font-size: 1.3rem;
  }
  
  .portal-login-main {
    padding: 1rem 0.75rem;
  }
  
  .portal-login-container {
    padding: 0 0.75rem;
  }
  
  .portal-register-wrap .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  .portal-register-main {
    padding: 1rem 0.75rem;
  }
  
  .portal-login-cards {
    gap: 1.25rem;
  }
  
  .portal-login-card,
  .portal-login-welcome {
    padding: 1.25rem;
    min-width: 0;
    max-width: 100%;
  }
  
  .portal-login-card h1 {
    font-size: 2rem;
  }
  
  .portal-login-welcome h2 {
    font-size: 1.8rem;
  }
  
  .portal-login-welcome .btn-create {
    height: 48px;
    padding: 0 1.25rem;
    font-size: 1.5rem;
  }
  
  .portal-login-form .form-group {
    margin-bottom: 1rem;
  }
  
  .portal-register-card {
    padding: 1.25rem;
  }
  
  .portal-register-card label,
  .portal-verify-form .portal-form-group label {
    font-size: 1.4rem !important;
  }
  
  .portal-verify-title {
    font-size: 1.8rem;
  }
  
  .portal-verify-form .portal-form-group {
    margin-bottom: 1rem;
  }
  
  .portal-verify-breadcrumb a {
    font-size: 1.4rem;
  }
  
  .portal-verify-note {
    font-size: 1.4rem;
  }
  
  .portal-footer {
    padding: 1rem 1.25rem;
  }
  
  .portal-footer p {
    font-size: 0.95rem;
  }
}

/* Dashboard mobile */
@media (max-width: 768px) {
  .portal-modern .main-content {
    padding: 1rem !important;
  }
  
  .portal-modern .eduportal-topbar {
    padding: 0.75rem 1rem !important;
    width: 100% !important;
  }
  
  .portal-modern .eduportal-topbar h3 {
    font-size: 1.8rem !important;
  }
  
  /* Form fields - slightly smaller on mobile for touch */
  .portal-modern .main-content .form-control,
  .portal-modern .main-content .eduportal-input,
  .portal-modern .main-content input[type="text"],
  .portal-modern .main-content input[type="password"],
  .portal-modern .main-content input[type="email"],
  .portal-modern .main-content select {
    font-size: 1.6rem !important;
    min-height: 44px !important;
  }
  
  /* Prevent table/form overflow on mobile */
  .portal-modern .main-content table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .portal-modern .main-content .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .portal-modern .edu-main-content {
    width: 100%;
    overflow-x: hidden;
  }
}

@media (max-width: 480px) {
  .portal-modern .main-content {
    padding: 0.75rem !important;
  }
  
  .portal-modern .eduportal-topbar h3 {
    font-size: 1.6rem !important;
  }
}

/* Registration document (putme flow) - consistent header */
.portal-document .header-div,
.portal-document .heada-divs {
  font-family: var(--font-sans);
}

.portal-document header {
  border-bottom: 2px solid var(--portal-primary) !important;
}

@media (max-width: 768px) {
  .portal-document .header-div {
    flex-direction: column !important;
    text-align: center !important;
  }
  
  .portal-document .logo-div img {
    max-width: 140px !important;
  }
  
  .portal-document .content-row {
    padding: 1rem !important;
  }
}

/* ============================================
   Register Courses & Check Semester Results
   ============================================ */
.portal-register-notice {
  background: rgba(22, 101, 52, 0.1);
  border: 1px solid var(--portal-secondary);
  border-radius: var(--radius-md);
  color: var(--portal-secondary-dark);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  font-size: 1.5rem;
  line-height: 1.5;
}

.portal-register-notice i {
  margin-right: 0.5rem;
  vertical-align: middle;
}

.portal-reg-closed {
  padding: 2rem;
  text-align: center;
  font-size: 1.425rem;
  color: var(--portal-gray-600);
}

.portal-result-alert {
  background: rgba(183, 28, 28, 0.08);
  border: 1px solid var(--portal-error);
  border-radius: var(--radius-md);
  color: var(--portal-error);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 1.425rem;
}

/* Success variant when using Bootstrap's .alert-success together with portal-result-alert */
.alert-success.portal-result-alert {
  background: rgba(22, 163, 74, 0.08);
  border-color: #16a34a;
  color: #166534;
}

.portal-result-alert i {
  margin-right: 0.5rem;
  vertical-align: top;
  flex-shrink: 0;
}

.portal-notifications-single {
  display: flex;
  align-items: flex-start;
}

.portal-notifications-single > i {
  margin-top: 0.15em;
}

.portal-notifications-list {
  flex: 1;
}

.portal-notification-item {
  margin-bottom: 0.5rem;
}

.portal-notification-item:last-child {
  margin-bottom: 0;
}

.portal-result-card {
  background: var(--portal-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--portal-gray-200);
  overflow: hidden;
}

.portal-result-card-header {
  background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-dark) 100%);
  color: var(--portal-white);
  padding: 1.5rem 2rem;
}

.portal-result-card-header h3 {
  margin: 0 0 0.35rem 0;
  font-size: 2.25rem;
  font-weight: 600;
}

.portal-result-card-header h3 i {
  margin-right: 0.5rem;
  opacity: 0.9;
}

.portal-result-subtitle {
  margin: 0;
  font-size: 1.39rem;
  opacity: 0.9;
}

.portal-result-card-body {
  padding: 2rem;
}

/* Student info card - separate card with clear label: value format */
.portal-student-info-card {
  background: var(--portal-gray-50);
  border: 1px solid var(--portal-gray-200);
  border-radius: var(--radius-md);
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

.portal-student-info-card h4,
.portal-result-filters h4 {
  color: var(--portal-primary);
  font-size: 1.725rem;
  font-weight: 600;
  margin: 0 0 1.25rem 0;
}

.portal-student-info-card h4 i,
.portal-result-filters h4 i {
  margin-right: 0.5rem;
}

.portal-student-info-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.9rem 2.5rem;
}

.portal-student-info-row {
  font-size: 1.5rem;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.portal-student-info-row .portal-info-label {
  font-size: 1.3rem;
  color: var(--portal-gray-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-student-info-row .portal-info-value {
  font-size: 1.6rem;
  color: var(--portal-gray-900);
  font-weight: 600;
}

.portal-info-label {
  font-size: 1.3rem;
  color: var(--portal-gray-500);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.portal-info-value {
  font-size: 1.6rem;
  color: var(--portal-gray-900);
  font-weight: 600;
}

/* ============================================
   Global Label/Value Distinction
   Makes labels bold and visually distinct from values
   across all page types (tables, forms, info displays)
   ============================================ */

/* Table-based label/value pairs (my_profile, etc.)
   First column in tbody = label, second column = value.
   Only targets 2-column tables used for key-value display. */
.portal-modern .main-content table.mytable tbody td:first-child,
.portal-modern .portal-content-wrap table.mytable tbody td:first-child {
  font-weight: 700 !important;
  color: var(--portal-gray-600) !important;
  font-size: 1.4rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: 200px;
  background: var(--portal-gray-50) !important;
  border-right: 2px solid var(--portal-gray-200) !important;
}

.portal-modern .main-content table.mytable tbody td:last-child,
.portal-modern .portal-content-wrap table.mytable tbody td:last-child {
  font-weight: 600 !important;
  color: var(--portal-gray-900) !important;
  font-size: 1.6rem !important;
}

/* For tables without explicit tbody (my_profile uses <table><tr><td> directly) */
.portal-modern .main-content table.mytable > tr > td:first-child,
.portal-modern .main-content table.mytable tr td:first-child {
  font-weight: 700 !important;
  color: var(--portal-gray-600) !important;
  font-size: 1.4rem !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  width: 200px;
  background: var(--portal-gray-50) !important;
  border-right: 2px solid var(--portal-gray-200) !important;
}

.portal-modern .main-content table.mytable > tr > td:last-child,
.portal-modern .main-content table.mytable tr td:last-child {
  font-weight: 600 !important;
  color: var(--portal-gray-900) !important;
  font-size: 1.6rem !important;
}

/* Don't apply label styling to table headers */
.portal-modern .main-content table.mytable thead th,
.portal-modern .portal-content-wrap table.mytable thead th {
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  font-size: 1.3rem !important;
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
}

/* Lead section headers in my_profile (Basic Information, Academic Profile, etc.) */
.portal-modern .main-content .lead.leadMe,
.portal-modern .portal-content-wrap .lead.leadMe {
  font-size: 1.8rem !important;
  font-weight: 700 !important;
  color: var(--portal-primary) !important;
  margin: 1.75rem 0 0.75rem 0 !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--portal-primary-subtle);
  letter-spacing: 0.01em;
}

/* Form labels - bold and distinct */
.portal-modern .main-content label,
.portal-modern .portal-content-wrap label {
  font-weight: 700 !important;
  color: var(--portal-gray-700) !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.01em;
  margin-bottom: 0.4rem !important;
}

/* Ensure form values (inputs) look distinct from labels */
.portal-modern .main-content .form-control,
.portal-modern .portal-content-wrap .form-control {
  font-weight: 500 !important;
  color: var(--portal-gray-800) !important;
}

.portal-result-filters {
  margin-top: 0;
}

/* Single column: form fields appear one by one vertically (check results, register/reprint courses, fee pages) */
.portal-filter-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.portal-filter-group label {
  display: block;
  font-size: 1.31rem;
  font-weight: 500;
  color: var(--portal-gray-700);
  margin-bottom: 0.5rem;
}

.portal-filter-group .form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--portal-gray-300);
  border-radius: var(--radius-sm);
  font-size: 1.425rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.portal-filter-group .form-control:focus {
  border-color: var(--portal-primary);
  outline: none;
  box-shadow: 0 0 0 3px var(--portal-primary-subtle);
}

/* Pay Portal Fees page: wider text fields (length), normal height */
.portal-pay-fees-page .portal-filter-group {
  min-width: 240px !important;
  max-width: 320px !important;
  flex: 1 1 auto !important;
}
.portal-pay-fees-page .portal-filter-group .form-control,
.portal-pay-fees-page .portal-filter-group input[type="text"],
.portal-pay-fees-page .portal-filter-group select {
  width: 100% !important;
  max-width: 100% !important;
}

/* Other Fees confirmation: match acceptance/college levy form width */
.portal-page-pay_other_fees .portal-result-filters {
  max-width: 520px;
  margin: 0 auto 2rem;
}
.portal-page-pay_other_fees .portal-filter-group {
  min-width: 260px;
  max-width: 520px;
}
.portal-page-pay_other_fees .portal-filter-group .form-control,
.portal-page-pay_other_fees .portal-filter-group input[type="text"],
.portal-page-pay_other_fees .portal-filter-group select {
  width: 100% !important;
  max-width: 100% !important;
}


.portal-btn-primary {
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
  border: none !important;
  padding: 0.75rem 1.75rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  cursor: pointer !important;
  transition: background 0.2s, transform 0.1s !important;
}

.portal-btn-primary:hover {
  background: var(--portal-primary-dark) !important;
  color: var(--portal-white) !important;
}

.portal-btn-primary i {
  margin-right: 0.5rem;
}

.portal-filter-actions {
  margin-top: 2rem;
  padding-top: 1rem;
}

/* Manage Profile - tabs inside card */
.portal-result-card-body .portal-profile-tabs {
  margin: -0.5rem 0 2rem 0;
  border-bottom: 2px solid var(--portal-gray-200);
}

.portal-result-card-body .portal-profile-tabs > li > a {
  padding: 1rem 1.5rem;
  font-size: 1.39rem;
  color: var(--portal-gray-600);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.portal-result-card-body .portal-profile-tabs > li > a:hover {
  color: var(--portal-primary);
  background: var(--portal-gray-50);
}

.portal-result-card-body .portal-profile-tabs > li.active > a,
.portal-result-card-body .portal-profile-tabs > li.active > a:hover,
.portal-result-card-body .portal-profile-tabs > li.active > a:focus {
  color: var(--portal-primary);
  font-weight: 600;
  background: var(--portal-white);
  border-color: var(--portal-gray-200);
  border-bottom-color: transparent;
}

.portal-result-card-body .portal-profile-tabs > li > a i {
  margin-right: 0.5rem;
}

.portal-profile-form-content {
  padding: 1.5rem 0;
}

.portal-profile-form-content .form-group {
  margin-bottom: 1.5rem;
}

.portal-profile-form-content .form-control {
  font-size: 1.4rem;
  padding: 0.75rem 1rem;
}

.portal-profile-form-content .control-label {
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--portal-gray-800);
}

/* Manage Profile - 2-column grid with generous spacing */
.portal-form-grid form.portal-profile-form,
.portal-form-grid form[class*="form-horizontal"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 0.25rem 4rem;
  align-content: start;
}

.portal-form-grid .form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 0;
  float: none;
  min-width: 0;
  isolation: isolate;
  padding: 0;
}

/* Manage Profile - larger labels, clear spacing */
.portal-result-card-body .portal-form-grid .form-group .control-label,
.portal-form-grid .form-group .control-label {
  position: static;
  width: 100%;
  margin-bottom: 0.2rem;
  padding: 0;
  text-align: left;
  float: none;
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  color: var(--portal-gray-800) !important;
  line-height: 1.3;
}

.portal-form-grid .form-group .col-sm-3,
.portal-form-grid .form-group .col-sm-5 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0;
  float: none;
}

.portal-form-grid .form-group .col-sm-5 {
  flex: 1;
  min-width: 0;
}

.portal-form-grid .form-group .form-control,
.portal-form-grid .form-group select,
.portal-form-grid .form-group input {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

.portal-form-grid .portal-field-help {
  display: block;
  margin-top: 0.4rem;
  font-size: 1.3rem;
  color: var(--portal-gray-500);
}

/* Full-width for address fields and action buttons */
.portal-form-grid .form-group.portal-field-full {
  grid-column: 1 / -1;
}

.portal-form-grid .form-group.portal-form-actions {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--portal-gray-200);
}

.portal-form-grid .form-group.portal-form-actions .col-sm-offset-3 {
  margin-left: 0;
}

/* Password tab - single column for 3 fields, cleaner look */
.portal-password-grid form[class*="form-horizontal"] {
  grid-template-columns: 1fr;
  max-width: 480px;
}

.portal-password-grid .form-group .control-label {
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  color: var(--portal-gray-800) !important;
}

.portal-password-grid .form-group {
  padding: 0;
}

/* Upload tab - 2 columns with clear spacing */
.portal-upload-grid .form-group {
  display: flex;
  flex-direction: column;
}

.portal-upload-grid .padded {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 0.25rem 3rem;
}

.portal-upload-grid .form-group label {
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  color: var(--portal-gray-800) !important;
  margin-bottom: 0.75rem;
}

/* Manage profile card body - extra padding for form area */
.portal-result-card-body .portal-form-grid {
  padding-top: 0.5rem;
}

@media (max-width: 768px) {
  .portal-form-grid form.portal-profile-form,
  .portal-form-grid form[class*="form-horizontal"],
  .portal-password-grid form[class*="form-horizontal"] {
    grid-template-columns: 1fr;
  }
  
  .portal-upload-grid .padded {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .portal-result-card-body {
    padding: 1.25rem;
  }
  
  .portal-student-info-rows {
    grid-template-columns: 1fr;
  }
  
  .portal-student-info-card {
    padding: 1.25rem;
  }
  
  .portal-filter-row {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Admin / Sadmin Pages - Professional Card Design
   Auto-wraps all admin content in card styling
   ============================================ */

/* Content wrap acts as the card container */
.portal-modern .portal-content-wrap {
  background: #ffffff !important;
  border-radius: 16px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #e2e8f0 !important;
  margin: 1.5rem !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Clearfix: ensure card contains all floated children */
.portal-modern .portal-content-wrap::after {
  content: "" !important;
  display: table !important;
  clear: both !important;
}

/* Force white background on content children (not buttons/alerts/footer) */
.portal-modern .portal-content-wrap > *:not(.portal-page-title):not(.portal-footer),
.portal-modern .portal-content-wrap .row,
.portal-modern .portal-content-wrap .col-md-12,
.portal-modern .portal-content-wrap .col-md-6,
.portal-modern .portal-content-wrap form,
.portal-modern .portal-content-wrap .form-group,
.portal-modern .portal-content-wrap .form-groups-bordered,
.portal-modern .portal-content-wrap .tab-content,
.portal-modern .portal-content-wrap .tab-pane,
.portal-modern .portal-content-wrap .box,
.portal-modern .portal-content-wrap .box-content,
.portal-modern .portal-content-wrap .widget,
.portal-modern .portal-content-wrap .widget-content {
  background-color: transparent !important;
  background-image: none !important;
}

/* Page title becomes the card header */
.portal-modern .portal-page-title,
.portal-modern .main-content .portal-page-title {
  background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-dark) 100%) !important;
  color: var(--portal-white) !important;
  padding: 1.25rem 2rem !important;
  margin: 0 !important;
  font-size: 2.2rem !important;
  font-weight: 600 !important;
  border-radius: 16px 16px 0 0 !important;
  letter-spacing: 0.01em;
}

.portal-modern .portal-page-title i,
.portal-modern .main-content .portal-page-title i {
  color: rgba(255, 255, 255, 0.85) !important;
  margin-right: 0.5rem;
}

/* Content inside the card */
.portal-modern .portal-content-wrap > .row,
.portal-modern .portal-content-wrap > div:not(.portal-page-title):not(h3):not(.portal-footer) {
  padding: 1.5rem 2rem;
}

/* Tabs - professional styling */
.portal-modern .portal-content-wrap .nav-tabs {
  border-bottom: 2px solid var(--portal-gray-200);
  padding: 0 2rem;
  margin-bottom: 0;
  background: var(--portal-gray-50);
}

.portal-modern .portal-content-wrap .nav-tabs > li > a {
  font-size: 1.5rem !important;
  font-weight: 500 !important;
  color: var(--portal-gray-600) !important;
  padding: 0.875rem 1.5rem !important;
  border: none !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  transition: color 0.2s, border-color 0.2s;
  margin-bottom: -2px;
}

.portal-modern .portal-content-wrap .nav-tabs > li > a:hover {
  color: var(--portal-primary) !important;
  background: transparent !important;
  border-bottom-color: var(--portal-gray-300) !important;
}

.portal-modern .portal-content-wrap .nav-tabs > li.active > a,
.portal-modern .portal-content-wrap .nav-tabs > li.active > a:hover,
.portal-modern .portal-content-wrap .nav-tabs > li.active > a:focus {
  color: var(--portal-primary) !important;
  font-weight: 600 !important;
  background: var(--portal-white) !important;
  border: none !important;
  border-bottom: 3px solid var(--portal-primary) !important;
}

.portal-modern .portal-content-wrap .nav-tabs > li > a i {
  margin-right: 0.35rem;
  opacity: 0.7;
}

.portal-modern .portal-content-wrap .nav-tabs > li.active > a i {
  opacity: 1;
}

/* Tab content - proper padding */
.portal-modern .portal-content-wrap .tab-content {
  padding: 1.5rem 2rem;
}

.portal-modern .portal-content-wrap .tab-pane.box {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Widget containers - clean up borders */
.portal-modern .portal-content-wrap .widget.stacked {
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.portal-modern .portal-content-wrap .widget-header {
  display: none;
}

.portal-modern .portal-content-wrap .widget-content {
  padding: 0 !important;
}

/* Tables - professional data table styling (student records style) */
.portal-modern .portal-content-wrap table.table,
.portal-modern .portal-content-wrap .table-bordered,
.portal-modern .portal-content-wrap .datatable {
  border: 1px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
  font-size: 1.5rem !important;
  width: 100% !important;
  margin-bottom: 0 !important;
}

/* Responsive wrapper for admin data tables - like student records table */
.portal-modern .portal-content-wrap .table-responsive,
.portal-modern .portal-content-wrap .portal-datatable-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin-bottom: 1rem !important;
  border: 1px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--portal-white) !important;
}

.portal-modern .portal-content-wrap .portal-datatable-wrap .table {
  margin-bottom: 0 !important;
}

.portal-modern .portal-content-wrap table thead {
  background: linear-gradient(135deg, var(--portal-primary) 0%, var(--portal-primary-dark) 100%) !important;
}

.portal-modern .portal-content-wrap table thead th {
  font-weight: 600 !important;
  color: var(--portal-white) !important;
  border-bottom: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.15) !important;
  padding: 0.875rem 1rem !important;
  font-size: 1.4rem !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.portal-modern .portal-content-wrap table thead th:last-child {
  border-right: none !important;
}

.portal-modern .portal-content-wrap table tbody td {
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--portal-gray-100) !important;
  vertical-align: middle !important;
  color: var(--portal-gray-700) !important;
  font-size: 1.5rem !important;
}

.portal-modern .portal-content-wrap table tbody tr:hover {
  background: var(--portal-primary-subtle) !important;
}

.portal-modern .portal-content-wrap table tbody tr:last-child td {
  border-bottom: none !important;
}

/* DataTable controls - search box, pagination */
.portal-modern .portal-content-wrap .dataTables_wrapper {
  padding: 0 !important;
}

.portal-modern .portal-content-wrap .dataTables_filter input {
  border: 2px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5rem 0.75rem !important;
  font-size: 1.5rem !important;
  min-height: 40px !important;
  transition: border-color 0.2s;
}

.portal-modern .portal-content-wrap .dataTables_filter input:focus {
  border-color: var(--portal-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--portal-primary-subtle) !important;
}

.portal-modern .portal-content-wrap .dataTables_length select {
  border: 2px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.375rem 0.5rem !important;
  font-size: 1.4rem !important;
  min-height: 36px !important;
}

.portal-modern .portal-content-wrap .dataTables_paginate .paginate_button {
  border: 1px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.375rem 0.75rem !important;
  font-size: 1.4rem !important;
  margin: 0 2px !important;
  color: var(--portal-gray-600) !important;
  background: var(--portal-white) !important;
}

.portal-modern .portal-content-wrap .dataTables_paginate .paginate_button:hover {
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
  border-color: var(--portal-primary) !important;
}

.portal-modern .portal-content-wrap .dataTables_paginate .paginate_button.current {
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
  border-color: var(--portal-primary) !important;
  font-weight: 600 !important;
}

.portal-modern .portal-content-wrap .dataTables_info {
  font-size: 1.4rem !important;
  color: var(--portal-gray-500) !important;
  padding-top: 0.75rem !important;
}

/* Buttons - action buttons in tables */
.portal-modern .portal-content-wrap .btn-success {
  background: var(--portal-secondary) !important;
  border-color: var(--portal-secondary) !important;
  color: var(--portal-white) !important;
  font-size: 1.4rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}

.portal-modern .portal-content-wrap .btn-danger {
  background: var(--portal-accent) !important;
  border-color: var(--portal-accent) !important;
  color: var(--portal-white) !important;
  font-size: 1.4rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}

.portal-modern .portal-content-wrap .btn-warning {
  background: var(--portal-warning) !important;
  border-color: var(--portal-warning) !important;
  color: var(--portal-white) !important;
  font-size: 1.4rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 500 !important;
}

/* Forms inside admin pages - cleaner layout */
.portal-modern .portal-content-wrap .form-groups-bordered {
  padding: 1rem 0;
}

.portal-modern .portal-content-wrap .form-groups-bordered .form-group {
  margin-bottom: 1.25rem !important;
  padding: 0 !important;
  border: none !important;
}

.portal-modern .portal-content-wrap .p20 {
  padding: 0 !important;
}

.portal-modern .portal-content-wrap .no-p {
  padding: 0 !important;
}

/* Section headings inside content */
.portal-modern .portal-content-wrap h3:not(.portal-page-title) {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  color: var(--portal-primary) !important;
  margin: 0.5rem 0 1rem 0 !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--portal-gray-100);
}

/* Error / status messages - only show box when paragraph has actual content */
.portal-modern .portal-content-wrap p[style*="color:#9d0000"]:not(:empty),
.portal-modern .portal-content-wrap p[style*="color:red"]:not(:empty),
.portal-modern .portal-content-wrap p[style*="color:#c00"]:not(:empty) {
  background: #fef2f2 !important;
  border: 1px solid #fecaca !important;
  border-left: 4px solid var(--portal-accent) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1rem !important;
  font-weight: 500 !important;
}

/* Reports header inside pages */
.portal-modern .portal-content-wrap p[style*="background:#043762"] {
  background: var(--portal-primary) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1.5rem !important;
}

/* Export buttons - Excel, PDF, Print */
.portal-modern .portal-content-wrap .dt-buttons .dt-button,
.portal-modern .portal-content-wrap .buttons-excel,
.portal-modern .portal-content-wrap .buttons-pdf,
.portal-modern .portal-content-wrap .buttons-print {
  border: 1px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  padding: 0.5rem 1rem !important;
  font-size: 1.4rem !important;
  font-weight: 500 !important;
  background: var(--portal-white) !important;
  color: var(--portal-gray-700) !important;
  margin-right: 4px !important;
  transition: all 0.2s;
}

.portal-modern .portal-content-wrap .dt-buttons .dt-button:hover,
.portal-modern .portal-content-wrap .buttons-excel:hover,
.portal-modern .portal-content-wrap .buttons-pdf:hover,
.portal-modern .portal-content-wrap .buttons-print:hover {
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
  border-color: var(--portal-primary) !important;
}

/* DataTables Print button (added by includes_bottom) */
.portal-modern .portal-dt-print {
  font-size: 1.4rem !important;
  padding: 0.5rem 1rem !important;
  border: 1px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--portal-white) !important;
  color: var(--portal-gray-700) !important;
  text-decoration: none !important;
}
.portal-modern .portal-dt-print:hover {
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
  border-color: var(--portal-primary) !important;
}

/* Clean up extra spacing/breaks in admin pages */
.portal-modern .portal-content-wrap > br {
  display: none;
}

/* List groups - card-like styling */
.portal-modern .portal-content-wrap .list-group {
  border-radius: var(--radius-sm) !important;
  overflow: hidden;
}

.portal-modern .portal-content-wrap .list-group-item {
  border-color: var(--portal-gray-100) !important;
  padding: 0.75rem 1rem !important;
  font-size: 1.5rem !important;
}

/* Box content areas */
.portal-modern .portal-content-wrap .box-content {
  padding: 0 !important;
}

/* Card for student-facing pages is already handled above;
   ensure no double card wrapping for portal-result-card */
.portal-modern .portal-content-wrap .portal-result-card {
  box-shadow: none;
  border: none;
  border-radius: 0;
}

.portal-modern .portal-content-wrap .portal-result-card-header {
  margin: -1.5rem -2rem 1.5rem -2rem;
  border-radius: 0;
}

/* Dashboard card - the stat card */
.portal-modern .portal-content-wrap .panel-default {
  border: 1px solid var(--portal-gray-200) !important;
  border-radius: var(--radius-md) !important;
  overflow: hidden;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow 0.2s, transform 0.2s;
}

.portal-modern .portal-content-wrap .panel-default:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px);
}

.portal-modern .portal-content-wrap .panel-body {
  padding: 1.5rem !important;
  text-align: center;
}

.portal-modern .portal-content-wrap .panel-body h1 {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  color: var(--portal-primary) !important;
  margin: 0 0 0.5rem 0 !important;
}

/* Minimal course table styling on register courses page */
.portal-course-table {
  width: 100% !important;
  min-width: 700px !important;
  border-collapse: collapse !important;
  margin-bottom: 1.5rem !important;
}

.portal-course-table thead tr {
  background: var(--portal-primary-subtle) !important;
}

.portal-course-table thead th {
  font-weight: 600 !important;
  font-size: 1.4rem !important;
  padding: 0.75rem 1rem !important;
  border-bottom: 1px solid var(--portal-gray-200) !important;
}

.portal-course-table tbody tr:nth-child(odd) {
  background: #f9fafb !important;
}

.portal-course-table tbody tr:nth-child(even) {
  background: #ffffff !important;
}

.portal-course-table tbody td {
  padding: 0.6rem 1rem !important;
  border-bottom: 1px solid var(--portal-gray-100) !important;
  vertical-align: middle !important;
}

.portal-course-table td:first-child {
  width: 40px;
}

.portal-course-table input[type="checkbox"] {
  transform: scale(1.1);
}

.portal-course-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.portal-modern .portal-content-wrap .panel-body a {
  color: var(--portal-primary) !important;
  font-weight: 600 !important;
  font-size: 1.5rem !important;
  text-decoration: none !important;
}

.portal-modern .portal-content-wrap .panel-body a:hover {
  color: var(--portal-accent) !important;
  text-decoration: underline !important;
}

/* Confirmation dialog - professional look */
.portal-modern #confirm .modal-content {
  border-radius: var(--radius-md) !important;
  border: none !important;
  box-shadow: var(--shadow-lg) !important;
}

.portal-modern #confirm .modal-header {
  background: var(--portal-primary) !important;
  color: var(--portal-white) !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  padding: 1rem 1.5rem !important;
}

.portal-modern #confirm .modal-header h4 {
  color: var(--portal-white) !important;
  font-weight: 600 !important;
}

.portal-modern #confirm .modal-body {
  padding: 1.5rem !important;
  font-size: 1.5rem !important;
}

.portal-modern #confirm .modal-footer {
  padding: 1rem 1.5rem !important;
  border-top: 1px solid var(--portal-gray-200) !important;
}

/* Fix portal-content-wrap padding for pages that already have card design */
.portal-modern .portal-content-wrap .portal-result-card-body {
  padding: 2rem;
}

/* Fix spacing between page title and content */
.portal-modern .portal-content-wrap > h3.portal-page-title + .row,
.portal-modern .portal-content-wrap > h3.portal-page-title + div {
  padding-top: 1.5rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .portal-modern .portal-content-wrap {
    margin: 0.75rem;
    border-radius: var(--radius-md);
  }
  
  .portal-modern .portal-content-wrap > .row,
  .portal-modern .portal-content-wrap > div:not(.portal-page-title):not(h3) {
    padding: 1rem;
  }
  
  .portal-modern .portal-content-wrap .nav-tabs {
    padding: 0 1rem;
  }
  
  .portal-modern .portal-content-wrap .tab-content {
    padding: 1rem;
  }
  
  .portal-modern .portal-page-title {
    padding: 1rem 1.25rem !important;
    font-size: 1.8rem !important;
  }
}

@media (max-width: 480px) {
  .portal-modern .portal-content-wrap {
    margin: 0.5rem;
    border-radius: var(--radius-sm);
  }
  
  .portal-modern .portal-content-wrap > .row,
  .portal-modern .portal-content-wrap > div:not(.portal-page-title):not(h3) {
    padding: 0.75rem;
  }
  
  .portal-modern .portal-content-wrap .nav-tabs > li > a {
    padding: 0.625rem 0.75rem !important;
    font-size: 1.4rem !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   PROFESSIONAL DATATABLE STYLES
   ═══════════════════════════════════════════════════════════ */

/* ── Table wrapper ── */
.portal-modern .portal-datatable-wrap,
.portal-modern .widget-table .widget-content {
  overflow-x: auto;
}

/* ── Base table ── */
.portal-modern table.dataTable {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 1.35rem;
  color: #374151;
}

/* ── Header ── */
.portal-modern table.dataTable thead th,
.portal-modern table.dataTable thead td {
  background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%) !important;
  color: #fff !important;
  font-weight: 600 !important;
  font-size: 1.3rem !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 12px 14px !important;
  border-bottom: 2px solid rgba(255,255,255,0.15) !important;
  white-space: nowrap;
  cursor: pointer;
}
.portal-modern table.dataTable thead th.sorting:after,
.portal-modern table.dataTable thead th.sorting_asc:after,
.portal-modern table.dataTable thead th.sorting_desc:after {
  color: rgba(255,255,255,0.65) !important;
}

/* ── Body rows ── */
.portal-modern table.dataTable tbody tr {
  transition: background 0.15s ease;
}
.portal-modern table.dataTable tbody tr:nth-child(even) {
  background: #f8fafc !important;
}
.portal-modern table.dataTable tbody tr:nth-child(odd) {
  background: #ffffff !important;
}
.portal-modern table.dataTable tbody tr:hover {
  background: #dbeafe !important;
}
.portal-modern table.dataTable tbody td {
  padding: 10px 14px !important;
  font-size: 1.35rem !important;
  border-bottom: 1px solid #e5e7eb !important;
  vertical-align: middle !important;
}

/* ── Footer ── */
.portal-modern table.dataTable tfoot th,
.portal-modern table.dataTable tfoot td {
  background: #f1f5f9 !important;
  font-weight: 600;
  padding: 10px 14px !important;
  border-top: 2px solid #e2e8f0 !important;
}

/* ── select2 dropdown z-index (must be above the table header) ── */
.portal-modern .dataTables_length .select2-container {
  min-width: 65px;
  display: inline-block !important;
  vertical-align: middle;
}
.select2-drop,
.select2-dropdown {
  z-index: 99999 !important;
}
/* Add breathing room between controls row and table */
.portal-modern .dataTables_wrapper table.dataTable {
  margin-top: 14px !important;
  clear: both;
}
.portal-modern .portal-dt-btnrow {
  margin-bottom: 10px;
}

/* Column filters: card-style section above table controls */
.portal-modern .portal-col-filters-wrap {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.portal-modern .portal-col-filters-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--portal-gray-700);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.portal-modern .portal-col-filters-title i {
  font-size: 1.4rem;
  color: var(--portal-primary);
  opacity: 0.9;
}
.portal-modern .portal-col-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
}
.portal-modern .portal-filter-group {
  flex: 0 1 auto;
  min-width: 160px;
  max-width: 220px;
}
.portal-modern .portal-filter-label {
  display: block;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--portal-gray-600);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.portal-modern .portal-filter-select {
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1.3rem;
  font-weight: 500;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  appearance: auto;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  min-height: 36px;
}
.portal-modern .portal-filter-select:hover {
  border-color: #9ca3af;
}
.portal-modern .portal-filter-select:focus {
  outline: none;
  border-color: var(--portal-primary);
  box-shadow: 0 0 0 2px rgba(26,35,126,0.12);
}
.portal-modern .portal-filter-clear {
  padding: 0.5rem 1rem;
  font-size: 1.25rem;
  font-weight: 500;
  color: #b91c1c;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  min-height: 36px;
  align-self: flex-end;
  margin-left: auto;
}
.portal-modern .portal-filter-clear:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}
.portal-modern .portal-filter-clear i {
  margin-right: 4px;
}
@media (max-width: 768px) {
  .portal-modern .portal-col-filters-wrap {
    padding: 0.85rem 1rem;
    margin-bottom: 0.85rem;
  }
  .portal-modern .portal-col-filters-title {
    font-size: 1.25rem;
    margin-bottom: 0.6rem;
  }
  .portal-modern .portal-col-filters {
    gap: 0.75rem 1rem;
  }
  .portal-modern .portal-filter-group {
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
  }
  .portal-modern .portal-filter-clear {
    margin-left: 0;
    width: 100%;
  }
}
/* Space the Show-entries row away from the table */
.portal-modern .dataTables_wrapper > .row:has(.dataTables_length),
.portal-modern .dataTables_wrapper > div > .dataTables_length,
.portal-modern .dataTables_wrapper .dataTables_length {
  margin-bottom: 6px;
}
/* Ensure the dataTables_length select2 widget is compact and inline */
.portal-modern .dataTables_length .select2-container {
  display: inline-block !important;
  vertical-align: middle;
  min-width: 65px !important;
}
.portal-modern .dataTables_length .select2-choice,
.portal-modern .dataTables_length .select2-selection {
  min-height: 30px !important;
  line-height: 28px !important;
  font-size: 1.3rem !important;
  border-radius: 6px !important;
  border: 1px solid #d1d5db !important;
  padding: 0 8px !important;
}

/* ── DataTables top bar (length + buttons + search) ── */
.portal-modern .portal-dt-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 12px 0 10px;
  margin-bottom: 8px;
}
.portal-modern .portal-dt-length label,
.portal-modern .dataTables_length label {
  font-size: 1.3rem !important;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 !important;
}
.portal-modern .portal-dt-length select,
.portal-modern .dataTables_length select {
  font-size: 1.3rem !important;
  padding: 4px 8px !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  height: auto !important;
}
.portal-modern .portal-dt-search .dataTables_filter,
.portal-modern .dataTables_filter {
  text-align: right;
}
.portal-modern .dataTables_filter label {
  font-size: 1.3rem !important;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: 0 !important;
}
.portal-modern .dataTables_filter input {
  border: 1.5px solid #d1d5db !important;
  border-radius: 8px !important;
  padding: 6px 12px 6px 32px !important;
  font-size: 1.35rem !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 10px center !important;
  width: 200px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.portal-modern .dataTables_filter input:focus {
  border-color: var(--portal-primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12) !important;
  outline: none !important;
}

/* Responsive tweaks for fee confirmation & history tables */
@media (max-width: 768px) {
  /* Stack DataTables controls vertically */
  .portal-modern .dataTables_wrapper .row > div {
    text-align: left !important;
  }

  .portal-modern .dataTables_wrapper .dt-buttons {
    justify-content: flex-start;
    margin-bottom: 0.25rem;
  }

  .portal-modern .dataTables_length,
  .portal-modern .dataTables_filter {
    float: none !important;
    width: 100%;
    margin-bottom: 0.35rem;
  }

  .portal-modern .dataTables_filter input {
    width: 100% !important;
    max-width: 260px;
  }

  /* Confirmation forms: mimic college levy layout nicely on mobile */
  .portal-modern .form-horizontal .control-label,
  .portal-modern .form-horizontal .col-sm-3.control-label {
    text-align: left;
    padding-bottom: 4px;
  }

  .portal-modern .form-horizontal .col-sm-5 {
    width: 100%;
  }

  .portal-modern .eduportal-input,
  .portal-modern .form-horizontal .form-control {
    width: 100%;
    max-width: 100%;
  }

  .portal-modern .form-horizontal .col-sm-offset-3.col-sm-5 {
    margin-left: 0;
    width: 100%;
    text-align: center;
  }

  .portal-modern .form-horizontal .btn.btn-info,
  .portal-modern .form-horizontal .btn.portal-btn-primary {
    min-width: 60%;
  }

  /* Ensure ALL text fields and selects stretch full width on small screens */
  .portal-modern .main-content input[type="text"],
  .portal-modern .main-content input[type="password"],
  .portal-modern .main-content input[type="email"],
  .portal-modern .main-content input[type="number"],
  .portal-modern .main-content select.form-control,
  .portal-modern .main-content .eduportal-input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* Wider confirmation inputs on fee/payment forms (desktop & mobile) */
.portal-page-pay_sch_fees .form-horizontal .col-sm-5,
.portal-page-pay_acp_fees .form-horizontal .col-sm-5,
.portal-page-pay_portal_fees .form-horizontal .col-sm-5,
.portal-page-pay_other_fees .form-horizontal .col-sm-5 {
  max-width: 520px;
}

/* Make fee confirmation inputs span full card width (desktop) */
.portal-page-pay_sch_fees .form-horizontal .col-sm-3.control-label,
.portal-page-pay_acp_fees .form-horizontal .col-sm-3.control-label,
.portal-page-pay_portal_fees .form-horizontal .col-sm-3.control-label,
.portal-page-pay_other_fees .form-horizontal .col-sm-3.control-label {
  width: 100%;
  text-align: left;
  padding-bottom: 4px;
}

.portal-page-pay_sch_fees .form-horizontal .col-sm-5,
.portal-page-pay_acp_fees .form-horizontal .col-sm-5,
.portal-page-pay_portal_fees .form-horizontal .col-sm-5,
.portal-page-pay_other_fees .form-horizontal .col-sm-5 {
  width: 100%;
  max-width: 100%;
}

.portal-page-pay_sch_fees .form-horizontal .col-sm-offset-3.col-sm-5,
.portal-page-pay_acp_fees .form-horizontal .col-sm-offset-3.col-sm-5,
.portal-page-pay_portal_fees .form-horizontal .col-sm-offset-3.col-sm-5,
.portal-page-pay_other_fees .form-horizontal .col-sm-offset-3.col-sm-5 {
  margin-left: 0;
  width: 100%;
  text-align: center;
}

/* On wider screens, keep forms nicely centered and not overly wide */
@media (min-width: 992px) {
  .portal-page-pay_sch_fees .form-horizontal .col-sm-5,
  .portal-page-pay_acp_fees .form-horizontal .col-sm-5,
  .portal-page-pay_portal_fees .form-horizontal .col-sm-5,
  .portal-page-pay_other_fees .form-horizontal .col-sm-5 {
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Export Buttons ── */
.portal-modern .dt-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0 !important;
}
.portal-modern .dt-button,
.portal-modern .dt-buttons .dt-button {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 12px !important;
  border-radius: 7px !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  cursor: pointer;
  border: 1.5px solid transparent !important;
  transition: all 0.18s ease !important;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4 !important;
  background: none !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.07) !important;
}
.portal-modern .dt-button.btn-dt-copy  { color: #374151 !important; border-color: #d1d5db !important; background: #f9fafb !important; }
.portal-modern .dt-button.btn-dt-excel { color: #166534 !important; border-color: #86efac !important; background: #f0fdf4 !important; }
.portal-modern .dt-button.btn-dt-csv   { color: #0f766e !important; border-color: #5eead4 !important; background: #f0fdfa !important; }
.portal-modern .dt-button.btn-dt-pdf   { color: #991b1b !important; border-color: #fca5a5 !important; background: #fef2f2 !important; }
.portal-modern .dt-button.btn-dt-print { color: #1e40af !important; border-color: #93c5fd !important; background: #eff6ff !important; }

.portal-modern .dt-button.btn-dt-copy:hover  { background: #f3f4f6 !important; border-color: #9ca3af !important; }
.portal-modern .dt-button.btn-dt-excel:hover { background: #dcfce7 !important; border-color: #4ade80 !important; }
.portal-modern .dt-button.btn-dt-csv:hover   { background: #ccfbf1 !important; border-color: #2dd4bf !important; }
.portal-modern .dt-button.btn-dt-pdf:hover   { background: #fee2e2 !important; border-color: #f87171 !important; }
.portal-modern .dt-button.btn-dt-print:hover { background: #dbeafe !important; border-color: #60a5fa !important; }

/* ── DataTables info + pagination ── */
.portal-modern .portal-dt-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px 0 4px;
  gap: 0.5rem;
}
.portal-modern .dataTables_info {
  font-size: 1.3rem !important;
  color: #6b7280 !important;
  padding: 6px 0 !important;
}
.portal-modern .dataTables_paginate {
  text-align: right;
}
.portal-modern .dataTables_paginate .pagination > li > a,
.portal-modern .dataTables_paginate .pagination > li > span {
  font-size: 1.3rem !important;
  padding: 5px 10px !important;
  border-radius: 6px !important;
  margin: 0 2px;
  border: 1.5px solid #e2e8f0 !important;
  color: var(--portal-primary) !important;
  transition: all 0.15s ease;
}
.portal-modern .dataTables_paginate .pagination > .active > a,
.portal-modern .dataTables_paginate .pagination > .active > span {
  background: var(--portal-primary) !important;
  border-color: var(--portal-primary) !important;
  color: #fff !important;
}
.portal-modern .dataTables_paginate .pagination > li > a:hover {
  background: #dbeafe !important;
  border-color: var(--portal-primary) !important;
}

/* ── Empty state ── */
.portal-modern table.dataTable tbody td.dataTables_empty {
  text-align: center;
  padding: 2.5rem !important;
  color: #9ca3af;
  font-style: italic;
  font-size: 1.4rem !important;
}

/* ── Responsive helpers ── */
@media (max-width: 767px) {
  .portal-modern .portal-dt-top {
    flex-direction: column;
    align-items: stretch;
  }
  .portal-modern .dataTables_filter {
    text-align: left !important;
  }
  .portal-modern .dataTables_filter input {
    width: 100% !important;
  }
  .portal-modern .dt-buttons {
    justify-content: flex-start;
  }
  .portal-modern .dataTables_paginate {
    text-align: left;
  }
}

/* ── Injected button bar (legacy sDom tables) ── */
.portal-modern .portal-dt-injected {
  display: flex;
  align-items: center;
}
.portal-modern .portal-dt-injected .dt-buttons,
.portal-modern .portal-dt-buttons-bar .dt-buttons {
  display: flex !important;
  flex-wrap: wrap;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════
   TABLE ACTION BUTTONS — compact pill links, no overlap
   ═══════════════════════════════════════════════════════════ */

/* ── Prevent action column wrapping (last td = action column in most tables) ── */
.portal-modern table.dataTable tbody td:last-child,
.portal-modern table.dataTable tbody td:nth-last-child(2):has(a.btn),
.portal-modern table.dataTable tbody td > a.btn ~ a,
.portal-modern table.dataTable tbody td > a.btn {
  white-space: nowrap;
}

/* Any td containing a .btn child gets nowrap via font-size trick on the | separator */
.portal-modern table.dataTable tbody td:last-child {
  white-space: nowrap;
  font-size: 0; /* collapses the bare | text node between buttons */
}
.portal-modern table.dataTable tbody td:last-child a,
.portal-modern table.dataTable tbody td:last-child button,
.portal-modern table.dataTable tbody td:last-child span,
.portal-modern table.dataTable tbody td:last-child input,
.portal-modern table.dataTable tbody td:last-child .btn-group {
  font-size: 1.25rem; /* restore for actual elements */
}

/* ── Base style for all action btn-sm inside table cells ── */
.portal-modern table.dataTable tbody td .btn,
.portal-modern table.dataTable tbody td a.btn,
.portal-modern table.dataTable tbody td button.btn {
  display: inline-flex !important;
  align-items: center;
  gap: 4px;
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-size: 1.2rem !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  margin: 1px 2px !important;
  text-decoration: none !important;
  border-width: 1.5px !important;
  border-style: solid !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
  vertical-align: middle !important;
  cursor: pointer;
}

/* ── Restyle semantics: btn-danger in table cells = Edit (blue) ── */
.portal-modern table.dataTable tbody td .btn.btn-danger,
.portal-modern table.dataTable tbody td a.btn.btn-danger {
  background: #eff6ff !important;
  border-color: #93c5fd !important;
  color: #1d4ed8 !important;
}
.portal-modern table.dataTable tbody td .btn.btn-danger:hover,
.portal-modern table.dataTable tbody td a.btn.btn-danger:hover {
  background: #dbeafe !important;
  border-color: #3b82f6 !important;
  color: #1e3a8a !important;
}

/* ── btn-success in table cells = Delete (red/coral) ── */
.portal-modern table.dataTable tbody td .btn.btn-success,
.portal-modern table.dataTable tbody td a.btn.btn-success {
  background: #fef2f2 !important;
  border-color: #fca5a5 !important;
  color: #dc2626 !important;
}
.portal-modern table.dataTable tbody td .btn.btn-success:hover,
.portal-modern table.dataTable tbody td a.btn.btn-success:hover {
  background: #fee2e2 !important;
  border-color: #f87171 !important;
  color: #991b1b !important;
}

/* ── btn-info in table cells = View/Info (teal) ── */
.portal-modern table.dataTable tbody td .btn.btn-info,
.portal-modern table.dataTable tbody td a.btn.btn-info {
  background: #f0fdfa !important;
  border-color: #5eead4 !important;
  color: #0f766e !important;
}
.portal-modern table.dataTable tbody td .btn.btn-info:hover,
.portal-modern table.dataTable tbody td a.btn.btn-info:hover {
  background: #ccfbf1 !important;
  border-color: #2dd4bf !important;
  color: #134e4a !important;
}

/* ── btn-primary in table cells = Submit/Action (blue) ── */
.portal-modern table.dataTable tbody td .btn.btn-primary,
.portal-modern table.dataTable tbody td a.btn.btn-primary,
.portal-modern table.dataTable tbody td input.btn.btn-primary {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
}
.portal-modern table.dataTable tbody td .btn.btn-primary:hover,
.portal-modern table.dataTable tbody td a.btn.btn-primary:hover {
  background: #1d4ed8 !important;
  border-color: #1d4ed8 !important;
}

/* ── btn-default in table cells = Dropdown/Action (grey) ── */
.portal-modern table.dataTable tbody td .btn.btn-default,
.portal-modern table.dataTable tbody td a.btn.btn-default,
.portal-modern table.dataTable tbody td button.btn.btn-default {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
  color: #374151 !important;
}
.portal-modern table.dataTable tbody td .btn.btn-default:hover,
.portal-modern table.dataTable tbody td button.btn.btn-default:hover {
  background: #f3f4f6 !important;
  border-color: #9ca3af !important;
}

/* ── btn-warning in table cells = Activate/Status (amber) ── */
.portal-modern table.dataTable tbody td .btn.btn-warning,
.portal-modern table.dataTable tbody td a.btn.btn-warning {
  background: #fffbeb !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}
.portal-modern table.dataTable tbody td .btn.btn-warning:hover,
.portal-modern table.dataTable tbody td a.btn.btn-warning:hover {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #78350f !important;
}

/* ── Dropdown menu from action buttons stays normal size ── */
.portal-modern table.dataTable tbody td .dropdown-menu {
  font-size: 1.3rem !important;
}
.portal-modern table.dataTable tbody td .dropdown-menu a {
  display: flex !important;
  align-items: center;
  gap: 6px;
  padding: 6px 14px !important;
  color: #374151 !important;
  white-space: nowrap;
  border-radius: 0 !important;
  background: none !important;
  border: none !important;
  font-size: 1.3rem !important;
}
.portal-modern table.dataTable tbody td .dropdown-menu a:hover {
  background: #f3f4f6 !important;
  color: #111827 !important;
}
.portal-modern table.dataTable tbody td .btn-group {
  white-space: nowrap;
  display: inline-flex !important;
  gap: 0;
}

/* ── Input type=submit inside table cells ── */
.portal-modern table.dataTable tbody td input[type="submit"].btn {
  height: auto !important;
  padding: 4px 10px !important;
  font-size: 1.2rem !important;
}

/* ═══════════════════════════════════════════════════════
   Fee History Tables
   ═══════════════════════════════════════════════════════ */

/* Hide export buttons (Copy, Excel, CSV, PDF, Print) on fee history tables */
.portal-fee-history-table-wrap .dt-buttons,
.portal-fee-history-table-wrap .portal-dt-buttons,
.portal-fee-history-table-wrap .portal-dt-buttons-bar,
.portal-fee-history-table-wrap .portal-dt-btnrow,
.portal-fee-history-table-wrap .dataTables_wrapper .dt-buttons,
.portal-fee-history-table-wrap .dataTables_wrapper .portal-dt-btnrow,
.portal-fee-history-table-wrap .dataTables_wrapper .portal-dt-filter-section {
  display: none !important;
}

/* Tighten up the DataTables top bar (Show/Search row) */
.portal-fee-history-table-wrap .dataTables_wrapper {
  padding: 10px 14px 10px;
}
.portal-fee-history-table-wrap .dataTables_wrapper .portal-dt-top {
  margin-bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.portal-fee-history-table-wrap .dataTables_wrapper .portal-dt-top > div {
  flex: 1 1 auto;
}
.portal-fee-history-table-wrap .dataTables_wrapper .portal-dt-bottom {
  margin-top: 8px;
  padding: 6px 0 4px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.portal-fee-history-table-wrap .dataTables_wrapper .dataTables_length {
  white-space: nowrap;
}
.portal-fee-history-table-wrap .dataTables_wrapper .dataTables_filter {
  text-align: right;
}
.portal-fee-history-table-wrap .dataTables_wrapper .dataTables_filter input {
  min-width: 160px;
}
.portal-fee-history-table-wrap .dataTables_wrapper .dataTables_paginate .paginate_button {
  padding: 4px 10px !important;
  font-size: 1.15rem !important;
}

/* Title bar inside the fee history table wrap */
.portal-fee-history-title {
  background: #1e3a5f;
  padding: 12px 16px;
  border-radius: 6px 6px 0 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.portal-fee-history-title .pfh-title {
  display: block;
  font-size: 1.4rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  line-height: 1.4;
}
.portal-fee-history-title .pfh-sub {
  display: block;
  font-size: 1.1rem;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
  line-height: 1.3;
}

/* Wrap area with border for cohesion */
.portal-fee-history-table-wrap {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #fff;
  margin-bottom: 10px;
}

/* Table styling */
.portal-fee-history-table {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 1.3rem;
}
.portal-fee-history-table thead th {
  background: #1e3a5f;
  color: #fff;
  font-weight: 600;
  padding: 10px 12px;
  white-space: nowrap;
  font-size: 1.25rem;
  border: 1px solid #1e3a5f;
}
.portal-fee-history-table tbody td {
  padding: 9px 12px;
  vertical-align: middle;
  border: 1px solid #e5e7eb;
  font-size: 1.25rem;
}
.portal-fee-history-table tbody tr:nth-child(even) {
  background: #f9fafb;
}
.portal-fee-history-table tbody tr:hover {
  background: #eef2ff;
}
.portal-fee-history-table tbody td .btn {
  font-size: 1.15rem;
  padding: 5px 12px;
  border-radius: 4px;
  white-space: nowrap;
}

/* Mobile card-style layout for fee history tables */
@media (max-width: 768px) {
  .portal-fee-history-table,
  .portal-fee-history-table thead,
  .portal-fee-history-table tbody,
  .portal-fee-history-table th,
  .portal-fee-history-table td,
  .portal-fee-history-table tr {
    display: block;
  }
  .portal-fee-history-table thead {
    display: none;
  }
  .portal-fee-history-table tbody tr {
    margin-bottom: 12px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    padding: 8px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  }
  .portal-fee-history-table tbody tr:hover {
    background: #f0f4ff;
  }
  .portal-fee-history-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border: none;
    border-bottom: 1px solid #f3f4f6;
    font-size: 1.2rem;
  }
  .portal-fee-history-table tbody td:last-child {
    border-bottom: none;
    padding-top: 8px;
    justify-content: center;
  }
  .portal-fee-history-table tbody td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
    flex: 0 0 45%;
    font-size: 1.15rem;
  }
  .portal-fee-history-table tbody td .btn {
    width: 100%;
    text-align: center;
    font-size: 1.15rem;
  }

  /* Keep pagination/search/info readable on mobile */
  .portal-fee-history-table-wrap .dataTables_length,
  .portal-fee-history-table-wrap .dataTables_filter {
    float: none !important;
    text-align: left !important;
    width: 100%;
    margin-bottom: 8px;
  }
  .portal-fee-history-table-wrap .dataTables_filter input {
    width: 100% !important;
    max-width: 100%;
  }
  .portal-fee-history-table-wrap .dataTables_info,
  .portal-fee-history-table-wrap .dataTables_paginate {
    float: none !important;
    text-align: center !important;
    padding-top: 8px;
  }
}