/* The Sueño Company parent-brand system.
   Keep client artwork and stored brand assets untouched; this file themes OS chrome only. */
:root {
  color-scheme: dark;
  --tsc-black: #0A0A0A;
  --tsc-charcoal: #141414;
  --tsc-surface: #1C1C1C;
  --tsc-surface-raised: #24231F;
  --tsc-gold: #C9A227;
  --tsc-gold-bright: #E0C35A;
  --tsc-gold-deep: #A8841E;
  --tsc-text: #F5F2E8;
  --tsc-text-secondary: #B8B1A3;
  --tsc-line: #363229;
  --tsc-line-strong: #5A4B25;
  --black: var(--tsc-black);
  --ink: var(--tsc-text);
  --paper: var(--tsc-black);
  --white: var(--tsc-surface);
  --acid: var(--tsc-gold);
  --acid-soft: rgba(201, 162, 39, .13);
  --orange: var(--tsc-gold-deep);
  --purple: var(--tsc-surface-raised);
  --blue: #2B2922;
  --muted: var(--tsc-text-secondary);
  --line: var(--tsc-line);
  --good: #6CB98A;
  --warn: var(--tsc-gold-bright);
  --bad: #E07070;
  --shadow: 0 18px 50px rgba(0, 0, 0, .34);
}

/* Optional product modules stay in the codebase and can be re-enabled centrally. */
.feature-commerce-off .commerce-card,
.feature-invoicing-off [data-new-invoice],
.feature-invoicing-off [data-invoice-edit],
.feature-invoicing-off [data-invoice-pay],
.feature-invoicing-off [data-invoice-delete],
.feature-invoicing-off [data-invoice-void],
.feature-stripe-off [data-stripe-sync] {
  display: none !important;
}

html,
body {
  background: var(--tsc-black);
  color: var(--tsc-text);
}

body { min-height: 100vh; }
::selection { background: var(--tsc-gold); color: var(--tsc-black); }
.noise { opacity: .018; mix-blend-mode: soft-light; }

