/* ============================================================
   app.css — Asentra Mobile Frontend Simulation
   WAVE M00 PART 01 · single stylesheet (mobile-first)
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Brand accent (restrained; tune to the official Asentra brand once the
     logo asset is confirmed — see README "Logo & brand color" note). */
  --brand-50:#eef3ff; --brand-100:#dbe6ff; --brand-200:#bcd0ff;
  --brand-400:#5a8aff; --brand-500:#2f6bff; --brand-600:#1d4ed8; --brand-700:#1746b0;

  /* Status: success / warning / danger / info */
  --ok:#15a06b;        --ok-bg:#e4f6ee;
  --success:var(--ok); --success-bg:var(--ok-bg);
  --warn:#c9821a;      --warn-bg:#fdf2dd;
  --warning:var(--warn); --warning-bg:var(--warn-bg);
  --danger:#d6453d;    --danger-bg:#fdecec;
  --info:#1d4ed8;      --info-bg:#eaf1ff;

  /* Neutrals (light/white surfaces) */
  --bg:#f4f6fb; --surface:#ffffff; --surface-2:#f7f9fc; --border:#e8ebf3;
  --ink-1:#15203b; --ink-2:#5a657f; --ink-3:#8a93a8; --disabled:#aeb6c8;

  /* Spacing */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px; --s-6:24px; --s-8:32px;

  /* Radius */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* Shadow */
  --sh-sm:0 1px 2px rgba(20,30,55,.06), 0 1px 3px rgba(20,30,55,.05);
  --sh-md:0 4px 14px rgba(20,30,55,.08);
  --sh-lg:0 12px 30px rgba(20,30,55,.14);

  /* Type */
  --fs-xs:11px; --fs-sm:13px; --fs-md:15px; --fs-lg:17px; --fs-xl:20px; --fs-2xl:22px;
  --font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
         Arial, "Noto Sans", sans-serif;

  /* Layout */
  --app-max:480px; --tap:44px; --bar-h:54px; --nav-h:62px;
  --safe-top:env(safe-area-inset-top, 0px);
  --safe-bottom:env(safe-area-inset-bottom, 0px);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; padding:0; height:100%; }
