/* =============================================================================
   JES CRM · components.css — the shared components of the shell builder
   (docs/vtiger-look/02-ui-contract.md §a.3, §a.5): buttons, dropdowns, badges,
   states, toast, dialog, charts and the dashboard widgets, the building blocks of
   page widgets, and their narrow-screen rules. The list, blocks, detail and
   Settings parts live in list.css, blocks.css, detail.css and settings.css.
   Colours, fonts, font sizes, spacing, radius and shadows come from tokens.css.
   The only literals are structural: border widths and the rem / vh limits of
   boxes that have no token (dialog width, scroll heights, grid minimums), and the
   few pixel sizes vtiger's stylesheets give (todc buttons, dropdown items).
   ============================================================================= */

/* ---------- buttons (todc-bootstrap as vtiger v7 draws them) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  min-height: var(--control-height); padding: var(--btn-padding);
  border: 1px solid var(--color-btn-border); border-radius: var(--radius-sm);
  background: var(--color-btn-bg); color: var(--color-text);
  font-family: var(--font-family); font-size: var(--font-size-btn); font-weight: var(--font-weight-btn); line-height: 1.2;
  white-space: nowrap; cursor: pointer; text-decoration: none; vertical-align: middle;
}
/* (vtiger's skin overrides todc's bold with `.btn { font-weight: 100 }`, drawn with the Regular face: normal weight) */
.btn:hover { border-color: var(--color-border); background: var(--color-surface-hover); color: var(--color-text-strong); text-decoration: none; box-shadow: var(--shadow-1); }
.btn:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 1px; }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--color-text-muted); cursor: not-allowed; opacity: 0.65; box-shadow: none; }
/* a button whose request is under way (controls.js): it takes no second press until the answer is there */
.btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.btn--primary { background: var(--color-primary); border-color: var(--color-primary-border); color: var(--color-primary-text); }
.btn--primary:hover { background: var(--color-primary); border-color: var(--color-primary-border); color: var(--color-primary-text); }
.btn--success { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-primary-text); }
.btn--success:hover { background: var(--color-success-bg); border-color: var(--color-success-border); color: var(--color-primary-text); }
.btn--danger { color: var(--color-danger); }
.btn--danger:hover { color: var(--color-danger); }
.btn--link { min-height: 0; border-color: transparent; background: transparent; color: var(--color-link); padding: 0 var(--space-1); font-weight: normal; }
.btn--link:hover { border-color: transparent; background: transparent; color: var(--color-link); box-shadow: none; text-decoration: underline; }
.btn--small { min-height: 0; padding: 2px 8px; font-size: var(--font-size-md); }
.btn--icon { min-width: var(--control-height); padding: 0 8px; }
.btn--icon.btn--small { min-width: 0; padding: 2px 6px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
/* joined buttons: Follow · Edit · More ▾ */
.btn-group { display: inline-flex; align-items: stretch; vertical-align: middle; }
.btn-group > .btn, .btn-group > .dropdown > .btn { border-radius: 0; }
.btn-group > .btn + .btn, .btn-group > .btn + .dropdown > .btn, .btn-group > .dropdown + .btn,
.btn-group > .dropdown + .dropdown > .btn { margin-left: -1px; }
.btn-group > :first-child, .btn-group > .dropdown:first-child > .btn { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.btn-group > :last-child, .btn-group > .dropdown:last-child > .btn { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }

/* ---------- dropdown (ui/dropdown.js) ---------- */
.dropdown { position: relative; display: inline-flex; }
.dropdown__caret { font-size: 11px; }
.dropdown__menu {
  position: absolute; z-index: 45; top: 100%; left: 0;
  min-width: 160px; margin: 2px 0 0; padding: 5px 0; list-style: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); box-shadow: var(--shadow-dropdown);
  text-align: left;
}
.dropdown__menu--right { left: auto; right: 0; }
/* a menu placed over the page at its button (dropdown({float: true}): the row menu ⋮ of a list, whose scroll box
   would cut an absolutely placed menu off); dropdown.js sets top / bottom / left / right */
.dropdown__menu--float { position: fixed; margin: 0; max-height: 60vh; overflow-y: auto; }
.field__held { margin-left: var(--space-2); color: var(--color-text-muted); }
.dropdown__item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 0;
  padding: 3px 20px; border: 0; border-radius: 0; background: transparent;
  color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-btn); font-weight: normal; line-height: 1.6;
  white-space: nowrap; text-align: left; text-decoration: none; cursor: pointer;
}
.dropdown__item:hover, .dropdown__item:focus-visible { background: var(--color-surface-hover); color: var(--color-text-strong); text-decoration: none; outline: none; }
.dropdown__item:disabled, .dropdown__item[aria-disabled="true"] { color: var(--color-text-muted); cursor: not-allowed; background: transparent; }
.dropdown__item--danger { color: var(--color-danger); }
.dropdown__item[aria-busy="true"] { opacity: 0.6; cursor: progress; }
.dropdown__divider { height: 1px; margin: 5px 0; background: var(--color-border-light); }

