/* ============================================================
   AffairOva — Dashboard CSS
   Top nav, cards, viewer, contact, profile
   ============================================================ */

/* ── TOP NAV — single row ────────────────────────────────────── */
/* Logo left  |  Active badge + neon buttons right              */
.topnav {
  background: var(--navy);
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 58px;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(245,185,66,0.18);
}

/* AffairOva — "Affair" white, "Ova" gold */
.nav-logo {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.2px;
  flex-shrink: 0;
}
.nav-logo span { color: var(--gold-light); }

/* Right side: badge + buttons all in one row */
.nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

/* neon badges — only Active shown in nav */
.nav-badge {
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.5px;
  border: 1.5px solid transparent;
  white-space: nowrap;
}
.badge-active {
  background: transparent;
  color: #34d399;
  border-color: rgba(52,211,153,0.6);
  box-shadow: 0 0 8px rgba(52,211,153,0.25);
}
.badge-expired {
  background: transparent;
  color: #f87171;
  border-color: rgba(248,113,113,0.6);
  box-shadow: 0 0 8px rgba(248,113,113,0.2);
}
.badge-pending {
  background: transparent;
  color: var(--gold-light);
  border-color: rgba(245,185,66,0.6);
  box-shadow: 0 0 8px rgba(245,185,66,0.2);
}
.badge-inactive {
  background: transparent;
  color: rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.2);
}

/* days-left — hidden from nav, only used in sub-bar */
.days-left { display: none; }

/* Old two-row aliases — kept so old PHP pages don't break visually */
.nav-row        { display: contents; }
.nav-badges     { display: contents; }
.nav-buttons    { display: flex; align-items: center; gap: 8px; }

/* ── MAIN CONTENT ───────────────────────────────────────────── */
.main-content {
  flex: 1;
  padding: 28px 24px;
  max-width: 1100px;
  margin: 0 auto;
  width: 100%;
}

/* ── GREETING ───────────────────────────────────────────────── */
.greeting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.greeting-text {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 900;
  color: var(--navy);
}
.greeting-sub {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
}

/* ── DASHBOARD CARDS GRID ───────────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 6px;
}

/* Card style: white card, colored top border, icon, title, description,
   free-item pill, arrow on the right. Spacing tuned to match the
   reference layout — generous internal padding, icon set off from the
   title with its own line, arrow vertically centered with extra
   right-side clearance so it never crowds the free-item pill. */
.dash-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 56px 20px 22px;
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dash-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.dash-card.current-affairs::before { background: linear-gradient(90deg, var(--blue), var(--blue-light)); }
.dash-card.weekly-mcq::before       { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.dash-card.monthly-mcq::before      { background: linear-gradient(90deg, var(--green), #34d399); }
.dash-card.test-series::before      { background: linear-gradient(90deg, var(--rose), #f43f5e); }
.dash-card.custom::before           { background: linear-gradient(90deg, var(--purple), #a78bfa); }

.dash-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}

/* Arrow on right side of card */
.dash-card::after {
  content: '→';
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-light);
  font-size: 19px;
  opacity: 0.7;
  transition: opacity 0.2s, right 0.2s;
}
.dash-card:hover::after { opacity: 1; right: 18px; }

/* Icon sits to the left of the title, both on one line */
.card-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.card-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}
.card-name {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.card-desc {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.55;
  margin-bottom: 10px;
}
/* Free-item tag — bold small-caps mono, matches the green "1 free item"
   pill text style from the reference screenshot (no pill background,
   just bold colored text sitting under the description). Deliberate
   space above AND below so it doesn't crowd the description line or
   the card's bottom edge. */
.card-free-tag {
  font-size: 12px;
  font-family: var(--font-mono);
  color: var(--green);
  margin-top: 4px;
  margin-bottom: 4px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
/* card-count intentionally removed from display */
.card-count { display: none; }

/* ── BLUR OVERLAY (subscription gate) ──────────────────────── */
.blur-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,27,45,0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}
.blur-card {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  max-width: 440px;
  width: 100%;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.40);
  animation: slideUp 0.28s ease;
  /* Cap height; card itself scrolls if taller than viewport */
  max-height: calc(100svh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  word-break: break-word;
}
.blur-icon  { font-size: 44px; margin-bottom: 12px; }
.blur-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 8px;
}
.blur-sub {
  font-size: 14px;
  color: var(--ink-soft);
  margin-bottom: 22px;
  line-height: 1.65;
}
.waiting-anim {
  margin: 16px auto;
  width: 48px; height: 48px;
  border: 4px solid var(--blue-pale);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.timer-text {
  font-family: var(--font-mono);
  font-size: 24px;
  font-weight: 500;
  color: var(--blue);
  margin-top: 8px;
}

/* ── CONTENT VIEWER HEADER ───────────────────────────────────── */
.viewer-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 26px;
  flex-wrap: nowrap;
}
.back-btn {
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--ink-mid);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: var(--radius-sm);
  transition: background 0.2s;
  flex-shrink: 0;
  cursor: pointer;
  white-space: nowrap;
}
.back-btn:hover { background: var(--border); }

.viewer-title {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1.2;
}
/* Remove item count from viewer */
.viewer-count,
.viewer-header > div > div:last-child { display: none; }

/* ── NOTE CARDS — identical style to dash-cards ─────────────── */
.content-entries { display: flex; flex-direction: column; gap: 16px; }

.entry-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 22px 40px 20px 24px; /* right padding for arrow */
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
}

/* colored top stripe matching category color */
.entry-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--blue-light));
}
/* Category-specific stripe colors */
.entry-card.current-affairs::before { background: linear-gradient(90deg, var(--blue), var(--blue-light)); }
.entry-card.weekly-mcq::before       { background: linear-gradient(90deg, var(--gold), var(--gold-light)); }
.entry-card.monthly-mcq::before      { background: linear-gradient(90deg, var(--green), #34d399); }
.entry-card.test-series::before      { background: linear-gradient(90deg, var(--rose), #f43f5e); }
.entry-card.custom::before           { background: linear-gradient(90deg, var(--purple), #a78bfa); }

/* Gold arrow on right — vertically centered on the whole card so it
   sits level with the badge row, not just the title, keeping it close
   to the FREE/PREMIUM badge instead of floating near the top. */
.entry-card::after {
  content: '→';
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--gold-light);
  font-size: 18px;
  opacity: 0.7;
  transition: opacity 0.2s, right 0.2s;
}
.entry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.10);
}
.entry-card:hover::after { opacity: 1; right: 13px; }

/* Bold date/title line — matches the screenshot's "19 June 2026" heading */
.entry-label {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--navy);
  font-size: 18px;
  line-height: 1.3;
}
.entry-short-label {
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 1px;
  line-height: 1.5;
}
.entry-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 6px;
}

/* Hide old accordion elements */
.entry-header  { display: contents; }
.entry-toggle  { display: none; }
.entry-body    { display: none; }

/* ── FULL-PAGE NOTE VIEWER (replaces iframe) ─────────────────── */
/* Opens as a full-page overlay — no header, no nav, just content */
.note-fullpage {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
/* Minimal top bar: only Back button */
.note-fullpage-bar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 10px 18px;
  background: var(--navy);
  border-bottom: 1px solid rgba(245,185,66,0.18);
  flex-shrink: 0;
  min-height: 48px;
}
.note-fullpage-back {
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.85);
  font-size: 13px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  white-space: nowrap;
}
.note-fullpage-back:hover {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
/* The content area scrolls */
.note-fullpage-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
}
.note-fullpage-content .note-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px 24px 48px;
}

