/* ===== CSS Variables & Reset ===== */
:root {
  --navy: #0C243C;
  --navy-light: #1a3a5c;
  --navy-dark: #081a2c;
  --gold: #55C2C3;
  --gold-light: #7ad4d5;
  --gold-dark: #3da8a9;
  --white: #ffffff;
  --gray-50: #f8f9fa;
  --gray-100: #f0f1f3;
  --gray-200: #e2e4e8;
  --gray-300: #C9D1D5;
  --gray-400: #7E8C9C;
  --gray-500: #6c727d;
  --gray-600: #4a4f58;
  --gray-700: #353940;
  --green: #28a745;
  --green-light: #e6f4ea;
  --red: #dc3545;
  --red-light: #fce8ea;
  --orange: #fd7e14;
  --orange-light: #fff3e0;
  --blue-light: #e6f7f7;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --transition: 0.2s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 15px;
  scroll-behavior: smooth;
}

body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Oxygen, Ubuntu, sans-serif;
  color: var(--gray-700);
  background: var(--gray-50);
  line-height: 1.6;
  min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  line-height: 1.3;
}

a { color: var(--navy); text-decoration: none; }

img { max-width: 100%; }

/* ===== Utility ===== */
.hidden { display: none !important; pointer-events: none !important; }
.text-center { text-align: center; }
.text-gold { color: var(--gold); }
.text-navy { color: var(--navy); }
.text-green { color: var(--green); }
.text-red { color: var(--red); }
.text-orange { color: var(--orange); }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.4rem;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  text-align: center;
  justify-content: center;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--navy);
  color: var(--white);
}
.btn-primary:hover { background: var(--navy-light); }

.btn-gold {
  background: var(--gold);
  color: var(--navy-dark);
}
.btn-gold:hover { background: var(--gold-light); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--navy);
}
.btn-outline:hover { background: var(--navy); color: var(--white); }

.btn-success {
  background: var(--green);
  color: var(--white);
}
.btn-success:hover { background: #22943d; }

.btn-danger {
  background: var(--red);
  color: var(--white);
}
.btn-danger:hover { background: #c82333; }

.btn-sm {
  padding: 0.35rem 0.9rem;
  font-size: 0.85rem;
}

.btn-lg {
  padding: 0.8rem 2rem;
  font-size: 1.05rem;
}

.btn-block { width: 100%; }

.btn-icon {
  width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: 1rem;
}

.form-group label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--navy);
  font-size: 0.9rem;
}

.form-control {
  width: 100%;
  padding: 0.55rem 0.8rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.93rem;
  font-family: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
  background: var(--white);
  color: var(--gray-700);
}
.form-control:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(197, 164, 78, 0.15);
}
.form-control.is-invalid {
  border-color: var(--red);
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c727d' d='M6 8.825L0.575 3.4l1.05-1.05L6 6.725l4.375-4.375 1.05 1.05z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
  padding-right: 2.2rem;
}

textarea.form-control {
  resize: vertical;
  min-height: 80px;
}

.form-hint {
  font-size: 0.82rem;
  color: var(--gray-500);
  margin-top: 0.2rem;
}

.form-error {
  font-size: 0.82rem;
  color: var(--red);
  margin-top: 0.2rem;
}

.form-row {
  display: grid;
  gap: 1rem;
}
.form-row-2 { grid-template-columns: 1fr 1fr; }
.form-row-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ===== Card ===== */
.card {
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--gray-200);
  overflow: hidden;
}
.card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gray-200);
  background: var(--gray-50);
}
.card-header h3 {
  font-size: 1.05rem;
}
.card-body {
  padding: 1.5rem;
}

/* ===== Status Badge ===== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.75rem;
  border-radius: 50px;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.badge-pending {
  background: var(--orange-light);
  color: var(--orange);
}
.badge-evaluated {
  background: var(--green-light);
  color: var(--green);
}
.badge-not-submitted {
  background: var(--gray-100);
  color: var(--gray-500);
}

/* ===== Navbar ===== */
.navbar {
  background: var(--navy);
  color: var(--white);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--white);
}
.navbar-brand .brand-accent {
  color: var(--gold);
}
.navbar-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.navbar-user {
  font-size: 0.9rem;
  color: var(--gray-300);
}
.navbar .btn-logout {
  background: rgba(255,255,255,0.1);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 0.35rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  cursor: pointer;
  transition: all var(--transition);
}
.navbar .btn-logout:hover {
  background: rgba(255,255,255,0.2);
}

/* ===== Landing Page ===== */
.landing-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-hero {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 50%, var(--navy-light) 100%);
  position: relative;
  overflow: hidden;
  padding: 2rem;
}
.landing-hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -25%;
  width: 720px;
  height: 720px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(85,194,195,0.13) 0%, rgba(85,194,195,0.04) 35%, transparent 65%);
  pointer-events: none;
  animation: heroGlowDrift1 24s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
.landing-hero::after {
  content: '';
  position: absolute;
  bottom: -35%;
  left: -15%;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(122,212,213,0.10) 0%, rgba(122,212,213,0.03) 40%, transparent 70%);
  pointer-events: none;
  animation: heroGlowDrift2 30s ease-in-out infinite alternate;
  will-change: transform, opacity;
}
@keyframes heroGlowDrift1 {
  0%   { transform: translate(0, 0) scale(1);       opacity: 0.85; }
  100% { transform: translate(40px, 30px) scale(1.08); opacity: 1; }
}
@keyframes heroGlowDrift2 {
  0%   { transform: translate(0, 0) scale(1);          opacity: 0.9; }
  100% { transform: translate(-32px, -24px) scale(1.06); opacity: 1; }
}
/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .landing-hero::before, .landing-hero::after { animation: none; }
}

