/* AceCloud portal design system — single source of truth for both portals.
 *
 * Loaded LAST in <head> so it wins ties against each page's inline <style>.
 * Component rules are prefixed with :root to reach specificity (0,2,0), which
 * ties the container-scoped rules the pages already carry (.top-actions .btn,
 * .actions .act-btn, …) and wins on source order. Layout stays with the page;
 * this file owns geometry, colour and overflow behaviour only.
 *
 * Pure presentation: no auth, API, CSP or DOM behaviour is touched.
 */

:root {
  /* brand */
  --ace-primary:      #156082;
  --ace-primary-hi:   #0e4d6a;
  --ace-navy:         #0e2841;
  --ace-ink:          #1a1d1f;

  /* surfaces + lines */
  --ace-surface:      #ffffff;
  --ace-surface-2:    #f1f5f9;
  --ace-line:         #cbd5e1;
  --ace-line-soft:    #e2e8f0;
  --ace-muted:        #64748b;

  /* semantic */
  --ace-danger:       #b91c1c;
  --ace-danger-soft:  #fee2e2;
  --ace-ok:           #15803d;
  --ace-ok-soft:      #dcfce7;
  --ace-info:         #0369a1;
  --ace-info-soft:    #e0f2fe;
  --ace-warn-soft:    #fef9c3;

  /* control scale — one height for every interactive control */
  --ace-ctl-h:        36px;
  --ace-ctl-h-sm:     30px;
  --ace-ctl-pad:      0 14px;
  --ace-ctl-pad-sm:   0 10px;
  --ace-radius:       8px;
  --ace-radius-sm:    6px;
  --ace-font:         13.5px;
  --ace-font-sm:      12.5px;
  --ace-focus:        0 0 0 3px rgba(21, 96, 130, .28);
}

/* ------------------------------------------------------------------ *
 * 1. Buttons
 * Every historical alias is folded onto one geometry. Colour intent
 * (edit / delete / success) is preserved through the variants below.
 * ------------------------------------------------------------------ */

:root .btn,
:root .btn-primary,
:root .btn-secondary,
:root .btn-new,
:root .btn-back,
:root .btn-logout,
:root .btn-cancel,
:root .btn-clone,
:root .btn-delete,
:root .btn-generate,
:root .btn-edit-sec,
:root .btn-del-sec,
:root .nav-btn,
:root .act-btn,
:root .apv-btn,
:root .pp-btn,
:root .ppq-btn,
:root .pdx-btn,
:root .add-btn,
:root .sc-btn,
:root .lp-btn,
:root .ubtn,
:root .sec-btn,
:root .mbtn,
:root .fbtn,
:root .pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  box-sizing: border-box;
  height: var(--ace-ctl-h);
  min-height: var(--ace-ctl-h);
  padding: var(--ace-ctl-pad);
  border: 1px solid transparent;
  border-radius: var(--ace-radius);
  font-family: inherit;
  font-size: var(--ace-font);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* default / secondary appearance */
:root .btn,
:root .btn-secondary,
:root .nav-btn,
:root .pp-btn,
:root .ppq-btn,
:root .pdx-btn,
:root .sec-btn,
:root .ubtn,
:root .mbtn,
:root .fbtn,
:root .lp-btn,
:root .pager-btn {
  background: var(--ace-surface);
  color: var(--ace-navy);
  border-color: var(--ace-line);
}

:root .btn:hover,
:root .btn-secondary:hover,
:root .nav-btn:hover,
:root .pp-btn:hover,
:root .ppq-btn:hover,
:root .pdx-btn:hover,
:root .sec-btn:hover,
:root .ubtn:hover,
:root .mbtn:hover,
:root .fbtn:hover,
:root .lp-btn:hover,
:root .pager-btn:hover {
  background: var(--ace-surface-2);
  border-color: var(--ace-primary);
}

/* primary */
:root .btn.primary,
:root .btn-primary,
:root .btn-new,
:root .btn-generate,
:root .mbtn-save,
:root .ubtn-submit,
:root .lp-save,
:root .add-btn,
:root .apv-btn.approve {
  background: var(--ace-primary);
  color: #fff;
  border-color: var(--ace-primary);
}