html { -webkit-text-size-adjust:100%; }
body {
  font-family:var(--font); font-size:var(--fs-md); line-height:1.5;
  color:var(--ink-1); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent; -webkit-touch-callout:none;
  overscroll-behavior:none;
}
h1,h2,h3,p,ol,ul { margin:0; }
ol,ul { padding:0; list-style:none; }
button { font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; }
a { color:inherit; }
.sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* Icons: themed via currentColor so active states recolor cleanly */
.ic { display:block; width:20px; height:20px; fill:none; stroke:currentColor;
      stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* Utilities */
.no-scrollbar { scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar { width:0; height:0; display:none; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- App shell ---------- */
.app {
  position:relative; display:flex; flex-direction:column;
  width:100%; max-width:var(--app-max);
  min-height:100vh; min-height:100dvh;
  margin:0 auto; background:var(--bg); overflow:hidden;
}

/* Top area */
.app-bar {
  flex:0 0 auto; display:flex; align-items:center; gap:var(--s-3);
  height:calc(var(--bar-h) + var(--safe-top));
  padding:var(--safe-top) var(--s-3) 0 var(--s-4);
  background:var(--surface); border-bottom:1px solid var(--border);
}
.brand { flex:0 0 auto; display:inline-flex; align-items:center; height:36px; }
.app-logo {
  display:block; height:36px; width:auto; max-width:128px;
  object-fit:contain; object-position:left center;
}
.app-bar__title {
  flex:1 1 auto; min-width:0; margin:0;
  font-size:var(--fs-lg); font-weight:700; letter-spacing:-.01em;
  /* M07 PART 01: a second app-bar button (device indicator) narrows the
     title slot on 360px phones — long titles ellipsize instead of pushing
     the icons out of the bar. */
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Reclaim width for the title: icon buttons stay 44px tall (tap target) but
   sit closer together on the narrowest phones. */
@media (max-width:389px) {
  .app-bar { gap:var(--s-2); padding-right:var(--s-2); }
  .app-bar__iconbtn { width:40px; }
}
.app-bar__iconbtn {
  flex:0 0 auto; position:relative; width:44px; height:44px;
  display:grid; place-items:center; border-radius:var(--r-pill); color:var(--ink-2);
}
.app-bar__iconbtn:active { background:var(--surface-2); }
.app-bar__iconbtn .dot {
  position:absolute; top:9px; right:10px; width:8px; height:8px;
  border-radius:50%; background:var(--brand-600); border:2px solid var(--surface);
}

/* Content host */
.app-content {
  flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch; padding:var(--s-4);
}
@keyframes screen-in { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.app-content[data-screen] > .screen { animation:screen-in .15s ease-out; }

/* Bottom navigation */
.bottom-nav {
  flex:0 0 auto; display:flex; align-items:stretch;
  height:calc(var(--nav-h) + var(--safe-bottom)); padding-bottom:var(--safe-bottom);
  background:var(--surface); border-top:1px solid var(--border);
}
.nav-item {
  flex:1 1 0; min-width:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:3px;
  color:var(--ink-3); font-size:var(--fs-xs); font-weight:600; position:relative;
}
.nav-item .ic { width:22px; height:22px; }
.nav-item.is-active { color:var(--brand-600); }
.nav-item.is-active::before {
  content:""; position:absolute; top:0; width:26px; height:3px;
  border-radius:0 0 var(--r-pill) var(--r-pill); background:var(--brand-600);
}

/* Login chrome: logo lives on the screen; hide app bar + bottom nav */
.app.is-login .app-bar,
.app.is-login .bottom-nav { display:none; }
.app.is-login .app-content { padding:var(--s-6) var(--s-5) var(--s-8); }
body.is-login .toast-region { bottom:calc(16px + var(--safe-bottom)); }

/* Official Asentra logo on Login — original PNG, original colors, no crop. */
.login-brand {
  display:flex; align-items:center; justify-content:center;
  margin:var(--s-4) auto var(--s-5);
}
.login-logo {
  display:block; width:auto; height:auto;
  max-width:min(220px, 72vw); max-height:120px;
  object-fit:contain; object-position:center;
}

/* ---------- Components ---------- */
.loading { display:flex; justify-content:center; padding:var(--s-8); color:var(--ink-3); font-size:var(--fs-sm); }

.block { margin-top:var(--s-5); }
.block:first-child { margin-top:0; }
.block__head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--s-2); }
.block__head h3 { font-size:var(--fs-md); font-weight:700; }
.count { font-size:var(--fs-sm); color:var(--ink-3); background:var(--surface-2);
         border:1px solid var(--border); padding:1px 8px; border-radius:var(--r-pill); }
.link { font-size:var(--fs-sm); color:var(--brand-600); font-weight:600; min-height:var(--tap); padding:0 8px; display:inline-flex; align-items:center; }

.card { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
        box-shadow:var(--sh-sm); padding:var(--s-4); }
.card--row { display:flex; align-items:center; gap:var(--s-3); }
.card__ic { flex:0 0 auto; width:42px; height:42px; border-radius:var(--r-md);
            display:grid; place-items:center; background:var(--brand-50); color:var(--brand-600); }
.card__ic .ic { width:21px; height:21px; }
.card__main { display:flex; flex-direction:column; min-width:0; }
.card__label { font-size:var(--fs-sm); color:var(--ink-2); }
.card__value { font-weight:700; font-size:var(--fs-md); overflow-wrap:anywhere; }
.shift-card { display:flex; flex-direction:column; align-items:flex-start; gap:4px; max-width:100%; }
.shift-card .card__value { margin-top:2px; }
.shift-card__time { font-size:var(--fs-sm); color:var(--ink-2); }
.shift-card .status { margin-top:6px; }
.shift-card .status:empty,
.shift-card__time:empty { display:none; }

.list { background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; }
.list .item { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); min-height:var(--tap); }
.list .item + .item { border-top:1px solid var(--border); }
.item__ic { flex:0 0 auto; width:38px; height:38px; border-radius:10px;
            display:grid; place-items:center; background:var(--brand-50); color:var(--brand-600); }
.item__ic .ic { width:19px; height:19px; }
.item__main { flex:1 1 auto; min-width:0; }
.item__title { display:block; font-weight:600; font-size:var(--fs-md); overflow-wrap:anywhere; }
.item__sub { display:block; font-size:var(--fs-sm); color:var(--ink-2); overflow-wrap:anywhere; }
.item__end { flex:0 0 auto; }
.item__time { font-size:var(--fs-xs); color:var(--ink-3); }

.pill { display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
        border-radius:var(--r-pill); font-size:var(--fs-xs); font-weight:600; }
.pill .ic { width:13px; height:13px; }
.pill--ok { background:var(--ok-bg); color:var(--ok); }
.pill--warn { background:var(--warn-bg); color:var(--warn); }
.pill--brand { background:var(--brand-50); color:var(--brand-700); }
.pill--done { background:var(--surface-2); color:var(--ink-2); }

/* Greeting (Home) */
.greet { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--s-3); min-width:0; }
.greet > div { min-width:0; }
.greet__hello { font-size:var(--fs-sm); color:var(--ink-2); }
.greet__name { font-size:var(--fs-2xl); font-weight:800; letter-spacing:-.02em; overflow-wrap:anywhere; }
.greet__meta { font-size:var(--fs-sm); color:var(--ink-2); margin-top:2px; }
.greet__context { font-size:var(--fs-xs); color:var(--ink-3); margin-top:4px; }
.greet .role-badge { margin-top:8px; }
.avatar { width:44px; height:44px; border-radius:var(--r-pill);
          background:var(--brand-600); color:#fff; display:grid; place-items:center;
          font-weight:700; font-size:var(--fs-md); }
.avatar--lg { width:72px; height:72px; font-size:var(--fs-xl); }

/* Quick actions (Home) */
.qa-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--s-2); }
.qa { display:flex; flex-direction:column; align-items:center; gap:6px;
      padding:var(--s-3) 4px; background:var(--surface); border:1px solid var(--border);
      border-radius:var(--r-md); min-height:var(--tap); }