.landing-content {
  text-align: center;
  position: relative;
  z-index: 1;
  max-width: 600px;
}

.landing-crest {
  width: 90px;
  height: 90px;
  background: rgba(197,164,78,0.15);
  border: 2px solid var(--gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.2rem;
}

.landing-title {
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}
.landing-subtitle {
  color: var(--gold);
  font-size: 1.15rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.landing-desc {
  color: var(--gray-300);
  font-size: 0.95rem;
  margin-bottom: 2rem;
}

.landing-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}
.landing-btn {
  padding: 0.9rem 2rem;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all var(--transition);
  min-width: 200px;
  text-align: center;
}
.landing-btn-student {
  background: var(--gold);
  color: var(--navy-dark);
}
.landing-btn-student:hover {
  background: var(--gold-light);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(197,164,78,0.3);
}
.landing-btn-evaluator {
  background: transparent;
  color: var(--white);
  border: 2px solid rgba(255,255,255,0.3);
}
.landing-btn-evaluator:hover {
  border-color: var(--white);
  background: rgba(255,255,255,0.1);
  transform: translateY(-2px);
}

.landing-footer {
  text-align: center;
  padding: 1rem;
  background: var(--navy-dark);
  color: var(--gray-400);
  font-size: 0.8rem;
}

/* ===== Auth Modal ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 1rem;
  /* backdrop-filter removed: on iOS Safari it leaves a GPU compositor layer
     alive that captures touches even when this element is display:none via
     the .hidden class, blocking taps on the page underneath. */
}
.modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modalIn 0.25s ease;
}
@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.modal-header {
  padding: 1.5rem 1.5rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-header h2 {
  font-size: 1.3rem;
}
.modal-close {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--gray-100);
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-500);
  transition: all var(--transition);
}
.modal-close:hover {
  background: var(--gray-200);
  color: var(--gray-700);
}
.modal-body {
  padding: 1.5rem;
}

.auth-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid var(--gray-200);
}
.auth-tab {
  flex: 1;
  padding: 0.7rem;
  text-align: center;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--gray-400);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: all var(--transition);
}
.auth-tab.active {
  color: var(--navy);
  border-bottom-color: var(--gold);
}
.auth-tab:hover:not(.active) {
  color: var(--gray-600);
}

.auth-message {
  padding: 0.7rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  margin-bottom: 1rem;
}
.auth-message.error {
  background: var(--red-light);
  color: var(--red);
}
.auth-message.success {
  background: var(--green-light);
  color: var(--green);
}

/* ===== Page Container ===== */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.page-header {
  margin-bottom: 2rem;
}
.page-header h1 {
  font-size: 1.6rem;
  margin-bottom: 0.3rem;
}
.page-header p {
  color: var(--gray-500);
  font-size: 0.95rem;
}

/* ===== Student Dashboard ===== */
.status-card {
  padding: 2rem;
  border-radius: var(--radius-md);
  text-align: center;
  margin-bottom: 2rem;
}
.status-card.not-submitted {
  background: linear-gradient(135deg, var(--gray-50), var(--gray-100));
  border: 2px dashed var(--gray-300);
}
.status-card.pending {
  background: linear-gradient(135deg, #fff8e1, #fff3cd);
  border: 2px solid var(--gold-light);
}
.status-card.evaluated {
  background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
  border: 2px solid var(--green);
}
.status-icon {
  font-size: 3rem;
  margin-bottom: 0.75rem;
}
.status-card h2 {
  font-size: 1.3rem;
  margin-bottom: 0.3rem;
}
.status-card p {
  color: var(--gray-500);
  font-size: 0.95rem;
}

/* ===== Application Form ===== */
.section-block {
  margin-bottom: 2rem;
}
.section-title {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 1.2rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 0.95rem;
  font-weight: 600;
}
.section-title .section-num {
  background: var(--gold);
  color: var(--navy-dark);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  flex-shrink: 0;
}
.section-body {
  border: 1px solid var(--gray-200);
  border-top: none;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  padding: 1.2rem;
  background: var(--white);
}

/* ===== Data Tables ===== */
.table-wrapper {
  overflow-x: auto;
  margin: 0.5rem 0;
  border-radius: var(--radius-sm);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.data-table th {
  background: var(--navy);
  color: var(--white);
  padding: 0.6rem 0.7rem;
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  font-size: 0.82rem;
}
.data-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}
.data-table tbody tr:hover {
  background: var(--gray-50);
}
.data-table .form-control {
  padding: 0.35rem 0.5rem;
  font-size: 0.85rem;
  min-width: 100px;
}
.data-table select.form-control {
  min-width: 140px;
}
.data-table .row-actions {
  text-align: center;
  white-space: nowrap;
}

.add-row-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 1rem;
  background: var(--blue-light);
  color: var(--navy);
  border: 1px dashed var(--navy);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  margin-top: 0.7rem;
}
.add-row-btn:hover {
  background: var(--navy);
  color: var(--white);
  border-style: solid;
}

