*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:#f4f7fa;color:#29465d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:13px;line-height:1.5}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit}.shell{display:grid;grid-template-columns:245px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;background:#0b263d;color:#d6e1ea;padding:17px 13px;display:flex;flex-direction:column;z-index:40}.brand{display:grid;gap:6px;padding:8px}.brand>span{display:flex;align-items:center;justify-content:center;height:60px;padding:8px;background:#fff;border-radius:11px}.brand img{width:100%;height:100%;object-fit:contain}.brand small{text-align:center;font-size:12px;font-weight:900;letter-spacing:.14em;color:#87a7bf}.sidebar nav{display:grid;gap:4px;margin-top:18px}.sidebar nav a{display:flex;align-items:center;gap:10px;min-height:45px;padding:10px 12px;border-radius:10px;font-size:12px;font-weight:750}.sidebar nav a:hover,.sidebar nav a.on{background:#133b58;color:#fff}.sideuser{margin-top:auto;padding:12px 9px;border-top:1px solid #21445e;display:grid;gap:2px}.sideuser strong{font-size:12px}.sideuser small{font-size:12px;color:#8ca5b8}.sideuser button{margin-top:8px;border:0;background:transparent;color:#b6c8d5;font-size:12px;padding:6px 0;cursor:pointer}.main{min-width:0}.main>header{height:72px;padding:0 24px;background:#fff;border-bottom:1px solid #dfe7ed;display:flex;align-items:center;gap:12px;position:sticky;top:0;z-index:30}.main>header>#menu{display:none;width:44px;height:44px;border:1px solid #dbe4eb;border-radius:10px;background:#fff}.mobile-logo{display:none}.headtitle{min-width:0;flex:1}.headtitle small{font-size:11.5px;font-weight:900;color:#8b99a6;letter-spacing:.07em}.headtitle h1{font-size:20px;margin:1px 0 0;color:#18344d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.langs button{width:38px;height:38px;border:1px solid #dbe4eb;border-radius:9px;background:#fff;color:#486176;font-size:12px;font-weight:850}.newbtn,.primary,.secondary,.danger{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 14px;border-radius:10px;font-size:12px;font-weight:850;border:0;cursor:pointer}.newbtn,.primary{background:#173d5d;color:#fff}.secondary{background:#fff;border:1px solid #d3dee7;color:#496176}.danger{background:#b33e51;color:#fff}.primary:disabled,.secondary:disabled{opacity:.45;cursor:not-allowed}.main>main{padding:18px 22px 50px;max-width:1600px;margin:auto}.card{background:#fff;border:1px solid #dfe7ed;border-radius:16px;box-shadow:0 6px 18px rgba(18,42,64,.035)}.flash{padding:12px 14px;border-radius:10px;margin-bottom:12px;background:#eef6ff;color:#315d92;font-size:12px}.flash.error{background:#fff1f3;color:#a33f51}.flash.success{background:#eef9f4;color:#14785b}.kicker{font-size:11.5px;font-weight:900;letter-spacing:.09em;color:#47719b}.hero{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;margin-bottom:13px;overflow:hidden}.hero.compact{padding:20px 23px}.hero h2{font-size:28px;letter-spacing:-.03em;margin:5px 0 5px;color:#18344d}.hero p{margin:0;max-width:850px;color:#748696;font-size:12px;line-height:1.6}.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:13px}.kpis article{padding:15px 16px;border:1px solid #dfe7ed;border-radius:14px;background:#fff}.kpis small{font-size:11.5px;font-weight:900;color:#8d9aa6;letter-spacing:.08em}.kpis strong{display:block;margin-top:3px;font-size:26px;color:#18344d}.dashgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.panel{overflow:hidden}.panel>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #e5ecf1}.panel h3{margin:0;font-size:16px}.panel>header a{font-size:12px;color:#35679b;font-weight:800}.moneycards{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;padding:15px}.moneycards>div{padding:14px;border-radius:12px;background:#f6f9fb}.moneycards small{font-size:12px;color:#8393a1;font-weight:900}.moneycards strong{display:block;font-size:23px}.risklist{display:grid}.risklist>a{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid #edf1f4}.risklist strong{font-size:12px}.risklist small{display:block;font-size:12px;color:#8493a0}.risklist b{font-size:12px}.riskdot{width:9px;height:9px;border-radius:50%;background:#ddb04d}.riskdot.suspend{background:#c94b60}.recent{margin-top:13px}.table{overflow-x:auto}.thead,.trow{display:grid;grid-template-columns:1.1fr 1.4fr .9fr .9fr .9fr .8fr;gap:12px;align-items:center;min-width:760px}.thead{padding:10px 15px;background:#f7f9fb;border-bottom:1px solid #e5ebf0;color:#8493a0;font-size:11.5px;font-weight:900;text-transform:uppercase;letter-spacing:.05em}.trow{padding:12px 15px;border-bottom:1px solid #edf1f4;font-size:12.5px}.trow:hover{background:#fbfdff}.status{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:5px 7px;border-radius:999px;font-size:11.5px;font-weight:900;text-transform:uppercase}.status.active,.status.paid{background:#e8f7f0;color:#137c5c}.status.suspended,.status.overdue{background:#fff0f2;color:#ae4457}.status.draft{background:#eff2f5;color:#6b7a87}.status.sent,.status.partial{background:#edf3ff;color:#315eaf}.status.closed,.status.cancelled{background:#f0f1f2;color:#717b84}.filters{display:grid;grid-template-columns:minmax(260px,1fr) 180px 90px;gap:8px;padding:11px;margin-bottom:12px}.filters input,.filters select,.field input,.field select,.field textarea,.authcard input,.authcard select,.assignform input,.assignform select,.actionpanel input,.actionpanel select,.settingscard input,.settingscard select,.settingscard textarea{width:100%;min-height:46px;padding:9px 11px;border:1px solid #d5e0e8;border-radius:9px;background:#fff;color:#344e64;font-size:12px;outline:none}.filters button{border:0;border-radius:9px;background:#173d5d;color:#fff;font-size:12px;font-weight:850}.cards,.servicegrid{display:grid;gap:9px}.clientcard,.servicecard{display:grid;align-items:center;gap:12px;padding:14px 15px}.clientcard{grid-template-columns:42px 1fr auto}.avatar,.serviceicon{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#edf3ff;color:#315eaf;font-weight:900}.clientcard h3,.servicecard h3{margin:0 0 2px;font-size:14px}.clientcard p,.servicecard p{margin:0;color:#778998;font-size:12px}.clientcard small,.servicecard small{font-size:12px;color:#8b98a4}.clientright{display:grid;justify-items:end;gap:6px}.warn,.watch{font-size:11.5px}.warn{color:#b54052}.watch{color:#986918}.servicegrid{grid-template-columns:repeat(2,1fr)}.servicecard{grid-template-columns:42px 1fr auto}.servicecard>strong{font-size:14px}.formcard,.invoiceform{max-width:1150px;margin:auto;overflow:hidden}.formcard>header,.invoiceform>header{display:flex;align-items:center;gap:12px;padding:20px 22px;border-bottom:1px solid #e4ebf0}.formcard>header>span{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#edf3ff}.formcard h2,.invoiceform h2{margin:4px 0 0;font-size:22px}.formcard form,.invoiceform>form{padding:18px}.formgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.field{display:grid;gap:5px}.field.span2{grid-column:1/-1}.field label{font-size:12px;font-weight:800;color:#4c6376}.field em{font-size:12px;color:#b44355}.formcard footer,.invoiceform footer{display:flex;justify-content:flex-end;gap:8px;margin-top:18px;padding-top:15px;border-top:1px solid #e4ebf0}.detailhero,.invoicehero{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px;margin-bottom:13px}.detailhero h2,.invoicehero h2{margin:4px 0;font-size:27px}.detailhero p,.invoicehero p{margin:0;color:#778a99;font-size:12px}.actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.alertcard{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:13px;padding:14px 16px;margin-bottom:13px;background:#fff9ec;border-color:#ecd6a7}.alertcard>span{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:#fff0cc;color:#996714}.alertcard h3{margin:0;font-size:14px}.alertcard p{margin:3px 0 0;font-size:12px}.detailgrid,.invoicegrid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}.detailgrid .panel{padding-bottom:14px}.detailgrid dl{margin:0;padding:8px 16px}.detailgrid dl>div{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:8px 0;border-bottom:1px solid #edf1f4}.detailgrid dt{font-size:12px;color:#8393a1}.detailgrid dd{margin:0;font-size:12px;font-weight:700}.assigned{padding:8px 15px}.assigned>div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid #edf1f4}.assigned strong{font-size:12px}.assigned small{display:block;font-size:12px;color:#8192a0}.assignform{padding:14px 15px;margin:5px 14px;background:#f8fafc;border-radius:11px}.assignform h4{font-size:13px;margin:0 0 8px}.assignform p,.actionpanel p,.settingscard p{margin:8px 0}.clientinv{grid-template-columns:1.2fr .8fr .9fr .8fr .7fr}.lines{margin-top:20px;border-top:1px solid #e4ebf0;padding-top:16px}.linehead{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.linehead h3{font-size:15px;margin:0}.line-row{display:grid;grid-template-columns:1.1fr 2fr .55fr .8fr .45fr;gap:8px;padding:10px;border:1px solid #e0e7ed;border-radius:11px;margin-bottom:8px;background:#fbfcfd}.invoicegrid{grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr)}.invoicepaper{padding:20px}.billto>span{font-size:11.5px;font-weight:900;color:#8494a2}.billto h3{font-size:16px;margin:3px 0}.billto p{font-size:12px;color:#718493;line-height:1.6}.linesview{margin-top:16px}.linesview .thead,.linesview .trow{grid-template-columns:2fr .5fr .8fr .8fr;min-width:0}.totals{display:grid;justify-content:end;margin-top:16px}.totals>div{display:grid;grid-template-columns:130px 150px;gap:10px;padding:6px 0;font-size:12px}.totals b{text-align:right}.totals .grand,.totals .balance{font-size:14px;font-weight:900;border-top:1px solid #dce5eb}.totals .balance{color:#2457e6}.sidepanels{display:grid;align-content:start;gap:13px}.actionpanel{padding:16px}.actionpanel h3{font-size:14px;margin:0 0 10px}.actionpanel form{display:grid;gap:7px;margin-bottom:8px}.actionpanel small{display:block;margin:6px 0 10px;color:#8796a3;font-size:12px}.comms{display:grid;padding:8px 15px}.comms>div{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid #edf1f4}.channel{display:grid;place-items:center;width:48px;padding:5px;border-radius:7px;background:#edf3ff;color:#315eaf;font-size:11.5px;font-weight:900}.comms strong{font-size:12px}.comms small{display:block;font-size:12px;color:#8191a0}.compliance-list{display:grid;gap:9px}.compliance-card{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:13px;padding:15px}.riskbig{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#fff3df;color:#9a6817}.riskbig.suspend{background:#fff0f2;color:#b13e53}.compmain h3{margin:0 0 3px;font-size:14px}.compmain p{margin:0;color:#748796;font-size:12px}.chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}.chips a{padding:5px 7px;border-radius:7px;background:#f3f6f8;color:#5c7284;font-size:11.5px}.compactions{display:grid;justify-items:end;gap:6px}.recommend,.watch{padding:5px 7px;border-radius:7px;font-size:11.5px;font-weight:900}.recommend{background:#fff0f2;color:#b13e53}.watch{background:#fff3df;color:#956313}.settingsgrid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.settingscard{padding:17px}.settingscard h3{font-size:15px;margin:0 0 10px}.settingscard form p{display:grid;gap:5px}.settingscard label{font-size:12px;font-weight:800}.mailsettings{grid-column:1/-1}.empty{padding:24px;color:#8494a1;font-size:12px;text-align:center}.authbody{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(145deg,#0b263d,#163f5e)}.authcard{width:min(440px,100%);padding:27px;background:#fff;border-radius:18px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.authlogo{display:grid;justify-items:center;gap:4px;margin-bottom:22px}.authlogo img{width:220px;max-width:80%;height:auto}.authlogo span{font-size:12px;font-weight:900;letter-spacing:.14em;color:#69869d}.authcard h1{font-size:27px;margin:5px 0}.authcard>p{font-size:12px;color:#748797}.authcard form p{display:grid;gap:5px}.authcard label{font-size:12px;font-weight:800}.authcard .primary{width:100%;margin-top:8px}.setup-link{display:block;text-align:center;margin-top:16px;font-size:12px;color:#6a8194}#veil{display:none}
@media(max-width:1000px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-265px;width:255px;transition:left .2s}.navopen .sidebar{left:0}.navopen #veil{display:block;position:fixed;inset:0;background:#07172499;z-index:35}.main>header>#menu{display:grid;place-items:center}.mobile-logo{display:flex;width:98px;height:40px;padding:5px;background:#fff;border:1px solid #dce5eb;border-radius:8px}.mobile-logo img{width:100%;object-fit:contain}.headtitle small{display:none}.dashgrid,.detailgrid,.settingsgrid{grid-template-columns:1fr}.invoicegrid{grid-template-columns:1fr}.servicegrid{grid-template-columns:1fr}.line-row{grid-template-columns:1fr 1.4fr .5fr .8fr}.line-row .delete{grid-column:4}.kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.main>header{height:64px;padding:0 10px;gap:7px}.headtitle{display:none}.langs{margin-left:auto}.newbtn{width:44px;padding:0}.newbtn span{display:none}.main>main{padding:12px 9px 38px}.hero,.detailhero,.invoicehero{align-items:flex-start;flex-direction:column;padding:18px 15px}.hero h2,.detailhero h2,.invoicehero h2{font-size:23px}.hero .primary{width:100%}.kpis{grid-template-columns:1fr 1fr}.formgrid{grid-template-columns:1fr}.field.span2{grid-column:auto}.filters{grid-template-columns:1fr}.filters input,.filters select,.field input,.field select,.field textarea,.authcard input,.authcard select,.assignform input,.assignform select,.actionpanel input,.actionpanel select,.settingscard input,.settingscard select,.settingscard textarea{font-size:16px}.clientcard{grid-template-columns:38px 1fr}.clientright{grid-column:2;justify-items:start}.line-row{grid-template-columns:1fr}.line-row .delete{grid-column:auto}.formcard form,.invoiceform>form{padding:13px}.formcard footer,.invoiceform footer{display:grid;grid-template-columns:1fr 1fr}.compliance-card{grid-template-columns:40px 1fr}.compactions{grid-column:1/-1;justify-items:stretch}.compactions>*{width:100%}.detailgrid dl>div{grid-template-columns:100px 1fr}.thead,.trow{font-size:12px}.authcard{padding:22px 16px}.totals>div{grid-template-columns:110px 135px}}
@media(max-width:430px){.kpis{grid-template-columns:1fr}.mobile-logo{width:82px}.formcard footer,.invoiceform footer{grid-template-columns:1fr}.moneycards{grid-template-columns:1fr}}
/* === Asset-based pricing + live invoice totals === */
.invoiceform-v2>header{justify-content:space-between;gap:22px}
.invoiceform-v2>header>div:first-child{min-width:0}
.invoiceform-v2>header p{margin:5px 0 0;color:#788a99;font-size:12px}
.pricing-key{display:grid;gap:6px;min-width:330px;padding:11px 13px;border:1px solid #d8e4ec;border-radius:12px;background:#f7fafc}
.pricing-key span{font-size:12px;color:#63798b;line-height:1.4}
.pricing-key b{display:inline-block;min-width:72px;color:#204967;font-size:12px}
.asset-category-field{padding:11px;border:1px solid #d7e3ec;border-radius:11px;background:#f7fbff}
.asset-category-field small,.invoice-meta-grid .field small{font-size:12px;color:#74889a;line-height:1.45}
.linehead>div{min-width:0}
.linehead p{margin:3px 0 0;color:#7d8e9c;font-size:12px}
.line-row .price input{font-weight:850;color:#183f5d;background:#f7fafc}
.live-total-card{display:grid;grid-template-columns:minmax(180px,.7fr) minmax(320px,1fr);gap:30px;align-items:start;margin-top:17px;padding:17px 19px;border:1px solid #d9e3ea;border-radius:14px;background:linear-gradient(135deg,#fbfdff,#f4f8fb)}
.live-total-title{display:grid;gap:4px}
.live-total-title span{font-size:11.5px;font-weight:900;letter-spacing:.09em;color:#4c7396}
.live-total-title strong{font-size:17px;color:#1c405d}
.live-total-lines{display:grid}
.live-total-lines>div{display:grid;grid-template-columns:1fr auto;gap:15px;align-items:center;padding:7px 0;border-bottom:1px solid #e2e9ee;font-size:12px;color:#586f82}
.live-total-lines>div:last-child{border-bottom:0}
.live-total-lines i{font-style:normal;color:#8595a2;font-size:12px}
.live-total-lines b{font-size:12px;color:#294b65}
.live-total-lines .zero{opacity:.5}
.live-total-lines .live-grand{margin-top:3px;padding:11px 0 4px;border-top:2px solid #ef5658;border-bottom:2px solid #ef5658;color:#2b3f50}
.live-total-lines .live-grand span{font-size:12px;font-weight:900;letter-spacing:.03em}
.live-total-lines .live-grand b{font-size:20px;color:#173d5d}
.tier-prices{display:grid;grid-template-columns:auto auto;gap:1px 8px;justify-items:end}
.tier-prices strong{font-size:13px;color:#264d69}
.tier-prices small{font-size:11.5px;color:#8393a1}
.totals .discount{color:#a44b57}
@media(max-width:900px){
.invoiceform-v2>header{align-items:flex-start;flex-direction:column}
.pricing-key{width:100%;min-width:0}
.live-total-card{grid-template-columns:1fr}
}
@media(max-width:680px){
.pricing-key span,.pricing-key b{font-size:12.5px}
.live-total-card{padding:14px 13px;gap:13px}
.live-total-lines .live-grand b{font-size:18px}
}
/* ==========================================================================
ManuTrack Factures UI v3 — global design, typography, selects & responsive
========================================================================== */
:root{
--navy:#0b263d;
--navy-2:#173d5d;
--ink:#29465d;
--muted:#718596;
--line:#dbe5ec;
--line-strong:#c9d7e1;
--surface:#ffffff;
--surface-soft:#f7fafc;
--blue-soft:#eef5fb;
--focus:#4c8fbe;
--danger:#b33e51;
--success:#16775a;
--shadow:0 10px 28px rgba(18,42,64,.055);
}
html{scroll-behavior:smooth}
html.navlocked,html.navlocked body{overflow:hidden}
body{
font-size:13px;
line-height:1.5;
letter-spacing:.002em;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
}
::selection{background:#dbeafb;color:#173d5d}
a,button,input,select,textarea{transition:border-color .16s ease,box-shadow .16s ease,background-color .16s ease,color .16s ease,transform .16s ease}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
outline:3px solid rgba(76,143,190,.22);
outline-offset:2px;
}
.card{
border-color:var(--line);
box-shadow:var(--shadow);
}
.primary,.secondary,.danger,.newbtn{
min-height:46px;
border-radius:11px;
}
.primary:hover,.newbtn:hover{background:#123550;transform:translateY(-1px)}
.secondary:hover{background:#f7fafc;border-color:#b9cad6}
.danger:hover{background:#9f3447}
.kicker{
font-size:11.5px;
line-height:1.25;
letter-spacing:.075em;
}
.hero h2,.detailhero h2,.invoicehero h2{line-height:1.12}
.hero p,.detailhero p,.invoicehero p,.formcard p,.invoiceform p{line-height:1.6}
.empty{line-height:1.5}
/* Navigation / header */
.sidebar{
width:245px;
padding-left:max(13px,env(safe-area-inset-left));
}
.sidebar nav a{
min-height:48px;
font-size:12.5px;
border:1px solid transparent;
}
.sidebar nav a.on{
background:linear-gradient(135deg,#143e5c,#164765);
border-color:#245574;
box-shadow:inset 3px 0 0 #86bedf;
}
.navicon{
width:20px;height:20px;flex:0 0 20px;
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
opacity:.92;
}
.sideuser strong{font-size:12.5px}
.sideuser small,.sideuser button{font-size:12px}
.app-header{
min-height:74px;
padding-right:max(24px,env(safe-area-inset-right));
box-shadow:0 4px 18px rgba(18,42,64,.035);
}
.app-header>#menu svg{
width:22px;height:22px;fill:none;stroke:#38586f;stroke-width:1.9;stroke-linecap:round;
}
.headtitle small{font-size:11.5px}
.headtitle h1{font-size:21px;line-height:1.2}
.langswitch,.auth-langswitch{
display:inline-flex;
align-items:center;
padding:3px;
border:1px solid #d6e1e8;
border-radius:10px;
background:#f6f9fb;
}
.langswitch form,.auth-langswitch form{display:flex;margin:0}
.langswitch button,.auth-langswitch button{
min-width:38px;height:34px;
padding:0 9px;
border:0;border-radius:7px;
background:transparent;color:#708493;
font-size:11.5px;font-weight:900;cursor:pointer;
}
.langswitch button.active,.auth-langswitch button.active{
background:#fff;color:#173d5d;
box-shadow:0 2px 7px rgba(18,42,64,.10);
}
.langswitch button:disabled,.auth-langswitch button:disabled{opacity:1;cursor:default}
.newbtn{gap:6px}
.newbtn .plus{font-size:16px;line-height:1}
/* Global form typography */
.field label,
.formcard label,
.invoiceform label,
.assignform label,
.actionpanel label,
.settingscard label,
.authcard label{
font-size:12px;
line-height:1.35;
font-weight:800;
color:#435d72;
}
.field small,
.formcard small,
.invoiceform small,
.assignform small,
.actionpanel small,
.settingscard small{
font-size:12px;
line-height:1.5;
}
.field em{font-size:12px;line-height:1.4}
.formcard form,.invoiceform>form{padding:20px}
.formgrid{gap:15px}
/* Inputs and premium dropdowns */
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,textarea,
.authcard input,.assignform input,.actionpanel input,.settingscard input{
min-height:48px;
border:1px solid #cfdce5;
border-radius:11px;
background-color:#fff;
color:#29465d;
font-size:13px;
line-height:1.35;
box-shadow:inset 0 1px 0 rgba(18,42,64,.018);
}
textarea{min-height:94px;resize:vertical}
input:hover,select:hover,textarea:hover{border-color:#b2c6d4}
input:focus,select:focus,textarea:focus{
border-color:var(--focus)!important;
box-shadow:0 0 0 3px rgba(76,143,190,.12)!important;
outline:none;
}
input::placeholder,textarea::placeholder{color:#9aa8b3;opacity:1}
/* Every native select gets one consistent, larger chevron */
select,
.premium-select{
-webkit-appearance:none;
appearance:none;
cursor:pointer;
padding-right:48px!important;
background-image:
linear-gradient(45deg,transparent 50%,#507089 50%),
linear-gradient(135deg,#507089 50%,transparent 50%),
linear-gradient(to right,#e3ebf1,#e3ebf1);
background-position:
calc(100% - 19px) 50%,
calc(100% - 13px) 50%,
calc(100% - 42px) 50%;
background-size:6px 6px,6px 6px,1px 58%;
background-repeat:no-repeat;
}
select:hover{
background-color:#fbfdff;
background-image:
linear-gradient(45deg,transparent 50%,#245a7c 50%),
linear-gradient(135deg,#245a7c 50%,transparent 50%),
linear-gradient(to right,#d8e4ec,#d8e4ec);
}
select:focus{
background-image:
linear-gradient(45deg,transparent 50%,#245a7c 50%),
linear-gradient(135deg,#245a7c 50%,transparent 50%),
linear-gradient(to right,#c8dce9,#c8dce9);
}
select:disabled{cursor:not-allowed;opacity:.65;background-color:#f3f6f8}
select option{color:#29465d;background:#fff;font-size:13px}
select[multiple]{
min-height:120px;
padding-right:12px!important;
background-image:none!important;
}
/* Checkboxes */
.premium-check,input[type="checkbox"]{
width:20px;height:20px;
accent-color:#173d5d;
cursor:pointer;
vertical-align:middle;
}
/* Filters */
.filters{
align-items:center;
padding:12px;
border-radius:14px;
}
.filters input,.filters select,.filters button{min-height:48px}
.filters button{font-size:12px}
.service-filters{grid-template-columns:minmax(260px,1fr) 120px}
/* Form cards / sections */
.formcard,.invoiceform{box-shadow:0 12px 34px rgba(18,42,64,.06)}
.formcard>header,.invoiceform>header{
background:linear-gradient(180deg,#fff,#fbfdff);
}
.section-icon,.serviceicon{
font-family:ui-sans-serif,system-ui,sans-serif;
font-weight:900;
}
.formcard footer,.invoiceform footer{
padding-top:17px;
background:linear-gradient(180deg,rgba(250,252,253,0),#fbfcfd);
}
/* Tables */
.table{
scrollbar-width:thin;
scrollbar-color:#b8cad6 transparent;
overscroll-behavior-x:contain;
-webkit-overflow-scrolling:touch;
}
.thead{
font-size:11.5px;
line-height:1.3;
}
.trow{
font-size:12px;
line-height:1.45;
}
.status{
min-height:26px;
padding:5px 8px;
font-size:11.5px;
line-height:1.25;
letter-spacing:.025em;
}
.clientinv-head,.clientinv{grid-template-columns:1.2fr .8fr .9fr .8fr .7fr}
.invoice-table .thead,.invoice-table .invoice-row{
grid-template-columns:1.1fr 1.35fr .75fr .8fr .9fr .8fr .75fr;
min-width:850px;
}
/* Client / service cards */
.clientcard,.servicecard{border-color:#dbe5ec}
.clientcard:hover,.servicecard:hover{
border-color:#c5d7e3;
box-shadow:0 12px 30px rgba(18,42,64,.075);
transform:translateY(-1px);
}
.clientcard h3,.servicecard h3{font-size:14.5px}
.clientcard p,.servicecard p,.clientcard small,.servicecard small{font-size:12px;line-height:1.45}
.warn,.watch,.recommend{font-size:11.5px;line-height:1.3}
/* Detail / compliance */
.detailgrid dt{font-size:12px}
.detailgrid dd{font-size:12.5px;line-height:1.45}
.assigned strong,.comms strong{font-size:12.5px}
.assigned small,.comms small,.compmain p,.chips a{font-size:12px}
.compliance-card{padding:17px}
.compactions{min-width:190px}
/* Invoice detail */
.billto>span{font-size:11.5px}
.billto p{font-size:12px}
.linesview .thead,.linesview .trow{font-size:12px}
.totals>div{font-size:12.5px}
.totals .grand,.totals .balance{font-size:14.5px}
.channel{font-size:11.5px}
/* Invoice editor */
.pricing-key span,.pricing-key b{font-size:12px}
.asset-category-field small,.invoice-meta-grid .field small,.linehead p{font-size:12px}
.line-row{
align-items:start;
gap:10px;
}
.line-row textarea{min-height:86px}
.live-total-title span{font-size:11.5px}
.live-total-lines>div{font-size:12.5px}
.live-total-lines i{font-size:12px}
.live-total-lines b{font-size:12.5px}
.live-total-lines .live-grand span{font-size:12.5px}
.live-total-lines .live-grand b{font-size:21px}
.tier-prices small{font-size:11.5px}
/* Settings / inline forms */
.settingscard form p,
.assignform p,
.actionpanel form p,
.authform p{
display:grid;
gap:6px;
margin:10px 0;
}
.settingscard label,.assignform label,.actionpanel label,.authform label{font-size:12px}
.settings-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.config-state{
display:inline-flex;align-items:center;
padding:6px 9px;border-radius:999px;
background:#f2f4f6;color:#71808c;
font-size:11.5px;font-weight:850;
}
.config-state.ok{background:#e9f7f1;color:#16775a}
.inline-action{padding:0 16px}
/* Authentication */
.authbody{
padding:
max(20px,env(safe-area-inset-top))
max(20px,env(safe-area-inset-right))
max(20px,env(safe-area-inset-bottom))
max(20px,env(safe-area-inset-left));
}
.authcard{position:relative;padding:30px;box-shadow:0 26px 80px rgba(0,0,0,.28)}
.auth-langswitch{position:absolute;top:16px;right:16px}
.authlogo{margin-top:8px}
.authlogo span{font-size:12px}
.authcard>p{font-size:12.5px;line-height:1.55}
.authcard h1{line-height:1.15}
/* Tablet */
@media(min-width:901px) and (max-width:1000px){
.dashgrid,.detailgrid,.settingsgrid{grid-template-columns:1fr 1fr}
.invoicegrid{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr)}
.servicegrid{grid-template-columns:1fr 1fr}
}
/* Drawer / tablet and phone */
@media(max-width:1000px){
.shell{display:block}
.sidebar{
position:fixed;top:0;bottom:0;left:0;
width:min(320px,86vw);
height:100dvh;
transform:translateX(-104%);
transition:transform .22s ease;
box-shadow:12px 0 40px rgba(4,18,30,.22);
padding-top:max(17px,env(safe-area-inset-top));
padding-bottom:max(17px,env(safe-area-inset-bottom));
}
.navopen .sidebar{transform:translateX(0)}
.navopen #veil{display:block;position:fixed;inset:0;background:rgba(5,20,31,.55);backdrop-filter:blur(2px);z-index:35}
.app-header{
padding-left:max(12px,env(safe-area-inset-left));
padding-right:max(12px,env(safe-area-inset-right));
}
.main>header>#menu{display:grid;place-items:center;flex:0 0 44px}
.mobile-logo{display:flex}
}
/* Phone */
@media(max-width:680px){
body{font-size:13px}
.app-header{height:66px;min-height:66px;gap:7px}
.main>main{
padding-left:max(10px,env(safe-area-inset-left));
padding-right:max(10px,env(safe-area-inset-right));
padding-bottom:max(42px,env(safe-area-inset-bottom));
}
.mobile-logo{width:88px;height:42px}
.langswitch{padding:2px}
.langswitch button{min-width:32px;height:34px;padding:0 6px;font-size:11.5px}
.newbtn{width:44px;min-width:44px;padding:0}
.newbtn>span:not(.plus){display:none}
.hero,.detailhero,.invoicehero{
gap:14px;
padding:18px 15px;
}
.hero h2,.detailhero h2,.invoicehero h2{font-size:23px}
.hero p,.detailhero p,.invoicehero p{font-size:12.5px}
.kpis{gap:8px}
.kpis article{padding:14px}
.kpis small{font-size:11.5px}
.kpis strong{font-size:25px}
.filters{grid-template-columns:1fr!important}
.filters input,.filters select,.filters button{
width:100%;
font-size:16px!important;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,textarea,
.authcard input,.assignform input,.actionpanel input,.settingscard input{
font-size:16px!important;
}
select option{font-size:16px}
.field label,.formcard label,.invoiceform label,.assignform label,.actionpanel label,.settingscard label,.authcard label{font-size:12px}
.field small,.formcard small,.invoiceform small,.assignform small,.actionpanel small,.settingscard small{font-size:12px!important}
.formcard form,.invoiceform>form{padding:14px}
.formcard>header,.invoiceform>header{padding:17px 14px}
.formcard footer,.invoiceform footer{gap:8px}
.formcard footer>*,.invoiceform footer>*{min-width:0}
.clientcard,.servicecard{padding:13px}
.clientcard{grid-template-columns:40px minmax(0,1fr)}
.clientright{grid-column:2;justify-items:start}
.servicecard{grid-template-columns:40px minmax(0,1fr)}
.servicecard .tier-prices{grid-column:2;justify-items:start;grid-template-columns:auto auto}
.detailgrid,.invoicegrid,.settingsgrid{gap:10px}
.detailgrid dl>div{grid-template-columns:95px minmax(0,1fr)}
.assigned>div{align-items:flex-start;flex-direction:column}
.assigned>div form,.assigned>div button{width:100%}
.alertcard{grid-template-columns:40px minmax(0,1fr)}
.alertcard form{grid-column:1/-1}
.alertcard button{width:100%}
.compliance-card{grid-template-columns:40px minmax(0,1fr);padding:14px}
.compactions{grid-column:1/-1;min-width:0;width:100%;justify-items:stretch}
.compactions form,.compactions a,.compactions button{width:100%}
.actionpanel .primary,.actionpanel .secondary{width:100%}
.invoicepaper{padding:14px}
.totals{width:100%;justify-content:stretch}
.totals>div{grid-template-columns:1fr auto}
.pricing-key{padding:10px}
.linehead{align-items:flex-start;gap:10px;flex-direction:column}
.linehead .secondary{width:100%}
.line-row{padding:12px}
.live-total-card{padding:14px;gap:12px}
.live-total-lines .live-grand b{font-size:19px}
.settings-head{align-items:flex-start;flex-direction:column}
.authcard{padding:28px 17px 22px}
.auth-langswitch{top:12px;right:12px}
.authlogo{margin-top:17px}
.authlogo img{max-width:72%}
/* Transform management tables into touch-friendly cards */
.responsive-table{overflow:visible;background:transparent;border:0;box-shadow:none}
.responsive-table .thead{display:none}
.responsive-table .trow{
min-width:0!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:0;
margin-bottom:9px;
padding:0;
overflow:hidden;
border:1px solid #dbe5ec;
border-radius:13px;
background:#fff;
box-shadow:0 5px 16px rgba(18,42,64,.04);
}
.responsive-table .trow>*{
min-width:0;
display:grid;
gap:2px;
padding:10px 11px;
border-bottom:1px solid #edf2f5;
overflow-wrap:anywhere;
}
.responsive-table .trow>*::before{
content:attr(data-label);
display:block;
color:#8a98a5;
font-size:11.5px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.04em;
}
.responsive-table .trow .status{
align-self:center;
margin:9px 10px;
padding:6px 9px;
display:inline-flex;
}
.responsive-table .trow .status::before{display:none}
.responsive-table .trow>*:nth-last-child(-n+2){border-bottom:0}
.linesview{overflow:visible}
.linesview .thead{display:none}
.linesview .trow{
min-width:0;
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
margin-bottom:8px;
padding:0;
border:1px solid #e0e8ee;
border-radius:11px;
overflow:hidden;
}
.linesview .trow>*{
display:grid;
gap:2px;
padding:9px 10px;
border-bottom:1px solid #edf2f5;
}
.linesview .trow>*::before{
content:attr(data-label);
font-size:11.5px;color:#8998a5;font-weight:900;text-transform:uppercase;
}
}
@media(max-width:430px){
.kpis{grid-template-columns:1fr}
.mobile-logo{width:80px}
.responsive-table .trow{grid-template-columns:1fr!important}
.responsive-table .trow>*:nth-last-child(-n+2){border-bottom:1px solid #edf2f5}
.responsive-table .trow>*:last-child{border-bottom:0}
.linesview .trow{grid-template-columns:1fr}
.formcard footer,.invoiceform footer{grid-template-columns:1fr}
.formcard footer>*,.invoiceform footer>*{width:100%}
}
/* === Invoice detail premium polish v4 === */
.invoicehero-v2{
position:relative;
overflow:hidden;
padding:23px 25px;
background:
radial-gradient(circle at 88% 18%,rgba(75,143,190,.08),transparent 28%),
linear-gradient(180deg,#fff,#fcfdff);
}
.invoicehero-v2::before{
content:"";
position:absolute;
left:0;top:0;bottom:0;
width:4px;
background:linear-gradient(#4e95c6,#173d5d);
}
.invoicehero-main{min-width:0}
.invoicehero-v2 h2{
margin:3px 0 9px;
font-size:29px;
letter-spacing:-.025em;
}
.invoicehero-meta{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:7px;
}
.invoicehero-meta span{
display:inline-flex;
align-items:center;
min-height:28px;
padding:4px 9px;
border:1px solid #e1e9ef;
border-radius:999px;
background:#f7fafc;
color:#657b8d;
font-size:11.5px;
font-weight:750;
}
.invoicehero-actions{justify-content:flex-end}
.icon-action{gap:6px}
.icon-action>span{
display:grid;
place-items:center;
width:18px;height:18px;
font-size:12px;
font-weight:900;
}
.invoicegrid-v2{
grid-template-columns:minmax(0,1.65fr) minmax(310px,.55fr);
gap:14px;
align-items:start;
}
.invoicepaper-v2{
padding:0;
overflow:hidden;
}
.client-summary{
display:grid;
grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr);
gap:20px;
align-items:center;
padding:20px 22px;
border-bottom:1px solid #e4ebf0;
background:linear-gradient(180deg,#fff,#fbfdff);
}
.client-summary-title h3{
margin:3px 0 2px;
font-size:19px;
color:#173a56;
}
.client-summary-title p{
margin:0;
color:#778b9b;
font-size:12px;
}
.client-contact-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:9px;
}
.client-contact-grid>div{
min-width:0;
padding:10px 12px;
border:1px solid #e0e8ee;
border-radius:11px;
background:#f8fafc;
}
.client-contact-grid small{
display:block;
margin-bottom:2px;
color:#8495a3;
font-size:11.5px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.035em;
}
.client-contact-grid strong{
display:block;
overflow-wrap:anywhere;
color:#31536c;
font-size:12.5px;
}
.linesview-v2{margin:0;padding:0 22px}
.linesview-v2 .thead{
margin-top:0;
padding:11px 12px;
background:#f4f7f9;
border-bottom:1px solid #dbe4ea;
color:#718596;
}
.linesview-v2 .trow{
grid-template-columns:minmax(0,2.15fr) .42fr .62fr .62fr;
min-width:0;
padding:14px 12px;
gap:14px;
align-items:center;
}
.linesview-v2 .trow>span:first-child{
line-height:1.55;
color:#334f65;
}
.linesview-v2 .trow>span:not(:first-child),
.linesview-v2 .trow>strong{
text-align:right;
white-space:nowrap;
}
.linesview-v2 .trow>strong{
color:#153a57;
font-size:13px;
}
.invoice-financials{
display:grid;
grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
gap:24px;
align-items:end;
margin:0 22px 21px;
padding-top:17px;
border-top:1px solid #e5ebf0;
}
.financial-note{
align-self:start;
padding:10px 0;
}
.financial-note p{
margin:4px 0 0;
color:#8493a0;
font-size:12px;
}
.totals-v2{
width:100%;
margin:0;
padding:12px 14px;
border:1px solid #dce6ed;
border-radius:13px;
background:#f9fbfc;
}
.totals-v2>div{
grid-template-columns:1fr auto;
padding:7px 0;
}
.totals-v2>div+div{border-top:1px solid #edf2f5}
.totals-v2 .tax-row{color:#6e8292}
.totals-v2 .grand{
margin-top:3px;
padding-top:10px;
border-top:1px solid #cddbe4;
font-size:15px;
}
.totals-v2 .grand b{color:#153a57}
.totals-v2 .balance{
margin-top:3px;
padding:10px 11px;
border:0;
border-radius:9px;
background:#edf5fb;
color:#245b83;
font-size:15px;
}
.totals-v2 .balance b{font-size:17px}
.sidepanels-v2{gap:14px}
.actionpanel-v2{
padding:17px;
overflow:hidden;
}
.panel-title-row{
display:flex;
align-items:center;
gap:10px;
margin-bottom:13px;
}
.panel-title-row .panel-icon{
display:grid;
place-items:center;
width:38px;height:38px;
flex:0 0 38px;
border-radius:10px;
background:#eef5fa;
color:#285e83;
font-size:17px;
font-weight:900;
}
.panel-title-row h3{
margin:2px 0 0;
font-size:15px;
color:#1b405d;
}
.actionpanel-v2 form{margin-bottom:9px}
.actionpanel-v2 form>button{width:100%}
.helper-note{
padding:8px 10px;
border-radius:9px;
background:#f7f9fa;
color:#7d8f9c!important;
}
.reminder-count{
display:grid;
grid-template-columns:auto auto 1fr;
align-items:center;
gap:7px;
margin-top:12px;
padding:9px 10px;
border-radius:10px;
background:#f5f8fa;
}
.reminder-count>span{
display:inline-flex;
padding:4px 6px;
border-radius:6px;
background:#e7eff5;
color:#3e6885;
font-size:10.5px;
font-weight:900;
}
.reminder-count strong{
font-size:17px;
color:#173d5d;
}
.reminder-count small{
color:#82929f;
font-size:11.5px;
}
.payment-panel{background:linear-gradient(180deg,#fff,#fbfdff)}
.payment-balance{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin:-1px 0 12px;
padding:11px 12px;
border:1px solid #dbe7ef;
border-radius:11px;
background:#f3f8fc;
}
.payment-balance small{
color:#758a9a;
font-size:11.5px;
font-weight:850;
text-transform:uppercase;
letter-spacing:.035em;
}
.payment-balance strong{
color:#1e567f;
font-size:15px;
}
.payment-form-v2{display:grid;gap:10px}
.payment-field{display:grid;gap:5px}
.payment-field label{
font-size:12px;
font-weight:800;
color:#465f72;
}
.payment-field em{
color:#b33e51;
font-size:11.5px;
}
.payment-form-v2 input,
.payment-form-v2 select,
.payment-form-v2 textarea{
width:100%;
}
.payment-form-v2 textarea{min-height:72px}
.communication-panel{margin-top:14px}
.communication-panel>header{
padding:14px 17px;
}
.communication-panel>header h3{
margin:2px 0 0;
}
.communication-panel .comms{padding:3px 16px 8px}
/* Tablet */
@media(max-width:1150px){
.invoicegrid-v2{
grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
}
.client-summary{grid-template-columns:1fr}
.invoice-financials{grid-template-columns:.7fr 1fr}
}
/* Compact tablet / phone */
@media(max-width:900px){
.invoicegrid-v2{grid-template-columns:1fr}
.sidepanels-v2{
grid-template-columns:1fr 1fr;
align-items:start;
}
}
@media(max-width:680px){
.invoicehero-v2{padding:18px 15px}
.invoicehero-v2 h2{font-size:24px}
.invoicehero-meta{gap:5px}
.invoicehero-meta span{font-size:11px}
.invoicehero-actions{width:100%}
.invoicehero-actions .secondary{flex:1}
.client-summary{padding:16px 14px;gap:12px}
.client-summary-title h3{font-size:18px}
.client-contact-grid{grid-template-columns:1fr}
.linesview-v2{padding:0 14px}
.invoice-financials{
grid-template-columns:1fr;
gap:5px;
margin:0 14px 15px;
}
.financial-note{padding-bottom:5px}
.totals-v2{padding:10px 11px}
.sidepanels-v2{grid-template-columns:1fr}
.actionpanel-v2{padding:15px}
.communication-panel{margin-top:10px}
}
/* === Service details alignment / justification v5 === */
.linesview-v2 .thead>span:first-child,
.linesview-v2 .trow>span:first-child{
text-align:left;
}
.linesview-v2 .trow>span:first-child{
text-align:justify;
text-justify:inter-word;
hyphens:auto;
-webkit-hyphens:auto;
line-height:1.6;
align-self:start;
}
.linesview-v2 .thead>span:not(:first-child),
.linesview-v2 .trow>span:not(:first-child),
.linesview-v2 .trow>strong{
text-align:right;
justify-self:stretch;
}
.servicecard p{
text-align:justify;
text-justify:inter-word;
hyphens:auto;
-webkit-hyphens:auto;
line-height:1.55;
}
.assigned>div>div{
min-width:0;
}
.assigned>div>div strong{
display:block;
line-height:1.45;
}
.invoiceform-v2 .line-row .desc textarea{
line-height:1.55;
text-align:left;
}
@media(max-width:680px){
.linesview-v2 .trow>span:first-child{
text-align:justify;
}
.linesview-v2 .trow>span:not(:first-child),
.linesview-v2 .trow>strong{
text-align:left;
}
}
/* === Invoice detail full premium experience v6 === */
.invoice-detail-premium6{
--inv-radius:16px;
--inv-control-h:48px;
--inv-border:#d9e4eb;
--inv-soft:#f7fafc;
--inv-soft-blue:#eef5fa;
--inv-navy:#173d5d;
--inv-ink:#29465d;
display:grid;
gap:14px;
}
.invoice-detail-premium6 .card{
border-radius:var(--inv-radius);
border-color:var(--inv-border);
box-shadow:0 12px 34px rgba(18,42,64,.055);
}
.invoice-detail-premium6 svg{
width:20px;height:20px;
fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;
}
/* Hero */
.invoicehero-v6{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:24px;
padding:24px 26px;
}
.invoice-title-row{
display:flex;
align-items:center;
gap:13px;
}
.invoice-doc-mark{
display:grid;
place-items:center;
width:48px;height:48px;
flex:0 0 48px;
border-radius:13px;
background:linear-gradient(145deg,#eaf3f9,#f7fbfd);
color:#2d6388;
border:1px solid #d6e5ef;
}
.invoicehero-v6 h2{
margin:1px 0 0;
font-size:30px;
line-height:1.08;
}
.invoicehero-v6 .invoicehero-meta{
margin-top:12px;
padding-left:61px;
}
.invoicehero-actionbox{
display:grid;
justify-items:end;
gap:11px;
min-width:286px;
}
.invoicehero-actionbox>.status{
min-width:88px;
min-height:28px;
}
.invoicehero-button-grid{
display:grid;
grid-template-columns:repeat(2,132px);
gap:8px;
}
.premium-action-btn{
display:flex;
align-items:center;
justify-content:center;
gap:8px;
width:132px;
height:var(--inv-control-h);
padding:0 13px;
border:1px solid #cbd9e2;
border-radius:11px;
background:#fff;
color:#3e5c72;
font-size:12px;
font-weight:850;
line-height:1;
}
.premium-action-btn:hover{
border-color:#aebfcb;
background:#f7fafc;
color:#173d5d;
transform:translateY(-1px);
}
/* Main layout */
.invoicegrid-v6{
grid-template-columns:minmax(0,1.72fr) minmax(360px,.58fr);
gap:14px;
align-items:start;
}
.invoicepaper-v6{
overflow:hidden;
background:#fff;
}
.client-summary-v6{
padding:21px 23px;
}
.client-summary-v6 .client-contact-grid>div{
display:grid;
grid-template-columns:34px minmax(0,1fr);
align-items:center;
gap:9px;
min-height:60px;
}
.mini-icon{
display:grid;
place-items:center;
width:34px;height:34px;
border-radius:9px;
background:#edf4f8;
color:#346786;
}
.mini-icon svg{width:17px;height:17px}
.invoice-section-heading{
display:flex;
align-items:end;
justify-content:space-between;
gap:16px;
padding:18px 23px 10px;
}
.invoice-section-heading h3{
margin:2px 0 0;
color:#1d405d;
font-size:15px;
}
.service-count,
.history-count{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:28px;
padding:5px 9px;
border-radius:999px;
background:#f0f5f8;
color:#647c8d;
font-size:11.5px;
font-weight:850;
}
.linesview-v6{padding:0 23px}
.linesview-v6 .thead{
border-radius:9px 9px 0 0;
background:#f2f6f8;
font-size:11.5px;
}
.linesview-v6 .trow{
grid-template-columns:minmax(0,2.25fr) .42fr .62fr .62fr;
min-height:70px;
padding:14px 12px;
}
.linesview-v6 .trow:last-child{border-bottom:0}
.linesview-v6 .trow>span:first-child{
text-align:justify;
text-justify:inter-word;
line-height:1.62;
}
.linesview-v6 .trow>span:not(:first-child),
.linesview-v6 .trow>strong{
align-self:center;
font-variant-numeric:tabular-nums;
}
/* Financial summary */
.invoice-financials-v6{
grid-template-columns:minmax(0,1fr) minmax(330px,.8fr);
align-items:end;
gap:30px;
margin:0 23px 23px;
padding-top:18px;
}
.invoice-financials-v6 .financial-note{
padding:12px 0;
}
.invoice-financials-v6 .financial-note h4{
margin:4px 0 3px;
color:#294b63;
font-size:14px;
}
.totals-v6{
padding:13px 15px;
border-radius:14px;
background:linear-gradient(180deg,#fbfdfe,#f6f9fb);
}
.totals-v6>div{
min-height:36px;
align-items:center;
padding:7px 0;
font-variant-numeric:tabular-nums;
}
.totals-v6 .grand{
min-height:46px;
}
.totals-v6 .balance{
min-height:52px;
margin-top:6px;
padding:10px 12px;
}
.totals-v6 .balance b{font-size:18px}
/* Right column cards */
.sidepanels-v6{
display:grid;
gap:14px;
}
.premium-sidecard{
padding:18px;
overflow:hidden;
background:linear-gradient(180deg,#fff,#fcfdfe);
}
.premium-sidecard-head{
display:flex;
align-items:center;
gap:11px;
min-height:48px;
margin-bottom:15px;
}
.sidecard-icon{
display:grid;
place-items:center;
width:42px;height:42px;
flex:0 0 42px;
border-radius:11px;
border:1px solid #d7e4ec;
background:#eef5f9;
color:#316788;
}
.sidecard-icon svg{width:19px;height:19px}
.premium-sidecard-head h3{
margin:2px 0 0;
color:#1c415e;
font-size:15px;
line-height:1.25;
}
.communication-action-stack{
display:grid;
gap:8px;
}
.communication-action-stack form{
display:block;
margin:0;
}
.side-action-btn{
display:flex;
align-items:center;
justify-content:center;
gap:9px;
width:100%;
height:var(--inv-control-h);
min-height:var(--inv-control-h);
padding:0 14px;
margin:0;
border:1px solid #cad8e2;
border-radius:11px;
background:#fff;
color:#3f6076;
font-size:12px;
font-weight:850;
line-height:1;
cursor:pointer;
}
.side-action-btn svg{
width:18px;height:18px;
flex:0 0 18px;
}
.side-action-btn:hover:not(:disabled){
border-color:#aebfcb;
background:#f7fafc;
color:#173d5d;
transform:translateY(-1px);
}
.side-action-btn.side-action-primary{
border-color:#173d5d;
background:#173d5d;
color:#fff;
}
.side-action-btn.side-action-primary:hover:not(:disabled){
border-color:#12344f;
background:#12344f;
color:#fff;
}
.side-action-btn:disabled{
opacity:.46;
cursor:not-allowed;
transform:none;
}
.configuration-note{
display:grid;
grid-template-columns:24px 1fr;
align-items:center;
gap:8px;
margin-top:9px;
padding:8px 9px;
border:1px solid #e5ebef;
border-radius:9px;
background:#f8fafb;
}
.configuration-note>span{
display:grid;
place-items:center;
width:22px;height:22px;
border-radius:50%;
background:#e9f0f5;
color:#5d7588;
font-size:11px;
font-weight:900;
}
.configuration-note small{
color:#718493;
font-size:11.5px;
line-height:1.4;
}
.reminder-count-v6{
display:grid;
grid-template-columns:42px 1fr;
align-items:center;
gap:10px;
margin-top:12px;
padding:10px 11px;
}
.reminder-count-icon{
display:grid;
place-items:center;
width:42px;height:34px;
border-radius:8px;
background:#e7eff5;
color:#3d6884;
font-size:10.5px;
font-weight:900;
}
.reminder-count-v6>div:last-child{
display:grid;
grid-template-columns:auto 1fr;
align-items:baseline;
gap:7px;
}
.reminder-count-v6 strong{
font-size:18px;
}
.reminder-count-v6 small{
font-size:11.5px;
color:#82929f;
}
/* Payment card */
.payment-panel-v6{padding-bottom:18px}
.payment-balance-v6{
min-height:62px;
margin:0 0 14px;
padding:11px 12px;
border-radius:11px;
}
.payment-balance-v6>div{
display:grid;
gap:1px;
}
.payment-balance-v6 small{
line-height:1.2;
}
.payment-balance-v6 span{
color:#8294a2;
font-size:11.5px;
}
.payment-balance-v6 strong{
white-space:nowrap;
font-variant-numeric:tabular-nums;
}
.payment-form-v6{
display:grid;
gap:11px;
}
.payment-form-v6 .payment-field{
margin:0;
}
.payment-form-v6 input,
.payment-form-v6 select,
.payment-form-v6 textarea{
min-height:var(--inv-control-h);
border-radius:10px;
}
.payment-form-v6 textarea{min-height:76px}
.payment-submit{
margin-top:2px;
}
/* Communication history */
.communication-panel-v6{
overflow:hidden;
margin-top:0;
}
.communication-panel-v6>header{
min-height:65px;
padding:13px 18px;
}
.communication-panel-v6>header h3{
margin:2px 0 0;
font-size:15px;
}
.communication-panel-v6 .comms{
padding:0 18px 8px;
}
.communication-panel-v6 .comms>div{
min-height:54px;
}
/* Tablet */
@media(max-width:1180px){
.invoicegrid-v6{
grid-template-columns:minmax(0,1.4fr) minmax(340px,.7fr);
}
.invoicehero-v6{
grid-template-columns:1fr;
align-items:start;
}
.invoicehero-actionbox{
width:100%;
min-width:0;
grid-template-columns:auto 1fr;
align-items:center;
justify-items:start;
}
.invoicehero-button-grid{
justify-self:end;
}
}
@media(max-width:900px){
.invoicegrid-v6{grid-template-columns:1fr}
.sidepanels-v6{
grid-template-columns:1fr 1fr;
align-items:start;
}
.invoice-financials-v6{
grid-template-columns:minmax(0,1fr) minmax(320px,.9fr);
}
}
/* Phone */
@media(max-width:680px){
.invoice-detail-premium6{gap:10px}
.invoicehero-v6{padding:17px 14px;gap:15px}
.invoice-title-row{gap:10px}
.invoice-doc-mark{width:42px;height:42px;flex-basis:42px}
.invoicehero-v6 h2{font-size:24px}
.invoicehero-v6 .invoicehero-meta{padding-left:0;margin-top:11px}
.invoicehero-actionbox{
display:grid;
grid-template-columns:1fr;
gap:9px;
width:100%;
}
.invoicehero-actionbox>.status{justify-self:start}
.invoicehero-button-grid{
width:100%;
grid-template-columns:1fr 1fr;
justify-self:stretch;
}
.premium-action-btn{
width:100%;
height:48px;
}
.client-summary-v6{padding:15px 14px}
.invoice-section-heading{padding:15px 14px 9px}
.linesview-v6{padding:0 14px}
.invoice-financials-v6{
grid-template-columns:1fr;
gap:5px;
margin:0 14px 15px;
}
.financial-note{padding-bottom:4px}
.sidepanels-v6{grid-template-columns:1fr}
.premium-sidecard{padding:15px}
.side-action-btn{height:48px}
.communication-panel-v6 .comms{padding:0 14px 8px}
}
/* Quotes: six balanced registry columns */
.quote-table .thead,.quote-table .invoice-row{
grid-template-columns:1.1fr 1.45fr .8fr .9fr .9fr .8fr;
min-width:800px;
}
/* 20260828 finance-control-upgrade */
.sidebar nav{overflow-y:auto;overflow-x:hidden;padding-right:2px}
.inline-form{display:inline-flex;margin:0}
.inline-form button{white-space:nowrap}
.finance-overview{margin-top:13px}
.finance-currency-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:11px;padding:0 16px 16px}
.finance-currency-card{border:1px solid #e0e8ee;border-radius:13px;background:#fbfcfd;overflow:hidden}
.currency-head{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;border-bottom:1px solid #e6edf2}
.currency-head strong{font-size:17px;color:#173d5d}
.currency-head span{font-size:11.5px;font-weight:850;color:#14785b;background:#e9f7f1;padding:5px 7px;border-radius:999px}
.finance-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.finance-metrics>div{padding:11px 12px;border-right:1px solid #edf2f5;border-bottom:1px solid #edf2f5;min-width:0}
.finance-metrics>div:nth-child(2n){border-right:0}
.finance-metrics>div.mrr{grid-column:1/-1;border-bottom:0;background:#f3f8fb}
.finance-metrics small{display:block;font-size:10.8px;color:#7b8c99;font-weight:750;margin-bottom:3px}
.finance-metrics b{display:block;color:#183f5d;font-size:16px;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.action-required{margin-top:13px}
.action-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;padding:0 16px 16px}
.action-grid>a{display:grid;gap:3px;min-height:85px;padding:12px;border:1px solid #e1e8ee;border-radius:12px;background:#fbfcfd;align-content:center}
.action-grid>a:hover{border-color:#b9cbd8;background:#f7fafc}
.action-number{font-size:25px;font-weight:900;color:#173d5d;line-height:1}
.danger-text{color:#b33e51}
.action-grid small{font-size:11.5px;line-height:1.35;color:#738694}
.ageing-table .thead,.ageing-table .trow{grid-template-columns:.75fr repeat(5,1fr);min-width:620px}
.advanced-invoice-filters{grid-template-columns:minmax(210px,1.5fr) 145px 155px minmax(170px,1fr) 105px 145px 145px 92px 112px}
.advanced-invoice-filters .export-filter-btn{min-height:48px;color:#496176;background:#fff;border:1px solid #d3dee7}
.pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 0 0}
.pagination a,.pagination span{display:grid;place-items:center;min-width:42px;height:42px;padding:0 12px;border:1px solid #dbe4eb;border-radius:10px;background:#fff;font-size:12px;font-weight:850}
.pagination span{min-width:90px;color:#60798c;background:#f8fafb}
.payment-history-card{margin:0 0 13px;overflow:hidden}
.paymenthist-head,.paymenthist-row{grid-template-columns:.75fr .9fr 1fr 1.1fr .9fr .55fr;min-width:760px}
.paymenthist-row>a{font-weight:850;color:#245b85}
.audit-inline-card{margin-bottom:13px}
.audit-mini{display:grid;padding:0 16px 10px}
.audit-mini>div{display:grid;grid-template-columns:minmax(170px,.8fr) 130px minmax(0,2fr);gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid #edf2f5}
.audit-mini strong{font-size:11.5px;color:#23445c}
.audit-mini span{font-size:11px;color:#8494a0;font-variant-numeric:tabular-nums}
.audit-mini small{font-size:11.5px;color:#63798a}
.audit-table .thead,.audit-table .trow{grid-template-columns:1fr .8fr 1.1fr 1.1fr 2.2fr;min-width:960px}
.role-badge{display:inline-flex;align-items:center;padding:6px 8px;border-radius:999px;background:#edf3ff;color:#315eaf;font-size:11px;font-weight:900;letter-spacing:.03em}
.report-months{display:grid;padding:0 16px 14px}
.report-months>article{display:grid;grid-template-columns:90px 1fr 1fr;gap:12px;padding:10px 0;border-bottom:1px solid #edf2f5}
.report-months>article>strong{font-size:12px;color:#23445c}
.report-months article>div{display:grid;grid-template-columns:1fr auto;gap:4px 8px}
.report-months small{font-size:11px;color:#7d8e9b}
.report-months span{font-size:11.5px;font-weight:800;color:#425d70}
.method-list{display:grid;padding:0 16px 14px}
.method-list>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid #edf2f5}
.method-list strong{font-size:12px;text-transform:uppercase;color:#405d72}
.method-list span{font-size:12px;font-weight:850;color:#173d5d}
.settingscard .helptext,.settingscard .help-text{font-size:11px;color:#7e8e9b}
@media(max-width:1250px){
.action-grid{grid-template-columns:repeat(3,1fr)}
.advanced-invoice-filters{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:900px){
.finance-currency-grid{grid-template-columns:1fr}
.advanced-invoice-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
.action-grid{grid-template-columns:repeat(2,1fr);padding:0 12px 12px}
.action-grid>a{min-height:78px}
.finance-currency-grid{padding:0 12px 12px}
.finance-metrics b{font-size:15px}
.advanced-invoice-filters{grid-template-columns:1fr!important}
.paymenthist-head{display:none}
.paymenthist-row{min-width:0!important}
.audit-mini>div{grid-template-columns:1fr;gap:2px}
.report-months>article{grid-template-columns:1fr;gap:6px}
}
/* 20260828 final-responsive-ux-pass */
/* Financial hierarchy: success, exposure and delinquency are instantly scannable. */
.finance-metrics .metric-collected{background:#f0f8f4}
.finance-metrics .metric-collected b{color:#14785b}
.finance-metrics .metric-outstanding{background:#fffaf0}
.finance-metrics .metric-outstanding b{color:#8a6519}
.finance-metrics .metric-overdue{background:#fff4f5}
.finance-metrics .metric-overdue b{color:#ae4457}
.finance-metrics .metric-invoiced b{color:#183f5d}
/* Mobile invoice action dock is intentionally hidden outside phones. */
.mobile-invoice-actions{display:none}
#invoice-communication,#invoice-payment,#invoice-financial-summary{scroll-margin-top:86px}
/* Tablet typography and touch ergonomics. */
@media(min-width:681px) and (max-width:1000px){
body{font-size:13.5px}
.panel>header h3,.premium-sidecard-head h3{font-size:15.5px}
.trow{font-size:13px}
.clientcard h3,.servicecard h3{font-size:15px}
.clientcard p,.servicecard p,.clientcard small,.servicecard small{font-size:12.5px}
.field label,.settingscard label,.assignform label,.actionpanel label{font-size:12.5px}
.primary,.secondary,.danger,.newbtn{min-height:46px;font-size:12.5px}
.filters input,.filters select,.filters button{min-height:48px;font-size:13px}
.status{font-size:11.5px}
}
/* Dense financial/registry tables become two-column information cards on tablet portrait. */
@media(max-width:900px){
.tablet-card-table{
overflow:visible!important;
background:transparent!important;
border:0!important;
box-shadow:none!important;
}
.tablet-card-table .thead{display:none!important}
.tablet-card-table .trow{
min-width:0!important;
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:0!important;
margin-bottom:10px!important;
padding:0!important;
overflow:hidden;
border:1px solid #dbe5ec!important;
border-radius:13px!important;
background:#fff!important;
box-shadow:0 5px 16px rgba(18,42,64,.045)!important;
}
.tablet-card-table .trow>*{
min-width:0;
display:grid;
gap:2px;
padding:11px 12px;
border-bottom:1px solid #edf2f5;
overflow-wrap:anywhere;
}
.tablet-card-table .trow>*::before{
content:attr(data-label);
display:block;
color:#8797a4;
font-size:11px;
font-weight:900;
text-transform:uppercase;
letter-spacing:.045em;
}
.tablet-card-table .trow>*:first-child{
grid-column:1/-1;
background:#f8fafb;
}
.tablet-card-table .trow .status{
grid-column:1/-1;
justify-self:start;
align-self:center;
margin:9px 11px;
padding:6px 9px;
display:inline-flex;
width:max-content;
}
.tablet-card-table .trow .status::before{display:none}
.audit-table.tablet-card-table .trow>*:last-child{grid-column:1/-1}
.tablet-card-table .trow>*:nth-last-child(-n+2){border-bottom:0}
}
/* Phone-specific invoice command dock. */
@media(max-width:680px){
.invoice-detail-premium6{padding-bottom:84px}
.mobile-invoice-actions{
position:fixed;
z-index:32;
left:max(10px,env(safe-area-inset-left));
right:max(10px,env(safe-area-inset-right));
bottom:max(8px,env(safe-area-inset-bottom));
display:grid;
grid-template-columns:repeat(3,1fr);
gap:4px;
padding:5px;
border:1px solid rgba(208,220,229,.95);
border-radius:15px;
background:rgba(255,255,255,.96);
box-shadow:0 12px 38px rgba(9,34,53,.20);
backdrop-filter:blur(14px);
-webkit-backdrop-filter:blur(14px);
}
.mobile-invoice-actions a{
min-width:0;
min-height:52px;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
gap:3px;
border-radius:10px;
color:#496176;
font-size:11px;
font-weight:850;
}
.mobile-invoice-actions a:active{background:#f1f5f8}
.mobile-invoice-actions svg{
width:19px;height:19px;
fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.mobile-invoice-actions .mobile-action-pay{
background:#173d5d;
color:#fff;
}
.tablet-card-table .trow>*:first-child{background:#f8fafb}
}
/* Very narrow phones: reduce crowding rather than shrinking type. */
@media(max-width:390px){
.action-grid{grid-template-columns:1fr}
.action-grid>a{min-height:70px}
.mobile-logo{width:72px}
.newbtn{width:42px;min-width:42px}
.finance-metrics{grid-template-columns:1fr}
.finance-metrics>div{border-right:0}
.finance-metrics>div.mrr{grid-column:auto}
.mobile-invoice-actions{left:7px;right:7px;gap:3px}
.mobile-invoice-actions a{min-height:50px;font-size:10.8px}
}
@media(max-width:430px){
.tablet-card-table .trow{grid-template-columns:1fr!important}
.tablet-card-table .trow>*{grid-column:1!important}
.tablet-card-table .trow>*:first-child{grid-column:1!important}
.tablet-card-table .trow .status{grid-column:1!important}
.audit-table.tablet-card-table .trow>*:last-child{grid-column:1!important}
.tablet-card-table .trow>*:nth-last-child(-n+2){border-bottom:1px solid #edf2f5}
.tablet-card-table .trow>*:last-child{border-bottom:0}
}
/* 20260828 services-page-premium-polish */
.services-hero{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 220px auto;
align-items:center;
gap:28px;
min-height:205px;
margin-bottom:14px;
padding:28px 30px;
overflow:hidden;
background:
radial-gradient(circle at 72% 20%,rgba(63,136,192,.09),transparent 28%),
linear-gradient(135deg,#fff 0%,#fbfdff 72%,#f6faff 100%);
}
.services-hero::before{
content:"";
position:absolute;
inset:0 auto 0 0;
width:4px;
background:linear-gradient(180deg,#559ccd,#173d5d);
}
.services-hero-copy{position:relative;z-index:1;max-width:690px}
.services-hero h2{
margin:6px 0 8px;
color:#133651;
font-size:30px;
line-height:1.12;
letter-spacing:-.03em;
}
.services-hero p{
max-width:690px;
margin:0;
color:#708696;
font-size:13px;
line-height:1.65;
}
.services-hero-meta{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-top:16px;
}
.services-hero-meta>span{
display:inline-flex;
align-items:center;
gap:7px;
min-height:31px;
padding:5px 9px;
border:1px solid #e0e9ef;
border-radius:999px;
background:rgba(255,255,255,.82);
color:#6e8292;
font-size:11.5px;
font-weight:750;
}
.services-hero-meta svg{width:15px;height:15px;fill:none;stroke:#4e7898;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.services-hero-meta strong{color:#173d5d;font-size:12px}
.services-hero-visual{
position:relative;
display:grid;
place-items:center;
width:190px;
height:130px;
}
.services-hero-visual::before,
.services-hero-visual::after{
content:"";
position:absolute;
border-radius:50%;
background:#eaf3fb;
}
.services-hero-visual::before{width:95px;height:95px;left:5px;bottom:3px}
.services-hero-visual::after{width:62px;height:62px;right:1px;top:0;background:#edf4ff}
.services-visual-card{
position:relative;
z-index:2;
width:118px;
height:92px;
border:1px solid #dce7ef;
border-radius:16px;
background:rgba(255,255,255,.92);
box-shadow:0 15px 35px rgba(18,55,82,.10);
}
.visual-line{position:absolute;left:22px;height:6px;border-radius:999px;background:#d9e8f5}
.visual-line::before{
content:"";
position:absolute;
left:-12px;top:-2px;
width:9px;height:9px;border-radius:50%;
background:#83b2df;
}
.visual-line.line-a{top:24px;width:65px}
.visual-line.line-b{top:43px;width:52px}
.visual-line.line-c{top:62px;width:62px}
.visual-gear{
position:absolute;
right:-22px;
top:28px;
display:grid;
place-items:center;
width:54px;height:54px;
border-radius:16px;
background:linear-gradient(145deg,#2b6ca0,#173d5d);
box-shadow:0 11px 28px rgba(28,76,113,.25);
}
.visual-gear svg{width:29px;height:29px;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.services-new-btn{
min-width:168px;
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 17px;
box-shadow:0 8px 20px rgba(23,61,93,.15);
}
.services-new-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.service-searchbar{
display:grid;
grid-template-columns:minmax(0,1fr) auto;
align-items:center;
gap:10px;
padding:11px;
margin-bottom:18px;
border-radius:15px;
box-shadow:0 7px 22px rgba(18,42,64,.035);
}
.service-search-control{
position:relative;
display:flex;
align-items:center;
min-width:0;
}
.service-search-control>svg{
position:absolute;
left:15px;
width:20px;height:20px;
fill:none;stroke:#7d93a4;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
pointer-events:none;
}
.service-search-control input{
width:100%;
min-height:50px;
padding:10px 45px 10px 46px;
border:1px solid #d4e0e8;
border-radius:11px;
background:#fff;
color:#29465d;
outline:none;
font-size:13px;
transition:border-color .16s ease,box-shadow .16s ease;
}
.service-search-control input:focus{
border-color:#89b2cf;
box-shadow:0 0 0 3px rgba(77,145,193,.10);
}
.service-search-control input::placeholder{color:#95a5b1}
.service-search-clear{
position:absolute;
right:11px;
display:grid;
place-items:center;
width:29px;height:29px;
border-radius:50%;
background:#f1f5f8;
color:#708391;
font-size:19px;
}
.service-searchbar>button{
min-width:132px;
min-height:50px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:7px;
border:0;
border-radius:11px;
background:#173d5d;
color:#fff;
font-size:12.5px;
font-weight:850;
cursor:pointer;
}
.service-searchbar>button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.services-section-head{
display:flex;
align-items:end;
justify-content:space-between;
gap:20px;
margin:0 3px 11px;
}
.services-section-head h3{
margin:3px 0 0;
color:#173a56;
font-size:17px;
}
.services-section-head>small{
max-width:420px;
color:#8394a1;
font-size:11.5px;
line-height:1.45;
text-align:right;
}
.servicegrid-premium{
grid-template-columns:repeat(2,minmax(0,1fr));
gap:13px;
}
.servicecard-premium{
position:relative;
display:grid;
grid-template-columns:minmax(0,1fr) 196px;
gap:0;
min-height:185px;
padding:0;
overflow:hidden;
border-color:#d9e4eb;
background:linear-gradient(180deg,#fff,#fdfefe);
transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
a.servicecard-premium:hover{
transform:translateY(-2px);
border-color:#bcd1df;
box-shadow:0 15px 34px rgba(18,42,64,.085);
}
.service-card-main{
min-width:0;
display:grid;
grid-template-columns:48px minmax(0,1fr);
gap:14px;
padding:20px 18px 17px 20px;
}
.serviceicon-premium{
width:48px;height:48px;
border-radius:14px;
background:#edf4ff;
color:#315eaf;
}
.serviceicon-premium.once{background:#edf8f4;color:#168261}
.serviceicon-premium svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-card-copy{min-width:0;display:flex;flex-direction:column}
.service-title-row{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:10px;
}
.service-title-row h3{
min-width:0;
margin:1px 0 0;
color:#153852;
font-size:15px;
line-height:1.38;
letter-spacing:-.01em;
}
.frequency-pill{
flex:0 0 auto;
display:inline-flex;
align-items:center;
gap:5px;
min-height:26px;
padding:4px 7px;
border-radius:999px;
background:#eef4ff;
color:#315eaf;
font-size:10.5px;
font-weight:850;
}
.frequency-pill.once{background:#eaf8f2;color:#168261}
.frequency-pill svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.service-card-copy>p{
margin:8px 0 12px;
color:#718595;
font-size:12px;
line-height:1.55;
}
.service-card-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-top:auto;
}
.service-card-foot>span:first-child{
color:#8a99a5;
font-size:10.5px;
font-weight:750;
text-transform:uppercase;
letter-spacing:.035em;
}
.service-card-foot>span:first-child strong{margin-left:5px;color:#536c7e}
.service-edit-hint{
display:inline-flex;
align-items:center;
gap:3px;
color:#648096;
font-size:11px;
font-weight:800;
}
.service-edit-hint svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.service-price-panel{
display:grid;
align-content:center;
padding:16px 16px;
border-left:1px solid #e3eaf0;
background:linear-gradient(180deg,#fbfcfe,#f7fafc);
}
.service-price-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
}
.service-price-row>div{display:grid;gap:3px}
.service-price-row small{
color:#8494a1;
font-size:10.5px;
font-weight:750;
}
.service-price-row strong{
color:#173a56;
font-size:16px;
line-height:1.2;
font-variant-numeric:tabular-nums;
}
.service-price-row strong span{
color:#647c8e;
font-size:10.5px;
font-weight:850;
}
.vehicle-chip{
display:inline-flex;
align-items:center;
gap:4px;
min-width:45px;
justify-content:center;
padding:5px 6px;
border:1px solid #dce6ed;
border-radius:8px;
background:#fff;
color:#667e90;
font-size:10.5px;
font-weight:850;
}
.vehicle-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.service-price-divider{
height:1px;
margin:12px 0;
background:#e2e9ee;
}
.services-empty-state{
grid-column:1/-1;
display:grid;
justify-items:center;
gap:8px;
padding:46px 20px;
text-align:center;
}
.services-empty-icon{
display:grid;
place-items:center;
width:54px;height:54px;
border-radius:15px;
background:#eef4fb;
color:#496f8e;
}
.services-empty-icon svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.services-empty-state h3{margin:0;color:#466174;font-size:15px}
@media(max-width:1250px){
.services-hero{grid-template-columns:minmax(0,1fr) 170px auto;gap:20px}
.services-hero-visual{width:155px;transform:scale(.9)}
.servicecard-premium{grid-template-columns:minmax(0,1fr) 174px}
}
@media(max-width:1100px){
.servicegrid-premium{grid-template-columns:1fr}
.servicecard-premium{grid-template-columns:minmax(0,1fr) 210px}
}
@media(max-width:900px){
.services-hero{grid-template-columns:minmax(0,1fr) auto;min-height:0}
.services-hero-visual{display:none}
.services-new-btn{align-self:center}
.services-section-head{align-items:flex-start;flex-direction:column;gap:4px}
.services-section-head>small{text-align:left}
}
@media(max-width:680px){
.services-hero{
display:flex;
flex-direction:column;
align-items:stretch;
gap:17px;
padding:21px 17px;
}
.services-hero h2{font-size:25px}
.services-hero p{font-size:12.5px}
.services-new-btn{width:100%;min-height:50px}
.service-searchbar{grid-template-columns:1fr;padding:9px}
.service-search-control input{font-size:16px}
.service-searchbar>button{width:100%;font-size:13px}
.services-section-head{margin:0 2px 9px}
.servicegrid-premium{gap:10px}
.servicecard-premium{
grid-template-columns:1fr;
min-height:0;
}
.service-card-main{
grid-template-columns:44px minmax(0,1fr);
gap:11px;
padding:16px 14px 13px;
}
.serviceicon-premium{width:44px;height:44px;border-radius:12px}
.service-title-row{flex-direction:column;gap:7px}
.service-card-copy>p{font-size:12.5px}
.service-price-panel{
grid-template-columns:1fr auto 1fr;
gap:12px;
align-items:center;
padding:13px 14px;
border-left:0;
border-top:1px solid #e3eaf0;
}
.service-price-divider{
width:1px;height:50px;margin:0;
}
.service-price-row{min-width:0}
.service-price-row strong{font-size:15px}
}
@media(max-width:430px){
.service-card-main{grid-template-columns:1fr}
.serviceicon-premium{width:42px;height:42px}
.service-price-panel{grid-template-columns:1fr}
.service-price-divider{width:100%;height:1px;margin:0}
.service-price-row{width:100%}
.services-hero-meta>span{width:100%;justify-content:center}
}
/* 20260828 existing-client-subscription-onboarding */
.billing-month-field{
position:relative;
padding:12px;
border:1px solid #d8e6ef;
border-radius:11px;
background:linear-gradient(180deg,#f8fbfe,#f4f9fc);
}
.billing-month-field::before{
content:"";
position:absolute;
left:0;top:10px;bottom:10px;
width:3px;
border-radius:3px;
background:#4385b5;
}
.billing-month-field label{color:#244c69!important}
.computed-field input{
background:#f3f7fa!important;
color:#5d7486!important;
border-style:dashed!important;
}
@media(max-width:680px){
.billing-month-field{padding:11px}
}
/* 20260828 confirm-and-send */
.confirm-send-panel{display:grid;gap:12px}
.confirm-send-copy{display:grid;grid-template-columns:38px minmax(0,1fr);gap:10px;align-items:start}
.confirm-send-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#eaf7f1;color:#14785b;font-size:18px;font-weight:900}
.confirm-send-copy strong{display:block;color:#183e5a;font-size:13px;margin-bottom:3px}
.confirm-send-copy small{display:block;color:#718596;font-size:11.3px;line-height:1.45}
.confirm-send-btn{width:100%;min-height:48px;display:flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:10px;background:linear-gradient(135deg,#173d5d,#20577f);color:#fff;font-size:12.5px;font-weight:900;cursor:pointer;box-shadow:0 8px 18px rgba(23,61,93,.16)}
.confirm-send-btn:hover{filter:brightness(1.035)}
.confirm-send-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.confirm-send-warning{padding:9px 10px;border:1px solid #efdba8;border-radius:9px;background:#fff9ec;color:#8a6826;font-size:10.8px;line-height:1.4}
@media(max-width:680px){.confirm-send-btn{min-height:52px;font-size:13px}.confirm-send-copy small{font-size:12px}}
/* 20260828 explicit-recurrence-duration */
.recurrence-card{background:#f8fbfd!important;border-color:#d9e6ee!important}
.recurrence-card.recurrence-active{background:#f5fbf8!important;border-color:#cfe8dc!important}
.recurrence-card.recurrence-complete{background:#f7f9fb!important;border-color:#dfe6eb!important}
.recurrence-card-icon{background:#e9f3fb!important;color:#173d5d!important}
.recurrence-active .recurrence-card-icon{background:#e6f6ef!important;color:#14785b!important}
.recurrence-title-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.recurrence-title-row h3{margin:0}
.recurrence-status{display:inline-flex;align-items:center;min-height:23px;padding:3px 7px;border-radius:999px;font-size:9.5px;font-weight:900;letter-spacing:.05em}
.recurrence-status.active{background:#e6f6ef;color:#14785b}
.recurrence-status.complete{background:#edf1f4;color:#657786}
.recurrence-status.off{background:#fff3e0;color:#956313}
.recurrence-meta{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.recurrence-meta>span{display:flex;align-items:center;gap:6px;padding:5px 8px;border:1px solid #dce7ed;border-radius:999px;background:#fff;color:#81909c;font-size:10.5px;font-weight:750}
.recurrence-meta strong{color:#31546c;font-size:10.8px}
.recurrence-actions{display:flex!important;flex-wrap:wrap!important;gap:8px!important}
.recurrence-config-btn{min-width:168px}
.recurrence-dialog{width:min(540px,calc(100% - 26px));padding:0;border:0;border-radius:17px;background:#fff;box-shadow:0 28px 90px rgba(11,38,58,.26)}
.recurrence-dialog::backdrop{background:rgba(11,30,46,.42);backdrop-filter:blur(2px)}
.recurrence-dialog form{padding:22px}
.recurrence-dialog-head{display:grid;grid-template-columns:45px minmax(0,1fr);gap:12px;align-items:center}
.recurrence-dialog-icon{display:grid;place-items:center;width:45px;height:45px;border-radius:13px;background:#eaf3fa;color:#174769;font-size:22px;font-weight:900}
.recurrence-dialog-head h3{margin:4px 0 0;color:#183c58;font-size:18px}
.recurrence-dialog-intro{margin:15px 0;color:#6e8292;font-size:12px;line-height:1.55}
.recurrence-duration-options{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.recurrence-duration-options label{cursor:pointer}
.recurrence-duration-options input{position:absolute;opacity:0;pointer-events:none}
.recurrence-duration-options label>span{display:grid;place-items:center;min-height:92px;border:1px solid #d9e4eb;border-radius:12px;background:#fbfcfd;transition:.15s ease}
.recurrence-duration-options strong{color:#173d5d;font-size:26px;line-height:1}
.recurrence-duration-options small{margin-top:5px;color:#7b8c99;font-size:11px;font-weight:800}
.recurrence-duration-options input:checked+span{border-color:#4385b5;background:#f1f7fb;box-shadow:0 0 0 3px rgba(67,133,181,.09)}
.recurrence-dialog-note{margin-top:12px;padding:10px 11px;border-radius:10px;background:#f7f9fb;color:#6d8090;font-size:11px;line-height:1.45}
.recurrence-dialog-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:18px}
@media(max-width:680px){
.recurrence-card{grid-template-columns:auto 1fr!important}
.recurrence-card .recurrence-actions{grid-column:1/-1;width:100%}
.recurrence-config-btn,.recurrence-card .actions .secondary{width:100%}
.recurrence-duration-options{grid-template-columns:1fr}
.recurrence-duration-options label>span{grid-template-columns:auto auto;gap:6px;min-height:62px}
.recurrence-dialog form{padding:18px}
}
/* 20260828 cancellation-controls */
.invoice-cancel-trigger{color:#a63b4f!important;border-color:#e6cbd1!important;background:#fff8f9!important}
.invoice-cancel-trigger:hover{background:#fff1f3!important;border-color:#dcaeba!important}
.recurrence-status.stopped{background:#f6e9ec;color:#a04456}
.recurrence-stop-btn{color:#a04456!important;border-color:#e3c6cd!important;background:#fff!important}
.recurrence-stop-btn:hover{background:#fff4f6!important}
.recurrence-dialog-icon.danger{background:#fbecef;color:#a64053}
.danger-dialog .recurrence-dialog-intro strong{color:#a64053}
.dialog-field{display:grid;gap:6px;margin-top:14px}
.dialog-field>span{color:#566e80;font-size:11px;font-weight:850}
.dialog-field textarea{width:100%;resize:vertical;min-height:86px;padding:10px 11px;border:1px solid #d7e1e8;border-radius:10px;background:#fff;color:#29465d;font:inherit;outline:none}
.dialog-field textarea:focus{border-color:#9abbd1;box-shadow:0 0 0 3px rgba(67,133,181,.09)}
.recurrence-dialog-actions .danger{min-height:42px;padding:0 15px;border:0;border-radius:9px;background:#a64053;color:#fff;font-size:11.5px;font-weight:900;cursor:pointer}
.recurrence-dialog-actions .danger:hover{background:#923447}
@media(max-width:680px){
.recurrence-stop-btn{width:100%}
.recurrence-dialog-actions{display:grid;grid-template-columns:1fr}
.recurrence-dialog-actions button{width:100%}
}
/* === Temporary recurrence suspension controls · 2026-08-31 === */
.recurrence-card.recurrence-paused{
background:#fffaf2!important;
border-color:#ead8b7!important;
}
.recurrence-paused .recurrence-card-icon{
background:#fff0d6!important;
color:#9a6818!important;
}
.recurrence-status.paused{
background:#fff0d6;
color:#9a6818;
}
.recurrence-pause-btn{
color:#946215!important;
border-color:#e3cfaa!important;
background:#fffdf9!important;
}
.recurrence-pause-btn:hover{
background:#fff7e9!important;
}
.recurrence-resume-btn{
color:#14785b!important;
border-color:#b9dece!important;
background:#f8fffb!important;
}
.recurrence-resume-btn:hover{
background:#eefaf4!important;
}
.recurrence-dialog-icon.pause{
background:#fff0d6;
color:#9a6818;
}
.recurrence-dialog-icon.resume{
background:#e7f6ef;
color:#14785b;
}
.recurrence-dialog-actions .recurrence-pause-confirm,
.recurrence-dialog-actions .recurrence-resume-confirm{
min-height:42px;
padding:0 15px;
border:0;
border-radius:9px;
color:#fff;
font-size:11.5px;
font-weight:900;
cursor:pointer;
}
.recurrence-dialog-actions .recurrence-pause-confirm{
background:#a8731b;
}
.recurrence-dialog-actions .recurrence-pause-confirm:hover{
background:#936313;
}
.recurrence-dialog-actions .recurrence-resume-confirm{
background:#14785b;
}
.recurrence-dialog-actions .recurrence-resume-confirm:hover{
background:#10694f;
}
@media(max-width:620px){
.recurrence-pause-btn,
.recurrence-resume-btn{
width:100%;
}
.recurrence-dialog-actions .recurrence-pause-confirm,
.recurrence-dialog-actions .recurrence-resume-confirm{
width:100%;
}
}