/* الواجهة الجديدة («الأساسية») — مولَّد من ui/src بواسطة build.js، ولا يُعدَّل يدويًا.
   الواجهة «الحالية» لا تحمل html[data-ui] فلا يمسّها أي سطر هنا. */
@media screen{
html[data-ui]{--navy-900:#10294B; --navy-800:#17335A; --navy-700:#24457A; --navy-600:#2D5B9A;
  --link-text:#17335A;
  --gold-500:#C9A24E; --gold-600:#A8832F; --gold-soft-bg:#F6EBCB; --gold-soft-text:#7A5A12;
  --green-50:#DDF1E5; --green-500:#2E9D68; --green-700:#17794A; --green-soft-bg:#DDF1E5; --green-soft-text:#17794A;
  --yellow-50:#FBEFCF; --yellow-500:#D79A2B; --yellow-700:#855500; --yellow-soft-bg:#FBEFCF;
  --red-50:#FBE3DF; --red-500:#D9534A; --red-700:#B3261E; --red-soft-bg:#FBE3DF;
  --blue-50:#E1EBF8; --blue-700:#1F5FA8;
  --gray-50:#F4F6FA; --gray-100:#EAEEF4; --gray-200:#DDE3EC; --gray-300:#C9D2DF; --gray-500:#5B6A85; --gray-600:#4A5974; --gray-700:#33425C; --gray-800:#1F2E49; --gray-900:#14233D;
  --bg:#EEF1F6; --surface:#fff; --border:#DDE3EC; --text:#14233D; --text-muted:#5B6A85;
  --radius:14px; --radius-sm:10px; --shadow:none; --shadow-md:0 8px 22px rgba(20,35,61,.10);
  --sidebar-w:264px;
  
  --ui-accent:#17335A; --ui-accent-fg:#fff; --ui-soft:#E8EEF8; --ui-line2:#EAEEF4; --ui-input:#fff; --ui-field-line:#C9D2DF;
  --ui-side1:#10294B; --ui-side2:#0B1F3B; --ui-side-fg:#C9D5E8; --ui-side-sub:#9DB0CD; --ui-side-grp:#7F94B6; --ui-side-line:rgba(255,255,255,.10);
  --ui-side-hov:rgba(255,255,255,.07); --ui-side-act-bg:rgba(201,162,78,.17); --ui-side-act-fg:#EBCB85; --ui-side-act-ring:inset 0 0 0 1px rgba(201,162,78,.3);
  --ui-badge-bg:rgba(240,120,105,.22); --ui-badge-fg:#FFB3A8;
  --ui-head:'Noto Kufi Arabic','Noto Sans Arabic','Segoe UI',Tahoma,sans-serif;
  --ui-font:'EnglishDigits','Noto Sans Arabic','Segoe UI',Tahoma,'Arial',sans-serif;
  --ui-border-w:1px; --ui-ctl-h:40px; --ui-btn-h:38px; --ui-fs:15px;
  --ui-toast:#14233D;
  --chart-1:#17335A; --chart-2:#C9A24E; --chart-3:#5B8DB8; --chart-4:#9FB1C9; --chart-5:#D9534A; --chart-6:#8A97AE; --chart-7:#2E7D9A; --chart-8:#9C7B3F;
  color-scheme:light;}
html[data-ui][data-theme="dark"]{--navy-900:#E6ECF7; --navy-800:#D6B060; --navy-700:#C29A4A; --navy-600:#B08A3C;
    --link-text:#E3C27A;
    --gold-500:#D6B060; --gold-600:#E3C27A; --gold-soft-bg:rgba(212,175,99,.16); --gold-soft-text:#E3C27A;
    --green-50:rgba(95,203,147,.14); --green-500:#5FCB93; --green-700:#5FCB93; --green-soft-bg:rgba(95,203,147,.14); --green-soft-text:#5FCB93;
    --yellow-50:rgba(235,187,92,.15); --yellow-500:#EBBB5C; --yellow-700:#EBBB5C; --yellow-soft-bg:rgba(235,187,92,.15);
    --red-50:rgba(242,137,123,.15); --red-500:#F4958A; --red-700:#F4958A; --red-soft-bg:rgba(242,137,123,.15);
    --blue-50:rgba(125,184,232,.15); --blue-700:#7DB8E8;
    --gray-50:#18253F; --gray-100:#1E2C49; --gray-200:#26344F; --gray-300:#34466A; --gray-500:#9AA8C3; --gray-600:#A9B8D2; --gray-700:#C3CEE2; --gray-800:#DCE4F2; --gray-900:#E6ECF7;
    --bg:#0C1424; --surface:#142038; --border:#26344F; --text:#E6ECF7; --text-muted:#9AA8C3;
    --shadow:none; --shadow-md:0 8px 22px rgba(0,0,0,.4);
    --ui-accent:#D6B060; --ui-accent-fg:#101A2C; --ui-soft:#1E2C49; --ui-line2:#1E2B45; --ui-input:#0E1A30; --ui-field-line:#34466A;
    --ui-side1:#0B1A33; --ui-side2:#08142A; --ui-toast:#2A3A5A;
    --chart-1:#7DA3DC; --chart-2:#D6B060; --chart-3:#4C8BB5; --chart-4:#5F7191; --chart-5:#F4958A; --chart-6:#7D8AA3; --chart-7:#5BB0CC; --chart-8:#C9A569;
    color-scheme:dark;}
html[data-ui]{font-size:var(--ui-fs)}
html[data-ui] body{font-family:var(--ui-font);font-size:var(--ui-fs);color:var(--text);background:var(--bg)}
html[data-ui] .page-title,
html[data-ui] .page-header h2,
html[data-ui] .card-header h3,
html[data-ui] .section-title,
html[data-ui] .modal-header h3,
html[data-ui] .brand-title,
html[data-ui] .stat-card .stat-value,
html[data-ui] .building-card .bc-name,
html[data-ui] .tab-btn,
html[data-ui] .ip-tab{font-family:var(--ui-head)}
html[data-ui] button,
html[data-ui] input,
html[data-ui] select,
html[data-ui] textarea{font-family:inherit}
html[data-ui] a:focus-visible,
html[data-ui] button:focus-visible,
html[data-ui] [tabindex]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:2px}
html[data-ui] .sidebar{background:linear-gradient(180deg,var(--ui-side1) 0%,var(--ui-side2) 100%);color:#fff;width:var(--sidebar-w);padding:16px 12px 12px;border:0}
html[data-ui] .sidebar-brand{padding:0 0 4px;border-bottom:0;text-align:start}
html[data-ui] .brand-logo{width:100%;max-width:none;height:auto;max-height:112px;object-fit:contain;background:#fff;border-radius:14px;padding:6px 8px;box-shadow:none;margin:0 0 4px}
html[data-ui] .sidebar-brand .brand-title{font-family:var(--ui-head);font-size:14px;font-weight:600;line-height:1.5;color:#fff;text-align:start;padding:12px 8px 0}
html[data-ui] .sidebar-brand .brand-sub{font-size:12px;color:var(--ui-side-sub);text-align:start;margin:0;padding:0 8px 8px}
html[data-ui] .sidebar-nav{padding:6px 0;display:flex;flex-direction:column;gap:2px}
html[data-ui] .sidebar-nav a{flex:none;height:40px;padding:0 12px;gap:12px;border-radius:10px;color:var(--ui-side-fg);font-size:13.5px;margin:0;transition:background .12s}
html[data-ui] .sidebar-nav a:hover{background:var(--ui-side-hov);color:var(--ui-side-fg)}
html[data-ui] .sidebar-nav a.active{background:var(--ui-side-act-bg);color:var(--ui-side-act-fg);font-weight:600;box-shadow:var(--ui-side-act-ring)}
html[data-ui] .sidebar-nav a .icon{font-size:inherit;width:20px;display:inline-flex;align-items:center;justify-content:center;flex:none}
html[data-ui] .sidebar-nav a .icon .ui-ic{width:20px;height:20px}
html[data-ui] .nav-group-label{font-size:11.5px;font-weight:500;letter-spacing:0;color:var(--ui-side-grp);padding:0 12px;margin:12px 0 4px}
html[data-ui] .nav-group-label:first-child{margin-top:4px;padding-top:0}
html[data-ui] .sidebar-footer{padding:12px 8px 0;border-top:1px solid var(--ui-side-line);font-size:11px;color:var(--ui-side-sub);line-height:1.7}
html[data-ui] .sidebar-footer button{color:var(--ui-side-fg)!important;font-size:12.5px}
html[data-ui] .readonly-banner{background:var(--gold-500);color:#1c1608;border-radius:10px;margin:0 0 8px}
html[data-ui] .main-area{background:var(--bg)}
html[data-ui] .topbar{background:var(--surface);border-bottom:1px solid var(--border);padding:0 24px;min-height:68px;gap:14px}
html[data-ui] .topbar .page-title{font-size:18px;font-weight:600;line-height:1.4}
html[data-ui] .topbar .page-subtitle{font-size:12.5px;line-height:1.4;margin-top:0}
html[data-ui] .topbar-search{max-width:380px;margin-inline-start:auto}
html[data-ui] .topbar .search-box input{height:var(--ui-ctl-h);padding:0 13px 0 36px;border-radius:10px;border:1px solid var(--border);background:var(--bg);font-size:13px;color:var(--text)}
html[data-ui] .topbar .search-box input:hover{border-color:var(--gray-500)}
html[data-ui] .topbar .search-box .search-icon{color:var(--text-muted);left:12px;display:inline-flex}
html[data-ui] .topbar .btn-icon{width:var(--ui-ctl-h);height:var(--ui-ctl-h);padding:0;justify-content:center;border-radius:10px;border:1px solid var(--border);background:transparent;color:var(--text-muted);font-size:16px}
html[data-ui] .topbar .btn-icon:hover{color:var(--text);border-color:var(--gray-500);background:transparent;filter:none}
html[data-ui] .content{padding:18px 26px 48px}
html[data-ui] .section-title{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--text);margin:22px 2px 12px;padding:0;border:0;text-transform:none;letter-spacing:0}
html[data-ui] .section-title::before{content:"";width:4px;height:18px;border-radius:2px;background:var(--gold-500);flex:none}
html[data-ui] .section-title:first-child{margin-top:4px}
html[data-ui] .page-header h2{font-size:22px;font-weight:600}
html[data-ui] .breadcrumb{font-size:13px;margin:16px 0 14px}
html[data-ui] .breadcrumb a{color:var(--ui-accent);font-weight:500}
html[data-ui] .link-btn,
html[data-ui] .inv-link,
html[data-ui] .wa-phone-link{color:var(--link-text)}
html[data-ui] .stat-grid{gap:14px;grid-template-columns:repeat(auto-fit,minmax(158px,1fr))}
html[data-ui] .stat-card{border:1px solid var(--border);border-radius:14px;padding:14px 16px;box-shadow:none;background:var(--surface);overflow:visible}
html[data-ui] .stat-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
html[data-ui] .stat-card-link:hover{border-color:var(--gray-500)}
html[data-ui] .stat-card .stat-chip{width:36px;height:36px;border-radius:10px;font-size:17px;margin-bottom:10px;background:var(--ui-soft);color:var(--ui-accent)}
html[data-ui] .stat-card .stat-chip .ui-ic{width:20px;height:20px}
html[data-ui] .stat-card .stat-label{font-size:12.5px;font-weight:400;color:var(--text-muted);line-height:1.5;margin-bottom:0}
html[data-ui] .stat-card .stat-value{font-size:26px;font-weight:600;line-height:1.35;color:var(--text);letter-spacing:0}
html[data-ui] .stat-card .stat-value.small{font-size:19px}
html[data-ui] .stat-card .stat-sub{font-size:12px;color:var(--text-muted)}
html[data-ui] .stat-card.c-green{background:var(--green-soft-bg);border-color:transparent}
html[data-ui] .stat-card.c-green .stat-chip{background:rgba(23,121,74,.16);color:var(--green-700)}
html[data-ui] .stat-card.c-green .stat-label,
html[data-ui] .stat-card.c-green .stat-sub{color:var(--green-700)}
html[data-ui] .stat-card.c-green .stat-value{color:var(--green-700)}
html[data-ui] .stat-card.c-yellow{background:var(--yellow-soft-bg);border-color:transparent}
html[data-ui] .stat-card.c-yellow .stat-chip{background:rgba(133,85,0,.14);color:var(--yellow-700)}
html[data-ui] .stat-card.c-yellow .stat-label,
html[data-ui] .stat-card.c-yellow .stat-sub,
html[data-ui] .stat-card.c-yellow .stat-value{color:var(--yellow-700)}
html[data-ui] .stat-card.c-red{background:var(--red-soft-bg);border-color:transparent}
html[data-ui] .stat-card.c-red .stat-chip{background:rgba(179,38,30,.13);color:var(--red-700)}
html[data-ui] .stat-card.c-red .stat-label,
html[data-ui] .stat-card.c-red .stat-sub,
html[data-ui] .stat-card.c-red .stat-value{color:var(--red-700)}
html[data-ui] .stat-card.c-gray{background:var(--surface)}
html[data-ui] .stat-card.c-gray .stat-label,
html[data-ui] .stat-card.c-gray .stat-sub{color:var(--text-muted)}
html[data-ui] .stat-card.c-gray .stat-value{color:var(--text)}
html[data-ui] .stat-grid-square{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
html[data-ui] .stat-grid-square .stat-card{aspect-ratio:auto;flex-direction:row;align-items:center;justify-content:flex-start;text-align:start;gap:14px;padding:16px 18px}
html[data-ui] .stat-grid-square .stat-card .stat-chip{margin:0;width:44px;height:44px;font-size:20px;flex:none}
html[data-ui] .stat-grid-square .stat-card .stat-label{font-size:12.5px}
html[data-ui] .stat-grid-square .stat-card .stat-value{font-size:26px}
html[data-ui] .stat-grid-square .stat-card .stat-value.small{font-size:19px}
html[data-ui] .stat-grid-square .stat-card:hover{transform:translateY(-2px)}
html[data-ui] .card{border:1px solid var(--border);border-radius:14px;box-shadow:none;background:var(--surface);padding:16px 22px 20px}
html[data-ui] .card-header{margin-bottom:12px}
html[data-ui] .card-header h3{font-size:15.5px;font-weight:600;color:var(--text)}
html[data-ui] .badge{gap:5px;padding:1px 10px;border-radius:999px;font-size:12px;font-weight:500;line-height:1.7;letter-spacing:0}
html[data-ui] .badge::before{display:none}
html[data-ui] .badge-green{background:var(--green-50);color:var(--green-700)}
html[data-ui] .badge-yellow{background:var(--yellow-50);color:var(--yellow-700)}
html[data-ui] .badge-red{background:var(--red-50);color:var(--red-700)}
html[data-ui] .badge-gray{background:var(--gray-100);color:var(--gray-600)}
html[data-ui] .badge-blue{background:var(--blue-50);color:var(--blue-700)}
html[data-ui] .badge-plus{background:var(--blue-50);color:var(--blue-700)}
html[data-ui] .badge-custom,
html[data-ui] .inv-badge-part,
html[data-ui] .changed-tag{background:var(--gold-soft-bg);color:var(--gold-soft-text)}
html[data-ui] .inst-credit-note{color:var(--blue-700)}
html[data-ui] .carry-credit{background:var(--blue-50);border-color:var(--border)}
html[data-ui] .carry-credit-head{color:var(--blue-700)}
html[data-ui] .carry-credit tr.carry-touched td{background:var(--blue-50)}
html[data-ui] .inst-remaining{background:var(--yellow-50);color:var(--yellow-700)}
html[data-ui] .inst-attach-count{background:var(--ui-accent);color:var(--ui-accent-fg)}
html[data-ui] .btn{height:var(--ui-btn-h);padding:0 14px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:13px;font-weight:500;gap:7px;justify-content:center;transition:background .12s,border-color .12s}
html[data-ui] .btn:hover{border-color:var(--gray-500);filter:none;background:var(--surface)}
html[data-ui] .btn:active{transform:none}
html[data-ui] .btn-primary,
html[data-ui] .btn-primary:hover{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-fg)}
html[data-ui] .btn-primary:hover{filter:brightness(1.12)}
html[data-ui] .btn-gold,
html[data-ui] .btn-gold:hover{background:var(--gold-500);border-color:var(--gold-500);color:#1c1608}
html[data-ui] .btn-outline{background:var(--surface);border-color:var(--border);color:var(--text)}
html[data-ui] .btn-outline:hover{background:var(--surface);border-color:var(--gray-500)}
html[data-ui] .btn-danger,
html[data-ui] .btn-danger:hover{background:var(--red-700);border-color:var(--red-700);color:#fff}
html[data-ui] .btn-ghost{background:transparent;border-color:transparent;color:var(--ui-accent);padding:0 10px}
html[data-ui] .btn-ghost:hover{background:var(--gray-100);border-color:transparent}
html[data-ui] .btn-sm{height:30px;padding:0 10px;font-size:12px;border-radius:8px}
html[data-ui] .btn-icon{padding:0 9px}
html[data-ui] .btn-soft-green,
html[data-ui] .btn-soft-green:hover{background:var(--green-soft-bg);border-color:transparent;color:var(--green-700);font-weight:600}
html[data-ui] .btn-soft-gold,
html[data-ui] .btn-soft-gold:hover,
html[data-ui] .btn-invoice,
html[data-ui] .btn-invoice:hover{background:var(--gold-soft-bg);border-color:transparent;color:var(--gold-soft-text)}
html[data-ui] .btn-soft-green:hover,
html[data-ui] .btn-soft-gold:hover,
html[data-ui] .btn-invoice:hover{filter:brightness(.97)}
html[data-ui] .btn-whatsapp,
html[data-ui] .btn-whatsapp:hover{background:#1FA855;border-color:#1FA855;color:#fff}
html[data-ui] .wa-icon-btn{background:var(--green-soft-bg);color:var(--green-700);width:30px;height:30px;border-radius:8px}
html[data-ui] .wa-icon-btn:hover{background:var(--green-soft-bg);filter:brightness(.96)}
html[data-ui] .wa-phone-link{font-weight:500}
html[data-ui] .wa-phone-link:hover{color:var(--ui-accent)}
html[data-ui] label{font-size:13px;font-weight:500;color:var(--gray-700);margin-bottom:6px}
html[data-ui] input[type=text],
html[data-ui] input[type=number],
html[data-ui] input[type=date],
html[data-ui] input[type=tel],
html[data-ui] input[type=email],
html[data-ui] input[type=password],
html[data-ui] input[type=file],
html[data-ui] select,
html[data-ui] textarea{height:var(--ui-ctl-h);padding:0 12px;border:var(--ui-border-w) solid var(--ui-field-line);border-radius:10px;font-size:14px;background:var(--ui-input);color:var(--text)}
html[data-ui] textarea{height:auto;padding:10px 12px;min-height:72px}
html[data-ui] input[type=file]{padding:7px 10px;height:auto}
html[data-ui] input:focus,
html[data-ui] select:focus,
html[data-ui] textarea:focus{border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 18%,transparent)}
html[data-ui] select option{color:#14233D;background:#fff}
html[data-ui] .switch input:checked+.slider{background:var(--green-500)}
html[data-ui] .switch.switch-gold input:checked+.slider{background:var(--gold-500)}
html[data-ui] .perms-grid{border-color:var(--ui-field-line);border-radius:10px}
html[data-ui] .esc-box{border-color:var(--gold-500);background:var(--gold-soft-bg);border-radius:10px}
html[data-ui] .esc-head h4{color:var(--text)}
html[data-ui] .filter-bar{gap:10px;margin:16px 0}
html[data-ui] .filter-bar .search-box input,
html[data-ui] .search-box input{width:100%}
html[data-ui] .search-box .search-icon{color:var(--text-muted);display:inline-flex;align-items:center}
html[data-ui] .filter-bar select,
html[data-ui] .filter-bar input{min-width:150px}
html[data-ui] .chip{height:32px;padding:0 15px;border-radius:999px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:12.5px;font-weight:500;display:inline-flex;align-items:center}
html[data-ui] .chip:hover{background:var(--surface);border-color:var(--gray-500)}
html[data-ui] .chip.active,
html[data-ui] .chip.active:hover{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-fg)}
html[data-ui] .tabs,
html[data-ui] .ip-tabs{gap:6px;border-bottom:1px solid var(--border);margin:16px 0 18px}
html[data-ui] .tab-btn,
html[data-ui] .ip-tab{padding:9px 20px;font-size:14px;font-weight:500;color:var(--text-muted);border-bottom:3px solid transparent;margin-bottom:-1px}
html[data-ui] .tab-btn:hover,
html[data-ui] .ip-tab:hover{color:var(--text)}
html[data-ui] .tab-btn.active,
html[data-ui] .ip-tab.active{color:var(--text);font-weight:600;border-bottom-color:var(--gold-500)}
html[data-ui] .ip-hint{background:var(--blue-50);color:var(--blue-700);font-weight:500}
html[data-ui] .ip-method{background:var(--gray-100);color:var(--gray-600);font-weight:500}
html[data-ui] .notice-banner{background:var(--yellow-50);border:0;color:var(--yellow-700);border-radius:12px}
html[data-ui] .table-wrap{border:1px solid var(--border);border-radius:14px;box-shadow:none;background:var(--surface)}
html[data-ui] .card .table-wrap,
html[data-ui] .modal-body .table-wrap{border:0;border-radius:0;background:transparent}
html[data-ui] .data-table{font-size:12.5px}
html[data-ui] .data-table th{background:var(--bg);color:var(--text-muted);font-weight:500;font-size:11.5px;padding:9px 8px;border-top:1px solid var(--ui-line2);border-bottom:1px solid var(--border)}
html[data-ui] .data-table td{padding:10px 8px;border-bottom:1px solid var(--ui-line2);vertical-align:top}
html[data-ui] .data-table tbody tr:nth-child(even){background:transparent}
html[data-ui] .data-table tbody tr:last-child td{border-bottom:0}
html[data-ui] .data-table tbody tr:hover{background:var(--bg)}
html[data-ui] .data-table tbody tr.clickable:hover{background:var(--bg)}
html[data-ui] .data-table tbody tr.row-critical{background:var(--red-50)}
html[data-ui] .data-table tbody tr.row-critical:hover{background:var(--red-50);filter:brightness(.98)}
html[data-ui] .data-table tbody tr.row-warn{background:var(--yellow-50)}
html[data-ui] .data-table .cell-muted{color:var(--text-muted)}
html[data-ui] .table-scroll-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);box-shadow:var(--shadow-md)}
html[data-ui] .table-scroll-btn:hover{background:var(--gray-50)}
html[data-ui] .empty-state .empty-icon{font-size:36px;color:var(--text-muted)}
html[data-ui] .empty-state .empty-icon .ui-ic{width:44px;height:44px}
html[data-ui] .building-grid{gap:18px;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
html[data-ui] .building-card{border:1px solid var(--border);border-radius:16px;box-shadow:none;padding:18px}
html[data-ui] .building-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
html[data-ui] .building-card .bc-top{gap:13px;margin-bottom:16px}
html[data-ui] .building-card .bc-icon{width:48px;height:48px;border-radius:13px;background:var(--ui-soft);color:var(--ui-accent);font-size:21px}
html[data-ui] .building-card .bc-icon .ui-ic{width:26px;height:26px}
html[data-ui] .building-card .bc-name{font-size:16.5px;font-weight:600;line-height:1.4}
html[data-ui] .building-card .bc-loc{font-size:12.5px}
html[data-ui] .building-card .bc-stats{gap:10px}
html[data-ui] .building-card .bc-stat{background:var(--bg);border:1px solid var(--ui-line2);border-radius:11px;padding:10px 13px}
html[data-ui] .building-card .bc-stat .v{font-family:var(--ui-head);font-size:18px;font-weight:600;line-height:1.45}
html[data-ui] .building-card .bc-stat .l{font-size:12px}
html[data-ui] .occupancy-bar{height:8px;background:var(--ui-line2)}
html[data-ui] .occupancy-bar>div,
html[data-ui] .progress-fill{background:var(--green-500)}
html[data-ui] .progress-track{background:var(--ui-line2);height:8px}
html[data-ui] .drag-handle{border-color:var(--ui-field-line);color:var(--ui-accent)}
html[data-ui] .order-badge{background:var(--ui-accent);color:var(--ui-accent-fg)}
html[data-ui] .modal-overlay{background:rgba(10,18,32,.48)}
html[data-ui] .modal{border-radius:18px;box-shadow:0 18px 50px rgba(10,18,32,.28);background:var(--surface);border:1px solid var(--border)}
html[data-ui] .modal-header{padding:16px 22px;border-bottom:1px solid var(--border)}
html[data-ui] .modal-header h3{font-size:16.5px;font-weight:600}
html[data-ui] .modal-close{width:32px;height:32px;border-radius:8px;border:1px solid var(--border);color:var(--text-muted);font-size:15px;padding:0;display:inline-flex;align-items:center;justify-content:center}
html[data-ui] .modal-footer{padding:14px 22px}
html[data-ui] .toast{background:var(--ui-toast);color:#fff;border-radius:12px;padding:11px 18px;box-shadow:0 14px 40px rgba(10,18,32,.35)}
html[data-ui] .notif{border:1px solid var(--border);border-inline-start:4px solid var(--ui-accent);border-radius:12px;box-shadow:var(--shadow-md)}
html[data-ui] .notif .ic{background:var(--gray-100);color:var(--gray-600);border-radius:9px}
html[data-ui] .notif.type-contract .ic{background:var(--blue-50);color:var(--blue-700)}
html[data-ui] .notif.type-payment .ic{background:var(--green-soft-bg);color:var(--green-700)}
html[data-ui] .notif .msg b{color:var(--text)}
html[data-ui] .att-rank.hi,
html[data-ui] .att-tag.r{background:var(--red-50);color:var(--red-700)}
html[data-ui] .att-rank.md,
html[data-ui] .att-tag.a{background:var(--yellow-50);color:var(--yellow-700)}
html[data-ui] .att-rank.lo,
html[data-ui] .att-tag.g{background:var(--green-50);color:var(--green-700)}
html[data-ui] .att-name,
html[data-ui] .ten-name{color:var(--text)}
html[data-ui] .ten-rank{background:var(--gray-100);color:var(--text)}
html[data-ui] .ten-amt{color:var(--red-700)}
html[data-ui] .att-list .att-row:hover,
html[data-ui] .ten-list .ten-row:hover{background:var(--bg)}
html[data-ui] .comm-log-icon-whatsapp{background:var(--green-soft-bg);color:var(--green-700)}
html[data-ui] .comm-log-icon-call{background:var(--gold-soft-bg);color:var(--gold-soft-text)}
html[data-ui] .comm-log-icon-message{background:var(--blue-50);color:var(--blue-700)}
html[data-ui] .comm-log-icon-visit{background:var(--gray-100);color:var(--gray-600)}
html[data-ui] .unit-utility-row{border-color:var(--border);border-radius:10px}
html[data-ui] .kv-list .kv-item .k{font-size:12px}
html[data-ui] .context-bar,
html[data-ui] .snap-card{border-radius:12px}
html[data-ui] .inv-bar{background:var(--ui-line2)}
html[data-ui] .inv-bar>i{background:var(--gold-500)}
html[data-ui] .inv-note-gold{background:var(--gold-soft-bg);color:var(--gold-soft-text);border:0}
html[data-ui] .inv-note-ok{background:var(--green-50);color:var(--green-700)}
html[data-ui] .inv-note-warn{background:var(--red-50);color:var(--red-700)}
html[data-ui] .chart-legend .li{color:var(--text-muted)}
html[data-ui] .ui-ic{width:1.2em;height:1.2em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.25em;display:inline-block;flex:none;margin-inline-end:.3em}
html[data-ui] .btn .ui-ic,
html[data-ui] .chip .ui-ic,
html[data-ui] .sidebar-nav a .ui-ic,
html[data-ui] .stat-chip .ui-ic,
html[data-ui] .bc-icon .ui-ic,
html[data-ui] .modal-close .ui-ic,
html[data-ui] .btn-icon .ui-ic,
html[data-ui] .wa-icon-btn .ui-ic,
html[data-ui] .drag-handle .ui-ic,
html[data-ui] .table-scroll-btn .ui-ic,
html[data-ui] .notif .ic .ui-ic,
html[data-ui] .comm-log-icon .ui-ic,
html[data-ui] .search-icon .ui-ic{margin-inline-end:0}
html[data-ui] .btn .ui-ic{width:1.25em;height:1.25em;vertical-align:middle}
html[data-ui] .btn-sm .ui-ic{width:1.2em;height:1.2em}
html[data-ui] .ui-ic.t-ok{color:var(--green-700)}
html[data-ui] .ui-ic.t-warn{color:var(--yellow-700)}
html[data-ui] .ui-ic.t-bad{color:var(--red-700)}
html[data-ui] .ui-ic.t-info{color:var(--blue-700)}
html[data-ui] .ui-ic.t-mut{color:var(--text-muted)}
html[data-ui] .btn-primary .ui-ic.t-ok,
html[data-ui] .btn-primary .ui-ic.t-warn,
html[data-ui] .btn-primary .ui-ic.t-bad,
html[data-ui] .btn-danger .ui-ic,
html[data-ui] .toast .ui-ic{color:inherit}
html[data-ui][data-theme="dark"] .sidebar-brand>img,
html[data-ui][data-theme="dark"] .brand-logo{background:#fff}
html[data-ui][data-theme="dark"] .btn-primary,
html[data-ui][data-theme="dark"] .btn-primary:hover{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-fg)}
html[data-ui][data-theme="dark"] .chip.active,
html[data-ui][data-theme="dark"] .chip.active:hover{background:var(--ui-accent);border-color:var(--ui-accent);color:var(--ui-accent-fg)}
html[data-ui][data-theme="dark"] .card-header h3,
html[data-ui][data-theme="dark"] .att-name,
html[data-ui][data-theme="dark"] .ten-name,
html[data-ui][data-theme="dark"] .ten-rank,
html[data-ui][data-theme="dark"] .wa-phone-link,
html[data-ui][data-theme="dark"] .btn-ghost,
html[data-ui][data-theme="dark"] .stat-card .stat-value,
html[data-ui][data-theme="dark"] .tab-btn.active{color:var(--text)}
html[data-ui][data-theme="dark"] .btn-ghost{color:var(--ui-accent)}
html[data-ui][data-theme="dark"] .stat-card .stat-chip{background:var(--ui-soft);color:var(--ui-accent)}
html[data-ui][data-theme="dark"] .stat-card.c-green .stat-chip{background:rgba(95,203,147,.18);color:var(--green-700)}
html[data-ui][data-theme="dark"] .stat-card.c-yellow .stat-chip{background:rgba(235,187,92,.18);color:var(--yellow-700)}
html[data-ui][data-theme="dark"] .stat-card.c-red .stat-chip{background:rgba(242,137,123,.18);color:var(--red-700)}
html[data-ui][data-theme="dark"] .stat-card.c-green .stat-value{color:var(--green-700)}
html[data-ui][data-theme="dark"] .stat-card.c-yellow .stat-value{color:var(--yellow-700)}
html[data-ui][data-theme="dark"] .stat-card.c-red .stat-value{color:var(--red-700)}
html[data-ui][data-theme="dark"] .data-table tbody tr.clickable:hover,
html[data-ui][data-theme="dark"] .data-table tbody tr:hover{background:var(--gray-50)}
html[data-ui][data-theme="dark"] .data-table tbody tr.row-critical:hover{background:var(--red-50)}
html[data-ui][data-theme="dark"] .btn-soft-green:hover,
html[data-ui][data-theme="dark"] .btn-soft-gold:hover,
html[data-ui][data-theme="dark"] .btn-invoice:hover{background:inherit}
html[data-ui][data-theme="dark"] .btn-soft-green:hover{background:var(--green-soft-bg)}
html[data-ui][data-theme="dark"] .btn-soft-gold:hover,
html[data-ui][data-theme="dark"] .btn-invoice:hover{background:var(--gold-soft-bg)}
html[data-ui][data-theme="dark"] .wa-icon-btn{background:var(--green-soft-bg);color:var(--green-700)}
html[data-ui][data-theme="dark"] .table-scroll-btn{background:var(--surface)}
html[data-ui][data-theme="dark"] .breadcrumb a{color:var(--ui-accent)}
html[data-ui][data-theme="dark"] .esc-head h4{color:var(--text)}
html[data-ui][data-theme="dark"] select option{color:#E6ECF7;background:#142038}
html[data-ui][data-theme="dark"] .modal{border-color:var(--border)}
@media (max-width:880px){
html[data-ui] .sidebar{width:min(var(--sidebar-w),88vw)}
html[data-ui] .topbar{padding:0 14px;min-height:60px}
html[data-ui] .content{padding:6px 14px 48px}
html[data-ui] .stat-grid-square{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
}
@media (max-width:560px){
html[data-ui] .topbar .page-subtitle{display:none}
html[data-ui] .topbar .page-title{font-size:17px}
}
@media (max-width:480px){
html[data-ui] .stat-card .stat-value{font-size:22px}
html[data-ui] .building-grid{grid-template-columns:1fr}
}
html[data-ui]{--ui-tbl-muted:#4A5974}
html[data-ui][data-theme="dark"]{--ui-tbl-muted:#9AA8C3}
html[data-ui] .data-table th{color:var(--ui-tbl-muted);font-size:12.5px;font-weight:600}
html[data-ui] .data-table .cell-muted{color:var(--ui-tbl-muted)}
html[data-ui] .data-table .cell-muted[style*="font-size:10px"]{font-size:11.5px!important}
html[data-ui] .data-table .cell-muted[style*="font-size:11px"]{font-size:12px!important}
html[data-ui] .data-table .cell-muted[style*="font-size:11.5px"]{font-size:12.5px!important}
html[data-ui] .data-table .badge{font-size:12.5px}
html[data-ui] .data-table .ip-method{font-size:12px}
html[data-ui] .data-table .inst-dot{font-size:11px}
html[data-ui] .data-table .inst-remaining{font-size:11.5px}
html[data-ui] .data-table{font-size:13.5px}
html[data-ui] .data-table td{font-weight:500}
html[data-ui] #view-root > .no-print > .stat-grid-square{grid-template-columns:repeat(auto-fit,minmax(max(280px,calc((100% - 28px) / 3 - 1px)),1fr))}
html[data-ui] #view-root > .no-print > .stat-grid-square .stat-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"chip label" "chip value";column-gap:16px;row-gap:2px;align-items:center;padding:16px 20px;container-type:inline-size}
html[data-ui] #view-root > .no-print > .stat-grid-square .stat-chip{grid-area:chip}
html[data-ui] #view-root > .no-print > .stat-grid-square .stat-label{grid-area:label;align-self:end;font-size:13px;line-height:1.5}
html[data-ui] #view-root > .no-print > .stat-grid-square .stat-value,
html[data-ui] #view-root > .no-print > .stat-grid-square .stat-value.small{grid-area:value;align-self:start;font-size:22px;font-size:clamp(17px,7.4cqw,24px);line-height:1.3;white-space:nowrap}
html[data-ui] .sidebar-nav a[data-route="reminders"],
html[data-ui] .sidebar-nav a[data-route="dashboard"],
html[data-ui] .sidebar-nav a[data-route="statistics"],
html[data-ui] .sidebar-nav a[data-route="followup"]{--ui-cat-bg:rgba(143,180,245,.17)}
html[data-ui] .sidebar-nav a[data-route="buildings"],
html[data-ui] .sidebar-nav a[data-route="units"],
html[data-ui] .sidebar-nav a[data-route="contractsarchive"],
html[data-ui] .sidebar-nav a[data-route="utilities"],
html[data-ui] .sidebar-nav a[data-route="communications"]{--ui-cat-bg:rgba(95,203,214,.16)}
html[data-ui] .sidebar-nav a[data-route="installmentspayments"],
html[data-ui] .sidebar-nav a[data-route="taxinvoices"]{--ui-cat-bg:rgba(130,214,154,.16)}
html[data-ui] .sidebar-nav a[data-route="settings"],
html[data-ui] .sidebar-nav a[data-route="users"],
html[data-ui] .sidebar-nav a[data-route="officedocs"],
html[data-ui] .sidebar-nav a[data-route="auditlog"],
html[data-ui] .sidebar-nav a[data-route="backups"]{--ui-cat-bg:rgba(188,167,243,.17)}
html[data-ui] .sidebar-nav a .icon{width:30px;height:30px;border-radius:9px;font-size:16px;background:var(--ui-cat-bg)}
html[data-ui] .sidebar-nav a.active .icon{background:rgba(201,162,78,.28)}
html[data-ui] .sidebar-nav a{--ui-cat-bg:rgba(255,255,255,.08)}
html[data-ui] .sidebar-nav a[data-route="receipts"]{--ui-cat-bg:rgba(130,214,154,.16)}
.sidebar-nav .nav-group-label{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;border-radius:8px;transition:background .15s,color .15s}
.sidebar-nav .nav-group-label:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.75)}
.sidebar-nav .nav-group-label:focus-visible{outline:2px solid #C9A24E;outline-offset:-2px}
.sidebar-nav .nav-group-label::after{content:"";flex:none;width:7px;height:7px;border-right:1.8px solid currentColor;border-bottom:1.8px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;margin-inline-start:8px}
.sidebar-nav .nav-group-label[aria-expanded="false"]::after{transform:translateX(2px) rotate(135deg)}
.sidebar-nav a{max-height:var(--nav-link-max,60px);overflow:hidden;transition:max-height .22s ease,padding .22s ease,margin .22s ease,opacity .18s ease,background .15s,color .15s,visibility 0s linear 0s}
.sidebar-nav a[data-gc]{max-height:0;padding-top:0;padding-bottom:0;margin-bottom:0;opacity:0;visibility:hidden;pointer-events:none;transition:max-height .22s ease,padding .22s ease,margin .22s ease,opacity .18s ease,background .15s,color .15s,visibility 0s linear .22s}
.sidebar-nav.nav-noanim a,
.sidebar-nav.nav-noanim .nav-group-label::after{transition:none!important}
@media (min-width:881px){
.main-area{transition:margin-right .25s ease}
.sidebar{transition:transform .25s ease,visibility 0s linear 0s}
html.nav-collapsed .sidebar{transform:translateX(100%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
html.nav-collapsed .main-area{margin-right:0}
}
@media (prefers-reduced-motion:reduce){
.sidebar,
.main-area,
.sidebar-nav a,
.sidebar-nav .nav-group-label::after{transition:none!important}
}
html[data-ui]{--nav-link-max:40px}
html[data-ui] .sidebar-nav a{transition:max-height .22s ease,padding .22s ease,margin .22s ease,opacity .18s ease,background .12s,visibility 0s linear 0s}
html[data-ui] .sidebar-nav a[data-gc]{margin-top:-2px;transition:max-height .22s ease,padding .22s ease,margin .22s ease,opacity .18s ease,background .12s,visibility 0s linear .22s}
html[data-ui] .sidebar-nav.nav-noanim a{transition:none!important}
html[data-ui] .sidebar-nav .nav-group-label{padding:5px 12px;margin:7px 0 0}
html[data-ui] .sidebar-nav .nav-group-label:first-child{margin-top:0;padding-top:5px}
html[data-ui] .brand-logo{height:150px;max-height:none;object-fit:cover;object-position:50% 38%}
@media (max-height:700px){
html[data-ui] .brand-logo{height:auto;max-height:112px;object-fit:contain;object-position:50% 50%}
}
.ui-menu{position:fixed;z-index:150;width:340px;max-width:calc(100vw - 24px);background:var(--surface);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:0 18px 50px rgba(10,18,32,.28);padding:8px;display:grid;gap:2px}
.ui-menu-h{padding:6px 8px 8px;border-bottom:1px solid var(--border);margin-bottom:4px;display:grid}
.ui-menu-h b{font-size:14px;font-weight:700}
.ui-menu-h small{color:var(--text-muted);font-size:12px}
.ui-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:start;padding:8px;border-radius:10px;border:1px solid transparent;background:transparent;color:inherit;font:inherit;cursor:pointer}
.ui-opt:hover{background:var(--gray-100)}
.ui-opt.on{border-color:var(--ui-accent,var(--navy-800));background:var(--gray-50)}
.ui-sw{display:grid;grid-template-columns:repeat(3,1fr);width:46px;height:34px;flex:none;border:1px solid var(--border);border-radius:4px;overflow:hidden}
.ui-sw i{display:block}
.ui-ot{flex:1;min-width:0;display:grid;line-height:1.45}
.ui-ot b{font-size:13.5px;font-weight:700}
.ui-ot b em{font-style:normal;font-weight:500;font-size:11px;color:var(--text-muted);margin-inline-start:6px}
.ui-ot small{color:var(--text-muted);font-size:12px}
.ui-ck{width:20px;display:inline-flex;justify-content:center;color:var(--ui-accent,var(--navy-800));flex:none}
.ui-reset{display:block;width:100%;text-align:start;margin-top:4px;padding:8px;border:0;border-top:1px solid var(--border);background:transparent;color:var(--ui-accent,var(--navy-800));font:inherit;font-size:12.5px;font-weight:600;cursor:pointer}
.ui-reset:hover{text-decoration:underline}
.ui-menu-n{margin:6px 4px 2px;padding-top:8px;border-top:1px solid var(--border);color:var(--text-muted);font-size:12px;line-height:1.6}
#ui-switch-btn[aria-expanded="true"]{border-color:var(--ui-accent,var(--navy-800))}
}