/* dm_dashboard.css - module styles (dashboard pages only; prefix selectors with the page id, e.g. #p20_...). Owner: the dashboard module (D-136). Tokens from app.css (--dm-*, --ut-*), no hex colours. */
/* Page 1 Dashboard (ui_standards 8): header line -> big buttons -> KPI cards (5 + 5, 2 per row on phones) -> alerts -> charts -> quick links -> footer.
   --dm-accent / --dm-teal are requested from MAIN (app.css); until then the fallbacks below are used. */

/* ---------------------------------------------------------------- header line */
#p1_head .dm-p1-sub { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; color: var(--dm-muted); font-size: 13px; }
#p1_head .dm-p1-role { color: var(--dm-info); }
#p1_head .dm-p1-role .fa { font-size: 11px; margin-right: 2px; }

/* ---------------------------------------------------------------- big buttons (the two daily jobs, D-001) */
#p1_actions .t-Region-body, #p1_actions .t-ButtonRegion-buttons, #p1_actions { display: flex; flex-wrap: wrap; gap: 12px; }
#p1_actions { margin-bottom: 12px; }
#p1_actions .t-Button { flex: 1 1 200px; max-width: 280px; min-height: 48px; font-size: 16px; font-weight: 700; margin: 0; white-space: normal; }
#p1_actions .t-Button .t-Icon { font-size: 18px; }
#p1_new_sale { --a-button-background-color: color-mix(in srgb, var(--dm-info) 10%, var(--ut-component-background-color)); --a-button-text-color: var(--dm-info); --a-button-border-color: color-mix(in srgb, var(--dm-info) 35%, transparent); }

/* ---------------------------------------------------------------- KPI cards (anatomy ui_standards 8.4) */
#p1_kpis { --dm-p1-tone: var(--dm-muted); }
#p1_kpis .dm-p1-kpi--info    { --dm-p1-tone: var(--dm-info); }
#p1_kpis .dm-p1-kpi--ok      { --dm-p1-tone: var(--dm-ok); }
#p1_kpis .dm-p1-kpi--warn    { --dm-p1-tone: var(--dm-warn); }
#p1_kpis .dm-p1-kpi--bad     { --dm-p1-tone: var(--dm-bad); }
#p1_kpis .dm-p1-kpi--neutral { --dm-p1-tone: var(--dm-muted); }
#p1_kpis .dm-p1-kpi--brand   { --dm-p1-tone: var(--dm-brand); }
#p1_kpis .dm-p1-kpi--accent  { --dm-p1-tone: var(--dm-accent, var(--dm-info)); }
#p1_kpis .dm-p1-kpi--teal    { --dm-p1-tone: var(--dm-teal, var(--dm-brand)); }
#p1_kpis .a-CardView-items { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
#p1_kpis .a-CardView {
  height: 100%; border-radius: var(--dm-radius);
  border: 1px solid color-mix(in srgb, var(--dm-p1-tone) 30%, transparent);
  background: color-mix(in srgb, var(--dm-p1-tone) 7%, var(--ut-component-background-color));
}
#p1_kpis .a-CardView:hover { border-color: var(--dm-p1-tone); }
#p1_kpis .a-CardView-icon, #p1_kpis .a-CardView-iconWrap .a-CardView-icon {
  background: var(--dm-p1-tone); color: var(--dm-on-brand); border-radius: 50%;
}
#p1_kpis .a-CardView-title { color: var(--dm-p1-tone); font-size: 13px; font-weight: 600; white-space: normal; }
#p1_kpis .a-CardView-subTitle {
  color: var(--ut-body-text-color, inherit); font-size: 22px; font-weight: 700; white-space: nowrap;
  font-variant-numeric: tabular-nums; overflow: visible; text-overflow: clip;
}
#p1_kpis .a-CardView-body { font-size: 12px; color: var(--dm-muted); }
#p1_kpis .dm-p1-trend { font-weight: 600; }
#p1_kpis .dm-p1-trend.is-good { color: var(--dm-ok); }
#p1_kpis .dm-p1-trend.is-bad  { color: var(--dm-bad); }
#p1_kpis .dm-p1-trend.is-flat { color: var(--dm-muted); }
#p1_kpis .dm-p1-kpi--bad .dm-p1-foot { color: var(--dm-bad); }
#p1_kpis .dm-p1-kpi--ok .dm-p1-foot, #p1_kpis .dm-p1-kpi--info .dm-p1-foot { color: var(--dm-muted); }

/* "More (n)" only on phones */
#p1_more_wrap { display: none; }
#p1_more_wrap .t-Button { width: 100%; min-height: 44px; }

