/* ============================================================
   HVAC Super App — shell styles
   Apple HIG (light) — used by index.html only.
   Calculator iframes are self-contained and do not use this file.
============================================================ */

/* Palette tokens come from css/tokens.css (linked in index.html before this).
   Only shell-specific layout tokens live here. */
:root{
  --sidebar-w-open:     232px;
  --sidebar-w-collapsed:56px;
  --header-h:           44px;
  --tabbar-h:           38px;
}

*,*::before,*::after{box-sizing:border-box;}

body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  margin:0;
  display:flex;flex-direction:column;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  font-size:13px;line-height:1.4;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ============================================================
   APP HEADER — project + actions
============================================================ */
.app-header{
  flex-shrink:0;
  height:var(--header-h);
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;
  padding:0 14px;gap:14px;
  z-index:30;
}
.brand{
  display:flex;align-items:center;gap:8px;
  font:600 14px/1 var(--font);
  color:var(--text);
  white-space:nowrap;
  flex-shrink:0;
}
.brand-mark{font-size:16px;}
.brand-text{letter-spacing:-.01em;}

.project-fields{
  flex:1;
  display:flex;align-items:center;gap:8px;
  min-width:0;
  max-width:900px;
  margin:0 auto;
}
.proj-field{
  flex:1;min-width:0;
  border:1px solid transparent;
  background:transparent;
  padding:5px 9px;
  border-radius:6px;
  font:400 13px/1.3 var(--font);
  color:var(--text);
  outline:none;
  transition:background .15s,border-color .15s,box-shadow .15s;
}
.proj-field::placeholder{color:var(--text-3);}
.proj-field:hover{background:var(--surface-2);}
.proj-field:focus{
  background:var(--surface);
  border-color:var(--accent);
  box-shadow:0 0 0 3px var(--ring);
}
.proj-field.proj-name{flex:2;font-weight:500;}
.proj-field.proj-date{flex:0 0 130px;font-variant-numeric:tabular-nums;}

.header-actions{
  display:flex;align-items:center;gap:6px;
  flex-shrink:0;
}
.hdr-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--surface-3);border:1px solid var(--hairline);
  color:var(--text);
  padding:5px 12px;border-radius:6px;
  font:500 12px/1.3 var(--font);
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.hdr-btn:hover{background:var(--divider);}
.hdr-btn-primary{background:var(--accent);color:#fff;border-color:var(--accent);}
.hdr-btn-primary:hover{background:#0066D6;border-color:#0066D6;}
.hdr-icon{font-size:13px;line-height:1;}
.hdr-lbl{font:500 12px/1.3 var(--font);}
/* Drawer (hamburger) — only exists below the 900px breakpoint. */
.drawer-btn{display:none;flex-shrink:0;padding:5px 9px;}

/* ============================================================
   APP BODY — sidebar + main
============================================================ */
.app-body{
  flex:1;
  display:flex;
  min-height:0;
  overflow:hidden;
}

/* ============================================================
   SIDEBAR — collapsible
============================================================ */
.sidebar{
  width:var(--sidebar-w-open);
  flex-shrink:0;
  background:var(--bg);
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;
  padding:8px;
  position:relative;
  transition:width .22s cubic-bezier(.2,.8,.2,1), padding .22s cubic-bezier(.2,.8,.2,1);
}
body.sidebar-collapsed .sidebar{
  width:var(--sidebar-w-collapsed);
  padding:8px 6px;
}

.sidebar-toggle-inline{
  align-self:flex-end;
  width:24px;height:24px;
  border-radius:6px;
  background:transparent;
  border:none;
  color:var(--text-2);
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font:400 16px/1 var(--font);
  margin-bottom:6px;
  transition:background .15s,color .15s;
}
.sidebar-toggle-inline:hover{background:var(--surface-3);color:var(--text);}
body.sidebar-collapsed .sidebar-toggle-inline{align-self:center;}

.nav-group{
  font:600 11px/1.4 var(--font);
  text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-2);
  padding:10px 8px 4px;
  white-space:nowrap;overflow:hidden;
  transition:opacity .15s, height .15s, padding .15s;
}
body.sidebar-collapsed .nav-group{
  opacity:0;height:0;padding:0;pointer-events:none;
}

.nav-btn{
  display:flex;align-items:center;gap:10px;
  width:100%;
  background:none;border:none;
  color:var(--text);
  padding:7px 8px;margin:1px 0;
  text-align:left;cursor:pointer;
  font:500 13px/1.4 var(--font);
  border-radius:6px;
  transition:background .12s,color .12s;
  white-space:nowrap;overflow:hidden;
  position:relative;
}
.nav-btn:hover{background:rgba(0,0,0,.05);}
.nav-icon{
  font-size:14px;width:18px;text-align:center;
  flex-shrink:0;
}
.nav-text{opacity:1;transition:opacity .15s;}
body.sidebar-collapsed .nav-btn{
  justify-content:center;
  padding:8px 6px;
}
body.sidebar-collapsed .nav-text{opacity:0;width:0;}

/* Tooltip on collapsed sidebar */
body.sidebar-collapsed .nav-btn:hover::after{
  content:attr(title);
  position:absolute;
  left:calc(100% + 12px);top:50%;transform:translateY(-50%);
  background:var(--text);color:#fff;
  padding:5px 10px;border-radius:6px;
  font:500 12px/1.3 var(--font);
  white-space:nowrap;
  z-index:1000;
  pointer-events:none;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}

/* ============================================================
   MAIN CONTENT — tab bar + iframe
============================================================ */
.main-content{
  flex:1;
  display:flex;flex-direction:column;
  background:var(--bg);
  overflow:hidden;
  min-width:0;
}

/* ============================================================
   TAB BAR — instance tabs
============================================================ */
.tab-bar{
  flex-shrink:0;
  height:var(--tabbar-h);
  background:var(--bg);
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:flex-end;gap:0;
  padding:0 8px;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:thin;
}
.tab-bar::-webkit-scrollbar{height:4px;}
.tab-bar::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15);border-radius:4px;}

