/* ── Theme variables ───────────────────────────
   Overridden at runtime from Preferences (see
   applyTheme() in app.js) and persisted to
   localStorage. Defaults below match the
   original hard-coded palette exactly. */
:root {
  --bg-primary:    #0F1115;
  --bg-secondary:  #171A21;
  --bg-tertiary:   #1E222B;
  --border-color:  #2A2F3A;
  --text-primary:  #E8E9ED;
  --text-secondary:#8B92A3;
  --accent:        #6366F1;
  --metric-color:  #34D399;
  --font-family:   "Segoe UI", system-ui, sans-serif;
  --font-size:     13px;
  /* Keeps native form controls (select dropdowns, date pickers, etc.)
     rendering with dark chrome so they never show up as white-on-white
     against the app's own dark surfaces. applyTheme() flips this per
     the active theme (see below) if a light preset is selected. */
  color-scheme: dark;
}

/* ── Reset & base ─────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: var(--bg-primary); }
body {
  font-family: var(--font-family);
  background: var(--bg-primary);
  color: var(--text-primary);
  font-size: var(--font-size);
  line-height: 1.5;
}
#root { height: 100vh; display: flex; flex-direction: column; }

/* ── Typography helpers ──────────────────────── */
.mono    { font-family: "Consolas", "Cascadia Mono", monospace; letter-spacing: -0.1px; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-secondary); }
.label   { font-size: 11px; font-weight: 600; color: #7A8290; }

/* ── Colour tokens ───────────────────────────── */
/* bg layers   : var(--bg-primary)  var(--bg-secondary)  var(--bg-tertiary)  #22273A */
/* accent blue : var(--accent)  muted slate */
/* amber (cost): #C98A30 */
/* green (done): #4A9E6B */
/* red   (fail): #B84040 */
/* orange (wip): #C97630 */
/* purple (MOM): #7A55C2 */

/* ── Titlebar drag region ─────────────────────── */
.titlebar {
  -webkit-app-region: drag;
  min-height: 38px;
  background: var(--bg-primary);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 6px 16px; /* no native min/max/close overlay to reserve room for
                         in this web/Wix build, unlike the desktop app */
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
  gap: 10px;
}
.titlebar .no-drag { -webkit-app-region: no-drag; }

/* Brand wordmark — a slow, continuous breathing glow behind the text,
   using the same blue as the text itself so the glow always matches
   rather than needing separate upkeep if the brand color ever changes. */
.brand-wordmark {
  animation: brand-breathe 2.8s ease-in-out infinite;
}
@keyframes brand-breathe {
  0%, 100% { text-shadow: 0 0 4px rgba(79,126,204,0.35), 0 0 9px rgba(79,126,204,0.18); }
  50%      { text-shadow: 0 0 13px rgba(79,126,204,0.95), 0 0 26px rgba(79,126,204,0.55); }
}

/* ── App shell ───────────────────────────────── */
.app-shell   { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }

.app-body    { display: flex; flex: 1; overflow: hidden; }

/* ── Sidebar ─────────────────────────────────── */
.sidebar {
  min-width: 180px;
  background: var(--bg-primary);
  border-right: 1px solid var(--bg-tertiary);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex-shrink: 0;
}
.sidebar-resize-handle {
  position: absolute; top: 0; right: 0; bottom: 0; width: 5px;
  cursor: col-resize; z-index: 10; background: transparent;
}
.sidebar-resize-handle:hover, .sidebar-resize-handle.resizing {
  background: var(--accent);
  opacity: 0.5;
}
.sidebar-section { padding: 14px 12px 6px; }
.sidebar-title { font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #3A4050; margin-bottom: 6px; }
.sidebar-item {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px; border-radius: 6px; cursor: pointer;
  font-size: 12.5px; color: #8A909C; transition: all 0.12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border: none; background: transparent; width: 100%; text-align: left;
}
.sidebar-item:hover   { background: #14182200; color: var(--text-primary); }
.sidebar-item.active  { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.sidebar-item .dot    { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sidebar-item .dirty  { font-size: 9px; color: #C98A30; margin-left: auto; }

/* ── Main content area ───────────────────────── */
.main { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ── Project tabs ─────────────────────────────── */
.tab-bar {
  display: flex; align-items: center; gap: 2px;
  padding: 0 16px; background: var(--bg-primary);
  border-bottom: 1px solid var(--bg-tertiary);
  overflow-x: auto; flex-shrink: 0;
  /* A thin, theme-matched scrollbar (rather than a hidden one) is the
     simplest honest signal that more tabs exist off-screen — no extra
     JS needed to detect overflow state, since it's the real scrollbar. */
  scrollbar-width: thin;
  scrollbar-color: var(--border-color) transparent;
}
.tab-bar::-webkit-scrollbar { height: 5px; }
.tab-bar::-webkit-scrollbar-track { background: transparent; }
.tab-bar::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.tab-bar::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
.tab {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 8px 12px; border-radius: 6px 6px 0 0;
  font-size: 12.5px; color: #7A8290; cursor: pointer;
  border: 1px solid transparent; border-bottom: none;
  white-space: nowrap; transition: all 0.12s;
  background: transparent; position: relative; top: 1px;
  animation: tab-enter 0.18s ease-out;
  transform-origin: left center;
}
@keyframes tab-enter {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.tab.tab-closing {
  animation: tab-exit 0.18s ease-in forwards;
  pointer-events: none; /* mid-close — don't let a stray click reactivate it */
}
@keyframes tab-exit {
  from { opacity: 1; transform: scale(1); max-width: 240px; margin-right: 0; padding-left: 12px; padding-right: 14px; }
  to   { opacity: 0; transform: scale(0.9); max-width: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: hidden; }
}
.tab:hover                { color: var(--text-primary); background: var(--bg-secondary); }
.tab.active               { color: var(--text-primary); background: var(--bg-secondary); border-color: var(--bg-tertiary); }
.tab .tab-close           { opacity: 0; font-size: 12px; color: var(--text-secondary); margin-left: 4px; border: none; background: none; cursor: pointer; line-height: 1; padding: 0 2px; }
.tab:hover .tab-close     { opacity: 1; }
.tab .tab-dirty           { color: #C98A30; font-size: 10px; }
.tab .readonly-badge      { font-size: 9px; background: #2A1A10; color: #C97630; padding: 1px 5px; border-radius: 3px; }

/* ── Project content ─────────────────────────── */
.project-area { flex: 1; overflow: hidden; display: flex; flex-direction: column; }

/* ── Project header bar ──────────────────────── */
.project-header {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--bg-tertiary);
  background: var(--bg-secondary);
  flex-shrink: 0;
}
.project-header .row   { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.project-title-input   { font-size: 18px; font-weight: 700; background: transparent; border: none; color: var(--text-primary); outline: none; flex: 1; min-width: 200px; }
.project-title-input::placeholder { color: #3A4050; }

/* ── Summary cards ───────────────────────────── */
.summary-strip { display: flex; gap: 10px; padding: 10px 20px; background: var(--bg-primary); border-bottom: 1px solid var(--bg-tertiary); flex-shrink: 0; overflow-x: auto; }
.dashboard-panel { margin: 12px 20px 0; }
.summary-card  { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: 8px; padding: 10px 14px; min-width: 130px; flex-shrink: 0; }
.summary-card .sc-label { font-size: 9.5px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-secondary); }
.summary-card .sc-value { font-family: "Consolas", monospace; font-size: 18px; font-weight: 700; margin-top: 2px; }
.summary-card .sc-sub   { font-size: 10px; color: #4A9E6B; margin-top: 1px; }

/* ── Content panels (sequences + cameras) ────── */
.content-scroll { flex: 1; overflow-y: auto; padding: 14px 20px; }

/* Overview/Animation/Stills sub-view content — a subtle fade+rise plays
   each time a fresh view mounts. Since the three views are mutually
   exclusive conditional renders (only one is ever in the tree), switching
   between them naturally unmounts the old one and mounts the new one,
   which is exactly when this animation fires — no extra JS bookkeeping
   needed, unlike the tab bar's open/close animations above. */
.subtab-content { animation: subtab-in 0.22s ease-out; flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }

/* ── Dashboard project cards — motion scoped ONLY to the main project
      grid, not Studio Overview or any in-project view. ── */
.dashboard-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  animation: dash-card-fade-in 0.35s ease-out both;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}
@keyframes dash-card-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.dashboard-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent);
  background: var(--bg-tertiary);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}

/* Game-like tilt card — the rotateX/rotateY/scale itself is written
   directly to the element's inline style on mousemove (see
   InteractiveProjectCard), which always wins over the plain :hover rule
   above by normal CSS cascade rules, so the two never visibly fight.
   This block only supplies what CSS alone can't: 3D perspective, the
   transition curve back to neutral on mouse-leave, and the moving glare. */
.game-card {
  position: relative; z-index: 1; overflow: hidden;
  transform-style: preserve-3d; will-change: transform;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

/* Ambient spotlight following the cursor across the whole card grid —
   a soft glow behind the cards, separate from each card's own sheen. */
.dashboard-card-grid { position: relative; }
.dashboard-card-grid::before {
  content: ""; position: absolute; inset: -20px; z-index: 0; pointer-events: none;
  background: radial-gradient(320px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(79,126,204,0.07), transparent 70%);
}
.game-card-sheen {
  position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at var(--sheen-x, 50%) var(--sheen-y, 50%), rgba(255,255,255,0.14), transparent 55%);
  opacity: 0; transition: opacity 0.2s ease;
}
.game-card:hover .game-card-sheen { opacity: 1; }

.ripple {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,0.28);
  transform: translate(-50%, -50%); pointer-events: none; z-index: 5;
  width: 8px; height: 8px;
  animation: ripple-expand 0.6s ease-out forwards;
}
@keyframes ripple-expand {
  from { width: 8px; height: 8px; opacity: 0.55; }
  to   { width: 340px; height: 340px; opacity: 0; }
}
@keyframes dash-card-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* The "updated today" freshness dot gets a slow, gentle pulse — a live
   signal, not just a static status color. */
.dashboard-fresh-dot { animation: freshness-pulse 2.2s ease-in-out infinite; }
@keyframes freshness-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.dashboard-empty {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 48px 20px; animation: dash-card-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.dashboard-empty-icon {
  font-size: 40px;
  animation: dash-float 3.2s ease-in-out infinite;
}
@keyframes dash-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.dashboard-empty-cta { animation: dash-cta-pulse 2.4s ease-in-out infinite; }
@keyframes dash-cta-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(79,126,204,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(79,126,204,0); }
}
@keyframes subtab-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Sequence block ──────────────────────────── */
.seq-block { margin-bottom: 16px; border: 1px solid var(--bg-tertiary); border-radius: 10px; overflow: hidden; }
.seq-header {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: repeating-linear-gradient(135deg, var(--bg-secondary) 0, var(--bg-secondary) 5px, transparent 5px, var(--bg-tertiary) 10px);
  border-bottom: 1px solid var(--bg-tertiary);
  cursor: default;
}
.seq-header input { background: transparent; border: none; color: var(--text-primary); font-weight: 700; font-size: 13px; font-family: "Consolas", monospace; letter-spacing: 0.3px; outline: none; flex: 1; }

/* ── Camera / Shot table ─────────────────────── */
.cam-table { width: 100%; border-collapse: collapse; min-width: 1100px; }
.cam-table th { padding: 7px 10px; background: var(--bg-primary); font-size: 9.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: #3A4050; text-align: left; white-space: nowrap; border-bottom: 1px solid var(--bg-tertiary); }
.cam-table td { padding: 0; border-bottom: 1px solid var(--border-color); vertical-align: top; }
.cam-row:hover td { background: rgba(255,255,255,0.012); }
.cam-row.selected td { background: rgba(79,126,204,0.06); }
.cell-pad { padding: 8px 10px; }

/* ── Inputs ──────────────────────────────────── */
.inp {
  background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px; width: 100%;
  outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; font-family: inherit;
}
.inp:focus      { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); }
.inp::placeholder { color: #3A4050; }
.inp:disabled   { opacity: 0.45; cursor: not-allowed; }
.inp.mono       { font-family: "Consolas", monospace; }
select.inp      { cursor: pointer; }
/* Belt-and-suspenders alongside the document-level color-scheme toggle
   in applyTheme(): keeps a select's own dropdown list themed even in
   browsers that don't fully honor color-scheme for popup chrome. */
select.inp option, select.inp optgroup,
.status-pill option, .mom-change-status option { background: var(--bg-tertiary); color: var(--text-primary); }
/* No spinner arrows on ANY number input, anywhere in the app. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button,
.no-spin::-webkit-outer-spin-button,
.no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"],
.no-spin[type="number"] { -moz-appearance: textfield; }

/* ── Status pill ─────────────────────────────── */
.status-pill { font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; border: none; cursor: pointer; outline: none; white-space: nowrap; }

/* ── Frame progress strip ─────────────────────── */
.frame-bar-wrap { padding: 6px 10px; }
.frame-bar-label { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-secondary); margin-bottom: 3px; font-family: "Consolas", monospace; }
.frame-bar-track { height: 6px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; display: flex; gap: 1px; }
.frame-seg       { height: 100%; border-radius: 2px; flex-shrink: 0; }
.frame-grid      { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 5px; }
.frame-dot       { width: 8px; height: 8px; border-radius: 2px; cursor: pointer; transition: transform 0.1s; }
.frame-dot:hover { transform: scale(1.4); }

/* ── Cost cell ───────────────────────────────── */
.cost-value   { font-family: "Consolas", monospace; font-weight: 700; color: #C98A30; font-size: 13.5px; }
.cost-badge   { font-size: 9px; color: #4A9E6B; margin-left: 4px; }
.cost-est     { font-size: 9px; color: var(--text-secondary); margin-left: 4px; }

/* ── MOM panel ───────────────────────────────── */
.mom-panel {
  background: var(--bg-primary);
  border-top: 1px solid var(--bg-tertiary);
  padding: 14px 16px;
}
.mom-header    { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mom-title     { font-size: 11px; font-weight: 700; color: #7A55C2; letter-spacing: 0.8px; text-transform: uppercase; }
.mom-meeting   { background: var(--bg-secondary); border: 1px solid var(--bg-tertiary); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; }
.mom-meeting-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.mom-change    { background: #10131C; border: 1px solid var(--bg-tertiary); border-radius: 6px; padding: 9px 10px; margin-bottom: 6px; display: flex; flex-direction: column; gap: 7px; }
.mom-change-row1 { display: flex; gap: 8px; align-items: center; }
.mom-change-row2 { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mom-change-meta-input { background: none; border: none; border-bottom: 1px solid var(--bg-tertiary); color: var(--text-secondary); font-size: 10.5px; padding: 2px 1px; width: 100px; }
.mom-change-meta-input:focus { outline: none; border-bottom-color: var(--accent); color: var(--text-primary); }
.mom-revision-box { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; background: rgba(168,128,240,0.08); border: 1px dashed rgba(168,128,240,0.35); border-radius: 5px; padding: 5px 9px; }
.mom-change-status { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; border: none; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.signoff-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bg-tertiary); font-size: 11px; }

/* ── Buttons ─────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px; border-radius: 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; border: none; transition: filter 0.12s, background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease; white-space: nowrap; }
.btn:active { transform: scale(0.96); }
.btn:hover { filter: brightness(1.12); }
.btn-blue    { background: var(--accent); color: #FFFFFF; }
.btn-ghost   { background: transparent; border: 1px solid var(--border-color); color: #7A8290; }
.btn-ghost:hover { color: var(--text-primary); border-color: #3A4050; }
.btn-ghost.active { border-color: var(--accent); color: #7AB0F0; background: rgba(79,126,204,0.08); }
.btn-purple  { background: #2A1E48; color: #A880F0; }
.btn-danger  { background: transparent; border: none; color: #3A4050; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; }
.btn-danger:hover { color: #B84040; background: rgba(184,64,64,0.12); }
.btn-icon    { background: transparent; border: none; color: #3A4050; cursor: pointer; padding: 4px; border-radius: 4px; display: flex; align-items: center; transition: all 0.12s; }
.btn-icon:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); }

/* ── Budget bar ──────────────────────────────── */
.budget-bar-track { height: 6px; border-radius: 3px; background: var(--bg-tertiary); overflow: hidden; margin-top: 4px; }
.budget-bar-fill  { height: 100%; border-radius: 3px; transition: width 0.6s ease; }

/* ── Toast ───────────────────────────────────── */
/* ── Loading skeletons ────────────────────────── */
.skeleton-line {
  border-radius: 4px;
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Splash screen (connecting / blocked / error) ─────
   Same visual language reused in index.html's pre-mount
   placeholder, so there's no visual jump once React takes over. */
.splash-screen {
  /* v33.1: min-height + scroll, so on a short screen (small phone, landscape, short Wix frame) the
     buttons can't be cut off — every start-up screen must always reach its Log out / Try again. */
  min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; align-items:center; justify-content:safe center;
  background:var(--bg-primary); color:var(--text-primary); text-align:center; padding:24px;
  position:relative; overflow-x:hidden; overflow-y:auto; box-sizing:border-box;
}

.splash-grid {
  position:absolute; inset:0; opacity:0.35; pointer-events:none;
  background-image:
    linear-gradient(var(--bg-tertiary) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-tertiary) 1px, transparent 1px);
  background-size: 42px 42px;
  animation: splash-grid-drift 40s linear infinite;
}
@keyframes splash-grid-drift { from { background-position: 0 0; } to { background-position: 420px 420px; } }

.splash-mark { position:relative; width:120px; height:120px; margin-bottom:24px; }
.splash-glow {
  position:absolute; inset:-40px; border-radius:50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--splash-color, var(--accent)) 28%, transparent) 0%, transparent 70%);
  animation: splash-pulse 2.6s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { opacity:0.55; transform:scale(0.92); }
  50%      { opacity:1;    transform:scale(1.06); }
}
.splash-ring {
  position:absolute; inset:0; border-radius:50%;
  border: 3px solid var(--bg-tertiary);
  border-top-color: var(--splash-color, var(--accent));
  border-right-color: var(--splash-color, var(--accent));
}
.splash-ring.spinning { animation: splash-spin 0.9s cubic-bezier(0.5,0.1,0.5,0.9) infinite; }
@keyframes splash-spin { to { transform: rotate(360deg); } }
.splash-mark-icon {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:28px;
}
.splash-logo {
  position:absolute; top:50%; left:50%; width:56px; height:auto;
  transform: translate(-50%,-50%);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--splash-color, var(--accent)) 45%, transparent));
}
.splash-logo.floating { animation: splash-float 3.2s ease-in-out infinite; }
@keyframes splash-float {
  0%, 100% { transform: translate(-50%,-50%) translateY(0); }
  50%      { transform: translate(-50%,-50%) translateY(-5px); }
}
.splash-logo.resolved { opacity:0.7; }

.splash-wordmark { font-size:15px; font-weight:700; letter-spacing:1.6px; color:var(--accent); margin-bottom:6px; }
.splash-title    { font-size:18px; font-weight:700; margin-bottom:8px; }
.splash-body     { font-size:13px; color:var(--text-secondary); max-width:420px; line-height:1.6; }
.splash-status   { font-size:11.5px; color:var(--text-secondary); margin-top:14px; min-height:16px; animation: splash-fade 0.3s ease; }
@keyframes splash-fade { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:translateY(0); } }

.search-highlight { animation: search-flash 1.6s ease-out; }
@keyframes search-flash {
  0%   { box-shadow: 0 0 0 3px var(--accent); }
  70%  { box-shadow: 0 0 0 3px var(--accent); }
  100% { box-shadow: 0 0 0 0px transparent; }
}

.app-fade-in { animation: app-fade-in 0.25s ease; }
@keyframes app-fade-in { from { opacity:0; } to { opacity:1; } }

.toast {
  position: fixed; bottom: 20px; right: 20px;
  background: var(--bg-tertiary); border: 1px solid var(--border-color); color: var(--text-primary);
  padding: 9px 15px; border-radius: 8px; font-size: 12.5px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5); z-index: 9999;
  animation: toast-in 0.18s ease-out;
}
@keyframes toast-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }

/* ── Empty states ────────────────────────────── */
.empty-state { padding: 40px; text-align: center; color: #3A4050; }
.empty-state .em-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.5; }
.empty-state .em-text { font-size: 13px; }

/* ── Read-only overlay ───────────────────────── */
.readonly-bar { background: #1E1200; border-bottom: 1px solid #3A2500; padding: 6px 16px; font-size: 12px; color: #C97630; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* ── Scrollbars ──────────────────────────────── */
::-webkit-scrollbar       { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #2E3548; }

/* ── Misc ────────────────────────────────────── */
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.5); cursor: pointer; }
.divider { height: 1px; background: var(--bg-tertiary); margin: 6px 0; }
.tag { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 4px; letter-spacing: 0.4px; }
.gap { gap: 8px; }
.flex { display: flex; align-items: center; }
.flex-1 { flex: 1; }
.ml-auto { margin-left: auto; }
.w100 { width: 100%; }
.no-shrink { flex-shrink: 0; }

/* ── Modal width safety ──────────────────────── */
/* Every modal's inner panel gets this class (see app.js). Their own
   inline `width` (340–640px) is fine on desktop, but would overflow a
   phone screen — this caps it without touching each modal individually. */
.modal-panel { max-width: calc(100vw - 32px); border-radius: 16px !important; animation: ios-modal-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 24px 70px rgba(0,0,0,0.55); }
.modal-panel::-webkit-scrollbar { width: 0; height: 0; }
@keyframes ios-modal-in { from { opacity: 0; transform: scale(0.92) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
div:has(> .modal-panel) { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* ── Responsive layout ───────────────────────── */
/* Verified against the actual structure: .app-body is a row flex with
   .sidebar (fixed 220px) and .main (flex:1) as its only two children —
   collapsing .app-body to a column and hiding .sidebar is a safe, minimal
   change that doesn't touch anything inside .main. */
@media (max-width: 768px) {
  .sidebar { display: none; }

  .project-header { padding: 10px 12px; }
  .project-title-input { font-size: 15px; min-width: 140px; }
  .summary-strip { padding: 8px 12px; gap: 8px; }
  .summary-card { min-width: 108px; padding: 8px 10px; }
  .content-scroll { padding: 10px 12px; }
  .dashboard-panel { margin: 10px 12px 0; }

  .tab-bar { padding: 0 10px; }
  .tab { padding: 7px 10px 7px 9px; font-size: 12px; }

  /* Titlebar's right-hand button group (role badge, Staff, Preferences,
     License) already wraps via flex-wrap on .titlebar itself — this just
     tightens spacing so more fits per row before wrapping. */
  .titlebar { padding: 6px 10px; gap: 6px; font-size: 12px; }
}

@media (max-width: 480px) {
  :root { --font-size: 12px; }
  .modal-panel { padding: 14px !important; }
  .seq-header { flex-wrap: wrap; padding: 8px 10px; }
  .cam-card { font-size: 12px; }
}


/* ══════════════════════════════════════════════════════════════════
   BILLING (Ledgerline module) — scoped visual language, ported from
   the standalone Ledgerline app: its font sizes, card corner radius,
   spacing and text placement, reproduced under a "bl-" prefix (and a
   .billing-tab-root wrapper) so none of it can ever collide with or
   override RPP's own CSS above. Colors are Ledgerline's own dark-mode
   palette (it's an Apple-style light/dark app; RPP's shell is always
   dark, so the dark variant is what's used here throughout). ──────── */
.billing-tab-root{
  --bl-bg:var(--bg-primary); --bl-card:var(--bg-secondary); --bl-label:var(--text-primary); --bl-gray:var(--text-secondary);
  --bl-gray-fill:rgba(118,118,128,0.24); --bl-separator:var(--border-color);
  --bl-blue:var(--accent); --bl-green:#34C759; --bl-red:#FF453A;
  --bl-font:var(--font-family), -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
  font-family:var(--bl-font); color:var(--bl-label); font-size:15px; line-height:1.45;
  display:flex; width:100%; height:100%; overflow:hidden;
}
.billing-tab-root *{ box-sizing:border-box; }
.billing-tab-root select option, .billing-tab-root select optgroup{ background:var(--bl-card); color:var(--bl-label); }
.billing-tab-root.bl-inline{ height:auto; overflow:visible; display:block; }
.bl-sidebar{ width:220px; flex:0 0 220px; display:flex; flex-direction:column; padding:18px 12px; background:var(--bl-bg); border-right:1px solid var(--bl-separator); overflow-y:auto; }
.bl-sidebar-brand{ display:flex; align-items:center; gap:8px; padding:4px 10px 18px; font-size:15px; font-weight:700; color:var(--bl-label); }
.bl-nav-item{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:8px; color:var(--bl-label); font-size:13.5px; font-weight:500; background:none; border:none; cursor:pointer; text-align:left; width:100%; margin-bottom:2px; font-family:var(--bl-font); }
.bl-nav-item:hover{ background:var(--bl-gray-fill); }
.bl-nav-item.active{ background:rgba(10,132,255,0.16); color:var(--bl-blue); }
.bl-content{ flex:1 1 auto; min-width:0; overflow-y:auto; }
.bl-page{ padding:26px 30px 50px; max-width:980px; }
.bl-large-title{ font-size:28px; font-weight:700; letter-spacing:-.4px; margin:0 0 20px; color:var(--bl-label); }
.bl-group-title{ font-size:12px; color:var(--bl-gray); text-transform:uppercase; letter-spacing:.4px; margin:0 0 8px; font-weight:600; }
.bl-group-card{ background:var(--bl-card); border-radius:12px; overflow:visible; margin:0 0 22px; border:1px solid var(--bl-separator); }
.bl-group-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 16px; border-bottom:1px solid var(--bl-separator); min-height:22px; }
.bl-group-card .bl-group-row:last-child{ border-bottom:none; }
.bl-group-row > label{ font-size:13.5px; color:var(--bl-gray); flex-shrink:0; }
.bl-group-row input, .bl-group-row select{ border:none; background:none; color:var(--bl-label); text-align:right; font-size:13.5px; outline:none; flex:1; min-width:0; font-family:var(--bl-font); }
.bl-group-row textarea{ border:none; background:none; color:var(--bl-label); font-size:13.5px; width:100%; outline:none; resize:vertical; font-family:var(--bl-font); }
/* Custom dropdown — swaps out the native <select> (whose open popup can
   only ever render with square, browser-native corners) for a fully
   themed, rounded menu that matches the rest of the app's card shapes. */
.bl-select{ position:relative; display:inline-flex; flex:1; min-width:0; }
.bl-group-row .bl-select{ justify-content:flex-end; }
.bl-select-btn{ display:flex; align-items:center; justify-content:flex-end; gap:6px; width:100%; border:none; background:none; color:var(--bl-label); text-align:right; font-size:13.5px; font-family:var(--bl-font); cursor:pointer; padding:2px 0; }
.bl-select-btn:disabled{ opacity:.45; cursor:not-allowed; }
.bl-select-btn .bl-select-chevron{ font-size:11px; color:var(--bl-gray); transition:transform .15s ease; flex-shrink:0; }
.bl-select.bl-open .bl-select-btn .bl-select-chevron{ transform:rotate(180deg); }
.bl-select-value{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bl-select-menu{ position:absolute; top:calc(100% + 6px); right:0; min-width:180px; max-width:280px; max-height:240px; overflow-y:auto; background:var(--bl-card); border:1px solid var(--bl-separator); border-radius:12px; box-shadow:0 14px 34px rgba(0,0,0,.45); padding:6px; z-index:200; transform:scale(.96) translateY(-4px); opacity:0; pointer-events:none; transition:transform .14s cubic-bezier(.34,1.56,.64,1), opacity .12s ease; }
.bl-select.bl-open .bl-select-menu{ transform:scale(1) translateY(0); opacity:1; pointer-events:auto; }
.bl-select-opt{ padding:8px 10px; border-radius:8px; font-size:13px; color:var(--bl-label); text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-select-opt:hover, .bl-select-opt.active{ background:var(--bl-gray-fill); }
.bl-select-opt.active{ color:var(--bl-blue); }
.bl-select-empty{ padding:8px 10px; font-size:12.5px; color:var(--bl-gray); }
.bl-select.bl-pill{ flex:0 0 auto; }
.bl-select.bl-pill .bl-select-btn{ justify-content:space-between; background:var(--bl-gray-fill); border-radius:8px; padding:7px 10px; color:var(--bl-gray); font-size:12px; }
.bl-select.bl-pill .bl-select-menu{ right:0; left:auto; }
/* Opens upward instead of down — for a select that sits near the bottom
   of its scroll area (e.g. "Add from catalog…" under the line items
   table), so the menu doesn't get clipped by a scrolling ancestor. */
.bl-select.bl-select-up .bl-select-menu{ top:auto; bottom:calc(100% + 6px); transform:scale(.96) translateY(4px); }
.bl-select.bl-select-up.bl-open .bl-select-menu{ transform:scale(1) translateY(0); }
/* Live catalog-match dropdown under a line item's Description input. */
.bl-desc-suggest{ position:absolute; top:calc(100% + 2px); left:6px; right:6px; min-width:220px; max-height:220px; overflow-y:auto;
  background:var(--bl-card); border:1px solid var(--bl-separator); border-radius:10px; box-shadow:0 14px 34px rgba(0,0,0,.45); padding:5px; z-index:210; }
.bl-row-main{ flex:1 1 auto; min-width:0; }
.bl-row-title{ font-size:14px; font-weight:500; color:var(--bl-label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-row-sub{ font-size:12px; color:var(--bl-gray); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bl-row-amount{ font-size:13.5px; color:var(--bl-label); font-variant-numeric:tabular-nums; }
.bl-badge{ font-size:11px; font-weight:600; padding:3px 9px; border-radius:8px; white-space:nowrap; flex-shrink:0; }
.bl-badge-draft{ background:var(--bl-gray-fill); color:var(--bl-gray); }
.bl-badge-sent{ background:rgba(10,132,255,.16); color:var(--bl-blue); }
.bl-badge-paid{ background:rgba(52,199,89,.18); color:var(--bl-green); }
.bl-badge-overdue{ background:rgba(255,69,58,.16); color:var(--bl-red); }
.bl-badge-partial{ background:rgba(255,159,10,.16); color:#E0A030; }
.bl-badge-credited{ background:rgba(52,199,89,.18); color:var(--bl-green); }
.bl-badge-cancelled{ background:var(--bl-gray-fill); color:var(--bl-gray); text-decoration:line-through; }
.bl-badge-credit{ background:rgba(138,108,201,.18); color:#A48BE0; }
/* Invoicing v29: issued-invoice view */
.bl-inline-form{ padding:4px 0; }
.bl-payment-form{ border-top:1px solid var(--bl-separator); margin-top:4px; padding-top:6px; }
.bl-balance-row span:last-child{ color:var(--bl-label); }
.bl-issued-view .bl-line-table td{ color:var(--bl-label); }
/* auto-fit: 5 stat cards (v31 adds Unbilled work) wrap cleanly at any width.
   (v29 put a 2-column mobile rule BEFORE this one, so it never applied.) */
.bl-stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin:0 0 26px; }
.bl-stat-card{ background:var(--bl-card); border-radius:14px; padding:16px 18px; display:flex; flex-direction:column; gap:5px; border:1px solid var(--bl-separator); }
.bl-stat-label{ font-size:12px; color:var(--bl-gray); }
.bl-stat-value{ font-size:22px; font-weight:700; color:var(--bl-label); font-variant-numeric:tabular-nums; }
.bl-controls-row{ display:flex; align-items:center; gap:12px; margin:0 0 16px; flex-wrap:wrap; }
.bl-search-bar{ flex:0 0 260px; display:flex; align-items:center; gap:6px; background:var(--bl-gray-fill); border-radius:9px; padding:8px 12px; }
.bl-search-bar input{ border:none; background:none; outline:none; font-size:13.5px; color:var(--bl-label); flex:1; min-width:0; font-family:var(--bl-font); }
.bl-segmented{ display:flex; background:var(--bl-gray-fill); border-radius:8px; padding:2px; gap:0; }
.bl-segmented button{ background:none; border:none; padding:6px 13px; font-size:12.5px; font-weight:500; color:var(--bl-gray); cursor:pointer; border-radius:6px; font-family:var(--bl-font); }
.bl-segmented button.active{ color:var(--bl-label); background:var(--bl-card); box-shadow:0 1px 3px rgba(0,0,0,.3); }
.bl-btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 17px; border-radius:9px; font-size:13.5px; font-weight:600; cursor:pointer; border:none; font-family:var(--bl-font); }
.bl-btn-primary{ background:var(--bl-blue); color:#fff; }
.bl-btn-secondary{ background:var(--bl-gray-fill); color:var(--bl-label); }
.bl-btn-destructive{ background:rgba(255,69,58,0.16); color:var(--bl-red); }
.bl-link-add{ background:none; border:none; color:var(--bl-blue); font-size:13px; font-weight:500; cursor:pointer; padding:6px 4px; font-family:var(--bl-font); }
.bl-icon-btn{ display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; background:none; border:none; color:var(--bl-gray); cursor:pointer; border-radius:6px; flex-shrink:0; }
.bl-icon-btn:hover{ background:var(--bl-gray-fill); color:var(--bl-label); }
.bl-line-table{ width:100%; border-collapse:collapse; }
.bl-line-table th{ text-align:left; font-size:11.5px; color:var(--bl-gray); font-weight:500; padding:0 8px 8px; }
.bl-line-table td{ padding:7px 8px; vertical-align:middle; }
.bl-line-table input{ border:none; background:none; color:var(--bl-label); font-size:13.5px; width:100%; outline:none; padding:6px; border-radius:6px; font-family:var(--bl-font); }
.bl-line-table input:focus{ background:rgba(10,132,255,.12); }
.bl-totals-box{ display:flex; justify-content:flex-end; }
.bl-totals-inner{ width:270px; }
.bl-trow{ display:flex; justify-content:space-between; font-size:13.5px; padding:4px 0; color:var(--bl-gray); font-variant-numeric:tabular-nums; }
.bl-trow-total{ display:flex; justify-content:space-between; color:var(--bl-label); font-size:18px; font-weight:700; border-top:1px solid var(--bl-separator); margin-top:6px; padding-top:10px; }
.bl-empty-state{ text-align:center; padding:64px 30px; }
.bl-empty-state .bl-empty-icon{ font-size:30px; color:var(--bl-gray); margin-bottom:12px; }
.bl-empty-state h2{ font-size:19px; font-weight:600; margin:0 0 8px; color:var(--bl-label); }
.bl-empty-state p{ font-size:13.5px; color:var(--bl-gray); margin:0 0 20px; }
.bl-empty-inline{ padding:26px 16px; color:var(--bl-gray); font-size:13.5px; text-align:center; }
.bl-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:start; }
.bl-modal-overlay{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,0); transition:background .2s ease; }
.bl-modal-overlay.bl-show{ background:rgba(0,0,0,.55); }
.bl-modal-anim{ transform:scale(.95) translateY(8px); opacity:0; transition:transform .22s cubic-bezier(.34,1.56,.64,1), opacity .18s ease; }
.bl-modal-overlay.bl-show .bl-modal-anim{ transform:scale(1) translateY(0); opacity:1; }
.bl-modal-box{ background:var(--bl-card); border-radius:16px; padding:24px; width:460px; max-width:90vw; max-height:85vh; overflow-y:auto; box-shadow:0 24px 70px rgba(0,0,0,.5); border:1px solid var(--bl-separator); }
.bl-modal-title{ font-size:16.5px; font-weight:700; margin-bottom:6px; color:var(--bl-label); display:flex; align-items:center; gap:8px; }
/* ── minor internal animations: tab/segment switching ── */
.bl-nav-item{ transition:background .15s ease, color .15s ease; }
.bl-btn{ transition:transform .1s ease, opacity .1s ease, background .12s ease; }
.bl-btn:active{ transform:scale(.97); }
.bl-icon-btn{ transition:background .15s ease, color .15s ease; }
.bl-segmented{ position:relative; }
.bl-segmented .bl-seg-highlight{ position:absolute; top:2px; bottom:2px; left:0; width:0; background:var(--bl-card); border-radius:6px; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:transform .25s cubic-bezier(.4,0,.2,1), width .25s ease; z-index:0; }
.bl-segmented button{ position:relative; z-index:1; transition:color .15s ease; }
.bl-page-anim{ animation:bl-page-fade .2s cubic-bezier(.32,.72,0,1) both; }
@keyframes bl-page-fade{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:translateY(0); } }
@media (max-width: 900px){ .bl-form-grid{ grid-template-columns:1fr; } }

/* ============ Redesign additions (preview only, not in main build) ============ */
.sidebar-nav-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 8px;
  color: #9DA7B3; background: none; border: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.sidebar-nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; }

/* Dashboard: switched from flex-wrap to a real 3-column grid with more
   breathing room per card, plus a KPI summary row above it. */
.dashboard-card-grid[style] { display: grid !important; grid-template-columns: repeat(auto-fill, 280px) !important; gap: 10px !important; justify-content: start; }
.dashboard-kpi-row {
  display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; margin-bottom: 22px;
}
.dashboard-kpi-card {
  background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 14px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
}
.dashboard-kpi-label { font-size: 11px; color: var(--text-secondary); font-weight: 500; }
.dashboard-kpi-value { font-size: 24px; font-weight: 700; color: var(--text-primary); }

/* ============ Visual direction variants (for comparison only) ============ */
body.theme-corporate-blue {
  --bg-primary: #0B1220; --bg-secondary: #121B2E; --border-color: #223047;
  --text-primary: #F1F5F9; --text-secondary: #8AA0BF; --accent: #3B82F6;
}
body.theme-warm-graphite {
  --bg-primary: #1A1817; --bg-secondary: #242020; --border-color: #3A3432;
  --text-primary: #F0EAE2; --text-secondary: #A89A8C; --accent: #D9A441;
}
body.theme-minimal-light {
  --bg-primary: #FAFAF9; --bg-secondary: #FFFFFF; --border-color: #E4E4E7;
  --text-primary: #18181B; --text-secondary: #71717A; --accent: #2563EB;
}
body.theme-minimal-light .app-sidebar-nav { background: #18181B; }
body.theme-minimal-light .sidebar-nav-link { color: #A1A1AA; }
body.theme-minimal-light .sidebar-nav-link:hover { color: #fff; }

#theme-switcher { position:fixed; top:10px; right:10px; z-index:99999; display:flex; gap:6px; background:#000; padding:8px; border-radius:8px; }
#theme-switcher button { font-size:11px; padding:6px 10px; border-radius:5px; border:none; cursor:pointer; font-family:sans-serif; }

/* MOM meeting expand/collapse animation, replacing the eye icon toggle */
.mom-meeting-body { max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.25s ease, opacity 0.2s ease; }
.mom-meeting-body-open { max-height: 600px; opacity: 1; }

/* MOM tab: mom-panel is normally a standalone card with its own
   background/border-top; nested inside the MOM tab's "Meetings" section,
   that would double up against the section's own card styling, so
   neutralize it here to keep padding/borders aligned with Details above it. */
.mom-nested-wrap .mom-panel { background: transparent; border-top: none; }

/* iOS-style toggle switches, applied globally to every checkbox in the
   app via pure CSS — the underlying checkbox behavior (checked state,
   onChange handlers) is completely unchanged, only the visual is. */
input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 38px; height: 22px; border-radius: 11px;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  position: relative; cursor: pointer; flex-shrink: 0;
  transition: background-color 0.2s ease, border-color 0.2s ease;
  vertical-align: middle;
}
input[type="checkbox"]::before {
  content: ""; position: absolute; top: 1px; left: 1px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
input[type="checkbox"]:checked {
  background: var(--accent); border-color: var(--accent);
}
input[type="checkbox"]:checked::before { transform: translateX(16px); }
input[type="checkbox"]:disabled { opacity: 0.4; cursor: not-allowed; }

/* iOS Settings-style grouped list: one rounded container, thin dividers
   between rows instead of each row having its own border/background. */
.ios-list-group { background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.ios-list-row:not(:last-child) > div:first-child { border-bottom: 1px solid var(--border-color); }
.ios-list-row:hover > div:first-child { background: var(--bg-tertiary); }

/* Invoicing v30: tax preview & notes */
.bl-tax-warnings{ font-size:12px; color:#E0A030; background:rgba(255,159,10,.08); border-radius:10px; padding:8px 12px; margin:0 0 12px; display:flex; flex-direction:column; gap:4px; }
.bl-tax-note{ font-size:12px; color:var(--bl-gray); padding:8px 4px 0; line-height:1.5; }


/* Billing rows: a toggle switch must keep its own size (the generic row-input rule above stretched it into a full-width bar) */
.bl-group-row input[type="checkbox"] { flex: 0 0 38px; width: 38px; min-width: 38px; }

/* ══════════════════════════════════════════════════════════════════
   MOBILE LAYER (v32.1) — phones and small tablets, ≤768px.
   Purely additive: nothing above changes for desktop. Written against
   the app's real structure (an icon-rail .app-sidebar-nav beside
   .app-shell, a .tab-bar, .dashboard-kpi-row, the Billing module) and
   checked in a real browser at 320 / 375 / 414 / 768px for every role.
   The rail's own styles are inline in app.js, hence the !important.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  html, body { overscroll-behavior: none; }
  #root { height: 100dvh; }

  /* App frame: icon rail becomes a slim top bar instead of eating 56px of width */
  .app-shell-sidebar-layout { flex-direction: column !important; height: 100dvh; min-height: 0 !important; }
  .app-sidebar-nav {
    width: 100% !important; height: auto !important; min-height: 48px;
    flex-direction: row !important; align-items: center !important; justify-content: flex-start;
    padding: 4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)) !important;
    padding-top: max(4px, env(safe-area-inset-top)) !important;
    gap: 4px !important; overflow-x: auto !important; overflow-y: hidden !important;
    position: relative !important; border-bottom: 1px solid var(--border-color);
    scrollbar-width: none;
  }
  .app-sidebar-nav::-webkit-scrollbar { display: none; }
  .app-sidebar-nav > * { flex-shrink: 0; margin-bottom: 0 !important; }
  .app-sidebar-nav > div[style*="width: 70%"] { display: none; }        /* divider is for the vertical rail */
  .app-sidebar-nav .sidebar-nav-link[title="Preferences"] { margin-left: auto; }
  .sidebar-nav-link { width: 40px; height: 40px; }
  .app-sidebar-nav .sidebar-nav-link[title="Log Out"] { width: auto; padding: 0 10px; }
  .app-shell { flex: 1 1 auto; height: auto !important; min-height: 0; }
  .app-body { min-height: 0; }

  /* Tabs: scroll sideways, never wrap; the client-only export toggle goes last so "Dashboard" is first */
  .tab-bar { padding: 0 8px; }
  .tab-bar > label.no-drag { order: 99; white-space: nowrap; flex-shrink: 0; }
  .tab { padding: 10px 12px; flex-shrink: 0; }
  .tab .tab-close { opacity: 1; padding: 6px 4px; }                      /* no hover on touch */


  /* Project header: the title used to be squeezed to a few pixels by a no-wrap row of actions */
  .project-header { padding: 10px 12px; }
  .project-header .row { flex-wrap: wrap !important; gap: 8px; }
  .project-header .row > .flex.gap:first-child { flex: 1 1 100% !important; min-width: 0 !important; }
  .project-header .row > .flex.gap:nth-child(2) { flex-wrap: wrap !important; flex-shrink: 1 !important; min-width: 0; width: 100%; row-gap: 6px; }
  .project-title-input { font-size: 16px; min-width: 0; }

  /* Overview / Animation / Stills / MOM switcher: swipe instead of clipping */
  .project-header + div { overflow-x: auto; scrollbar-width: none; padding-left: 12px !important; padding-right: 12px !important; }
  .project-header + div::-webkit-scrollbar { display: none; }
  .project-header + div > div { flex-shrink: 0; max-width: none !important; }
  .summary-strip { padding: 8px 12px; scroll-snap-type: x proximity; scroll-padding-left: 12px; }
  .summary-card { scroll-snap-align: start; }
  .content-scroll { padding: 10px 12px; }
  .dashboard-panel { margin: 10px 12px 0; padding: 12px !important; }
  .dashboard-panel > div[style*="flex: 0 0 190px"] { flex: 1 1 130px !important; min-width: 0; }
  .dashboard-panel > div[style*="min-width: 220px"] { min-width: 0 !important; flex-basis: 100% !important; }


  /* New / Edit Project: a 200px nav column beside the form can't fit a phone. Stack it: nav becomes a swipeable strip on top. */
  .modal-panel[style*="height: 800px"] { flex-direction: column !important; width: calc(100vw - 24px) !important; height: auto !important; max-height: calc(100dvh - 24px) !important; }
  .modal-panel[style*="height: 800px"] > div:first-child { width: auto !important; flex-direction: row !important; align-items: center; padding: 8px 10px !important; gap: 4px !important; overflow-x: auto; border-right: none !important; border-bottom: 1px solid var(--border-color); flex-shrink: 0; }
  .modal-panel[style*="height: 800px"] > div:first-child > div { display: none; }       /* "New Project" caption; the pane header repeats the section */
  .modal-panel[style*="height: 800px"] > div:first-child > button { width: auto !important; flex-shrink: 0; white-space: nowrap; padding: 8px 12px !important; }
  .modal-panel[style*="height: 800px"] div[style*="padding: 20px 26px 16px"] { padding: 12px 16px !important; }
  .modal-panel[style*="height: 800px"] div[style*="padding: 22px 26px"] { padding: 16px !important; }
  .modal-panel [style*="gap: 14px"] { flex-wrap: wrap; }
  .modal-panel [style*="gap: 14px"] > * { min-width: min(100%, 150px); }
  .modal-panel [style*="display: flex"][style*="gap: 8px"], .modal-panel [style*="justify-content: flex-end"] { flex-wrap: wrap; }   /* footer button rows wrap instead of poking out */


  /* Invoice line items: a 4-5 column table can't fit — each line becomes a compact card (description on top, Qty / Rate / Amount below) */
  .bl-form-grid { grid-template-columns: minmax(0, 1fr); }
  .bl-form-grid > * { min-width: 0; }
  .bl-line-table, .bl-line-table tbody { display: block; width: 100%; }
  .bl-line-table thead, .bl-line-table colgroup { display: none; }
  .bl-line-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 2px 8px; padding: 10px 0; border-bottom: 1px solid var(--bl-separator); }
  .bl-line-table tr:last-child { border-bottom: none; }
  .bl-line-table td { display: block; padding: 0 !important; min-width: 0; position: relative; }
  .bl-line-table td:nth-child(1) { grid-column: 1 / -1; }
  .bl-line-table td:nth-child(2)::before, .bl-line-table td:nth-child(3)::before, .bl-line-table td:nth-child(4)::before { display: block; font-size: 11px; color: var(--bl-gray); text-align: right; padding: 0 6px; }
  .bl-line-table td:nth-child(2)::before { content: "Qty"; }
  .bl-line-table td:nth-child(3)::before { content: "Rate"; }
  .bl-line-table td:nth-child(4)::before { content: "Amount"; }
  .bl-line-table td:nth-child(n+2) { text-align: right; }
  .bl-line-table td:nth-child(5) { align-self: end; }
  .bl-line-table input { text-align: right; background: var(--bl-gray-fill); }
  .bl-line-table td:nth-child(1) input { text-align: left; }

  /* Dashboard */
  .dashboard-kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
  .dashboard-kpi-card { padding: 12px 14px; border-radius: 12px; min-width: 0; }
  .dashboard-kpi-label { overflow-wrap: anywhere; }
  .dashboard-kpi-value { font-size: 20px; }
  .dashboard-card-grid[style] { grid-template-columns: minmax(0, 1fr) !important; justify-content: stretch; }
  .dashboard-card { width: 100% !important; aspect-ratio: auto !important; min-height: 150px; }
  .dashboard-card:hover { transform: none; box-shadow: none; }

  /* Forms: 16px stops iOS zooming the page on focus */
  .inp, select.inp, textarea.inp,
  input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { font-size: 16px; }
  .inp { padding: 9px 11px; }
  .btn { min-height: 40px; }
  .btn-icon, .btn-danger { min-width: 36px; min-height: 36px; justify-content: center; }
  .status-pill, .mom-change-status { min-height: 30px; }

  /* Overlays */
  .modal-panel { max-height: calc(100dvh - 24px); overflow-y: auto; }
  .bl-modal-box { width: 100%; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); padding: 18px; }
  .toast { left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: none; text-align: center; }

  /* Billing (Ledgerline): sidebar becomes a swipeable strip above the page */
  .billing-tab-root { flex-direction: column; }
  .bl-sidebar { width: 100%; flex: 0 0 auto; flex-direction: row; align-items: center; padding: 8px; gap: 4px; border-right: none; border-bottom: 1px solid var(--bl-separator); overflow-x: auto; overflow-y: hidden; }
  .bl-sidebar > * { flex-shrink: 0; }
  .bl-sidebar-brand { padding: 4px 8px; }
  .bl-nav-item { width: auto; margin-bottom: 0; white-space: nowrap; padding: 8px 12px; }
  .bl-page { padding: 16px 14px 40px; max-width: 100%; }
  .bl-large-title { font-size: 22px; margin-bottom: 14px; }
  .bl-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .bl-stat-card { padding: 12px 14px; min-width: 0; }
  .bl-stat-value { font-size: 18px; overflow-wrap: anywhere; }
  .bl-controls-row { gap: 8px; }
  .bl-search-bar { flex: 1 1 100%; }
  .bl-segmented { max-width: 100%; overflow-x: auto; }
  .bl-group-row { padding: 12px 14px; gap: 10px; }
  .bl-totals-inner { width: 100%; }
  .bl-row-title, .bl-row-sub { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .project-title-input { min-width: 0; flex-basis: 100%; }
  .seq-header { gap: 6px; }
  .modal-panel { padding: 14px !important; border-radius: 14px !important; }
  .bl-modal-box { border-radius: 14px; }
  .dashboard-empty { padding: 32px 14px; }
}

/* Touch screens: hover-only affordances must be visible, and no sticky hover states */
@media (hover: none) {
  .tab .tab-close { opacity: 1; }
  .game-card-sheen { display: none; }
}

/* v33.1: start-up screen buttons sit above the decorative background grid (it was drawing lines across them) */
.splash-screen .btn { position: relative; z-index: 1; }
.splash-screen .splash-grid { pointer-events: none; }

/* ── v37 dashboard: stat strip + project cards ─────────────── */
.dashboard-kpi-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; margin:0 0 20px; }
.dashboard-kpi-card { padding:14px 16px; min-height:0; border-radius:10px; }
.dashboard-kpi-label { font-size:11px; letter-spacing:.2px; }
.dashboard-kpi-value { font-size:24px; font-weight:700; line-height:1.15; margin-top:4px; font-variant-numeric:tabular-nums; }
.dashboard-kpi-sub { font-size:11px; color:var(--text-secondary); margin-top:2px; }
.dashboard-kpi-card.warn .dashboard-kpi-value { color:#E0A24A; }
.pc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:14px; }
.pc { display:flex; flex-direction:column; gap:6px; padding:14px 16px 12px; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; cursor:pointer; text-align:left;
  transition:border-color .15s ease, background .15s ease, transform .15s ease; animation:pcIn .3s ease both; }
.pc:hover { border-color:color-mix(in srgb, var(--accent) 55%, var(--border-color)); background:var(--bg-tertiary); transform:translateY(-1px); }
.pc:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.pc-opening { opacity:.6; pointer-events:none; }
.pc-top { display:flex; align-items:center; gap:8px; min-height:24px; }
.pc-type { display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); background:var(--bg-tertiary); border:1px solid var(--border-color); padding:2px 8px; border-radius:100px; max-width:60%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-fresh { width:7px; height:7px; border-radius:50%; margin-left:auto; flex-shrink:0; }
.pc-del { opacity:0; transition:opacity .15s; } .pc:hover .pc-del, .pc:focus-within .pc-del { opacity:1; }
.pc-client { font-size:11px; color:var(--text-secondary); font-weight:600; text-transform:uppercase; letter-spacing:.4px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pc-title { font-size:15px; font-weight:700; line-height:1.3; color:var(--text-primary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em; }
.pc-bar { height:6px; background:var(--bg-primary); border-radius:100px; overflow:hidden; border:1px solid var(--border-color); }
.pc-fill { height:100%; border-radius:100px; background:var(--accent); transition:width .5s ease; }
.pc-fill.done { background:#4A9E6B; } .pc-fill.wait { background:#E0A24A; } .pc-fill.idle { background:transparent; }
.pc-nums { display:flex; justify-content:space-between; font-size:11px; color:var(--text-secondary); margin-top:5px; font-variant-numeric:tabular-nums; }
.pc-nums span:first-child { color:var(--text-primary); font-weight:600; }
.pc-foot { display:flex; align-items:center; gap:8px; margin-top:4px; padding-top:9px; border-top:1px solid var(--border-color); font-size:11px; }
.pc-chip { padding:2px 9px; border-radius:100px; font-weight:600; font-size:10.5px; background:var(--bg-tertiary); color:var(--text-secondary); }
.pc-chip.run { background:rgba(99,102,241,.16); color:#A5A8F7; } .pc-chip.done { background:rgba(74,158,107,.16); color:#6CCB92; } .pc-chip.wait { background:rgba(224,162,74,.16); color:#E0A24A; }
.pc-rev { color:var(--text-secondary); } .pc-when { margin-left:auto; color:var(--text-secondary); }
@keyframes pcIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce) { .pc, .pc-fill { animation:none; transition:none; } }
@media (max-width:640px) { .dashboard-kpi-row { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .pc-grid { grid-template-columns:1fr; } .pc-del { opacity:1; } }
/* v37: widgets and stat cards keep a sensible width instead of stretching across a wide screen */
.plugin-widgets { grid-template-columns:repeat(auto-fill,minmax(260px,340px)) !important; padding-top:12px !important; }
.plugin-widget { padding:12px 14px !important; border-radius:12px !important; }
@media (min-width:641px) { .dashboard-kpi-row { grid-template-columns:repeat(auto-fit,minmax(190px,280px)); } }
.pc-grid::before { display:none; }
.pc:hover { box-shadow:0 6px 18px rgba(0,0,0,.28); }

/* v37: labelled sidebar rail (the label hides on phones, where the rail becomes a top bar) */
@media (min-width:641px) { .app-sidebar-nav { width:68px !important; gap:4px !important; } .sidebar-nav-link { flex-direction:column; gap:3px; width:56px; height:52px; border-radius:10px; } }
.sn-label { font-size:9.5px; font-weight:600; letter-spacing:.2px; line-height:1; max-width:52px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-nav-link[title="Log Out"] { height:34px; }
@media (max-width:640px) { .sn-label { display:none; } .sidebar-nav-link { flex-direction:row; } }

/* v37 project screen: header wraps instead of running off the screen; the stat strip wraps instead of hiding cards off to the right */
@media (min-width:641px) {
  .project-header > .row { flex-wrap:wrap !important; row-gap:10px; }
  .project-header > .row > .flex.gap:first-child { flex:1 1 100% !important; }
  .project-header > .row > .flex.gap:last-child { flex-wrap:wrap; flex-shrink:1 !important; row-gap:8px; }
  .project-title-input { font-size:20px; font-weight:700; }
  .summary-strip { flex-wrap:wrap; overflow-x:visible; }
  .summary-card { flex:1 1 150px; max-width:260px; }
}

/* v37 "Get started" checklist */
.gs { background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:12px; padding:14px 16px; margin-bottom:16px; max-width:760px; }
.gs-head { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.gs-title { font-size:14px; font-weight:700; } .gs-sub { font-size:11px; color:var(--text-secondary); }
.gs-list { list-style:none; display:flex; flex-direction:column; }
.gs-item { display:flex; align-items:center; gap:12px; padding:9px 0; border-top:1px solid var(--border-color); }
.gs-dot { width:22px; height:22px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border-color); }
.gs-item.done .gs-dot { background:#4A9E6B; border-color:#4A9E6B; color:#fff; } .gs-item.done .gs-name { text-decoration:line-through; color:var(--text-secondary); }
.gs-body { flex:1; min-width:0; } .gs-name { font-size:13px; font-weight:600; } .gs-text { font-size:11.5px; color:var(--text-secondary); line-height:1.4; }
.gs-btn { font-size:11.5px; padding:5px 12px; white-space:nowrap; flex-shrink:0; }
.gs-link { background:none; border:none; color:var(--accent); font-size:12px; cursor:pointer; padding:8px 0 0; text-align:left; }
@media (max-width:640px) { .gs-item { flex-wrap:wrap; } .gs-btn { margin-left:34px; } }

/* ───────── v38: Billing import (migration wizard) ───────── */
.mg-root{ max-width:860px; }
.mg-lede{ font-size:13.5px; color:var(--bl-gray); line-height:1.5; margin:-8px 0 18px; max-width:680px; }
.mg-stepper{ display:flex; gap:6px; margin:0 0 22px; flex-wrap:wrap; }
.mg-step{ display:flex; align-items:center; gap:8px; padding:7px 13px 7px 8px; border-radius:999px; background:var(--bl-gray-fill); color:var(--bl-gray); font-size:12.5px; font-weight:600; }
.mg-step-n{ width:20px; height:20px; border-radius:50%; background:var(--bl-card); display:inline-flex; align-items:center; justify-content:center; font-size:11px; }
.mg-step.active{ background:rgba(10,132,255,.16); color:var(--bl-blue); }
.mg-step.active .mg-step-n{ background:var(--bl-blue); color:#fff; }
.mg-step.done{ color:var(--bl-green); }
.mg-source{ display:inline-flex; gap:4px; padding:4px; border-radius:11px; background:var(--bl-gray-fill); margin:0 0 16px; }
.mg-source-btn{ border:none; background:transparent; color:var(--bl-gray); font:inherit; font-size:13px; font-weight:600; padding:8px 16px; border-radius:8px; cursor:pointer; }
.mg-source-btn.active{ background:var(--bl-card); color:var(--bl-label); box-shadow:0 1px 3px rgba(0,0,0,.25); }
.mg-help{ padding:16px 18px; }
.mg-help-title{ font-size:14.5px; font-weight:700; margin:0 0 6px; color:var(--bl-label); }
.mg-help-text{ font-size:13px; color:var(--bl-gray); line-height:1.5; margin:0 0 10px; }
.mg-steps{ margin:0 0 10px; padding-left:20px; font-size:13px; color:var(--bl-label); line-height:1.75; }
.mg-drop{ border:2px dashed var(--bl-separator); border-radius:14px; padding:30px 18px; text-align:center; cursor:pointer; margin:0 0 18px; transition:border-color .15s, background .15s; }
.mg-drop:hover, .mg-drop.over{ border-color:var(--bl-blue); background:rgba(10,132,255,.06); }
.mg-drop-title{ font-size:15px; font-weight:700; color:var(--bl-label); }
.mg-drop-sub{ font-size:12.5px; color:var(--bl-gray); margin-top:5px; }
.mg-error, .mg-bad{ color:var(--bl-red); }
.mg-error{ font-size:13px; margin:-6px 0 14px; }
.mg-file{ gap:12px; align-items:center; }
.mg-select{ background:var(--bl-gray-fill); color:var(--bl-label); border:1px solid var(--bl-separator); border-radius:8px; padding:7px 10px; font:inherit; font-size:12.5px; max-width:250px; }
.mg-select.bad{ border-color:var(--bl-red); }
.mg-x{ border:none; background:transparent; color:var(--bl-gray); cursor:pointer; padding:6px; border-radius:6px; }
.mg-x:hover{ color:var(--bl-red); background:var(--bl-gray-fill); }
.mg-warn-row{ padding:11px 16px; font-size:12.5px; color:#E0A030; background:rgba(255,159,10,.08); }
.mg-map-head{ cursor:pointer; }
.mg-chev{ font-size:12px; font-weight:600; color:var(--bl-blue); }
.mg-map-body{ padding:4px 16px 12px; border-top:1px solid var(--bl-separator); }
.mg-map-row{ display:grid; grid-template-columns:minmax(120px,1fr) minmax(150px,1.3fr) minmax(80px,1fr); gap:10px; align-items:center; padding:7px 0; border-bottom:1px solid var(--bl-separator); }
.mg-map-row:last-child{ border-bottom:none; }
.mg-map-label{ font-size:13px; color:var(--bl-label); }
.mg-req{ font-size:10.5px; color:var(--bl-red); margin-left:4px; }
.mg-sample{ font-size:12px; color:var(--bl-gray); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mg-count{ gap:12px; }
.mg-check{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; font-size:13.5px; }
.mg-count-n{ margin-left:auto; font-size:13px; color:var(--bl-label); }
.mg-dim{ color:var(--bl-gray); font-size:12.5px; }
.mg-note{ font-size:12.5px; color:var(--bl-gray); margin:-8px 2px 20px; }
.mg-issues{ max-height:360px; overflow:auto; }
.mg-issue{ gap:12px; align-items:flex-start; }
.mg-lv{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:7px; white-space:nowrap; margin-top:2px; }
.mg-lv-error{ background:rgba(255,69,58,.16); color:var(--bl-red); }
.mg-lv-warn{ background:rgba(255,159,10,.16); color:#E0A030; }
.mg-lv-info{ background:var(--bl-gray-fill); color:var(--bl-gray); }
.mg-doc{ gap:12px; }
.mg-amt{ min-width:96px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; font-size:13px; }
.mg-nav{ display:flex; align-items:center; gap:10px; margin:22px 0 40px; position:sticky; bottom:0; padding:12px 0; background:var(--bl-bg, transparent); }
.mg-run{ padding:26px 24px; text-align:center; }
.mg-run-title{ font-size:19px; font-weight:700; margin:0 0 10px; color:var(--bl-label); }
.mg-run-text{ font-size:13.5px; color:var(--bl-gray); line-height:1.5; margin:10px auto; max-width:520px; }
.mg-bar{ height:8px; border-radius:6px; background:var(--bl-gray-fill); overflow:hidden; margin:14px auto 12px; max-width:420px; }
.mg-bar-fill{ height:100%; background:var(--bl-blue); border-radius:6px; transition:width .25s; }
.mg-done-icon{ width:46px; height:46px; margin:0 auto 10px; border-radius:50%; background:rgba(52,199,89,.18); color:var(--bl-green); display:flex; align-items:center; justify-content:center; }
.mg-actions{ display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap; }
@media (max-width:640px){
  .mg-map-row{ grid-template-columns:1fr; gap:4px; }
  .mg-file{ flex-wrap:wrap; }
  .mg-select{ max-width:100%; }
}