/* Internship Portal - shared styles (plain CSS; used alongside Tailwind CDN utility classes) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --brand: #0891b2;
  --brand-dark: #0e7490;
  --brand-soft: #ecfeff;
  --navy: #0b1b30;
  --navy-deep: #071426;
  --cyan: #06b6d4;
  --cyan-bright: #22d3ee;
  --surface: #ffffff;
  --surface-muted: #f4f8fb;
  --border: #dce7ef;
  --text: #102338;
  --muted: #62768a;
  --shadow-card: 0 12px 34px rgba(15, 45, 70, .07);
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--text);
}

html.dark {
  color-scheme: dark;
  --surface: #0c1d31;
  --surface-muted: #081729;
  --border: #1c354d;
  --text: #e7f1f7;
  --muted: #93a9ba;
  --shadow-card: 0 18px 44px rgba(0, 0, 0, .22);
}

/* ---------- Cards & buttons ---------- */
.card {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border);
  border-radius: 1.1rem;
  box-shadow: var(--shadow-card);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(15, 45, 70, 0.11);
}

.dark .card {
  background: rgba(12, 29, 49, 0.94);
  border-color: var(--border);
  box-shadow: var(--shadow-card);
}

.dark .card:hover {
  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

/* ---------- Spinner ---------- */
.spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(6, 182, 212, 0.2);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
  margin: 2rem auto;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Line clamp utilities ---------- */
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: .75rem;
  padding: .65rem 1.25rem;
  font-size: .875rem;
  font-weight: 600;
  transition: all .25s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.btn:active {
  transform: scale(0.97);
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary {
  background: linear-gradient(135deg, #0e7490, #06b6d4);
  color: #fff;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #155e75, #0891b2);
  box-shadow: 0 8px 20px rgba(8, 145, 178, 0.28);
}

.btn-success {
  background: linear-gradient(135deg, #059669, #34d399);
  color: #fff;
}

.btn-success:hover {
  background: linear-gradient(135deg, #047857, #059669);
  box-shadow: 0 6px 15px rgba(5, 150, 105, 0.4);
}

.btn-danger {
  background: linear-gradient(135deg, #e11d48, #fb7185);
  color: #fff;
}

.btn-danger:hover {
  background: linear-gradient(135deg, #be123c, #e11d48);
  box-shadow: 0 6px 15px rgba(225, 29, 72, 0.4);
}

.btn-outline {
  border: 1px solid #c7d7e3;
  color: #274258;
  background: transparent;
  box-shadow: none;
}

.dark .btn-outline {
  border-color: #35536b;
  color: #d6e7f1;
}

.btn-outline:hover {
  background: #ecfeff;
  border-color: var(--brand);
  color: var(--brand);
}

.dark .btn-outline:hover {
  background: #102b40;
  border-color: var(--cyan);
  color: var(--cyan-bright);
}

.btn-sm {
  padding: .4rem .85rem;
  font-size: .75rem;
  border-radius: .5rem;
}

.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .75rem;
  color: #64748b;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all .2s ease;
}

.icon-btn:hover {
  background: #f1f5f9;
  color: var(--brand);
  transform: scale(1.05);
}

.dark .icon-btn {
  color: #cbd5e1;
}

.dark .icon-btn:hover {
  background: #334155;
  color: #818cf8;
}

/* ---------- Forms ---------- */
.input {
  width: 100%;
  border-radius: .75rem;
  border: 1px solid #c9d9e4;
  background: #fff;
  padding: .65rem .85rem;
  font-size: .9rem;
  color: #102338;
  outline: none;
  transition: all .25s ease;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
}

.input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .14);
  background: #fff;
}

.dark .input {
  background: #091a2b;
  border-color: #29465e;
  color: #e7f1f7;
}

.dark .input:focus {
  background: #0b2034;
  box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.15);
  border-color: var(--cyan);
}

.label {
  display: block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: .4rem;
}

.dark .label {
  color: #94a3b8;
}

/* ---------- Table ---------- */
.table {
  width: 100%;
  font-size: .875rem;
  border-collapse: collapse;
}

.table th {
  text-align: left;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #587187;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.dark .table th {
  color: #a3bacb;
  border-color: var(--border);
}

.table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid #eaf0f4;
  vertical-align: middle;
  color: #1e293b;
}

.dark .table td {
  border-color: rgba(48, 76, 99, .6);
  color: #e2e8f0;
}

.table tbody tr:hover td {
  background: #f0fbfd;
}

.dark .table tbody tr:hover td {
  background: rgba(8, 145, 178, .08);
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: .15rem .65rem;
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  text-transform: capitalize;
}

.badge-green {
  background: #d1fae5;
  color: #047857;
}

.badge-amber {
  background: #fef3c7;
  color: #b45309;
}

.badge-red {
  background: #ffe4e6;
  color: #be123c;
}

.badge-blue {
  background: #e0f2fe;
  color: #0369a1;
}

.badge-gray,
.badge-slate {
  background: #f1f5f9;
  color: #475569;
}

.badge-indigo {
  background: #cffafe;
  color: #0e7490;
}

.badge-purple {
  background: #f3e8ff;
  color: #7e22ce;
}

.badge-cyan {
  background: #cffafe;
  color: #0e7490;
}

.badge-emerald {
  background: #d1fae5;
  color: #047857;
}

.badge-rose {
  background: #ffe4e6;
  color: #be123c;
}

.dark .badge-green {
  background: rgba(16, 185, 129, .18);
  color: #6ee7b7;
}

.dark .badge-amber {
  background: rgba(245, 158, 11, .18);
  color: #fcd34d;
}

.dark .badge-red {
  background: rgba(244, 63, 94, .18);
  color: #fda4af;
}

.dark .badge-blue {
  background: rgba(14, 165, 233, .18);
  color: #7dd3fc;
}

.dark .badge-gray,
.dark .badge-slate {
  background: rgba(100, 116, 139, .3);
  color: #cbd5e1;
}

.dark .badge-indigo {
  background: rgba(6, 182, 212, .16);
  color: #67e8f9;
}

.dark .badge-purple {
  background: rgba(168, 85, 247, .2);
  color: #d8b4fe;
}

.dark .badge-cyan {
  background: rgba(6, 182, 212, .2);
  color: #67e8f9;
}

.dark .badge-emerald {
  background: rgba(16, 185, 129, .2);
  color: #6ee7b7;
}

.dark .badge-rose {
  background: rgba(244, 63, 94, .2);
  color: #fda4af;
}

/* Modal Cards (no hover-jump) */
.modal-card {
  background: rgba(255, 255, 255, 0.98);
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.25rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  transform: none !important;
}

.dark .modal-card {
  background: rgba(15, 23, 42, 0.98);
  border-color: rgba(51, 65, 85, 0.85);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.6);
  transform: none !important;
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 90;
}

.modal {
  position: fixed;
  z-index: 91;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 2rem));
  max-height: 88vh;
  overflow: auto;
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
}

