:root {
  --ink: #3e2419; --forest: #65402c; --cream: #faf5ed; --paper: #fffdf9;
  --tan: #ead7b9; --gold: #d6a150; --clay: #80503c; --muted: #746b64; --line: #e8e1d6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: var(--ink); background: var(--cream);
}
* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--cream); }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
.app-shell { width: min(100%, 640px); min-height: 100vh; margin: auto; padding: 0 22px 100px; background: var(--paper); box-shadow: 0 0 50px rgba(36, 57, 47, .06); }
.topbar { min-height: 92px; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.brand-logo { display: block; width: 176px; height: 76px; object-fit: contain; }
.brand-mark { width: 29px; height: 29px; display: inline-grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--clay); font: 700 15px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.loading { min-height: 100vh; display: grid; place-content: center; gap: 10px; text-align: center; color: var(--muted); }
.loading .brand-mark { margin: auto; }
.loading-logo { width: 210px; height: 92px; object-fit: contain; }
.eyebrow, .card-label { margin: 0 0 7px; color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .13em; }
h1, h2, p { margin-top: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; letter-spacing: -.025em; }
h1 { margin-bottom: 8px; font-size: clamp(35px, 9vw, 46px); line-height: 1.04; }
h2 { margin: 0; font-size: 25px; }
.intro { max-width: 410px; color: var(--muted); line-height: 1.55; font-size: 15px; }
.mode-badge { padding: 9px 12px; border: 1px solid var(--line); border-radius: 100px; color: var(--forest); background: var(--paper); font-size: 12px; font-weight: 700; }
.offline-note { margin: 0 0 23px; padding: 11px 13px; border-radius: 11px; color: #755122; background: #f8eedb; font-size: 12px; line-height: 1.45; }
.logout-button { border: 0; color: var(--forest); background: none; font-size: 12px; font-weight: 700; }
.topbar-actions { display: flex; align-items: center; gap: 12px; }
.loyalty-card { margin: 29px 0 37px; padding: 25px 23px 18px; border-radius: 23px; color: var(--cream); background: var(--ink); background-image: radial-gradient(circle at 100% 0, rgba(223, 168, 77, .18), transparent 31%); box-shadow: 0 17px 30px rgba(28, 55, 46, .17); }
.card-top, .progress-copy, .card-footer, .section-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.loyalty-card .card-label { color: var(--tan); }
.points { margin: 0; font: 700 45px/1 Georgia, "Times New Roman", serif; }
.points small { font: 500 14px system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.bean-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid rgba(233,214,173,.5); border-radius: 50%; color: var(--gold); font-size: 26px; transform: rotate(-25deg); }
.progress-copy { margin: 25px 0 12px; color: var(--tan); font-size: 12px; }
.progress-copy strong { color: var(--paper); }
.stamp-row { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; }
.stamp { aspect-ratio: 1; border: 1px solid rgba(233,214,173,.45); border-radius: 50%; }
.stamp.filled { border-color: var(--gold); background: var(--gold); box-shadow: inset 0 0 0 3px var(--ink); }
.card-footer { padding-top: 18px; margin-top: 18px; border-top: 1px solid rgba(233,214,173,.18); color: var(--tan); font-size: 10px; }
.reward-section, .activity-section, .dashboard-section { margin-top: 31px; }
.section-heading { margin-bottom: 16px; }
.section-heading.compact { margin-bottom: 13px; }
.reward-badge { padding: 8px 10px; border-radius: 99px; background: #f8ead1; color: #996522; font-size: 11px; font-weight: 700; }
.reward-card { min-height: 134px; overflow: hidden; display: grid; grid-template-columns: 120px 1fr; border: 1px solid var(--line); border-radius: 17px; background: #fffdf9; }
.coffee-art { display: grid; place-items: center; color: var(--cream); font-size: 53px; background: #be7958; background-image: linear-gradient(150deg, rgba(255,255,255,.15), transparent 45%); }
.reward-content { padding: 19px 15px; display: flex; flex-direction: column; justify-content: space-between; }
.reward-content p { margin-bottom: 12px; color: #48534d; font-size: 13px; line-height: 1.4; }
.message-stack { display: grid; gap: 11px; }
.message-card { padding: 15px; border: 1px solid #ead9ba; border-radius: 14px; background: #fff8eb; }
.message-card.discount { border-color: #e4c6af; background: #fff2e9; }
.message-card.gift { border-color: #d8e4d4; background: #f0f7ed; }
.message-card p { margin: 7px 0; color: #5e554f; font-size: 13px; line-height: 1.45; }
.message-card small { color: var(--muted); font-size: 11px; }
.message-kicker { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kind-pill { padding: 4px 7px; border-radius: 999px; color: var(--forest); background: #ead9ba; font-size: 10px; font-weight: 700; }
.gift .kind-pill { background: #d8e4d4; }
.primary-button, .secondary-button, .danger-button { padding: 12px 15px; border: 0; border-radius: 10px; font-size: 12px; font-weight: 700; transition: transform .15s; }
.primary-button { color: var(--paper); background: var(--forest); }
.secondary-button { color: var(--forest); background: #e8f0e9; }
.danger-button { color: #8c352c; background: #fbe7e1; }
.primary-button:disabled, .secondary-button:disabled, .tiny-button:disabled { cursor: not-allowed; opacity: .5; }
.primary-button:not(:disabled):active, .secondary-button:active, .danger-button:active { transform: scale(.98); }
.activity-list { display: grid; }
.activity { display: grid; grid-template-columns: 39px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.activity:first-child { border-top: 1px solid var(--line); }
.activity-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 11px; background: #f4eadc; color: var(--clay); }
.activity p { margin: 0 0 3px; font-size: 13px; font-weight: 700; }
.activity time { color: var(--muted); font-size: 11px; }
.activity-points { color: var(--forest); font-size: 13px; font-weight: 700; }
.activity-points.minus { color: var(--clay); }
.empty { padding: 20px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); font-size: 13px; text-align: center; }
.login { min-height: 100vh; display: grid; align-content: center; }
.guest-view { min-height: calc(100vh - 92px); display: grid; align-content: center; }
.guest-card { margin-top: 24px; }
.guest-card h2 { font-size: 24px; }
.guest-card > p { margin: 9px 0 18px; color: var(--muted); line-height: 1.5; }
.customer-login { margin: 20px 0; padding: 16px; border: 1px solid var(--tan); border-radius: 13px; background: #fffbf5; }
.customer-login-link { display: block; margin: 18px 0 22px; text-align: center; text-decoration: none; }
.account-setup { margin: 22px 0 28px; }
.profile-page { max-width: 480px; margin: 0 auto; padding-top: 22px; }
.profile-legal { display: grid; gap: 10px; margin: 30px 0; }
.profile-legal h2 { margin-bottom: 3px; }
.profile-legal a, .legal-copy a { color: var(--forest); font-weight: 700; }
.legal-page { max-width: 580px; margin: 0 auto; padding-top: 22px; }
.legal-updated { color: var(--muted); font-size: 13px; }
.legal-copy { margin: 24px 0 48px; }
.legal-copy h2 { margin: 25px 0 8px; font-size: 22px; }
.legal-copy p { color: var(--muted); font-size: 15px; line-height: 1.6; }
.guest-steps { display: grid; grid-template-columns: 29px 1fr; gap: 10px 11px; align-items: center; }
.guest-steps span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--paper); background: var(--forest); font-size: 12px; font-weight: 700; }
.guest-steps p { margin: 0; color: var(--ink); font-size: 14px; font-weight: 600; }
.login-card, .panel { padding: 21px; border: 1px solid var(--line); border-radius: 18px; background: #fffdf9; }
.login-card { margin-top: 25px; box-shadow: 0 16px 35px rgba(36, 57, 47, .07); }
.form-grid { display: grid; gap: 11px; }
label { font-size: 12px; font-weight: 700; }
input, select, textarea { width: 100%; padding: 13px; border: 1px solid #ddd6ca; border-radius: 10px; color: var(--ink); background: white; outline-color: var(--forest); }
.optional { color: var(--muted); font-weight: 400; }
.field-group { display: grid; gap: 7px; }
.field-group-highlight { padding: 14px; border: 1px solid var(--tan); border-radius: 12px; background: #fffbf5; }
.field-hint { margin: -4px 0 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
.consent-check { display: flex; align-items: flex-start; gap: 9px; color: var(--muted); font-size: 12px; font-weight: 400; line-height: 1.45; }
.consent-check input { width: auto; min-height: auto; margin: 2px 0 0; accent-color: var(--forest); }
.legal-footer { display: flex; justify-content: center; gap: 16px; margin: 25px 0 8px; }
.legal-footer a { color: var(--muted); font-size: 12px; }
.new-customer-page .panel { border: 2px solid var(--tan); box-shadow: 0 13px 30px rgba(62, 36, 25, .07); }
.new-customer-page input { min-height: 48px; background: #fff; }
textarea { min-height: 92px; resize: vertical; }
.login-help { margin-top: 16px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.employee-grid { display: grid; gap: 18px; }
.employee-grid > :only-child { grid-column: 1 / -1; }
.new-customer-page { max-width: 480px; margin: 0 auto; padding-top: 22px; }
.team-page { max-width: 980px; margin: 0 auto; padding-top: 22px; }
.team-navigation { display: flex; flex-wrap: wrap; gap: 7px; margin: 21px 0 0; }
.team-navigation a { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--forest); background: #fffdf9; font-size: 11px; font-weight: 700; text-decoration: none; }
.team-navigation a.active { border-color: var(--forest); color: var(--paper); background: var(--forest); }
.team-menu { display: grid; gap: 12px; margin-top: 26px; }
.team-menu-card { display: block; min-height: 125px; padding: 18px; border: 1px solid var(--tan); border-radius: 16px; color: var(--ink); background: #fffdf9; text-decoration: none; }
.team-menu-card span { color: var(--clay); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.team-menu-card h2 { margin: 7px 0 6px; color: var(--forest); font-size: 23px; }
.team-menu-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.team-grid { display: grid; gap: 18px; margin-top: 26px; }
.team-grid-single { grid-template-columns: minmax(0, 1fr); }
.team-panel { min-width: 0; }
.team-panel h3 { margin: 7px 0 0; font-family: Georgia, "Times New Roman", serif; font-size: 18px; }
.team-subheading { margin: 24px 0 0 !important; padding-top: 18px; border-top: 1px dashed var(--tan); }
.team-list { display: grid; gap: 9px; margin-top: 17px; }
.team-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; padding: 12px 0; border-top: 1px solid var(--line); }
.team-item p { margin: 0 0 4px; font-size: 13px; font-weight: 700; }
.team-item small { display: block; color: var(--muted); font-size: 11px; line-height: 1.45; }
.team-item.is-done { opacity: .58; }
.team-item.is-done p { text-decoration: line-through; }
.team-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; }
.team-status { width: auto; min-width: 105px; padding: 8px; font-size: 11px; }
.team-admin-form { margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--tan); }
.shift-calculation { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.shift-calculation > div { padding: 13px; border: 1px solid var(--tan); border-radius: 12px; background: #fffbf5; }
.shift-calculation span, .shift-calculation small { display: block; color: var(--muted); font-size: 10px; }
.shift-calculation strong { display: block; margin: 4px 0; color: var(--forest); font: 700 21px/1.1 Georgia, "Times New Roman", serif; }
.shift-report-item { align-items: center; }
.shift-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) 135px; align-items: end; gap: 11px; margin-top: 20px; padding: 12px; border: 1px solid var(--tan); border-radius: 13px; background: #fffdf9; }
.shift-toolbar .card-label { margin-bottom: 4px; }
.shift-toolbar h3 { margin: 0; color: var(--forest); }
.shift-toolbar label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.shift-toolbar input { padding: 9px; }
.shift-view-tabs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.shift-view-tabs button { padding: 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--forest); background: white; font-size: 11px; font-weight: 700; }
.shift-view-tabs button.active { border-color: var(--forest); color: var(--paper); background: var(--forest); }
.schedule-book { display: grid; gap: 12px; margin-top: 14px; }
.schedule-day { overflow: hidden; border: 1px solid var(--tan); border-radius: 14px; background: #fffbf5; }
.schedule-day.has-own-shift { border: 2px solid var(--forest); background: #f1f8ef; }
.schedule-day h3 { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 0; padding: 11px 13px; color: var(--forest); background: #f5ead9; font-size: 17px; }
.schedule-day.has-own-shift h3 { background: #dcebd9; }
.schedule-day h3 span { padding: 4px 7px; border-radius: 99px; color: var(--paper); background: var(--forest); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 10px; }
.schedule-entry { display: grid; grid-template-columns: 78px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 12px 13px; border-top: 1px solid var(--line); }
.schedule-entry.is-own-shift { background: #e9f4e6; }
.schedule-entry time { padding-top: 2px; color: var(--clay); font-size: 12px; font-weight: 700; }
.schedule-entry p { margin: 0 0 3px; font-size: 13px; font-weight: 700; }
.schedule-entry small { display: block; color: var(--muted); font-size: 11px; line-height: 1.4; }
.swap-request-form { grid-column: 2 / -1; display: grid; gap: 8px; margin-top: 3px; padding-top: 10px; border-top: 1px dashed var(--tan); }
.swap-request-form textarea { min-height: 60px; }
.swap-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.swap-requests { margin-top: 5px; }
.time-tracking { margin-top: 18px; padding: 14px; border: 1px solid var(--tan); border-radius: 14px; background: #fffdf9; }
.time-tracking h3 { margin: 3px 0 12px; color: var(--forest); }
.time-clock-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 9px; }
.time-clock-form label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.time-clock-form input { padding: 10px; }
.time-clock-status { margin: 0 0 12px; color: var(--muted); font-size: 13px; }
.time-clock-status strong { color: var(--forest); }
.time-month-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 15px; padding: 11px 12px; border-radius: 11px; color: var(--forest); background: #eaf4e8; }
.time-month-total span { color: var(--muted); font-size: 11px; font-weight: 700; }
.time-month-total strong, .time-staff-group header strong { font: 700 18px/1.1 Georgia, "Times New Roman", serif; }
.time-summary { margin: 0 0 12px; padding: 11px; border: 1px solid var(--tan); border-radius: 11px; background: #f5ead9; }
.time-summary > p { margin: 0 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; }
.time-summary-list { display: grid; gap: 5px; }
.time-summary-list > div, .time-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 12px; }
.time-summary-list strong, .time-summary-total strong { color: var(--forest); }
.time-summary-total { margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--tan); color: var(--forest); font-weight: 700; }
.time-search { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.time-search input { padding: 9px; }
.time-entry-list, .time-staff-list { display: grid; gap: 7px; margin-top: 12px; }
.time-staff-group { overflow: hidden; border: 1px solid var(--line); border-radius: 11px; background: white; }
.time-staff-group header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; color: var(--forest); background: #f5ead9; }
.time-staff-group header span { color: var(--muted); font-size: 11px; font-weight: 700; }
.time-entry-row { display: grid; grid-template-columns: 98px minmax(0, 1fr) auto auto; gap: 9px; align-items: center; padding: 9px 11px; border-top: 1px solid var(--line); font-size: 12px; }
.time-entry-row time { color: var(--clay); font-weight: 700; }
.time-entry-row small { color: var(--muted); }
.time-entry-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.time-entry-edit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; align-items: end; padding: 10px 11px; border-top: 1px dashed var(--tan); background: #fdf8f1; }
.time-entry-edit label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 700; }
.time-entry-edit input { padding: 8px; }
.order-category { color: var(--forest) !important; font-weight: 700 !important; }
.closing-overview { margin-top: 5px; }
.closing-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.closing-summary > div { padding: 11px; border: 1px solid var(--tan); border-radius: 12px; background: #fffbf5; }
.closing-summary .closing-total { border-color: var(--forest); background: #eff6ef; }
.closing-summary span, .closing-summary small { display: block; color: var(--muted); font-size: 10px; }
.closing-summary strong { display: block; margin: 4px 0; color: var(--forest); font: 700 18px/1.1 Georgia, "Times New Roman", serif; }
.reservation-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-top: 20px; padding: 12px; border: 1px solid var(--tan); border-radius: 12px; background: #fffdf9; }
.reservation-toolbar .card-label { margin-bottom: 4px; }
.reservation-toolbar h3 { margin: 0 0 3px; color: var(--forest); font-size: 18px; }
.reservation-toolbar small { color: var(--muted); font-size: 11px; }
.reservation-toolbar label { display: grid; gap: 5px; min-width: 138px; color: var(--muted); font-size: 11px; font-weight: 700; }
.reservation-toolbar input { padding: 9px; }
.reservation-book { display: grid; gap: 14px; margin-top: 20px; }
.reservation-day { overflow: hidden; border: 1px solid var(--tan); border-radius: 14px; background: #fffbf5; }
.reservation-day h3 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0; padding: 11px 13px; color: var(--forest); background: #f5ead9; font-family: Georgia, "Times New Roman", serif; font-size: 17px; }
.reservation-day h3 span { color: var(--muted); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 10px; font-weight: 700; }
.reservation-entry { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 12px 13px; border-top: 1px solid var(--line); }
.reservation-actions { display: grid; gap: 6px; min-width: 92px; }
.reservation-entry time { padding-top: 2px; color: var(--clay); font-size: 12px; font-weight: 700; }
.reservation-entry p { margin: 0 0 3px; font-size: 13px; font-weight: 700; }
.reservation-entry p span, .reservation-entry small { color: var(--muted); font-size: 11px; font-weight: 400; }
.reservation-entry small { display: block; line-height: 1.4; }
.visit-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.visit-option { min-height: 78px; padding: 8px 3px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: white; font-size: 10px; }
.visit-option span, .visit-option b { display: block; }
.visit-option span { margin-bottom: 4px; font-size: 19px; }
.visit-option b { margin-top: 3px; color: var(--forest); }
.visit-option.selected { border: 2px solid var(--forest); background: #eff6ef; }
.customer-grid { display: grid; gap: 10px; }
.customer-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; }
.customer-row p { margin: 0 0 3px; font-size: 14px; font-weight: 700; }
.customer-row small { color: var(--muted); }
.row-actions { display: flex; align-items: center; gap: 7px; }
.tiny-button { padding: 7px 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--forest); background: white; font-size: 11px; font-weight: 700; }
.tiny-button.delete { color: #953b34; }
.link-box { margin-top: 13px; padding: 12px; border-radius: 11px; background: #f5eee2; }
.link-box p { margin-bottom: 7px; font-size: 12px; font-weight: 700; }
.access-link { overflow-wrap: anywhere; color: var(--forest); font-size: 12px; line-height: 1.45; }
.link-actions { display: flex; gap: 8px; margin-top: 10px; }
.customer-qr-button, .scan-button { width: 100%; margin-top: 12px; }
.qr-overlay { position: fixed; z-index: 20; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(45, 28, 20, .58); }
.qr-dialog { position: relative; width: min(100%, 390px); max-height: calc(100vh - 40px); overflow: auto; padding: 25px; border-radius: 20px; color: var(--ink); background: var(--paper); box-shadow: 0 24px 65px rgba(0, 0, 0, .24); text-align: center; }
.qr-dialog h2 { margin-bottom: 14px; }
.qr-dialog > p:not(.eyebrow):not(.status) { color: var(--muted); font-size: 13px; line-height: 1.45; }
.qr-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; color: var(--ink); background: #f2eadf; font-size: 25px; line-height: 1; }
.qr-canvas { display: grid; place-items: center; min-height: 210px; margin: 18px auto; padding: 10px; border-radius: 14px; background: white; }
.qr-canvas img, .qr-canvas canvas { display: block; max-width: 100%; height: auto; }
.qr-canvas-inline { width: 200px; min-height: 200px; margin: 13px 0; }
.qr-reader { overflow: hidden; min-height: 220px; margin: 16px 0 10px; border-radius: 14px; background: #19120e; }
.qr-reader video { display: block; width: 100%; }
.scanner-dialog .secondary-button { width: 100%; }
.image-scan-button { display: block; margin: 10px 0; cursor: pointer; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.status { min-height: 18px; margin: 2px 0 0; color: var(--clay); font-size: 12px; }
.toast { position: fixed; z-index: 3; left: 50%; bottom: 28px; width: max-content; max-width: calc(100vw - 32px); padding: 12px 16px; border-radius: 99px; opacity: 0; pointer-events: none; color: white; background: var(--ink); box-shadow: 0 5px 20px rgba(0,0,0,.17); font-size: 13px; transform: translate(-50%, 15px); transition: .25s ease; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 480px) { .topbar { align-items: flex-start; flex-wrap: wrap; gap: 8px; padding: 12px 0; } .brand-logo { width: 132px; height: 58px; } .topbar-actions { max-width: 190px; flex-wrap: wrap; justify-content: flex-end; gap: 6px 9px; } .topbar-actions .logout-button { font-size: 11px; } .closing-summary { grid-template-columns: 1fr; } .shift-toolbar { grid-template-columns: 1fr; } .shift-toolbar label { width: 100%; } .schedule-entry { grid-template-columns: 68px minmax(0, 1fr); } .schedule-entry > .tiny-button { grid-column: 2; width: 100%; } .swap-request-form { grid-column: 2; } .swap-actions { grid-column: 1 / -1; justify-content: stretch; } .swap-actions .tiny-button { flex: 1; } .time-clock-form { grid-template-columns: 1fr; } .time-clock-form .primary-button { width: 100%; } .time-entry-row { grid-template-columns: 1fr; gap: 3px; } .time-entry-row .tiny-button { width: 100%; margin-top: 4px; } .time-entry-actions { display: grid; grid-template-columns: 1fr 1fr; } .time-entry-actions .tiny-button { width: 100%; } .time-entry-edit { grid-template-columns: 1fr; } .time-entry-edit .secondary-button { width: 100%; } .reservation-toolbar { align-items: stretch; flex-direction: column; } .reservation-toolbar label { width: 100%; } .reservation-entry { grid-template-columns: 47px minmax(0, 1fr); } .reservation-entry .reservation-actions { grid-column: 2; width: 100%; } .reservation-entry .team-status { width: 100%; } }
@media (min-width: 600px) { body { padding: 18px 0; } .app-shell { min-height: calc(100vh - 36px); border-radius: 26px; } .employee-grid, .team-grid { grid-template-columns: 1fr 1fr; } }