/* ============================================================
   NU Latest Result — nlr.css
   Green theme (matches the resultnu.bd design). System fonts.
   Scoped under .nlr-root. Mobile-first.
   ============================================================ */
.nlr-root {
  --green:#06694d; --green-soft:#0c8a64; --green-ink:#0a5e44;
  --red:#e23b46;
  --grad:linear-gradient(135deg,#06694d 0%,#0c8a64 100%);
  --bg:#ffffff; --bg-sub:#f2f5f9; --ink:#18222f; --muted:#5a6a7d;
  --border:rgba(24,34,47,.10); --border-soft:rgba(24,34,47,.07);
  --radius:18px; --radius-sm:12px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  font-family:var(--font); color:var(--ink); line-height:1.6;
  -webkit-font-smoothing:antialiased; max-width:560px; margin:0 auto; padding:0 4px 20px;
}
.nlr-root *,.nlr-root *::before,.nlr-root *::after { box-sizing:border-box; }
.nlr-root button,.nlr-root input,.nlr-root select { font-family:inherit; -webkit-tap-highlight-color:transparent; }

.nlr-card {
  background:var(--bg); border:1px solid var(--border); border-radius:var(--radius);
  padding:26px 24px; box-shadow:0 1px 4px rgba(24,34,47,.06),0 1px 2px rgba(24,34,47,.04);
  position:relative; overflow:hidden;
}
.nlr-card::before {
  content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--grad);
}

