/* Steadwell at every size.

   The app used to be drawn inside a 390-pixel phone: a black bezel, rounded
   corners and a shadow on a beige page, at every width. On a phone that put a
   phone inside the phone; on the desktop and the iPad, where most clinicians
   actually chart, it looked like a simulator. Now the app is the window:

     phone     under 600px   edge to edge, the notch and home bar respected
     tablet    600-1023px    edge to edge, one readable column, tabs below
     desktop   1024px up     a sidebar with every section, the page beside it
                             -- also an iPad held sideways, and any Stage
                             Manager or split-view window that wide

   Widths in between are fluid on purpose: split view and Stage Manager give a
   window any width at all, not one of three.

   Loaded after styles.css, and only ever adds to it: nothing here changes how
   a screen is built, only how much room it is given. */

/* ---------- Every size: the app is the window ---------- */
body{padding:0; background:var(--bg);}
.phone{width:100%; max-width:none; height:100vh; height:100dvh; max-height:none; margin:0;
  border:0; border-radius:0; box-shadow:none;}
/* The notch, the rounded corners and the home bar, on a phone held either way
   and on an iPad installed to the home screen. */
.screen{padding-top:calc(var(--sp-y) + env(safe-area-inset-top, 0px));
  padding-left:calc(var(--sp-x) + env(safe-area-inset-left, 0px));
  padding-right:calc(var(--sp-x) + env(safe-area-inset-right, 0px));}
#bottom-tab-bar{padding-bottom:calc(14px + env(safe-area-inset-bottom, 0px));}
.screen.tabbar-space{padding-bottom:calc(88px + env(safe-area-inset-bottom, 0px));}

#side-nav, #title-bar{display:none;}

