:root{ /* accent palette (shared across skins) */ --blue:#3c8dbc; --blue-d:#357ca5; --green:#00a65a; --red:#dd4b39; --teal:#00c0ef; --purple:#605ca8; --blue-rgb:60,141,188; --purple-rgb:96,92,168; /* accent in r,g,b so rgba(var(--blue-rgb),a) recolours per theme */ --on-accent:#fff; /* themeable surface tokens (overridden per template at public/themes//app.css) */ --bg:#ecf0f5; --panel-bg:#ffffff; --text:#333333; --heading:#2c3e50; --muted:#888888; --page-title:#555555; --border:#e2e6ea; --grid-line:#c2c8d2; /* stronger, clearly-visible line for data grids */ --row-border:#f3f5f7; --hover:#f6f8fa; --sidebar-icon:#7b8a99; --sidebar-active-bg:#eef4f9; --sub-bg:#fafbfc; --sub-hover:#eef2f6; --sub-link:#5a6b7b; --input-bg:#ffffff; --input-border:#cccccc; --code-bg:#f4f4f4; --shadow:rgba(0,0,0,.06); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{font-family:'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.45} a{color:var(--blue)} code{background:var(--code-bg);padding:1px 5px;border-radius:3px;font-size:12px} .muted{color:var(--muted)} /* ============ plain pages (login / landing / error) ============ */ body.plain{background:var(--bg)} .topbar{display:flex;justify-content:space-between;align-items:center;background:var(--panel-bg);border-bottom:1px solid var(--border);padding:12px 22px} .topbar .brand{font-weight:700;color:var(--heading)} .topbar .tag{font-size:11px;color:var(--muted);font-weight:400;margin-left:6px} .topbar a{text-decoration:none} .container{max-width:980px;margin:34px auto;padding:0 16px} .foot{text-align:center;color:var(--muted);padding:22px;font-size:12px} .card{background:var(--panel-bg);border:1px solid var(--border);border-radius:4px;padding:24px;margin-bottom:18px;box-shadow:0 1px 1px var(--shadow);overflow-x:auto} .card.narrow{max-width:380px;margin:48px auto} .card h1{margin:0 0 14px;font-size:22px;color:var(--heading)} .btn{display:inline-block;background:var(--blue);color:var(--on-accent);border:none;border-radius:3px;padding:8px 16px;text-decoration:none;cursor:pointer;font-size:14px} .btn:hover{background:var(--blue-d)} .btn.ghost{background:var(--panel-bg);border:1px solid var(--border);color:var(--text)} .stack{display:flex;flex-direction:column;gap:12px;max-width:320px} .stack label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--page-title)} .stack input{padding:9px;border:1px solid var(--input-border);border-radius:3px;font-size:14px;background:var(--input-bg);color:var(--text)} .alert{background:#f2dede;color:#a94442;border:1px solid #ebccd1;padding:9px 12px;border-radius:3px;margin-bottom:12px} .status{list-style:none;padding:0} .pill{padding:2px 9px;border-radius:10px;font-size:11px;color:#fff} .pill.ok{background:var(--green)} .pill.bad{background:var(--red)} /* ============ BMS shell (authenticated) ============ */ body.app{background:var(--bg)} .navbar{position:fixed;top:0;left:0;right:0;height:50px;background:var(--panel-bg);border-bottom:1px solid var(--border); display:flex;justify-content:space-between;align-items:center;z-index:30;box-shadow:0 1px 2px var(--shadow)} .navbar-left{display:flex;align-items:center;gap:16px} .navbar-title{width:230px;font-weight:700;font-size:17px;color:var(--heading);padding:0 15px;line-height:50px; border-right:1px solid var(--border)} .sidebar-toggle{color:var(--blue);font-size:18px;text-decoration:none} .page-title{font-size:18px;color:var(--page-title)} .navbar-right{display:flex;align-items:center;gap:10px;padding-right:18px;color:var(--text);font-size:13px} .navbar-right .company{font-weight:700;color:var(--heading)} .navbar-right .sep{color:var(--muted)} .user-menu{position:relative} .user-menu>a{color:var(--blue);text-decoration:none;font-size:18px} .dropdown{position:absolute;right:0;top:34px;background:var(--panel-bg);border:1px solid var(--border);border-radius:4px; min-width:185px;box-shadow:0 3px 8px rgba(0,0,0,.15);display:none;z-index:40;overflow:hidden} .dropdown.show{display:block} .dropdown a,.dropdown button{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 14px; color:var(--text);text-decoration:none;background:none;border:none;cursor:pointer;font-size:13px} .dropdown a:hover,.dropdown button:hover{background:var(--hover)} .layout{display:flex;padding-top:50px} .sidebar{width:230px;background:var(--panel-bg);border-right:1px solid var(--border);position:fixed;top:50px;bottom:0;left:0; overflow-y:auto;z-index:20} .sidebar .nav{list-style:none;margin:0;padding:0} .sidebar .nav>li>a{display:flex;align-items:center;gap:11px;padding:12px 16px;color:var(--text);text-decoration:none; border-bottom:1px solid var(--row-border)} .sidebar .nav>li>a:hover{background:var(--hover);color:var(--blue)} .sidebar .nav>li>a.active{background:var(--sidebar-active-bg);color:var(--blue);border-left:3px solid var(--blue);padding-left:13px} .sidebar .nav>li>a>i.fa:first-child{width:18px;text-align:center;color:var(--sidebar-icon)} .sidebar .nav>li>a span{flex:1} .sidebar .caret{flex:none !important;font-size:13px;color:var(--muted);transition:transform .15s} .sidebar .has-sub.open .caret{transform:rotate(-90deg)} .sidebar .sub{list-style:none;margin:0;padding:0;display:none;background:var(--sub-bg)} .sidebar .has-sub.open .sub{display:block} .sidebar .sub li a{display:block;padding:9px 16px 9px 45px;color:var(--sub-link);text-decoration:none;font-size:13px; border-bottom:1px solid var(--row-border)} .sidebar .sub li a:hover{background:var(--sub-hover);color:var(--blue)} .sidebar .sub li a.active{background:var(--sidebar-active-bg);color:var(--blue);border-left:3px solid var(--blue);padding-left:42px;font-weight:600} .sidebar .has-sub.has-active>a.group{color:var(--blue)} .sidebar .has-sub.has-active>a.group>i.fa:first-child{color:var(--blue)} .content{margin-left:230px;flex:1;min-width:0;padding:18px 20px;min-height:calc(100vh - 50px)} body.sidebar-collapsed .sidebar{display:none} /* Reusable in-page modal (Final-Post form, Invoice Details iframe) */ .cm-modal{position:fixed;inset:0;background:rgba(0,0,0,.45);display:none;align-items:flex-start;justify-content:center;z-index:3500;padding:30px 12px;overflow:auto} .cm-modal.show{display:flex} .cm-modal-box{background:var(--card-bg,#fff);border-radius:8px;width:920px;max-width:96%;box-shadow:0 12px 40px rgba(0,0,0,.3);overflow:hidden;animation:cmpop .12s ease-out} @keyframes cmpop{from{transform:translateY(-8px);opacity:.6}to{transform:none;opacity:1}} .cm-modal-head{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border,#e3e6ec);font-weight:600} .cm-modal-x{background:none;border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--muted,#888)} .cm-modal-x:hover{color:var(--red)} .cm-modal-body{padding:14px 16px;max-height:82vh;overflow:auto} /* Grid action icons (Payment Receive / Invoice Details / Settle …) with native tooltips */ td.act-cell{white-space:nowrap;text-align:center} .act-ic{display:inline-block;font-size:15px;padding:3px 8px;color:var(--blue,#2f80ed);text-decoration:none;cursor:pointer} .act-ic:hover{color:#1b5fb0} /* In-app alert dialog (replaces native alert()) */ #app-alert{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:4000;padding:20px} #app-alert.show{display:flex} #app-alert .aa-box{background:var(--card-bg,#fff);border-radius:8px;min-width:300px;max-width:480px;box-shadow:0 12px 40px rgba(0,0,0,.3);overflow:hidden;animation:cmpop .12s ease-out} #app-alert .aa-head{padding:11px 16px;font-weight:600;border-bottom:1px solid var(--border,#e3e6ec)} #app-alert .aa-msg{padding:18px 16px;font-size:14px;color:var(--text);white-space:pre-wrap;line-height:1.5} #app-alert .aa-foot{padding:10px 16px;text-align:right;border-top:1px solid var(--border,#e3e6ec)} /* Global htmx data-loading overlay (shown on every htmx request: search, grids, etc.) */ #hx-loader{position:fixed;inset:0;background:rgba(255,255,255,.45);display:none;align-items:center;justify-content:center;z-index:3000} #hx-loader.show{display:flex} #hx-loader .hx-spin{width:44px;height:44px;border:4px solid rgba(0,0,0,.12);border-top-color:var(--blue,#2f80ed);border-radius:50%;animation:hxspin .7s linear infinite} @keyframes hxspin{to{transform:rotate(360deg)}} body.sidebar-collapsed .content{margin-left:0} /* dashboard two-column */ .dash{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .dash-main{flex:1;min-width:560px} .dash-side{width:340px} /* KPI stat cards (accent backgrounds — same across skins) */ .cards{display:flex;flex-wrap:wrap;gap:16px} .stat{flex:1 1 230px;border-radius:4px;color:var(--on-accent);overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.12)} .stat-body{display:flex;align-items:center;justify-content:space-between;padding:14px 18px 4px} .stat-icon{font-size:42px;opacity:.5} .num{font-size:42px;font-weight:700;line-height:1} .stat-title{padding:0 18px 14px;font-size:15px} .stat-more{display:flex;justify-content:space-between;align-items:center;padding:8px 18px; background:rgba(0,0,0,.12);color:var(--on-accent);text-decoration:none;font-size:13px} .stat-more:hover{background:rgba(0,0,0,.2)} .stat.green{background:var(--green)} .stat.red{background:var(--red)} .stat.blue{background:var(--blue)} .stat.teal{background:var(--teal)} .stat.purple{background:var(--purple)} /* panels */ .panel{background:var(--panel-bg);border:1px solid var(--border);border-radius:4px;margin-bottom:18px;overflow:hidden; box-shadow:0 1px 1px var(--shadow)} .panel-head{background:var(--blue);color:var(--on-accent);padding:10px 14px;font-size:14px;font-weight:600} .panel-row{display:flex;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--row-border);color:var(--text)} .panel-row:last-child{border-bottom:none} .panel-row .v{font-weight:600;color:var(--heading)} .note{margin-top:14px;font-size:12px} .app-footer{text-align:center;color:var(--muted);font-size:12px;padding:20px 0 6px;margin-top:24px;border-top:1px solid var(--border)} @media(max-width:900px){ .dash-main{min-width:100%} .dash-side{width:100%} .navbar-right .company,.navbar-right .sep{display:none} } /* ---- Unified data-grid theme: strong, consistent borders + header across ALL grids, pages and skins. Applies to the grid classes (.rec-grid, .inv-grid) and any DataTables-initialised table. ---- */ table.rec-grid,table.inv-grid,table.items,table.dataTable{border-collapse:separate!important;border-spacing:0} /* separate = recurring-invoice-list's original (heavier) borders — standardized app-wide */ table.rec-grid th,table.rec-grid td, table.inv-grid th,table.inv-grid td, table.items th,table.items td, table.dataTable th,table.dataTable td{border:1px solid var(--grid-line)!important;padding:4px 8px!important} /* tight rows */ table.rec-grid thead th,table.inv-grid thead th,table.items thead th,table.dataTable thead th{ background:var(--hover)!important;color:var(--heading)!important;border-bottom:2px solid var(--grid-line)!important;font-weight:600} table.rec-grid tbody tr:hover td,table.inv-grid tbody tr:hover td,table.items tbody tr:hover td,table.dataTable tbody tr:hover td{background:var(--hover)!important} /* Action-column icons (edit / delete / remove) — consistent app-wide */ td a i.fa-pencil,td a i.fa-trash{font-size:15px;margin:0 4px;cursor:pointer} td a i.fa-pencil{color:var(--blue)} td a i.fa-trash{color:var(--red)} td a:hover i.fa-pencil,td a:hover i.fa-trash{opacity:.72} /* Reusable searchable combo (Chosen-style) — driven by window.makeCombo in app.js */ .combo{position:relative;font-size:13px;display:inline-block} .combo-ctl{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid var(--input-border);border-radius:3px;background:var(--input-bg);color:var(--text);cursor:pointer;min-height:30px} .combo-ctl .combo-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .combo-ph{color:var(--muted)} .combo-car{color:var(--muted);font-size:11px} .combo-panel{display:none;position:fixed;z-index:1000;background:var(--panel-bg,#fff);border:1px solid var(--border);border-radius:4px;box-shadow:0 6px 18px rgba(0,0,0,.22);max-height:300px;overflow:hidden} .combo.open .combo-panel{display:block} .combo-search{padding:6px;border-bottom:1px solid var(--border)} .combo-input{width:100%;padding:5px 8px;border:1px solid var(--input-border);border-radius:3px;background:var(--input-bg);color:var(--text);font-size:13px;box-sizing:border-box} .combo-list{list-style:none;margin:0;padding:0;max-height:248px;overflow:auto} .combo-list li{padding:6px 10px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .combo-list li:hover{background:var(--hover)} .combo-list li.sel{background:rgba(var(--blue-rgb),.1);color:var(--blue);font-weight:600} .combo-list li.none{color:var(--muted);cursor:default} /* Breathing room between the DataTables Show/Filter controls and the grid below them */ .dataTables_wrapper .dataTables_length,.dataTables_wrapper .dataTables_filter{margin-bottom:12px} .dataTables_wrapper table.dataTable{clear:both;margin-top:2px} /* ===================================================================== 2026 chrome — modern top bar + sectioned sidebar. Overrides the base chrome above; themes only swap CSS variables so this stays fully themeable. ===================================================================== */ :root{ --chrome-h:64px; --side-w:236px; } /* ---- top bar ---- */ .navbar{height:var(--chrome-h);padding:0;box-shadow:0 1px 4px var(--shadow);z-index:40} .navbar-left{gap:0;height:var(--chrome-h);min-width:0;flex:1} .brand{display:flex;align-items:center;gap:11px;width:var(--side-w);height:var(--chrome-h);padding:0 14px; border-right:1px solid var(--border);box-sizing:border-box;text-decoration:none;flex:none} .brand .brand-logo{height:36px;max-width:150px;object-fit:contain} .brand .brand-mark{width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex:none} .brand .brand-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0} .brand .brand-title{font-weight:700;font-size:14.5px;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .brand .brand-sub{font-size:9px;letter-spacing:1.6px;color:var(--muted);text-transform:uppercase} .brand-haslogo .brand-logo{max-width:138px} .brand-haslogo .brand-sub{border-left:1px solid var(--border);padding-left:10px;margin-left:2px;white-space:nowrap} .sidebar-toggle{font-size:17px;color:var(--page-title);margin:0 4px 0 14px} .nav-crumb{display:flex;align-items:center;gap:11px;min-width:0} .nav-crumb .crumb-ico{width:34px;height:34px;border-radius:9px;background:var(--hover);color:var(--blue); display:flex;align-items:center;justify-content:center;font-size:15px;flex:none} .nav-crumb .crumb-txt{display:flex;flex-direction:column;line-height:1.2;min-width:0} .nav-crumb .crumb-title{font-size:18px;font-weight:700;color:var(--heading);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nav-crumb .crumb-sub{font-size:9.5px;letter-spacing:1.3px;text-transform:uppercase;color:var(--muted)} .navbar-right{gap:14px;padding-right:18px} .company-pill{display:inline-flex;align-items:center;gap:8px;background:var(--hover);border:1px solid var(--border); border-radius:20px;padding:6px 14px;font-weight:600;color:var(--heading);font-size:12.5px;white-space:nowrap} .company-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px rgba(0,166,90,.16)} .user-chip{display:flex;align-items:center;gap:9px;text-decoration:none} .user-chip .avatar{width:37px;height:37px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--purple)); color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:none} .user-chip .who{display:flex;flex-direction:column;line-height:1.18} .user-chip .who .nm{font-weight:600;color:var(--heading);font-size:13px;white-space:nowrap} .user-chip .who .role{font-size:11px;color:var(--muted);white-space:nowrap} .user-chip .fa-caret-down{color:var(--muted);font-size:13px} .user-menu .dropdown{top:54px} /* ---- layout offsets for the taller bar ---- */ .layout{padding-top:var(--chrome-h)} .content{margin-left:var(--side-w);min-height:calc(100vh - var(--chrome-h));display:flex;flex-direction:column} .content-body{flex:1 0 auto;min-width:0} /* grows so the footer is pushed to the bottom on short pages */ .app-footer{flex:none} /* ---- sidebar (sectioned + rounded items) ---- */ .sidebar{width:var(--side-w);top:var(--chrome-h);padding:6px 10px 18px} .sidebar .nav{list-style:none;margin:0;padding:0} .sidebar .nav ul{list-style:none;margin:0 0 6px;padding:0} .sidebar .nav-section{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700;padding:14px 12px 5px} .sidebar .nav li{position:relative} .sidebar .nav li>a{display:flex;align-items:center;gap:11px;padding:9px 12px;margin:2px;border-radius:9px;color:var(--text);text-decoration:none;font-size:13.5px} .sidebar .nav li>a:hover{background:var(--hover);color:var(--blue)} .sidebar .nav li>a>i.fa:first-child{width:18px;text-align:center;color:var(--sidebar-icon);font-size:15px} .sidebar .nav li>a span{flex:1} .sidebar .nav li>a.active{background:var(--sidebar-active-bg);color:var(--blue);font-weight:600;box-shadow:inset 3px 0 0 var(--blue)} .sidebar .nav li>a.active>i.fa:first-child{color:var(--blue)} .sidebar .caret{flex:none !important;font-size:12px;color:var(--muted);transition:transform .15s;margin-left:auto} .sidebar .has-sub.open>a .caret{transform:rotate(-90deg)} .sidebar .has-sub.has-active>a.group,.sidebar .has-sub.has-active>a.group>i.fa:first-child{color:var(--blue)} .sidebar .sub{list-style:none;margin:1px 0 3px;padding:0;display:none;background:transparent} .sidebar .has-sub.open>.sub{display:block} .sidebar .sub li a{position:relative;display:block;padding:8px 12px 8px 36px;color:var(--sub-link);text-decoration:none;font-size:12.8px;border-radius:9px;margin:1px 4px} .sidebar .sub li a::before{content:'';position:absolute;left:17px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:var(--sidebar-icon);opacity:.55;transition:background .12s,opacity .12s} .sidebar .sub li a:hover{background:var(--sub-hover);color:var(--blue)} .sidebar .sub li a:hover::before{background:var(--blue);opacity:1} .sidebar .sub li a.active{background:var(--sidebar-active-bg);color:var(--blue);font-weight:600} .sidebar .sub li a.active::before{background:var(--blue);opacity:1} @media(max-width:900px){ .brand .brand-txt,.nav-crumb .crumb-sub,.company-pill,.user-chip .who{display:none} .brand{width:auto} } /* ---- 2026 dashboard: KPI cards + client composition + summary/alert panels ---- */ .dash2{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap} .dash2-main{flex:1;min-width:560px;display:flex;flex-direction:column;gap:18px} .dash2-side{width:344px;display:flex;flex-direction:column;gap:18px} .kpis{display:grid;grid-template-columns:1fr 1fr;gap:16px} .kpi{display:block;background:var(--panel-bg);border:1px solid var(--border);border-left:4px solid var(--blue);border-radius:13px;padding:16px 18px;text-decoration:none;box-shadow:0 1px 3px var(--shadow);transition:transform .12s,box-shadow .12s} .kpi:hover{transform:translateY(-2px);box-shadow:0 8px 20px var(--shadow)} .kpi-top{display:flex;align-items:center;justify-content:space-between} .kpi-ico{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px} .kpi-num{font-size:34px;font-weight:800;color:var(--heading);line-height:1} .kpi-title{margin-top:11px;font-size:14px;font-weight:600;color:var(--heading)} .kpi-foot{display:flex;align-items:center;justify-content:space-between;margin-top:12px;padding-top:10px;border-top:1px solid var(--row-border)} .kpi-tag{font-size:9.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-weight:700} .kpi-more{font-size:12px;color:var(--blue);font-weight:600;white-space:nowrap} .kpi-green{border-left-color:var(--green)} .kpi-green .kpi-ico{background:rgba(0,166,90,.12);color:var(--green)} .kpi-red{border-left-color:var(--red)} .kpi-red .kpi-ico{background:rgba(221,75,57,.12);color:var(--red)} .kpi-blue{border-left-color:var(--blue)} .kpi-blue .kpi-ico{background:rgba(var(--blue-rgb),.12);color:var(--blue)} .kpi-teal{border-left-color:var(--teal)} .kpi-teal .kpi-ico{background:rgba(0,192,239,.14);color:var(--teal)} .kpi-purple{border-left-color:var(--purple)} .kpi-purple .kpi-ico{background:rgba(var(--purple-rgb),.14);color:var(--purple)} .panel2{background:var(--panel-bg);border:1px solid var(--border);border-radius:13px;box-shadow:0 1px 3px var(--shadow);overflow:hidden} .panel2-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;font-weight:700;color:var(--heading);font-size:14px;border-bottom:1px solid var(--border)} .panel2-head>span:first-child i{color:var(--blue);margin-right:7px} .panel2-body{padding:8px 16px 14px} .compo-total{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:600;color:var(--green);background:rgba(0,166,90,.1);border-radius:20px;padding:4px 12px;white-space:nowrap} .compo-row{padding:9px 0} .compo-label{display:flex;align-items:center;font-size:13px;color:var(--text);margin-bottom:7px} .compo-dot{width:9px;height:9px;border-radius:50%;margin-right:8px;flex:none} .compo-val{margin-left:auto;font-weight:700;color:var(--heading)} .compo-bar{height:9px;border-radius:6px;background:var(--hover);overflow:hidden} .compo-bar span{display:block;height:100%;border-radius:6px;min-width:3px;transition:width .4s} .dot-blue,.bar-blue{background:var(--blue)} .dot-teal,.bar-teal{background:var(--teal)} .dot-red,.bar-red{background:var(--red)} .dot-green,.bar-green{background:var(--green)} .sum-row{display:flex;align-items:center;gap:11px;padding:9.5px 0;border-bottom:1px solid var(--row-border);font-size:13px} .sum-row:last-child{border-bottom:none} .sum-n{width:23px;height:23px;border-radius:7px;background:var(--hover);color:var(--page-title);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none} .sum-label{flex:1;color:var(--text)} .sum-v{font-weight:700;color:var(--heading)} .alert-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-bottom:1px solid var(--row-border);text-decoration:none} .alert-row:last-child{border-bottom:none} .alert-row:hover .alert-nm{color:var(--blue)} .alert-ico{width:35px;height:35px;border-radius:10px;background:rgba(var(--blue-rgb),.1);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:15px;flex:none} .alert-txt{flex:1;display:flex;flex-direction:column;line-height:1.3} .alert-nm{font-weight:600;color:var(--heading);font-size:13px} .alert-sub{font-size:11px;color:var(--muted)} .alert-pill{font-size:11px;font-weight:700;color:#b07d00;background:rgba(255,193,7,.16);border-radius:20px;padding:4px 11px;white-space:nowrap} .alert-pill.zero{color:var(--muted);background:var(--hover)} @media(max-width:900px){ .dash2-main{min-width:100%} .dash2-side{width:100%} .kpis{grid-template-columns:1fr} } /* ---- System Status tiles (SSL / Domain / Disk / CPU) ---- */ .sys-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .sys-tile{border:1px solid var(--border);border-radius:12px;padding:13px 14px;background:var(--panel-bg)} .sys-top{display:flex;align-items:center;justify-content:space-between} .sys-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:16px;background:var(--hover);color:var(--page-title)} .sys-dot{width:10px;height:10px;border-radius:50%;background:var(--muted)} .sys-val{font-size:21px;font-weight:800;color:var(--heading);margin-top:9px;line-height:1} .sys-label{font-size:12px;color:var(--page-title);font-weight:600;margin-top:3px} .sys-bar{height:7px;border-radius:5px;background:var(--hover);overflow:hidden;margin-top:8px} .sys-bar span{display:block;height:100%;border-radius:5px;background:var(--muted)} .sys-sub{font-size:11px;color:var(--muted);margin-top:7px} .sys-ok .sys-dot{background:var(--green);box-shadow:0 0 0 3px rgba(0,166,90,.16)} .sys-ok .sys-ico{color:var(--green);background:rgba(0,166,90,.1)} .sys-ok .sys-bar span{background:var(--green)} .sys-warn .sys-dot{background:#e6a100;box-shadow:0 0 0 3px rgba(230,161,0,.16)} .sys-warn .sys-ico{color:#b98600;background:rgba(230,161,0,.12)} .sys-warn .sys-bar span{background:#e6a100} .sys-crit .sys-dot{background:var(--red);box-shadow:0 0 0 3px rgba(221,75,57,.16)} .sys-crit .sys-ico{color:var(--red);background:rgba(221,75,57,.1)} .sys-crit .sys-bar span{background:var(--red)} @media(max-width:900px){ .sys-grid{grid-template-columns:repeat(2,1fr)} } /* ===================================================================== Global new-theme + compact pass — rounds & tightens EVERY page built from the shared .card / .cm-input / .btn building blocks. Pages with their own container classes (dashboard, profile, change-password, client-manage…) are unaffected; pages that redefine .card in their own