/* ============================================================================
   Foundry — Master Light Theme (deduped)
   Single stylesheet: base-lt.css
   ============================================================================ */

/* ====== Tokens ====== */
:root{
  --ink:#1c1f26;
  --muted:#666;
  --line:rgba(0,0,0,.1);
  --panel:rgba(255,255,255,.9);
  --brand1:#2253f4;
  --brand2:#5a78ff;
  --round:16px;
}

/* ====== Base / Reset ====== */
*{ box-sizing:border-box; }

html,body{
  height:100%;
  margin:0;
  background:#f8f9fb;
  color:var(--ink);
  font:300 14px var(--font-ui);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

input,select,textarea,button{
  font-family:var(--font-ui);
}

#app{ display:flex; flex-direction:column; min-height:100vh; }

/* ====== App Shell (glue) ====== */
.app-body{ display:flex; min-height:calc(100vh - 180px); }
.sidebar{ width:280px; border-right:1px solid var(--line); display:flex; flex-direction:column; background:transparent; }
.pane-head{ padding:14px 16px; border-bottom:1px solid var(--line); }
.ws-label{ font-weight:500; color:var(--muted); }
.content{ flex:1; min-width:0; display:flex; flex-direction:column; }
.breadcrumb{ display:flex; gap:10px; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); }
.breadcrumb .trail{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.breadcrumb .trail .crumb{
  display:inline-flex; gap:6px; align-items:center; padding:6px 10px; border-radius:999px;
  border:1px solid rgba(0,0,0,.08); background:rgba(0,0,0,.04); color:var(--ink);
}
.muted{ color:var(--muted); }
.small{ font-size:12px; color:var(--muted); }
.small-important{ font-size:14px; color:var(--ink); }
#deleteSummary .small{ font-size:14px; color:var(--ink); }

.btn{ height:34px; border-radius:999px; border:none; background:rgba(0,0,0,.08); padding:0 12px; color:var(--ink); cursor:pointer; font-size:13px; text-decoration: none; align-content: center;}
.btn.brand{ background:var(--brand1); border:0; color:#fff; }
.btn:hover{ filter:brightness(1.06); }
.btn.ghost{ background:#00000008; border:1px solid var(--line); }
.btn.remove{ background:#00000008; }
#btnNewClient{ margin-left:8px; }

input[type="search"]{
  height:34px; border-radius:999px; border:1px solid var(--line);
  background:rgba(0,0,0,.04); color:var(--ink); padding:0 12px; outline:none;
}
input{ height:48px; font-size:14px; } /* generic inputs; .field input below overrides height */

.sep{ width:1px; height:24px; background:var(--line); margin:0 8px; }

#wsNameText{ font-size:16px; font-weight:500; }

/* ====== App Title Bar + Toolbar ====== */
.app-titlebar{
  position:sticky; top:0; z-index:100;
  background:var(--brand1);
  padding:0.75rem 1.25rem;
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.app-titlebar h1{
  margin:0; font-size:26px; font-weight:400; color:#f3f5f2; letter-spacing:-0.01em; line-height:1.3;
  font-family:var(--font-title);
}
.app-titlebar .app-logo{ height:20px; width:auto; display:block; }

.toolbar{
  position:sticky; top:0; z-index:100;
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:14px 18px; background:var(--brand1);
  backdrop-filter:blur(22px) saturate(160%);
  height:120px; color:#fff;
}

/* ====== Icon System ====== */
.content .icon svg,
.modal .icon svg,
.tree .icon svg,
.file-thumb svg,
.table-icon svg{ height:32px; fill:var(--brand1); }
.file-thumb svg{ width:52px !important; height:auto !important; }
.toolbar .icon svg{ fill:#f3f5f2; }
.meta-badges .icon svg{ width:12px; height:12px; fill:currentColor; }

.icon-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:60px; min-height:60px; padding:6px 4px; background:transparent; border:0; border-radius:8px;
  cursor:pointer; text-align:center; transition:background .15s ease, transform .15s ease; vertical-align:middle;
}
.toolbar .icon-btn{ margin:0 6px; }
.icon-btn .icon svg{ width:24px; height:24px; display:block; fill:#f3f5f2; transition:fill .15s ease; }
.icon-btn:hover{ background:rgba(255,255,255,.08); transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0); }
.icon-btn:hover .icon svg{ opacity:.8; }
.icon-btn .label{
  margin-top:4px; font-size:10px; font-weight:500; color:#f3f5f2; line-height:1.2;
  max-width:100%; white-space:normal; word-break:break-word; text-align:center; pointer-events:none; transition:color .15s ease;
}
.icon-btn:hover .label{ opacity:.8; }
.icon-btn::after{ display:none; }

#uploadPickBtn{ border:none; margin-left:6px; }
#uploadPickBtn:hover{ background:var(--brand1); color:#f3f5f2; }

/* ====== Tables / Lists / Tree ====== */
#view-list th, #view-list td{ vertical-align:middle; }
#view-list .col-name{ display:inline-flex; align-items:center; gap:8px; width:100%; }
.table-icon{ display:inline-flex; align-items:center; }

.tree ul{ list-style:none; margin:0; padding:6px 8px; }
.tree .tree-item{
  display:flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:99px; cursor:pointer;
}
.tree .tree-item.is-selected{ outline:1px solid var(--brand1); }
.tree .badge{ margin-left:auto; font-size:11px; opacity:.7; }

/* ====== Preview tweaks ====== */
#previewModal footer > #openNotesBtn,
#previewModal footer > #downloadFromPreviewBtn{ display:none; }
.preview-body{ padding:16px; }
.preview-unavailable{ opacity:.75; font-style:italic; }

/* ====== Workspaces modal (hide search until implemented) ====== */
#workspacesModal #wsSearch{ display:none; }

/* ====== Tabs ====== */
.tabs{ display:flex; gap:6px; padding:10px 12px; border-bottom:1px solid rgba(0,0,0,.08); }
.tab{
  border:1px solid rgba(0,0,0,.12); background:rgba(255,255,255,.8); color:var(--ink);
  border-radius:12px; padding:6px 12px; cursor:pointer;
}
.tab.active{ background:#eef1ff; border-color:rgba(125,139,255,.45); }

/* ====== Project select in table ====== */
table.projects td select{
  -webkit-appearance:none !important; -moz-appearance:none !important; appearance:none !important;
  background:transparent !important; border:none; padding:0; font:inherit; color:var(--ink);
  cursor:pointer; line-height:1.4; position:relative;
}
table.projects td select::-ms-expand{ display:none; }

/* ====== Views ====== */
.view{
  display:none; padding:14px;
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.view.active{
  display:block;
  opacity:1; pointer-events:auto;
}

/* ====== Status Pills ====== */
.status-Pending{   background:#FE9F0A20; color:#FE9F0A; }
.status-InProgress{background:#0A84FF20; color:#0A84FF; }
.status-OnHold{    background:#BF5AF220; color:#BF5AF2; }
.status-Complete{  background:#30D15820; color:#30D158; }
.status-Cancelled{ background:#8E8E9320; color:#8E8E93; }

/* ====== Modal (card above bars, scrim below) ====== */
.modal{
  position: fixed;
  inset: 0;
  display: none;                /* ← hide by default */
  align-items: center;          /* ← center the card */
  justify-content: center;      /* ← center the card */
z-index: 120;
}

.modal.show{ display: flex; }

/* Scrim sits UNDER titlebar/toolbar (z:90) but blurs background */
.modal .scrim{
  position: fixed;
  inset: 0;
  backdrop-filter: blur(12px) saturate(180%);
  background: rgba(255,255,255,.3);
}

/* Card sits ABOVE titlebar/toolbar (z:120) */
.modal .card{
  position: relative;
  background: #fff;
  border-radius: 20px;
  min-width: 560px;
  max-width: 760px;
  box-shadow: 0 20px 60px rgba(0,0,0,.15);
  max-inline-size: min(760px, calc(100vw - 32px));
  margin: 16px;
}

/* Modal sections */
.modal header{
  padding:22px 24px; border-bottom:1px solid rgba(0,0,0,.1);
  font-weight:500; font-size:20px; color:var(--ink);
}
.modal section{ padding:20px; display:grid; gap:14px;}
.modal .grid2{ grid-template-columns:1fr 1fr; }
.modal .grid2 .full{ grid-column:1 / -1; }
.modal footer{ padding:16px 20px; display:flex; justify-content:flex-end; gap:10px; }

/* ====== Form pieces ====== */
.field label, .form-group label{
  display:block; margin:0 0 6px; color:#555; font-size:12px; font-weight:500;
}
.field input, .field select{
  height:38px; border-radius:10px; border:none; font-size:14px;
  background:rgba(0,0,0,.04); color:var(--ink); padding:0 10px; width:100%;
}
.field textarea, #textarea, #pmNotes{
  width:100%; min-height:140px; border-radius:10px; border:none;
  background:rgba(0,0,0,.04); color:var(--ink); font-size:14px; line-height:1.5;
  padding:10px; resize:vertical; transition:border .2s ease, background .2s ease;
}
.field textarea:focus{ outline:none; background:rgba(0,0,0,.06); }

.inline{ display:flex; gap:8px; align-items:center; }

/* keep text + checkbox on one line */
#pmAllowDupRow{
  display:inline-flex; align-items:center; gap:.5rem; line-height:1.2; margin-top:12px;
}
#pmAllowDupRow>span{ white-space:nowrap; }
#pmAllowDupRow>input[type="checkbox"]{ margin:0; height:16px; }

/* ====== Toasts ====== */
.toast{
  display:inline-flex; align-items:center; gap:12px;
  padding:14px 22px; background:rgba(255,255,255,.9);
  border:1px solid rgba(0,0,0,.1); border-radius:14px;
  font-size:14px; color:var(--ink); backdrop-filter:blur(14px);
  box-shadow:0 4px 16px rgba(0,0,0,.15);
  transform:translateY(20px); opacity:0; pointer-events:none;
  transition:all .35s ease; z-index:99;
}
.toast.show{ opacity:1; transform:translateY(0); pointer-events:all; }
.toast-icon{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; }
.toast-icon svg{ width:20px; height:20px; fill:var(--brand1); flex-shrink:0; }
.toast-text{ font-weight:400; font-size:14px; letter-spacing:.01em; line-height:1.4; }

/* Global toast anchor */
#toast{
  position:fixed; bottom:40px; left:50%;
  transform:translateX(-50%) translateY(20px);
  background:rgba(255,255,255,.92); backdrop-filter:blur(14px);
  padding:14px 22px; border-radius:16px; font-size:14px; font-weight:400; color:#111;
  display:flex; align-items:center; gap:10px; opacity:0; pointer-events:none;
  transition:opacity .35s ease, transform .35s ease; box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:99;
}
#toast.show{ opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }

/* ====== View Toggle (glass pill) ====== */
.view-toggle{
  display:inline-flex; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.1);
  border-radius:50px; padding:4px; backdrop-filter:blur(12px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
  width:auto; max-width:260px; margin:0 auto; margin-right:16px;
}
.view-toggle .toggle-btn{
  flex:1; font-size:13px; font-weight:500; padding:8px 20px; background:transparent;
  border:none; color:#f3f5f2; cursor:pointer; border-radius:50px; transition:all .25s ease;
}
.view-toggle .toggle-btn.active{ background:var(--brand1); color:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); }
.view-toggle .toggle-btn:hover:not(.active){ background:rgba(255,255,255,.08); }

/* ====== Theme Toggle UI ====== */
.theme-toggle{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 0; }
.theme-toggle .label{ font-size:14px; font-weight:500; color:var(--ink); }
.theme-toggle .toggle-pill{
  width:48px; height:26px; border-radius:999px; border:1px solid rgba(0,0,0,.16);
  background:rgba(0,0,0,.08); position:relative; cursor:pointer; transition:background .25s ease, border-color .25s ease;
}
.theme-toggle .toggle-pill::after{
  content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff;
  transition:transform .25s ease, background .25s ease;
}

.save-check{
  display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
  margin-left:8px; border-radius:99px; border:1px solid rgba(255,255,255,.08);
}

/* ====== Splash ====== */
.splash{
  position:fixed; inset:0; z-index:99999; display:flex; align-items:center; justify-content:center;
  background:#f3f5f2; backdrop-filter:blur(24px) saturate(180%);
  opacity:1; pointer-events:auto; transition:opacity .6s ease;
}
.splash.fade-out{ opacity:0; pointer-events:none; }
.splash-inner{
  text-align:center; animation:splashFadeIn 1.5s ease forwards;
  background:var(--brand1); border-radius:32px; padding:64px;
}
.splash-inner h1{
  font-size:68px; font-weight:400; letter-spacing:-0.02em; margin:0 0 160px 0 !important;
  color:#f3f5f2; font-family:var(--font-title);
}
.splash-inner p{ font-size:.9rem; font-weight:400; color:rgba(255,255,255,.6); margin:0; }
@keyframes splashFadeIn{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:translateY(0);} }
.splash-logo{ width:180px; margin-bottom:1rem; }

/* ====== Footer status ====== */
.foundry-footer-status {
  position: fixed;
  bottom: 12px;
  left: 20px;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.3px;
  color: #f3f5f2;
  pointer-events: none;
  z-index: 999;
  user-select: none;
  font-family: inherit;
padding:8px;
background: var(--brand1);
border-radius:99px;
}

/* ====== Misc ====== */
.wsCompany{ font-size:16px; font-weight:500; }
li{ font-size:14px; }

/* Modal close icon button */
.modal header .icon-close{
  background: transparent;
  border: none;
  height: 34px;
  width: 34px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: 8px;
  color: var(--ink);
}

.modal header .icon-close:hover{
  background: rgba(0,0,0,.06); border-radius: 99px;
}

.modal header .icon-close svg{
  width: 18px;
  height: 18px;
  display: block;
  /* Use currentColor so theme/overrides can control it */
  fill: currentColor;
}