:root {
  --app-primary: #0f9f91;
  --app-primary-dark: #0b7d73;
  --app-accent: #2563eb;
  --app-background: #f4f7fb;
  --app-surface: #fff;
  --app-text: #182235;
  --app-muted: #6b7a90;
  --app-border: #dce4ee;
  --app-sidebar: #0b1526;
  --app-header-height: 68px;
  --app-sidebar-width: 252px;
  --app-sidebar-collapsed-width: 72px;
  --app-radius: 12px;
  --app-shadow: 0 10px 32px rgb(15 23 42 / 7%);
  --app-transition: 180ms ease;
}
* { box-sizing: border-box; }
html { background: var(--app-background); }
body { margin: 0; color: var(--app-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; }
a { transition: color var(--app-transition), background var(--app-transition); }
.login-page { display: grid; min-height: 100vh; min-height: 100svh; place-items: center; padding: 32px 20px; background: var(--app-background); }
.login-card { width: min(440px, 100%); padding: 36px 40px 40px; border: 1px solid var(--app-border); border-radius: 16px; background: var(--app-surface); box-shadow: var(--app-shadow); }
.login-eyebrow, .page-eyebrow, .card-kicker { margin: 0 0 8px; color: var(--app-primary-dark); font-size: .67rem; font-weight: 750; letter-spacing: .16em; }
.login-description { margin: -10px 0 24px; color: var(--app-muted); }
.button.is-primary { border-color: transparent; background: linear-gradient(110deg, var(--app-primary), var(--app-accent)); }
.admin-body { min-width: 320px; min-height: 100vh; background: var(--app-background); }
.app-header { position: fixed; z-index: 40; top: 0; right: 0; left: 0; display: flex; align-items: center; justify-content: space-between; height: var(--app-header-height); padding: 0 22px; border-bottom: 1px solid var(--app-border); background: rgb(255 255 255 / 94%); box-shadow: 0 1px 8px rgb(15 23 42 / 4%); backdrop-filter: blur(12px); }
.header-brand, .header-user { display: flex; align-items: center; }
.header-brand { gap: 14px; }
.header-brand strong { display: block; font-size: .94rem; letter-spacing: .02em; }
.header-brand small { display: block; margin-top: 2px; color: var(--app-muted); font-size: .56rem; letter-spacing: .13em; }
.menu-toggle { display: grid; width: 38px; height: 38px; place-content: center; gap: 4px; border: 1px solid var(--app-border); border-radius: 8px; background: #fff; cursor: pointer; }
.menu-toggle:hover { border-color: #b9c8d9; background: #f8fafc; }
.menu-toggle span { display: block; width: 17px; height: 2px; border-radius: 3px; background: #42526a; }
.header-user { gap: 10px; }
.user-avatar { display: grid; width: 34px; height: 34px; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--app-primary), var(--app-accent)); font-size: 0; }
.user-avatar::first-letter { font-size: .8rem; }
.user-details { display: grid; min-width: 80px; line-height: 1.25; }
.user-details strong { font-size: .78rem; }
.user-details small { color: var(--app-muted); font-size: .65rem; }
.admin-shell { display: grid; grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr); min-height: calc(100vh - var(--app-header-height) - 48px); padding-top: var(--app-header-height); transition: grid-template-columns var(--app-transition); }
.sidebar { position: fixed; z-index: 30; top: var(--app-header-height); bottom: 0; left: 0; display: flex; width: var(--app-sidebar-width); flex-direction: column; overflow: hidden; padding: 18px 14px; color: #e6edf7; background: var(--app-sidebar); transition: width var(--app-transition), transform var(--app-transition); }
.sidebar::before { position: absolute; top: -120px; left: -90px; width: 260px; height: 260px; border-radius: 50%; background: rgb(15 159 145 / 9%); content: ""; }
.sidebar-heading { position: relative; display: flex; align-items: center; gap: 11px; min-height: 44px; padding: 0 7px 14px; border-bottom: 1px solid rgb(255 255 255 / 8%); }
.sidebar-heading__mark, .sidebar-link__icon { display: grid; flex: 0 0 auto; place-items: center; font-weight: 750; }
.sidebar-heading__mark { width: 34px; height: 34px; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--app-primary), var(--app-accent)); font-size: .72rem; }
.sidebar-heading__text { display: grid; white-space: nowrap; }
.sidebar-heading__text strong { font-size: .82rem; }
.sidebar-heading__text small { margin-top: 2px; color: #72829a; font-size: .52rem; letter-spacing: .13em; }
.sidebar nav { position: relative; flex: 1; padding-top: 20px; }
.sidebar .menu-label { margin: 0 8px 8px; color: #72829a; font-size: .58rem; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.sidebar .menu-label--section { margin-top: 22px; }
.sidebar-link { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 7px 10px; border-radius: 8px; color: #aebdd0; white-space: nowrap; }
.sidebar-link:hover { color: #fff; background: rgb(255 255 255 / 6%); }
.sidebar-link.is-active { color: #fff; background: linear-gradient(100deg, rgb(15 159 145 / 22%), rgb(37 99 235 / 14%)); box-shadow: inset 3px 0 0 #2dd4bf; }
.sidebar-link__icon { width: 30px; height: 30px; border-radius: 7px; color: #7dd3fc; background: rgb(255 255 255 / 7%); font-size: .73rem; }
.sidebar-link__label { font-size: .82rem; font-weight: 600; }
.sidebar-footer { padding: 14px 10px 4px; border-top: 1px solid rgb(255 255 255 / 8%); white-space: nowrap; }
.sidebar-footer__label { margin: 0 0 4px; color: #cbd5e1; font-size: .68rem; font-weight: 650; }
.sidebar-footer__description { margin: 0; color: #72829a; font-size: .61rem; }
.menu-overlay { position: fixed; z-index: 25; inset: var(--app-header-height) 0 0; display: none; border: 0; background: rgb(2 8 23 / 55%); opacity: 0; }
.main-content { grid-column: 2; min-width: 0; min-height: calc(100vh - var(--app-header-height) - 48px); padding: 30px 32px 40px; transition: padding var(--app-transition); }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--app-border); }
.page-header .title { margin: 0 0 7px; color: var(--app-text); letter-spacing: -.025em; }
.page-header p:last-child { margin: 0; color: var(--app-muted); font-size: .86rem; }
.status-badge, .role-badge { display: inline-flex; align-items: center; border-radius: 999px; font-size: .67rem; font-weight: 700; }
.status-badge { gap: 7px; padding: 7px 11px; border: 1px solid #b9e8dc; color: #087265; background: #ecfdf8; }
.status-badge span { width: 7px; height: 7px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 3px rgb(16 185 129 / 13%); }
.status-badge--draft { border-color: #d8dee8; color: #526276; background: #f8fafc; }
.status-badge--draft span { background: #94a3b8; box-shadow: 0 0 0 3px rgb(148 163 184 / 13%); }
.sample-badge { display: inline-flex; padding: 6px 10px; border: 1px dashed #c5ceda; border-radius: 6px; color: #6b7a90; background: #fff; font-size: .66rem; font-weight: 650; }
.monthly-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 20px; }
.progress-card { min-width: 0; padding: 19px; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: #fff; box-shadow: 0 6px 22px rgb(15 23 42 / 5%); }
.progress-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; }
.progress-card__icon, .action-item__mark { display: grid; flex: 0 0 auto; place-items: center; border-radius: 9px; font-weight: 750; }
.progress-card__icon { width: 36px; height: 36px; font-size: .75rem; }
.progress-card__icon--teal, .action-item__mark--teal { color: #087265; background: #e5faf5; }
.progress-card__icon--blue, .action-item__mark--blue { color: #1d4ed8; background: #eaf2ff; }
.progress-card__icon--violet, .action-item__mark--violet { color: #6d28d9; background: #f2eafe; }
.progress-card__icon--orange { color: #b45309; background: #fff4df; }
.action-item__mark--gray { color: #526276; background: #eef2f6; }
.trend-badge { padding: 4px 7px; border-radius: 5px; color: #64748b; background: #f1f5f9; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.trend-badge.is-positive { color: #087265; background: #ecfdf8; }
.progress-card__label { margin: 0 0 3px; color: var(--app-muted); font-size: .72rem; }
.progress-card__value { margin: 0 0 14px; font-size: 1.75rem; font-weight: 750; letter-spacing: -.03em; }
.progress-card__value small { margin-left: 3px; color: #526276; font-size: .68rem; }
.progress-track, .pipeline-row__track { overflow: hidden; border-radius: 999px; background: #e9eef4; }
.progress-track { height: 5px; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--app-primary), var(--app-accent)); }
.progress-card__target { margin: 7px 0 0; color: #8491a3; font-size: .58rem; }
.dashboard-panels { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .75fr); gap: 20px; }
.panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; padding-bottom: 15px; border-bottom: 1px solid var(--app-border); }
.panel-heading .title { margin: 0; }
.notification-count { padding: 5px 8px; border-radius: 5px; color: #b91c1c; background: #fff1f2; font-size: .62rem; font-weight: 700; white-space: nowrap; }
.action-list { margin: 0 -6px; }
.action-item { position: relative; display: flex; align-items: flex-start; gap: 12px; padding: 15px 10px; border-bottom: 1px solid #edf1f5; }
.action-item:last-child { border-bottom: 0; }
.action-item.is-unread { background: linear-gradient(90deg, rgb(239 246 255 / 70%), transparent); }
.action-item__mark { width: 35px; height: 35px; font-size: .68rem; }
.action-item__content { min-width: 0; flex: 1; }
.action-item__title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.action-item__title strong { font-size: .75rem; }
.action-item__title span { color: #94a3b8; font-size: .58rem; white-space: nowrap; }
.action-item__content p { margin: 3px 0; color: #42526a; font-size: .72rem; }
.action-item__content small { display: block; overflow: hidden; color: #8491a3; font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.unread-dot { width: 7px; height: 7px; margin-top: 5px; border-radius: 50%; background: #2563eb; box-shadow: 0 0 0 3px rgb(37 99 235 / 10%); }
.panel-footer-action { padding-top: 12px; border-top: 1px solid var(--app-border); text-align: center; }
.pipeline-chart { display: grid; gap: 17px; padding: 13px 0 20px; }
.pipeline-row__label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 7px; color: #526276; font-size: .68rem; }
.pipeline-row__label strong { color: var(--app-text); }
.pipeline-row__track { height: 7px; }
.pipeline-row__track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0f9f91, #38bdf8); }
.attention-box { display: flex; align-items: flex-start; gap: 11px; padding: 13px; border: 1px solid #fde2ae; border-radius: 8px; background: #fffbeb; }
.attention-box__mark { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #d97706; font-size: .72rem; font-weight: 800; }
.attention-box strong { display: block; color: #92400e; font-size: .7rem; }
.attention-box p { margin: 2px 0 0; color: #a16207; font-size: .62rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .85fr); gap: 20px; }
.app-card { padding: 24px; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: var(--app-surface); box-shadow: var(--app-shadow); }
.app-card--welcome { position: relative; overflow: hidden; min-height: 220px; padding: 34px; color: #fff; background: linear-gradient(125deg, #0b1729, #103450); }
.app-card--welcome::after { position: absolute; right: -60px; bottom: -130px; width: 300px; height: 300px; border: 1px solid rgb(94 234 212 / 24%); border-radius: 50%; box-shadow: 0 0 0 44px rgb(37 99 235 / 5%), 0 0 0 90px rgb(15 159 145 / 4%); content: ""; }
.app-card--welcome .card-kicker { color: #5eead4; }
.app-card--welcome .title { color: #fff; }
.app-card--welcome p:last-child { max-width: 30rem; color: #b8c7da; line-height: 1.8; }
.card-header-simple { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid var(--app-border); }
.card-header-simple .title { margin: 0; }
.role-badge { padding: 5px 9px; color: #1d4ed8; background: #eff6ff; }
.user-summary { display: grid; grid-template-columns: 110px 1fr; gap: 11px; margin: 0; font-size: .81rem; }
.user-summary dt { color: var(--app-muted); }
.user-summary dd { margin: 0; font-weight: 600; }
.app-footer { display: flex; min-height: 48px; align-items: center; justify-content: space-between; margin-left: var(--app-sidebar-width); padding: 0 24px; border-top: 1px solid var(--app-border); color: var(--app-muted); background: #fff; font-size: .65rem; transition: margin-left var(--app-transition); }
.is-sidebar-collapsed .admin-shell { grid-template-columns: var(--app-sidebar-collapsed-width) minmax(0, 1fr); }
.is-sidebar-collapsed .sidebar { width: var(--app-sidebar-collapsed-width); padding-inline: 10px; }
.is-sidebar-collapsed .sidebar-heading { justify-content: center; padding-inline: 0; }
.is-sidebar-collapsed .sidebar-heading__text, .is-sidebar-collapsed .sidebar .menu-label, .is-sidebar-collapsed .sidebar-link__label, .is-sidebar-collapsed .sidebar-footer { display: none; }
.is-sidebar-collapsed .sidebar-link { justify-content: center; padding-inline: 0; }
.is-sidebar-collapsed .app-footer { margin-left: var(--app-sidebar-collapsed-width); }
.page-workspace { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr); gap: 20px; }
.page-context-menu { min-width: 0; border: 1px solid var(--app-border); border-radius: var(--app-radius); background: #fff; }
.page-workspace__content { min-width: 0; }
.placeholder-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 28px; min-height: 250px; }
.placeholder-card__mark { display: grid; width: 150px; height: 150px; place-items: center; border: 1px solid #c9e8e3; border-radius: 22px; color: var(--app-primary-dark); background: linear-gradient(145deg, #ecfdf8, #eff6ff); font-size: .9rem; font-weight: 750; }
.placeholder-card__description { color: var(--app-muted); }
.planned-items { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.planned-items span { padding: 6px 10px; border: 1px solid var(--app-border); border-radius: 6px; color: #526276; background: #f8fafc; font-size: .72rem; }
.settings-notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid #cde7f5; border-radius: 9px; color: #155e75; background: #f0f9ff; }
.settings-notice__mark { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: #0284c7; font-size: .75rem; font-weight: 800; }
.settings-notice strong { display: block; font-size: .73rem; }
.settings-notice p { margin: 3px 0 0; font-size: .66rem; line-height: 1.6; }
.site-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.site-setting-card__header, .site-identity { display: flex; align-items: flex-start; }
.site-setting-card__header { justify-content: space-between; gap: 15px; margin-bottom: 20px; padding-bottom: 17px; border-bottom: 1px solid var(--app-border); }
.site-identity { min-width: 0; gap: 12px; }
.site-identity__mark { display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, var(--app-primary), var(--app-accent)); font-size: .85rem; font-weight: 800; }
.site-identity .title { margin: 0 0 4px; }
.site-identity p:last-child { margin: 0; color: var(--app-muted); font-size: .64rem; }
.connection-badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; color: #64748b; background: #f1f5f9; font-size: .58rem; font-weight: 700; white-space: nowrap; }
.connection-badge span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; }
.connection-badge--success { color: #087265; background: #ecfdf8; }
.connection-badge--success span { background: #10b981; }
.site-credential-form .label { color: #334155; font-size: .72rem; }
.site-credential-form .input { height: 42px; border-color: #d4dde8; border-radius: 7px; font-size: .78rem; box-shadow: none; }
.site-credential-form .input:disabled { color: #526276; background: #f8fafc; opacity: 1; }
.required-label { margin-left: 5px; padding: 2px 5px; border-radius: 4px; color: #b91c1c; background: #fee2e2; font-size: .55rem; }
.credential-input-wrap { position: relative; }
.credential-input-wrap .input { padding-right: 72px; }
.credential-saved-label { position: absolute; top: 50%; right: 10px; padding: 3px 6px; border-radius: 4px; color: #087265; background: #dcfce7; font-size: .55rem; font-weight: 700; transform: translateY(-50%); }
.site-setting-card__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; padding: 11px 0; border-top: 1px solid var(--app-border); border-bottom: 1px solid var(--app-border); color: var(--app-muted); font-size: .65rem; }
.site-setting-card__meta strong { color: #42526a; }
.site-setting-card__actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 16px; }
.settings-flow { margin-top: 18px; }
.settings-flow__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 18px 0 0; padding: 0; list-style: none; }
.settings-flow__steps li { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border: 1px solid var(--app-border); border-radius: 8px; background: #f8fafc; }
.settings-flow__steps li > span { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: #fff; background: var(--app-primary); font-size: .62rem; font-weight: 800; }
.settings-flow__steps strong { display: block; font-size: .66rem; }
.settings-flow__steps p { margin: 3px 0 0; color: var(--app-muted); font-size: .58rem; line-height: 1.5; }
.implementation-guide { margin-top: 28px; overflow: hidden; border: 1px solid #b9cfdf; border-radius: 13px; background: #fff; box-shadow: var(--app-shadow); }
.implementation-guide__heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 23px 25px; color: #fff; background: linear-gradient(120deg, #0b1729, #123955); }
.implementation-guide__heading .card-kicker { color: #5eead4; }
.implementation-guide__heading .title { margin: 0 0 5px; color: #fff; }
.implementation-guide__heading p:last-child { margin: 0; color: #afbed1; font-size: .68rem; }
.task-status-badge { padding: 6px 9px; border: 1px solid rgb(94 234 212 / 28%); border-radius: 6px; color: #99f6e4; background: rgb(15 159 145 / 12%); font-size: .6rem; font-weight: 700; white-space: nowrap; }
.implementation-guide__body { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(250px, .6fr); }
.implementation-steps { margin: 0; padding: 12px 24px; list-style: none; }
.implementation-steps li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--app-border); }
.implementation-steps li:last-child { border-bottom: 0; }
.implementation-steps__number { color: #9aa7b7; font-size: .7rem; font-weight: 800; letter-spacing: .08em; }
.implementation-steps strong { display: block; font-size: .72rem; }
.implementation-steps p { margin: 3px 0 0; color: var(--app-muted); font-size: .63rem; line-height: 1.55; }
.step-tag { padding: 4px 7px; border-radius: 5px; color: #526276; background: #eef2f6; font-size: .56rem; font-weight: 700; }
.completion-checklist { padding: 24px; border-left: 1px solid var(--app-border); background: #f8fafc; }
.completion-checklist .title { margin-bottom: 14px; }
.completion-checklist ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.completion-checklist li { display: flex; align-items: center; gap: 8px; color: #42526a; font-size: .65rem; }
.completion-checklist li span { display: grid; width: 19px; height: 19px; place-items: center; border-radius: 50%; color: #087265; background: #dcfce7; font-size: .58rem; font-weight: 800; }
.document-reference { margin-top: 20px; padding-top: 15px; border-top: 1px solid var(--app-border); }
.document-reference span { display: block; margin-bottom: 6px; color: var(--app-muted); font-size: .57rem; }
.document-reference code { display: block; overflow-wrap: anywhere; color: #1d4ed8; background: transparent; font-size: .58rem; }
.employee-list-card { padding: 0; overflow: hidden; }
.employee-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--app-border); }
.employee-list-heading .title { margin: 0; }
.employee-count { color: var(--app-muted); font-size: .59rem; font-weight: 700; letter-spacing: .08em; }
.employee-table-wrap { overflow-x: auto; }
.employee-table { min-width: 800px; margin: 0; font-size: .72rem; }
.employee-table th { padding: 11px 14px; border-color: var(--app-border); color: #64748b; background: #f8fafc; font-size: .6rem; letter-spacing: .04em; }
.employee-table td { padding: 12px 14px; border-color: #e9eef4; vertical-align: middle; }
.employee-name-cell { display: flex; align-items: center; gap: 9px; }
.employee-name-cell > span { display: grid; width: 31px; height: 31px; place-items: center; overflow: hidden; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--app-primary), var(--app-accent)); font-size: 0; }
.employee-name-cell > span::first-letter { font-size: .68rem; }
.employee-name-cell strong { font-size: .72rem; }
.employee-table code { color: #42526a; background: #f1f5f9; font-size: .65rem; }
.employee-status { display: inline-flex; align-items: center; gap: 5px; font-size: .62rem; font-weight: 700; }
.employee-status span { width: 6px; height: 6px; border-radius: 50%; }
.employee-status.is-active { color: #087265; }
.employee-status.is-active span { background: #10b981; }
.employee-status.is-inactive { color: #64748b; }
.employee-status.is-inactive span { background: #94a3b8; }
.employee-form { padding: 0; overflow: hidden; }
.employee-form__section { padding: 24px; border-bottom: 1px solid var(--app-border); }
.employee-form__section .title { margin-bottom: 18px; }
.employee-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.employee-form .label { color: #334155; font-size: .72rem; }
.employee-form .input, .employee-form .select select { height: 42px; border-color: #d4dde8; border-radius: 7px; font-size: .78rem; box-shadow: none; }
.employee-form__password { max-width: 560px; }
.optional-label { margin-left: 5px; padding: 2px 5px; border-radius: 4px; color: #526276; background: #eef2f6; font-size: .55rem; }
.employee-form__actions { display: flex; justify-content: flex-end; gap: 9px; padding: 18px 24px; background: #f8fafc; }
.page-header-actions, .issue-actions { display: flex; gap: 9px; }
.customer-list-card { padding: 0; overflow: hidden; }
.customer-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 22px; border-bottom: 1px solid var(--app-border); }
.customer-list-toolbar .title { margin: 0; }
.customer-filter-sample { display: flex; width: min(410px, 50%); gap: 8px; }
.customer-table { min-width: 820px; margin: 0; font-size: .7rem; }
.customer-table th { padding: 11px 14px; border-color: var(--app-border); color: #64748b; background: #f8fafc; font-size: .6rem; }
.customer-table td { padding: 13px 14px; border-color: #e9eef4; vertical-align: middle; }
.customer-table td:first-child strong, .customer-table td:first-child small { display: block; }
.customer-table td:first-child small { margin-top: 4px; color: var(--app-muted); font-size: .59rem; line-height: 1.55; }
.customer-access-badge, .request-status, .issue-status { display: inline-flex; align-items: center; border-radius: 999px; font-size: .6rem; font-weight: 700; }
.customer-access-badge { padding: 5px 8px; }
.customer-access-badge.is-form { color: #0369a1; background: #e0f2fe; }
.customer-access-badge.is-account { color: #6d28d9; background: #f3e8ff; }
.request-status { padding: 4px 7px; }
.request-status.is-waiting { color: #b45309; background: #fff7ed; }
.request-status.is-complete { color: #087265; background: #ecfdf8; }
.customer-form-sample { padding: 0; overflow: hidden; }
.customer-form-section { padding: 24px; border-bottom: 1px solid var(--app-border); }
.customer-form-section .title { margin-bottom: 17px; }
.section-description { margin: -8px 0 18px; color: var(--app-muted); font-size: .7rem; }
.customer-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; }
.customer-form-sample .label { color: #334155; font-size: .72rem; }
.customer-form-sample .input, .customer-form-sample .select select { height: 42px; border-color: #d4dde8; border-radius: 7px; font-size: .78rem; box-shadow: none; }
.access-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.access-type-card { display: flex; align-items: flex-start; gap: 12px; padding: 17px; border: 1px solid var(--app-border); border-radius: 10px; cursor: pointer; transition: border-color var(--app-transition), background var(--app-transition); }
.access-type-card:has(input:checked) { border-color: #58b9af; background: #f0fdfa; box-shadow: inset 0 0 0 1px #99e1d8; }
.access-type-card input { margin-top: 13px; accent-color: var(--app-primary); }
.access-type-card__mark { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg, var(--app-primary), var(--app-accent)); font-size: .63rem; font-weight: 800; }
.access-type-card strong, .access-type-card small { display: block; }
.access-type-card strong { margin: 2px 0 5px; font-size: .74rem; }
.access-type-card small { color: var(--app-muted); font-size: .63rem; line-height: 1.55; }
.access-result { display: none; margin-top: 15px; padding: 14px 16px; border-left: 3px solid var(--app-primary); border-radius: 0 8px 8px 0; background: #f8fafc; }
.access-result.is-visible { display: block; }
.access-result strong { font-size: .72rem; }
.access-result p { margin: 4px 0; color: var(--app-muted); font-size: .64rem; }
.access-result a { font-size: .64rem; font-weight: 700; }
.customer-detail-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: 18px; margin-bottom: 18px; }
.customer-profile { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 13px; margin: 0; font-size: .7rem; }
.customer-profile dt { color: var(--app-muted); }
.customer-profile dd { margin: 0; font-weight: 600; }
.customer-issuance .title { margin-bottom: 10px; }
.issue-status { padding: 4px 8px; color: #b45309; background: #fff7ed; }
.issue-status.is-issued { color: #087265; background: #ecfdf8; }
.sample-url { margin: 14px 0; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 7px; color: #526276; background: #f8fafc; font-size: .62rem; overflow-wrap: anywhere; }
.customer-future-area { margin-bottom: 18px; }
.future-empty { padding: 26px; border: 1px dashed #cbd5e1; border-radius: 9px; text-align: center; background: #f8fafc; }
.future-empty > span { display: grid; width: 40px; height: 40px; place-items: center; margin: 0 auto 10px; border-radius: 50%; color: var(--app-primary-dark); background: #dff8f4; font-size: 1.2rem; }
.future-empty strong { display: block; font-size: .73rem; }
.future-empty p { max-width: 620px; margin: 5px auto 0; color: var(--app-muted); font-size: .65rem; line-height: 1.6; }
.customer-history .title { margin-bottom: 16px; }
.history-sample { display: grid; grid-template-columns: 90px 170px 1fr; gap: 12px; padding: 12px 0; border-top: 1px solid var(--app-border); font-size: .66rem; }
.history-sample span, .history-sample p { color: var(--app-muted); }
.customer-preview-body { min-height: 100vh; background: #f2f6fa; }
.customer-preview-header { display: flex; align-items: center; justify-content: space-between; height: 62px; padding: 0 max(20px, calc((100vw - 980px) / 2)); border-bottom: 1px solid var(--app-border); background: #fff; }
.customer-preview-header a { color: var(--app-text); font-size: .86rem; font-weight: 750; }
.customer-preview-header span, .preview-label { padding: 5px 8px; border-radius: 5px; color: #526276; background: #eef2f6; font-size: .58rem; font-weight: 700; }
.customer-preview-main { width: min(940px, calc(100% - 32px)); margin: 34px auto; }
.customer-facing-card { width: min(680px, 100%); margin: 0 auto; padding: 36px; border: 1px solid var(--app-border); border-radius: 15px; background: #fff; box-shadow: var(--app-shadow); }
.customer-login-card { max-width: 460px; }
.customer-facing-card .title { margin: 15px 0 9px; }
.customer-facing-lead { margin-bottom: 24px; color: var(--app-muted); font-size: .76rem; line-height: 1.7; }
.preview-pending-box { margin-bottom: 22px; padding: 23px; border: 1px dashed #93c5bd; border-radius: 9px; color: #0f766e; background: #f0fdfa; text-align: center; }
.preview-pending-box strong { display: block; font-size: .73rem; }
.preview-pending-box p { margin-top: 5px; font-size: .64rem; }
.preview-footnote { margin-top: 15px; color: var(--app-muted); font-size: .59rem; text-align: center; }
.customer-portal-welcome { margin-bottom: 18px; padding: 30px; border-radius: 14px; color: #fff; background: linear-gradient(120deg, #0b1729, #123955); }
.customer-portal-welcome .page-eyebrow { margin-top: 14px; color: #5eead4; }
.customer-portal-welcome .title { margin-bottom: 7px; color: #fff; }
.customer-portal-welcome p:last-child { color: #afbed1; font-size: .72rem; }
.customer-portal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }
.customer-portal-empty { min-height: 180px; padding: 21px; border: 1px solid var(--app-border); border-radius: 11px; background: #fff; box-shadow: var(--app-shadow); }
.customer-portal-empty span { display: block; margin-bottom: 26px; color: #94a3b8; font-size: .65rem; font-weight: 800; }
.customer-portal-empty strong { display: block; margin-bottom: 7px; font-size: .75rem; }
.customer-portal-empty p { color: var(--app-muted); font-size: .64rem; line-height: 1.6; }
.property-workspace { display: grid; grid-template-columns: 275px minmax(0, 1fr); align-items: start; gap: 18px; transition: grid-template-columns var(--app-transition); }
.property-filter { position: sticky; top: calc(var(--app-header-height) + 18px); max-height: calc(100dvh - var(--app-header-height) - 36px); padding: 20px; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
.property-filter__heading, .property-results__toolbar, .band-editor-canvas__heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.property-filter__heading { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--app-border); }
.property-filter__heading .title, .property-results__toolbar .title, .band-editor-canvas__heading .title { margin: 0; }
.filter-collapse { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 1px solid var(--app-border); border-radius: 7px; color: #526276; background: #fff; cursor: pointer; font-size: 1.15rem; }
.property-filter .field { margin-bottom: 17px; }
.property-filter .label, .band-editor-tools .label { color: #334155; font-size: .68rem; }
.property-filter .checkbox { display: block; margin: 7px 0; font-size: .66rem; }
.property-filter .input, .property-filter .select select, .band-editor-tools .input { height: 38px; border-color: #d4dde8; font-size: .7rem; box-shadow: none; }
.filter-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.filter-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; font-size: .63rem; }
.property-filter .button + .button, .band-editor-tools .button + .button { margin-top: 8px; }
.property-results { min-width: 0; }
.property-results__toolbar { margin-bottom: 12px; padding: 17px 19px; }
.property-results__toolbar small { margin-left: 5px; color: var(--app-muted); font-size: .62rem; font-weight: 500; }
.property-result-list { display: grid; gap: 12px; }
.property-result-card { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 18px; padding: 15px; }
.property-result-card.is-text-only { grid-template-columns: minmax(0, 1fr); }
.property-thumb { position: relative; display: grid; min-height: 155px; place-items: center; overflow: hidden; border-radius: 9px; color: #fff; text-align: center; }
.property-thumb.is-teal { background: linear-gradient(145deg, #0f766e, #155e75); }.property-thumb.is-blue { background: linear-gradient(145deg, #1d4ed8, #3730a3); }.property-thumb.is-violet { background: linear-gradient(145deg, #7c3aed, #4f46e5); }
.property-thumb::after { position: absolute; width: 120px; height: 120px; border: 1px solid rgb(255 255 255 / 20%); border-radius: 50%; content: ''; box-shadow: 0 0 0 28px rgb(255 255 255 / 4%); }
.property-thumb span { position: absolute; z-index: 1; top: 9px; left: 9px; padding: 4px 7px; border-radius: 4px; background: rgb(0 0 0 / 24%); font-size: .55rem; }
.property-thumb strong { z-index: 1; font-size: .68rem; letter-spacing: .08em; }
.property-result-card__body { min-width: 0; }
.property-result-meta { display: flex; justify-content: space-between; gap: 10px; color: var(--app-muted); font-size: .56rem; }
.property-result-card h3 { margin: 8px 0 3px; font-size: .88rem; font-weight: 750; }
.property-result-card__body > p { margin: 0; color: var(--app-muted); font-size: .64rem; }
.property-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 8px; }
.property-facts strong { color: #dc2626; font-size: .94rem; }.property-facts span { padding: 4px 7px; border-radius: 5px; background: #f1f5f9; font-size: .6rem; }
.property-station { color: #42526a !important; }.property-result-actions { display: flex; justify-content: flex-end; gap: 7px; margin-top: 12px; }
.is-filter-collapsed.property-workspace { grid-template-columns: 52px minmax(0, 1fr); }.is-filter-collapsed .property-filter { padding: 10px; }.is-filter-collapsed .property-filter__heading { justify-content: center; margin: 0; padding: 0; border: 0; }.is-filter-collapsed .property-filter__heading > div, .is-filter-collapsed .property-filter form { display: none; }
.property-detail-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(290px, .65fr); gap: 18px; margin-bottom: 18px; }
.property-detail-image { display: grid; min-height: 330px; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(145deg, #0f766e, #155e75); text-align: center; }.property-detail-image span { position: absolute; opacity: 0; }.property-detail-image strong { letter-spacing: .12em; }
.property-gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 10px; }.property-gallery-thumbs span { padding: 20px 5px; border-radius: 6px; color: var(--app-muted); background: #eef2f6; font-size: .58rem; text-align: center; }
.property-detail-price { display: block; margin-bottom: 18px; color: #dc2626; font-size: 1.4rem; }.property-overview dl { display: grid; grid-template-columns: 90px 1fr; gap: 11px; font-size: .67rem; }.property-overview dt { color: var(--app-muted); }.property-overview dd { margin: 0; font-weight: 600; }
.property-source-data { margin-bottom: 18px; }.source-data-grid { display: grid; grid-template-columns: 1fr 1fr 180px; gap: 14px; }.source-data-grid div { min-width: 0; padding: 12px; border-radius: 7px; background: #f8fafc; }.source-data-grid small, .source-data-grid code, .source-data-grid strong { display: block; }.source-data-grid small { margin-bottom: 5px; color: var(--app-muted); font-size: .57rem; }.source-data-grid code { overflow: hidden; color: #2563eb; background: transparent; font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }.source-data-grid strong { font-size: .65rem; }
.floorplan-future { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.floorplan-future .title { margin-bottom: 7px; }.floorplan-future p:last-child { color: var(--app-muted); font-size: .66rem; line-height: 1.65; }.floorplan-future > span { flex: 0 0 auto; padding: 7px 10px; border-radius: 6px; color: #6d28d9; background: #f3e8ff; font-size: .6rem; font-weight: 700; }
.band-editor-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 18px; }.band-editor-tools { position: sticky; top: calc(var(--app-header-height) + 18px); }.band-editor-tools .title { margin-bottom: 18px; }.band-color { padding: 4px !important; }.band-position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.company-image-slot { margin: 6px 0 16px; padding: 12px; border: 1px dashed #cbd5e1; border-radius: 7px; background: #f8fafc; }.company-image-slot strong { font-size: .67rem; }.company-image-slot p { margin: 4px 0 10px; color: var(--app-muted); font-size: .58rem; line-height: 1.5; }.band-editor-canvas { min-width: 0; }.band-editor-canvas__heading { margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid var(--app-border); }.canvas-stage { display: grid; overflow: auto; padding: 20px; place-items: center; border-radius: 8px; background: #dce4ee; }.canvas-stage canvas { width: min(500px, 100%); height: auto; background: #fff; box-shadow: 0 10px 30px rgb(15 23 42 / 18%); }
@media (max-width: 980px) { .dashboard-grid { grid-template-columns: 1fr; } }
@media (max-width: 1100px) { .monthly-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .dashboard-panels { grid-template-columns: 1fr; } }
@media (max-width: 1050px) { .site-settings-grid { grid-template-columns: 1fr; } .settings-flow__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  :root { --app-header-height: 60px; }
  .app-header { padding: 0 12px; }
  .header-brand small, .user-details { display: none; }
  .header-user { gap: 7px; }
  .user-avatar { width: 30px; height: 30px; }
  .admin-shell, .is-sidebar-collapsed .admin-shell { display: block; padding-top: var(--app-header-height); }
  .sidebar, .is-sidebar-collapsed .sidebar { top: var(--app-header-height); width: min(84vw, 280px); padding: 18px 14px; transform: translateX(-105%); }
  .is-sidebar-collapsed .sidebar-heading { justify-content: flex-start; padding-inline: 7px; }
  .is-sidebar-collapsed .sidebar-heading__text, .is-sidebar-collapsed .sidebar .menu-label, .is-sidebar-collapsed .sidebar-link__label, .is-sidebar-collapsed .sidebar-footer { display: initial; }
  .is-sidebar-collapsed .sidebar-heading__text { display: grid; }
  .is-sidebar-collapsed .sidebar .menu-label, .is-sidebar-collapsed .sidebar-footer { display: block; }
  .is-sidebar-collapsed .sidebar-link__label { display: inline; }
  .is-sidebar-collapsed .sidebar-link { justify-content: flex-start; padding-inline: 10px; }
  .is-menu-open .sidebar { transform: translateX(0); box-shadow: 18px 0 50px rgb(2 8 23 / 25%); }
  .is-menu-open .menu-overlay { display: block; opacity: 1; }
  .main-content { min-height: calc(100vh - var(--app-header-height)); padding: 22px 16px 32px; }
  .page-header { align-items: flex-start; flex-direction: column; gap: 14px; }
  .app-card--welcome { min-height: 190px; padding: 26px 22px; }
  .user-summary { grid-template-columns: 1fr; gap: 4px; }
  .user-summary dd { margin-bottom: 9px; }
  .app-footer, .is-sidebar-collapsed .app-footer { margin-left: 0; padding-inline: 16px; }
  .page-workspace { grid-template-columns: 1fr; }
  .placeholder-card { grid-template-columns: 1fr; }
  .placeholder-card__mark { width: 100%; height: 90px; }
  .monthly-summary { grid-template-columns: 1fr; }
  .panel-heading { align-items: flex-start; flex-direction: column; }
  .settings-flow__steps { grid-template-columns: 1fr; }
  .implementation-guide__heading { align-items: flex-start; flex-direction: column; }
  .implementation-guide__body { grid-template-columns: 1fr; }
  .completion-checklist { border-top: 1px solid var(--app-border); border-left: 0; }
  .implementation-steps { padding-inline: 16px; }
  .implementation-steps li { grid-template-columns: 34px minmax(0, 1fr); }
  .implementation-steps .step-tag { display: none; }
  .employee-form-grid { grid-template-columns: 1fr; }
  .customer-list-toolbar { align-items: stretch; flex-direction: column; }
  .customer-filter-sample { width: 100%; }
  .customer-form-grid, .access-type-grid, .customer-detail-grid, .customer-portal-grid { grid-template-columns: 1fr; }
  .page-header-actions, .issue-actions { width: 100%; }
  .page-header-actions .button, .issue-actions .button { flex: 1; }
  .history-sample { grid-template-columns: 1fr; gap: 4px; }
  .customer-facing-card { padding: 25px 20px; }
  .property-workspace, .is-filter-collapsed.property-workspace, .property-detail-grid, .band-editor-layout { grid-template-columns: 1fr; }
  .property-filter, .band-editor-tools { position: static; }
  .property-filter { max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .is-filter-collapsed .property-filter { padding: 10px; }.is-filter-collapsed .property-filter__heading > div, .is-filter-collapsed .property-filter form { display: block; }.is-filter-collapsed .property-filter__heading { justify-content: space-between; margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--app-border); }
  .property-result-card { grid-template-columns: 1fr; }.property-thumb { min-height: 130px; }.source-data-grid { grid-template-columns: 1fr; }.floorplan-future { align-items: flex-start; flex-direction: column; }
  .employee-form__actions { align-items: stretch; flex-direction: column-reverse; }
  .employee-form__actions .button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; } }

.settings-feedback { margin-bottom: 18px; font-size: .72rem; }
.site-setting-error { margin-bottom: 16px; font-size: .7rem; }
.site-login-link { display: grid; gap: 4px; margin-top: 16px; font-size: .63rem; }
.site-login-link span { color: var(--app-muted); font-weight: 700; }
.site-login-link a { overflow-wrap: anywhere; }
.site-setting-card__meta strong { text-align: right; }
@media (max-width: 900px) {
  .site-settings-grid { grid-template-columns: 1fr; }
}

.company-band-setting { margin-top: 24px; }
.company-band-placeholder { display: grid; gap: 8px; min-height: 140px; margin: 18px 0; padding: 24px; place-content: center; border: 2px dashed var(--app-border); border-radius: 8px; color: var(--app-muted); background: #f8fafc; text-align: center; }
.company-band-placeholder p { font-size: .8rem; }

.additional-conditions { border-top: 1px solid var(--app-border); margin-top: 20px; padding-top: 16px; }
.condition-group { padding: 12px 0; border-bottom: 1px solid var(--app-border); }
.condition-group summary { font-weight: 600; cursor: pointer; font-size: .8rem; }
.condition-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; padding-top: 8px; }
.property-filter .condition-options .checkbox { font-size: .75rem; line-height: 1.5; }

.rent-range { display: flex; align-items: center; gap: 6px; }
.rent-range label { display: flex; align-items: center; gap: 3px; min-width: 0; flex: 1; font-size: .75rem; white-space: nowrap; }
.rent-range .input { width: 100%; min-width: 0; }

/* Shared navigation lives in the header; page-specific filters stay in the content. */
.app-header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; }
.header-nav { display: flex; align-items: stretch; align-self: stretch; min-width: 0; overflow-x: auto; scrollbar-width: thin; }
.header-nav > a, .header-nav__pending { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 5px; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--app-text); font-size: .88rem; font-weight: 600; white-space: nowrap; }
.header-nav > a:hover { background: #f1f5f9; color: var(--app-primary); }
.header-nav > a[aria-current="page"] { color: var(--app-primary); border-bottom-color: var(--app-primary); background: #f0f7ff; }
.header-nav > a:focus-visible { outline: 2px solid var(--app-primary); outline-offset: -4px; }
.header-nav__pending { color: #64748b; cursor: default; }
.header-nav__pending small { padding: 2px 5px; border-radius: 4px; background: #edf1f5; font-size: .6rem; }
.admin-shell, .is-sidebar-collapsed .admin-shell { display: block; }
.app-footer, .is-sidebar-collapsed .app-footer { margin-left: 0; }
@media (max-width: 1399px) {
  :root { --app-header-height: 112px; }
  .app-header { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 60px 52px; column-gap: 12px; row-gap: 0; }
  .header-user { grid-column: 2; grid-row: 1; }
  .header-nav { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 768px) {
  .header-nav > a, .header-nav__pending { padding-inline: 13px; font-size: .82rem; }
  .header-brand strong { font-size: .8rem; }
}

/* Sale search form */
.sale-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
.sale-heading .title { margin-bottom: 0; }
.sale-tabs { display: flex; gap: 8px; border-bottom: 1px solid var(--app-border); margin-bottom: 22px; overflow-x: auto; }
.sale-tabs a { padding: 13px 24px; border-bottom: 3px solid transparent; white-space: nowrap; color: var(--app-muted); font-weight: 700; }
.sale-tabs a[aria-current="page"] { color: var(--app-primary); border-color: var(--app-primary); }
.sale-layout { display: grid; grid-template-columns: 350px minmax(0, 1fr); gap: 24px; align-items: start; }
.sale-filter { position: sticky; top: calc(var(--app-header-height) + 16px); max-height: calc(100dvh - var(--app-header-height) - 32px); overflow-y: auto; border: 1px solid var(--app-border); border-radius: 12px; background: white; scrollbar-gutter: stable; }
.sale-filter__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 18px 16px; }
.sale-filter__heading h2 { font-size: .95rem; font-weight: 700; }
.sale-field { min-width: 0; padding: 0 16px 20px; margin: 0; border: 0; }
.sale-field legend { display: block; width: calc(100% + 32px); margin: 0 -16px 12px; padding: 8px 16px; background: #f2f3f6; color: #526174; font-size: .88rem; font-weight: 700; }
.sale-range { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.sale-range input { min-width: 0; width: 100%; }
.sale-range span { flex-shrink: 0; font-size: .82rem; }
.sale-options { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.sale-field .checkbox, .sale-filter__actions .checkbox { display: inline-flex; align-items: center; gap: 4px; font-size: .82rem; line-height: 1.5; }
.sale-field input[type="checkbox"], .sale-filter__actions input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--app-primary); }
.sale-filter__actions { padding: 16px; border-top: 1px solid var(--app-border); background: #fafcfe; }
.sale-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.sale-results { min-width: 0; }
.sale-results__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: white; border: 1px solid var(--app-border); border-radius: 10px; padding: 20px; }
.sale-results__bar h2 { font-weight: 700; }
.sale-empty { padding: 70px 24px; text-align: center; color: var(--app-muted); }
.sale-empty > span { display: block; font-size: 4rem; color: #bbc9d7; }
.sale-empty h3 { margin: 12px 0; font-size: 1.2rem; font-weight: 700; color: var(--app-text); }
.sale-empty p { line-height: 1.9; margin-top: 14px; }
.sale-dialog { margin: auto; width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 24px; border: 0; border-radius: 14px; color: var(--app-text); background: white; }
.sale-dialog::backdrop { background: rgb(15 23 42 / 45%); }
.sale-dialog__heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; font-weight: 700; }
@media (max-width: 768px) { .sale-layout { grid-template-columns: 1fr; } .sale-filter { position: static; max-height: none; } .sale-tabs a { padding-inline: 18px; } .sale-heading { align-items: flex-start; } }

/* PATTO identity: original transparent logo, shared light application palette. */
.patto-brand { display: block; width: 186px; flex-shrink: 0; }
.patto-brand img { display: block; width: 100%; height: auto; }
.patto-brand:focus-visible { outline: 2px solid var(--app-primary); outline-offset: 2px; border-radius: 4px; }
.login-logo { display: block; width: 290px; max-width: 100%; height: auto; margin: 0 auto; }
.login-tagline { margin: 0 0 30px; text-align: center; color: var(--app-muted); font-size: 12px; line-height: 1.8; }
.login-card .title { margin-bottom: 20px; font-size: 23px; }
.login-card .login-description { font-size: 13px; line-height: 1.7; }
.login-card .input { height: 46px; border-radius: 8px; box-shadow: none; }
.login-card .input:focus { border-color: var(--app-primary); box-shadow: 0 0 0 3px rgb(15 159 145 / 12%); }
.login-card .field { margin-bottom: 20px; }
.login-card .button.is-primary { height: 46px; margin-top: 8px; background: var(--app-primary); border-radius: 8px; font-weight: 600; }
.login-card .button.is-primary:hover { background: var(--app-primary-dark); }
@media (max-width: 480px) { .login-card { padding: 28px 24px; }.patto-brand { width: 138px; } }

/* Static designer interior supplied by the user. No motion on login. */
.login-city { position: fixed; inset: 0; pointer-events: none; background: #e9edeb url('/images/patto-login-residence.jpg') left center / cover no-repeat; }
.login-page .login-card { position: relative; z-index: 1; background: rgb(255 255 255 / 96%); box-shadow: 0 24px 70px rgb(31 63 65 / 15%); }
.login-page { justify-items: end; padding: 40px clamp(32px, 6vw, 120px); }
.login-page .login-card { width: min(400px, 100%); }
@media (max-width: 1000px) {
  .login-page { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; }
  .login-city { position: relative; inset: auto; width: 100%; aspect-ratio: 1672 / 941; flex-shrink: 0; background-size: contain; }
  .login-page .login-card { width: min(440px, calc(100% - 32px)); margin: 24px auto; }
}

/* Sale filters share the rental panel geometry and form rhythm. */
.sale-search-filter .sale-field { padding: 0; margin: 0 0 17px; }
.sale-search-filter .sale-field legend { width: 100%; margin: 0 0 8px; padding: 0; background: transparent; color: #334155; font-size: .68rem; font-weight: 700; }
.sale-search-filter .sale-options { display: grid; gap: 4px 10px; }
.sale-search-filter .sale-field .checkbox { display: flex; align-items: flex-start; margin: 7px 0; font-size: .75rem; }
.sale-search-filter .sale-field input[type="checkbox"] { flex-shrink: 0; margin-top: 3px; }
.sale-search-filter .sale-range { gap: 6px; }
.sale-search-filter .sale-range span { font-size: .75rem; }
.sale-search-filter .textarea { min-height: 80px; font-size: .7rem; border-color: #d4dde8; box-shadow: none; }
.sale-search-filter .sale-filter__actions { padding: 16px 0 0; background: transparent; }
.sale-search-filter .sale-filter__actions .checkbox { display: flex; margin: 7px 0; font-size: .66rem; }
.sale-search-filter .sale-action-row { grid-template-columns: 1fr; gap: 0; }
.sale-search-filter .sale-dialog .label { margin-top: 12px; }

.band-upload-form { margin-block: 1rem; max-width: 680px; }
.band-upload-preview img { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; object-fit: contain; margin-block: .75rem; }
.band-upload-edit { margin-top: 1rem; }
.band-upload-edit summary { cursor: pointer; margin-bottom: .75rem; }
[data-band-upload] input[type=file] { max-width: 100%; }
[data-band-message], [data-band-status] { margin-block: .75rem; overflow-wrap: anywhere; }
/* Search and management actions share the PATTO logo green. */
:is(.property-workspace, .brand-actions) .button:is(.is-primary, .employee-icon-save) { background: #02918c; border-color: transparent; color: #fff; }
:is(.property-workspace, .brand-actions) .button:is(.is-primary, .employee-icon-save):hover:not(:disabled),
:is(.property-workspace, .brand-actions) .button:is(.is-primary, .employee-icon-save):active:not(:disabled) { background: #027d79; color: #fff; }
:is(.property-workspace, .brand-actions) .button:is(.is-primary, .employee-icon-save):focus-visible { outline: 2px solid #026b67; outline-offset: 3px; }
:is(.property-workspace, .brand-actions) .button:is(.is-primary, .employee-icon-save):disabled { background: #02918c; color: #fff; opacity: .5; }

/* Employee profile icons */
.employee-icon-card{padding:24px;margin-bottom:24px}
.employee-icon-controls{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.employee-icon-preview{width:96px;height:96px;flex:0 0 96px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:#e1f4f2;color:#027d79}
.employee-icon-preview>span{font-size:0}.employee-icon-preview>span::first-letter{font-size:32px}
.employee-icon-preview img,.employee-name-cell>span img,.user-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.employee-icon-controls input[type=file]{max-width:100%}
@media(max-width:600px){.employee-icon-controls{gap:16px}.employee-icon-controls>div:nth-child(2){min-width:0;width:100%}}