/* GMS app.css — 2.99.254f app frame = the visible area (height:100%); Android Chrome misreads 100dvh after a page change in the installed app (was 2.99.254b lift rule wins over every frame's own style (was 2.99.254a bottom bar clears the phone's own navigation strip (installed app, Android edge-to-edge) (was 2.42.3 white top bar; bottom nav mobile-only; one badge size) */
/* =====================================================================
   GMS — App UI design system (2.9.0)  [patch 2.8.5c: teal tile borders]
   App-style tile UI per the approved mockup. Teal palette, Outfit/Sora.
   Loaded AFTER style.css + role css; this layer defines the app shell,
   tiles, and refreshes shared components (cards, forms, buttons).
   ===================================================================== */

/* ---- Self-hosted fonts -------------------------------------------- */
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/outfit-latin-400-normal.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/outfit-latin-500-normal.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/outfit-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/outfit-latin-700-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/sora-latin-600-normal.woff2') format('woff2');}
@font-face{font-family:'Sora';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/sora-latin-700-normal.woff2') format('woff2');}

/* ---- Tokens ------------------------------------------------------- */
:root{
  --teal:#0fb5c9; --teal-deep:#0a8fa1; --teal-ink:#075563;
  --ink:#0f2733; --muted:#6b8794; --line:#e3edf1;
  --bg:#eef4f7; --card:#ffffff; --danger:#d83a3a; --ok:#0a7c5a;
  --shadow:0 6px 20px rgba(15,75,90,.08);
  --shadow-lg:0 14px 34px rgba(10,50,60,.16);
  --radius:18px; --radius-sm:12px;
  --app-w:480px;
}

/* ---- App shell ---------------------------------------------------- */
body.app-body{
  margin:0; background:linear-gradient(160deg,#dfeef2,#f4f8fa) fixed;
  font-family:'Outfit',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ink); -webkit-font-smoothing:antialiased;
  height:100vh; height:100dvh; overflow:hidden;
  display:flex; flex-direction:column; align-items:center;
}
/* 2.99.254f - measured on Android (installed app): after any page change
   100dvh came out 879px on an 822px screen, pushing the bottom bar 56px down.
   height:100% follows the visible area every time. Wide screens keep their
   own rule below (height:auto). */
html{ height:100%; }
body.app-body{ height:100%; }
.app-shell{
  width:100%; max-width:var(--app-w); margin:0; flex:1 1 auto; min-height:0; position:relative;
  background:var(--bg); box-shadow:0 0 40px rgba(10,50,60,.06);
  display:flex; flex-direction:column; overflow:hidden;
}
.app-topbar{
  flex:none; z-index:30; display:flex; align-items:center;
  justify-content:space-between; gap:12px; padding:12px 20px;
  background:#fff;
  border-bottom:1px solid var(--line);
}
.app-brand{display:flex; align-items:center; gap:8px; text-decoration:none;
  font-family:'Sora',sans-serif; font-weight:700; font-size:17px; color:var(--teal-deep);}
.app-brand:hover{text-decoration:none;}
.app-brand svg{width:24px; height:24px; stroke:var(--teal-deep); stroke-width:2;
  fill:none; stroke-linecap:round; stroke-linejoin:round;}
.app-topbar-actions{display:flex; align-items:center; gap:14px;}
.app-iconbtn{position:relative; display:inline-flex; color:var(--ink); text-decoration:none;}
.app-iconbtn svg{width:23px; height:23px; stroke:currentColor; stroke-width:1.7;
  fill:none; stroke-linecap:round; stroke-linejoin:round;}
/* 2.42.3 — .app-iconbtn .dot is defined ONCE, in layout-app.php, at the shared
   18px badge size. The old rule here (16px + 2px border = a different size) is
   removed so every badge in the app renders identically. */

.app-context{flex:none; margin:12px 16px 2px; background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:12px 16px; box-shadow:var(--shadow);}
.app-context .lbl{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px;}
.app-context .val{font-weight:700; font-size:15px; margin-top:3px; line-height:1.3; word-break:break-word;}

.app-main{flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch; padding:8px 16px 14px;}

/* ---- Bottom nav --------------------------------------------------- */
.app-bottomnav{flex:none; width:calc(100% - 32px); margin:0 auto 12px;
  display:flex; align-items:center; justify-content:space-around;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:10px 24px; box-shadow:var(--shadow-lg); z-index:40;}
/* 2.99.254a - the installed app draws under the phone's own navigation strip
   (Android edge-to-edge, iPhone home bar): lift the bar above it. In a normal
   browser the inset is 0, so nothing changes there. */
/* 2.99.254b - !important: the PMCA / landlord / tenant frames load their own
   bottom-bar style after this file and used to put the 12px gap back. */
body .app-bottomnav{ margin-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
@media (display-mode: standalone){
  body .app-bottomnav{ margin-bottom:calc(12px + env(safe-area-inset-bottom, 0px)) !important; }
  body .app-topbar{ padding-top:calc(12px + env(safe-area-inset-top, 0px)) !important; }
}
.app-bottomnav a{display:flex; flex-direction:column; align-items:center; gap:2px;
  color:var(--muted); text-decoration:none; font-size:10px; font-weight:600; position:relative;}
.app-bottomnav a svg{width:23px; height:23px; stroke:currentColor; stroke-width:1.8;
  fill:none; stroke-linecap:round; stroke-linejoin:round;}
.app-bottomnav a.fab{width:54px; height:54px; border-radius:50%; background:var(--teal);
  justify-content:center; margin-top:-30px; box-shadow:0 8px 18px rgba(15,181,201,.45); color:#fff;}
.app-bottomnav a.fab svg{width:26px; height:26px;}
.app-bottomnav a .dot{position:absolute; top:-4px; right:6px; min-width:18px; height:18px;
  padding:0 5px; background:var(--danger); color:#fff; font-size:10px; font-weight:700;
  border-radius:9px; display:flex; align-items:center; justify-content:center;}

/* ---- Tiles -------------------------------------------------------- */
.tile-grouplbl{font-family:'Sora',sans-serif; color:var(--teal-deep); font-weight:700;
  font-size:14px; margin:16px 4px 12px;}
.tile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:13px;}
.tile{background:var(--card); border:1.5px solid var(--teal); border-radius:var(--radius);
  aspect-ratio:1/1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px; text-decoration:none; color:var(--ink); position:relative; transition:.16s;}
.tile:hover{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--teal-deep); text-decoration:none;}
.tile svg{width:32px; height:32px; stroke:var(--teal); stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round;}
.tile span{font-size:12.5px; font-weight:600; text-align:center; line-height:1.15; padding:0 6px;}
.tile .tbadge{position:absolute; top:9px; right:9px; min-width:18px; height:18px; padding:0 5px;
  background:var(--danger); color:#fff; font-size:10px; font-weight:700; border-radius:9px;
  display:flex; align-items:center; justify-content:center;}

/* ---- Headings (Sora display) ------------------------------------- */
.app-body h1{font-family:'Sora',sans-serif; font-size:23px; letter-spacing:-.3px; margin:6px 0 4px;}
.app-body h2{font-family:'Sora',sans-serif; font-size:17px; margin:0 0 6px; color:var(--ink);}
.app-sub{color:var(--muted); font-size:13px; margin:0 0 4px;}

/* ---- Cards (refresh shared .card on app pages) -------------------- */
.app-body .card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px; margin-bottom:16px; box-shadow:var(--shadow);}
.app-body .card h2.mt-0{margin-top:0;}