.dark .modal {
  background: #1e293b;
}

.modal-wide {
  width: min(900px, calc(100vw - 2rem));
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
}

.dark .modal-head {
  border-color: #334155;
}

.modal-head h3 {
  font-size: 1rem;
  font-weight: 700;
  color: #1e293b;
}

.dark .modal-head h3 {
  color: #f1f5f9;
}

.modal-body {
  padding: 1rem 1.25rem;
}

.modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: .5rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
}

.dark .modal-foot {
  border-color: #334155;
}

/* ---------- Toasts ---------- */
#toast-wrap {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.toast {
  border-radius: .6rem;
  padding: .75rem 1rem;
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  box-shadow: 0 10px 20px rgba(2, 6, 23, .18);
  animation: toast-in .25s ease;
  max-width: 340px;
}

.toast-success {
  background: #059669;
}

.toast-error {
  background: #e11d48;
}

.toast-info {
  background: #1e293b;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Loading ---------- */
.loading {
  color: #94a3b8;
  font-size: .875rem;
  padding: 2.5rem 0;
  text-align: center;
}

.loading::after {
  content: '';
  display: block;
  width: 28px;
  height: 28px;
  margin: 10px auto 0;
  border: 3px solid #e2e8f0;
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- Admin sidebar ---------- */
.side-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  border-radius: .55rem;
  padding: .5rem .75rem;
  font-size: .875rem;
  font-weight: 500;
  color: #475569;
  transition: background .15s;
}

.side-link:hover {
  background: #f1f5f9;
}

.dark .side-link {
  color: #cbd5e1;
}

.dark .side-link:hover {
  background: rgba(51, 65, 85, .6);
}

.side-link.active {
  background: var(--brand);
  color: #fff;
}

.side-link.active:hover {
  background: var(--brand);
}

.side-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: .45rem;
  background: #e0e7ff;
  color: #4338ca;
  font-size: .7rem;
  font-weight: 800;
}