/* ── Form ── */
.nlr-form { display:flex; flex-direction:column; gap:15px; }
.nlr-field { display:flex; flex-direction:column; gap:6px; }
.nlr-field label {
  font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--muted);
}
.nlr-root input[type=text], .nlr-root select {
  width:100%; padding:12px 15px; min-height:48px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-sub);
  color:var(--ink); font-size:16px; font-weight:500;   /* 16px stops iOS zoom */
  appearance:none; -webkit-appearance:none; transition:border-color .15s, box-shadow .15s, background .15s;
}
.nlr-root input[type=text]:focus, .nlr-root select:focus {
  outline:none; border-color:var(--green); background:#fff; box-shadow:0 0 0 3px rgba(6,105,77,.12);
}
.nlr-root input::placeholder { color:#9aa6b4; }

.nlr-select-wrap { position:relative; }
.nlr-select-wrap::after {
  content:""; position:absolute; right:15px; top:50%; transform:translateY(-50%);
  width:8px; height:5px; background:var(--muted); clip-path:polygon(100% 0,0 0,50% 100%); pointer-events:none;
}

.nlr-invalid { border-color:var(--red) !important; box-shadow:0 0 0 3px rgba(226,59,70,.14) !important; }

/* ── Alert ── */
.nlr-alert {
  padding:11px 14px; border-radius:var(--radius-sm); font-size:.9rem; font-weight:600;
  background:rgba(226,59,70,.07); border:1px solid rgba(226,59,70,.16); color:var(--red);
}

/* ── Submit / Clear ── */
.nlr-actions { display:flex; gap:10px; margin-top:4px; }
.nlr-submit {
  flex:2; min-height:50px; padding:13px 20px; border:none; border-radius:var(--radius-sm);
  background:var(--grad); color:#fff; font-size:1rem; font-weight:700; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  box-shadow:0 8px 16px -7px rgba(6,105,77,.55); transition:filter .18s, transform .18s, box-shadow .18s;
}
.nlr-submit:hover:not(:disabled) { filter:brightness(1.05); transform:translateY(-1px); }
.nlr-submit:disabled { filter:grayscale(.3) opacity(.75); cursor:not-allowed; box-shadow:none; }
.nlr-clear {
  flex:1; min-height:50px; padding:13px 16px; border-radius:var(--radius-sm);
  background:#fff; border:1px solid var(--border); color:var(--ink);
  font-size:1rem; font-weight:700; cursor:pointer; transition:background .15s, border-color .15s, color .15s;
}
.nlr-clear:hover { background:var(--bg-sub); border-color:var(--green); color:var(--green-ink); }
.nlr-btn-spin {
  width:16px; height:16px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:nlr-spin .7s linear infinite;
}
@keyframes nlr-spin { to { transform:rotate(360deg); } }

/* ── Closed state ── */
.nlr-closed {
  display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:26px 10px; color:var(--muted);
}
.nlr-closed svg { color:var(--green); }
.nlr-closed p { margin:0; font-size:.98rem; font-weight:600; color:var(--ink); }

/* ── Result modal ── */
.nlr-modal-overlay {
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  padding:18px; background:rgba(24,34,47,.5); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  overscroll-behavior:contain;
}
.nlr-modal-overlay[hidden] { display:none; }
.nlr-modal-box {
  width:100%; max-width:600px; max-height:92vh; display:flex; flex-direction:column;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
  box-shadow:0 40px 80px -30px rgba(24,34,47,.45);
  animation:nlr-pop .28s cubic-bezier(.16,1,.3,1);
}
@keyframes nlr-pop { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
.nlr-modal-head {
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:15px 20px; background:var(--grad);
}
.nlr-modal-title { margin:0; font-size:1rem; font-weight:800; color:#fff; }
.nlr-modal-sub { margin:2px 0 0; font-size:.75rem; color:rgba(255,255,255,.8); letter-spacing:.4px; }
.nlr-root .nlr-modal-close {
  flex:0 0 auto; width:36px; height:36px; min-width:36px; padding:0; margin:0;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.30);
  color:#fff !important; font-size:26px; line-height:1; font-weight:400;
  cursor:pointer; transition:background .15s; box-shadow:none;
}
.nlr-root .nlr-modal-close:hover { background:var(--red); border-color:var(--red); color:#fff !important; }

.nlr-modal-actions {
  flex:0 0 auto; display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border); background:#fff;
}
.nlr-root .nlr-print, .nlr-root .nlr-modal-close2 {
  flex:1 1 auto; min-height:46px; padding:11px 16px; border-radius:var(--radius-sm);
  font-size:.95rem; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border:1px solid transparent; transition:filter .15s, transform .15s, background .15s, border-color .15s;
}
.nlr-root .nlr-print { background:var(--grad); color:#fff !important; box-shadow:0 8px 16px -7px rgba(6,105,77,.55); }
.nlr-root .nlr-print:hover { filter:brightness(1.05); transform:translateY(-1px); }
.nlr-root .nlr-print svg { stroke:#fff; fill:none; }
.nlr-root .nlr-modal-close2 { background:#fff; border-color:var(--border); color:var(--ink) !important; }
.nlr-root .nlr-modal-close2:hover { background:var(--bg-sub); border-color:var(--green); color:var(--green-ink) !important; }
.nlr-root .nlr-modal-body {
  flex:1 1 auto; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
  padding:0 !important; margin:0 !important; background:#fff;
}

/* ── Result sheet (NU's injected markup) — edge-to-edge, compact ──
   Selectors are prefixed with .nlr-root and use !important on layout props so
   the host theme's table / cell / spacing styles can't add side gaps. */
.nlr-root .nlr-result { width:100% !important; padding:0 !important; margin:0 !important; background:#fff; overflow-x:auto; }
.nlr-root .nlr-result table {
  width:100% !important; max-width:none !important; border-collapse:collapse !important;
  margin:0 !important; font-size:.82rem; line-height:1.35; table-layout:auto;
}
.nlr-root .nlr-result td, .nlr-root .nlr-result th {
  border:1px solid var(--border); padding:6px 9px !important; margin:0; text-align:left; vertical-align:top;
  color:var(--ink); height:auto !important; word-break:break-word;
}
.nlr-root .nlr-result td[align="center"], .nlr-root .nlr-result th[align="center"] { text-align:center; }
.nlr-root .nlr-result strong, .nlr-root .nlr-result b { color:var(--ink); font-weight:700; }

/* Exam title + "Result Sheet" line */
.nlr-root .nlr-result font[size="+1"] { display:block; font-size:.95rem; font-weight:800; color:var(--green-ink); padding:2px 0; }

/* Section-header rows (Student Basic Info / Grade & Mark Details): the portal
   marks these as CENTERED cells that span the row — tint them green. The date
   cell also uses colspan but isn't centered, so it's excluded. */
.nlr-root .nlr-result td[colspan][align="center"] {
  background:var(--grad); color:#fff !important; text-align:center; font-weight:800; letter-spacing:.3px; padding:8px 9px !important;
}
.nlr-root .nlr-result td[colspan][align="center"] strong { color:#fff !important; }

/* First title table (exam name / Result Sheet) — centered band, no heavy grid */
.nlr-root .nlr-result > table:first-child td { border:none; text-align:center; background:var(--bg-sub); padding:8px 9px !important; }

.nlr-root .nlr-result a { color:var(--green); text-decoration:none; }
.nlr-root .nlr-result a:hover { text-decoration:underline; }

/* ── Mobile ── */
@media (max-width:560px) {
  .nlr-card { padding:20px 16px; }
  .nlr-modal-overlay { padding:0; }
  .nlr-modal-box { max-width:none; max-height:none; height:100vh; height:100dvh; border-radius:0; border:none; }
  .nlr-root .nlr-modal-body { padding:0 !important; }
  .nlr-root .nlr-result { padding:0 !important; }
  .nlr-root .nlr-result table { font-size:.8rem; }
  .nlr-root .nlr-result td, .nlr-root .nlr-result th { padding:6px 7px !important; }
  .nlr-modal-actions { padding:12px 16px calc(12px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion:reduce) {
  .nlr-root *, .nlr-root *::before, .nlr-root *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}