/* ===== Export schedule modal segmented buttons ===== */


/* ===== True final orders table sticky header ===== */




/* ===== Absolute final payment calendar event color ===== */



/* ===== True final payment modal polish ===== */
























@media (max-width: 640px) {




}

/* ===== Payment calendar category readability ===== */







/* ===== Final payment modal type picker ===== */











@media (max-width: 640px) {

}

/* ===== Dark calendar booking cleanup ===== */







/* ===== Last dark calendar blocked slot cleanup ===== */




/* ===== Final light calendar blocked slot restore ===== */




/* ===== Last light calendar blocked slot restore ===== */




/* ===== Payment modal type picker ===== */


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

/* ===== Payments analytics ===== */
.payment-page-head {
 display:flex !important;
 align-items:center !important;
 justify-content:space-between !important;
 gap:14px !important;
 flex-wrap:wrap !important;
 margin-bottom:8px !important;
}
.payment-page-title {
 display:flex;
 align-items:center;
 gap:10px;
 color:var(--text-primary);
}
.payment-page-actions {
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:8px;
 flex-wrap:wrap;
}
.payment-page-actions .debt-calendar-title {
 min-width:136px !important;
 height:36px !important;
 padding:0 14px !important;
 border-radius:9px !important;
 box-sizing:border-box !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
}
.payment-page-actions .debt-calendar-title strong {
 font-size:14px !important;
 line-height:1 !important;
}
.payment-page-actions .debt-calendar-title span {
 display:none !important;
}
.debt-calendar-block {
 padding:0 !important;
 overflow:hidden;
 margin-bottom:28px !important;
 border:1px solid var(--border) !important;
 box-shadow:0 12px 34px rgba(23, 23, 23,.06) !important;
}
.debt-calendar-block .debt-calendar-head {
 padding:14px 16px 10px;
 margin-bottom:0;
 border-bottom:1px solid var(--border-light);
}
.debt-calendar-block .settings-block-label {
 font-size:11px;
}
.debt-calendar-block #debt-calendar {
 padding:0;
}
.debt-calendar-block .debt-calendar-grid {
 border:0;
 border-radius:0;
 box-shadow:none;
}
.payment-analytics-section {
 margin-top:22px;
 padding:18px;
 border-top:1px solid var(--border);
}
.payment-analytics-title {
 display:flex;
 flex-wrap:wrap;
 align-items:flex-end;
 justify-content:space-between;
 gap:12px;
 margin-bottom:12px;
}
.payment-analytics-title span {
 color:var(--text-primary);
 font-size:15px;
 font-weight:900;
}
.payment-analytics-title em {
 color:var(--text-muted);
 font-size:12px;
 font-style:normal;
 font-weight:600;
}
.payment-dashboard {
 display:grid;
 grid-template-columns:repeat(3, minmax(0, 1fr));
 grid-auto-rows:1fr;
 gap:12px;
 margin:0 0 12px;
}
.payment-stat {
 min-width:0;
 min-height:104px;
 padding:16px;
 border:1px solid var(--border);
 border-radius:var(--card-radius,12px);
 background:var(--bg-surface);
 box-shadow:none;
 display:flex;
 flex-direction:column;
 justify-content:space-between;
 gap:8px;
}
.payment-stat span {
 color:var(--text-muted);
 font-size:12px;
 font-weight:600;
 text-transform:uppercase;
 letter-spacing:.06em;
}
.payment-stat strong {
 color:var(--text-primary);
 font-size:22px;
 font-weight:700;
 font-variant-numeric:tabular-nums;
 white-space:nowrap;
 line-height:1.15;
}
.payment-stat small {font-size:12px;line-height:16px;color:var(--text-secondary)}
.payment-stat-success strong { color:var(--status-success); }
.payment-stat-warning strong { color:var(--status-warning); }
.payment-analytics-grid {
 display:grid;
 grid-template-columns:repeat(2, minmax(0, 1fr));
 gap:12px;
 margin-bottom:16px;
}
.payment-panel {
 min-height:220px;
 padding:var(--card-padding,20px);
 border:1px solid var(--border);
 border-radius:var(--card-radius,12px);
 background:var(--bg-surface);
 box-shadow:0 8px 24px rgba(23, 23, 23,.04);
}
.payment-panel-head {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 margin-bottom:14px;
}
.payment-panel-head b {
 color:var(--text-primary);
 font-size:14px;
 font-weight:900;
}
.payment-panel-head span {
 color:var(--text-muted);
 font-size:11px;
 font-weight:800;
}
.payment-bars {
 display:flex;
 flex-direction:column;
 gap:10px;
}
.payment-bar-row {
 min-width:0;
}
.payment-bar-meta {
 display:grid;
 grid-template-columns:20px minmax(0, 1fr) auto auto;
 align-items:center;
 gap:8px;
 margin-bottom:5px;
 color:var(--text-secondary);
 font-size:11px;
}
.payment-bar-meta span,
.payment-bar-meta em {
 color:var(--text-muted);
 font-style:normal;
 font-weight:700;
}
.payment-bar-meta b {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 color:var(--text-primary);
 font-weight:800;
}
.payment-bar-meta strong {
 color:var(--text-primary);
 font-weight:900;
}
.payment-bar-track {
 height:6px;
 overflow:hidden;
 border-radius:999px;
 background:var(--bg-surface-2);
}
.payment-bar-track i {
 display:block;
 height:100%;
 border-radius:999px;
}
.payment-month-chart {
 height:190px;
 display:grid;
 grid-template-columns:repeat(12, minmax(0, 1fr));
 align-items:end;
 gap:7px;
 padding-top:18px;
}
.payment-month {
 height:100%;
 display:flex;
 flex-direction:column;
 align-items:center;
 justify-content:flex-end;
 gap:6px;
 min-width:0;
}
.payment-month i {
 width:100%;
 max-width:28px;
 min-height:5px;
 border-radius:7px 7px 3px 3px;
 background:linear-gradient(180deg,#8a8a8a,#c1c1c1);
 box-shadow:inset 0 -1px 0 rgba(50, 50, 50,.12);
}
.payment-month.is-current i {
 background:linear-gradient(180deg,#282828,#727272);
}
.payment-month b {
 min-height:12px;
 color:#7b7b7b;
 font-size:9px;
 font-weight:900;
 white-space:nowrap;
}
.payment-month span {
 color:var(--text-muted);
 font-size:10px;
 font-weight:800;
}
.payment-empty {
 padding:18px;
 border:1px dashed var(--border);
 border-radius:12px;
 color:var(--text-muted);
 font-size:12px;
 text-align:center;
}
.debt-calendar-event.is-paid {
 background:var(--event-bg, #e8f8f0) !important;
 color:var(--event-text, #14532d) !important;
 border-left-color:#16a34a !important;
 box-shadow:inset 0 0 0 1px rgba(22,163,74,.16) !important;
}
.payment-paid-toggle {
 display:flex;
 align-items:center;
 gap:12px;
 margin:2px 0 14px;
 padding:12px 14px;
 border:1px solid var(--border);
 border-radius:12px;
 background:var(--bg-surface-2);
 cursor:pointer;
 user-select:none;
}
.payment-paid-toggle input {
 width:18px;
 height:18px;
 accent-color:#16a34a;
 flex:0 0 auto;
}
.payment-paid-toggle span {
 display:flex;
 flex-direction:column;
 gap:2px;
 min-width:0;
}
.payment-paid-toggle b {
 color:var(--text-primary);
 font-size:13px;
 font-weight:900;
}
.payment-paid-toggle em {
 color:var(--text-muted);
 font-size:11px;
 font-style:normal;
 font-weight:600;
}
.debt-calendar-event {
 background:var(--event-bg, #f1f1f1) !important;
 border-left-color:var(--event-color, #7c7c7c) !important;
 color:var(--event-text, #313131) !important;
}
@media (max-width: 1280px) {
 .payment-dashboard { grid-template-columns:repeat(3, minmax(140px, 1fr)); }
}
@media (max-width: 900px) {
 .payment-dashboard,
 .payment-analytics-grid { grid-template-columns:1fr; }
 .payment-panel { min-height:auto; }
}

/* ===== Absolute final payment modal polish ===== */
























@media (max-width: 640px) {




}

/* ===== Absolute final payment calendar event color ===== */



/* ===== Final payment calendar event color ===== */



/* ===== Absolute final CRM-style payment calendar modal ===== */























@media (max-width: 640px) {






}

/* ===== True final CRM-style payment calendar modal ===== */























@media (max-width: 640px) {






}

/* ===== Final CRM-style payment calendar modal ===== */
.debt-calendar-modal {
 width:600px !important;
 max-width:calc(100vw - 48px) !important;
 border-radius:16px !important;
 overflow:hidden !important;
 background:var(--bg-surface) !important;
 border:1px solid var(--border) !important;
 box-shadow:0 24px 70px rgba(23, 23, 23,.22) !important;
}
.debt-calendar-modal-head {
 position:relative !important;
 display:flex !important;
 justify-content:space-between !important;
 align-items:flex-start !important;
 gap:18px !important;
 padding:22px 26px 20px !important;
 background:var(--bg-surface) !important;
 color:var(--text-primary) !important;
 border-bottom:1px solid var(--border-light) !important;
}
.debt-calendar-modal-head::before {
 content:"" !important;
 position:absolute !important;
 left:0 !important;
 right:0 !important;
 top:0 !important;
 height:3px !important;
 background:var(--accent) !important;
 opacity:.85 !important;
}
.debt-calendar-modal-kicker {
 margin:0 0 6px !important;
 color:var(--text-muted) !important;
 font-size:10px !important;
 font-weight:800 !important;
 letter-spacing:.16em !important;
 text-transform:uppercase !important;
 line-height:1 !important;
}
.debt-calendar-modal-title {
 margin:0 !important;
 color:var(--text-primary) !important;
 font-size:19px !important;
 font-weight:850 !important;
 line-height:1.15 !important;
 letter-spacing:0 !important;
}
.debt-calendar-modal-sub {
 margin-top:8px !important;
 max-width:420px !important;
 color:var(--text-secondary) !important;
 font-size:12px !important;
 line-height:1.45 !important;
}
.debt-calendar-modal .debt-card-close {
 position:static !important;
 width:36px !important;
 height:36px !important;
 flex:0 0 auto !important;
 border:1px solid var(--border) !important;
 border-radius:10px !important;
 background:var(--bg-surface-2) !important;
 color:var(--text-secondary) !important;
 box-shadow:none !important;
 font-size:18px !important;
 display:flex !important;
 align-items:center !important;
 justify-content:center !important;
}
.debt-calendar-modal .debt-card-close:hover {
 background:var(--bg-surface-3) !important;
 color:var(--text-primary) !important;
 border-color:var(--border) !important;
}
.debt-calendar-modal-body {
 padding:22px 26px 24px !important;
 display:grid !important;
 gap:14px !important;
 background:var(--bg-surface-2) !important;
}
.debt-calendar-modal .debt-card-grid {
 display:grid !important;
 grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
 gap:14px !important;
}
.debt-calendar-modal .debt-card-field,
.debt-calendar-modal .debt-card-field-wide {
 margin:0 !important;
 min-width:0 !important;
}
.debt-calendar-modal .debt-card-field label {
 display:flex !important;
 justify-content:space-between !important;
 gap:8px !important;
 margin:0 0 7px !important;
 color:var(--text-secondary) !important;
 font-size:10px !important;
 font-weight:800 !important;
 letter-spacing:.08em !important;
 text-transform:uppercase !important;
}
.debt-calendar-modal .debt-card-field label em {
 align-self:center !important;
 color:var(--text-muted) !important;
 font-size:9px !important;
 font-style:normal !important;
 font-weight:700 !important;
 letter-spacing:0 !important;
 text-transform:none !important;
}
.debt-calendar-modal .debt-card-field .input {
 width:100% !important;
 height:44px !important;
 box-sizing:border-box !important;
 border:1px solid var(--border) !important;
 border-radius:11px !important;
 background:var(--bg-surface) !important;
 color:var(--text-primary) !important;
 font-size:14px !important;
 font-weight:500 !important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.035) !important;
}

.debt-calendar-modal .debt-card-field .input:focus {
 border-color:var(--accent) !important;
 box-shadow:0 0 0 3px var(--accent-light) !important;
 outline:none !important;
}
.debt-calendar-modal .debt-card-input-unit b {
 right:14px !important;
 color:var(--text-muted) !important;
 font-size:11px !important;
 font-weight:800 !important;
}
.debt-calendar-modal-actions {
 display:flex !important;
 align-items:center !important;
 justify-content:space-between !important;
 gap:12px !important;
 padding:16px 26px !important;
 background:var(--bg-surface) !important;
 border-top:1px solid var(--border-light) !important;
}
.debt-calendar-modal-actions .btn {
 height:40px !important;
 padding:0 18px !important;
 border-radius:11px !important;
 font-size:13px !important;
 font-weight:800 !important;
}
.debt-calendar-modal-actions .btn-primary {
 min-width:118px !important;
 background:#282828 !important;
 border-color:#282828 !important;
 color:#fff !important;
}

.debt-calendar-modal-actions .btn-danger {
 background:var(--bg-surface) !important;
 border:1px solid #fecaca !important;
 color:#dc2626 !important;
}
.debt-calendar-modal-actions .btn-danger:hover {
 background:#fee2e2 !important;
}
@media (max-width: 640px) {
 .debt-calendar-modal {
  max-width:calc(100vw - 24px) !important;
 }
 .debt-calendar-modal-head,
 .debt-calendar-modal-body,
 .debt-calendar-modal-actions {
  padding-left:18px !important;
  padding-right:18px !important;
 }

 .debt-calendar-modal-actions {
  align-items:stretch !important;
 }
 .debt-calendar-modal-actions > div {
  flex:1 1 auto !important;
 }
 .debt-calendar-modal-actions .btn {
  flex:1 1 0 !important;
 }
}

/* ===== Expense type catalog ===== */
.expense-group-settings {
 margin-bottom:16px;
 padding-bottom:14px;
 border-bottom:1px solid var(--border-light);
}
.expense-settings-subhead {
 display:flex;
 align-items:flex-end;
 justify-content:space-between;
 gap:12px;
 margin-bottom:10px;
}
.expense-settings-subhead b {
 display:block;
 color:var(--text-primary);
 font-size:13px;
 font-weight:900;
}
.expense-settings-subhead span {
 display:block;
 margin-top:2px;
 color:var(--text-muted);
 font-size:11px;
 font-weight:600;
}
.expense-group-board {
 display:grid;
 grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
 gap:12px;
 margin-bottom:14px;
}
.expense-group-section {
 min-width:0;
 border:1px solid color-mix(in srgb, var(--expense-color, #7A786A) 24%, var(--border));
 border-radius:14px;
 background:var(--bg-surface);
 box-shadow:0 6px 18px rgba(23, 23, 23,.045);
 overflow:hidden;
 transition:border-color .12s, box-shadow .12s, opacity .12s, transform .12s;
}
.expense-group-section.is-dragging,
.expense-type-line.is-dragging {
 opacity:.46;
 transform:scale(.995);
}
.expense-group-section.is-drop-target {
 border-color:var(--expense-color, #7A786A);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 16%, transparent), 0 10px 26px rgba(23, 23, 23,.08);
}
.expense-group-section-head {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 padding:10px 12px;
 background:color-mix(in srgb, var(--expense-color, #7A786A) 8%, var(--bg-surface));
 border-bottom:1px solid var(--border-light);
}
.expense-group-title-row {
 min-width:0;
 display:flex;
 align-items:center;
 gap:9px;
 flex:1;
}
.expense-drag-handle {
 width:18px;
 height:26px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 auto;
 color:color-mix(in srgb, var(--expense-color, #7A786A) 70%, var(--text-muted));
 font-size:14px;
 font-weight:900;
 line-height:1;
 letter-spacing:-4px;
 cursor:grab;
 user-select:none;
 opacity:.72;
}
.expense-drag-handle:active {
 cursor:grabbing;
 opacity:1;
}
.expense-type-handle {
 width:18px;
 height:24px;
 font-size:13px;
}
.expense-group-color {
 width:28px;
 height:28px;
 border:0;
 border-radius:8px;
 padding:0;
 overflow:hidden;
 background:transparent;
 cursor:pointer;
 flex:0 0 auto;
}
.expense-group-title-input {
 min-width:0;
 flex:1;
 border:0;
 background:transparent;
 color:var(--text-primary);
 font-size:14px;
 font-weight:900;
 outline:none;
 padding:5px 4px;
 border-radius:7px;
}
.expense-group-title-input:focus {
 background:var(--bg-surface-2);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 12%, transparent);
}
.expense-group-title-row span {
 flex:0 0 auto;
 padding:4px 8px;
 border-radius:999px;
 background:color-mix(in srgb, var(--expense-color, #7A786A) 7%, var(--bg-surface));
 color:var(--text-muted);
 font-size:11px;
 font-weight:800;
}
.expense-group-type-list {
 display:flex;
 flex-direction:column;
 gap:6px;
 padding:9px;
}
.expense-add-row {
 display:flex;
 gap:8px;
}
.expense-add-row .form-input {
 flex:1;
 font-size:13px;
}
.expense-type-line {
 min-width:0;
 display:grid;
 grid-template-columns:20px 12px minmax(0, 1fr) minmax(126px, .48fr) 26px;
 align-items:center;
 gap:7px;
 min-height:38px;
 padding:5px 6px;
 border:1px solid var(--border-light);
 border-radius:10px;
 background:color-mix(in srgb, var(--expense-color, #7A786A) 4%, var(--bg-surface));
 transition:border-color .12s, box-shadow .12s, opacity .12s, transform .12s;
}
.expense-type-line.is-drop-target,
.expense-group-type-list.is-drop-target {
 border-color:color-mix(in srgb, var(--expense-color, #7A786A) 44%, var(--border));
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 11%, transparent);
}
.expense-type-dot {
 width:8px;
 height:8px;
 border-radius:999px;
 background:var(--expense-color, #7A786A);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 12%, transparent);
}
.expense-type-name {
 min-width:0;
 width:100%;
 border:0;
 background:transparent;
 color:var(--text-primary);
 font:inherit;
 font-size:13px;
 font-weight:700;
 outline:none;
 padding:6px 5px;
 border-radius:7px;
}
.expense-type-name:focus {
 background:var(--bg-surface-2);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 12%, transparent);
}
.expense-type-group {
 width:100%;
 min-width:0;
 height:30px;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--bg-surface);
 color:var(--text-secondary);
 font-size:11px;
 font-weight:700;
 padding:0 8px;
 outline:none;
}
.expense-type-group:focus {
 border-color:var(--expense-color, #7A786A);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 10%, transparent);
}
.expense-type-remove {
 width:26px;
 height:26px;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--bg-surface);
 color:var(--text-muted);
 cursor:pointer;
 font-size:16px;
 line-height:1;
 display:flex;
 align-items:center;
 justify-content:center;
}
.expense-group-empty {
 min-height:38px;
 display:flex;
 align-items:center;
 justify-content:center;
 border:1px dashed var(--border);
 border-radius:10px;
 color:var(--text-muted);
 font-size:12px;
 font-weight:700;
 background:var(--bg-surface-2);
}
.expense-type-new-group {
 max-width:240px;
 font-size:13px !important;
}
.expense-type-remove:hover {
 border-color:#ef4444;
 color:#dc2626;
 background:#fee2e2;
}
@media (max-width: 860px) {
 .expense-group-board { grid-template-columns:1fr !important; }
}
@media (max-width: 760px) {
 .expense-type-line { grid-template-columns:20px 12px minmax(0, 1fr) 26px; }
 .expense-type-group { grid-column:3 / 5; }
 .expense-add-row { flex-wrap:wrap; }
 .expense-type-new-group { max-width:none; flex:1 1 220px; }
}
@media (max-width: 480px) {
 .expense-group-title-row { flex-wrap:wrap; }
}

body.dark .expense-group-settings {
 border-bottom-color:var(--border);
}
body.dark .expense-group-section {
 background:#1f1f1f;
 border-color:color-mix(in srgb, var(--expense-color, #7A786A) 26%, var(--border));
 box-shadow:none;
}
body.dark .expense-group-section-head {
 background:#252525;
 border-bottom-color:var(--border);
}
body.dark .expense-group-title-input,
body.dark .expense-type-name {
 color:var(--text-primary);
}
body.dark .expense-group-title-input:focus,
body.dark .expense-type-name:focus {
 background:#303030;
}
body.dark .expense-group-title-row span {
 background:#303030;
 color:var(--text-secondary);
}
body.dark .expense-group-type-list {
 background:#1b1b1b;
}
body.dark .expense-type-line {
 background:#252525;
 border-color:#373737;
}
body.dark .expense-type-line:hover {
 background:#2b2b2b;
 border-color:#434343;
}
body.dark .expense-type-group,
body.dark .expense-type-remove {
 background:#1f1f1f;
 border-color:#434343;
 color:var(--text-secondary);
}
body.dark .expense-type-group:focus {
 color:var(--text-primary);
}
body.dark .expense-drag-handle {
 color:var(--text-muted);
}
body.dark .expense-group-empty {
 background:#252525;
 border-color:#434343;
 color:var(--text-muted);
}
body.dark .expense-group-section.is-drop-target,
body.dark .expense-type-line.is-drop-target,
body.dark .expense-group-type-list.is-drop-target {
 border-color:color-mix(in srgb, var(--expense-color, #7A786A) 52%, #434343);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 18%, transparent);
}

/* ===== Settings directories: sources and expense taxonomy ===== */
.settings-directory-section {
 width:100%;
}
.settings-directory-card {
 padding:0;
 border:1px solid var(--border-light);
 border-radius:13px;
 background:var(--bg-surface);
 box-shadow:var(--shadow-sm);
 overflow:hidden;
}
.settings-directory-toolbar {
 min-height:72px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:20px;
 padding:16px 18px;
 border-bottom:1px solid var(--border-light);
}
.settings-directory-toolbar-title {
 display:flex;
 align-items:center;
 gap:8px;
 color:var(--text-primary);
 font-size:13px;
 font-weight:800;
}
.settings-directory-toolbar-note {
 margin-top:4px;
 color:var(--text-muted);
 font-size:11px;
 line-height:1.45;
}
.settings-directory-count {
 display:inline-flex;
 min-width:24px;
 height:24px;
 align-items:center;
 justify-content:center;
 padding:0 8px;
 border-radius:999px;
 background:var(--bg-surface-2);
 color:var(--text-secondary);
 font-size:11px;
 font-weight:800;
 white-space:nowrap;
}
.settings-directory-table,
.expense-taxonomy-table {
 width:100%;
}
.settings-directory-table-head,
.settings-directory-table-row,
.expense-taxonomy-head,
.expense-category-row,
.expense-subcategory-row {
 display:grid;
 align-items:center;
 min-width:0;
}
.settings-directory-table-head,
.settings-directory-table-row {
 grid-template-columns:112px minmax(240px, 1fr) minmax(150px, 190px) 52px;
}
.expense-taxonomy-head,
.expense-category-row,
.expense-subcategory-row {
 grid-template-columns:minmax(320px, 1.35fr) minmax(220px, .8fr) 150px 52px;
}
.settings-directory-table-head,
.expense-taxonomy-head {
 min-height:36px;
 padding:0 14px;
 border-bottom:1px solid var(--border-light);
 background:var(--bg-surface-2);
 color:var(--text-muted);
 font-size:10px;
 font-weight:800;
 letter-spacing:.055em;
 text-transform:uppercase;
}
.settings-directory-table-row,
.expense-category-row,
.expense-subcategory-row {
 position:relative;
 min-height:48px;
 padding:5px 14px;
 border-bottom:1px solid var(--border-light);
 transition:background .12s, opacity .12s, box-shadow .12s;
}
.settings-directory-table-row:last-child,
.expense-category-section:last-child > :last-child {
 border-bottom:0;
}
.settings-directory-table-row:hover,
.expense-subcategory-row:hover {
 background:color-mix(in srgb, var(--bg-surface-2) 64%, transparent);
}
.settings-directory-table-row > [role="cell"],
.expense-category-row > [role="cell"],
.expense-subcategory-row > [role="cell"] {
 min-width:0;
 padding-right:14px;
}
.settings-directory-table-row > .settings-directory-actions,
.expense-category-row > .settings-directory-actions,
.expense-subcategory-row > .settings-directory-actions {
 display:flex;
 justify-content:flex-end;
 padding-right:0;
}
.settings-directory-remove {
 width:28px;
 height:28px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 border:1px solid var(--border);
 border-radius:8px;
 background:var(--bg-surface);
 color:var(--text-muted);
 font-size:15px;
 line-height:1;
 cursor:pointer;
 transition:color .12s, border-color .12s, background .12s;
}
.settings-directory-remove:hover {
 border-color:#f0a3a3;
 background:#fff1f1;
 color:#c93636;
}
.settings-directory-add-row {
 display:flex;
 align-items:center;
 gap:8px;
 padding:14px 18px;
 border-top:1px solid var(--border-light);
 background:color-mix(in srgb, var(--bg-surface-2) 58%, var(--bg-surface));
}
.settings-directory-add-row .form-input {
 min-width:0;
 height:38px;
 font-size:12px;
}
.source-add-row .form-input {
 flex:1;
}
.settings-directory-card .settings-directory-reset {
 color:var(--text-muted);
 white-space:nowrap;
}
.source-order-cell,
.expense-name-cell {
 display:flex;
 align-items:center;
 gap:9px;
}
.source-drag-handle,
.expense-sort-handle {
 width:20px;
 height:28px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 flex:0 0 auto;
 color:var(--text-muted);
 font-size:13px;
 font-weight:900;
 letter-spacing:-4px;
 line-height:1;
 cursor:grab;
 user-select:none;
 opacity:.65;
}
.source-drag-handle:active,
.expense-sort-handle:active {
 cursor:grabbing;
 opacity:1;
}
.source-order-number {
 width:28px;
 color:var(--text-muted);
 font-size:11px;
 font-variant-numeric:tabular-nums;
}
.src-name-inp,
.expense-category-name,
.expense-subcategory-name {
 width:100%;
 min-width:0;
 height:34px;
 border:1px solid transparent;
 border-radius:8px;
 outline:none;
 background:transparent;
 color:var(--text-primary);
 font-size:13px;
 font-weight:650;
 padding:0 9px;
}
.src-name-inp:hover,
.expense-category-name:hover,
.expense-subcategory-name:hover {
 background:var(--bg-surface-2);
}
.src-name-inp:focus,
.expense-category-name:focus,
.expense-subcategory-name:focus {
 border-color:var(--border);
 background:var(--bg-surface);
 box-shadow:0 0 0 3px rgba(96, 96, 96,.08);
}
.source-usage-label,
.expense-kind-label,
.expense-category-self {
 display:inline-flex;
 align-items:center;
 min-height:24px;
 padding:0 8px;
 border-radius:7px;
 background:var(--bg-surface-2);
 color:var(--text-muted);
 font-size:10px;
 font-weight:700;
 white-space:nowrap;
}
.settings-directory-table-row.is-dragging,
.expense-category-row.is-dragging,
.expense-subcategory-row.is-dragging {
 opacity:.42;
}
.settings-directory-table-row.drop-before::before,
.settings-directory-table-row.drop-after::after {
 content:"";
 position:absolute;
 left:14px;
 right:14px;
 height:2px;
 border-radius:999px;
 background:var(--accent);
 z-index:2;
}
.settings-directory-table-row.drop-before::before { top:-1px; }
.settings-directory-table-row.drop-after::after { bottom:-1px; }
.settings-directory-empty,
.expense-category-empty {
 display:flex;
 align-items:center;
 justify-content:center;
 min-height:64px;
 padding:12px 18px;
 border-bottom:1px solid var(--border-light);
 color:var(--text-muted);
 font-size:12px;
 text-align:center;
}
.expense-category-add {
 display:flex;
 align-items:center;
 gap:8px;
 flex:0 0 auto;
}
.expense-category-add .form-input {
 width:220px;
 height:36px;
 font-size:12px;
}
.expense-category-section {
 display:block;
}
.expense-category-row {
 min-height:54px;
 background:color-mix(in srgb, var(--expense-color, #7A786A) 8%, var(--bg-surface));
 border-bottom-color:color-mix(in srgb, var(--expense-color, #7A786A) 18%, var(--border-light));
}
.expense-category-row.is-drop-target,
.expense-subcategory-row.is-drop-target,
.expense-category-empty.is-drop-target {
 z-index:1;
 box-shadow:inset 3px 0 0 var(--expense-color, #7A786A), inset 0 0 0 1px color-mix(in srgb, var(--expense-color, #7A786A) 42%, transparent);
}
.expense-category-color {
 width:24px;
 height:24px;
 flex:0 0 auto;
 padding:0;
 border:1px solid color-mix(in srgb, var(--expense-color, #7A786A) 48%, var(--border));
 border-radius:6px;
 overflow:hidden;
 background:var(--expense-color, #7A786A);
 cursor:pointer;
}
.expense-category-name {
 font-weight:800;
}
.expense-category-self {
 background:color-mix(in srgb, var(--expense-color, #7A786A) 12%, var(--bg-surface));
 color:color-mix(in srgb, var(--expense-color, #7A786A) 72%, var(--text-primary));
}
.expense-subcategory-name-cell {
 padding-left:30px;
}
.expense-tree-mark {
 width:16px;
 height:18px;
 flex:0 0 auto;
 border-left:1px solid color-mix(in srgb, var(--expense-color, #7A786A) 36%, var(--border));
 border-bottom:1px solid color-mix(in srgb, var(--expense-color, #7A786A) 36%, var(--border));
 border-bottom-left-radius:6px;
 transform:translateY(-5px);
}
.expense-color-dot {
 width:8px;
 height:8px;
 flex:0 0 auto;
 border-radius:50%;
 background:var(--expense-color, #7A786A);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 13%, transparent);
}
.expense-category-select {
 width:100%;
 min-width:0;
 height:32px;
 padding:0 30px 0 9px;
 border:1px solid var(--border);
 border-radius:8px;
 outline:none;
 background:var(--bg-surface);
 color:var(--text-secondary);
 font-size:11px;
 font-weight:650;
}
.expense-category-select:focus {
 border-color:var(--expense-color, #7A786A);
 box-shadow:0 0 0 3px color-mix(in srgb, var(--expense-color, #7A786A) 10%, transparent);
}
.expense-category-empty {
 justify-content:flex-start;
 min-height:46px;
 padding-left:72px;
 background:color-mix(in srgb, var(--bg-surface-2) 45%, transparent);
 font-size:11px;
}
.expense-category-empty > [role="cell"] {
 grid-column:1 / -1;
}
.expense-subcategory-add > input {
 flex:1 1 300px;
}
.expense-subcategory-add .expense-type-new-group {
 width:min(260px, 30%);
 max-width:none;
 flex:0 1 260px;
}
body.dark .settings-directory-toolbar,
body.dark .settings-directory-table-head,
body.dark .expense-taxonomy-head,
body.dark .settings-directory-add-row {
 border-color:var(--border);
}
body.dark .expense-category-row {
 background:color-mix(in srgb, var(--expense-color, #7A786A) 15%, #1f1f1f);
}
body.dark .src-name-inp:focus,
body.dark .expense-category-name:focus,
body.dark .expense-subcategory-name:focus,
body.dark .expense-category-select,
body.dark .settings-directory-remove {
 background:#1f1f1f;
 border-color:#434343;
 color:var(--text-primary);
}
body.dark .settings-directory-remove:hover {
 background:#402326;
 border-color:#7f3c43;
 color:#fca5a5;
}
@media (min-width: 1201px) {
 #page-settings > .content.settings-shell > .settings-content > .settings-directory-section {
  max-width:1360px;
 }
}
@media (min-width: 681px) and (max-width: 1200px) {
 .settings-directory-table-head,
 .settings-directory-table-row {
  grid-template-columns:84px minmax(180px, 1fr) 120px 40px;
  padding-inline:10px;
 }
 .expense-taxonomy-head,
 .expense-category-row,
 .expense-subcategory-row {
  grid-template-columns:minmax(230px, 1.35fr) minmax(150px, .9fr) minmax(90px, 110px) 40px;
  padding-inline:10px;
 }
 .settings-directory-table-row > [role="cell"],
 .expense-category-row > [role="cell"],
 .expense-subcategory-row > [role="cell"] {
  padding-right:9px;
 }
 .expense-taxonomy-wrap {
  overflow-x:visible;
 }
 .expense-taxonomy-table {
  min-width:0;
 }
 .expense-subcategory-name-cell {
  padding-left:18px;
 }
 .expense-kind-label,
 .expense-category-self,
 .source-usage-label {
  padding-inline:6px;
 }
}
@media (max-width: 900px) {
 .settings-directory-toolbar { align-items:flex-start; }
 .expense-category-toolbar { flex-direction:column; }
 .expense-category-add { width:100%; }
 .expense-category-add .form-input { flex:1; width:auto; }
 .expense-taxonomy-wrap { overflow-x:auto; }
 .expense-taxonomy-table { min-width:760px; }
}
@media (max-width: 680px) {
 .settings-directory-toolbar { padding:14px; }
 .settings-directory-table-head,
 .settings-directory-table-row { grid-template-columns:78px minmax(180px, 1fr) 44px; }
 .settings-directory-table-head > :nth-child(3),
 .settings-directory-table-row > :nth-child(3) { display:none; }
 .settings-directory-add-row { padding:12px 14px; flex-wrap:wrap; }
 .source-add-row .form-input { flex-basis:100%; }
 .source-add-row .btn { flex:1; }
 .expense-category-add { align-items:stretch; flex-direction:column; }
 .expense-subcategory-add > input,
 .expense-subcategory-add .expense-type-new-group { width:100%; flex:1 1 100%; }
 .expense-subcategory-add .btn-primary { flex:1; }
}

/* ===== Clean debt calendar popup ===== */
.debt-calendar-modal {
 width:560px !important;
 border-radius:18px !important;
 overflow:hidden !important;
 background:var(--bg-surface) !important;
 border:1px solid rgba(161, 161, 161,.26) !important;
 box-shadow:0 28px 80px rgba(23, 23, 23,.24) !important;
}
.debt-calendar-modal-head {
 position:relative !important;
 padding:22px 26px 18px !important;
 background:var(--bg-surface) !important;
 color:var(--text-primary) !important;
 border-bottom:1px solid var(--border-light) !important;
}
.debt-calendar-modal-head::before {
 content:"" !important;
 position:absolute !important;
 left:0 !important;
 right:0 !important;
 top:0 !important;
 height:4px !important;
 background:linear-gradient(90deg, #282828 0%, #84a122 100%) !important;
}
.debt-calendar-modal-kicker {
 color:var(--text-muted) !important;
 font-size:10px !important;
 font-weight:800 !important;
 letter-spacing:.14em !important;
 text-transform:uppercase !important;
}
.debt-calendar-modal-title {
 margin-top:5px !important;
 color:var(--text-primary) !important;
 font-size:20px !important;
 font-weight:850 !important;
 line-height:1.15 !important;
 letter-spacing:0 !important;
}
.debt-calendar-modal-sub {
 max-width:430px !important;
 margin-top:8px !important;
 color:var(--text-secondary) !important;
 font-size:12px !important;
 line-height:1.45 !important;
}
.debt-calendar-modal .debt-card-close {
 width:34px !important;
 height:34px !important;
 flex:0 0 auto !important;
 border:1px solid var(--border) !important;
 border-radius:10px !important;
 background:var(--bg-surface-2) !important;
 color:var(--text-secondary) !important;
 box-shadow:none !important;
}
.debt-calendar-modal .debt-card-close:hover {
 background:var(--bg-surface-3) !important;
 color:var(--text-primary) !important;
}
.debt-calendar-modal-body {
 padding:22px 26px 24px !important;
 gap:16px !important;
 background:linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-surface-2) 100%) !important;
}
.debt-calendar-modal .debt-card-grid {
 gap:14px !important;
}
.debt-calendar-modal .debt-card-field {
 margin:0 !important;
}
.debt-calendar-modal .debt-card-field label {
 margin-bottom:7px !important;
 color:var(--text-secondary) !important;
 font-size:10px !important;
 font-weight:800 !important;
 letter-spacing:.08em !important;
 text-transform:uppercase !important;
}
.debt-calendar-modal .debt-card-field label em {
 align-self:center !important;
 color:var(--text-muted) !important;
 font-size:9px !important;
 font-weight:700 !important;
 letter-spacing:0 !important;
 text-transform:none !important;
}
.debt-calendar-modal .debt-card-field .input {
 height:44px !important;
 border:1px solid #dfdfdf !important;
 border-radius:11px !important;
 background:rgba(255,255,255,.84) !important;
 color:var(--text-primary) !important;
 font-size:14px !important;
 box-shadow:0 1px 2px rgba(23, 23, 23,.04) !important;
}
.debt-calendar-modal .debt-card-field .input:hover {
 border-color:#d1d1d1 !important;
}
.debt-calendar-modal .debt-card-field .input:focus {
 border-color:#84a122 !important;
 box-shadow:0 0 0 4px rgba(132,161,34,.14) !important;
 outline:none !important;
}
.debt-calendar-modal .debt-card-input-unit b {
 right:14px !important;
 color:var(--text-muted) !important;
 font-size:11px !important;
}
.debt-calendar-modal-actions {
 padding:16px 26px !important;
 background:var(--bg-surface) !important;
 border-top:1px solid var(--border-light) !important;
}
.debt-calendar-modal-actions .btn {
 height:40px !important;
 padding:0 18px !important;
 border-radius:11px !important;
 font-weight:800 !important;
}



@media (max-width: 620px) {
 .debt-calendar-modal {
  width:calc(100vw - 28px) !important;
 }
 .debt-calendar-modal-head,
 .debt-calendar-modal-body,
 .debt-calendar-modal-actions {
  padding-left:18px !important;
  padding-right:18px !important;
 }
 .debt-calendar-modal .debt-card-grid {
  grid-template-columns:1fr !important;
 }
 .debt-calendar-modal-actions {
  align-items:stretch !important;
 }
 .debt-calendar-modal-actions > div {
  flex:1 1 auto !important;
 }
 .debt-calendar-modal-actions .btn {
  flex:1 1 0 !important;
 }
}

/* ===== Debt payment calendar ===== */
.debt-calendar-head {
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:16px;
 margin-bottom:14px;
}
.debt-calendar-sub {
 margin-top:4px;
 max-width:720px;
 color:var(--text-muted);
 font-size:12px;
 line-height:1.45;
}
.debt-calendar-actions {
 display:flex;
 align-items:center;
 justify-content:flex-end;
 gap:8px;
 flex-wrap:wrap;
}
.debt-calendar-title {
 min-width:168px;
 padding:7px 10px;
 border:1px solid var(--border);
 border-radius:10px;
 background:var(--bg-surface);
 text-align:center;
 font-size:12px;
 color:var(--text-secondary);
 box-shadow:0 1px 2px rgba(23, 23, 23,.04);
}
.debt-calendar-title strong {
 display:block;
 color:var(--text-primary);
 font-size:14px;
 line-height:1.15;
}
.debt-calendar-title span {
 display:block;
 margin-top:2px;
 font-size:11px;
 font-weight:700;
 color:#84a122;
}
.debt-calendar-grid {
 display:grid;
 grid-template-columns:repeat(7, minmax(0, 1fr));
 overflow:hidden;
 border:1px solid var(--border);
 border-radius:14px;
 background:var(--bg-surface);
 box-shadow:0 8px 28px rgba(23, 23, 23,.04);
}
.debt-calendar-dow {
 padding:9px 8px;
 background:var(--bg-surface-2);
 border-right:1px solid var(--border-light);
 color:var(--text-muted);
 font-size:10px;
 font-weight:800;
 text-align:center;
 text-transform:uppercase;
 letter-spacing:.04em;
}
.debt-calendar-dow:nth-child(7) {
 border-right:0;
}
.debt-calendar-day {
 min-height:118px;
 padding:8px;
 border:0;
 border-top:1px solid var(--border-light);
 border-right:1px solid var(--border-light);
 background:var(--bg-surface);
 color:var(--text-primary);
 cursor:pointer;
 text-align:left;
 font-family:inherit;
 display:flex;
 flex-direction:column;
 gap:6px;
 transition:background .12s ease, box-shadow .12s ease;
}
.debt-calendar-day:nth-child(7n) {
 border-right:0;
}
.debt-calendar-day:hover {
 background:rgba(132,161,34,.045);
 box-shadow:inset 0 0 0 1px rgba(132,161,34,.18);
}
.debt-calendar-day.is-muted {
 background:var(--bg-surface-2);
 color:var(--text-muted);
}
.debt-calendar-day.is-muted .debt-calendar-event {
 opacity:.72;
}
.debt-calendar-num {
 width:24px;
 height:24px;
 border-radius:8px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 font-size:12px;
 font-weight:800;
 color:var(--text-secondary);
}
.debt-calendar-day.is-today .debt-calendar-num {
 background:var(--accent);
 color:#fff;
}
.debt-calendar-day-total {
 min-height:13px;
 color:#84a122;
 font-size:10px;
 font-weight:800;
}
.debt-calendar-events {
 display:flex;
 flex-direction:column;
 gap:4px;
 min-width:0;
}
.debt-calendar-event {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:8px;
 min-height:24px;
 padding:4px 7px;
 border-radius:7px;
 background:color-mix(in srgb, var(--event-color, #d7df55) 72%, white);
 border-left:4px solid var(--event-color, #d7df55);
 color:#1f1f1f;
 box-shadow:inset 0 -1px 0 rgba(31,42,16,.10);
 font-size:11px;
 line-height:1.15;
}
.debt-calendar-event b {
 min-width:0;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-weight:800;
}
.debt-calendar-event em {
 flex:0 0 auto;
 font-style:normal;
 font-weight:800;
}
.debt-calendar-more {
 color:var(--text-secondary);
 font-size:10px;
 font-weight:800;
 padding:2px 6px;
 border-radius:7px;
 background:rgba(114, 114, 114,.10);
 border:1px solid rgba(114, 114, 114,.18);
 width:max-content;
 cursor:pointer;
 transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.debt-calendar-more:hover {
 color:var(--text-primary);
 background:rgba(114, 114, 114,.16);
 border-color:rgba(114, 114, 114,.28);
}
.debt-day-modal {
 width:520px;
 max-width:96vw;
 background:var(--bg-surface);
 border:1px solid var(--border-light);
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 24px 80px rgba(23, 23, 23,.26);
}
.debt-day-modal-head {
 display:flex;
 align-items:flex-start;
 justify-content:space-between;
 gap:18px;
 padding:20px 22px;
 border-bottom:1px solid var(--border-light);
}
.debt-day-modal-body {
 display:flex;
 flex-direction:column;
 gap:8px;
 max-height:min(520px, 62vh);
 overflow:auto;
 padding:16px 18px;
 background:var(--bg-main);
}
.debt-day-payment-row {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:14px;
 width:100%;
 min-height:48px;
 padding:10px 12px;
 border:1px solid color-mix(in srgb, var(--event-color, #727272) 38%, transparent);
 border-left:4px solid var(--event-color, #727272);
 border-radius:10px;
 background:var(--event-bg, var(--bg-surface));
 color:var(--event-text, var(--text-primary));
 text-align:left;
 cursor:pointer;
}
.debt-day-payment-row:hover {
 filter:brightness(.98);
 box-shadow:0 6px 18px rgba(23, 23, 23,.08);
}
.debt-day-payment-main {
 min-width:0;
 display:flex;
 flex-direction:column;
 gap:3px;
}
.debt-day-payment-main b {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-size:13px;
 line-height:1.2;
}
.debt-day-payment-main em {
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 font-style:normal;
 color:var(--text-muted);
 font-size:11px;
}
.debt-day-payment-row strong {
 flex:0 0 auto;
 font-size:13px;
}
.debt-day-empty {
 padding:18px;
 border:1px dashed var(--border-light);
 border-radius:12px;
 color:var(--text-muted);
 font-size:13px;
 text-align:center;
}
.debt-day-modal-actions {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:10px;
 padding:14px 18px;
 border-top:1px solid var(--border-light);
 background:var(--bg-surface);
}
body.dark .debt-calendar-more {
 background:rgba(161, 161, 161,.10);
 border-color:rgba(161, 161, 161,.18);
 color:#b8b8b8;
}
body.dark .debt-calendar-more:hover {
 background:rgba(161, 161, 161,.16);
 color:#f6f6f6;
}
body.dark .debt-day-modal {
 background:#1a1a1a;
 border-color:#3f3f3f;
}
body.dark .debt-day-modal-head,
body.dark .debt-day-modal-actions {
 background:#1a1a1a;
 border-color:#3f3f3f;
}
body.dark .debt-day-modal-body {
 background:#161616;
}
body.dark .debt-day-payment-row {
 background:color-mix(in srgb, var(--event-color, #727272) 20%, #1f1f1f);
 color:#f7f7f7;
}
body.dark .debt-day-payment-main em {
 color:#b8b8b8;
}

.debt-calendar-event.is-paid{
 background:var(--event-bg, var(--bg-surface)) !important;
 border-color:color-mix(in srgb, var(--event-color, #727272) 42%, #e2e2e2 58%) !important;
 border-left-color:var(--event-color, #727272) !important;
 color:var(--event-text, var(--text-primary)) !important;
 box-shadow:none !important;
}



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

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

.debt-calendar-pay-state.is-unpaid{
 background:#dc2626;
}

.debt-calendar-event{
 justify-content:flex-start;
}

.debt-calendar-event em{
 margin-left:auto;
}

.debt-day-payment-row .debt-calendar-pay-state{
 width:10px;
 height:10px;
 flex-basis:10px;
}

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



body.dark .debt-calendar-pay-state{
 box-shadow:0 0 0 2px rgba(23, 23, 23,.72);
}
.debt-calendar-modal {
 width:520px;
 max-width:96vw;
 background:var(--bg-surface);
 border-radius:18px;
 overflow:hidden;
 box-shadow:0 24px 80px rgba(23, 23, 23,.24);
}
.debt-calendar-modal-head {
 display:flex;
 justify-content:space-between;
 gap:18px;
 padding:22px 24px;
 background:linear-gradient(135deg, #313131 0%, #202020 100%);
 color:white;
}
.debt-calendar-modal-kicker {
 color:rgba(255,255,255,.66);
 font-size:10px;
 font-weight:800;
 letter-spacing:.12em;
 text-transform:uppercase;
}
.debt-calendar-modal-title {
 margin-top:4px;
 font-size:18px;
 font-weight:800;
}
.debt-calendar-modal-sub {
 margin-top:6px;
 max-width:360px;
 color:rgba(255,255,255,.7);
 font-size:12px;
 line-height:1.35;
}
.debt-calendar-modal-body {
 padding:20px 24px;
 display:grid;
 gap:14px;
}
.debt-calendar-modal-actions {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:12px;
 padding:16px 24px;
 border-top:1px solid var(--border-light);
 background:var(--bg-surface-2);
}

@media (max-width: 760px) {
 .debt-calendar-head {
  flex-direction:column;
  gap:12px;
 }
 .debt-calendar-actions {
  width:100%;
  justify-content:flex-start;
 }
 .debt-calendar-title {
  min-width:138px;
 }
 .debt-calendar-grid {
  overflow-x:auto;
  grid-template-columns:repeat(7, minmax(92px, 1fr));
 }
 .debt-calendar-day {
  min-height:92px;
  padding:6px;
 }
 .debt-calendar-event {
  font-size:10px;
  padding:4px 6px;
 }
 .debt-calendar-event em {
  display:none;
 }
}

/* ===== Final orders table sticky header override ===== */

#orders-table thead th {
 position:sticky !important;
 top:0 !important;
 z-index:40 !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:50;
}

/* ===== Orders table sticky header ===== */

#orders-table thead th {
 position:sticky !important;
 top:0 !important;
 z-index:20 !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:30;
}

@media (max-width: 768px) {
 #page-calendar .cal-mobile-export-btn {
  display:flex !important;
 }

}

/* ===== Mobile schedule export ===== */
.cal-mobile-export-btn {
 display:none !important;
}

@media (max-width: 768px) {
 #page-calendar .cal-mobile-export-btn {
  display:flex !important;
  position:fixed;
  right:14px;
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  z-index:145;
  height:42px;
  min-width:74px;
  padding:0 14px !important;
  border-radius:999px;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid var(--accent);
  background:linear-gradient(135deg,var(--accent-strong) 0%,var(--accent) 100%);
  color:var(--accent-contrast,#fff);
  font-size:12px;
  font-weight:800;
  box-shadow:0 12px 28px rgba(23, 23, 23,.22);
 }
 #page-calendar .cal-mobile-export-btn svg {
  flex-shrink:0;
 }

 #modal-export-slots .calendar-modal {
  width:calc(100vw - 24px) !important;
  max-width:calc(100vw - 24px) !important;
  max-height:calc(100vh - 24px) !important;
  margin:12px !important;
  display:flex;
  flex-direction:column;
 }
 #modal-export-slots .modal-body {
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:16px !important;
 }
 #modal-export-slots .modal-body > div:first-child,
 #modal-export-slots #exp-custom-wrap {
  flex-direction:column !important;
  gap:12px !important;
 }
 #modal-export-slots .modal-footer {
  display:flex;
  gap:8px;
  padding:12px 16px !important;
 }
 #modal-export-slots .modal-footer .btn {
  flex:1 1 0;
  min-width:0;
  justify-content:center;
 }
 #modal-export-slots .exp-period-btn,
 #modal-export-slots .exp-who-btn {
  height:36px !important;
  font-size:12px !important;
 }
}

/* ===== Orders table width repair =====
   Inline width:1% on legacy headers conflicts with max-content table sizing
   and can inflate every column to viewport-wide sizes. Keep this scoped. */
#orders-table {
 width:100% !important;
 min-width:1560px !important;
 table-layout:auto !important;
}
#orders-table th[data-col-id],
#orders-table td[data-col-id] {
 width:auto !important;
 box-sizing:border-box !important;
}
#orders-table th[data-col-id="_seq"],
#orders-table td[data-col-id="_seq"] { width:48px !important; min-width:48px !important; max-width:48px !important; }
#orders-table th[data-col-id="date"],
#orders-table td[data-col-id="date"] { width:92px !important; min-width:92px !important; }
#orders-table th[data-col-id="source"],
#orders-table td[data-col-id="source"] { width:130px !important; min-width:130px !important; }
#orders-table th[data-col-id="type"],
#orders-table td[data-col-id="type"] { width:130px !important; min-width:130px !important; }
#orders-table th[data-col-id="address"],
#orders-table td[data-col-id="address"] { width:170px !important; min-width:170px !important; }
#orders-table th[data-col-id="client"],
#orders-table td[data-col-id="client"] { width:180px !important; min-width:180px !important; }
#orders-table th[data-col-id="status"],
#orders-table td[data-col-id="status"] { width:135px !important; min-width:135px !important; }
#orders-table th[data-col-id="amount"],
#orders-table td[data-col-id="amount"] { width:130px !important; min-width:130px !important; }
#orders-table th[data-col-id="advance"],
#orders-table td[data-col-id="advance"] { width:108px !important; min-width:108px !important; }
#orders-table th[data-col-id^="exp_"],
#orders-table td[data-col-id^="exp_"] { width:110px !important; min-width:110px !important; }
#orders-table th[data-col-id="paid"],
#orders-table td[data-col-id="paid"] { width:92px !important; min-width:92px !important; }
#orders-table th[data-col-id="profit"],
#orders-table td[data-col-id="profit"],
#orders-table th[data-col-id="debt"],
#orders-table td[data-col-id="debt"] { width:118px !important; min-width:118px !important; }

#orders-table .order-money-edit {
 display:inline-flex;
 min-height:22px;
 align-items:center;
 justify-content:flex-end;
 max-width:100%;
 padding:2px 6px;
 border-radius:6px;
 cursor:pointer;
 line-height:1.15;
 transition:background .12s ease, box-shadow .12s ease, color .12s ease;
}
#orders-table .order-money-edit:hover,
#orders-table .order-money-edit:focus-visible {
 background:color-mix(in srgb, var(--accent) 10%, transparent);
 box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 28%, transparent);
 outline:none;
}
#orders-table .order-money-edit.is-empty {
 opacity:.62;
 min-width:28px;
 justify-content:center;
}
#orders-table .order-money-edit.is-empty:hover,
#orders-table .order-money-edit.is-empty:focus-visible {
 opacity:1;
}