.remove-row-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: none;
  background: var(--red-light);
  color: var(--red);
  cursor: pointer;
  font-size: 1rem;
  transition: all var(--transition);
}
.remove-row-btn:hover {
  background: var(--red);
  color: var(--white);
}

/* ===== Evaluator Table ===== */
.eval-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.eval-table th {
  background: var(--navy);
  color: var(--white);
  padding: 0.7rem 1rem;
  text-align: left;
  font-weight: 600;
}
.eval-table td {
  padding: 0.65rem 1rem;
  border-bottom: 1px solid var(--gray-200);
}
.eval-table tbody tr:hover {
  background: var(--gray-50);
}
.eval-table .btn {
  font-size: 0.82rem;
}

/* ===== Evaluation View ===== */
.eval-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.5rem;
}
.eval-info-item {
  padding: 0.6rem 0.8rem;
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}
.eval-info-item .label {
  font-size: 0.78rem;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.eval-info-item .value {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
}

.eval-section {
  margin-bottom: 1.5rem;
}
.eval-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.eval-section-header .subtotal {
  background: var(--gold);
  color: var(--navy-dark);
  padding: 0.2rem 0.8rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
}

.eval-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  border: 1px solid var(--gray-200);
  border-top: none;
}
.eval-data-table th {
  background: var(--gray-100);
  padding: 0.5rem 0.7rem;
  text-align: left;
  font-weight: 600;
  color: var(--navy);
  font-size: 0.82rem;
  border-bottom: 1px solid var(--gray-200);
}
.eval-data-table td {
  padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--gray-100);
}
.eval-data-table tbody tr:hover {
  background: var(--gray-50);
}

.points-cell {
  font-weight: 700;
  color: var(--navy);
  text-align: center;
}
.points-input {
  width: 70px;
  text-align: center;
  font-weight: 700;
  padding: 0.3rem;
  border: 1.5px solid var(--gray-300);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
}
.points-input:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(197,164,78,0.2);
}

.grand-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.5rem;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  color: var(--white);
  border-radius: var(--radius-md);
  margin: 1.5rem 0;
}
.grand-total-bar h3 {
  color: var(--white);
  font-size: 1.1rem;
}
.grand-total-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--gold);
}

/* ===== Sworn Declaration ===== */
.declaration-box {
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
}
.declaration-box p {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  line-height: 1.7;
  text-align: justify;
}
.declaration-check {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.declaration-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--navy);
}
.declaration-check label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--navy);
}

/* ===== Print ===== */
.print-section {
  margin: 1.5rem 0;
}
.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 3rem;
  padding-top: 1rem;
}
.signature-block {
  text-align: center;
}
.signature-line {
  border-top: 1px solid var(--gray-700);
  margin-top: 3rem;
  padding-top: 0.3rem;
  font-weight: 600;
  font-size: 0.85rem;
}
.signature-role {
  font-size: 0.8rem;
  color: var(--gray-500);
}

