/* Opright workspace design system
 * This file is loaded last so signed-in screens keep one dependable layout even
 * when feature modules mount after the initial page render.
 */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

#appView,
#modal,
#guideRoot {
  --ui-ink: #010510;
  --ui-green: #0877ff;
  --ui-green-dark: #2f7d3e;
  --ui-canvas: #f4f7fc;
  --ui-surface: #fff;
  --ui-surface-soft: #f8faf8;
  --ui-border: #e2e9e3;
  --ui-muted: #718078;
  --ui-radius: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow: 0 10px 30px rgb(1 5 16 / 6%);
  --ui-shadow-strong: 0 24px 70px rgb(1 5 16 / 18%);
}

body:has(#appView:not(.hidden)) {
  overflow-x: hidden;
  overflow-x: clip;
  background:
    radial-gradient(circle at 7% 0%, rgb(8 119 255 / 5%), transparent 27rem),
    var(--ui-canvas);
  color: var(--ui-ink);
}

#appView {
  width: 100%;
  overflow-x: hidden;
  overflow-x: clip;
}

body:has(#appView:not(.hidden)),
#appView :is(button, input, select, textarea),
#modal :is(button, input, select, textarea) {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
}

#appView *,
#modal *,
#guideRoot * {
  min-width: 0;
}

#appView :is(p, span, strong, small, label, h1, h2, h3, h4),
#modal :is(p, span, strong, small, label, h1, h2, h3, h4) {
  overflow-wrap: anywhere;
}

/* Workspace shell */
#appView .top {
  position: sticky;
  top: 0;
  z-index: 400;
  height: calc(70px + var(--workspace-safe-top, 0px));
  padding: calc(10px + var(--workspace-safe-top, 0px)) clamp(15px, 3vw, 28px) 10px;
  border-bottom: 1px solid rgb(226 233 227 / 86%);
  background: rgb(255 255 255 / 92%);
  box-shadow: 0 1px 0 rgb(1 5 16 / 2%);
  backdrop-filter: blur(20px) saturate(1.2);
}

#appView .workspaceBrand {
  gap: 10px;
}

#appView .workspaceBrand > img {
  width: 40px;
  height: 40px;
  max-width: 40px;
  flex-basis: 40px;
  border-radius: 11px;
}

#appView .workspaceBrandCopy {
  gap: 2px;
}

#appView .workspaceBrandCopy > span {
  color: #829087;
  font-size: 8px;
  letter-spacing: .14em;
}

#appView .workspaceBrandCopy > strong {
  max-width: min(46vw, 360px);
  font-size: 15px;
  letter-spacing: -.25px;
}

#appView .workspaceHeaderActions {
  gap: 8px;
}

#appView .workspaceLivePill {
  padding: 6px 9px;
  font-size: 9px;
}

#appView .workspaceHeaderButton {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  box-shadow: 0 3px 10px rgb(1 5 16 / 4%);
}

#appView main {
  width: min(100%, 1060px);
  max-width: 1060px;
  margin: 0 auto;
  padding: 23px clamp(16px, 3vw, 28px) calc(116px + env(safe-area-inset-bottom, 0px));
}

#appView .view {
  min-width: 0;
}

#appView .view > .section:first-child,
#appView .settingsDetailHeader {
  margin: 2px 0 17px;
}

#appView .section {
  gap: 12px;
  margin: 17px 0 10px;
}

#appView .section h1,
#appView .settingsDetailHeader h1,
#appView .plannerTitleCopy h1,
#appView #home .homeTitleCopy h1 {
  margin: 0;
  color: var(--ui-ink);
  font-size: clamp(27px, 4vw, 34px);
  font-weight: 920;
  letter-spacing: -1px;
  line-height: 1.08;
}

#appView .section h2,
#appView .plannerUpcomingHeader h2,
#appView #home .homeRecentHeader h2 {
  margin: 3px 0 0;
  font-size: clamp(20px, 3vw, 24px);
  font-weight: 900;
  letter-spacing: -.55px;
  line-height: 1.15;
}

#appView :is(.panel, .hero, .card, .form, .invoice) {
  border-color: var(--ui-border);
}

#appView .panel,
#sheet .panel {
  gap: 13px;
  padding: clamp(15px, 2.3vw, 20px);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: 0 5px 20px rgb(1 5 16 / 3.5%);
}

#appView .panel + .panel {
  margin-top: 12px;
}

#appView .panel > h3,
#sheet .panel > h3,
#appView .contextInfoTitle > h3,
#sheet .contextInfoTitle > h3 {
  margin: 0;
  color: var(--ui-ink);
  font-size: 17px;
  font-weight: 900;
  letter-spacing: -.25px;
  line-height: 1.2;
}

