/* Shared page layout for the redesign (flag new_ui): Valentina's mockup v6/v7
   (gensig/diseno/new-ui/app-ui.html). Every redesigned view builds its page
   as a dashboard out of these pieces instead of its own grid CSS. Class names
   carry a ui- prefix because the app already has .card. Breakpoints: at
   ≤1180px a quarter card goes to half width and every other span to the full
   row; at ≤900px (phone) the page is one column, headline numbers two by two.
   Cards stack in source order, so the card that matters most goes first.
   Colors and fonts only from css/ui-tokens.css.

   <div class="ui-g12">
     <div class="ui-card ui-kpi ui-c3"><span class="lbl">…</span><span class="big">41<small>%</small></span><span class="sub">…</span></div>
     <section class="ui-card ui-c8">
       <header class="ui-card-h"><h2>…</h2><span class="note">…</span></header>
       <div class="ui-card-b">…</div>
       <footer class="ui-card-f">…</footer>
     </section>
   </div> */
/* A redesigned view's page (js/views/ui.js UI_VIEWS) gets the full width. */
body.new-ui .wrap.ui-wide { max-width: 1512px; padding: 28px 36px 80px; }
body.new-ui .ui-page { max-width: 1440px; margin: 0 auto; font: 14.5px/1.55 var(--ui-font); color: var(--ui-ink); }
body.new-ui .ui-g12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: 18px;
}
body.new-ui .ui-c3 { grid-column: span 3; }
body.new-ui .ui-c4 { grid-column: span 4; }
body.new-ui .ui-c5 { grid-column: span 5; }
body.new-ui .ui-c6 { grid-column: span 6; }
body.new-ui .ui-c7 { grid-column: span 7; }
body.new-ui .ui-c8 { grid-column: span 8; }
body.new-ui .ui-c12 { grid-column: span 12; }
/* Several cards in one column; the last one takes the leftover height. */
body.new-ui .ui-stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
body.new-ui .ui-stack > .ui-card:last-child { flex: 1; }

