/* Nanoq Intranet – Mobile app (1.61.0): the card on Settings and the intranet inside the app. */

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

.nq-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(--nq-frost, #dbe6ee); background: var(--nq-snow, #f7fafc);
}
.nq-app-connect[hidden] { display: none; }
.nq-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);
}
.nq-app-qr svg { width: 100%; height: 100%; display: block; }
.nq-app-connect.is-expired .nq-app-qr { opacity: .2; filter: grayscale(1); }
.nq-app-codebox { flex: 1 1 240px; min-width: 0; }
.nq-app-field { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; margin-bottom: 0.4rem; }
.nq-app-label { flex: 0 0 4.5rem; color: var(--nq-muted, #6b7c8a); font-size: 0.85rem; }
.nq-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(--nq-ink, #183247);
  background: var(--nq-surface, #fff); border: 1px solid var(--nq-frost, #dbe6ee); border-radius: 8px; padding: 0.2rem 0.5rem;
}
.nq-app-field code[data-app-code] { word-break: normal; overflow-wrap: normal; white-space: normal; }
.nq-app-connect.is-expired [data-app-ttl] { color: var(--bs-danger, #d9534f); font-weight: 600; }

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

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

/* ---------- The intranet 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.nanoq-in-app #Nanoq-navbar { display: none !important; }
  body.nanoq-in-app .layout-page { padding-top: 0 !important; }
  body.nanoq-in-app .content-wrapper > .container-xxl:first-child,
  body.nanoq-in-app .content-wrapper > .container-fluid:first-child { padding-top: max(0.75rem, env(safe-area-inset-top)); }
  html body.nanoq-in-app #kanban-boards-wrap { padding-top: var(--nq-alerts-bottom, 0px); }
}
body.nanoq-in-app .nq-app-pushbox .nanoq-push-txt .text-muted { display: block; }

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