#appView .hint,
#sheet .hint {
  color: var(--ui-muted);
  font-size: 11px;
  line-height: 1.52;
}

/* Controls */
#appView :is(.primary, .secondary, .success, .danger),
#sheet :is(.primary, .secondary, .success, .danger) {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  padding: 9px 13px;
  border-radius: 11px;
  font-size: 11px;
  font-weight: 850;
  line-height: 1.15;
}

#appView .primary,
#sheet .primary {
  background: var(--ui-ink);
  box-shadow: 0 6px 16px rgb(1 5 16 / 12%);
}

#appView .secondary,
#sheet .secondary {
  border: 1px solid var(--ui-border);
  background: #f1f5f2;
}

#appView .primary.big,
#sheet .primary.big {
  min-height: 46px;
  padding: 11px 15px;
}

#appView :is(input, select, textarea),
#sheet :is(input, select, textarea) {
  max-width: 100%;
  border-color: #dce5de;
  border-radius: 11px;
  background: #fbfdff;
  color: var(--ui-ink);
  font-size: 12px;
  line-height: 1.35;
  outline: none;
}

#appView :is(input, select),
#sheet :is(input, select) {
  min-height: 48px;
}

#appView :is(input, select, textarea):focus,
#sheet :is(input, select, textarea):focus {
  border-color: #7db879;
  background: #fff;
  box-shadow: 0 0 0 4px rgb(8 119 255 / 11%);
}

#appView :is(.form label, .panel label),
#sheet :is(.form label, .panel label) {
  color: #5f6f67;
  font-size: 11px;
  font-weight: 800;
}

#appView .search {
  min-height: 50px;
  margin-bottom: 12px;
  padding-inline: 15px;
  border-color: var(--ui-border);
  border-radius: 13px;
  box-shadow: 0 4px 14px rgb(1 5 16 / 3%);
}

#appView .cards {
  gap: 9px;
}

#appView .card {
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 4px 15px rgb(1 5 16 / 3.5%);
}

#appView .card:hover {
  border-color: #d1ddd3;
}

#appView .card strong {
  font-size: 13px;
  line-height: 1.28;
}

#appView .card span {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.4;
}

/* Small, correctly aligned information controls. */
#appView .contextInfoTitle,
#sheet .contextInfoTitle {
  gap: 5px;
}

#appView span.contextInfo,
#sheet span.contextInfo,
#appView button.contextInfoTrigger,
#sheet button.contextInfoTrigger {
  width: 16px;
  height: 16px;
  flex-basis: 16px;
}

#appView span.contextInfoMark,
#sheet span.contextInfoMark {
  width: 14px;
  height: 14px;
  border-width: 1.2px;
  font-size: 8px;
}

#appView .contextInfoTrigger::before,
#sheet .contextInfoTrigger::before {
  inset: -14px;
}

/* Bottom navigation */
#appView .tabs {
  z-index: 4200;
  display: grid;
  grid-auto-columns: minmax(0, 1fr);
  grid-auto-flow: column;
  height: calc(70px + env(safe-area-inset-bottom, 0px));
  min-height: 70px;
  padding: 4px max(7px, env(safe-area-inset-right, 0px)) env(safe-area-inset-bottom, 0px) max(7px, env(safe-area-inset-left, 0px));
  border-top-color: rgb(219 228 221 / 88%);
  background: rgb(255 255 255 / 94%);
  box-shadow: 0 -8px 28px rgb(1 5 16 / 5%);
}

#appView .tabs button {
  display: grid;
  width: auto;
  max-width: none;
  min-height: 62px;
  align-content: center;
  justify-items: center;
  gap: 3px;
  padding: 4px 2px;
  border-radius: 11px;
  color: #77857e;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

#appView .tabs button.active {
  background: #f2f8f1;
  color: #39903c;
}

#appView .tabs span {
  margin: 0;
  font-size: 9px;
  font-weight: 800;
  line-height: 1.1;
}

/* Scope selectors stay in their own toolbar instead of floating over content. */
#appView .involvementScope {
  position: relative;
  display: inline-flex;
  max-width: 100%;
}

/* Keep the descriptive scope copy available to assistive technology without
 * letting a delayed feature stylesheet turn it into visible toolbar text. */
#appView .scopeLabel {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

#appView .scopeSwitch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid #dbe5f2;
  border-radius: 11px;
  background: #eef3f8;
}

#appView .scopeSwitch button {
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #68766e;
  font-size: 9px;
  font-weight: 850;
  white-space: nowrap;
}

#appView .scopeSwitch button.active {
  background: #fff;
  color: var(--ui-ink);
  box-shadow: 0 2px 7px rgb(1 5 16 / 10%);
}

