/* ===== Product responsive audit layer: phones, tablets, iPad ===== */
html,
body {
 width:100%;
 min-width:0;
}

#main,
.page,
.content {
 min-width:0;
}

.content,
.table-wrap,
#cal-main-area,
.svc-nav-list,
.svc-grid,
.modal,
.modal-body,
.order-wizard-step {
 -webkit-overflow-scrolling:touch;
}

.table-wrap {
 max-width:100%;
 overflow:auto !important;
}

.data-table,
#orders-table {
 min-width:max-content;
}

.table-wrap th {
 position:sticky;
 top:0;
 z-index:3;
}

.modal-bg {
 overflow:auto !important;
 align-items:center;
}

.modal,
.generic-modal-card {
 box-sizing:border-box;
 overscroll-behavior:contain;
}

@media (min-width: 769px) and (max-width: 1200px) {
 body { overflow:hidden !important; }

 #main {
  height:100dvh;
  overflow:hidden;
 }

 .page.active:not(#page-calendar):not(#page-kanban) {
  height:100dvh;
  overflow:hidden;
 }

 .page.active > .content {
  height:calc(100dvh - 56px) !important;
  overflow:auto;
  min-height:0;
 }

 .topbar {
  position:relative !important;
  z-index:30 !important;
 }

 #sidebar {
  height:100dvh !important;
  overflow-y:auto !important;
 }



 .sidebar-overlay.visible {
  display:block !important;
 }

 #orders-filter-bar {
  position:sticky;
  top:0;
  z-index:12;
  background:var(--bg-app);
  padding-bottom:8px;
  margin-bottom:10px;
 }

 #orders-table-view {
  min-width:0;
 }

 #orders-table-view .table-wrap {
  max-height:calc(100dvh - 190px);
  overflow:auto !important;
 }

 #orders-table {
  min-width:1120px !important;
 }

 #page-clients > .content {
  padding-right:18px !important;
 }

 #page-clients .filter-bar,
 #page-clients .client-filters,
 #page-clients [style*="gap:8px"][style*="margin-bottom"] {
  flex-wrap:wrap;
 }

 #clients-side-panel.mobile-open,
 #clients-side-panel[style*="width: 100%"],
 #clients-side-panel[style*="width:100%"] {
  transform:translateX(0) !important;
  width:min(440px, 48vw) !important;
 }

 #cal-main-area {
  overflow:auto !important;
  overscroll-behavior:contain;
 }

 #cal-week-view,
 #cal-day-view {
  min-width:980px !important;
 }

 #cal-week-header,
 #cal-day-header {
  position:sticky !important;
  top:0 !important;
  z-index:8 !important;
 }

 #cal-sch-side-panel[style*="width: 100%"],
 #cal-sch-side-panel[style*="width:100%"],
 #cal-sch-side-panel[style*="width: 320px"],
 #cal-sch-side-panel[style*="width:320px"] {
  transform:translateX(0) !important;
  width:min(420px, 46vw) !important;
 }

 #page-services {
  height:100dvh !important;
  overflow:hidden !important;
 }

 #page-services > .svc-page-content {
  height:calc(100dvh - 56px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
 }

 #svc-page-catalog {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
 }

 #svc-page-catalog > .svc-workspace {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
 }

 #svc-page-catalog .svc-layout {
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  grid-template-columns:minmax(238px, 30%) minmax(620px, 1fr) !important;
 }

 #svc-page-catalog .svc-sidebar,
 #svc-page-catalog .svc-content,
 #svc-page-catalog .svc-content-body {
  min-height:0 !important;
 }

 #svc-page-catalog .svc-nav-list {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
 }

 #svc-page-catalog .svc-content {
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
 }

 #svc-page-catalog .svc-content-body {
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
 }

 #svc-page-catalog .svc-grid {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
 }

 #svc-page-catalog .svc-tbl-head {
  position:sticky !important;
  top:0 !important;
  z-index:7 !important;
 }

 #page-settings > .content,
 #page-finance > .content {
  height:calc(100dvh - 56px) !important;
  overflow:hidden !important;
 }

 #page-settings > .content > div,
 #page-finance > .content > div {
  min-height:0;
 }

 #page-settings > .content > div > div:last-child,
 #page-finance > .content > div > div:last-child {
  overflow:auto !important;
 }

 .modal-bg {
  padding:18px !important;
 }

 .modal,
 .generic-modal-card,
 #order-modal-box,
 #booking-modal-inner {
  width:min(760px, calc(100vw - 36px)) !important;
  max-width:calc(100vw - 36px) !important;
  max-height:calc(100dvh - 36px) !important;
 }
}

@media (max-width: 768px) {
 body { overflow:hidden !important; }

 #main {
  height:100dvh;
  overflow:hidden;
 }

 .page.active:not(#page-calendar):not(#page-kanban) {
  height:100dvh;
  overflow:hidden;
 }

 .page.active > .content {
  height:calc(100dvh - 56px) !important;
  overflow:auto;
  min-height:0;
 }

 .topbar {
  position:relative !important;
  height:56px !important;
  padding:0 12px !important;
  gap:8px !important;
  z-index:30 !important;
 }

 .topbar-right {
  gap:6px !important;
  overflow-x:auto;
  max-width:58vw;
 }

 .page-title {
  font-size:15px !important;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
 }

 #sidebar {
  width:min(286px, 88vw) !important;
  height:100dvh !important;
  overflow-y:auto !important;
 }

 #orders-filter-bar {
  position:sticky;
  top:0;
  z-index:12;
  background:var(--bg-app);
  padding-bottom:8px;
 }

 #orders-table-view .table-wrap {
  max-height:calc(100dvh - 210px);
  overflow:auto !important;
 }

 #orders-table {
  min-width:1080px !important;
 }

 .clients-board-grid {
  grid-template-columns:1fr !important;
 }

 #clients-side-panel.mobile-open,
 #clients-side-panel[style*="width: 100%"],
 #clients-side-panel[style*="width:100%"] {
  transform:translateX(0) !important;
  width:100vw !important;
  max-width:none !important;
 }

 #cal-main-area {
  overflow:auto !important;
 }

 #cal-week-view,
 #cal-day-view {
  min-width:860px !important;
 }

 #cal-week-header,
 #cal-day-header {
  position:sticky !important;
  top:0 !important;
  z-index:8 !important;
 }

 #cal-sch-side-panel[style*="width: 100%"],
 #cal-sch-side-panel[style*="width:100%"],
 #cal-sch-side-panel[style*="width: 320px"],
 #cal-sch-side-panel[style*="width:320px"] {
  transform:translateX(0) !important;
  width:100vw !important;
  max-width:none !important;
 }

 #page-services {
  height:100dvh !important;
  overflow:hidden !important;
 }

 #page-services > .svc-page-content {
  height:calc(100dvh - 56px) !important;
  overflow:auto !important;
 }

 #svc-page-catalog .svc-layout {
  display:flex !important;
  flex-direction:column !important;
  max-height:none !important;
  overflow:visible !important;
 }

 #svc-page-catalog .svc-sidebar {
  max-height:260px !important;
  overflow:hidden !important;
 }

 #svc-page-catalog .svc-nav-list {
  overflow-y:auto !important;
 }

 #svc-page-catalog .svc-content {
  overflow:visible !important;
 }

 #svc-page-catalog .svc-grid {
  overflow:auto !important;
 }

 #page-settings > .content,
 #page-finance > .content {
  height:calc(100dvh - 56px) !important;
  overflow:hidden !important;
 }

 #page-settings > .content > div,
 #page-finance > .content > div {
  flex-direction:column !important;
  height:100% !important;
 }

 #page-settings > .content > div > div:first-child,
 #page-finance > .content > div > div:first-child {
  width:100% !important;
  max-height:168px;
  overflow:auto !important;
  border-right:0 !important;
  border-bottom:1px solid var(--border) !important;
 }

 #page-settings > .content > div > div:last-child,
 #page-finance > .content > div > div:last-child {
  flex:1 1 auto !important;
  overflow:auto !important;
  padding:16px !important;
 }

 .modal-bg {
  align-items:flex-start !important;
  padding:10px !important;
 }

 .modal,
 .generic-modal-card,
 #order-modal-box,
 #booking-modal-inner {
  width:calc(100vw - 20px) !important;
  max-width:calc(100vw - 20px) !important;
  max-height:calc(100dvh - 20px) !important;
 }

 #order-modal-box {
  height:calc(100dvh - 20px) !important;
 }

 .modal-header,
 .modal-body,
 .modal-footer {
  padding-left:16px !important;
  padding-right:16px !important;
 }

 .modal-footer {
  flex-wrap:wrap;
 }

 .modal-footer .btn {
  flex:1 1 auto;
 }
}

/* ===== Final services scroll containment for iPad Pro ===== */
@media (min-width: 821px) and (max-width: 1366px) {










 #svc-page-catalog #svc-block-header,
 #svc-page-catalog .svc-metrics {
  flex-shrink:0 !important;
 }






}

/* ===== Services page scroll fix for iPad Pro ===== */
@media (min-width: 821px) and (max-width: 1366px) {


 #page-services .svc-page-tabs,
 #page-services #svc-page-catalog > .settings-section-desc {
  flex-shrink:0 !important;
 }
 #svc-page-catalog {
  min-height:0 !important;
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
 }
 #svc-page-catalog > .svc-workspace {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
 }
 #svc-page-catalog .svc-layout {
  height:100% !important;
  min-height:0 !important;
  max-height:none !important;
  overflow:hidden !important;
  grid-template-columns: minmax(250px, 30%) minmax(0,1fr) !important;
 }
 #svc-page-catalog .svc-sidebar,
 #svc-page-catalog .svc-content {
  min-height:0 !important;
  max-height:none !important;
 }


 #svc-page-catalog .svc-content {
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  padding-bottom:44px !important;
 }
 #svc-page-catalog .svc-grid {
  overflow:visible !important;
 }



}

/* ===== iPad Pro / Tablet layout: keep this block last ===== */
@media (min-width: 769px) and (max-width: 1200px) {
 body { overflow:hidden; }

 #sidebar {
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  bottom:0 !important;
  width:260px !important;
  transform:translateX(-104%) !important;
  transition:transform .24s ease !important;
  z-index:210 !important;
  box-shadow:20px 0 54px rgba(23, 23, 23,.18) !important;
 }


 .sidebar-overlay {
  z-index:205 !important;
  background:rgba(23, 23, 23,.36) !important;
  backdrop-filter:blur(2px);
 }








 .page > .content[style*="height:calc(100vh - 56px)"],
 .page > .content[style*="height:calc(100vh - 60px)"] {
  height:calc(100vh - 56px) !important;
 }







 #orders-filter-bar > div[style*="width:190px"] {
  width:min(280px, 44vw) !important;
  flex:1 1 240px !important;
 }
 #orders-summary {
  width:100%;
  margin-left:0 !important;
  justify-content:flex-start;
  overflow-x:auto;
  padding-bottom:2px;
 }
 #of-active-chips {
  max-width:100%;
 }



 #clients-side-panel[style*="width: 320px"],
 #clients-side-panel[style*="width:320px"],
 #clients-side-panel[style*="width: 290px"],
 #clients-side-panel[style*="width:290px"],
 #clients-side-panel[style*="width: 360px"],
 #clients-side-panel[style*="width:360px"] {
  transform:translateX(0);
 }





 .cal-view-switch {
  flex-shrink:0;
 }



 #cal-month-view {
  padding:12px !important;
 }







 #page-settings > .content > div,
 #page-finance > .content > div {
  min-width:0 !important;
 }



 .settings-nav-icon {
  width:16px !important;
  height:16px !important;
 }

 .svc-page-tabs {
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
 }

 .modal-bg {
  padding:18px !important;
  align-items:center !important;
 }


 .modal-header,
 .ui-modal-head,
 .debt-card-header,
 #order-modal-box>div:first-child,
 #modal-edit-order>.modal>div:first-child {
  padding:18px 20px 14px !important;
 }
 .modal-body,
 .ui-modal-body,
 .debt-card-form,
 .debt-card-summary,
 #modal-edit-order>.modal>div:nth-child(2) {
  padding:18px 20px !important;
 }
 .modal-footer,
 .ui-modal-actions,
 .debt-card-footer,
 #order-modal-box>div:last-child,
 #modal-edit-order>.modal>div:last-child {
  padding:14px 20px !important;
 }

 .ua-layout {
  grid-template-columns:1fr !important;
 }
 .ua-users {
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
 }
}

@media (min-width: 1201px) {


}
body.dark .svc-nav-btn.active,
body.dark .settings-nav-btn.active,
body.dark .ua-user-card.active {
 background: color-mix(in srgb,var(--accent-light) 78%, var(--bg-surface) 22%) !important;
 border-color: var(--accent-border) !important;
}
body.dark .svc-nav-btn.active .svc-nav-name,
body.dark .settings-nav-btn.active,
body.dark .settings-nav-btn.active .settings-nav-icon,
body.dark .ua-owner-badge {
 color: var(--accent-strong,var(--accent)) !important;
}
body.dark .svc-nav-btn.active .svc-nav-count {
 background: var(--accent-strong,var(--accent)) !important;
 color: var(--accent-contrast,#1a1a1a) !important;
}
body.dark .topbar { background: rgba(27, 27, 27,.9) !important; border-bottom-color: var(--border) !important; }
body.dark #sidebar { background: #1f1f1f !important; }

/* ===== Premium spacing + chrome polish ===== */
#sidebar{
 width:228px;
 box-shadow:20px 0 46px rgba(23, 23, 23,.1);
}
#main{margin-left:228px}
.logo{
 padding:20px 18px 16px;
 background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
}
.logo-user-block{gap:10px}
.logo-user-badge{
 width:34px;
 height:34px;
 background:rgba(255,255,255,.12);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.nav-section{padding:10px 0}
.nav-label{
 padding:7px 18px 5px;
 font-size:9px;
 letter-spacing:.11em;
}
.nav-item{
 margin:0 10px 3px 0;
 padding:10px 14px 10px 18px;
 border-radius:0 14px 14px 0;
}
.nav-item.active{
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 26%, transparent) 0%,rgba(255,255,255,.08) 100%);
}
.sidebar-bottom{
 padding:14px 18px;
 background:linear-gradient(180deg,transparent,rgba(255,255,255,.025));
}
.topbar{
 height:60px;
 padding:0 28px;
 box-shadow:0 8px 24px rgba(23, 23, 23,.04);
}
.page-title{
 font-size:19px;
 letter-spacing:-.015em;
}
.topbar-right{gap:10px}
.content{padding:28px}

/* Tables — more air */
.table-wrap{
 border-radius:18px;
 box-shadow:0 14px 34px rgba(23, 23, 23,.055);
}
th{
 padding:13px 18px;
 font-size:9.5px;
}
td{
 padding:14px 18px;
}
.cl-row td{
 padding-top:13px;
 padding-bottom:13px;
}
.client-cell{gap:10px}
.avatar{
 width:32px;
 height:32px;
 font-size:11px;
}
.client-name{
 font-size:12.5px;
}

/* Modal polish */
.modal,
.generic-modal-card,
.debt-card-modal{
 border-radius:20px;
 box-shadow:0 28px 70px rgba(23, 23, 23,.18);
}
.modal-header,
.ui-modal-head,
.debt-card-header,
#order-modal-box>div:first-child,
#modal-edit-order>.modal>div:first-child{
 padding-top:24px !important;
 padding-bottom:18px !important;
}
.modal-body,
.ui-modal-body,
.debt-card-form,
.debt-card-summary,
#modal-edit-order>.modal>div:nth-child(2){
 background:linear-gradient(180deg,var(--bg-surface) 0%, color-mix(in srgb,var(--bg-surface-2) 72%, var(--bg-surface) 28%) 100%) !important;
}
.modal-footer,
.ui-modal-actions,
.debt-card-footer,
#order-modal-box>div:last-child,
#modal-edit-order>.modal>div:last-child{
 background:var(--bg-surface) !important;
}
.ui-modal-title,
.modal-header h3,
.debt-card-title{
 letter-spacing:-.02em;
}
.ui-modal-subtitle,
.debt-card-subtitle{
 color:rgba(255,255,255,.76);
}

