/* ================================================================
   PM SHRI School Evaluation Panel – Frontend CSS v2.0
   Colors matched to site Elementor kit (post-7.css):
     Primary  : #0F005F  (deep indigo – e-global-color-primary)
     Secondary: #FA4428  (orange-red  – e-global-color-secondary)
     Text     : #111111  (e-global-color-text)
     White    : #FFFFFF  (e-global-color-d1509c4)
   Font: DM Sans (matches Elementor global typography)
   All classes prefixed pmse- ; scoped inside .pmse-wrapper
================================================================ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&display=swap');

/* ── CSS Variables ─────────────────────────────────────────── */
.pmse-wrapper {
  --pmse-primary   : #0F005F;
  --pmse-primary-d : #08003d;
  --pmse-primary-l : #1a0d80;
  --pmse-cta       : #FA4428;
  --pmse-cta-d     : #d93620;
  --pmse-success   : #1a7f3c;
  --pmse-danger    : #c0392b;
  --pmse-warning   : #e67e22;
  --pmse-text      : #111111;
  --pmse-muted     : #555e6d;
  --pmse-bg        : #f4f4f8;
  --pmse-white     : #ffffff;
  --pmse-border    : #d8d8e8;
  --pmse-card-sh   : 0 2px 12px rgba(15,0,95,.08);
  --pmse-radius    : 10px;

  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px;
  color: var(--pmse-text);
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  line-height: 1.6;
  box-sizing: border-box;
}
.pmse-wrapper *, .pmse-wrapper *::before, .pmse-wrapper *::after { box-sizing: border-box; }

/* ── Utilities ─────────────────────────────────────────────── */
.pmse-mt      { margin-top: 22px; }
.pmse-mt-sm   { margin-top: 10px; }
.pmse-mb      { margin-bottom: 14px; }
.pmse-w-100   { width: 100% !important; }
.pmse-req     { color: var(--pmse-cta); }
.pmse-empty   { color: var(--pmse-muted); font-style: italic; }