/* ---------- states: loading, empty, error ---------- */
.state { padding: var(--space-6) var(--space-4); text-align: center; color: var(--color-text-muted); }
.state--error { color: var(--color-danger); }
.state__detail { margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-text-muted); }
.state__extra { margin-left: var(--space-1); }
.state .btn { margin-top: var(--space-3); }

/* ---------- badge ---------- */
.badge {
  display: inline-block; padding: 0 var(--space-2);
  border-radius: var(--radius-md); border: 1px solid var(--color-border);
  background: var(--color-badge-bg); color: var(--color-text);
  font-size: var(--font-size-sm); white-space: nowrap;
}
.badge--success { border-color: var(--color-success); color: var(--color-success); }
.badge--warning { border-color: var(--color-warning); color: var(--color-warning); }
.badge--danger  { border-color: var(--color-danger);  color: var(--color-danger); }
.badge--info    { border-color: var(--color-info);    color: var(--color-info); }
.badge--muted   { border-color: var(--color-muted);   color: var(--color-muted); }
/* the purple count of a related tab (vtiger .numberCircle) */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 4px;
  border-radius: var(--radius-sm); background: var(--color-count-bg); color: var(--color-count-text);
  font-size: 10px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums;
}

/* ---------- toast ---------- */
.toast-stack {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: 28rem;
}
.toast {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border); border-left-width: var(--space-1); border-radius: var(--radius-sm);
  background: var(--color-surface); box-shadow: var(--shadow-2); font-size: var(--font-size-btn);
}
.toast--success { border-left-color: var(--color-success); }
.toast--info    { border-left-color: var(--color-info); }
.toast--warning { border-left-color: var(--color-warning); }
.toast--error   { border-left-color: var(--color-danger); }
.toast__text { flex: 1; white-space: pre-wrap; }

/* ---------- dialog (vtiger's modal: white, a title bar with a rule, buttons at the foot) ---------- */
.dialog {
  padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-2);
  width: min(32rem, calc(100vw - var(--space-8))); max-height: calc(100vh - var(--space-8));
  font-size: var(--font-size-md);
}
.dialog--wide { width: min(60rem, calc(100vw - var(--space-8))); }
.dialog::backdrop { background: var(--color-overlay); }
.dialog__title {
  margin: 0; padding: 12px 15px; border-bottom: 1px solid var(--color-border-light);
  font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-strong);
}
.dialog__body { padding: 15px; overflow: auto; }
.dialog__message { margin: 0 0 var(--space-3); white-space: pre-wrap; }
/* vtiger's ModalFooter.tpl: centred, the green Save first, then the red "Cancel" link (.cancelLink, 14 px) */
.dialog__buttons {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); padding: 10px 15px;
  border-top: 1px solid var(--color-border-light); background: var(--color-footer-bg);
}
.dialog__cancel, .dialog__cancel:hover { padding-left: 10px; color: var(--color-required); font-size: var(--font-size-btn); }
/* the user's preferences (ui/user-menu.js): label | control rows */
.prefs { display: grid; grid-template-columns: minmax(8rem, auto) minmax(0, 1fr); gap: 10px 15px; align-items: center; margin: 0; }
.prefs dt { color: var(--color-field-label); text-align: right; }
.prefs dd { margin: 0; }
.prefs__note { margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-sm); }

