/**
 * ERPAL CRM Cockpit — app shell styling.
 * A clean, modern, Zoho/ERPAL-style CRM front-end: fixed left sidebar,
 * sticky top bar, card + table content. Layered on top of Olivero base.
 */

/* DESIGN TOKENS live in css/erpal-tokens.css (loaded first by the app
   library) — every color/background/border below references them. Do not
   reintroduce hardcoded colors here. */

/* ---- reset the Olivero page container so our shell owns the viewport ---- */
html, body { margin: 0; padding: 0; background: var(--erpal-bg); }
body { color: var(--erpal-ink); font-size: 14px; }
.dialog-off-canvas-main-canvas { height: auto; }

/* ---- belt-and-suspenders: never show the Drupal admin toolbar / Gin admin
   navigation on the front-end (also stripped server-side in the .theme). ---- */
#toolbar-administration,
#toolbar-bar,
.toolbar-oriented .toolbar-bar,
.gin-secondary-toolbar,
.gin--vertical-toolbar #toolbar-administration,
[data-offset-top],
.toolbar-tray { display: none !important; }
body.toolbar-fixed,
body.toolbar-horizontal,
body.toolbar-vertical,
body.toolbar-tray-open { padding-top: 0 !important; }

.erpal-app {
  display: grid;
  grid-template-columns: var(--erpal-sidebar-w) 1fr;
  min-height: 100vh;
}

/* =========================== SIDEBAR =========================== */
.erpal-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--erpal-sidebar-w);
  background: var(--erpal-sidebar-bg);
  color: var(--erpal-sidebar-ink);
  border-right: 1px solid var(--erpal-line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  z-index: 50;
}
.erpal-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--erpal-topbar-h);
  padding: 0 20px;
  color: var(--erpal-ink); text-decoration: none;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .2px;
  border-bottom: 1px solid var(--erpal-line);
  flex: 0 0 auto;
}
.erpal-brand__mark { color: var(--erpal-brand); font-size: 1.2rem; }
.erpal-sidebar__nav { flex: 1 1 auto; padding: 8px 0; }
.erpal-sidebar__foot {
  flex: 0 0 auto; padding: 14px 20px;
  font-size: .72rem; color: var(--erpal-sidebar-ink-dim);
  border-top: 1px solid var(--erpal-line);
}

/* nav menu (core menu block) */
.erpal-sidebar .menu {
  list-style: none; margin: 0; padding: 0;
}
.erpal-sidebar .menu .menu { padding: 0; } /* sub-lists */

/* group header (the <nolink> parents) */
.erpal-sidebar > .erpal-sidebar__nav ul.menu > li > a,
.erpal-sidebar > .erpal-sidebar__nav ul.menu > li > span {
  display: block;
  padding: 15px 20px 5px;
  font-size: .66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .8px; color: var(--erpal-sidebar-ink-dim);
  text-decoration: none; cursor: default;
}

/* leaf links */
.erpal-sidebar .menu .menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 20px;
  color: var(--erpal-sidebar-ink); text-decoration: none;
  font-size: .9rem; font-weight: 500;
  border-left: 3px solid transparent;
  transition: background .12s, color .12s, border-color .12s;
}
.erpal-sidebar .menu .menu a:hover {
  background: var(--erpal-hover-soft); color: var(--erpal-ink);
}
.erpal-sidebar .menu .menu a.is-active {
  background: var(--erpal-sidebar-active-bg);
  color: var(--erpal-sidebar-active-ink);
  border-left-color: var(--erpal-sidebar-active-ink);
  font-weight: 600;
}

/* =========================== MAIN =========================== */
.erpal-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* ---- top bar ---- */
.erpal-topbar {
  position: sticky; top: 0; z-index: 40;
  height: var(--erpal-topbar-h);
  background: var(--erpal-surface);
  border-bottom: 1px solid var(--erpal-line);
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px;
}
.erpal-topbar__burger {
  display: none; background: none; border: 0; font-size: 1.3rem;
  cursor: pointer; color: var(--erpal-ink);
}
.erpal-search {
  flex: 1 1 auto; max-width: 540px;
  display: flex; align-items: center;
  background: var(--erpal-bg);
  border: 1px solid var(--erpal-line);
  border-radius: 8px;
  padding: 0 10px;
}
.erpal-search__input {
  flex: 1 1 auto; border: 0; background: transparent;
  padding: 9px 6px; font-size: .9rem; outline: none; color: var(--erpal-ink);
}
.erpal-search__btn {
  border: 0; background: none; cursor: pointer;
  font-size: 1.1rem; color: var(--erpal-ink-soft);
}
.erpal-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.erpal-user { display: flex; align-items: center; gap: 10px; }
.erpal-user__name {
  font-weight: 600; font-size: .88rem; color: var(--erpal-ink); text-decoration: none;
}
.erpal-user__logout, .erpal-user__login {
  color: var(--erpal-ink-soft); text-decoration: none; font-size: 1.05rem;
}
.erpal-user__login { font-size: .9rem; font-weight: 600; color: var(--erpal-brand); }

