/* Shared Bunyan visual system for platform, company workspaces, and operational screens. */
:root {
  --brand-primary: #123D46;
  --brand-dark: #0D3038;
  --sand: #C5A47E;
  --ink: #202B30;
  --muted: #68777C;
  --line: #E7E3DC;
  --canvas: #F7F5F0;
  --paper: #FFFFFF;
  --surface-soft: #FBFAF7;
  --surface-tint: #F0F3F0;
  --shadow-card: 0 8px 26px rgba(32, 43, 48, .055);
  --shadow-float: 0 18px 48px rgba(22, 45, 48, .14);
}

html { scroll-behavior: smooth; }
body { background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font-family: var(--bn-font-family); }
::selection { background: rgba(197,164,126,.28); color: var(--ink); }
:focus-visible { outline: 3px solid rgba(18,61,70,.30); outline-offset: 2px; }

/* Main workspace surface: a quiet drafting grid carries the login visual language through the app. */
.main {
  min-height: 100vh;
  background-color: var(--canvas);
  background-image:
    radial-gradient(ellipse at 12% 0%, rgba(197,164,126,.075), transparent 31rem),
    linear-gradient(rgba(18,61,70,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,61,70,.018) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
}
.main > * { position: relative; }
.topbar {
  min-height: 78px;
  border-bottom-color: rgba(18,61,70,.10);
  background: rgba(255,255,255,.91);
  box-shadow: 0 5px 20px rgba(32,43,48,.025);
  backdrop-filter: blur(14px);
}
.page-heading { align-items: center; margin-bottom: 22px; }
.page-heading h1 { color: var(--brand-primary); }
.page-heading p { max-width: 720px; color: #65747A; }
.eyebrow, .page-kicker, .section-kicker { color: var(--brand-primary); }

/* Reusable cards and dashboard metrics. */
.metric, .panel, .task-card, .approval-card, .notification-item, .project-team,
.team-form, .company-preview-panel, .open-task-reassign-item, .contract-list-item {
  border-color: rgba(18,61,70,.105);
  background-color: var(--paper);
  box-shadow: var(--shadow-card);
}
.metric {
  min-height: 116px;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff 0%, #fff 72%, #fcfaf6 100%);
}
.metric span { color: #65747A; }
.metric strong { color: var(--brand-primary); font-variant-numeric: tabular-nums; }
.metric.warning strong { color: var(--warning, #A9782F); }
.metric.danger strong { color: var(--danger, #B84F45); }
.weekly-strip {
  border: 1px solid rgba(18,61,70,.10);
  border-inline-start: 3px solid var(--sand);
  border-radius: 14px;
  background: linear-gradient(110deg, #fff, #F7F5F0);
  box-shadow: 0 4px 14px rgba(32,43,48,.025);
}
.weekly-strip > div:first-child { border-color: rgba(18,61,70,.10); }
.panel { border-radius: 15px; }
.panel-heading {
  min-height: 70px;
  border-bottom-color: rgba(18,61,70,.08);
  background: linear-gradient(100deg, rgba(247,245,240,.56), #fff 75%);
}
.panel-heading h2 { color: var(--brand-primary); }
.panel-heading p { color: var(--muted); }
.task-card, .approval-card { border-radius: 15px; }
.notification-item { border-radius: 13px; }
.notification-item.unread { border-inline-start: 3px solid var(--brand-primary); }
.project-team, .team-form, .company-preview-panel { border-radius: 15px; }

/* Tables remain usable on narrow screens and retain distinct, readable row states. */
.table-panel { overflow: hidden; }
.table-wrap { scrollbar-color: rgba(18,61,70,.25) transparent; scrollbar-width: thin; }
table { background: #fff; }
th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 12px;
  border-bottom-color: rgba(18,61,70,.12);
  background: #F4F3EE;
  color: #53656A;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 500;
}
td {
  padding-block: 12px;
  border-bottom-color: rgba(32,43,48,.07);
  color: #35474D;
  font-size: 14px;
  line-height: 1.5;
}
tbody tr:hover { background: #FBFAF7; }
.project-cell strong { color: var(--ink); }
.table-note { color: #6F7D80; }
.table-tools, .filters { gap: 9px; }

/* Consistent controls, forms, and clear interaction states. */
.btn, .button, .submit-button, .hero-link {
  min-height: 42px;
  border-radius: 10px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.btn:not(:disabled):hover, .button:not(:disabled):hover, .submit-button:not(:disabled):hover {
  transform: translateY(-1px);
}
.btn.primary, .button.primary, .submit-button {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: #fff;
  box-shadow: 0 4px 12px rgba(18,61,70,.12);
}
.btn.primary:hover, .button.primary:hover, .submit-button:hover {
  border-color: var(--brand-dark);
  background: var(--brand-dark);
  box-shadow: 0 7px 18px rgba(18,61,70,.18);
}
.btn:not(.primary):not(.danger), .button:not(.primary), .btn.subtle {
  border-color: rgba(18,61,70,.13);
  background: #fff;
  color: #42575D;
}
.btn.subtle { background: var(--surface-soft); }
.btn.small, .button.small { min-height: 36px; padding-block: 5px; }
.text-button { color: var(--brand-primary); }
.text-button:hover { color: var(--brand-dark); }
.main :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea),
.modal-card :is(input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]), select, textarea) {
  border-color: #D8E0DD;
  border-radius: 10px;
  background-color: #fff;
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.main :is(input, select, textarea):hover, .modal-card :is(input, select, textarea):hover { border-color: #B9CBC7; }
.main :is(input, select, textarea):focus, .modal-card :is(input, select, textarea):focus {
  border-color: var(--brand-primary);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(18,61,70,.11);
}
.form-grid label, .team-form label, .delegation-form label { color: #465A5F; }
.form-grid input, .form-grid select, .form-grid textarea { min-height: 44px; }
.form-grid textarea { min-height: 88px; }
.company-form h2:not(:first-child) { border-top-color: rgba(18,61,70,.11); }
.company-form .document-fields { border-color: rgba(18,61,70,.12); background: var(--surface-soft); }
.company-form .document-fields input[type="checkbox"], .company-form .check-row input[type="checkbox"], .permission-toggle input[type="checkbox"] { accent-color: var(--brand-primary); }

/* Dialogs, alerts, and empty/loading states. */
.modal-layer { background: rgba(13,48,56,.62); backdrop-filter: blur(5px); }
.modal-card { border: 1px solid rgba(255,255,255,.45); border-radius: 18px; box-shadow: var(--shadow-float); }
.modal-head { background: linear-gradient(100deg, #FBFAF7, #fff 70%); }
.modal-head h2 { color: var(--brand-primary); }
.modal-actions { background: #FBFAF7; }
.icon-close { background: #F0F3F0; color: var(--brand-primary); }
.empty-state, .loading { color: #6D7B7E; }
.toast { box-shadow: var(--shadow-float); }
.state-chip, .status-chip { border-radius: 999px; padding: 4px 9px; font-weight: 500; }
.mobile-nav button {
  min-height: 58px;
  flex: 0 0 68px;
  gap: 4px;
  font-size: 12px !important;
  line-height: 1.2;
}
.mobile-nav button > span { flex: 0 0 22px; }

/* Platform owner area shares the same neutral surfaces, petrol controls, and sand accents. */
.app-shell { background: var(--canvas); }
.app-shell .workspace { position: relative; }
.dashboard-card, .metric-card {
  border-color: rgba(18,61,70,.10);
  box-shadow: var(--shadow-card);
}
.dashboard-card { border-radius: 16px; }
.metric-card { border-radius: 14px; background: linear-gradient(145deg, #fff, #FCFBF8); }
.metrics-heading h2, .card-heading h2 { color: var(--brand-primary); }
.owner-avatar { background: rgba(197,164,126,.24); color: var(--brand-primary); }
.nav-link.active { box-shadow: inset 3px 0 var(--sand); }
.button:focus-visible, .nav-link:focus-visible { outline-color: rgba(197,164,126,.72); }
.service-editor { border-color: rgba(197,164,126,.48); background: #FFFEFC; }

@media (max-width: 850px) {
  .main { width: 100%; margin: 0; padding-inline: 20px; }
  .topbar { min-height: 70px; }
  .page-heading { margin-bottom: 18px; }
  th, td { padding-inline: 11px; }
  .modal-layer { padding: 12px; }
}
@media (max-width: 560px) {
  .main { padding: 0 12px 82px; background-size: auto, 34px 34px, 34px 34px; }
  .topbar { min-height: 64px; margin-inline: -12px; padding-inline: 12px; }
  .page-heading { gap: 12px; }
  .metric-grid { gap: 8px; }
  .metric { min-height: 94px; padding: 12px; }
  .panel-heading { padding-inline: 13px; }
  .panel-heading h2 { max-width: 100%; }
  .weekly-strip { gap: 10px 6px; padding: 11px; }
  .weekly-strip > div:first-child { padding-inline-start: 7px; }
  .filters { justify-content: stretch; }
  .filters > * { flex: 1 1 130px; min-width: 0; }
  .table-tools { flex-wrap: wrap; }
  .table-tools input { min-width: 100%; }
  .btn, .button { max-width: 100%; white-space: normal; }
  .mobile-nav { justify-content: flex-start; overflow-x: auto; }
  .mobile-nav button { flex-basis: 68px; }
  .form-grid { gap: 10px; }
  .modal-card { border-radius: 15px; }
  .modal-head, .modal-body, .modal-actions { padding-inline: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}