:root .btn.primary:hover,
:root .btn-primary:hover,
:root .btn-new:hover,
:root .btn-generate:hover,
:root .mbtn-save:hover,
:root .ubtn-submit:hover,
:root .lp-save:hover,
:root .add-btn:hover,
:root .apv-btn.approve:hover {
  background: var(--ace-primary-hi);
  border-color: var(--ace-primary-hi);
}

/* danger */
:root .btn.danger,
:root .btn-delete,
:root .btn-del-sec,
:root .lp-clear,
:root .apv-btn.reject {
  background: var(--ace-danger-soft);
  color: var(--ace-danger);
  border-color: transparent;
}

:root .btn.danger:hover,
:root .btn-delete:hover,
:root .btn-del-sec:hover,
:root .lp-clear:hover,
:root .apv-btn.reject:hover {
  background: #fecaca;
  border-color: var(--ace-danger);
}

/* informational (edit / clone) */
:root .btn-clone,
:root .btn-edit-sec {
  background: var(--ace-info-soft);
  color: var(--ace-info);
  border-color: transparent;
}

/* quiet (cancel / back / sign-out) */
:root .btn-cancel,
:root .btn-back,
:root .btn-logout,
:root .mbtn-cancel,
:root .ubtn-cancel,
:root .lp-cancel {
  background: transparent;
  color: var(--ace-muted);
  border-color: var(--ace-line);
}

:root .btn-cancel:hover,
:root .btn-back:hover,
:root .btn-logout:hover,
:root .mbtn-cancel:hover,
:root .ubtn-cancel:hover,
:root .lp-cancel:hover {
  background: var(--ace-surface-2);
  color: var(--ace-navy);
}

/* small scale — table row actions and dense toolbars */
:root .btn.small,
:root .btn.mini,
:root .act-btn,
:root .apv-btn,
:root .sc-btn,
:root .pager-btn {
  height: var(--ace-ctl-h-sm);
  min-height: var(--ace-ctl-h-sm);
  padding: var(--ace-ctl-pad-sm);
  font-size: var(--ace-font-sm);
  border-radius: var(--ace-radius-sm);
}

/* square icon-only controls keep a 1:1 box rather than the pill geometry */
:root .icon-btn,
:root .qty-btn,
:root .cf-sortbtn,
:root .modal-close,
:root .list-chip-x,
:root .list-chip-edit,
:root .remove-slot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--ace-ctl-h-sm);
  height: var(--ace-ctl-h-sm);
  min-width: var(--ace-ctl-h-sm);
  padding: 0 6px;
  border-radius: var(--ace-radius-sm);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
}

/* states */
:root .btn:disabled,
:root .btn[disabled],
:root .btn-primary:disabled,
:root .lp-btn:disabled,
:root .ubtn:disabled,
:root .act-btn:disabled,
:root .apv-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
}

:root .btn:focus-visible,
:root .btn-primary:focus-visible,
:root .act-btn:focus-visible,
:root .nav-btn:focus-visible,
:root .lp-btn:focus-visible,
:root .ubtn:focus-visible,
:root .mbtn:focus-visible,
:root input:focus-visible,
:root select:focus-visible,
:root textarea:focus-visible {
  outline: 2px solid var(--ace-primary);
  outline-offset: 1px;
  box-shadow: var(--ace-focus);
}

/* ------------------------------------------------------------------ *
 * 2. Button rows
 * `display:flex` without align-items defaults to `stretch`, which was
 * inflating buttons to the height of the tallest sibling — 74px in the
 * tracker header, 54px in proposal table rows. This is the fix.
 * ------------------------------------------------------------------ */

:root .top-actions,
:root .btns,
:root .btn-row,
:root .lp-btns,
:root .modal-btns,
:root .ubtn-row,
:root .pager-btns,
:root .aud-filters,
:root .filters,
:root .modal-foot,
:root .modal-foot .right {
  align-items: center;
  flex-wrap: wrap;
}

/* Table row actions stay on ONE line: wrapping them stacks six buttons
 * vertically and triples the row height. The table scroller (§4) is what
 * makes them reachable, not wrapping. */
:root .actions {
  align-items: center;
  flex-wrap: nowrap;
}

/* ------------------------------------------------------------------ *
 * 3. Form controls — one height, one border, one focus treatment
 * ------------------------------------------------------------------ */