/* Authentication */
.os-auth-gate {
  background: var(--tsc-black);
  color: var(--tsc-text);
}
.os-auth-card {
  width: min(560px, 100%);
  background: var(--tsc-charcoal);
  color: var(--tsc-text);
  border: 1px solid var(--tsc-line-strong);
  box-shadow: 12px 12px 0 rgba(201, 162, 39, .13);
  padding: 38px;
}
.os-auth-card img {
  display: block;
  width: 230px;
  height: 150px;
  object-fit: contain;
  object-position: left center;
  filter: none;
  margin: -12px 0 24px;
}
.os-auth-card .eyebrow { color: var(--tsc-gold); }
.os-auth-card h1 { color: var(--tsc-text); font-size: 40px; }
.os-auth-card p,
.os-auth-help { color: var(--tsc-text-secondary); }
.os-auth-card label { color: var(--tsc-gold-bright); }
.os-auth-card input,
.os-auth-card select {
  border: 1px solid var(--tsc-line);
  background: var(--tsc-surface);
  color: var(--tsc-text);
}
.os-auth-card input::placeholder { color: #716D63; }
.os-auth-card input:focus {
  outline: 2px solid var(--tsc-gold);
  border-color: var(--tsc-gold);
}
.os-auth-card button {
  background: var(--tsc-gold);
  color: var(--tsc-black);
  box-shadow: none;
}
.os-auth-card button:hover { background: var(--tsc-gold-bright); }
.os-auth-tabs {
  background: var(--tsc-black);
  border-color: var(--tsc-line);
}
.os-auth-card .os-auth-tab { color: var(--tsc-text-secondary); }
.os-auth-card .os-auth-tab.active {
  background: var(--tsc-gold);
  color: var(--tsc-black);
  border-color: var(--tsc-gold);
}
.os-auth-card .os-auth-secondary {
  background: transparent;
  color: var(--tsc-text-secondary);
  border-color: var(--tsc-line-strong);
}
.os-auth-card .os-auth-secondary:hover {
  background: var(--tsc-surface);
  color: var(--tsc-gold-bright);
}

/* Primary application chrome */
.app-shell { background: var(--tsc-black); }
.sidebar {
  background: var(--tsc-black);
  color: var(--tsc-text);
  border-right: 1px solid var(--tsc-line);
}
.brand-lockup {
  align-items: center;
  gap: 6px;
  padding: 0 4px 22px;
}
.brand-lockup img {
  width: 142px;
  height: 102px;
  object-fit: contain;
  object-position: left center;
  filter: none;
}
.brand-lockup span {
  color: var(--tsc-gold);
  font-size: 7px;
  letter-spacing: .16em;
  margin: 0 0 5px;
}
.nav-item { color: #8D877B; border-left: 2px solid transparent; }
.nav-item:hover {
  color: var(--tsc-text);
  background: rgba(255, 255, 255, .035);
  transform: none;
}
.nav-item.active {
  background: var(--tsc-gold);
  color: var(--tsc-black);
  border-left-color: var(--tsc-gold-bright);
}
.pulse { color: var(--tsc-text-secondary); }
.pulse i {
  background: var(--tsc-gold);
  box-shadow: 0 0 0 5px rgba(201, 162, 39, .1);
}
.sidebar-bottom { background: var(--tsc-black); }
.profile-button {
  background: var(--tsc-charcoal);
  border-color: var(--tsc-line);
  color: var(--tsc-text);
}
.profile-button small { color: var(--tsc-text-secondary); }
.profile-button b { color: var(--tsc-gold); }
.avatar { background: var(--tsc-gold); color: var(--tsc-black); }
.os-profile-menu {
  background: var(--tsc-surface);
  color: var(--tsc-text);
  border-color: var(--tsc-line-strong);
  box-shadow: 7px 7px 0 rgba(201, 162, 39, .13);
}
.os-profile-menu small { color: var(--tsc-text-secondary); }
.os-profile-menu button { background: var(--tsc-gold); color: var(--tsc-black); border: 0; }
.os-profile-menu button:hover { background: var(--tsc-gold-bright); color: var(--tsc-black); }

.main-content { background: var(--tsc-black); }
.topbar {
  background: rgba(10, 10, 10, .97);
  border-bottom: 1px solid var(--tsc-line);
  position: sticky;
  top: 0;
  z-index: 80;
}
.topbar h1 { color: var(--tsc-text); }
.section-number {
  background: var(--tsc-gold);
  color: var(--tsc-black);
}
.eyebrow { color: var(--tsc-gold); }
.view { background: var(--tsc-black); }

/* Buttons, controls and active states */
.button,
.icon-action,
.text-button,
.filter-chip,
.mini-action,
.command-tab,
.project-tabs button,
.accounting-tabs button,
.social-tabs button,
.staff-proof-tab,
.client-nav button {
  color: var(--tsc-text);
}
.button:hover { transform: translateY(-1px); }
.button.acid,
.login-submit,
.approve-proof,
.settings-save-row button,
.workflow-step-builder-head button {
  background: var(--tsc-gold);
  color: var(--tsc-black);
  border-color: var(--tsc-gold);
  box-shadow: none;
}
.button.acid:hover,
.login-submit:hover,
.approve-proof:hover { background: var(--tsc-gold-bright); }
.button.ghost,
.button.ghost-dark,
.icon-action,
.filter-chip,
.mini-action {
  background: transparent;
  border-color: var(--tsc-line);
  color: var(--tsc-text-secondary);
}
.button.ghost:hover,
.button.ghost-dark:hover,
.icon-action:hover,
.filter-chip:hover,
.filter-chip.active {
  border-color: var(--tsc-gold);
  color: var(--tsc-gold-bright);
  background: rgba(201, 162, 39, .07);
}
.text-button { color: var(--tsc-gold-bright); }
.danger-button,
.danger-link { color: #F08A8A; border-color: rgba(224, 112, 112, .45); }

/* Dashboard */
.hero-card {
  background: var(--tsc-charcoal);
  color: var(--tsc-text);
  border: 1px solid var(--tsc-line);
}
.hero-card::after {
  content: "S";
  color: rgba(201, 162, 39, .055);
  right: -10px;
  bottom: -62px;
}
.hero-kicker,
.hero-card h2 em { color: var(--tsc-gold-bright); }
.hero-card p { color: var(--tsc-text-secondary); }
.daily-card { background: var(--tsc-gold); color: var(--tsc-black); }
.ticker { background: var(--tsc-gold-deep); color: var(--tsc-black); }
.metric-card,
.metric-card:nth-child(2),
.metric-card:nth-child(3),
.metric-card:nth-child(4) {
  background: var(--tsc-surface);
  color: var(--tsc-text);
  border-color: var(--tsc-line);
}
.metric-card:nth-child(1) { border-top: 3px solid var(--tsc-gold); }
.metric-card:nth-child(2) { border-top: 3px solid var(--tsc-gold-bright); }
.metric-card:nth-child(3) { border-top: 3px solid var(--tsc-gold-deep); }
.metric-card:nth-child(4) { border-top: 3px solid #6E5A20; }
.metric-card small,
.attention-row small,
.activity-item small { color: var(--tsc-text-secondary); }
.metric-bar { background: #302D26; }
.metric-bar i { background: var(--tsc-gold); }
.activity-dot { background: var(--tsc-gold); }
.work-icon { background: var(--tsc-black); color: var(--tsc-gold); border: 1px solid var(--tsc-line); }
.attention-row:hover { background: rgba(201, 162, 39, .07); }

/* Shared operational surfaces */
.panel,
.client-card,
.connection-card,
.settings-card,
.channel-card,
.report-card,
.proof-card,
.task-card,
.f3-task-card,
.workflow-template-card,
.admin-users-card,
.commerce-card,
.drive-account-card,
.ai-profile-card,
.ai-cost-card,
.agreement-active-card,
.project-comm-card,
.brand-client-card,
.social-post-card,
.social-version-card,
.support-ticket,
.score-card,
.menu-report-card,
.queue-card,
.accounting-row,
.accounting-table,
.expense-table,
.payment-table,
.data-table,
.table-wrap {
  background: var(--tsc-surface);
  color: var(--tsc-text);
  border-color: var(--tsc-line);
  box-shadow: var(--shadow);
}
.panel-header,
.settings-head,
.accounting-head,
.record-section-head,
.project-comms-head,
.staff-proof-subhead,
.line-items-head {
  border-color: var(--tsc-line);
}
.panel-header p,
.settings-card p,
.channel-card p,
.report-card p,
.command-empty,
.mini-empty,
.empty-queue,
.inbox-empty,
.inbox-thread-empty,
.proof-preview-missing,
.project-workspace-loading { color: var(--tsc-text-secondary); }
.attention-row,
.activity-item,
.accounting-row,
.admin-user-row,
.contact-row,
.conversation-row,
.message-bubble,
.workflow-template-card li,
.active-workflow-runs article,
.social-schedule-row,
.social-plan-row,
.campaign-live-row,
.command-row,
.person-row,
.scope-row,
.project-task-row { border-color: var(--tsc-line); }
.search,
input,
select,
textarea {
  background: var(--tsc-charcoal);
  color: var(--tsc-text);
  border-color: var(--tsc-line);
}
input::placeholder,
textarea::placeholder { color: #746F64; }
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--tsc-gold);
  outline-offset: 1px;
  border-color: var(--tsc-gold);
}
select { color-scheme: dark; }
.badge { background: #2B2923; color: var(--tsc-text-secondary); border-color: var(--tsc-line); }
.badge.good { color: #95D6AA; border-color: rgba(108, 185, 138, .4); }
.badge.warn { color: var(--tsc-gold-bright); border-color: rgba(224, 195, 90, .42); }
.badge.bad { color: #F08A8A; border-color: rgba(224, 112, 112, .4); }
.badge.active,
.command-tab.active,
.project-tabs button.active,
.accounting-tabs button.active,
.social-tabs button.active,
.staff-proof-tab.active,
.client-nav button.active {
  background: var(--tsc-gold);
  color: var(--tsc-black);
  border-color: var(--tsc-gold);
}

/* Forms, modals and sheets */
dialog,
.proof-overlay,
.footprint-overlay,
.growth-overlay,
.person-editor-overlay,
.command-centre-overlay,
.project-link-overlay,
.project-workspace-overlay,
.os-credential-overlay,
.f3-notice-overlay { background: rgba(0, 0, 0, .82); }
.modal-card,
.request-sheet,
.accounting-sheet,
.quickadd-sheet,
.task-sheet,
.workflow-launch-sheet,
.workflow-template-sheet,
.client-edit-sheet,
.person-edit-sheet,
.project-link-sheet,
.staff-proof-panel,
.proof-panel,
.footprint-modal,
.footprint-shell,
.workflow-library,
.os-credential-card,
.f3-notice-card {
  background: var(--tsc-charcoal);
  color: var(--tsc-text);
  border-color: var(--tsc-line-strong);
  box-shadow: 12px 12px 0 rgba(201, 162, 39, .12);
}
.modal-stripe,
.os-credential-stripe,
.f3-notice-acid { background: var(--tsc-gold); }
.close-button,
.proof-close,
.f3-notice-x,
.footprint-close { color: var(--tsc-text); }
.form-grid label,
.settings-form label,
.task-form-grid label,
.brand-form-grid label,
.scope-form-grid label,
.field label { color: var(--tsc-gold-bright); }
.setting-toggle,
.check-row,
.expense-ai-capture,
.invoice-total-preview,
.workflow-preview,
.workflow-step-builder,
.task-status-col,
.inbox-list-panel,
.inbox-thread-panel,
.composer-shell {
  background: var(--tsc-charcoal);
  color: var(--tsc-text);
  border-color: var(--tsc-line);
}
.setting-toggle i { background: #39352B; }
.setting-toggle input:checked + i { background: var(--tsc-gold); }

/* Notices, empty states and failures */
.empty-state,
.inbox-empty,
.command-empty,
.mini-empty,
.empty-queue,
.project-comms-empty,
.social-generated-empty,
.f3-live-empty,
.f3-live-empty-mini {
  background: var(--tsc-charcoal);
  color: var(--tsc-text-secondary);
  border-color: var(--tsc-line);
}
.empty-state::after { content: "S"; color: rgba(201, 162, 39, .055); }
.auth-message,
.admin-user-error,
.expense-ai-status,
.social-image-status { color: var(--tsc-text-secondary); }
.os-system-error {
  margin: 20px;
  padding: 24px;
  background: var(--tsc-charcoal);
  border: 1px solid #754848;
  border-left: 5px solid #E07070;
  color: var(--tsc-text);
}
.os-system-error strong { font-size: 20px; color: #F08A8A; }
.os-system-error pre { margin-top: 14px; white-space: pre-wrap; color: var(--tsc-text-secondary); }
.f3-notice-top img { width: 150px; height: 92px; object-fit: contain; filter: none; }
.f3-notice-kicker { color: var(--tsc-gold); }

/* Live chat and PWA chrome */
.f3-live-shell {
  background: var(--tsc-charcoal);
  color: var(--tsc-text);
  border-color: var(--tsc-line-strong);
  box-shadow: 14px 14px 0 rgba(201, 162, 39, .13);
}
.f3-live-shell > header,
.f3-live-grid > main,
.f3-live-compose { background: var(--tsc-charcoal); border-color: var(--tsc-line); }
.f3-live-grid > aside,
.f3-live-thread,
.f3-live-watch { background: var(--tsc-black); border-color: var(--tsc-line); }
.f3-live-row { color: var(--tsc-text); border-color: var(--tsc-line); }
.f3-live-row:hover,
.f3-live-row.active { background: rgba(201, 162, 39, .09); }
.f3-live-bubble { background: var(--tsc-surface); color: var(--tsc-text); border-color: var(--tsc-line); }
.f3-live-bubble.role-user { background: #29261D; border-color: var(--tsc-line-strong); }
.f3-live-bubble.role-operator { border-left-color: var(--tsc-gold); }
.f3-live-bubble.role-system { background: var(--tsc-charcoal); color: var(--tsc-text-secondary); }
.f3-pwa-toast { border-color: var(--tsc-line-strong); box-shadow: 8px 8px 0 rgba(201, 162, 39, .14); }
.f3-pwa-toast strong { color: var(--tsc-gold-bright); }

/* Client portal shell. Client logos, colour swatches, proofs and social creative are intentionally excluded. */
.f3-login,
.login-screen,
.login-stage { background: var(--tsc-black); color: var(--tsc-text); }
.login-brand-panel { background: var(--tsc-black); color: var(--tsc-text); border-color: var(--tsc-line); }
.login-brand-panel::before { content: "S"; color: var(--tsc-gold); opacity: .055; }
.login-brand-panel img { width: min(290px, 75%); max-height: 240px; object-fit: contain; filter: none; }
.login-brand-panel span { color: var(--tsc-gold-bright); }
.login-form-panel,
.login-form-wrap { background: var(--tsc-charcoal); color: var(--tsc-text); }
.login-footer { color: var(--tsc-text-secondary); border-color: var(--tsc-line); }
.login-link,
.login-back { color: var(--tsc-gold-bright); }
.client-top,
.client-rail,
.client-main,
.client-command-centre,
.client-profile-section,
.client-record-sheet { background: var(--tsc-charcoal); color: var(--tsc-text); border-color: var(--tsc-line); }

@media (max-width: 760px) {
  .os-auth-card { padding: 28px 24px; box-shadow: 7px 7px 0 rgba(201, 162, 39, .13); }
  .os-auth-card img { width: 190px; height: 122px; }
  .brand-lockup img { width: 118px; height: 82px; }
  .topbar { background: var(--tsc-black); }
}

/* Signed-out interaction guard.
   App modules can finish initializing behind the auth screen; none of their
   overlays or mobile chrome should be able to intercept the login controls. */
body.os-auth-checking,
body.os-signed-out {
  overflow: auto !important;
}

body.os-auth-checking > :not(#os-auth-gate):not(script),
body.os-signed-out > :not(#os-auth-gate):not(script) {
  pointer-events: none !important;
}

body.os-auth-checking #os-auth-gate,
body.os-signed-out #os-auth-gate {
  z-index: 2147483647;
  visibility: visible !important;
  pointer-events: auto !important;
  isolation: isolate;
  overflow-y: auto;
}

body.os-auth-checking #os-auth-gate *,
body.os-signed-out #os-auth-gate * {
  pointer-events: auto;
}

/* Authenticated shell interaction hardening */
body.os-authenticated #os-auth-gate {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.os-authenticated .app-shell {
  visibility: visible !important;
  pointer-events: auto !important;
}

@media (min-width: 761px) {
  body.os-authenticated .sidebar {
    z-index: 300;
  }
}