/* Home */
#appView #home .homePageHeader {
  margin: 1px 0 16px;
}

#appView #home .homeTitleCopy > p {
  display: none;
}

#appView #home .homeDateBadge {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 9px;
}

#appView #home .homeCommandDeck {
  margin-bottom: 12px;
  padding: clamp(18px, 3vw, 24px);
  border-radius: 21px;
  box-shadow: 0 15px 34px rgb(1 5 16 / 13%);
}

#appView #home #heroGreeting {
  font-size: clamp(23px, 4vw, 32px);
}

#appView #home .homeHeroSubtitle {
  font-size: 10px;
}

#appView #home .homeHeroActions {
  margin-top: 17px;
}

#appView #home .homeMetrics {
  gap: 8px;
  margin-bottom: 11px;
}

#appView #home .homeMetric {
  gap: 6px;
  padding: 12px;
  border-radius: 15px;
}

#appView #home .homeMetric b {
  font-size: clamp(18px, 4vw, 24px);
}

#appView #home .homeRoutePanel {
  margin-block: 12px 15px;
  border-radius: 18px;
}

#appView #home .homeRecentHeader {
  align-items: flex-end;
}

#appView #home .homeRecentTools {
  display: flex;
  align-items: center;
  gap: 6px;
}

#appView #home #homeScope {
  width: min(148px, 100%);
}

#appView #home #homeScope :is(.involvementScope, .scopeSwitch) {
  width: 100%;
}

/* Schedule */
#appView #calendar .plannerPageHeader {
  align-items: flex-end;
  margin-bottom: 16px;
}

#appView #calendar .plannerTitleCopy > p {
  display: none;
}

#appView #calendar .plannerCreateJob {
  min-height: 42px;
  padding-inline: 13px;
}

#appView #calendar .plannerCommandDeck {
  padding: clamp(17px, 3vw, 22px);
  border-radius: 21px;
  box-shadow: 0 15px 34px rgb(1 5 16 / 13%);
}

#appView #calendar .plannerSelectedDate {
  font-size: clamp(20px, 3.5vw, 27px);
}

#appView #calendar .plannerCommandActions {
  align-items: flex-end;
  gap: 6px;
}

#appView #calendar #calendarScope {
  position: static;
  display: block;
}

#appView #calendar #calendarScope .scopeSwitch {
  border-color: rgb(255 255 255 / 16%);
  background: rgb(255 255 255 / 8%);
}

#appView #calendar #calendarScope .scopeSwitch button {
  color: #cad8d1;
}

#appView #calendar #calendarScope .scopeSwitch button.active {
  background: #fff;
  color: var(--ui-ink);
}

#appView #calendar .plannerDateControls {
  grid-template-columns: 39px minmax(0, 1fr) 39px;
  gap: 7px;
  margin-top: 16px;
}

#appView #calendar :is(.plannerDayArrow, .plannerDateField input) {
  height: 43px;
  min-height: 43px;
  border-radius: 10px;
}

#appView #calendar .plannerWeekStrip {
  gap: 4px;
  margin-top: 13px;
}

#appView #calendar .plannerWeekDay {
  min-height: 58px;
  border-radius: 10px;
}

#appView #calendar .plannerDaySnapshot {
  margin-top: 14px;
  padding-top: 13px;
}

#appView #calendar .plannerSchedule {
  min-height: 0;
  padding: 13px 14px;
  border-radius: 15px;
  background: #fff;
}

#appView #calendar .plannerUpcomingHeader {
  margin-top: 20px;
}

#appView #calendar .plannerGroup {
  border-radius: 17px;
}

/* Customers and invoices */
#appView .customerHeaderActions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 7px;
}

#appView #customers > .section:first-child > h1 {
  flex: 1 1 auto;
  white-space: nowrap;
}

#appView #invoices .invoicesPageHeader {
  align-items: flex-end;
}

#appView #invoicesList {
  gap: 15px;
}

#appView .invoiceDateGroup {
  display: grid;
  gap: 7px;
}

#appView .invoiceDateHeading {
  padding: 4px 2px 0;
  color: #748279;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .04em;
}

#appView .invoiceDateCards {
  display: grid;
  gap: 8px;
}

#appView :is(.invoicePaidTint, .invoiceUnpaidTint),
#appView #invoicesList .invoiceCard:has(.paid),
#appView #invoicesList .invoiceCard:has(.unpaid),
#appView #recent .invoiceCard:has(.paid),
#appView #recent .invoiceCard:has(.unpaid) {
  position: relative;
  overflow: hidden;
  border-color: var(--ui-border) !important;
  background: #fff !important;
}

