/* ============================================================
   App shell — installed-app (PWA) polish and small-screen fixes.

   Layered last, like theme-modern.css: removing this file's <link>
   and app-shell.js reverts everything here.

   What it covers
     1. Safe areas — notch, rounded corners and the home indicator
        when the app runs from the home screen.
     2. Phone top bar — it overflowed the screen: the search box
        collapsed to nothing and "Account security" was cut off.
     3. Tablet top bar — the name pill wrapped onto three lines.
     4. Page headers on phones — titles and buttons were clipped.
     5. Bottom tab bar — any number of tabs (staff only see the
        sections they may open; see app-shell.js).
     6. Install prompt and "new version" notice.
============================================================ */

/* ---------- 1. Safe areas ---------- */
@supports (padding: max(0px)) {
  .admin-topbar{ padding-top: max(8px, env(safe-area-inset-top, 0px)); }
  .cp-inner{
    padding-top: max(24px, env(safe-area-inset-top, 0px));
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
  }
  .sidebar{ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

  /* Landscape phones: keep content out from under the notch. */
  @media (orientation: landscape) and (max-width: 1024px) {
    .admin-main{
      padding-left: env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
    .tabbar{
      padding-left: env(safe-area-inset-left, 0px);
      padding-right: env(safe-area-inset-right, 0px);
    }
    .cp-inner{
      padding-left: max(20px, env(safe-area-inset-left, 0px));
      padding-right: max(20px, env(safe-area-inset-right, 0px));
    }
  }
}

/* An installed app should not rubber-band the whole page or flash grey on tap. */
@media (display-mode: standalone) {
  html, body{ overscroll-behavior-y: none; }
  .view-admin a, .view-admin button, .tab{ -webkit-tap-highlight-color: transparent; }
  /* There is no browser tab to open a second site in. */
  .topbar-actions > a[target="_blank"]{ display: none; }
}

/* ---------- 3. Tablet / small laptop top bar ---------- */
/* The search box had no floor, so with the server-health badges showing it
   shrank to a few letters even on a wide screen, and the badges stacked. */
@media (min-width: 761px) {
  .admin-topbar .topbar-search{ flex: 1 1 200px; min-width: 170px; }
  .admin-topbar .zc-server-status{ flex: 0 0 auto; flex-wrap: nowrap; }
  .topbar-actions{ flex: 0 0 auto; flex-wrap: nowrap; }
  .topbar-actions .user-pill{
    max-width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    flex: 0 1 auto; min-width: 0;
  }
  .topbar-actions > .btn, #zc-account-security{ white-space: nowrap; flex: 0 0 auto; }
}
/* Laptops and tablets: not enough room for everything at full size. */
@media (max-width: 1500px) {
  .topbar-actions > a[target="_blank"]{ display: none; }   /* "View Site" */
}
@media (min-width: 761px) and (max-width: 1500px) {
  .admin-topbar .zc-server-status{ gap: 5px; }
  .admin-topbar .zc-server-badge{ min-width: 0; padding: 5px 8px; font-size: 11.5px; }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .topbar-actions .user-pill{ display: none; }
  .admin-topbar{ gap: 10px; }
}

/* Text buttons become round icon buttons wherever the bar is short of room;
   the title and aria-label still name them. */
@media (max-width: 1320px) {
  .topbar-actions > button.btn-ghost.btn-sm,
  #zc-account-security{
    position: relative; overflow: hidden;
    flex: 0 0 auto;
    width: 38px; height: 38px; min-height: 0; min-width: 0;
    padding: 0 !important;
    border-radius: 50% !important;
    color: transparent !important;
    text-indent: -9999px; white-space: nowrap;
  }
  .topbar-actions > button.btn-ghost.btn-sm[hidden]{ display: none; }
  .topbar-actions > button.btn-ghost.btn-sm::before,
  #zc-account-security::before{
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    text-indent: 0; color: #334155; font-size: 16px; line-height: 1;
  }
  .topbar-actions > button.btn-ghost.btn-sm::before{ content: "\1F4CA"; }
  #zc-account-security::before{ content: "\1F512"; }
}

