/* ==========================================================================
   EmailInsightAI — UI design system
   Layered on top of Bootstrap 5.3. Loaded from resources/views/layouts/app.blade.php
   ========================================================================== */

:root{
  /* Neutrals */
  --emi-bg:#f4f6fa;
  --emi-surface:#ffffff;
  --emi-surface-2:#f9fafb;
  --emi-line:#e4e7ec;
  --emi-line-soft:#f0f1f5;
  --emi-ink:#101828;
  --emi-body:#475467;
  --emi-muted:#8a91a6;

  /* Brand */
  --emi-nav:#101a33;
  --emi-nav-hover:#1c2a4d;
  --emi-accent:#3355d1;
  --emi-accent-hover:#2a46b0;
  --emi-accent-soft:#eef2fd;

  /* Status */
  --emi-green:#067647;      --emi-green-bg:#ecfdf3;   --emi-green-line:#abefc6;
  --emi-amber:#b54708;      --emi-amber-bg:#fffaeb;   --emi-amber-line:#fedf89;
  --emi-red:#b42318;        --emi-red-bg:#fef3f2;     --emi-red-line:#fecdca;
  --emi-blue:#175cd3;       --emi-blue-bg:#eff8ff;    --emi-blue-line:#b2ddff;
  --emi-violet:#5925dc;     --emi-violet-bg:#f4f3ff;  --emi-violet-line:#d9d6fe;
  --emi-slate:#475467;      --emi-slate-bg:#f2f4f7;   --emi-slate-line:#e4e7ec;

  --emi-radius:10px;
  --emi-radius-lg:14px;
  --emi-shadow:0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.06);
  --emi-shadow-md:0 4px 8px -2px rgba(16,24,40,.08), 0 12px 24px -4px rgba(16,24,40,.08);
  --emi-shadow-pop:0 8px 16px -4px rgba(16,24,40,.10), 0 20px 32px -8px rgba(16,24,40,.12);
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body{
  background-color:var(--emi-bg) !important;
  color:var(--emi-body);
  font-family:'Inter','Segoe UI',-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
:focus-visible{ outline:2px solid var(--emi-accent); outline-offset:2px; border-radius:6px; }

/* --------------------------------------------------------------------------
   Top navigation
   -------------------------------------------------------------------------- */
.emi-navbar{
  background:var(--emi-nav) !important;
  padding:0 20px;
  min-height:56px;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
}
.emi-navbar .navbar-brand{
  color:#fff !important;
  font-weight:600;
  font-size:1.0625rem;
  letter-spacing:-.01em;
  margin:0 28px 0 0 !important;
  padding:16px 0;
  display:inline-flex; align-items:center; gap:9px;
}
.emi-navbar .navbar-brand .emi-logo{
  width:26px; height:26px; border-radius:7px;
  background:linear-gradient(135deg,#4c6ef5,#3355d1);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.78rem;
}
.emi-navbar .nav-link{
  color:rgba(255,255,255,.72) !important;
  font-weight:500 !important;
  font-size:.875rem;
  padding:8px 13px !important;
  border-radius:7px;
  transition:background .15s ease, color .15s ease;
}
.emi-navbar .nav-link:hover{ color:#fff !important; background:var(--emi-nav-hover); }
.emi-navbar .nav-link.active{ color:#fff !important; background:rgba(255,255,255,.12); }
.emi-navbar .navbar-nav{ align-items:center; gap:2px; }

/* Dropdown triggers that live in the navbar */
.emi-navbar .btn,
.emi-navbar .dropdown-toggle{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:rgba(255,255,255,.72) !important;
  font-weight:500 !important;
  font-size:.875rem;
  padding:8px 13px !important;
  border-radius:7px;
}
.emi-navbar .btn:hover,
.emi-navbar .dropdown-toggle:hover{ color:#fff !important; background:var(--emi-nav-hover) !important; }
.emi-navbar #d_dropdown{ color:rgba(255,255,255,.72) !important; }

/* Account chip on the right of the navbar */
.emi-navbar .emi-account{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.10) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  border-radius:999px;
  padding:5px 12px !important;
  color:#fff !important;
  font-size:.82rem;
}
.emi-navbar .emi-account:hover{ background:rgba(255,255,255,.18) !important; }

/* --------------------------------------------------------------------------
   Dropdown menus
   -------------------------------------------------------------------------- */
.dropdown-menu{
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius);
  box-shadow:var(--emi-shadow-pop);
  padding:6px;
  min-width:232px;
  font-size:.875rem;
}
.dropdown-item{
  border-radius:7px;
  padding:8px 10px;
  color:var(--emi-body);
  font-weight:500;
}
.dropdown-item:hover,.dropdown-item:focus{ background:var(--emi-surface-2); color:var(--emi-ink); }
.dropdown-item .badge{ font-weight:600; }
.dropdown-divider{ border-color:var(--emi-line); margin:6px 0; }

/* Count badge inside a dropdown row — neutral by default, colour only where it means something */
.emi-menu-count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 6px;
  background:var(--emi-slate-bg); color:var(--emi-slate);
  border-radius:6px;
  font-size:.6875rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
/* One variant per palette token, because an admin picks a sentiment's colour
   from the same six tokens the pills use. */
.emi-menu-count--green { background:var(--emi-green-bg);  color:var(--emi-green); }
.emi-menu-count--red   { background:var(--emi-red-bg);    color:var(--emi-red); }
.emi-menu-count--amber { background:var(--emi-amber-bg);  color:var(--emi-amber); }
.emi-menu-count--blue  { background:var(--emi-blue-bg);   color:var(--emi-blue); }
.emi-menu-count--violet{ background:var(--emi-violet-bg); color:var(--emi-violet); }
.emi-menu-count--slate { background:var(--emi-slate-bg);  color:var(--emi-slate); }

/* --------------------------------------------------------------------------
   Filter toolbar
   -------------------------------------------------------------------------- */
.emi-toolbar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:8px;
  padding:14px 16px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius-lg);
  box-shadow:var(--emi-shadow);
  margin-bottom:18px;
}
/* Trailing controls stay together and hug the right edge, wrapping as one unit */
.emi-toolbar__end{
  display:flex; align-items:center; gap:8px;
  margin-left:auto;
}
.emi-toolbar__divider{ width:1px; height:24px; background:var(--emi-line); margin:0 4px; }

/* A single filter chip — one shape for every filter, colour used only for the icon.
   Keep this selector to a single class so `.emi-chip.is-active` below can win. */
.emi-chip{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  background:var(--emi-surface) !important;
  border:1px solid var(--emi-line) !important;
  border-radius:8px !important;
  color:var(--emi-body) !important;
  font-size:.8125rem !important;
  font-weight:600 !important;
  line-height:1;
  white-space:nowrap;
  text-decoration:none;
  box-shadow:none !important;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.emi-chip:hover{
  background:var(--emi-surface-2) !important;
  border-color:#d0d5dd !important;
  color:var(--emi-ink) !important;
}
.emi-chip i{ font-size:.9rem; line-height:1; }
.emi-chip.dropdown-toggle::after{ margin-left:2px; color:var(--emi-muted); border-top-width:4px; }

/* Count badge inside a chip */
.emi-chip__count{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:20px; padding:0 6px;
  background:var(--emi-slate-bg);
  color:var(--emi-slate);
  border-radius:6px;
  font-size:.6875rem; font-weight:700;
  font-variant-numeric:tabular-nums;
}
.emi-chip__count--zero{ opacity:.5; }

/* Icon tints keep the chips distinguishable without a rainbow of backgrounds */
.emi-chip--reply     i{ color:var(--emi-amber); }
.emi-chip--group     i{ color:var(--emi-accent); }
.emi-chip--sentiment i{ color:var(--emi-violet); }
.emi-chip--action    i{ color:var(--emi-red); }
.emi-chip--lead      i{ color:var(--emi-green); }
.emi-chip--assigned  i{ color:var(--emi-blue); }
.emi-chip--promotion i{ color:#c11574; }

/* Split chip: a link that goes somewhere, plus a caret that opens the breakdown.
   Used by Leads, where "show me every opportunity" is the common request and
   picking a type first is the rarer one. The two halves are drawn as one chip. */
.emi-chip-group{ display:inline-flex; }
.emi-chip-group > .emi-chip:first-child{
  border-top-right-radius:0 !important;
  border-bottom-right-radius:0 !important;
}
.emi-chip-group > .emi-chip:last-child{
  border-top-left-radius:0 !important;
  border-bottom-left-radius:0 !important;
  border-left-color:transparent !important;
  padding-left:6px !important;
  padding-right:8px !important;
}
.emi-chip-group > .emi-chip.dropdown-toggle-split::after{ margin-left:0; }
.emi-chip--unread    i{ color:var(--emi-blue); }
.emi-chip--read      i{ color:var(--emi-green); }
.emi-chip--all       i{ color:var(--emi-slate); }
.emi-chip--summary   i{ color:#0e7090; }

/* Active filter */
.emi-chip.is-active{
  background:var(--emi-accent) !important;
  border-color:var(--emi-accent) !important;
  color:#fff !important;
}
.emi-chip.is-active i{ color:#fff !important; }
.emi-chip.is-active .emi-chip__count{ background:rgba(255,255,255,.22); color:#fff; }

/* Icon-only button (refresh) */
.emi-icon-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:8px;
  color:var(--emi-body);
  font-size:1rem;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}
.emi-icon-btn:hover{ background:var(--emi-surface-2); color:var(--emi-ink); }
.emi-icon-btn.is-spinning i{ animation:emi-spin .8s linear infinite; }
@keyframes emi-spin{ to{ transform:rotate(360deg); } }

/* Signed-in account chip in the toolbar */
.emi-user{
  display:inline-flex; align-items:center; gap:8px;
  height:36px; padding:0 12px;
  background:var(--emi-surface); border:1px solid var(--emi-line);
  border-radius:8px; color:var(--emi-body);
  font-size:.8125rem; font-weight:600;
}
.emi-user__avatar{
  width:22px; height:22px; border-radius:50%;
  background:var(--emi-accent-soft); color:var(--emi-accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.68rem; font-weight:700; text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.emi-card{
  background:var(--emi-surface);
  border:1px solid var(--emi-line) !important;
  border-radius:var(--emi-radius-lg) !important;
  box-shadow:var(--emi-shadow) !important;
  overflow:hidden;
}
.emi-card__header{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding:16px 20px;
  background:var(--emi-surface);
  border-bottom:1px solid var(--emi-line);
}
.emi-card__title{
  margin:0;
  font-size:1rem; font-weight:600; letter-spacing:-.01em;
  color:var(--emi-ink);
  display:flex; align-items:center; gap:10px;
}
.emi-card__title .emi-count-tag{
  background:var(--emi-slate-bg); color:var(--emi-slate);
  border-radius:6px; padding:2px 8px;
  font-size:.75rem; font-weight:600;
  font-variant-numeric:tabular-nums;
}
.emi-card__footer{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  flex-wrap:wrap;
  padding:12px 20px;
  background:var(--emi-surface);
  border-top:1px solid var(--emi-line);
  font-size:.8125rem; color:var(--emi-muted);
}

/* Search field */
.emi-search{ position:relative; width:280px; max-width:100%; }
.emi-search i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:var(--emi-muted); font-size:.875rem; pointer-events:none;
}
.emi-search input{
  width:100%; height:36px;
  padding:0 12px 0 34px;
  background:var(--emi-surface-2);
  border:1px solid var(--emi-line);
  border-radius:8px;
  font-size:.8125rem; color:var(--emi-ink);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.emi-search input::placeholder{ color:var(--emi-muted); }
.emi-search input:focus{
  outline:none; background:var(--emi-surface);
  border-color:var(--emi-accent);
  box-shadow:0 0 0 3px rgba(51,85,209,.12);
}

/* --------------------------------------------------------------------------
   Data table
   -------------------------------------------------------------------------- */
.emi-table-wrap{ overflow:auto; }
table.emi-table{
  width:100%; margin:0;
  border-collapse:separate; border-spacing:0;
  font-size:.8125rem;
}
table.emi-table thead th{
  position:sticky; top:0; z-index:2;
  background:var(--emi-surface-2);
  border:0;
  border-bottom:1px solid var(--emi-line);
  padding:11px 16px;
  color:var(--emi-muted);
  font-size:.6875rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.05em;
  white-space:nowrap;
  vertical-align:middle;
}
table.emi-table tbody td{
  padding:13px 16px;
  border:0; border-bottom:1px solid var(--emi-line-soft);
  color:var(--emi-body);
  vertical-align:middle;
  background:transparent;
}
table.emi-table tbody tr{ transition:background .12s ease; }
table.emi-table tbody tr:hover td{ background:var(--emi-surface-2); }
table.emi-table tbody tr:last-child td{ border-bottom:0; }

/* Column treatments */
.emi-col-num{ width:56px; color:var(--emi-muted); font-variant-numeric:tabular-nums; }
.emi-cell-strong{ color:var(--emi-ink); font-weight:600; }
.emi-cell-email{ color:var(--emi-body); }
.emi-cell-email a{ color:var(--emi-body); text-decoration:none; }
.emi-cell-email a:hover{ color:var(--emi-accent); text-decoration:underline; }
.emi-cell-subject{
  color:var(--emi-ink);
  max-width:340px;
  display:block;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emi-cell-date{ color:var(--emi-body); white-space:nowrap; font-variant-numeric:tabular-nums; }
.emi-cell-date small{ display:block; color:var(--emi-muted); font-size:.75rem; }

/* Avatar bubble next to sender name */
.emi-sender{ display:flex; align-items:center; gap:10px; }
.emi-sender .emi-cell-strong{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:190px;
}
.emi-sender__avatar{
  width:30px; height:30px; flex:none; border-radius:50%;
  background:var(--emi-accent-soft); color:var(--emi-accent);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; text-transform:uppercase;
}

/* Status pills */
.emi-pill{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px 9px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:.75rem; font-weight:600; white-space:nowrap;
}
.emi-pill::before{
  content:''; width:6px; height:6px; border-radius:50%;
  background:currentColor; flex:none;
}
.emi-pill--none::before{ display:none; }
.emi-pill--green { color:var(--emi-green);  background:var(--emi-green-bg);  border-color:var(--emi-green-line); }
.emi-pill--amber { color:var(--emi-amber);  background:var(--emi-amber-bg);  border-color:var(--emi-amber-line); }
.emi-pill--red   { color:var(--emi-red);    background:var(--emi-red-bg);    border-color:var(--emi-red-line); }
.emi-pill--blue  { color:var(--emi-blue);   background:var(--emi-blue-bg);   border-color:var(--emi-blue-line); }
.emi-pill--violet{ color:var(--emi-violet); background:var(--emi-violet-bg); border-color:var(--emi-violet-line); }
.emi-pill--slate { color:var(--emi-slate);  background:var(--emi-slate-bg);  border-color:var(--emi-slate-line); }
/* A next action worked out from the mail's other labels rather than
   recommended for it by the classifier. Dashed, so the column shows at a
   glance which rows are a real recommendation. Tooltip says why. */
.emi-pill--inferred{ border-style:dashed; background:transparent; }

/* Row actions */
.emi-actions{ display:flex; align-items:center; gap:6px; justify-content:flex-end; }
.emi-action{
  display:inline-flex; align-items:center; gap:6px;
  height:30px; padding:0 11px;
  border-radius:7px;
  border:1px solid var(--emi-line);
  background:var(--emi-surface);
  color:var(--emi-body);
  font-size:.75rem; font-weight:600;
  text-decoration:none; white-space:nowrap;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.emi-action:hover{ background:var(--emi-surface-2); border-color:#d0d5dd; color:var(--emi-ink); }
.emi-action--primary{ background:var(--emi-accent); border-color:var(--emi-accent); color:#fff; }
.emi-action--primary:hover{ background:var(--emi-accent-hover); border-color:var(--emi-accent-hover); color:#fff; }
.emi-action--track{ color:var(--emi-green); border-color:var(--emi-green-line); background:var(--emi-green-bg); }
.emi-action--track:hover{ color:var(--emi-green); background:#d1fadf; border-color:var(--emi-green); }

/* Empty state */
.emi-empty{ padding:64px 24px; text-align:center; }
.emi-empty i{ font-size:2rem; color:#cfd4df; display:block; margin-bottom:12px; }
.emi-empty h3{ font-size:.9375rem; font-weight:600; color:var(--emi-ink); margin:0 0 4px; }
.emi-empty p{ font-size:.8125rem; color:var(--emi-muted); margin:0; }

/* --------------------------------------------------------------------------
   DataTables overrides
   -------------------------------------------------------------------------- */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc{
  background-image:none !important;
  position:relative;
  cursor:pointer;
  padding-right:26px !important;
}
/* Sort indicators drawn as inline SVG so they never depend on an icon font's codepoints */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after{
  content:'';
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:10px; height:10px;
  background-repeat:no-repeat; background-position:center; background-size:10px 10px;
}
/* neutral: up + down chevrons, muted */
table.dataTable thead th.sorting::after{
  opacity:.45;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%238a91a6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4L5 1.5 7.5 4'/%3E%3Cpath d='M2.5 6L5 8.5 7.5 6'/%3E%3C/svg%3E");
}
table.dataTable thead th.sorting:hover::after{ opacity:.8; }
/* ascending */
table.dataTable thead th.sorting_asc::after{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%233355d1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6.5L5 3.5 8 6.5'/%3E%3C/svg%3E");
}
/* descending */
table.dataTable thead th.sorting_desc::after{
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='%233355d1' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 3.5L5 6.5 8 3.5'/%3E%3C/svg%3E");
}

/* Every DataTables instance in the app, not just the ones with hand-added classes */
.dataTables_wrapper .dataTables_paginate{
  display:flex; align-items:center; gap:4px; flex-wrap:wrap;
  padding-top:0 !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:32px; height:32px; margin:0 !important; padding:0 9px !important;
  border:1px solid var(--emi-line) !important;
  border-radius:7px !important;
  background:var(--emi-surface) !important;
  color:var(--emi-body) !important;
  font-size:.75rem !important; font-weight:600 !important;
  line-height:1 !important;
  box-shadow:none !important;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--emi-surface-2) !important;
  color:var(--emi-ink) !important;
  border-color:#d0d5dd !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--emi-accent) !important;
  border-color:var(--emi-accent) !important;
  color:#fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
  background:var(--emi-surface) !important;
  color:var(--emi-muted) !important;
  border-color:var(--emi-line) !important;
  opacity:.55; cursor:default;
}
.dataTables_wrapper .dataTables_paginate span{ display:inline-flex; gap:4px; }
.dataTables_wrapper .dataTables_paginate .ellipsis{ color:var(--emi-muted); padding:0 4px; }

/* Built-in search / length controls */
.dataTables_wrapper .dataTables_filter{ margin-bottom:12px; }
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label{
  font-size:.8125rem; color:var(--emi-muted); font-weight:500;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select{
  height:36px; margin-left:8px; padding:0 12px;
  background:var(--emi-surface-2);
  border:1px solid var(--emi-line);
  border-radius:8px;
  font-size:.8125rem; color:var(--emi-ink);
}
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus{
  outline:none; background:var(--emi-surface);
  border-color:var(--emi-accent);
  box-shadow:0 0 0 3px rgba(51,85,209,.12);
}
.dataTables_wrapper .dataTables_empty{ padding:36px 16px !important; color:var(--emi-muted); text-align:center; }
.emi-page-btn{
  display:inline-flex !important; align-items:center; justify-content:center;
  min-width:32px; height:32px; padding:0 9px !important;
  border:1px solid var(--emi-line) !important;
  border-radius:7px !important;
  background:var(--emi-surface) !important;
  color:var(--emi-body) !important;
  font-size:.75rem !important; font-weight:600 !important;
  text-decoration:none !important;
  cursor:pointer;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.emi-page-btn:hover{ background:var(--emi-surface-2) !important; color:var(--emi-ink) !important; border-color:#d0d5dd !important; }
.emi-page-btn.current{ background:var(--emi-accent) !important; border-color:var(--emi-accent) !important; color:#fff !important; }
.emi-page-btn.disabled{ opacity:.45; pointer-events:none; }
.dataTables_info{ font-size:.8125rem; color:var(--emi-muted); padding:0 !important; }

/* --------------------------------------------------------------------------
   Modal
   -------------------------------------------------------------------------- */
.modal-content{ border:0; border-radius:var(--emi-radius-lg); box-shadow:var(--emi-shadow-pop); }
.modal-header{ border-bottom:1px solid var(--emi-line); padding:16px 20px; }
.modal-title{ font-size:1rem; font-weight:600; color:var(--emi-ink); }
.modal-body{ padding:20px; font-size:.875rem; }

/* ==========================================================================
   BOOTSTRAP PRIMITIVES
   Restyled so every page that uses plain Bootstrap markup picks up the same
   design language without needing its own stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Headings & content rhythm
   -------------------------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{ color:var(--emi-ink); font-weight:600; letter-spacing:-.015em; }
h1{ font-size:1.5rem; }
h2{ font-size:1.25rem; }
h3{ font-size:1.0625rem; }
h4{ font-size:1rem; }
h5,h6{ font-size:.9375rem; }
hr{ border-color:var(--emi-line); opacity:1; }
a{ color:var(--emi-accent); text-decoration:none; }
a:hover{ color:var(--emi-accent-hover); text-decoration:underline; }
.text-muted{ color:var(--emi-muted) !important; }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.card{
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius-lg);
  box-shadow:var(--emi-shadow);
}
.card-header{
  background:var(--emi-surface) !important;
  border-bottom:1px solid var(--emi-line);
  padding:16px 20px;
  color:var(--emi-ink) !important;
  font-size:1rem;
  font-weight:600;
  letter-spacing:-.01em;
  border-radius:var(--emi-radius-lg) var(--emi-radius-lg) 0 0 !important;
  /* Neutralises the old blue→green gradient headers wherever they survive */
  background-image:none !important;
}
.card-header h1,.card-header h2,.card-header h3,
.card-header h4,.card-header h5,.card-header span{ color:var(--emi-ink) !important; }
/* Headers that were coloured blocks carried .text-white / .bg-* for contrast.
   The header is now a light surface, so those would render invisible text. */
.card-header.text-white,
.card-header.bg-primary,
.card-header.bg-success,
.card-header.bg-info,
.card-header.bg-dark,
.card-header.bg-secondary{
  background:var(--emi-surface) !important;
  color:var(--emi-ink) !important;
}
.card-header.text-white *,
.card-header .text-white{ color:var(--emi-ink) !important; }
.card-body{ padding:20px; }
.card-footer{
  background:var(--emi-surface);
  border-top:1px solid var(--emi-line);
  padding:12px 20px;
  border-radius:0 0 var(--emi-radius-lg) var(--emi-radius-lg);
  font-size:.8125rem;
  color:var(--emi-muted);
}

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.table{
  --bs-table-bg:transparent;
  --bs-table-striped-bg:var(--emi-surface-2);
  --bs-table-striped-color:var(--emi-body);
  --bs-table-hover-bg:var(--emi-surface-2);
  --bs-table-hover-color:var(--emi-ink);
  --bs-table-border-color:var(--emi-line-soft);
  margin-bottom:0;
  font-size:.8125rem;
  color:var(--emi-body);
  border-color:var(--emi-line-soft);
}
.table > :not(caption) > * > *{ background-color:transparent; box-shadow:none; }
.table thead th{
  background:var(--emi-surface-2);
  border-bottom:1px solid var(--emi-line) !important;
  border-top:0;
  padding:11px 16px;
  color:var(--emi-muted);
  font-size:.6875rem;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
  vertical-align:middle;
}
.table tbody td{
  padding:13px 16px;
  border-bottom:1px solid var(--emi-line-soft);
  vertical-align:middle;
  color:var(--emi-body);
}
.table tbody tr:last-child td{ border-bottom:0; }
/* The heavy 1px grid reads as noise — keep horizontal rules only */
.table-bordered > :not(caption) > * > *{ border-left:0; border-right:0; }
.table-bordered > :not(caption) > *{ border-width:0; }
.table-striped > tbody > tr:nth-of-type(odd) > *{ color:var(--emi-body); }
.table-responsive{ border-radius:var(--emi-radius); }

/* --------------------------------------------------------------------------
   Buttons — one shape and one radius across the app
   -------------------------------------------------------------------------- */
.btn{
  --bs-btn-focus-shadow-rgb:51,85,209;
  border-radius:8px;
  padding:8px 16px;
  font-size:.8125rem;
  font-weight:600;
  line-height:1.4;
  border-width:1px;
  transition:background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.btn-sm{ padding:5px 11px; font-size:.75rem; border-radius:7px; }
.btn-lg{ padding:11px 22px; font-size:.9375rem; border-radius:9px; }
/* A single radius language: opt-out pills are normalised */
.btn.rounded-pill{ border-radius:8px !important; }
.btn.rounded-pill.btn-sm{ border-radius:7px !important; }

.btn-primary{
  --bs-btn-bg:var(--emi-accent);        --bs-btn-border-color:var(--emi-accent);
  --bs-btn-hover-bg:var(--emi-accent-hover); --bs-btn-hover-border-color:var(--emi-accent-hover);
  --bs-btn-active-bg:var(--emi-accent-hover); --bs-btn-active-border-color:var(--emi-accent-hover);
  --bs-btn-disabled-bg:var(--emi-accent); --bs-btn-disabled-border-color:var(--emi-accent);
}
.btn-secondary{
  --bs-btn-color:var(--emi-body);       --bs-btn-bg:var(--emi-surface);       --bs-btn-border-color:var(--emi-line);
  --bs-btn-hover-color:var(--emi-ink);  --bs-btn-hover-bg:var(--emi-surface-2); --bs-btn-hover-border-color:#d0d5dd;
  --bs-btn-active-color:var(--emi-ink); --bs-btn-active-bg:var(--emi-surface-2); --bs-btn-active-border-color:#d0d5dd;
  --bs-btn-disabled-color:var(--emi-muted); --bs-btn-disabled-bg:var(--emi-surface); --bs-btn-disabled-border-color:var(--emi-line);
}
.btn-success{
  --bs-btn-bg:var(--emi-green);         --bs-btn-border-color:var(--emi-green);
  --bs-btn-hover-bg:#05603a;            --bs-btn-hover-border-color:#05603a;
  --bs-btn-active-bg:#05603a;           --bs-btn-active-border-color:#05603a;
  --bs-btn-disabled-bg:var(--emi-green); --bs-btn-disabled-border-color:var(--emi-green);
}
.btn-danger{
  --bs-btn-bg:var(--emi-red);           --bs-btn-border-color:var(--emi-red);
  --bs-btn-hover-bg:#912018;            --bs-btn-hover-border-color:#912018;
  --bs-btn-active-bg:#912018;           --bs-btn-active-border-color:#912018;
  --bs-btn-disabled-bg:var(--emi-red);  --bs-btn-disabled-border-color:var(--emi-red);
}
/* Bootstrap's yellow warning button carries dark text and reads as a caution
   strip; an amber fill with white text sits with the rest of the palette. */
.btn-warning{
  --bs-btn-color:#fff;                  --bs-btn-bg:var(--emi-amber);         --bs-btn-border-color:var(--emi-amber);
  --bs-btn-hover-color:#fff;            --bs-btn-hover-bg:#93370d;            --bs-btn-hover-border-color:#93370d;
  --bs-btn-active-color:#fff;           --bs-btn-active-bg:#93370d;           --bs-btn-active-border-color:#93370d;
  --bs-btn-disabled-color:#fff;         --bs-btn-disabled-bg:var(--emi-amber); --bs-btn-disabled-border-color:var(--emi-amber);
}
.btn-info{
  --bs-btn-color:#fff;                  --bs-btn-bg:var(--emi-blue);          --bs-btn-border-color:var(--emi-blue);
  --bs-btn-hover-color:#fff;            --bs-btn-hover-bg:#1349a4;            --bs-btn-hover-border-color:#1349a4;
  --bs-btn-active-color:#fff;           --bs-btn-active-bg:#1349a4;           --bs-btn-active-border-color:#1349a4;
  --bs-btn-disabled-color:#fff;         --bs-btn-disabled-bg:var(--emi-blue); --bs-btn-disabled-border-color:var(--emi-blue);
}
.btn-dark{
  --bs-btn-bg:var(--emi-ink);           --bs-btn-border-color:var(--emi-ink);
  --bs-btn-hover-bg:#000;               --bs-btn-hover-border-color:#000;
}
.btn-light{
  --bs-btn-color:var(--emi-body);       --bs-btn-bg:var(--emi-surface);       --bs-btn-border-color:var(--emi-line);
  --bs-btn-hover-color:var(--emi-ink);  --bs-btn-hover-bg:var(--emi-surface-2); --bs-btn-hover-border-color:#d0d5dd;
}
.btn-outline-primary{
  --bs-btn-color:var(--emi-accent);     --bs-btn-border-color:var(--emi-accent);
  --bs-btn-hover-bg:var(--emi-accent);  --bs-btn-hover-border-color:var(--emi-accent);
  --bs-btn-active-bg:var(--emi-accent); --bs-btn-active-border-color:var(--emi-accent);
}
.btn-outline-secondary{
  --bs-btn-color:var(--emi-body);       --bs-btn-border-color:var(--emi-line);
  --bs-btn-hover-color:var(--emi-ink);  --bs-btn-hover-bg:var(--emi-surface-2); --bs-btn-hover-border-color:#d0d5dd;
  --bs-btn-active-color:var(--emi-ink); --bs-btn-active-bg:var(--emi-surface-2); --bs-btn-active-border-color:#d0d5dd;
}
.btn-outline-danger{
  --bs-btn-color:var(--emi-red);        --bs-btn-border-color:var(--emi-red-line);
  --bs-btn-hover-bg:var(--emi-red);     --bs-btn-hover-border-color:var(--emi-red);
}
.btn-outline-success{
  --bs-btn-color:var(--emi-green);      --bs-btn-border-color:var(--emi-green-line);
  --bs-btn-hover-bg:var(--emi-green);   --bs-btn-hover-border-color:var(--emi-green);
}
.btn-close:focus{ box-shadow:0 0 0 3px rgba(51,85,209,.18); }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.form-label{
  font-size:.8125rem;
  font-weight:600;
  color:var(--emi-ink);
  margin-bottom:6px;
}
.form-text{ font-size:.75rem; color:var(--emi-muted); }
.form-control,.form-select{
  min-height:38px;
  padding:8px 12px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:8px;
  font-size:.8125rem;
  color:var(--emi-ink);
  box-shadow:none;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-control::placeholder{ color:var(--emi-muted); }
.form-control:focus,.form-select:focus{
  border-color:var(--emi-accent);
  box-shadow:0 0 0 3px rgba(51,85,209,.12);
}
.form-control:disabled,.form-control[readonly]{ background:var(--emi-surface-2); color:var(--emi-muted); }
.form-control-sm,.form-select-sm{ min-height:32px; padding:5px 10px; font-size:.75rem; border-radius:7px; }
textarea.form-control{ min-height:96px; line-height:1.6; }
.input-group-text{
  background:var(--emi-surface-2);
  border:1px solid var(--emi-line);
  border-radius:8px;
  color:var(--emi-muted);
  font-size:.8125rem;
}
.form-check-input{ border-color:#cfd4df; }
.form-check-input:checked{ background-color:var(--emi-accent); border-color:var(--emi-accent); }
.form-check-input:focus{ border-color:var(--emi-accent); box-shadow:0 0 0 3px rgba(51,85,209,.12); }
.form-check-label{ font-size:.8125rem; color:var(--emi-body); }
.invalid-feedback{ font-size:.75rem; }
.was-validated .form-control:invalid,.form-control.is-invalid{ border-color:var(--emi-red); }

/* --------------------------------------------------------------------------
   Alerts — tinted, not saturated
   -------------------------------------------------------------------------- */
.alert{
  border-radius:var(--emi-radius);
  border:1px solid transparent;
  padding:12px 16px;
  font-size:.8125rem;
  font-weight:500;
  box-shadow:none;
}
.alert-success{ color:var(--emi-green); background:var(--emi-green-bg); border-color:var(--emi-green-line); }
.alert-danger { color:var(--emi-red);   background:var(--emi-red-bg);   border-color:var(--emi-red-line); }
.alert-warning{ color:var(--emi-amber); background:var(--emi-amber-bg); border-color:var(--emi-amber-line); }
.alert-info   { color:var(--emi-blue);  background:var(--emi-blue-bg);  border-color:var(--emi-blue-line); }
.alert-primary{ color:var(--emi-accent); background:var(--emi-accent-soft); border-color:#d3ddfb; }
.alert-secondary,.alert-light,.alert-dark{ color:var(--emi-slate); background:var(--emi-slate-bg); border-color:var(--emi-slate-line); }

/* --------------------------------------------------------------------------
   Badges — quiet by default, tinted rather than filled
   -------------------------------------------------------------------------- */
.badge{
  border-radius:6px;
  padding:4px 8px;
  font-size:.6875rem;
  font-weight:700;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
}
.badge.rounded-pill{ border-radius:999px; padding:4px 9px; }
.badge.bg-primary  { background:var(--emi-accent-soft) !important; color:var(--emi-accent); }
.badge.bg-success  { background:var(--emi-green-bg) !important;    color:var(--emi-green); }
.badge.bg-danger   { background:var(--emi-red-bg) !important;      color:var(--emi-red); }
.badge.bg-warning  { background:var(--emi-amber-bg) !important;    color:var(--emi-amber); }
.badge.bg-info     { background:var(--emi-blue-bg) !important;     color:var(--emi-blue); }
.badge.bg-secondary,.badge.bg-dark,.badge.bg-light{
  background:var(--emi-slate-bg) !important; color:var(--emi-slate);
}

/* --------------------------------------------------------------------------
   Tabs, list groups, pagination, progress
   -------------------------------------------------------------------------- */
.nav-tabs{ border-bottom:1px solid var(--emi-line); gap:2px; }
.nav-tabs .nav-link{
  border:0; border-bottom:2px solid transparent;
  border-radius:0;
  padding:10px 14px;
  color:var(--emi-muted);
  font-size:.8125rem; font-weight:600;
}
.nav-tabs .nav-link:hover{ color:var(--emi-ink); border-bottom-color:var(--emi-line); }
.nav-tabs .nav-link.active{ color:var(--emi-accent); background:transparent; border-bottom-color:var(--emi-accent); }
.nav-pills .nav-link{ border-radius:8px; font-size:.8125rem; font-weight:600; color:var(--emi-body); }
.nav-pills .nav-link.active{ background:var(--emi-accent); }

.list-group-item{
  border-color:var(--emi-line);
  padding:12px 16px;
  font-size:.8125rem;
  color:var(--emi-body);
}
.list-group-item:first-child{ border-radius:var(--emi-radius) var(--emi-radius) 0 0; }
.list-group-item:last-child{ border-radius:0 0 var(--emi-radius) var(--emi-radius); }

.pagination{ --bs-pagination-border-color:var(--emi-line); gap:4px; }
.page-link{
  border:1px solid var(--emi-line);
  border-radius:7px !important;
  color:var(--emi-body);
  font-size:.75rem; font-weight:600;
  padding:6px 11px;
}
.page-link:hover{ background:var(--emi-surface-2); color:var(--emi-ink); border-color:#d0d5dd; }
.page-item.active .page-link{ background:var(--emi-accent); border-color:var(--emi-accent); color:#fff; }
.page-item.disabled .page-link{ color:var(--emi-muted); background:var(--emi-surface); opacity:.6; }

.progress{ height:8px; border-radius:999px; background:var(--emi-slate-bg); }
.progress-bar{ background:var(--emi-accent); }

/* --------------------------------------------------------------------------
   Plain content pages that carry no navbar (welcome screen, help pages)
   -------------------------------------------------------------------------- */
body.emi-page-plain{
  background:var(--emi-bg) !important;
  padding:40px 16px;
}
body.emi-page-plain > .container{ max-width:940px; }

/* --------------------------------------------------------------------------
   Authentication pages (login, register, OTP, password reset)
   Overrides the per-page palettes so every entry screen matches the app.
   -------------------------------------------------------------------------- */
body.emi-auth{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  padding:32px 16px;
  background:
    radial-gradient(900px 500px at 50% -10%, #e9edfb, transparent 70%),
    var(--emi-bg) !important;
}
.emi-auth .login-card,
.emi-auth .auth-card,
.emi-auth .card{
  width:100%;
  max-width:420px;
  padding:36px 32px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:16px;
  box-shadow:0 4px 8px -2px rgba(16,24,40,.06), 0 20px 40px -8px rgba(16,24,40,.12);
}
.emi-auth .emi-auth__brand{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-bottom:22px;
  font-size:1.0625rem; font-weight:700; letter-spacing:-.01em;
  color:var(--emi-ink);
}
.emi-auth .emi-auth__brand .emi-logo{
  width:30px; height:30px; border-radius:8px;
  background:linear-gradient(135deg,#4c6ef5,#3355d1);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.85rem;
}
.emi-auth .login-title,
.emi-auth h1,.emi-auth h2,.emi-auth h3{
  text-align:center;
  font-size:1.375rem !important;
  font-weight:600;
  color:var(--emi-ink) !important;
  margin-bottom:8px;
}
.emi-auth .login-subtitle{
  text-align:center;
  font-size:.8125rem;
  color:var(--emi-muted);
  margin-bottom:26px;
}
.emi-auth .btn-login,
.emi-auth .btn-primary{
  width:100%;
  padding:11px 16px;
  background:var(--emi-accent) !important;
  border:1px solid var(--emi-accent) !important;
  border-radius:8px;
  color:#fff !important;
  font-size:.875rem; font-weight:600;
  transition:background .15s ease;
}
.emi-auth .btn-login:hover,
.emi-auth .btn-primary:hover{ background:var(--emi-accent-hover) !important; border-color:var(--emi-accent-hover) !important; }
.emi-auth .form-footer{
  text-align:center;
  font-size:.8125rem;
  color:var(--emi-muted);
  margin-top:20px;
}
.emi-auth .form-footer a,
.emi-auth a{ color:var(--emi-accent); font-weight:600; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width:991.98px){
  .emi-toolbar{ padding:12px; }
  .emi-search{ width:100%; }
  .emi-card__header{ padding:14px 16px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   App shell — sidebar + topbar
   Shared by layouts/app.blade.php and setting/nav.blade.php through
   partials/sidebar.blade.php and partials/topbar.blade.php.
   ========================================================================== */
:root{
  --emi-sidebar-w:250px;
  --emi-topbar-h:60px;
}

.emi-shell{ display:flex; min-height:100vh; }

/* --- Sidebar ------------------------------------------------------------ */
.emi-sidebar{
  position:fixed; inset:0 auto 0 0;
  width:var(--emi-sidebar-w);
  background:var(--emi-nav);
  display:flex; flex-direction:column;
  z-index:1040;
  overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.18) transparent;
}
.emi-sidebar::-webkit-scrollbar{ width:8px; }
.emi-sidebar::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.16); border-radius:8px; }

.emi-sidebar__brand{
  display:flex; align-items:center; gap:10px;
  padding:0 18px; height:var(--emi-topbar-h);
  flex:0 0 var(--emi-topbar-h);
  color:#fff; font-weight:600; font-size:1.0625rem;
  letter-spacing:-.01em; text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
}
.emi-sidebar__brand:hover{ color:#fff; }
.emi-sidebar__brand .emi-logo{
  width:28px; height:28px; border-radius:8px;
  background:linear-gradient(135deg,#4c6ef5,#3355d1);
  display:inline-flex; align-items:center; justify-content:center;
  color:#fff; font-size:.82rem; flex:0 0 28px;
}

.emi-sidebar__nav{ padding:14px 12px 20px; flex:1 1 auto; }

.emi-sidebar__section{
  padding:16px 8px 6px;
  font-size:.6875rem; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.38);
}
.emi-sidebar__section:first-child{ padding-top:2px; }

.emi-nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; margin-bottom:2px;
  border-radius:8px;
  color:rgba(255,255,255,.72);
  font-size:.875rem; font-weight:500;
  text-decoration:none;
  transition:background .15s ease, color .15s ease;
}
.emi-nav-item:hover{ background:var(--emi-nav-hover); color:#fff; }
.emi-nav-item.is-active{ background:var(--emi-accent); color:#fff; }
.emi-nav-item.is-active:hover{ background:var(--emi-accent); }
.emi-nav-item i{ font-size:1rem; width:18px; text-align:center; flex:0 0 18px; opacity:.9; }
.emi-nav-item__label{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.emi-nav-item__count{
  flex:0 0 auto;
  min-width:22px; height:19px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  color:#fff; font-size:.6875rem; font-weight:600;
}
.emi-nav-item.is-active .emi-nav-item__count{ background:rgba(255,255,255,.26); }

/* Account block pinned to the bottom of the sidebar */
.emi-sidebar__foot{
  margin-top:auto; padding:12px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07);
}
.emi-sidebar__account{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 10px; border:0; border-radius:9px;
  background:rgba(255,255,255,.08);
  color:#fff; text-align:left;
}
.emi-sidebar__account:hover{ background:rgba(255,255,255,.15); }
.emi-sidebar__account .emi-avatar{
  width:30px; height:30px; flex:0 0 30px; border-radius:50%;
  background:linear-gradient(135deg,#4c6ef5,#3355d1);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.8rem; font-weight:600; text-transform:uppercase;
}
.emi-sidebar__account .emi-account-meta{ min-width:0; flex:1 1 auto; line-height:1.3; }
.emi-sidebar__account .emi-account-mail{
  display:block; font-size:.78rem; font-weight:500;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emi-sidebar__account .emi-account-role{
  display:block; font-size:.6875rem; color:rgba(255,255,255,.5);
}

/* "Viewing mailbox <address>" — only while an admin is inside someone else's
   mailbox. Deliberately styled unlike the account button below it: no avatar,
   no chevron, amber rather than white, so it never reads as the signed-in
   identity. See the note in partials/sidebar.blade.php. */
.emi-sidebar__viewing{
  display:flex; align-items:baseline; gap:6px; flex-wrap:wrap;
  margin-bottom:8px; padding:7px 10px; border-radius:9px;
  background:rgba(245,158,11,.14);
  box-shadow:inset 0 0 0 1px rgba(245,158,11,.3);
  color:#fbbf24; line-height:1.3;
}
.emi-sidebar__viewing .bi{ font-size:.75rem; flex:0 0 auto; }
.emi-sidebar__viewing-label{
  font-size:.625rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
  opacity:.85; flex:0 0 auto;
}
.emi-sidebar__viewing-mail{
  flex:1 1 100%; min-width:0;
  font-size:.75rem; font-weight:500; color:#fff;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* --- Main column -------------------------------------------------------- */
.emi-main{
  flex:1 1 auto; min-width:0;
  margin-left:var(--emi-sidebar-w);
  display:flex; flex-direction:column;
}

.emi-topbar{
  position:sticky; top:0; z-index:1020;
  height:var(--emi-topbar-h); flex:0 0 var(--emi-topbar-h);
  display:flex; align-items:center; gap:14px;
  padding:0 24px;
  background:var(--emi-surface);
  border-bottom:1px solid var(--emi-line);
}
.emi-topbar__title{
  margin:0; font-size:1.0625rem; font-weight:600;
  color:var(--emi-ink); letter-spacing:-.01em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emi-topbar__sub{
  font-size:.8125rem; color:var(--emi-muted); font-weight:400;
  margin-left:2px;
}
.emi-topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:10px; }

.emi-burger{
  display:none;
  width:36px; height:36px; border:1px solid var(--emi-line);
  border-radius:8px; background:var(--emi-surface);
  color:var(--emi-body); font-size:1.1rem;
  align-items:center; justify-content:center;
}
.emi-burger:hover{ background:var(--emi-surface-2); }

.emi-content{ padding:22px 24px 40px; flex:1 1 auto; }

/* Backdrop behind the off-canvas sidebar on small screens */
.emi-sidebar-backdrop{
  position:fixed; inset:0; z-index:1035;
  background:rgba(16,24,40,.45);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease;
}
body.emi-sidebar-open .emi-sidebar-backdrop{ opacity:1; pointer-events:auto; }

@media (max-width:991.98px){
  .emi-sidebar{
    transform:translateX(-100%);
    transition:transform .22s ease;
    box-shadow:var(--emi-shadow-pop);
  }
  body.emi-sidebar-open .emi-sidebar{ transform:translateX(0); }
  .emi-main{ margin-left:0; }
  .emi-burger{ display:inline-flex; }
  .emi-content{ padding:16px 14px 32px; }
  .emi-topbar{ padding:0 14px; }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */
.emi-page-head{ margin-bottom:20px; }
.emi-page-head h1{
  margin:0 0 4px; font-size:1.5rem; font-weight:600;
  color:var(--emi-ink); letter-spacing:-.02em;
}
.emi-page-head p{ margin:0; color:var(--emi-muted); font-size:.875rem; }

/* --- KPI tiles ---------------------------------------------------------- */
.emi-kpi-grid{
  display:grid; gap:16px; margin-bottom:16px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.emi-kpi{
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius-lg);
  padding:18px;
  box-shadow:var(--emi-shadow);
  display:flex; flex-direction:column; gap:10px;
  text-decoration:none;
  transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
a.emi-kpi:hover{
  box-shadow:var(--emi-shadow-md);
  border-color:#d3d8e2;
  transform:translateY(-1px);
}
.emi-kpi__top{ display:flex; align-items:center; gap:10px; }
.emi-kpi__icon{
  width:34px; height:34px; flex:0 0 34px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.95rem;
  background:var(--emi-slate-bg); color:var(--emi-slate);
}
.emi-kpi--blue   .emi-kpi__icon{ background:var(--emi-blue-bg);   color:var(--emi-blue); }
.emi-kpi--amber  .emi-kpi__icon{ background:var(--emi-amber-bg);  color:var(--emi-amber); }
.emi-kpi--green  .emi-kpi__icon{ background:var(--emi-green-bg);  color:var(--emi-green); }
.emi-kpi--red    .emi-kpi__icon{ background:var(--emi-red-bg);    color:var(--emi-red); }
.emi-kpi--violet .emi-kpi__icon{ background:var(--emi-violet-bg); color:var(--emi-violet); }
.emi-kpi__label{
  font-size:.75rem; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--emi-muted);
}
.emi-kpi__value{
  font-size:1.875rem; font-weight:600; line-height:1.1;
  color:var(--emi-ink); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.emi-kpi__foot{ font-size:.8125rem; color:var(--emi-muted); margin-top:-2px; }
.emi-kpi__foot strong{ color:var(--emi-body); font-weight:600; }

/* --- Panels ------------------------------------------------------------- */
.emi-grid{ display:grid; gap:16px; margin-bottom:16px; }
.emi-grid--2-1{ grid-template-columns:2fr 1fr; }
.emi-grid--1-1{ grid-template-columns:1fr 1fr; }
/* Let panels keep their natural height instead of stretching to the tallest
   column — a stretched card reads as a rendering bug, a ragged row does not. */
.emi-grid--top{ align-items:start; }
@media (max-width:1199.98px){
  .emi-grid--2-1,.emi-grid--1-1{ grid-template-columns:1fr; }
}

.emi-panel{
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius-lg);
  box-shadow:var(--emi-shadow);
  display:flex; flex-direction:column;
  min-width:0;
}
.emi-panel__head{
  display:flex; align-items:center; gap:12px;
  padding:15px 18px;
  border-bottom:1px solid var(--emi-line-soft);
}
.emi-panel__title{
  margin:0; font-size:.9375rem; font-weight:600; color:var(--emi-ink);
}
.emi-panel__hint{ font-size:.75rem; color:var(--emi-muted); }
.emi-panel__link{ margin-left:auto; font-size:.8125rem; font-weight:500; color:var(--emi-accent); text-decoration:none; }
.emi-panel__link:hover{ text-decoration:underline; }
.emi-panel__body{ padding:18px; flex:1 1 auto; min-width:0; }
.emi-panel__body--flush{ padding:0; }

.emi-chart{ position:relative; width:100%; }
.emi-chart--tall{ height:280px; }
.emi-chart--short{ height:210px; }

/* Legend rows under the doughnut */
.emi-legend{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:8px; }
.emi-legend li{ display:flex; align-items:center; gap:9px; font-size:.8125rem; }
.emi-legend .emi-swatch{ width:10px; height:10px; border-radius:3px; flex:0 0 10px; }
.emi-legend .emi-legend__label{ color:var(--emi-body); flex:1 1 auto; }
.emi-legend .emi-legend__value{ font-weight:600; color:var(--emi-ink); font-variant-numeric:tabular-nums; }

/* Legend rows that are links into the mail listing. The <a> carries the row
   layout so the whole strip — swatch, label and count — is one hit target. */
.emi-legend--links li{ display:block; }
.emi-legend--links a{
  display:flex; align-items:center; gap:9px;
  margin:0 -8px; padding:5px 8px;
  border-radius:7px;
  text-decoration:none;
  transition:background-color .12s ease;
}
.emi-legend--links a:hover,
.emi-legend--links a:focus-visible{ background:var(--emi-accent-soft); }
.emi-legend--links a:hover .emi-legend__label{ color:var(--emi-accent); }
.emi-legend--links a:focus-visible{ outline:2px solid var(--emi-accent); outline-offset:1px; }

/* A canvas whose marks navigate. Chart.js sets the per-slice cursor itself;
   this is the fallback for browsers that get the hover callback late. */
.emi-chart--clickable canvas{ cursor:pointer; }

/* One-line figure above a chart, e.g. the median reply time. */
.emi-panel__note{
  margin:0 0 14px; font-size:.8125rem; color:var(--emi-body);
}
.emi-panel__note strong{ color:var(--emi-ink); font-variant-numeric:tabular-nums; }

/* --- Compact list used by the "top senders" panel --------------------- */
.emi-list{ list-style:none; margin:0; padding:0; }
.emi-list__row{
  display:flex; align-items:center; gap:12px;
  padding:11px 18px;
  border-bottom:1px solid var(--emi-line-soft);
  text-decoration:none; color:inherit;
}
.emi-list__row:last-child{ border-bottom:0; }
a.emi-list__row:hover{ background:var(--emi-surface-2); }
.emi-list__avatar{
  width:32px; height:32px; flex:0 0 32px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--emi-accent-soft); color:var(--emi-accent);
  font-weight:600; font-size:.8125rem; text-transform:uppercase;
}
.emi-list__main{ min-width:0; flex:1 1 auto; }
.emi-list__title{
  display:block; font-size:.8125rem; font-weight:600; color:var(--emi-ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emi-list__meta{
  display:block; font-size:.75rem; color:var(--emi-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emi-list__aside{ flex:0 0 auto; text-align:right; }

/* Thin share bar used in the top-senders and categories panels.
   display:block matters — these are <span>s, and an inline box ignores height. */
.emi-bar{ display:block; height:5px; border-radius:999px; background:var(--emi-line-soft); overflow:hidden; margin-top:5px; }
.emi-bar__fill{ display:block; height:100%; border-radius:999px; background:var(--emi-accent); }

.emi-count-strong{ font-size:.8125rem; font-weight:600; color:var(--emi-ink); font-variant-numeric:tabular-nums; }

.emi-panel .emi-empty{ padding:34px 18px; }

/* ==========================================================================
   Toasts — replace window.alert() for background/AJAX feedback
   ========================================================================== */
.emi-toasts{
  position:fixed; right:18px; bottom:18px; z-index:1080;
  display:flex; flex-direction:column; gap:10px;
  max-width:min(380px,calc(100vw - 36px));
}
.emi-toast{
  display:flex; align-items:flex-start; gap:11px;
  padding:12px 14px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-left:3px solid var(--emi-slate);
  border-radius:var(--emi-radius);
  box-shadow:var(--emi-shadow-pop);
  font-size:.8125rem; color:var(--emi-body);
  opacity:0; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.emi-toast.is-in{ opacity:1; transform:translateY(0); }
.emi-toast > i{ font-size:1rem; line-height:1.35; flex:0 0 auto; }
.emi-toast__body{ flex:1 1 auto; min-width:0; }
.emi-toast__title{ display:block; font-weight:600; color:var(--emi-ink); margin-bottom:1px; }
.emi-toast__close{
  border:0; background:none; color:var(--emi-muted);
  font-size:1rem; line-height:1; padding:0; flex:0 0 auto;
}
.emi-toast__close:hover{ color:var(--emi-ink); }
.emi-toast--success{ border-left-color:var(--emi-green); }
.emi-toast--success > i{ color:var(--emi-green); }
.emi-toast--error{ border-left-color:var(--emi-red); }
.emi-toast--error > i{ color:var(--emi-red); }
.emi-toast--warn{ border-left-color:var(--emi-amber); }
.emi-toast--warn > i{ color:var(--emi-amber); }
.emi-toast--info{ border-left-color:var(--emi-blue); }
.emi-toast--info > i{ color:var(--emi-blue); }

/* The filter toolbar now sits at the top of the content column */
.emi-content > .emi-toolbar:first-child{ margin-bottom:16px; }

/* Vertical stack of panels inside one grid column */
.emi-stack{ display:flex; flex-direction:column; gap:16px; min-width:0; }

/* --------------------------------------------------------------------------
   Email Summary — the five sections of a conversation summary.
   Used by the summary page and by the modal on the mail list.
   -------------------------------------------------------------------------- */
.emi-summary{ color:var(--emi-body); }

.emi-summary__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  padding-bottom:14px; margin-bottom:18px;
  border-bottom:1px solid var(--emi-line);
}
.emi-summary__subject{
  font-size:1rem; font-weight:600; color:var(--emi-ink);
  line-height:1.35; margin-bottom:6px;
}
.emi-summary__meta{
  display:flex; flex-wrap:wrap; gap:4px 14px;
  font-size:.75rem; color:var(--emi-muted);
}
.emi-summary__meta i{ margin-right:4px; }

.emi-summary__section{ margin-bottom:20px; }
.emi-summary__section:last-of-type{ margin-bottom:14px; }

.emi-summary__heading{
  display:flex; align-items:center; gap:8px;
  font-size:.6875rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--emi-muted); margin:0 0 8px;
}
.emi-summary__heading i{ font-size:.875rem; color:var(--emi-accent); }

.emi-summary__text{ margin:0; font-size:.875rem; line-height:1.6; color:var(--emi-ink); }
.emi-summary__empty{ margin:0; font-size:.8125rem; font-style:italic; color:var(--emi-muted); }

.emi-summary__list{ margin:0; padding-left:18px; font-size:.875rem; line-height:1.6; }
.emi-summary__list li{ margin-bottom:5px; color:var(--emi-ink); }
.emi-summary__list li:last-child{ margin-bottom:0; }

.emi-summary__actions{ list-style:none; margin:0; padding:0; }
.emi-summary__actions li{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px;
  padding:9px 12px; margin-bottom:6px;
  background:var(--emi-surface-2); border:1px solid var(--emi-line-soft);
  border-radius:var(--emi-radius);
  font-size:.875rem; line-height:1.5;
}
.emi-summary__actions li:last-child{ margin-bottom:0; }
.emi-summary__action-text{ flex:1 1 240px; min-width:0; color:var(--emi-ink); }
.emi-summary__due{ font-size:.75rem; color:var(--emi-muted); white-space:nowrap; }

/* The next step is the one line the reader acts on, so it is set apart. */
.emi-summary__section--next{
  padding:14px 16px;
  background:var(--emi-accent-soft);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius);
}
.emi-summary__section--next .emi-summary__heading{ color:var(--emi-accent); }

.emi-summary__foot{
  margin:0; padding-top:12px; border-top:1px solid var(--emi-line-soft);
  font-size:.6875rem; color:var(--emi-muted);
}

/* Loading and error states shared by the page and the modal */
.emi-summary-state{ padding:36px 16px; text-align:center; color:var(--emi-muted); }
.emi-summary-state i{ font-size:1.5rem; display:block; margin-bottom:10px; }
.emi-summary-state p{ margin:0 0 4px; font-size:.875rem; }
.emi-summary-state small{ font-size:.75rem; }

/* --------------------------------------------------------------------------
   Mail list — cards
   A mail carries more than a row of columns can hold at any sensible window
   width: at eleven columns the Actions cell sat off the right edge and the
   sentiment pills could not be reached without dragging the table sideways.
   So each mail is a card. Everything about one mail stays inside its own
   card, and the list only ever scrolls downwards.

   The markup is still a <table> — DataTables drives the search box, the
   sorting and the pager, and it needs the rows and cells. The header is
   hidden and each cell is placed by its own class, so a card reflows where
   the table used to overflow. Sorting moved to the control in the card
   header, which is what the column headers were doing.
   -------------------------------------------------------------------------- */
/* The cards flow down the page rather than inside a box of their own: one
   scrollbar reads better than a short scrolling window inside a long page. */
.emi-list-wrap{ background:var(--emi-surface-2); }

table.emi-mail-list{ display:block; width:100%; margin:0; border:0; }
table.emi-mail-list thead{ display:none; }
table.emi-mail-list tbody{
  display:flex; flex-direction:column; gap:10px;
  padding:14px 16px;
}

/* One card per mail */
table.emi-mail-list tbody tr{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:6px 14px;
  padding:12px 16px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius-lg);
  box-shadow:var(--emi-shadow);
  transition:box-shadow .15s ease, border-color .15s ease;
}
table.emi-mail-list tbody tr:hover{
  border-color:#ccd6f0;
  box-shadow:var(--emi-shadow-md);
}
table.emi-mail-list tbody td{
  display:block; padding:0; border:0; background:none; vertical-align:baseline;
}

/* Unread mail wears the accent down its edge rather than a whole column */
table.emi-mail-list tbody tr.emi-row--unread{
  box-shadow:inset 3px 0 0 var(--emi-accent), var(--emi-shadow);
}
table.emi-mail-list tbody tr.emi-row--unread:hover{
  box-shadow:inset 3px 0 0 var(--emi-accent), var(--emi-shadow-md);
}

/* Cell placement. Line one is who and when, line two the subject, line three
   what to do about it — the pills on the left, the buttons on the right. */
.emi-mail__sender{ flex:1 1 240px; min-width:0; order:1; }
.emi-mail__date{ order:2; margin-left:auto; flex:0 0 auto; text-align:right; }
.emi-mail__subject{ flex:1 1 100%; order:3; min-width:0; }
.emi-mail__meta{ order:4; flex:0 0 auto; }
.emi-mail__actions{ order:9; margin-left:auto; flex:0 0 auto; }

/* Sender: name over address */
.emi-mail__sender .emi-sender{ display:flex; align-items:center; gap:10px; }
.emi-mail__sender .emi-sender__avatar{ width:34px; height:34px; font-size:.8rem; }
.emi-sender__meta{ display:flex; flex-direction:column; min-width:0; line-height:1.35; }
.emi-sender__name{ display:flex; align-items:center; gap:6px; min-width:0; }
.emi-sender__name .emi-cell-strong{
  font-size:.875rem;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.emi-sender__mail{
  display:block; max-width:100%;
  color:var(--emi-muted); font-size:.75rem; text-decoration:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.emi-sender__mail:hover{ color:var(--emi-accent); text-decoration:underline; }

/* Date, on one line at the top-right corner of the card */
.emi-mail__date{ font-size:.75rem; color:var(--emi-muted); white-space:nowrap; }
.emi-mail__date small{ display:inline; font-size:inherit; color:inherit; }
.emi-mail__date small::before{ content:'·'; margin:0 5px; color:#c3c8d6; }

/* Subject — the card's headline, and the link into the mail */
.emi-mail__subject a{
  display:block;
  color:var(--emi-ink); font-size:.9375rem; font-weight:600; line-height:1.4;
  text-decoration:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.emi-mail__subject a:hover{ color:var(--emi-accent); text-decoration:underline; }
tr.emi-row--unread .emi-mail__subject a{ font-weight:700; }

/* Flags: only what is true about the mail is drawn, so an ordinary read mail
   costs no space at all instead of three "No" pills. */
.emi-flags{ display:flex; flex-wrap:wrap; align-items:center; gap:5px; }

/* Card actions */
.emi-mail__actions .emi-actions{ gap:6px; flex-wrap:wrap; justify-content:flex-end; }
.emi-action--icon{ width:32px; padding:0; justify-content:center; }
.emi-action--icon i{ font-size:.875rem; }
.emi-action--danger{ color:var(--emi-red); border-color:var(--emi-red-line); background:var(--emi-red-bg); }
.emi-action--danger:hover{ color:var(--emi-red); background:#fee4e2; border-color:var(--emi-red); }

.emi-more{ position:relative; }
.emi-more__toggle::after{ display:none; }
.emi-more .dropdown-menu{ min-width:212px; z-index:1080; }
.emi-more .dropdown-menu .dropdown-item{ display:flex; align-items:center; gap:9px; font-size:.8125rem; }
.emi-more .dropdown-menu .dropdown-item i{ color:var(--emi-muted); width:14px; text-align:center; }
.emi-more__label{
  padding:7px 14px 4px;
  font-size:.6875rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--emi-muted);
}

/* Sort control — the column headers are hidden, so the sorting they offered
   lives here next to the search box. */
.emi-sort{ display:flex; align-items:center; gap:8px; }
.emi-sort label{
  margin:0; font-size:.6875rem; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--emi-muted); white-space:nowrap;
}
.emi-sort select{
  height:36px; padding:0 30px 0 11px;
  background:var(--emi-surface-2) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath fill='%238a91a6' d='M4.5 6.5 8 10l3.5-3.5z'/%3E%3C/svg%3E") no-repeat right 10px center;
  border:1px solid var(--emi-line); border-radius:8px;
  font-size:.8125rem; font-weight:600; color:var(--emi-ink);
  appearance:none; cursor:pointer;
}
.emi-sort select:hover{ border-color:#d0d5dd; }
.emi-sort select:focus{
  outline:none; background-color:var(--emi-surface);
  border-color:var(--emi-accent); box-shadow:0 0 0 3px rgba(51,85,209,.12);
}

/* Narrow windows: the card is already a column, so it just gets tighter */
@media (max-width:900px){
  table.emi-mail-list tbody{ padding:12px; gap:8px; }
  .emi-mail__date{ order:4; margin-left:0; text-align:left; }
  .emi-mail__actions{ flex:1 1 100%; }
  .emi-mail__actions .emi-actions{ justify-content:flex-start; }
}

/* A dated fact among the pills — says what it is, since there is no column
   header on a card to say it. */
.emi-mail__stat{
  display:inline-flex; align-items:center; gap:6px;
  font-size:.75rem; color:var(--emi-muted); white-space:nowrap;
}
.emi-mail__stat i{ font-size:.6875rem; }

/* The row number is DataTables' column 0 and the listing's own order; it does
   not renumber when the list is re-sorted, so the cards do not show it.
   Needs the table in the selector to beat the display:block above. */
table.emi-mail-list tbody td.emi-mail__num{ display:none; }

/* --------------------------------------------------------------------------
   Follow-up queue — cards
   The queue was eight columns wide and the two that matter most, "what is
   needed" and the buttons that act on it, were the ones pushed off the right
   edge. A task is also not a row of facts: it is one mail, one due time and
   one decision, so each task gets a card and the decision sits at the bottom
   of it where the eye finishes reading.

   Same tokens and the same three-line shape as the mail cards, so the two
   lists read as one product.
   -------------------------------------------------------------------------- */
.emi-fu-list{ display:flex; flex-direction:column; gap:12px; }

.emi-fu{
  position:relative;
  display:flex; flex-direction:column; gap:10px;
  padding:14px 18px 14px 20px;
  background:var(--emi-surface);
  border:1px solid var(--emi-line);
  border-radius:var(--emi-radius-lg);
  box-shadow:var(--emi-shadow);
  transition:box-shadow .15s ease, border-color .15s ease;
}
.emi-fu:hover{ border-color:#ccd6f0; box-shadow:var(--emi-shadow-md); }

/* The state of the task, down the edge — one glance tells you whether the
   card is a problem before any of its text is read. */
.emi-fu::before{
  content:''; position:absolute; left:0; top:0; bottom:0; width:4px;
  border-radius:var(--emi-radius-lg) 0 0 var(--emi-radius-lg);
  background:var(--emi-line);
}
.emi-fu--late::before     { background:var(--emi-red); }
.emi-fu--open::before     { background:var(--emi-amber); }
.emi-fu--done::before     { background:var(--emi-green); }
.emi-fu--dismissed::before{ background:#d0d5dd; }

/* Line one: who it is from, and when it is owed */
.emi-fu__head{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.emi-fu__head .emi-sender{ flex:1 1 220px; min-width:0; }
.emi-fu__head .emi-sender__avatar{ width:34px; height:34px; font-size:.8rem; }

.emi-fu__due{ flex:0 0 auto; margin-left:auto; text-align:right; line-height:1.3; }
.emi-fu__due-label{ display:block; font-size:.8125rem; font-weight:600; color:var(--emi-body); }
.emi-fu--late .emi-fu__due-label{ color:var(--emi-red); }
.emi-fu__due-abs{ display:block; font-size:.75rem; color:var(--emi-muted); font-variant-numeric:tabular-nums; }

/* Line two: the mail itself */
.emi-fu__subject{
  margin:0;
  font-size:.9375rem; font-weight:600; line-height:1.4; color:var(--emi-ink);
}
.emi-fu__why{ margin:3px 0 0; font-size:.75rem; line-height:1.5; color:var(--emi-muted); }
.emi-fu__note{
  margin:6px 0 0; padding:7px 10px;
  background:var(--emi-amber-bg); border:1px solid var(--emi-amber-line); border-radius:8px;
  font-size:.75rem; line-height:1.45; color:var(--emi-amber);
}
.emi-fu__note i{ margin-right:5px; }

/* Line three: what it needs on the left, what you can do about it on the
   right. Wraps to its own line on a narrow window rather than squeezing. */
.emi-fu__foot{
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px;
  padding-top:10px; border-top:1px solid var(--emi-line-soft);
}
.emi-fu__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; min-width:0; }
.emi-fu__foot .emi-actions{ margin-left:auto; flex:0 0 auto; }

/* Facts that had a column header to name them; on a card they name
   themselves. */
.emi-fu__fact{
  display:inline-flex; align-items:center; gap:5px;
  font-size:.75rem; color:var(--emi-muted); white-space:nowrap;
}
.emi-fu__fact i{ font-size:.6875rem; }

@media (max-width:900px){
  .emi-fu__due{ margin-left:0; text-align:left; }
  .emi-fu__foot .emi-actions{ margin-left:0; flex:1 1 100%; justify-content:flex-start; }
}

/* --------------------------------------------------------------------------
   Kind-marked pills
   A card has no column headers, so two pills side by side — "Send Quotation"
   and "Product Enquiry" — gave no way to tell a next action from a lead type.
   Each pill now names the vocabulary it came from: a micro small-caps word in
   a leading segment, behind the same icon the toolbar filter for that
   vocabulary wears, divided off by a hairline in the pill's own colour. The
   value keeps the colour and the weight, so the kind reads as a label on it
   rather than as competing text.
   -------------------------------------------------------------------------- */
.emi-pill--kind{ padding:3px 10px 3px 7px; gap:7px; }
/* The kind icon stands in for the generic status dot */
.emi-pill--kind::before{ display:none; }
.emi-pill__kind{
  display:inline-flex; align-items:center; gap:4px;
  padding-right:7px;
  border-right:1px solid;
  border-color:inherit;
  font-size:.625rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase;
  opacity:.72;
}
.emi-pill__kind i{ font-size:.75rem; }
/* Slate is the "nothing worked out yet" pill: the kind still has to read, but
   quieter than a pill carrying a real value. */
.emi-pill--slate .emi-pill__kind{ opacity:.62; }