:root input[type=text],
:root input[type=number],
:root input[type=email],
:root input[type=password],
:root input[type=date],
:root input[type=search],
:root input:not([type]),
:root select {
  box-sizing: border-box;
  min-height: var(--ace-ctl-h);
  /* Height comes from min-height + border-box, NOT from padding. Horizontal
   * padding is left to the page: some inputs reserve space for an inset icon
   * (.search-wrap) and overriding it makes the icon sit on the placeholder. */
  padding-top: 0;
  padding-bottom: 0;
  border: 1px solid var(--ace-line);
  border-radius: var(--ace-radius);
  font-family: inherit;
  font-size: var(--ace-font);
  color: var(--ace-ink);
  background: var(--ace-surface);
  outline: none;
}

:root textarea {
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--ace-line);
  border-radius: var(--ace-radius);
  font-family: inherit;
  font-size: var(--ace-font);
  color: var(--ace-ink);
  outline: none;
}

:root input:focus,
:root select:focus,
:root textarea:focus {
  border-color: var(--ace-primary);
  box-shadow: var(--ace-focus);
}

/* ------------------------------------------------------------------ *
 * 4. Tables — wide tables must always be reachable
 * `.table-wrap{overflow:hidden}` was clipping the Actions column with no
 * scrollbar on any viewport under ~1620px. overflow-x:auto restores it;
 * overflow-y stays hidden so the rounded corners still clip.
 * ------------------------------------------------------------------ */

:root .table-wrap,
:root .qbr-table-wrap,
:root .qbr-scroll,
:root .tablewrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pin the row-actions column so the controls stay on screen at rest instead
 * of only being reachable after a horizontal scroll. Scoped to .table-wrap,
 * whose only table (proposals) ends in an Actions column. */
:root .table-wrap > table > thead > tr > th:last-child,
:root .table-wrap > table > tbody > tr > td:last-child {
  position: sticky;
  right: 0;
  z-index: 2;
}

:root .table-wrap > table > tbody > tr > td:last-child {
  background: var(--ace-surface);
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .18);
}

:root .table-wrap > table > thead > tr > th:last-child {
  background: var(--ace-navy);
  box-shadow: -6px 0 8px -6px rgba(0, 0, 0, .35);
}

/* ------------------------------------------------------------------ *
 * 5. Modals — a panel may never exceed the viewport without a scroller
 * The tracker's .overlay already scrolls its own child, so it is left
 * alone; these are the centred flex modals in the proposal portal.
 * ------------------------------------------------------------------ */

:root .modal-bg > .modal,
:root .umodal,
:root .lpmodal {
  box-sizing: border-box;
  max-height: 88vh;
  overflow-y: auto;
  max-width: min(720px, 94vw);
}

:root .modal-bg,
:root .umodal-bg,
:root .lpmodal-bg {
  padding: 16px;
}

/* the tracker pattern: overlay scrolls, panel does not */
:root .overlay {
  overflow-y: auto;
}

/* ------------------------------------------------------------------ *
 * 6. Long content must wrap rather than escape its box
 * ------------------------------------------------------------------ */

:root .att-name,
:root .attachment-name,
:root .act-file,
:root .lp-row,
:root .lp-sub,
:root .prop-ref,
:root .cust-name {
  overflow-wrap: anywhere;
}

:root .lp-row,
:root .att-row,
:root .actions {
  min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  :root .btn,
  :root .btn-primary,
  :root .act-btn,
  :root .nav-btn {
    transition: none;
  }
}

/* ==========================================================================
   Modals that hold a table
   Manage users pinned its dialog to 560px and then put a four-column table in
   it whose last cell holds three nowrap buttons — Save / Reset password /
   Remove. The row's own minimum width is well past 900px, so the table simply
   ran out the side of the dialog with nothing to scroll and no way to reach the
   buttons. Two parts to the answer, and it is the same answer .table-wrap uses
   on the record list: let the dialog size itself to what it holds, and scroll
   the table rather than wrapping the buttons (wrapping them stacks six controls
   and triples every row).
   ========================================================================== */

/* Shrink-to-fit up to a ceiling, instead of a fixed width: a five-user list and
   a fifty-user list both get a dialog that fits. */
:root .modal--fit {
  width: auto;
  max-width: min(1100px, 95vw);
}

:root .mini-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 6px;
  /* without this the wrapper takes the table's min-content width as its own
     minimum and passes the overflow straight up to the dialog */
  min-width: 0;
  max-width: 100%;
}
:root .mini-table-wrap > .mini-table {
  margin-top: 0;
}