#appView #invoicesList .invoiceCard::before,
#appView #recent .invoiceCard::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  border-radius: 3px;
  background: #b87373;
  content: "";
}

#appView #invoicesList .invoiceCard:has(.paid)::before,
#appView #recent .invoiceCard:has(.paid)::before {
  background: #67a96f;
}

#appView .invoiceCard .paid,
#appView .invoiceCard .unpaid {
  display: inline-flex;
  width: max-content;
  margin-left: auto;
  padding: 3px 6px;
  border-radius: 999px;
  font-size: 8px;
  font-weight: 900;
}

#appView .invoiceCard .paid {
  background: #e7f4e8;
}

#appView .invoiceCard .unpaid {
  background: #faecec;
}

/* Settings hub */
#appView .settingsHubIntro {
  margin-bottom: 15px;
  padding: 16px;
  border-radius: 18px;
  box-shadow: 0 12px 28px rgb(1 5 16 / 12%);
}

#appView .settingsHubIntro h2 {
  font-size: 20px;
}

#appView .settingsSearch {
  margin: 0 0 16px;
  padding: 11px;
  border-radius: 15px;
  box-shadow: 0 5px 18px rgb(1 5 16 / 4%);
}

#appView .settingsSearchField {
  min-height: 47px;
  border-radius: 12px;
}

#appView .settingsHubCategory {
  margin-bottom: 4px;
  gap: 7px;
}

#appView .settingsHubCategoryGrid,
#appView .settingsHubGrid {
  gap: 8px;
}

#appView .settingsHubCard {
  min-height: 78px;
  grid-template-columns: 38px minmax(0, 1fr) 14px;
  gap: 9px;
  padding: 11px;
  border-radius: 15px;
  box-shadow: 0 4px 14px rgb(1 5 16 / 3%);
}

#appView .settingsHubIcon {
  width: 38px;
  height: 38px;
  border-radius: 11px;
}

#appView .settingsHubCopy strong {
  font-size: 12px;
}

#appView .settingsHubCopy span {
  font-size: 9px;
}

#appView .settingsDetailHeader {
  display: grid;
  gap: 3px;
}

#appView .settingsHubBack {
  width: max-content;
  margin: 0 0 5px;
  padding: 7px 10px;
  border-radius: 10px;
  background: #eef6ec;
  color: #318341;
  font-size: 11px;
}

/* Team and access: externalized so it cannot collapse into a text block. */
#appView #teamManagementPanel {
  display: grid;
  gap: 12px;
}

#appView .teamPanelHead,
#appView .teamMemberTop,
#sheet .teamModalActions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#appView .teamSummary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin: 0;
}

#appView .teamSummaryTile {
  padding: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: #f5f8f6;
}

#appView .teamSummaryTile :is(b, span),
#appView .teamMemberName :is(strong, span) {
  display: block;
}

#appView .teamSummaryTile b {
  font-size: 18px;
}

#appView .teamSummaryTile span {
  margin-top: 2px;
  color: var(--ui-muted);
  font-size: 9px;
}

#appView .teamList {
  display: grid;
  gap: 8px;
}

#appView .teamMember {
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: #fff;
}

#appView .teamMemberTop {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: start;
}

#appView .teamAvatar {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: #e8f1eb;
  color: var(--ui-ink);
  font-size: 11px;
  font-weight: 900;
}

#appView .teamMemberMeta {
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.4;
  word-break: break-word;
}

#appView .teamBadges,
#appView .paymentMethodBadges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

#appView .teamBadge,
#appView .paymentMethodBadge {
  display: inline-flex !important;
  width: max-content;
  max-width: 100%;
  padding: 3px 6px;
  border-radius: 999px;
  background: #e9efeb;
  color: var(--ui-ink) !important;
  font-size: 8px !important;
  font-weight: 850;
}

#appView .teamBadge.pending { background: #fff3d7; color: #845a00 !important; }
#appView .teamBadge.inactive { background: #fbe6e6; color: #963f3f !important; }
#appView .teamBadge.access { background: #eef2f7; color: #42536a !important; }

#appView .teamManage {
  min-height: 36px !important;
  padding: 7px 9px !important;
  font-size: 9px !important;
}

#sheet .teamAccessEditor,
#sheet .teamPermissionChecks {
  display: grid;
  gap: 9px;
}

#sheet .teamAccessIntro {
  padding: 11px;
  border-radius: 11px;
  background: #eef4f0;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.5;
}

#sheet .teamAccessGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#sheet .teamPermissionChecks {
  padding: 11px;
  border: 1px solid var(--ui-border);
  border-radius: 13px;
  background: #fbfdff;
}

