/* Hayfam platform theme: Warm & Friendly
   Product geometry, colour and contrast are platform-controlled. Client
   branding sits inside this system rather than redefining it. */

:root {
  --hub-page-bg: #f6f2ea;
  --hub-surface: #fffdf9;
  --hub-tile: #ffffff;
  --hub-border: #e8e0d4;
  --hub-border-width: 1px;
  --hub-radius: 18px;
  --hub-shadow: 0 8px 24px rgba(64, 52, 39, .07);
  --hub-card-padding: 18px;
  --hub-section-gap: 18px;
  --hub-control-padding: 11px;
  --hub-tile-gap: 14px;
  --hub-root-font-size: 16px;
  --hub-header-bg: #fffdf9;
  --green: #667d36;
  --forest: #52672b;
  --deep-forest: #36451f;
  --leaf: #98a963;
  --sage-pale: #edf0df;
  --mint: #f3f5e9;
  --orange: #e8742f;
  --ink: #292d27;
  --muted: #6e746a;
  --cream: #f6f2ea;
}

html {
  font-size: var(--hub-root-font-size);
  background: var(--hub-page-bg);
}

body {
  background: var(--hub-page-bg) !important;
  color: var(--ink) !important;
  font-family: "Segoe UI", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-header {
  background: color-mix(in srgb, var(--hub-header-bg) 96%, transparent) !important;
  border-bottom: 1px solid var(--hub-border) !important;
  box-shadow: 0 3px 16px rgba(64, 52, 39, .045) !important;
  backdrop-filter: blur(18px);
}

.header-inner {
  max-width: 1220px !important;
  min-height: 62px;
  padding: 9px 20px !important;
}

.brand-logo {
  width: auto !important;
  max-width: min(190px, 46vw) !important;
  max-height: 44px !important;
  object-fit: contain;
}

.nav a {
  border-radius: 10px !important;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.nav a:hover,
.nav a:focus-visible {
  transform: translateY(-1px);
  background: var(--sage-pale) !important;
}

.page {
  max-width: 1220px !important;
  padding: 20px 20px 68px !important;
}

.section {
  margin: var(--hub-section-gap) 0 !important;
}

.action-grid,
.card-grid,
.split-grid,
.doc-grid,
.admin-grid,
.dashboard-overview,
.dashboard-lower,
.today-actions-list,
.my-shifts-list,
.settings-field-grid,
.logo-settings-grid {
  gap: var(--hub-tile-gap) !important;
}

.card,
.action-card,
.success-card,
.auth-card,
.form-grid,
.filter-bar,
.table-wrap,
.document-dialog,
.settings-panel {
  background: var(--hub-surface) !important;
  border: var(--hub-border-width) solid var(--hub-border) !important;
  border-radius: var(--hub-radius) !important;
  box-shadow: var(--hub-shadow) !important;
}

.card,
.action-card,
.settings-panel {
  padding: var(--hub-card-padding) !important;
}

.action-card {
  background: var(--hub-tile) !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.action-card:hover,
.action-card:focus-within {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--green) 34%, var(--hub-border)) !important;
  box-shadow: 0 14px 30px rgba(64, 52, 39, .10) !important;
}

.eyebrow {
  color: var(--green) !important;
  letter-spacing: .08em;
}

h1, h2, h3, strong {
  color: var(--ink);
}

.muted,
.field-help {
  color: var(--muted) !important;
}

.button {
  min-height: 42px;
  border-radius: 11px !important;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
}

.button.primary {
  background: var(--orange) !important;
  border-color: var(--orange) !important;
  color: #fff !important;
  box-shadow: 0 7px 18px color-mix(in srgb, var(--orange) 22%, transparent) !important;
}

.button.ghost {
  background: var(--hub-surface) !important;
  border-color: var(--hub-border) !important;
  color: var(--ink) !important;
}

input,
select,
textarea {
  padding: var(--hub-control-padding) 12px !important;
  background: #fff !important;
  color: var(--ink) !important;
  border: 1px solid color-mix(in srgb, var(--hub-border) 76%, #a89d8f) !important;
  border-radius: 11px !important;
  box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--green) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 15%, transparent) !important;
}

/* The welcome card is the visual personality area. The first platform theme
   ships with a warm abstract treatment; a curated welcome-card library can
   replace this independently without changing the surrounding UI. */
