/* =====================================================================
   FYNI brand: one palette for every page of fynimentorship.org
   ---------------------------------------------------------------------
   Core orange   #FF5100   bars, banners, main buttons
   Gold          #F2A900   accents, badges, highlights
   Orange (text) #D94400   small orange text and links on white
   Ink           #231A14   body text
   Background    #FFF7F1   pages (a soft tint of the orange)
   White and cream carry the pages. Orange is the accent: buttons, a
   thin line under each top bar, links, highlights. No big orange fills.
   The pages hold no colours of their own: they all read the list
   below. To change a colour, edit the list and upload this file.
   ===================================================================== */
:root {
  /* ================= EDIT YOUR COLOURS HERE =================
     Every page takes its colours from this list. Change a value,
     upload this one file, and the whole site follows.           */

  /* Brand */
  --fyni-orange:        #FF5100;   /* main buttons, active tabs, the line under top bars */
  --fyni-orange-press:  #E64800;   /* button when pressed / hovered */
  --fyni-orange-text:   #D94400;   /* orange words and links on white */
  --fyni-orange-deep:   #8A3D12;   /* dark orange words on pale orange tags */
  --fyni-orange-soft:   #FFEDE2;   /* pale orange fills: tags, chips, highlights */
  --fyni-orange-tint:   #FFD9C2;   /* slightly stronger pale orange: borders of orange tags */
  --fyni-gold:          #F2A900;   /* accent: badges, stars, small highlights */
  --fyni-gold-text:     #8A5A00;   /* gold-brown words on pale gold */
  --fyni-gold-soft:     #FFF4D6;   /* pale gold fills: notes, "pending" tags */
  --fyni-gold-line:     #F3D9A8;   /* border of pale gold notes */

  /* Text */
  --fyni-ink:           #1E1B19;   /* headings and main text */
  --fyni-ink-2:         #34302C;   /* strong secondary text */
  --fyni-muted:         #5E5955;   /* normal secondary text */
  --fyni-faint:         #8C8682;   /* hints, placeholders, small print */

  /* Backgrounds and lines */
  --fyni-surface:       #FFFFFF;   /* cards, top bars */
  --fyni-surface-2:     #FAFAF9;   /* inputs, very light panels */
  --fyni-bg:            #F5F4F2;   /* page background */
  --fyni-bg-2:          #FFEDE2;   /* soft orange panels */
  --fyni-bg-3:          #EFEEEC;   /* sunken panels, empty bars, skeletons */
  --fyni-line:          #E7E4E1;   /* card borders and dividers */
  --fyni-line-strong:   #D5D0CB;   /* input borders, stronger dividers */

  /* Status (kept separate on purpose: green = yes, red = no) */
  --fyni-success:       #2E7D4F;
  --fyni-success-text:  #1F6B3A;
  --fyni-success-soft:  #E8F5EC;
  --fyni-success-line:  #BFE0CB;
  --fyni-danger:        #C23B22;
  --fyni-danger-soft:   #FBEAE6;
  --fyni-danger-line:   #F0C4B8;
  --fyni-info:          #1D4ED8;
  --fyni-info-soft:     #E6EEFB;

  /* Same colours as red, green, blue numbers, for see-through shadows and tints.
     If you change a colour above, change its numbers here to match. */
  --fyni-orange-rgb:    255, 81, 0;
  --fyni-gold-rgb:      242, 169, 0;
  --fyni-ink-rgb:       30, 27, 25;
  --fyni-bg-rgb:        245, 244, 242;
  --fyni-success-rgb:   46, 125, 79;
  /* ========================================================== */

  /* Older names some pages still use: they simply point at the list above */
  --orange: var(--fyni-orange);
  --orange-dark: var(--fyni-orange-text);
  --orange-deep: var(--fyni-orange-text);
  --orange-soft: var(--fyni-orange-soft);
  --gold: var(--fyni-gold);
  --cream: var(--fyni-bg);
  --cream-deep: var(--fyni-bg-2);
  --paper: var(--fyni-surface-2);
  --peach: var(--fyni-orange-soft);
  --ink: var(--fyni-ink);
  --espresso: var(--fyni-ink);
  --espresso-2: var(--fyni-ink-2);
  --gray: var(--fyni-muted);
  --gray-light: var(--fyni-faint);
  --muted: var(--fyni-muted);
  --soft: var(--fyni-muted);
  --line: var(--fyni-line);
  --surface-soft: var(--fyni-surface-2);
  --amber-deep: var(--fyni-orange-text);
  --amber-deep-2: var(--fyni-orange-press);
  --amber-shadow: rgba(var(--fyni-orange-rgb), .28);
  --chat-brown: var(--fyni-orange-press);
  --fyni-deep: var(--fyni-orange);
  --page: var(--fyni-bg);
}