/* Dark premium finish */
body.dark #sidebar{
 background:linear-gradient(180deg,#1f1f1f 0%, #191919 100%) !important;
 box-shadow:24px 0 54px rgba(0,0,0,.28);
}
body.dark .logo{
 background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));
 border-bottom-color:rgba(255,255,255,.06);
}
body.dark .nav-item:hover{
 background:rgba(255,255,255,.045);
}
body.dark .nav-item.active{
 background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%, transparent) 0%, rgba(255,255,255,.04) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
body.dark .topbar{
 background:rgba(25, 25, 25,.92) !important;
 box-shadow:0 10px 30px rgba(0,0,0,.18);
}
body.dark .table-wrap,
body.dark .modal,
body.dark .generic-modal-card,
body.dark .debt-card-modal{
 box-shadow:0 28px 70px rgba(0,0,0,.34);
}
body.dark .modal-body,
body.dark .ui-modal-body,
body.dark .debt-card-form,
body.dark .debt-card-summary,
body.dark #modal-edit-order>.modal>div:nth-child(2){
 background:linear-gradient(180deg,var(--bg-surface) 0%, color-mix(in srgb,var(--bg-surface-2) 82%, var(--bg-surface) 18%) 100%) !important;
}

/* ===== Final monochrome tail ===== */
body.dark .btn { background: var(--bg-surface-2) !important; border-color: var(--border) !important; color: var(--text-primary) !important; }
body.dark .btn:hover { background: var(--bg-surface-3) !important; }
body.dark .btn-primary,
body.dark .btn.active,
body.dark .cal-view-btn.active,
body.dark .dash-period-btn.active,
body.dark .order-view-btn.active,
body.dark .filter-btn.active,
body.dark .client-filter-btn.active,
body.dark #of-quick-month.active-month {
 background: linear-gradient(135deg,var(--accent-strong,var(--accent)) 0%,var(--accent) 100%) !important;
 border-color: var(--accent-border) !important;
 color: var(--accent-contrast,#1a1a1a) !important;
}
body.dark .btn-primary:hover,
body.dark .btn.active:hover,
body.dark .cal-view-btn.active:hover,
body.dark .dash-period-btn.active:hover,
body.dark .order-view-btn.active:hover,
body.dark .filter-btn.active:hover,
body.dark .client-filter-btn.active:hover {
 background: linear-gradient(135deg,var(--accent) 0%,var(--accent-hover) 100%) !important;
 border-color: var(--accent-border) !important;
}
body.dark .cal-view-btn { background: transparent !important; color: var(--text-secondary) !important; }
body.dark .cal-view-btn:hover:not(.active) { background: var(--bg-surface-3) !important; color: var(--text-primary) !important; }

/* ===== True final iPad Pro / tablet override ===== */
@media (min-width: 769px) and (max-width: 1200px) {
 #sidebar {
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  bottom:0 !important;
  width:260px !important;
  transform:translateX(-104%) !important;
  transition:transform .24s ease !important;
  z-index:210 !important;
 }
 #sidebar.open { transform:translateX(0) !important; }
 #main {
  margin-left:0 !important;
  width:100vw !important;
  min-width:0 !important;
 }
 .burger-btn {
  display:flex !important;
  width:38px !important;
  height:38px !important;
  flex:0 0 38px !important;
 }
 .sidebar-overlay { z-index:205 !important; }
 .topbar {
  height:56px !important;
  padding:0 18px !important;
  gap:12px !important;
 }
 .page-title {
  font-size:17px !important;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 }
 .topbar-right {
  gap:7px !important;
  min-width:0;
  flex-wrap:nowrap;
 }
 .topbar-right .btn,
 .topbar-right .btn-primary,
 .topbar-right .btn-logout,
 .btn {
  min-height:34px;
  padding:7px 11px;
  font-size:12px;
  white-space:nowrap;
 }
 .content { padding:18px !important; }
 .table-wrap,
 #orders-table-view .table-wrap {
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  border-radius:14px !important;
 }
 #orders-table { min-width:1040px; }
 th {
  padding:10px 12px !important;
  font-size:9px !important;
 }
 td {
  padding:11px 12px !important;
  font-size:12px;
 }
 #orders-filter-bar {
  flex-wrap:wrap !important;
  gap:7px !important;
 }
 #orders-summary {
  width:100%;
  margin-left:0 !important;
  justify-content:flex-start;
  overflow-x:auto;
 }
 .clients-board-grid {
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:12px !important;
 }
 #clients-side-panel {
  position:fixed !important;
  top:56px !important;
  right:0 !important;
  bottom:0 !important;
  width:min(380px, 42vw) !important;
  max-width:420px !important;
  height:auto !important;
  transform:translateX(100%);
  transition:transform .22s ease !important;
  z-index:160 !important;
  box-shadow:-18px 0 42px rgba(23, 23, 23,.14);
  background:var(--bg-surface);
 }
 #clients-side-panel[style*="width: 360px"],
 #clients-side-panel[style*="width:360px"],
 #clients-side-panel[style*="width: 100%"],
 #clients-side-panel[style*="width:100%"] {
  transform:translateX(0);
 }
 #clients-side-inner { width:100% !important; }
 .cal-topbar {
  min-height:56px;
  padding:0 18px !important;
  gap:10px !important;
  flex-wrap:wrap;
 }
 .cal-topbar-right {
  gap:6px !important;
  flex-wrap:wrap;
  justify-content:flex-end;
 }
 .cal-title-text {
  font-size:16px !important;
  max-width:38vw;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
 }
 .cal-view-btn {
  min-height:30px;
  padding:5px 10px !important;
  font-size:12px !important;
 }
 #cal-main-area {
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
 }
 #cal-week-view,
 #cal-day-view {
  min-width:900px;
 }
 #cal-sch-side-panel {
  position:fixed !important;
  top:56px !important;
  right:0 !important;
  bottom:0 !important;
  width:min(420px, 46vw) !important;
  max-width:460px !important;
  height:auto !important;
  transform:translateX(100%);
  transition:transform .22s ease !important;
  z-index:155 !important;
  box-shadow:-18px 0 42px rgba(23, 23, 23,.14);
 }
 #cal-sch-side-panel[style*="width: 320px"],
 #cal-sch-side-panel[style*="width:320px"] {
  transform:translateX(0);
 }
 #kanban-board,
 #orders-kanban {
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  flex-wrap:nowrap !important;
 }
 .kanban-col {
  min-width:260px !important;
  max-width:260px !important;
 }
 #page-settings > .content,
 #page-finance > .content { padding:0 !important; }
 #page-settings > .content > .settings-subnav,
 #page-finance > .content > div > div:first-child {
  width:184px !important;
  flex-basis:184px !important;
 }
 #page-settings > .content > div > div:last-child,
 #page-finance > .content > div > div:last-child { padding:20px !important; }
 .settings-nav-btn {
  padding:8px 9px !important;
  font-size:12px !important;
  gap:7px !important;
 }
 .svc-page-content { padding:18px !important; }
 .modal,
 .generic-modal-card,
 .debt-card-modal,
 #order-modal-box,
 #modal-edit-order > .modal {
  width:min(720px, calc(100vw - 36px)) !important;
  max-width:calc(100vw - 36px) !important;
  max-height:calc(100vh - 36px) !important;
 }
 #order-modal-box { height:min(680px, calc(100vh - 36px)) !important; }
}

@media (min-width: 1201px) {
 #sidebar { transform:none !important; }
 .burger-btn,
 .sidebar-overlay { display:none !important; }
}

/* ===== True final services scroll containment for iPad Pro ===== */
@media (min-width: 821px) and (max-width: 1366px) {
 #page-services {
  height:100vh !important;
  overflow:hidden !important;
 }
 #page-services > .svc-page-content {
  height:calc(100dvh - 56px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  min-height:0 !important;
  padding-bottom:18px !important;
 }
 #page-services .svc-page-tabs,
 #page-services #svc-page-catalog > .settings-section-desc,
 #svc-page-catalog #svc-block-header,
 #svc-page-catalog .svc-metrics {
  flex:0 0 auto !important;
 }
 #svc-page-catalog,
 #svc-page-catalog > .svc-workspace,
 #svc-page-catalog .svc-layout,
 #svc-page-catalog .svc-sidebar,
 #svc-page-catalog .svc-content,
 #svc-page-catalog .svc-content-body {
  min-height:0 !important;
 }
 #svc-page-catalog {
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
 }
 #svc-page-catalog > .svc-workspace {
  flex:1 1 auto !important;
  overflow:hidden !important;
 }
 #svc-page-catalog .svc-layout {
  height:100% !important;
  max-height:none !important;
  overflow:hidden !important;
  grid-template-columns:minmax(250px,30%) minmax(0,1fr) !important;
 }
 #svc-page-catalog .svc-sidebar {
  overflow:hidden !important;
 }
 #svc-page-catalog .svc-nav-list {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
 }
 #svc-page-catalog .svc-content {
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
  padding-bottom:18px !important;
 }
 #svc-page-catalog .svc-content-body {
  flex:1 1 auto !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
 }
 #svc-page-catalog .svc-grid {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
 }
 #svc-page-catalog .svc-tbl-head {
  position:sticky !important;
  top:0 !important;
  z-index:6 !important;
  box-shadow:0 1px 0 var(--border);
 }
 #svc-page-catalog .svc-hero {
  padding:14px 16px !important;
 }
 #svc-page-catalog .svc-metrics {
  margin:10px 0 !important;
 }
 #svc-page-catalog .svc-data-row {
  min-height:44px !important;
 }
}

/* ===== True final export schedule modal segmented buttons ===== */
#modal-export-slots .exp-period-btn,
#modal-export-slots .exp-who-btn {
 flex:1 1 0 !important;
 min-width:0 !important;
 height:30px !important;
 padding:0 10px !important;
 border:0 !important;
 border-radius:6px !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
 font-size:11px !important;
 font-weight:700 !important;
 line-height:1 !important;
 white-space:nowrap !important;
 font-family:inherit !important;
 cursor:pointer !important;
 box-sizing:border-box !important;
}

/* ===== True final orders table sticky header ===== */
#orders-table-view .table-wrap {
 max-height:calc(100dvh - 172px) !important;
 overflow:auto !important;
 overscroll-behavior:contain;
 scrollbar-gutter:stable;
}
#orders-table thead th {
 position:sticky !important;
 top:0 !important;
 z-index:60 !important;
 background:var(--bg-surface) !important;
 box-shadow:0 1px 0 var(--border), 0 8px 18px rgba(23, 23, 23,.045);
}
#orders-table thead th .col-filter-drop {
 z-index:70;
}

/* ===== Absolute final payment calendar event color ===== */
.debt-calendar-event {
 background:#a6a6a6 !important;
 border-left:0 !important;
 color:#323232 !important;
 box-shadow:inset 0 -1px 0 rgba(50, 50, 50,.12) !important;
}
.debt-calendar-day.is-muted .debt-calendar-event {
 opacity:.78 !important;
}

/* ===== Absolute last payment modal polish ===== */
.debt-calendar-modal {
 width:560px !important;
 max-width:calc(100vw - 44px) !important;
 border-radius:17px !important;
 border:1px solid #e0e0e0 !important;
 background:#fff !important;
 box-shadow:0 24px 64px rgba(23, 23, 23,.24) !important;
}
.debt-calendar-modal-head {
 padding:20px 24px 18px !important;
 background:#fff !important;
 border-bottom:1px solid #eaeaea !important;
}
.debt-calendar-modal-head::before {
 height:2px !important;
 background:#8ca63c !important;
 opacity:1 !important;
}
.debt-calendar-modal-kicker {
 margin-bottom:7px !important;
 color:#868686 !important;
 font-size:10px !important;
 font-weight:800 !important;
 letter-spacing:.14em !important;
}
.debt-calendar-modal-title {
 color:#181818 !important;
 font-size:19px !important;
 font-weight:800 !important;
 line-height:1.18 !important;
 letter-spacing:0 !important;
}
.debt-calendar-modal-sub {
 margin-top:7px !important;
 max-width:390px !important;
 color:#5e5e5e !important;
 font-size:12px !important;
 line-height:1.42 !important;
}
.debt-calendar-modal .debt-card-close {
 width:34px !important;
 height:34px !important;
 border-radius:10px !important;
 border:1px solid #dfdfdf !important;
 background:#fafafa !important;
 color:#727272 !important;
 font-size:18px !important;
}
.debt-calendar-modal .debt-card-close:hover {
 background:#f2f2f2 !important;
 color:#313131 !important;
}
.debt-calendar-modal-body {
 padding:21px 24px 22px !important;
 gap:13px !important;
 background:#fafafa !important;
}
.debt-calendar-modal .debt-card-grid {
 gap:12px !important;
}
.debt-calendar-modal .debt-card-field label {
 margin-bottom:7px !important;
 color:#707070 !important;
 font-size:10px !important;
 font-weight:800 !important;
 letter-spacing:.09em !important;
 line-height:1.1 !important;
}
.debt-calendar-modal .debt-card-field label em {
 color:#959595 !important;
 font-size:9px !important;
 font-weight:700 !important;
}
.debt-calendar-modal .debt-card-field .input {
 height:42px !important;
 padding:0 12px !important;
 border:1px solid #dcdcdc !important;
 border-radius:11px !important;
 background:#fff !important;
 color:#1f1f1f !important;
 font-size:13px !important;
 font-weight:500 !important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.025) !important;
}
.debt-calendar-modal .debt-card-field select.input {
 padding-right:34px !important;
}
.debt-calendar-modal .debt-card-field .input::placeholder {
 color:#959595 !important;
 font-weight:500 !important;
}
.debt-calendar-modal .debt-card-field .input:hover {
 border-color:#c7c7c7 !important;
}
.debt-calendar-modal .debt-card-field .input:focus {
 border-color:#2f2f2f !important;
 box-shadow:0 0 0 3px rgba(47, 47, 47,.10) !important;
}
.debt-calendar-modal .debt-card-input-unit b {
 right:13px !important;
 color:#959595 !important;
 font-size:10px !important;
}
.debt-calendar-modal-actions {
 padding:15px 24px !important;
 background:#fff !important;
 border-top:1px solid #eaeaea !important;
}
.debt-calendar-modal-actions .btn {
 height:38px !important;
 min-width:88px !important;
 padding:0 17px !important;
 border-radius:10px !important;
 font-size:12px !important;
 font-weight:800 !important;
}
.debt-calendar-modal-actions .btn:not(.btn-primary):not(.btn-danger) {
 background:#fff !important;
 border:1px solid #dfdfdf !important;
 color:#313131 !important;
}
.debt-calendar-modal-actions .btn-primary {
 min-width:112px !important;
 background:#282828 !important;
 border-color:#282828 !important;
 color:#fff !important;
}
.debt-calendar-modal-actions .btn-primary:hover {
 background:#181818 !important;
 border-color:#181818 !important;
}
.debt-calendar-modal-actions .btn-danger {
 background:#fff !important;
 border:1px solid #fecaca !important;
 color:#dc2626 !important;
}
@media (max-width: 640px) {
 .debt-calendar-modal {
  max-width:calc(100vw - 22px) !important;
  border-radius:15px !important;
 }
 .debt-calendar-modal-head,
 .debt-calendar-modal-body,
 .debt-calendar-modal-actions {
  padding-left:17px !important;
  padding-right:17px !important;
 }
 .debt-calendar-modal-title {
  font-size:18px !important;
 }
 .debt-calendar-modal .debt-card-grid {
  grid-template-columns:1fr !important;
 }
}