.dashboard-hero {
  position: relative;
  isolation: isolate;
  min-height: 172px !important;
  margin: 4px 0 var(--hub-section-gap) !important;
  padding: 28px 30px !important;
  overflow: hidden;
  align-items: center !important;
  color: #273021 !important;
  border: 1px solid #ead8c4 !important;
  border-radius: 24px !important;
  box-shadow: 0 12px 32px rgba(91, 69, 45, .10) !important;
  background:
    radial-gradient(circle at 82% 15%, rgba(232,116,47,.20) 0 17%, transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(102,125,54,.16) 0 23%, transparent 24%),
    linear-gradient(135deg, #fff6e9 0%, #f9e7d3 53%, #eef0df 100%) !important;
}

.dashboard-hero::after {
  content: "";
  position: absolute;
  right: -58px;
  bottom: -86px;
  width: 230px;
  height: 230px;
  border-radius: 48% 52% 56% 44%;
  background: color-mix(in srgb, var(--green) 13%, transparent);
  transform: rotate(18deg);
  pointer-events: none;
}

.dashboard-hero .hero-copy {
  position: relative;
  z-index: 2;
  max-width: 720px;
}

.dashboard-hero h1,
.dashboard-hero .lead {
  color: #273021 !important;
  text-shadow: none !important;
}

.dashboard-hero .eyebrow {
  color: var(--forest) !important;
}

.dashboard-hero h1 {
  margin: 5px 0 8px !important;
  font-size: clamp(1.85rem, 4vw, 2.55rem) !important;
  letter-spacing: -.035em;
}

.dashboard-hero .lead {
  max-width: 42rem;
  margin-bottom: 0 !important;
  opacity: .86;
}

.dashboard-hero .hero-art {
  display: none !important;
}

.panel-heading h2,
.section-heading h2 {
  letter-spacing: -.02em;
}

.my-shift-row,
.today-form-row,
.message-thread-row {
  border-radius: 12px;
  transition: background-color .14s ease, transform .14s ease;
}

.my-shift-row:hover,
.today-form-row:hover,
.message-thread-row:hover {
  background: var(--mint) !important;
  transform: translateX(2px);
}

.form-shell {
  max-width: 820px !important;
}

.form-heading h1 {
  letter-spacing: -.03em;
}

.form-grid {
  gap: 13px !important;
  padding: var(--hub-card-padding) !important;
}

.mobile-nav {
  background: color-mix(in srgb, var(--hub-surface) 97%, transparent) !important;
  border-top: 1px solid var(--hub-border) !important;
  box-shadow: 0 -8px 24px rgba(64, 52, 39, .08) !important;
  backdrop-filter: blur(18px);
}

.mobile-nav a.active,
.mobile-nav a[aria-current="page"] {
  color: var(--forest) !important;
}

/* Personal dark mode remains a user setting. Geometry stays identical while
   the surface palette changes as a coherent companion design. */
html.dark-mode {
  --hub-page-bg: #1d201c;
  --hub-surface: #252923;
  --hub-tile: #292d27;
  --hub-border: #3c4238;
  --hub-header-bg: #20241f;
  --ink: #f1efe9;
  --muted: #b4b8ad;
  --sage-pale: #30372b;
  --mint: #2c3228;
}

html.dark-mode body {
  background: var(--hub-page-bg) !important;
  color: var(--ink) !important;
}

html.dark-mode .card,
html.dark-mode .action-card,
html.dark-mode .settings-panel,
html.dark-mode .form-grid,
html.dark-mode .filter-bar,
html.dark-mode .table-wrap,
html.dark-mode .auth-card {
  background: var(--hub-surface) !important;
  border-color: var(--hub-border) !important;
}

html.dark-mode input,
html.dark-mode select,
html.dark-mode textarea {
  background: #1f231e !important;
  color: var(--ink) !important;
  border-color: var(--hub-border) !important;
}

html.dark-mode .dashboard-hero {
  border-color: #474135 !important;
  background:
    radial-gradient(circle at 82% 15%, rgba(232,116,47,.15) 0 17%, transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(133,157,83,.13) 0 23%, transparent 24%),
    linear-gradient(135deg, #302b24 0%, #332820 53%, #293024 100%) !important;
}

html.dark-mode .dashboard-hero h1,
html.dark-mode .dashboard-hero .lead {
  color: #f3efe7 !important;
}

html.dark-mode .dashboard-hero .eyebrow {
  color: #becb8d !important;
}

@media (max-width: 700px) {
  .site-header {
    min-height: 56px;
  }

  .header-inner {
    min-height: 56px;
    padding: 7px 14px !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
  }

  .brand-logo {
    max-width: min(165px, 58vw) !important;
    max-height: 38px !important;
  }

  .page {
    padding: 14px 14px 84px !important;
  }

  .card,
  .action-card,
  .settings-panel {
    padding: 15px !important;
  }

  .dashboard-hero {
    min-height: 150px !important;
    padding: 21px !important;
    margin-top: 0 !important;
    border-radius: 20px !important;
  }

  .dashboard-hero h1 {
    font-size: 1.85rem !important;
  }

  .section-heading {
    margin-bottom: 10px !important;
  }
}