/* Umimmak Community – Mobile app (2.9.0): the card on Settings and the platform inside the app. */

/* ---------- Settings: connect a phone ---------- */
.um-app-card .um-app-steps { padding-left: 1.2rem; margin: 0 0 1rem; }
.um-app-card .um-app-steps li { margin-bottom: 0.25rem; }
.um-app-card .um-app-here {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.75rem; padding: 0.5rem 0.75rem; border-radius: 10px;
  background: var(--um-ice, #eaf3f9); color: var(--um-ink, #183247); font-weight: 600;
}
.um-app-card .um-app-here i { color: var(--um-accent, #1f74ad); font-size: 1.25rem; }
.um-app-card [data-app="code"] i { vertical-align: -2px; }

.um-app-connect {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.25rem;
  margin-top: 1rem; padding: 1rem; border-radius: 14px;
  border: 1px solid var(--um-frost, #dbe6ee); background: var(--um-snow, #f7fafc);
}
.um-app-connect[hidden] { display: none; }
.um-app-qr {
  flex: 0 0 auto; width: 200px; height: 200px; padding: 8px;
  background: #fff; border-radius: 12px; box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.um-app-qr svg { width: 100%; height: 100%; display: block; }
.um-app-connect.is-expired .um-app-qr { opacity: .2; filter: grayscale(1); }
.um-app-codebox { flex: 1 1 240px; min-width: 0; }
.um-app-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.4rem; }
.um-app-label { flex: 0 0 4.5rem; color: var(--um-muted, #6b7c8a); font-size: 0.85rem; }
.um-app-field code {
  flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; word-break: break-all;
  font-size: 0.95rem; letter-spacing: 0.04em; color: var(--um-ink, #183247);
  background: var(--um-surface, #fff); border: 1px solid var(--um-frost, #dbe6ee); border-radius: 8px; padding: 0.2rem 0.5rem;
}
.um-app-field code[data-app-code] { word-break: normal; overflow-wrap: normal; white-space: normal; }
.um-app-connect.is-expired [data-app-ttl] { color: var(--bs-danger, #d9534f); font-weight: 600; }

/* ---------- My devices ---------- */
.um-app-card .um-app-sub { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 0.5rem; }
.um-app-devices { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.um-app-device {
  display: flex; align-items: center; gap: 0.75rem;
  padding: 0.6rem 0; border-bottom: 1px solid var(--um-frost, #e5ecf1);
}
.um-app-device:last-child { border-bottom: 0; }
.um-app-ico {
  flex: 0 0 2.25rem; height: 2.25rem; border-radius: 10px; display: grid; place-items: center;
  background: var(--um-ice, #eaf3f9); color: var(--um-accent, #1f74ad); font-size: 1.3rem;
}
.um-app-dev-txt { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.um-app-this { background: var(--um-accent, #1f74ad); color: #fff; font-weight: 600; margin-left: 0.25rem; }
.um-app-push { color: var(--um-accent, #1f74ad); margin-left: 0.25rem; }
.um-app-device .btn { flex: 0 0 auto; }
.um-app-empty { padding: 0.4rem 0; }

@media (max-width: 575.98px) {
  .um-app-connect { justify-content: center; }
  .um-app-qr { width: 180px; height: 180px; }
  .um-app-label { flex-basis: 100%; }
  .um-app-device { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: 0.75rem; row-gap: 0.4rem; align-items: start; }
  .um-app-device .btn { grid-column: 2; justify-self: start; }
}

/* ---------- The platform inside the app ---------- */
/* The app has its own tab bar (home, messages, notifications, search, menu), so the web top bar is hidden on phones. */
@media (max-width: 1199.98px) {
  body.umimmak-in-app #Umimmak-navbar { display: none !important; }
  body.umimmak-in-app .layout-page { padding-top: 0 !important; }
  body.umimmak-in-app .content-wrapper > .container-xxl:first-child,
  body.umimmak-in-app .content-wrapper > .container-fluid:first-child { padding-top: max(0.75rem, env(safe-area-inset-top)); }
  html body.umimmak-in-app #kanban-boards-wrap { padding-top: var(--um-alerts-bottom, 0px); }
}
body.umimmak-in-app .um-app-pushbox .umimmak-push-txt .text-muted { display: block; }

/* 2.9.0: "Save offline" on files (only in the app) */
.um-offline-file.is-on,
body.umimmak-arctic .btn-group > .btn.btn-secondary.um-offline-file.is-on { color: #fff; background: #1f7a52; border-color: #1f7a52; }
body.umimmak-arctic .btn-group > .btn.btn-secondary.um-offline-file.is-on:hover { color: #fff; background: #17633f; border-color: #17633f; }

/* 2.9.0: "Open in the app" – on a phone in the browser, for users who have connected a phone */
.um-app-open { display: flex; align-items: center; gap: 0.6rem; margin: 12px 1rem 0; padding: 0.55rem 0.6rem 0.55rem 0.8rem; border: 1px solid rgba(31, 116, 173, 0.25); border-radius: 12px; background: #eef6fb; color: #16364f; font-size: 0.9rem; }
.um-app-open[hidden] { display: none; }
.um-app-open-ico { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: #1f74ad; color: #fff; font-size: 1.1rem; }
.um-app-open-txt { flex: 1 1 auto; min-width: 0; line-height: 1.3; }
.um-app-open-btn { flex: 0 0 auto; white-space: nowrap; }
.um-app-open-x { flex: 0 0 auto; border: 0; background: transparent; color: inherit; opacity: 0.7; width: 2rem; height: 2rem; padding: 0; font-size: 1.3rem; line-height: 1; border-radius: 50%; }
.um-app-open-x:hover, .um-app-open-x:focus-visible { opacity: 1; background: rgba(31, 116, 173, 0.12); }
[data-bs-theme=dark] .um-app-open { background: #142a3b; border-color: rgba(120, 180, 225, 0.25); color: #dbe9f4; }
[data-bs-theme=dark] .um-app-open-x:hover, [data-bs-theme=dark] .um-app-open-x:focus-visible { background: rgba(120, 180, 225, 0.15); }

/* 2.9.0: shared from the phone – the bar on the messages page and the "no longer available" message */
.um-app-share { margin-bottom: 0; }
/* Smal skærm: knappen på egen linje under teksten, så lange grønlandske ord ikke løber ind i den */
@media (max-width: 575.98px) {
    .um-app-share { flex-wrap: wrap; row-gap: 0.45rem; }
    .um-app-share .um-app-open-txt { flex: 1 1 calc(100% - 5.4rem); overflow-wrap: anywhere; }
    .um-app-share .um-app-open-x { order: 3; }
    .um-app-share .um-app-open-btn { order: 4; margin-left: 2.6rem; }
}
.um-app-share.is-error { background: #fdf1ee; border-color: rgba(176, 58, 46, 0.3); color: #5a1d16; }
.um-app-share.is-error .um-app-open-ico { background: #b03a2e; }
[data-bs-theme=dark] .um-app-share.is-error { background: #3a1d19; border-color: rgba(230, 120, 105, 0.3); color: #f6d9d4; }