/*
Shared app shell: top nav + card framing around each page's own content.
Included by index.html, projects.html, and prices.html. Never put
table/grid-specific rules here — those stay page-local so the dense,
Excel-like data tables are untouched by shell changes.
*/

:root {
  --accent: #e48600;
  --page-bg: #f5f6f8;
  --card-bg: #ffffff;
  --card-radius: 10px;
  --card-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.05);
}

body { background: var(--page-bg); }

/* ── Top navigation ── */
.topnav {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
  display: flex; align-items: center; gap: 18px;
  padding: 12px 24px;
}
.topnav-logo { height: 28px; width: auto; display: block; }
.topnav-tabs { display: flex; gap: 4px; }
.topnav-tab {
  display: inline-block; padding: 7px 18px; border-radius: 6px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: #555; transition: background .15s, color .15s;
}
.topnav-tab:hover { background: #f0f1f3; color: #222; }
.topnav-tab.active { background: var(--accent); color: #fff; }
.topnav-tab.active:hover { background: var(--accent); }

/* ── Profile circle + its dropdown (far right of the nav) ──
   Settings lives in here rather than as a tab (real request 2026-08-06).
   margin-left:auto pushes it to the right edge without needing a spacer
   element, since .topnav is already a flex row. */
.topnav-profile { position: relative; margin-left: auto; }
.profile-circle {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #d8dbe0; background: #f0f1f3; color: #5a6472;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; transition: background .15s, border-color .15s;
}
.profile-circle:hover { background: #e4e6ea; border-color: #c3c8d0; }
.profile-circle.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.profile-initials { font-size: 12px; font-weight: 700; letter-spacing: .02em; }
/* Stroked, not filled — a filled silhouette reads much heavier than the
   text tabs beside it. */
.profile-glyph {
  width: 19px; height: 19px; fill: none;
  stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

.profile-menu {
  display: none;
  position: absolute; top: calc(100% + 8px); right: 0;
  min-width: 168px; padding: 5px;
  background: #fff; border-radius: 8px;
  border: 1px solid #e6e8ec;
  box-shadow: 0 6px 22px rgba(0,0,0,0.11);
}
.profile-menu.open { display: block; }
.profile-menu-item {
  display: block; padding: 8px 12px; border-radius: 5px;
  font-size: 13px; font-weight: 500; text-decoration: none; color: #444;
  white-space: nowrap;
}
.profile-menu-item:hover { background: #f0f1f3; color: #111; }
.profile-menu-item.active { color: var(--accent); font-weight: 600; }

/* Who am I? — the identity block at the top of the dropdown. Shows display
   name plus "username · Editor/View only", so someone who can't find an Edit
   button can see why (§18). */
.profile-identity { padding: 8px 12px 7px; }
.profile-identity-name {
  font-size: 13px; font-weight: 600; color: #222;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
.profile-identity-sub { font-size: 11px; color: #888; margin-top: 1px; }
.profile-menu-sep { height: 1px; background: #eceef1; margin: 4px 0; }

/* Sign out is a <button> (it POSTs, it isn't a link) — strip the button
   chrome so it sits flush with the anchor items above it. */
button.profile-menu-item {
  width: 100%; text-align: left; border: none; background: none;
  font-family: inherit; cursor: pointer;
}
button.profile-menu-item:disabled { color: #aaa; cursor: default; }

/* ── View-only lock (§18.5) ──
   nav.js sets readOnly/disabled on every form control for viewers. Style them
   to read as "this is a record" rather than "this control is broken": browsers
   grey out disabled elements hard, which on a whole page of fields looks like a
   rendering failure. Keeping full-contrast text also matters because a viewer
   is here to READ these values. */
body.viewer input[readonly], body.viewer textarea[readonly],
body.viewer input:disabled, body.viewer select:disabled {
  background: transparent;
  border-color: #e9ecef;
  color: #333;
  -webkit-text-fill-color: #333;   /* Safari ignores color on disabled inputs */
  opacity: 1;
  cursor: default;
}
/* No focus highlight on locked controls (real request 2026-08-07). Every page
   styles :focus with a blue border and pale-blue fill to say "you can type
   here" — which is actively misleading on a field that can't be typed into.

   The fields stay FOCUSABLE on purpose: clicking to select text focuses an
   input, and losing that would take copy-paste with it, which is the reason
   readOnly was chosen over disabled in the first place. So this suppresses the
   appearance of focus, not focus itself.

   !important is deliberate. These rules live in shell.css, which loads BEFORE
   each page's own <style> block, so an equally-specific page rule (e.g.
   settings.html's `.item-row input[type=text]:focus`) would otherwise win the
   tie on source order. */
body.viewer input[readonly]:focus,
body.viewer textarea[readonly]:focus,
body.viewer input:disabled:focus,
body.viewer select:disabled:focus,
body.viewer input[readonly]:focus-visible,
body.viewer textarea[readonly]:focus-visible {
  outline: none !important;
  border-color: #e9ecef !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Search/sort/filter controls opt out via data-viewer-ok — they stay fully
   interactive, so keep them looking interactive too, focus ring included. */
body.viewer [data-viewer-ok] {
  background: #fff;
  border-color: #ccc;
  cursor: auto;
}

/* ── Cards (wraps each page's existing .block sections) ── */
.block {
  background: var(--card-bg);
  border: none;
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  margin-bottom: 18px;
  padding: 18px 20px;
}
.block-title {
  font-size: 11px; font-weight: bold; text-transform: uppercase;
  letter-spacing: .06em; color: #777; margin-bottom: 10px;
  border-bottom: 1px solid #eee; padding-bottom: 6px;
}

/* ── Empty-state placeholder (e.g. Projects stub) ── */
.empty-state { text-align: center; padding: 60px 20px; color: #888; }
.empty-state h2 { font-size: 20px; color: #333; margin-bottom: 8px; }
.empty-state p { font-size: 14px; }