/* ===== Final payment calendar category readability ===== */
.debt-calendar-event {
 background:color-mix(in srgb, var(--event-color, #8b7355) 18%, #fff 82%) !important;
 border:1px solid color-mix(in srgb, var(--event-color, #8b7355) 46%, #e9e9e9 54%) !important;
 border-left:4px solid var(--event-color, #8b7355) !important;
 color:#1f1f1f !important;
 box-shadow:inset 0 -1px 0 rgba(31, 31, 31,.08), 0 1px 2px rgba(23, 23, 23,.04) !important;
}
.debt-calendar-event b,
.debt-calendar-event em {
 color:#1f1f1f !important;
}
.debt-calendar-event.is-paid {
 background:color-mix(in srgb, #16a34a 16%, #fff 84%) !important;
 border-color:color-mix(in srgb, #16a34a 42%, #e9e9e9 58%) !important;
 border-left-color:#16a34a !important;
}
body.dark .debt-calendar-event {
 background:color-mix(in srgb, var(--event-color, #9b8060) 42%, #252525 58%) !important;
 border-color:color-mix(in srgb, var(--event-color, #9b8060) 64%, #434343 36%) !important;
 border-left-color:var(--event-color, #9b8060) !important;
 color:#f7f7f7 !important;
 box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), 0 1px 2px rgba(0,0,0,.18) !important;
}
body.dark .debt-calendar-event b,
body.dark .debt-calendar-event em {
 color:#f7f7f7 !important;
}
body.dark .debt-calendar-event.is-paid {
 background:color-mix(in srgb, #16a34a 38%, #252525 62%) !important;
 border-color:color-mix(in srgb, #16a34a 64%, #434343 36%) !important;
 border-left-color:#16a34a !important;
}

/* ===== Last payment modal type picker override ===== */
.debt-calendar-modal .payment-expense-picker {
 grid-template-columns:1fr !important;
 gap:12px !important;
}
.debt-calendar-modal .payment-type-native {
 position:absolute !important;
 width:1px !important;
 height:1px !important;
 opacity:0 !important;
 pointer-events:none !important;
}
.payment-type-buttons {
 display:grid !important;
 grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
 gap:8px !important;
 max-height:156px !important;
 overflow:auto !important;
 padding:2px 2px 4px !important;
}
.payment-type-chip {
 min-width:0 !important;
 min-height:38px !important;
 padding:8px 10px !important;
 border:1px solid #e0e0e0 !important;
 border-radius:10px !important;
 background:#fff !important;
 color:#313131 !important;
 font-size:12px !important;
 font-weight:800 !important;
 line-height:1.15 !important;
 text-align:left !important;
 overflow:hidden !important;
 text-overflow:ellipsis !important;
 white-space:nowrap !important;
 cursor:pointer !important;
}
.payment-type-chip:hover {
 border-color:#c4c4c4 !important;
 background:#fafafa !important;
}
.payment-type-chip.is-active {
 border-color:#282828 !important;
 background:#282828 !important;
 color:#fff !important;
 box-shadow:0 8px 18px rgba(40, 40, 40,.14) !important;
}
.payment-type-empty {
 grid-column:1 / -1 !important;
 padding:10px 12px !important;
 border:1px dashed #dfdfdf !important;
 border-radius:10px !important;
 color:#959595 !important;
 font-size:12px !important;
 font-weight:700 !important;
}
body.dark .payment-type-chip {
 border-color:#454545 !important;
 background:#272727 !important;
 color:#ececec !important;
}
body.dark .payment-type-chip:hover {
 border-color:#5f5f5f !important;
 background:#303030 !important;
}
body.dark .payment-type-chip.is-active {
 border-color:#ececec !important;
 background:#ececec !important;
 color:#1f1f1f !important;
 box-shadow:none !important;
}
body.dark .payment-type-empty {
 border-color:#454545 !important;
 color:#a6a6a6 !important;
}
@media (max-width: 640px) {
 .payment-type-buttons {
  grid-template-columns:1fr !important;
  max-height:190px !important;
 }
}

/* ===== Last dark calendar booking cleanup ===== */
body.dark #page-calendar .cal-booking {
 box-shadow:0 1px 4px rgba(0,0,0,.18) !important;
}
body.dark #page-calendar .cal-booking-name {
 color:var(--text-primary) !important;
 text-shadow:none !important;
}
body.dark #page-calendar .cal-booking-type,
body.dark #page-calendar .cal-booking-time,
body.dark #page-calendar .cal-booking-addr {
 color:var(--text-secondary) !important;
 text-shadow:none !important;
}
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) {
 background:linear-gradient(rgba(126,64,112,.54),rgba(126,64,112,.54)), var(--bg-surface) !important;
 border-left-color:#e879c7 !important;
 box-shadow:0 1px 5px rgba(0,0,0,.22) !important;
}
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-name {
 color:#fff1fb !important;
}
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-type,
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-time,
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-addr {
 color:#ffd7ef !important;
}

/* ===== Last dark calendar blocked slot cleanup ===== */
body.dark #page-calendar .cal-time-block {
 background:repeating-linear-gradient(45deg,#252525 0px,#252525 5px,#2b2b2b 5px,#2b2b2b 10px) !important;
 border-color:#3e3e3e !important;
 color:#c2c2c2 !important;
 box-shadow:none !important;
}
body.dark #page-calendar .cal-time-block:hover {
 background:repeating-linear-gradient(45deg,#292929 0px,#292929 5px,#303030 5px,#303030 10px) !important;
}
body.dark #page-calendar .cal-time-block span {
 color:#c2c2c2 !important;
}

/* ===== Final light calendar blocked slot restore ===== */
body:not(.dark) #page-calendar .cal-time-block {
 background:repeating-linear-gradient(45deg,#f2f2f2 0px,#f2f2f2 3px,#e6e6e6 3px,#e6e6e6 6px) !important;
 border-top-color:#bcbcbc !important;
 border-right-color:#bcbcbc !important;
 border-bottom-color:#bcbcbc !important;
 color:#535353 !important;
 box-shadow:none !important;
}


/* ===== Debt payment schedule modal ===== */
.debt-schedule-modal{
 width:min(940px,96vw);
 max-height:92vh;
 padding:24px;
 box-sizing:border-box;
 display:flex;
 flex-direction:column;
 background:var(--bg-surface);
 color:var(--text-primary);
}
.debt-schedule-modal-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:16px;
 margin-bottom:14px;
 flex-shrink:0;
}
.debt-schedule-title{
 font-size:17px;
 font-weight:700;
 line-height:1.25;
 color:var(--text-primary);
}
.debt-schedule-sub{
 font-size:11px;
 line-height:1.45;
 color:var(--text-muted);
 margin-top:4px;
}
.debt-schedule-table-wrap{
 overflow:auto;
 max-height:65vh;
 border:1px solid var(--border-light);
 border-radius:10px;
 background:var(--bg-surface);
}
.debt-schedule-table{
 min-width:760px;
}
.debt-schedule-table thead th{
 position:sticky;
 top:0;
 z-index:4;
 background:var(--bg-surface-2);
 box-shadow:0 1px 0 var(--border-light);
}
.debt-schedule-table tbody tr.is-paid td{
 background:rgba(22,163,74,.07);
 color:var(--text-secondary);
}
.debt-schedule-table tbody tr.is-paid td:first-child{
 border-left:3px solid #16a34a;
}
.debt-schedule-pay-btn{
 min-width:86px;
 height:28px;
 padding:0 10px;
}
.debt-schedule-pay-btn.is-paid{
 color:#15803d;
 background:#e8f8f0;
 border-color:#bbf7d0;
}
.debt-schedule-footer{
 display:flex;
 justify-content:flex-end;
 margin-top:16px;
 flex-shrink:0;
}
body.dark .debt-schedule-table-wrap{
 border-color:rgba(161, 161, 161,.22);
 background:var(--bg-surface);
}
body.dark .debt-schedule-table thead th{
 background:#282828;
 box-shadow:0 1px 0 rgba(161, 161, 161,.2);
}
body.dark .debt-schedule-table tbody tr.is-paid td{
 background:rgba(34,197,94,.1);
 color:#d7e5dc;
}
body.dark .debt-schedule-pay-btn.is-paid{
 color:#bbf7d0;
 background:rgba(22,163,74,.16);
 border-color:rgba(34,197,94,.35);
}

/* ===== Personal finance contracts table ===== */
.debt-contracts-wrap{
 width:100%;
 overflow:auto;
 border-top:1px solid var(--border-light);
}
.debt-contracts-table{
 width:100%;
 min-width:1450px;
 table-layout:fixed;
 border-collapse:collapse;
}
.debt-contracts-table th,
.debt-contracts-table td{
 height:54px;
 padding:10px 14px;
 box-sizing:border-box;
 vertical-align:middle;
}
.debt-contracts-table th{
 height:36px;
 white-space:nowrap;
 color:var(--text-muted);
 font-size:10px;
 font-weight:700;
 letter-spacing:.06em;
 text-transform:uppercase;
}
.debt-contracts-table th:nth-child(1),
.debt-contracts-table td:nth-child(1){width:52px;text-align:center}
.debt-contracts-table th:nth-child(2),
.debt-contracts-table td:nth-child(2){width:170px}
.debt-contracts-table th:nth-child(3),
.debt-contracts-table td:nth-child(3){width:100px}
.debt-contracts-table th:nth-child(4),
.debt-contracts-table td:nth-child(4){width:145px}
.debt-contracts-table th:nth-child(5),
.debt-contracts-table td:nth-child(5){width:92px;text-align:right}
.debt-contracts-table th:nth-child(6),
.debt-contracts-table td:nth-child(6){width:130px;text-align:right}
.debt-contracts-table th:nth-child(7),
.debt-contracts-table td:nth-child(7){width:145px;text-align:center}
.debt-contracts-table th:nth-child(8),
.debt-contracts-table td:nth-child(8){width:140px;text-align:right}
.debt-contracts-table th:nth-child(9),
.debt-contracts-table td:nth-child(9){width:140px;text-align:right}
.debt-contracts-table th:nth-child(10),
.debt-contracts-table td:nth-child(10){width:260px}
.debt-contracts-table th:nth-child(11),
.debt-contracts-table td:nth-child(11){width:210px;text-align:right}
.debt-borrower-select{
 width:100%;
 height:32px;
 padding:0 8px;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--bg-surface);
 color:var(--text-primary);
 font:inherit;
 font-weight:600;
 cursor:pointer;
}
.debt-borrower-select:focus{
 outline:none;
 border-color:var(--accent);
 box-shadow:0 0 0 3px var(--accent-light);
}
.debt-contracts-table th.debt-filter-th{
 position:relative;
 overflow:visible;
}
.debt-filter-th .col-th-inner{
 justify-content:space-between;
 gap:6px;
 cursor:default;
}
.debt-filter-th .col-filter-btn{
 width:20px;
 height:20px;
}
.debt-filter-th:has(.debt-filter-drop.open){
 z-index:60;
}
.debt-filter-drop{
 min-width:230px;
 max-width:270px;
 padding:10px;
 text-align:left;
 text-transform:none;
 letter-spacing:normal;
 font-weight:400;
 white-space:normal;
}
.debt-filter-fields{
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:8px;
}
.debt-filter-fields label{
 display:grid;
 gap:4px;
 color:var(--text-muted);
 font-size:10px;
 font-weight:600;
}
.debt-filter-fields input{
 width:100%;
 min-width:0;
 height:34px;
 padding:0 8px;
 box-sizing:border-box;
 border:1px solid var(--border);
 border-radius:7px;
 background:var(--bg-surface);
 color:var(--text-primary);
 font:inherit;
 font-size:12px;
}
.debt-filter-fields input:focus{
 outline:none;
 border-color:var(--accent);
 box-shadow:0 0 0 3px var(--accent-light);
}
.debt-filter-actions{
 display:flex;
 justify-content:flex-end;
 gap:6px;
 margin-top:10px;
}
.debt-contract-index{
 display:inline-flex;
 width:22px;
 height:22px;
 align-items:center;
 justify-content:center;
 border-radius:50%;
 background:var(--bg-surface-3);
 font-size:12px;
 font-weight:700;
 color:var(--text-secondary);
}
.debt-contract-bank,
.debt-contract-kind{
 display:block;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.debt-contract-bank{
 font-weight:700;
 color:var(--text-primary);
}
.debt-contract-kind,
.debt-contract-comment{
 color:var(--text-secondary);
 font-size:12px;
}
.debt-contract-comment{
 display:-webkit-box;
 -webkit-line-clamp:2;
 -webkit-box-orient:vertical;
 overflow:hidden;
 line-height:1.35;
}
.debt-contract-num{
 white-space:nowrap;
 font-variant-numeric:tabular-nums;
}
.debt-contract-balance{
 font-weight:800;
 color:#dc2626;
}
.debt-contract-overpay{
 font-weight:800;
 color:var(--text-primary);
}
.debt-contract-actions{
 display:inline-flex;
 align-items:center;
 justify-content:flex-end;
 gap:6px;
 white-space:nowrap;
}
.debt-contract-actions .btn-sm{
 height:30px;
 padding:0 10px;
}
.debt-contract-actions .icon-btn{
 width:30px;
 height:30px;
 flex:0 0 30px;
}
body.dark .debt-contracts-wrap{
 border-top-color:rgba(161, 161, 161,.18);
}

/* ===== Payment calendar group filters ===== */
.debt-calendar-filters{
 display:flex;
 align-items:center;
 gap:6px;
 padding:12px 14px;
 border-top:1px solid var(--border-light);
 border-bottom:1px solid var(--border-light);
 background:var(--bg-surface);
 overflow-x:auto;
 scrollbar-width:thin;
}
.debt-calendar-filter{
 min-width:max-content;
 height:32px;
 display:inline-flex;
 align-items:center;
 gap:8px;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--bg-surface);
 color:var(--text-secondary);
 padding:0 10px;
 font-family:inherit;
 font-size:12px;
 font-weight:700;
 cursor:pointer;
 transition:background .12s,border-color .12s,color .12s,box-shadow .12s;
}
.debt-calendar-filter em{
 font-style:normal;
 font-size:10px;
 font-weight:800;
 color:var(--text-muted);
 font-variant-numeric:tabular-nums;
}
.debt-calendar-filter:hover{
 border-color:#a1a1a1;
 color:var(--text-primary);
}
.debt-calendar-filter.is-active{
 background:#282828;
 border-color:#282828;
 color:#fff;
 box-shadow:0 1px 2px rgba(23, 23, 23,.16);
}
.debt-calendar-filter.is-active em{
 color:rgba(255,255,255,.72);
}
body.dark .debt-calendar-filters{
 background:#1a1a1a;
 border-color:rgba(161, 161, 161,.18);
}
body.dark .debt-calendar-filter{
 background:#272727;
 border-color:rgba(161, 161, 161,.22);
 color:#e0e0e0;
}
body.dark .debt-calendar-filter em{
 color:#9e9e9e;
}
body.dark .debt-calendar-filter:hover{
 border-color:rgba(212, 212, 212,.38);
 color:#fff;
}
body.dark .debt-calendar-filter.is-active{
 background:#eaeaea;
 border-color:#eaeaea;
 color:#181818;
}
body.dark .debt-calendar-filter.is-active em{
 color:#545454;
}

/* ===== Personal finance коммунальные ===== */
.communal-head{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:14px;
 margin-bottom:14px;
}
.utility-apartments-grid{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:12px;
 margin-bottom:18px;
}
.utility-apartment-card{
 border:1px solid var(--border-light);
 border-radius:10px;
 background:var(--bg-surface);
 padding:14px;
 display:flex;
 flex-direction:column;
 gap:12px;
 min-width:0;
}
.utility-apartment-top{
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:12px;
}
.utility-apartment-title{
 font-size:14px;
 font-weight:800;
 color:var(--text-primary);
 line-height:1.25;
}
.utility-apartment-address{
 margin-top:3px;
 font-size:11px;
 color:var(--text-muted);
 line-height:1.35;
}
.utility-apartment-stats{
 display:grid;
 grid-template-columns:repeat(3,minmax(0,1fr));
 gap:8px;
}
.utility-apartment-stats div{
 border:1px solid var(--border-light);
 border-radius:8px;
 background:var(--bg-surface-2);
 padding:8px;
 min-width:0;
}
.utility-apartment-stats span{
 display:block;
 font-size:9px;
 line-height:1.2;
 font-weight:700;
 text-transform:uppercase;
 letter-spacing:.06em;
 color:var(--text-muted);
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.utility-apartment-stats strong{
 display:block;
 margin-top:4px;
 font-size:13px;
 font-weight:800;
 color:var(--text-primary);
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis;
}
.utility-apartment-stats strong.is-good{
 color:#16a34a;
}
.communal-table-wrap{
 border-top:1px solid var(--border-light);
 padding-top:14px;
 overflow:auto;
}
.utility-payments-table{
 width:100%;
 min-width:820px;
}
.utility-status{
 display:inline-flex;
 align-items:center;
 height:22px;
 padding:0 9px;
 border-radius:999px;
 font-size:11px;
 font-weight:700;
}
.utility-status.is-paid{
 color:#15803d;
 background:#dcfce7;
}
.utility-status.is-planned{
 color:#92400e;
 background:#fef3c7;
}
body.dark .utility-apartment-card,
body.dark .utility-apartment-stats div{
 border-color:rgba(161, 161, 161,.2);
 background:#1a1a1a;
}
body.dark .communal-table-wrap{
 border-top-color:rgba(161, 161, 161,.18);
}
body.dark .utility-status.is-paid{
 color:#bbf7d0;
 background:rgba(22,163,74,.18);
}
body.dark .utility-status.is-planned{
 color:#fde68a;
 background:rgba(245,158,11,.16);
}
@media (max-width:1200px){
 .utility-apartments-grid{grid-template-columns:1fr}
 .communal-head{align-items:stretch;flex-direction:column}
}

/* ===== Payment calendar modal desktop layout fix ===== */
@media (min-width: 760px) {
 .debt-calendar-modal {
  width:min(940px, calc(100vw - 48px)) !important;
  max-height:calc(100vh - 32px) !important;
  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;
 }
 .debt-calendar-modal-head,
 .debt-calendar-modal-actions {
  flex:0 0 auto !important;
 }
 .debt-calendar-modal-body {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow-y:auto !important;
  display:grid !important;
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  align-content:start !important;
  gap:13px 16px !important;
 }
 .debt-calendar-modal-body > .debt-card-field-wide:first-child,
 .debt-calendar-modal-body > .debt-card-grid,
 .debt-calendar-modal .debt-card-field:has(#dbtc-expense-group),
 .debt-calendar-modal .payment-paid-date {
  grid-column:1 / 2 !important;
 }
 .debt-calendar-modal .payment-type-field {
  grid-column:2 / 3 !important;
  grid-row:1 / span 3 !important;
 }
 .debt-calendar-modal .payment-type-buttons {
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-height:202px !important;
  overflow-y:auto !important;
 }
 .debt-calendar-modal .debt-card-field:has(#dbtc-debt),
 .debt-calendar-modal .payment-paid-toggle {
  grid-column:2 / 3 !important;
 }
 .debt-calendar-modal .debt-card-field:has(#dbtc-note) {
  grid-column:1 / -1 !important;
 }
}

@media (max-height: 760px) and (min-width: 760px) {
 .debt-calendar-modal {
  max-height:calc(100vh - 18px) !important;
 }
 .debt-calendar-modal-head {
  padding-top:16px !important;
  padding-bottom:14px !important;
 }
 .debt-calendar-modal-body {
  padding-top:16px !important;
  padding-bottom:16px !important;
 }
 .debt-calendar-modal-sub {
  max-width:720px !important;
 }
 .debt-calendar-modal-actions {
  padding-top:12px !important;
  padding-bottom:12px !important;
 }
}

/* ===== Payment modal layout cleanup after desktop split ===== */
@media (min-width: 760px) {
 .debt-calendar-modal {
  width:min(820px, calc(100vw - 48px)) !important;
 }
 .debt-calendar-modal-body {
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
  gap:14px 18px !important;
 }
 .debt-calendar-modal-body > .debt-card-field-wide:first-child {
  grid-column:1 / -1 !important;
  margin-bottom:0 !important;
 }
 .debt-calendar-modal-body > .debt-card-field-wide:first-child .input {
  max-width:430px !important;
 }
 .debt-calendar-modal-body > .debt-card-grid:not(.payment-expense-picker) {
  grid-column:1 / 2 !important;
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:12px !important;
 }
 .debt-calendar-modal-body > .payment-expense-picker {
  grid-column:1 / 2 !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:12px !important;
 }
 .debt-calendar-modal-body > .payment-expense-picker > .debt-card-field,
 .debt-calendar-modal-body > .payment-expense-picker > .payment-type-field {
  grid-column:auto !important;
  grid-row:auto !important;
  min-width:0 !important;
 }
 .debt-calendar-modal-body > .payment-expense-picker .payment-type-buttons {
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  max-height:170px !important;
  overflow-y:auto !important;
 }
 .debt-calendar-modal-body > .debt-card-field-wide:has(#dbtc-debt) {
  grid-column:2 / 3 !important;
  grid-row:2 / 4 !important;
  margin-bottom:0 !important;
  align-self:start !important;
 }
 .debt-calendar-modal-body > .payment-paid-toggle {
  grid-column:2 / 3 !important;
  grid-row:4 / 5 !important;
  align-self:start !important;
  min-height:58px !important;
 }
 .debt-calendar-modal-body > .payment-paid-date {
  grid-column:2 / 3 !important;
  grid-row:5 / 6 !important;
  margin-bottom:0 !important;
 }
 .debt-calendar-modal-body > .debt-card-field-wide:has(#dbtc-note) {
  grid-column:1 / -1 !important;
  margin-bottom:0 !important;
 }
}

/* ===== Product-design payment modal redesign ===== */
.debt-calendar-modal{
 width:min(760px, calc(100vw - 42px)) !important;
 max-height:calc(100vh - 28px) !important;
 overflow:hidden !important;
 display:flex !important;
 flex-direction:column !important;
}
.debt-calendar-modal-head{
 padding:18px 22px 17px !important;
}
.debt-calendar-modal-sub{
 max-width:560px !important;
}
.debt-calendar-modal-body{
 display:block !important;
 flex:1 1 auto !important;
 min-height:0 !important;
 overflow-y:auto !important;
 padding:18px 22px !important;
 background:#f8f8f8 !important;
}
.payment-modal-form{
 display:grid;
 grid-template-columns:minmax(0,1.12fr) minmax(260px,.88fr);
 gap:14px;
 align-items:start;
}
.payment-modal-section{
 min-width:0;
 border:1px solid #e5e5e5;
 border-radius:14px;
 background:#fff;
 padding:14px;
 box-shadow:0 1px 2px rgba(23, 23, 23,.025);
}
.payment-modal-note{
 grid-column:1 / -1;
 padding:12px 14px;
}
.payment-modal-section-head{
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:12px;
 margin-bottom:12px;
 padding-bottom:10px;
 border-bottom:1px solid #f1f1f1;
}
.payment-modal-section-head b{
 color:#1f1f1f;
 font-size:13px;
 font-weight:800;
 line-height:1.2;
}
.payment-modal-section-head span{
 color:#969696;
 font-size:10px;
 font-weight:700;
 white-space:nowrap;
}
.payment-modal-form .debt-card-field-wide{
 margin-bottom:0 !important;
}
.payment-modal-form .debt-card-grid{
 display:grid !important;
 grid-template-columns:1fr 1fr !important;
 gap:10px !important;
 margin-top:12px;
}
.payment-modal-form .payment-expense-picker{
 grid-template-columns:1fr !important;
}
.payment-modal-form .payment-expense-picker > .debt-card-field,
.payment-modal-form .payment-expense-picker > .payment-type-field{
 grid-column:auto !important;
 grid-row:auto !important;
 min-width:0 !important;
}
.payment-modal-form .payment-type-buttons{
 grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
 max-height:168px !important;
 overflow-y:auto !important;
 gap:8px !important;
}
.payment-modal-form .payment-type-chip{
 min-height:38px !important;
 padding:0 12px !important;
}
.payment-debt-link .btn{
 margin-top:9px !important;
 height:34px !important;
 border-radius:9px !important;
}
.payment-debt-actions{
 display:grid;
 grid-template-columns:repeat(2, minmax(0, 1fr));
 gap:8px;
 margin-top:9px;
}
.payment-debt-actions .btn{
 margin-top:0 !important;
 width:100%;
 justify-content:center;
}
.payment-modal-side{
 display:flex;
 flex-direction:column;
 gap:12px;
}
.payment-modal-side .payment-modal-section-head,
.payment-modal-note .payment-modal-section-head{
 margin-bottom:0;
}
.payment-modal-side .payment-paid-toggle{
 margin:0 !important;
 min-height:58px !important;
}
.payment-modal-side .payment-paid-date{
 margin:0 !important;
}
.payment-modal-note .input{
 height:40px !important;
}
.debt-calendar-modal-actions{
 flex:0 0 auto !important;
}
body.dark .debt-calendar-modal-body{
 background:#1a1a1a !important;
}
body.dark .payment-modal-section{
 background:#212121;
 border-color:#3a3a3a;
 box-shadow:none;
}
body.dark .payment-modal-section-head{
 border-bottom-color:#363636;
}
body.dark .payment-modal-section-head b{
 color:#f4f4f4;
}
body.dark .payment-modal-section-head span{
 color:#9e9e9e;
}

@media (max-width: 860px){
 .payment-modal-form{
  grid-template-columns:1fr;
 }
 .payment-modal-note{
  grid-column:auto;
 }
}
@media (max-width: 560px){
 .debt-calendar-modal{
  width:calc(100vw - 20px) !important;
  max-height:calc(100vh - 18px) !important;
 }
 .debt-calendar-modal-head,
 .debt-calendar-modal-body,
 .debt-calendar-modal-actions{
  padding-left:16px !important;
  padding-right:16px !important;
 }
 .payment-modal-section{
  padding:12px;
 }
 .payment-modal-form .debt-card-grid,
 .payment-modal-form .payment-type-buttons{
  grid-template-columns:1fr !important;
 }
 .payment-modal-section-head{
  align-items:flex-start;
  flex-direction:column;
  gap:3px;
 }
}

/* ===== CRM design audit pass: payment modal and calendar readability ===== */
.debt-calendar-modal:has(.payment-modal-form){
 width:min(860px, calc(100vw - 40px)) !important;
 max-height:calc(100vh - 28px) !important;
 border-radius:18px !important;
 overflow:hidden !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-head{
 padding:20px 24px 18px !important;
 border-bottom:1px solid var(--border-light) !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-title{
 margin-top:4px !important;
 font-size:22px !important;
 line-height:1.12 !important;
 letter-spacing:0 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-sub{
 max-width:520px !important;
 margin-top:8px !important;
 line-height:1.45 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-body{
 display:block !important;
 padding:18px 24px 20px !important;
 background:#f8f8f8 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-form{
 display:grid !important;
 grid-template-columns:minmax(0, 1fr) minmax(300px, .84fr) !important;
 gap:16px !important;
 align-items:start !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-section{
 border:1px solid #e5e5e5 !important;
 border-radius:16px !important;
 background:#fff !important;
 padding:16px !important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.03) !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-section-head{
 margin:0 0 14px !important;
 padding:0 0 11px !important;
 border-bottom:1px solid #f1f1f1 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-section-head b{
 color:#1f1f1f !important;
 font-size:12px !important;
 line-height:1.2 !important;
 letter-spacing:.08em !important;
 text-transform:uppercase !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-section-head span{
 color:#969696 !important;
 font-size:10px !important;
 line-height:1.2 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-card-field{
 margin:0 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-card-field label{
 margin:0 0 7px !important;
 color:#818181 !important;
 font-size:11px !important;
 line-height:1.2 !important;
 letter-spacing:.08em !important;
 text-transform:uppercase !important;
}
.debt-calendar-modal:has(.payment-modal-form) .input{
 height:42px !important;
 border-radius:12px !important;
 font-size:14px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-main{
 display:grid !important;
 gap:14px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-main > .debt-card-field-wide,
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-note{
 grid-column:auto !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-amount-row,
.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker{
 display:grid !important;
 grid-template-columns:1fr 1fr !important;
 gap:12px !important;
 margin:0 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker{
 grid-template-columns:1fr !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker > .debt-card-field,
.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker > .payment-type-field,
.debt-calendar-modal:has(.payment-modal-form) .payment-type-field{
 grid-column:auto !important;
 grid-row:auto !important;
 min-width:0 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-type-native{
 display:none !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-type-buttons{
 display:grid !important;
 grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
 gap:9px !important;
 max-height:184px !important;
 overflow:auto !important;
 padding-right:2px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-type-chip{
 min-height:40px !important;
 padding:0 12px !important;
 border-radius:11px !important;
 justify-content:flex-start !important;
 font-size:13px !important;
 font-weight:700 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-side{
 gap:14px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-debt-link > .btn{
 width:100% !important;
 height:36px !important;
 margin-top:10px !important;
 justify-content:center !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-debt-actions .btn{
 height:36px !important;
 margin-top:0 !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle{
 min-height:70px !important;
 padding:14px !important;
 border-radius:14px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle b{
 font-size:14px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle em{
 margin-top:3px !important;
 font-size:12px !important;
 line-height:1.3 !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-note .input{
 height:42px !important;
}
.debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-actions{
 padding:14px 24px !important;
 background:#fff !important;
 border-top:1px solid var(--border-light) !important;
}

body.dark .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-body{
 background:#191919 !important;
}
body.dark .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-actions,
body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-modal-section{
 background:#212121 !important;
 border-color:#3a3a3a !important;
}
body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-modal-section-head{
 border-bottom-color:#343434 !important;
}
body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-modal-section-head b{
 color:#f4f4f4 !important;
}
body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-modal-section-head span,
body.dark .debt-calendar-modal:has(.payment-modal-form) .debt-card-field label{
 color:#a2a2a2 !important;
}
body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle{
 background:#1e1e1e !important;
 border-color:#3f3f3f !important;
}

body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2){
 background:#68415f !important;
 border-color:#9f5b8d !important;
 border-left-color:#f0a4d8 !important;
}
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-name{
 color:#fff6fb !important;
}
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-type,
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-time,
body.dark #page-calendar .cal-booking.is-postponed:not(.cal-booking-v2) .cal-booking-addr{
 color:#ffe2f2 !important;
}

body.dark #page-calendar .cal-time-block{
 background:
  repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,255,255,.025) 11px,rgba(255,255,255,.025) 12px),
  #202020 !important;
 border-color:#333333 !important;
 color:#cdcdcd !important;
 box-shadow:none !important;
}
body.dark #page-calendar .cal-time-block:hover{
 background:
  repeating-linear-gradient(45deg,transparent 0,transparent 11px,rgba(255,255,255,.035) 11px,rgba(255,255,255,.035) 12px),
  #242424 !important;
}
body.dark #page-calendar .cal-time-block span{
 color:#cdcdcd !important;
}
body:not(.dark) #page-calendar .cal-time-block{
 background:repeating-linear-gradient(45deg,#f2f2f2 0px,#f2f2f2 11px,#e9e9e9 11px,#e9e9e9 12px) !important;
 border-color:#dddddd !important;
 color:#535353 !important;
 box-shadow:none !important;
}
body:not(.dark) #page-calendar .cal-time-block:hover{
 background:#eaeaea !important;
}
body:not(.dark) #page-calendar .cal-time-block span{
 color:#535353 !important;
}

@media (max-width: 900px){
 .debt-calendar-modal:has(.payment-modal-form){
  width:calc(100vw - 24px) !important;
 }
 .debt-calendar-modal:has(.payment-modal-form) .payment-modal-form{
  grid-template-columns:1fr !important;
 }
 .debt-calendar-modal:has(.payment-modal-form) .payment-modal-note{
  grid-column:auto !important;
 }
}
@media (max-width: 560px){
 .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-head,
 .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-body,
 .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-actions{
  padding-left:16px !important;
  padding-right:16px !important;
 }
 .debt-calendar-modal:has(.payment-modal-form) .payment-modal-amount-row,
 .debt-calendar-modal:has(.payment-modal-form) .payment-type-buttons{
  grid-template-columns:1fr !important;
 }
}

/* ===== CRM design audit pass: expense settings readability ===== */
.expense-group-board{
 display:grid !important;
 grid-template-columns:repeat(2, minmax(360px, 1fr)) !important;
 gap:14px !important;
 align-items:start !important;
}
.expense-group-section{
 overflow:hidden !important;
 border-radius:14px !important;
 background:var(--bg-surface) !important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.035) !important;
}
.expense-group-section-head{
 min-height:54px !important;
 padding:12px 14px !important;
 background:color-mix(in srgb, var(--expense-color, #7A786A) 10%, var(--bg-surface)) !important;
 border-bottom:1px solid color-mix(in srgb, var(--expense-color, #7A786A) 18%, var(--border-light)) !important;
}
.expense-group-title-row{
 gap:10px !important;
}
.expense-group-color{
 width:22px !important;
 height:22px !important;
 border-radius:4px !important;
 box-shadow:inset 0 0 0 1px rgba(23, 23, 23,.16) !important;
}
.expense-group-title-input{
 height:34px !important;
 padding:0 8px !important;
 font-size:14px !important;
 font-weight:800 !important;
}
.expense-group-title-row span{
 height:24px !important;
 padding:0 9px !important;
 border-radius:999px !important;
 font-size:11px !important;
}
.expense-group-type-list{
 padding:10px !important;
 gap:7px !important;
}
.expense-type-line{
 min-height:42px !important;
 grid-template-columns:22px 12px minmax(0, 1fr) minmax(160px, 220px) 28px !important;
 gap:9px !important;
 padding:6px 8px !important;
 border-radius:10px !important;
 background:color-mix(in srgb, var(--expense-color, #7A786A) 3%, var(--bg-surface)) !important;
}
.expense-type-name{
 height:30px !important;
 padding:0 6px !important;
 font-size:13px !important;
 font-weight:700 !important;
 color:var(--text-primary) !important;
}
.expense-type-group{
 height:30px !important;
 border-radius:8px !important;
 font-size:12px !important;
}
.expense-type-remove{
 width:28px !important;
 height:28px !important;
 border-radius:8px !important;
}
body.dark .expense-group-section{
 background:#212121 !important;
 border-color:color-mix(in srgb, var(--expense-color, #7A786A) 34%, #434343) !important;
 box-shadow:none !important;
}
body.dark .expense-group-section-head{
 background:color-mix(in srgb, var(--expense-color, #7A786A) 18%, #212121) !important;
 border-bottom-color:color-mix(in srgb, var(--expense-color, #7A786A) 28%, #3a3a3a) !important;
}
body.dark .expense-group-title-input,
body.dark .expense-type-name{
 color:#f6f6f6 !important;
}
body.dark .expense-group-title-row span{
 background:#272727 !important;
 color:#d1d1d1 !important;
}
body.dark .expense-group-type-list{
 background:#1c1c1c !important;
}
body.dark .expense-type-line{
 background:#272727 !important;
 border-color:#3f3f3f !important;
}
body.dark .expense-type-line:hover{
 background:#2e2e2e !important;
}
body.dark .expense-type-group,
body.dark .expense-type-remove{
 background:#1c1c1c !important;
 border-color:#454545 !important;
 color:#e0e0e0 !important;
}
body.dark .expense-drag-handle,
body.dark .expense-type-handle{
 color:#a6a6a6 !important;
}
@media (max-width: 1280px){
 .expense-group-board{
  grid-template-columns:1fr !important;
 }
}
@media (max-width: 720px){
 .expense-type-line{
  grid-template-columns:22px 12px minmax(0, 1fr) 28px !important;
 }
 .expense-type-group{
  grid-column:3 / 5 !important;
 }
}

/* ===== CRM design audit pass: shared tables and modal stability ===== */
.table-wrap,
.debt-contracts-wrap,
.debt-schedule-table-wrap,
.communal-table-wrap{
 background:var(--bg-surface) !important;
 border:1px solid var(--border-light) !important;
 border-radius:14px !important;
 overflow:auto !important;
 box-shadow:0 10px 28px rgba(23, 23, 23,.045) !important;
}

.table-wrap table,
.data-table,
#orders-table,
.debt-contracts-table,
.debt-schedule-table,
.communal-table-wrap table{
 border-collapse:separate !important;
 border-spacing:0 !important;
}

.table-wrap th,
.data-table th,
#orders-table thead th,
.debt-contracts-table th,
.debt-schedule-table thead th,
.communal-table-wrap th{
 position:sticky !important;
 top:0 !important;
 z-index:6 !important;
 height:40px !important;
 padding-top:10px !important;
 padding-bottom:10px !important;
 background:var(--bg-surface-2) !important;
 border-bottom:1px solid var(--border-light) !important;
 box-shadow:0 1px 0 var(--border-light) !important;
 color:var(--text-muted) !important;
 font-size:10px !important;
 line-height:1.2 !important;
 letter-spacing:.06em !important;
 text-transform:uppercase !important;
}

.table-wrap td,
.data-table td,
#orders-table td,
.debt-contracts-table td,
.debt-schedule-table td,
.communal-table-wrap td{
 min-height:48px !important;
 border-bottom:1px solid var(--border-light) !important;
 vertical-align:middle !important;
}

.generic-modal-card,
.debt-card-modal,
.modal.generic-modal-card,
.ui-modal-card{
 max-height:calc(100vh - 32px) !important;
 overflow:hidden !important;
 display:flex !important;
 flex-direction:column !important;
}

.modal-body,
.ui-modal-body,
.debt-card-form,
.debt-calendar-modal-body,
#booking-modal-body-v2,
#modal-edit-order > .modal > div:nth-child(2){
 min-height:0 !important;
 overflow:auto !important;
}

.modal-header,
.ui-modal-head,
.debt-card-header,
.debt-calendar-modal-head,
.modal-footer,
.ui-modal-actions,
.debt-card-footer,
.debt-calendar-modal-actions{
 flex:0 0 auto !important;
}

.debt-contracts-table{
 min-width:1320px !important;
}

.debt-contract-actions{
 display:flex !important;
 justify-content:flex-end !important;
 align-items:center !important;
 gap:7px !important;
 white-space:nowrap !important;
}

.debt-contract-actions .btn{
 height:32px !important;
 padding:0 11px !important;
 border-radius:9px !important;
 font-size:12px !important;
}

.debt-contract-comment{
 max-width:260px !important;
 line-height:1.35 !important;
 color:var(--text-secondary) !important;
}

.debt-payment-history-table,
#debt-payment-history table{
 width:100% !important;
 table-layout:fixed !important;
}

#debt-payment-history th,
#debt-payment-history td{
 padding:12px 14px !important;
}

#debt-payment-history th:nth-child(1),
#debt-payment-history td:nth-child(1){width:130px !important;}
#debt-payment-history th:nth-child(2),
#debt-payment-history td:nth-child(2){width:36% !important;}
#debt-payment-history th:nth-child(3),
#debt-payment-history td:nth-child(3){width:36% !important;}
#debt-payment-history th:nth-child(4),
#debt-payment-history td:nth-child(4){width:150px !important;text-align:right !important;}
#debt-payment-history th:nth-child(5),
#debt-payment-history td:nth-child(5){width:54px !important;text-align:center !important;}

@media (min-width: 1180px){
 .expense-group-board{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
 }
 .expense-group-section{
  min-width:0 !important;
 }
}

@media (max-height: 760px) and (min-width: 760px){
 .generic-modal-card,
 .debt-card-modal,
 .modal.generic-modal-card,
 .ui-modal-card,
 .debt-calendar-modal:has(.payment-modal-form){
  max-height:calc(100vh - 18px) !important;
 }
 .modal-header,
 .ui-modal-head,
 .debt-card-header,
 .debt-calendar-modal-head,
 .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-head{
  padding-top:14px !important;
  padding-bottom:12px !important;
 }
 .modal-body,
 .ui-modal-body,
 .debt-card-form,
 .debt-calendar-modal-body,
 .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-body{
  padding-top:14px !important;
  padding-bottom:14px !important;
 }
 .modal-footer,
 .ui-modal-actions,
 .debt-calendar-modal-actions,
 .debt-calendar-modal:has(.payment-modal-form) .debt-calendar-modal-actions{
  padding-top:10px !important;
  padding-bottom:10px !important;
 }
}

body.dark .table-wrap,
body.dark .debt-contracts-wrap,
body.dark .debt-schedule-table-wrap,
body.dark .communal-table-wrap{
 background:#1c1c1c !important;
 border-color:#393939 !important;
 box-shadow:0 20px 42px rgba(0,0,0,.22) !important;
}

body.dark .table-wrap th,
body.dark .data-table th,
body.dark #orders-table thead th,
body.dark .debt-contracts-table th,
body.dark .debt-schedule-table thead th,
body.dark .communal-table-wrap th{
 background:#272727 !important;
 border-bottom-color:#393939 !important;
 box-shadow:0 1px 0 #393939 !important;
 color:#aaaaaa !important;
}

body.dark .table-wrap td,
body.dark .data-table td,
body.dark #orders-table td,
body.dark .debt-contracts-table td,
body.dark .debt-schedule-table td,
body.dark .communal-table-wrap td{
 border-bottom-color:#313131 !important;
 color:#e3e3e3 !important;
}

body.dark .debt-contract-comment,
body.dark .debt-contract-kind{
 color:#b8b8b8 !important;
}

/* ===== CRM design audit pass: personal finance readability ===== */
#finance-section-debts .settings-block,
#finance-section-debts .payment-analytics-section{
 border:1px solid var(--border-light) !important;
 border-radius:16px !important;
 background:var(--bg-surface) !important;
 box-shadow:0 12px 32px rgba(23, 23, 23,.04) !important;
}

.payment-page-head{
 align-items:center !important;
 gap:16px !important;
 margin-bottom:10px !important;
}

.payment-page-actions{
 display:flex !important;
 align-items:center !important;
 justify-content:flex-end !important;
 gap:8px !important;
 flex-wrap:wrap !important;
}

.debt-calendar-title{
 min-width:154px !important;
 height:38px !important;
 padding:4px 14px !important;
 display:flex !important;
 flex-direction:column !important;
 align-items:center !important;
 justify-content:center !important;
 gap:1px !important;
 border-radius:10px !important;
 background:var(--bg-surface) !important;
 border:1px solid var(--border) !important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.04) !important;
 font-size:14px !important;
 line-height:1.1 !important;
 font-weight:800 !important;
 color:var(--text-primary) !important;
}

.debt-calendar-filters{
 padding:10px 12px !important;
 gap:8px !important;
 background:var(--bg-surface-2) !important;
 border-color:var(--border-light) !important;
}

.debt-calendar-filter{
 height:34px !important;
 border-radius:999px !important;
 padding:0 12px !important;
 gap:7px !important;
 background:var(--bg-surface) !important;
 color:var(--text-secondary) !important;
 box-shadow:0 1px 1px rgba(23, 23, 23,.03) !important;
}

.debt-calendar-filter::before{
 content:"";
 width:8px;
 height:8px;
 flex:0 0 8px;
 border-radius:50%;
 background:var(--filter-color, #7A786A);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--filter-color, #7A786A) 16%, transparent);
}

.debt-calendar-filter.is-active{
 background:#282828 !important;
 border-color:#282828 !important;
 color:#fff !important;
}

.debt-calendar-filter.is-active::before{
 background:#fff;
 box-shadow:0 0 0 3px rgba(255,255,255,.18);
}

.debt-calendar-day{
 min-height:112px !important;
}

.debt-calendar-event{
 min-height:24px !important;
 padding:4px 8px !important;
 border-radius:8px !important;
 background:color-mix(in srgb, var(--event-color, #8b7355) 13%, #fff 87%) !important;
 border-color:color-mix(in srgb, var(--event-color, #8b7355) 34%, #e4e4e4 66%) !important;
 border-left-width:4px !important;
 color:#1f1f1f !important;
}

.debt-calendar-event b{
 color:#1f1f1f !important;
 font-size:11px !important;
 line-height:1.15 !important;
}

.debt-calendar-event em{
 color:#1f1f1f !important;
 font-size:11px !important;
 line-height:1.15 !important;
 opacity:.9 !important;
}

.debt-calendar-event.is-paid{
 background:#dcfce7 !important;
 border-color:#86efac !important;
 border-left-color:#16a34a !important;
 color:#14532d !important;
}

.debt-calendar-event.is-paid b,
.debt-calendar-event.is-paid em{
 color:#14532d !important;
}

.utility-apartments-grid{
 grid-template-columns:repeat(3, minmax(220px, 1fr)) !important;
}

.utility-apartment-card{
 border-radius:14px !important;
 box-shadow:0 8px 24px rgba(23, 23, 23,.035) !important;
}

.utility-payments-table th,
.utility-payments-table td{
 height:44px !important;
}

body.dark #finance-section-debts .settings-block,
body.dark #finance-section-debts .payment-analytics-section{
 background:#1c1c1c !important;
 border-color:#393939 !important;
 box-shadow:0 20px 42px rgba(0,0,0,.22) !important;
}

body.dark .debt-calendar-title{
 background:#272727 !important;
 border-color:#444444 !important;
 color:#f6f6f6 !important;
}

body.dark .debt-calendar-filters{
 background:#1a1a1a !important;
 border-color:#393939 !important;
}

body.dark .debt-calendar-filter{
 background:#272727 !important;
 border-color:#3f3f3f !important;
 color:#dfdfdf !important;
 box-shadow:none !important;
}

body.dark .debt-calendar-filter:hover{
 background:#2e2e2e !important;
 border-color:#565656 !important;
 color:#fff !important;
}

body.dark .debt-calendar-filter.is-active{
 background:#f2f2f2 !important;
 border-color:#f2f2f2 !important;
 color:#181818 !important;
}

body.dark .debt-calendar-filter.is-active em{
 color:#545454 !important;
}

body.dark .debt-calendar-event{
 background:color-mix(in srgb, var(--event-color, #9b8060) 22%, #272727 78%) !important;
 border-color:color-mix(in srgb, var(--event-color, #9b8060) 44%, #454545 56%) !important;
 border-left-color:var(--event-color, #9b8060) !important;
 color:#f4f4f4 !important;
 box-shadow:none !important;
}

body.dark .debt-calendar-event b,
body.dark .debt-calendar-event em{
 color:#f4f4f4 !important;
 opacity:1 !important;
}

body.dark .debt-calendar-event.is-paid{
 background:rgba(22,163,74,.2) !important;
 border-color:rgba(74,222,128,.45) !important;
 border-left-color:#4ade80 !important;
 color:#dcfce7 !important;
}

body.dark .debt-calendar-event.is-paid b,
body.dark .debt-calendar-event.is-paid em{
 color:#dcfce7 !important;
}

body.dark .utility-apartment-card,
body.dark .utility-apartment-stats div{
 background:#212121 !important;
 border-color:#3f3f3f !important;
 box-shadow:none !important;
}

@media (max-width: 1180px){
 .utility-apartments-grid{
  grid-template-columns:1fr 1fr !important;
 }
}

@media (max-width: 720px){
 .payment-page-head{
  align-items:flex-start !important;
  flex-direction:column !important;
 }
 .payment-page-actions{
  justify-content:flex-start !important;
  width:100% !important;
 }
 .debt-calendar-title{
  min-width:136px !important;
 }
 .utility-apartments-grid{
  grid-template-columns:1fr !important;
 }
}

/* ===== CRM design audit pass: analytics and status surfaces ===== */
.stat-card,
.dash-metric-card,
.payment-stat,
.payment-panel,
.svc-metric,
.svc-sync-summary>div,
#orders-analytics-view [style*="background:var(--bg-surface)"][style*="border:1px solid var(--border)"]{
 border-color:var(--border-light) !important;
 border-radius:var(--an-control-radius,14px) !important;
 box-shadow:0 10px 28px rgba(23, 23, 23,.045) !important;
}

.stat-card,
.dash-metric-card,
.payment-stat{
 min-height:70px;
 display:flex;
 flex-direction:column;
 justify-content:center;
 gap:7px;
}

.dash-metric-lbl,
.payment-stat span,
.card-title,
.settings-block-label,
.svc-sidebar-title,
.svc-sync-summary span{
 letter-spacing:.075em !important;
 color:var(--text-muted) !important;
}

.dash-metric-val,
.payment-stat strong,
.svc-sync-summary strong,
.stat-card strong{
 font-weight:900 !important;
 letter-spacing:0 !important;
}

.dash-metric-card.selected,
.filter-btn.active,
.client-filter-btn.active{
 box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent) !important;
}

.trend-up,
.trend-dn,
.trend-ne,
.dash-metric-trend{
 height:22px;
 padding:0 8px !important;
 border-radius:999px !important;
 align-items:center;
 line-height:1;
}

.badge,
.status-chip,
.os-badge-preview,
#orders-table td[data-col-id="status"] span{
 min-height:22px;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 border-radius:999px !important;
 padding:4px 10px !important;
 line-height:1 !important;
 font-size:11px !important;
 font-weight:800 !important;
 white-space:nowrap !important;
 box-shadow:inset 0 0 0 1px rgba(23, 23, 23,.04);
}

.status-chip{
 gap:7px !important;
 margin:4px !important;
}

#orders-summary .stat-card,
.payment-dashboard .payment-stat{
 padding:12px 14px !important;
}

.payment-dashboard{
 gap:10px !important;
 align-items:stretch !important;
}

.payment-panel{
 min-height:232px !important;
 padding:16px !important;
}

.payment-panel-head{
 padding-bottom:10px !important;
 border-bottom:1px solid var(--border-light) !important;
}

.payment-bar-meta{
 grid-template-columns:22px minmax(0, 1fr) auto auto !important;
 gap:9px !important;
}

.payment-bar-track{
 height:7px !important;
 background:var(--bg-surface-3) !important;
}

.payment-bar-track i{
 box-shadow:inset 0 -1px 0 rgba(0,0,0,.08);
}

.payment-month{
 min-width:0 !important;
}

.payment-month i{
 border-radius:7px 7px 4px 4px !important;
}

#an-chart-wrap,
.payment-month-chart{
 image-rendering:auto;
}

#orders-analytics-view canvas{
 image-rendering:auto;
}

#orders-analytics-view [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
 gap:14px !important;
}

#orders-analytics-view [style*="font-size:13px"][style*="font-weight:700"]{
 letter-spacing:0 !important;
}

.table-wrap th,
.data-table th,
#orders-table thead th,
.debt-contracts-table th,
.debt-schedule-table thead th,
.communal-table-wrap th{
 height:40px !important;
 vertical-align:middle !important;
}

.table-wrap td,
.data-table td,
#orders-table td,
.debt-contracts-table td,
.debt-schedule-table td,
.communal-table-wrap td{
 height:48px !important;
}

body.dark .stat-card,
body.dark .dash-metric-card,
body.dark .payment-stat,
body.dark .payment-panel,
body.dark .svc-metric,
body.dark .svc-sync-summary>div,
body.dark #orders-analytics-view [style*="background:var(--bg-surface)"][style*="border:1px solid var(--border)"]{
 background:#1c1c1c !important;
 border-color:#393939 !important;
 box-shadow:0 18px 42px rgba(0,0,0,.2) !important;
}

body.dark .dash-metric-card:hover{
 border-color:#5f5f5f !important;
}

body.dark .dash-metric-card.selected{
 border-color:#a3a3a3 !important;
 box-shadow:0 0 0 3px rgba(163, 163, 163,.18) !important;
}

body.dark .trend-up,
body.dark .trend-dn,
body.dark .trend-ne,
body.dark .dash-metric-trend{
 background:#272727 !important;
 border-color:#3f3f3f !important;
 color:#dfdfdf !important;
}

body.dark .badge,
body.dark .status-chip,
body.dark .os-badge-preview,
body.dark #orders-table td[data-col-id="status"] span{
 border-color:rgba(255,255,255,.14) !important;
 box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
 filter:saturate(1.08) brightness(1.12);
}

body.dark .payment-panel-head{
 border-bottom-color:#393939 !important;
}

body.dark .payment-bar-track{
 background:#2f2f2f !important;
}

body.dark .payment-bar-meta b,
body.dark .payment-bar-meta strong{
 color:#f6f6f6 !important;
}

body.dark .payment-bar-meta span,
body.dark .payment-bar-meta em{
 color:#aaaaaa !important;
}

body.dark #orders-analytics-view canvas{
 filter:saturate(1.05) brightness(1.08);
}

@media (max-width: 1280px){
 .payment-dashboard{
  grid-template-columns:repeat(3, minmax(0,1fr)) !important;
 }
 #orders-analytics-view [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
  grid-template-columns:repeat(2, minmax(0,1fr)) !important;
 }
}

@media (max-width: 760px){
 .payment-dashboard,
 .payment-analytics-grid,
 #orders-analytics-view [style*="grid-template-columns:1fr 1fr 1fr 1fr"]{
  grid-template-columns:1fr !important;
 }
 .payment-panel{
  min-height:0 !important;
 }
 .stat-card,
 .dash-metric-card,
 .payment-stat{
  min-height:64px;
 }
}

/* ===== CRM design audit pass: controls and modal coherence ===== */
.btn,
.btn-logout,
.filter-btn,
.client-filter-btn,
.order-view-btn,
.cal-view-btn,
.dash-period-btn,
.dash-nav-btn2,
.tab-btn,
.of-quick-btn,
#of-quick-month,
.debt-calendar-filter{
 min-height:34px;
 border-radius:10px !important;
 line-height:1 !important;
 letter-spacing:0 !important;
}

.btn,
.btn-logout,
.filter-btn,
.client-filter-btn{
 box-shadow:0 1px 0 rgba(255,255,255,.72),0 5px 16px rgba(23, 23, 23,.045) !important;
}

.btn:hover,
.btn-logout:hover,
.filter-btn:hover,
.client-filter-btn:hover{
 transform:none !important;
 box-shadow:0 1px 0 rgba(255,255,255,.72),0 8px 20px rgba(23, 23, 23,.07) !important;
}

.btn:active,
.btn-logout:active,
.filter-btn:active,
.client-filter-btn:active{
 transform:translateY(1px) !important;
}

.btn-primary,
.btn.active,
.filter-btn.active,
.client-filter-btn.active,
.order-view-btn.active,
.cal-view-btn.active,
.dash-period-btn.active,
.dash-nav-btn2.active,
.tab-btn.active,
.of-quick-btn.active,
#of-quick-month.active-month{
 font-weight:800 !important;
}

.form-input,
.search-input,
.input,
select.input,
textarea.form-input,
.eo-input,
.eo-select,
.eo-textarea,
.debt-card-field .input,
.svc-price-input,
.expense-group-title-input{
 min-height:40px !important;
 border-radius:10px !important;
 border-color:#d7d7d7 !important;
 background:var(--bg-surface) !important;
 color:var(--text-primary) !important;
 box-shadow:inset 0 1px 0 rgba(23, 23, 23,.02) !important;
}

.form-input:focus,
.search-input:focus,
.input:focus,
select.input:focus,
textarea.form-input:focus,
.eo-input:focus,
.eo-select:focus,
.eo-textarea:focus,
.debt-card-field .input:focus,
.svc-price-input:focus,
.expense-group-title-input:focus{
 outline:none !important;
 border-color:#9e9e9e !important;
 box-shadow:0 0 0 3px rgba(40, 40, 40,.08), inset 0 1px 0 rgba(23, 23, 23,.02) !important;
}

select.input,
.eo-select,
.form-input[type="date"],
.input[type="date"]{
 cursor:pointer;
}

.modal,
.generic-modal-card,
.debt-card-modal,
.ui-modal-card,
.debt-calendar-modal{
 border:1px solid var(--border-light) !important;
 box-shadow:0 30px 80px rgba(23, 23, 23,.22) !important;
}

.modal-header,
.ui-modal-head,
.debt-card-header,
.debt-calendar-modal-head{
 background:var(--bg-surface) !important;
 color:var(--text-primary) !important;
 border-bottom:1px solid var(--border-light) !important;
}

.modal-header h3,
.ui-modal-title,
.debt-calendar-modal-title{
 color:var(--text-primary) !important;
 letter-spacing:0 !important;
}

.ui-modal-subtitle,
.debt-calendar-modal-sub{
 color:var(--text-secondary) !important;
}

.modal-close,
.ui-modal-close,
.debt-card-close{
 background:var(--bg-surface-2) !important;
 border:1px solid var(--border) !important;
 color:var(--text-secondary) !important;
}

.modal-close:hover,
.ui-modal-close:hover,
.debt-card-close:hover{
 background:var(--bg-surface-3) !important;
 color:var(--text-primary) !important;
}

.modal-body,
.ui-modal-body,
.debt-card-modal .debt-card-form,
.debt-calendar-modal-body{
 background:var(--bg-surface-2) !important;
}

.modal-footer,
.ui-modal-actions,
.debt-calendar-modal-actions{
 background:var(--bg-surface) !important;
 border-top:1px solid var(--border-light) !important;
}

.debt-calendar-modal:has(.payment-modal-form){
 width:min(900px, calc(100vw - 48px)) !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-form{
 grid-template-columns:minmax(360px, 1fr) minmax(320px, .9fr) !important;
 gap:18px !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-section{
 padding:18px !important;
 border-radius:16px !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-main{
 display:flex !important;
 flex-direction:column !important;
 gap:14px !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-main > .debt-card-field-wide,
.debt-calendar-modal:has(.payment-modal-form) .payment-modal-amount-row,
.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker{
 margin:0 !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-amount-row{
 grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker{
 display:block !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-expense-picker > .debt-card-field{
 margin-bottom:12px !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-type-buttons{
 display:grid !important;
 grid-template-columns:repeat(2, minmax(0,1fr)) !important;
 gap:9px !important;
 max-height:none !important;
 padding:1px 2px 2px 1px !important;
 overflow:visible !important;
}

/* Safari date controls must shrink inside their grid tracks. */
.debt-calendar-modal .payment-modal-section,
.debt-calendar-modal .debt-card-input-unit{
 min-width:0;
}
.debt-calendar-modal .payment-modal-form input:not([type="checkbox"]),
.debt-calendar-modal .payment-modal-form select{
 width:100%;
 min-width:0;
 max-width:100%;
}
.debt-calendar-modal input[type="date"]{
 -webkit-appearance:none;
 appearance:none;
 text-align:left;
}
.debt-calendar-modal input[type="date"]::-webkit-date-and-time-value{
 text-align:left;
 min-width:0;
}
[data-calendar-save-status]{
 grid-column:1 / -1;
 padding:12px 14px;
 margin:0 0 14px;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--bg-surface);
 line-height:1.5;
 overflow-wrap:anywhere;
}
[data-calendar-save-status] .btn{
 margin-top:8px;
 max-width:100%;
 white-space:normal;
}
.one-off-debt-modal .input{
 width:100%;
 min-width:0;
 max-width:100%;
 box-sizing:border-box;
}
.one-off-debt-modal input[type="date"]{
 -webkit-appearance:none;
 appearance:none;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-type-chip{
 min-height:40px !important;
 justify-content:flex-start !important;
 padding:0 12px !important;
 border-radius:10px !important;
 font-size:12px !important;
 font-weight:800 !important;
 text-align:left !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-side{
 display:flex !important;
 flex-direction:column !important;
 gap:14px !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-debt-link .btn{
 width:max-content !important;
 max-width:100% !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle{
 border-radius:14px !important;
 padding:14px !important;
 background:var(--bg-surface-2) !important;
 border:1px solid var(--border-light) !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle input{
 width:20px !important;
 height:20px !important;
 flex:0 0 20px !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-note{
 grid-column:1 / -1 !important;
}

.debt-calendar-modal:has(.payment-modal-form) .payment-modal-note .input{
 height:44px !important;
}

body.dark .btn,
body.dark .btn-logout,
body.dark .filter-btn,
body.dark .client-filter-btn{
 background:#272727 !important;
 border-color:#3f3f3f !important;
 color:#e3e3e3 !important;
 box-shadow:none !important;
}

body.dark .btn:hover,
body.dark .btn-logout:hover,
body.dark .filter-btn:hover,
body.dark .client-filter-btn:hover{
 background:#303030 !important;
 border-color:#565656 !important;
 box-shadow:none !important;
}

body.dark .btn-primary,
body.dark .btn.active,
body.dark .filter-btn.active,
body.dark .client-filter-btn.active,
body.dark .order-view-btn.active,
body.dark .cal-view-btn.active,
body.dark .dash-period-btn.active,
body.dark .dash-nav-btn2.active,
body.dark .tab-btn.active,
body.dark .of-quick-btn.active,
body.dark #of-quick-month.active-month{
 background:#ececec !important;
 border-color:#ececec !important;
 color:#181818 !important;
 box-shadow:0 0 0 3px rgba(236, 236, 236,.14) !important;
}

body.dark .form-input,
body.dark .search-input,
body.dark .input,
body.dark select.input,
body.dark textarea.form-input,
body.dark .eo-input,
body.dark .eo-select,
body.dark .eo-textarea,
body.dark .debt-card-field .input,
body.dark .svc-price-input,
body.dark .expense-group-title-input{
 background:#272727 !important;
 border-color:#3f3f3f !important;
 color:#f4f4f4 !important;
 box-shadow:none !important;
}

body.dark .form-input:focus,
body.dark .search-input:focus,
body.dark .input:focus,
body.dark select.input:focus,
body.dark textarea.form-input:focus,
body.dark .eo-input:focus,
body.dark .eo-select:focus,
body.dark .eo-textarea:focus,
body.dark .debt-card-field .input:focus,
body.dark .svc-price-input:focus,
body.dark .expense-group-title-input:focus{
 border-color:#838383 !important;
 box-shadow:0 0 0 3px rgba(131, 131, 131,.22) !important;
}

body.dark .modal,
body.dark .generic-modal-card,
body.dark .debt-card-modal,
body.dark .ui-modal-card,
body.dark .debt-calendar-modal{
 background:#1c1c1c !important;
 border-color:#3f3f3f !important;
 box-shadow:0 32px 90px rgba(0,0,0,.62) !important;
}

body.dark .modal-header,
body.dark .ui-modal-head,
body.dark .debt-card-header,
body.dark .debt-calendar-modal-head,
body.dark .modal-footer,
body.dark .ui-modal-actions,
body.dark .debt-calendar-modal-actions{
 background:#1c1c1c !important;
 border-color:#393939 !important;
 color:#f6f6f6 !important;
}

body.dark .modal-header h3,
body.dark .ui-modal-title,
body.dark .debt-calendar-modal-title{
 color:#f6f6f6 !important;
}

body.dark .ui-modal-subtitle,
body.dark .debt-calendar-modal-sub{
 color:#b8b8b8 !important;
}

body.dark .modal-close,
body.dark .ui-modal-close,
body.dark .debt-card-close{
 background:#272727 !important;
 border-color:#3f3f3f !important;
 color:#e3e3e3 !important;
}

body.dark .modal-body,
body.dark .ui-modal-body,
body.dark .debt-card-modal .debt-card-form,
body.dark .debt-calendar-modal-body{
 background:#1a1a1a !important;
}

body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-modal-section{
 background:#212121 !important;
 border-color:#3f3f3f !important;
}

body.dark .debt-calendar-modal:has(.payment-modal-form) .payment-paid-toggle{
 background:#272727 !important;
 border-color:#3f3f3f !important;
}

@media (max-width: 980px){
 .debt-calendar-modal:has(.payment-modal-form){
  width:calc(100vw - 24px) !important;
 }
 .debt-calendar-modal:has(.payment-modal-form) .payment-modal-form{
  grid-template-columns:1fr !important;
 }
}

@media (max-width: 620px){
 .debt-calendar-modal:has(.payment-modal-form) .payment-modal-amount-row,
 .debt-calendar-modal:has(.payment-modal-form) .payment-type-buttons{
  grid-template-columns:1fr !important;
 }
 .debt-calendar-modal:has(.payment-modal-form) .payment-modal-section{
  padding:14px !important;
 }
}

/* Final calendar payment color model: category owns card color, payment status is a dot. */
.debt-calendar-event.is-paid{
 background:var(--event-bg, var(--bg-surface)) !important;
 border-color:rgba(161, 161, 161,.28) !important;
 border-left-color:var(--event-color, #727272) !important;
 color:var(--event-text, var(--text-primary)) !important;
 box-shadow:none !important;
}

.debt-calendar-event.is-paid b,
.debt-calendar-event.is-paid em{
 color:inherit !important;
}

body.dark .debt-calendar-event.is-paid{
 background:color-mix(in srgb, var(--event-color, #727272) 20%, #1f1f1f) !important;
 border-color:rgba(114, 114, 114,.42) !important;
 border-left-color:var(--event-color, #727272) !important;
 color:#f7f7f7 !important;
 box-shadow:none !important;
}

body.dark .debt-calendar-event.is-paid b,
body.dark .debt-calendar-event.is-paid em{
 color:#f7f7f7 !important;
}

.debt-calendar-pay-state{
 width:8px !important;
 height:8px !important;
 flex:0 0 8px !important;
 border-radius:50% !important;
 box-shadow:0 0 0 2px rgba(255,255,255,.55) !important;
}

.debt-calendar-pay-state.is-paid{ background:#16a34a !important; }
.debt-calendar-pay-state.is-unpaid{ background:#dc2626 !important; }

body.dark .debt-calendar-pay-state{
 box-shadow:0 0 0 2px rgba(23, 23, 23,.72) !important;
}

/* Contract modal: subscriptions use a compact payment schedule form. */
.debt-card-modal .debt-subscription-only{
 display:none;
}

.debt-card-modal.is-subscription .debt-credit-only{
 display:none !important;
}

.debt-card-modal.is-subscription .debt-subscription-only{
 display:block;
}

.debt-card-modal.is-subscription .debt-card-layout{
 grid-template-columns:minmax(0, 1fr) !important;
}

.debt-card-modal.is-subscription{
 width:680px;
}

.debt-card-modal.is-subscription .debt-card-form{
 padding:22px 24px 24px;
}

.debt-card-modal.is-subscription .debt-card-note{
 margin-top:12px;
}

.subscription-card-modal{
 width:min(680px, calc(100vw - 28px));
}

.subscription-card-modal .subscription-card-form{
 padding:22px 24px 24px;
}

.subscription-card-modal .debt-card-note{
  margin-top:14px;
}

/* Orders toolbar: normalize filter/search controls into one visual row. */
#page-orders #orders-filter-bar{
 --orders-control-h:34px;
 align-items:center !important;
 gap:8px !important;
}

#page-orders #orders-filter-bar > div{
 align-items:center !important;
}

#page-orders #orders-filter-bar .search-input,
#page-orders #orders-filter-bar .form-input,
#page-orders #orders-filter-bar input[type="date"],
#page-orders #orders-filter-bar select{
 height:var(--orders-control-h) !important;
 min-height:var(--orders-control-h) !important;
 box-sizing:border-box !important;
 padding-top:0 !important;
 padding-bottom:0 !important;
 font-size:12px !important;
 line-height:1 !important;
}

#page-orders #orders-filter-bar .search-input{
 border-radius:9px !important;
}

#page-orders #orders-filter-bar button:not(.of-chip-x){
 height:var(--orders-control-h) !important;
 min-height:var(--orders-control-h) !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 font-size:12px !important;
 line-height:1 !important;
 white-space:nowrap !important;
}

#page-orders #orders-filter-bar > div > div[style*="background:var(--bg-surface-2)"],
#page-orders #orders-filter-bar #of-asg-row{
 height:var(--orders-control-h) !important;
 min-height:var(--orders-control-h) !important;
 box-sizing:border-box !important;
 padding:3px !important;
 border-radius:9px !important;
 align-items:center !important;
}

#page-orders #orders-filter-bar > div > div[style*="background:var(--bg-surface-2)"] > button,
#page-orders #orders-filter-bar #of-asg-row > button{
 height:26px !important;
 min-height:26px !important;
 padding:0 12px !important;
 border-radius:7px !important;
}

#page-orders #orders-filter-bar #of-month-nav button{
 width:var(--orders-control-h) !important;
 min-width:var(--orders-control-h) !important;
 padding:0 !important;
 border-radius:9px !important;
}

#page-orders #orders-filter-bar #of-month-label{
 height:var(--orders-control-h) !important;
 min-height:var(--orders-control-h) !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 line-height:1 !important;
}

#page-orders #orders-summary .stat-card{
 min-height:34px !important;
 height:34px !important;
 padding:4px 9px !important;
 display:flex !important;
 flex-direction:column !important;
 justify-content:center !important;
 box-sizing:border-box !important;
}

/* Orders topbar actions: keep analytics/export controls aligned. */
#page-orders .topbar-right{
 align-items:center !important;
 gap:8px !important;
}

#page-orders .topbar-right .btn,
#page-orders .topbar-right .btn-logout{
 height:34px !important;
 min-height:34px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 padding:0 14px !important;
 border-radius:10px !important;
 font-size:12px !important;
 line-height:1 !important;
 white-space:nowrap !important;
}

#page-orders .topbar-right #col-picker-btn{
 min-width:106px !important;
}

#page-orders .topbar-right button[onclick="exportOrdersCsv()"]{
 min-width:78px !important;
}

#page-orders .topbar-right .btn-logout{
 min-width:74px !important;
}

#page-orders .topbar-right > div[style*="background:var(--bg-surface-2)"]{
 height:34px !important;
 min-height:34px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 gap:3px !important;
 padding:3px !important;
 border-radius:10px !important;
}

#page-orders .topbar-right .order-view-btn{
 width:28px !important;
 height:28px !important;
 min-width:28px !important;
 min-height:28px !important;
 padding:0 !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 border-radius:8px !important;
 box-sizing:border-box !important;
}

#page-orders .topbar-right .order-view-btn svg{
 width:14px !important;
 height:14px !important;
 flex:0 0 auto !important;
}

/* Global page action bars: one button rhythm across CRM sections. */
.topbar-right,
.cal-topbar-right,
.toolbar-actions,
.page-actions{
 --crm-bar-control-h:34px;
 align-items:center !important;
 gap:8px !important;
}

.topbar-right .btn,
.topbar-right .btn-primary,
.topbar-right .btn-logout,
.cal-topbar-right .btn,
.cal-topbar-right .btn-primary,
.cal-topbar-right .btn-logout,
.toolbar-actions .btn,
.toolbar-actions .btn-primary,
.toolbar-actions .btn-logout,
.page-actions .btn,
.page-actions .btn-primary,
.page-actions .btn-logout{
 height:var(--crm-bar-control-h) !important;
 min-height:var(--crm-bar-control-h) !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 padding:0 14px !important;
 border-radius:10px !important;
 font-size:12px !important;
 line-height:1 !important;
 white-space:nowrap !important;
}

.topbar-right .btn-sm,
.cal-topbar-right .btn-sm,
.toolbar-actions .btn-sm,
.page-actions .btn-sm{
 height:var(--crm-bar-control-h) !important;
 min-height:var(--crm-bar-control-h) !important;
 padding:0 12px !important;
 font-size:12px !important;
}

.topbar-right .icon-btn,
.topbar-right .btn-icon,
.cal-topbar-right .icon-btn,
.cal-topbar-right .btn-icon,
.toolbar-actions .icon-btn,
.toolbar-actions .btn-icon,
.page-actions .icon-btn,
.page-actions .btn-icon{
 width:var(--crm-bar-control-h) !important;
 min-width:var(--crm-bar-control-h) !important;
 height:var(--crm-bar-control-h) !important;
 min-height:var(--crm-bar-control-h) !important;
 padding:0 !important;
 border-radius:10px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
}

.topbar-right > div[style*="background:var(--bg-surface-2)"],
.cal-topbar-right > div[style*="background:var(--bg-surface-2)"],
.toolbar-actions > div[style*="background:var(--bg-surface-2)"],
.page-actions > div[style*="background:var(--bg-surface-2)"]{
 height:var(--crm-bar-control-h) !important;
 min-height:var(--crm-bar-control-h) !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 padding:3px !important;
 border-radius:10px !important;
}

.topbar-right .order-view-btn,
.cal-topbar-right .cal-view-btn,
.toolbar-actions .order-view-btn,
.toolbar-actions .cal-view-btn,
.page-actions .order-view-btn,
.page-actions .cal-view-btn{
 height:28px !important;
 min-height:28px !important;
 min-width:28px !important;
 padding:0 10px !important;
 border-radius:8px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 line-height:1 !important;
}

.topbar-right .order-view-btn:has(svg),
.toolbar-actions .order-view-btn:has(svg),
.page-actions .order-view-btn:has(svg){
 width:28px !important;
 padding:0 !important;
}

.filter-bar,
.client-filters,
.svc-toolbar,
.svc-page-tabs{
 align-items:center !important;
 gap:8px !important;
}

.filter-bar .filter-btn,
.filter-bar .client-filter-btn,
.client-filters .filter-btn,
.client-filters .client-filter-btn,
.svc-page-tabs .svc-page-tab{
 min-height:34px !important;
 height:34px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 padding:0 14px !important;
 border-radius:10px !important;
 font-size:12px !important;
 line-height:1 !important;
 white-space:nowrap !important;
}

.filter-bar .search-input,
.filter-bar .form-input,
.client-filters .search-input,
.client-filters .form-input,
.svc-toolbar .search-input,
.svc-toolbar .form-input{
 min-height:34px !important;
 height:34px !important;
 box-sizing:border-box !important;
 padding-top:0 !important;
 padding-bottom:0 !important;
 border-radius:10px !important;
 font-size:12px !important;
 line-height:1 !important;
}

/* Calendar header: match the normalized Orders controls. */
#page-calendar > div[style*="height:44px"]{
 height:44px !important;
 padding:0 18px !important;
 align-items:center !important;
 gap:10px !important;
}

#page-calendar .cal-nav-btn{
 width:34px !important;
 min-width:34px !important;
 height:34px !important;
 min-height:34px !important;
 padding:0 !important;
 border-radius:10px !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 box-sizing:border-box !important;
 font-size:14px !important;
 line-height:1 !important;
}

#page-calendar .cal-view-switch{
 height:34px !important;
 min-height:34px !important;
 width:auto !important;
 flex:0 0 auto !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 gap:3px !important;
 padding:3px !important;
 border-radius:10px !important;
 overflow:hidden !important;
}

#page-calendar .cal-view-btn{
 height:28px !important;
 min-height:28px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 padding:0 13px !important;
 border-radius:8px !important;
 font-size:12px !important;
 line-height:1 !important;
 white-space:nowrap !important;
}

#page-calendar > div[style*="height:44px"] > div:last-child .btn{
 height:34px !important;
 min-height:34px !important;
 box-sizing:border-box !important;
 display:inline-flex !important;
 align-items:center !important;
 justify-content:center !important;
 padding:0 12px !important;
 border-radius:10px !important;
 font-size:12px !important;
 line-height:1 !important;
 white-space:nowrap !important;
}

#page-calendar > div[style*="height:44px"] > div:last-child .btn:has(svg):not(:has(:not(svg))){
 width:34px !important;
 min-width:34px !important;
 padding:0 !important;
}

/* ===== iPad workspace optimization =====
   iPad landscape needs compact navigation and a real scroll canvas inside
   wide modules instead of squeezed tables/calendars. */
@media (pointer: coarse) and (min-width: 1025px) and (max-width: 1366px) {
 body {
  overflow:hidden !important;
 }

 #sidebar {
  width:212px !important;
 }

 #main {
  margin-left:212px !important;
  width:calc(100vw - 212px) !important;
  min-width:0 !important;
  overflow:hidden !important;
 }

 .logo {
  padding:18px 14px 14px !important;
 }

 .logo-user-badge {
  width:32px !important;
  height:32px !important;
  font-size:11px !important;
 }

 .logo-user-name {
  font-size:13px !important;
 }

 .logo-user-role {
  max-width:138px !important;
  font-size:10px !important;
  line-height:1.25 !important;
 }

 .nav-item {
  margin-right:8px !important;
  padding:9px 12px 9px 16px !important;
  gap:10px !important;
  font-size:13px !important;
 }

 .nav-item svg {
  width:17px !important;
  height:17px !important;
 }

 .topbar {
  height:56px !important;
  padding:0 16px !important;
 }

 .page-title {
  font-size:17px !important;
 }

 .content {
  padding:16px !important;
 }

 .btn,
 .btn-primary,
 .btn-logout,
 .topbar-right .btn,
 .topbar-right .btn-primary,
 .topbar-right .btn-logout {
  height:34px !important;
  min-height:34px !important;
  padding:0 12px !important;
  border-radius:10px !important;
  font-size:12px !important;
  line-height:1 !important;
  white-space:nowrap !important;
 }

 .topbar-right {
  min-width:0 !important;
  gap:7px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
 }

 .topbar-right::-webkit-scrollbar {
  display:none;
 }

 /* Orders: keep controls usable and move table overflow inside the table block. */
 #page-orders > .content {
  height:calc(100dvh - 56px) !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
 }

 #page-orders #orders-filter-bar {
  position:relative !important;
  top:auto !important;
  z-index:20 !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  gap:8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:0 0 6px !important;
  margin:0 !important;
  background:transparent !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
 }

 #page-orders #orders-filter-bar > * {
  flex:0 0 auto !important;
 }

 #page-orders #orders-filter-bar > div[style*="width:190px"] {
  width:176px !important;
  flex-basis:176px !important;
 }

 #page-orders #orders-filter-bar .search-input,
 #page-orders #orders-filter-bar .form-input,
 #page-orders #orders-filter-bar input,
 #page-orders #orders-filter-bar select,
 #page-orders #orders-filter-bar button:not(.of-chip-x) {
  height:34px !important;
  min-height:34px !important;
 }

 #page-orders #orders-summary {
  width:auto !important;
  margin-left:0 !important;
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  overflow:visible !important;
 }

 #page-orders #orders-table-view {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:hidden !important;
 }

 #page-orders #orders-table-view .table-wrap {
  height:100% !important;
  max-height:none !important;
  max-width:100% !important;
  overflow:auto !important;
  border-radius:14px !important;
  -webkit-overflow-scrolling:touch;
 }

 #page-orders #orders-table {
  min-width:1560px !important;
 }

 /* Calendar: preserve readable columns and let the user pan the grid. */
 #page-calendar {
  height:100dvh !important;
  overflow:hidden !important;
 }

 #page-calendar > div[style*="height:44px"] {
  height:48px !important;
  min-height:48px !important;
  padding:0 14px !important;
  gap:8px !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  justify-content:flex-start !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
 }

 #page-calendar > div[style*="height:44px"]::-webkit-scrollbar {
  display:none;
 }

 #page-calendar > div[style*="height:44px"] > * {
  flex:0 0 auto !important;
 }

 #page-calendar .cal-nav-btn,
 #page-calendar > div[style*="height:44px"] > div:last-child .btn {
  height:34px !important;
  min-height:34px !important;
 }

 #page-calendar .cal-view-switch {
  height:34px !important;
  min-height:34px !important;
 }

 #cal-main-area {
  flex:1 1 auto !important;
  min-height:0 !important;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
 }

 #cal-week-view,
 #cal-day-view {
  min-width:100% !important;
 }

 #cal-week-header {
  position:sticky !important;
  top:0 !important;
  z-index:12 !important;
 }

 #cal-week-body {
  min-width:0 !important;
  width:100% !important;
  }

 #page-calendar:has(#cal-user-both.active) #cal-week-view {
  min-width:1280px !important;
 }

 #page-calendar:has(#cal-user-both.active) #cal-week-body {
  min-width:0 !important;
  width:100% !important;
  }

 #page-calendar:not(:has(#cal-user-both.active)) #cal-main-area {
  overflow-x:hidden !important;
 }

 .cal-time-label,
 .cal-slot-time {
  font-size:11px !important;
 }

 .cal-slot,
 .cal-event {
  border-radius:8px !important;
 }

 /* Finance: the second sidebar must be compact, the calendar gets its own width. */
 #page-finance > .content {
  height:calc(100dvh - 56px) !important;
  overflow:hidden !important;
  padding:0 !important;
 }

 #page-finance > .content > div {
  min-width:0 !important;
  height:100% !important;
 }

 #page-finance > .content > div > div:first-child {
  width:162px !important;
  flex:0 0 162px !important;
  padding:12px 8px !important;
  overflow-y:auto !important;
 }

 #page-finance > .content > div > div:first-child .settings-nav-btn,
 #page-finance > .content > div > div:first-child .svc-nav-btn {
  min-height:34px !important;
  height:34px !important;
  padding:0 10px !important;
  border-radius:10px !important;
  font-size:12px !important;
  gap:8px !important;
 }

 #page-finance > .content > div > div:first-child svg {
  width:16px !important;
  height:16px !important;
 }

 #page-finance > .content > div > div:last-child {
  padding:16px !important;
  overflow:auto !important;
  min-width:0 !important;
 }

 #page-finance .payment-page-head {
  gap:12px !important;
  align-items:flex-start !important;
 }

 #page-finance .payment-page-actions {
  flex:0 0 auto !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  max-width:100% !important;
  padding-bottom:4px !important;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:thin;
 }

 #finance-section-debts .debt-calendar-block {
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch;
 }

 #finance-section-debts .debt-calendar-head {
  align-items:flex-start !important;
  gap:12px !important;
 }

 #finance-section-debts .debt-calendar-actions {
  flex-wrap:nowrap !important;
 }

 #finance-section-debts .debt-calendar-title {
  min-width:136px !important;
 }

 #finance-section-debts .debt-calendar-filters {
  min-width:820px !important;
  flex-wrap:nowrap !important;
  overflow-x:auto !important;
  overflow-y:hidden !important;
  padding:8px !important;
  gap:6px !important;
  -webkit-overflow-scrolling:touch;
 }

 #finance-section-debts .debt-calendar-filter {
  flex:0 0 auto !important;
  height:32px !important;
  padding:0 10px !important;
  font-size:11px !important;
 }

 #finance-section-debts #debt-calendar,
 #finance-section-debts .debt-calendar-grid {
  min-width:860px !important;
 }

 #finance-section-debts .debt-calendar-day {
  min-height:104px !important;
  padding:7px !important;
 }

 #finance-section-debts .debt-calendar-event {
  min-height:22px !important;
  padding:3px 6px !important;
  gap:6px !important;
  font-size:10px !important;
 }

 #finance-section-debts .debt-calendar-event b,
 #finance-section-debts .debt-calendar-event em {
  font-size:10px !important;
 }
}
/* Calendar week alignment: keep sticky header, time gutter and slot body on one grid. */
#cal-week-view{
 --cal-time-gutter:52px;
}
#cal-week-header{
 box-sizing:border-box;
 width:100%;
 transform:translateZ(0);
}
#cal-week-scroll-body{
 display:grid !important;
 grid-template-columns:var(--cal-time-gutter) minmax(0,1fr) !important;
 align-items:start !important;
 width:100% !important;
 min-width:0 !important;
}
#cal-time-col{
 width:auto !important;
 min-width:var(--cal-time-gutter) !important;
 max-width:var(--cal-time-gutter) !important;
 box-sizing:border-box !important;
}
#cal-week-body{
 width:100% !important;
 min-width:0 !important;
 box-sizing:border-box !important;
}
#cal-week-body > .cal-day-col{
 min-width:0 !important;
 box-sizing:border-box !important;
}
#cal-week-body > .cal-day-col > div{
 min-width:0 !important;
 box-sizing:border-box !important;
}