/* ===== Alerts / Toast ===== */
.toast-container {
  position: fixed;
  top: 70px;
  right: 1rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.toast {
  padding: 0.8rem 1.2rem;
  pointer-events: auto;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  font-weight: 500;
  box-shadow: var(--shadow-md);
  animation: toastIn 0.3s ease, toastOut 0.3s ease 2.7s forwards;
  max-width: 400px;
}
.toast.success {
  background: var(--green);
  color: var(--white);
}
.toast.error {
  background: var(--red);
  color: var(--white);
}
.toast.info {
  background: var(--navy);
  color: var(--white);
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(50px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; }
  to { opacity: 0; transform: translateX(50px); }
}

/* ===== Deadline Card ===== */
.deadline-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.06);
  overflow: hidden;
  transition: all 0.3s ease;
}
.deadline-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0891b2, #06b6d4);
}
.deadline-card.is-amber::before { background: linear-gradient(90deg, #d97706, #f59e0b); }
.deadline-card.is-red::before { background: linear-gradient(90deg, #dc2626, #ef4444); }
.deadline-card.is-closed { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-color: #fecaca; }
.deadline-card.is-closed::before { background: linear-gradient(90deg, #991b1b, #dc2626); height: 4px; }

.deadline-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #64748b;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.deadline-card.is-amber .deadline-eyebrow { color: #92400e; }
.deadline-card.is-red .deadline-eyebrow { color: #991b1b; }
.deadline-card.is-closed .deadline-eyebrow { color: #991b1b; }

.deadline-headline {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1.4rem;
  letter-spacing: -0.01em;
}
.deadline-card.is-closed .deadline-headline { color: #7f1d1d; margin-bottom: 0.4rem; }

.deadline-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.2rem;
}
.deadline-unit {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 12px;
  padding: 1rem 0.5rem;
  text-align: center;
  backdrop-filter: blur(8px);
}
.deadline-card.is-amber .deadline-unit { background: rgba(255,255,255,0.85); border-color: rgba(217, 119, 6, 0.15); }
.deadline-card.is-red .deadline-unit { background: rgba(255,255,255,0.85); border-color: rgba(220, 38, 38, 0.18); }

.deadline-num {
  display: block;
  font-size: 2.4rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #0f172a;
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}
.deadline-card.is-amber .deadline-num { color: #b45309; }
.deadline-card.is-red .deadline-num { color: #b91c1c; }

.deadline-lbl {
  display: block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #94a3b8;
  text-transform: uppercase;
  margin-top: 0.5rem;
}

.deadline-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(15, 23, 42, 0.06);
  font-size: 0.78rem;
  color: #64748b;
}
.deadline-sync {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.deadline-sync-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
  animation: deadlinePulse 2s ease-in-out infinite;
}
.deadline-sync-dot.is-local { background: #94a3b8; box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.18); animation: none; }
@keyframes deadlinePulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.05); }
}

.deadline-closed-msg {
  font-size: 1rem;
  color: #7f1d1d;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 600px) {
  .deadline-card { padding: 1.25rem 1.25rem; }
  .deadline-headline { font-size: 1.1rem; }
  .deadline-num { font-size: 1.8rem; }
  .deadline-countdown { gap: 0.5rem; }
  .deadline-unit { padding: 0.75rem 0.3rem; }
}

/* ===== Evidence Submission Card ===== */
.evidence-card {
  position: relative;
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 4px 12px rgba(15, 23, 42, 0.04);
  overflow: hidden;
}
.evidence-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0891b2, #06b6d4);
}
.evidence-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #0e7490;
  text-transform: uppercase;
  margin-bottom: 1.1rem;
}
.evidence-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.evidence-steps li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.97rem;
  color: #1e293b;
  line-height: 1.55;
  flex-wrap: wrap;
}
.evidence-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #0891b2;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(8, 145, 178, 0.25);
}
.evidence-chip {
  display: inline-block;
  padding: 2px 9px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #0f172a;
  white-space: nowrap;
}

.evidence-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e2e8f0 20%, #e2e8f0 80%, transparent);
  margin: 1.4rem 0 1.2rem;
}
.evidence-eyebrow-amber {
  color: #92400e;
}
.evidence-types {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.evidence-types li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.55;
}
.evidence-bullet {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f59e0b, #b45309);
  margin-top: 8px;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.evidence-note {
  margin-top: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  background: #f0fdfa;
  border: 1px solid #ccfbf1;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  font-size: 0.9rem;
  color: #134e4a;
  line-height: 1.55;
}
.evidence-note-label {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(135deg, #14b8a6, #0d9488);
  padding: 3px 9px;
  border-radius: 999px;
  margin-top: 1px;
  box-shadow: 0 1px 3px rgba(13, 148, 136, 0.3);
}

@media (max-width: 600px) {
  .evidence-card { padding: 1.1rem 1.2rem; }
  .evidence-steps li,
  .evidence-types li { font-size: 0.92rem; }
}

/* ===== Rejection Card (student dashboard) ===== */
.rejection-card {
  position: relative;
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border: 1px solid #fecaca;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(220, 38, 38, 0.08);
  overflow: hidden;
}
.rejection-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #991b1b, #dc2626);
}
.rejection-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #991b1b;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.rejection-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: #7f1d1d;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.rejection-reason-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #b91c1c;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.rejection-reason-body {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(220, 38, 38, 0.18);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  color: #1e293b;
  font-size: 0.97rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.rejection-foot {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: #991b1b;
  opacity: 0.8;
}

/* ===== Applications Search Toolbar ===== */
.apps-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.apps-search {
  position: relative;
  flex: 1;
  min-width: 260px;
}
.apps-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #94a3b8;
  pointer-events: none;
}
.apps-search input[type="search"] {
  width: 100%;
  padding: 0.6rem 2.4rem 0.6rem 2.4rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  font-size: 0.93rem;
  color: #0f172a;
  transition: all 0.2s ease;
  -webkit-appearance: none;
}
.apps-search input[type="search"]:focus {
  outline: none;
  border-color: #06b6d4;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.15);
}
.apps-search input[type="search"]::-webkit-search-cancel-button { display: none; }
.apps-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border: none;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.apps-search-clear:hover { background: #e2e8f0; color: #0f172a; }
.apps-search.has-value .apps-search-clear { display: inline-flex; }
.apps-status-filter {
  width: auto;
  min-width: 150px;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  border-radius: 10px;
}
.apps-search-count {
  font-size: 0.85rem;
  color: #64748b;
  font-weight: 500;
  margin-left: auto;
}

/* ===== Icon View Button (Summary Results) ===== */
.btn-view-app {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  background: #f8fafc;
  color: #0e7490;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
}
.btn-view-app:hover {
  background: #ecfeff;
  border-color: #06b6d4;
  color: #0891b2;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(8, 145, 178, 0.15);
}
.btn-view-app:active { transform: translateY(0); }
.btn-view-app:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.25);
}

/* ===== Return Card (student dashboard) ===== */
.return-card {
  position: relative;
  background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
  border: 1px solid #fde68a;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(217, 119, 6, 0.08);
  overflow: hidden;
}
.return-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #b45309, #f59e0b);
}
.return-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #92400e;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.return-headline {
  font-size: 1.25rem;
  font-weight: 700;
  color: #78350f;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}
.return-reason-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #b45309;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}
.return-reason-body {
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(217, 119, 6, 0.2);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  color: #1e293b;
  font-size: 0.97rem;
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
.return-foot {
  margin-top: 0.85rem;
  font-size: 0.78rem;
  color: #92400e;
  opacity: 0.85;
}

/* ===== Warning Button ===== */
.btn-warning {
  background: #f59e0b;
  color: #fff;
  border: 1px solid #d97706;
}
.btn-warning:hover {
  background: #d97706;
  border-color: #b45309;
  color: #fff;
}

/* ===== Submission Success Card (Teal theme, no icon) ===== */
.success-card {
  position: relative;
  max-width: 660px;
  margin: 2rem auto;
  background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
  border: 1px solid #ccfbf1;
  border-radius: 24px;
  padding: 3.25rem 2.5rem 2.5rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04), 0 24px 48px -16px rgba(13, 148, 136, 0.22);
  overflow: hidden;
  animation: successCardIn 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.success-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, #0f766e 0%, #14b8a6 50%, #5eead4 100%);
}
@keyframes successCardIn {
  from { opacity: 0; transform: translateY(20px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Soft radial teal halo behind the headline area — decorative, replaces the check icon */
.success-halo {
  position: absolute;
  top: -120px;
  left: 50%;
  transform: translateX(-50%);
  width: 520px;
  height: 520px;
  background: radial-gradient(circle at center, rgba(20, 184, 166, 0.18) 0%, rgba(20, 184, 166, 0.06) 35%, transparent 65%);
  pointer-events: none;
  z-index: 0;
  animation: successHaloDrift 8s ease-in-out infinite alternate;
}
@keyframes successHaloDrift {
  from { transform: translateX(-50%) scale(1); opacity: 0.95; }
  to   { transform: translateX(-50%) scale(1.08); opacity: 1; }
}

.success-card > *:not(.success-halo) { position: relative; z-index: 1; }

.success-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #0f766e;
  text-transform: uppercase;
  margin-bottom: 1rem;
  padding: 0.4rem 0.9rem 0.4rem 0.75rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid #ccfbf1;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.success-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #14b8a6;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2);
  animation: successDotPulse 1.8s ease-in-out infinite;
}
@keyframes successDotPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(20, 184, 166, 0.2); }
  50%      { box-shadow: 0 0 0 8px rgba(20, 184, 166, 0.05); }
}

.success-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.7rem;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.success-title span { color: #0f766e; }

.success-sub {
  font-size: 1.02rem;
  color: #475569;
  line-height: 1.65;
  margin: 0 auto 2.25rem;
  max-width: 500px;
}
.success-category-pill {
  display: inline-block;
  padding: 3px 14px;
  background: #ccfbf1;
  border: 1px solid #5eead4;
  border-radius: 999px;
  font-weight: 700;
  color: #0f766e;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.success-meta {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid #ccfbf1;
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin: 0 auto 2rem;
  max-width: 500px;
  backdrop-filter: blur(8px);
}
.success-meta-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.success-meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #14b8a6;
  text-transform: uppercase;
}
.success-meta-value {
  font-size: 0.97rem;
  font-weight: 700;
  color: #0f172a;
}
.success-ref {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size: 0.88rem;
  color: #0f766e;
  letter-spacing: 0.04em;
}
.success-meta-divider {
  width: 1px;
  background: linear-gradient(180deg, transparent, #99f6e4, transparent);
}

.success-next {
  background: #fff;
  border: 1px solid #ccfbf1;
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
  text-align: left;
  margin-bottom: 1.85rem;
  box-shadow: 0 1px 2px rgba(13, 148, 136, 0.04);
}
.success-next-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: #0f766e;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.success-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.success-steps li {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  font-size: 0.95rem;
  color: #1e293b;
  line-height: 1.55;
}
.success-step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 6px rgba(13, 148, 136, 0.3);
}

