:root{--ink:#222;--muted:#666;--line:#d9d9d9;--primary:#286090;--paper:#f5f5f5;font-family:Tahoma,"Segoe UI",sans-serif}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:#fff;font:14px/1.5 Tahoma,"Segoe UI",sans-serif}[hidden]{display:none!important}h1,h2,h3,p{margin:0}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}button:disabled{opacity:.5;cursor:default}a{color:var(--primary);text-decoration:none}button,a,input,select,textarea{touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #286090;outline-offset:2px}input,select,textarea{background:#fff;border:1px solid #bbb;border-radius:3px;min-height:34px;padding:6px 9px;max-width:100%}input:focus,select:focus,textarea:focus{outline:2px solid #aac4d9;outline-offset:1px}textarea{min-height:70px;resize:vertical}label{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:600}button{border:0;background:none}small{font-size:12px}.primary,.secondary,.danger{padding:6px 12px;border-radius:3px;min-height:34px;font-weight:500;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.primary{background:var(--primary);color:white;border:1px solid #245580}.primary:hover{background:#204d74}.secondary{background:#fff;border:1px solid #bbb}.secondary:hover{background:#eee}.danger{background:#b94a48;color:#fff;border:1px solid #a4403e}.icon-button{height:32px;min-width:32px;font-size:23px}.icon-button:hover{background:#eee}.eyebrow{display:none}
.workspace{display:block}.sidebar{position:static;display:flex;align-items:center;gap:24px;width:100%;padding:10px 20px;background:#f5f5f5;border-bottom:1px solid #ccc;flex-wrap:wrap}.brand{font-size:18px;font-weight:700;line-height:1.2;color:#333;white-space:nowrap}.brand-mark,.brand small,.nav-caption,.nav-icon,.avatar,.user-button>span:last-child{display:none}nav{display:flex;gap:4px;flex:1;flex-wrap:wrap}nav a{padding:7px 12px;color:#444;border-radius:3px;border:1px solid transparent;white-space:nowrap}nav a:hover{background:#e8e8e8}nav a.active{background:#fff;border-color:#ccc;color:#1e5077;font-weight:600}.nav-count{font-size:11px;padding:1px 5px;border:1px solid #ccc;border-radius:3px;margin-left:5px;color:#555}.sidebar-bottom{display:flex;align-items:center;gap:15px}.environment{font-size:12px;color:#666}.status-dot{display:none}.user-button{padding:0;text-align:right}.user-button small{color:#286090;font-size:12px;display:block}.main-shell{width:100%;margin:0}.topbar{display:none}.main-content{padding:18px 20px;max-width:none}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.page-heading h1{font-size:22px;font-weight:600}.page-heading p{display:none}.heading-actions{display:flex;gap:8px}.metrics{display:flex;border:1px solid #ccc;background:#f8f8f8;flex-wrap:wrap;margin-bottom:15px}.metric{flex:1;min-width:180px;padding:9px 14px;border-right:1px solid #ddd}.metric:last-child{border-right:0}.metric-label{color:#555;font-size:12px;display:inline}.metric-value{display:inline;margin-left:12px;font-size:19px!important;font-weight:600;white-space:nowrap}.metric-detail{font-size:11px;color:#777;margin-top:3px}.metric-icon{display:none}.metric.warning .metric-value{color:#96631b}.metric.critical .metric-value{color:#b94a48}
.data-panel{border:1px solid #ccc;background:#fff}.panel-toolbar{display:flex;gap:8px;align-items:center;padding:12px;flex-wrap:wrap;background:#fafafa}.search-wrap{flex:1;min-width:240px;position:relative}.search-wrap input{width:100%;font-size:14px}.search-wrap>span,.search-wrap kbd{display:none}.panel-toolbar select{font-size:13px}.panel-subbar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:0 12px;border-top:1px solid #eee;border-bottom:1px solid #ccc;flex-wrap:wrap}.scope-tabs{display:flex;gap:16px}.scope-tabs button{padding:9px 0;border-bottom:2px solid transparent;font-size:13px;color:#666}.scope-tabs button.active{border-color:#286090;color:#286090;font-weight:600}.sort-control{display:flex;align-items:center;gap:7px;padding:4px 0}.sort-control label{font-size:12px;font-weight:400;color:#666}.sort-control select{font-size:12px;min-height:28px;padding:4px 7px}.list-region{overflow:auto;min-height:160px}table{width:100%;border-collapse:collapse;text-align:left;white-space:nowrap}th{padding:9px 12px;background:#eee;border-bottom:1px solid #ccc;font-weight:600;font-size:12px;color:#444}td{padding:10px 12px;border-bottom:1px solid #e0e0e0;font-size:13px}tr:last-child td{border-bottom:0}tbody tr{cursor:pointer}tbody tr:nth-child(even){background:#fafafa}tbody tr:hover{background:#edf3f8}.customer-cell{display:flex;align-items:center}.customer-initial{display:none}.customer-name{font-weight:600;font-size:14px;display:block;max-width:350px;overflow:hidden;text-overflow:ellipsis}.customer-host{font-size:12px;color:#666;display:block}.secondary-text{display:block;font-size:12px;color:#666}.amount{font-variant-numeric:tabular-nums;font-weight:500}.badge{font-size:12px;color:#397449;padding:2px 5px;border:1px solid #b9d0be;border-radius:2px;background:#f3f8f4;display:inline-block}.badge.soon{color:#8b5d14;background:#fff9ef;border-color:#ddc494}.badge.expired{color:#ae3937;background:#fff6f6;border-color:#ddb3b2}.badge.inactive,.badge.unset{color:#666;background:#f5f5f5;border-color:#ccc}.row-actions{display:flex;gap:6px}.row-actions button{border:1px solid #bbb;border-radius:3px;padding:4px 8px;font-size:12px;background:#fff;min-height:29px}.row-actions button:hover{background:#eee}.row-actions .row-more{font-size:18px;line-height:1;padding:2px 9px}.table-footer{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;border-top:1px solid #ccc;font-size:12px;color:#666}.pagination{display:flex;align-items:center;gap:12px}.pagination button{border:1px solid #bbb;width:28px;height:28px;border-radius:3px;font-size:20px;line-height:1}.workspace-foot{display:none}.empty-state{padding:40px 20px;text-align:center;white-space:normal}.empty-state h3{font-size:16px;margin-bottom:8px}.empty-state p{color:#666;margin:0 auto 14px;max-width:550px;font-size:13px}.spinner{width:20px;height:20px;border:2px solid #ddd;border-top-color:#286090;border-radius:50%;margin:20px auto;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.editor-dialog{border:1px solid #aaa;border-radius:4px;width:770px;max-width:calc(100vw - 24px);max-height:94vh;padding:0;color:var(--ink)}dialog::backdrop{background:#0005}.dialog-heading{padding:14px 18px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ccc;background:#f5f5f5}.dialog-heading h2{font-size:19px;font-weight:600}.editor-tabs{display:flex;gap:18px;padding:0 18px;border-bottom:1px solid #ccc}.editor-tabs button{padding:10px 0;border-bottom:2px solid transparent;font-size:13px;color:#666}.editor-tabs button.active{border-color:#286090;color:#286090;font-weight:600}.form-body{padding:18px;max-height:67vh;overflow:auto}.form-section{font-size:14px;font-weight:600;padding-bottom:7px;border-bottom:1px solid #ddd;margin:0 0 14px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px 18px;margin-bottom:20px}.full{grid-column:1/-1}.field-note{font-size:12px;color:#666;font-weight:400}.check-label{display:flex;flex-direction:row;align-items:center;margin-bottom:12px}.check-label input{min-height:0;width:16px;height:16px;accent-color:#286090}.form-actions{padding:12px 18px;display:flex;align-items:center;justify-content:flex-end;gap:8px;background:#f5f5f5;border-top:1px solid #ccc}.form-actions .push-left{margin-right:auto}.form-error{font-size:13px;color:#ae3937;margin-top:10px}.detail-strip{display:flex;gap:30px;flex-wrap:wrap;padding:12px;background:#f5f5f5;border:1px solid #ddd;margin-bottom:16px}.detail-strip small{display:block;color:#666}.detail-strip b{font-size:15px}.detail-list{display:grid;gap:8px}.detail-item{padding:10px 12px;border:1px solid #ddd;display:flex;align-items:center;justify-content:space-between;gap:12px}.detail-item small{display:block;color:#666}.confirmation{border:1px solid #aaa;border-radius:4px;padding:20px;width:430px;max-width:calc(100vw - 24px);color:var(--ink)}.confirmation h2{font-size:19px}.confirmation p{font-size:14px;color:#555;margin:13px 0 18px}.confirmation .form-actions{padding:12px 0 0;background:#fff}.toast-region{position:fixed;bottom:18px;right:18px;z-index:100;max-width:calc(100vw - 36px);display:grid;gap:8px}.toast{background:#fff;border:1px solid #94b39b;border-left:4px solid #397449;padding:12px 16px;border-radius:3px;box-shadow:0 2px 8px #0002;font-size:13px}.toast.error{border-color:#ddb3b2;border-left-color:#ae3937;color:#ae3937}.mobile-only{display:none}.login-layout{min-height:100vh;display:grid;place-items:center;background:#f5f5f5}.login-brand{display:none}.login-main{padding:24px;width:100%;max-width:410px}.login-card{display:grid;gap:16px;background:#fff;border:1px solid #ccc;padding:25px}.login-card h2{font-size:22px;font-weight:600}.login-card>p{font-size:13px;color:#666}.login-card small{color:#777;text-align:center;font-size:11px}.error-text{color:#ae3937!important}.error-text:empty{display:none}.startup-error{padding:30px;max-width:550px;margin:10vh auto;border:1px solid #ccc}.startup-error h2{font-size:20px}.startup-error p{margin:15px 0;color:#666}
@media(max-width:950px){.sidebar{gap:12px;padding:10px 14px}.sidebar-bottom{width:100%;justify-content:space-between;gap:8px;border-top:1px solid #ddd;padding-top:7px}.user-button small{display:inline;margin-left:10px}.metric{min-width:45%;border-bottom:1px solid #ddd}.metric:nth-child(2){border-right:0}.metric:nth-child(3),.metric:nth-child(4){border-bottom:0}.main-content{padding:14px}.customer-name{max-width:250px}.panel-toolbar select{flex:1}.search-wrap{flex-basis:100%}.page-heading{align-items:flex-start}.heading-actions{flex-shrink:0}}
@media(max-width:550px){.sidebar{display:block;padding:10px}.brand{display:block;margin-bottom:10px}nav{display:flex;flex-wrap:wrap;gap:3px}nav a{padding:5px 9px;font-size:13px}.sidebar-bottom{display:flex;margin-top:8px}.main-content{padding:12px 10px}.page-heading{flex-wrap:wrap}.page-heading h1{font-size:20px}.heading-actions{width:100%;justify-content:flex-end}.metric{padding:8px 10px;min-width:50%}.metric-label{font-size:11px}.metric-value{font-size:17px!important;margin-left:8px}.metric-detail{font-size:10px}.panel-toolbar{padding:10px}.panel-toolbar select{min-width:150px}.panel-subbar{padding:0 10px}.sort-control{width:100%;justify-content:flex-end}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}.dialog-heading{padding:12px}.form-body{padding:14px}.form-actions{padding:12px;flex-wrap:wrap}.editor-tabs{padding:0 12px;gap:14px}.editor-tabs button{font-size:12px}.table-footer{padding:8px 10px;gap:6px}.detail-strip{gap:18px}.customer-name{max-width:250px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}
/* Keep the controls visible and give the remaining viewport to the table. */
.workspace{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
.sidebar{flex:0 0 auto}
.main-shell{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.main-content{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.page-heading,.metrics,.demo-banner{flex-shrink:0}
.data-panel{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.panel-toolbar,.panel-subbar,.table-footer{flex-shrink:0}
.list-region{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-gutter:stable}
.list-region th{position:sticky;top:0;z-index:1;box-shadow:0 1px 0 #ccc}
.list-region th button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:0;text-align:left;font-weight:600;font-size:inherit;min-height:24px}
.list-region th button:hover{color:#286090}.sort-indicator{font-size:10px;color:#888}.list-region th[aria-sort="ascending"] .sort-indicator,.list-region th[aria-sort="descending"] .sort-indicator{color:#286090}
.list-region td{padding:5px 12px;line-height:1.3}
.user-button #user-name{display:flex;align-items:center;gap:10px;white-space:nowrap}
.user-button #user-name small{display:inline}
.metric-detail{display:none}
.page-title-row{display:flex;align-items:center;gap:18px}
.page-view-tabs{flex:none;gap:4px}
.page-view-tabs a{font-size:16px;padding:5px 12px}
.page-title-row .secondary{font-size:13px;min-height:30px;padding:4px 10px}
.list-region th:has([data-sort="contact"]){min-width:180px}
.list-region table:has(colgroup){table-layout:fixed;min-width:1050px}
.list-region table:has(colgroup) td:nth-child(-n+2){overflow:hidden;text-overflow:ellipsis}
.list-region table:has(colgroup) td:nth-child(2) .secondary-text{overflow:hidden;text-overflow:ellipsis}
.list-region table:has(colgroup) .customer-cell>div{min-width:0;width:100%}
.list-region table:has(colgroup) .customer-name,.list-region table:has(colgroup) .customer-host,.list-region table:has(colgroup) .branch-domain{overflow:hidden;text-overflow:ellipsis}
.list-region .customer-name{font-size:13px;line-height:1.3}
.list-region .customer-host,.list-region .secondary-text{font-size:12px;line-height:1.3}
.list-region .row-actions button{min-height:26px;padding:3px 8px}
.branch-domain{display:block;font-size:12px;line-height:1.3;color:#286090;text-decoration:none}
.branch-domain:hover{text-decoration:underline}
.customer-dialog{height:min(760px,94dvh);overflow:hidden}
.customer-dialog[open]{display:flex;flex-direction:column}
.customer-dialog .dialog-heading,.customer-dialog .editor-tabs,.customer-dialog .form-actions{flex-shrink:0}
.customer-dialog #editor-content,.customer-dialog #customer-form{display:flex;flex-direction:column;flex:1;min-height:0}
.customer-dialog .form-body{flex:1;min-height:0;max-height:none;overflow:auto}
.editor-dialog label{font-size:12px;font-weight:400;color:#777}
.editor-dialog label input,.editor-dialog label select,.editor-dialog label textarea{font-size:13px;color:var(--ink)}
.editor-tabs .activity-toggle{margin:0 0 0 auto;align-self:center;white-space:nowrap}
.payment-collect{margin-left:auto;align-self:flex-end}
.parent-popup{position:fixed;z-index:11;overflow:auto;background:white;border:1px solid #aaa;border-radius:3px;box-shadow:0 3px 10px #0002;padding:3px}
.parent-popup button{display:block;width:100%;text-align:left;padding:6px 9px;font-size:12px;color:#333}
.parent-popup button b{font-weight:500}.parent-popup button span{margin-left:8px;color:#777}
.parent-popup button:hover,.parent-popup button[aria-selected="true"]{background:#edf3f8}
.parent-popup p{padding:8px;color:#777;font-size:12px}
.customer-error{margin:0;padding:0 18px;flex-shrink:0}
.customer-error:empty{display:none}
.date-input{display:flex;position:relative;min-width:0}
.editor-dialog input[data-n0]{text-align:right;font-variant-numeric:tabular-nums}
.list-region td.amount{text-align:right}
.list-region th button[data-sort="amount"],.list-region th button[data-sort="price"]{justify-content:flex-end;text-align:right}
.date-input input{width:100%;padding-right:34px}
.date-input>button{position:absolute;right:1px;top:1px;bottom:1px;width:32px;font-size:16px;color:#666;border-left:1px solid #ddd}
.date-calendar{position:fixed;z-index:10;background:#fff;border:1px solid #aaa;border-radius:3px;padding:10px;box-shadow:0 3px 12px #0002;color:var(--ink);font-size:12px}
.calendar-heading{display:flex;gap:5px;align-items:center;margin-bottom:8px}
.calendar-heading select{flex:1;min-width:0;font-size:12px;padding:4px}
.calendar-heading input{width:76px;font-size:12px;padding:4px}
.calendar-heading>button{width:24px;font-size:22px}
.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.calendar-days>span{font-size:11px;color:#777;padding:5px 0}
.calendar-days>button{height:30px;border:1px solid transparent;border-radius:2px;font-size:12px}
.calendar-days>button:hover{background:#eee}
.calendar-days>button.today{border-color:#999}
.calendar-days>button.selected{background:#286090;color:white}
.calendar-footer{display:flex;justify-content:space-between;border-top:1px solid #ddd;margin-top:8px;padding-top:7px}
.calendar-footer button{font-size:12px;color:#286090;padding:4px}
.customer-primary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.customer-primary-grid .full{grid-column:span 2}
.customer-primary-grid .parent-link{grid-column:1/-1}
@media(max-width:550px){.customer-primary-grid{grid-template-columns:1fr}.customer-primary-grid .full{grid-column:auto}}
@media(max-height:550px){.main-content{padding-top:8px;padding-bottom:8px}.page-heading{margin-bottom:8px}.metrics{margin-bottom:8px}.metric{padding:5px 10px}.metric-detail{display:none}.panel-toolbar{padding:6px 10px}}
/* Phone entry keeps the footer visible while only the form body scrolls. */
@media(max-width:600px){
  .main-content{padding:8px;gap:0}
  .page-heading{flex-wrap:wrap;gap:6px;margin-bottom:8px}
  .page-view-tabs a{font-size:15px;min-height:40px;display:flex;align-items:center}
  .heading-actions{width:100%;display:flex;gap:6px}
  .heading-actions button{min-height:40px;font-size:12px;padding:6px 9px}
  .heading-actions #add-new{flex:1}
  .metrics{display:grid;grid-template-columns:1fr 1fr;margin-bottom:8px}
  .metric{min-width:0;padding:6px 8px}
  .metric-label{display:block;font-size:11px}
  .metric-value{display:block;margin:0;font-size:16px!important;white-space:normal;overflow-wrap:anywhere}
  .panel-toolbar{padding:8px;gap:6px}
  .search-wrap{min-width:0;flex-basis:100%}
  .panel-toolbar select{min-width:0;width:calc(50% - 3px);font-size:14px;min-height:40px}
  .search-wrap input{font-size:16px;min-height:40px}
  .list-region{scrollbar-gutter:auto}
  .list-region table{min-width:900px}
  .list-region .row-actions button{min-height:40px}
  .table-footer{padding:6px 8px}
  .editor-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;border-radius:0;overflow:hidden}
  .editor-dialog[open]{display:flex;flex-direction:column}
  .editor-dialog .dialog-heading{flex-shrink:0;padding:10px 12px}
  .dialog-heading>div{min-width:0}
  .dialog-heading h2{font-size:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .dialog-heading .icon-button{min-width:40px;height:40px;flex-shrink:0}
  .editor-dialog #editor-content,.editor-dialog #editor-content>form{display:flex;flex-direction:column;flex:1;min-height:0}
  .editor-dialog .form-body{flex:1;min-height:0;max-height:none;overflow:auto;padding:12px}
  .editor-dialog .form-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .editor-dialog .form-grid .full{grid-column:auto}
  .editor-dialog label input,.editor-dialog label select,.editor-dialog label textarea{font-size:16px;min-height:44px;width:100%}
  .editor-dialog label{font-size:12px}
  .editor-dialog .check-label input{width:20px;height:20px;min-height:20px}
  .editor-tabs{flex-wrap:wrap;gap:0 14px;padding:0 12px;flex-shrink:0}
  .editor-tabs button{min-height:44px;font-size:12px}
  .editor-tabs .activity-toggle{min-height:36px;margin-left:auto}
  .editor-dialog .form-actions{flex-shrink:0;flex-wrap:nowrap;padding:10px 8px calc(10px + env(safe-area-inset-bottom));gap:6px}
  .editor-dialog .form-actions button{min-height:44px;padding:6px 8px;font-size:12px}
  .date-input>button{width:44px}
  .editor-dialog .date-input input{padding-right:48px}
  .detail-strip{gap:12px}
  .detail-item{flex-wrap:wrap;gap:8px}
  .detail-item>div{min-width:0;overflow-wrap:anywhere}
  .detail-item button,.payment-collect{min-height:44px}
  .parent-popup button{min-height:44px;white-space:normal}
  .parent-popup button span{display:block;margin-left:0}
  .calendar-days>button{height:36px}
  .calendar-heading select,.calendar-heading input{font-size:16px}
  .login-main{padding:16px}
  .login-card input{font-size:16px;min-height:44px}
  .login-card button{min-height:44px}
}