/* ---- content ---- */
.erpal-content { padding: 26px 28px 60px; flex: 1 1 auto; }
.erpal-content__inner { max-width: 1280px; }
.erpal-breadcrumb { margin-bottom: 12px; font-size: .82rem; color: var(--erpal-ink-soft); }
.erpal-highlighted { margin-bottom: 16px; }
.erpal-footer { padding: 16px 28px; color: var(--erpal-ink-soft); font-size: .8rem; }

/* page title */
.erpal-content h1.page-title,
.erpal-content .page-title {
  font-size: 1.6rem; font-weight: 700; margin: 0 0 18px; color: var(--erpal-ink);
}

/* =========================== CARDS / TABLES =========================== */
.erpal-content .views-element-container,
.erpal-card {
  background: var(--erpal-surface);
  border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius);
  box-shadow: var(--erpal-shadow);
  padding: 4px 4px 0;
  margin-bottom: 22px;
}

/* exposed filter / search bar above tables */
.erpal-content form.views-exposed-form {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px;
  padding: 14px 16px; margin: 0;
}
.erpal-content form.views-exposed-form .form-item { margin: 0; }
.erpal-content form.views-exposed-form label { font-size: .76rem; font-weight: 600; color: var(--erpal-ink-soft); }
.erpal-content form.views-exposed-form input[type="text"],
.erpal-content form.views-exposed-form input[type="search"],
.erpal-content form.views-exposed-form select {
  border: 1px solid var(--erpal-line); border-radius: 7px; padding: 7px 10px; font-size: .88rem;
}

/* tables */
.erpal-content table {
  width: 100%; border-collapse: collapse; margin: 0; background: var(--erpal-surface);
  border-radius: var(--erpal-radius); overflow: hidden;
}
.erpal-content table thead th {
  background: var(--erpal-thead-bg); text-align: left;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .5px;
  color: var(--erpal-ink-soft); font-weight: 700;
  padding: 9px 14px; border-bottom: 1px solid var(--erpal-line);
  white-space: nowrap;
}
/* sortable column header — click-to-sort link + arrow indicator */
.erpal-content table thead th a {
  color: var(--erpal-ink-soft); text-decoration: none; font-weight: 700;
  display: inline-flex; align-items: center; gap: 4px;
}
.erpal-content table thead th a:hover { color: var(--erpal-brand); }
.erpal-content table thead th.is-active a,
.erpal-content table thead th .is-active { color: var(--erpal-brand); }
.erpal-content table thead th a .tablesort,
.erpal-content table thead th .tablesort { width: .7em; height: .7em; }
.erpal-content table tbody td {
  padding: 8px 14px; border-bottom: 1px solid var(--erpal-line); font-size: .88rem;
  color: var(--erpal-ink);
}
.erpal-content table tbody tr:last-child td { border-bottom: 0; }
.erpal-content table tbody tr:hover { background: var(--erpal-row-hover); }
.erpal-content table a { color: var(--erpal-brand); text-decoration: none; font-weight: 600; }
.erpal-content table a:hover { text-decoration: underline; }

/* leading select checkbox column (theme-injected) */
.erpal-content table th.erpal-col-check,
.erpal-content table td.erpal-col-check {
  width: 34px; text-align: center; padding-left: 12px; padding-right: 6px;
}
.erpal-col-check input[type="checkbox"] { cursor: pointer; margin: 0; vertical-align: middle; }