.success-actions {
  display: flex;
  justify-content: center;
}

/* Teal CTA button */
.btn-success-teal {
  background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
  color: #fff;
  border: 1px solid #0f766e;
  padding: 0.85rem 2.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 12px;
  box-shadow: 0 4px 14px -2px rgba(13, 148, 136, 0.4);
  transition: all 0.2s ease;
}
.btn-success-teal:hover {
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -2px rgba(13, 148, 136, 0.5);
  color: #fff;
}
.btn-success-teal:active {
  transform: translateY(0);
  box-shadow: 0 3px 10px -2px rgba(13, 148, 136, 0.4);
}

@media (max-width: 600px) {
  .success-card { padding: 2.25rem 1.25rem 1.75rem; margin: 1rem auto; border-radius: 18px; }
  .success-title { font-size: 1.6rem; }
  .success-sub { font-size: 0.95rem; }
  .success-meta { flex-direction: column; gap: 0.85rem; }
  .success-meta-divider { display: none; }
  .success-halo { width: 380px; height: 380px; top: -90px; }
}

/* ===== Evidence Strip (evaluator view) ===== */
.evidence-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.evidence-strip-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #475569;
}
.btn-view-evidence {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid #ccfbf1;
  border-radius: 8px;
  background: #f0fdfa;
  color: #0f766e;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.btn-view-evidence:hover {
  background: #ccfbf1;
  border-color: #5eead4;
  color: #0f766e;
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(15, 118, 110, 0.15);
}
.btn-view-evidence:active { transform: translateY(0); }
.btn-view-evidence svg { flex-shrink: 0; }

