/* Foundry Base (light) — unified from suite */
/* Variables */
:root{
  --ink:#1c1f26; --muted:#666; --line:rgba(0,0,0,.1);
  --panel:rgba(255,255,255,.9);
  --brand1:#2253f4; --brand2:#5a78ff;
  --round:16px;
  --row-h:50px;
  --focus: rgba(34,83,244,.22);
  --ok:#30D158; --warn:#FE9F0A; --bad:#ff5c7a;;
  --shadow:0 20px 60px rgba(0,0,0,.15);
}

/* Global */
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#fff;color:var(--ink);
  font:300 15px var(--font-ui);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/*#app{display:flex;flex-direction:column;min-height:100vh}*/

/* App Title Bar (Projctr/Foldr parity) */
.app-titlebar{
  position:sticky; top:0; z-index:100;
  background:var(--brand1);
  padding:.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:-.01em; line-height:1.3; font-family:var(--font-title);
}
.app-titlebar .app-logo{height:20px; width:auto; display:block}

/* Titlebar layout */
.app-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

/* Logos side-by-side */
.app-logos{
  display:flex;
  align-items:center;
  gap:24px;              /* spacing between logos */
  flex:0 0 auto;
}

.app-logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:0;
}

/* Ensure images don't wrap or distort */
.app-logos img{
  display:block;
  height:22px;           /* adjust to taste */
  width:auto;
}

/* Optional: make FWS a touch taller if needed */
.app-logos .app-logo-fws{
  height:50px;
}

/* Toolbar (icon grid, same proportions as Projctr) */
.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;
}
.sep{width:1px;height:24px;background:var(--line);margin:0 8px}

/* Icon Buttons */
.actions-wrap{display:flex; align-items:center; justify-content:flex-end; gap:10px; height:100%}
.icon-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  width:54px;padding:4px 2px; 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:hover{background:rgba(255,255,255,.08); transform:translateY(-1px)}
.icon-btn:active{transform:translateY(0)}
.icon-btn .icon svg{width:24px;height:24px;display:block;fill:#f3f5f2;transition:fill .15s ease}
.icon-btn:hover .icon svg{opacity:.85}
.icon-btn .label{margin-top:4px;font-size:10px;font-weight:500;color:#f3f5f2;line-height:1.2;pointer-events:none}

/* Pills / buttons */
.btn{height:34px;border-radius:999px;border:none;background:var(--brand1);padding:0 12px;color:#f3f5f2;cursor:pointer;font-size:13px}
.btn.brand{background:var(--brand1);color:#f3f5f2}
.btn.brand:hover{background:var(--ok);color:#f3f5f2}
/*.btn:hover{filter:brightness(1.2)}*/
.btn.ghost {
	color: var(--bad);
	border: 1px solid var(--bad);
	background: none;
}
.btn.ghost:hover {
	color: #f3f5f2;
	border: 1px solid #fff;
	background: var(--bad);
}

.btn.so {
	color: #f3f5f2;
	background: rgba(255,255,255,0.2);
}
.btn.so:hover {
	color: #f3f5f2;
	background: rgba(255,255,255,0.4);
}

/* Search inline row */
.inline-sr{display:flex;align-items:center;gap:8px;border-bottom:1px dotted var(--line)} /* borrowed pattern */
#searchBox{border:1px solid var(--line)} /* matches your suite */

/* Toast (Projctr style: fixed bottom center) */
#toast{
  position:fixed; bottom:40px; left:50%; transform:translateX(-50%) translateY(20px);
  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); opacity:0; pointer-events:none; transition:all .35s ease; z-index:9999;
}
#toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto}
.toast-icon{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.toast-icon svg{width:20px;height:20px;fill:var(--brand1)}
.toast-text{font-weight:400;letter-spacing:.01em}

/* If no icon is injected, remove the reserved space */
#toast .toast-icon:empty{ display:none; }

/* Optional: tint icon by toast kind (only affects if icon exists) */
#toast[data-kind="error"] .toast-icon svg{ fill: #d33; }
#toast[data-kind="warn"]  .toast-icon svg{ fill: #d89a00; }
#toast[data-kind="ok"]    .toast-icon svg{ fill: var(--brand1); }

/* Wizard progress — hidden by default (app JS toggles .wizard-open on body) */
.wizard-progress{display:none}
body.wizard-open .wizard-progress {
	display: block;
	background: rgba(0,0,0,.04);
	padding: 8px 14px;
	border-bottom-left-radius: 16px;
	border-bottom-right-radius: 16px;
}
.wizard-progress .bar{height:6px;background:rgba(0,0,0,.08);border-radius:6px;overflow:hidden}
.wizard-progress .fill{display:block;height:100%;background:var(--ok);width:0%}

.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;
}

/* === View Toggle — macOS 26 glass pill === */
.view-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 50px;
  padding: 4px;
  backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  width: auto;
  /* ✅ optional width limit */
  margin: 0 auto;
  /* ✅ center if in a flex/toolbar */
  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 0.25s ease;
}

.view-toggle .toggle-btn.active {
  background: var(--brand1);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.view-toggle .toggle-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.08);
}

.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, 0.08)
}