/* ── Top navigation bar ────────────────────────────────────── */
.pmse-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: var(--pmse-primary);
  color: var(--pmse-white);
  padding: 14px 22px;
  border-radius: var(--pmse-radius);
  box-shadow: 0 4px 18px rgba(15,0,95,.25);
}
.pmse-topbar-brand { display: flex; align-items: center; gap: 12px; }
.pmse-topbar-icon  { font-size: 28px; }
.pmse-topbar-title { font-size: 17px; font-weight: 700; }
.pmse-topbar-sub   { font-size: 12px; color: rgba(255,255,255,.7); }
.pmse-topbar-nav   { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pmse-nav-link {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  transition: background .2s;
}
.pmse-nav-link:hover { background: rgba(255,255,255,.15); color: #fff !important; }
.pmse-nav-logout {
  background: var(--pmse-cta);
  color: #fff !important;
  border: none;
  padding: 7px 16px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s;
}
.pmse-nav-logout:hover { background: var(--pmse-cta-d); }
.pmse-back-link { display: inline-block; color: var(--pmse-primary) !important; font-weight: 600; font-size: 13px; text-decoration: none; }
.pmse-back-link:hover { text-decoration: underline; }

/* ── Login ─────────────────────────────────────────────────── */
.pmse-login-page { display: flex; justify-content: center; padding-top: 40px; }
.pmse-login-card {
  background: var(--pmse-white);
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(15,0,95,.14);
  width: 100%;
  max-width: 420px;
  overflow: hidden;
}
.pmse-login-header {
  background: var(--pmse-primary);
  color: #fff;
  padding: 32px 28px;
  text-align: center;
}
.pmse-login-icon { font-size: 44px; }
.pmse-login-header h2 { margin: 8px 0 4px; font-size: 20px; font-weight: 800; color: #fff; }
.pmse-login-header p  { margin: 0; font-size: 13px; color: rgba(255,255,255,.75); }
.pmse-login-body   { padding: 28px; }
.pmse-login-foot   { background: #f7f7fb; border-top: 1px solid var(--pmse-border); padding: 10px; text-align: center; font-size: 12px; color: var(--pmse-muted); }

/* ── Cards ─────────────────────────────────────────────────── */
.pmse-card {
  background: var(--pmse-white);
  border: 1px solid var(--pmse-border);
  border-radius: var(--pmse-radius);
  padding: 22px;
  box-shadow: var(--pmse-card-sh);
}
.pmse-card-title { margin: 0 0 16px; font-size: 16px; font-weight: 700; color: var(--pmse-primary); }
.pmse-card-notop { border-top-left-radius: 0; border-top-right-radius: 0; border-top: none; margin-top: 0; }

/* ── Forms ─────────────────────────────────────────────────── */
.pmse-field { display: flex; flex-direction: column; flex: 1; min-width: 140px; }
.pmse-field label { font-size: 13px; font-weight: 600; color: var(--pmse-muted); margin-bottom: 5px; }
.pmse-field-btn { min-width: 110px; }
.pmse-input, .pmse-textarea {
  width: 100%;
  padding: 9px 13px;
  border: 1px solid var(--pmse-border);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  color: var(--pmse-text);
  background: #fff;
  transition: border-color .2s, box-shadow .2s;
  appearance: auto;
}
.pmse-input:focus, .pmse-textarea:focus {
  outline: none;
  border-color: var(--pmse-primary);
  box-shadow: 0 0 0 3px rgba(15,0,95,.1);
}
.pmse-textarea { resize: vertical; min-height: 80px; }
.pmse-check-wrap { display: flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.pmse-filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }

/* ── Buttons ───────────────────────────────────────────────── */
.pmse-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 20px; font-size: 14px; font-weight: 700;
  border-radius: 8px; cursor: pointer; border: none;
  text-decoration: none; transition: all .2s; white-space: nowrap;
  font-family: inherit;
}
.pmse-btn-block   { width: 100%; }
.pmse-btn-primary { background: var(--pmse-primary); color: #fff !important; }
.pmse-btn-primary:hover { background: var(--pmse-primary-l); box-shadow: 0 4px 12px rgba(15,0,95,.25); }
.pmse-btn-success { background: var(--pmse-success); color: #fff !important; }
.pmse-btn-success:hover { background: #155d2e; }
.pmse-btn-danger  { background: var(--pmse-danger); color: #fff !important; }
.pmse-btn-outline { background: transparent; border: 2px solid var(--pmse-primary); color: var(--pmse-primary) !important; }
.pmse-btn-sm      { padding: 5px 12px; font-size: 12px; }
.pmse-btn-lg      { padding: 13px 28px; font-size: 16px; }
.pmse-btn-cta     { background: var(--pmse-cta); color: #fff !important; }
.pmse-btn-cta:hover { background: var(--pmse-cta-d); }

/* ── Alerts ────────────────────────────────────────────────── */
.pmse-alert { padding: 11px 16px; border-radius: 8px; font-size: 14px; }
.pmse-alert-danger  { background: #fff0ee; color: #8b0000; border: 1px solid #f5c6c0; }
.pmse-alert-success { background: #edfbf1; color: #155724; border: 1px solid #b8ebb1; }
.pmse-alert-info    { background: #eceeff; color: var(--pmse-primary); border: 1px solid #c5c8f0; }

/* ── Badges / Pills ────────────────────────────────────────── */
.pmse-badge {
  display: inline-block; padding: 3px 9px;
  border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
}
.pmse-badge-pending      { background: #fff4e5; color: #7d4a00; }
.pmse-badge-completed    { background: #edfbf1; color: #155724; }
.pmse-badge-selected     { background: #dcffe8; color: #135a28; }
.pmse-badge-not_selected { background: #fff0ee; color: #7a1c0e; }

/* ── Tabs ──────────────────────────────────────────────────── */
.pmse-tabs { display: flex; gap: 4px; }
.pmse-tab {
  padding: 10px 22px; font-size: 14px; font-weight: 700;
  background: #ece8f5; border: 1px solid var(--pmse-border); border-bottom: none;
  border-radius: 8px 8px 0 0; cursor: pointer; color: var(--pmse-muted);
  transition: all .2s; font-family: inherit;
}
.pmse-tab-active { background: #fff; color: var(--pmse-primary); border-bottom: 2px solid #fff; position: relative; z-index: 1; }
.pmse-tab-cnt { background: #dcdaf5; color: var(--pmse-primary); border-radius: 10px; padding: 1px 7px; font-size: 11px; margin-left: 5px; }

/* ── Table ─────────────────────────────────────────────────── */
.pmse-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pmse-table th { background: #f0edfb; color: var(--pmse-primary); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 10px 13px; border-bottom: 2px solid var(--pmse-border); text-align: left; white-space: nowrap; }
.pmse-table td { padding: 10px 13px; border-bottom: 1px solid #f2f0f8; color: var(--pmse-text); vertical-align: middle; }
.pmse-table tr:hover td { background: #faf9ff; }
.pmse-table tr:last-child td { border-bottom: none; }

/* ── Loader ────────────────────────────────────────────────── */
.pmse-loader { display: flex; align-items: center; gap: 10px; padding: 20px; color: var(--pmse-muted); }
.pmse-spinner { width: 20px; height: 20px; border: 3px solid var(--pmse-border); border-top-color: var(--pmse-primary); border-radius: 50%; animation: pmse-spin .7s linear infinite; flex-shrink: 0; }
@keyframes pmse-spin { to { transform: rotate(360deg); } }

/* ── Pagination ────────────────────────────────────────────── */
.pmse-pagination { display: flex; flex-wrap: wrap; gap: 6px; padding: 14px 0 2px; }
.pmse-pg { padding: 6px 12px; border: 1px solid var(--pmse-border); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; font-family: inherit; color: var(--pmse-muted); transition: all .2s; }
.pmse-pg:hover   { background: #eceeff; border-color: #b3b0e8; color: var(--pmse-primary); }
.pmse-pg.active  { background: var(--pmse-primary); color: #fff; border-color: var(--pmse-primary); }
.pmse-pg:disabled { opacity: .4; cursor: not-allowed; }

/* ── Stats row ─────────────────────────────────────────────── */
.pmse-stats-row { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 12px; }
.pmse-stat-card { background: #fff; border: 1px solid var(--pmse-border); border-radius: var(--pmse-radius); padding: 18px; text-align: center; border-top: 4px solid var(--pmse-primary); box-shadow: var(--pmse-card-sh); }
.pmse-stat-card h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--pmse-muted); }
.pmse-stat-num { font-size: 34px; font-weight: 800; color: var(--pmse-primary); line-height: 1; }
.pmse-stat-green .pmse-stat-num { color: var(--pmse-success); }
.pmse-stat-red   .pmse-stat-num { color: var(--pmse-danger); }
.pmse-stat-cta   .pmse-stat-num { color: var(--pmse-cta); }
.pmse-loading-card { color: var(--pmse-muted); font-style: italic; }

/* ── Progress bar ──────────────────────────────────────────── */
.pmse-progress-wrap   { margin-top: 18px; }
.pmse-progress-track  { height: 10px; background: #e8e5f5; border-radius: 99px; overflow: hidden; }
.pmse-progress-fill   { height: 100%; background: linear-gradient(90deg, var(--pmse-primary), var(--pmse-cta)); border-radius: 99px; transition: width .4s ease; }
.pmse-progress-label  { margin-top: 7px; font-size: 13px; color: var(--pmse-muted); }

/* ── EVAL HEADER (single view) ─────────────────────────────── */
.pmse-eval-hdr {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 18px; flex-wrap: wrap;
  background: var(--pmse-primary);
  color: #fff; padding: 26px; border-radius: var(--pmse-radius);
  box-shadow: var(--pmse-card-sh);
}
.pmse-eval-ribbon { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; background: rgba(255,255,255,.15); border-radius: 4px; padding: 4px 10px; display: inline-block; margin-bottom: 10px; }
.pmse-eval-team   { margin: 0 0 10px; font-size: 22px; font-weight: 800; color: #fff; }
.pmse-eval-meta   { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.8); }
.pmse-eval-hdr-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.pmse-pill { display: inline-block; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.pmse-pill-pending      { background: rgba(255,255,255,.2); color: #fff; }
.pmse-pill-completed    { background: #dcffe8; color: #135a28; }
.pmse-pill-selected     { background: #dcffe8; color: #135a28; }
.pmse-pill-not_selected { background: #ffe8e5; color: #7a1c0e; }

/* ── Section boxes ─────────────────────────────────────────── */
.pmse-section { background: #fff; border: 1px solid var(--pmse-border); border-radius: var(--pmse-radius); overflow: hidden; box-shadow: var(--pmse-card-sh); }
.pmse-section-title { background: #f0edfb; border-bottom: 1px solid var(--pmse-border); padding: 13px 20px; font-size: 14px; font-weight: 700; color: var(--pmse-primary); }
.pmse-section-body  { padding: 20px; }
.pmse-sec-eval .pmse-section-title  { background: #edfbf1; color: var(--pmse-success); }
.pmse-sec-debug .pmse-section-title { background: #fff8e1; color: #7a5700; }

/* ── Info grid ─────────────────────────────────────────────── */
.pmse-info-grid { display: grid; gap: 14px; }
.pmse-grid-2 { grid-template-columns: repeat(auto-fit,minmax(250px,1fr)); }
.pmse-grid-3 { grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); }
.pmse-grid-4 { grid-template-columns: repeat(auto-fit,minmax(170px,1fr)); }
.pmse-infobox { background: #f9f8ff; border: 1px solid #ebe8f8; border-radius: 8px; padding: 12px 15px; }
.pmse-infobox-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--pmse-muted); margin-bottom: 3px; }
.pmse-infobox-value { font-size: 15px; font-weight: 600; color: var(--pmse-text); word-break: break-word; }

/* ── Long text block ───────────────────────────────────────── */
.pmse-longtext { border: 1px solid var(--pmse-border); border-radius: 8px; overflow: hidden; }
.pmse-longtext-label { background: #f0edfb; border-bottom: 1px solid var(--pmse-border); padding: 7px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--pmse-primary); }
.pmse-longtext-body  { padding: 14px; font-size: 14px; line-height: 1.7; color: var(--pmse-text); }

/* ── Q&A ───────────────────────────────────────────────────── */
.pmse-qa { border: 1px solid var(--pmse-border); border-radius: 10px; overflow: hidden; margin-bottom: 13px; }
.pmse-qa-q { background: #eceeff; padding: 13px 17px; font-size: 14px; font-weight: 600; color: var(--pmse-primary); border-bottom: 1px solid #d0ccf0; }
.pmse-qa-num { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; background: var(--pmse-primary); color: #fff; border-radius: 50%; font-size: 11px; font-weight: 800; margin-right: 7px; }
.pmse-qa-key { font-weight: 400; color: var(--pmse-muted); font-family: monospace; }
.pmse-qa-a { padding: 13px 17px; color: var(--pmse-text); font-size: 14px; line-height: 1.65; }
.pmse-qa-list { margin: 0; padding-left: 18px; }
.pmse-link { color: var(--pmse-primary) !important; word-break: break-all; }

/* ── Uploaded links ────────────────────────────────────────── */
.pmse-links-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pmse-link-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 18px;
  background: #eceeff; border: 1px solid #c5c8f0;
  border-radius: 8px; color: var(--pmse-primary) !important;
  font-size: 13px; font-weight: 700; text-decoration: none;
  transition: all .2s;
}
.pmse-link-btn:hover { background: var(--pmse-primary); color: #fff !important; }

/* ── Score form ────────────────────────────────────────────── */
.pmse-score-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(155px,1fr)); gap: 12px; }
.pmse-score-card { background: #f9f8ff; border: 1px solid #ebe8f8; border-radius: 10px; padding: 16px; text-align: center; }
.pmse-score-lbl   { font-size: 13px; font-weight: 700; color: var(--pmse-muted); margin-bottom: 3px; }
.pmse-score-range { font-size: 11px; color: #aaa; margin-bottom: 9px; }
.pmse-score-card .pmse-input { text-align: center; font-size: 22px; font-weight: 800; color: var(--pmse-primary); padding: 7px; }
.pmse-score-total { border-color: #b5efca; background: #edfbf1; }
.pmse-total-num { font-size: 40px; font-weight: 900; color: var(--pmse-success); line-height: 1; }
.pmse-save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding-top: 18px; border-top: 1px solid var(--pmse-border); margin-top: 14px; flex-wrap: wrap; }
#pmse-save-msg { flex: 1; min-width: 160px; }

/* ── Debug ─────────────────────────────────────────────────── */
.pmse-debug-block { margin-bottom: 10px; }
.pmse-debug-sum { cursor: pointer; font-weight: 600; color: #7a5700; font-size: 13px; user-select: none; }
.pmse-debug-pre { background: #1a0d40; color: #d4d0ff; padding: 14px; border-radius: 8px; font-size: 12px; line-height: 1.6; overflow-x: auto; white-space: pre-wrap; max-height: 400px; overflow-y: auto; margin-top: 8px; }

/* ── Public page ───────────────────────────────────────────── */
.pmse-public .pmse-pub-header { text-align: center; padding: 30px 20px 14px; }
.pmse-public .pmse-pub-header h2 { font-size: 24px; font-weight: 800; color: var(--pmse-primary); margin: 0 0 6px; }
.pmse-public .pmse-pub-header p  { color: var(--pmse-muted); margin: 0; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 768px) {
  .pmse-topbar { flex-direction: column; align-items: flex-start; }
  .pmse-eval-hdr { flex-direction: column; }
  .pmse-eval-hdr-right { align-items: flex-start; }
  .pmse-table { display: block; overflow-x: auto; }
  .pmse-save-bar { flex-direction: column; align-items: stretch; }
  .pmse-save-bar .pmse-btn { width: 100%; }
  .pmse-score-grid { grid-template-columns: 1fr 1fr; }
  .pmse-filter-row { flex-direction: column; }
  .pmse-filter-row .pmse-field { min-width: 100%; }
}
@media (max-width: 480px) {
  .pmse-tabs { flex-direction: column; }
  .pmse-tab  { border-radius: 8px; border: 1px solid var(--pmse-border); }
}