/* ---------------------------------------------------------------- alerts after the cards */
#p1_cheques, #p1_backup { margin-top: 0; }

/* ---------------------------------------------------------------- chart rows: a lone chart / quick links fills the row */
#p1_row2 .row > .col:only-child, #p1_row1 .row > .col:only-child { flex: 0 0 100%; max-width: 100%; }

/* ---------------------------------------------------------------- quick links (tiles) */
#p1_quick .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
#p1_quick .a-CardView { border-radius: var(--dm-radius); }
#p1_quick .a-CardView-icon { background: var(--dm-brand-tint); color: var(--dm-brand); border-radius: 50%; }
#p1_quick .a-CardView-title { font-size: 14px; font-weight: 600; white-space: normal; }
#p1_quick .a-CardView-subTitle { font-size: 12px; color: var(--dm-muted); white-space: normal; }

/* ---------------------------------------------------------------- footer */
#p1_footer .dm-p1-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; color: var(--dm-muted); font-size: 12px; padding: 4px 0 12px; }

/* ================================================================ round 5 SHELL (AD 2026-10-18): MOCKUP_DIFF p1 rows 1-18 */
/* row 2: date - Welcome - role pill sits in the title bar (Title Bar sub line slot) */
#p1_head .t-Region-body, #p1_head { padding: 0; margin: 0; }
/* row 3: KPI card = icon + label (row 1), big value (row 2), small text (row 3), no divider */
#p1_kpis .a-CardView-header { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icon title" "val val";
  align-items: center; column-gap: 10px; row-gap: 8px; padding: 16px 16px 4px; }
#p1_kpis .a-CardView-headerBody { display: contents; }
#p1_kpis .a-CardView-iconWrap { grid-area: icon; margin: 0; }
#p1_kpis .a-CardView-title { grid-area: title; margin: 0; }
#p1_kpis .a-CardView-subTitle { grid-area: val; margin: 0; }
#p1_kpis .a-CardView-body { border-top: 0; padding: 4px 16px 14px; }
#p1_kpis .a-CardView-mainContent, #p1_kpis .a-CardView-header + .a-CardView-body { border: 0; }
#p1_kpis .a-CardView-icon { width: 36px; height: 36px; font-size: 16px; }
/* row 4: Employees Expiring = amber card (mockup) */
#p1_kpis .a-CardView-item[data-id="EMPLOYEES"] .a-CardView { --dm-p1-tone: var(--dm-warn); }
/* row 5: installment summary block */
#p1_inst { margin-bottom: 12px; }
#p1_inst > .t-Region-bodyWrap > .t-Region-body { padding: 8px 16px 12px; }
#p1_inst_cards .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
#p1_inst_cards .a-CardView { border-radius: var(--dm-radius); border: 1px solid var(--dm-line); border-left: 3px solid var(--dm-muted);
  background: color-mix(in srgb, var(--dm-muted) 6%, var(--ut-component-background-color)); }
#p1_inst_cards .dm-p1-acc--open { border-color: var(--dm-brand); border-left-color: var(--dm-brand);
  background: color-mix(in srgb, var(--dm-brand) 6%, var(--ut-component-background-color)); }
#p1_inst_cards .a-CardView-header { padding: 10px 14px; }
#p1_inst_cards .a-CardView-title { font-size: 18px; font-weight: 700; color: var(--ut-body-text-color); }
#p1_inst_cards .a-CardView-subTitle { font-size: 13px; color: var(--dm-muted); }
#p1_inst_link .dm-p1-inst-month { margin: 16px 0 24px; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
#p1_inst_link .dm-p1-inst-open { margin: 0; font-size: 13px; }
#p1_inst_link .dm-p1-inst-open a { color: var(--dm-brand); text-decoration: none; }
/* rows 6 / 8: alert cards = white card, coloured left border, round icon, green bold title, small text */
#p1_cheques.t-Alert, #p1_backup.t-Alert { background: var(--ut-component-background-color); border: 1px solid var(--dm-line);
  border-left: 3px solid var(--dm-warn); border-radius: var(--dm-radius); box-shadow: none; margin-bottom: 12px; }