/* ---------- top bars: white with a thin orange line ---------- */
.admin-header,
.portal-header,
body.chat-list-mode .portal-header,
body > header:not(.nav):not(.site-header),
.cl-header {
  background: var(--fyni-surface) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--fyni-line) !important;
  box-shadow: inset 0 -3px 0 var(--fyni-orange), 0 2px 10px rgba(var(--fyni-ink-rgb), .05) !important;
  color: var(--fyni-ink) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
.portal-header .brand-title, .admin-header h1, .admin-header .title, .admin-header .logo-mark span,
body > header:not(.nav):not(.site-header) h1, .cl-header h1, .cl-header .title { color: var(--fyni-ink) !important; }
.portal-header .brand-sub { color: var(--fyni-orange-text) !important; }
.portal-header .logo-mark img, .admin-header .logo-mark img,
body > header:not(.nav):not(.site-header) img { background: transparent !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
.portal-header .header-right .btn-outline, .admin-header .btn-outline, .bell-btn,
.portal-header .icon-btn, .portal-header button:not(.profile-avatar) {
  background: var(--fyni-bg-2) !important; border: 0 !important; color: var(--fyni-orange-text) !important; box-shadow: none !important;
}
.admin-header .btn-outline:hover, .bell-btn:hover { background: var(--fyni-orange) !important; color: #fff !important; }
.admin-header .bell-badge { border-color: #fff !important; }
.portal-header .profile-avatar { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--fyni-orange) !important; }
.cl-header, .cl-header * { color: var(--fyni-ink); }

/* ---------- big areas: cream with a soft warm glow (nothing hard-edged) ---------- */
.app, .page-banner, .login-screen, #screen-welcome, .results-header, .cert-hero {
  background-color: var(--fyni-bg) !important;
  background-image:
    radial-gradient(70% 55% at 100% 0%, rgba(var(--fyni-orange-rgb), .09), transparent 70%),
    radial-gradient(60% 45% at 0% 100%, rgba(var(--fyni-gold-rgb), .08), transparent 70%) !important;
  background-attachment: scroll !important;
  color: var(--fyni-ink) !important;
  border-color: transparent !important;
}
.page-banner, .results-header { border-bottom: 1px solid var(--fyni-line) !important; }
.app h1, .app h2, .app h3, .page-banner h1, .page-banner h2, .results-header h1, .results-header h2,
#screen-welcome h1, #screen-welcome h2, .cert-hero h1, .cert-hero h2 { color: var(--fyni-ink) !important; }
.app p, .app .muted, .page-banner p, .page-banner .lead, .results-header p, #screen-welcome p { color: var(--fyni-muted) !important; }
.page-banner strong, .app strong { color: var(--fyni-ink) !important; }
.page-banner .accent, .app .accent, #screen-welcome .accent, .results-header .accent { color: var(--fyni-orange) !important; }
.page-banner .eyebrow, .app .eyebrow, header .eyebrow, #screen-welcome .brand-label { color: var(--fyni-orange-text) !important; opacity: 1 !important; }
.page-banner .eyebrow::before, .page-banner .eyebrow::after, #screen-welcome .brand-divider { background: var(--fyni-orange) !important; }
.app .card, .app .feat, .app .feature { background: var(--fyni-surface) !important; border: 1px solid var(--fyni-line) !important; color: var(--fyni-ink) !important; box-shadow: 0 6px 18px rgba(var(--fyni-ink-rgb), .05) !important; }
.app-bar { background: var(--fyni-surface) !important; color: var(--fyni-ink) !important; border-bottom: 1px solid var(--fyni-line) !important; }
.event { background: var(--fyni-bg-2) !important; color: var(--fyni-ink) !important; border-left: 4px solid var(--fyni-orange) !important; }
.mentor-card { background: var(--fyni-surface) !important; background-image: none !important; border: 1px solid var(--fyni-line) !important; border-left: 4px solid var(--fyni-orange) !important; }
.mentor-card, .mentor-card * { color: var(--fyni-ink); }

/* ---------- admin ---------- */
.sec-pill.on { background: var(--fyni-orange) !important; border-color: var(--fyni-orange) !important; color: #fff !important; }
.sec-pill:not(.on) .cnt { background: var(--fyni-orange) !important; color: #fff !important; }
.tab-btn.active { color: var(--fyni-orange-text) !important; border-bottom-color: var(--fyni-orange) !important; }
.btn-approve, .cm-btn.primary { background: var(--fyni-orange) !important; border-color: var(--fyni-orange) !important; color: #fff !important; }
.row-actions .btn-approve { background: var(--fyni-success) !important; border-color: var(--fyni-success) !important; }   /* approve = green, on purpose */

/* ---------- portals ---------- */
.cl-chip.on { background: var(--fyni-orange) !important; border-color: var(--fyni-orange) !important; color: #fff !important; }
.cl-chip { color: var(--fyni-orange-text) !important; }

/* ---------- landing ---------- */
.ph:nth-child(3n+2) { background: linear-gradient(150deg, var(--fyni-orange-tint), var(--fyni-orange)) !important; }

/* ---------- login ---------- */
.login-screen .login-logo img { background: transparent; padding: 0; box-shadow: none; }
.login-screen > p, .login-screen > a, .login-screen .login-footer, .login-screen .foot { color: var(--fyni-muted) !important; }
.login-screen .login-card, .login-screen .card, .login-box { box-shadow: 0 14px 40px rgba(var(--fyni-ink-rgb), .08) !important; border: 1px solid var(--fyni-line) !important; }

/* ---------- facilitator guide ---------- */
header .hero p { color: var(--fyni-muted) !important; }

/* ---------- shared details ---------- */
::selection { background: var(--fyni-gold); color: var(--fyni-ink); }
a { -webkit-tap-highlight-color: rgba(var(--fyni-orange-rgb), .15); }
.site-header, header.nav { background: rgba(255, 255, 255, .96) !important; border-bottom-color: var(--fyni-line) !important; }
#verifyBtn { background: var(--fyni-orange) !important; }

/* landing: "Become a mentor" band, soft peach instead of a solid gold block */
.mentor-band { background: var(--fyni-bg-2) !important; border-top: 3px solid var(--fyni-orange); }
.mentor-band h2 { color: var(--fyni-ink) !important; }
.mentor-band p { color: var(--fyni-muted) !important; }
.mentor-band .btn-dark { background: var(--fyni-orange) !important; color: #fff !important; border-color: var(--fyni-orange) !important; }

/* ---------- readability fixes ---------- */
/* portals: plain cream page with faint dots (the coloured glows washed the page out) */
body::before { background-image: radial-gradient(circle, rgba(var(--fyni-ink-rgb), .05) 1px, transparent 1px) !important; background-size: 22px 22px !important; background-repeat: repeat !important; }
/* admin title next to the logo */
.admin-title b { color: var(--fyni-ink) !important; }
.admin-title small { color: var(--fyni-orange-text) !important; }
/* chat list search box (was white text for the old orange bar) */
.cl-search { background: var(--fyni-bg-3) !important; color: var(--fyni-muted) !important; border: 1px solid var(--fyni-line) !important; }
.cl-search input { color: var(--fyni-ink) !important; }
.cl-search input::placeholder { color: var(--fyni-faint) !important; }
.cl-search input::-webkit-search-cancel-button { filter: none !important; }
.chat-split .cl-header::before { color: var(--fyni-ink) !important; }
/* facilitator guide: "Open the app" button in the top bar */
header .top a.btn { color: var(--fyni-orange-text) !important; border-color: var(--fyni-orange-tint) !important; background: var(--fyni-surface) !important; }
/* career assessment: "Back to my portal" link */
.portal-link, .portal-link-label { color: var(--fyni-orange-text) !important; }

/* ---------- Fresh look: crisp white panels, light chat bubbles ----------
   Clean white and light grey surfaces, so the FYNI orange is the one colour
   that stands out. Chats work like familiar messaging apps: your messages in
   a light orange bubble, theirs in white, on a softly patterned background. */

/* App frame: white side rail, white chat list */
.bottom-nav { background: var(--fyni-surface) !important; }
.chat-pane-list, .chat-pane-list .cl-card { background: var(--fyni-surface) !important; border-right-color: var(--fyni-line) !important; }
.cl-header { box-shadow: none !important; border-bottom: 1px solid var(--fyni-line) !important; }
.cl-search { background: var(--fyni-bg-3) !important; border-color: transparent !important; }
.chat-split .cl-row:hover { background: var(--fyni-bg) !important; }
.cl-row.is-current, .cl-past-row.is-current { background: var(--fyni-orange-soft) !important; }
.cl-row.is-current::before { background: var(--fyni-orange) !important; }
.cl-group.is-current { border-color: var(--fyni-orange) !important; box-shadow: 0 0 0 1px var(--fyni-orange) !important; }

/* Chat background: warm light grey with a faint FYNI pattern */
.chat-messages {
  background-color: #F3EFEA !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23FF5100' stroke-opacity='.055' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='20' cy='22' r='7'/%3E%3Cpath d='M78 14v14M71 21h14'/%3E%3Cpath d='M98 78c-4-6 4-10 6-4 2-6 10-2 6 4l-6 6z'/%3E%3Cpath d='M18 86l8-8 8 8'/%3E%3Ccircle cx='62' cy='66' r='2.5'/%3E%3C/g%3E%3C/svg%3E") !important;
  background-size: 120px 120px !important;
}
.chat-detail-empty { background: #F3EFEA !important; }

/* Bubbles */
.msg-group.theirs .bubble { background: var(--fyni-surface) !important; color: var(--fyni-ink) !important; border: 0 !important; box-shadow: 0 1px 1.5px rgba(var(--fyni-ink-rgb), .12) !important; }
.msg-group.mine .bubble { background: #FFE3D2 !important; color: var(--fyni-ink) !important; border: 0 !important; box-shadow: 0 1px 1.5px rgba(var(--fyni-ink-rgb), .12) !important; }
.msg-group.mine .bubble-meta, .msg-group.theirs .bubble-meta { color: var(--fyni-faint) !important; }
.msg-group.mine .bubble-meta .receipt { color: var(--fyni-faint) !important; }
.msg-group.mine .bubble-meta .receipt.read { color: var(--fyni-orange) !important; }
.msg-group.mine .bubble a { color: var(--fyni-orange-text) !important; }
.msg-group.mine .bubble-attachment { background: rgba(255, 255, 255, .6) !important; }
.msg-group.mine .bubble-attachment .att-icon { background: #fff !important; }

/* Message box and send button */
.chat-input-row { background: #F3EFEA !important; border-top: 0 !important; }
.chat-input-row textarea { background: var(--fyni-surface) !important; border-color: transparent !important; box-shadow: 0 1px 1.5px rgba(var(--fyni-ink-rgb), .1); }
.chat-input-row textarea:focus { border-color: var(--fyni-orange-tint) !important; }
.send-btn { background: var(--fyni-orange) !important; color: #fff !important; box-shadow: none !important; }
.send-btn.is-empty { background: var(--fyni-orange) !important; color: #fff !important; opacity: .55; }