/* ===== Category Requirements Modal ===== */
.cat-req-modal {
  max-width: 680px;
  border-radius: 18px;
  overflow: hidden;
}
.cat-req-body {
  padding: 1.25rem 1.75rem 1.75rem;
  max-height: 75vh;
  overflow-y: auto;
}
.cat-req-intro {
  font-size: 0.95rem;
  color: var(--gray-700);
  line-height: 1.55;
  margin: 0 0 1.4rem;
}
.cat-req-block {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
}
.cat-req-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #0f766e, #14b8a6);
}
.cat-req-block:has(.cat-req-eyebrow-amber)::before {
  background: linear-gradient(90deg, #b45309, #f59e0b);
}
.cat-req-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #0f766e;
  margin: 0.15rem 0 0.85rem;
}
.cat-req-eyebrow-amber { color: #92400e; }
.cat-req-sub {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin: -0.5rem 0 0.85rem;
}
.cat-req-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cat-req-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.92rem;
  color: #1e293b;
  line-height: 1.55;
}
.cat-req-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  box-shadow: 0 2px 4px rgba(13, 148, 136, 0.25);
}
.cat-req-num-amber {
  background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
  box-shadow: 0 2px 4px rgba(180, 83, 9, 0.25);
}

@media (max-width: 600px) {
  .cat-req-body { padding: 1rem 1.1rem 1.25rem; }
  .cat-req-block { padding: 1rem 1.1rem; }
}

/* ===== Print Styles ===== */
@media print {
  body { background: white; font-size: 10pt; }
  .navbar, .btn, .no-print, .toast-container, .add-row-btn { display: none !important; }
  .page-container { max-width: 100%; padding: 0; margin: 0; }
  .card { box-shadow: none; border: 1px solid #ddd; break-inside: avoid; }
  .eval-section { break-inside: avoid; }
  .grand-total-bar { background: #1a2744 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .eval-section-header { background: #1a2744 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .signature-grid { break-inside: avoid; }

  /* ===== Student Application Form — formal A4 portrait print styling ===== */
  /* Scoped to #application-form so it does NOT affect the evaluator's
     print sheet (which has its own #eval-detail-view rules above). */
  @page { size: A4 portrait; margin: 0.8cm; }

  /* Document signature block: hidden on screen, visible only in print. */
  #application-form #signature-block.hidden,
  #application-form #signature-block { display: block !important; }

  /* Hard-cap the form to the printable width so tables can't overflow */
  #application-form {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }
  #application-form .table-wrapper { overflow: visible !important; max-width: 100% !important; }
  /* Fixed layout so every criteria table has identical column widths —
     keeps Position Held in Organization aligned with Position Held in
     Committee (and every other section that shares the same column count). */
  #application-form table {
    table-layout: fixed !important;
    width: 100% !important;
    word-wrap: break-word;
  }
  #application-form table th,
  #application-form table td {
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  /* Notarization section is for screen only — not part of the printed form. */
  #application-form #notarization-section { display: none !important; }

  /* "+ Add Row" buttons under each criteria table — not part of the printed form. */
  #application-form .add-row-btn { display: none !important; }

  /* Letter of Intent — not part of the printed form. */
  #application-form #app-letter-of-intent-row { display: none !important; }

  /* Standard formal document body */
  #application-form, #application-form * {
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: 'Cambria', 'Georgia', 'Times New Roman', serif !important;
    font-size: 10pt;
    line-height: 1.4;
  }

  /* Avatar — framed; hide the descriptive hint text below it.
     In print (portrait, narrow margin), sized as a passport-style photo
     at the top-left of the Nominee Information section so the form
     fields flow to its right without crowding the narrower page. */
  #application-form #app-avatar-wrap img,
  #application-form #app-avatar-wrap > div:first-child {
    width: 120px !important;
    height: 120px !important;
    border: 1px solid #000 !important;
    box-shadow: none !important;
    font-size: 44px !important;
  }
  #application-form #app-avatar-wrap > div:last-child { display: none !important; }

  /* Section I (Nominee Information) — reserve a column on the LEFT for the avatar.
     Uses the > direct-child combinator so this padding applies ONLY to the
     nominee-info block (a direct child of #application-form) and NOT to the
     first criteria section inside #criteria-sections, which is also a
     :first-child but of a different parent. */
  #application-form > .section-block:first-child .section-body {
    position: relative !important;
    padding-left: 138px !important;
    min-height: 130px;
  }
  /* Avatar lives only inside the Nominee Information section. Scoping with
     > .section-block:first-child ensures the absolute positioning is
     anchored to that section's section-body (which we set position:relative
     above), and not accidentally to any other section. */
  #application-form > .section-block:first-child #app-avatar-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
  }

  /* Section blocks rendered as document subsections, not cards.
     No break-inside constraint — sections flow naturally and Section II
     follows directly after Section I without a forced page break. */
  #application-form .section-block {
    border: none !important;
    border-radius: 0 !important;
    margin: 0.4rem 0 0.3rem !important;
    padding: 0 !important;
    break-before: auto !important;
    break-inside: auto !important;
    page-break-before: auto !important;
    page-break-inside: auto !important;
  }
  #application-form .section-title {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    padding: 0 0 0.2rem 0 !important;
    margin: 0.7rem 0 0.4rem !important;
    font-weight: 700;
    font-size: 11.5pt !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  #application-form .section-num {
    display: inline-block;
    margin-right: 0.5rem;
    font-weight: 700;
    color: #000 !important;
    width: auto !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    line-height: 1 !important;
  }
  #application-form .section-body { padding: 0.3rem 0 0 0 !important; }

  /* Readonly form inputs read like document values — flat underlined text */
  #application-form .form-control {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    border-radius: 0 !important;
    padding: 0.12rem 0 !important;
    font-size: 10pt !important;
    height: auto !important;
  }
  #application-form textarea.form-control {
    border: 1px solid #000 !important;
    padding: 0.3rem 0.4rem !important;
    min-height: auto !important;
    resize: none !important;
    font-size: 10pt !important;
  }
  #application-form label {
    font-weight: 600 !important;
    font-size: 9pt !important;
    margin-bottom: 0.12rem !important;
  }
  #application-form .form-group { margin-bottom: 0.55rem !important; }
  #application-form .form-row { gap: 0.8rem !important; margin-bottom: 0.25rem !important; }

  /* Criteria entry tables: thin black borders, compact.
     Tables flow naturally across pages — no break-inside constraint. */
  #application-form table {
    border-collapse: collapse !important;
    width: 100% !important;
    margin: 0.25rem 0 0.6rem !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }
  #application-form table th,
  #application-form table td {
    border: 1px solid #000 !important;
    padding: 0.25rem 0.35rem !important;
    font-size: 9pt !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    vertical-align: top !important;
  }
  #application-form table th { font-weight: 700; background: #f0f0f0 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Pin the first column (Academic Year) and the last column (Points)
     to fixed widths so they line up identically across every criteria
     table (Position Held in Organization, Position Held in Committee,
     Editorial Staff, Awards, Seminars, Performances, Sikap, etc.).
     The middle columns share the remaining space evenly within each
     table's column count. */
  #application-form table th:first-child,
  #application-form table td:first-child {
    width: 12% !important;
    text-align: center;
  }
  #application-form table th:last-child,
  #application-form table td:last-child {
    width: 14% !important;
  }

  /* Replace the final "Actions" header with "Points (to be filled by
     evaluator)" in the printed form, and blank out the row's delete-row
     button so the evaluator has empty space to write in. */
  #application-form table thead th:last-child {
    font-size: 0 !important;
    text-align: center !important;
    vertical-align: middle !important;
    min-width: 110px;
  }
  #application-form table thead th:last-child::before {
    content: "Points (to be filled by evaluator)";
    display: inline-block;
    font-size: 9pt !important;
    font-weight: 700;
    line-height: 1.25;
    white-space: normal;
  }
  #application-form table td.row-actions { min-width: 110px; }
  #application-form table td.row-actions .remove-row-btn,
  #application-form table td.row-actions button { display: none !important; }

  /* Eligibility requirements card inside Section II */
  #application-form #criteria-header > div[style*="background"] {
    border: 1px solid #000 !important;
    padding: 0.5rem 0.7rem !important;
    margin-bottom: 0.6rem !important;
  }

  /* Evidence card (rules + tip) */
  #application-form .evidence-card {
    border: 1px solid #000 !important;
    padding: 0.45rem 0.7rem !important;
  }

  /* Sworn declaration */
  #application-form .declaration-box {
    border: 1px solid #000 !important;
    padding: 0.5rem 0.7rem !important;
    break-inside: avoid;
  }
  #application-form .declaration-check input { transform: none !important; }

  /* Small/helper text — keep readable */
  #application-form small { font-size: 8.5pt !important; color: #000 !important; }

  /* Document signature block — keep together as one unit (no mid-block
     page break), but do not force a page break before it. If the
     preceding form content is compact enough, the signature block fits
     on the same page; otherwise the browser moves the whole block to
     the next page as a single, intact unit. */
  #application-form #signature-block {
    margin-top: 0.6rem;
    break-before: auto !important;
    page-break-before: auto !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  #application-form .signature-table { border: none !important; }
  #application-form .signature-table td { border: none !important; padding: 0 0.5rem !important; }
}

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .page-container { padding: 1.25rem; }
  /* Tables get a horizontal scroll affordance */
  .table-wrapper {
    -webkit-overflow-scrolling: touch;
    background-image:
      linear-gradient(to right, white, white),
      linear-gradient(to right, white, white),
      linear-gradient(to right, rgba(15, 23, 42, 0.12), transparent),
      linear-gradient(to left, rgba(15, 23, 42, 0.12), transparent);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-color: white;
    background-size: 20px 100%, 20px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }
}

