/**
 * IMCOHAMS Admissions UI refresh (loaded after app-modern.css).
 * Shares tokens and component language with the student portal (portal-ui.css).
 * Bootstrap 3 sets html{font-size:10px}, so sizes here are in px.
 */
:root {
  --ui-navy-900: #0b1250;
  --ui-navy-700: #1f2a85;
  --ui-primary: #283593;
  --ui-primary-600: #1a237e;
  --ui-primary-50: #eef0fa;
  --ui-secondary: #166534;
  --ui-red: #b71c1c;
  --ui-green: #15803d;
  --ui-bg: #f3f6fa;
  --ui-surface: #ffffff;
  --ui-border: #e3e8ef;
  --ui-border-strong: #cfd7e2;
  --ui-text: #0f1f33;
  --ui-text-2: #3b4a5e;
  --ui-muted: #66758a;
  --ui-radius: 16px;
  --ui-shadow: 0 1px 2px rgba(15, 31, 51, 0.04), 0 4px 16px rgba(15, 31, 51, 0.05);
  --ui-shadow-lg: 0 14px 34px rgba(15, 31, 51, 0.12);
}

body.app-modern {
  background: var(--ui-bg) !important;
  color: var(--ui-text);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Header ---------- */
body.app-modern .app-header {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  box-shadow: none;
  border-bottom: 1px solid var(--ui-border);
}
body.app-modern .app-header::before { height: 3px; }
body.app-modern .app-header-inner { max-width: 1280px; padding: 10px 24px; }
body.app-modern .app-brand__logo { width: 44px; height: 44px; }
body.app-modern .app-brand__name { font-size: 17px; color: var(--ui-text); }
body.app-modern .app-brand__sub { font-size: 11px; letter-spacing: 0.07em; color: var(--ui-muted); margin-top: 2px; }
body.app-modern .app-brand__short { display: none; }
body.app-modern .app-nav-toggle { flex: 0 0 44px; }
body.app-modern .app-nav > li > a { font-size: 14.5px; font-weight: 600; padding: 9px 14px; border-radius: 10px; color: var(--ui-text-2); }
body.app-modern .app-nav > li.active > a,
body.app-modern .app-nav > li > a:hover { background: var(--ui-primary-50); color: var(--ui-primary); }
body.app-modern .app-nav > li.app-nav__cta > a {
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 6px 16px rgba(40, 53, 147, 0.28);
  padding: 9px 18px;
  margin-left: 8px;
}
body.app-modern .app-nav > li.app-nav__cta > a:hover { background: var(--ui-primary-600); color: #fff; }

/* ---------- News ticker: pinned label + seamless loop ---------- */
body.app-modern .app-news-ticker-wrap {
  background: var(--ui-navy-900);
  color: #d9dcf2;
  border-bottom: 0;
  display: flex;
  align-items: stretch;
}
body.app-modern .app-news-ticker__label {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ui-red);
  position: relative;
  z-index: 1;
}
body.app-modern .app-news-ticker__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: ui-pulse 1.6s ease-in-out infinite;
}
body.app-modern .app-news-ticker { flex: 1 1 auto; min-width: 0; padding: 9px 0; overflow: hidden; }
body.app-modern .app-news-ticker__content {
  padding-left: 0;
  gap: 0;
  animation: app-ticker-scroll 60s linear infinite;
}
body.app-modern .app-news-ticker__group { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; flex: 0 0 auto; }
body.app-modern .app-news-ticker__item { font-size: 14px; font-weight: 500; color: #d9dcf2; }
body.app-modern .app-news-ticker__sep { color: #5c6599; font-size: 10px; opacity: 1; }
@keyframes ui-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  body.app-modern .app-news-ticker__content { animation: none; }
  body.app-modern .app-news-ticker { overflow-x: auto; }
}

/* ---------- Hero ---------- */
body.app-modern .app-hero {
  max-width: 1232px;
  margin: 24px auto 28px;
  width: calc(100% - 48px);
  padding: 56px 32px;
  border-radius: 24px;
  background:
    radial-gradient(110% 140% at 100% 0%, rgba(34, 197, 94, 0.45) 0%, rgba(34, 197, 94, 0) 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(183, 28, 28, 0.22) 0%, rgba(183, 28, 28, 0) 55%),
    linear-gradient(135deg, var(--ui-navy-700) 0%, var(--ui-primary) 100%);
  box-shadow: 0 18px 40px rgba(26, 35, 126, 0.25);
}
body.app-modern .app-hero h1 {
  color: #fff !important;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -0.025em;
}
body.app-modern .app-hero p { color: rgba(255, 255, 255, 0.86); font-size: 16px; font-weight: 500; }
body.app-modern .app-hero .app-btn { margin-top: 24px; }

/* ---------- Layout ---------- */
body.app-modern .app-container { max-width: 1280px; padding: 0 24px; }
body.app-modern .app-main { padding-bottom: 40px; }

/* ---------- Cards ---------- */
body.app-modern .app-card,
body.app-modern .app-feature-card {
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  border-top: 3px solid var(--ui-primary);
  box-shadow: var(--ui-shadow);
}
body.app-modern .app-card { padding: 28px; margin-bottom: 24px; }
body.app-modern .app-feature-card { padding: 24px; }
body.app-modern .app-feature-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15, 31, 51, 0.1); }
body.app-modern .app-feature-card h3,
body.app-modern .app-feature-card h4 { font-size: 17px; color: var(--ui-text); }
body.app-modern .app-feature-card p { font-size: 14.5px; color: var(--ui-muted); line-height: 1.6; }
body.app-modern .app-cards-grid { gap: 20px; }
body.app-modern .app-card-header { border-bottom: 1px solid var(--ui-border); padding-bottom: 14px; margin-bottom: 20px; }
body.app-modern .app-card-header h2 { font-size: 19px; color: var(--ui-text); letter-spacing: -0.01em; }
body.app-modern .app-card-header .subtitle { font-size: 14px; font-weight: 500; color: var(--ui-muted); }
body.app-modern .app-process-list { font-size: 15px; line-height: 1.9; }
body.app-modern .app-page-header { margin: 32px 0 24px; }
body.app-modern .app-page-header h1 { font-size: clamp(22px, 3vw, 30px); color: var(--ui-text); letter-spacing: -0.02em; }
body.app-modern .app-page-header__sub { font-size: 15px; color: var(--ui-muted); }

