/* i2Canada portal theme.
 *
 * The palette is taken from the company logo itself — the maple leaf and the
 * wordmark are #A80808. Red carries the brand and every primary action; blue is
 * kept, but demoted to what it is good at: neutral information.
 *
 * Loaded last, so it overrides the per-page blocks. Everything is a variable:
 * change a colour here and the whole portal follows.
 */
:root {
  /* Brand — sampled from the logo */
  --brand:        #A80808;
  --brand-dark:   #7A0404;
  --brand-darker: #5A0303;
  --brand-light:  #C81010;
  --brand-tint:   #FDF2F2;   /* barely-there red, for backgrounds */
  --brand-line:   #F2D2D2;

  /* Information — blue is now secondary, not the identity */
  --info:      #1f6f8b;
  --info-tint: #EAF3FF;
  --info-ink:  #25507E;

  /* Meaning. Colour is never the only signal — every one of these is paired
     with an icon and a word in the markup. */
  --green:  #1D7A45;
  --green-tint: #E8F6EC;
  --amber:  #B57A00;
  --amber-tint: #FFF6E3;
  --red:    #B3261E;    /* problems — deliberately NOT the brand red */
  --red-tint: #FDECEA;
  --grey:   #8A9AA3;

  --bg:    #F5F6F8;
  --line:  #E4E7EA;
  --ink:   #23272B;
  --muted: #7A858C;

  --radius: 14px;
  --logo-h: 56px;   /* one place to grow the logo when the hi-res file lands */
}

/* ── Header ──────────────────────────────────────────────────────────────
   A deep red that lifts toward the right, with the leaf watermarked into it
   at low opacity — present, never in the way of the text. */
body > header {
  background:
    linear-gradient(100deg, var(--brand-darker) 0%, var(--brand) 52%, var(--brand-light) 100%);
  padding: 16px 22px;
  box-shadow: 0 2px 14px rgba(90, 3, 3, .22);
  position: relative;
  overflow: hidden;
}
/* The wordmark that used to sit here was removed on 2026-08-14. It was positioned 30px
   beyond the end of the band, so it was clipped through the middle of a word, and at .07
   opacity it was neither readable nor clearly decorative. If a watermark comes back, use
   the leaf ALONE — letters at low contrast always read as text that failed, never as
   texture — and keep it fully inside the band. */
body > header > * { position: relative; z-index: 1; }

/* The logo is a branding element now, not a favicon. */
.logo {
  height: var(--logo-h);
  width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .18);
}
@media (max-width: 640px) { :root { --logo-h: 42px; } }

/* The header dresses itself. It used to take its text colour and its lack of an underline
   from whatever each page defined inline — which every page did, until one did not, and the
   whole bar came out as underlined browser-default links on red. */