.qa__ic { width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
          background:var(--brand-50); color:var(--brand-600); }
.qa__ic .ic { width:20px; height:20px; }
.qa__label { font-size:var(--fs-xs); color:var(--ink-2); text-align:center; line-height:1.2; }

/* Activity timeline */
.timeline { position:relative; }
.timeline::before { content:""; position:absolute; left:14px; top:6px; bottom:6px; width:2px; background:var(--border); }
.tl-item { position:relative; padding:0 0 var(--s-5) var(--s-6); }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:9px; top:3px; width:12px; height:12px;
                   border-radius:50%; background:var(--surface); border:3px solid var(--brand-500); }
.tl-item__time { font-size:var(--fs-xs); color:var(--ink-3); }
.tl-item__title { font-weight:600; font-size:var(--fs-md); margin-top:2px; }
.tl-item__meta { font-size:var(--fs-sm); color:var(--ink-2); }

/* Profile */
.profile-head { display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:var(--s-3) 0 var(--s-1); }
.profile-head h2 { margin-top:6px; font-size:var(--fs-xl); }
.profile-head .role-badge { margin-top:8px; }
.profile-role { color:var(--ink-2); font-size:var(--fs-sm); }
.row { display:flex; align-items:center; gap:var(--s-3); padding:var(--s-3) var(--s-4); min-height:var(--tap); }
.row + .row { border-top:1px solid var(--border); }
.row__ic { flex:0 0 auto; width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
           background:var(--surface-2); color:var(--ink-2); }
.row__ic .ic { width:18px; height:18px; }
.row__label { flex:1 1 auto; font-size:var(--fs-md); }
.row__value { flex:0 0 auto; max-width:55%; font-size:var(--fs-sm); color:var(--ink-2); text-align:right;
              overflow-wrap:anywhere; word-break:break-word; }

/* Buttons */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
       min-height:var(--tap); padding:0 var(--s-4); border-radius:var(--r-md);
       font-weight:600; font-size:var(--fs-md); background:var(--surface);
       border:1px solid var(--border); color:var(--ink-1); transition:transform .05s ease; }
.btn:active { transform:scale(.99); }
.btn--block { width:100%; }
.btn--danger { background:var(--danger-bg); color:var(--danger); border-color:transparent; }

.version { text-align:center; color:var(--ink-3); font-size:var(--fs-xs); margin:var(--s-2) 0; }

/* ---------- Wider phone / small tablet frame ---------- */
@media (min-width:600px) {
  html { background:radial-gradient(1000px 500px at 50% -10%, var(--brand-50), transparent 60%), var(--bg); }
  body { display:flex; align-items:center; justify-content:center; min-height:100vh; min-height:100dvh; padding:var(--s-6); }
  .app { min-height:min(900px, 100vh); border-radius:var(--r-xl); box-shadow:var(--sh-lg); border:1px solid var(--border); }
}

/* Tablet: same app, wider content — not a desktop dashboard */
@media (min-width:768px) {
  :root { --app-max:720px; }
  .app { min-height:min(1024px, 100vh); }
  .app-content { padding:var(--s-5) var(--s-6); }
  .login-logo { max-width:260px; max-height:140px; }
  .task-cols { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4); }
  .task-cols .block { margin-top:0; }
  .cl-list { display:grid; grid-template-columns:1fr 1fr; gap:var(--s-3); }
  .stat-grid { gap:var(--s-3); }
  .security-stat-grid { grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--s-3); }
  .security-stat-grid .stat:last-child { grid-column:auto; }
  /* M03: Work Order list may flow as a simple two-column card grid */
  .task-list--cols { display:grid; grid-template-columns:1fr 1fr; align-items:start; }
  .task-list--cols .state { grid-column:1 / -1; }
}

@media (min-width:1024px) {
  :root { --app-max:840px; }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

/* ---------- M07 PART 07: shell readiness banners ---------- */
/* Additive strip between the app bar and the content. The shell layout,
   the app bar, and every screen underneath are unchanged. */
.app-banners {
  flex:0 0 auto; padding:var(--s-3) var(--s-4) 0;
  background:var(--bg); display:flex; flex-direction:column; gap:var(--s-2);
}
.app-banners[hidden] { display:none; }
@media (min-width:768px) { .app-banners { padding:var(--s-4) var(--s-6) 0; } }