/* ────────────────────────────────────────────────────────────────
     UC ANR brand palette (ucanr.edu/dept/communications-toolkit/branding)
     ──────────────────────────────────────────────────────────────── */
  :root {
    --anr-blue:         #005fae;
    --anr-gold:         #fdbd10;
    --anr-light-blue:   #3aa8e4;
    --anr-dark-blue:    #003c61;
    --anr-red:          #ab312c;
    --anr-oak-green:    #67893e;
    --anr-salmon:       #d76f40;
    --anr-teal:         #0aa9b3;
    --anr-brown:        #956c26;
    --anr-bright-green: #9fc54d;
    --anr-yellow:       #f3cc30;
    --anr-orange-poppy: #e39b30;
    --anr-warm-grey:    #847d77;
  }

/* ────────────────────────────────────────────────────────────────
     Bootstrap, elevated: refined tokens (UC ANR palette)
     ──────────────────────────────────────────────────────────────── */
  :root {
    --bs-primary:        var(--anr-blue);
    --bs-primary-rgb:    0, 95, 174;
    --bs-link-color:     var(--anr-blue);
    --bs-link-hover-color: var(--anr-dark-blue);

    --bs-success:        var(--anr-oak-green);
    --bs-success-rgb:    103, 137, 62;
    --bs-danger:         var(--anr-red);
    --bs-danger-rgb:     171, 49, 44;
    --bs-warning:        var(--anr-orange-poppy);
    --bs-warning-rgb:    227, 155, 48;
    --bs-info:           var(--anr-teal);

    /* Neutrals: cool, slightly desaturated */
    --bs-body-bg:        #f6f7f9;
    --bs-body-color:     #1c2330;
    --bs-secondary-color:#5a6577;
    --bs-tertiary-color: #8a93a3;
    --bs-border-color:   #e6e8ed;
    --bs-border-color-translucent: rgba(28, 35, 48, 0.08);

    /* Tinted soft accent backgrounds (used in badges, callouts) */
    --tint-primary:  #e5eff8;
    --tint-success:  #eef2e7;
    --tint-danger:   #f7e9e8;
    --tint-warning:  #fbf0e1;
    --tint-info:     #e2f4f5;
    --tint-muted:    #eef0f4;
    --tint-dark:     #e2e4e9;

    --tone-primary:  var(--anr-dark-blue);
    --tone-success:  #4c6530;
    --tone-danger:   #832622;
    --tone-warning:  #96601c;
    --tone-info:     #077b82;
    --tone-muted:    #5a6577;
    --tone-dark:     #1c2330;

    /* Typography — UC ANR approved substitutes for Myriad Pro */
    --bs-body-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    --bs-body-font-size: 14.5px;
    --bs-body-line-height: 1.55;

    --bs-border-radius:    .55rem;
    --bs-border-radius-sm: .4rem;
    --bs-border-radius-lg: .75rem;

    --shadow-card: 0 1px 0 rgba(28,35,48,.02), 0 1px 2px rgba(28,35,48,.04);
  }

  html, body { font-family: var(--bs-body-font-family); }
  body {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-feature-settings: 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.005em;
  }

  /* ── Headings ─────────────────────────────────────────────────── */
  h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.018em;
    color: #0f1626;
  }
  .h1, h1 { font-weight: 700; }
  .h2, h2 { font-weight: 650; }
  .h3, .h4, .h5, h3, h4, h5 { font-weight: 600; }

  code, .font-mono, .mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

  /* ── Navbar (UC ANR Blue header) ──────────────────────────────── */
  .navbar {
    background: var(--anr-dark-blue) !important;
    border-bottom: 1px solid var(--anr-dark-blue);
    box-shadow: none !important;
    min-height: 56px;
    padding-top: .35rem;
    padding-bottom: .35rem;
  }
  .navbar-brand {
    font-weight: 700;
    letter-spacing: -.025em;
    font-size: 1.02rem;
    color: #fff !important;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
  }
  .navbar-brand img.brand-logo {
    height: 26px;
    width: auto;
    display: block;
  }
  .navbar .nav-link {
    color: rgba(255,255,255,.78);
    font-weight: 500;
    font-size: .9rem;
    padding: .5rem .85rem;
    border-radius: .45rem;
  }
  .navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
  .navbar .nav-link.active { color: #fff; background: rgba(255,255,255,.16); font-weight: 600; }

  .navbar .global-search {
    position: relative;
    width: 280px;
  }
  .navbar .global-search input {
    padding-left: 2rem;
    background: rgba(255,255,255,.12);
    border: 1px solid transparent;
    font-size: .85rem;
    color: #fff;
  }
  .navbar .global-search input::placeholder { color: rgba(255,255,255,.6); }
  .navbar .global-search input:focus {
    background: rgba(255,255,255,.18);
    border-color: var(--anr-gold);
    box-shadow: 0 0 0 3px rgba(253,189,16,.25);
  }
  .navbar .global-search .bi {
    position: absolute; left: .65rem; top: 50%;
    transform: translateY(-50%);
    color: rgba(255,255,255,.65);
    font-size: .9rem;
  }
  .navbar .global-search kbd {
    position: absolute; right: .5rem; top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.15);
    border: 1px solid rgba(255,255,255,.25);
    color: rgba(255,255,255,.8);
    font-size: .7rem;
    padding: 1px 5px;
    border-radius: 4px;
    font-family: var(--bs-body-font-family);
  }
  .navbar .btn-ghost { color: rgba(255,255,255,.85); }
  .navbar .btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
  .navbar .user-menu-toggle { color: #fff !important; }
  .navbar .user-menu-toggle .user-name { color: #fff; }
  .navbar .user-menu-toggle .user-role { color: rgba(255,255,255,.65) !important; }
  .navbar .user-menu-toggle .bi-chevron-down { color: rgba(255,255,255,.65) !important; }
  .navbar .btn-outline-secondary {
    border-color: rgba(255,255,255,.4);
    color: #fff;
    background: transparent;
  }
  .navbar .btn-outline-secondary:hover {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.6);
    color: #fff;
  }

  /* ── Sidebar ──────────────────────────────────────────────────── */
  .pms-sidebar {
    min-height: calc(100vh - 56px);
    width: 232px;
    flex-shrink: 0;
    background: #fff;
    border-right: 1px solid var(--bs-border-color);
    padding: 1rem .5rem;
  }
  .pms-sidebar .nav-section {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--bs-tertiary-color);
    padding: .8rem .85rem .35rem;
  }
  .pms-sidebar .nav-link {
    color: #3b4456;
    padding: .45rem .75rem;
    border-radius: .45rem;
    font-size: .885rem;
    font-weight: 500;
    margin: 1px .25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .pms-sidebar .nav-link .bi { color: var(--bs-tertiary-color); margin-right: .55rem; }
  .pms-sidebar .nav-link:hover { background: #f3f4f7; color: var(--bs-body-color); }
  .pms-sidebar .nav-link.active {
    background: var(--tint-primary);
    color: var(--tone-primary);
    font-weight: 600;
  }
  .pms-sidebar .nav-link.active .bi { color: var(--tone-primary); }
  .pms-sidebar .nav-link .count {
    font-size: .7rem;
    background: #eef0f4;
    color: var(--bs-secondary-color);
    padding: 1px 7px;
    border-radius: 999px;
    font-weight: 600;
  }
  .pms-sidebar .nav-link.active .count {
    background: rgba(0,95,174,.15);
    color: var(--tone-primary);
  }

  .pms-main {
    flex: 1;
    min-width: 0;
    padding: 1.75rem 2rem 3rem;
  }

  .pms-footer {
    margin-top: 2.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color);
    font-size: .78rem;
    color: var(--bs-tertiary-color);
  }

  /* ── Breadcrumbs ──────────────────────────────────────────────── */
  .breadcrumb {
    --bs-breadcrumb-divider-color: var(--bs-tertiary-color);
    --bs-breadcrumb-item-active-color: var(--bs-body-color);
    font-size: .82rem;
    margin-bottom: .35rem;
  }
  .breadcrumb a { color: var(--bs-secondary-color); text-decoration: none; }
  .breadcrumb a:hover { color: var(--bs-body-color); }
  .breadcrumb-item + .breadcrumb-item::before { content: '/'; color: var(--bs-tertiary-color); }

  /* ── Cards ────────────────────────────────────────────────────── */
  .card {
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    box-shadow: var(--shadow-card);
    background: #fff;
  }
  .card-header {
    background: #fff;
    border-bottom: 1px solid var(--bs-border-color);
    padding: .85rem 1.1rem;
    font-weight: 600;
    font-size: .9rem;
    color: var(--bs-body-color);
  }
  .card-header .eyebrow {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--bs-tertiary-color);
  }
  .card-body { padding: 1.1rem; }
  .card-body.tight { padding: .85rem 1.1rem; }

  /* ── Buttons ──────────────────────────────────────────────────── */
  .btn {
    font-weight: 500;
    font-size: .865rem;
    padding: .42rem .85rem;
    border-radius: .45rem;
    transition: all .12s ease;
    letter-spacing: -0.005em;
  }
  .btn-sm { font-size: .8rem; padding: .3rem .65rem; border-radius: .4rem; }
  .btn-xs { font-size: .73rem; padding: .15rem .45rem; border-radius: .35rem; }
  .btn:focus-visible { box-shadow: 0 0 0 3px rgba(0,95,174,.18); }

  .btn-primary {
    background: #005fae;
    border-color: #005fae;
    box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.08);
  }
  .btn-primary:hover, .btn-primary:focus { background: var(--anr-dark-blue); border-color: var(--anr-dark-blue); }
  .btn-primary:active { background: #002d49; border-color: #002d49; }

  .btn-outline-secondary {
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
    background: #fff;
  }
  .btn-outline-secondary:hover {
    background: #f3f4f7;
    border-color: #d8dbe2;
    color: var(--bs-body-color);
  }
  .btn-outline-primary {
    border-color: var(--bs-border-color);
    color: var(--tone-primary);
    background: #fff;
  }
  .btn-outline-primary:hover {
    background: var(--tint-primary);
    border-color: rgba(0,95,174,.3);
    color: var(--tone-primary);
  }
  .btn-outline-success {
    border-color: var(--bs-border-color);
    color: var(--tone-success);
    background: #fff;
  }
  .btn-outline-success:hover { background: var(--tint-success); border-color: rgba(31,157,108,.3); color: var(--tone-success); }

  .btn-ghost {
    color: var(--bs-secondary-color);
    background: transparent;
    border: 1px solid transparent;
  }
  .btn-ghost:hover { background: #f1f2f5; color: var(--bs-body-color); }

  /* ── Badges (soft tinted) ─────────────────────────────────────── */
  .badge {
    font-weight: 600;
    font-size: .72rem;
    padding: .22em .6em;
    border-radius: 999px;
    letter-spacing: 0;
    border: 1px solid transparent;
  }
  .badge.b-soft        { background: var(--tint-muted);    color: var(--tone-muted); }
  .badge.b-soft-pri    { background: var(--tint-primary);  color: var(--tone-primary); }
  .badge.b-soft-suc    { background: var(--tint-success);  color: var(--tone-success); }
  .badge.b-soft-dan    { background: var(--tint-danger);   color: var(--tone-danger); }
  .badge.b-soft-warn   { background: var(--tint-warning);  color: var(--tone-warning); }
  .badge.b-soft-info   { background: var(--tint-info);     color: var(--tone-info); }
  .badge.b-soft-dark   { background: var(--tint-dark);     color: var(--tone-dark); }
  .badge .bi { font-size: .8em; vertical-align: -1px; margin-right: 2px; }

  .badge.dot::before {
    content: '';
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    margin-right: 5px;
    vertical-align: 1px;
  }

  /* ── Tables ───────────────────────────────────────────────────── */
  .table {
    --bs-table-bg: transparent;
    margin-bottom: 0;
    font-size: .86rem;
  }
  .table > :not(caption) > * > * { padding: .65rem .85rem; }
  .table thead th {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-tertiary-color);
    font-weight: 600;
    background: #fafbfc;
    border-bottom: 1px solid var(--bs-border-color);
    border-top: none;
    padding-top: .55rem;
    padding-bottom: .55rem;
  }
  .table tbody td { border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
  .table tbody tr:last-child td { border-bottom: none; }
  .table-hover tbody tr:hover td { background: #fafbfc; }

  /* ── KPI cards ────────────────────────────────────────────────── */
  .kpi {
    border: 1px solid var(--bs-border-color);
    border-radius: .55rem;
    padding: .85rem 1rem;
    background: #fff;
    height: 100%;
    transition: border-color .15s ease;
  }
  .kpi:hover { border-color: #d8dbe2; }
  .kpi .label {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--bs-tertiary-color);
    font-weight: 600;
    margin-bottom: .35rem;
    display: flex;
    align-items: center;
    gap: .35rem;
  }
  .kpi .value {
    font-size: 1.35rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    color: #0f1626;
    line-height: 1.2;
  }
  .kpi .value.mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 1.2rem; font-weight: 600; }
  .kpi .sub {
    font-size: .78rem;
    color: var(--bs-secondary-color);
    margin-top: .25rem;
  }
  .kpi .sub.positive { color: var(--tone-success); }
  .kpi .sub.negative { color: var(--tone-danger); }
  .kpi .trend-bar {
    height: 4px;
    background: #eef0f4;
    border-radius: 999px;
    margin-top: .65rem;
    overflow: hidden;
    position: relative;
  }
  .kpi .trend-bar > span {
    display: block; height: 100%;
    background: var(--tone-primary);
    border-radius: 999px;
  }

  /* ── Page header ──────────────────────────────────────────────── */
  .page-title {
    font-size: 1.6rem;
    font-weight: 650;
    letter-spacing: -0.025em;
    color: #0f1626;
    line-height: 1.15;
    margin: 0;
  }
  .page-meta {
    color: var(--bs-secondary-color);
    font-size: .88rem;
    margin-top: .25rem;
  }
  .page-meta a { color: var(--bs-secondary-color); text-decoration: none; border-bottom: 1px dotted #c5c9d2; }
  .page-meta a:hover { color: var(--bs-body-color); border-bottom-color: var(--bs-secondary-color); }
  .meta-sep { color: var(--bs-tertiary-color); margin: 0 .55rem; }

  /* ── DL definition list cleanup ───────────────────────────────── */
  dl.spec { margin-bottom: 0; }
  dl.spec dt {
    font-size: .78rem;
    font-weight: 500;
    color: var(--bs-tertiary-color);
    padding: .4rem 0;
    border-bottom: 1px dashed var(--bs-border-color);
  }
  dl.spec dd {
    font-size: .87rem;
    color: var(--bs-body-color);
    padding: .4rem 0;
    margin: 0;
    border-bottom: 1px dashed var(--bs-border-color);
    text-align: right;
  }
  dl.spec dt:last-of-type, dl.spec dd:last-of-type { border-bottom: none; }

  /* ── Activity log ─────────────────────────────────────────────── */
  .activity-list { max-height: 460px; overflow-y: auto; }
  .activity-item {
    padding: .7rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    font-size: .85rem;
  }
  .activity-item:last-child { border-bottom: none; }
  .activity-item.note { background: #fbfbfd; }
  .activity-icon {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--tint-muted);
    color: var(--bs-secondary-color);
    display: flex; align-items: center; justify-content: center;
    font-size: .78rem;
    flex-shrink: 0;
    margin-top: 1px;
  }
  .activity-icon.note { background: var(--tint-warning); color: var(--tone-warning); }
  .activity-icon.scope { background: var(--tint-primary); color: var(--tone-primary); }
  .activity-icon.invoice { background: var(--tint-success); color: var(--tone-success); }
  .activity-icon.time { background: var(--tint-info); color: var(--tone-info); }
  .activity-body { flex: 1; min-width: 0; }
  .activity-actor { font-weight: 600; color: var(--bs-body-color); }
  .activity-time { font-size: .75rem; color: var(--bs-tertiary-color); margin-top: 2px; }
  .activity-note-text { color: var(--bs-secondary-color); margin-top: 2px; }

  /* ── Email thread ─────────────────────────────────────────────── */
  .email-entry {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .email-entry:last-child { border-bottom: none; }
  .email-entry.inbound { background: #fbfbfd; }
  .email-subject { font-weight: 600; font-size: .92rem; color: var(--bs-body-color); }
  .email-meta { font-size: .78rem; color: var(--bs-secondary-color); }
  .email-meta strong { color: #424b5d; font-weight: 600; }
  .email-body { font-size: .87rem; line-height: 1.6; color: #2c3445; white-space: pre-wrap; margin-top: .55rem; }
  .attach-chip {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #fff;
    border: 1px solid var(--bs-border-color);
    font-size: .76rem;
    padding: 2px 8px;
    border-radius: 999px;
    color: var(--bs-secondary-color);
    text-decoration: none;
  }
  .attach-chip:hover { border-color: rgba(0,95,174,.3); color: var(--tone-primary); }

  /* ── Approval banner ──────────────────────────────────────────── */
  .approval-strip {
    background: linear-gradient(180deg, #fafbfd 0%, #f5f7fb 100%);
    border: 1px solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    padding: .75rem 1.1rem;
    display: flex; align-items: center; gap: .85rem;
    font-size: .85rem;
  }
  .approval-strip .strip-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--tint-success);
    color: var(--tone-success);
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
  }

  /* ── Scope version list ───────────────────────────────────────── */
  .version-row {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .25rem;
    border-bottom: 1px dashed var(--bs-border-color);
    font-size: .83rem;
  }
  .version-row:last-child { border-bottom: none; }
  .version-row.current { font-weight: 600; }
  .v-tag {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    background: #f3f4f7;
    color: var(--bs-secondary-color);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: .76rem;
    font-weight: 500;
  }
  .v-tag.current { background: var(--tint-primary); color: var(--tone-primary); }

  /* ── Progress bar (budget) ────────────────────────────────────── */
  .budget-progress {
    height: 6px;
    background: #eef0f4;
    border-radius: 999px;
    margin-top: .5rem;
    overflow: hidden;
    display: flex;
  }
  .budget-progress > span { display: block; height: 100%; }
  .bp-used     { background: var(--tone-primary); }
  .bp-uninv    { background: rgba(0,95,174,.35); }
  .bp-buffer   { background: #d8dbe2; }
  .bp-over     { background: var(--tone-danger); }
  .legend-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    margin-right: .35rem;
    vertical-align: 1px;
  }

  /* ── Status pill big (header) ─────────────────────────────────── */
  .status-pill {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    background: var(--tint-success);
    color: var(--tone-success);
    border: 1px solid rgba(31,157,108,.18);
  }
  .status-pill::before {
    content: '';
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: pulse 2.2s ease-in-out infinite;
  }
  @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

  /* ── Form bits ────────────────────────────────────────────────── */
  .form-control, .form-select {
    font-size: .87rem;
    border-color: var(--bs-border-color);
    border-radius: .45rem;
  }
  .form-control:focus, .form-select:focus {
    border-color: rgba(0,95,174,.55);
    box-shadow: 0 0 0 3px rgba(0,95,174,.15);
  }
  .form-control::placeholder { color: var(--bs-tertiary-color); }

  /* ── Misc ─────────────────────────────────────────────────────── */
  .divider-eyebrow {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    font-weight: 600;
    color: var(--bs-tertiary-color);
  }
  .text-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
  .text-num  { font-variant-numeric: tabular-nums; }
  .hairline-top { border-top: 1px solid var(--bs-border-color); }
  ::selection { background: rgba(0,95,174,.18); }

  /* avatar stack */
  .avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--tint-muted);
    color: var(--tone-muted);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .7rem;
    font-weight: 600;
    border: 2px solid #fff;
  }
  .avatar.lg { width: 32px; height: 32px; font-size: .78rem; }
  .avatar-stack { display: inline-flex; }
  .avatar-stack .avatar:not(:first-child) { margin-left: -8px; }
  .avatar.a1 { background: #e5eff8; color: var(--anr-dark-blue); }
  .avatar.a2 { background: #eef2e7; color: #4c6530; }
  .avatar.a3 { background: #fbf0e1; color: #96601c; }
  .avatar.a4 { background: #f7e9e8; color: #832622; }
  .avatar.a5 { background: #e2f4f5; color: #077b82; }

/* ── Additional ──────────────────────────────────────────────── */
/* pagination */
.pagination .page-link {
  color: var(--bs-body-color);
  border-color: var(--bs-border-color);
  font-size: .82rem; font-weight: 500;
  padding: .35rem .65rem;
}
.pagination .page-link:hover { background: #f3f4f7; color: var(--bs-body-color); }
.pagination .page-item.active .page-link {
  background: var(--bs-primary); border-color: var(--bs-primary);
  color: #fff;
}
.pagination .page-item.disabled .page-link { background: #fafbfc; color: var(--bs-tertiary-color); }

/* ── Flash messages ───────────────────────────────────────────────── */
.pms-flash { position: sticky; top: 56px; z-index: 1040; }

.text-tertiary { color: var(--bs-tertiary-color); }
/* ── Misc page helpers ────────────────────────────────────────────── */
.page-meta a { color: var(--bs-secondary-color); text-decoration: none; border-bottom: 1px dotted #c5c9d2; }
.page-meta a:hover { color: var(--bs-body-color); border-bottom-color: var(--bs-secondary-color); }
.meta-sep { color: var(--bs-tertiary-color); margin: 0 .55rem; }

/* ── Status pill state variants (project_detail.html uses these class names) */
.status-pill.draft    { background: var(--tint-muted);   color: var(--tone-muted);   border-color: rgba(90,101,119,.15); }
.status-pill.draft::before { animation: none; }
.status-pill.pending  { background: var(--tint-warning);  color: var(--tone-warning);  border-color: rgba(217,144,33,.18); }
.status-pill.complete { background: var(--tint-primary);  color: var(--tone-primary);  border-color: rgba(0,95,174,.18); }
.status-pill.complete::before { animation: none; }
.status-pill.archived { background: var(--tint-dark);     color: var(--tone-dark);     border-color: rgba(28,35,48,.15); }
.status-pill.archived::before { animation: none; }

/* ── Email expand/collapse ────────────────────────────────────────── */
.email-body-full  { display: none; }
.email-expand-link { font-size: .82rem; color: var(--bs-secondary-color); }
.email-expand-link:hover { color: var(--bs-body-color); }

/* ── Client mark (initials avatar for client list) ────────────────── */
.client-mark {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: .78rem;
  letter-spacing: -.02em; flex-shrink: 0;
}
.cm-1 { background: linear-gradient(135deg, #005fae 0%, #3aa8e4 100%); }
.cm-2 { background: linear-gradient(135deg, #67893e 0%, #9fc54d 100%); }
.cm-3 { background: linear-gradient(135deg, #e39b30 0%, #f3cc30 100%); }
.cm-4 { background: linear-gradient(135deg, #ab312c 0%, #d76f40 100%); }
.cm-5 { background: linear-gradient(135deg, #0aa9b3 0%, #4dd0d8 100%); }
.cm-6 { background: linear-gradient(135deg, #956c26 0%, #c99a52 100%); }

/* ── Email search result rows ─────────────────────────────────────── */
.result-row {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: .75rem;
  padding: .85rem 1.1rem;
  border-bottom: 1px solid var(--bs-border-color);
  align-items: start;
  color: inherit;
}
.result-row:hover { background: #fafbfc; cursor: pointer; }
.result-row:last-child { border-bottom: none; }
.result-row.unread .subject { font-weight: 600; color: var(--bs-body-color); }

.result-row .dir-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .7rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.result-row.inbound  .dir-icon { background: var(--tint-success); color: var(--tone-success); }
.result-row.outbound .dir-icon { background: var(--tint-primary); color: var(--tone-primary); }

.result-row .subject {
  font-size: .9rem;
  color: var(--bs-secondary-color);
  margin-bottom: 2px;
}
.result-row .from {
  font-size: .78rem;
  color: var(--bs-tertiary-color);
}
.result-row .from .text-mono { font-size: .78rem; }
.result-row .preview {
  font-size: .82rem;
  color: var(--bs-secondary-color);
  margin-top: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.result-row .preview mark {
  background: var(--tint-warning);
  color: var(--tone-warning);
  padding: 0 2px;
  border-radius: 2px;
}
.result-row .time {
  font-size: .75rem;
  color: var(--bs-tertiary-color);
  text-align: right;
  white-space: nowrap;
}
.result-row .badges {
  margin-top: 3px;
  display: flex;
  justify-content: flex-end;
  gap: 3px;
}