#p1_backup.t-Alert { border-left-color: var(--dm-info); }
#p1_cheques .t-Alert-icon, #p1_backup .t-Alert-icon { background: transparent; width: auto; padding: 0 0 0 16px; display: flex; align-items: center; }
#p1_cheques .t-Alert-icon .t-Icon, #p1_backup .t-Alert-icon .t-Icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--dm-warn); color: var(--dm-on-brand); font-size: 14px; }
#p1_backup .t-Alert-icon .t-Icon { background: var(--dm-info); }
#p1_cheques .t-Alert-icon .t-Icon::before, #p1_backup .t-Alert-icon .t-Icon::before { font-family: "Font APEX Small", "Font APEX"; font-size: 14px; }
#p1_cheques .t-Alert-icon .t-Icon::before { content: "\f09d"; }
#p1_backup .t-Alert-icon .t-Icon::before { content: "\f019"; }
#p1_cheques .t-Alert-content, #p1_backup .t-Alert-content { padding: 12px 16px; }
#p1_cheques .t-Alert-title { color: var(--dm-brand); font-size: 14px; font-weight: 700; }
#p1_backup .t-Alert-title { color: var(--ut-body-text-color); font-size: 14px; font-weight: 700; }
#p1_cheques .t-Alert-body, #p1_backup .t-Alert-body { font-size: 12px; color: var(--dm-muted); }
#p1_backup .t-Alert-body { color: var(--dm-brand); }
/* row 9: period chip right of the chart title */
.dm-chip.t-Button { pointer-events: none; border-radius: 999px; min-height: 26px; padding: 2px 10px; font-size: 11px; box-shadow: none;
  --a-button-background-color: var(--ut-component-background-color); --a-button-border-color: var(--dm-line); --a-button-text-color: var(--dm-muted); }
#p1_row1 .t-Region-header, #p1_row2 .t-Region-header { align-items: center; }
/* row 14 / 17: quick links = plain line icon, 2 columns on phones too */
#p1_quick .a-CardView-icon { background: transparent; color: var(--ut-body-text-color); border-radius: 0; font-size: 20px; }
#p1_quick .a-CardView-header { padding: 12px 14px; }
/* row 1: setup card (new shops) on phones = text first, buttons below (no one-word lines) */
@media (max-width: 759px) {
  #p1_setup.t-Alert--horizontal .t-Alert-wrap { flex-wrap: wrap; }
  #p1_setup .t-Alert-icon { display: none; }
  #p1_setup .t-Alert-content { flex: 1 1 100%; }
  #p1_setup .t-Alert-buttons { flex: 1 1 100%; justify-content: flex-start; padding: 0 16px 12px; }
  /* row 18: phone = no title / Refresh, date line first (the shop name is in the header) */
  html.page-1 .t-BreadcrumbRegion-title, html.page-1 #p1_refresh { display: none; }
  html.page-1 .t-BreadcrumbRegion-sub { margin-top: 0; }
  #p1_inst_link .dm-p1-inst-month { margin: 12px 0 16px; }
}

/* ---------------------------------------------------------------- tablet: 3 cards per row */
@media (max-width: 1199px) {
  #p1_kpis .a-CardView-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------------------------------------------------------------- phone (< 760 px): 2 per row, low-use cards behind More */
@media (max-width: 759px) {
  #p1_kpis .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #p1_kpis .a-CardView-header { padding: 10px 10px 4px; }
  #p1_kpis .a-CardView-body { padding: 0 10px 10px; }
  #p1_kpis .a-CardView-subTitle { font-size: 18px; }
  #p1_kpis .a-CardView-icon { width: 32px; height: 32px; font-size: 14px; }
  #p1_kpis:not(.is-more-open) .a-CardView-item:has(.dm-p1-low), #p1_kpis:not(.is-more-open) .a-CardView-item.dm-p1-low { display: none; }
  #p1_more_wrap { display: block; }
  #p1_actions .t-Button { max-width: none; flex: 1 1 140px; }
  #p1_quick .a-CardView-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  #p1_kpis .a-CardView-subTitle { font-size: 16px; }
}
/* ======================================================================= D-226 (Builder G, 2026-10-24) "less scroll" p1
   Layout only (mockup order kept): month-summary title + link on one line, compact chart / quick-link headers and tiles
   (page metadata: chart heights 270 -> 230, top 10 300 -> 250). */
#p1_inst_link > .t-Region-bodyWrap > .t-Region-body, #p1_inst_link .t-Region-body { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; }
#p1_inst_link .dm-p1-inst-month { margin: 10px 0 0; }
#p1_inst_link .dm-p1-inst-open { margin: 10px 0 0; }
:is(#p1_row1, #p1_row2) .t-Region-header .t-Region-headerItems { padding-top: .35rem; padding-bottom: .35rem; }
:is(#p1_row1, #p1_row2) .t-Region-header { padding-top: .25rem; }
:is(#p1_row1, #p1_row2) .t-Region-body { padding-top: .25rem; padding-bottom: .5rem; }
#p1_quick .a-CardView-header { padding: 8px 14px; }
/* ======================================================================= end D-226 (Builder G p1) */