#sheet .teamPermissionToggle {
  display: flex !important;
  align-items: flex-start;
  gap: 8px;
  color: var(--ui-ink) !important;
  font-size: 10px !important;
  line-height: 1.4;
}

#sheet .teamPermissionToggle input {
  width: 18px !important;
  min-height: 18px;
  margin: 1px 0 0 !important;
  flex: 0 0 18px;
}

#sheet .teamDangerZone {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ui-border);
}

/* Crew controls and distinct color choices. */
#appView #crewManagementPanel {
  gap: 12px;
}

#appView .crewPanelHead,
#appView .crewBoardHead,
#appView .crewCardTop,
#appView .crewBoardCardHead,
#appView .crewJobHead {
  gap: 10px;
}

#appView .crewSummary article,
#appView .crewCard,
#appView .crewBoardCard {
  border-color: var(--ui-border);
  background: #fff;
}

#appView .crewCard,
#appView .crewBoardCard {
  border-radius: 14px;
}

#sheet .crewColorPicker {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

#sheet .crewColorPicker label {
  display: grid !important;
  min-height: 48px;
  place-items: center;
  margin: 0 !important;
  padding: 7px !important;
  border: 1px solid var(--ui-border);
  border-radius: 11px;
  background: #fff;
}

#sheet .crewTone--1 { --crew-tone: #2f7664; }
#sheet .crewTone--2 { --crew-tone: #3b6ea8; }
#sheet .crewTone--3 { --crew-tone: #7a5aa6; }
#sheet .crewTone--4 { --crew-tone: #b66a2b; }
#sheet .crewTone--5 { --crew-tone: #b24c63; }
#sheet .crewTone--6 { --crew-tone: #52616f; }

#sheet .crewColorPicker .crewColorSwatch {
  display: block;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: var(--crew-tone);
}

#sheet .crewColorPicker input:checked + .crewColorSwatch {
  box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--ui-ink);
}

#sheet .crewMemberChoices {
  gap: 7px;
}

#sheet .crewMemberChoice {
  border-radius: 11px;
  background: #f8faf9;
}

/* Payments: reliable external layout for every dynamically mounted section. */
#appView #paymentSettingsPanel {
  display: grid;
  gap: 13px;
}

#appView .paymentOverview {
  display: grid;
  gap: 13px;
  padding: clamp(17px, 3vw, 21px);
  overflow: hidden;
  border-radius: 19px;
  background: linear-gradient(145deg, #010510, #071b3f);
  color: #fff;
  box-shadow: 0 14px 30px rgb(1 5 16 / 13%);
}

#appView .paymentOverviewHead,
#appView .paymentSettingsHead,
#appView .stripeSetupHead,
#appView .paymentMethodTop,
#appView .paymentActivityRow {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#appView .paymentEyebrow {
  display: block;
  margin-bottom: 4px;
  color: #65c8ff;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .14em;
}

#appView .paymentOverview h3,
#appView .paymentSettingsHead h3,
#appView .paymentSection h3,
#appView .stripeSetupHead h3 {
  margin: 0;
  font-size: 15px;
  font-weight: 900;
}

/* Headings on branded dark surfaces must never inherit the workspace ink. */
#appView #home .homeCommandDeck :is(h1, h2, h3, h4),
#appView #calendar .plannerCommandDeck :is(h1, h2, h3, h4),
#appView .paymentOverview :is(h1, h2, h3, h4),
#appView .settingsHubIntro :is(h1, h2, h3, h4),
#appView .workHero :is(h1, h2, h3, h4) {
  color: #fff;
}

#appView .paymentOverview p,
#appView .stripeSetupHead p {
  margin: 4px 0 0;
  color: #d3dfd9;
  font-size: 10px;
  line-height: 1.5;
}

#appView .stripeSetupHead p {
  color: var(--ui-muted);
}

#appView .paymentStatus {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
  color: #fff;
  font-size: 8px;
  font-weight: 850;
  white-space: nowrap;
}

#appView .paymentStatus.ready { background: #dff5e1; color: #1d6b2a; }
#appView .paymentStatus.action { background: #fff0cd; color: #7c5000; }

#appView .paymentOverviewActions,
#appView .stripeSetupActions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

#appView .paymentOverviewActions button {
  min-height: 38px;
  border-color: rgb(255 255 255 / 20%);
  background: rgb(255 255 255 / 9%);
  color: #fff;
  box-shadow: none;
}

#appView .paymentMetrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

#appView .paymentMetric {
  display: grid;
  gap: 4px;
  padding: 10px;
  border-radius: 11px;
  background: rgb(255 255 255 / 9%);
}

