/* =============================================================================
   JES CRM · clean.css — the shapes of the clean look (html[data-style="clean"], switched in the user menu by
   js/ui/look.js). Its colours, fonts and the sizes the shell computes with are the [data-style="clean"] values of
   tokens.css; this file only changes what no token reaches: the capitals of the module bar, vtiger's square
   corners and grey frames, the right-aligned labels of a record. Every rule starts with [data-style="clean"], so the
   classic look is exactly as it was while the attribute is not there, and the whole file is for the screen only:
   on paper print.css and the classic values apply. Colours come from tokens.css only (var(--…)); a few sizes of
   the shapes (a corner, an icon) are written here.
   ============================================================================= */
@media screen {

  /* ---------- frame: top bar, icon rail, module bar ---------- */
  [data-style="clean"] .vt-topbar { border-bottom-color: var(--color-border); box-shadow: var(--shadow-1); }
  [data-style="clean"] .vt-search { height: var(--control-height); }
  [data-style="clean"] .vt-search__input { height: var(--control-height); border-radius: var(--radius-md); background: var(--color-surface-alt); }
  [data-style="clean"] .vt-pins__link, [data-style="clean"] .vt-pins__more { padding: 0 12px; font-weight: var(--font-weight-btn); }
  [data-style="clean"] .vt-popover,
  [data-style="clean"] .dropdown__menu { border-color: var(--color-border); border-radius: var(--radius-md); padding: 6px; }
  [data-style="clean"] .dropdown__item { border-radius: var(--radius-sm); padding: 7px 12px; }
  [data-style="clean"] .dropdown__item:hover { background: var(--color-surface-hover); }

  [data-style="clean"] .vt-rail__link { width: 40px; height: 40px; margin: 6px 8px; border-radius: var(--radius-md); }
  [data-style="clean"] .vt-rail__list { padding-top: 6px; }

  [data-style="clean"] .vt-modulebar { border-top: 0; border-bottom-color: var(--color-border); }
  [data-style="clean"] .vt-modulebar__square {
    width: 36px; height: 36px; margin-left: 12px; border-radius: var(--radius-md); font-size: 18px;
  }
  [data-style="clean"] .vt-modulebar__square [class^="vicon-"] { font-size: 18px; }
  [data-style="clean"] .vt-modulebar__title {
    max-width: 280px; font-family: var(--font-family); font-size: 18px; font-weight: var(--font-weight-semibold);
    text-transform: none; color: var(--color-text-strong);
  }
  [data-style="clean"] .vt-crumbs { font-size: var(--font-size-btn); }
  [data-style="clean"] .vt-crumbs__item > a { color: var(--color-text-muted); }
  [data-style="clean"] .vt-modulebar__buttons { gap: var(--space-2); padding: 6px 16px; }

  [data-style="clean"] .shell-view { padding: 20px 24px 40px; }

  /* ---------- buttons, badges, dialogs, cards ---------- */
  [data-style="clean"] .btn:hover { box-shadow: none; }
  [data-style="clean"] .btn--small { padding: 4px 10px; }
  [data-style="clean"] .btn--icon.btn--small { padding: 2px 6px; }
  [data-style="clean"] .badge {
    padding: 1px 9px; border-color: transparent; border-radius: 999px;
    background: var(--color-badge-bg); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold);
  }
  [data-style="clean"] .badge--success { background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface)); }
  [data-style="clean"] .badge--warning { background: color-mix(in srgb, var(--color-warning) 12%, var(--color-surface)); }
  [data-style="clean"] .badge--danger { background: color-mix(in srgb, var(--color-danger) 12%, var(--color-surface)); }
  [data-style="clean"] .badge--info { background: color-mix(in srgb, var(--color-info) 12%, var(--color-surface)); }
  [data-style="clean"] .badge--muted { background: var(--color-badge-bg); }
  [data-style="clean"] .count-badge { border-radius: 999px; }

  /* no overflow: hidden here — a dialog taller than the window must keep scrolling (components.css) */
  [data-style="clean"] .dialog { border-radius: 14px; border-color: var(--color-border); }
  [data-style="clean"] .dialog__title { padding: 16px 20px; font-size: 17px; }
  [data-style="clean"] .dialog__body { padding: 20px; }
  [data-style="clean"] .dialog__buttons { justify-content: flex-end; padding: 12px 20px; background: var(--color-surface-alt); }
  [data-style="clean"] .dialog__cancel, [data-style="clean"] .dialog__cancel:hover { color: var(--color-text-muted); }
  [data-style="clean"] .toast { border-radius: var(--radius-md); }

  [data-style="clean"] .card,
  [data-style="clean"] .dash__card,
  [data-style="clean"] .summary-widget {
    border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-1);
  }
  [data-style="clean"] .dash__card { padding: 18px; }
  [data-style="clean"] .callout { border-radius: var(--radius-md); }

  /* ---------- record pages and forms: white cards, the label above its value ---------- */
  [data-style="clean"] .section,
  [data-style="clean"] .section.block {
    margin-bottom: 16px; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-1);
  }
  [data-style="clean"] .section.block { padding: 0 20px 14px; }
  [data-style="clean"] .section.block.block--collapsed { padding-bottom: 0; }
  [data-style="clean"] .section.block.block--untitled { padding-top: 16px; }
  [data-style="clean"] .section.block .block__title { padding: 14px 0 12px; font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
  [data-style="clean"] .section__title { font-weight: var(--font-weight-semibold); color: var(--color-text-strong); }
  [data-style="clean"] .section.block .block__grid { gap: 0 var(--space-8); }
  [data-style="clean"] .block__grid > .field:not(.field--blocks):not(.field--rows):not(.field--stacked) {
    display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0;
  }
  [data-style="clean"] .block__grid > .field--full { padding-right: 0; }
  [data-style="clean"] .block__grid > .field--full > .field__value,
  [data-style="clean"] .block__grid > .field--full > .field__body { margin-right: 0; }
  [data-style="clean"] .block__grid .field__label { padding-top: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; }
  [data-style="clean"] .block--read .block__grid > .field > .field__label,
  [data-style="clean"] .block--edit .block__grid > .field > .field__label { padding-top: 0; text-align: left; }
  [data-style="clean"] .block--read .block__grid > .field > .field__value { min-height: 0; padding: 0; border-bottom: 0; font-size: var(--font-size-btn); }
  [data-style="clean"] .block--edit .block__grid > .field > .field__value:not(:has(input, select, textarea, .picker, .richtext, .picklist-multi)) { padding-top: 0; }
  [data-style="clean"] .block--edit .block__grid .field__control > input:not([type="checkbox"], [type="radio"], [type="file"]),
  [data-style="clean"] .block--edit .block__grid .field__control > select,
  [data-style="clean"] .block--edit .block__grid .field__control > .field__group,
  [data-style="clean"] .block--edit .block__grid .field__control > .picker,
  [data-style="clean"] .block--edit .block__grid .field__control > .picklist-multi,
  [data-style="clean"] .block--edit .block__grid .field__control > textarea { flex: 1 1 100%; }
  [data-style="clean"] .form__footer { background: var(--color-surface); box-shadow: var(--shadow-2); }
  [data-style="clean"] .form__cancel, [data-style="clean"] .form__cancel:hover { color: var(--color-text-muted); }

  /* the header wraps its buttons under the title when the window is narrow, instead of squeezing the name */
  [data-style="clean"] .record-header { flex-wrap: wrap; align-items: center; gap: 16px; padding-bottom: 18px; }
  [data-style="clean"] .record-header__info { flex: 1 1 260px; min-width: 0; }
  [data-style="clean"] .record-header__icon { border-radius: 14px; }
  [data-style="clean"] .record-header__title { font-weight: var(--font-weight-semibold); line-height: 1.3; }
  [data-style="clean"] .tabs__bar { border-bottom-color: var(--color-border); }
  /* the tabs of the strip only: the entries of "More ▾" keep their own size and padding (detail.css) */
  [data-style="clean"] .tabs__strip > .tabs__tab { padding: 12px 16px; }
  [data-style="clean"] .tabs__strip > .tabs__tab--icon { width: 64px; padding-left: 0; padding-right: 0; }

  /* ---------- lists ---------- */
  /* the classic bottom padding: list.css sizes the list column to the window with it (min-height … - 31px) */
  [data-style="clean"] .shell-view[data-view="list"] { padding: 0 0 30px; }
  /* a list is a white sheet on the grey page (the rows would otherwise sit on the grey) */
  [data-style="clean"] .list:not(.list--embedded),
  [data-style="clean"] .pg-job_orders-clean,
  [data-style="clean"] .pg-job_orders-split { background: var(--color-surface); }
  [data-style="clean"] .list:not(.list--embedded) .list__actions { padding: var(--space-3) var(--space-4); }
  [data-style="clean"] .list__search { border-radius: var(--radius-md); }
  [data-style="clean"] .list__head th { background: var(--color-surface-alt); color: var(--color-field-label); font-size: var(--font-size-md); }
  [data-style="clean"] .list__table thead { background: var(--color-surface-alt); }
  [data-style="clean"] .list__searchrow th { background: var(--color-surface); }
  [data-style="clean"] .list__table td { border-top-color: var(--color-border-light); }
  [data-style="clean"] .list-sidebar { border-right-color: var(--color-border); }
  /* the table's box ends inside the window: list.css's 12rem is the classic chrome; the clean bars are taller */
  [data-style="clean"] .list__scroll { max-height: max(20rem, calc(100vh - 15rem)); }
  [data-style="clean"] .list__main:has(> .list__banner:not(:empty)) .list__scroll { max-height: max(20rem, calc(100vh - 18rem)); }
  /* the shown layout of "Table | Clean view | Split view": the clean buttons are all white, so it is underlined */
  [data-style="clean"] .list-layout__item.is-active { background: var(--color-surface-hover); box-shadow: inset 0 -2px 0 var(--color-primary); }

  /* ---------- narrow screens: the classic rules of layout.css / detail.css, at the clean sizes ---------- */
  @media (max-width: 767px) {
    [data-style="clean"] .shell-view { padding: 12px 12px 30px; }
    [data-style="clean"] .shell-view[data-view="list"] { padding: 0 0 30px; }
    [data-style="clean"] .vt-modulebar__title { max-width: 50vw; }
    [data-style="clean"] .vt-modulebar__buttons { padding: 6px 12px; }
    [data-style="clean"] .tabs__strip > .tabs__tab--icon { width: 56px; }
    [data-style="clean"] .section.block { padding: 0 14px 12px; }
  }
}