/* Calendar vertical alignment: time labels must include their border in the 80px slot height. */
.cal-time-label{
 box-sizing:border-box !important;
}

/* Week calendar scroll fix: the day header must not overlap scrolled slots. */
#cal-main-area[data-cal-view="week"]{
 overflow-x:auto !important;
 overflow-y:hidden !important;
}
#cal-main-area[data-cal-view="week"] #cal-week-view{
 height:100% !important;
 min-height:0 !important;
 display:flex !important;
 flex-direction:column !important;
 overflow:hidden !important;
}
#cal-main-area[data-cal-view="week"] #cal-week-header{
 position:relative !important;
 top:auto !important;
 z-index:5 !important;
 flex:0 0 auto !important;
}
#cal-main-area[data-cal-view="week"] #cal-week-scroll-body{
 flex:1 1 auto !important;
 min-height:0 !important;
 overflow-y:auto !important;
 overflow-x:hidden !important;
 display:grid !important;
 grid-template-columns:var(--cal-time-gutter) minmax(0,1fr) !important;
 align-items:start !important;
 width:100% !important;
 scrollbar-gutter:stable;
}
#cal-main-area[data-cal-view="week"] #cal-time-col,
#cal-main-area[data-cal-view="week"] #cal-week-body{
 align-self:start !important;
}