/* ── PROFILE PAGE ───────────────────────────────────────────── */
.profile-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: start;
}
.profile-avatar-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
}
.profile-avatar {
  width: 80px; height: 80px;
  background: linear-gradient(135deg, var(--navy), var(--blue-light));
  border-radius: 50%;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: var(--white);
  font-family: var(--font-serif);
  font-weight: 900;
}
.profile-name {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 900;
  color: var(--navy);
  margin-bottom: 4px;
}
.profile-email { font-size: 13px; color: var(--ink-soft); margin-bottom: 14px; }
.profile-info-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.profile-info-row:last-child { border-bottom: none; }
.profile-info-label { color: var(--ink-soft); }
.profile-info-value { font-weight: 600; color: var(--navy); text-align: right; }

/* ── TICKET COMPONENTS ──────────────────────────────────────── */
.ticket-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 12px;
}
.ticket-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.ticket-id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}
.ticket-subject {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 6px;
}
.ticket-msg {
  font-size: 13px;
  color: var(--ink-mid);
  line-height: 1.65;
  margin-bottom: 10px;
}
.ticket-img {
  max-width: 220px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  margin-top: 6px;
  cursor: pointer;
}
.reply-thread {
  background: var(--surface);
  border-radius: var(--radius-md);
  padding: 12px;
  margin-top: 10px;
}
.reply-item {
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.reply-item:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.reply-author {
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--ink-soft);
  margin-bottom: 4px;
}
.reply-author.is-admin { color: var(--blue); }
.reply-text { font-size: 13px; color: var(--ink-mid); line-height: 1.6; }

/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet */
@media (max-width: 900px) {
  .cards-grid { grid-template-columns: repeat(2, 1fr); }
  .profile-grid { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 700px) {
  .topnav       { padding: 0 14px; height: 52px; }
  .main-content { padding: 16px 12px; }
  .cards-grid   { grid-template-columns: 1fr; gap: 10px; }
  .profile-grid { grid-template-columns: 1fr; }
  /* FIX: tighter padding so waiting card never overflows on mobile */
  .blur-card    { padding: 18px 14px; border-radius: var(--radius-lg); }
  .blur-icon    { font-size: 34px; margin-bottom: 8px; }
  .blur-title   { font-size: 20px; }
  .blur-sub     { font-size: 13px; margin-bottom: 14px; }
  .timer-text   { font-size: 20px; }
  .nav-right    { gap: 5px; }
  .nav-logo     { font-size: 17px; }
  .nav-badge    { font-size: 10px; padding: 4px 9px; }
  .nav-btn      { font-size: 11px !important; padding: 5px 9px !important; }
  .viewer-title { font-size: 18px; }
  .entry-card   { padding: 16px 44px 16px 16px; }
  .entry-label  { font-size: 14px; }
  /* full-page note on mobile */
  .note-fullpage-content .note-inner { padding: 18px 14px 32px; }
}

@media (max-width: 400px) {
  .cards-grid { grid-template-columns: 1fr; }
  .nav-logo   { font-size: 15px; }
  .nav-btn    { font-size: 10px !important; padding: 4px 7px !important; }
  .blur-card  { padding: 14px 12px; }
  .blur-title { font-size: 18px; }
  .timer-text { font-size: 18px; }
}

/* ── DATE INPUT FIX — normalize height on iOS/mobile ───────── */
/* iOS Safari renders date inputs much taller than text inputs by default */
input[type="date"].form-input,
.modal-body input[type="date"],
.form-input[type="date"] {
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  line-height: 1;
  padding: 0 14px;
  /* Strip iOS native date chrome that inflates height */
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  box-sizing: border-box;
  /* Align text vertically */
  display: flex;
  align-items: center;
}

/* Two-column layout utility for edit-user modal */
.form-row-inline {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 500px) {
  .form-row-inline { grid-template-columns: 1fr; }
}