.period-header {
	font-size: 16px;
	font-weight: 600;
	/*background: rgba(34, 83, 244, 1);*/
	color: var(--brand1);
}

.period-totals {
	font-size: 15px;
	font-weight: 600;
	color: var(--brand1);
	background: #f3f5f2;
letter-spacing: -0.01rem;
}

/* ================================
   TABLE ROW ICONS — DARKER ONLY
   (keeps toolbar icons untouched)
================================ */
#briefsTable tbody .icon-btn,
#briefsTable tbody .icon-btn svg,
#briefsTable tbody .icon-btn .label {
  color: rgba(0,0,0,0.78) !important; /* darker, readable on light tints */
}

#briefsTable tbody .icon-btn:hover,
#briefsTable tbody .icon-btn:focus-visible {
  color: rgba(0,0,0,0.92) !important;
}

/* ==========================================
   PROJECT ROW PILL BUTTONS (time / approval)
   Scoped to table body only — period footer unaffected
========================================== */
#briefsTable tbody tr:not(.period-totals) .pill.pill--ghost, #briefsTable tbody tr:not(.period-totals) a.pill.pill--ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	padding: 12px;
	border-radius: 999px;
	border: none;
	background: #f3f5f2;
	color: var(--brand1);
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: transform 0.06s ease, background 0.12s ease, border-color 0.12s ease;
	font-size: 14px;
}

#briefsTable tbody tr:not(.period-totals) .pill.pill--ghost:hover,
#briefsTable tbody tr:not(.period-totals) a.pill.pill--ghost:hover {
  background: var(--brand1);
  border-color: var(--brand1);
color: #f3f5f2;
}

#briefsTable tbody tr:not(.period-totals) .pill.pill--ghost:active {
  transform: translateY(1px);
}

/* ================================
   PERIOD TOTALS — PILL SPACING
================================ */
#briefsTable .period-totals .pill {
  margin-right: 0.45rem;
  margin-bottom: 0.35rem;
  /*display: inline-block;*/
color:var(--ink);
font-weight:400;
}

/*#briefsTable .period-totals .pill:last-child {
  margin-right: 0;
}*/

/* Date input display overlay: show dd-mm-yyyy but keep native picker/value */
.date-wrap { position: relative; }

.date-wrap .date-disp{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 14px;          /* match .cell-input padding */
  pointer-events: none;     /* click goes to the input */
  font: inherit;
  color: inherit;
}

/* When editing (focus), hide overlay so the native control is visible */
.date-wrap.is-editing .date-disp{ opacity: 0; }

/* Optional: hide the input text while not editing (overlay provides display) */
.date-wrap:not(.is-editing) input[type="date"]{
  color: transparent;
  caret-color: transparent;
}
.date-wrap:not(.is-editing) input[type="date"]::-webkit-datetime-edit{ color: transparent; }
.date-wrap:not(.is-editing) input[type="date"]::-webkit-datetime-edit-text{ color: transparent; }
.date-wrap:not(.is-editing) input[type="date"]::-webkit-datetime-edit-month-field{ color: transparent; }
.date-wrap:not(.is-editing) input[type="date"]::-webkit-datetime-edit-day-field{ color: transparent; }
.date-wrap:not(.is-editing) input[type="date"]::-webkit-datetime-edit-year-field{ color: transparent; }