@media (max-width: 768px) {

  /* Navbar: tighter, hide username if needed */
  .navbar { padding: 0 0.85rem; height: 56px; gap: 0.5rem; }
  .navbar-brand { font-size: 0.85rem; gap: 0.5rem; min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .navbar-brand img { height: 26px !important; width: 26px !important; flex-shrink: 0; }
  .navbar-actions { gap: 0.55rem; flex-shrink: 0; }
  .navbar .btn-logout { padding: 0.3rem 0.7rem; font-size: 0.8rem; }

  /* Page-level */
  .page-container { padding: 1rem; }
  .page-header h1 { font-size: 1.35rem; }
  .page-header p { font-size: 0.88rem; }

  /* Forms collapse */
  .form-row-2, .form-row-3 { grid-template-columns: 1fr; gap: 0.85rem; }
  .form-control { font-size: 0.95rem; padding: 0.6rem 0.75rem; }

  /* Landing-page mobile-responsive rules removed per user request. */

  /* Section blocks */
  .section-title { padding: 0.7rem 0.9rem; font-size: 0.88rem; gap: 0.55rem; }
  .section-title .section-num { width: 24px; height: 24px; font-size: 0.78rem; }
  .section-body { padding: 0.9rem; }

  /* Tables: keep them scrollable horizontally instead of cramming */
  .data-table, .eval-table, .eval-data-table { font-size: 0.82rem; }
  .data-table th, .data-table td,
  .eval-table th, .eval-table td,
  .eval-data-table th, .eval-data-table td { padding: 0.45rem 0.5rem; }
  .data-table .form-control { min-width: 90px; font-size: 0.8rem; padding: 0.3rem 0.45rem; }

  /* Evaluation view */
  .eval-info-grid { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .signature-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .grand-total-bar { flex-direction: column; gap: 0.4rem; text-align: center; padding: 0.85rem 1rem; }
  .grand-total-value { font-size: 1.6rem; }
  .eval-section-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
  }
  .eval-section-header .subtotal { font-size: 0.78rem; padding: 0.2rem 0.7rem; align-self: flex-start; }
  .evidence-strip { flex-direction: column; align-items: stretch; gap: 0.5rem; }

  /* Apps search toolbar stacks */
  .apps-toolbar { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .apps-search { min-width: 0; width: 100%; }
  .apps-status-filter { width: 100%; min-width: 0; }
  .apps-search-count { margin-left: 0; text-align: center; }

  /* Cards */
  .card-header { padding: 0.85rem 1rem; }
  .card-header h3 { font-size: 1rem; }
  .card-body { padding: 1rem; }
  .summary-card { padding: 1rem; }

  /* Modals: compact-but-readable on mobile, vertically centered */
  .modal-overlay { padding: 0.6rem; align-items: center; }
  .modal { max-width: 100% !important; max-height: calc(100vh - 1.2rem); border-radius: 14px; }
  .modal-header { padding: 0.8rem 0.95rem 0.3rem !important; }
  .modal-header h2 { font-size: 1.05rem !important; }
  .modal-header img { height: 24px !important; width: 24px !important; }
  .modal-body { padding: 0.7rem 0.95rem 0.95rem !important; }

  /* Login/register form spacing — tighter on mobile but tap targets stay safe */
  .modal-body .form-group { margin-bottom: 0.6rem; }
  .modal-body .form-group label { font-size: 0.78rem !important; margin-bottom: 0.25rem; }
  /* Inputs: keep ≥16px font so iOS Safari won't auto-zoom on focus */
  .modal-body .form-control { font-size: 16px !important; padding: 0.55rem 0.8rem !important; border-radius: 9px !important; }
  .modal-body form > button[type="submit"] { padding: 0.7rem !important; font-size: 0.95rem !important; }

  /* Auth tabs */
  .auth-tabs { margin-bottom: 0.8rem !important; }
  .auth-tab { padding: 0.5rem 0.7rem; font-size: 0.92rem; }
  .auth-message { padding: 0.5rem 0.7rem; font-size: 0.82rem; }

  /* Action button rows in tables — let them wrap */
  .data-table .row-actions,
  .eval-table td:last-child {
    white-space: normal !important;
  }
  .eval-table td .btn { margin-bottom: 4px; }

  /* Toast — anchor to bottom (top:auto stops stretching across the full screen) */
  .toast-container { top: auto; left: 0.5rem; right: 0.5rem; bottom: 0.5rem; }
  .toast { width: auto; max-width: none; }

  /* Confirmation/dashboard headers */
  .declaration-box { padding: 1rem; }
}

@media (max-width: 480px) {
  .navbar-user { display: none; }

  /* Landing-page extra-tight mobile rules removed per user request. */

  .eval-info-grid { grid-template-columns: 1fr; }

  /* Even tighter section title on tiny screens */
  .section-title { padding: 0.6rem 0.75rem; font-size: 0.83rem; }
  .section-body { padding: 0.75rem; }

  /* Buttons */
  .btn { padding: 0.55rem 0.95rem; font-size: 0.88rem; }
  .btn-lg { padding: 0.7rem 1.1rem; font-size: 0.95rem; }
  .btn-sm { padding: 0.32rem 0.6rem; font-size: 0.76rem; }

  /* Compact summary numbers */
  .summary-card { padding: 0.85rem; }

  /* Form actions side-by-side -> stack */
  .form-actions { flex-direction: column; gap: 0.6rem; align-items: stretch; }
  .form-actions .btn { width: 100%; }

  /* Page header */
  .page-header { margin-bottom: 1rem; }
  .page-header h1 { font-size: 1.2rem; }

  /* Remove hover transforms that feel jittery on touch */
  .btn-view-app:hover, .btn-view-evidence:hover, .btn-success-teal:hover { transform: none; }
}

/* Hover effects only on devices that actually have hover (skip touch) */
@media (hover: none) {
  .btn-view-app:hover, .btn-view-evidence:hover, .btn-success-teal:hover, .btn:hover { transform: none; }
  .data-table tbody tr:hover, .eval-table tbody tr:hover, .eval-data-table tbody tr:hover { background: transparent; }
}

/* Student-dashboard pill buttons (View Guidelines, Edit Profile) — modern hover/active */
@media (hover: hover) {
  #btn-view-guidelines:hover,
  #btn-edit-profile:hover {
    background: #55C2C3 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(85,194,195,0.35);
    transform: translateY(-1px);
  }
}
#btn-view-guidelines:active,
#btn-edit-profile:active { transform: translateY(0) scale(0.98); }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--gray-100); }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Back button */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--navy);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  margin-bottom: 1rem;
  padding: 0.3rem 0;
  border: none;
  background: none;
  transition: color var(--transition);
}
.back-link:hover { color: var(--gold-dark); }

/* Confirmation */
.confirmation-card {
  text-align: center;
  padding: 3rem 2rem;
}
.confirmation-icon {
  font-size: 4rem;
  margin-bottom: 1rem;
}