/* ---- Buttons ------------------------------------------------------ */
.app-body .btn{font-family:inherit; font-weight:600; font-size:14px; padding:12px 20px;
  border-radius:var(--radius-sm); border:1px solid transparent; cursor:pointer; line-height:1.2;
  display:inline-block;}
.app-body .btn-primary{background:var(--teal); color:#fff;}
.app-body .btn-primary:hover{background:var(--teal-deep); text-decoration:none;}
.app-body .btn-ghost{background:#fff; border-color:var(--line); color:var(--ink);}
.app-body .btn-ghost:hover{background:#f4fafb; text-decoration:none;}

/* ---- Forms (unified app look) ------------------------------------ */
.app-body .form-field{margin-bottom:16px;}
.app-body .form-field label{font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.app-body .form-field input[type="text"],
.app-body .form-field input[type="email"],
.app-body .form-field input[type="password"],
.app-body .form-field input[type="number"],
.app-body .form-field input[type="date"],
.app-body .form-field textarea,
.app-body .form-field select{
  width:100%; font-family:inherit; font-size:14px; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--radius-sm); background:#fafdfe; color:var(--ink);
  transition:.15s;}
.app-body .form-field input:focus,
.app-body .form-field textarea:focus,
.app-body .form-field select:focus{
  outline:none; border-color:var(--teal); box-shadow:0 0 0 3px rgba(15,181,201,.15); background:#fff;}
.app-body .form-help{font-size:11.5px; color:var(--muted); margin-top:5px;}

/* ---- Flash / errors ---------------------------------------------- */
.app-body .flash{border-radius:var(--radius-sm); padding:12px 16px; margin-bottom:14px; font-size:14px;}
.app-body .errors{border-radius:var(--radius-sm);}

/* ---- Refresh tenant component classes used on detail pages -------- */
.app-body .tn-pagehead{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
.app-body .tn-pagehead h1{margin:0;}
.app-body .tn-sub{color:var(--muted); margin:2px 0 0;}
.app-body .tn-stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:13px; margin-bottom:16px;}
.app-body .tn-stat-card{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow);}
.app-body .tn-stat-card-label{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.5px;}
.app-body .tn-stat-card-value{font-family:'Sora',sans-serif; font-size:24px; font-weight:700; margin-top:6px;}
.app-body .tn-stat-card-sublabel{color:var(--muted); font-size:12px; margin-top:2px;}
.app-body .tn-stat-date{font-size:18px;}
.app-body .tn-cards-2col{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.app-body .tn-dl{display:grid; grid-template-columns:130px 1fr; gap:8px 14px; margin:0;}
.app-body .tn-dl dt{color:var(--muted); font-size:14px;}
.app-body .tn-dl dd{margin:0; font-size:14px;}
.app-body .tn-table{width:100%; border-collapse:collapse; background:var(--card);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
.app-body .tn-table th,.app-body .tn-table td{padding:12px 14px; text-align:left;
  border-bottom:1px solid var(--line); font-size:14px;}
.app-body .tn-table th{background:#f2fafb; color:var(--teal-ink); font-weight:600; font-size:12px;
  text-transform:uppercase; letter-spacing:.5px;}
.app-body .tn-table tbody tr:last-child td{border-bottom:none;}

/* ---- Narrow phones ------------------------------------------------ */
@media (max-width:380px){
  .tile span{font-size:11.5px;}
  .app-body .tn-cards-2col{grid-template-columns:1fr;}
  .app-body .tn-dl{grid-template-columns:110px 1fr;}
}
@media (max-width:520px){
  .app-body .tn-cards-2col{grid-template-columns:1fr;}
}

/* ---- Accessibility ------------------------------------------------ */
.app-bottomnav a:focus-visible,.tile:focus-visible,.app-iconbtn:focus-visible,.app-brand:focus-visible{
  outline:2px solid var(--teal-deep); outline-offset:2px; border-radius:8px;}
@media (prefers-reduced-motion:reduce){ .tile{transition:none;} }

/* =====================================================================
   2.9.0a — Detail screen: stat row + sub-tiles + content panel
   ===================================================================== */

/* Three stat cards forced into one row (My Unit screen top) */
.app-body .unit-stats{grid-template-columns:repeat(3,1fr); gap:10px;}
.app-body .unit-stats .tn-stat-card{padding:11px 10px;}
.app-body .unit-stats .tn-stat-card-label{font-size:9.5px;}
.app-body .unit-stats .tn-stat-card-value{font-size:17px;}
.app-body .unit-stats .tn-stat-card-sublabel{font-size:9.5px; line-height:1.25;}
.app-body .unit-stats .tn-stat-date{font-size:15px;}

/* The "big blue box" content panel — shows the selected section, scrolls if tall */
.sub-panel{position:relative; background:#fff; border:2px solid var(--teal);
  border-radius:var(--radius); padding:18px; margin:6px 0 14px;
  max-height:46vh; overflow-y:auto; box-shadow:var(--shadow); -webkit-overflow-scrolling:touch;}
.sub-panel .panel-view{display:none;}
.sub-panel .panel-view.on{display:block;}
.sub-panel h2{margin-top:0;}

/* Sub-tile row (section switcher) — smaller than home tiles */
.subtile-row{display:grid; grid-template-columns:repeat(4,1fr); gap:9px; margin-bottom:6px;}
.subtile{position:relative; background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:11px 5px; display:flex; flex-direction:column; align-items:center; gap:5px;
  text-align:center; cursor:pointer; text-decoration:none; color:var(--ink); transition:.14s;}
.subtile:hover{border-color:#cde6ec;}
.subtile svg{width:21px; height:21px; stroke:var(--teal); stroke-width:1.7; fill:none;
  stroke-linecap:round; stroke-linejoin:round;}
.subtile span{font-size:11px; font-weight:600; line-height:1.12;}
.subtile.on{background:#e7f7fa; border-color:var(--teal); box-shadow:0 0 0 2px rgba(15,181,201,.25);}
.subtile .reddot{position:absolute; top:6px; right:6px; width:9px; height:9px;
  background:var(--danger); border-radius:50%; border:1.5px solid #fff;}

/* Wide tables: scroll inside the column (auto-wrapped by JS in the layout). */
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  border:1px solid var(--line); border-radius:var(--radius);}
.table-scroll > table{min-width:100%; border:none; border-radius:0; font-size:12px;}
.table-scroll th,.table-scroll td{padding:8px 9px; white-space:normal;}
/* Long unbreakable strings (emails, NID) wrap instead of forcing width */
.app-main td,.app-main th{overflow-wrap:anywhere;}
.app-body .card{max-width:100%;}

/* =====================================================================
   2.9.0b — My Unit as a fixed app frame
   Stat cards pinned top, sub-tiles pinned just above the bottom nav,
   blue box always fills the space between them (empty space stays empty).
   ===================================================================== */
.unit-screen{display:flex; flex-direction:column; height:100%; min-height:0;}
.unit-screen .tn-pagehead{flex:none;}
.unit-screen .unit-stats{flex:none;}
.unit-screen .sub-panel{flex:1 1 auto; min-height:0; max-height:none; margin:6px 0 10px;}
.unit-screen .subtile-row{flex:none; margin-bottom:0;}

/* =====================================================================
   2.9.x — Unified shell additions
   ===================================================================== */
/* Indicator accent: gentle teal (was red). Flip background to
   var(--danger) here to revert to red everywhere in one place. */
.tile .tbadge,
.app-iconbtn .dot,
.app-bottomnav a .dot{ background:var(--teal-deep); }

/* Role-switch link in the context card (self-managed admins only) */
.app-context .app-switch{ display:inline-block; margin-top:9px; font-size:12px;
  font-weight:700; color:var(--teal-deep); text-decoration:none; }
.app-context .app-switch:hover{ text-decoration:underline; }

/* =====================================================================
   2.9.x — Responsive desktop shell (Phase 1)
   Mobile-first: EVERYTHING above is unchanged and stays the default for
   phones. These rules only switch on at >=900px (desktop / wide browser),
   so the phone view and the installed app are byte-for-byte identical to
   before. Goal: lift the 480px phone frame into a full-width web layout —
   same teal theme, same tile launcher (no sidebar), just using the screen.
   ===================================================================== */
@media (min-width:900px){

  /* Frame: drop the fixed phone-height; normal page scroll, centered wide. */
  body.app-body{ height:auto; min-height:100dvh; overflow:visible; display:block; }
  .app-shell{
    max-width:1200px; margin:0 auto; min-height:100dvh;
    overflow:visible; box-shadow:none;
  }

  /* Brand bar sticks to the top while the page scrolls normally. */
  .app-topbar{ order:1; position:sticky; top:0; }

  /* 2.42.2 — the bottom nav is MOBILE-ONLY. On desktop it used to be re-drawn
     as a slim strip under the brand bar, which duplicated Payments / Log out now
     that the top bar carries Payments and the profile menu carries Log out. */
  .app-bottomnav{ display:none; }

  .app-context{ order:3; }
  .app-main{ order:4; overflow:visible; padding:16px 28px 48px; }

  /* Tiles fill the width instead of the fixed 3-up phone grid. */
  .tile-grid{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:16px; }
  .tile{ max-width:210px; }

  /* A little more presence for headings on desktop. */
  .app-body h1{ font-size:26px; }
}
/* app.css tile-border patch /v1 2.8.5c */