:root {
  --ink: #1e2924;
  --muted: #748078;
  --cream: #f4f3ec;
  --surface: #fff;
  --line: #e6e8e2;
  --green: #174f3d;
  --green-2: #26705a;
  --sage: #7f978b;
  --mint: #dcecdf;
  --peach: #f4c9a9;
  --peach-2: #f6a376;
  --peach-soft: #f8dcc8;
  --yellow: #f3df97;
  --danger: #b95045;
  --shadow: 0 18px 45px rgba(28, 54, 42, .09);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font: 14px/1.5 "DM Sans", sans-serif;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { opacity: .55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
[hidden] { display: none !important; }

.auth-screen { min-height: 100vh; display: grid; grid-template-columns: minmax(430px, 46%) 1fr; }
.auth-brand {
  position: relative; overflow: hidden; min-height: 100vh; padding: 48px 8%;
  color: #fff; background: var(--green);
  display: flex; flex-direction: column; justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; font: 800 24px "Manrope"; }
.brand-light { color: #fff; position: relative; z-index: 2; }
.brand-logo {
  display: block;
  width: 172px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}
.brand-light {
  width: max-content;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 16px 34px rgba(0, 0, 0, .12);
}
.checkout-summary .brand {
  width: max-content;
  padding: 8px 10px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .94);
}
.auth-message { position: relative; z-index: 2; max-width: 580px; }
.eyebrow { text-transform: uppercase; letter-spacing: .18em; font-weight: 700; font-size: 11px; color: #b8d4c8; }
.auth-message h1 { margin: 20px 0; font: 800 clamp(42px, 5vw, 70px)/1.03 "Manrope"; letter-spacing: -.05em; }
.auth-message h1 em { color: var(--peach); font-style: normal; }
.auth-message p { max-width: 500px; color: #c6d9d0; font-size: 17px; }
.auth-proof { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; color: #c6d9d0; }
.auth-proof p { margin: 0; }
.auth-proof strong { color: #fff; }
.proof-avatars { display: flex; }
.proof-avatars span {
  width: 36px; height: 36px; display: grid; place-items: center; margin-left: -8px;
  border: 2px solid var(--green); border-radius: 50%; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 700;
}
.proof-avatars span:first-child { margin-left: 0; background: var(--peach); }
.proof-avatars span:last-child { background: var(--yellow); }
.brand-orbit { position: absolute; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; }
.orbit-one { width: 520px; height: 520px; right: -190px; top: 15%; }
.orbit-two { width: 300px; height: 300px; right: -40px; top: 28%; }
.auth-panel { min-height: 100vh; display: grid; place-items: center; padding: 40px; background: #fafaf7; }
.auth-card { width: min(440px, 100%); }
.auth-card h2 { margin: 0 0 8px; font: 800 32px/1.2 "Manrope"; letter-spacing: -.03em; }
.muted { color: var(--muted); }
.mobile-brand { display: none; margin-bottom: 36px; }
.mobile-brand-logo { display: block; width: 176px; max-width: 100%; height: auto; }
.form-stack { display: grid; gap: 18px; margin-top: 32px; }
.form-stack.compact { gap: 14px; }
label { display: grid; gap: 8px; color: #445149; font-weight: 600; font-size: 13px; }
input, select, textarea {
  width: 100%; border: 1px solid #dfe3dc; border-radius: 12px; outline: 0;
  padding: 13px 14px; color: var(--ink); background: #fff; transition: .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--green-2); box-shadow: 0 0 0 3px rgba(38,112,90,.1); }
textarea { min-height: 90px; resize: vertical; }
.password-wrap { position: relative; display: block; }
.password-wrap input { padding-right: 48px; }
.password-wrap button { position: absolute; right: 8px; top: 7px; }
.button {
  border: 0; border-radius: 12px; padding: 13px 18px; display: inline-flex; align-items: center;
  justify-content: center; gap: 12px; font-weight: 700; transition: .2s; text-decoration: none;
}
.button:hover { transform: translateY(-1px); }
.button-primary { color: #fff; background: var(--green); box-shadow: 0 8px 18px rgba(23,79,61,.16); }
.button-secondary { color: var(--green); background: #e6efe9; }
.button-light { color: var(--ink); background: #fff; border: 1px solid var(--line); }
.button-danger { color: #fff; background: var(--danger); }
.button-full { width: 100%; justify-content: space-between; margin-top: 4px; }
.auth-switch { margin-top: 28px; text-align: center; color: var(--muted); }
.auth-switch button { border: 0; background: transparent; color: var(--green-2); font-weight: 700; }
.demo-hint { display: flex; gap: 12px; margin-top: 28px; padding: 14px; border-radius: 12px; background: #edf3ee; color: #57645c; font-size: 12px; }
.demo-dot { width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: #48a879; box-shadow: 0 0 0 4px rgba(72,168,121,.14); }

.checkout-screen { min-height: 100vh; display: grid; place-items: center; padding: 34px; background: radial-gradient(circle at 18% 18%, #eef6f0, transparent 32%), #fbfaf6; }
.checkout-card { width: min(1040px, 100%); display: grid; grid-template-columns: minmax(0, .9fr) minmax(360px, .65fr); overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: #fff; box-shadow: var(--shadow); }
.checkout-summary { display: grid; align-content: start; gap: 22px; padding: 42px; color: #fff; background: linear-gradient(145deg, var(--green), #1d6c55); }
.checkout-summary .brand { color: #fff; }
.checkout-summary h1 { margin: 0; font: 900 42px/1.05 "Manrope"; }
.checkout-summary p { max-width: 520px; margin: 0; color: #dcebe3; font-size: 16px; }
.checkout-plan-box { display: grid; gap: 6px; margin-top: 8px; padding: 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 18px; background: rgba(255,255,255,.08); }
.checkout-plan-box small, .checkout-plan-box span { color: #dcebe3; }
.checkout-plan-box strong { font: 900 28px "Manrope"; }
.checkout-plan-box b { color: var(--peach); font-size: 22px; }
.checkout-benefits { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.checkout-benefits li { display: flex; gap: 10px; align-items: center; color: #eef8f2; }
.checkout-benefits li::before { content: "✓"; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--green); background: var(--peach); font-weight: 900; }
.checkout-form { display: grid; align-content: start; gap: 16px; padding: 42px; background: #fff; }
.checkout-form h2 { margin: 0 0 6px; font: 900 28px "Manrope"; }
.checkout-form label { display: grid; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 800; }
.checkout-form input, .checkout-form select { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; font: inherit; }
.mp-field { min-height: 47px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.progress-bar { width: 100%; accent-color: var(--green); }
.compact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }

.marketing-screen {
  min-height: 100vh; padding-top: 72px; background: #fbfaf6; color: var(--ink); overflow-x: clip;
}
#top, #recursos, #funcionalidades, #planos, #depoimentos, #faq, #contato { scroll-margin-top: 92px; }
.marketing-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90; height: 72px; margin: 0 auto; padding: 0 max(34px, calc((100vw - 1500px) / 2 + 34px));
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(251,250,246,.94); border-bottom: 1px solid rgba(230,232,226,.72); backdrop-filter: blur(16px);
}
.marketing-nav nav { display: flex; align-items: center; gap: 34px; font-weight: 800; font-size: 13px; }
.marketing-nav a { color: var(--ink); text-decoration: none; }
.marketing-actions { display: flex; align-items: center; gap: 14px; }
.marketing-actions .text-button { color: var(--ink); font-size: 13px; }
.marketing-screen main { max-width: 1500px; margin: 0 auto; padding: 0 34px; }
.marketing-hero {
  position: relative; min-height: 560px; display: grid; align-items: center; padding: 48px 0 36px;
}
.marketing-hero::before {
  content: ""; position: absolute; inset: 0 -34px auto -34px; height: 100%;
  background: radial-gradient(circle at 78% 18%, rgba(244,201,169,.38), transparent 34%),
    linear-gradient(180deg, #fbfaf6 0%, #f7f3ec 100%);
  z-index: 0;
}
.hero-copy { position: relative; z-index: 2; width: min(610px, 58%); }
.hero-pill {
  display: inline-flex; align-items: center; margin-bottom: 24px; padding: 8px 16px; border-radius: 999px;
  color: var(--green); background: #e8f3ec; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em;
}
.hero-copy h1 { margin: 0; font: 800 72px/1.02 "Manrope"; letter-spacing: -.04em; color: var(--green); }
.hero-copy h1 em { display: block; color: #e0b693; font-style: normal; }
.hero-copy p { max-width: 570px; margin: 22px 0 26px; color: #21352d; font-size: 19px; line-height: 1.45; }
.hero-actions, .hero-proof { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.hero-proof { margin-top: 26px; gap: 28px; color: #416056; font-size: 13px; font-weight: 700; }
.product-preview {
  position: absolute; z-index: 1; right: 0; top: 70px; width: min(760px, 56vw); min-height: 382px;
  overflow: hidden; display: block; padding: 10px; border: 1px solid rgba(23,79,61,.12); border-radius: 26px;
  background: rgba(255,255,255,.74); box-shadow: 0 24px 70px rgba(28,54,42,.12); backdrop-filter: blur(10px);
  text-align: left; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.product-preview:hover { transform: translateY(-3px); border-color: rgba(23,79,61,.3); box-shadow: 0 30px 78px rgba(28,54,42,.18); }
.product-preview:focus-visible { outline: 3px solid rgba(23,79,61,.3); outline-offset: 4px; }
.product-preview img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  image-rendering: -webkit-optimize-contrast; transform: translateZ(0);
}
.product-preview-hint {
  position: absolute; right: 24px; bottom: 24px; padding: 9px 13px; border-radius: 9px;
  color: #fff; background: rgba(15,74,56,.9); font-size: 12px; font-weight: 800;
  box-shadow: 0 8px 22px rgba(21,36,29,.2); opacity: 0; transform: translateY(5px); transition: opacity .2s ease, transform .2s ease;
}
.product-preview:hover .product-preview-hint, .product-preview:focus-visible .product-preview-hint { opacity: 1; transform: translateY(0); }
.preview-lightbox {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 72px 28px 28px;
  background: rgba(11,27,21,.82); backdrop-filter: blur(10px);
}
.preview-lightbox-content { width: min(1500px, 96vw); max-height: calc(100vh - 100px); overflow: auto; border-radius: 14px; box-shadow: 0 30px 90px rgba(0,0,0,.35); }
.preview-lightbox-content img { width: 100%; height: auto; display: block; background: #fff; }
.preview-lightbox-close {
  position: fixed; top: 20px; right: 24px; width: 42px; height: 42px; display: grid; place-items: center;
  border: 1px solid rgba(255,255,255,.28); border-radius: 10px; color: #fff; background: rgba(255,255,255,.12); font-size: 28px; line-height: 1;
}
.preview-lightbox-close:hover, .preview-lightbox-close:focus-visible { background: rgba(255,255,255,.22); outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }
body.preview-lightbox-open { overflow: hidden; }
.marketing-section, .pricing-section, .faq-section, .marketing-cta { position: relative; z-index: 2; padding: 28px 0; }
.marketing-section h2, .pricing-section h2, .faq-section h2 { margin: 0 0 20px; text-align: center; font: 800 24px "Manrope"; }
.feature-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.feature-grid article, .pricing-grid article, .testimonial-card {
  border: 1px solid var(--line); border-radius: 14px; background: #fff; padding: 20px; box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.feature-grid i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #e8f3ec; color: var(--green); font-style: normal; }
.feature-grid i .ui-icon { width: 21px; height: 21px; }
.feature-grid h3, .pricing-grid h3 { margin: 14px 0 6px; font: 800 16px "Manrope"; }
.feature-grid p, .pricing-grid p { margin: 0; color: #526258; line-height: 1.35; }
.stats-band {
  margin: 12px 0 22px; padding: 24px 34px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  border: 1px solid #efe5d8; border-radius: 18px; background: linear-gradient(90deg, #fff, #f7efe5);
}
.stats-band strong { display: block; color: var(--green); font: 900 27px "Manrope"; }
.stats-band span { color: #51615a; font-weight: 700; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; }
.pricing-grid article { position: relative; display: grid; gap: 12px; }
.pricing-grid article.featured { border-color: var(--green); box-shadow: 0 16px 38px rgba(23,79,61,.12); }
.pricing-grid article.featured > span { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; color: #fff; background: var(--green); font-size: 11px; font-weight: 900; text-transform: uppercase; }
.pricing-grid strong { font: 900 30px "Manrope"; color: var(--ink); }
.pricing-grid small { color: var(--muted); font-size: 14px; }
.pricing-grid ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; color: #33473e; }
.pricing-grid li::before { content: "✓"; color: var(--green); font-weight: 900; margin-right: 8px; }
.faq-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; align-items: start; }
.faq-section h2 { text-align: left; }
.faq-section details { border: 1px solid var(--line); border-radius: 12px; background: #fff; margin-bottom: 10px; padding: 15px 18px; }
.faq-section summary { cursor: pointer; font-weight: 900; }
.faq-section p { color: #526258; }
.testimonials-column { display: grid; gap: 12px; }
.testimonials-column h2 { margin-bottom: 8px; }
.testimonial-card { display: grid; gap: 8px; }
.testimonial-card p { font: 700 16px/1.42 "Manrope"; margin: 0; color: #304139; }
.testimonial-card strong, .testimonial-card span { display: block; }
.testimonial-card span { color: var(--muted); }
.marketing-cta {
  margin: 16px 0 34px; padding: 28px 34px; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  border-radius: 18px; background: linear-gradient(90deg, #e8f3ec, #fff2df); border: 1px solid #dbeadd;
}
.marketing-cta h2 { margin: 0 0 6px; font: 900 27px "Manrope"; }
.marketing-cta p { margin: 0; color: #526258; }
.marketing-footer {
  max-width: 1500px; margin: 0 auto; padding: 26px 34px 34px; display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 28px;
  border-top: 1px solid var(--line); color: #53645b;
}
.marketing-footer a, .marketing-footer span { display: block; margin-top: 8px; color: #53645b; text-decoration: none; }
.marketing-footer .brand { display: inline-flex; margin-top: 0; color: var(--ink); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.service-combo-field { min-width: 0; margin: 0; padding: 0; border: 0; }
.service-combo-field legend { margin-bottom: 9px; color: #4f5d57; font-size: 13px; font-weight: 700; }
.service-combo-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 210px; overflow-y: auto; padding: 2px; scrollbar-gutter: stable; }
.service-combo-option { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff; cursor: pointer; }
.service-combo-option:has(input:checked) { border-color: var(--green); background: var(--mint); box-shadow: 0 0 0 1px rgba(23, 79, 61, .08); }
.service-combo-option input[type="checkbox"] { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--green); }
.service-combo-option input[data-package-quantity] { flex: 0 0 92px; width: 92px; min-width: 92px; height: 40px; margin-left: auto; padding: 0 10px; }
.service-combo-option span { min-width: 0; }
.service-combo-option strong, .service-combo-option small { display: block; overflow-wrap: anywhere; }
.service-combo-option strong { color: var(--ink); font-size: 13px; }
.service-combo-option small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.service-combo-summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 9px; padding: 10px 12px; border-radius: 9px; background: #f3f6f2; color: var(--muted); font-size: 12px; }
.service-combo-summary strong { color: var(--green); }
.package-benefit-choice { display: grid; gap: 10px; margin: 2px 0; padding: 13px; border: 1px solid #b9dec9; border-radius: 12px; background: #f2faf5; color: var(--ink); }
.package-benefit-heading { display: flex; align-items: center; gap: 9px; }
.package-benefit-heading .metric-icon { width: 34px; height: 34px; border-radius: 9px; background: #dff1e6; color: var(--green); }
.package-benefit-heading strong, .package-benefit-heading small { display: block; }
.package-benefit-heading strong { color: var(--green); font-size: 13px; }
.package-benefit-heading small, .package-benefit-choice p { color: var(--muted); font-size: 12px; }
.package-benefit-choice p { margin: 0; }
.package-benefit-options { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.package-benefit-options label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--ink); font-size: 12px; font-weight: 700; }
.package-benefit-options input { width: 15px; height: 15px; margin: 0; accent-color: var(--green); }
.service-assignment-step { margin-top: 10px; padding: 13px; border: 1px solid rgba(23, 79, 61, .12); border-radius: 12px; background: #fbfcf8; }
.service-assignment-step > strong { display: block; color: var(--green); font-size: 13px; }
.service-assignment-step > small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; }
.service-assignment-list { display: grid; gap: 9px; margin-top: 12px; }
.service-assignment-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) minmax(180px, .9fr) auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; transition: border-color .18s ease, background .18s ease, opacity .18s ease; }
.service-assignment-row span { min-width: 0; }
.service-assignment-row strong, .service-assignment-row small { display: block; overflow-wrap: anywhere; }
.service-assignment-row small { color: var(--muted); font-size: 11px; }
.service-assignment-row select { min-height: 42px; padding: 9px 10px; }
.drag-handle { display: grid; width: 30px; height: 42px; place-items: center; padding: 0; border: 0; border-radius: 7px; color: var(--muted); background: transparent; cursor: grab; touch-action: none; }
.drag-handle:active { cursor: grabbing; }
.drag-handle .ui-icon { width: 17px; height: 17px; }
.service-order-controls { display: grid; grid-template-columns: repeat(2, 30px); gap: 3px; }
.service-order-controls .icon-button { width: 30px; height: 30px; min-height: 30px; padding: 0; }
.service-order-controls .icon-button:disabled { cursor: not-allowed; opacity: .35; }
.service-assignment-row.is-dragging { opacity: .45; }
.service-assignment-row.is-drag-target { border-color: var(--green); background: #f0f8f3; }
.span-2 { grid-column: span 2; }
.package-fields {
  margin-top: -2px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fbfcf8;
}
.form-alert {
  margin-top: 14px; padding: 12px 14px; border: 1px solid #efcf9e; border-radius: 12px;
  color: #7a5a17; background: #fff8e8;
}
.form-alert strong { display: block; margin-bottom: 4px; color: #6d4c0e; }
.form-alert ul { margin: 0; padding-left: 18px; }
.form-alert.error { border-color: #efc5bf; color: #8f3d35; background: #fff1ef; }
.form-alert.error strong { color: #7b342d; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 254px minmax(0, 1fr); }
.sidebar {
  position: fixed; inset: 0 auto 0 0; z-index: 30; width: 254px; padding: 28px 20px 20px;
  display: flex; flex-direction: column; background: #fbfbf8; border-right: 1px solid var(--line);
}
.sidebar-backdrop { display: none; }
.sidebar .brand { padding: 0 10px 28px; }
.workspace-card { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.workspace-card > div { min-width: 0; flex: 1; }
.workspace-card strong, .workspace-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-card small { color: var(--muted); font-size: 11px; }
.workspace-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; padding: 0; border: 0; border-radius: 10px; background: var(--peach); color: var(--green); font-weight: 800; cursor: pointer; }
.workspace-avatar img { width: 100%; height: 100%; object-fit: cover; }
.workspace-avatar:hover { outline: 2px solid #9cccbc; outline-offset: 2px; }
.organization-logo-preview { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--cream); }
.organization-logo-preview img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; background: #fff; }
.icon-button { border: 0; width: 34px; height: 34px; display: inline-grid; place-items: center; flex: 0 0 auto; border-radius: 10px; background: transparent; color: var(--muted); }
.icon-button .ui-icon { width: 17px; height: 17px; }
.icon-button:hover { background: var(--cream); }
.main-nav { display: grid; gap: 4px; margin-top: 22px; }
.nav-label { margin: 15px 12px 5px; color: #a0a9a3; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; font-weight: 700; }
.main-nav a, .sidebar-footer a, .sidebar-footer button {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 10px; color: #657169; background: transparent; text-decoration: none; text-align: left;
}
.main-nav a i, .sidebar-footer i { width: 20px; display: grid; place-items: center; flex: 0 0 auto; font-style: normal; text-align: center; }
.main-nav a i .ui-icon, .sidebar-footer i .ui-icon { width: 17px; height: 17px; }
.main-nav a span, .sidebar-footer span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-nav a:hover, .main-nav a.active { color: var(--green); background: #e8f0ea; font-weight: 700; }
.main-nav a b { min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 10px; color: #fff; background: var(--green-2); font-size: 10px; text-align: center; }
.main-nav a b.badge-warn { color: #674b11; background: var(--yellow); }
.nav-group { display: grid; gap: 3px; }
.nav-group-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 0; border-radius: 10px; color: #657169; background: transparent; text-align: left;
}
.nav-group-trigger > i { width: 20px; display: grid; place-items: center; flex: 0 0 auto; font-style: normal; }
.nav-group-trigger > i .ui-icon { width: 17px; height: 17px; }
.nav-group-trigger > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-group-trigger > b { min-width: 20px; margin-left: auto; padding: 1px 6px; border-radius: 10px; color: #fff; background: var(--green-2); font-size: 10px; text-align: center; }
.nav-group-trigger > em { width: 16px; display: grid; place-items: center; color: var(--muted); transition: transform .2s ease; }
.nav-group-trigger > em .ui-icon { width: 14px; height: 14px; }
.nav-group.active > .nav-group-trigger { color: var(--green); font-weight: 700; }
.nav-group-trigger:hover { color: var(--green); background: #f0f4f0; }
.nav-submenu { display: grid; gap: 2px; padding: 0 0 3px 32px; }
.nav-submenu a { min-height: 34px; padding: 8px 12px; font-size: 12px; }
.nav-submenu a[data-open-appointment-form]:hover { color: #657169; background: transparent; font-weight: 400; }
.nav-submenu a::before { display: none; }
.nav-submenu a > i { width: 15px; display: grid; place-items: center; flex: 0 0 auto; }
.nav-submenu a > i .ui-icon { width: 14px; height: 14px; }
.nav-group.collapsed .nav-submenu { display: none; }
.nav-group.collapsed .nav-group-trigger > em { transform: rotate(-90deg); }
.sidebar-footer { margin-top: auto; display: grid; gap: 4px; }
.main-content { grid-column: 2; min-width: 0; }
.topbar {
  position: sticky; top: 0; z-index: 20; height: 78px; padding: 0 34px;
  display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); background: rgba(244,243,236,.9); backdrop-filter: blur(14px);
}
.search-box { flex: 1 1 680px; max-width: calc(100% - 340px); display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.search-box > span { display: grid; place-items: center; color: var(--green); }
.search-box > span .ui-icon { width: 17px; height: 17px; }
.search-box input { width: 100%; min-width: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.search-box kbd { color: #929b95; background: var(--cream); border: 1px solid var(--line); border-radius: 5px; padding: 2px 6px; font-size: 10px; white-space: nowrap; }
.topbar-actions, .user-menu { display: flex; align-items: center; gap: 14px; min-width: 0; }
.notification-button {
  position: relative;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--green);
}
.notification-button .notification-icon { display: grid; place-items: center; line-height: 0; }
.notification-button .notification-icon .ui-icon { width: 20px; height: 20px; stroke-width: 2.25; }
.notification-button:hover { background: #edf3ee; }
.notification-button .notification-count { position: absolute; right: -7px; top: -7px; min-width: 18px; height: 18px; display: grid; place-items: center; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; color: #fff; background: var(--danger); font-size: 10px; font-weight: 800; }
.notification-popover { position: absolute; right: 182px; top: 64px; z-index: 60; width: min(360px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.notification-popover h3 { margin: 4px 6px 10px; font: 800 15px "Manrope"; }
.notification-popover button { width: 100%; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 12px; border: 0; border-radius: 12px; background: transparent; text-align: left; }
.notification-popover button:hover { background: #f5f7f2; }
.notification-popover i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #edf3ee; color: var(--green); font-style: normal; }
.notification-popover i .ui-icon { width: 18px; height: 18px; }
.notification-popover strong, .notification-popover small { display: block; }
.notification-popover small { color: var(--muted); }
.notification-popover b { min-width: 24px; padding: 3px 7px; border-radius: 999px; color: #fff; background: var(--green); font-size: 11px; text-align: center; }
.user-menu { position: relative; }
.user-menu-trigger {
  border: 0; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border-radius: 14px;
  background: transparent; color: inherit;
}
.user-menu-trigger:hover { background: rgba(255,255,255,.7); }
.user-menu-trigger > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--mint); color: var(--green); font-weight: 800; }
.user-menu-trigger > div { min-width: 0; max-width: 220px; }
.user-menu-trigger strong, .user-menu-trigger small { display: block; overflow: hidden; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.user-menu-trigger small { color: var(--muted); font-size: 11px; }
.user-menu-trigger i { display: grid; place-items: center; font-style: normal; color: var(--muted); }
.user-menu-trigger i .ui-icon { width: 18px; height: 18px; }
.user-menu-dropdown {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50; min-width: 210px; padding: 8px;
  border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: var(--shadow);
}
.user-menu-dropdown button {
  width: 100%; border: 0; padding: 11px 12px; border-radius: 10px; background: transparent; text-align: left;
}
.user-menu-dropdown button:hover { background: #f5f7f2; }
.menu-toggle { width: 36px; height: 36px; display: none; place-items: center; border: 0; background: transparent; color: var(--green); }
.menu-toggle .ui-icon { width: 22px; height: 22px; }
.page-root { padding: 34px; max-width: 1540px; margin: 0 auto; }
.page-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 26px; }
.page-heading h1 { margin: 0; font: 800 28px "Manrope"; letter-spacing: -.035em; }
.page-heading p { margin: 7px 0 0; color: var(--muted); }
.heading-actions { display: flex; gap: 10px; }

.metrics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.crm-period-filter { display: flex; align-items: end; gap: 8px; }
.crm-period-filter label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.crm-period-filter input { width: 142px; min-height: 38px; padding: 8px 10px; }
.crm-period-filter > span { padding-bottom: 10px; color: var(--muted); font-size: 12px; }
.crm-period-filter .button { min-height: 38px; padding: 8px 12px; }
.crm-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 18px; }
.crm-metrics .metric-card { min-height: 154px; }
.crm-metrics-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.crm-metrics-six .metric-card { min-height: 180px; padding: 16px; }
.crm-metrics-six .metric-card strong { margin-top: 10px; font-size: 28px; }
.crm-metrics-six .metric-card .trend { margin-top: 7px; min-height: 72px; }
.crm-metrics-six .metric-card .trend > span { display: block; min-height: 18px; font-size: 10px; }
.crm-metric-purple { color: #7747c5; }
.crm-metric-blue { color: #2879d5; }
.crm-metric-orange { color: #bd7420; }
.crm-metric-pink { color: #d6386f; }
.crm-metric-card .metric-icon { color: currentColor; }
.crm-metric-card small, .crm-metric-card strong { color: var(--ink); }
.crm-metric-card .trend { color: var(--green-2); }
.crm-metric-purple .trend, .crm-metric-purple .crm-sparkline { color: #7747c5; }
.crm-metric-blue .trend, .crm-metric-blue .crm-sparkline { color: #2879d5; }
.crm-metric-orange .trend, .crm-metric-orange .crm-sparkline { color: #bd7420; }
.crm-metric-pink .trend, .crm-metric-pink .crm-sparkline { color: #d6386f; }
.crm-panel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.crm-overview-primary-grid { display: grid; grid-template-columns: minmax(310px, .78fr) minmax(520px, 1.72fr); gap: 16px; }
.crm-overview-analytics-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.crm-overview-analytics-grid .panel { min-height: 270px; }
.crm-bottom-insights { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.crm-relationship-grid { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .85fr) minmax(280px, 1fr); }
.crm-contact-metric { appearance: none; width: 100%; text-align: left; font: inherit; color: inherit; }
.crm-contact-metric .trend { display: grid; gap: 4px; margin-top: 8px; }
.crm-contact-metric .trend b { width: max-content; max-width: 100%; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.crm-recovery-count { color: #b44646; background: #fce9e7; }
.crm-prevention-count { color: #a06b11; background: #fff2d6; }
.crm-panel-intro { margin: 0; padding: 10px 18px 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.crm-contact-groups { display: grid; gap: 10px; padding: 0 18px 18px; }
.crm-contact-group { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 88px; padding: 14px; border: 1px solid var(--line); border-left: 3px solid #e5a33a; border-radius: 12px; background: #fff; }
.crm-contact-group-recover { border-left-color: #d95d58; }
.crm-contact-group-copy { display: flex; align-items: center; gap: 10px; min-width: 0; }
.crm-contact-group-copy > i { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 10px; color: #a06b11; background: #fff2d6; font-style: normal; }
.crm-contact-group-recover .crm-contact-group-copy > i { color: #b44646; background: #fce9e7; }
.crm-contact-group-copy strong, .crm-contact-group-copy span { display: block; }
.crm-contact-group-copy strong { font-size: 12px; }
.crm-contact-group-copy strong b { margin-left: 5px; color: #a06b11; font-size: 11px; }
.crm-contact-group-recover .crm-contact-group-copy strong b { color: #b44646; }
.crm-contact-group-copy span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.35; }
.crm-contact-actions { display: grid; flex: 0 0 auto; justify-items: end; gap: 9px; }
.crm-contact-pet-stack { display: flex; align-items: center; justify-content: flex-end; min-height: 28px; padding-left: 10px; }
.crm-contact-pet { width: 29px; height: 29px; margin-left: -8px; border: 2px solid #fff; border-radius: 50%; font-size: 10px; box-shadow: 0 1px 3px rgba(22, 45, 35, .12); }
.crm-contact-pet:first-child { margin-left: 0; }
.crm-contact-pet-stack > b { display: grid; width: 29px; height: 29px; margin-left: -8px; place-items: center; border: 2px solid #fff; border-radius: 50%; color: var(--ink); background: #edf1ef; font-size: 10px; box-shadow: 0 1px 3px rgba(22, 45, 35, .1); }
.crm-contact-group .button { flex: 0 0 auto; min-height: 34px; padding: 7px 10px; font-size: 11px; }
.crm-growth { display: grid; gap: 12px; padding: 18px; }
.crm-growth > div:first-child small, .crm-growth > div:first-child strong { display: block; }
.crm-growth > div:first-child small { color: var(--muted); font-size: 11px; }
.crm-growth > div:first-child strong { margin-top: 4px; font: 800 28px "Manrope"; }
.crm-growth-chart { display: block; width: 100%; height: 158px; overflow: visible; }
.crm-growth-chart-dual { height: 210px; }
.crm-growth-grid { stroke: #edf0ec; stroke-width: 1; }
.crm-growth-line-clients { stroke: #16704d; }
.crm-growth-line-pets { stroke: #4189e8; }
.crm-growth-point-clients { fill: #16704d; }
.crm-growth-point-pets { fill: #4189e8; }
.crm-growth-point-clients-label, .crm-growth-point-pets-label { font: 800 10px "Manrope"; }
.crm-growth-point-clients-label { fill: #16704d; }
.crm-growth-point-pets-label { fill: #4189e8; }
.crm-growth-wide { padding-bottom: 18px; }
.crm-growth-panel .panel-header { align-items: center; }
.crm-chart-legend { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 10px; font-weight: 700; }
.crm-chart-legend i { width: 10px; height: 4px; margin-left: 7px; border-radius: 99px; background: #16704d; }
.crm-chart-legend i:nth-of-type(2) { background: #4189e8; }
.crm-growth-area { fill: #dceee5; opacity: .82; }
.crm-growth-line { fill: none; stroke: #146044; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.crm-growth-point { fill: #146044; stroke: #fff; stroke-width: 2; }
.crm-growth-value { fill: #1e2d28; font: 700 10px "Manrope"; }
.crm-growth-label { fill: var(--muted); font: 600 10px "Manrope"; text-transform: capitalize; }
.crm-growth-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.crm-growth-stats span { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; color: var(--muted); font-size: 10px; line-height: 1.25; }
.crm-growth-stats small, .crm-growth-stats em { display: block; color: var(--muted); font-size: 9px; font-style: normal; }
.crm-growth-stats b { display: block; margin: 5px 0 2px; color: var(--green); font-size: 17px; }
.crm-growth-stats .crm-growth-loss b { color: #c45151; }
.crm-relationship-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.crm-relationship-filters button { min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--muted); font: 700 11px "Manrope"; cursor: pointer; }
.crm-relationship-filters button.active { border-color: #bdd9ca; color: var(--green); background: #edf7f0; }
.crm-contact-label { display: inline-flex; align-items: center; min-height: 22px; padding: 3px 7px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.crm-contact-label-recover { color: #b44646; background: #fce9e7; }
.crm-contact-label-prevent { color: #a06b11; background: #fff2d6; }
.crm-panel { min-width: 0; overflow: hidden; }
.crm-panel .panel-header { padding: 16px 18px; }
.crm-panel .panel-header h2 { font-size: 14px; }
.crm-list { display: grid; padding: 4px 18px 12px; }
.crm-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid #eef0ec; }
.crm-row:last-child { border-bottom: 0; }
.crm-row .pet-avatar { width: 38px; height: 38px; border-radius: 12px; }
.crm-row > div:not(.crm-row-actions) { min-width: 0; }
.crm-row strong, .crm-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-row strong { font: 800 12px "Manrope"; }
.crm-row small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.crm-row > b { max-width: 94px; color: #a3692d; font-size: 10px; line-height: 1.25; text-align: right; }
.crm-row-actions { display: flex; gap: 4px; }
.crm-row .icon-button { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
.crm-row .whatsapp-icon { width: 15px; height: 15px; }
.crm-contact-client-list { display: grid; padding: 4px 18px 18px; }
.crm-contact-client { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 66px; padding: 10px 0; border-bottom: 1px solid #edf0ec; }
.crm-contact-client:last-child { border-bottom: 0; }
.crm-contact-client .avatar { width: 38px; height: 38px; font-size: 11px; }
.crm-contact-client > div { min-width: 0; }
.crm-contact-client strong, .crm-contact-client small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-contact-client strong { font: 800 12px "Manrope"; }
.crm-contact-client small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.crm-contact-client > b { color: #b44646; font-size: 11px; white-space: nowrap; }
.crm-ranking-list, .crm-species { display: grid; gap: 14px; padding: 18px; }
.crm-ranking { display: grid; grid-template-columns: minmax(90px, 1fr) minmax(60px, 1.25fr) 26px; align-items: center; gap: 10px; font-size: 11px; }
.crm-ranking > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-ranking > i { display: block; height: 8px; overflow: hidden; border-radius: 99px; background: #edf1ed; }
.crm-ranking > i > b { display: block; height: 100%; border-radius: inherit; background: var(--green); }
.crm-ranking > strong { text-align: right; font-size: 11px; }
.crm-species-chart { display: grid; grid-template-columns: minmax(124px, .85fr) minmax(0, 1.15fr); align-items: center; gap: 20px; min-height: 150px; }
.crm-species-pie { position: relative; width: min(148px, 100%); aspect-ratio: 1; justify-self: center; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(18, 69, 53, .06); }
.crm-species-pie::after { content: ""; position: absolute; inset: 26%; border-radius: inherit; background: var(--surface); }
.crm-species-pie > span { position: absolute; z-index: 1; inset: 0; display: grid; place-content: center; text-align: center; }
.crm-species-pie strong { font: 800 24px "Manrope"; color: var(--ink); line-height: 1; }
.crm-species-pie small { margin-top: 3px; color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.crm-species-legend { display: grid; gap: 14px; min-width: 0; }
.crm-species-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; }
.crm-species-row span { display: inline-flex; align-items: center; gap: 8px; }
.crm-species-row i { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 99px; background: var(--green); }
.crm-size-bars { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; min-height: 194px; padding: 22px 20px 20px; }
.crm-size-bars > div { display: grid; grid-template-rows: 132px auto auto; align-items: end; gap: 6px; text-align: center; }
.crm-size-bars b { display: block; width: min(38px, 76%); min-height: 6px; justify-self: center; border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #4ba779, #16704d); }
.crm-size-bars strong { color: var(--ink); font-size: 12px; }
.crm-size-bars span { color: var(--muted); font-size: 10px; font-weight: 700; }
.crm-insight-panel { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 18px; padding: 18px 20px; border: 1px solid #cce1d3; border-radius: var(--radius); background: #f0f8f2; }
.crm-insight-panel > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: #e0f0e5; font-style: normal; }
.crm-insight-panel > div { min-width: 0; }
.crm-insight-panel strong, .crm-insight-panel span { display: block; }
.crm-insight-panel span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.crm-campaign-panel { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; margin-top: 12px; padding: 18px 20px; border: 1px solid #e6d4a1; border-radius: var(--radius); background: #fffaf0; }
.crm-campaign-panel > i { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #9a7421; background: #fff0cb; font-style: normal; }
.crm-campaign-panel strong, .crm-campaign-panel span { display: block; }
.crm-campaign-panel span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.crm-section-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.crm-sparkline { display: block; width: 100%; height: 34px; margin-top: 8px; overflow: visible; color: var(--green); }
.crm-sparkline-area { fill: color-mix(in srgb, currentColor 14%, transparent); }
.crm-sparkline-line { fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; }
.crm-sparkline-point { fill: #fff; stroke: currentColor; stroke-width: 2; }
.crm-positive { color: #197452; }
.crm-negative { color: #b44646; }
.module-breadcrumb { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--muted); font-size: 12px; font-weight: 700; }
.module-breadcrumb a { color: inherit; text-decoration: none; }
.module-breadcrumb a:hover { color: var(--green); }
.module-breadcrumb svg { width: 14px; height: 14px; }
.module-breadcrumb strong { color: var(--ink); }
.client-list-controls { display: grid; grid-template-columns: minmax(270px, 1.7fr) minmax(150px, .65fr) minmax(170px, .8fr) auto; align-items: end; gap: 12px; margin: 18px 0; }
.client-list-controls > label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.client-list-controls select { min-height: 46px; }
.client-search-field { position: relative; display: flex !important; align-items: center; gap: 10px; min-height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green) !important; }
.client-search-field:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(20, 96, 68, .1); }
.client-search-field svg { flex: 0 0 18px; width: 18px; height: 18px; }
.client-search-field input { min-width: 0; height: 42px; padding: 0; border: 0; outline: 0; box-shadow: none; }
.client-search-field input:focus { box-shadow: none; }
.client-advanced-filter { min-height: 46px; white-space: nowrap; }
.client-list-panel { overflow: hidden; }
.client-table-scroll { overflow-x: auto; }
.client-list-table { min-width: 940px; }
.client-list-row { cursor: pointer; }
.client-list-row:hover { background: #f5faf6; }
.client-list-table td { vertical-align: middle; }
.client-list-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.client-contact { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.client-contact .whatsapp-icon, .client-contact svg { width: 17px; height: 17px; color: var(--green); }
.client-quick-actions { justify-content: flex-end; }
.client-list-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.client-list-pagination > div:first-child { display: flex; align-items: center; gap: 7px; }
.client-list-pagination select { width: 60px; min-height: 32px; padding: 5px 8px; }
.pagination-controls { display: inline-flex; align-items: center; gap: 7px; }
.pagination-controls .icon-button { width: 30px; height: 30px; }
.client-list-tip { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 16px; border: 1px solid #cee4d5; border-radius: 10px; background: #f3faf5; color: var(--muted); font-size: 12px; }
.client-list-tip i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 8px; color: var(--green); background: #e4f3e8; font-style: normal; }
.client-list-tip svg { width: 16px; height: 16px; }
.client-center-grid { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 18px; margin-bottom: 18px; }
.client-center-profile { padding: 22px; }
.client-center-profile h2 { margin: 0 0 6px; font-size: 18px; }
.client-center-profile p { margin: 4px 0; color: var(--muted); font-size: 12px; }
.client-center-profile .button { margin-top: 14px; }
.client-center-avatar { width: 56px; height: 56px; font-size: 17px; }
.client-center-pets { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; padding: 16px 18px; }
.client-center-pet { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; text-align: left; cursor: pointer; }
.client-center-pet:hover { border-color: #b9d9c8; background: #f5faf6; }
.client-center-pet > img, .client-center-pet > .pet-avatar { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 10px; object-fit: cover; }
.client-center-pet strong, .client-center-pet small { display: block; }
.client-center-pet small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.client-create-page-form { display: grid; max-width: 1040px; gap: 16px; }
.client-create-modal-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.client-create-modal-header h2 { margin: 0 0 6px; }
.client-create-modal-header p { margin: 0; color: var(--muted); font-size: 13px; }
.modal-close-inline { display: grid; width: 36px; height: 36px; flex: 0 0 36px; place-items: center; border: 0; border-radius: 10px; color: var(--muted); background: var(--cream); cursor: pointer; }
.modal-close-inline svg { width: 19px; height: 19px; }
.client-form-section { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.client-form-section > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; }
.client-form-section > header > i { display: grid; width: 38px; height: 38px; flex: 0 0 38px; place-items: center; border-radius: 11px; color: var(--green); background: #eaf4ed; font-style: normal; }
.client-form-section > header svg { width: 20px; height: 20px; }
.client-form-section h2 { margin: 1px 0 4px; font: 800 15px "Manrope"; }
.client-form-section header p { margin: 0; color: var(--muted); font-size: 12px; }
.client-create-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.client-cep-action { align-self: end; }
.client-cep-action .button { width: 100%; min-height: 46px; }
.client-form-hint { display: flex; align-items: center; gap: 7px; margin: 16px 0 0; color: var(--muted); font-size: 12px; }
.client-form-hint svg { width: 16px; height: 16px; color: var(--green); }
.client-create-footer { position: sticky; bottom: 12px; z-index: 2; display: flex; justify-content: flex-end; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); background: color-mix(in srgb, var(--surface) 94%, transparent); box-shadow: 0 8px 24px rgba(30, 52, 42, .08); }
.client-create-footer .button { min-height: 46px; }
.metric-card { position: relative; overflow: hidden; display: grid; min-width: 0; min-height: 154px; padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.metric-card.metric-link { cursor: pointer; }
.metric-card.metric-link:hover { border-color: #c9d8cd; box-shadow: var(--shadow); transform: translateY(-1px); }
.metric-card .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf3ee; color: var(--green); }
.metric-card .metric-icon .ui-icon, .plan-summary-card .metric-icon .ui-icon { width: 20px; height: 20px; }
.metric-card small { display: block; margin-top: 18px; color: var(--muted); font-weight: 600; }
.metric-card strong { display: block; min-width: 0; margin-top: 5px; font: 800 clamp(22px, 1.9vw, 25px)/1.1 "Manrope"; overflow-wrap: anywhere; }
.metric-card .trend { display: block; align-self: end; min-width: 0; margin-top: 10px; color: var(--green-2); font-size: 11px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.metric-card[data-risk-card="expense"] { border-color: #efc5bf; background: #fff1ef; }
.metric-card[data-risk-card="expense"] .metric-icon { color: #a74740; background: #fae6e3; }
.metric-card[data-risk-card="expense"] .trend { color: #a74740; }
.dashboard-section-title { padding: 18px 20px 0; font: 900 13px "Manrope"; text-transform: uppercase; letter-spacing: .02em; }
.day-overview-panel { margin-bottom: 18px; }
.day-overview-grid { display: grid; grid-template-columns: 1.6fr repeat(3, minmax(0, 1fr)); gap: 14px; padding: 16px 20px 20px; }
.day-card {
  position: relative; display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 168px; padding: 18px;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff; text-align: left;
}
.day-card:hover { border-color: #cbd9cf; box-shadow: var(--shadow); transform: translateY(-1px); }
.day-card .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf3ee; color: var(--green); font-style: normal; }
.ui-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.whatsapp-icon { width: 18px; height: 18px; flex: 0 0 auto; object-fit: contain; }
.icon-tone-green { color: #177552 !important; background: #e5f4ea !important; }
.icon-tone-orange { color: #d76a2c !important; background: #fff0e2 !important; }
.icon-tone-violet { color: #7c3bb8 !important; background: #f1e6fa !important; }
.icon-tone-red { color: #cf4c4c !important; background: #ffe7e7 !important; }
.icon-tone-pink { color: #c84d7b !important; background: #fde8f0 !important; }
.icon-tone-blue { color: #1763a6 !important; background: #e4f1ff !important; }
.day-card small { color: var(--muted); font-weight: 800; }
.day-card strong { display: flex; align-items: baseline; gap: 6px; min-width: 0; font: 900 28px/1.05 "Manrope"; overflow-wrap: anywhere; }
.day-card strong span { font: 800 12px "DM Sans"; }
.day-card em { align-self: end; color: var(--green-2); font-style: normal; font-size: 11px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.day-card-wide { padding-right: 132px; }
.day-card-statuses { display: flex; flex-wrap: wrap; gap: 10px 14px; color: #53645b; font-size: 11px; font-weight: 800; }
.day-card-statuses span { display: inline-flex; align-items: center; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; }
.dot-green { background: var(--green-2); }
.dot-purple { background: #8062c7; }
.dot-yellow { background: #f1ac25; }
.dot-red { background: #ef4c4c; }
.occupancy-ring {
  position: absolute; right: 20px; top: 50%; width: 88px; height: 88px; display: grid; place-items: center;
  border-radius: 50%; transform: translateY(-50%);
  background: conic-gradient(from -90deg, var(--green) 0 var(--occupancy), #e5ebe6 var(--occupancy) 100%);
  box-shadow: 0 0 0 1px rgba(16, 83, 63, .04);
}
.occupancy-ring::before { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: #fff; }
.occupancy-ring-copy { position: relative; z-index: 1; display: grid; justify-items: center; gap: 3px; text-align: center; }
.occupancy-ring-copy b { font: 900 22px/1 "Manrope"; }
.occupancy-ring-copy small { color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1; }
.dashboard-grid-today { grid-template-columns: 1.1fr .9fr; }
.today-timeline { display: grid; padding: 8px 20px 14px; }
.today-timeline-row { position: relative; display: grid; grid-template-columns: 14px 64px 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f0f1ed; }
.today-timeline-row:last-child { border-bottom: 0; }
.today-timeline-row::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: #dce7df; }
.today-timeline-row:first-child::before { top: 50%; }
.today-timeline-row:last-child::before { bottom: 50%; }
.timeline-dot { position: relative; z-index: 1; width: 10px; height: 10px; border-radius: 999px; background: var(--green-2); }
.status-line-pending .timeline-dot { background: #f1ac25; }
.status-line-cancelled .timeline-dot, .status-line-no_show .timeline-dot { background: #ef4c4c; }
.today-timeline-row > strong { font: 900 14px "Manrope"; }
.today-timeline-row b, .today-timeline-row small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.today-timeline-row small { color: var(--muted); }
.action-panel { background: linear-gradient(135deg, #fff, #fff5f4); }
.action-list { display: grid; gap: 0; padding: 10px 16px 16px; }
.action-list button { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border: 0; border-bottom: 1px solid #f0e5e3; color: var(--ink); background: transparent; text-align: left; }
.action-list button:last-child { border-bottom: 0; }
.dashboard-icon-badge { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--green); background: #e8f3ec; font-style: normal; }
.action-list strong, .action-list small { display: block; }
.action-list small { color: var(--muted); }
.action-list b { color: var(--muted); font-size: 18px; }
.dashboard-grid-bottom { grid-template-columns: 1.05fr .95fr; }
.opportunity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px 20px 20px; }
.opportunity-grid article { display: grid; grid-template-columns: 42px minmax(0, 1fr); gap: 12px; min-width: 0; padding: 14px; border-radius: 14px; background: #f6fbf7; }
.opportunity-grid strong, .opportunity-grid small { display: block; }
.opportunity-grid small { margin: 5px 0 12px; color: var(--muted); }
.opportunity-grid .button { padding: 8px 12px; font-size: 12px; }
.daily-tip-panel {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; margin-top: 18px; padding: 18px 22px;
  border: 1px solid #cfe2f5; border-radius: 16px; color: #144e86; background: #edf7ff;
}
.daily-tip-panel strong { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.daily-tip-panel strong .dashboard-icon-badge { width: 34px; height: 34px; }
.daily-tip-panel span { min-width: 0; color: #315a7d; }
.daily-tip-panel a { color: #144e86; font-weight: 900; text-decoration: none; }
.goal-panel { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; padding: 20px; }
.goal-panel strong { font: 900 18px "Manrope"; }
.goal-panel p { margin: 6px 0 0; }
.goal-form { display: flex; align-items: end; gap: 10px; }
.goal-form label { display: grid; gap: 7px; color: var(--muted); font-size: 12px; font-weight: 800; }
.goal-form input { min-width: 190px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; font: inherit; }
.point-integration-panel { align-items: center; border-color: #d7e5dc; background: #fbfefc; }
.point-integration-panel > div { min-width: 0; }
.integration-status { display: inline-flex; margin-bottom: 8px; padding: 4px 8px; border-radius: 8px; color: #865f18; background: #fff2c7; font-size: 10px; font-weight: 900; text-transform: uppercase; }
.integration-status.connected { color: var(--green); background: #dff1e5; }
.point-payment-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px; border: 1px solid #cee0d4; border-radius: 14px; background: #f5fbf7; }
.point-payment-fields > div { grid-column: 1 / -1; }
.point-payment-fields strong, .point-payment-fields small { display: block; }
.point-payment-fields small { margin-top: 3px; color: var(--muted); }
.point-connection-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.point-connection-facts span { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: #fafbf8; }
.point-connection-facts small, .point-connection-facts strong { display: block; }
.point-connection-facts small { color: var(--muted); }
.plan-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; }
.plan-summary-card { display: grid; gap: 9px; min-width: 0; padding: 18px 20px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.plan-summary-card .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #edf3ee; color: var(--green); }
.plan-summary-card small { color: var(--muted); font-size: 12px; font-weight: 700; }
.plan-summary-card strong { color: var(--ink); font: 800 18px "Manrope"; line-height: 1.15; overflow-wrap: anywhere; }
.plan-summary-card span { color: var(--green-2); font-size: 11px; font-weight: 800; line-height: 1.2; }
.dashboard-grid { display: grid; grid-template-columns: 1.45fr .8fr; gap: 18px; margin-top: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 1px 0 rgba(0,0,0,.01); overflow: hidden; }
.panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.panel-header h2 { margin: 0; font: 700 16px "Manrope"; }
.panel-header a, .text-button { color: var(--green-2); border: 0; background: transparent; text-decoration: none; font-weight: 700; font-size: 12px; }
.appointment-list { display: grid; }
.appointment-row { display: grid; grid-template-columns: 70px 1fr auto; align-items: center; gap: 16px; padding: 17px 22px; border-bottom: 1px solid #f0f1ed; }
.appointment-row:last-child { border: 0; }
.appointment-time { font: 700 15px "Manrope"; }
.appointment-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pet-avatar { width: 40px; height: 40px; aspect-ratio: 1; box-sizing: border-box; flex: 0 0 40px; display: grid; place-items: center; overflow: hidden; border-radius: 13px; background: var(--mint); color: var(--green); font-weight: 800; line-height: 1; }
.pet-photo-button { padding: 0; border: 0; font-size: 18px; cursor: pointer; }
.pet-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: inherit; }
.detail-list { display: grid; margin-top: 22px; }
.detail-row {
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 18px;
  min-width: 0;
  padding: 17px 22px;
  border-bottom: 1px solid #f0f1ed;
}
.detail-row:last-child { border-bottom: 0; }
.detail-row > strong { color: var(--ink); font: 800 14px "Manrope"; white-space: nowrap; }
.detail-row > small { color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.detail-row .status, .detail-meta { justify-self: end; }
.detail-meta { font: 800 14px "Manrope"; }
.detail-row-profile { grid-template-columns: 64px minmax(0, 1fr) auto; }
.detail-profile-copy { min-width: 0; }
.detail-profile-copy strong, .detail-profile-copy small { display: block; }
.detail-profile-copy strong { color: var(--ink); font: 800 14px "Manrope"; }
.detail-profile-copy small { margin-top: 4px; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.filter-summary {
  margin: -8px 0 18px; padding: 10px 14px; border: 1px solid #cfe0d4; border-radius: 12px;
  color: var(--green); background: #edf5ef; font-weight: 700;
}
.appointment-main strong, .appointment-main small { display: block; }
.appointment-main small { color: var(--muted); }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 12px; font-size: 10px; font-weight: 700; }
.status::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.status-confirmed { color: #684ba9; background: #efe9fb; }
.status-completed, .status-active, .status-enabled { color: #2b7658; background: #e5f2e9; }
.status-pending { color: #8a6618; background: #fff3cf; }
.status-cancelled, .status-failed, .status-inactive, .status-disabled { color: #a74740; background: #fae6e3; }
.status-in_progress, .status-open { color: #3971a1; background: #e5eff8; }
.status-read { color: #68746d; background: #eef0ed; }
.status-unread { color: #2b7658; background: #e5f2e9; }
.notification-type-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 18px; }
.notification-type-grid.single { grid-template-columns: minmax(0, 1fr); }
.notification-type-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.notification-type-card.internal { border-left: 5px solid var(--green); }
.notification-type-card.client { border-left: 5px solid var(--yellow); }
.notification-type-card.active { box-shadow: 0 0 0 2px rgba(16, 83, 63, .12); }
.notification-type-card h2 { margin: 0 0 8px; font: 800 18px "Manrope"; }
.notification-type-card p { margin: 0 0 14px; color: var(--muted); }
.notification-type-card strong { font: 800 26px "Manrope"; }
.notification-type-card small { color: var(--muted); font-size: 12px; }
.notification-toolbar-copy { display: block; margin-top: 3px; }
.notification-unread-row { background: #f7fbf8; }
.quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 20px; }
.quick-action { min-height: 106px; padding: 16px; border: 0; border-radius: 15px; color: var(--ink); text-align: left; }
.quick-action.quick-pet { background: #e9f5ee; }
.quick-action.quick-sale { background: #e9eef8; }
.quick-action.quick-product { background: #fff2c8; }
.quick-action.quick-service { background: #f4e8f7; }
.quick-action i { display: block; margin-bottom: 18px; font-style: normal; }
.quick-action i .ui-icon { width: 25px; height: 25px; }
.quick-pet i { color: #177552; }
.quick-sale i { color: #175da4; }
.quick-product i { color: #c96a16; }
.quick-service i { color: #7c3bb8; }
.quick-action strong { font-size: 12px; }
.insight-card { margin: 0 20px 20px; padding: 18px; border-radius: 15px; color: #fff; background: var(--yellow); }
.insight-card.stock-alert { color: #9a2f28; background: #ffe8e5; border: 1px solid #f2b8b1; }
.insight-card small { color: inherit; opacity: .78; }
.insight-card strong { display: block; margin: 8px 0 3px; font: 700 18px "Manrope"; }

.table-panel { border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.table-toolbar { padding: 15px 18px; display: flex; gap: 10px; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.package-toolbar-heading { display: grid; gap: 4px; }
.package-toolbar-heading small { display: block; }
.table-toolbar-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.table-toolbar-actions .button { white-space: nowrap; }
.table-toolbar input { max-width: 330px; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { padding: 12px 18px; color: #8b958f; background: #fafaf7; text-align: left; text-transform: uppercase; letter-spacing: .07em; font-size: 9px; }
.data-table td { padding: 15px 18px; border-top: 1px solid #f0f1ed; vertical-align: middle; }
.data-table tbody tr:hover { background: #fdfdfa; }
.primary-cell { display: flex; align-items: center; gap: 11px; }
.primary-cell strong, .primary-cell small { display: block; }
.primary-cell small { color: var(--muted); }
.cell-actions { display: flex; justify-content: flex-end; gap: 5px; }
.empty-state { padding: 64px 24px; text-align: center; color: var(--muted); }
.empty-state i { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 14px; border-radius: 18px; background: var(--mint); color: var(--green); font-style: normal; font-size: 24px; }
.empty-state i .ui-icon { width: 25px; height: 25px; }
.empty-state h3 { margin: 0 0 6px; color: var(--ink); }
.filter-tabs { display: flex; gap: 6px; }
.filter-tabs button { border: 0; padding: 7px 11px; border-radius: 9px; color: var(--muted); background: transparent; font-size: 11px; font-weight: 700; }
.filter-tabs button.active { color: var(--green); background: #e8f0ea; }
.schedule-panel { margin-top: 18px; }
.agenda-period-control { display: flex; align-items: center; gap: 8px; }
.agenda-period-control strong { min-width: 150px; color: var(--ink); font-size: 13px; text-align: center; }
.agenda-overview-metrics { display: grid; grid-template-columns: 1.35fr 1.45fr repeat(3, minmax(150px, .72fr)); gap: 14px; margin-bottom: 16px; }
.agenda-overview-metrics > article { min-width: 0; min-height: 166px; padding: 18px; }
.agenda-overview-metrics .metric-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; }
.agenda-overview-metrics small, .agenda-overview-metrics em { display: block; }
.agenda-overview-metrics small { color: var(--ink); font-weight: 800; }
.agenda-overview-metrics em { margin-top: 2px; color: var(--muted); font-size: 10px; font-style: normal; }
.agenda-occupancy-card { position: relative; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: start; gap: 10px; padding-right: 114px !important; }
.agenda-ring { right: 17px; width: 84px; height: 84px; }
.agenda-metric-delta { grid-column: 1 / -1; align-self: end; margin-top: auto; color: var(--green-2); font-size: 10px; }
.agenda-metric-delta.negative { color: var(--danger); }
.agenda-capacity-card { display: grid; grid-template-columns: 38px minmax(0, 1fr); align-content: start; gap: 10px; }
.agenda-capacity-card > strong { grid-column: 1 / -1; font: 900 28px "Manrope"; }
.capacity-track { grid-column: 1 / -1; height: 9px; display: flex; overflow: hidden; border-radius: 999px; background: #edf0ed; }
.capacity-track > * { display: block; flex: 0 0 var(--segment); height: 100%; }
.capacity-track > i { background: var(--green-2); }
.capacity-track > b { background: #a9d5b4; }
.capacity-track > em { background: #aeb7b1; }
.agenda-capacity-card p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px 10px; margin: 0; color: var(--muted); font-size: 9px; font-weight: 700; }
.agenda-capacity-card p span { align-self: center; }
.dot-light-green { background: #a9d5b4; }
.dot-gray { background: #aeb7b1; }
.agenda-quality-card { display: grid; align-content: start; }
.agenda-quality-card > small { margin-top: 13px; }
.agenda-quality-card > strong { margin-top: 12px; font: 900 28px "Manrope"; }
.agenda-quality-card > p { align-self: end; margin: 8px 0 0; color: var(--muted); font-size: 10px; }
.agenda-chart-grid { display: grid; grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 16px; }
.agenda-chart-card { min-width: 0; min-height: 250px; }
.agenda-chart-card .panel-header { padding: 17px 18px 10px; border-bottom: 0; }
.agenda-chart-card .panel-header small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
.agenda-week-bars { height: 176px; display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 9px; padding: 12px 18px 18px; }
.agenda-week-bars > div { height: 100%; display: grid; grid-template-rows: 18px minmax(70px, 1fr) 18px; align-items: end; gap: 5px; text-align: center; }
.agenda-week-bars b { color: var(--muted); font-size: 9px; }
.agenda-week-bars span { height: 100%; display: flex; align-items: end; overflow: hidden; border-radius: 5px 5px 2px 2px; background: #edf4ef; }
.agenda-week-bars i { width: 100%; height: var(--bar); min-height: 3px; border-radius: 5px 5px 2px 2px; background: var(--green-2); }
.agenda-week-bars small { color: var(--muted); font-size: 9px; font-weight: 800; }
.agenda-horizontal-bars { display: grid; gap: 13px; padding: 12px 18px 20px; }
.agenda-horizontal-row { display: grid; grid-template-columns: minmax(74px, 1fr) 1.6fr 34px; align-items: center; gap: 8px; min-width: 0; }
.agenda-horizontal-row > span { overflow: hidden; color: var(--ink); font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.agenda-horizontal-row > div { height: 7px; overflow: hidden; border-radius: 999px; background: #eef1ee; }
.agenda-horizontal-row i { display: block; width: var(--bar); height: 100%; border-radius: inherit; background: #8f6fc4; }
.agenda-horizontal-row b { color: var(--muted); font-size: 9px; text-align: right; }
.agenda-chart-empty { margin: 30px 18px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.agenda-management-grid { display: grid; grid-template-columns: 1.05fr 1.35fr 1fr; gap: 14px; }
.agenda-pending-list { display: grid; padding: 6px 16px 14px; }
.agenda-pending-list button { display: grid; grid-template-columns: 36px minmax(0, 1fr) 18px; align-items: center; gap: 10px; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
.agenda-pending-list button:last-child { border-bottom: 0; }
.agenda-pending-list i, .agenda-opportunity-list i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; }
.agenda-pending-list strong, .agenda-pending-list small, .agenda-opportunity-list strong, .agenda-opportunity-list small { display: block; }
.agenda-pending-list small, .agenda-opportunity-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.agenda-pending-list > button > .ui-icon { width: 14px; height: 14px; color: var(--muted); }
.agenda-free-days { display: grid; grid-template-columns: repeat(7, minmax(54px, 1fr)); gap: 8px; padding: 18px; }
.agenda-free-days a { display: grid; gap: 5px; min-width: 0; padding: 13px 8px; border-radius: 10px; color: var(--ink); background: #f5f9f5; text-align: center; text-decoration: none; }
.agenda-free-days a:hover { background: #e7f2ea; }
.agenda-free-days strong { font-size: 10px; }
.agenda-free-days b { font: 900 18px "Manrope"; }
.agenda-free-days small { overflow: hidden; color: var(--muted); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.agenda-opportunity-list { display: grid; padding: 6px 17px 14px; }
.agenda-opportunity-list > div { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.agenda-opportunity-list > div:last-child { border-bottom: 0; }
.agenda-insight-panel { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 16px; padding: 16px 18px; border: 1px solid #cfe4d5; border-radius: var(--radius); color: var(--green); background: #edf7ef; }
.agenda-insight-panel > i { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: #d9ecdf; }
.agenda-insight-panel strong, .agenda-insight-panel span { display: block; }
.agenda-insight-panel span { margin-top: 3px; color: #557064; font-size: 11px; }
.agenda-insight-panel a { color: var(--green); font-size: 11px; font-weight: 800; text-decoration: none; }
.agenda-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; margin: 18px 18px 20px; padding: 0 4px; }
.agenda-legend-item { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-weight: 700; }
.agenda-legend-filters { margin-left: auto; }
.legend-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--line); }
.legend-dot.available { box-sizing: border-box; background: #fff; border: 2px solid #c4cbc7; }
.legend-dot.confirmed { background: #8062c7; }
.legend-dot.in-progress { background: #8fc3ef; }
.legend-dot.pending { background: #f5bb2d; }
.legend-dot.cancelled { background: #efb0ab; }
.legend-dot.blocked { background: #9aa39e; }
.legend-dot.completed { background: #56ad7f; }
.schedule-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.schedule-toolbar.schedule-toolbar-filters { justify-content: flex-end; }
.schedule-toolbar h2 { margin: 0; font: 800 20px "Manrope"; letter-spacing: -.03em; }
.schedule-toolbar p { margin: 6px 0 0; color: var(--muted); }
.schedule-filters { display: grid; grid-template-columns: 150px 230px 220px; gap: 10px; align-items: end; }
.schedule-filters label { gap: 6px; }
.schedule-filters input, .schedule-filters select { padding: 10px 11px; }
.schedule-multiselect { position: relative; display: grid; gap: 6px; min-width: 0; color: var(--ink); font-size: 12px; font-weight: 800; }
.schedule-multiselect details { position: relative; }
.schedule-multiselect summary { min-height: 42px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 11px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; list-style: none; }
.schedule-multiselect summary::-webkit-details-marker { display: none; }
.schedule-multiselect summary svg { width: 16px; height: 16px; color: var(--muted); transition: transform .15s ease; }
.schedule-multiselect details[open] summary { border-color: var(--green); box-shadow: 0 0 0 2px color-mix(in srgb, var(--green) 14%, transparent); }
.schedule-multiselect details[open] summary svg { transform: rotate(180deg); }
.schedule-multiselect-options { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow: auto; padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 10px 24px rgba(23, 48, 37, .14); }
.schedule-multiselect-options label { display: flex; align-items: center; gap: 9px; padding: 9px 8px; border-radius: 7px; color: var(--ink); cursor: pointer; font-weight: 700; }
.schedule-multiselect-options label:hover { background: #eff7f1; }
.schedule-multiselect-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.schedule-board { padding: 18px; overflow-x: auto; }
.appointment-list-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 300px); gap: 16px; width: 100%; min-width: 0; align-items: start; }
.appointment-list-bulkbar, .appointment-list-table-wrap { grid-column: 1; min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; }
.appointment-list-period-summary { min-width: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-list-toolbar > div > strong, .appointment-list-toolbar > div > span { display: block; }
.appointment-list-toolbar > div > strong { font: 800 14px "Manrope"; }
.appointment-list-toolbar > div > span { margin-top: 3px; color: var(--muted); font-size: 11px; }
.appointment-list-bulkbar { display: flex; align-items: center; min-height: 68px; gap: 8px; margin-top: 0; padding: 10px 14px; }
.appointment-list-bulkbar label { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font-size: 12px; }
.appointment-list-bulkbar input, .list-selection-checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.appointment-list-bulkbar .button { min-height: 36px; padding: 7px 10px; font-size: 12px; }
.appointment-list-bulkbar .button .ui-icon { width: 15px; height: 15px; }
.appointment-list-table-wrap { overflow-x: auto; }
.appointment-list-table { min-width: 860px; }
.appointment-list-table td { vertical-align: middle; }
.appointment-list-table td > strong, .appointment-list-table td > small { display: block; }
.appointment-list-table td > small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.list-pet-cell { display: flex; align-items: center; gap: 9px; min-width: 190px; }
.list-pet-photo { width: 38px; height: 38px; display: grid; place-items: center; flex: 0 0 auto; overflow: hidden; border-radius: 11px; color: var(--green); background: #e1f0e5; font-size: 12px; font-weight: 800; }
.list-pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.list-pet-cell > span:last-child { min-width: 0; }
.list-pet-cell > span:last-child strong, .list-pet-cell > span:last-child small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-pet-cell > span:last-child small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.table-empty { padding: 36px; color: var(--muted); text-align: center; }
.appointment-list-sidebar { grid-column: 2; grid-row: 1 / span 3; display: grid; min-width: 0; gap: 16px; }
.appointment-list-summary, .appointment-list-filters { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-list-summary h3 { margin: 0 0 2px; font: 800 15px "Manrope"; }
.appointment-list-summary div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #53645b; font-size: 12px; }
.appointment-list-summary b { color: var(--ink); }
.appointment-list-filter-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.appointment-list-filter-heading h3 { margin: 0; font: 800 15px "Manrope"; }
.appointment-list-filter-heading button { padding: 0; border: 0; color: var(--green); background: transparent; font: 700 11px "Manrope"; cursor: pointer; }
.appointment-list-filters label { display: grid; gap: 6px; color: #53645b; font-size: 11px; font-weight: 700; }
.appointment-list-filters input, .appointment-list-filters select { min-height: 38px; padding: 8px 10px; font-size: 12px; }
.appointment-list-date-range { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.appointment-list-date-range input { width: 100%; min-width: 0; }
.schedule-column { border: 1px solid var(--line); border-radius: 14px; background: #fff; overflow: hidden; }
.schedule-column header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: #fafaf7; border-bottom: 1px solid var(--line); }
.schedule-column header strong { font: 800 15px "Manrope"; }
.schedule-column header small { color: var(--muted); white-space: nowrap; }
.schedule-lane { display: grid; gap: 8px; padding: 14px; }
.schedule-section-title { margin-top: 4px; color: #8b958f; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 800; }
.schedule-slot { display: grid; gap: 3px; padding: 10px 12px; border-radius: 10px; }
.schedule-slot.occupied { color: #8a3d35; background: #fff0ee; border: 1px solid #efc5bf; }
.schedule-slot strong { font-size: 13px; }
.schedule-slot span, .schedule-empty { color: var(--muted); font-size: 12px; }
.available-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 8px; }
.available-grid button { border: 1px solid #cfe0d4; border-radius: 10px; padding: 9px 6px; color: var(--green); background: #f4faf5; font-weight: 800; }
.available-grid button:hover { color: #fff; background: var(--green); border-color: var(--green); }
.calendar-commandbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-bottom: 1px solid var(--line); background: #fbfbf8; }
.calendar-nav { display: flex; align-items: center; gap: 10px; }
.calendar-nav strong { margin-left: 6px; font: 800 16px "Manrope"; }
.calendar-view-toggle { display: inline-flex; padding: 4px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.calendar-view-toggle button { border: 0; padding: 8px 14px; border-radius: 10px; color: var(--muted); background: transparent; font-weight: 800; }
.calendar-view-toggle button.active { color: #fff; background: var(--green); box-shadow: 0 8px 20px rgba(47,93,74,.18); }
.teams-calendar { min-width: 1060px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.week-view { display: grid; grid-template-columns: 70px repeat(7, minmax(140px, 1fr)); overflow: visible; isolation: isolate; }
.month-view { display: grid; grid-template-columns: repeat(7, minmax(132px, 1fr)); }
.calendar-head { min-height: 64px; padding: 13px 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f9faf6; }
.calendar-head:last-child { border-right: 0; }
.calendar-head strong, .calendar-head small { display: block; }
.calendar-head strong { font: 800 13px "Manrope"; text-transform: capitalize; }
.calendar-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.calendar-head-title { display: flex; align-items: center; gap: 7px; }
.calendar-today-badge { display: inline-flex; align-items: center; min-height: 18px; padding: 1px 7px; border-radius: 999px; color: #fff; background: var(--green); font-size: 9px; font-weight: 800; text-transform: uppercase; }
.calendar-head.today { position: relative; z-index: 1; padding: 11px 12px; color: var(--green); background: #edf7ef; border-top: 2px solid rgba(47,93,74,.48); border-right: 2px solid rgba(47,93,74,.48); border-left: 2px solid rgba(47,93,74,.48); box-shadow: none; }
.time-head { background: #fff; }
.calendar-time { display: flex; justify-content: center; padding-top: 18px; color: #7d8882; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fbfbf8; font: 800 11px "Manrope"; }
.calendar-cell { min-height: 78px; padding: 7px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #fff; display: flex; flex-direction: column; gap: 6px; }
.calendar-cell:nth-child(8n) { border-right: 0; }
.calendar-cell.today { box-shadow: inset 0 0 0 2px rgba(47,93,74,.22); background: #fbfefb; }
.calendar-cell.empty { background: #fdfdfb; }
.week-calendar-cell { position: relative; height: 184px; min-height: 184px; overflow: visible; }
.week-calendar-cell.week-overflow-open { z-index: 100; }
.week-calendar-cell.today { position: relative; z-index: 1; border-right: 2px solid rgba(47,93,74,.34); border-left: 2px solid rgba(47,93,74,.34); box-shadow: none; }
.week-calendar-cell.today.week-calendar-last { border-bottom: 2px solid rgba(47,93,74,.34); }
.week-card-stack { min-height: 0; display: grid; align-content: start; gap: 6px; }
.week-calendar-cell.free .week-card-stack { display: none; }
.calendar-pill.available.week-add-appointment strong { font-size: 26px; font-weight: 900; line-height: 1; letter-spacing: 0; }
.week-appointment-card {
  width: 100%; min-width: 0; height: var(--week-appointment-height, 58px); min-height: 58px; padding: 7px 8px; border-radius: 8px;
}
.week-appointment-card:hover { filter: brightness(.98); box-shadow: 0 4px 12px rgba(25, 54, 41, .08); }
.calendar-pill.week-appointment-card > .week-card-main { display: grid !important; grid-template-columns: 28px minmax(0, 1fr) auto 18px; grid-template-areas: "photo info timing status" "photo info count status"; align-items: center; column-gap: 7px; row-gap: 4px; height: 100%; min-width: 0; margin: 0; overflow: visible; white-space: normal; }
.week-card-main .calendar-pet-photo { grid-area: photo; }
.week-card-main .calendar-pet-photo { width: 28px; height: 28px; border-radius: 50%; font-size: 9px; }
.week-card-info { grid-area: info; min-width: 0; }
.week-card-info strong, .week-card-info small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.week-card-info strong { font-size: 10px; line-height: 1.2; }
.week-card-info small { margin-top: 2px; font-size: 8px; line-height: 1; opacity: .78; }
.week-card-timing { grid-area: timing; min-width: 0; text-align: right; white-space: nowrap; }
.week-card-timing strong, .week-card-timing small { display: block; }
.week-card-timing strong { font-size: 9px; line-height: 1.1; }
.week-card-timing small { margin-top: 2px; font-size: 8px; opacity: .75; }
.week-card-service-count { grid-area: count; justify-self: end; padding: 3px 5px; border-radius: 999px; color: currentColor; background: rgba(255,255,255,.62); font-size: 8px; font-weight: 800; white-space: nowrap; }
.week-appointment-card .calendar-pill-status { grid-area: status; width: 18px; height: 18px; border-width: 1px; }
.week-appointment-card .calendar-pill-status .ui-icon { width: 10px; height: 10px; }
.week-cell-actions { flex: 1; min-height: 0; display: flex; align-items: stretch; justify-content: center; gap: 6px; }
.week-add-appointment, .week-overflow-trigger {
  font-size: 10px; font-weight: 800;
}
.week-add-appointment { width: 100%; min-height: 0; height: 100%; display: grid; place-items: center; }
.week-overflow-trigger {
  width: 100%; min-height: 46px; display: grid; place-items: center; border: 1px solid transparent;
  border-radius: 10px; text-align: center;
}
.week-capacity-action {
  color: #77817c;
  background:
    repeating-linear-gradient(135deg, rgba(145, 156, 150, .14) 0 4px, rgba(145, 156, 150, .04) 4px 8px),
    #f5f7f6;
  border-color: #dce2df;
}
.week-capacity-action:hover,
.week-overflow-trigger[aria-expanded="true"] {
  color: #fff; border-color: #77817c; background: #77817c;
}
.week-overflow { position: relative; width: 100%; }
.week-overflow-popover {
  position: absolute; z-index: 1000; left: 50%; bottom: calc(100% + 8px); width: 310px; max-height: 360px;
  box-sizing: border-box; overflow-x: hidden; overflow-y: auto; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: #fff;
  box-shadow: 0 18px 45px rgba(22, 45, 34, .18); transform: translateX(-50%);
}
.week-overflow-popover header { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.week-overflow-popover header strong { font: 800 12px "Manrope"; }
.week-overflow-popover header small { color: var(--muted); }
.week-overflow-list { display: grid; gap: 3px; }
.week-overflow-list > div { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-radius: 8px; background: #f8faf7; }
.week-card-avatar { width: 30px; height: 30px; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--mint); color: var(--green); font-size: 10px; font-weight: 800; }
.week-card-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.week-overflow-list > div > span:last-child { min-width: 0; }
.week-overflow-list strong, .week-overflow-list small { display: block; }
.week-overflow-list strong { font-size: 11px; }
.week-overflow-list small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.week-open-day { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--green); background: #fff; font-size: 10px; font-weight: 800; }
.week-open-day .ui-icon { width: 13px; height: 13px; }
.calendar-pill { width: 100%; min-width: 0; min-height: 48px; border: 1px solid transparent; border-radius: 10px; padding: 7px 8px; text-align: left; line-height: 1.2; cursor: pointer; }
.calendar-pill > strong, .calendar-pill > span:not(.calendar-pill-heading):not(.calendar-pill-detail) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-pill > strong { font-size: 11px; }
.calendar-pill > span:not(.calendar-pill-heading):not(.calendar-pill-detail) { margin-top: 2px; font-size: 10px; }
.calendar-pill.occupied { color: #7c4e10; background: #fff8df; border-color: #efd485; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.calendar-pill.appointment-confirmed { color: #684ba9; background: #f4efff; border-color: #d4c5f2; }
.calendar-pill.appointment-in_progress { color: #245b83; background: #edf7ff; border-color: #a8d2f2; }
.calendar-pill.appointment-pending { color: #8a6618; background: #fff8df; border-color: #efd485; }
.calendar-pill.appointment-no_show { color: #95453d; background: #fff0ee; border-color: #efb7b0; }
.calendar-pill.appointment-completed { color: #2b7658; background: #eff9f1; border-color: #b9dec4; }
.calendar-pill-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; min-width: 0; }
.calendar-pill-time { min-width: 0; overflow: hidden; color: currentColor; font-size: 10px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; opacity: .86; }
.calendar-pill-status { display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto; border: 2px solid currentColor; border-radius: 50%; color: currentColor; font-size: 8px; opacity: .72; }
.calendar-pill-status .ui-icon { width: 14px; height: 14px; stroke-width: 2.5; }
.week-appointment-card .calendar-pill-status .ui-icon { width: 10px; height: 10px; }
.calendar-pill-detail { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 7px; min-width: 0; margin-top: 5px; }
.calendar-pet-photo { width: 30px; height: 30px; overflow: hidden; display: grid; place-items: center; border: 1px solid rgba(28,54,42,.14); border-radius: 50%; color: currentColor; background: #fff; font-size: 11px; font-weight: 800; }
.calendar-pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.calendar-pill-copy { min-width: 0; overflow: hidden; }
.calendar-pill-copy strong, .calendar-service { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-pill-copy strong { color: currentColor; font-size: 11px; }
.calendar-service { margin-top: 2px; color: currentColor; font-size: 9px; opacity: .78; }
.calendar-pill.available {
  min-height: 46px; display: grid; place-items: center; color: #9aa39e; text-align: center;
  background:
    repeating-linear-gradient(135deg, rgba(156, 166, 160, .10) 0 4px, rgba(156, 166, 160, .025) 4px 8px),
    #fcfdfc;
  border: 1px dashed #e0e5e1;
}
.calendar-pill.available strong { color: currentColor; font-size: 10px; letter-spacing: .08em; }
.calendar-pill.available:hover { color: var(--green); background: #fff; border-color: #82bd97; }
.calendar-pill.available:active { background: #edf8f0; border-style: solid; }
.month-calendar-layout { display: grid; grid-template-columns: minmax(760px, 1fr) minmax(260px, 300px); gap: 16px; align-items: start; }
.month-heatmap { min-width: 0; }
.month-cell {
  min-height: 126px; padding: 12px; border: 0; border-right: 1px solid rgba(224, 229, 224, .85); border-bottom: 1px solid rgba(224, 229, 224, .85);
  display: flex; flex-direction: column; gap: 14px; color: #26352e; background: #fff; text-align: left; transition: transform .16s ease, box-shadow .16s ease;
}
.month-cell:nth-child(7n) { border-right: 0; }
.month-cell:not(:disabled) { cursor: pointer; }
.month-cell:not(:disabled):hover { position: relative; z-index: 1; box-shadow: inset 0 0 0 1px var(--green), 0 8px 18px rgba(26, 69, 49, .11); transform: translateY(-1px); }
.month-cell.today { box-shadow: inset 0 0 0 2px rgba(47,93,74,.52); }
.month-cell.today:not(:disabled):hover { box-shadow: inset 0 0 0 2px var(--green), 0 8px 18px rgba(26, 69, 49, .11); }
.month-cell.muted-month { color: #aeb6b0; background: #fafaf7; opacity: .72; }
.month-heat-low { background: #fff1f0; }
.month-heat-medium { background: #fff8df; }
.month-heat-high { color: #fff; background: #277850; }
.month-day { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.month-day strong { font: 900 18px "Manrope"; line-height: 1; }
.month-day small { max-width: 76px; color: currentColor; font-size: 10px; font-weight: 700; line-height: 1.25; text-align: right; opacity: .8; }
.month-heat-stats { display: flex; align-items: center; gap: 6px; margin-top: auto; font-size: 12px; }
.month-heat-stats > i, .month-reading-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: #e85c64; }
.month-heat-medium .month-heat-stats > i { background: #f1aa19; }
.month-heat-high .month-heat-stats > i { background: #d8f5e4; }
.month-heat-stats b { font: 800 16px "Manrope"; }
.month-heat-stats em { margin-left: auto; font-size: 11px; font-style: normal; font-weight: 800; }
.month-occupancy-track { display: block; height: 5px; overflow: hidden; border-radius: 999px; background: rgba(59, 78, 66, .16); }
.month-occupancy-track i { display: block; width: var(--occupancy); height: 100%; border-radius: inherit; background: #e85c64; }
.month-heat-medium .month-occupancy-track i { background: #f1aa19; }
.month-heat-high .month-occupancy-track { background: rgba(255, 255, 255, .3); }
.month-heat-high .month-occupancy-track i { background: #fff; }
.month-calendar-sidebar { display: grid; gap: 16px; }
.month-calendar-sidebar .panel { padding: 18px; }
.month-calendar-sidebar h3, .month-calendar-sidebar h4 { margin: 0; font: 800 15px "Manrope"; }
.month-legend-list { display: grid; gap: 13px; margin-top: 18px; }
.month-legend-list > div { display: flex; align-items: center; gap: 10px; }
.month-legend-list span { display: grid; gap: 2px; }
.month-legend-list strong { font-size: 12px; }
.month-legend-list small { color: var(--muted); font-size: 11px; }
.month-legend-swatch { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 5px; background: #eee; }
.month-legend-swatch.high { background: #2e8258; }
.month-legend-swatch.medium { background: #ffd26e; }
.month-legend-swatch.low { background: #ef8586; }
.month-legend-swatch.outside { background: #e5e8e5; }
.month-reading-guide { display: grid; gap: 10px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.month-reading-guide p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.month-reading-guide p:last-child { display: flex; align-items: center; gap: 7px; color: #536058; font-size: 11px; }
.month-reading-dot { background: var(--green); }
.month-reading-bar { width: 24px; height: 4px; margin-left: 4px; border-radius: 999px; background: #9aa39e; }
.month-summary-card dl { display: grid; gap: 12px; margin: 18px 0 0; }
.month-summary-card dl > div { display: flex; justify-content: space-between; gap: 10px; }
.month-summary-card dt { color: var(--muted); font-size: 12px; }
.month-summary-card dd { margin: 0; color: var(--green); font-weight: 800; text-align: right; }
.month-calendar-tip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 13px 16px; border: 1px solid #dce8df; border-radius: 10px; color: #5e6d64; background: #f7fbf7; font-size: 12px; }
.month-calendar-tip i { color: var(--green); }
.day-calendar-layout { display: grid; grid-template-columns: minmax(620px, 1fr) minmax(280px, 330px); gap: 16px; align-items: start; }
.teams-calendar.day-view { min-width: 0; }
.day-calendar-head { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: #f9faf6; }
.day-calendar-head strong, .day-calendar-head small { display: block; }
.day-calendar-head strong { font: 800 15px "Manrope"; }
.day-calendar-head small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.day-calendar-timeline { display: grid; }
.day-calendar-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); min-height: 88px; border-bottom: 1px solid var(--line); }
.day-calendar-row.is-collapsed { min-height: 0; }
.day-calendar-row.is-collapsed .day-calendar-events { display: flex; align-items: center; padding-block: 0; }
.day-calendar-row.is-collapsed .day-slot-group { width: 100%; }
.day-calendar-row:last-child { border-bottom: 0; }
.day-calendar-row > time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 12px 6px; color: #6f7d76; background: #fbfbf8; border-right: 1px solid var(--line); font: 800 11px "Manrope"; text-align: center; }
.day-calendar-events { display: grid; gap: 7px; min-width: 0; padding: 8px; background: #fff; }
.day-calendar-events.empty { background: #fdfdfb; }
.day-slot-group { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.day-slot-group-header { min-height: 42px; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border-bottom: 1px solid var(--line); background: #fafbf8; }
.day-slot-group.is-collapsed { overflow: visible; border: 0; border-radius: 0; background: transparent; }
.day-slot-group.is-collapsed .day-slot-group-header { padding-inline: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.day-time-toggle { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; padding: 0; border: 0; border-radius: 6px; color: var(--green); background: var(--mint); }
.day-time-toggle .ui-icon { width: 14px; height: 14px; }
.day-slot-group-header > strong { color: var(--ink); font: 800 12px "Manrope"; white-space: nowrap; }
.day-slot-statuses { display: flex; justify-content: flex-end; gap: 8px; min-width: 0; color: var(--muted); font-size: 11px; }
.day-slot-statuses span { display: inline-flex; align-items: center; gap: 4px; }
.day-slot-statuses .legend-dot { width: 8px; height: 8px; }
.day-slot-more { width: 28px; height: 28px; justify-self: end; padding: 0; }
.day-slot-appointments { display: grid; gap: 7px; padding: 8px; }
.day-appointment { display: grid; grid-template-columns: minmax(0, 1fr) 38px; overflow: hidden; border: 1px solid #efd485; border-radius: 9px; color: #8a6618; background: #fff8df; }
.day-appointment.appointment-confirmed { color: #684ba9; border-color: #d4c5f2; background: #f4efff; }
.day-appointment.appointment-in_progress { color: #245b83; border-color: #a8d2f2; background: #edf7ff; }
.day-appointment.appointment-pending { color: #8a6618; border-color: #efd485; background: #fff8df; }
.day-appointment.appointment-no_show { color: #95453d; border-color: #efb7b0; background: #fff0ee; }
.day-appointment.appointment-completed { color: #2b7658; border-color: #b9dec4; background: #eff9f1; }
.day-appointment-main { min-width: 0; display: grid; grid-template-columns: 38px minmax(120px, 1fr) minmax(98px, auto) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; color: inherit; background: transparent; text-align: left; }
.day-appointment-main:hover { background: rgba(255,255,255,.38); }
.day-appointment-photo { width: 38px; height: 38px; overflow: hidden; display: grid; place-items: center; border-radius: 50%; color: currentColor; background: rgba(255,255,255,.7); font: 800 12px "Manrope"; }
.day-appointment-photo img { width: 100%; height: 100%; object-fit: cover; }
.day-appointment-copy, .day-appointment-timing { min-width: 0; }
.day-appointment-copy strong, .day-appointment-copy small, .day-appointment-timing strong, .day-appointment-timing small { display: block; }
.day-appointment-copy strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.day-appointment-copy small, .day-appointment-timing small { margin-top: 2px; color: currentColor; opacity: .78; font-size: 10px; }
.day-appointment-timing { text-align: right; white-space: nowrap; }
.day-appointment-timing strong { font-size: 11px; }
.day-appointment-service-count { padding: 5px 8px; border-radius: 999px; color: currentColor; background: rgba(255,255,255,.62); font-size: 10px; font-weight: 800; white-space: nowrap; }
.day-appointment-status { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.day-appointment-status .legend-dot { width: 8px; height: 8px; }
.day-appointment-toggle { width: 38px; display: grid; place-items: center; padding: 0; border: 0; border-left: 1px solid rgba(94, 96, 88, .16); color: currentColor; background: transparent; }
.day-appointment-toggle:hover { background: rgba(255,255,255,.38); }
.day-appointment-toggle .ui-icon { width: 17px; height: 17px; }
.day-appointment-services { grid-column: 1 / -1; display: grid; gap: 7px; padding: 11px; border-top: 1px solid rgba(94, 96, 88, .16); background: rgba(255,255,255,.4); }
.day-appointment-services > strong { margin: 1px 4px 5px; color: currentColor; font-size: 11px; }
.day-service-row { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) 104px auto; align-items: center; gap: 10px; padding: 0 9px 0 0; border: 1px solid rgba(94, 96, 88, .14); border-radius: 8px; color: var(--ink); background: rgba(255,255,255,.78); }
.day-service-main { min-width: 0; min-height: 52px; display: grid; grid-template-columns: minmax(180px, 52%) minmax(118px, 1fr); align-items: center; gap: 14px; padding: 10px 12px; border: 0; border-radius: 8px; color: inherit; background: transparent; text-align: left; }
.day-service-main:hover { background: #fff; }
.day-service-name { min-width: 0; }
.day-service-name strong, .day-service-name small { display: block; }
.day-service-name strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.day-service-name small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.day-service-employee { overflow: hidden; color: #59665f; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.day-service-row > .status { margin-right: 2px; font-size: 9px; white-space: nowrap; }
.day-service-navigation { width: 104px; display: inline-flex; align-items: center; justify-content: flex-end; gap: 7px; padding-right: 2px; }
.day-service-navigation a { width: 46px; height: 32px; display: grid; place-items: center; padding: 3px; border-radius: 7px; line-height: 0; text-decoration: none; }
.day-service-navigation a:hover { background: var(--mint); }
.day-service-navigation img, .day-navigation-link img { display: block; object-fit: contain; object-position: center; }
.day-service-navigation img[alt="Google Maps"] { width: 39px; height: 20px; }
.day-service-navigation img[alt="Waze"] { width: 40px; height: 18px; transform: translateY(1px); }
.day-view .calendar-pill { min-height: 72px; padding: 9px 12px; }
.day-view .calendar-pill-heading { align-items: flex-start; }
.day-view .calendar-pill-time { font-size: 12px; }
.day-view .calendar-pill-detail { grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; margin-top: 7px; }
.day-view .calendar-pet-photo { width: 38px; height: 38px; }
.day-view .calendar-pill-copy strong { font-size: 13px; }
.day-view .calendar-service { margin-top: 1px; font-size: 10px; }
.day-appointment-card-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: stretch; min-width: 0; overflow: hidden; border: 1px solid #efd485; border-radius: 10px; color: #7c4e10; background: #fff8df; box-shadow: inset 0 0 0 1px rgba(255,255,255,.55); }
.day-appointment-card-wrap.appointment-confirmed { color: #684ba9; background: #f4efff; border-color: #d4c5f2; }
.day-appointment-card-wrap.appointment-in_progress { color: #245b83; background: #edf7ff; border-color: #a8d2f2; }
.day-appointment-card-wrap.appointment-pending { color: #8a6618; background: #fff8df; border-color: #efd485; }
.day-appointment-card-wrap.appointment-no_show { color: #95453d; background: #fff0ee; border-color: #efb7b0; }
.day-appointment-card-wrap.appointment-completed { color: #2b7658; background: #eff9f1; border-color: #b9dec4; }
.day-appointment-card-wrap .calendar-pill { width: 100%; min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.day-navigation-actions { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 8px; }
.day-navigation-link { width: 62px; min-width: 62px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; padding: 3px; border: 0; border-radius: 6px; color: currentColor; background: transparent; text-decoration: none; }
.day-navigation-link:hover { background: rgba(255,255,255,.48); }
.day-navigation-link img[alt="Google Maps"] { width: 48px; height: 24px; }
.day-navigation-link img[alt="Waze"] { width: 52px; height: 20px; transform: translateY(1px); }
.day-navigation-link.disabled { color: #8a9690; border-color: var(--line); background: #f5f6f4; cursor: not-allowed; }
.day-navigation-status { align-self: center; margin: 0 12px 0 0; }
.day-free-slot { width: 100%; min-height: 54px; display: grid; place-items: center; padding: 8px 14px; border: 1px dashed #d9dfdb; border-radius: 9px; color: #5b6962; background: #fbfcfb; font: inherit; text-align: center; cursor: pointer; }
.day-free-slot:hover { border-color: #7eb899; color: #287052; background: #f4fbf6; }
.day-free-slot strong { color: #758279; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.day-free-slot small { overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.day-blocked-slot { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 9px 14px; border: 1px solid #d8ddda; border-radius: 9px; color: #68736d; background: #f1f3f2; }
.day-blocked-slot i { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto; border-radius: 8px; background: #e3e7e5; }
.day-blocked-slot i .ui-icon { width: 17px; height: 17px; }
.day-blocked-slot strong, .day-blocked-slot small { display: block; }
.day-blocked-slot small { margin-top: 2px; color: #78847e; }
.day-calendar-sidebar { display: grid; gap: 16px; }
.day-calendar-sidebar .panel { padding: 18px; border-radius: 10px; }
.day-side-title { display: flex; align-items: center; gap: 9px; margin-bottom: 16px; }
.day-side-title i { display: grid; place-items: center; width: 30px; height: 30px; color: var(--green); background: var(--mint); border-radius: 8px; }
.day-side-title i .ui-icon { width: 16px; height: 16px; }
.day-side-title strong { font: 800 14px "Manrope"; }
.day-availability-facts { display: grid; grid-template-columns: .8fr 1.2fr; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.day-availability-facts > div { min-height: 74px; display: grid; align-content: center; justify-items: center; gap: 4px; padding: 10px; text-align: center; }
.day-availability-facts > div + div { border-left: 1px solid var(--line); }
.day-availability-facts b { color: var(--green); font: 800 15px "Manrope"; }
.day-availability-facts span { color: var(--muted); font-size: 10px; }
.day-side-subtitle { display: block; margin: 18px 0 10px; font-size: 12px; }
.day-free-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.day-free-grid > span { min-height: 34px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; color: var(--green); background: #fff; font-size: 12px; font-weight: 800; }
.day-no-slots { grid-column: 1 / -1; padding: 14px; color: var(--muted); background: #fafaf7; border-radius: 7px; font-size: 11px; text-align: center; }
.day-summary-content { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: center; gap: 16px; }
.day-summary-ring { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--green) 0 var(--occupancy), #e4eee8 var(--occupancy) 100%); }
.day-summary-ring::before { content: ""; grid-area: 1 / 1; width: 76px; height: 76px; border-radius: 50%; background: #fff; }
.day-summary-ring span { position: relative; grid-area: 1 / 1; text-align: center; }
.day-summary-ring b, .day-summary-ring small { display: block; }
.day-summary-ring b { font: 800 20px "Manrope"; }
.day-summary-ring small { color: var(--muted); font-size: 9px; }
.day-summary-list { display: grid; gap: 7px; }
.day-summary-list > div { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: #59665f; font-size: 10px; }
.day-summary-list .legend-dot { width: 7px; height: 7px; }
.day-summary-list b { color: var(--ink); }
.day-calendar-tip { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 12px 16px; border: 1px solid #dfeae2; border-radius: 9px; color: #4d6558; background: #f6faf7; font-size: 12px; }
.day-calendar-tip i { display: grid; place-items: center; color: var(--green); }
.day-calendar-tip i .ui-icon { width: 18px; height: 18px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; padding: 22px; display: grid; place-items: center; background: rgba(21,36,29,.48); backdrop-filter: blur(5px); }
.modal-card { position: relative; width: min(600px, 100%); max-height: calc(100vh - 44px); overflow: auto; padding: 28px; border-radius: 22px; background: #fff; box-shadow: var(--shadow); }
.modal-card.client-create-modal-card { width: min(980px, 100%); padding: 24px; }
.modal-card.client-create-modal-card .modal-close { display: none; }
.modal-close { position: absolute; right: 18px; top: 17px; width: 34px; height: 34px; border: 0; border-radius: 10px; color: var(--muted); background: var(--cream); font-size: 20px; }
.modal-close .ui-icon, .preview-lightbox-close .ui-icon { width: 19px; height: 19px; }
.modal-card h2 { margin: 0 0 7px; font: 800 22px "Manrope"; }
.modal-card .form-grid { margin-top: 24px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.appointment-create-page { max-width: 1320px; margin: 0 auto; }
.appointment-create-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.appointment-create-heading h1 { margin: 0; font: 800 30px "Manrope"; }
.appointment-create-heading p { margin: 6px 0 0; color: var(--muted); }
.appointment-create-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .72fr); align-items: start; gap: 22px; }
.appointment-create-main, .appointment-summary-panel { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.appointment-create-main .form-grid { margin: 0; }
.appointment-create-main .modal-actions { position: sticky; bottom: 0; z-index: 2; margin: 22px -24px -24px; padding: 16px 24px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(8px); }
.appointment-summary-panel { position: sticky; top: 94px; display: grid; gap: 15px; }
.appointment-summary-panel h2 { margin: 0; font: 800 17px "Manrope"; }
.appointment-summary-person { display: flex; align-items: center; gap: 10px; }
.appointment-summary-person .metric-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 36px; border-radius: 10px; }
.appointment-summary-person small, .appointment-summary-person strong { display: block; }
.appointment-summary-person small { color: var(--muted); font-size: 11px; }
.appointment-summary-person strong { margin-top: 2px; font-size: 13px; }
.appointment-summary-services { padding-top: 15px; border-top: 1px solid var(--line); }
.appointment-summary-services h3 { margin: 0 0 10px; font: 800 14px "Manrope"; }
.appointment-summary-empty { color: var(--muted); font-size: 12px; }
.appointment-summary-service { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 10px 0; border-top: 1px solid #f0f1ed; }
.appointment-summary-service:first-of-type { border-top: 0; }
.appointment-summary-service .metric-icon { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #6d4b9f; background: #f0e9fb; }
.appointment-summary-service .metric-icon .ui-icon { width: 18px; height: 18px; }
.appointment-summary-service strong, .appointment-summary-service small { display: block; }
.appointment-summary-service strong { font-size: 12px; }
.appointment-summary-service small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.appointment-summary-service b { font-size: 12px; white-space: nowrap; }
.appointment-summary-totals { display: grid; gap: 10px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.appointment-summary-totals span { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }
.appointment-summary-totals .ui-icon { width: 17px; color: var(--green); }
.appointment-summary-totals strong { color: var(--ink); }
.appointment-summary-benefit { display: grid; gap: 5px; padding: 13px; border: 1px solid #b9dec9; border-radius: 10px; background: #f2faf5; color: var(--green); }
.appointment-summary-benefit strong { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.appointment-summary-benefit strong .ui-icon { width: 17px; }
.appointment-summary-benefit span { color: #53645b; font-size: 12px; }
.treatment-drawer-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(21, 36, 29, .34); backdrop-filter: blur(2px); }
.treatment-drawer {
  position: fixed; z-index: 121; top: 0; right: 0; width: min(520px, 100vw); height: 100vh; overflow-y: auto;
  background: #fff; box-shadow: -18px 0 50px rgba(18, 40, 30, .18);
}
.treatment-drawer-header { position: sticky; z-index: 3; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
.treatment-drawer-header > div { min-width: 0; }
.treatment-drawer-header h2 { margin: 0; font: 800 21px "Manrope"; }
.treatment-drawer-header p { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.treatment-drawer-body { display: grid; gap: 16px; padding: 20px 22px 32px; }
.treatment-pet-summary { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 14px; align-items: center; }
.treatment-pet-photo { width: 70px; height: 70px; overflow: hidden; display: grid; place-items: center; border-radius: 14px; color: var(--green); background: var(--mint); font: 800 20px "Manrope"; }
.treatment-pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.treatment-pet-summary h3 { margin: 0 0 4px; font: 800 19px "Manrope"; }
.treatment-pet-summary p { margin: 2px 0; color: var(--muted); font-size: 12px; }
.treatment-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.treatment-facts > div { padding: 12px; }
.treatment-facts > div:nth-child(even) { border-left: 1px solid var(--line); }
.treatment-facts > div:nth-child(n+3) { border-top: 1px solid var(--line); }
.treatment-facts small, .treatment-facts strong { display: block; }
.treatment-facts small { color: var(--muted); font-size: 10px; }
.treatment-facts strong { margin-top: 4px; font-size: 12px; }
.treatment-section { padding: 15px; border: 1px solid var(--line); border-radius: 9px; }
.treatment-section > h3 { margin: 0 0 11px; font: 800 13px "Manrope"; }
.treatment-alert { padding: 12px 14px; border: 1px solid #f0d49f; border-radius: 9px; color: #815b1f; background: #fff8e9; font-size: 12px; }
.treatment-action-row { display: flex; flex-wrap: wrap; gap: 8px; }
.treatment-action-row .button { flex: 1 1 150px; }
.treatment-management-actions .treatment-action-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.treatment-management-actions .treatment-action-row .button { min-height: 50px; margin: 0; padding: 10px 12px; flex: none; justify-content: center; }
.treatment-management-actions .treatment-execution-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.treatment-inline-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: end; }
.treatment-inline-form.product-form { grid-template-columns: minmax(0, 1fr) 90px auto; }
.treatment-inline-form label { min-width: 0; font-size: 10px; }
.treatment-inline-form select, .treatment-inline-form input { min-width: 0; padding: 9px; }
.treatment-list { display: grid; gap: 7px; }
.treatment-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: 8px; background: #f7f9f6; }
.treatment-list strong, .treatment-list small { display: block; }
.treatment-list small { margin-top: 2px; color: var(--muted); font-size: 10px; }
.treatment-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.treatment-photo-grid img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }
.treatment-notes { width: 100%; min-height: 96px; }
body.treatment-drawer-open { overflow: hidden; }
.toast-root { position: fixed; z-index: 200; right: 20px; top: 20px; display: grid; gap: 10px; }
.toast { min-width: 280px; padding: 14px 16px; border-radius: 12px; color: #fff; background: var(--green); box-shadow: var(--shadow); animation: slide-in .25s ease; }
.toast.error { background: var(--danger); }
.skeleton { min-height: 90px; border-radius: var(--radius); background: linear-gradient(100deg,#e9e9e4 20%,#f5f5f1 40%,#e9e9e4 60%); background-size: 200% 100%; animation: shimmer 1.4s infinite; }
.client-hero { position: relative; overflow: hidden; display: flex; justify-content: space-between; align-items: center; min-height: 300px; margin-bottom: 18px; padding: 42px; border-radius: 24px; color: #fff; background: var(--green); }
.client-hero h1 { margin: 12px 0; font: 800 clamp(32px, 4vw, 52px)/1.05 "Manrope"; letter-spacing: -.045em; }
.client-hero p { max-width: 600px; margin: 0 0 24px; color: #c6d9d0; font-size: 16px; }
.client-hero .button-primary { color: var(--green); background: var(--peach); }
.client-hero-mark { width: 160px; height: 160px; flex: 0 0 auto; display: grid; place-items: center; margin-right: 5%; border: 1px solid rgba(255,255,255,.16); border-radius: 45% 55% 56% 44%; color: var(--peach); background: rgba(255,255,255,.06); font: 800 70px "Manrope"; transform: rotate(-8deg); }
.client-pet-list { display: grid; gap: 2px; padding: 12px 20px 20px; }
.client-pet-card { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.client-pet-card:last-child { border-bottom: 0; }
.client-pet-card strong, .client-pet-card small { display: block; }
.client-pet-card small { color: var(--muted); }
.booking-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, .55fr); gap: 18px; }
.booking-panel { padding: 28px; }
.booking-steps { display: flex; align-items: center; max-width: 330px; margin-bottom: 28px; }
.booking-steps span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: var(--muted); background: var(--cream); font-weight: 800; }
.booking-steps span.active { color: #fff; background: var(--green); }
.booking-steps i { height: 2px; flex: 1; background: var(--line); }
.booking-help .help-list { padding: 20px; }
.booking-help .help-list p { margin: 0; padding: 14px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.booking-help b { display: inline-grid; place-items: center; width: 25px; height: 25px; margin-right: 8px; border-radius: 8px; color: var(--green); background: var(--mint); }
.slot-picker { margin-top: 22px; padding: 18px; border-radius: 14px; background: #f8f9f5; }
.appointment-slots { max-height: 190px; overflow-y: auto; scrollbar-gutter: stable; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; margin-top: 12px; }
.slot-grid button { padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--green); background: #fff; font-weight: 700; }
.slot-grid button:hover, .slot-grid button.active { color: #fff; border-color: var(--green); background: var(--green); }
.client-pets-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.client-pet-profile { padding: 24px; text-align: center; }
.pet-avatar.large { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 22px; font-size: 22px; }
.client-pet-profile h2 { margin: 0; font: 800 21px "Manrope"; }
.client-pet-profile > p { margin: 5px 0 18px; color: var(--muted); }
.pet-facts { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 12px; }
.pet-facts span { padding: 12px; }
.pet-facts span + span { border-left: 1px solid var(--line); }
.pet-facts small, .pet-facts strong { display: block; }
.pet-facts small { color: var(--muted); }
.pet-alert { margin-bottom: 16px; padding: 10px; border-radius: 10px; color: #8a6618; background: #fff3cf; font-size: 12px; }
@keyframes shimmer { to { background-position-x: -200%; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-8px); } }

@media (max-width: 1280px) {
  .crm-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-metrics-six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crm-panel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-relationship-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crm-relationship-grid > :first-child { grid-column: 1 / -1; }
  .crm-overview-primary-grid { grid-template-columns: 1fr; }
  .crm-overview-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
  .crm-period-filter { width: 100%; flex-wrap: wrap; }
  .crm-period-filter label { flex: 1 1 130px; }
  .crm-period-filter input { width: 100%; }
  .crm-metrics, .crm-panel-grid { grid-template-columns: 1fr; }
  .crm-metrics-six, .crm-overview-analytics-grid, .crm-bottom-insights { grid-template-columns: 1fr; }
  .crm-relationship-grid > :first-child { grid-column: auto; }
  .crm-contact-group { align-items: flex-start; flex-direction: column; }
  .crm-contact-actions { width: 100%; }
  .crm-contact-group .button { width: 100%; }
  .crm-growth-stats { grid-template-columns: 1fr; }
  .crm-contact-client { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .crm-contact-client > b { grid-column: 2 / -1; text-align: left; }
  .crm-growth-chart-dual { height: 176px; }
  .crm-size-bars { min-height: 170px; }
  .crm-insight-panel { grid-template-columns: 40px minmax(0, 1fr); }
  .crm-insight-panel .button { grid-column: 1 / -1; width: 100%; }
  .crm-campaign-panel { grid-template-columns: 40px minmax(0, 1fr); }
  .crm-campaign-panel .button { grid-column: 1 / -1; width: 100%; }
  .treatment-drawer { width: 100vw; }
  .treatment-drawer-header, .treatment-drawer-body { padding-left: 16px; padding-right: 16px; }
  .treatment-inline-form, .treatment-inline-form.product-form { grid-template-columns: 1fr; }
  .treatment-inline-form .button { width: 100%; }
  .week-overflow-popover { position: fixed; left: 12px; right: 12px; bottom: 18px; width: auto; max-height: 65vh; transform: none; }
}

@media (max-width: 1280px) {
  .marketing-hero {
    grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr);
    gap: 34px;
    min-height: auto;
    padding-top: 48px;
  }
  .hero-copy { width: 100%; }
  .hero-copy h1 { font-size: 58px; }
  .hero-copy p { font-size: 17px; }
  .product-preview {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    align-self: center;
  }
}

@media (max-width: 1100px) {
  .appointment-create-layout { grid-template-columns: 1fr; }
  .appointment-summary-panel { position: static; }
  .appointment-list-view { grid-template-columns: 1fr; }
  .appointment-list-sidebar { grid-column: 1; grid-row: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-list-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .appointment-list-summary h3 { grid-column: 1 / -1; }
  .marketing-nav nav { display: none; }
  .marketing-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 34px; }
  .hero-copy { width: 100%; max-width: 650px; }
  .product-preview { position: relative; right: auto; top: auto; width: 100%; margin-top: 30px; }
  .feature-grid { grid-template-columns: repeat(3, 1fr); }
  .metrics-grid { grid-template-columns: 1fr 1fr; }
  .day-overview-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-card-wide { grid-column: span 2; }
  .plan-summary-grid { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .schedule-toolbar { align-items: stretch; flex-direction: column; }
  .schedule-filters { grid-template-columns: 1fr 1fr 1fr; }
  .calendar-commandbar { align-items: flex-end; flex-wrap: wrap; }
  .agenda-legend-filters { width: 100%; margin-left: 0; }
  .day-calendar-layout { grid-template-columns: 1fr; }
  .day-calendar-sidebar { grid-template-columns: 1fr 1fr; }
  .month-calendar-layout { grid-template-columns: 1fr; }
  .month-calendar-sidebar { grid-template-columns: 1fr 1fr; }
  .agenda-overview-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda-occupancy-card, .agenda-capacity-card { grid-column: span 1; }
  .agenda-chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-management-grid { grid-template-columns: 1fr 1fr; }
  .agenda-management-grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 820px) {
  .client-list-controls { grid-template-columns: 1fr 1fr; }
  .client-search-field { grid-column: 1 / -1; }
  .client-center-grid { grid-template-columns: 1fr; }
  .marketing-screen { padding-top: 96px; }
  #top, #recursos, #funcionalidades, #planos, #depoimentos, #faq, #contato { scroll-margin-top: 124px; }
  .marketing-nav { height: auto; padding: 18px; align-items: flex-start; }
  .marketing-actions { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .marketing-screen main { padding: 0 18px; }
  .hero-copy h1 { font-size: 48px; }
  .product-preview { min-height: 0; }
  .product-preview img { min-height: 0; }
  .feature-grid, .pricing-grid, .faq-section, .marketing-footer { grid-template-columns: 1fr; }
  .stats-band { grid-template-columns: 1fr 1fr; }
  .marketing-cta { align-items: flex-start; flex-direction: column; }
  .auth-screen { grid-template-columns: 1fr; }
  .auth-brand { display: none; }
  .checkout-card { grid-template-columns: 1fr; }
  .checkout-summary, .checkout-form { padding: 30px; }
  .goal-panel, .goal-form { align-items: stretch; flex-direction: column; }
  .goal-form input { min-width: 0; }
  .point-payment-fields, .point-connection-facts { grid-template-columns: 1fr; }
  .point-payment-fields > div { grid-column: auto; }
  .opportunity-grid { grid-template-columns: 1fr; }
  .daily-tip-panel { grid-template-columns: 1fr; align-items: start; }
  .mobile-brand { display: block; }
  .sidebar { transform: translateX(-100%); transition: .25s; box-shadow: var(--shadow); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 25;
    display: block;
    border: 0;
    background: rgba(30, 41, 36, .18);
    backdrop-filter: blur(1px);
  }
  .app-shell { display: block; }
  .main-content { grid-column: 1; }
  .menu-toggle { display: grid; }
  .topbar { padding: 0 18px; }
  .search-box { width: auto; flex: 1; margin: 0 12px; }
  .search-box kbd, .user-menu-trigger > div { display: none; }
  .page-root { padding: 24px 18px; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .heading-actions { width: 100%; flex-wrap: wrap; }
  .heading-actions .button { flex: 1 1 calc(50% - 5px); min-width: 150px; }
  .booking-layout { grid-template-columns: 1fr; }
  .client-hero-mark { display: none; }
  .schedule-filters { grid-template-columns: 1fr; }
  .day-calendar-sidebar { grid-template-columns: 1fr; }
  .month-calendar-sidebar { grid-template-columns: 1fr; }
  .agenda-overview-metrics { grid-template-columns: 1fr 1fr; }
  .agenda-occupancy-card, .agenda-capacity-card { grid-column: span 1; }
  .agenda-chart-grid, .agenda-management-grid { grid-template-columns: 1fr; }
  .agenda-management-grid > :nth-child(2) { grid-column: auto; grid-row: auto; }
  .agenda-insight-panel { grid-template-columns: 38px minmax(0, 1fr); }
  .agenda-insight-panel a { grid-column: 2; }
}
@media (max-width: 620px) {
  .modal-card.client-create-modal-card { width: 100%; max-height: calc(100vh - 24px); padding: 16px; border-radius: 16px; }
  .client-create-modal-header { margin-bottom: 12px; }
  .client-create-grid { grid-template-columns: 1fr; }
  .client-cep-action { align-self: auto; }
  .client-create-footer { position: static; display: grid; grid-template-columns: 1fr; }
  .client-create-footer .button { width: 100%; }
  .client-list-controls { grid-template-columns: 1fr; }
  .client-list-controls > * { grid-column: auto; }
  .client-advanced-filter { width: 100%; }
  .client-list-pagination { align-items: flex-start; flex-direction: column; }
  .client-list-pagination .pagination-controls { align-self: center; }
  .client-list-tip { align-items: flex-start; }
  .appointment-create-heading h1 { font-size: 25px; }
  .appointment-create-main, .appointment-summary-panel { padding: 16px; border-radius: 12px; }
  .appointment-create-main .modal-actions { margin: 20px -16px -16px; padding: 14px 16px; }
  .appointment-create-main .modal-actions .button { flex: 1 1 0; min-width: 0; padding-inline: 10px; }
  .table-toolbar { align-items: flex-start; flex-direction: column; }
  .table-toolbar-actions { width: 100%; align-items: flex-start; flex-direction: column; }
  .table-toolbar-actions .button { width: 100%; }
  .marketing-screen { padding-top: 148px; }
  #top, #recursos, #funcionalidades, #planos, #depoimentos, #faq, #contato { scroll-margin-top: 176px; }
  .marketing-nav { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 16px 18px; }
  .marketing-nav .brand { width: 100%; }
  .marketing-nav .brand-logo { width: min(188px, 58vw); }
  .marketing-actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.35fr);
    gap: 10px;
    justify-content: stretch;
  }
  .marketing-actions .button,
  .marketing-actions .text-button {
    width: 100%;
    min-height: 48px;
    padding: 10px 12px;
    border-radius: 14px;
    justify-content: center;
    line-height: 1.2;
    text-align: center;
    white-space: normal;
  }
  .marketing-actions .text-button {
    border: 1px solid var(--line);
    background: #fff;
  }
  .hero-copy h1 { font-size: 40px; }
  .checkout-screen { padding: 18px; }
  .checkout-summary h1 { font-size: 34px; }
  .compact-grid { grid-template-columns: 1fr; }
  .hero-copy p { font-size: 16px; }
  .hero-actions .button { width: 100%; }
  .hero-proof { display: grid; gap: 10px; }
  .stats-band { grid-template-columns: 1fr; }
  .auth-panel { padding: 28px 22px; }
  .topbar {
    height: auto;
    min-height: 96px;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 18px 14px;
  }
  .menu-toggle { order: 1; width: 44px; height: 44px; }
  .topbar-actions { order: 1; margin-left: auto; gap: 8px; }
  .search-box {
    order: 2;
    flex: 0 0 100%;
    max-width: none;
    min-height: 46px;
    margin: 0;
    padding: 0 14px;
    border-radius: 14px;
  }
  .search-box > span .ui-icon { width: 20px; height: 20px; }
  .user-menu-trigger { gap: 8px; padding: 4px 0 4px 4px; }
  .user-menu-trigger > span { width: 42px; height: 42px; }
  .user-menu-trigger i { width: 36px; height: 42px; }
  .user-menu-dropdown { right: 0; top: calc(100% + 8px); z-index: 90; }
  .notification-popover { right: 18px; top: 64px; z-index: 90; }
  .heading-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .heading-actions .button {
    width: 100%;
    min-width: 0;
    min-height: 58px;
    padding: 12px 10px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
  }
  .calendar-commandbar { align-items: stretch; flex-direction: column; }
  .calendar-nav { flex-wrap: wrap; }
  .calendar-nav strong { width: 100%; margin: 4px 0 0; }
  .calendar-view-toggle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .calendar-view-toggle button { padding-inline: 8px; }
  .schedule-board { padding: 10px; }
  .appointment-list-toolbar { align-items: stretch; flex-direction: column; }
  .appointment-list-bulkbar { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .appointment-list-bulkbar label { grid-column: 1 / -1; margin: 0; }
  .appointment-list-bulkbar .button { width: 100%; }
  .appointment-list-sidebar { grid-template-columns: 1fr; }
  .day-calendar-row { grid-template-columns: 52px minmax(0, 1fr); }
  .day-calendar-row > time { padding-inline: 5px; }
  .day-appointment-card-wrap { grid-template-columns: minmax(0, 1fr) auto; }
  .day-appointment-card-wrap .calendar-pill { grid-column: 1 / -1; }
  .day-navigation-actions { grid-column: 1; flex-direction: row; justify-content: flex-end; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
  .day-navigation-status { grid-column: 2; grid-row: 2; margin: 0 12px 0 0; }
  .day-navigation-link { min-width: 0; flex: 1 1 0; }
  .day-free-slot { grid-template-columns: 52px minmax(0, 1fr); gap: 8px; padding-inline: 10px; }
  .day-free-slot small { display: none; }
  .day-slot-group-header { grid-template-columns: 28px minmax(0, 1fr) 28px; gap: 6px; }
  .day-slot-statuses { grid-column: 1 / -1; justify-content: flex-start; padding-left: 34px; }
  .day-slot-more { grid-column: 3; grid-row: 1; }
  .day-appointment-main { grid-template-columns: 34px minmax(0, 1fr) auto; gap: 8px; padding: 8px; }
  .day-appointment-photo { width: 34px; height: 34px; }
  .day-appointment-timing { grid-column: 2; grid-row: 2; text-align: left; }
  .day-appointment-service-count { grid-column: 3; grid-row: 1 / span 2; }
  .day-appointment-status { display: none; }
  .day-service-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "main status"
      "navigation navigation";
    gap: 0;
    padding: 0;
  }
  .day-service-main {
    grid-area: main;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
    padding: 10px 12px;
  }
  .day-service-employee {
    grid-column: auto;
    overflow: visible;
    white-space: normal;
  }
  .day-service-navigation {
    grid-area: navigation;
    width: auto;
    justify-self: start;
    padding: 0 10px 10px;
  }
  .day-service-navigation:empty { display: none; }
  .day-service-row > .status {
    grid-area: status;
    align-self: center;
    margin: 0 10px 0 0;
  }
  .day-summary-content { grid-template-columns: 94px minmax(0, 1fr); gap: 12px; }
  .day-summary-ring { width: 90px; height: 90px; }
  .day-summary-ring::before { width: 66px; height: 66px; }
  .metrics-grid { grid-template-columns: 1fr; }
  .agenda-period-control { width: 100%; flex-wrap: wrap; }
  .agenda-period-control strong { order: -1; width: 100%; text-align: left; }
  .agenda-overview-metrics { grid-template-columns: 1fr; }
  .agenda-occupancy-card, .agenda-capacity-card { grid-column: auto; }
  .agenda-week-bars { gap: 5px; padding-inline: 12px; }
  .agenda-free-days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda-free-days a:last-child { grid-column: 1 / -1; }
  .day-overview-grid { grid-template-columns: 1fr; padding: 14px; }
  .day-card-wide { grid-column: auto; padding-right: 18px; }
  .occupancy-ring { position: relative; right: auto; top: auto; width: 76px; height: 76px; margin-top: 4px; transform: none; }
  .today-timeline-row { grid-template-columns: 14px 52px 40px minmax(0, 1fr); }
  .today-timeline-row .status { grid-column: 4; justify-self: start; }
  .form-grid { grid-template-columns: 1fr; }
  .service-combo-options { grid-template-columns: 1fr; max-height: 230px; }
  .service-combo-summary { align-items: flex-start; flex-direction: column; gap: 2px; }
  .package-benefit-options { display: grid; grid-template-columns: 1fr; gap: 8px; }
  .service-assignment-row { grid-template-columns: 30px minmax(0, 1fr) auto; }
  .service-assignment-row select { grid-column: 1 / -1; }
  .span-2 { grid-column: span 1; }
  .quick-actions { grid-template-columns: 1fr 1fr; }
  .data-table { min-width: 700px; }
  .table-panel { overflow-x: auto; }
  .appointment-row { grid-template-columns: 56px 1fr; }
  .appointment-row .status { display: none; }
  .detail-row {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .detail-row-profile { grid-template-columns: 56px minmax(0, 1fr); }
  .detail-row > strong { white-space: normal; }
  .detail-row .status, .detail-meta { justify-self: start; }
}