* { box-sizing: border-box; }
body { margin: 0; background: var(--color-background); color: var(--color-ink); font: var(--font-weight-normal) var(--font-medium)/var(--line-height) var(--font-family); }
a { color: var(--color-primary); text-underline-offset: .2em; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
input, button, a, summary { outline-offset: 4px; }
:focus-visible { outline: 2px solid var(--color-primary); }
input:focus-visible { outline-offset: 1px; box-shadow: var(--focus-ring); }
input:not([type=checkbox]) { width: 100%; height: var(--control-large); padding: 0 var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-small); color: var(--color-ink); background: var(--color-surface); min-width: 0; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--font-title); font-weight: var(--font-weight-bold); letter-spacing: -.04em; line-height: 1.25; }
h2 { font-size: var(--font-heading); font-weight: var(--font-weight-bold); letter-spacing: -.025em; }
h3 { font-size: var(--font-large); }
.icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; vertical-align: middle; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-sm); border: 1px solid transparent; border-radius: var(--radius-small); padding: var(--space-sm) var(--space-md); min-height: var(--control-medium); font-weight: var(--font-weight-medium); text-decoration: none; }
.primary { background: var(--color-primary); color: var(--color-nav-ink); }
.primary:hover { background: var(--color-primary-hover); }
.secondary { background: var(--color-surface); border-color: var(--color-border); color: var(--color-ink); }
.secondary:hover { background: var(--color-primary-soft); }
.compact { min-height: var(--control-small); font-size: var(--font-small); white-space: nowrap; }
.full { width: 100%; }
.skip-link { position: absolute; left: var(--space-md); top: -5rem; z-index: 10; padding: var(--space-sm); background: var(--color-surface); }
.skip-link:focus { top: var(--space-md); }
.brand { display: flex; align-items: center; gap: var(--space-sm); text-decoration: none; font-size: var(--font-brand); font-weight: var(--font-weight-bold); letter-spacing: -.04em; color: var(--color-nav-ink); }
.brand-mark { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; background: var(--color-nav-ink); color: var(--color-nav); border-radius: var(--radius-small); font-size: var(--font-brand-mark); }
.brand-caption { display: block; font-size: var(--font-small); font-weight: var(--font-weight-normal); color: var(--color-nav-muted); letter-spacing: .01em; margin-top: -.25rem; }
.login-shell { min-height: 100dvh; display: grid; grid-template-columns: 44% 56%; }
.login-story { background: var(--color-nav); color: var(--color-nav-ink); padding: var(--space-2xl); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-story-content { max-width: 26rem; padding-block: var(--space-2xl); }
.story-emblem { font-size: var(--font-emblem); letter-spacing: -.09em; font-weight: var(--font-weight-heavy); line-height: 1; color: var(--color-nav-muted); opacity: .35; margin-bottom: var(--space-xl); }
.login-story h1 { font-size: var(--font-display); line-height: 1.2; }
.login-story p { color: var(--color-nav-muted); font-size: var(--font-large); max-width: 22rem; margin-top: var(--space-lg); }
.story-footer { font-size: var(--font-small); color: var(--color-nav-muted); }
.login-panel { display: flex; align-items: center; justify-content: center; padding: var(--space-2xl); background: var(--color-surface); position: relative; }
.login-form { width: 100%; max-width: 25rem; }
.login-form h2 { font-size: var(--font-login-title); line-height: 1.25; }
.intro { color: var(--color-muted); margin-top: var(--space-sm); margin-bottom: var(--space-xl); }
.stack label { display: block; margin-top: var(--space-lg); margin-bottom: var(--space-xs); font-weight: var(--font-weight-medium); }
.stack .button { margin-top: var(--space-xl); }
.stack .button .icon { margin-left: auto; }
.stack .button { padding-left: var(--space-lg); }
.login-help { font-size: var(--font-small); color: var(--color-muted); margin-top: var(--space-xl); }
.login-footer { position: absolute; bottom: var(--space-xl); color: var(--color-muted); font-size: var(--font-small); }
.reset-link { display: block; text-align: center; margin-top: var(--space-md); }
.mobile-brand { display: none; }
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: var(--space-xl) var(--space-md); background: var(--color-nav); display: flex; flex-direction: column; }
.sidebar .brand { margin: 0 var(--space-sm) var(--space-2xl); }
.nav-item { display: flex; align-items: center; gap: var(--space-sm); color: var(--color-nav-muted); text-decoration: none; padding: var(--space-sm); border-radius: var(--radius-small); }
.nav-item:hover, .nav-item.active { color: var(--color-nav-ink); background: rgb(255 255 255 / 9%); }
.tenant-nav { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); margin-top: var(--space-xl); color: var(--color-nav-ink); font-weight: var(--font-weight-medium); }
.tenant-dot { display: inline-grid; place-items: center; width: 2rem; height: 2rem; background: var(--color-tenant); color: var(--color-tenant-ink); border-radius: var(--radius-small); font-weight: var(--font-weight-bold); }
.tenant-dot.small { width: 1.5rem; height: 1.5rem; font-size: var(--font-small); border-radius: .35rem; }
.indent { font-size: var(--font-small); }
.sidebar-bottom { margin-top: auto; padding-inline: var(--space-sm); }
.sidebar-label { display: block; color: var(--color-nav-muted); font-size: var(--font-small); margin-bottom: var(--space-sm); }
.logout { color: var(--color-nav-muted); background: none; border: none; padding: var(--space-sm) 0; display: flex; gap: var(--space-sm); align-items: center; font-size: var(--font-small); }
.logout:hover { color: var(--color-nav-ink); }
.main-shell { min-width: 0; display: flex; flex-direction: column; }
.topbar { min-height: 4.6rem; border-bottom: 1px solid var(--color-border); background: var(--color-surface); padding: var(--space-md) var(--space-2xl); display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); font-size: var(--font-small); }
.topbar a { color: var(--color-muted); text-decoration: none; }
.crumb-divider { margin: 0 var(--space-md); color: var(--color-muted); }
.connection { display: inline-flex; gap: var(--space-sm); align-items: center; color: var(--color-muted); }
.connection > span { width: .45rem; height: .45rem; background: var(--color-success); border-radius: 50%; }
.content { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: var(--space-2xl); flex: 1; }
.page-heading { margin-bottom: var(--space-xl); }
.page-heading p { color: var(--color-muted); margin-top: var(--space-sm); }
.context-tag { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-md); font-size: var(--font-small); font-weight: var(--font-weight-medium); }
.context-source { color: var(--color-muted); border-left: 1px solid var(--color-border); padding-left: var(--space-sm); font-weight: var(--font-weight-normal); }
.tenant-card { display: flex; align-items: center; gap: var(--space-lg); padding: var(--space-xl); max-width: 56rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-large); color: var(--color-ink); text-decoration: none; box-shadow: var(--shadow-panel); }
.tenant-card:hover { border-color: var(--color-primary); }
.enjoy-mark { width: 6.25rem; height: 5.5rem; background: var(--color-tenant); color: var(--color-tenant-ink); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: var(--radius-medium); font-size: var(--font-tenant-mark); font-weight: var(--font-weight-heavy); letter-spacing: -.05em; }
.enjoy-mark span { font-size: var(--font-caption); letter-spacing: .05em; font-weight: var(--font-weight-medium); }
.tenant-copy { display: flex; flex-direction: column; gap: var(--space-xs); }
.tenant-copy strong { font-size: var(--font-heading); }
.tenant-copy > span { font-size: var(--font-small); color: var(--color-muted); }
.tenant-action { display: flex; align-items: center; gap: var(--space-sm); margin-left: auto; color: var(--color-primary); font-weight: var(--font-weight-medium); }
.workspace-help { color: var(--color-muted); font-size: var(--font-small); margin-top: var(--space-lg); }
.import-grid { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(18rem,1fr); gap: var(--space-lg); align-items: start; }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-panel); overflow: hidden; }
.panel-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: var(--space-lg); border-bottom: 1px solid var(--color-border); }
.panel-heading p { font-size: var(--font-small); color: var(--color-muted); margin-top: var(--space-xs); }
.restaurant-toolbar { padding: var(--space-lg) var(--space-lg) var(--space-md); }
.search-box { position: relative; display: block; }
.search-box > .icon { position: absolute; left: var(--space-sm); top: calc(50% - .625rem); color: var(--color-muted); }
.search-box input:not([type=checkbox]) { padding-left: 2.5rem; height: var(--control-medium); background: var(--color-background); }
.list-summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-sm); padding: 0 var(--space-lg) var(--space-md); font-size: var(--font-small); color: var(--color-muted); }
.select-all { display: inline-flex; align-items: center; gap: var(--space-sm); color: var(--color-ink); }
.restaurant-list { max-height: 30rem; overflow-y: auto; }
.restaurant-row { display: flex; align-items: center; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-top: 1px solid var(--color-border); cursor: pointer; }
.restaurant-row:hover { background: var(--color-background); }
.restaurant-row:has(input:checked) { background: var(--color-primary-soft); }
.restaurant-row[hidden] { display: none; }
.restaurant-icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--color-background); color: var(--color-muted); border-radius: var(--radius-small); }
.restaurant-info { display: flex; flex-direction: column; min-width: 0; }
.restaurant-info strong { font-weight: var(--font-weight-medium); overflow-wrap: anywhere; }
.restaurant-info > span { font-size: var(--font-small); color: var(--color-muted); }
.badge { font-size: var(--font-caption); color: var(--color-muted); margin-left: auto; padding: var(--space-xs) var(--space-sm); background: var(--color-background); border-radius: var(--radius-small); }
.panel-footnote { border-top: 1px solid var(--color-border); padding: var(--space-md) var(--space-lg); font-size: var(--font-small); color: var(--color-muted); }
.period-body { padding: var(--space-lg); }
.period-body label { display: block; font-weight: var(--font-weight-medium); margin-bottom: var(--space-sm); }
.period-body input { margin-bottom: var(--space-lg); }
.date-note { font-size: var(--font-small); color: var(--color-muted); margin-bottom: var(--space-lg); }
.import-note { display: flex; gap: var(--space-sm); color: var(--color-muted); font-size: var(--font-small); padding: var(--space-lg) var(--space-xs); }
.empty-state { padding: var(--space-2xl) var(--space-lg); text-align: center; color: var(--color-muted); }
.empty-state > .icon { width: 2rem; height: 2rem; margin-bottom: var(--space-md); }
.empty-state h3 { color: var(--color-ink); margin-bottom: var(--space-sm); }
.empty-state p { font-size: var(--font-small); max-width: 23rem; margin: auto; }
.no-results { padding: var(--space-lg); color: var(--color-muted); }
.notice, .alert { display: flex; align-items: start; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--radius-small); margin-bottom: var(--space-lg); font-size: var(--font-small); }
.notice { color: var(--color-success); background: var(--color-success-soft); }
.alert { color: var(--color-danger); background: var(--color-danger-soft); }
.stack .alert { margin-top: var(--space-lg); margin-bottom: 0; }
#result { margin-top: var(--space-lg); }
.import-result { padding: var(--space-lg); }
.status-heading { display: flex; align-items: center; gap: var(--space-md); margin-bottom: var(--space-md); }
.status-heading p, .import-result > p { color: var(--color-muted); font-size: var(--font-small); }
.status-icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; background: var(--color-primary-soft); color: var(--color-primary); border-radius: 50%; }
.import-result details { margin: var(--space-md) 0; }
.import-result summary { cursor: pointer; font-weight: var(--font-weight-medium); }
.import-result ul { font-size: var(--font-small); overflow-wrap: anywhere; }
.result-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); color: var(--color-muted); font-size: var(--font-small); overflow-wrap: anywhere; }
.app-footer { display: flex; justify-content: space-between; padding: var(--space-lg) var(--space-2xl); color: var(--color-muted); font-size: var(--font-small); }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
.pending { margin-top: var(--space-sm); font-size: var(--font-small); color: var(--color-muted); text-align: center; }
@media (max-width: 1150px) {
  .content, .topbar { padding: var(--space-xl); }
  .import-grid { grid-template-columns: minmax(0,1fr); }
  .period-column { max-width: none; }
  .period-body { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 var(--space-lg); }
  .period-body label[for=from] { grid-column: 1; grid-row: 1; }
  .period-body label[for=to] { grid-column: 2; grid-row: 1; }
  .date-note, .period-body .button, .pending { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { position: static; height: auto; padding: var(--space-md); gap: var(--space-md); }
  .sidebar .brand { margin: 0; }
  .sidebar nav { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
  .tenant-nav, .sidebar-label { display: none; }
  .sidebar-bottom { margin: 0; position: absolute; right: var(--space-md); top: var(--space-md); }
  .logout { font-size: var(--font-small); }
  .topbar { min-height: 3.5rem; padding: var(--space-md); }
  .connection { display: none; }
  .content { padding: var(--space-xl) var(--space-md); }
  .panel-heading { flex-wrap: wrap; }
  .tenant-card { flex-wrap: wrap; padding: var(--space-lg); gap: var(--space-md); }
  .tenant-action { width: 100%; margin: 0; }
  .badge { max-width: 5rem; }
  .restaurant-icon { display: none; }
  .list-summary { flex-wrap: wrap; }
  .app-footer { padding: var(--space-lg) var(--space-md); }
  .login-shell { display: block; }
  .login-story { display: none; }
  .login-panel { min-height: 100dvh; padding: var(--space-xl) var(--space-lg) 5rem; }
  .mobile-brand { display: block; color: var(--color-primary); font-weight: var(--font-weight-bold); margin-bottom: var(--space-xl); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }