/* Hallmark · component: portal-isfahan-skin · genre: editorial-product · theme: Sifr Isfahan
 *
 * Progressive-enhancement skin for /portal (Access Request Portal).
 *
 * STRATEGY: same as admin-isfahan-skin.css. Layered AFTER portal.html's
 * inline <style> so it wins on equal-specificity cascade. No DOM changes.
 *
 * Per CLAUDE.md, the portal is "different chrome from admin — lighter,
 * single-purpose, no rail." This skin honors that: cream paper, sticky
 * marketing-style topbar, no admin rail. The form-heavy access-request
 * surface gets Isfahan form treatment (Isfahan inputs, cobalt focus,
 * saffron submit CTA, cream cards for AI results).
 *
 * SAFETY: removing the <link> in portal.html reverts to the original
 * steel-blue look. No JS depends on this file.
 *
 * PORTAL-SPECIFIC SELECTORS targeted:
 *   #authOverlay  · sign-in gate before workspace loads
 *   #portalApp    · the main portal app
 *   #adminBanner  · admin-mode banner shown when admin views portal
 *   .portal-header / .portal-badge / .portal-user / .portal-avatar
 *   .portal-email / .portal-links / .btn-portal-link / .btn-logout
 *   .icon-btn (notif/help)
 *   .portal-main / .portal-greeting / .portal-hero / .portal-card
 *   .field-input / .field-select / .request-textarea / .field-help
 *   .example-chip / .btn-submit / .ai-result / .ai-result-row / .ai-result-value
 *   .btn-confirm / .btn-edit / #myRequestsList / #toast
 */

body.skin-off { /* runtime opt-out marker */ }

/* ────────────────────────────────────────────────────────────────
   GLOBAL · cream paper, Inter body, Isfahan tokens
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off){
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
}

/* ────────────────────────────────────────────────────────────────
   AUTH OVERLAY · sign-in gate
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) #authOverlay{
  background: linear-gradient(180deg, var(--paper) 0%, var(--cream) 100%) !important;
}
body:not(.skin-off) #authOverlay h1,
body:not(.skin-off) #authOverlay h2{
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--cobalt-ink);
}
body:not(.skin-off) .btn-login{
  font-family: var(--font-sans);
  font-weight: 600;
  border-radius: 12px !important;
  transition: border-color var(--dur-s), box-shadow var(--dur-s), transform var(--dur-s);
}
body:not(.skin-off) .btn-login:hover{
  border-color: var(--cobalt) !important;
  box-shadow: 0 4px 14px rgba(14,26,58,0.06);
  transform: translateY(-1px);
}

/* ────────────────────────────────────────────────────────────────
   PORTAL HEADER · marketing-style topbar (no admin rail)
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) .portal-header,
body:not(.skin-off) header{
  background: rgba(250, 246, 236, 0.85);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
body:not(.skin-off) .portal-badge{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--cobalt);
  background: rgba(27, 58, 138, 0.08);
  border: 1px solid rgba(27, 58, 138, 0.18);
  padding: 4px 10px;
  border-radius: 999px;
}

body:not(.skin-off) .portal-user{
  display: flex;
  align-items: center;
  gap: 12px;
}
body:not(.skin-off) .portal-avatar{
  background: var(--cobalt-ink);
  color: var(--cream);
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: 0.04em;
  font-size: 11px;
  border-radius: 50%;
}
body:not(.skin-off) .portal-email{
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--muted);
  letter-spacing: 0.02em;
}
body:not(.skin-off) .portal-links{
  display: flex;
  align-items: center;
  gap: 8px;
}
body:not(.skin-off) .btn-portal-link{
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  background: transparent;
  transition: background var(--dur-xs), color var(--dur-xs), border-color var(--dur-xs);
}
body:not(.skin-off) .btn-portal-link:hover{
  background: var(--cream);
  color: var(--cobalt);
  border-color: var(--cobalt);
}
body:not(.skin-off) .btn-logout{
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  padding: 7px 12px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  transition: background var(--dur-xs), color var(--dur-xs);
}
body:not(.skin-off) .btn-logout:hover{
  background: var(--surface-3);
  color: var(--ink);
}

/* Notif bell + help button */
body:not(.skin-off) .icon-btn{
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted);
  border-radius: 8px;
  transition: background var(--dur-xs), color var(--dur-xs);
}
body:not(.skin-off) .icon-btn:hover{
  background: var(--cream);
  color: var(--ink);
}

/* Admin banner (shown when admin views portal) */
body:not(.skin-off) .admin-banner,
body:not(.skin-off) #adminBanner{
  background: var(--saffron-bg) !important;
  border: 1px solid rgba(198, 138, 46, 0.25) !important;
  color: #7d5512 !important;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  border-radius: 8px;
}

/* ────────────────────────────────────────────────────────────────
   PORTAL MAIN · greeting + hero card
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) .portal-main{
  background: transparent;
}
body:not(.skin-off) .portal-greeting{
  margin-bottom: 24px;
}
body:not(.skin-off) .portal-greeting h1{
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cobalt-ink);
  text-wrap: pretty;
}
body:not(.skin-off) .portal-greeting h1 em{
  font-style: italic;
  color: var(--cobalt);
}
body:not(.skin-off) .portal-greeting p{
  font-size: 15.5px;
  color: var(--ink-soft);
  line-height: 1.65;
  margin-top: 8px;
  max-width: 620px;
}

body:not(.skin-off) .portal-hero,
body:not(.skin-off) .portal-card{
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 14px;
  padding: 28px 32px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

body:not(.skin-off) .request-section-label,
body:not(.skin-off) .ai-section-label,
body:not(.skin-off) .field-group-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 8px;
}

/* ────────────────────────────────────────────────────────────────
   FORM FIELDS · Isfahan input styling
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) .field-input,
body:not(.skin-off) .field-select,
body:not(.skin-off) .request-textarea{
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--font-sans);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  transition: border-color var(--dur-xs), box-shadow var(--dur-xs);
  width: 100%;
}
body:not(.skin-off) .field-input:focus,
body:not(.skin-off) .field-select:focus,
body:not(.skin-off) .request-textarea:focus{
  outline: none;
  border-color: var(--cobalt);
  box-shadow: 0 0 0 3px rgba(27, 58, 138, 0.08);
}
body:not(.skin-off) .request-textarea{ min-height: 92px; line-height: 1.55; resize: vertical; }
body:not(.skin-off) .field-help{
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
  margin-top: 4px;
}
body:not(.skin-off) label{
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  display: block;
}

/* Example chips */
body:not(.skin-off) .example-chip{
  padding: 6px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--cream);
  color: var(--ink-soft);
  font-size: 12.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color var(--dur-xs), background var(--dur-xs), color var(--dur-xs);
}
body:not(.skin-off) .example-chip:hover{
  border-color: var(--cobalt);
  background: var(--surface);
  color: var(--cobalt);
}

/* ────────────────────────────────────────────────────────────────
   ACTION BUTTONS · saffron submit (earned moment), cobalt confirm
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) .btn-submit{
  background: var(--cobalt);
  color: #fff;
  border: 1px solid var(--cobalt);
  border-radius: 8px;
  padding: 12px 22px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-s) var(--ease-standard), transform var(--dur-xs), box-shadow var(--dur-s);
}
body:not(.skin-off) .btn-submit:hover:not(:disabled){
  background: var(--cobalt-deep);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(27,58,138,0.18);
}
body:not(.skin-off) .btn-submit:disabled{ opacity: 0.6; cursor: not-allowed; }

body:not(.skin-off) .btn-confirm{
  background: var(--saffron);
  color: #fff;
  border: 1px solid var(--saffron);
  border-radius: 8px;
  padding: 11px 20px;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(198,138,46,0.28);
  transition: background var(--dur-s), transform var(--dur-xs), box-shadow var(--dur-s);
}
body:not(.skin-off) .btn-confirm:hover{
  background: #b07822;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(198,138,46,0.35);
}
body:not(.skin-off) .btn-edit{
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color var(--dur-xs), background var(--dur-xs);
}
body:not(.skin-off) .btn-edit:hover{
  border-color: var(--cobalt);
  background: var(--cream);
  color: var(--ink);
}

/* ────────────────────────────────────────────────────────────────
   AI RESULT · cream card with serif accents
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) .ai-result{
  background: var(--cream);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cobalt);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin-top: 20px;
}
body:not(.skin-off) .ai-result-row{
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px;
}
body:not(.skin-off) .ai-result-row:last-child{ border-bottom: none; }
body:not(.skin-off) .ai-result-row > span:first-child,
body:not(.skin-off) .ai-result-row > label,
body:not(.skin-off) .ai-result-row > strong{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  min-width: 110px;
  flex-shrink: 0;
}
body:not(.skin-off) .ai-result-value{
  color: var(--ink);
  font-weight: 500;
  flex: 1;
  line-height: 1.55;
}

/* ────────────────────────────────────────────────────────────────
   MY REQUESTS LIST · request cards
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) #myRequestsList{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body:not(.skin-off) #myRequestsList > *{
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  padding: 16px 20px;
  transition: border-color var(--dur-xs), transform var(--dur-xs), box-shadow var(--dur-xs);
}
body:not(.skin-off) #myRequestsList > *:hover{
  border-color: var(--cobalt);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* ────────────────────────────────────────────────────────────────
   NOTIF PANEL · Isfahan card treatment
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) #notifPanel{
  background: var(--surface) !important;
  border: 1px solid var(--rule-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ────────────────────────────────────────────────────────────────
   TOAST · slide-up with Isfahan accent
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) #toast{
  background: var(--cobalt-ink);
  color: var(--cream);
  border-radius: 8px;
  padding: 11px 18px;
  font-size: 13.5px;
  font-weight: 500;
  font-family: var(--font-sans);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(255,255,255,0.06);
}

/* ────────────────────────────────────────────────────────────────
   STATUS PILLS reused inside #myRequestsList
   ──────────────────────────────────────────────────────────────── */
body:not(.skin-off) .pill,
body:not(.skin-off) .status-pill,
body:not(.skin-off) .request-status{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body:not(.skin-off) .pill.ok,
body:not(.skin-off) .status-pill.ok,
body:not(.skin-off) .pill-success{
  background: var(--status-ok-bg);
  color: var(--status-ok);
  border: 1px solid rgba(62, 139, 126, 0.25);
}
body:not(.skin-off) .pill.warn,
body:not(.skin-off) .status-pill.warn,
body:not(.skin-off) .pill-warn{
  background: var(--status-warn-bg);
  color: var(--status-warn);
  border: 1px solid rgba(198, 138, 46, 0.25);
}
body:not(.skin-off) .pill.crit,
body:not(.skin-off) .status-pill.crit,
body:not(.skin-off) .pill-danger{
  background: var(--status-crit-bg);
  color: var(--status-crit);
  border: 1px solid rgba(154, 74, 47, 0.25);
}
body:not(.skin-off) .pill.muted,
body:not(.skin-off) .pill-muted{
  background: var(--surface-3);
  color: var(--muted);
  border: 1px solid var(--rule-strong);
}