.tab{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;
  min-width:120px;max-width:240px;
  padding:0 8px 0 12px;margin-right:2px;
  background:transparent;
  border:1px solid transparent;
  border-bottom:none;
  border-radius:7px 7px 0 0;
  font:500 12px/1 var(--font);
  color:var(--text-2);
  cursor:pointer;
  white-space:nowrap;
  position:relative;
  transition:background .12s,color .12s;
}
.tab:hover:not(.active){background:rgba(0,0,0,.04);color:var(--text);}
.tab.active{
  background:var(--surface);
  border-color:var(--hairline);
  color:var(--text);
  z-index:2;
  margin-bottom:-1px;
  padding-bottom:1px;
}
.tab-icon{font-size:13px;flex-shrink:0;}
/* Unsaved-changes dot — shown while edits are pending capture */
.tab.dirty::after{
  content:'';
  position:absolute;top:5px;left:5px;
  width:6px;height:6px;border-radius:50%;
  background:var(--accent);
}
.tab-name{
  flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;
  font-weight:500;
}
.tab.active .tab-name{color:var(--text);}
.tab-close{
  width:18px;height:18px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:4px;
  color:var(--text-3);
  font:400 16px/1 var(--font);
  flex-shrink:0;
  margin-left:2px;
  transition:background .12s,color .12s;
}
.tab-close:hover{
  background:var(--danger-tint);color:var(--danger);
}
.tab-rename{
  flex:1;min-width:0;
  border:1px solid var(--accent);
  background:var(--surface);
  padding:2px 5px;border-radius:4px;
  font:500 12px/1.2 var(--font);
  color:var(--text);
  outline:none;
  box-shadow:0 0 0 3px var(--ring);
}
.tab-add{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  margin:0 0 4px 4px;
  background:transparent;border:none;
  color:var(--text-2);
  font:400 18px/1 var(--font);
  border-radius:6px;
  cursor:pointer;
  flex-shrink:0;
  transition:background .12s,color .12s;
}
.tab-add:hover{background:var(--surface-3);color:var(--text);}

/* ============================================================
   IFRAME WRAP
============================================================ */
.iframe-wrap{
  flex:1;
  display:flex;
  background:var(--bg);
  min-height:0;
}
#app-frame{
  width:100%;height:100%;
  border:none;display:block;
  background:var(--bg);
}

/* ============================================================
   SCROLLBARS (sidebar)
============================================================ */
.sidebar::-webkit-scrollbar{width:8px;}
.sidebar::-webkit-scrollbar-track{background:transparent;}
.sidebar::-webkit-scrollbar-thumb{
  background:rgba(0,0,0,.15);
  border-radius:8px;
  border:2px solid transparent;
  background-clip:padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(0,0,0,.25);background-clip:padding-box;border:2px solid transparent;}

/* ============================================================
   RESPONSIVE
============================================================ */
/* Phone + tablet portrait: header trimmed to brand + actions, sidebar becomes
   an overlay drawer, iframe keeps the full height below the chrome. */
@media (max-width: 900px){
  .project-fields{display:none;}
  .hdr-lbl{display:none;}
  .hdr-btn{padding:5px 10px;}
  .app-header{gap:8px;padding:0 8px;}
  .brand{flex-shrink:1;min-width:0;overflow:hidden;}
  .brand-text{overflow:hidden;text-overflow:ellipsis;}

  .drawer-btn{display:inline-flex;}
  .sidebar-toggle-inline{display:none;}

  .sidebar{
    position:fixed;
    top:var(--header-h);left:0;bottom:0;
    width:var(--sidebar-w-open)!important;
    padding:8px!important;
    z-index:40;
    background:var(--surface);
    box-shadow:0 8px 24px rgba(0,0,0,.18);
    transform:translateX(-100%);
  }
  body.drawer-open .sidebar{transform:none;}
  body.drawer-open::before{
    content:'';position:fixed;inset:0;z-index:35;
    background:rgba(0,0,0,.35);
  }
}