/* Franchise Portal V32.0 — Front Office OS foundation
   Presentation-only primitives. Existing page logic and hydration remain authoritative. */
:root {
  --fp-os-content-max: 1680px;
  --fp-os-phone-safe: 132px;
  --fp-os-edge: clamp(14px, 2vw, 32px);
  --fp-os-gap: clamp(12px, 1.4vw, 22px);
  --fp-os-radius: 18px;
  --fp-os-glass: rgba(8, 14, 25, .74);
  --fp-os-glass-strong: rgba(8, 14, 25, .88);
  --fp-os-border: rgba(255,255,255,.13);
  --fp-os-text: #f7f9fc;
  --fp-os-muted: rgba(235,241,249,.72);
  --fp-os-shadow: 0 18px 55px rgba(0,0,0,.32);
}

html.fp-os-enabled { color-scheme: dark; }
html.fp-os-enabled body {
  color: var(--fp-os-text);
  min-height: 100vh;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* The safe area reserves room for the global phone while leaving office backgrounds visible. */
html.fp-os-enabled body:not(.fp-os-no-phone-safe) {
  padding-right: max(var(--fp-os-edge), env(safe-area-inset-right));
  padding-bottom: max(var(--fp-os-phone-safe), env(safe-area-inset-bottom));
}

.fp-os-shell {
  width: min(calc(100% - (var(--fp-os-edge) * 2)), var(--fp-os-content-max));
  margin-inline: auto;
  padding-block: var(--fp-os-edge);
}
.fp-os-glass,
.fp-os-panel,
.fp-os-card {
  background: linear-gradient(145deg, rgba(15,23,38,.82), var(--fp-os-glass));
  border: 1px solid var(--fp-os-border);
  border-radius: var(--fp-os-radius);
  box-shadow: var(--fp-os-shadow);
  -webkit-backdrop-filter: blur(15px) saturate(120%);
  backdrop-filter: blur(15px) saturate(120%);
}
.fp-os-panel { padding: clamp(16px, 2vw, 28px); }
.fp-os-card { padding: clamp(14px, 1.5vw, 22px); }
.fp-os-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--fp-os-gap);
}
.fp-os-workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--fp-os-gap);
}
.fp-os-title { margin: 0; color: var(--fp-os-text); line-height: 1.1; }
.fp-os-muted { color: var(--fp-os-muted); }
.fp-os-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; }

/* Reusable controls; pages opt in with these classes during migration. */
.fp-os-button {
  min-height: 42px;
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--fp-os-border);
  background: rgba(255,255,255,.08);
  color: var(--fp-os-text);
  font: inherit;
  font-weight: 750;
  cursor: pointer;
}
.fp-os-button:hover { background: rgba(255,255,255,.13); transform: translateY(-1px); }
.fp-os-table-wrap { overflow:auto; border-radius:14px; border:1px solid var(--fp-os-border); }
.fp-os-table { width:100%; border-collapse:separate; border-spacing:0; }
.fp-os-table th { position:sticky; top:0; z-index:1; background:rgba(8,14,25,.96); }
.fp-os-table th,.fp-os-table td { padding:14px 16px; text-align:left; border-bottom:1px solid rgba(255,255,255,.08); }
.fp-os-table tbody tr:hover { background:rgba(255,255,255,.045); }
.fp-os-hidden { display:none !important; }

/* Common portal phone selectors receive a guaranteed top layer and safe edge. */
#fpGlobalPhone,
.fp-global-phone,
.fp-phone-launcher,
[data-fp-phone-launcher],
.global-phone-button {
  position: fixed !important;
  right: max(18px, env(safe-area-inset-right)) !important;
  bottom: max(18px, env(safe-area-inset-bottom)) !important;
  z-index: 2147482000 !important;
}

/* Prevent page content from being permanently hidden under fixed bottom controls. */
html.fp-os-enabled main,
html.fp-os-enabled .page,
html.fp-os-enabled .workspace,
html.fp-os-enabled .workspace-shell {
  scroll-margin-bottom: var(--fp-os-phone-safe);
}