/* full pager (right) + "Total Records N" summary (left) at the card foot */
.erpal-content .view-footer {
  padding: 10px 14px; border-top: 1px solid var(--erpal-line);
  font-size: .82rem; font-weight: 600; color: var(--erpal-ink-soft);
}
.erpal-content .pager { padding: 8px 14px 10px; margin: 0; }
.erpal-content .pager__items { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0; justify-content: flex-end; }
.erpal-content .pager__item a {
  display: inline-block; padding: 5px 11px; border: 1px solid var(--erpal-line);
  border-radius: 6px; text-decoration: none; color: var(--erpal-brand); font-size: .82rem;
}
.erpal-content .pager__item a:hover { background: var(--erpal-hover); }
.erpal-content .pager__item.is-active a { background: var(--erpal-brand); color: var(--erpal-on-accent); border-color: var(--erpal-brand); }

/* =========================== BUTTONS / ACTIONS =========================== */
.erpal-btn,
.erpal-content .button,
.erpal-content a.button,
.erpal-content input[type="submit"] {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--erpal-brand); color: var(--erpal-on-accent) !important;
  border: 0; border-radius: 8px; padding: 9px 16px;
  font-size: .88rem; font-weight: 600; text-decoration: none; cursor: pointer;
  box-shadow: var(--erpal-shadow);
}
.erpal-btn:hover,
.erpal-content .button:hover,
.erpal-content input[type="submit"]:hover { background: var(--erpal-brand-dark); }
.erpal-btn--ghost {
  background: var(--erpal-surface); color: var(--erpal-brand) !important;
  border: 1px solid var(--erpal-line);
}

/* page-level action toolbar (used by list "+ New" header + record actions) */
.erpal-pageactions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin: 0 0 18px;
}
.erpal-pageactions .erpal-pageactions__title { font-size: 1.6rem; font-weight: 700; margin: 0; }

/* =========================== ZOHO LIST HEAD =========================== */
/* The list view header: a saved-view PILL row (left) under the page-title H1,
   with the primary "Create <Entity>" button + view-options caret floated to the
   top-right so they sit level with the H1 (which the page-title block renders). */
.erpal-content__inner { position: relative; }
/* tighten the page-title H1 so the pill row hugs it (Zoho density) */
.erpal-content h1.page-title,
.erpal-content .page-title { font-size: 1.45rem; margin: 0 0 8px; }