.dark .side-icon {
  background: #123249;
  color: #67e8f9;
}

.side-link.active .side-icon {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

body.admin-page {
  min-width: 0;
  overflow-x: hidden;
}

body.admin-page #content,
body.admin-page #content > * {
  min-width: 0;
  max-width: 100%;
}

body.admin-page #content .overflow-x-auto {
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-x: contain;
}

body.admin-page #content table {
  min-width: 42rem;
}

@media (min-width: 1024px) and (max-width: 1279px) {
  body.admin-page #page-title {
    max-width: 24vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.admin-page #content {
    padding-inline: 1.25rem;
  }
}

/* ---------- ID card & certificate ---------- */
.idcard {
  width: 430px;
  max-width: 100%;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  color: #0f172a;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .15);
}

.cert-paper {
  position: relative;
  width: 940px;
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  color: #0f172a;
  border: 2px solid #1e40af;
  padding: 34px 44px 28px;
  box-shadow: 0 15px 40px rgba(15, 23, 42, .12);
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'Plus Jakarta Sans', sans-serif;
}

.cert-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: #1e40af;
  border-style: solid;
  pointer-events: none;
  z-index: 2;
}

.cert-corner-tl {
  top: 10px;
  left: 10px;
  border-width: 4px 0 0 4px;
}

.cert-corner-tr {
  top: 10px;
  right: 10px;
  border-width: 4px 4px 0 0;
}

.cert-corner-bl {
  bottom: 10px;
  left: 10px;
  border-width: 0 0 4px 4px;
}

.cert-corner-br {
  bottom: 10px;
  right: 10px;
  border-width: 0 4px 4px 0;
}

.cert-inner-frame {
  position: absolute;
  inset: 14px;
  border: 1px solid #bfdbfe;
  pointer-events: none;
  z-index: 1;
}

.cert-watermark {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 350px;
  height: 350px;
  opacity: .035;
  pointer-events: none;
  z-index: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.letter-paper {
  position: relative;
  width: 820px;
  max-width: 100%;
  margin: 0 auto;
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .12);
  padding: 40px 48px;
}

/* ---------- Print: only the .print-area is printed ---------- */
@media print {
  body * {
    visibility: hidden;
  }

  .print-area,
  .print-area * {
    visibility: visible;
  }

  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
  }

  .no-print {
    display: none !important;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 8px;
}

.dark ::-webkit-scrollbar-thumb {
  background: #475569;
}

/* ---------- Public Navbar nav-link ---------- */
.nav-link {
  display: inline-flex;
  align-items: center;
  padding: .35rem .7rem;
  border-radius: .6rem;
  font-size: .875rem;
  font-weight: 500;
  color: #475569;
  transition: all .2s ease;
  text-decoration: none;
}

.nav-link:hover {
  color: var(--brand);
  background: #f1f5f9;
}

.dark .nav-link {
  color: #cbd5e1;
}

.dark .nav-link:hover {
  color: var(--cyan-bright);
  background: rgba(34, 211, 238, .08);
}

.nav-link.active {
  color: var(--brand);
  background: #eef2ff;
  font-weight: 700;
}

.dark .nav-link.active {
  color: var(--cyan-bright);
  background: rgba(6, 182, 212, .12);
}

/* ---------- Toast warning ---------- */
.toast-warning {
  background: #d97706;
}

/* ---------- Mobile Responsiveness Helpers ---------- */
@media (max-width: 640px) {
  .card {
    border-radius: 1rem;
  }

  .btn {
    border-radius: .65rem;
    font-size: .8125rem;
  }

  .modal {
    width: calc(100vw - 1rem);
    border-radius: .875rem;
  }

  .input {
    font-size: 16px;
    /* Prevents auto-zoom on iOS */
  }
}

/* Mobile Document Paper Wrapper */
.paper-scroll-wrapper {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 0.75rem;
}

.paper-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.paper-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.dark .paper-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #475569;
}

/* LMS Mobile Drawer Backdrop */
#lms-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: opacity 0.25s ease;
}

/* LMS Mobile Bottom Navigation */
.lms-mobile-bottom-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  inset-x: 0;
  z-index: 45;
  height: 3.75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid #e2e8f0;
  align-items: center;
  justify-content: space-around;
  padding: 0 0.5rem;
}

