[data-web-customers="true"] .web-customers { --home-sidebar-width:0px; --home-max-width:1920px; --home-gutter:20px; --home-line:#dce9f3; --home-muted:#71839f; font-family:Inter,system-ui,sans-serif; }
[data-web-customers="true"] .web-customers * { box-sizing:border-box; min-width:0; }
[data-web-customers="true"] .web-customers button { cursor:pointer; }
[data-web-customers="true"] .web-customers button:focus-visible,[data-web-customers="true"] .web-customers input:focus-visible { outline:3px solid #4a9be9; outline-offset:2px; }
[data-web-customers="true"] .web-customers-heading { display:flex; align-items:center; gap:14px; margin-bottom:15px; }
[data-web-customers="true"] .web-customers-heading-icon { width:56px; height:56px; display:grid; place-items:center; flex:none; border-radius:15px; background:linear-gradient(135deg,#e5f2ff,#dbeafe); color:#1466d8; font-size:25px; }
[data-web-customers="true"] .web-customers-heading h1 { font-size:27px; font-weight:750; line-height:1.15; color:#142b4b; }
[data-web-customers="true"] .web-customers-heading p { margin-top:3px; font-size:12px; color:#71839f; }
[data-web-customers="true"] .web-customers-primary { margin-left:auto; display:flex; justify-content:center; align-items:center; gap:10px; min-height:42px; padding:10px 17px; border:1px solid #0b59df; border-radius:8px; background:linear-gradient(135deg,#2474ef,#0f57dc); color:#fff; font-size:12px; font-weight:700; box-shadow:0 4px 9px #205bd724; white-space:nowrap; }
[data-web-customers="true"] .web-customers-primary:hover { background:#0c52d8; }
[data-web-customers="true"] .web-customers-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:12px; }
[data-web-customers="true"] .web-customers-stat { min-height:82px; display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid #dce9f3; border-radius:11px; background:#fff; box-shadow:0 4px 12px #2045680b; text-align:left; }
[data-web-customers="true"] .web-customers-stat[aria-pressed="true"] { border-color:#82b5ed; background:#f0f8ff; box-shadow:0 0 0 2px #d9edff inset; }
[data-web-customers="true"] .web-customers-stat-icon { display:grid; place-items:center; width:50px; height:50px; flex:none; border-radius:13px; font-size:21px; }
[data-web-customers="true"] .web-customers-stat-icon.blue { color:#0968d8; background:#e7f3ff; }
[data-web-customers="true"] .web-customers-stat-icon.green { color:#009979; background:#e6f8f2; }
[data-web-customers="true"] .web-customers-stat-icon.teal { color:#008f94; background:#e7f8f7; }
[data-web-customers="true"] .web-customers-stat-icon.amber { color:#d38b0b; background:#fff7e7; }
[data-web-customers="true"] .web-customers-stat-icon.violet { color:#7150d2; background:#f2edff; }
[data-web-customers="true"] .web-customers-stat strong { display:block; font-size:21px; font-weight:750; line-height:1.2; }
[data-web-customers="true"] .web-customers-stat small { display:block; margin-top:4px; color:#71839f; font-size:11px; line-height:1.2; }
[data-web-customers="true"] .web-customers-grid { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); align-items:start; gap:12px; }
[data-web-customers="true"] .web-customers-card { min-height:570px; overflow:hidden; border:1px solid #dce9f3; border-radius:12px; background:#fff; box-shadow:0 5px 14px #2045680d; }
[data-web-customers="true"] .web-customers-list { height:max(540px,calc(100dvh - 275px)); padding:14px; display:flex; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; }
[data-web-customers="true"] .web-customers-card-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
[data-web-customers="true"] .web-customers-card-heading h2,[data-web-customers="true"] .web-customers-detail h2 { font-size:18px; font-weight:750; }
[data-web-customers="true"] .web-customers-card-heading span { font-size:11px; color:#71839f; }
[data-web-customers="true"] .web-customers-search { display:flex; align-items:center; gap:10px; height:38px; padding:0 12px; border:1px solid #d2e2ef; border-radius:7px; color:#47759b; background:#fbfdff; }
[data-web-customers="true"] .web-customers-search:focus-within { border-color:#4a9be9; }
[data-web-customers="true"] .web-customers-search input { width:100%; height:100%; border:0; outline:0; background:transparent; color:#142b4b; font-size:12px; }
[data-web-customers="true"] .web-customers-search input::placeholder { color:#8596ac; }
[data-web-customers="true"] .web-customers-search button { color:#7893aa; }
[data-web-customers="true"] .web-customers-filters { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 0; }
[data-web-customers="true"] .web-customers-filter-group { display:flex; flex-wrap:wrap; gap:6px; }
[data-web-customers="true"] .web-customers-filters button { min-height:34px; padding:7px 10px; border:1px solid #d4e4ef; border-radius:7px; background:#fff; color:#536f8d; font-size:11px; font-weight:600; white-space:nowrap; }
[data-web-customers="true"] .web-customers-filters button[aria-pressed="true"] { border-color:#bdd9fa; background:#eaf4ff; color:#075bc9; }
[data-web-customers="true"] .web-customers-filters .web-customers-sort { background:#f8fbff; }
[data-web-customers="true"] .web-customers-table-wrap { overflow-x:auto; border:1px solid #dfebf4; border-radius:8px; }
[data-web-customers="true"] .web-customers-table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:11px; }
[data-web-customers="true"] .web-customers-table th { padding:11px 9px; text-align:left; background:#f3f8fc; color:#536c8b; font-size:9px; font-weight:750; text-transform:uppercase; letter-spacing:.025em; white-space:nowrap; }
[data-web-customers="true"] .web-customers-table th:nth-child(1) { width:32%; } [data-web-customers="true"] .web-customers-table th:nth-child(2) { width:24%; } [data-web-customers="true"] .web-customers-table th:nth-child(3) { width:30%; } [data-web-customers="true"] .web-customers-table th:nth-child(4) { width:8%; } [data-web-customers="true"] .web-customers-table th:nth-child(5) { width:6%; }
[data-web-customers="true"] .web-customers-table td { padding:7px 9px; border-top:1px solid #e6eef5; color:#385475; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-web-customers="true"] .web-customers-table tr.selected td { background:#e8f4ff; }
[data-web-customers="true"] .web-customers-table tbody tr:hover td { background:#f2f9ff; }
[data-web-customers="true"] .web-customers-row-title { display:flex; align-items:center; gap:8px; width:100%; text-align:left; }
[data-web-customers="true"] .web-customers-avatar { flex:none; display:grid; place-items:center; width:27px; height:27px; border-radius:6px; background:#e6f3ff; color:#145caa; font-size:10px; font-weight:750; }
[data-web-customers="true"] .web-customers-row-title strong { display:block; overflow:hidden; text-overflow:ellipsis; font-weight:700; color:#19375b; }
[data-web-customers="true"] .web-customers-row-title small { display:block; color:#7289a4; font-size:9px; }
[data-web-customers="true"] .web-customers-address { color:#617895; }
[data-web-customers="true"] .web-customers-status { display:inline-flex; align-items:center; gap:6px; }
[data-web-customers="true"] .web-customers-status::before { content:''; width:7px; height:7px; border-radius:50%; background:#9aa9b8; flex:none; }
[data-web-customers="true"] .web-customers-status.active::before { background:#0ca77b; } [data-web-customers="true"] .web-customers-status.inactive::before { background:#efa71d; }
[data-web-customers="true"] .web-customers-row-open { display:grid; place-items:center; width:24px; height:24px; border-radius:50%; color:#1b62b9; background:#f0f7ff; }
[data-web-customers="true"] .web-customers-empty { padding:40px 15px; text-align:center; color:#71839f; font-size:12px; }
[data-web-customers="true"] .web-customers-empty button { color:#0d60d5; font-weight:700; }
[data-web-customers="true"] .web-customers-list-footer { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:auto; padding-top:12px; color:#617895; font-size:11px; }
[data-web-customers="true"] .web-customers-list-footer button { padding:8px 11px; border:1px solid #d4e4ef; border-radius:7px; color:#0b61d2; font-weight:700; }
[data-web-customers="true"] .web-customers-detail { position:sticky; top:calc(var(--production-topbar-height, 68px) + 12px); max-height:calc(100dvh - var(--production-topbar-height, 68px) - 24px); overflow-y:auto; overscroll-behavior:contain; scroll-margin-top:calc(var(--production-topbar-height, 68px) + 20px); }
[data-web-customers="true"] .web-customers-status-badge { padding:4px 8px; border-radius:999px; font-size:10px; font-weight:700; }
[data-web-customers="true"] .web-customers-status-badge.active { color:#08775c; background:#e6f8f2; }
[data-web-customers="true"] .web-customers-status-badge.inactive { color:#a36c0a; background:#fff4df; }
[data-web-customers="true"] .web-customers-branch-back { display:inline-flex; align-items:center; gap:7px; margin:0 16px 10px; padding:7px 10px; border:1px solid #cfe0ef; border-radius:7px; color:#0e62c7; font-size:11px; font-weight:700; }
[data-web-customers="true"] .web-customers-branch-back:hover { background:#f0f8ff; }
[data-web-customers="true"] .web-customers-branch-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:14px; }
[data-web-customers="true"] .web-customers-branch-actions button { padding:8px 11px; border:1px solid #cfe0ef; border-radius:7px; color:#0e62c7; font-size:11px; font-weight:700; }
[data-web-customers="true"] .web-customers-branch-actions .web-customers-primary { margin:0; color:#fff; }
[data-web-customers="true"] .web-customers-detail-head { display:flex; align-items:flex-start; gap:14px; padding:18px; }
[data-web-customers="true"] .web-customers-detail-avatar { flex:none; display:grid; place-items:center; width:62px; height:62px; border-radius:13px; background:linear-gradient(135deg,#203d50,#172735); color:#fff; font-size:23px; font-weight:750; }
[data-web-customers="true"] .web-customers-detail-title { flex:1; }
[data-web-customers="true"] .web-customers-detail-title > div { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
[data-web-customers="true"] .web-customers-detail-title h2 { font-size:20px; }
[data-web-customers="true"] .web-customers-type { padding:4px 8px; border-radius:99px; background:#e8f9f4; border:1px solid #cdeee1; color:#08765f; font-size:10px; font-weight:700; }
[data-web-customers="true"] .web-customers-detail-title p { margin-top:6px; color:#617895; font-size:11px; }
[data-web-customers="true"] .web-customers-outline { display:flex; align-items:center; gap:7px; padding:9px 11px; border:1px solid #d2e3f0; border-radius:7px; color:#174f90; font-size:11px; font-weight:700; white-space:nowrap; }
[data-web-customers="true"] .web-customers-contact { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; padding:0 16px 10px; }
[data-web-customers="true"] .web-customers-contact > div { display:flex; align-items:center; gap:8px; min-height:57px; padding:9px; border:1px solid #dce9f3; border-radius:8px; }
[data-web-customers="true"] .web-customers-contact > div > span { flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:8px; background:#e8f4ff; color:#086bd4; }
[data-web-customers="true"] .web-customers-contact strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; }
[data-web-customers="true"] .web-customers-contact small { display:block; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#71839f; font-size:9px; }
[data-web-customers="true"] .web-customers-mini-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; padding:0 16px 12px; }
[data-web-customers="true"] .web-customers-mini-stats > div { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:0 7px; min-height:58px; padding:7px; border:1px solid #dce9f3; border-radius:8px; }
[data-web-customers="true"] .web-customers-mini-stats i { grid-row:1 / span 2; color:#0f71d4; font-size:17px; text-align:center; }
[data-web-customers="true"] .web-customers-mini-stats strong { font-size:13px; line-height:1.2; }
[data-web-customers="true"] .web-customers-mini-stats small { color:#71839f; font-size:9px; }
[data-web-customers="true"] .web-customers-tabs { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:1px; border-top:1px solid #e2edf5; border-bottom:1px solid #e2edf5; padding:0 12px; }
[data-web-customers="true"] .web-customers-tabs button { min-height:43px; padding:9px 5px; border-bottom:2px solid transparent; color:#526e8d; font-size:10px; font-weight:600; line-height:1.3; white-space:normal; }
[data-web-customers="true"] .web-customers-tabs button[aria-current="page"] { border-color:#1767e8; color:#0b62dc; background:#f4f9ff; }
[data-web-customers="true"] .web-customers-tabs i { margin-right:5px; }
[data-web-customers="true"] .web-customers-detail-body { min-height:238px; padding:14px 16px; }
[data-web-customers="true"] .web-customers-subhead { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:9px; }
[data-web-customers="true"] .web-customers-subhead h3,[data-web-customers="true"] .web-customers-info h3 { font-size:14px; font-weight:750; }
[data-web-customers="true"] .web-customers-subhead button { padding:8px 10px; border:1px solid #bce8dc; border-radius:7px; color:#08816a; background:#f2fffb; font-size:10px; font-weight:700; }
[data-web-customers="true"] .web-customers-branch-list { border:1px solid #dce9f3; border-radius:8px; overflow:hidden; }
[data-web-customers="true"] .web-customers-branch { display:flex; align-items:center; border-top:1px solid #e5edf5; }
[data-web-customers="true"] .web-customers-branch:first-child { border-top:0; }
[data-web-customers="true"] .web-customers-branch > button:first-child { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 14px; align-items:center; gap:8px; width:100%; padding:10px 12px; text-align:left; color:#344f70; font-size:11px; }
[data-web-customers="true"] .web-customers-branch strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-web-customers="true"] .web-customers-branch span { color:#71839f; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-web-customers="true"] .web-customers-branch i { color:#2c6bb3; }
[data-web-customers="true"] .web-customers-branch-report { flex:none; padding:10px 12px; color:#1266c9; }
[data-web-customers="true"] .web-customers-muted { color:#71839f; font-size:12px; }
[data-web-customers="true"] .web-customers-related { text-align:center; padding:10px; color:#71839f; font-size:12px; }
[data-web-customers="true"] .web-customers-related > i { display:grid; place-items:center; width:42px; height:42px; margin:0 auto 8px; border-radius:10px; background:#eaf4ff; color:#1368d4; font-size:19px; }
[data-web-customers="true"] .web-customers-related h3 { color:#142b4b; font-size:15px; font-weight:750; }
[data-web-customers="true"] .web-customers-related p { margin:5px 0 11px; }
[data-web-customers="true"] .web-customers-related button { margin:3px; padding:8px 12px; border:1px solid #cfe0ef; border-radius:7px; color:#0e62c7; font-size:11px; font-weight:700; }
[data-web-customers="true"] .web-customers-info > p { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #e8eff5; color:#526e8d; font-size:11px; white-space:pre-wrap; overflow-wrap:anywhere; }
[data-web-customers="true"] .web-customers-info > p strong { color:#19375b; }
[data-web-customers="true"] .web-customers-info .web-customers-primary { margin:14px 0 0; width:max-content; }
[data-web-customers="true"] .web-customers-detail-links { display:flex; flex-wrap:wrap; gap:7px; padding:10px 16px 16px; border-top:1px solid #e4edf4; }
[data-web-customers="true"] .web-customers-detail-links button { padding:7px 9px; border:1px solid #d7e5f0; border-radius:7px; color:#466685; font-size:10px; font-weight:650; }
[data-web-customers="true"] .web-customers-detail-links button:hover { background:#f0f8ff; }
[data-web-customers="true"] .web-customers-detail-links .web-customers-delete { margin-left:auto; color:#bf5364; border-color:#f0dce0; }
[data-web-customers="true"] .web-customers-search-actions { display:flex; flex-wrap:wrap; gap:8px; padding:0 18px 14px; }
[data-web-customers="true"] .web-customers-search-actions .web-customers-primary { margin-left:0; }
[data-web-customers="true"] .web-customers-search-actions .web-customers-delete { color:#bf5364; border-color:#f0dce0; background:#fff7f8; }
@media(max-width:1550px) { [data-web-customers="true"] .web-customers-grid { grid-template-columns:minmax(0,1fr) minmax(0,.95fr); } }
@media(max-width:1099px) { [data-web-customers="true"] .web-customers-grid { grid-template-columns:1fr; } [data-web-customers="true"] .web-customers-card { min-height:0; } [data-web-customers="true"] .web-customers-list { height:auto; overflow:visible; } [data-web-customers="true"] .web-customers-detail { position:static; max-height:none; overflow:visible; display:none; } [data-web-customers="true"] .web-customers-detail.is-selection { display:block; grid-row:1; } }
@media(max-width:699px) { [data-web-customers="true"] .web-customers-tabs { grid-template-columns:repeat(3,minmax(0,1fr)); } }

/* Page-local safeguards; the production shell owns all outer geometry. */
[data-web-customers="true"].web-customers { color:#142b4b; }
[data-web-customers="true"] .web-customers-row-title > span:last-child,[data-web-customers="true"] .web-customers-contact p { min-width:0; }
[data-web-customers="true"] .web-customers-table-wrap { position:relative; flex:1; min-height:160px; overflow:auto; }
[data-web-customers="true"] .web-customers-heading > div { flex:1; min-width:160px; }
[data-web-customers="true"] .web-customers-detail-title h2 { overflow-wrap:anywhere; }
@media(max-width:699px) { [data-web-customers="true"] .web-customers-search input { font-size:16px; } [data-web-customers="true"] .web-customers-table-wrap { max-height:60dvh; } }

@media(max-width:699px) { [data-web-customers="true"] .web-customers-heading { flex-wrap:wrap; } [data-web-customers="true"] .web-customers-heading h1 { font-size:23px; } [data-web-customers="true"] .web-customers-primary { margin-left:0; } [data-web-customers="true"] .web-customers-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-web-customers="true"] .web-customers-stat { padding:9px; gap:8px; min-height:70px; } [data-web-customers="true"] .web-customers-stat-icon { width:38px; height:38px; font-size:17px; } [data-web-customers="true"] .web-customers-stat strong { font-size:17px; } [data-web-customers="true"] .web-customers-contact { grid-template-columns:1fr; } [data-web-customers="true"] .web-customers-mini-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } [data-web-customers="true"] .web-customers-table { min-width:630px; } [data-web-customers="true"] .web-customers-detail-head { flex-wrap:wrap; } }

[data-web-customers="true"] .web-customers-table tbody tr { cursor:pointer; }
[data-web-customers="true"] .web-customers-record-actions { display:flex; align-items:center; gap:7px; margin-left:auto; }
[data-web-customers="true"] .web-customers-record-actions .web-customers-delete { margin-left:0; }