.client-presentation-subtitle{
 display:block;
 max-width:100%;
 margin-top:2px;
 overflow:hidden;
 color:var(--text-muted);
 font-size:10px;
 font-weight:500;
 line-height:1.25;
 text-overflow:ellipsis;
 white-space:nowrap;
}
.client-card-subtitle{font-size:12px;margin:3px 0 6px}
.cal-booking-subtitle{color:inherit;opacity:.78}

/* Journal option 2: one uninterrupted surface for the whole booking duration. */
#page-calendar .cal-booking.cal-booking-v2{
 background:#e9edf0;border:0;border-radius:7px;box-shadow:0 2px 5px rgba(0,0,0,.08);
 color:#252525;z-index:5;overflow:hidden;cursor:grab;
 padding:8px 9px;display:flex;flex-direction:column;justify-content:flex-start;gap:4px;
 box-sizing:border-box;transition:box-shadow 140ms ease,filter 140ms ease;
}
#page-calendar .cal-booking.cal-booking-v2.stage-confirmed{background:#dcecf5;color:#12364f}
#page-calendar .cal-booking.cal-booking-v2.stage-processing{background:#f7ecd8;color:#523b20}
#page-calendar .cal-booking.cal-booking-v2.stage-done{background:#def2e9;color:#174437}
#page-calendar .cal-booking.cal-booking-v2.is-cancelled{background:#e8e8e8;color:#525252}
body.dark #page-calendar .cal-booking.cal-booking-v2{background:#303030;color:#f2f2f2;box-shadow:0 2px 6px rgba(0,0,0,.16)}
body.dark #page-calendar .cal-booking.cal-booking-v2.stage-confirmed{background:#213847;color:#f0f7fa}
body.dark #page-calendar .cal-booking.cal-booking-v2.stage-processing{background:#3b3022;color:#fff4e6}
body.dark #page-calendar .cal-booking.cal-booking-v2.stage-done{background:#203b31;color:#e8f9f0}
body.dark #page-calendar .cal-booking.cal-booking-v2.is-cancelled{background:#292929;color:#bababa}
#page-calendar .cal-booking-v2:hover{box-shadow:0 4px 12px rgba(0,0,0,.24);filter:brightness(1.07)}
#page-calendar .cal-booking-v2:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
#page-calendar .cal-booking-v2 .cal-booking-top{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0;flex:0 0 auto}
#page-calendar .cal-booking-v2 .cal-booking-range{font-size:11px;font-weight:750;line-height:16px;font-variant-numeric:tabular-nums;white-space:nowrap;color:inherit;overflow:hidden;text-overflow:ellipsis;min-width:0}
#page-calendar .cal-booking-v2 .cal-booking-name{font-size:13px;font-weight:750;line-height:17px;color:inherit;margin:0;flex:0 0 auto}
#page-calendar .cal-booking-v2 .cal-booking-type,
#page-calendar .cal-booking-v2 .cal-booking-addr{font-size:11px;line-height:14px;color:inherit;opacity:.86;margin:0;flex:0 0 auto}
#page-calendar .cal-booking-v2 .cal-booking-subtitle{font-size:10px;line-height:13px;color:inherit;opacity:.7;flex:0 0 auto}
#page-calendar .cal-booking-v2 .cal-booking-statuses{display:flex;align-items:center;gap:3px;min-width:0;flex:0 0 auto}
#page-calendar .cal-booking-v2 .cal-booking-statuses>span{border:1px solid currentColor;border-radius:4px;padding:0 3px;font-size:10px;line-height:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:inherit}
#page-calendar .cal-booking-v2 .cal-booking-stage-label{font-weight:750;background:rgba(255,255,255,.12);min-width:0;flex:0 1 auto}
#page-calendar .cal-booking-v2 .cal-booking-payment{font-weight:600;opacity:.9;max-width:65%;flex:0 0 auto}
#page-calendar .cal-booking-v2 .cal-booking-flags{display:flex;flex-wrap:wrap;gap:3px 6px;font-size:10px;line-height:14px;color:inherit;margin-top:2px}
#page-calendar .cal-booking-v2.is-compact{padding-top:3px;padding-bottom:3px;gap:1px}
#page-calendar .cal-booking-v2.is-compact .cal-booking-range{font-size:11px;line-height:13px}
#page-calendar .cal-booking-v2.is-compact .cal-booking-name{font-size:11px;line-height:14px}
#page-calendar .cal-booking-v2.is-tiny{flex-direction:row;align-items:center;gap:5px}
#page-calendar .cal-booking-v2.is-tiny .cal-booking-top{flex:0 0 auto;overflow:hidden}
#page-calendar .cal-booking-v2.is-tiny .cal-booking-name{flex:1 1 auto;min-width:0}
#page-calendar .cal-day-col.today-col{background:var(--bg-surface)}
#page-calendar .cal-week-day-heading,#page-calendar .cal-day-heading{background:var(--bg-surface)}
#page-calendar .cal-week-day-heading.is-today,#page-calendar .cal-day-heading.is-today{background:#e3f2e9}
body.dark #page-calendar .cal-week-day-heading.is-today,body.dark #page-calendar .cal-day-heading.is-today{background:#1b392b}
#page-calendar .cal-free-slot{--slot-free-bg:#f2f2f2;--slot-free-border:#d5d5d5;--slot-free-hover-bg:#e5e5e5;--slot-free-hover-br:#9e9e9e}
body.dark #page-calendar .cal-free-slot{--slot-free-bg:#2b2b2b;--slot-free-border:#393939;--slot-free-hover-bg:#343434;--slot-free-hover-br:#777}
#page-calendar .cal-slot{background:transparent}
#page-calendar .cal-slot:hover{background:var(--bg-surface-2)}