@media (max-width: 900px) {
  :root { --fp-os-phone-safe: 112px; --fp-os-edge: 12px; }
  html.fp-os-enabled body:not(.fp-os-no-phone-safe) { padding-right: 0; }
  .fp-os-shell { width: calc(100% - 20px); }
  .fp-os-summary-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 560px) {
  .fp-os-summary-grid { grid-template-columns: 1fr; }
  .fp-os-table th,.fp-os-table td { padding:12px; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-os-button { transition:none !important; transform:none !important; }
}

/* V32.2 — shared transparent Front Office OS visual layer */
:root{
  --fp-os-glass:rgba(7,13,23,.48);
  --fp-os-glass-strong:rgba(7,13,23,.66);
  --fp-os-panel-bg:rgba(12,20,33,.46);
  --fp-os-card-bg:rgba(17,27,42,.40);
  --fp-os-table-bg:rgba(7,13,22,.58);
  --fp-os-border:rgba(255,255,255,.11);
  --fp-os-shadow:0 18px 50px rgba(0,0,0,.24);
}
.fp-os-glass,.fp-os-panel,.fp-os-card{
  background:linear-gradient(145deg,rgba(19,29,45,.48),var(--fp-os-glass));
  -webkit-backdrop-filter:blur(12px) saturate(118%);
  backdrop-filter:blur(12px) saturate(118%);
}
.fp-os-panel{background:linear-gradient(145deg,rgba(15,25,40,.52),var(--fp-os-panel-bg));}
.fp-os-card{background:linear-gradient(145deg,rgba(22,34,51,.44),var(--fp-os-card-bg));}
.fp-os-table-wrap{background:var(--fp-os-table-bg);overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable;}
.fp-os-table th{background:rgba(7,13,22,.90);backdrop-filter:blur(12px)}
html.fp-os-enabled body.fp-os-migrated .page{width:min(calc(100% - (var(--fp-os-edge)*2)),var(--fp-os-content-max));margin-inline:auto;padding:var(--fp-os-edge);}
html.fp-os-enabled body.fp-os-migrated .top,
html.fp-os-enabled body.fp-os-migrated .shell,
html.fp-os-enabled body.fp-os-migrated .panel,
html.fp-os-enabled body.fp-os-migrated .card,
html.fp-os-enabled body.fp-os-migrated .workspace-shell,
html.fp-os-enabled body.fp-os-migrated .gm-card,
html.fp-os-enabled body.fp-os-migrated .gm-hero,
html.fp-os-enabled body.fp-os-migrated .gm-brief{
  border-color:var(--fp-os-border)!important;
  box-shadow:var(--fp-os-shadow)!important;
  -webkit-backdrop-filter:blur(12px) saturate(118%)!important;
  backdrop-filter:blur(12px) saturate(118%)!important;
}
html.fp-os-enabled body.fp-os-migrated .top,
html.fp-os-enabled body.fp-os-migrated .shell,
html.fp-os-enabled body.fp-os-migrated .workspace-shell{background:rgba(7,13,23,.50)!important;}
html.fp-os-enabled body.fp-os-migrated .panel,
html.fp-os-enabled body.fp-os-migrated .card,
html.fp-os-enabled body.fp-os-migrated .gm-card,
html.fp-os-enabled body.fp-os-migrated .gm-brief{background:rgba(12,20,33,.46)!important;}
html.fp-os-enabled body.fp-os-migrated .table-wrap{background:rgba(7,13,22,.56);overscroll-behavior:contain;scrollbar-gutter:stable;}
html.fp-os-enabled body.fp-os-migrated table tbody tr{content-visibility:auto;contain-intrinsic-size:52px;}
html.fp-os-enabled body.fp-os-migrated img{content-visibility:auto;}
.fp-os-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.055);border-radius:10px;min-height:18px}
.fp-os-skeleton:after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:fpOsShimmer 1.2s infinite}
@keyframes fpOsShimmer{100%{transform:translateX(100%)}}
@media(max-width:900px){html.fp-os-enabled body.fp-os-migrated .page{width:calc(100% - 16px);padding:8px}}