.erpal-listhead {
  display: flex; align-items: center; gap: 10px;
  padding: 0 0 10px; margin: 0;
}
.erpal-vpills { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.erpal-vpill {
  display: inline-block; padding: 5px 13px; border-radius: 999px;
  font-size: .82rem; font-weight: 600; color: var(--erpal-ink-soft);
  background: transparent; border: 1px solid transparent; cursor: pointer;
}
.erpal-vpill.is-active {
  background: var(--erpal-brand-soft); color: var(--erpal-brand);
}
.erpal-vpill:hover { background: var(--erpal-hover); }
.erpal-vcaret, .erpal-viewmenu {
  border: 0; background: none; cursor: pointer; padding: 4px 6px;
  font-size: .9rem; color: var(--erpal-ink-soft); line-height: 1;
}
.erpal-vcaret:hover, .erpal-viewmenu:hover { color: var(--erpal-ink); }
/* Create button + view caret pinned top-right, on the H1 baseline. */
.erpal-listhead__actions {
  position: absolute; top: -2px; right: 0;
  display: flex; align-items: center; gap: 6px;
}
.erpal-listhead__actions .erpal-btn--create { padding: 8px 16px; }

/* ---- TOOLBAR: the views exposed form, reframed as one tight Filter / Sort-by /
   search bar (no standalone big search box, no Search button, no empty gaps). ---- */
.erpal-content form.views-exposed-form {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 8px 12px; margin: 0;
  border-bottom: 1px solid var(--erpal-line);
}
.erpal-content form.views-exposed-form::before {
  content: "\25BD  Filter"; font-size: .82rem; font-weight: 600;
  color: var(--erpal-ink-soft); margin-right: 2px; white-space: nowrap;
}
.erpal-content form.views-exposed-form .form-item { margin: 0; display: flex; align-items: center; gap: 6px; }
.erpal-content form.views-exposed-form label {
  font-size: .78rem; font-weight: 600; color: var(--erpal-ink-soft); margin: 0;
}
/* compact, inline search + selects */
.erpal-content form.views-exposed-form input[type="text"],
.erpal-content form.views-exposed-form input[type="search"],
.erpal-content form.views-exposed-form select {
  border: 1px solid var(--erpal-line); border-radius: 7px;
  padding: 6px 9px; font-size: .84rem; background: var(--erpal-input-bg); color: var(--erpal-ink);
}
.erpal-content form.views-exposed-form input[type="text"],
.erpal-content form.views-exposed-form input[type="search"] { min-width: 200px; }
/* the search filter sits on the right of the toolbar */
.erpal-content form.views-exposed-form .form-item-search { margin-left: auto; }
/* drop the standalone Search submit + reset — Zoho searches inline (Enter) */
.erpal-content form.views-exposed-form .form-actions { display: none; }

/* Entity action tabs (View / Edit / Delete / Clone) rendered as clean Zoho
   pills instead of Olivero's underline tab bar. */
.erpal-content nav.tabs { margin-bottom: 18px; }
.erpal-content ul.tabs {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 20px;
  border: 0;
}
.erpal-content ul.tabs > li { margin: 0; }
.erpal-content ul.tabs > li > a {
  display: inline-block; padding: 7px 16px; text-decoration: none;
  color: var(--erpal-ink-soft); font-weight: 600; font-size: .85rem;
  background: var(--erpal-surface); border: 1px solid var(--erpal-line);
  border-radius: 999px; line-height: 1.2; transition: background .12s, color .12s, border-color .12s;
}
.erpal-content ul.tabs > li > a:hover { background: var(--erpal-hover); color: var(--erpal-ink); }
.erpal-content ul.tabs > li > a.is-active {
  background: var(--erpal-brand); color: var(--erpal-on-accent); border-color: var(--erpal-brand);
}

/* =========================== ENTITY FORMS (Zoho record edit) =========================== */
/* The add/edit/delete form sits in the white content card with labeled fields
   in a clean stacked layout — a Zoho record edit, not raw Drupal. The list
   exposed-filter form and the top-bar search keep their own styling. */
.erpal-content form:not(.views-exposed-form):not(.erpal-search) {
  background: var(--erpal-surface);
  border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius);
  box-shadow: var(--erpal-shadow);
  padding: 24px 26px;
  max-width: 940px;
}
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .form-item,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .js-form-item {
  margin: 0 0 18px;
}
.erpal-content form:not(.views-exposed-form):not(.erpal-search) label,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .fieldset__label,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) legend {
  display: block; font-size: .8rem; font-weight: 600; color: var(--erpal-ink);
  margin-bottom: 6px; padding: 0;
}
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .form-required::after {
  content: " *"; color: var(--erpal-danger); font-weight: 700;
}
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="text"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="email"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="url"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="tel"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="number"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="date"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="datetime-local"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input[type="password"],
.erpal-content form:not(.views-exposed-form):not(.erpal-search) select,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) textarea {
  width: 100%; max-width: 520px; box-sizing: border-box;
  border: 1px solid var(--erpal-line); border-radius: 7px;
  padding: 9px 11px; font-size: .9rem; background: var(--erpal-input-bg); color: var(--erpal-ink);
  font-family: inherit;
}
.erpal-content form:not(.views-exposed-form):not(.erpal-search) textarea { min-height: 96px; }
.erpal-content form:not(.views-exposed-form):not(.erpal-search) input:focus,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) select:focus,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) textarea:focus {
  outline: 0; border-color: var(--erpal-brand);
  box-shadow: 0 0 0 3px var(--erpal-brand-soft);
}
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .description,
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .form-item__description {
  font-size: .76rem; color: var(--erpal-ink-soft); margin-top: 5px;
}
/* Nested field cards (entity reference / multi-value widgets) read as light
   sub-panels rather than heavy fieldsets. */
.erpal-content form:not(.views-exposed-form):not(.erpal-search) fieldset {
  border: 1px solid var(--erpal-line); border-radius: 7px;
  padding: 14px 16px; margin: 0 0 18px;
}
/* Action bar at the foot of the form: Save = blue primary, Delete = secondary. */
.erpal-content form:not(.views-exposed-form):not(.erpal-search) .form-actions {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--erpal-line);
}
.erpal-content .form-actions input[type="submit"],
.erpal-content .form-actions .button--primary {
  background: var(--erpal-brand); color: var(--erpal-on-accent) !important; border: 0;
}
.erpal-content .form-actions input[type="submit"]:hover,
.erpal-content .form-actions .button--primary:hover { background: var(--erpal-brand-dark); }
/* Secondary actions (Delete link on the edit form, Cancel on confirm forms). */
.erpal-content .form-actions a.button,
.erpal-content .form-actions .button:not(.button--primary):not(.button--danger):not([type="submit"]) {
  background: var(--erpal-surface); color: var(--erpal-ink-soft) !important;
  border: 1px solid var(--erpal-line); box-shadow: none;
}
.erpal-content .form-actions a.button:hover { background: var(--erpal-hover); color: var(--erpal-ink) !important; }
/* Destructive confirm (the delete confirmation form's Delete button). */
.erpal-content .form-actions .button--danger,
.erpal-content .form-actions input.button--danger {
  background: var(--erpal-danger); color: var(--erpal-on-accent) !important; border: 0;
}
.erpal-content .form-actions .button--danger:hover { background: var(--erpal-danger-dark); }

