/* Private utility records, separate from the tenant's shared address documents. */
html:root body main#app#app#app.app-shell:not(.hidden) #properties {
  font-family: Arial, sans-serif;
  --service-bg: #fff;
  --service-soft: #f4f7fa;
  --service-ink: #203447;
  --service-muted: #52697b;
  --service-line: #d5dfe8;
  --service-link: #155e9a;
  --service-danger: #b42318;
  --service-green: #147353;
}
html:root[data-theme="dark"] body main#app#app#app.app-shell:not(.hidden) #properties {
  --service-bg: #121b23;
  --service-soft: #1a2833;
  --service-ink: #f0f5fa;
  --service-muted: #b1c1ce;
  --service-line: #3d5060;
  --service-link: #a7d7ff;
  --service-danger: #ffb4ab;
  --service-green: #7fe2b7;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-layout:not(:has(.properties-v2-editor-panel[open])) { grid-template-columns: minmax(0, 1fr) !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-editor:not(:has(.properties-v2-editor-panel[open])) { display: none !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-row {
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  grid-template-columns: minmax(180px, 1.5fr) minmax(110px, .6fr) minmax(170px, .8fr) 230px;
  padding: 20px 16px !important;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties :is(h3, h4, .properties-v2-kpi strong) { font-family: inherit !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-title-line h3 { font-size: 17px !important; white-space: normal; overflow-wrap: anywhere; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-money small { font-size: 12px !important; white-space: normal; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-money strong { font-size: 14px !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-identity p { white-space: normal !important; font-size: 13px !important; line-height: 1.5 !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-actions button { min-height: 44px !important; font-size: 13px !important; border-radius: 6px !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-documents {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-documents > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px !important; padding: 7px 0 !important; font-size: 13px !important; color: var(--service-muted) !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-public-settings { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-public-settings > summary { min-height: 44px; cursor: pointer; font-size: 14px !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services {
  grid-column: 1 / -1;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-top: 1px solid var(--service-line) !important;
  border-radius: 0 !important;
  color: var(--service-ink) !important;
  background: transparent !important;
  box-shadow: none !important;
  min-width: 0;
  scroll-margin-top: 130px;
  scroll-margin-bottom: 100px;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services :is(strong, h4, label, dd, summary) { color: var(--service-ink) !important; letter-spacing: 0 !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services :is(small, dt, .service-notes, .service-empty) { color: var(--service-muted) !important; font-size: 13px !important; letter-spacing: 0 !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 48px;
  padding: 10px 0 !important;
  cursor: pointer;
  font-size: 14px !important;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services > summary > span:first-child::before { content: "+"; display: inline-block; width: 22px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services[open] > summary > span:first-child::before { content: "-"; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services > summary small { font-weight: 400; margin-left: 6px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-overview { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services-body { padding: 6px 0 12px; min-width: 0; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account {
  border: 0 !important;
  border-bottom: 1px solid var(--service-line) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account > summary { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; cursor: pointer; min-height: 60px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties :is(.service-account-title, .service-account-due) { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account-due { text-align: right; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-kind { font-size: 13px; border-left: 3px solid #cc980f; padding-left: 8px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-kind.water { border-color: #3689cc; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-kind.internet { border-color: #27a487; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account-body { padding: 0 0 16px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-notes { white-space: pre-wrap; overflow-wrap: anywhere; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account-data { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 10px 0; margin: 0; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account-data dd { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties :is(.service-toolbar, .service-bill-actions) { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-toolbar { margin: 6px 0 12px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services :is(button, a) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border: 1px solid var(--service-line) !important;
  border-radius: 6px !important;
  color: var(--service-link) !important;
  background: var(--service-bg) !important;
  box-shadow: none !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  text-decoration: none;
  cursor: pointer;
  letter-spacing: 0 !important;
}
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services :is(button, a):hover { background: var(--service-soft) !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-icon-button { width: 44px !important; flex: 0 0 44px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor; mask: var(--service-icon) center / contain no-repeat; }
.service-icon-plus { --service-icon: url('/icons/services/plus.svg'); }
.service-icon-pencil { --service-icon: url('/icons/services/pencil.svg'); }
.service-icon-trash-2 { --service-icon: url('/icons/services/trash-2.svg'); }
.service-icon-copy { --service-icon: url('/icons/services/copy.svg'); }
.service-icon-x { --service-icon: url('/icons/services/x.svg'); }
.service-icon-download { --service-icon: url('/icons/services/download.svg'); }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services button:disabled { opacity: .6; cursor: wait; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-bill { display: grid; grid-template-columns: minmax(150px, 1fr) 140px minmax(230px, 1fr); align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--service-line); }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-bill > div:first-child { display: grid; gap: 4px; min-width: 0; overflow-wrap: anywhere; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-bill-amount { display: grid; gap: 6px; justify-items: start; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-state { font-size: 12px; font-weight: 600; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services .overdue { color: var(--service-danger) !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .property-services .paid { color: var(--service-green) !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-paid-history { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-paid-history > summary { cursor: pointer; min-height: 44px; padding: 12px 0; font-size: 14px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form { margin-top: 16px; border-top: 2px solid var(--service-line); padding: 18px 0 0; scroll-margin-top: 140px; scroll-margin-bottom: 110px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form h4 { font-size: 18px !important; margin: 0; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form label { display: grid; gap: 6px; font-size: 14px !important; margin: 0 !important; min-width: 0; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-choice { display: grid; align-content: start; min-width: 0; gap: 10px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-custom-choice { padding-left: 10px; border-left: 2px solid var(--service-line); }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-custom-choice[hidden] { display: none !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form :is(input:not([type="checkbox"]), select, textarea) { width: 100% !important; min-width: 0 !important; min-height: 44px !important; padding: 10px !important; border: 1px solid var(--service-line) !important; border-radius: 6px !important; background: var(--service-bg) !important; color: var(--service-ink) !important; font: inherit !important; box-shadow: none !important; margin: 0 !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form textarea { min-height: 76px !important; resize: vertical; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form-wide { grid-column: 1 / -1; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form .service-check { display: flex !important; align-items: center; min-height: 44px; gap: 10px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-check input { width: 20px !important; height: 20px !important; min-height: 20px !important; flex: 0 0 20px; accent-color: #2276b6; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form footer { margin-top: 16px; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form button[type="submit"] { background: #176da9 !important; color: #fff !important; border-color: #176da9 !important; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form-error { color: var(--service-danger) !important; font-size: 14px !important; overflow-wrap: anywhere; }
html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form-error[hidden] { display: none !important; }
@media (max-width: 1180px) {
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-row { grid-template-columns: minmax(0, 1.4fr) minmax(100px, .6fr) minmax(170px, .8fr); }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-actions { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-bill { grid-template-columns: minmax(0, 1fr) auto; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-bill-actions { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  html:root body main#app#app#app#app#app#app.app-shell:not(.hidden):has(#rentals:not(.hidden) > #properties:not(.hidden) [data-property-services][open] [data-property-service-form]) nav#admin-bottom-nav.portal-bottom-nav.admin-bottom-nav { display: none !important; opacity: 0 !important; pointer-events: none !important; }
}
@media (max-width: 760px) {
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-row { grid-template-columns: minmax(0, 1fr) 100px; padding: 16px 10px !important; gap: 10px; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-actions { grid-template-columns: 1fr 1fr; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .properties-v2-intro-actions { grid-template-columns: 1fr 1fr; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account > summary { grid-template-columns: 60px minmax(0, 1fr); gap: 8px; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account-due { grid-column: 2; text-align: left; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-account-data { grid-template-columns: 1fr 1fr; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form-grid { grid-template-columns: minmax(0, 1fr); }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form :is(input, select, textarea) { font-size: 16px !important; }
  html:root body main#app#app#app.app-shell:not(.hidden) #properties .service-form footer button { width: 100%; }
}
