/*
 * dash-ui-common.css — shared styles for the two dashboard concept previews
 * (/dashboard-c1-preview and /dashboard-c2-preview) ONLY. Loaded by no other
 * page. Includes the bell styles because these pages reuse MyJobsUi::bell()
 * markup without loading myjobs-ui.css.
 */
body.duc1, body.duc2 { margin: 0; color: #17203a; font: 14px/1.45 Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
body.duc1 *, body.duc2 * { box-sizing: border-box; }
.du-sp { flex: 1; }

/* --- top bar ---------------------------------------------------------- */
.du-top { background: #fff; border-bottom: 1px solid #e6e8ef; padding: 10px 20px; display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 40; }
.du-logo { font-weight: 900; font-size: 15px; }
.du-logo span { color: #4f46e5; }
.du-navlink { color: #6b7280; font-size: 12.5px; font-weight: 700; text-decoration: none; border: 1px solid #e6e8ef; border-radius: 999px; padding: 6px 12px; white-space: nowrap; }
.du-navlink:hover { color: #4f46e5; border-color: #c9cdfb; }
.du-me { display: flex; align-items: center; gap: 9px; }
.du-ava { width: 34px; height: 34px; border-radius: 50%; background: #4f46e5; color: #fff; display: grid; place-items: center; font-weight: 800; }
.du-mename b { font-size: 13px; }

/* --- bell (markup from MyJobsUi::bell) -------------------------------- */
.ui-bellwrap { position: relative; }
.ui-bellbtn { position: relative; width: 36px; height: 36px; border: 1px solid #e6e8ef; border-radius: 10px; display: grid; place-items: center; color: #4b5568; background: #fff; cursor: pointer; }
.ui-bellbtn svg { width: 17px; height: 17px; }
.ui-bellbtn i { position: absolute; top: -5px; right: -5px; background: #dc2626; color: #fff; font: 800 10px/1 Inter; border-radius: 999px; padding: 3px 5px; font-style: normal; }
.ui-bellpop { position: absolute; right: 0; top: 44px; width: min(400px, calc(100vw - 24px)); background: #fff; border: 1px solid #e6e8ef; border-radius: 14px; box-shadow: 0 12px 34px -8px rgba(43,42,120,.18); overflow: hidden; z-index: 50; }
.ui-bell-h { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid #eef0f4; font-weight: 800; font-size: 14px; color: #17203a; }
.ui-bell-empty { color: #9aa1ad; font-size: 13px; text-align: center; padding: 22px 10px; }
.ui-lnk { border: 0; background: none; font-family: inherit; color: #4f46e5; font-size: 13px; font-weight: 700; cursor: pointer; padding: 0; }
.ui-bi { display: flex; gap: 11px; padding: 11px 14px; border-bottom: 1px solid #f2f4f8; align-items: flex-start; }
.ui-bi:last-child { border-bottom: 0; }
.ui-bico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.ui-bico svg { width: 15px; height: 15px; }
.k-admit { background: #f1e9fe; color: #7c3aed; }
.k-result { background: #dcfce7; color: #15803d; }
.k-exam { background: #e0e7ff; color: #2563eb; }
.k-key { background: #fef3c7; color: #b45309; }
.k-clock { background: #fdeaea; color: #ef4444; }
.ui-bimain { min-width: 0; flex: 1; }
.ui-bimain .ev { font-weight: 800; font-size: 12.5px; color: #17203a; }
.ui-bimain .job { color: #6b7280; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-bimain .tm { color: #9aa1ad; font-size: 10.5px; margin-top: 2px; }
.ui-bicta { flex: none; align-self: center; background: #eef0fe; color: #4f46e5; font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 6px 11px; text-decoration: none; }
.ui-bidot { width: 8px; height: 8px; background: #4f46e5; border-radius: 50%; flex: none; align-self: center; }
.ui-bi:not(.unread) .ui-bimain { opacity: .65; }

/* --- tone tokens ------------------------------------------------------- */
.q-red { background: #fdeaea; color: #dc2626; }
.q-amber { background: #fef3c7; color: #b45309; }
.q-purple { background: #f1e9fe; color: #7c3aed; }
.q-green { background: #dcfce7; color: #15803d; }
.q-blue { background: #e0e7ff; color: #2563eb; }

/* --- shared bits ------------------------------------------------------- */
.du-save { width: 34px; height: 34px; border: 1px solid #e6e8ef; border-radius: 9px; display: grid; place-items: center; color: #9aa1ad; background: #fff; cursor: pointer; flex: none; }
.du-save svg { width: 16px; height: 16px; }
.du-save:hover { color: #4f46e5; border-color: #c9cdfb; }
.du-apply { background: #4f46e5; color: #fff; border-radius: 9px; padding: 8px 15px; font-size: 12.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.du-more { text-align: center; padding-top: 10px; }
.du-more a { color: #4f46e5; font-weight: 800; font-size: 13px; text-decoration: none; }
.du-sub { color: #6b7280; font-size: 12.5px; }
.du-qdone { color: #9aa1ad; font-size: 12.5px; text-align: center; padding: 12px 0 4px; }
.du-qdone a { color: #4f46e5; font-weight: 700; text-decoration: none; }
.du-center { text-align: center; }

/* updates rail (concept 1, also reusable) */
.du-grp { color: #9aa1ad; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin: 10px 0 6px; }
.du-grp:first-child { margin-top: 2px; }
.du-up { display: flex; gap: 11px; padding: 9px 2px; border-top: 1px solid #eef0f4; align-items: flex-start; }
.du-up:first-of-type { border-top: 0; }
.du-uico { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; flex: none; }
.du-uico svg { width: 15px; height: 15px; }
.du-umain { min-width: 0; flex: 1; }
.du-uev { font-weight: 800; font-size: 12.5px; }
.du-ujob { color: #6b7280; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-ucta { color: #4f46e5; font-size: 12px; font-weight: 800; text-decoration: none; flex: none; align-self: center; }
.du-udot { width: 7px; height: 7px; border-radius: 50%; background: #4f46e5; flex: none; align-self: center; }

/* toast */
.ui-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); background: #191d33; color: #fff; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 11px 18px; z-index: 60; box-shadow: 0 10px 30px rgba(16,24,40,.25); max-width: min(480px, calc(100vw - 32px)); text-align: center; }

/* --- discovery sections (Jobs for you / Closing soon / Latest) --------- */
.du-tabbar { display: flex; gap: 7px; margin: 12px 0 4px; flex-wrap: wrap; }
.du-tabpill { border: 1px solid #e0e3ec; background: #fff; color: #3a4150; border-radius: 999px; padding: 6px 13px; font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; }
.du-tabpill b { font-weight: 800; color: #9aa1ad; }
.du-tabpill.on { background: #4f46e5; border-color: #4f46e5; color: #fff; }
.du-tabpill.on b { color: #fff; }
.du-pane.is-hidden { display: none; }
.du-save.on { color: #4f46e5; border-color: #c9cdfb; background: #eef0fe; cursor: default; }
/* closing soon rows */
.du-cs { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-top: 1px solid #eef0f4; }
.du-cs:first-of-type { border-top: 0; }
.du-days { width: 52px; flex: none; text-align: center; border-radius: 10px; padding: 6px 2px; font-size: 10px; font-weight: 700; line-height: 1.15; }
.du-days b { display: block; font-size: 14px; font-weight: 900; }
.du-days.red { background: #fdeaea; color: #dc2626; }
.du-days.amber { background: #fef3c7; color: #b45309; }
.du-days.mut { background: #f1f3f8; color: #6b7280; }
.du-csmain { flex: 1; min-width: 0; }
.du-cst { font-weight: 800; font-size: 13.5px; color: #17203a; text-decoration: none; }
.du-cst:hover { color: #4f46e5; }
.du-csm { color: #6b7280; font-size: 12px; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* latest rows */
.du-lt { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-top: 1px solid #eef0f4; }
.du-lt:first-of-type { border-top: 0; }
.du-tc { flex: none; font-size: 10px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; border-radius: 6px; padding: 3px 8px; }
.tc-recruitment { background: #e7e5ff; color: #4338ca; }
.tc-admit_card { background: #f1e9fe; color: #7c3aed; }
.tc-result { background: #dcfce7; color: #15803d; }
.tc-exam_date { background: #e0e7ff; color: #2563eb; }
.tc-answer_key { background: #fef3c7; color: #b45309; }
.tc-syllabus { background: #d9f2ef; color: #0f766e; }
.du-ltmain { flex: 1; min-width: 0; }
.du-ltt { font-weight: 700; font-size: 13px; color: #17203a; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.du-ltt:hover { color: #4f46e5; }
.du-ltm { color: #9aa1ad; font-size: 11px; margin-top: 1px; }
.du-panel.du-wide { grid-column: 1 / -1; margin-top: 14px; }

/* round-18: on narrow viewports the bell panel becomes a fixed full-width
   sheet under the header (right-anchored absolute overflowed off-screen). */
@media (max-width: 640px) {
  .ui-bellpop { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-height: 72vh; overflow: auto; }
}

/* GL-7: dev-gated email-alert controls (nav row, mobile icon+popover, avatar chip, switch) */
.du-mailrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: #3c4560; font-weight: 600; font-size: 12.5px; }
.du-mailnav svg { flex: none; }
.du-maillab { flex: 1; min-width: 0; }
.du-mailsub { display: block; font-weight: 600; font-size: 10.5px; color: #8a93a8; margin-top: 1px; line-height: 1.35; }
.du-sw { position: relative; width: 40px; height: 22px; flex: none; cursor: pointer; }
.du-sw input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.du-swtr { position: absolute; inset: 0; background: #d7dbe6; border-radius: 999px; transition: background .18s; }
.du-swkn { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(20,26,46,.3); transition: left .18s; }
.du-sw input:checked ~ .du-swtr { background: #4f46e5; }
.du-sw input:checked ~ .du-swkn { left: 20px; }
.du-sw.saving .du-swkn::after { content: ""; position: absolute; inset: 3px; border: 2px solid #4f46e5; border-top-color: transparent; border-radius: 50%; animation: duSp .6s linear infinite; }
@keyframes duSp { to { transform: rotate(360deg); } }
.du-mailico { position: relative; width: 36px; height: 36px; border-radius: 10px; border: 1px solid #e6e8ef; background: #fff; display: none; place-items: center; color: #3c4560; cursor: pointer; }
.du-mailpop { position: absolute; right: 10px; top: 56px; width: 300px; background: #fff; border: 1px solid #e6e8ef; border-radius: 14px; box-shadow: 0 14px 34px rgba(20,26,46,.18); padding: 12px; z-index: 60; }
.du-mailthx { margin-top: 10px; background: #e5f7ec; color: #15803d; border-radius: 10px; padding: 9px 12px; font-size: 11.5px; font-weight: 600; }
.du-avachip { display: none; align-items: center; gap: 6px; border: 1px solid #e6e8ef; border-radius: 999px; padding: 3px 10px 3px 3px; font-weight: 700; font-size: 12px; color: #141a2e; }
.du-avachip i { width: 26px; height: 26px; border-radius: 50%; background: #4f46e5; color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 800; }
@media (max-width: 640px) {
  .du-mailico { display: grid; }
  .du-avachip { display: flex; }
  .du-avachip ~ .dash-ava, .du-avachip ~ .dash-user-meta { display: none; }
}
@media (min-width: 641px) { .du-mailpop { display: none !important; } }
@media (max-width: 379px) {
  .du-avachip { padding: 3px; gap: 0; }
  .du-avachip b { display: none; }
  .du-mailico, .du-avachip i { width: 32px; height: 32px; }
}

/* ---- GL-9b: bell popover scrolls when long ---- */
.ui-bellpop { max-height: 72vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #c7cdf9 transparent; }
.ui-bellpop::-webkit-scrollbar { width: 6px; }
.ui-bellpop::-webkit-scrollbar-thumb { background: #c7cdf9; border-radius: 99px; }

/* ---- GL-12 (testers until go-live): bottom sticky AdX anchor ---- */
.fja-adx-anchor { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; align-items: center; background: #fff; box-shadow: 0 -4px 16px rgba(15, 23, 42, .10); padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px)); max-width: 100vw; overflow: hidden; }
.fja-adx-on .dash-body { padding-bottom: 118px; }
@media (max-width: 767px) { .fja-adx-on .dash-body { padding-bottom: 76px; } }
/* GL-21: pre-JS padding fallback for the PUBLIC forum shell's sticky
   (DiscussUi::publicAdx sets fja-adx-pub on <html>; removed if the ad
   comes back empty). */
.fja-adx-pub .dqp-main { padding-bottom: 118px; }
@media (max-width: 767px) { .fja-adx-pub .dqp-main { padding-bottom: 76px; } }

/* ===== GL-21: dashboard Discussions search strip (board -> strip -> JFY) ===== */
.du-dqs { margin-top: 14px; }
.du-dqsf { display: flex; align-items: center; gap: 12px; }
.du-dqsic { flex: none; width: 38px; height: 38px; border-radius: 12px; background: #eef2ff; color: #4338ca; display: inline-flex; align-items: center; justify-content: center; }
.du-dqst { flex: none; min-width: 0; }
.du-dqst b { display: block; font-size: 14px; }
.du-dqst small { color: #6b7280; font-size: 12px; white-space: nowrap; }
.du-dqsf input { flex: 1; min-width: 0; border: 1px solid #d7dbe3; border-radius: 10px; padding: 10px 14px; font: inherit; font-size: 13.5px; background: #fff; }
.du-dqsf input:focus { outline: 2px solid #c7d2fe; border-color: #a5b4fc; }
.du-dqsf button { flex: none; border: 0; background: #4338ca; color: #fff; border-radius: 10px; padding: 10px 20px; font-weight: 700; font-size: 13.5px; cursor: pointer; }
.du-dqsf button:hover { background: #3730a3; }
@media (max-width: 640px) {
  .du-dqsf { flex-wrap: wrap; }
  .du-dqst { flex: 1 1 auto; }
  .du-dqsf input { flex: 1 1 100%; order: 3; }
  .du-dqsf button { order: 4; margin-left: auto; }
}

/* ===== GL-16b: Discussion chip (renders for tester accounts only; additive,
   no existing selector modified) ===== */
.dq-chip { display: inline-flex; align-items: center; gap: 6px; background: #eef2ff; color: #3730a3; border-radius: 999px; padding: 5px 11px; font-size: 12.5px; font-weight: 700; text-decoration: none; line-height: 1.2; white-space: nowrap; flex: none; }
.dq-chip svg { flex: none; }
.dq-chip:hover { background: #e0e7ff; }
.dq-chip .dq-n { font-weight: 800; }
.dq-chip.sm { padding: 4px 9px; font-size: 11.5px; }
.du-lt .dq-chip { padding: 4px 9px; font-size: 11.5px; }
@media (max-width: 640px) {
  .du-lt .dq-lbl, .du-cline .dq-lbl { display: none; } /* tight rows: icon + count */
  /* GL-16d.1 (O-7): mobile action order [Save][chip][View]. dash-c2.css
     sets Save order:3 / View order:4 at equal specificity, so the values
     here are chosen to land correctly WHICHEVER file the page loads last:
     chip 4 sits after Save whether Save is 2 (ours) or 3 (dash-c2), and
     before View whether View is 5 (ours) or 4 (dash-c2 - tie, chip's
     earlier DOM spot wins). */
  .du-mbeta .du-lt .du-save { order: 2; }
  .du-mbeta .du-lt .dq-chip { order: 4; margin-top: 9px; }
  .du-mbeta .du-lt .du-ucta { order: 5; }
  /* GL-16d (O-8): Closing (m9) chip hugs the days-left pill on its line
     instead of drifting toward the Save/View cluster. */
  .du-cs-m9 .du-cline .dq-chip { margin-left: 2px; margin-right: auto; }
  .du-dract .dq-chip { padding: 7px 12px; }
  .ui-act .dq-chip { padding: 6px 11px; }
  .du-dract.has-dq { min-width: 0; max-width: 100%; }
  .du-dract.has-dq .dq-vd { display: none; } /* button reads "View" on mobile, chip rows only */
}

/* ---- GL-16c: row-chip v4 alignment + Option B --------------------------- */
/* Closing Soon desktop row (hidden <=640 by the m9 split): icon + count only,
   sitting before Save. Latest desktop order comes from the markup; the mobile
   rules above keep both sections' approved mobile layout untouched. */
.du-cs-old .dq-chip .dq-lbl { display: none; }
.du-cs-old .dq-chip { padding: 5px 9px; }