/* ---------- Tablet: one column a person can read ---------- */
@media (min-width:600px){
  .screen{--sp-x:32px; --sp-y:30px;}
  /* A line of text stops being readable somewhere past 80 characters; a form
     stretched across an iPad in portrait is a form nobody can follow. */
  .screen > [id^="view-"]{max-width:720px; margin-left:auto; margin-right:auto;}
  /* The physician's home is a green band with a sheet lying on it, edge to
     edge; held to the reading width, the band stopped short of the window's
     sides. The band and the sheet take the whole width, what is on them the
     column. */
  .screen > #view-physician-dashboard{max-width:none;}
  #view-physician-dashboard :is(.ph-hero, .ph-sheet) > *{max-width:720px; margin-left:auto; margin-right:auto;}
  /* A field and a button are inline boxes, which centring by margin passes
     over: they sat at the sheet's left edge while the cards below were
     centred, and nothing lined up. */
  #view-physician-dashboard :is(.ph-hero, .ph-sheet) > :is(input, select, textarea, button){display:block;}
  #bottom-tab-bar{justify-content:center; gap:clamp(12px, 5vw, 40px);}
  .tab-btn2{padding:2px 18px;}
  /* Signing in is a short form. Stretched across a desktop it reads like a
     spreadsheet; as a centred column it reads like a door. */
  .screen > :is(#view-account-type, #view-auth, #view-two-step, #view-name-setup, #view-guest-upgrade){max-width:460px;}
  .screen > :is(#view-account-type, #view-auth, #view-two-step, #view-name-setup, #view-guest-upgrade):not(.hidden){padding-top:min(6vh, 56px);}
  .app-toast{max-width:440px;}
  .app-confirm-box{max-width:400px;}
  .cx-sheet{max-width:440px;}
}

/* ---------- Desktop and a landscape iPad: a sidebar and room ---------- */
@media (min-width:1024px){
  :root{--nav-w:232px;}
  .screen{--sp-x:44px; --sp-y:34px;}
  .screen > [id^="view-"]{max-width:880px;}
  /* Hubs, lists and dashboards are where width earns its keep: more of the
     day, more of the queue, without scrolling. */
  #view-physician-dashboard :is(.ph-hero, .ph-sheet) > *{max-width:1160px;}
  .screen > :is(#view-phcat-schedule, #view-phcat-patients, #view-phcat-finances,
    #view-phcat-practice, #view-organization-dashboard, #view-staff-dashboard, #view-consults, #view-clinic-orders,
    #view-org-files-list, #view-physician-patient-list, #view-org-file-detail, #view-file-import){max-width:1160px;}

  /* A chart: the record on one side, what it is read against on the other
     (renderOrgFileDetail draws the two columns only at this width). */
  .chart-cols{display:grid; grid-template-columns:minmax(0, 1fr) minmax(300px, 34%); column-gap:20px; align-items:start;}
  .chart-main, .chart-side{min-width:0;}

  html.has-nav .phone{padding-inline-start:var(--nav-w);}
  html.has-nav #side-nav{display:flex;}
  /* The sidebar is the navigation now; the tab bar below would be a second,
     smaller copy of it. */
  html.has-nav #bottom-tab-bar{display:none !important;}
  html.has-nav .screen.tabbar-space{padding-bottom:var(--sp-y);}
  html.has-nav #toast-host{padding-inline-start:calc(var(--nav-w) + 16px);}
  html.has-nav #offline-banner{bottom:24px; margin-inline-start:calc(var(--nav-w) / 2);}

  /* A category page is a list of places to go. Two columns of them read
     like a menu rather than a long scroll of full-width bars. */
  .screen > [id^="view-phcat-"]:not(.hidden){display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:16px; align-content:start;}
  .screen > [id^="view-phcat-"] > :not(.card){grid-column:1 / -1;}
  .screen > [id^="view-phcat-"] > .card{margin-bottom:14px;}
  .ph-grid{grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px;}
  /* The hospital's dashboard and a workplace's are the same kind of page, so
     they get the same grid; headings, lists, forms and searches keep the full
     width, and every card in a row is as tall as the tallest. */
  .screen > :is(#view-organization-dashboard, #view-staff-dashboard):not(.hidden){display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:16px; align-content:start;}
  .screen > :is(#view-organization-dashboard, #view-staff-dashboard) > :not(.card){grid-column:1 / -1;}
  .screen > :is(#view-organization-dashboard, #view-staff-dashboard) > .card{margin-bottom:14px;}
  /* The brand already heads the sidebar and Settings is in it; a second copy
     of each over every page is a phone's habit. A heading that is the page's
     own name (Profile) stays, and so does any button that does something here. */
  html.has-nav .screen > [id^="view-"] > .top-row > .brand:not(:has([data-i18n])),
  html.has-nav .screen > [id^="view-"] > .top-row > .icon-btn[onclick^="openAppSettings"]{display:none;}
  html.has-nav .screen > [id^="view-"] > .top-row > .icon-btn{margin-inline-start:auto;}
  html.has-nav .ph-hero .brand{visibility:hidden;}
  /* A screen's name, which a phone keeps small to leave room for the screen,
     reads as a page title when there is room for one. */
  html.has-nav .screen > [id^="view-"] > p.sub[style*="font-weight:700"]:first-of-type,
  html.has-nav .screen > #view-organization-dashboard > p.sub:first-of-type{font-size:19px !important;
    font-weight:700 !important; color:var(--text); letter-spacing:-.01em; margin-top:2px !important; margin-bottom:8px !important;}
  html.has-nav .screen > [id^="view-"] > p.sub[style*="font-weight:700"]:first-of-type .ic,
  html.has-nav .screen > #view-organization-dashboard > p.sub:first-of-type .ic{width:20px; height:20px; color:var(--teal);}

  .cx-sheet{max-width:500px;}
  .app-confirm-box{max-width:420px;}
}
@media (min-width:1024px) and (max-width:1199px){
  :root{--nav-w:204px;}
  .screen{--sp-x:32px;}
}
@media (min-width:1280px){
  .screen > :is(#view-organization-dashboard, #view-staff-dashboard, [id^="view-phcat-"]):not(.hidden){
    grid-template-columns:repeat(3, minmax(0, 1fr));}
}
@media (min-width:1440px){
  :root{--nav-w:256px;}
  .screen > [id^="view-"]{max-width:920px;}
}

/* ---------- The sidebar ---------- */
#side-nav{position:fixed; inset-block:0; inset-inline-start:0; width:var(--nav-w); z-index:60;
  flex-direction:column; background:var(--surface); border-inline-end:1px solid var(--line);
  padding:20px 12px 14px; overflow-y:auto; scrollbar-width:thin;}
.sn-brand{display:flex; align-items:center; gap:8px; padding:4px 10px 2px; font-family:'Fraunces'; font-weight:700;
  font-size:19px; color:var(--text); cursor:pointer; background:none; border:0; text-align:start;}
.sn-brand .ic{width:24px; height:24px;}
.sn-who{padding:0 10px 14px; font-size:12px; color:var(--muted); line-height:1.35; overflow-wrap:anywhere;}
.sn-group{padding:16px 10px 6px; font-size:10.5px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted);}
.sn-item{display:flex; align-items:center; gap:11px; width:100%; min-height:38px; margin:1px 0; padding:8px 10px;
  border:0; border-radius:10px; background:none; color:var(--text); font-family:'Inter'; font-size:13.5px;
  font-weight:600; text-align:start; cursor:pointer; line-height:1.25;}
.sn-item .ic{width:19px; height:19px; flex-shrink:0; color:var(--muted);}
.sn-item span.sn-label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sn-item.on{background:var(--teal-dim); color:var(--teal);}
.sn-item.on .ic{color:var(--teal);}
.sn-count{min-width:20px; height:20px; padding:0 6px; border-radius:999px; background:var(--coral-fill); color:#fff;
  font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center;}
.sn-count.hidden{display:none !important;}
.sn-foot{margin-top:auto; padding-top:14px;}
.sn-install{border:1px dashed var(--teal); color:var(--teal);}
.sn-install .ic{color:var(--teal);}

/* ---------- A mouse and a keyboard ---------- */
@media (hover:hover) and (pointer:fine){
  .sn-item:hover{background:var(--surface-2);}
  .sn-item.on:hover{background:var(--teal-dim);}
  .card[onclick], .patient-card, .cs-row, .cs-pick, .cs-ptr-opt, .dept-chip, .settings-row{
    transition:border-color .15s ease, box-shadow .15s ease, background-color .15s ease;}
  .card[onclick]:hover, .patient-card:hover, .cs-row:hover{border-color:var(--btn-border);
    box-shadow:0 8px 22px -14px rgba(0,0,0,.35);}
  .cs-pick:hover, .cs-ptr-opt:hover, .dept-chip:hover{border-color:var(--teal);}
  /* With a mouse there is no swipe to tell how long a page is: the scrollbar
     comes back, slim. */
  .screen{scrollbar-width:thin;}
  .screen::-webkit-scrollbar{width:10px;}
  .screen::-webkit-scrollbar-thumb{border:3px solid transparent; background-clip:padding-box;}
}

/* ---------- Installed on Windows or a Mac, with its own title bar ----------
   The window's buttons sit over the app; the strip they leave is Steadwell's,
   and dragging it moves the window, as in any desktop app. */
@media (display-mode:window-controls-overlay){
  html::before{content:''; position:fixed; top:0; left:0; right:0; height:env(titlebar-area-height, 33px);
    background:var(--surface); border-bottom:1px solid var(--line); z-index:9998;}
  #title-bar{display:flex; position:fixed; top:env(titlebar-area-y, 0); left:env(titlebar-area-x, 0);
    width:env(titlebar-area-width, 100%); height:env(titlebar-area-height, 33px); z-index:9999;
    align-items:center; gap:8px; padding:0 14px; font:600 12.5px 'Inter'; color:var(--muted);
    app-region:drag; -webkit-app-region:drag; user-select:none;}
  #title-bar .ic{width:16px; height:16px;}
  .phone{padding-top:env(titlebar-area-height, 33px);}
  #side-nav{top:env(titlebar-area-height, 33px);}
}

/* ---------- Paper ---------- */
@media print{
  #side-nav, #title-bar{display:none !important;}
  html.has-nav .phone{padding-inline-start:0;}
}