header a {
  color: #fff;
  text-decoration: none;
  border-color: rgba(255, 255, 255, .45);
  font-weight: 600;
}
header a:hover { background: rgba(255, 255, 255, .18); color: #fff; }
header a:visited { color: #fff; }
.badge { border-color: var(--brand); background: #FFC400; color: #3A2C00; }
.badge.urgent { background: #fff; color: var(--brand); }

/* ── Primary actions carry the brand ─────────────────────────────────── */
/* The colour matters as much as the background. This rule used to set only the
   background, and `button.btn` outranks a page's own `.btn` — so any page that styled its
   buttons white-with-red-text got red text on a red ground and the words vanished. The
   "Mark all as read" button on Notifications was a solid red rectangle with nothing on it
   (Vahid, 2026-08-14). .ghost below overrides both, so quiet buttons are unaffected. */
.btn, .cta, button.btn, .avatar {
  background: var(--brand);
  color: #fff;
}
.btn:hover, .cta:hover {
  background: var(--brand-dark);
  box-shadow: 0 5px 16px rgba(168, 8, 8, .30);
}
.cta.warn { background: var(--red); }
.cta.warn:hover { background: #8E1E17; }
.cta.ghost, .btn.ghost {
  background: #fff;
  color: var(--brand);
  border: 1.5px solid var(--brand);
}
.cta.ghost:hover, .btn.ghost:hover { background: var(--brand-tint); }
.mini { color: var(--brand); }
.mini:hover { border-color: var(--brand); background: var(--brand-tint); }
.mini.ok { border-color: var(--green); color: var(--green); }
.mini.no { border-color: var(--red); color: var(--red); }

:focus-visible { outline-color: rgba(168, 8, 8, .45) !important; }

/* ── Structure ───────────────────────────────────────────────────────── */
.tab.on { color: var(--brand); box-shadow: inset 0 3px 0 var(--brand); }
.prog, .chip { background: var(--brand-tint); color: var(--brand-dark); }
.chip.state { background: var(--info-tint); color: var(--info-ink); }
.idcode .code { color: var(--brand); }
.code { color: var(--brand); }
.avatar { background: var(--brand); }

.stage.current .dot, .tl.current .tl-dot {
  border-color: var(--brand);
  color: var(--brand);
  box-shadow: 0 0 0 4px rgba(168, 8, 8, .14);
}
.stage.done .dot, .tl.done .tl-dot { background: var(--green); border-color: var(--green); }
.tl.done:not(:last-child)::before { background: var(--green); }
.bar i, .docbar i { background: var(--green); }
.count.wait b { color: var(--info); }
.count.ok b { color: var(--green); }
.count.fix b { color: var(--red); }

.guide > summary, .howto > summary { color: var(--brand); }
.rule.ask { background: var(--brand-tint); color: var(--brand-dark); }
.n.unread { border-inline-start-color: var(--brand); }
.card h2 { color: var(--ink); }

/* ── Quick access — the right-hand rail ──────────────────────────────── */
.layout { display: flex; gap: 18px; align-items: flex-start; }
.layout .main { flex: 1; min-width: 0; }
.rail { width: 268px; flex: none; position: sticky; top: 18px; }
@media (max-width: 900px) {
  .layout { flex-direction: column; }
  .rail { width: 100%; position: static; }
}

.quick { background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
         padding: 14px; box-shadow: 0 4px 18px rgba(0, 0, 0, .05); }
.quick h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
            color: var(--muted); margin: 4px 6px 12px; }
.qlink { display: flex; align-items: center; gap: 12px; padding: 12px 12px;
         border-radius: 11px; text-decoration: none; color: var(--ink);
         font-size: 14.5px; font-weight: 600; border: 1px solid transparent;
         transition: background .15s, border-color .15s, transform .05s; }
.qlink:hover { background: var(--brand-tint); border-color: var(--brand-line); }
.qlink:active { transform: translateY(1px); }
.qlink .qi { width: 40px; height: 40px; flex: none; border-radius: 11px; display: grid;
             place-items: center; font-size: 18px; background: var(--brand-tint);
             color: var(--brand); }
.qlink .qt { min-width: 0; }
.qlink .qs { display: block; font-size: 12px; font-weight: 500; color: var(--muted);
             margin-top: 1px; }
.qlink .qn { margin-inline-start: auto; background: var(--brand); color: #fff;
             border-radius: 99px; min-width: 22px; height: 22px; padding: 0 7px;
             font-size: 12px; font-weight: 800; display: grid; place-items: center; }
.qlink .qn.calm { background: var(--info); }

/* ── Language switch ─────────────────────────────────────────────────── */
.lang { display: inline-flex; border: 1px solid rgba(255, 255, 255, .45);
        border-radius: 8px; overflow: hidden; margin-inline-start: 8px; }
.lang a { border: none !important; border-radius: 0 !important; margin: 0 !important;
          padding: 6px 9px !important; font-size: 12px; color: #fff; }
.lang a.on { background: #fff; color: var(--brand); font-weight: 800; }

/* Persian reads right-to-left; English does not. */
html[dir='rtl'] body { direction: rtl; }
html[dir='rtl'] .en-only { display: none; }
html[dir='ltr'] .fa-only { display: none; }


/* ── Case selector ───────────────────────────────────────────────────────
   A client with two applications must never wonder which one they are looking at.
   So this is not a small caret in a crowded header: it sits in the page, under the
   client's own name, at full width. It cannot be clipped, it cannot fall behind
   another menu, and it works from the keyboard. */
.cases {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  margin-top: 14px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .06);
  overflow: hidden;
}
.cases-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--brand-tint);
  border: none;
  border-bottom: 1px solid transparent;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.cases.on .cases-head { border-bottom-color: var(--line); }
.cases-head:hover { background: #FBE9E9; }
.cases-label {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--brand);
  flex: none;
}
.cases-now { flex: 1; min-width: 0; }
.cases-now b { display: block; font-size: 17px; color: var(--ink); letter-spacing: .3px; }
.cases-now span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.cases-count {
  flex: none;
  background: var(--brand);
  color: #fff;
  border-radius: 99px;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  font-size: 12.5px;
  font-weight: 800;
  display: grid;
  place-items: center;
}
.cases-caret { flex: none; color: var(--brand); transition: transform .15s; }
.cases.on .cases-caret { transform: rotate(180deg); }

.cases-list { display: none; }
.cases.on .cases-list { display: block; }

.caserow {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 20px;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.caserow:last-child { border-bottom: none; }
.caserow:hover { background: var(--brand-tint); }
.caserow.on { background: var(--brand-tint); box-shadow: inset 4px 0 0 var(--brand); }
.caserow-code {
  flex: none;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--brand);
  letter-spacing: .4px;
  min-width: 82px;
}
.caserow-body { flex: 1; min-width: 0; }
.caserow-prog { display: block; font-size: 14px; font-weight: 600; }
.caserow-meta { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.caserow-lock, .caserow-on { flex: none; font-size: 15px; }
.caserow-on { color: var(--brand); font-weight: 800; }

.casechip {
  background: rgba(255, 255, 255, .16);
  font-weight: 700;
}

@media (max-width: 560px) {
  .cases-head { flex-wrap: wrap; gap: 8px; }
  .cases-now b { font-size: 15.5px; }
  .caserow { flex-wrap: wrap; gap: 8px; }
  .caserow-code { min-width: 0; }
}

/* ── A submitted case is read-only, and says so ─────────────────────────── */
.chip.locked { background: #EEF1F3; color: #4A5A63; }
.lockbar {
  margin-top: 14px;
  background: #EEF1F3;
  border: 1px solid #D8DEE2;
  border-radius: 14px;
  padding: 15px 18px;
  font-size: 14px;
  line-height: 1.85;
  color: #3C4A52;
}
.lockbar b { color: var(--ink); }
.lockbar-open {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #D8DEE2;
  font-size: 13.5px;
}
.lockbar-open .cta { margin-top: 10px; }
/* ── the staff header ────────────────────────────────────────────────────────
   Three groups: who you are, where you can go, and what you do with your account.
   The tab you are on is filled in, so the page always says where it is. */

/* Lay the three groups out along one bar. Without this the groups are plain blocks and
   stack into a corner (the media query below already assumes the bar is a flex row). Scoped
   to .staffhead so the client pages — which style their own <header> — are left untouched. */
header.staffhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 12px; flex-wrap: wrap;
}
header.staffhead .tabs { flex: 1 1 auto; }
/* Whatever line it lands on, the account block ends at the right-hand edge. Without this,
   a wrapped second row starts at the left and the bar reads as broken (Vahid, 2026-08-14). */
header.staffhead .headright { margin-inline-start: auto; }

header .brandbar { display: flex; align-items: center; gap: 12px; }

header .brandlink { padding: 0; background: none; border: none; }
header .brandlink:hover { background: none; }

header.staffhead .who {
  font-weight: 700; font-size: 14px; line-height: 1.3;
  display: flex; flex-direction: column; gap: 2px;
  /* Explicit, or every page's own body colour leaks in and the name renders a
     different shade per tab — dark on dark red on some (Vahid, 2026-08-17). */
  color: #fff;
}

header .rolechip {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  opacity: .82;
}

header .tabs { display: flex; gap: 3px; flex-wrap: wrap; }

header .tab {
  display: inline-flex; align-items: center; gap: 6px;
  /* Slimmed 2026-08-17 (the Members tab made seven) and again 2026-08-24 (the
     My profile tab re-tipped it — in Chrome only; Safari's narrower font metrics
     still fit). Less padding, same legibility. */
  padding: 6px 9px; border-radius: 9px;
  font-size: 12.3px; font-weight: 700; white-space: nowrap;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .22);
}
header .tab:hover { background: rgba(255, 255, 255, .3); color: #fff; }
header .tab:visited { color: #fff; }

/* The page you are looking at. Filled, so it reads as a place, not a link. */
header .tab.on,
header .tab.on:visited {
  background: #fff; color: var(--brand); border-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .16);
}
header .tab.on:hover { background: #fff; }

header .headright { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* Your own account, not the office's pages. Quieter than a navigation tab on purpose: the
   two groups were drawn identically, so eleven matching pills sat across two rows with
   nothing to say which were places and which were settings. */
header .headright .tab {
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .16);
}
header .headright .tab:hover { background: rgba(255, 255, 255, .2); }

header .badge {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: #fff; color: var(--brand);
  font-size: 11px; font-weight: 800; line-height: 1;
}
header .tab.on .badge { background: var(--brand); color: #fff; }
header .badge.urgent { background: #ffd23f; color: #5a3b00; }

@media (max-width: 900px) {
  header { flex-wrap: wrap; gap: 10px; }
  header .tabs, header .headright { width: 100%; }
}

/* ── the danger zone on a case page ──────────────────────────────────────── */
.danger {
  margin-top: 26px; border: 1.5px solid #f0c9c4; border-radius: 14px;
  background: #fffafa; padding: 16px 18px;
}
.danger h3 { font-size: 14px; margin: 0 0 4px; color: #b3261e; }
.danger .cat { margin-bottom: 12px; }
.danger .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn-danger {
  padding: 8px 14px; border-radius: 9px; border: 1.5px solid #b3261e;
  background: #fff; color: #b3261e; font: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.btn-danger:hover { background: #b3261e; color: #fff; }