.workflow-stage-list{display:flex;flex-direction:column;gap:12px;width:100%;max-width:none}
#settings-section-design > #base-palette-settings{display:block}
#base-palette-settings h3{margin:0 0 8px;font-size:16px}
#base-palette-settings p{font-size:12px;line-height:18px;color:var(--text-secondary)}
#base-palette-settings fieldset{display:inline-block;vertical-align:top;width:calc(50% - 12px);margin:12px 8px 16px 0;box-sizing:border-box;min-width:0;border:1px solid var(--border);border-radius:8px;padding:12px}
#base-palette-settings fieldset label{width:calc(100% - 16px);justify-content:space-between;font-size:13px}
#base-palette-settings input[type=color]{width:48px;height:32px;border:1px solid var(--border-control);border-radius:6px;background:var(--bg-surface)}
@media(max-width:600px){#base-palette-settings fieldset{width:100%;margin-right:0}}
.workflow-stage-row{padding:16px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface)}
.workflow-stage-heading{display:flex;align-items:center;gap:12px;justify-content:space-between;min-width:0}
.workflow-stage-heading .os-badge-preview{font-size:13px;font-weight:700;line-height:20px;padding:4px 12px;border-radius:6px;overflow-wrap:anywhere}
.workflow-stage-heading .btn{flex-shrink:0}
.workflow-stage-name[readonly]{display:none}
.workflow-stage-row.is-editing .os-badge-preview{display:none}
.workflow-stage-name{flex:1;min-width:0}
.workflow-stage-meaning{margin:10px 0 4px;font-size:13px;line-height:19px;color:var(--text-primary)}
.workflow-stage-accounting{margin:0;font-size:12px;line-height:18px;color:var(--text-secondary)}
.workflow-money-note p{margin:8px 0 0;line-height:20px;color:var(--text-secondary);font-size:13px}
.workflow-legacy{padding:12px 0;border-top:1px solid var(--border-light);font-size:12px;line-height:19px;color:var(--text-secondary)}
.workflow-legacy summary{cursor:pointer;font-weight:600;color:var(--text-primary)}
@media(max-width:600px){.workflow-stage-row{padding:12px}.workflow-stage-heading{flex-wrap:wrap}.workflow-stage-heading .btn{margin-left:auto}}