/* Growth Desk on SAP UI5 Web Components (Fiori Horizon; light or dark follows the device). UI5 draws every control and
   supplies the --sap* theme variables; this file only lays out the pages and keeps each platform's color on its badge. */
:root {
  --x: #0f1419; --linkedin: #0a66c2; --facebook: #1877f2; --instagram: #c13584; --tiktok: #0f7c80;
  --gap: 1rem;
  color-scheme: light dark;
}
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--sapBackgroundColor, #f5f6f7); color: var(--sapTextColor, #1d2d3e);
  font-family: var(--sapFontFamily, "72", "72full", Arial, Helvetica, sans-serif); font-size: var(--sapFontSize, 0.875rem);
  -webkit-font-smoothing: antialiased;
}
@media (prefers-color-scheme: dark) { body { background: var(--sapBackgroundColor, #12171c); color: var(--sapTextColor, #eaecee); } }
[hidden] { display: none !important; }
.boot { color: var(--sapContent_LabelColor, #6a6d70); padding: 2rem; }

/* shell */
ui5-navigation-layout { height: 100vh; height: 100dvh; }
.view { box-sizing: border-box; width: 100%; max-width: 1120px; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 4rem; display: grid; gap: var(--gap); align-content: start; }
.view-head { display: grid; gap: 0.25rem; }
.view-body { display: grid; gap: var(--gap); min-width: 0; }
.loading { display: block; margin: 3rem auto; }
#notices { position: fixed; top: 3.75rem; right: 1rem; z-index: 50; display: grid; gap: 0.5rem; width: min(420px, calc(100vw - 2rem)); }

/* text */
.lede, .muted, .hint { color: var(--sapContent_LabelColor); }
.lede { margin: 0; max-width: 65ch; }
.small, .hint { font-size: var(--sapFontSmallSize, 0.75rem); }
.flush { margin: 0; }
.mono { font-family: var(--sapFontFamily_Mono, ui-monospace, Consolas, monospace); }
.empty { color: var(--sapContent_LabelColor); margin: 0; padding: 0.5rem 0; }
.error { color: var(--sapNegativeTextColor); padding: 2rem; }
blockquote { margin: 0; padding: 0.25rem 0 0.25rem 0.75rem; border-left: 3px solid var(--sapList_BorderColor); white-space: pre-wrap; }

/* layout pieces */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--gap); }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0.75rem; }
.grid-2.tight { gap: 0.75rem; }
.stack { display: grid; gap: 0.5rem; }
.card-body { padding: 0 1rem 1rem; display: grid; gap: 0.75rem; min-width: 0; }
ui5-card { min-width: 0; }
ui5-card.attention { outline: 1px solid var(--sapCriticalElementColor); outline-offset: -1px; border-radius: var(--sapElement_BorderCornerRadius, 0.75rem); }
.actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.push { margin-left: auto; }
.wide, .grow { flex: 1 1 14rem; min-width: 0; }
ui5-button.wide { width: 100%; }
.field { display: grid; gap: 0.25rem; min-width: 0; }
.field > ui5-input, .field > ui5-select, .field > ui5-textarea, .field > ui5-datetime-picker, .field > ui5-time-picker, .field > ui5-step-input, .field > ui5-file-uploader { width: 100%; }
.card-body > ui5-input, .card-body > ui5-textarea { width: 100%; }
.row-inline { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; padding-top: 0.5rem; }
.chips { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
ui5-panel.quiet::part(header) { padding-inline: 0; }
ui5-panel.quiet::part(content) { padding-inline: 0.25rem; }

/* list rows */
.li-row { display: flex; gap: 0.5rem; align-items: center; min-width: 0; }
.li-row.wrap { flex-wrap: wrap; }
.li-stack { display: grid; gap: 0.25rem; min-width: 0; padding: 0.5rem 0; }
.li-split { display: flex; gap: 0.75rem; align-items: center; justify-content: space-between; width: 100%; min-width: 0; padding: 0.25rem 0; }
.clip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
ui5-list.boxed { border-radius: var(--sapElement_BorderCornerRadius, 0.75rem); overflow: hidden; }
.mem-text { white-space: pre-wrap; }

/* platform badges: the one place brand colors appear */
.badge { display: inline-block; flex: none; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #fff;
  border-radius: 0.375rem; padding: 0.125rem 0.5rem; line-height: 1.4; }
.mark { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; color: #fff; font-weight: 700; font-size: 0.875rem; letter-spacing: -0.01em; }
:is(.badge, .mark).p-x { background: var(--x); }
@media (prefers-color-scheme: dark) { :is(.badge, .mark).p-x { background: #eff3f4; color: #0f1419; } }
:is(.badge, .mark).p-linkedin { background: var(--linkedin); }
:is(.badge, .mark).p-facebook { background: var(--facebook); }
:is(.badge, .mark).p-instagram { background: var(--instagram); }
:is(.badge, .mark).p-tiktok { background: var(--tiktok); }

/* today */
.attn-body { display: grid; gap: 0.5rem; min-width: 0; padding-block: 0.125rem; }
.run-summary { white-space: pre-wrap; }

/* review */
.item { display: grid; gap: 0.75rem; }
.item-head { display: grid; gap: 0.25rem; }
.item-head p { margin: 0; }
.variants { display: grid; gap: var(--gap); }
.claims { margin: 0; padding-left: 1.25rem; display: grid; gap: 0.25rem; }
.checks { margin: 0; padding-left: 1.25rem; }
.parts { display: grid; gap: 0.75rem; }
.part { display: grid; gap: 0.25rem; }
.part > ui5-textarea { width: 100%; }
.part-n { font-size: var(--sapFontSmallSize); color: var(--sapContent_LabelColor); }
.counter { justify-self: end; font-size: var(--sapFontSmallSize); color: var(--sapContent_LabelColor); font-variant-numeric: tabular-nums; }
.counter.over { color: var(--sapNegativeTextColor); font-weight: 700; }
.media { display: grid; gap: 0.5rem; }
.media-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.thumb { position: relative; margin: 0; width: 5.5rem; height: 5.5rem; border: 1px solid var(--sapList_BorderColor); border-radius: 0.5rem; overflow: hidden; display: grid; place-items: center; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-x { position: absolute; top: 0.125rem; right: 0.125rem; background: var(--sapBackgroundColor); border-radius: 50%; }
.approve-row { display: flex; gap: 0.75rem 1rem; flex-wrap: wrap; align-items: end; padding-top: 0.75rem; border-top: 1px solid var(--sapList_BorderColor); }
.approve-row > .field { flex: 1 1 15rem; max-width: 22rem; }
.dialog-body { display: grid; gap: 0.75rem; max-width: 26rem; }
.dialog-body p { margin: 0; }
.dialog-body ui5-input { width: 100%; }
.reasons { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.suggestion { background: var(--sapGroup_ContentBackground, transparent); border: 1px solid var(--sapList_BorderColor); border-radius: 0.5rem; padding: 0.625rem 0.75rem; display: grid; gap: 0.25rem; justify-items: start; }
.copy-fallback { width: 100%; }

/* calendar */
.cal-row { display: grid; grid-template-columns: 4.5rem auto auto minmax(0, 1fr) auto; gap: 0.25rem 0.75rem; align-items: center; width: 100%; min-width: 0; padding: 0.5rem 0; }
.cal-row .time { font-variant-numeric: tabular-nums; color: var(--sapContent_LabelColor); }
.cal-row > .actions, .cal-row > .edit-approved { grid-column: 1 / -1; }
.edit-approved { display: grid; gap: 0.5rem; }
.edit-approved ui5-textarea { width: 100%; }

/* settings */
.plat { border-top: 1px solid var(--sapList_BorderColor); padding: 0.875rem 0; display: grid; gap: 0.75rem; }
.plat:first-child { border-top: 0; padding-top: 0; }
.plat-head { display: flex; gap: 0.625rem; align-items: center; flex-wrap: wrap; }
.switch-label { display: inline-flex; align-items: center; gap: 0.25rem; }
.plat-body { display: grid; gap: 0.75rem; }
.slots { display: flex; gap: 0.375rem; flex-wrap: wrap; }

/* sign-in and first workspace */
.lone { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1rem; box-sizing: border-box; }
.lone ui5-card { width: min(26rem, 100%); }
.lone-body { padding: 1.75rem 1.5rem 1.5rem; display: grid; gap: 0.75rem; }
.lone-body .lede { margin-bottom: 0.5rem; }

@media (max-width: 599px) {
  .view { padding: 1rem 1rem 3rem; }
  .cal-row { grid-template-columns: 4rem auto minmax(0, 1fr); }
  .cal-row > ui5-tag { display: none; }
  .push { margin-left: 0; }
  .approve-row > .field { max-width: none; }
}