.dark .lms-mobile-bottom-bar {
  background: rgba(7, 20, 38, 0.97);
  border-color: #1c354d;
}

@media (min-width: 1024px) {
  .lms-mobile-bottom-bar {
    display: none !important;
  }
}

.lms-mobile-bottom-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
  color: #64748b;
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s ease;
  padding-top: 2px;
}

.dark .lms-mobile-bottom-item {
  color: #94a3b8;
}

.lms-mobile-bottom-item.active {
  color: var(--brand);
}

.dark .lms-mobile-bottom-item.active {
  color: var(--cyan-bright);
}

.lms-mobile-bottom-item svg {
  width: 1.25rem;
  height: 1.25rem;
  margin-bottom: 2px;
  transition: transform 0.15s ease;
}

.lms-mobile-bottom-item.active svg {
  transform: scale(1.1);
}

/* ---------- Smooth page transitions ---------- */
body {
  animation: pageFadeIn 0.35s ease both;
}

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Navy + electric-cyan product theme ---------- */
body[class~="bg-slate-50"],
body[class~="bg-gray-50"] {
  background-color: #f3f8fb !important;
}

html.dark body[class~="dark:bg-slate-950"],
html.dark body[class~="dark:bg-gray-900"] {
  background-color: var(--navy-deep) !important;
  color: #e7f1f7;
}

body[class~="bg-slate-50"],
body[class~="bg-gray-50"] {
  color: #102338;
}