/* ---------- Buttons ---------- */
body.app-modern .app-btn,
body.app-modern .app-main .btn {
  border-radius: 12px;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-shadow: none;
  background-image: none;
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
body.app-modern .app-main .btn:not(.btn-xs):not(.btn-sm) { min-height: 44px; padding: 10px 20px; }
body.app-modern .app-main .btn-primary { background: var(--ui-primary); border-color: var(--ui-primary); }
body.app-modern .app-main .btn-primary:hover { background: var(--ui-primary-600); border-color: var(--ui-primary-600); }
body.app-modern .app-btn:hover,
body.app-modern .app-main .btn:hover { transform: translateY(-1px); }

/* ---------- Forms ---------- */
body.app-modern .app-main label { font-size: 14px; font-weight: 600; color: var(--ui-text-2); }
body.app-modern .app-main .form-control,
body.app-modern .app-main input[type="text"],
body.app-modern .app-main input[type="email"],
body.app-modern .app-main input[type="password"],
body.app-modern .app-main input[type="number"],
body.app-modern .app-main input[type="tel"],
body.app-modern .app-main input[type="date"],
body.app-modern .app-main select,
body.app-modern .app-main textarea {
  border: 1px solid var(--ui-border-strong);
  border-radius: 10px;
  background-color: #fff;
  color: var(--ui-text);
  font-size: 15px;
  box-shadow: none;
  max-width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
body.app-modern .app-main .form-control { min-height: 46px; height: auto; padding: 10px 14px; }
body.app-modern .app-main .form-control:focus,
body.app-modern .app-main input:focus,
body.app-modern .app-main select:focus,
body.app-modern .app-main textarea:focus {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 4px rgba(40, 53, 147, 0.14);
  outline: none;
}

/* ---------- Tables ---------- */
body.app-modern .ui-table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 16px;
}
body.app-modern .app-main table.table > thead > tr > th {
  background: #f7f9fc;
  color: var(--ui-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ui-border);
}
body.app-modern .app-main table.table > tbody > tr > td { border-top: 1px solid #eef2f6; vertical-align: middle; }

/* ---------- Footer ---------- */
body.app-modern .app-footer { background: #fff; border-top: 1px solid var(--ui-border); }
body.app-modern .app-footer p { font-size: 13.5px; color: var(--ui-muted); }

/* ---------- Tablet / phone ---------- */
@media (max-width: 992px) {
  body.app-modern .app-header-inner { padding: 8px 16px; }
  body.app-modern .app-nav-wrap { background: #fff; border-top: 1px solid var(--ui-border); box-shadow: var(--ui-shadow-lg); }
  body.app-modern .app-nav > li > a { font-size: 15.5px; padding: 12px 14px; }
  body.app-modern .app-nav > li.app-nav__cta > a { margin: 8px 0 4px; text-align: center; }
  body.app-modern .app-nav-wrap .app-nav { width: 100%; }
  body.app-modern .app-nav > li, body.app-modern .app-nav > li > a { display: block; width: 100%; }
}
@media (max-width: 768px) {
  body.app-modern .app-container,
  body.app-modern .app-main .app-container { padding: 0 16px !important; }
  body.app-modern .app-brand__sub { display: none; }
  body.app-modern .app-brand__full { display: none; }
  body.app-modern .app-brand__short { display: inline; }
  body.app-modern .app-brand__name { font-size: 15.5px; }
  body.app-modern .app-brand__logo { width: 38px; height: 38px; }
  body.app-modern .app-hero { width: calc(100% - 32px); margin: 16px auto 20px; padding: 36px 20px; border-radius: 20px; }
  body.app-modern .app-hero p { font-size: 14.5px; }
  body.app-modern .app-card { padding: 20px 18px; margin-bottom: 18px; }
  body.app-modern .app-feature-card { padding: 20px 18px; }
  body.app-modern .app-news-ticker__label { padding: 0 12px; font-size: 11px; }
  body.app-modern .app-news-ticker__item { font-size: 13px; }
  body.app-modern .app-main .form-control,
  body.app-modern .app-main input,
  body.app-modern .app-main select,
  body.app-modern .app-main textarea { font-size: 16px; } /* avoid iOS focus zoom */
  body.app-modern .app-main table td,
  body.app-modern .app-main table th { word-break: normal; }
}

/* Radio choice chips + inline search (admission status) */
body.app-modern .app-choice-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
body.app-modern .app-choice {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--ui-border-strong);
  border-radius: 12px;
  background: #fff;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ui-text-2);
  cursor: pointer;
  margin: 0;
}
body.app-modern .app-choice:has(input:checked) { border-color: var(--ui-primary); background: var(--ui-primary-50); color: var(--ui-primary); }
body.app-modern .app-choice input { margin: 0; accent-color: var(--ui-primary); }
body.app-modern .app-inline-search { display: flex; gap: 10px; }
body.app-modern .app-inline-search .app-input { flex: 1 1 auto; min-width: 0; }