#appView .paymentMetric strong { color: #fff; font-size: 14px; }
#appView .paymentMetric span { color: #d3dfd9; font-size: 8px; line-height: 1.35; }

#appView .paymentSection {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

#appView .paymentCapabilityGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

#appView .paymentCapability,
#appView .stripeSetupCard,
#appView .paymentMethodRow,
#appView .paymentActivityRow {
  border: 1px solid var(--ui-border);
  background: #fbfdff;
}

#appView .paymentCapability {
  display: grid;
  gap: 4px;
  padding: 11px;
  border-radius: 13px;
}

#appView .paymentCapability :is(strong, span, em) { display: block; }
#appView .paymentCapability strong { font-size: 11px; }
#appView .paymentCapability span { color: var(--ui-muted); font-size: 9px; }
#appView .paymentCapability em { color: #a56d18; font-size: 8px; font-style: normal; }
#appView .paymentCapability.is-active { border-color: #9bcea0; background: #f0faf1; }
#appView .paymentCapability.is-active em { color: #287b39; }

#appView .stripeSetupCard {
  display: grid;
  gap: 10px;
  padding: 13px;
  border-radius: 14px;
}

#appView .stripeSetupCard p {
  margin: 0;
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.5;
}

#appView .stripeAdminPrompt {
  display: grid;
  gap: 8px;
  padding: 11px;
  border-radius: 12px;
  background: #f1f5f2;
}

#appView .stripeEmbeddedRoot {
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: #fff;
}

#appView .stripeEmbeddedTabs {
  display: flex;
  gap: 5px;
  padding: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--ui-border);
}

#appView .stripeEmbeddedStage { min-height: 210px; padding: 8px; }

#appView .paymentActivityList,
#appView .paymentMethodsList {
  display: grid;
  gap: 7px;
}

#appView .paymentActivityRow {
  width: 100%;
  align-items: center;
  padding: 10px 11px;
  border-radius: 12px;
  color: var(--ui-ink);
  text-align: left;
}

#appView .paymentActivityCopy,
#appView .paymentActivityAmount {
  display: grid;
  gap: 3px;
}

#appView .paymentActivityCopy strong,
#appView .paymentActivityAmount strong { font-size: 10px; }
#appView .paymentActivityCopy span { color: var(--ui-muted); font-size: 9px; }
#appView .paymentActivityAmount { flex: 0 0 auto; text-align: right; }
#appView .paymentActivityState { color: #287b39; font-size: 8px; font-weight: 850; }
#appView .paymentActivityState.unpaid { color: #a86d18; }

#appView .paymentMethodRow {
  padding: 11px;
  border-radius: 13px;
}

#appView .paymentMethodMeta {
  display: block;
  margin-top: 3px;
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.42;
  word-break: break-word;
}

#appView .paymentMethodActions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 9px;
}

#appView .paymentMethodActions button { min-height: 38px; }

#appView .paymentEmpty,
#appView .teamEmpty {
  padding: 16px;
  border: 1px dashed var(--ui-border);
  border-radius: 12px;
  color: var(--ui-muted);
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
}

/* Scheduling, notifications, and earnings settings. */
#appView :is(.schedulingIntro, .notificationHeader, .paySettingsHead),
#appView :is(.schedulingSection, .notificationSection, .paySection),
#appView :is(.schedulingForm, .notificationForm, .paySettingsStack) {
  min-width: 0;
}

#appView :is(.schedulingIntro, .notificationHeader, .paySettingsHead),
#appView :is(.schedulingSection, .notificationSection, .paySection) > :is(.notificationSectionHead, .paySectionHead) {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

#appView :is(.schedulingOwnerPill, .notificationOwnerPill, .payOwnerPill) {
  flex: 0 0 auto;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e9f4ed;
  color: #1c6a43;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

#appView :is(.schedulingForm, .notificationForm, .paySettingsStack) {
  display: grid;
  gap: 10px;
  margin-top: 11px;
}

#appView :is(.schedulingSection, .notificationSection, .paySection) {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--ui-border);
  border-radius: 14px;
  background: #fbfdff;
}

#appView :is(.schedulingSection, .notificationSection, .paySection) h4 {
  margin: 0;
  font-size: 12px;
  font-weight: 850;
}

#appView :is(.schedulingGrid, .notificationGrid, .teamAccessGrid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

#appView .schedulingPreview {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

#appView .schedulingPreview span {
  padding: 6px 8px;
  border-radius: 9px;
  background: #e9f4ed;
  color: #174a35;
  font-size: 9px;
  font-weight: 800;
}

#appView :is(.notificationToggle, .payToggle) {
  display: flex !important;
  align-items: center;
  gap: 8px;
  color: var(--ui-ink) !important;
  font-size: 10px !important;
}