:is(
  [class~="bg-indigo-50"], [class~="bg-violet-50"], [class~="bg-purple-50"]
) { background-color: #ecfeff !important; }
:is(
  [class~="bg-indigo-100"], [class~="bg-violet-100"], [class~="bg-purple-100"]
) { background-color: #cffafe !important; }
:is(
  [class~="bg-indigo-200"], [class~="bg-violet-200"], [class~="bg-purple-200"]
) { background-color: #a5f3fc !important; }
:is(
  [class~="bg-indigo-300"], [class~="bg-violet-300"], [class~="bg-purple-300"]
) { background-color: #67e8f9 !important; }
:is(
  [class~="bg-indigo-400"], [class~="bg-violet-400"], [class~="bg-purple-400"]
) { background-color: #22d3ee !important; }
:is(
  [class~="bg-indigo-500"], [class~="bg-violet-500"], [class~="bg-purple-500"]
) { background-color: #06b6d4 !important; }
:is(
  [class~="bg-indigo-600"], [class~="bg-violet-600"], [class~="bg-purple-600"]
) { background-color: #0891b2 !important; }
:is(
  [class~="bg-indigo-700"], [class~="bg-violet-700"], [class~="bg-purple-700"]
) { background-color: #0e7490 !important; }
:is(
  [class~="bg-indigo-800"], [class~="bg-violet-800"], [class~="bg-purple-800"]
) { background-color: #155e75 !important; }
:is(
  [class~="bg-indigo-900"], [class~="bg-violet-900"], [class~="bg-purple-900"]
) { background-color: #164e63 !important; }
:is(
  [class~="bg-indigo-950"], [class~="bg-violet-950"], [class~="bg-purple-950"]
) { background-color: #083344 !important; }

:is(
  [class~="text-indigo-400"], [class~="text-violet-400"], [class~="text-purple-400"]
) { color: #0891b2 !important; }
:is(
  [class~="text-indigo-500"], [class~="text-violet-500"], [class~="text-purple-500"]
) { color: #0e7490 !important; }
:is(
  [class~="text-indigo-600"], [class~="text-violet-600"], [class~="text-purple-600"]
) { color: #0e7490 !important; }
:is(
  [class~="text-indigo-700"], [class~="text-violet-700"], [class~="text-purple-700"]
) { color: #155e75 !important; }

:is(
  [class~="border-indigo-100"], [class~="border-violet-100"], [class~="border-purple-100"]
) { border-color: #cffafe !important; }
:is(
  [class~="border-indigo-200"], [class~="border-violet-200"], [class~="border-purple-200"]
) { border-color: #a5f3fc !important; }
:is(
  [class~="border-indigo-300"], [class~="border-violet-300"], [class~="border-purple-300"]
) { border-color: #67e8f9 !important; }
:is(
  [class~="border-indigo-400"], [class~="border-violet-400"], [class~="border-purple-400"]
) { border-color: #22d3ee !important; }
:is(
  [class~="border-indigo-500"], [class~="border-violet-500"], [class~="border-purple-500"]
) { border-color: #06b6d4 !important; }
:is(
  [class~="border-indigo-600"], [class~="border-violet-600"], [class~="border-purple-600"]
) { border-color: #0891b2 !important; }

:is(
  [class~="from-indigo-700"], [class~="from-violet-700"], [class~="from-purple-700"],
  [class~="from-indigo-600"], [class~="from-violet-600"], [class~="from-purple-600"]
) {
  --tw-gradient-from: #0e7490 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(14 116 144 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
:is(
  [class~="via-indigo-700"], [class~="via-violet-700"], [class~="via-purple-700"],
  [class~="via-indigo-600"], [class~="via-violet-600"], [class~="via-purple-600"],
  [class~="via-indigo-500"], [class~="via-violet-500"], [class~="via-purple-500"]
) {
  --tw-gradient-stops: var(--tw-gradient-from), #06b6d4 var(--tw-gradient-via-position), var(--tw-gradient-to) !important;
}
:is(
  [class~="to-indigo-800"], [class~="to-violet-800"], [class~="to-purple-800"],
  [class~="to-indigo-700"], [class~="to-violet-700"], [class~="to-purple-700"],
  [class~="to-indigo-600"], [class~="to-violet-600"], [class~="to-purple-600"]
) { --tw-gradient-to: #164e63 var(--tw-gradient-to-position) !important; }

html.dark :is(
  [class~="dark:bg-indigo-950/30"], [class~="dark:bg-indigo-950/40"],
  [class~="dark:bg-violet-950/30"], [class~="dark:bg-violet-950/40"],
  [class~="dark:bg-purple-950/30"], [class~="dark:bg-purple-950/40"],
  [class~="dark:bg-indigo-900/40"], [class~="dark:bg-violet-900/40"],
  [class~="dark:bg-purple-900/40"]
) { background-color: rgba(6, 182, 212, .1) !important; }
html.dark :is(
  [class~="dark:bg-indigo-500/10"], [class~="dark:bg-violet-500/10"],
  [class~="dark:bg-purple-500/10"], [class~="dark:bg-indigo-500/20"],
  [class~="dark:bg-violet-500/20"], [class~="dark:bg-purple-500/20"]
) { background-color: rgba(34, 211, 238, .1) !important; }
html.dark :is(
  [class~="dark:text-indigo-300"], [class~="dark:text-indigo-400"],
  [class~="dark:text-violet-300"], [class~="dark:text-violet-400"],
  [class~="dark:text-purple-300"], [class~="dark:text-purple-400"]
) { color: #67e8f9 !important; }
html.dark :is(
  [class~="dark:border-indigo-800"], [class~="dark:border-indigo-900/40"],
  [class~="dark:border-violet-800"], [class~="dark:border-violet-900/40"],
  [class~="dark:border-purple-800"], [class~="dark:border-purple-900/40"]
) { border-color: rgba(34, 211, 238, .22) !important; }
html.dark :is(
  [class~="dark:from-indigo-950"], [class~="dark:from-violet-950"],
  [class~="dark:from-purple-950"]
) {
  --tw-gradient-from: #071426 var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(7 20 38 / 0) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}
html.dark :is(
  [class~="dark:via-indigo-950/50"], [class~="dark:via-violet-950/50"],
  [class~="dark:via-purple-950/50"]
) { --tw-gradient-stops: var(--tw-gradient-from), #0b2940 var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
html.dark :is(
  [class~="dark:to-indigo-950"], [class~="dark:to-violet-950"],
  [class~="dark:to-purple-950"]
) { --tw-gradient-to: #0b2940 var(--tw-gradient-to-position) !important; }

.glass-card {
  border-color: rgba(148, 190, 210, .42) !important;
  box-shadow: 0 24px 70px rgba(15, 45, 70, .12);
}

.dark .glass-card {
  background: rgba(8, 23, 41, .92) !important;
  border-color: rgba(103, 232, 249, .14) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32);
}

.dark #admin-sidebar,
.dark #lms-sidebar,
#admin-sidebar,
#lms-sidebar {
  background: #0b1b30;
  border-color: #18334b;
}

#admin-sidebar .side-link,
#lms-sidebar .side-link,
#mobile-admin-nav .side-link {
  color: #bfd0dd;
  border-radius: .7rem;
}

#admin-sidebar .side-link:hover,
#lms-sidebar .side-link:hover,
#mobile-admin-nav .side-link:hover {
  background: rgba(34, 211, 238, .09);
  color: #67e8f9;
}

#admin-sidebar .side-link.active,
#lms-sidebar .side-link.active,
#mobile-admin-nav .side-link.active {
  background: linear-gradient(110deg, #0e7490, #0891b2);
  color: #fff;
  box-shadow: 0 8px 20px rgba(6, 182, 212, .18);
}

#admin-sidebar .side-icon,
#lms-sidebar .side-icon {
  background: rgba(34, 211, 238, .12);
  color: #67e8f9;
}

#admin-sidebar .side-link.active .side-icon,
#lms-sidebar .side-link.active .side-icon {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.admin-input:focus,
.lms-input:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 4px rgba(6, 182, 212, .14) !important;
}

.admin-btn,
.lms-btn {
  background: linear-gradient(120deg, #0e7490, #06b6d4) !important;
  box-shadow: 0 12px 28px rgba(6, 182, 212, .23) !important;
}

.admin-btn::before,
.lms-btn::before {
  background: linear-gradient(120deg, #0891b2, #22d3ee) !important;
}

.lms-mobile-bottom-bar {
  border-color: var(--border);
  box-shadow: 0 -10px 28px rgba(7, 20, 38, .06);
}

:focus-visible {
  outline: 3px solid rgba(6, 182, 212, .65);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* Phone layouts intentionally rearrange navigation, cards, and actions.
   Tablet and laptop layouts remain governed by the existing Tailwind classes. */
@media (max-width: 767px) {
  html,
  body {
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    -webkit-tap-highlight-color: transparent;
  }

  main,
  #content,
  #lms-content {
    min-width: 0;
  }

  #nav {
    width: 100%;
  }

  #nav > .max-w-7xl {
    max-width: 100%;
  }

  #nav #announcement-bar {
    min-height: 2rem;
    line-height: 1.25;
  }

  #nav #announcement-bar > div {
    align-items: center;
    gap: .35rem;
  }

  #nav #announcement-text {
    max-width: 56vw;
    font-size: .66rem;
    white-space: normal;
  }

  #nav #announcement-link {
    font-size: .65rem;
    white-space: nowrap;
  }

  #nav #mobile-menu {
    position: absolute;
    top: 100%;
    left: .65rem;
    right: .65rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: .65rem;
    border: 1px solid var(--border);
    border-radius: 0 0 1.15rem 1.15rem;
    box-shadow: 0 22px 50px rgba(7, 20, 38, .22);
  }

  #nav #mobile-menu a {
    min-height: 2.75rem;
    border-radius: .8rem;
  }

  #nav #mobile-menu a:active,
  #nav #menu-btn:active,
  #nav #theme-toggle:active {
    transform: scale(.97);
  }

  #hero {
    padding-top: 2.25rem;
    padding-bottom: 3.5rem;
  }

  #hero h1,
  #hero #heroTitle {
    text-wrap: balance;
  }

  #heroPill {
    max-width: calc(100vw - 2rem);
    white-space: normal;
    line-height: 1.35;
  }

  #heroSubtitle {
    max-width: 34rem;
    margin-inline: auto;
  }

  #heroCta,
  #heroSecCta {
    min-height: 3.15rem;
  }

  #domainsGrid {
    display: flex !important;
    gap: .85rem !important;
    margin-inline: -1rem;
    padding: .35rem 1rem 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  #domainsGrid::-webkit-scrollbar {
    display: none;
  }

  #domainsGrid > * {
    flex: 0 0 min(84vw, 22rem);
    min-width: 0;
    scroll-snap-align: start;
  }

  #index #footer,
  #footer {
    margin-top: 2.5rem;
  }

  #footer > div:first-child {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
  }

  #admin-sidebar {
    display: none !important;
  }

  #mobile-admin-nav > div:last-child {
    width: min(19rem, calc(100vw - 3rem));
    padding: 1.1rem .85rem;
    padding-bottom: max(1.1rem, env(safe-area-inset-bottom));
    border-right: 1px solid rgba(103, 232, 249, .12);
    box-shadow: 22px 0 60px rgba(0, 0, 0, .35);
  }

  #mobile-admin-nav .side-link {
    min-height: 2.8rem;
  }

  body > header.fixed {
    min-width: 0;
    padding-inline: .65rem;
  }

  #page-title {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .95rem;
  }

  #content {
    padding-inline: .85rem !important;
    padding-top: 4.75rem !important;
    padding-bottom: max(1.5rem, env(safe-area-inset-bottom)) !important;
  }

  #content > .card,
  #content > section.card {
    border-radius: 1rem;
  }

  #content .overflow-x-auto,
  #lms-content .overflow-x-auto,
  .paper-scroll-wrapper {
    max-width: 100%;
    overscroll-behavior-x: contain;
  }

  #content .table,
  #lms-content .table {
    min-width: 42rem;
  }

  #lms-sidebar {
    width: min(20rem, calc(100vw - 2rem));
    border-radius: 0 1.15rem 1.15rem 0;
    box-shadow: 18px 0 55px rgba(0, 0, 0, .32);
  }

  #lms-content {
    padding-bottom: calc(5.75rem + env(safe-area-inset-bottom));
  }

  #lms-content section:not(.hidden) {
    gap: .85rem;
  }

  #lms-content .card {
    padding: 1rem !important;
    border-radius: 1rem;
  }

  #profile-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
  }

  #timeline-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }

  #lms-chrome > div:first-child {
    padding-inline: .7rem;
  }

  #lms-chrome > div:first-child > div:first-child {
    min-width: 0;
    gap: .45rem;
  }

  #lms-chrome > div:first-child > div:first-child > a {
    min-width: 0;
  }

  #lms-chrome > div:first-child > div:first-child > a > span {
    max-width: 30vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .lms-mobile-bottom-bar {
    height: calc(4rem + env(safe-area-inset-bottom));
    padding: .25rem .35rem env(safe-area-inset-bottom);
  }

  .lms-mobile-bottom-item {
    min-width: 0;
    font-size: .62rem;
  }

  .lms-mobile-bottom-item svg {
    width: 1.2rem;
    height: 1.2rem;
  }

  #bank-csv-form > .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #bank-csv-submit {
    width: 100%;
    min-height: 3rem;
  }

  #bank-csv-form > .flex {
    align-items: stretch;
  }

  #reject-modal > div:last-child {
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
  }

  .modal,
  .modal-card {
    max-height: calc(100dvh - 1.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .idcard {
    width: min(100%, 26rem);
  }

  .cert-paper,
  .letter-paper {
    min-width: 42rem;
  }

  .toast {
    max-width: calc(100vw - 2rem);
  }

  #toast-wrap {
    top: max(.75rem, env(safe-area-inset-top));
    right: .75rem;
    left: .75rem;
    align-items: flex-end;
  }

  body > .fixed.bottom-3.inset-x-3 {
    bottom: max(.75rem, env(safe-area-inset-bottom));
    left: .55rem;
    right: .55rem;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  #nav #mobile-menu {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: 0 0 1.15rem 1.15rem;
    box-shadow: 0 22px 50px rgba(7, 20, 38, .22);
  }

  #nav #mobile-menu a,
  #mobile-admin-nav .side-link {
    min-height: 2.75rem;
  }

  #lms-sidebar {
    width: min(20rem, calc(100vw - 2rem));
  }

  #content,
  #lms-content {
    min-width: 0;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  #nav #mobile-menu {
    position: absolute;
    top: 100%;
    left: 1rem;
    right: 1rem;
    max-height: calc(100dvh - 6rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--border);
    border-radius: 0 0 1.15rem 1.15rem;
    box-shadow: 0 22px 50px rgba(7, 20, 38, .22);
  }
}

@media (max-width: 420px) {
  #nav #announcement-badge {
    padding-inline: .35rem;
    font-size: .55rem;
  }

  #nav #announcement-text {
    max-width: 48vw;
    font-size: .6rem;
  }

  #nav #announcement-close {
    display: none;
  }

  #nav .max-w-7xl.px-4,
  #hero > .max-w-7xl {
    padding-inline: .9rem;
  }

  #footer > div:first-child {
    grid-template-columns: minmax(0, 1fr);
  }

  #content .grid[class*="grid-cols-2"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  #profile-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  #lms-chrome #lms-logout {
    padding-inline: .55rem !important;
  }

  #lms-chrome #lms-logout::after {
    content: '';
  }
}
body.applications-closed a[href*="apply.html"] {
  display: none !important;
}