/* ---------- chart and dashboard (vtiger widgets) ---------- */
.chart { position: relative; height: 18rem; }
.chart--clickable canvas { cursor: pointer; }
.dash__tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0; margin: 0 0 15px; border-bottom: 1px solid var(--color-border-light); }
.dash__tab {
  padding: 10px 15px; border-bottom: 3px solid transparent;
  color: var(--color-text-muted); font-size: var(--font-size-btn); text-decoration: none; white-space: nowrap;
}
.dash__tab:hover { color: var(--color-text); text-decoration: none; }
.dash__tab[aria-current="page"] { border-bottom-color: var(--color-tab-active); color: var(--color-text); font-weight: 700; }
.dash__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 15px; }
.dash__card {
  display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 15px;
  border: 2px solid var(--color-widget-border); border-radius: 0; background: var(--color-surface);
}
.dash__card--wide { grid-column: 1 / -1; }
.dash__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.dash__title { flex: 1; min-width: 0; margin: 0; font-size: var(--font-size-btn); font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
.dash__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.dash__tools select { min-height: 24px; padding: 0 4px; font-size: var(--font-size-md); }
.dash__tool {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 5px;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
  color: var(--color-text-muted); font-size: var(--font-size-md); font-weight: normal; cursor: pointer;
}
.dash__tool:hover, .dash__tool[aria-pressed="true"] { border-color: var(--color-btn-border); background: var(--color-btn-bg); color: var(--color-text-strong); }
.dash__stat { font-size: var(--font-size-xl); font-weight: 600; font-variant-numeric: tabular-nums; }
.dash__stat-label { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.dash__drill { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th, .data-table td { padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; }
.data-table th { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text); white-space: nowrap; }
.data-table td { color: var(--color-text-strong); }
.data-table td.is-number, .data-table th.is-number { text-align: right; font-variant-numeric: tabular-nums; }
.data-table tr.is-clickable { cursor: pointer; }
.data-table tr.is-clickable:hover { background: var(--color-row-hover); }
.data-table tr.is-clickable:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.data-table__scroll { position: relative; overflow-x: auto; }

/* ---------- building blocks for page widgets (static/js/pages/…) ----------
   A page file may also have its own css/pages/<key>.css (classes pg-<key>-…); these shared ones cover
   what the page designs draw themselves — cards (contacts, leave balances), label / value lists
   (profit panel), a boxed remark (duplicates, hints), a column of blocks, and small pictures
   (quota screenshots, a photo). */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); padding: 0; list-style: none; }
.card { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; padding: var(--space-3); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); background: var(--color-surface); }
.card__title { margin: 0; font-size: var(--font-size-btn); font-weight: 600; overflow-wrap: anywhere; }
.card__note { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.kv { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.kv dt { color: var(--color-field-label); font-size: var(--font-size-md); }
.kv dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--color-text-strong); }
.kv .kv__total { font-weight: 600; border-top: 1px solid var(--color-border); padding-top: var(--space-1); }
.callout { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-left-width: var(--space-1); border-radius: var(--radius-sm); background: var(--color-surface); }
.callout--info { border-left-color: var(--color-info); }
.callout--warning { border-left-color: var(--color-warning); }
.callout--danger { border-left-color: var(--color-danger); }
.stack { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.thumbs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.thumb { width: 8rem; height: 8rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); object-fit: cover; }

/* ---------- narrow screens ---------- */
@media (max-width: 800px) {
  .dash__grid { grid-template-columns: minmax(0, 1fr); }
  .prefs { grid-template-columns: minmax(0, 1fr); }
  .prefs dt { text-align: left; }
}