/* =========================== DASHBOARD =========================== */
.erpal-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.erpal-kpi {
  background: var(--erpal-surface); border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius); box-shadow: var(--erpal-shadow);
  padding: 18px 20px; position: relative; overflow: hidden;
}
.erpal-kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--erpal-brand);
}
.erpal-kpi--green::before { background: var(--erpal-success); }
.erpal-kpi--amber::before { background: var(--erpal-warning); }
.erpal-kpi--purple::before { background: var(--erpal-purple); }
.erpal-kpi__label { font-size: .75rem; text-transform: uppercase; letter-spacing: .6px; color: var(--erpal-ink-soft); font-weight: 700; }
.erpal-kpi__value { font-size: 2rem; font-weight: 800; margin-top: 6px; color: var(--erpal-ink); line-height: 1.1; }
.erpal-kpi__sub { font-size: .78rem; color: var(--erpal-ink-soft); margin-top: 4px; }

.erpal-dash-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px;
  align-items: start;
}
.erpal-dash-grid > .erpal-panel { margin-bottom: 0; }
.erpal-panel {
  background: var(--erpal-surface); border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius); box-shadow: var(--erpal-shadow); margin-bottom: 22px;
}
.erpal-panel__head {
  padding: 14px 18px; border-bottom: 1px solid var(--erpal-line);
  font-weight: 700; font-size: 1rem; display: flex; align-items: center; justify-content: space-between;
}
.erpal-panel__head a { font-size: .8rem; font-weight: 600; color: var(--erpal-brand); text-decoration: none; }
.erpal-panel__body { padding: 8px 4px; }
.erpal-panel__body.is-pad { padding: 18px; }

