/* Alovio Essentials Hub — tokens from the "Booknetic Enterprise" system (Stitch). */
.ess-page, .ess-header {
    --ess-primary: #6C70DC; --ess-primary-soft: rgba(108,112,220,.12); --ess-ink: #1F2229; --ess-muted: #64748B;
    --ess-border: #E7E9EE; --ess-bg: #F4F5F9; --ess-card: #FFFFFF; --ess-success: #22C55E; --ess-warning: #F59E0B; --ess-danger: #EF4444;
    --ess-radius: 10px; --ess-radius-sm: 8px;
}
.ess-page * { box-sizing: border-box; }
/* The admin underlines every link on hover; the Hub's links are buttons, tabs, tiles and cards. */
.ess-page a, .ess-header a, .ess-page a:hover, .ess-header a:hover, .ess-page a:focus, .ess-header a:focus,
.ess-tab:hover, .ess-tab:focus, .ess-btn-ghost:hover, .ess-btn-ghost:focus, .ess-tool:hover, .ess-tool:focus,
.ess-kpi:hover, .ess-kpi:focus, .ess-feature:hover, .ess-feature:focus, .ess-pill:hover, .ess-back:hover { text-decoration: none !important; }
.ess-activity-meta a:hover, .ess-page p a:hover { text-decoration: underline !important; }
.ess-page { padding-top: 24px; }