body.new-ui .ui-card {
  min-width: 0;
  background: var(--ui-card);
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  box-shadow: var(--ui-shadow);
  font-family: var(--ui-font);
  color: var(--ui-ink);
}
body.new-ui .ui-card-h {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;
  gap: 12px; padding: 18px 20px 0;
}
body.new-ui .ui-card-h h2 { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
body.new-ui .ui-card-h .note { color: var(--ui-ink-3); font-size: 13px; }
body.new-ui .ui-card-b { padding: 14px 20px 20px; }
body.new-ui .ui-card-f { padding: 0 20px 18px; font-size: 13px; }

/* Headline number. .hero is the one dark card a page may lead with. */
body.new-ui .ui-kpi { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
body.new-ui .ui-kpi .lbl { font-size: 13px; color: var(--ui-ink-2); display: flex; align-items: center; gap: 7px; }
body.new-ui .ui-kpi .big {
  display: flex; align-items: baseline; gap: 8px; margin-top: 6px;
  font: 500 40px/1 var(--ui-mono); letter-spacing: -.05em;
}
body.new-ui .ui-kpi .big small { font: 500 14px var(--ui-mono); letter-spacing: 0; color: var(--ui-ink-2); }
body.new-ui .ui-kpi .mid { font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.25; margin-top: 6px; }
body.new-ui .ui-kpi .sub { font-size: 13px; color: var(--ui-ink-3); }
/* .ui-lead: the one number a page opens with; the tiles after it are smaller. */
body.new-ui .ui-kpi.ui-lead .big { font-size: 56px; }
body.new-ui .ui-kpi.ui-lead .mid { font-size: 26px; }
body.new-ui .ui-kpi.hero { background: var(--ui-ink); color: var(--ui-bg); border-color: var(--ui-ink); }
body.new-ui .ui-kpi.hero :is(.lbl, .sub, .big small) { color: color-mix(in srgb, var(--ui-bg) 70%, transparent); }

/* Tables inside a card. td.n = number (mono), .r = right-aligned, tr.me =
   the client's own brand, .ct = a count next to a value. */
body.new-ui .ui-tbl { overflow-x: auto; }
body.new-ui .ui-tbl table { width: 100%; border-collapse: collapse; font-size: 14px; }
body.new-ui .ui-tbl th {
  text-align: left; font-weight: 500; font-size: 13px; color: var(--ui-ink-2);
  padding: 14px 20px 10px; border-bottom: 1px solid var(--ui-line); white-space: nowrap;
}
/* The app's global th/td (centered, small caps) don't apply here. */
body.new-ui .ui-tbl :is(th, td) { text-align: left; text-transform: none; letter-spacing: normal; }
body.new-ui .ui-tbl td { padding: 12px 20px; border-bottom: 1px solid var(--ui-line-2); vertical-align: middle; }
body.new-ui .ui-tbl tr:last-child td { border-bottom: 0; }
body.new-ui .ui-tbl td.n { font-family: var(--ui-mono); }
body.new-ui .ui-tbl tbody tr:hover td { background: var(--ui-hover); }
body.new-ui .ui-tbl .r { text-align: right; }
body.new-ui .ui-tbl tr.me td { background: var(--ui-accent-soft); }
body.new-ui .ui-tbl .ct { font: 13px var(--ui-mono); color: var(--ui-ink-2); margin-left: 8px; }

/* Empty and error states inside a card: same place, same size. */
body.new-ui .ui-empty { padding: 28px 8px; text-align: center; font-size: 13px; color: var(--ui-ink-2); }
body.new-ui .ui-empty.ui-error { color: var(--ui-neg); }

@media (max-width: 1180px) {
  body.new-ui .ui-c3 { grid-column: span 6; }
  body.new-ui :is(.ui-c4, .ui-c5, .ui-c6, .ui-c7, .ui-c8) { grid-column: span 12; }
}
@media (max-width: 900px) {
  body.new-ui .ui-g12 { gap: 12px; margin-bottom: 12px; }
  body.new-ui .ui-stack { gap: 12px; }
  body.new-ui .ui-kpi { padding: 14px; }
  body.new-ui .ui-kpi .big { font-size: 32px; }
  body.new-ui .ui-kpi.ui-lead .big { font-size: 44px; }
  body.new-ui .ui-kpi.ui-lead .mid { font-size: 21px; }
  body.new-ui .ui-kpi .mid { font-size: 16px; }
  body.new-ui .ui-tbl :is(th, td) { padding-left: 14px; padding-right: 14px; }
  /* Link-style actions get a 44px hit area on a phone. */
  body.new-ui :is(.ui-card-h, .ui-tbl .r) :is(a, .link) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* App top bar on a phone: the email is the long item that pushed every page
   sideways; the avatar already says who is signed in. */
@media (max-width: 900px) {
  body.new-ui #userEmail { display: none; }
  body.new-ui .topnav { min-width: 0; }
  body.new-ui .topnav .crumb { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Page pieces shared by the redesigned pages (Sources, Questions, Settings):
   the page header (.ui-head: title, one-line sub, actions on the right),
   buttons (.ui-btn black, one per card; .ui-btn-ghost for the rest) and
   .ui-hide-m, a table column a phone drops. A redesigned page fills the
   width through .wrap.ui-wide (js/views/ui.js UI_VIEWS). */
body.new-ui .ui-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 0 20px; }
body.new-ui .ui-head h1 { margin: 0; font-size: 26px; line-height: 1.15; font-weight: 600; letter-spacing: -.03em; }
body.new-ui .ui-head p { margin: 4px 0 0; max-width: 72ch; font-size: 14px; color: var(--ui-ink-2); }
body.new-ui .ui-head-acts { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; }
body.new-ui .ui-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 15px; border: 1px solid var(--ui-ink); border-radius: 9px;
  background: var(--ui-ink); color: var(--ui-card); font: 500 14px var(--ui-font);
  white-space: nowrap; box-shadow: none; cursor: pointer;
}
body.new-ui .ui-btn:hover:not(:disabled) { background: var(--ui-ink); opacity: .88; }
body.new-ui .ui-btn-ghost { background: var(--ui-card); color: var(--ui-ink); border-color: var(--ui-line); }
body.new-ui .ui-btn-ghost:hover:not(:disabled) { background: var(--ui-hover); opacity: 1; }
/* The app's global table look (uppercase heads, centered cells) stays out of .ui-tbl. */
body.new-ui .ui-tbl th { text-transform: none; letter-spacing: 0; }
body.new-ui .ui-tbl td { text-align: left; }
body.new-ui .ui-btn:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
@media (max-width: 900px) {
  body.new-ui .wrap.ui-wide { padding: 20px 16px 64px; }
  body.new-ui .ui-head { flex-direction: column; align-items: stretch; gap: 12px; }
  body.new-ui .ui-head h1 { font-size: 22px; }
  body.new-ui .ui-btn { min-height: 44px; }
  body.new-ui .ui-hide-m { display: none; }
  /* Small controls on the redesigned pages: segmented filters and icon
     buttons grow to a thumb-sized target; text links keep their look and get
     the hit area from padding that doesn't move the layout. */
  body.new-ui .ui-page .seg button { min-height: 40px; }
  body.new-ui .ui-page :is(.gs2-check, .ann2-del) { min-width: 40px; min-height: 40px; }
  body.new-ui #viewContent .ct-tb { min-width: 40px; height: 40px; }
  body.new-ui #viewActivity .act-restore { min-height: 40px; }
  body.new-ui .ui-page :is(.q-link, .hlp-copy, .hlp-page a, .src-page a) { display: inline-block; padding-block: 12px; margin-block: -12px; }
}