/* deals-by-stage horizontal bars (flat, CSS-only) */
.erpal-bars { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; }
.erpal-bar {
  display: grid; grid-template-columns: 150px 1fr 34px; align-items: center; gap: 12px;
}
.erpal-bar__label {
  font-size: .82rem; color: var(--erpal-ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.erpal-bar__track { background: var(--erpal-track); border-radius: 999px; height: 10px; overflow: hidden; }
.erpal-bar__fill { display: block; height: 100%; background: var(--erpal-brand); border-radius: 999px; }
.erpal-bar__val { font-size: .82rem; font-weight: 700; color: var(--erpal-ink); text-align: right; }

/* =========================== MISC =========================== */
.erpal-content .messages { border-radius: 8px; margin-bottom: 18px; }
.erpal-empty { padding: 26px; text-align: center; color: var(--erpal-ink-soft); }

/* status pills (rendered list_default values) */
.erpal-pill {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; background: var(--erpal-track); color: var(--erpal-ink-soft);
}

/* =========================== STATUS TAGS =========================== */
/* Injected by erpal_crm_ui_preprocess_views_view_field() around status values. */
.erpal-tag {
  display: inline-block; padding: 3px 10px; border-radius: 4px;
  font-size: .76rem; font-weight: 600; line-height: 1.3;
  background: var(--erpal-tag-bg); color: var(--erpal-tag-ink); white-space: nowrap;
}
/* greens — won / qualified / active / paid / completed / sent */
.erpal-tag--qualified, .erpal-tag--pre-qualified, .erpal-tag--won, .erpal-tag--closed-won,
.erpal-tag--active, .erpal-tag--paid, .erpal-tag--completed, .erpal-tag--sent,
.erpal-tag--deployed, .erpal-tag--running, .erpal-tag--accepted, .erpal-tag--approved
{ background: var(--erpal-tag-green-bg); color: var(--erpal-tag-green-ink); }
/* blues — new / open / in progress / contacted */
.erpal-tag--new, .erpal-tag--open, .erpal-tag--contacted, .erpal-tag--in-progress,
.erpal-tag--proposal, .erpal-tag--price-quote, .erpal-tag--negotiation, .erpal-tag--draft,
.erpal-tag--provisioning, .erpal-tag--pending
{ background: var(--erpal-tag-blue-bg); color: var(--erpal-tag-blue-ink); }
/* ambers — warm / follow-up / on hold / overdue-ish */
.erpal-tag--warm, .erpal-tag--follow-up, .erpal-tag--on-hold, .erpal-tag--high,
.erpal-tag--scheduled, .erpal-tag--maintenance, .erpal-tag--trial
{ background: var(--erpal-tag-amber-bg); color: var(--erpal-tag-amber-ink); }
/* reds — lost / cold / cancelled / failed / overdue */
.erpal-tag--lost, .erpal-tag--closed-lost, .erpal-tag--cold, .erpal-tag--cancelled,
.erpal-tag--failed, .erpal-tag--overdue, .erpal-tag--unqualified, .erpal-tag--decommissioned,
.erpal-tag--urgent, .erpal-tag--blocked
{ background: var(--erpal-tag-red-bg); color: var(--erpal-tag-red-ink); }

/* "Total Records N" result-summary text (rendered inside .view-footer) */
.erpal-content .view-footer .views-summary,
.erpal-content .views-row-count { font-size: .82rem; color: var(--erpal-ink-soft); }

/* =========================== RECORD VIEW (Zoho record cockpit) =========================== */
/* A record page is a stack of titled SECTION cards (field_group html_element,
   format_settings.classes = "erpal-section"). Inside each card the fields lay
   out as a 2-column label:value grid (the field template emits .field /
   .field__label / .field__item). Long-text fields span the full width. */
.erpal-content .erpal-section {
  background: var(--erpal-surface);
  border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius);
  box-shadow: var(--erpal-shadow);
  padding: 16px 22px 18px;
  margin: 0 0 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 36px;
  align-content: start;
}
.erpal-content .erpal-section__title {
  grid-column: 1 / -1;
  margin: 0 0 10px;
  padding: 0 0 10px;
  font-size: .98rem;
  font-weight: 700;
  color: var(--erpal-ink);
  border-bottom: 1px solid var(--erpal-line);
  letter-spacing: .2px;
}
/* one label:value pair per grid cell */
.erpal-content .erpal-section .field {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 0;
  border-bottom: 1px solid var(--erpal-divider);
  min-width: 0;
}
.erpal-content .erpal-section .field__label {
  flex: 0 0 42%;
  max-width: 44%;
  font-weight: 600;
  color: var(--erpal-ink-soft);
  font-size: .82rem;
  line-height: 1.35;
}
.erpal-content .erpal-section .field__item,
.erpal-content .erpal-section .field__items {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--erpal-ink);
  font-size: .86rem;
  line-height: 1.4;
  word-break: break-word;
}
.erpal-content .erpal-section .field a { color: var(--erpal-brand); text-decoration: none; font-weight: 600; }
.erpal-content .erpal-section .field a:hover { text-decoration: underline; }
/* long-text fields (notes / descriptions) span both columns and stack */
.erpal-content .erpal-section .field--type-string-long,
.erpal-content .erpal-section .field--type-text-long,
.erpal-content .erpal-section .field--type-text-with-summary {
  grid-column: 1 / -1;
  flex-direction: column;
  gap: 4px;
}
.erpal-content .erpal-section .field--type-string-long .field__label,
.erpal-content .erpal-section .field--type-text-long .field__label,
.erpal-content .erpal-section .field--type-text-with-summary .field__label {
  flex-basis: auto;
  max-width: none;
}

/* ---- Related lists: the reverse-reference view blocks (block ids start with
   "block-erpal-rel-") rendered below the record as compact, titled cards. ---- */
.erpal-content [id^="block-erpal-rel-"] {
  background: var(--erpal-surface);
  border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius);
  box-shadow: var(--erpal-shadow);
  margin: 0 0 18px;
  overflow: hidden;
}
.erpal-content [id^="block-erpal-rel-"] > h2,
.erpal-content [id^="block-erpal-rel-"] .block__title {
  margin: 0;
  padding: 13px 18px;
  font-size: .95rem;
  font-weight: 700;
  color: var(--erpal-ink);
  border-bottom: 1px solid var(--erpal-line);
}
.erpal-content [id^="block-erpal-rel-"] .views-element-container { border: 0; box-shadow: none; margin: 0; }
.erpal-content [id^="block-erpal-rel-"] table { margin: 0; }
.erpal-content [id^="block-erpal-rel-"] .view-empty {
  padding: 16px 18px;
  color: var(--erpal-ink-soft);
  font-size: .85rem;
}