#appView :is(.notificationToggle, .payToggle) input {
  width: 18px !important;
  min-height: 18px;
  margin: 0 !important;
  flex: 0 0 18px;
}

#appView :is(.notificationChecks, .payCompanyChecks, .payRules) {
  display: grid;
  gap: 8px;
}

#appView .payRuleRow {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(120px, 1fr);
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: #fff;
}

#appView .payRuleName :is(strong, span) { display: block; }
#appView .payRuleName strong { font-size: 11px; }
#appView .payRuleName span { margin-top: 2px; color: var(--ui-muted); font-size: 8px; }

#appView .payMethodDescription,
#appView .payNotice {
  padding: 10px;
  border-radius: 11px;
  color: var(--ui-muted);
  font-size: 9px;
  line-height: 1.5;
}

#appView .payMethodDescription { background: #eef5ff; }
#appView .payNotice { border: 1px solid #f0deb1; background: #fff8e6; color: #6b5520; }

/* Modals and all front-most layers. */
#modal {
  z-index: 12000;
  align-items: flex-end;
  padding-top: max(10px, env(safe-area-inset-top, 0px));
  background: rgb(1 5 16 / 58%);
  backdrop-filter: blur(5px);
}

#modal.open {
  display: flex;
}

#modal .sheet {
  z-index: 12001;
  width: 100%;
  max-height: calc(100dvh - max(10px, env(safe-area-inset-top, 0px)));
  padding: 18px clamp(16px, 3vw, 22px) calc(22px + env(safe-area-inset-bottom, 0px));
  border: 1px solid rgb(255 255 255 / 65%);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: var(--ui-shadow-strong);
  overscroll-behavior: contain;
}

/* Invoice sending opens from inside the invoice sheet, so it must remain the
 * active dialog instead of being painted underneath that sheet. */
.invoiceShareComposer {
  z-index: 13000;
}

#modal .modalhead {
  position: sticky;
  top: -18px;
  z-index: 4;
  min-height: 54px;
  margin: -18px 0 14px;
  padding: 17px 0 9px;
  background: rgb(255 255 255 / 96%);
  backdrop-filter: blur(14px);
}

#modal .modalhead h2 {
  margin: 0;
  font-size: clamp(21px, 4vw, 27px);
  font-weight: 920;
  letter-spacing: -.7px;
  line-height: 1.12;
}

#modal .close {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  place-items: center;
  padding: 0;
  border: 1px solid #e4ebe5;
  border-radius: 50%;
  background: #eef2ef;
  font-size: 23px;
  line-height: 1;
}

.workspaceSaveToast { z-index: 15000; }
.workspaceLeaveDialog { z-index: 14500; }

.workspaceUnsavedBar {
  z-index: 9000;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  width: min(520px, calc(100% - 24px));
  padding: 9px 9px 9px 13px;
  border-radius: 15px;
  box-shadow: 0 16px 42px rgb(1 5 16 / 22%);
}

.workspaceUnsavedBar button {
  min-height: 40px;
  padding-inline: 13px;
  border-radius: 10px;
  font-size: 11px;
}

body.workspaceHasUnsaved #appView main {
  padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important;
}

body.workspaceHasModalUnsaved #modal .sheet {
  padding-bottom: calc(94px + env(safe-area-inset-bottom, 0px)) !important;
}

body.workspaceHasModalUnsaved .workspaceUnsavedBar {
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
}

/* Opright Guide remains reachable without covering cards or navigation. */
#guideRoot {
  right: max(12px, env(safe-area-inset-right, 0px));
  bottom: calc(70px + env(safe-area-inset-bottom, 0px) + 10px);
  z-index: 4300;
}

#guideRoot .guideLauncher {
  min-height: 43px;
  padding: 0 13px 0 10px;
  gap: 6px;
  font-size: 11px;
  box-shadow: 0 9px 24px rgb(1 5 16 / 20%);
}

#guideRoot .guideLauncherMark { font-size: 18px; }

#guideRoot .guidePanel {
  bottom: 52px;
  width: min(360px, calc(100vw - 24px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)));
  max-height: min(600px, calc(100dvh - 150px - env(safe-area-inset-bottom, 0px)));
  border-radius: 19px;
}