/* ---------- 2. Phone top bar: one row that fits ---------- */
@media (max-width: 760px) {
  .admin-topbar,
  .admin-topbar:has(.zc-server-status:not([hidden])){
    flex-wrap: nowrap;
    gap: 8px;
    padding-left: 10px; padding-right: 10px; padding-bottom: 8px;
  }
  /* Server health is a desk check; on a phone it cost a full row on every screen. */
  .admin-topbar .zc-server-status{ display: none !important; }

  .admin-topbar .topbar-search{ flex: 1 0 84px; order: 0; min-width: 84px; }
  .admin-topbar .topbar-search input{ width: 100%; min-width: 0; text-overflow: ellipsis; }
  /* While typing, the search takes the whole bar. */
  .admin-topbar .topbar-search:focus-within{
    position: absolute; left: 10px; right: 10px; z-index: 30;
  }
  .admin-topbar .topbar-search:focus-within ~ .topbar-actions{ visibility: hidden; }

  .admin-topbar .topbar-actions{ flex: 0 1 auto; order: 1; flex-wrap: nowrap; gap: 6px; min-width: 0; }
  .topbar-actions > .zc-bell{ flex: 0 0 auto; }
  /* The status gives way before anything is pushed off the screen; tapping
     it still opens the full wording. */
  .topbar-actions #syncStatus{
    flex: 0 1 auto; min-width: 44px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* The dashboard banner had a fixed height, so on a phone — where its text
     wraps — the label on top and the Calendar/Reports buttons were cut off. */
  .dash-light-hero{ height: auto; min-height: 170px; }

  /* ---------- 4. Page headers ---------- */
  .page-hero .page-head{ flex-wrap: wrap; }
  .page-hero .page-head h1,
  .page-hero .page-head h2{
    white-space: normal; overflow: visible; text-overflow: clip;
    /* Break between words, never inside one ("Automati-ons"). */
    overflow-wrap: normal; word-break: normal;
  }
  /* The title keeps the room its longest word needs; buttons drop below it. */
  .page-hero .page-head > div:first-child{ flex: 1 1 auto; min-width: min-content; }
  .page-hero .page-actions{ flex-wrap: wrap; }
  .page-hero .page-actions .btn{ flex: 1 0 auto; max-width: 100%; overflow: visible; text-overflow: clip; }

  /* Two-column form rows written inline as "1fr 1fr": a long field made one
     column wider than half and pushed the other off the card. Let both shrink. */
  .module-container [style*="grid-template-columns:1fr 1fr"],
  .modal [style*="grid-template-columns:1fr 1fr"]{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
  .module-container [style*="grid-template-columns:1fr 1fr"] > *,
  .modal [style*="grid-template-columns:1fr 1fr"] > *{ min-width: 0; }
  .module-container [style*="grid-template-columns:1fr 1fr"] input,
  .module-container [style*="grid-template-columns:1fr 1fr"] select,
  .modal [style*="grid-template-columns:1fr 1fr"] input,
  .modal [style*="grid-template-columns:1fr 1fr"] select{ width: 100%; min-width: 0; }

  /* iOS zooms the page when a focused field is under 16px. */
  .view-admin input, .view-admin select, .view-admin textarea,
  .modal input, .modal select, .modal textarea,
  .cp input{ font-size: max(16px, 1rem); }

  /* ---------- 5. Tab bar holds however many tabs the person has ---------- */
  .tabbar{ grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 1fr; }
  .tabbar .tab[hidden]{ display: none; }
  .tab{ min-width: 0; }
  .tab-tx{ max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- 6. Install prompt + update notice ---------- */
.zc-install{
  display: flex; align-items: center; gap: 10px;
  margin: 18px auto 0; padding: 10px 12px;
  max-width: 360px;
  border: 1px solid rgba(255,255,255,.16); border-radius: 12px;
  background: rgba(255,255,255,.06);
  color: #dbe4f0; font-size: .86rem; line-height: 1.35; text-align: left;
}
.zc-install[hidden]{ display: none; }
.zc-install p{ margin: 0; flex: 1 1 auto; }
.zc-install strong{ color: #fff; }
.zc-install button{
  flex: 0 0 auto; border: none; border-radius: 9px; cursor: pointer;
  font: inherit; font-weight: 700; padding: 8px 12px; min-height: 38px;
}
.zc-install .zc-install-go{ background: #f39200; color: #1a1205; }
.zc-install .zc-install-no{ background: transparent; color: #9fb0c6; padding: 8px 6px; }

.sidebar-foot .zc-install-side{
  display: block; width: 100%; margin-bottom: 8px;
}
.sidebar-foot .zc-install-side[hidden]{ display: none; }

.zc-offline-chip{
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top, 0px) + 8px);
  z-index: 100000;
  padding: 6px 12px; border-radius: 999px;
  background: #7c2d12; color: #fff; font-size: .8rem; font-weight: 600;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  pointer-events: none;
}
.zc-offline-chip[hidden]{ display: none; }

@media print { .zc-install, .zc-offline-chip{ display: none !important; } }

/* ---------- 7. Entry paused (server-only-entry.js) ---------- */
.zc-pause{
  position: fixed; inset: 0; z-index: 99990;      /* above the app and its forms, below the account-verification screen */
  display: flex; align-items: center; justify-content: center;
  padding: max(20px, env(safe-area-inset-top, 0px)) 20px max(20px, env(safe-area-inset-bottom, 0px));
  background: rgba(10, 22, 40, .78);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow: auto;
}
.zc-pause[hidden]{ display: none; }
.zc-pause-card{
  width: 100%; max-width: 460px;
  background: #fff; color: #172334;
  border-radius: 16px; border-top: 6px solid #b91c1c;
  padding: 26px 24px 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  text-align: left;
}
.zc-pause-mark{
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #fee2e2; color: #b91c1c; font-weight: 800; font-size: 1.4rem;
  margin-bottom: 14px;
}
.zc-pause-card h2{ margin: 0 0 10px; font-size: 1.3rem; line-height: 1.25; color: #111827; }
.zc-pause-card p{ margin: 0 0 12px; font-size: 1rem; line-height: 1.5; }
.zc-pause-note{ color: #475569; font-size: .92rem !important; }
.zc-pause-reason{
  background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px;
  padding: 8px 10px; color: #7f1d1d; font-size: .9rem !important; overflow-wrap: anywhere;
}
.zc-pause-actions{ display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.zc-pause-actions .btn{ flex: 1 1 auto; min-height: 44px; }
.zc-pause-actions .btn[hidden]{ display: none; }
html.zc-paused, html.zc-paused body{ overflow: hidden; }
@media print { .zc-pause{ display: none !important; } }