/* =========================== ACTIVITY TIMELINE ===========================
   Merged reverse-chronological stream of a record's notes/emails/activities,
   rendered by TimelineBuilder via hook_entity_view. Reuses the .erpal-section
   card + .erpal-tag chip system; overrides the section's 2-col grid back to a
   single full-width column (timeline entries are full-width rows). */
.erpal-content .erpal-section.erpal-timeline { display: block; }
.erpal-tl__count {
  display: inline-block; margin-left: 6px; padding: 1px 9px;
  border-radius: 10px; background: var(--erpal-tag-bg); color: var(--erpal-ink-soft);
  font-size: .72rem; font-weight: 700; vertical-align: middle;
}
.erpal-tl__empty { color: var(--erpal-ink-soft); font-size: .88rem; padding: 6px 0 2px; }

.erpal-tl { position: relative; margin-top: 4px; }
/* The vertical spine. */
.erpal-tl::before {
  content: ""; position: absolute; left: 7px; top: 4px; bottom: 4px;
  width: 2px; background: var(--erpal-line);
}
.erpal-tl__day {
  position: relative; margin: 14px 0 8px; padding-left: 30px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--erpal-ink-soft);
}
.erpal-tl__day:first-child { margin-top: 2px; }

.erpal-tl__entry { position: relative; padding: 0 0 12px 30px; }
.erpal-tl__marker {
  position: absolute; left: 1px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--erpal-surface);
  border: 3px solid var(--erpal-ink-soft); box-sizing: border-box;
}
.erpal-tl__card {
  background: var(--erpal-bg); border: 1px solid var(--erpal-line);
  border-radius: var(--erpal-radius); padding: 9px 13px;
}
.erpal-tl__row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.erpal-tl__chip { flex: 0 0 auto; }
.erpal-tl__title {
  flex: 1 1 auto; min-width: 0; color: var(--erpal-brand);
  text-decoration: none; font-weight: 600; font-size: .9rem; word-break: break-word;
}
.erpal-tl__title:hover { text-decoration: underline; }
.erpal-tl__date {
  flex: 0 0 auto; margin-left: auto; color: var(--erpal-ink-soft);
  font-size: .76rem; white-space: nowrap;
}
.erpal-tl__snippet {
  margin-top: 4px; color: var(--erpal-ink-soft);
  font-size: .82rem; line-height: 1.4; word-break: break-word;
}

/* Per-kind chip colors + marker tint (Note grey · Email purple · Call green ·
   Meeting amber · Task blue). */
.erpal-tag--note    { background: var(--erpal-tag-bg); color: var(--erpal-tag-ink); }
.erpal-tag--email   { background: var(--erpal-tag-purple-bg); color: var(--erpal-tag-purple-ink); }
.erpal-tag--call    { background: var(--erpal-tag-green-bg); color: var(--erpal-tag-green-ink); }
.erpal-tag--meeting { background: var(--erpal-tag-amber-bg); color: var(--erpal-tag-amber-ink); }
.erpal-tag--task    { background: var(--erpal-tag-blue-bg); color: var(--erpal-tag-blue-ink); }
.erpal-tl__entry--note    .erpal-tl__marker { border-color: var(--erpal-marker-dim); }
.erpal-tl__entry--email   .erpal-tl__marker { border-color: var(--erpal-tag-purple-ink); }
.erpal-tl__entry--call    .erpal-tl__marker { border-color: var(--erpal-tag-green-ink); }
.erpal-tl__entry--meeting .erpal-tl__marker { border-color: var(--erpal-tag-amber-ink); }
.erpal-tl__entry--task    .erpal-tl__marker { border-color: var(--erpal-tag-blue-ink); }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 980px) {
  .erpal-dash-grid { grid-template-columns: 1fr; }
  .erpal-content .erpal-section { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 768px) {
  .erpal-app { grid-template-columns: 1fr; }
  .erpal-sidebar { transform: translateX(-100%); transition: transform .2s ease; }
  .erpal-app.is-nav-open .erpal-sidebar { transform: translateX(0); }
  .erpal-main { grid-column: 1; }
  .erpal-topbar__burger { display: block; }
  .erpal-content { padding: 18px 16px 48px; }
}