/* Narrow screens */
@media (max-width: 699px) {
  #appView main {
    padding: 17px 14px calc(110px + env(safe-area-inset-bottom, 0px));
  }

  #appView .workspaceLivePill {
    display: none;
  }

  #appView .workspaceBrandCopy > strong {
    max-width: 58vw;
  }

  #appView .section h1,
  #appView .settingsDetailHeader h1,
  #appView .plannerTitleCopy h1,
  #appView #home .homeTitleCopy h1 {
    font-size: 28px;
  }

  #appView #home .homeCommandTop {
    gap: 8px;
  }

  #appView #home .homeDayStatus {
    min-height: 27px;
    padding-inline: 7px;
    font-size: 8px;
  }

  #appView #home .homeMetrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #appView #home .homeMetricIcon {
    width: 27px;
    height: 27px;
  }

  #appView #home .homeRecentHeader {
    display: grid;
    align-items: stretch;
  }

  #appView #home .homeRecentTools {
    justify-content: space-between;
  }

  #appView #calendar .plannerCommandHeading {
    display: grid;
    gap: 12px;
  }

  #appView #calendar .plannerCommandActions {
    display: grid;
    grid-template-columns: minmax(64px, .7fr) minmax(144px, 1.3fr);
    align-items: center;
    justify-content: stretch;
    gap: 8px;
  }

  #appView #calendar #calendarScope {
    width: min(170px, 100%);
    justify-self: end;
  }

  #appView #calendar .involvementScope,
  #appView #calendar .scopeSwitch {
    width: 100%;
  }

  #appView #calendar .plannerTodayButton {
    min-height: 40px;
  }

  #appView #calendar .plannerWeekDay {
    min-height: 54px;
  }

  #appView #invoices .invoicesPageHeader {
    display: grid;
    align-items: stretch;
  }

  #appView #invoiceScope,
  #appView #invoiceScope .involvementScope,
  #appView #invoiceScope .scopeSwitch {
    width: 100%;
  }

  #appView .settingsHubCard {
    grid-template-columns: 36px minmax(0, 1fr);
    min-height: 72px;
    padding: 10px;
  }

  #appView .settingsHubIcon {
    width: 36px;
    height: 36px;
  }

  #appView .settingsHubChevron,
  #appView .settingsHubCopy span {
    display: none;
  }

  #appView .paymentOverviewHead,
  #appView .paymentSettingsHead,
  #appView .stripeSetupHead {
    flex-wrap: wrap;
  }

  #appView .paymentMetrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #appView .paymentCapabilityGrid,
  #appView :is(.schedulingGrid, .notificationGrid),
  #sheet .teamAccessGrid {
    grid-template-columns: 1fr;
  }

  #appView .teamMemberTop {
    grid-template-columns: 36px minmax(0, 1fr);
  }

  #appView .teamAvatar {
    width: 36px;
    height: 36px;
  }

  #appView .teamManage {
    grid-column: 1 / -1;
    width: 100%;
  }

  #appView #customers > .section:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 11px;
  }

  #appView #customers > .section:first-child > h1 {
    width: 100%;
    white-space: nowrap;
  }

  #appView .customerHeaderActions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  #appView .customerHeaderActions button {
    width: 100%;
  }

  #appView .payRuleRow {
    grid-template-columns: 1fr;
  }

  #modal .sheet {
    padding-inline: 15px;
  }

  #guideRoot .guideLauncher {
    width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border-radius: 50%;
  }

  #guideRoot .guideLauncher > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  #guideRoot .guidePanel {
    right: 0;
    max-height: calc(100dvh - 142px - env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 420px) {
  #appView .tabs {
    padding-inline: 4px;
  }

  #appView .tabs button {
    font-size: 18px;
  }

  #appView .tabs span {
    font-size: 8px;
  }

  #appView #home .homeCommandDeck,
  #appView #calendar .plannerCommandDeck {
    padding: 16px;
  }

  #appView #home #heroGreeting {
    font-size: 22px;
  }

  #appView #home .homeMetric {
    padding: 10px 8px;
  }

  #appView #home .homeMetric b {
    font-size: 18px;
  }

  #appView #calendar .plannerWeekDay > span { font-size: 8px; }
  #appView #calendar .plannerWeekDay > strong { font-size: 13px; }

  #sheet .crewColorPicker {
    gap: 5px;
  }

  #sheet .crewColorPicker label {
    min-height: 44px;
    padding: 5px !important;
  }

  #sheet .crewColorPicker .crewColorSwatch {
    width: 22px;
    height: 22px;
  }

  .workspaceUnsavedBar > div span {
    display: none;
  }
}

@media (min-width: 700px) {
  #modal {
    align-items: center;
    justify-content: center;
    padding: 24px;
  }

  #modal .sheet {
    width: min(680px, calc(100vw - 48px));
    max-height: min(860px, calc(100dvh - 48px));
    border: 1px solid rgb(255 255 255 / 70%);
    border-radius: 22px;
  }

  .workspaceUnsavedBar {
    bottom: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #appView *,
  #modal *,
  #guideRoot * {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
  }
}