/* header */
.ess-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ess-title-text { font-size: 28px; color: var(--ess-ink); }
.ess-back { font-size: 13px; color: var(--ess-muted); text-decoration: none; margin-right: 4px; }
.ess-back:hover { color: var(--ess-primary); }
.ess-header-actions { gap: 14px; flex-wrap: wrap; }
.ess-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; text-decoration: none; border: 1px solid var(--ess-border); background: #fff; color: var(--ess-ink); }
.ess-pill-version { background: #eef0fb; border-color: #e0e4f6; color: #4b58d6; font-weight: 600; font-size: 12px; padding: 4px 10px; }
.ess-pill-ok { background: #e9f9ef; border-color: #cdeedb; color: #15803d; }
.ess-pill-warn { background: #fff4e0; border-color: #f7dfb0; color: #b26a00; }
.ess-pill-bad { background: #fdecec; border-color: #f5c9c9; color: #b42318; }
.ess-pill .ess-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ess-tabs { display: inline-flex; background: #fff; border: 1px solid var(--ess-border); border-radius: 999px; padding: 4px; gap: 2px; }
.ess-tab { padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 500; color: var(--ess-muted); text-decoration: none; white-space: nowrap; }
.ess-tab i { margin-right: 4px; font-size: 12px; }
.ess-tab:hover { color: var(--ess-ink); }
.ess-tab.is-active { background: var(--ess-primary); color: #fff; }

/* cards */
.ess-card { background: var(--ess-card); border: 1px solid var(--ess-border); border-radius: var(--ess-radius); padding: 20px 24px; }
.ess-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.ess-card-head h3, .ess-section > h3, .ess-h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--ess-ink); }
.ess-h3 { margin: 26px 0 12px; }
.ess-section { margin-bottom: 16px; }
.ess-section > h3 { margin-bottom: 12px; }
.ess-section > h3 i { color: var(--ess-primary); margin-right: 6px; }
.ess-muted { color: var(--ess-muted); font-size: 13px; }
.ess-dim { color: #a0a7b4; }
.ess-mt { margin-top: 10px; }
.ess-nowrap { white-space: nowrap; }
.ess-btn-ghost { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: var(--ess-radius-sm); font-size: 13px; font-weight: 500; color: var(--ess-primary); text-decoration: none; background: transparent; border: 0; cursor: pointer; white-space: nowrap; }
.ess-btn-ghost:hover { background: var(--ess-primary-soft); color: var(--ess-primary); }
.ess-btn-sm { padding: 5px 10px; font-size: 12px; border-radius: var(--ess-radius-sm); border: 1px solid var(--ess-border); background: #fff; color: var(--ess-ink); cursor: pointer; white-space: nowrap; }
.ess-btn-sm:hover { border-color: var(--ess-primary); color: var(--ess-primary); }

/* KPIs */
.ess-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 8px; }
.ess-kpi { display: flex; flex-direction: column; gap: 6px; background: #fff; border: 1px solid var(--ess-border); border-radius: var(--ess-radius); padding: 18px 20px; text-decoration: none; color: inherit; transition: border-color .15s; }
a.ess-kpi:hover { border-color: rgba(108,112,220,.5); }
.ess-kpi-label { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ess-muted); }
.ess-kpi-value { font-size: 26px; font-weight: 700; color: var(--ess-ink); line-height: 1.1; }
.ess-kpi-sub { font-size: 12.5px; color: var(--ess-muted); }
.ess-kpi.ess-tone-warn .ess-kpi-sub { color: #b26a00; font-weight: 500; }
.ess-kpi.ess-tone-ok .ess-kpi-sub { color: #15803d; }
.ess-kpi.ess-tone-muted .ess-kpi-value { color: #a0a7b4; }
.ess-spark { display: block; width: 100%; height: 26px; margin-top: 6px; color: var(--ess-primary); overflow: visible; }
.ess-kpi.ess-tone-warn .ess-spark { color: var(--ess-warning); }
.ess-kpi-spark-label { font-size: 11px; color: #a0a7b4; }
.ess-kpi-bar { display: block; height: 5px; border-radius: 3px; background: #eceef3; margin-top: 8px; overflow: hidden; }
.ess-kpi-bar span { display: block; height: 100%; background: var(--ess-primary); border-radius: 3px; }
.ess-kpi.ess-tone-warn .ess-kpi-bar span { background: var(--ess-warning); }

.ess-whatsnew { position: relative; }
.ess-whatsnew.has-new::after { content: ""; position: absolute; top: 2px; right: 2px; width: 7px; height: 7px; border-radius: 50%; background: var(--ess-warning); }
.ess-changelog { max-width: 900px; }
.ess-installed { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; }
.ess-release-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ess-release .ess-about { margin-bottom: 10px; }

/* quick tools */
.ess-tools { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 24px; }
.ess-tool { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid var(--ess-border); border-radius: var(--ess-radius); padding: 14px 16px; text-decoration: none; color: var(--ess-ink); font-weight: 500; font-size: 14px; transition: border-color .15s, transform .15s; }
.ess-tool:hover { border-color: rgba(108,112,220,.5); color: var(--ess-ink); transform: translateY(-1px); }
.ess-tool-label { flex: 1 1 auto; }
.ess-tool-arrow { color: #c3c8d4; font-size: 12px; }
.ess-tool-sm { padding: 10px 12px; margin-bottom: 8px; }

/* icon tiles */
.ess-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 9px; font-size: 15px; flex: 0 0 auto; background: var(--ess-primary-soft); color: var(--ess-primary); }
.ess-icon-booking { background: #e8ecff; color: #4b58d6; }
.ess-icon-pricing { background: #e3f6ea; color: #1f8f4c; }
.ess-icon-payment { background: #fff4e0; color: #b26a00; }
.ess-icon-notifications { background: #fdeef4; color: #b83280; }
.ess-icon-admin { background: #e9ebef; color: #374151; }
.ess-icon-lg { width: 56px; height: 56px; font-size: 22px; border-radius: 14px; }

/* two-column */
.ess-two-col { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.ess-side { display: flex; flex-direction: column; gap: 16px; }
.ess-card-table { padding: 16px 0 0; overflow-x: auto; }
.ess-card-table .ess-card-head { padding: 0 24px; }

/* toolbar */
.ess-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 24px 14px; }
.ess-search { position: relative; flex: 1 1 240px; min-width: 200px; }
.ess-search i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: #a0a7b4; font-size: 13px; }
.ess-search-input { width: 100%; height: 40px; padding: 0 12px 0 34px; border: 1px solid var(--ess-border); border-radius: var(--ess-radius-sm); font-size: 13.5px; background: #fff; }
.ess-search-input:focus { outline: 0; border-color: var(--ess-primary); box-shadow: 0 0 0 3px rgba(108,112,220,.18); }
.ess-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ess-chip { border: 1px solid var(--ess-border); background: #fff; color: var(--ess-muted); padding: 7px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; cursor: pointer; }
.ess-chip span { color: #a0a7b4; margin-left: 2px; }
.ess-chip:hover { color: var(--ess-ink); }
.ess-chip.is-active { background: var(--ess-primary); border-color: var(--ess-primary); color: #fff; }
.ess-chip.is-active span { color: rgba(255,255,255,.75); }
.ess-segmented { display: inline-flex; background: #f1f3f6; border-radius: 999px; padding: 3px; }
.ess-segmented button { border: 0; background: transparent; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 500; color: var(--ess-muted); cursor: pointer; }
.ess-segmented button.is-active { background: #fff; color: var(--ess-ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }

/* table */
.ess-table { width: 100%; border-collapse: collapse; table-layout: auto; }
/* The feature table leads with a wide name+description cell; other tables don't. */
.ess-table:not(.ess-table-activity) th:first-child, .ess-table:not(.ess-table-activity) td:first-child { width: 46%; min-width: 300px; }
.ess-table .ess-feature-text span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ess-table th { text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ess-muted); padding: 10px 24px; border-top: 1px solid var(--ess-border); border-bottom: 1px solid var(--ess-border); background: #fafbfd; }
.ess-table td { padding: 14px 24px; border-bottom: 1px solid #f0f2f5; vertical-align: middle; font-size: 13.5px; color: var(--ess-ink); }
.ess-table tbody tr:last-child td { border-bottom: 0; }
.ess-table tbody tr:hover td { background: #fafbfe; }
.ess-row.is-off .ess-feature-text b, .ess-row.is-off .ess-icon { opacity: .55; }
.ess-feature { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
.ess-feature-text { display: flex; flex-direction: column; min-width: 0; }
.ess-feature-text b { font-size: 14px; font-weight: 600; color: var(--ess-ink); }
.ess-feature-text span { font-size: 12.5px; color: var(--ess-muted); line-height: 1.4; }
.ess-feature:hover b { color: var(--ess-primary); }
.ess-badge { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ess-badge-tenant { background: var(--ess-primary-soft); color: #4b58d6; }
.ess-badge-admin { background: #e9ebef; color: #374151; }
.ess-badge-group { background: #f1f3f6; color: var(--ess-muted); }
.ess-badge-type { background: #f1f3f6; color: var(--ess-muted); text-transform: capitalize; font-weight: 500; }
.ess-plans { white-space: nowrap; color: var(--ess-muted); }
.ess-actions { white-space: nowrap; text-align: right; }
.ess-actions .ess-btn-ghost { padding: 5px 8px; }
/* In the overview's narrower column the actions collapse to icons. */
.ess-two-col .ess-action-text { display: none; }
.ess-two-col .ess-actions .ess-btn-ghost { padding: 6px 7px; font-size: 14px; }
.ess-two-col .ess-table th:first-child, .ess-two-col .ess-table td:first-child { min-width: 240px; width: 50%; }
.ess-two-col .ess-plans { font-size: 12.5px; }
.ess-th-actions { text-align: right; }
.ess-empty { padding: 30px; text-align: center; color: var(--ess-muted); }
.ess-table-activity td { padding: 10px 24px; vertical-align: top; }
.ess-table-activity th:nth-child(1), .ess-table-activity td:nth-child(1) { width: 1%; white-space: nowrap; color: var(--ess-muted); }
.ess-table-activity th:nth-child(2), .ess-table-activity td:nth-child(2) { width: 1%; white-space: nowrap; }
.ess-table-activity th:nth-child(3), .ess-table-activity td:nth-child(3) { width: 1%; white-space: nowrap; }
.ess-table-activity th:nth-child(4), .ess-table-activity td:nth-child(4) { width: auto; }
.ess-table-activity th:nth-child(5), .ess-table-activity td:nth-child(5) { width: 1%; white-space: nowrap; }

/* toggle */
.ess-toggle { position: relative; display: inline-block; width: 44px; height: 26px; margin: 0; cursor: pointer; vertical-align: middle; }
.ess-toggle input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.ess-toggle-track { position: absolute; inset: 0; background: #d4d9e4; border-radius: 999px; transition: background .2s; }
.ess-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(20,28,50,.28); transition: transform .2s cubic-bezier(.3,.8,.4,1); }
.ess-toggle input:checked + .ess-toggle-track { background: var(--ess-primary); }
.ess-toggle input:checked + .ess-toggle-track .ess-toggle-thumb { transform: translateX(18px); }
.ess-toggle input:focus-visible + .ess-toggle-track { box-shadow: 0 0 0 3px rgba(108,112,220,.28); }
.ess-toggle.is-busy { opacity: .6; pointer-events: none; }
.ess-toggle-sm { width: 38px; height: 22px; }
.ess-toggle-sm .ess-toggle-thumb { width: 16px; height: 16px; }
.ess-toggle-sm input:checked + .ess-toggle-track .ess-toggle-thumb { transform: translateX(16px); }

/* health */
.ess-health { list-style: none; margin: 0; padding: 0; }
.ess-health-item { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; border-bottom: 1px solid #f0f2f5; flex-wrap: wrap; }
.ess-health-item:last-child { border-bottom: 0; }
.ess-health-item .ess-dot { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex: 0 0 auto; background: var(--ess-success); }
.ess-health-item.is-warn .ess-dot { background: var(--ess-warning); }
.ess-health-body { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; }
.ess-health-item .ess-btn-sm { flex: 0 0 auto; align-self: flex-start; margin-left: auto; }
/* In the narrow side column (overview) the action drops onto its own full-width line. */
.ess-side .ess-health-item .ess-btn-sm { width: 100%; margin: 10px 0 0; text-align: center; }
.ess-health-body b { font-size: 13.5px; color: var(--ess-ink); }
.ess-health-body span { font-size: 12.5px; color: var(--ess-muted); line-height: 1.4; }

/* activity */
.ess-activity-chart { margin: 0 0 10px; color: var(--ess-primary); }
.ess-activity { list-style: none; margin: 0; padding: 0; }
.ess-activity-item { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid #f0f2f5; }
.ess-activity-item:last-child { border-bottom: 0; }
.ess-activity-dot { width: 9px; height: 9px; border-radius: 50%; background: #c3c8d4; margin-top: 6px; flex: 0 0 auto; }
.ess-activity-item.ess-tone-ok .ess-activity-dot { background: var(--ess-primary); }
.ess-activity-item.ess-tone-warn .ess-activity-dot { background: var(--ess-danger); }
.ess-activity-msg { font-size: 13.5px; color: var(--ess-ink); line-height: 1.4; }
.ess-activity-meta { font-size: 12px; color: var(--ess-muted); margin-top: 2px; }
.ess-activity-meta a { color: var(--ess-primary); text-decoration: none; }

/* detail */
.ess-detail-head { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.ess-detail-title { flex: 1 1 auto; min-width: 0; }
.ess-detail-title h2 { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--ess-ink); }
.ess-detail-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ess-detail-status { display: flex; align-items: center; gap: 10px; }
.ess-status-label { font-size: 13px; font-weight: 600; color: var(--ess-muted); }
.ess-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 20px; align-items: start; }
.ess-about { font-size: 14.5px; line-height: 1.65; color: #2b3340; margin: 0; }
.ess-steps { margin: 0; padding-left: 22px; }
.ess-steps li { margin-bottom: 8px; line-height: 1.55; color: #2b3340; }
.ess-list { list-style: none; margin: 0; padding: 0; }
.ess-list li { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; line-height: 1.5; color: #2b3340; font-size: 14px; }
.ess-list li i { color: var(--ess-primary); margin-top: 4px; font-size: 12px; flex: 0 0 auto; }
.ess-section-notes .ess-list li i { color: var(--ess-warning); }
.ess-info { display: flex; gap: 12px; background: #f6f7fb; border-radius: var(--ess-radius-sm); padding: 14px 16px; }
.ess-info i { color: var(--ess-primary); font-size: 18px; margin-top: 2px; }
.ess-info b { display: block; margin-bottom: 4px; }
.ess-info p { margin: 0; color: var(--ess-muted); font-size: 13.5px; line-height: 1.5; }
.ess-notice { display: flex; gap: 16px; align-items: flex-start; }
.ess-notice i { font-size: 28px; color: var(--ess-warning); }
.ess-notice p { color: var(--ess-muted); margin: 6px 0 12px; }
.ess-plans-list { list-style: none; margin: 0; padding: 0; }
.ess-plans-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0f2f5; font-size: 13.5px; }
.ess-plans-list li:last-child { border-bottom: 0; }
.ess-plans-list .ess-dot { width: 9px; height: 9px; border-radius: 50%; background: #d4d9e4; flex: 0 0 auto; }
.ess-plans-list li.is-on .ess-dot { background: var(--ess-primary); }
.ess-plan-name { flex: 1 1 auto; color: var(--ess-ink); }
.ess-plans-list li.is-inactive .ess-plan-name { color: #a0a7b4; }
.ess-plan-state { font-size: 12px; color: var(--ess-muted); }
.ess-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ess-stat { background: #f6f7fb; border-radius: var(--ess-radius-sm); padding: 10px 12px; display: flex; flex-direction: column; }
.ess-stat-value { font-size: 18px; font-weight: 700; color: var(--ess-ink); }
.ess-stat-label { font-size: 12px; color: var(--ess-muted); }
.ess-stat.ess-tone-warn .ess-stat-value { color: #b26a00; }
.ess-stat.ess-tone-ok .ess-stat-value { color: #15803d; }

/* forms */
.ess-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ess-field > label { font-size: 13px; font-weight: 600; color: var(--ess-ink); margin: 0; }
.ess-field .form-control { height: 42px; border-radius: var(--ess-radius-sm); border-color: var(--ess-border); font-size: 13.5px; }
.ess-field .form-control:focus { border-color: var(--ess-primary); box-shadow: 0 0 0 3px rgba(108,112,220,.18); }
.ess-help { color: var(--ess-muted); font-size: 12.5px; }
.ess-fields-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ess-input-suffix { display: flex; align-items: center; gap: 10px; }
.ess-input-suffix .form-control { max-width: 140px; }
.ess-input-suffix span { color: var(--ess-muted); font-size: 13px; }
.ess-form-actions { display: flex; align-items: center; gap: 14px; margin-top: 8px; }
.ess-form-status { font-size: 13px; color: #15803d; }
.ess-form-status.is-error { color: var(--ess-danger); }
.ess-sticky { position: sticky; bottom: 0; padding: 14px 0 6px; background: linear-gradient(to top, var(--ess-bg) 70%, rgba(244,245,249,0)); }
.ess-maint-actions { margin-top: 14px; }
.ess-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 4px; }

/* toast */
.ess-toast { position: fixed; right: 24px; bottom: 24px; z-index: 99999; display: flex; align-items: center; gap: 14px; background: #1F2229; color: #fff; padding: 12px 16px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-size: 13.5px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; }
.ess-toast.is-in { opacity: 1; transform: none; }
.ess-toast.is-error { background: #b23b3b; }
.ess-toast .ess-toast-undo { background: rgba(255,255,255,.14); border: 0; color: #fff; padding: 6px 12px; border-radius: 8px; font-weight: 600; cursor: pointer; }
.ess-toast .ess-toast-undo:hover { background: rgba(255,255,255,.24); }

@media (max-width: 1280px) {
    .ess-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ess-tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ess-two-col, .ess-detail-grid { grid-template-columns: minmax(0, 1fr); }
    .ess-fields-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .ess-tools { grid-template-columns: 1fr 1fr; }
    .ess-tabs { display: none; }
}