:root{ --bg:#f3f1ec;--surface:#fffefa;--surface-2:#f8f6f1;--ink:#14201f;--muted:#71807c;--line:#e8e3d9; --sidebar:#111a19;--sidebar-2:#182321;--gold:#bd8b3a;--gold-2:#e4bf7d;--gold-soft:#f7edda;--green:#235c48; --danger:#a74741;--danger-soft:#fbe9e6;--shadow:0 20px 60px rgba(31,37,34,.09);--shadow-sm:0 8px 28px rgba(31,37,34,.07); --radius:20px;--radius-sm:13px;--sidebar-w:268px; } *{box-sizing:border-box}html{font-size:15px}body{margin:0;font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%} .app-shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar-w);background:linear-gradient(180deg,var(--sidebar),#0d1514);color:#eef4f1;padding:22px 16px 18px;display:flex;flex-direction:column;z-index:50;border-right:1px solid rgba(255,255,255,.05)}.brand{display:flex;align-items:center;gap:12px;padding:4px 7px 20px}.brand-mark{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,var(--gold-2),#c2944b);color:#16201f;font-weight:900;letter-spacing:-.05em;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}.brand-mark.has-logo{overflow:hidden;background:#fff}.brand-mark.has-logo img{width:100%;height:100%;object-fit:contain;padding:4px}.brand-copy{display:flex;flex-direction:column;min-width:0}.brand-copy strong{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.brand-copy span{font-size:10px;color:#9eadA8;letter-spacing:.04em;margin-top:2px}.nav-caption{color:#64736f;font-weight:800;text-transform:uppercase;letter-spacing:.16em;font-size:9px;padding:8px 12px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.nav-item{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;color:#aebbb7;font-weight:720;font-size:13px;transition:.16s ease}.nav-item:hover{background:rgba(255,255,255,.055);color:#fff;transform:translateX(2px)}.nav-item.active{background:linear-gradient(90deg,rgba(227,189,119,.16),rgba(227,189,119,.07));color:#fff;box-shadow:inset 3px 0 0 var(--gold-2)}.nav-icon{width:27px;height:27px;border-radius:9px;background:rgba(255,255,255,.055);display:grid;place-items:center;font-size:14px}.nav-item.active .nav-icon{background:rgba(227,189,119,.18);color:var(--gold-2)}.sidebar-card{margin-top:auto;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.065);border-radius:14px;padding:13px;display:flex;gap:10px;align-items:center}.sidebar-card strong,.sidebar-card small{display:block}.sidebar-card strong{font-size:11px}.sidebar-card small{color:#81908c;font-size:9px;margin-top:2px}.pulse-dot{width:8px;height:8px;border-radius:50%;background:#6cd19e;box-shadow:0 0 0 5px rgba(108,209,158,.1)}.sidebar-foot{display:grid;grid-template-columns:34px 1fr 24px;gap:9px;align-items:center;border-top:1px solid rgba(255,255,255,.07);margin-top:12px;padding:16px 5px 0}.sidebar-foot span,.sidebar-foot strong{display:block}.sidebar-foot span{color:#758580;font-size:9px}.sidebar-foot strong{font-size:11px;margin-top:2px}.sidebar-foot>a{color:#9cadA8}.user-orb{width:34px;height:34px;border-radius:10px;background:#22312e;display:grid;place-items:center;font-weight:900;color:var(--gold-2)} .main{margin-left:var(--sidebar-w);min-height:100vh;display:flex;flex-direction:column}.topbar{height:82px;display:flex;align-items:center;gap:14px;padding:0 32px;background:rgba(243,241,236,.86);backdrop-filter:blur(14px);position:sticky;top:0;z-index:25;border-bottom:1px solid rgba(221,216,204,.75)}.top-title{min-width:0}.topbar h1{font-size:19px;line-height:1;margin:2px 0 0;letter-spacing:-.02em}.eyebrow{font-size:9px;line-height:1.2;text-transform:uppercase;letter-spacing:.16em;color:#8a6d3e;font-weight:900;margin:0 0 7px}.top-actions{margin-left:auto;display:flex;gap:10px;align-items:center}.live-pill{display:flex;gap:7px;align-items:center;border:1px solid var(--line);background:rgba(255,255,255,.72);border-radius:999px;padding:8px 11px;color:var(--muted);font-size:10px;font-weight:700}.live-pill i{width:6px;height:6px;border-radius:50%;background:#42a879}.menu-btn{display:none;border:0;background:#fff;border-radius:10px;padding:9px 11px;box-shadow:var(--shadow-sm)}.content{width:min(1500px,100%);margin:0 auto;padding:28px 32px 36px;flex:1}.footer{padding:16px 32px 24px;color:#98a19f;font-size:10px;display:flex;justify-content:space-between;gap:16px}.footer span:first-child{font-weight:900;color:#63716d} .btn{border:1px solid transparent;border-radius:11px;padding:10px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:820;font-size:12px;line-height:1;transition:.16s ease;white-space:nowrap}.btn:hover{transform:translateY(-1px);filter:brightness(.985)}.btn-primary{background:linear-gradient(145deg,#182522,#253a35);color:#fff;box-shadow:0 8px 18px rgba(19,35,31,.15)}.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line)}.btn-light{background:#fff;color:#1a2825}.btn-whatsapp{background:#e7f5ed;color:#17613f}.btn-danger{background:#fff0ee;color:#9f3f39}.btn-lg{padding:13px 18px;border-radius:13px}.btn-block{width:100%}.icon-btn{border:0;width:31px;height:31px;border-radius:9px;background:#f0eee8;color:#5e6865;font-weight:900}.icon-btn.danger{background:#fff0ed;color:#a14a43} .card,.invoice-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:20px}.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:17px}.card-head h3{font-size:15px;margin:0;letter-spacing:-.015em}.card-head a{font-size:10px;color:#7d6743;font-weight:800}.page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.page-intro h2{font-size:26px;margin:0 0 7px;letter-spacing:-.04em}.page-intro p{margin:0;color:var(--muted);font-size:12px}.premium-intro{background:linear-gradient(135deg,#172421,#223530);color:#fff;border-radius:22px;padding:24px 26px;box-shadow:0 20px 42px rgba(17,31,28,.16)}.premium-intro p{color:#b8c4c0}.premium-intro .eyebrow{color:#d7b372}.feature-chip,.pill{border:1px solid var(--line);border-radius:999px;padding:7px 10px;font-size:9px;font-weight:850;background:#fff;color:#66726f}.premium-intro .feature-chip{background:rgba(255,255,255,.08);color:#dde6e3;border-color:rgba(255,255,255,.11)} .hero-card{background:radial-gradient(circle at 90% 10%,rgba(227,189,119,.20),transparent 32%),linear-gradient(135deg,#15221f,#253833);color:#fff;padding:27px;border-radius:24px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px;box-shadow:0 22px 45px rgba(17,31,28,.18)}.hero-card h2{font-size:28px;margin:0 0 7px;letter-spacing:-.04em}.hero-card p:not(.eyebrow){color:#b5c2be;margin:0;font-size:12px}.hero-card .eyebrow{color:#d5b06e}.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}.stat-card{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm);min-height:115px;display:flex;flex-direction:column}.stat-card span{font-size:10px;color:var(--muted);font-weight:800}.stat-card strong{font-size:24px;letter-spacing:-.04em;margin:13px 0 6px}.stat-card small{font-size:9px;color:#9ba39f}.stat-card.danger-soft{background:#fffaf7}.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.stack{display:flex;flex-direction:column;gap:14px}.stack-lg{display:flex;flex-direction:column;gap:18px}.bill-layout{grid-template-columns:minmax(0,1.65fr) minmax(300px,.72fr);align-items:start}.sticky-card{position:sticky;top:102px}.span-wide,.span-2{grid-column:1/-1} label{display:flex;flex-direction:column;gap:7px;font-size:10px;font-weight:820;color:#56615e}input,select,textarea{width:100%;border:1px solid #ddd7cc;background:#fff;border-radius:11px;padding:11px 12px;color:var(--ink);outline:none;transition:.15s ease}input:focus,select:focus,textarea:focus{border-color:#b99962;box-shadow:0 0 0 3px rgba(185,153,98,.10)}input[readonly]{background:#f5f3ed;color:#5f6a67}textarea{resize:vertical}label small,.fineprint{font-size:9px;color:#98a09d;font-weight:500;line-height:1.5}.form-grid{display:grid;gap:13px}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.three{grid-template-columns:repeat(3,1fr)}.form-grid.four{grid-template-columns:repeat(4,1fr)}.check-row{flex-direction:row;align-items:center;gap:8px}.check-row input{width:auto}.toggle{display:inline-flex;align-items:center;gap:8px;flex-direction:row}.toggle input{appearance:none;width:35px;height:20px;border-radius:999px;padding:0;background:#d8ddd9;border:0;position:relative}.toggle input:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:3px;left:3px;box-shadow:0 1px 4px rgba(0,0,0,.2);transition:.15s}.toggle input:checked{background:#1d6048}.toggle input:checked:after{left:18px}.muted{color:var(--muted)} .toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}.toolbar-actions{display:flex;gap:9px;flex-wrap:wrap}.search-form,.report-filter{display:flex;align-items:end;gap:9px}.search-form input{min-width:290px}.table-wrap{overflow:auto;border-radius:12px}table{width:100%;border-collapse:collapse;font-size:11px}th{text-align:left;color:#8a9591;text-transform:uppercase;letter-spacing:.08em;font-size:8px;padding:10px 10px;border-bottom:1px solid var(--line);white-space:nowrap}td{padding:11px 10px;border-bottom:1px solid #efebe3;vertical-align:middle}td small{display:block;color:#9aa39f;margin-top:3px;font-size:8px}.empty{text-align:center;color:#929b98;padding:26px}.status{font-size:8px;font-weight:900;letter-spacing:.07em;padding:6px 8px;border-radius:999px;display:inline-block}.status-paid{background:#e7f4ed;color:#286447}.status-partial{background:#fbf0dd;color:#956b29}.status-unpaid{background:#fbe8e6;color:#99443f} .alert{padding:12px 14px;border-radius:12px;margin-bottom:16px;font-size:11px;display:flex;gap:9px;align-items:center}.alert span{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-weight:900}.alert-success{background:#e9f4ee;color:#2b6148}.alert-success span{background:#d8ebdf}.alert-error{background:#fbe9e7;color:#8d413c}.alert-error span{background:#f5d8d4}.soft-callout,.note-box{background:#f7f3eb;border:1px solid #eae0d2;border-radius:14px;padding:14px}.soft-callout p,.note-box p{margin:6px 0 0;color:var(--muted);font-size:10px;line-height:1.55}.soft-callout.compact{margin-top:14px}.summary-row,.bill-total{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}.bill-total span,.summary-row span{color:var(--muted);font-size:10px}.bill-total strong{font-size:27px;letter-spacing:-.04em}.summary-row strong{font-size:14px}.summary-row.emphasis{border-top:1px solid var(--line);margin-top:3px}.summary-row.emphasis strong{font-size:20px}.summary-row.positive strong{color:#29644a}.summary-row.negative strong{color:#a34b44} .customer-snapshot{margin-top:14px;padding:13px;border-radius:14px;background:#f8f5ef;border:1px solid #e9e1d5;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.customer-snapshot[hidden]{display:none}.customer-snapshot div{padding:4px 6px}.customer-snapshot span,.customer-snapshot strong{display:block}.customer-snapshot span{font-size:8px;text-transform:uppercase;letter-spacing:.08em;color:#9aa39f;margin-bottom:4px}.customer-snapshot strong{font-size:11px}.customer-info-line{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:10px} .bill-items-list,.exchange-items-list,.buyback-items-list{display:flex;flex-direction:column;gap:12px}.bill-item-card,.exchange-item-card,.buyback-item-card{border:1px solid var(--line);background:linear-gradient(180deg,#fff,#fffdfa);border-radius:16px;padding:15px;position:relative}.item-card-head{display:grid;grid-template-columns:150px minmax(200px,1fr) 105px 36px;gap:10px;align-items:end;margin-bottom:12px}.item-card-grid{display:grid;grid-template-columns:repeat(6,minmax(105px,1fr));gap:10px}.item-price-strip{margin-top:12px;display:flex;justify-content:flex-end;gap:18px;flex-wrap:wrap;background:#f7f4ee;border-radius:12px;padding:10px 12px}.item-price-strip div{display:flex;flex-direction:column;align-items:flex-end}.item-price-strip span{font-size:8px;color:#8d9793;text-transform:uppercase;letter-spacing:.08em}.item-price-strip strong{font-size:12px;margin-top:3px}.item-price-strip .final strong{font-size:16px;color:#1d5140}.inline-unit{position:relative}.inline-unit input{padding-right:47px}.inline-unit .unit-label{position:absolute;right:10px;bottom:11px;font-size:9px;color:#909a96}.section-divider{height:1px;background:var(--line);margin:5px 0 16px}.section-banner{display:flex;justify-content:space-between;gap:14px;align-items:center;background:#f8f5ef;border:1px dashed #dacdbb;border-radius:14px;padding:13px;margin-bottom:12px}.section-banner p{margin:3px 0 0;color:var(--muted);font-size:9px}.section-banner strong{font-size:12px}.exchange-total{font-weight:900;color:#2f634d}.empty-inline{padding:16px;text-align:center;color:#98a09d;font-size:10px;border:1px dashed var(--line);border-radius:13px} .rate-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:18px}.rate-card{background:var(--surface);border:1px solid var(--line);border-radius:19px;padding:18px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:42px 1fr;gap:13px;align-items:center}.rate-card label,.rate-card button{grid-column:1/-1}.rate-icon{width:42px;height:42px;border-radius:13px;background:var(--gold-soft);color:#8e6628;display:grid;place-items:center;font-weight:950}.rate-card p{margin:0;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.1em}.rate-card h3{margin:4px 0 0;font-size:20px}.rate-card h3 span{font-size:9px;color:#8e9995;font-weight:600}.purity-preview{margin-top:12px;display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.purity-preview div{background:#f8f5ef;border-radius:10px;padding:8px}.purity-preview span,.purity-preview strong{display:block}.purity-preview span{font-size:8px;color:#8f9895}.purity-preview strong{font-size:10px;margin-top:3px} .profile-head{display:flex;align-items:center;gap:13px;margin-bottom:18px}.profile-head>a{margin-left:auto}.avatar-xl{width:55px;height:55px;border-radius:16px;background:#1a2926;color:#dcb977;display:grid;place-items:center;font-weight:950;font-size:18px}.profile-head h2{margin:0 0 4px;font-size:22px}.profile-head p:not(.eyebrow){margin:0;color:var(--muted);font-size:10px}.back-link{color:var(--muted);font-size:10px}.customer-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:#f8f5ef;border:1px solid var(--line);border-radius:14px;padding:13px;margin:18px 0}.customer-strip span,.customer-strip strong{display:block}.customer-strip span{font-size:8px;color:#939d99;text-transform:uppercase;letter-spacing:.08em}.customer-strip strong{font-size:11px;margin-top:4px}.invoice-card{padding:24px}.invoice-top{display:flex;justify-content:space-between;gap:20px;align-items:flex-start}.invoice-top h2{font-size:24px;margin:0 0 5px}.invoice-top>div>span{color:var(--muted);font-size:10px}.invoice-status{text-align:right}.invoice-status small,.invoice-status strong{display:block}.invoice-status small{font-size:8px;color:var(--muted);margin-top:9px}.invoice-status strong{font-size:18px;margin-top:2px}.invoice-summary{max-width:390px;margin:18px 0 0 auto}.invoice-summary div{display:flex;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #eee9e1;font-size:10px}.invoice-summary div strong{font-size:11px}.invoice-summary .due{font-size:13px;padding-top:11px}.invoice-summary .due strong{font-size:16px}.due-list{display:flex;flex-direction:column}.due-list>a{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #eeeae2;padding:11px 3px}.due-list span,.due-list strong{display:block}.due-list span{font-size:8px;color:var(--muted);margin-top:3px}.due-list b{font-size:11px}.pulse-list{display:flex;flex-direction:column}.pulse-list>div{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid #eeeae2}.pulse-list span{color:var(--muted);font-size:10px}.pulse-list strong{font-size:11px}.bars{height:210px;display:flex;gap:10px;align-items:end;padding-top:10px}.bar-col{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;min-width:0}.bar-track{height:145px;width:100%;max-width:34px;background:#f0ece4;border-radius:9px;display:flex;align-items:flex-end;overflow:hidden}.bar-fill{width:100%;min-height:4px;background:linear-gradient(180deg,#d8ae67,#9b7132);border-radius:9px}.bar-col strong{font-size:7px;margin-top:6px;max-width:55px;overflow:hidden;text-overflow:ellipsis}.bar-col span{font-size:8px;color:var(--muted);margin-top:4px} .settings-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}.settings-card{margin:0}.brand-settings-grid{display:grid;grid-template-columns:190px 1fr;gap:20px}.logo-uploader{border:1px dashed #d8cfbf;border-radius:16px;padding:14px;background:#fbf9f5}.logo-preview{height:110px;border-radius:13px;background:#f1ede5;display:grid;place-items:center;overflow:hidden;margin-bottom:12px}.logo-preview img{width:100%;height:100%;object-fit:contain;padding:10px}.logo-preview span{font-size:32px;font-weight:950;color:#876329}.file-label input{padding:7px;font-size:9px}.settings-save{display:flex;justify-content:flex-end;margin-bottom:18px} .install-body,.login-body{min-height:100vh;background:radial-gradient(circle at 15% 15%,rgba(219,185,126,.19),transparent 32%),#efece5;display:grid;place-items:center;padding:28px}.install-card{width:min(900px,100%);background:#fffdfa;border:1px solid var(--line);border-radius:26px;padding:31px;box-shadow:0 28px 70px rgba(32,37,34,.13)}.install-brand{margin-bottom:23px}.install-card h1{font-size:34px;margin:8px 0 9px;letter-spacing:-.04em}.success-panel{text-align:center;padding:32px}.login-wrap{width:min(980px,100%);display:grid;grid-template-columns:1.05fr .95fr;background:#fffdfa;border:1px solid var(--line);border-radius:28px;overflow:hidden;box-shadow:0 32px 80px rgba(32,37,34,.15)}.login-story{background:radial-gradient(circle at 80% 10%,rgba(227,189,119,.18),transparent 32%),linear-gradient(145deg,#111c1a,#243832);color:#fff;padding:46px}.login-story .brand{padding:0}.login-story h1{font-size:42px;line-height:1.05;letter-spacing:-.05em;margin:58px 0 16px}.login-story>p{color:#b9c5c1;line-height:1.6;font-size:13px}.mini-stats{display:flex;gap:8px;flex-wrap:wrap;margin-top:24px}.mini-stats span{padding:8px 10px;border:1px solid rgba(255,255,255,.12);border-radius:999px;font-size:9px;color:#d7e0dd}.login-card{padding:50px;display:flex;flex-direction:column;justify-content:center}.login-card h2{font-size:26px;margin:4px 0 22px;letter-spacing:-.03em} .sidebar-backdrop{display:none} @media(max-width:1180px){.item-card-grid{grid-template-columns:repeat(3,1fr)}.stats-grid{grid-template-columns:repeat(2,1fr)}.rate-grid{grid-template-columns:1fr 1fr}.settings-grid{grid-template-columns:1fr}.span-wide{grid-column:auto}} @media(max-width:980px){.sidebar{transform:translateX(-105%);transition:.2s}.sidebar.open{transform:none}.sidebar.open~.sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(7,13,12,.35);z-index:40}.main{margin-left:0}.menu-btn{display:inline-flex}.topbar{padding:0 20px}.content{padding:22px 20px}.bill-layout,.grid-2{grid-template-columns:1fr}.sticky-card{position:static}.brand-settings-grid{grid-template-columns:1fr}.logo-uploader{display:grid;grid-template-columns:120px 1fr;gap:12px}.logo-preview{height:90px;margin:0}.form-grid.four{grid-template-columns:1fr 1fr}.login-wrap{grid-template-columns:1fr}.login-story{display:none}} @media(max-width:680px){.content{padding:17px 12px}.topbar{height:72px;padding:0 12px}.top-actions .live-pill{display:none}.topbar h1{font-size:16px}.stats-grid,.rate-grid,.form-grid.two,.form-grid.three,.form-grid.four,.customer-snapshot,.customer-strip{grid-template-columns:1fr}.item-card-head{grid-template-columns:1fr 1fr}.item-card-head .item-remove{grid-column:2;grid-row:1;justify-self:end}.item-card-grid{grid-template-columns:1fr 1fr}.hero-card,.page-intro,.toolbar,.profile-head{align-items:flex-start;flex-direction:column}.profile-head>a{margin-left:0}.search-form,.report-filter{width:100%;display:grid}.search-form input{min-width:0}.toolbar-actions{width:100%}.card,.invoice-card{padding:15px}.bill-item-card,.exchange-item-card,.buyback-item-card{padding:12px}.brand-settings-grid{display:block}.logo-uploader{display:block;margin-bottom:14px}.settings-save .btn{width:100%}.footer{padding:12px;display:block}.footer span{display:block;margin-top:4px}} /* Customer-first billing flow */ .customer-billing-card{overflow:hidden}.customer-card-head{margin-bottom:13px}.customer-search-shell{padding:15px;border-radius:16px;background:linear-gradient(135deg,#f8f5ee,#fffdf9);border:1px solid #e9e1d4}.customer-mobile-field{max-width:430px}.customer-mobile-field input{font-size:17px;font-weight:800;letter-spacing:.02em;padding:13px 14px}.customer-new-hint{margin-top:12px;padding:12px 14px;border-radius:13px;background:#f7f5f0;color:#8b9490;font-size:10px;border:1px dashed #ddd5c9}.customer-new-hint[hidden]{display:none}.existing-customer-card{margin-top:13px;padding:15px 16px;border-radius:17px;background:linear-gradient(135deg,#172521,#213630);color:#fff;box-shadow:0 14px 30px rgba(18,35,30,.13)}.existing-customer-card[hidden]{display:none}.existing-customer-top{display:flex;align-items:center;justify-content:space-between;gap:14px}.existing-customer-identity{display:flex;align-items:center;gap:12px;min-width:0}.customer-mini-avatar{width:45px;height:45px;border-radius:14px;background:linear-gradient(145deg,#e8c17b,#b88535);color:#17221f;display:grid;place-items:center;font-weight:950;font-size:17px;flex:none}.customer-found-label{display:block;color:#d8b778;text-transform:uppercase;letter-spacing:.12em;font-size:7.5px;font-weight:900;margin-bottom:3px}.existing-customer-identity strong{display:block;font-size:16px;letter-spacing:-.02em}.existing-customer-identity p{margin:4px 0 0;color:#b7c5c1;font-size:9px;line-height:1.45;white-space:normal}.existing-customer-card .btn-secondary{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.14);color:#fff}.btn-compact{padding:8px 10px;font-size:9px}.existing-customer-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px;padding-top:13px;border-top:1px solid rgba(255,255,255,.1)}.existing-customer-stats div{min-width:0}.existing-customer-stats span,.existing-customer-stats strong{display:block}.existing-customer-stats span{font-size:7.5px;color:#9eafaa;text-transform:uppercase;letter-spacing:.08em}.existing-customer-stats strong{font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.customer-details-fields{margin-top:13px;padding:15px;border:1px solid var(--line);border-radius:16px;background:#fffdfa}.customer-details-fields[hidden]{display:none}.customer-details-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}.customer-details-title span,.customer-details-title strong{display:block}.customer-details-title span{font-size:8px;color:#a0773e;text-transform:uppercase;letter-spacing:.1em;font-weight:900;margin-bottom:3px}.customer-details-title strong{font-size:13px}.text-btn{border:0;background:none;color:#8b6a37;font-size:9px;font-weight:850;cursor:pointer;padding:6px}.text-btn:hover{text-decoration:underline} @media(max-width:680px){.existing-customer-top{align-items:flex-start;flex-direction:column}.existing-customer-stats{grid-template-columns:1fr 1fr}.customer-mobile-field{max-width:none}} /* ========================================================== RATAN SETU — PREMIUM DASHBOARD Scoped to .rs-dashboard ========================================================== */ .rs-dashboard { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-canvas: #f7f4ec; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-danger: #9b453c; --rs-danger-soft: #f8e9e6; display: grid; gap: 20px; width: 100%; max-width: 1500px; margin: 0 auto; } /* ========================================================== HERO ========================================================== */ .rs-dashboard .rs-hero { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 150px; padding: 30px 34px; border-radius: 26px; background: radial-gradient( circle at 87% 15%, rgba(220, 185, 111, .18), transparent 28% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ); box-shadow: 0 20px 50px rgba(24, 35, 30, .15); color: #fff; } .rs-dashboard .rs-hero::after { content: ""; position: absolute; right: -70px; bottom: -105px; width: 280px; height: 280px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 50%; } .rs-dashboard .rs-hero-copy { position: relative; z-index: 2; } .rs-dashboard .rs-hero-kicker { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #dfbd78; } .rs-dashboard .rs-kicker-dot { width: 7px; height: 7px; border-radius: 999px; background: #dfbd78; box-shadow: 0 0 0 5px rgba(223, 189, 120, .11); } .rs-dashboard .rs-hero h2 { margin: 0; font-size: clamp(24px, 3vw, 38px); line-height: 1.08; letter-spacing: -.035em; color: #fff; } .rs-dashboard .rs-hero p { max-width: 650px; margin: 11px 0 0; font-size: 14px; line-height: 1.6; color: rgba(255, 255, 255, .66); } .rs-dashboard .rs-hero-actions { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ========================================================== ACTION BUTTONS ========================================================== */ .rs-dashboard .rs-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 0 16px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; font-size: 13px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .rs-dashboard .rs-action:hover { transform: translateY(-2px); } .rs-dashboard .rs-action-light { background: rgba(255, 255, 255, .96); color: #1a2923; } .rs-dashboard .rs-action-gold { background: linear-gradient( 135deg, #d8b064, #bd8934 ); color: #1b211d; box-shadow: 0 9px 20px rgba(178, 126, 42, .22); } .rs-dashboard .rs-action-icon { font-size: 16px; } /* ========================================================== KPI ========================================================== */ .rs-dashboard .rs-kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .rs-dashboard .rs-kpi-card { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 150px; padding: 20px; border: 1px solid var(--rs-line); border-radius: 20px; background: linear-gradient( 145deg, #fffefa, #fbfaf6 ); box-shadow: 0 12px 30px rgba(30, 37, 33, .045); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .rs-dashboard .rs-kpi-card:hover { transform: translateY(-3px); border-color: #ddd4c3; box-shadow: 0 18px 36px rgba(30, 37, 33, .08); } .rs-dashboard .rs-kpi-card::after { content: ""; position: absolute; right: -38px; top: -38px; width: 110px; height: 110px; border-radius: 50%; background: rgba(204, 157, 75, .055); } .rs-dashboard .rs-kpi-card-due { background: linear-gradient( 145deg, #fffefa, #fcf5f2 ); } .rs-dashboard .rs-kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .rs-dashboard .rs-kpi-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #f0ede4; color: var(--rs-green); font-size: 14px; font-weight: 900; } .rs-dashboard .rs-kpi-tag { padding: 5px 9px; border-radius: 999px; background: #f6f3eb; font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #8b806d; } .rs-dashboard .rs-kpi-label { margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #89928e; } .rs-dashboard .rs-kpi-value { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; letter-spacing: -.035em; color: var(--rs-ink); } .rs-dashboard .rs-kpi-meta { margin-top: auto; padding-top: 12px; font-size: 11px; color: #9ba29f; } /* ========================================================== MAIN GRID ========================================================== */ .rs-dashboard .rs-main-grid { display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(340px, .68fr); gap: 16px; } .rs-dashboard .rs-bottom-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(330px, .65fr); gap: 16px; } /* ========================================================== PANEL ========================================================== */ .rs-dashboard .rs-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line); border-radius: 22px; background: var(--rs-panel); box-shadow: 0 12px 34px rgba(31, 38, 34, .045); } .rs-dashboard .rs-panel-head { display: flex; justify-content: space-between; gap: 20px; padding: 22px 24px 10px; } .rs-dashboard .rs-panel-head-row { align-items: flex-start; } .rs-dashboard .rs-section-label { display: inline-flex; margin-bottom: 7px; font-size: 10px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--rs-gold-deep); } .rs-dashboard .rs-panel h3 { margin: 0; font-size: 18px; line-height: 1.25; letter-spacing: -.02em; color: var(--rs-ink); } .rs-dashboard .rs-panel-head p { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: #9aa19e; } .rs-dashboard .rs-panel-highlight { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; padding: 8px 11px; border: 1px solid #ebe3d4; border-radius: 12px; background: #fbf7ef; } .rs-dashboard .rs-panel-highlight small { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #a19787; } .rs-dashboard .rs-panel-highlight strong { margin-top: 3px; font-size: 12px; color: var(--rs-ink); } .rs-dashboard .rs-text-link { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; text-decoration: none; font-size: 11px; font-weight: 800; color: #786235; } .rs-dashboard .rs-text-link span { transition: transform .18s ease; } .rs-dashboard .rs-text-link:hover span { transform: translateX(3px); } /* ========================================================== CHART ========================================================== */ .rs-dashboard .rs-chart { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 15px; height: 245px; padding: 24px 26px 22px; align-items: end; } .rs-dashboard .rs-chart-column { display: grid; grid-template-rows: 22px 1fr 17px 13px; align-items: end; min-width: 0; height: 100%; } .rs-dashboard .rs-chart-value { overflow: hidden; min-height: 18px; font-size: 8px; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; color: #53605a; } .rs-dashboard .rs-chart-track { position: relative; overflow: hidden; width: min(34px, 70%); height: 100%; margin: 0 auto; border-radius: 10px 10px 5px 5px; background: linear-gradient( 180deg, #f2f0ea, #e9e5db ); } .rs-dashboard .rs-chart-bar { position: absolute; right: 0; bottom: 0; left: 0; min-height: 4px; border-radius: 10px 10px 5px 5px; background: linear-gradient( 180deg, #e1c27f, #c79844 ); box-shadow: 0 -5px 16px rgba(192, 142, 56, .10); } .rs-dashboard .rs-chart-bar.active { background: linear-gradient( 180deg, #d7aa58, #af7726 ); } .rs-dashboard .rs-chart-day { display: block; margin-top: 8px; font-size: 10px; font-weight: 800; text-align: center; color: #5c6762; } .rs-dashboard .rs-chart-date { display: block; font-size: 8px; text-align: center; color: #adb3b0; } /* ========================================================== BUSINESS PULSE ========================================================== */ .rs-dashboard .rs-pulse-list { padding: 8px 24px 20px; } .rs-dashboard .rs-pulse-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 42px; border-bottom: 1px solid #eeeae1; } .rs-dashboard .rs-pulse-row:last-child { border-bottom: 0; } .rs-dashboard .rs-pulse-row span { font-size: 11px; color: #818a86; } .rs-dashboard .rs-pulse-row strong { font-size: 12px; text-align: right; color: var(--rs-ink); } /* ========================================================== PREMIUM LATEST INVOICES ========================================================== */ .rs-dashboard .rs-invoice-list { padding: 5px 14px 14px; } .rs-dashboard .rs-invoice-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 105px; align-items: center; gap: 18px; min-height: 83px; margin-bottom: 8px; padding: 12px 12px; border: 1px solid transparent; border-radius: 16px; text-decoration: none; color: inherit; transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .rs-dashboard .rs-invoice-row:last-child { margin-bottom: 0; } .rs-dashboard .rs-invoice-row:hover { transform: translateY(-1px); border-color: #eadfca; background: linear-gradient( 100deg, #fcfaf4, #fffefa ); box-shadow: 0 8px 20px rgba(42, 47, 43, .04); } .rs-dashboard .rs-invoice-leading { display: flex; align-items: center; gap: 12px; min-width: 0; } .rs-dashboard .rs-invoice-avatar { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border: 1px solid #eadfc9; border-radius: 13px; background: linear-gradient( 145deg, #faf3e4, #f1e1c2 ); font-size: 14px; font-weight: 900; color: #9a6e27; } .rs-dashboard .rs-invoice-primary { min-width: 0; } .rs-dashboard .rs-invoice-title { display: flex; align-items: center; gap: 8px; min-width: 0; } .rs-dashboard .rs-invoice-title strong { overflow: hidden; font-size: 12px; color: var(--rs-ink); text-overflow: ellipsis; white-space: nowrap; } .rs-dashboard .rs-invoice-primary > span { display: block; overflow: hidden; max-width: 100%; margin-top: 4px; font-size: 11px; color: #626d68; text-overflow: ellipsis; white-space: nowrap; } .rs-dashboard .rs-invoice-primary small { display: block; margin-top: 3px; font-size: 9px; color: #a4aba7; } .rs-dashboard .rs-status-pill { display: inline-flex; align-items: center; flex-shrink: 0; min-height: 19px; padding: 0 7px; border-radius: 999px; font-size: 8px; font-weight: 900; letter-spacing: .05em; } .rs-dashboard .rs-status-pill.paid { background: #e7f3eb; color: #38704d; } .rs-dashboard .rs-status-pill.partial { background: #f6ead5; color: #9b6d26; } .rs-dashboard .rs-status-pill.due { background: #f7e7e5; color: #99493f; } .rs-dashboard .rs-invoice-money { display: flex; flex-direction: column; gap: 4px; text-align: right; } .rs-dashboard .rs-invoice-money strong { font-size: 12px; color: var(--rs-ink); } .rs-dashboard .rs-invoice-money span { font-size: 9px; color: #9aa19d; } .rs-dashboard .rs-invoice-due { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; padding-right: 20px; text-align: right; } .rs-dashboard .rs-invoice-due small { font-size: 9px; color: #a4aaa7; } .rs-dashboard .rs-invoice-due strong { font-size: 12px; color: #66706c; } .rs-dashboard .rs-invoice-due strong.has-due { color: #9d473e; } .rs-dashboard .rs-row-arrow { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: #b0a994; transition: transform .18s ease, color .18s ease; } .rs-dashboard .rs-invoice-row:hover .rs-row-arrow { transform: translate( 3px, -50% ); color: #946a28; } /* ========================================================== CUSTOMER DUES ========================================================== */ .rs-dashboard .rs-due-list { padding: 5px 20px 8px; } .rs-dashboard .rs-due-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 64px; border-bottom: 1px solid #efeae1; text-decoration: none; color: inherit; } .rs-dashboard .rs-due-row:last-child { border-bottom: 0; } .rs-dashboard .rs-due-rank { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #f4f1e9; font-size: 9px; font-weight: 900; color: #9b8d72; } .rs-dashboard .rs-due-person { min-width: 0; } .rs-dashboard .rs-due-person strong { display: block; overflow: hidden; font-size: 11px; color: var(--rs-ink); text-overflow: ellipsis; white-space: nowrap; } .rs-dashboard .rs-due-person span { display: block; margin-top: 3px; font-size: 9px; color: #a2aaa6; } .rs-dashboard .rs-due-amount { text-align: right; } .rs-dashboard .rs-due-amount small { display: block; margin-bottom: 3px; font-size: 8px; color: #a3aaa7; } .rs-dashboard .rs-due-amount strong { font-size: 11px; color: #97473e; } .rs-dashboard .rs-due-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 8px 18px 18px; padding: 14px 15px; border-radius: 15px; background: linear-gradient( 110deg, #f5f1e7, #faf8f2 ); } .rs-dashboard .rs-due-footer span { display: block; margin-bottom: 3px; font-size: 9px; text-transform: uppercase; letter-spacing: .06em; color: #998e7a; } .rs-dashboard .rs-due-footer strong { font-size: 14px; color: var(--rs-ink); } .rs-dashboard .rs-mini-button { padding: 9px 11px; border-radius: 10px; background: var(--rs-green); text-decoration: none; font-size: 9px; font-weight: 800; color: #fff; } /* ========================================================== EMPTY ========================================================== */ .rs-dashboard .rs-empty-state { display: flex; flex-direction: column; align-items: center; padding: 55px 24px; text-align: center; } .rs-dashboard .rs-empty-state.compact { padding: 44px 20px; } .rs-dashboard .rs-empty-icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 13px; border-radius: 14px; background: #f4f0e5; font-size: 18px; color: #aa7d31; } .rs-dashboard .rs-empty-state strong { font-size: 13px; color: var(--rs-ink); } .rs-dashboard .rs-empty-state p { max-width: 270px; margin: 6px 0 16px; font-size: 11px; line-height: 1.5; color: #9aa19e; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1180px) { .rs-dashboard .rs-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rs-dashboard .rs-main-grid, .rs-dashboard .rs-bottom-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .rs-dashboard { gap: 14px; } .rs-dashboard .rs-hero { align-items: flex-start; flex-direction: column; padding: 24px 20px; } .rs-dashboard .rs-hero-actions { width: 100%; } .rs-dashboard .rs-action { flex: 1; } .rs-dashboard .rs-kpi-grid { grid-template-columns: 1fr; } .rs-dashboard .rs-panel-head { padding: 18px 17px 8px; } .rs-dashboard .rs-panel-head-row { gap: 12px; } .rs-dashboard .rs-chart { gap: 7px; height: 220px; padding: 20px 14px; } .rs-dashboard .rs-chart-track { width: min(26px, 75%); } .rs-dashboard .rs-chart-value { display: none; } .rs-dashboard .rs-chart-column { grid-template-rows: 1fr 17px 13px; } .rs-dashboard .rs-invoice-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 10px; } .rs-dashboard .rs-invoice-money, .rs-dashboard .rs-invoice-due { flex-direction: row; align-items: center; justify-content: space-between; padding: 0 0 0 54px; text-align: left; } .rs-dashboard .rs-row-arrow { display: none; } .rs-dashboard .rs-due-footer { align-items: stretch; flex-direction: column; } .rs-dashboard .rs-mini-button { text-align: center; } } /* ========================================================== RATAN SETU DASHBOARD V2 PREMIUM BUSINESS PULSE + RECEIVABLES ========================================================== */ /* ========================================================== BUSINESS PULSE — PREMIUM COLOURFUL PANEL ========================================================== */ .rs-dashboard .rs-pulse-panel { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(204, 157, 75, .28); background: radial-gradient( circle at 92% 7%, rgba(216, 176, 100, .20), transparent 30% ), radial-gradient( circle at 5% 95%, rgba(44, 95, 74, .10), transparent 30% ), linear-gradient( 145deg, #fffdf8 0%, #fffaf0 48%, #f7f5ed 100% ); box-shadow: 0 18px 45px rgba(77, 64, 39, .08); } .rs-dashboard .rs-pulse-panel::before { content: ""; position: absolute; z-index: -1; width: 190px; height: 190px; right: -75px; top: -85px; border-radius: 50%; border: 28px solid rgba(197, 148, 66, .055); } .rs-dashboard .rs-pulse-panel::after { content: ""; position: absolute; z-index: -1; width: 120px; height: 120px; left: -55px; bottom: -60px; border-radius: 50%; background: rgba(28, 68, 52, .045); } .rs-dashboard .rs-pulse-panel .rs-panel-head { position: relative; padding: 24px 24px 16px; } .rs-dashboard .rs-pulse-panel .rs-section-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; margin-bottom: 10px; border: 1px solid rgba(184, 134, 52, .18); border-radius: 999px; background: rgba(249, 239, 217, .88); color: #946823; } .rs-dashboard .rs-pulse-panel .rs-section-label::before { content: "✦"; font-size: 9px; } .rs-dashboard .rs-pulse-panel h3 { font-size: 21px; letter-spacing: -.035em; } .rs-dashboard .rs-pulse-panel .rs-panel-head p { max-width: 330px; color: #807a6d; } /* ========================================================== BUSINESS PULSE ROWS ========================================================== */ .rs-dashboard .rs-pulse-list { display: grid; gap: 10px; padding: 4px 18px 20px; } .rs-dashboard .rs-pulse-row { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; min-height: 58px; padding: 11px 14px; border: 1px solid transparent; border-radius: 15px; background: rgba(255, 255, 255, .73); box-shadow: 0 6px 18px rgba(38, 44, 40, .035); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .rs-dashboard .rs-pulse-row:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(53, 49, 40, .07); } /* Monthly Sales */ .rs-dashboard .rs-pulse-row:nth-child(1) { border-color: rgba(207, 157, 73, .20); background: linear-gradient( 100deg, rgba(251, 239, 214, .82), rgba(255, 255, 255, .82) ); } .rs-dashboard .rs-pulse-row:nth-child(1)::before { content: "₹"; background: #f1dfbc; color: #9b6c24; } /* Collection */ .rs-dashboard .rs-pulse-row:nth-child(2) { border-color: rgba(60, 135, 93, .16); background: linear-gradient( 100deg, rgba(228, 244, 234, .88), rgba(255, 255, 255, .82) ); } .rs-dashboard .rs-pulse-row:nth-child(2)::before { content: "✓"; background: #dceee3; color: #397453; } /* GST */ .rs-dashboard .rs-pulse-row:nth-child(3) { border-color: rgba(88, 119, 182, .15); background: linear-gradient( 100deg, rgba(232, 238, 249, .90), rgba(255, 255, 255, .83) ); } .rs-dashboard .rs-pulse-row:nth-child(3)::before { content: "%"; background: #e2e8f4; color: #516da5; } /* Exchange */ .rs-dashboard .rs-pulse-row:nth-child(4) { border-color: rgba(154, 111, 185, .14); background: linear-gradient( 100deg, rgba(241, 233, 247, .90), rgba(255, 255, 255, .83) ); } .rs-dashboard .rs-pulse-row:nth-child(4)::before { content: "↺"; background: #eadff1; color: #80579c; } /* Average invoice */ .rs-dashboard .rs-pulse-row:nth-child(5) { border-color: rgba(220, 133, 71, .15); background: linear-gradient( 100deg, rgba(251, 234, 220, .92), rgba(255, 255, 255, .82) ); } .rs-dashboard .rs-pulse-row:nth-child(5)::before { content: "◇"; background: #f4e2d4; color: #a7683b; } /* Customers */ .rs-dashboard .rs-pulse-row:nth-child(6) { border-color: rgba(65, 118, 113, .14); background: linear-gradient( 100deg, rgba(226, 241, 239, .94), rgba(255, 255, 255, .84) ); } .rs-dashboard .rs-pulse-row:nth-child(6)::before { content: "●"; background: #dcecea; color: #3e706c; } .rs-dashboard .rs-pulse-row::before { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; margin-right: 11px; border-radius: 10px; font-size: 13px; font-weight: 900; } .rs-dashboard .rs-pulse-row span { margin-right: auto; font-size: 11px; font-weight: 700; color: #666f6b; } .rs-dashboard .rs-pulse-row strong { margin-left: 10px; font-size: 13px; font-weight: 900; letter-spacing: -.015em; color: #18221e; } /* ========================================================== RECEIVABLES PANEL — PREMIUM ========================================================== */ .rs-dashboard .rs-dues-panel { position: relative; isolation: isolate; overflow: hidden; border: 1px solid rgba(185, 104, 85, .17); background: radial-gradient( circle at 100% 0%, rgba(217, 157, 136, .15), transparent 28% ), radial-gradient( circle at 0% 100%, rgba(205, 169, 95, .10), transparent 30% ), linear-gradient( 145deg, #fffdfb, #fff8f4 ); box-shadow: 0 18px 45px rgba(82, 48, 38, .07); } .rs-dashboard .rs-dues-panel::before { content: ""; position: absolute; z-index: -1; right: -85px; top: -90px; width: 200px; height: 200px; border-radius: 50%; border: 34px solid rgba(191, 107, 84, .04); } /* ========================================================== RECEIVABLE HEADER ========================================================== */ .rs-dashboard .rs-dues-panel .rs-panel-head { padding: 24px 22px 14px; } .rs-dashboard .rs-dues-panel .rs-section-label { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; margin-bottom: 10px; border-radius: 999px; background: #f8eae4; border: 1px solid rgba(177, 83, 61, .12); color: #9b4f3e; } .rs-dashboard .rs-dues-panel .rs-section-label::before { content: "◆"; font-size: 8px; } .rs-dashboard .rs-dues-panel h3 { font-size: 21px; letter-spacing: -.035em; } .rs-dashboard .rs-dues-panel .rs-text-link { padding: 8px 11px; border-radius: 10px; background: rgba(157, 71, 62, .075); color: #93483f; transition: background .18s ease, transform .18s ease; } .rs-dashboard .rs-dues-panel .rs-text-link:hover { transform: translateY(-1px); background: rgba(157, 71, 62, .12); } /* ========================================================== CUSTOMER DUE CARDS ========================================================== */ .rs-dashboard .rs-due-list { display: grid; gap: 9px; padding: 5px 16px 10px; } .rs-dashboard .rs-due-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 70px; padding: 10px 12px; border: 1px solid rgba(208, 181, 167, .42); border-radius: 16px; background: rgba(255, 255, 255, .76); box-shadow: 0 6px 18px rgba(67, 48, 42, .035); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .rs-dashboard .rs-due-row:hover { transform: translateY(-2px) translateX(2px); border-color: rgba(192, 123, 100, .40); box-shadow: 0 12px 25px rgba(75, 48, 40, .07); } /* Rank bubble */ .rs-dashboard .rs-due-rank { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient( 145deg, #f3dfd7, #ebc9bc ); box-shadow: inset 0 0 0 1px rgba(159, 82, 60, .08); font-size: 10px; font-weight: 900; color: #964a3b; } /* first customer premium rank */ .rs-dashboard .rs-due-row:first-child .rs-due-rank { background: linear-gradient( 145deg, #efd9a7, #dbb86a ); color: #6e4a12; box-shadow: 0 6px 14px rgba(182, 132, 48, .18); } /* second */ .rs-dashboard .rs-due-row:nth-child(2) .rs-due-rank { background: linear-gradient( 145deg, #e6e8e7, #ccd1cf ); color: #626b67; } /* third */ .rs-dashboard .rs-due-row:nth-child(3) .rs-due-rank { background: linear-gradient( 145deg, #ead5c5, #d6ad8e ); color: #805538; } .rs-dashboard .rs-due-person strong { font-size: 12px; font-weight: 900; letter-spacing: -.01em; color: #1a2420; } .rs-dashboard .rs-due-person span { margin-top: 4px; font-size: 9px; letter-spacing: .04em; color: #9a9f9c; } /* due amount */ .rs-dashboard .rs-due-amount { min-width: 104px; padding: 7px 10px; border-radius: 11px; background: linear-gradient( 135deg, rgba(250, 236, 231, .95), rgba(255, 250, 247, .95) ); text-align: right; } .rs-dashboard .rs-due-amount small { margin-bottom: 4px; font-size: 8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #b08c80; } .rs-dashboard .rs-due-amount strong { font-size: 12px; font-weight: 900; color: #a14337; } /* ========================================================== RECEIVABLE TOTAL FOOTER ========================================================== */ .rs-dashboard .rs-due-footer { position: relative; overflow: hidden; margin: 12px 16px 16px; padding: 17px 16px; border: 1px solid rgba(199, 155, 77, .21); border-radius: 17px; background: radial-gradient( circle at 100% 50%, rgba(214, 177, 99, .20), transparent 35% ), linear-gradient( 110deg, #1d3028, #304438 ); box-shadow: 0 12px 25px rgba(33, 54, 45, .12); } .rs-dashboard .rs-due-footer::after { content: "₹"; position: absolute; right: 18px; top: -18px; font-size: 92px; font-weight: 900; color: rgba(255, 255, 255, .035); pointer-events: none; } .rs-dashboard .rs-due-footer span { position: relative; z-index: 2; color: rgba(255, 255, 255, .55); } .rs-dashboard .rs-due-footer strong { position: relative; z-index: 2; font-size: 18px; color: #fff; } .rs-dashboard .rs-due-footer .rs-mini-button { position: relative; z-index: 2; padding: 10px 13px; border: 1px solid rgba(255, 255, 255, .13); background: rgba(255, 255, 255, .11); backdrop-filter: blur(8px); color: #fff; transition: background .18s ease, transform .18s ease; } .rs-dashboard .rs-due-footer .rs-mini-button:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .18); } /* ========================================================== ADD EXTRA LIFE TO GENERAL DASHBOARD PANELS ========================================================== */ .rs-dashboard .rs-trend-panel { background: radial-gradient( circle at 93% 7%, rgba(214, 172, 91, .11), transparent 26% ), #fffefa; } .rs-dashboard .rs-invoice-panel { background: radial-gradient( circle at 2% 2%, rgba(48, 105, 84, .055), transparent 24% ), radial-gradient( circle at 97% 98%, rgba(214, 173, 95, .07), transparent 25% ), #fffefa; } /* ========================================================== KPI CARD UNIQUE TINTS ========================================================== */ .rs-dashboard .rs-kpi-card:nth-child(1) { background: linear-gradient( 145deg, #fff9e9, #fffefa ); } .rs-dashboard .rs-kpi-card:nth-child(1) .rs-kpi-icon { background: #f5e7c5; color: #916522; } .rs-dashboard .rs-kpi-card:nth-child(2) { background: linear-gradient( 145deg, #eff9f3, #fffefa ); } .rs-dashboard .rs-kpi-card:nth-child(2) .rs-kpi-icon { background: #dceee3; color: #397451; } .rs-dashboard .rs-kpi-card:nth-child(3) { background: linear-gradient( 145deg, #f3f1fa, #fffefa ); } .rs-dashboard .rs-kpi-card:nth-child(3) .rs-kpi-icon { background: #e7e1f1; color: #765a94; } .rs-dashboard .rs-kpi-card:nth-child(4) { background: linear-gradient( 145deg, #fff2ee, #fffefa ); } .rs-dashboard .rs-kpi-card:nth-child(4) .rs-kpi-icon { background: #f5ddd7; color: #9c5040; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { .rs-dashboard .rs-pulse-list, .rs-dashboard .rs-due-list { padding-left: 12px; padding-right: 12px; } .rs-dashboard .rs-pulse-row { min-height: 54px; } .rs-dashboard .rs-due-row { grid-template-columns: 38px minmax(0, 1fr); } .rs-dashboard .rs-due-amount { grid-column: 2 / 3; width: 100%; margin-top: -3px; text-align: left; } .rs-dashboard .rs-due-amount small { display: inline-block; margin-right: 7px; } } /* ========================================================== RATAN SETU — PREMIUM NEW BILL V1 Dashboard-matched visual language ========================================================== */ body.rs-sale-new-page { --nb-ink: #17211f; --nb-text: #58635e; --nb-muted: #929b97; --nb-green: #183028; --nb-green-soft: #e3f0e9; --nb-gold: #c79543; --nb-gold-dark: #946522; --nb-gold-soft: #f5e8c9; --nb-blue: #5676a5; --nb-blue-soft: #e7edf7; --nb-purple: #795b97; --nb-purple-soft: #ece4f3; --nb-rose: #9c5144; --nb-rose-soft: #f7e3de; --nb-teal: #497a74; --nb-teal-soft: #dfeeed; --nb-line: #e7e1d5; --nb-paper: #fffefa; } /* ========================================================== CONTENT WIDTH / GENERAL ========================================================== */ body.rs-sale-new-page .content { max-width: 1500px; margin: 0 auto; padding-bottom: 45px; } body.rs-sale-new-page .content form { position: relative; } /* ========================================================== PAGE HERO ========================================================== */ body.rs-sale-new-page .page-intro, body.rs-sale-new-page .premium-intro, body.rs-sale-new-page .billing-hero, body.rs-sale-new-page .sale-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 138px; margin-bottom: 20px; padding: 28px 32px; border: 0; border-radius: 25px; background: radial-gradient( circle at 91% 7%, rgba(222, 184, 109, .20), transparent 30% ), linear-gradient( 120deg, #172820 0%, #21392e 55%, #3a4938 100% ); box-shadow: 0 20px 48px rgba(25, 39, 32, .15); color: #fff; } body.rs-sale-new-page .page-intro::after, body.rs-sale-new-page .premium-intro::after, body.rs-sale-new-page .billing-hero::after, body.rs-sale-new-page .sale-hero::after { content: ""; position: absolute; z-index: -1; right: -80px; bottom: -110px; width: 270px; height: 270px; border: 30px solid rgba(255, 255, 255, .025); border-radius: 50%; } body.rs-sale-new-page .page-intro .eyebrow, body.rs-sale-new-page .premium-intro .eyebrow, body.rs-sale-new-page .billing-hero .eyebrow { color: #e0ba6e; } body.rs-sale-new-page .page-intro h2, body.rs-sale-new-page .premium-intro h2, body.rs-sale-new-page .billing-hero h2, body.rs-sale-new-page .sale-hero h2 { margin: 3px 0 7px; font-size: clamp( 25px, 3vw, 36px ); line-height: 1.08; letter-spacing: -.04em; color: #fff; } body.rs-sale-new-page .page-intro p, body.rs-sale-new-page .premium-intro p, body.rs-sale-new-page .billing-hero p { max-width: 720px; margin: 0; line-height: 1.6; color: rgba( 255, 255, 255, .65 ); } /* ========================================================== MAIN NEW BILL CARDS ========================================================== */ body.rs-sale-new-page .content .card { position: relative; border: 1px solid var(--nb-line); border-radius: 21px; background: linear-gradient( 145deg, #fffefa, #fcfaf5 ); box-shadow: 0 13px 34px rgba(36, 42, 38, .055); transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } body.rs-sale-new-page .content .card:hover { border-color: #ded4c3; box-shadow: 0 17px 38px rgba(36, 42, 38, .075); } /* ========================================================== CARD HEADERS ========================================================== */ body.rs-sale-new-page .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 13px; } body.rs-sale-new-page .card-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 7px; padding: 5px 8px; border-radius: 999px; background: #f6ecda; font-size: 9px; letter-spacing: .13em; color: #966a27; } body.rs-sale-new-page .card-head h3 { margin: 0; font-size: 17px; letter-spacing: -.025em; color: var(--nb-ink); } body.rs-sale-new-page .card-head p { margin: 5px 0 0; font-size: 11px; line-height: 1.5; color: #8e9793; } /* ========================================================== GENERIC INPUT SYSTEM ========================================================== */ body.rs-sale-new-page input:not([type="checkbox"]):not([type="radio"]), body.rs-sale-new-page select, body.rs-sale-new-page textarea { min-height: 43px; padding: 10px 12px; border: 1px solid #ddd7cb; border-radius: 11px; outline: none; background: rgba( 255, 255, 255, .92 ); color: var(--nb-ink); box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; } body.rs-sale-new-page input:not([type="checkbox"]):not([type="radio"]):hover, body.rs-sale-new-page select:hover, body.rs-sale-new-page textarea:hover { border-color: #cfc5b4; } body.rs-sale-new-page input:not([type="checkbox"]):not([type="radio"]):focus, body.rs-sale-new-page select:focus, body.rs-sale-new-page textarea:focus { border-color: #bc914e; background: #fff; box-shadow: 0 0 0 4px rgba(196, 148, 66, .10); } body.rs-sale-new-page textarea { min-height: 100px; resize: vertical; } body.rs-sale-new-page label { color: #5e6964; font-size: 10px; font-weight: 800; } /* ========================================================== CUSTOMER SECTION ========================================================== */ body.rs-sale-new-page .customer-card, body.rs-sale-new-page .customer-section, body.rs-sale-new-page [class*="customer-card"] { position: relative; overflow: hidden; background: radial-gradient( circle at 96% 0%, rgba(93, 128, 171, .11), transparent 28% ), linear-gradient( 145deg, #fbfdff, #fffefa ); } body.rs-sale-new-page .customer-card::before, body.rs-sale-new-page .customer-section::before { content: "CUSTOMER"; position: absolute; right: 18px; top: 16px; font-size: 8px; font-weight: 900; letter-spacing: .18em; color: rgba( 75, 105, 144, .15 ); } /* Mobile/customer search input emphasis */ body.rs-sale-new-page input[name*="mobile"], body.rs-sale-new-page input[id*="mobile"], body.rs-sale-new-page input[placeholder*="mobile" i] { min-height: 50px; font-size: 14px; font-weight: 800; background: linear-gradient( 120deg, #f7faff, #ffffff ); border-color: #cdd9e8; } /* customer search result */ body.rs-sale-new-page .customer-result, body.rs-sale-new-page .customer-preview, body.rs-sale-new-page .customer-info { margin-top: 12px; padding: 13px 14px; border: 1px solid #dce6e2; border-radius: 13px; background: linear-gradient( 110deg, #edf7f1, #f9fcfa ); } /* ========================================================== SALES ITEMS SECTION ========================================================== */ body.rs-sale-new-page .sale-items, body.rs-sale-new-page .items-card, body.rs-sale-new-page [class*="items-card"] { background: radial-gradient( circle at 100% 0%, rgba(210, 166, 85, .11), transparent 28% ), linear-gradient( 145deg, #fffdf8, #fffaf1 ); } /* ========================================================== ITEM ROW — PREMIUM ========================================================== */ body.rs-sale-new-page .item-row, body.rs-sale-new-page .sale-item, body.rs-sale-new-page [class*="item-row"] { position: relative; overflow: hidden; margin-top: 12px; padding: 16px; border: 1px solid #e5ddcd; border-radius: 17px; background: linear-gradient( 145deg, rgba(255, 255, 255, .95), rgba(252, 248, 239, .91) ); box-shadow: 0 8px 21px rgba(46, 43, 35, .045); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } body.rs-sale-new-page .item-row:hover, body.rs-sale-new-page .sale-item:hover { transform: translateY(-2px); border-color: #d7c59f; box-shadow: 0 13px 27px rgba(53, 47, 34, .075); } /* First gold-like visual accent */ body.rs-sale-new-page .item-row::after, body.rs-sale-new-page .sale-item::after { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 4px 4px 0; background: linear-gradient( #e2bc72, #b9822d ); } /* ========================================================== ITEM INPUT GRID ========================================================== */ body.rs-sale-new-page .item-row input, body.rs-sale-new-page .item-row select, body.rs-sale-new-page .sale-item input, body.rs-sale-new-page .sale-item select { background: #fff; } /* Type / category */ body.rs-sale-new-page select[name*="category"], body.rs-sale-new-page select[name*="type"] { background: linear-gradient( 110deg, #fff9ea, #fff ); border-color: #dfcda7; font-weight: 800; } /* Purity */ body.rs-sale-new-page select[name*="purity"] { background: linear-gradient( 110deg, #f3ecfa, #fff ); border-color: #d8c9e5; } /* GST */ body.rs-sale-new-page input[name*="gst"], body.rs-sale-new-page select[name*="gst"] { background: linear-gradient( 110deg, #eef3fa, #fff ); border-color: #d4deeb; } /* ========================================================== INFO / RATE BANNERS ========================================================== */ body.rs-sale-new-page .soft-callout, body.rs-sale-new-page .info-box, body.rs-sale-new-page .hint-box, body.rs-sale-new-page [class*="callout"] { border: 1px solid #e5d8bc; border-radius: 13px; background: linear-gradient( 110deg, #fbf3df, #fffdf8 ); color: #705f43; } /* ========================================================== ADD ITEM / ADD EXCHANGE BUTTONS ========================================================== */ body.rs-sale-new-page button:not([type="submit"]), body.rs-sale-new-page .btn-secondary { border: 1px solid #ddd3c0; border-radius: 11px; background: linear-gradient( 145deg, #fffefa, #f5f1e7 ); color: #4c5752; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.rs-sale-new-page button:not([type="submit"]):hover, body.rs-sale-new-page .btn-secondary:hover { transform: translateY(-1px); border-color: #c9ae7a; box-shadow: 0 8px 17px rgba(70, 58, 37, .07); } /* ========================================================== EXCHANGE SECTION ========================================================== */ body.rs-sale-new-page .exchange-card, body.rs-sale-new-page .exchange-section, body.rs-sale-new-page [class*="exchange-card"] { position: relative; overflow: hidden; background: radial-gradient( circle at 100% 0%, rgba(121, 91, 151, .11), transparent 26% ), linear-gradient( 145deg, #fdfaff, #fffefa ); border-color: #e1d5e8; } body.rs-sale-new-page .exchange-item, body.rs-sale-new-page [class*="exchange-row"] { padding: 14px; border: 1px solid #e3d9e8; border-radius: 14px; background: linear-gradient( 110deg, #f8f3fb, #fff ); } /* Exchange credit visual */ body.rs-sale-new-page .exchange-total, body.rs-sale-new-page [class*="exchange-total"] { color: #487761; font-weight: 900; } /* ========================================================== NOTES SECTION ========================================================== */ body.rs-sale-new-page .note-card, body.rs-sale-new-page .notes-card, body.rs-sale-new-page [class*="note-card"] { background: radial-gradient( circle at 100% 0%, rgba(78, 124, 116, .08), transparent 24% ), linear-gradient( 145deg, #fbfffd, #fffefa ); } /* ========================================================== BILL SUMMARY — HERO PANEL ========================================================== */ body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card, body.rs-sale-new-page [class*="bill-summary"], body.rs-sale-new-page [class*="summary-card"] { position: sticky; top: 18px; overflow: hidden; border: 1px solid rgba(195, 151, 76, .28); border-radius: 22px; background: radial-gradient( circle at 100% 0%, rgba(215, 176, 99, .16), transparent 28% ), linear-gradient( 150deg, #fffdf8, #faf5e9 ); box-shadow: 0 18px 42px rgba(60, 49, 31, .095); } body.rs-sale-new-page .bill-summary::after, body.rs-sale-new-page .summary-card::after { content: "₹"; position: absolute; right: 12px; top: -35px; font-size: 128px; line-height: 1; font-weight: 900; color: rgba( 185, 134, 49, .035 ); pointer-events: none; } /* summary headings */ body.rs-sale-new-page .bill-summary h3, body.rs-sale-new-page .summary-card h3 { color: var(--nb-ink); } /* summary rows */ body.rs-sale-new-page .bill-summary .summary-row, body.rs-sale-new-page .summary-card .summary-row, body.rs-sale-new-page .bill-summary [class*="summary-row"] { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 39px; border-bottom: 1px solid rgba(225, 216, 198, .75); } body.rs-sale-new-page .bill-summary .summary-row:last-child, body.rs-sale-new-page .summary-card .summary-row:last-child { border-bottom: 0; } /* final payable */ body.rs-sale-new-page .bill-summary [class*="total"], body.rs-sale-new-page .summary-card [class*="total"] { font-weight: 900; } /* ========================================================== PAYMENT RECEIVED AREA ========================================================== */ body.rs-sale-new-page [class*="payment"] { position: relative; } body.rs-sale-new-page input[name*="cash"] { border-color: #cde0d3; background: linear-gradient( 110deg, #edf8f1, #fff ); } body.rs-sale-new-page input[name*="upi"] { border-color: #d6d7ed; background: linear-gradient( 110deg, #f1f1fa, #fff ); } body.rs-sale-new-page input[name*="card"] { border-color: #d6e1ec; background: linear-gradient( 110deg, #eef5fa, #fff ); } body.rs-sale-new-page input[name*="bank"] { border-color: #e3d8c6; background: linear-gradient( 110deg, #faf4e9, #fff ); } /* ========================================================== SAVE INVOICE BUTTON ========================================================== */ body.rs-sale-new-page button[type="submit"], body.rs-sale-new-page input[type="submit"], body.rs-sale-new-page .btn-primary { min-height: 48px; border: 0; border-radius: 13px; background: radial-gradient( circle at 90% 0%, rgba(218, 181, 105, .16), transparent 34% ), linear-gradient( 110deg, #172b23, #2f4438 ); box-shadow: 0 11px 23px rgba(24, 44, 35, .17); color: #fff; font-weight: 900; letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease; } body.rs-sale-new-page button[type="submit"]:hover, body.rs-sale-new-page input[type="submit"]:hover, body.rs-sale-new-page .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 29px rgba(24, 44, 35, .22); } /* ========================================================== CHECKBOX / GST TOGGLE ========================================================== */ body.rs-sale-new-page input[type="checkbox"] { accent-color: #277359; } body.rs-sale-new-page .switch, body.rs-sale-new-page .toggle { filter: drop-shadow( 0 4px 8px rgba(32, 92, 68, .10) ); } /* ========================================================== SECTION UNIQUE COLOUR ACCENTS ========================================================== */ body.rs-sale-new-page .content .card:nth-of-type(1) { border-color: #dbe3e9; } body.rs-sale-new-page .content .card:nth-of-type(2) { border-color: #e9d9b8; } body.rs-sale-new-page .content .card:nth-of-type(3) { border-color: #dfd3e6; } body.rs-sale-new-page .content .card:nth-of-type(4) { border-color: #d6e5df; } /* ========================================================== INPUT PLACEHOLDERS ========================================================== */ body.rs-sale-new-page input::placeholder, body.rs-sale-new-page textarea::placeholder { color: #adb3af; opacity: 1; } /* ========================================================== SMALL HELP TEXT ========================================================== */ body.rs-sale-new-page small, body.rs-sale-new-page .hint, body.rs-sale-new-page .field-hint, body.rs-sale-new-page .help-text { color: #9ba29e; } /* ========================================================== REMOVE BUTTONS ========================================================== */ body.rs-sale-new-page .remove-item, body.rs-sale-new-page .remove-exchange, body.rs-sale-new-page [class*="remove"] { border-color: #efceca !important; background: #faebe8 !important; color: #a24e45 !important; } /* ========================================================== GRID SPACING ========================================================== */ body.rs-sale-new-page .billing-layout, body.rs-sale-new-page .sale-layout, body.rs-sale-new-page .form-layout, body.rs-sale-new-page [class*="billing-grid"] { gap: 18px; } body.rs-sale-new-page .billing-main, body.rs-sale-new-page .sale-main { display: grid; gap: 16px; } /* ========================================================== SUBTLE ANIMATION ========================================================== */ @keyframes rsNewBillReveal { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } body.rs-sale-new-page .content > * { animation: rsNewBillReveal .32s ease both; } /* ========================================================== DESKTOP LARGE SCREEN ========================================================== */ @media (min-width: 1200px) { body.rs-sale-new-page .content { max-width: 1320px; } } /* ========================================================== TABLET ========================================================== */ @media (max-width: 1100px) { body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card, body.rs-sale-new-page [class*="bill-summary"], body.rs-sale-new-page [class*="summary-card"] { position: relative; top: auto; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { body.rs-sale-new-page .page-intro, body.rs-sale-new-page .premium-intro, body.rs-sale-new-page .billing-hero { min-height: auto; padding: 23px 19px; border-radius: 19px; } body.rs-sale-new-page .page-intro h2, body.rs-sale-new-page .premium-intro h2 { font-size: 25px; } body.rs-sale-new-page .content .card { border-radius: 17px; } body.rs-sale-new-page .item-row, body.rs-sale-new-page .sale-item { padding: 13px; } body.rs-sale-new-page input:not([type="checkbox"]):not([type="radio"]), body.rs-sale-new-page select { min-height: 46px; } } /* ========================================================== RATAN SETU — BILL SUMMARY PREMIUM V2 Dashboard pulse inspired ========================================================== */ body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card, body.rs-sale-new-page [class*="bill-summary"], body.rs-sale-new-page [class*="summary-card"] { position: sticky; top: 18px; isolation: isolate; overflow: hidden; padding: 18px; border: 1px solid rgba(201, 157, 76, .25); border-radius: 24px; background: radial-gradient( circle at 100% 0%, rgba(217, 177, 96, .16), transparent 30% ), radial-gradient( circle at 0% 100%, rgba(54, 111, 86, .07), transparent 34% ), linear-gradient( 145deg, #fffdf8, #fffaf1 ); box-shadow: 0 20px 48px rgba(65, 52, 31, .10); } /* decorative rings */ body.rs-sale-new-page .bill-summary::before, body.rs-sale-new-page .summary-card::before { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -80px; top: -85px; border: 28px solid rgba(196, 148, 64, .045); border-radius: 50%; } /* rupee watermark */ body.rs-sale-new-page .bill-summary::after, body.rs-sale-new-page .summary-card::after { content: "₹"; position: absolute; z-index: -1; right: 15px; top: -24px; font-size: 115px; font-weight: 900; line-height: 1; color: rgba(154, 107, 33, .035); pointer-events: none; } /* ========================================================== BILL SUMMARY TITLE ========================================================== */ body.rs-sale-new-page .bill-summary > .eyebrow, body.rs-sale-new-page .summary-card > .eyebrow, body.rs-sale-new-page .bill-summary .eyebrow, body.rs-sale-new-page .summary-card .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 10px; border: 1px solid rgba(180, 130, 48, .15); border-radius: 999px; background: #f8ecd3; color: #946720; font-size: 9px; font-weight: 900; letter-spacing: .14em; } body.rs-sale-new-page .bill-summary .eyebrow::before, body.rs-sale-new-page .summary-card .eyebrow::before { content: "✦"; font-size: 8px; } /* ========================================================== FINAL PAYABLE — HERO AMOUNT ========================================================== */ body.rs-sale-new-page .bill-summary :first-child + *, body.rs-sale-new-page .summary-card :first-child + * { position: relative; } body.rs-sale-new-page .bill-summary .final-payable, body.rs-sale-new-page .summary-card .final-payable { margin-bottom: 12px; } /* generic top amount area */ body.rs-sale-new-page .bill-summary > div:first-of-type, body.rs-sale-new-page .summary-card > div:first-of-type { padding: 16px 16px; margin-bottom: 10px; border: 1px solid rgba(201, 157, 76, .18); border-radius: 16px; background: linear-gradient( 110deg, #fff5df, #fffdfa ); } /* top label */ body.rs-sale-new-page .bill-summary > div:first-of-type span, body.rs-sale-new-page .summary-card > div:first-of-type span { color: #8d806c; font-size: 10px; font-weight: 800; } /* top total */ body.rs-sale-new-page .bill-summary > div:first-of-type strong, body.rs-sale-new-page .summary-card > div:first-of-type strong { color: #18231f; font-size: 26px; font-weight: 900; letter-spacing: -.04em; } /* ========================================================== SUMMARY ROWS ========================================================== */ body.rs-sale-new-page .bill-summary .summary-row, body.rs-sale-new-page .summary-card .summary-row, body.rs-sale-new-page .bill-summary [class*="summary-row"], body.rs-sale-new-page .summary-card [class*="summary-row"] { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; margin-bottom: 8px; padding: 9px 11px; border: 1px solid transparent; border-radius: 14px; background: rgba(255, 255, 255, .72); box-shadow: 0 5px 15px rgba(42, 45, 41, .025); } /* icon bubble */ body.rs-sale-new-page .bill-summary .summary-row::before, body.rs-sale-new-page .summary-card .summary-row::before { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; font-size: 12px; font-weight: 900; } /* 1 Sale */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(2), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(2) { border-color: rgba(204, 157, 73, .16); background: linear-gradient( 100deg, #fff3d9, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(2)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(2)::before { content: "₹"; background: #f3dfb5; color: #92661f; } /* 2 Making */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(3), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(3) { border-color: rgba(147, 105, 181, .14); background: linear-gradient( 100deg, #f4ecfa, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(3)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(3)::before { content: "◇"; background: #e9ddf1; color: #785497; } /* 3 GST */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(4), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(4) { border-color: rgba(88, 119, 182, .14); background: linear-gradient( 100deg, #edf2fa, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(4)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(4)::before { content: "%"; background: #dfe7f3; color: #5670a2; } /* 4 exchange */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(5), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(5) { border-color: rgba(55, 128, 90, .14); background: linear-gradient( 100deg, #eaf6ef, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(5)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(5)::before { content: "↺"; background: #dceddf; color: #3f7957; } /* row text */ body.rs-sale-new-page .bill-summary .summary-row span, body.rs-sale-new-page .summary-card .summary-row span { color: #68726e; font-size: 10px; font-weight: 700; } body.rs-sale-new-page .bill-summary .summary-row strong, body.rs-sale-new-page .summary-card .summary-row strong { color: #1b2521; font-size: 12px; font-weight: 900; } /* exchange green */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(5) strong, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(5) strong { color: #397659; } /* ========================================================== DISCOUNT + ROUND OFF ========================================================== */ body.rs-sale-new-page .bill-summary .grid-2, body.rs-sale-new-page .summary-card .grid-2 { gap: 10px; margin: 12px 0; } body.rs-sale-new-page .bill-summary .grid-2 > div, body.rs-sale-new-page .summary-card .grid-2 > div { padding: 11px; border: 1px solid #e7decf; border-radius: 14px; background: linear-gradient( 145deg, #fffaf3, #fff ); } /* ========================================================== PAYMENT RECEIVED ========================================================== */ body.rs-sale-new-page .bill-summary .eyebrow, body.rs-sale-new-page .summary-card .eyebrow { margin-top: 4px; } body.rs-sale-new-page .bill-summary .payment-grid, body.rs-sale-new-page .summary-card .payment-grid, body.rs-sale-new-page .bill-summary [class*="payment-grid"], body.rs-sale-new-page .summary-card [class*="payment-grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; } /* each payment method */ body.rs-sale-new-page .bill-summary .payment-grid > div, body.rs-sale-new-page .summary-card .payment-grid > div { position: relative; padding: 10px; border: 1px solid transparent; border-radius: 14px; } /* cash */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(1), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(1) { border-color: #d6eadc; background: linear-gradient( 145deg, #edf8f1, #fff ); } /* UPI */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(2), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(2) { border-color: #dcdcf0; background: linear-gradient( 145deg, #f2f1fb, #fff ); } /* Card */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(3), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(3) { border-color: #d8e5f0; background: linear-gradient( 145deg, #eef6fb, #fff ); } /* Bank */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(4), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(4) { border-color: #eadfcd; background: linear-gradient( 145deg, #faf5ea, #fff ); } /* payment input */ body.rs-sale-new-page .bill-summary .payment-grid input, body.rs-sale-new-page .summary-card .payment-grid input { min-height: 40px; margin-top: 5px; background: rgba(255,255,255,.95); } /* ========================================================== TOTAL RECEIVED ========================================================== */ body.rs-sale-new-page .bill-summary [class*="received"], body.rs-sale-new-page .summary-card [class*="received"] { margin-top: 12px; padding: 13px 14px; border: 1px solid rgba(58, 116, 81, .15); border-radius: 14px; background: linear-gradient( 100deg, #e8f5ed, #fff ); } /* ========================================================== DUE ON THIS BILL ========================================================== */ body.rs-sale-new-page .bill-summary [class*="due"], body.rs-sale-new-page .summary-card [class*="due"] { margin-top: 9px; padding: 13px 14px; border: 1px solid rgba(168, 78, 64, .14); border-radius: 14px; background: linear-gradient( 100deg, #fae9e5, #fff ); } body.rs-sale-new-page .bill-summary [class*="due"] strong, body.rs-sale-new-page .summary-card [class*="due"] strong { color: #a2493d; } /* ========================================================== SAVE BUTTON ========================================================== */ body.rs-sale-new-page .bill-summary button[type="submit"], body.rs-sale-new-page .summary-card button[type="submit"] { position: relative; overflow: hidden; width: 100%; min-height: 50px; margin-top: 12px; border-radius: 14px; background: radial-gradient( circle at 90% 0%, rgba(223, 186, 111, .18), transparent 34% ), linear-gradient( 110deg, #172c24, #3c4f3e ); box-shadow: 0 12px 24px rgba(28, 48, 39, .18); color: #fff; font-size: 12px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-sale-new-page .bill-summary button[type="submit"]:hover, body.rs-sale-new-page .summary-card button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 17px 28px rgba(28, 48, 39, .24); } /* ========================================================== SUMMARY FOOT NOTE ========================================================== */ body.rs-sale-new-page .bill-summary > small:last-child, body.rs-sale-new-page .summary-card > small:last-child { display: block; margin-top: 11px; padding: 10px 11px; border-radius: 11px; background: rgba(238, 235, 225, .60); line-height: 1.5; color: #8f9793; } /* ========================================================== INPUT POLISH INSIDE SUMMARY ========================================================== */ body.rs-sale-new-page .bill-summary input, body.rs-sale-new-page .summary-card input { border-color: #ddd6c9; background: #fff; font-weight: 700; } body.rs-sale-new-page .bill-summary input:focus, body.rs-sale-new-page .summary-card input:focus { border-color: #c3954c; box-shadow: 0 0 0 4px rgba(193, 145, 65, .10); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1100px) { body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card, body.rs-sale-new-page [class*="bill-summary"], body.rs-sale-new-page [class*="summary-card"] { position: relative; top: auto; } } @media (max-width: 640px) { body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card { padding: 14px; border-radius: 18px; } body.rs-sale-new-page .bill-summary .payment-grid, body.rs-sale-new-page .summary-card .payment-grid, body.rs-sale-new-page .bill-summary [class*="payment-grid"], body.rs-sale-new-page .summary-card [class*="payment-grid"] { grid-template-columns: 1fr; } } /* ========================================================== RATAN SETU — BILL SUMMARY PULSE STYLE Matches Jewellery Business Pulse visual language ========================================================== */ /* ========================================================== MAIN SUMMARY CARD ========================================================== */ body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card, body.rs-sale-new-page [class*="bill-summary"], body.rs-sale-new-page [class*="summary-card"] { position: sticky; top: 18px; overflow: hidden; isolation: isolate; padding: 20px; border: 1px solid rgba(202, 157, 76, .26); border-radius: 24px; background: radial-gradient( circle at 100% 0%, rgba(220, 182, 108, .17), transparent 30% ), radial-gradient( circle at 0% 100%, rgba(67, 123, 98, .08), transparent 30% ), linear-gradient( 145deg, #fffdf8 0%, #fff9ee 100% ); box-shadow: 0 20px 45px rgba(70, 55, 30, .09); } /* decorative circle */ body.rs-sale-new-page .bill-summary::before, body.rs-sale-new-page .summary-card::before { content: ""; position: absolute; z-index: -1; width: 180px; height: 180px; right: -78px; top: -85px; border-radius: 50%; border: 30px solid rgba(201, 156, 73, .045); } /* ========================================================== SUMMARY HEADER ========================================================== */ body.rs-sale-new-page .bill-summary > .eyebrow, body.rs-sale-new-page .summary-card > .eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(188, 139, 57, .18); background: #f8ecd2; font-size: 9px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: #92651f; } body.rs-sale-new-page .bill-summary > .eyebrow::before, body.rs-sale-new-page .summary-card > .eyebrow::before { content: "✦"; font-size: 8px; } /* ========================================================== FINAL PAYABLE BLOCK ========================================================== */ body.rs-sale-new-page .bill-summary > div:first-of-type, body.rs-sale-new-page .summary-card > div:first-of-type { display: flex; align-items: center; justify-content: space-between; min-height: 68px; margin-bottom: 10px; padding: 14px 15px; border: 1px solid rgba(202, 157, 76, .18); border-radius: 16px; background: linear-gradient( 100deg, #fff0d1, #fffdf8 ); } body.rs-sale-new-page .bill-summary > div:first-of-type::before, body.rs-sale-new-page .summary-card > div:first-of-type::before { content: "₹"; display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; margin-right: 10px; border-radius: 11px; background: #f0dba9; color: #8e621d; font-size: 14px; font-weight: 900; } body.rs-sale-new-page .bill-summary > div:first-of-type span, body.rs-sale-new-page .summary-card > div:first-of-type span { margin-right: auto; color: #6d716c; font-size: 10px; font-weight: 700; } body.rs-sale-new-page .bill-summary > div:first-of-type strong, body.rs-sale-new-page .summary-card > div:first-of-type strong { font-size: 25px; font-weight: 900; letter-spacing: -.04em; color: #17211e; } /* ========================================================== TURN STANDARD SUMMARY LINES INTO PULSE CARDS ========================================================== */ body.rs-sale-new-page .bill-summary .summary-row, body.rs-sale-new-page .summary-card .summary-row, body.rs-sale-new-page .bill-summary [class*="summary-row"], body.rs-sale-new-page .summary-card [class*="summary-row"] { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 11px; min-height: 58px; margin-bottom: 9px; padding: 10px 12px; border: 1px solid transparent; border-radius: 15px; background: rgba(255, 255, 255, .78); box-shadow: 0 5px 16px rgba(42, 45, 41, .03); transition: transform .18s ease, box-shadow .18s ease; } body.rs-sale-new-page .bill-summary .summary-row:hover, body.rs-sale-new-page .summary-card .summary-row:hover { transform: translateY(-2px); box-shadow: 0 11px 24px rgba(45, 45, 39, .06); } /* icon bubble */ body.rs-sale-new-page .bill-summary .summary-row::before, body.rs-sale-new-page .summary-card .summary-row::before { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 900; } /* ========================================================== 1 SALE VALUE — GOLD ========================================================== */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(2), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(2) { border-color: rgba(205, 157, 74, .20); background: linear-gradient( 100deg, #fff2d5, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(2)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(2)::before { content: "₹"; background: #f1deb5; color: #91631c; } /* ========================================================== 2 MAKING CHARGE — PURPLE ========================================================== */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(3), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(3) { border-color: rgba(137, 99, 171, .18); background: linear-gradient( 100deg, #f4ebfa, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(3)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(3)::before { content: "◇"; background: #e9ddf1; color: #775394; } /* ========================================================== 3 GST — BLUE ========================================================== */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(4), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(4) { border-color: rgba(80, 115, 172, .18); background: linear-gradient( 100deg, #ecf2fb, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(4)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(4)::before { content: "%"; background: #dfe7f5; color: #5670a2; } /* ========================================================== 4 EXCHANGE — GREEN ========================================================== */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(5), body.rs-sale-new-page .summary-card .summary-row:nth-of-type(5) { border-color: rgba(57, 122, 86, .17); background: linear-gradient( 100deg, #e9f6ee, #fff ); } body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(5)::before, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(5)::before { content: "↺"; background: #dceee3; color: #3f7856; } /* text */ body.rs-sale-new-page .bill-summary .summary-row span, body.rs-sale-new-page .summary-card .summary-row span { font-size: 10px; font-weight: 700; color: #5f6964; } body.rs-sale-new-page .bill-summary .summary-row strong, body.rs-sale-new-page .summary-card .summary-row strong { font-size: 12px; font-weight: 900; color: #17211e; } /* exchange amount */ body.rs-sale-new-page .bill-summary .summary-row:nth-of-type(5) strong, body.rs-sale-new-page .summary-card .summary-row:nth-of-type(5) strong { color: #397456; } /* ========================================================== DISCOUNT + ROUND OFF ========================================================== */ body.rs-sale-new-page .bill-summary .grid-2, body.rs-sale-new-page .summary-card .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 13px 0; } body.rs-sale-new-page .bill-summary .grid-2 > div, body.rs-sale-new-page .summary-card .grid-2 > div { padding: 10px; border: 1px solid #eadfcd; border-radius: 14px; background: linear-gradient( 145deg, #fff8ec, #fff ); } /* ========================================================== PAYMENT RECEIVED TITLE ========================================================== */ body.rs-sale-new-page .bill-summary .payment-title, body.rs-sale-new-page .summary-card .payment-title, body.rs-sale-new-page .bill-summary h4, body.rs-sale-new-page .summary-card h4 { display: inline-flex; align-items: center; gap: 7px; margin: 6px 0 9px; padding: 5px 9px; border-radius: 999px; background: #e7f3ec; color: #3c7055; font-size: 9px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; } /* ========================================================== PAYMENT GRID ========================================================== */ body.rs-sale-new-page .bill-summary .payment-grid, body.rs-sale-new-page .summary-card .payment-grid, body.rs-sale-new-page .bill-summary [class*="payment-grid"], body.rs-sale-new-page .summary-card [class*="payment-grid"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } /* cash */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(1), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(1) { padding: 10px; border: 1px solid #d3e7d9; border-radius: 14px; background: linear-gradient( 145deg, #edf8f1, #fff ); } /* UPI */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(2), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(2) { padding: 10px; border: 1px solid #dedcf0; border-radius: 14px; background: linear-gradient( 145deg, #f3f1fb, #fff ); } /* Card */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(3), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(3) { padding: 10px; border: 1px solid #d6e4ef; border-radius: 14px; background: linear-gradient( 145deg, #eef6fb, #fff ); } /* Bank */ body.rs-sale-new-page .bill-summary .payment-grid > div:nth-child(4), body.rs-sale-new-page .summary-card .payment-grid > div:nth-child(4) { padding: 10px; border: 1px solid #eadfce; border-radius: 14px; background: linear-gradient( 145deg, #faf4e9, #fff ); } /* ========================================================== TOTAL RECEIVED ========================================================== */ body.rs-sale-new-page .bill-summary [class*="received"], body.rs-sale-new-page .summary-card [class*="received"] { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(60, 123, 88, .18); border-radius: 14px; background: linear-gradient( 100deg, #e9f6ee, #fff ); } body.rs-sale-new-page .bill-summary [class*="received"]::before, body.rs-sale-new-page .summary-card [class*="received"]::before { content: "✓"; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 10px; border-radius: 10px; background: #dbeee2; color: #3e7856; font-weight: 900; } /* ========================================================== DUE BLOCK ========================================================== */ body.rs-sale-new-page .bill-summary [class*="due"], body.rs-sale-new-page .summary-card [class*="due"] { display: flex; align-items: center; justify-content: space-between; margin-top: 9px; padding: 12px 14px; border: 1px solid rgba(165, 75, 62, .17); border-radius: 14px; background: linear-gradient( 100deg, #fae9e5, #fff ); } body.rs-sale-new-page .bill-summary [class*="due"]::before, body.rs-sale-new-page .summary-card [class*="due"]::before { content: "!"; display: grid; place-items: center; width: 32px; height: 32px; margin-right: 10px; border-radius: 10px; background: #f3d9d3; color: #9f493d; font-weight: 900; } body.rs-sale-new-page .bill-summary [class*="due"] strong, body.rs-sale-new-page .summary-card [class*="due"] strong { color: #a24b3e; } /* ========================================================== SAVE BUTTON ========================================================== */ body.rs-sale-new-page .bill-summary button[type="submit"], body.rs-sale-new-page .summary-card button[type="submit"] { width: 100%; min-height: 50px; margin-top: 12px; border-radius: 14px; background: radial-gradient( circle at 90% 0%, rgba(224, 187, 112, .17), transparent 32% ), linear-gradient( 110deg, #172d24, #3a4e3e ); box-shadow: 0 13px 25px rgba(27, 49, 39, .18); color: #fff; font-size: 12px; font-weight: 900; } /* ========================================================== PAYMENT INPUTS ========================================================== */ body.rs-sale-new-page .bill-summary input, body.rs-sale-new-page .summary-card input { min-height: 40px; border-radius: 10px; background: #fff; } /* ========================================================== FOOT NOTE ========================================================== */ body.rs-sale-new-page .bill-summary > small:last-child, body.rs-sale-new-page .summary-card > small:last-child { display: block; margin-top: 11px; padding: 9px 10px; border-radius: 10px; background: rgba(239, 236, 226, .60); font-size: 9px; line-height: 1.5; color: #919995; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 640px) { body.rs-sale-new-page .bill-summary, body.rs-sale-new-page .summary-card { padding: 14px; } body.rs-sale-new-page .bill-summary .payment-grid, body.rs-sale-new-page .summary-card .payment-grid, body.rs-sale-new-page .bill-summary [class*="payment-grid"], body.rs-sale-new-page .summary-card [class*="payment-grid"] { grid-template-columns: 1fr; } } /* ========================================================== RATAN SETU NEW BILL — FINAL DASHBOARD THEME Uses exact Dashboard palette ========================================================== */ body.rs-newbill-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== GENERAL NEW BILL CARDS ========================================================== */ body.rs-newbill-dashboard-theme .content .card, body.rs-newbill-dashboard-theme .rs-nb-customer, body.rs-newbill-dashboard-theme .rs-nb-items, body.rs-newbill-dashboard-theme .rs-nb-exchange, body.rs-newbill-dashboard-theme .rs-nb-notes { border: 1px solid var(--rs-line) !important; border-radius: 22px !important; background: #fffefa !important; box-shadow: 0 12px 34px rgba(31, 38, 34, .05) !important; } /* ========================================================== CUSTOMER — DASHBOARD BLUE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-customer { background: radial-gradient( circle at 100% 0%, rgba(86, 112, 162, .10), transparent 27% ), linear-gradient( 145deg, #f8faff, #fffefa ) !important; } /* ========================================================== ITEMS — DASHBOARD GOLD ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-items { border-color: rgba(201,154,72,.24) !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.12), transparent 27% ), linear-gradient( 145deg, #fffdf8, #fff9ed ) !important; } /* ========================================================== EXCHANGE — DASHBOARD PURPLE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-exchange { border-color: rgba(128,87,156,.18) !important; background: radial-gradient( circle at 100% 0%, rgba(128,87,156,.09), transparent 28% ), linear-gradient( 145deg, #fdfaff, #fffefa ) !important; } /* ========================================================== NOTES — DASHBOARD TEAL ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-notes { background: radial-gradient( circle at 100% 0%, rgba(62,112,108,.09), transparent 28% ), linear-gradient( 145deg, #f9fffd, #fffefa ) !important; } /* ========================================================== INPUTS — SAME QUIET DASHBOARD FEEL ========================================================== */ body.rs-newbill-dashboard-theme input:not([type="checkbox"]):not([type="radio"]), body.rs-newbill-dashboard-theme select, body.rs-newbill-dashboard-theme textarea { border: 1px solid #ddd7ca !important; border-radius: 11px !important; background: rgba(255,255,255,.94) !important; color: var(--rs-ink) !important; transition: border-color .18s ease, box-shadow .18s ease !important; } body.rs-newbill-dashboard-theme input:not([type="checkbox"]):not([type="radio"]):focus, body.rs-newbill-dashboard-theme select:focus, body.rs-newbill-dashboard-theme textarea:focus { border-color: #c99a48 !important; outline: none !important; box-shadow: 0 0 0 4px rgba(201,154,72,.10) !important; } /* ========================================================== BILL SUMMARY EXACT JEWELLERY BUSINESS PULSE LANGUAGE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-summary { position: sticky !important; top: 18px !important; isolation: isolate; overflow: hidden !important; padding: 18px !important; border: 1px solid rgba(201,154,72,.28) !important; border-radius: 24px !important; background: radial-gradient( circle at 92% 7%, rgba(216,176,100,.20), transparent 30% ), radial-gradient( circle at 5% 95%, rgba(44,95,74,.09), transparent 30% ), linear-gradient( 145deg, #fffdf8 0%, #fffaf0 48%, #f7f5ed 100% ) !important; box-shadow: 0 18px 45px rgba(77,64,39,.08) !important; } /* Dashboard decorative circle */ body.rs-newbill-dashboard-theme .rs-nb-summary::before { content: ""; position: absolute; z-index: -1; width: 190px; height: 190px; right: -75px; top: -85px; border-radius: 50%; border: 28px solid rgba(197,148,66,.055); } /* ========================================================== BILL SUMMARY LABEL ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-summary > .eyebrow, body.rs-newbill-dashboard-theme .rs-nb-summary .eyebrow:first-child { display: inline-flex !important; align-items: center !important; gap: 7px !important; width: auto !important; padding: 6px 10px !important; margin: 0 0 11px !important; border: 1px solid rgba(184,134,52,.18) !important; border-radius: 999px !important; background: rgba(249,239,217,.88) !important; color: #946823 !important; } /* ========================================================== FINAL PAYABLE — GOLD HERO ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-final-payable { display: grid !important; grid-template-columns: 38px minmax(0,1fr) auto !important; align-items: center !important; gap: 11px !important; min-height: 66px !important; margin: 0 0 10px !important; padding: 12px 14px !important; border: 1px solid rgba(207,157,73,.20) !important; border-radius: 15px !important; background: linear-gradient( 100deg, rgba(251,239,214,.92), rgba(255,255,255,.88) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-final-payable::before { content: "₹"; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #f1dfbc; color: #9b6c24; font-size: 13px; font-weight: 900; } body.rs-newbill-dashboard-theme .rs-nb-final-payable span { color: #666f6b !important; font-size: 10px !important; font-weight: 700 !important; } body.rs-newbill-dashboard-theme .rs-nb-final-payable strong { font-size: 25px !important; font-weight: 900 !important; letter-spacing: -.04em; color: var(--rs-ink) !important; } /* ========================================================== PULSE ROW BASE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-pulse-row { display: grid !important; grid-template-columns: 36px minmax(0,1fr) auto !important; align-items: center !important; gap: 11px !important; min-height: 56px !important; margin: 0 0 9px !important; padding: 10px 13px !important; border: 1px solid transparent !important; border-radius: 15px !important; box-shadow: 0 6px 18px rgba(38,44,40,.035) !important; } body.rs-newbill-dashboard-theme .rs-nb-pulse-row::before { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 12px; font-weight: 900; } body.rs-newbill-dashboard-theme .rs-nb-pulse-row span { color: #666f6b !important; font-size: 10px !important; font-weight: 700 !important; } body.rs-newbill-dashboard-theme .rs-nb-pulse-row strong { color: var(--rs-ink) !important; font-size: 12px !important; font-weight: 900 !important; } /* ========================================================== GOLD ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-gold { border-color: rgba(207,157,73,.20) !important; background: linear-gradient( 100deg, rgba(251,239,214,.88), rgba(255,255,255,.84) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-gold::before { content: "₹"; background: #f1dfbc; color: #9b6c24; } /* ========================================================== GREEN ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-green { border-color: rgba(60,135,93,.16) !important; background: linear-gradient( 100deg, rgba(228,244,234,.92), rgba(255,255,255,.85) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-green::before { content: "↺"; background: #dceee3; color: #397453; } body.rs-newbill-dashboard-theme .rs-nb-green strong { color: #397453 !important; } /* ========================================================== BLUE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-blue { border-color: rgba(88,119,182,.15) !important; background: linear-gradient( 100deg, rgba(232,238,249,.94), rgba(255,255,255,.85) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-blue::before { content: "%"; background: #e2e8f4; color: #516da5; } /* ========================================================== PURPLE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-purple { border-color: rgba(154,111,185,.14) !important; background: linear-gradient( 100deg, rgba(241,233,247,.94), rgba(255,255,255,.85) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-purple::before { content: "◇"; background: #eadff1; color: #80579c; } /* ========================================================== TEAL ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-teal { border-color: rgba(65,118,113,.15) !important; background: linear-gradient( 100deg, rgba(226,241,239,.96), rgba(255,255,255,.86) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-teal::before { content: "✓"; background: #dcecea; color: #3e706c; } body.rs-newbill-dashboard-theme .rs-nb-teal strong { color: #3e706c !important; } /* ========================================================== ROSE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-rose { border-color: rgba(177,83,61,.15) !important; background: linear-gradient( 100deg, rgba(248,234,228,.96), rgba(255,255,255,.86) ) !important; } body.rs-newbill-dashboard-theme .rs-nb-rose::before { content: "!"; background: #f4ddd7; color: #99493f; } body.rs-newbill-dashboard-theme .rs-nb-rose strong { color: #99493f !important; } /* ========================================================== DISCOUNT + ROUND OFF ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-summary .grid-2 { gap: 9px !important; margin: 11px 0 13px !important; } body.rs-newbill-dashboard-theme .rs-nb-summary .grid-2 > div { padding: 10px !important; border: 1px solid #eadfcd !important; border-radius: 14px !important; background: linear-gradient( 145deg, #fff8ec, #fff ) !important; } /* ========================================================== PAYMENT RECEIVED TITLE ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-summary h4, body.rs-newbill-dashboard-theme .rs-nb-summary [class*="payment-title"] { display: inline-flex !important; align-items: center; padding: 6px 10px !important; margin: 2px 0 10px !important; border-radius: 999px; background: #e7f3ec; color: #397453 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .12em !important; } /* ========================================================== PAYMENT METHOD BOXES ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-payment-box { padding: 10px !important; border: 1px solid transparent !important; border-radius: 14px !important; } body.rs-newbill-dashboard-theme .rs-nb-pay-cash { border-color: #d4e8da !important; background: linear-gradient( 145deg, #edf8f1, #fff ) !important; } body.rs-newbill-dashboard-theme .rs-nb-pay-upi { border-color: #dedcf0 !important; background: linear-gradient( 145deg, #f3f1fb, #fff ) !important; } body.rs-newbill-dashboard-theme .rs-nb-pay-card { border-color: #d6e4ef !important; background: linear-gradient( 145deg, #eef6fb, #fff ) !important; } body.rs-newbill-dashboard-theme .rs-nb-pay-bank { border-color: #eadfce !important; background: linear-gradient( 145deg, #faf4e9, #fff ) !important; } /* ========================================================== SAVE BUTTON — SAME DASHBOARD DARK GREEN ========================================================== */ body.rs-newbill-dashboard-theme .rs-nb-summary button[type="submit"] { width: 100% !important; min-height: 50px !important; margin-top: 13px !important; border: 0 !important; border-radius: 14px !important; background: radial-gradient( circle at 90% 0%, rgba(220,185,111,.16), transparent 34% ), linear-gradient( 110deg, #173027, #3c4937 ) !important; box-shadow: 0 12px 25px rgba(23,48,39,.18) !important; color: #fff !important; font-weight: 900 !important; } /* ========================================================== ADD / SECONDARY BUTTONS ========================================================== */ body.rs-newbill-dashboard-theme button:not([type="submit"]), body.rs-newbill-dashboard-theme .btn-secondary { border: 1px solid #ded4c3 !important; border-radius: 11px !important; background: linear-gradient( 145deg, #fffefa, #f5f1e7 ) !important; color: #4e5b55 !important; font-weight: 800 !important; } /* ========================================================== DELETE BUTTON ========================================================== */ body.rs-newbill-dashboard-theme [class*="remove"] { background: #f7e7e5 !important; border-color: #efcfca !important; color: #99493f !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 760px) { body.rs-newbill-dashboard-theme .rs-nb-summary { position: relative !important; top: auto !important; padding: 14px !important; border-radius: 19px !important; } } /* ========================================================== RATAN SETU SALES PAGE — DASHBOARD FAMILY ========================================================== */ body.rs-sales-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== PAGE AREA ========================================================== */ body.rs-sales-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 44px; } /* ========================================================== SALES TOOLBAR / HERO ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-toolbar { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 22px; min-height: 110px; margin-bottom: 18px; padding: 22px 26px; border: 1px solid rgba(201,154,72,.12); border-radius: 23px; background: radial-gradient( circle at 90% 8%, rgba(220,185,111,.18), transparent 30% ), linear-gradient( 115deg, #172820, #21392e 55%, #3c4937 ); box-shadow: 0 18px 42px rgba(25,39,32,.14); color: #fff; } body.rs-sales-dashboard-theme .rs-sales-toolbar::after { content: ""; position: absolute; right: -65px; bottom: -105px; width: 240px; height: 240px; border: 28px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-sales-dashboard-theme .rs-sales-toolbar h2, body.rs-sales-dashboard-theme .rs-sales-toolbar h3 { color: #fff !important; } body.rs-sales-dashboard-theme .rs-sales-toolbar p, body.rs-sales-dashboard-theme .rs-sales-toolbar span { color: rgba(255,255,255,.68); } /* ========================================================== PRIMARY BUTTON ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-toolbar .btn-primary, body.rs-sales-dashboard-theme .content > .btn-primary { border: 0 !important; border-radius: 12px !important; background: linear-gradient( 135deg, #d8b064, #bd8934 ) !important; color: #1b211d !important; box-shadow: 0 9px 20px rgba(178,126,42,.22); font-weight: 900 !important; } /* ========================================================== FILTER / SEARCH BAR ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-filter { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; padding: 14px 15px; border: 1px solid var(--rs-line); border-radius: 17px; background: radial-gradient( circle at 100% 0%, rgba(86,112,162,.07), transparent 30% ), #fffefa; box-shadow: 0 9px 24px rgba(31,38,34,.04); } body.rs-sales-dashboard-theme .rs-sales-filter input, body.rs-sales-dashboard-theme .rs-sales-filter select { min-height: 42px; border: 1px solid #ddd7ca; border-radius: 11px; background: #fff; color: var(--rs-ink); } body.rs-sales-dashboard-theme .rs-sales-filter input:focus, body.rs-sales-dashboard-theme .rs-sales-filter select:focus { outline: none; border-color: #c99a48; box-shadow: 0 0 0 4px rgba(201,154,72,.10); } /* ========================================================== MAIN SALES PANEL ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 23px !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.08), transparent 26% ), radial-gradient( circle at 0% 100%, rgba(62,112,108,.05), transparent 28% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } /* ========================================================== TABLE WRAPPER ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-panel .table-wrap { overflow-x: auto; padding: 8px 12px 14px; } /* ========================================================== TABLE ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table { width: 100%; border-collapse: separate !important; border-spacing: 0 8px !important; } /* ========================================================== TABLE HEAD ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8e8067 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } /* ========================================================== INVOICE ROWS ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table tbody tr { position: relative; background: rgba(255,255,255,.82); transition: transform .18s ease, box-shadow .18s ease; } body.rs-sales-dashboard-theme .rs-sales-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.82); color: var(--rs-ink-soft); } body.rs-sales-dashboard-theme .rs-sales-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-sales-dashboard-theme .rs-sales-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } body.rs-sales-dashboard-theme .rs-sales-table tbody tr:hover td { background: #fffaf0; border-color: #e5d6b7 !important; } body.rs-sales-dashboard-theme .rs-sales-table tbody tr:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } /* ========================================================== INVOICE NUMBER ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table tbody td:first-child strong, body.rs-sales-dashboard-theme .rs-sales-table tbody td:first-child a { color: var(--rs-ink) !important; font-weight: 900 !important; } /* ========================================================== ROW ACCENTS ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-row-paid td:first-child { box-shadow: inset 4px 0 0 #4c8a64; } body.rs-sales-dashboard-theme .rs-sales-row-partial td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-sales-dashboard-theme .rs-sales-row-due td:first-child { box-shadow: inset 4px 0 0 #ad594c; } /* ========================================================== STATUS PILLS ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-status-paid { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 999px; background: #e7f3eb !important; color: #38704d !important; font-size: 9px; font-weight: 900; } body.rs-sales-dashboard-theme .rs-sales-status-partial { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 999px; background: #f6ead5 !important; color: #9b6d26 !important; font-size: 9px; font-weight: 900; } body.rs-sales-dashboard-theme .rs-sales-status-due { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 999px; background: #f7e7e5 !important; color: #99493f !important; font-size: 9px; font-weight: 900; } /* ========================================================== MONEY CELLS ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table td strong { color: var(--rs-ink); font-weight: 900; } /* exchange values */ body.rs-sales-dashboard-theme .rs-sales-table td:nth-last-child(3) { color: #80579c; } /* due values */ body.rs-sales-dashboard-theme .rs-sales-table td:nth-last-child(2) { color: #99493f; } /* ========================================================== VIEW / ACTION BUTTONS ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table a.btn, body.rs-sales-dashboard-theme .rs-sales-table .btn { min-height: 34px; padding: 0 11px; border: 1px solid #e1d7c5; border-radius: 10px; background: linear-gradient( 145deg, #fffefa, #f6f2e9 ); color: #59635f; font-size: 9px; font-weight: 800; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } body.rs-sales-dashboard-theme .rs-sales-table a.btn:hover, body.rs-sales-dashboard-theme .rs-sales-table .btn:hover { transform: translateY(-1px); border-color: #c7ab75; box-shadow: 0 7px 15px rgba(65,52,31,.07); } /* ========================================================== GENERIC SALES CARDS ABOVE TABLE ========================================================== */ body.rs-sales-dashboard-theme .content > .card:not(.rs-sales-panel) { border: 1px solid var(--rs-line); border-radius: 20px; background: #fffefa; box-shadow: 0 11px 29px rgba(31,38,34,.045); } /* first card — gold */ body.rs-sales-dashboard-theme .content > .card:nth-of-type(1) { background: linear-gradient( 145deg, #fff9e9, #fffefa ); } /* second — green */ body.rs-sales-dashboard-theme .content > .card:nth-of-type(2) { background: linear-gradient( 145deg, #eff9f3, #fffefa ); } /* third — purple */ body.rs-sales-dashboard-theme .content > .card:nth-of-type(3) { background: linear-gradient( 145deg, #f3f1fa, #fffefa ); } /* fourth — rose */ body.rs-sales-dashboard-theme .content > .card:nth-of-type(4) { background: linear-gradient( 145deg, #fff2ee, #fffefa ); } /* ========================================================== EMPTY STATE ========================================================== */ body.rs-sales-dashboard-theme .rs-sales-table tbody:empty::after { content: "No sales found"; display: block; padding: 50px; text-align: center; color: var(--rs-muted); } /* ========================================================== MOBILE / TABLET ========================================================== */ @media (max-width: 900px) { body.rs-sales-dashboard-theme .rs-sales-toolbar { align-items: flex-start; flex-direction: column; min-height: auto; padding: 22px 18px; } body.rs-sales-dashboard-theme .rs-sales-filter { align-items: stretch; flex-direction: column; } } @media (max-width: 680px) { body.rs-sales-dashboard-theme .rs-sales-panel { border-radius: 18px !important; } body.rs-sales-dashboard-theme .rs-sales-table { min-width: 850px; } } /* ========================================================== RATAN SETU BUYBACK / RETURN — DASHBOARD PREMIUM THEME ========================================================== */ body.rs-buybacks-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== CONTENT ========================================================== */ body.rs-buybacks-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 45px; } /* ========================================================== HERO ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 128px; margin-bottom: 18px; padding: 26px 30px; border: 0 !important; border-radius: 25px !important; background: radial-gradient( circle at 90% 8%, rgba(220,185,111,.20), transparent 30% ), linear-gradient( 115deg, #172820 0%, #21392e 55%, #3c4937 100% ) !important; box-shadow: 0 20px 48px rgba(25,39,32,.15) !important; color: #fff; } body.rs-buybacks-dashboard-theme .rs-buyback-hero::after { content: ""; position: absolute; z-index: -1; right: -75px; bottom: -115px; width: 275px; height: 275px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-buybacks-dashboard-theme .rs-buyback-hero h2, body.rs-buybacks-dashboard-theme .rs-buyback-hero h3 { margin: 0 0 5px; color: #fff !important; font-size: clamp( 23px, 3vw, 34px ) !important; letter-spacing: -.035em; } body.rs-buybacks-dashboard-theme .rs-buyback-hero p { color: rgba(255,255,255,.63) !important; } body.rs-buybacks-dashboard-theme .rs-buyback-hero .eyebrow { color: #dfbd78 !important; } /* ========================================================== HERO BUTTON / NEW BUYBACK ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-hero .btn-primary, body.rs-buybacks-dashboard-theme a[href*="buyback_new"].btn, body.rs-buybacks-dashboard-theme a[href*="buyback_new"].btn-primary { border: 0 !important; border-radius: 12px !important; background: linear-gradient( 135deg, #d8b064, #bd8934 ) !important; box-shadow: 0 9px 20px rgba(178,126,42,.22) !important; color: #1b211d !important; font-weight: 900 !important; } /* ========================================================== TOP STAT CARDS ========================================================== */ body.rs-buybacks-dashboard-theme .rs-bb-stat-card { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 20px !important; box-shadow: 0 12px 30px rgba(30,37,33,.045) !important; transition: transform .18s ease, box-shadow .18s ease; } body.rs-buybacks-dashboard-theme .rs-bb-stat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(30,37,33,.075) !important; } /* Gold */ body.rs-buybacks-dashboard-theme .rs-bb-card-gold { background: linear-gradient( 145deg, #fff9e9, #fffefa ) !important; } /* Green */ body.rs-buybacks-dashboard-theme .rs-bb-card-green { background: linear-gradient( 145deg, #eff9f3, #fffefa ) !important; } /* Purple */ body.rs-buybacks-dashboard-theme .rs-bb-card-purple { background: linear-gradient( 145deg, #f3f1fa, #fffefa ) !important; } /* Rose */ body.rs-buybacks-dashboard-theme .rs-bb-card-rose { background: linear-gradient( 145deg, #fff2ee, #fffefa ) !important; } /* ========================================================== SEARCH / FILTER PANEL ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 17px; padding: 14px 15px; border: 1px solid var(--rs-line); border-radius: 17px; background: radial-gradient( circle at 100% 0%, rgba(86,112,162,.08), transparent 30% ), linear-gradient( 145deg, #f9fbff, #fffefa ); box-shadow: 0 9px 24px rgba(31,38,34,.04); } body.rs-buybacks-dashboard-theme .rs-buyback-filter input, body.rs-buybacks-dashboard-theme .rs-buyback-filter select { min-height: 42px; border: 1px solid #ddd7ca; border-radius: 11px; background: #fff; color: var(--rs-ink); } body.rs-buybacks-dashboard-theme .rs-buyback-filter input:focus, body.rs-buybacks-dashboard-theme .rs-buyback-filter select:focus { outline: none; border-color: #c99a48; box-shadow: 0 0 0 4px rgba(201,154,72,.10); } /* ========================================================== MAIN BUYBACK HISTORY PANEL ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 23px !important; background: radial-gradient( circle at 98% 3%, rgba(128,87,156,.07), transparent 25% ), radial-gradient( circle at 2% 98%, rgba(201,154,72,.08), transparent 27% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } /* ========================================================== CARD HEADER ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-panel .card-head { padding: 21px 22px 11px; } body.rs-buybacks-dashboard-theme .rs-buyback-panel .card-head .eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: #f6ead5; color: #9b6d26; } body.rs-buybacks-dashboard-theme .rs-buyback-panel .card-head h3 { color: var(--rs-ink); font-size: 19px; letter-spacing: -.025em; } /* ========================================================== TABLE WRAPPER ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-panel .table-wrap { overflow-x: auto; padding: 7px 13px 15px; } /* ========================================================== TABLE ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-table { width: 100%; border-collapse: separate !important; border-spacing: 0 9px !important; } /* ========================================================== TABLE HEADER ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8d8069 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } /* ========================================================== BUYBACK ROW ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.84); color: var(--rs-ink-soft); } body.rs-buybacks-dashboard-theme .rs-buyback-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-buybacks-dashboard-theme .rs-buyback-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } body.rs-buybacks-dashboard-theme .rs-buyback-row { transition: transform .18s ease, filter .18s ease; } body.rs-buybacks-dashboard-theme .rs-buyback-row:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } body.rs-buybacks-dashboard-theme .rs-buyback-row:hover td { border-color: #e5d6b7 !important; background: #fffdf8; } /* ========================================================== ROW COLOUR STRIP ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-buybacks-dashboard-theme .rs-buyback-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-buybacks-dashboard-theme .rs-buyback-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-buybacks-dashboard-theme .rs-buyback-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-buybacks-dashboard-theme .rs-buyback-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-buybacks-dashboard-theme .rs-buyback-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== GOLD ITEM ========================================================== */ body.rs-buybacks-dashboard-theme .rs-metal-gold td { background: linear-gradient( 100deg, rgba(255,247,226,.72), rgba(255,255,255,.88) ); } /* ========================================================== SILVER ITEM ========================================================== */ body.rs-buybacks-dashboard-theme .rs-metal-silver td { background: linear-gradient( 100deg, rgba(238,243,248,.78), rgba(255,255,255,.90) ); } /* ========================================================== REFERENCE / BUYBACK NUMBER ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-table td:first-child strong, body.rs-buybacks-dashboard-theme .rs-buyback-table td:first-child a { color: var(--rs-ink) !important; font-weight: 900 !important; } /* ========================================================== MONEY ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-table td strong { color: var(--rs-ink); font-weight: 900; } /* ========================================================== COMPLETED STATUS ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-status-complete { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 999px; background: #e7f3eb !important; color: #38704d !important; font-size: 9px; font-weight: 900; } /* ========================================================== PENDING STATUS ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-status-pending { display: inline-flex; align-items: center; min-height: 23px; padding: 0 9px; border-radius: 999px; background: #f6ead5 !important; color: #9b6d26 !important; font-size: 9px; font-weight: 900; } /* ========================================================== NORMAL BUTTONS ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-table .btn, body.rs-buybacks-dashboard-theme .rs-buyback-panel .btn-secondary { min-height: 34px; padding: 0 11px; border: 1px solid #e1d7c5 !important; border-radius: 10px !important; background: linear-gradient( 145deg, #fffefa, #f6f2e9 ) !important; color: #59635f !important; font-size: 9px; font-weight: 800; } body.rs-buybacks-dashboard-theme .rs-buyback-table .btn:hover { transform: translateY(-1px); border-color: #c7ab75 !important; box-shadow: 0 7px 15px rgba(65,52,31,.07); } /* ========================================================== GENERAL INPUTS ========================================================== */ body.rs-buybacks-dashboard-theme input:not([type="checkbox"]):not([type="radio"]), body.rs-buybacks-dashboard-theme select { border-radius: 11px; border-color: #ddd7ca; background: #fff; } /* ========================================================== EMPTY STATE ========================================================== */ body.rs-buybacks-dashboard-theme .rs-buyback-panel .empty-state { margin: 15px; padding: 45px 20px; border: 1px dashed #dfd5c1; border-radius: 17px; background: linear-gradient( 145deg, #fff9ec, #fffefa ); text-align: center; color: var(--rs-muted); } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 900px) { body.rs-buybacks-dashboard-theme .rs-buyback-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 22px 18px; } body.rs-buybacks-dashboard-theme .rs-buyback-filter { align-items: stretch; flex-direction: column; } } @media (max-width: 680px) { body.rs-buybacks-dashboard-theme .rs-buyback-panel { border-radius: 18px !important; } body.rs-buybacks-dashboard-theme .rs-buyback-table { min-width: 820px; } } /* ========================================================== CUSTOMERS PAGE — DASHBOARD PREMIUM ========================================================== */ body.rs-customers-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== CONTENT ========================================================== */ body.rs-customers-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 48px; } /* ========================================================== HERO ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 152px; margin-bottom: 15px; padding: 29px 34px; border-radius: 26px; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ); box-shadow: 0 20px 50px rgba(24,35,30,.15); color: #fff; } body.rs-customers-dashboard-theme .rs-customers-hero::before { content: ""; position: absolute; z-index: -1; right: -78px; bottom: -120px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-customers-dashboard-theme .rs-customers-hero::after { content: ""; position: absolute; right: 24%; top: -70px; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.018); } body.rs-customers-dashboard-theme .rs-customers-hero-copy { position: relative; z-index: 2; } body.rs-customers-dashboard-theme .rs-customers-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px; color: #dfbd78; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } body.rs-customers-dashboard-theme .rs-customers-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #dfbd78; box-shadow: 0 0 0 5px rgba(223,189,120,.11); } body.rs-customers-dashboard-theme .rs-customers-hero h2 { max-width: 690px; margin: 0; color: #fff; font-size: clamp( 25px, 3vw, 37px ); line-height: 1.08; letter-spacing: -.04em; } body.rs-customers-dashboard-theme .rs-customers-hero p { max-width: 700px; margin: 11px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } /* ========================================================== HERO ACTIONS ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-hero-actions { position: relative; z-index: 2; display: flex; gap: 9px; flex-shrink: 0; } body.rs-customers-dashboard-theme .rs-customers-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-customers-dashboard-theme .rs-customers-action:hover { transform: translateY(-2px); } body.rs-customers-dashboard-theme .rs-customers-action-light { background: rgba(255,255,255,.96); color: #1a2923; box-shadow: 0 8px 18px rgba(0,0,0,.08); } body.rs-customers-dashboard-theme .rs-customers-action-gold { background: linear-gradient( 135deg, #d8b064, #bd8934 ); color: #1b211d; box-shadow: 0 9px 20px rgba(178,126,42,.22); } /* ========================================================== METRICS ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-metrics { display: grid; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: 13px; margin-bottom: 17px; } body.rs-customers-dashboard-theme .rs-customers-metric { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 146px; padding: 18px; border: 1px solid var(--rs-line); border-radius: 20px; box-shadow: 0 12px 30px rgba(30,37,33,.045); transition: transform .18s ease, box-shadow .18s ease; } body.rs-customers-dashboard-theme .rs-customers-metric:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(30,37,33,.075); } body.rs-customers-dashboard-theme .rs-cm-gold { background: linear-gradient( 145deg, #fff9e9, #fffefa ); } body.rs-customers-dashboard-theme .rs-cm-green { background: linear-gradient( 145deg, #eff9f3, #fffefa ); } body.rs-customers-dashboard-theme .rs-cm-purple { background: linear-gradient( 145deg, #f3f1fa, #fffefa ); } body.rs-customers-dashboard-theme .rs-cm-rose { background: linear-gradient( 145deg, #fff2ee, #fffefa ); } body.rs-customers-dashboard-theme .rs-cm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } body.rs-customers-dashboard-theme .rs-cm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 900; } body.rs-customers-dashboard-theme .rs-cm-gold .rs-cm-icon { background: #f5e7c5; color: #916522; } body.rs-customers-dashboard-theme .rs-cm-green .rs-cm-icon { background: #dceee3; color: #397451; } body.rs-customers-dashboard-theme .rs-cm-purple .rs-cm-icon { background: #e7e1f1; color: #765a94; } body.rs-customers-dashboard-theme .rs-cm-rose .rs-cm-icon { background: #f5ddd7; color: #9c5040; } body.rs-customers-dashboard-theme .rs-cm-chip { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.65); color: #897e6b; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } body.rs-customers-dashboard-theme .rs-cm-label { margin-bottom: 4px; color: #89928e; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } body.rs-customers-dashboard-theme .rs-customers-metric strong { color: var(--rs-ink); font-size: 25px; font-weight: 900; letter-spacing: -.04em; } body.rs-customers-dashboard-theme .rs-customers-metric .rs-cm-money { font-size: 19px; } body.rs-customers-dashboard-theme .rs-customers-metric small { margin-top: auto; padding-top: 10px; color: #9ba29f; font-size: 9px; } /* ========================================================== OLD TOOLBAR / PAGE HEADER ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-existing-head { margin-bottom: 14px; } /* ========================================================== FILTER ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 14px 15px; border: 1px solid var(--rs-line); border-radius: 17px; background: radial-gradient( circle at 100% 0%, rgba(86,112,162,.08), transparent 30% ), linear-gradient( 145deg, #f9fbff, #fffefa ); box-shadow: 0 9px 24px rgba(31,38,34,.04); } body.rs-customers-dashboard-theme .rs-customers-filter input, body.rs-customers-dashboard-theme .rs-customers-filter select { min-height: 42px; border: 1px solid #ddd7ca; border-radius: 11px; background: #fff; color: var(--rs-ink); } body.rs-customers-dashboard-theme .rs-customers-filter input:focus, body.rs-customers-dashboard-theme .rs-customers-filter select:focus { outline: none; border-color: #c99a48; box-shadow: 0 0 0 4px rgba(201,154,72,.10); } /* ========================================================== CUSTOMER PANEL ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 23px !important; background: radial-gradient( circle at 98% 2%, rgba(62,112,108,.07), transparent 25% ), radial-gradient( circle at 2% 98%, rgba(201,154,72,.07), transparent 26% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } body.rs-customers-dashboard-theme .rs-customers-panel .table-wrap { overflow-x: auto; padding: 7px 13px 15px; } /* ========================================================== TABLE ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-table { width: 100%; border-collapse: separate !important; border-spacing: 0 9px !important; } body.rs-customers-dashboard-theme .rs-customers-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8d8069 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } /* ========================================================== CUSTOMER ROWS ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.85); color: var(--rs-ink-soft); transition: background .18s ease, border-color .18s ease; } body.rs-customers-dashboard-theme .rs-customers-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-customers-dashboard-theme .rs-customers-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } body.rs-customers-dashboard-theme .rs-customer-row { transition: transform .18s ease, filter .18s ease; } body.rs-customers-dashboard-theme .rs-customer-row:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } body.rs-customers-dashboard-theme .rs-customer-row:hover td { background: #fffdf8; border-color: #e5d6b7 !important; } /* ========================================================== COLOURFUL ROW ACCENTS ========================================================== */ body.rs-customers-dashboard-theme .rs-customer-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-customers-dashboard-theme .rs-customer-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-customers-dashboard-theme .rs-customer-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-customers-dashboard-theme .rs-customer-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-customers-dashboard-theme .rs-customer-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-customers-dashboard-theme .rs-customer-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== CUSTOMER NAME ========================================================== */ body.rs-customers-dashboard-theme .rs-customer-name-cell strong, body.rs-customers-dashboard-theme .rs-customer-name-cell a { color: var(--rs-ink) !important; font-weight: 900 !important; } /* ========================================================== MOBILE CELL ========================================================== */ body.rs-customers-dashboard-theme .rs-customer-mobile-cell { color: #5670a2 !important; font-weight: 700; } /* ========================================================== DUE ========================================================== */ body.rs-customers-dashboard-theme .rs-customer-has-due .rs-customer-due-cell { color: #99493f !important; font-weight: 900 !important; } body.rs-customers-dashboard-theme .rs-customer-has-due .rs-customer-due-cell::before { content: "Outstanding "; display: block; margin-bottom: 2px; color: #b48c84; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } /* ========================================================== CLEAR BALANCE ========================================================== */ body.rs-customers-dashboard-theme .rs-customer-clear .rs-customer-due-cell { color: #397453 !important; font-weight: 900 !important; } /* ========================================================== ROW ACTION BUTTON ========================================================== */ body.rs-customers-dashboard-theme .rs-customers-table .btn, body.rs-customers-dashboard-theme .rs-customers-table a.btn { min-height: 34px; padding: 0 11px; border: 1px solid #e1d7c5; border-radius: 10px; background: linear-gradient( 145deg, #fffefa, #f6f2e9 ); color: #59635f; font-size: 9px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease; } body.rs-customers-dashboard-theme .rs-customers-table .btn:hover, body.rs-customers-dashboard-theme .rs-customers-table a.btn:hover { transform: translateY(-1px); border-color: #c7ab75; box-shadow: 0 7px 15px rgba(65,52,31,.07); } /* ========================================================== GENERIC CUSTOMER CARDS ========================================================== */ body.rs-customers-dashboard-theme .content > .card:not(.rs-customers-panel) { border: 1px solid var(--rs-line); border-radius: 20px; background: #fffefa; box-shadow: 0 11px 29px rgba(31,38,34,.045); } /* ========================================================== EMPTY STATE ========================================================== */ body.rs-customers-dashboard-theme .empty-state { margin: 15px; padding: 45px 20px; border: 1px dashed #dfd5c1; border-radius: 17px; background: linear-gradient( 145deg, #fff9ec, #fffefa ); text-align: center; color: var(--rs-muted); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1180px) { body.rs-customers-dashboard-theme .rs-customers-metrics { grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media (max-width: 760px) { body.rs-customers-dashboard-theme .rs-customers-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 23px 19px; border-radius: 20px; } body.rs-customers-dashboard-theme .rs-customers-hero-actions { width: 100%; } body.rs-customers-dashboard-theme .rs-customers-action { flex: 1; } body.rs-customers-dashboard-theme .rs-customers-metrics { grid-template-columns: 1fr; } body.rs-customers-dashboard-theme .rs-customers-filter { align-items: stretch; flex-direction: column; } body.rs-customers-dashboard-theme .rs-customers-table { min-width: 780px; } body.rs-customers-dashboard-theme .rs-customers-panel { border-radius: 18px !important; } } /* ========================================================== DUE PAYMENTS — DASHBOARD PREMIUM ========================================================== */ body.rs-payments-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== CONTENT ========================================================== */ body.rs-payments-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 48px; } /* ========================================================== HERO ========================================================== */ body.rs-payments-dashboard-theme .rs-payments-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 152px; margin-bottom: 15px; padding: 29px 34px; border-radius: 26px; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ); box-shadow: 0 20px 50px rgba(24,35,30,.15); color: #fff; } body.rs-payments-dashboard-theme .rs-payments-hero::before { content: ""; position: absolute; z-index: -1; right: -78px; bottom: -120px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-payments-dashboard-theme .rs-payments-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px; color: #dfbd78; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } body.rs-payments-dashboard-theme .rs-payments-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #dfbd78; box-shadow: 0 0 0 5px rgba(223,189,120,.11); } body.rs-payments-dashboard-theme .rs-payments-hero h2 { max-width: 680px; margin: 0; color: #fff; font-size: clamp( 25px, 3vw, 37px ); line-height: 1.08; letter-spacing: -.04em; } body.rs-payments-dashboard-theme .rs-payments-hero p { max-width: 700px; margin: 11px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } /* ========================================================== HERO ACTIONS ========================================================== */ body.rs-payments-dashboard-theme .rs-payments-hero-actions { position: relative; z-index: 2; display: flex; gap: 9px; flex-shrink: 0; } body.rs-payments-dashboard-theme .rs-payments-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-payments-dashboard-theme .rs-payments-action:hover { transform: translateY(-2px); } body.rs-payments-dashboard-theme .rs-payments-action-light { background: rgba(255,255,255,.96); color: #1a2923; box-shadow: 0 8px 18px rgba(0,0,0,.08); } body.rs-payments-dashboard-theme .rs-payments-action-gold { background: linear-gradient( 135deg, #d8b064, #bd8934 ); color: #1b211d; box-shadow: 0 9px 20px rgba(178,126,42,.22); } /* ========================================================== METRICS ========================================================== */ body.rs-payments-dashboard-theme .rs-payments-metrics { display: grid; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: 13px; margin-bottom: 17px; } body.rs-payments-dashboard-theme .rs-payment-metric { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 146px; padding: 18px; border: 1px solid var(--rs-line); border-radius: 20px; box-shadow: 0 12px 30px rgba(30,37,33,.045); transition: transform .18s ease, box-shadow .18s ease; } body.rs-payments-dashboard-theme .rs-payment-metric:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(30,37,33,.075); } body.rs-payments-dashboard-theme .rs-pm-gold { background: linear-gradient( 145deg, #fff9e9, #fffefa ); } body.rs-payments-dashboard-theme .rs-pm-green { background: linear-gradient( 145deg, #eff9f3, #fffefa ); } body.rs-payments-dashboard-theme .rs-pm-purple { background: linear-gradient( 145deg, #f3f1fa, #fffefa ); } body.rs-payments-dashboard-theme .rs-pm-rose { background: linear-gradient( 145deg, #fff2ee, #fffefa ); } body.rs-payments-dashboard-theme .rs-pm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } body.rs-payments-dashboard-theme .rs-pm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 900; } body.rs-payments-dashboard-theme .rs-pm-gold .rs-pm-icon { background: #f5e7c5; color: #916522; } body.rs-payments-dashboard-theme .rs-pm-green .rs-pm-icon { background: #dceee3; color: #397451; } body.rs-payments-dashboard-theme .rs-pm-purple .rs-pm-icon { background: #e7e1f1; color: #765a94; } body.rs-payments-dashboard-theme .rs-pm-rose .rs-pm-icon { background: #f5ddd7; color: #9c5040; } body.rs-payments-dashboard-theme .rs-pm-chip { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.64); color: #897e6b; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } body.rs-payments-dashboard-theme .rs-pm-label { margin-bottom: 4px; color: #89928e; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } body.rs-payments-dashboard-theme .rs-payment-metric strong { color: var(--rs-ink); font-size: 25px; font-weight: 900; letter-spacing: -.04em; } body.rs-payments-dashboard-theme .rs-payment-metric .rs-pm-money { font-size: 19px; } body.rs-payments-dashboard-theme .rs-payment-metric small { margin-top: auto; padding-top: 10px; color: #9ba29f; font-size: 9px; } /* ========================================================== PAYMENT FORM ========================================================== */ body.rs-payments-dashboard-theme .rs-payment-form { position: relative; overflow: hidden; margin-bottom: 17px; padding: 20px !important; border: 1px solid rgba(201,154,72,.24) !important; border-radius: 22px !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.12), transparent 28% ), radial-gradient( circle at 0% 100%, rgba(62,112,108,.07), transparent 30% ), linear-gradient( 145deg, #fffdf8, #fffaf1 ) !important; box-shadow: 0 15px 38px rgba(62,51,33,.075); } body.rs-payments-dashboard-theme .rs-payment-form label { color: #5e6964; font-size: 9px; font-weight: 900; } body.rs-payments-dashboard-theme .rs-payment-form input, body.rs-payments-dashboard-theme .rs-payment-form select, body.rs-payments-dashboard-theme .rs-payment-form textarea { min-height: 43px; border: 1px solid #ddd7ca; border-radius: 11px; background: #fff; color: var(--rs-ink); } body.rs-payments-dashboard-theme .rs-payment-form input:focus, body.rs-payments-dashboard-theme .rs-payment-form select:focus, body.rs-payments-dashboard-theme .rs-payment-form textarea:focus { outline: none; border-color: #c99a48; box-shadow: 0 0 0 4px rgba(201,154,72,.10); } /* ========================================================== PAYMENT FIELD COLOURS ========================================================== */ body.rs-payments-dashboard-theme .rs-pay-field { padding: 10px; border-radius: 14px; } body.rs-payments-dashboard-theme .rs-pay-field-gold { background: linear-gradient( 145deg, #fff4dc, #fff ); border: 1px solid #ead4a9; } body.rs-payments-dashboard-theme .rs-pay-field-purple { background: linear-gradient( 145deg, #f3edfa, #fff ); border: 1px solid #dfd3e8; } body.rs-payments-dashboard-theme .rs-pay-field-blue { background: linear-gradient( 145deg, #eef3fa, #fff ); border: 1px solid #d9e1ee; } body.rs-payments-dashboard-theme .rs-pay-field-teal { background: linear-gradient( 145deg, #ecf6f3, #fff ); border: 1px solid #d4e6e1; } /* ========================================================== FORM SUBMIT ========================================================== */ body.rs-payments-dashboard-theme .rs-payment-form button[type="submit"], body.rs-payments-dashboard-theme .rs-payment-form .btn-primary { min-height: 46px; border: 0 !important; border-radius: 13px !important; background: radial-gradient( circle at 90% 0%, rgba(220,185,111,.16), transparent 34% ), linear-gradient( 110deg, #173027, #3c4937 ) !important; box-shadow: 0 12px 24px rgba(23,48,39,.18); color: #fff !important; font-weight: 900 !important; } /* ========================================================== PAYMENT LIST PANEL ========================================================== */ body.rs-payments-dashboard-theme .rs-payments-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 23px !important; background: radial-gradient( circle at 98% 3%, rgba(128,87,156,.07), transparent 25% ), radial-gradient( circle at 2% 98%, rgba(201,154,72,.08), transparent 27% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } body.rs-payments-dashboard-theme .rs-payments-panel .table-wrap { overflow-x: auto; padding: 7px 13px 15px; } /* ========================================================== TABLE ========================================================== */ body.rs-payments-dashboard-theme .rs-payments-table { width: 100%; border-collapse: separate !important; border-spacing: 0 9px !important; } body.rs-payments-dashboard-theme .rs-payments-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8d8069 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } body.rs-payments-dashboard-theme .rs-payments-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.85); color: var(--rs-ink-soft); } body.rs-payments-dashboard-theme .rs-payments-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-payments-dashboard-theme .rs-payments-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } /* ========================================================== ROW HOVER ========================================================== */ body.rs-payments-dashboard-theme .rs-payment-row { transition: transform .18s ease, filter .18s ease; } body.rs-payments-dashboard-theme .rs-payment-row:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } body.rs-payments-dashboard-theme .rs-payment-row:hover td { background: #fffdf8; border-color: #e5d6b7 !important; } /* ========================================================== ROW COLOUR ACCENTS ========================================================== */ body.rs-payments-dashboard-theme .rs-payment-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-payments-dashboard-theme .rs-payment-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-payments-dashboard-theme .rs-payment-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-payments-dashboard-theme .rs-payment-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-payments-dashboard-theme .rs-payment-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-payments-dashboard-theme .rs-payment-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== CUSTOMER / MOBILE / DUE ========================================================== */ body.rs-payments-dashboard-theme .rs-payment-customer strong, body.rs-payments-dashboard-theme .rs-payment-customer a { color: var(--rs-ink) !important; font-weight: 900 !important; } body.rs-payments-dashboard-theme .rs-payment-mobile { color: #5670a2 !important; font-weight: 700; } body.rs-payments-dashboard-theme .rs-payment-has-due .rs-payment-due { color: #99493f !important; font-weight: 900 !important; } body.rs-payments-dashboard-theme .rs-payment-has-due .rs-payment-due::before { content: "Due "; display: block; margin-bottom: 2px; color: #b48c84; font-size: 7px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } body.rs-payments-dashboard-theme .rs-payment-clear .rs-payment-due { color: #397453 !important; font-weight: 900 !important; } /* ========================================================== TABLE BUTTON ========================================================== */ body.rs-payments-dashboard-theme .rs-payments-table .btn, body.rs-payments-dashboard-theme .rs-payments-table a.btn { min-height: 34px; padding: 0 11px; border: 1px solid #e1d7c5; border-radius: 10px; background: linear-gradient( 145deg, #fffefa, #f6f2e9 ); color: #59635f; font-size: 9px; font-weight: 800; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1180px) { body.rs-payments-dashboard-theme .rs-payments-metrics { grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media (max-width: 760px) { body.rs-payments-dashboard-theme .rs-payments-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 23px 19px; border-radius: 20px; } body.rs-payments-dashboard-theme .rs-payments-hero-actions { width: 100%; } body.rs-payments-dashboard-theme .rs-payments-action { flex: 1; } body.rs-payments-dashboard-theme .rs-payments-metrics { grid-template-columns: 1fr; } body.rs-payments-dashboard-theme .rs-payments-table { min-width: 800px; } body.rs-payments-dashboard-theme .rs-payments-panel { border-radius: 18px !important; } } /* ========================================================== PURCHASES PAGE — DASHBOARD PREMIUM ========================================================== */ body.rs-purchases-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== CONTENT ========================================================== */ body.rs-purchases-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 48px; } /* ========================================================== HERO ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 152px; margin-bottom: 15px; padding: 29px 34px; border-radius: 26px; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ); box-shadow: 0 20px 50px rgba(24,35,30,.15); color: #fff; } body.rs-purchases-dashboard-theme .rs-purchases-hero::before { content: ""; position: absolute; z-index: -1; right: -78px; bottom: -120px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-purchases-dashboard-theme .rs-purchases-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px; color: #dfbd78; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } body.rs-purchases-dashboard-theme .rs-purchases-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #dfbd78; box-shadow: 0 0 0 5px rgba(223,189,120,.11); } body.rs-purchases-dashboard-theme .rs-purchases-hero h2 { max-width: 680px; margin: 0; color: #fff; font-size: clamp( 25px, 3vw, 37px ); line-height: 1.08; letter-spacing: -.04em; } body.rs-purchases-dashboard-theme .rs-purchases-hero p { max-width: 700px; margin: 11px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } /* ========================================================== HERO ACTIONS ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-hero-actions { position: relative; z-index: 2; display: flex; gap: 9px; flex-shrink: 0; } body.rs-purchases-dashboard-theme .rs-purchases-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-purchases-dashboard-theme .rs-purchases-action:hover { transform: translateY(-2px); } body.rs-purchases-dashboard-theme .rs-purchases-action-light { background: rgba(255,255,255,.96); color: #1a2923; box-shadow: 0 8px 18px rgba(0,0,0,.08); } body.rs-purchases-dashboard-theme .rs-purchases-action-gold { background: linear-gradient( 135deg, #d8b064, #bd8934 ); color: #1b211d; box-shadow: 0 9px 20px rgba(178,126,42,.22); } /* ========================================================== KPI GRID ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-metrics { display: grid; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: 13px; margin-bottom: 17px; } body.rs-purchases-dashboard-theme .rs-purchase-metric { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 146px; padding: 18px; border: 1px solid var(--rs-line); border-radius: 20px; box-shadow: 0 12px 30px rgba(30,37,33,.045); transition: transform .18s ease, box-shadow .18s ease; } body.rs-purchases-dashboard-theme .rs-purchase-metric:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(30,37,33,.075); } /* Gold */ body.rs-purchases-dashboard-theme .rs-pm-gold { background: linear-gradient( 145deg, #fff9e9, #fffefa ); } /* Green */ body.rs-purchases-dashboard-theme .rs-pm-green { background: linear-gradient( 145deg, #eff9f3, #fffefa ); } /* Purple */ body.rs-purchases-dashboard-theme .rs-pm-purple { background: linear-gradient( 145deg, #f3f1fa, #fffefa ); } /* Blue */ body.rs-purchases-dashboard-theme .rs-pm-blue { background: linear-gradient( 145deg, #eef4fb, #fffefa ); } body.rs-purchases-dashboard-theme .rs-pm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } body.rs-purchases-dashboard-theme .rs-pm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 900; } body.rs-purchases-dashboard-theme .rs-pm-gold .rs-pm-icon { background: #f5e7c5; color: #916522; } body.rs-purchases-dashboard-theme .rs-pm-green .rs-pm-icon { background: #dceee3; color: #397451; } body.rs-purchases-dashboard-theme .rs-pm-purple .rs-pm-icon { background: #e7e1f1; color: #765a94; } body.rs-purchases-dashboard-theme .rs-pm-blue .rs-pm-icon { background: #e2e8f4; color: #5670a2; } body.rs-purchases-dashboard-theme .rs-pm-chip { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.65); color: #897e6b; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } body.rs-purchases-dashboard-theme .rs-pm-label { margin-bottom: 4px; color: #89928e; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } body.rs-purchases-dashboard-theme .rs-purchase-metric strong { color: var(--rs-ink); font-size: 25px; font-weight: 900; letter-spacing: -.04em; } body.rs-purchases-dashboard-theme .rs-purchase-metric .rs-pm-money { font-size: 19px; } body.rs-purchases-dashboard-theme .rs-purchase-metric small { margin-top: auto; padding-top: 10px; color: #9ba29f; font-size: 9px; } /* ========================================================== FILTER / SEARCH ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-filter { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; padding: 14px 15px; border: 1px solid var(--rs-line); border-radius: 17px; background: radial-gradient( circle at 100% 0%, rgba(86,112,162,.08), transparent 30% ), linear-gradient( 145deg, #f9fbff, #fffefa ); box-shadow: 0 9px 24px rgba(31,38,34,.04); } body.rs-purchases-dashboard-theme .rs-purchases-filter input, body.rs-purchases-dashboard-theme .rs-purchases-filter select { min-height: 42px; border: 1px solid #ddd7ca; border-radius: 11px; background: #fff; color: var(--rs-ink); } body.rs-purchases-dashboard-theme .rs-purchases-filter input:focus, body.rs-purchases-dashboard-theme .rs-purchases-filter select:focus { outline: none; border-color: #c99a48; box-shadow: 0 0 0 4px rgba(201,154,72,.10); } /* ========================================================== PURCHASE HISTORY PANEL ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 23px !important; background: radial-gradient( circle at 98% 3%, rgba(201,154,72,.08), transparent 25% ), radial-gradient( circle at 2% 98%, rgba(62,112,108,.06), transparent 27% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } body.rs-purchases-dashboard-theme .rs-purchases-panel .table-wrap { overflow-x: auto; padding: 7px 13px 15px; } /* ========================================================== TABLE ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-table { width: 100%; border-collapse: separate !important; border-spacing: 0 9px !important; } body.rs-purchases-dashboard-theme .rs-purchases-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8d8069 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } body.rs-purchases-dashboard-theme .rs-purchases-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.85); color: var(--rs-ink-soft); transition: background .18s ease, border-color .18s ease; } body.rs-purchases-dashboard-theme .rs-purchases-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-purchases-dashboard-theme .rs-purchases-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } /* ========================================================== ROW HOVER ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-row { transition: transform .18s ease, filter .18s ease; } body.rs-purchases-dashboard-theme .rs-purchase-row:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } body.rs-purchases-dashboard-theme .rs-purchase-row:hover td { background: #fffdf8; border-color: #e5d6b7 !important; } /* ========================================================== ROW COLOUR ACCENTS ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-purchases-dashboard-theme .rs-purchase-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-purchases-dashboard-theme .rs-purchase-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-purchases-dashboard-theme .rs-purchase-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-purchases-dashboard-theme .rs-purchase-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-purchases-dashboard-theme .rs-purchase-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== METAL SPECIFIC ROWS ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-gold td { background: linear-gradient( 100deg, rgba(255,247,226,.72), rgba(255,255,255,.88) ); } body.rs-purchases-dashboard-theme .rs-purchase-silver td { background: linear-gradient( 100deg, rgba(239,243,247,.82), rgba(255,255,255,.90) ); } body.rs-purchases-dashboard-theme .rs-purchase-diamond td { background: linear-gradient( 100deg, rgba(239,235,249,.78), rgba(255,255,255,.90) ); } body.rs-purchases-dashboard-theme .rs-purchase-utensil td { background: linear-gradient( 100deg, rgba(232,244,240,.75), rgba(255,255,255,.90) ); } /* ========================================================== PURCHASE NUMBER ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-number strong, body.rs-purchases-dashboard-theme .rs-purchase-number a { color: var(--rs-ink) !important; font-weight: 900 !important; } /* ========================================================== SUPPLIER ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-supplier { color: #5670a2 !important; font-weight: 800; } /* ========================================================== DATE ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-date { color: #8d9692; font-size: 10px; } /* ========================================================== TOTAL ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchase-total { color: #173027 !important; font-weight: 900 !important; } /* ========================================================== TABLE ACTION BUTTONS ========================================================== */ body.rs-purchases-dashboard-theme .rs-purchases-table .btn, body.rs-purchases-dashboard-theme .rs-purchases-table a.btn { min-height: 34px; padding: 0 11px; border: 1px solid #e1d7c5; border-radius: 10px; background: linear-gradient( 145deg, #fffefa, #f6f2e9 ); color: #59635f; font-size: 9px; font-weight: 800; transition: transform .18s ease, box-shadow .18s ease; } body.rs-purchases-dashboard-theme .rs-purchases-table .btn:hover, body.rs-purchases-dashboard-theme .rs-purchases-table a.btn:hover { transform: translateY(-1px); border-color: #c7ab75; box-shadow: 0 7px 15px rgba(65,52,31,.07); } /* ========================================================== EXISTING NEW PURCHASE BUTTON ========================================================== */ body.rs-purchases-dashboard-theme a[href*="purchase_new"].btn-primary, body.rs-purchases-dashboard-theme a[href*="purchase_new"].btn { border: 0 !important; border-radius: 12px !important; background: linear-gradient( 135deg, #d8b064, #bd8934 ) !important; color: #1b211d !important; box-shadow: 0 9px 20px rgba(178,126,42,.20); font-weight: 900 !important; } /* ========================================================== GENERIC CARDS ========================================================== */ body.rs-purchases-dashboard-theme .content > .card:not(.rs-purchases-panel) { border: 1px solid var(--rs-line); border-radius: 20px; background: #fffefa; box-shadow: 0 11px 29px rgba(31,38,34,.045); } /* ========================================================== EMPTY STATE ========================================================== */ body.rs-purchases-dashboard-theme .empty-state { margin: 15px; padding: 45px 20px; border: 1px dashed #dfd5c1; border-radius: 17px; background: linear-gradient( 145deg, #fff9ec, #fffefa ); text-align: center; color: var(--rs-muted); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1180px) { body.rs-purchases-dashboard-theme .rs-purchases-metrics { grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media (max-width: 760px) { body.rs-purchases-dashboard-theme .rs-purchases-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 23px 19px; border-radius: 20px; } body.rs-purchases-dashboard-theme .rs-purchases-hero-actions { width: 100%; } body.rs-purchases-dashboard-theme .rs-purchases-action { flex: 1; } body.rs-purchases-dashboard-theme .rs-purchases-metrics { grid-template-columns: 1fr; } body.rs-purchases-dashboard-theme .rs-purchases-filter { align-items: stretch; flex-direction: column; } body.rs-purchases-dashboard-theme .rs-purchases-table { min-width: 820px; } body.rs-purchases-dashboard-theme .rs-purchases-panel { border-radius: 18px !important; } } /* ========================================================== RATES & PURITY — DASHBOARD PREMIUM ========================================================== */ body.rs-rates-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-2: #273d32; --rs-gold: #c99a48; --rs-gold-deep: #9d732e; --rs-gold-soft: #f5ead5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #eadff1; --rs-rose: #99493f; --rs-rose-soft: #f7e7e5; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; } /* ========================================================== CONTENT ========================================================== */ body.rs-rates-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 48px; } /* ========================================================== HERO ========================================================== */ body.rs-rates-dashboard-theme .rs-rates-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 152px; margin-bottom: 15px; padding: 29px 34px; border-radius: 26px; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ); box-shadow: 0 20px 50px rgba(24,35,30,.15); color: #fff; } body.rs-rates-dashboard-theme .rs-rates-hero::before { content: ""; position: absolute; z-index: -1; right: -78px; bottom: -120px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-rates-dashboard-theme .rs-rates-hero::after { content: "◇"; position: absolute; right: 16%; top: -35px; font-size: 180px; color: rgba(255,255,255,.018); pointer-events: none; } body.rs-rates-dashboard-theme .rs-rates-hero-copy { position: relative; z-index: 2; } body.rs-rates-dashboard-theme .rs-rates-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px; color: #dfbd78; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } body.rs-rates-dashboard-theme .rs-rates-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #dfbd78; box-shadow: 0 0 0 5px rgba(223,189,120,.11); } body.rs-rates-dashboard-theme .rs-rates-hero h2 { max-width: 690px; margin: 0; color: #fff; font-size: clamp( 25px, 3vw, 37px ); line-height: 1.08; letter-spacing: -.04em; } body.rs-rates-dashboard-theme .rs-rates-hero p { max-width: 690px; margin: 11px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } /* ========================================================== HERO ACTIONS ========================================================== */ body.rs-rates-dashboard-theme .rs-rates-hero-actions { position: relative; z-index: 2; display: flex; gap: 9px; flex-shrink: 0; } body.rs-rates-dashboard-theme .rs-rates-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-rates-dashboard-theme .rs-rates-action:hover { transform: translateY(-2px); } body.rs-rates-dashboard-theme .rs-rates-action-light { background: rgba(255,255,255,.96); color: #1a2923; box-shadow: 0 8px 18px rgba(0,0,0,.08); } body.rs-rates-dashboard-theme .rs-rates-action-gold { background: linear-gradient( 135deg, #d8b064, #bd8934 ); color: #1b211d; box-shadow: 0 9px 20px rgba(178,126,42,.22); } /* ========================================================== METRIC GRID ========================================================== */ body.rs-rates-dashboard-theme .rs-rates-metrics { display: grid; grid-template-columns: repeat( 4, minmax(0,1fr) ); gap: 13px; margin-bottom: 17px; } body.rs-rates-dashboard-theme .rs-rate-metric { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 146px; padding: 18px; border: 1px solid var(--rs-line); border-radius: 20px; box-shadow: 0 12px 30px rgba(30,37,33,.045); transition: transform .18s ease, box-shadow .18s ease; } body.rs-rates-dashboard-theme .rs-rate-metric:hover { transform: translateY(-3px); box-shadow: 0 18px 35px rgba(30,37,33,.075); } /* Gold */ body.rs-rates-dashboard-theme .rs-rm-gold { background: linear-gradient( 145deg, #fff7df, #fffefa ); } /* Silver */ body.rs-rates-dashboard-theme .rs-rm-silver { background: linear-gradient( 145deg, #eef2f5, #fffefa ); } /* Purple */ body.rs-rates-dashboard-theme .rs-rm-purple { background: linear-gradient( 145deg, #f3f1fa, #fffefa ); } /* Blue */ body.rs-rates-dashboard-theme .rs-rm-blue { background: linear-gradient( 145deg, #eef4fb, #fffefa ); } body.rs-rates-dashboard-theme .rs-rm-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } body.rs-rates-dashboard-theme .rs-rm-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; font-size: 13px; font-weight: 900; } body.rs-rates-dashboard-theme .rs-rm-gold .rs-rm-icon { background: #f5e7c5; color: #916522; } body.rs-rates-dashboard-theme .rs-rm-silver .rs-rm-icon { background: #e2e7ea; color: #68747b; } body.rs-rates-dashboard-theme .rs-rm-purple .rs-rm-icon { background: #e7e1f1; color: #765a94; } body.rs-rates-dashboard-theme .rs-rm-blue .rs-rm-icon { background: #e2e8f4; color: #5670a2; } body.rs-rates-dashboard-theme .rs-rm-chip { padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.67); color: #897e6b; font-size: 8px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; } body.rs-rates-dashboard-theme .rs-rm-label { margin-bottom: 4px; color: #89928e; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } body.rs-rates-dashboard-theme .rs-rate-metric strong { color: var(--rs-ink); font-size: 24px; font-weight: 900; letter-spacing: -.04em; } body.rs-rates-dashboard-theme .rs-rate-metric small { margin-top: auto; padding-top: 10px; color: #9ba29f; font-size: 9px; } /* ========================================================== MAIN RATE CARDS ========================================================== */ body.rs-rates-dashboard-theme .rs-rate-card { position: relative; overflow: hidden; margin-bottom: 15px; border: 1px solid var(--rs-line) !important; border-radius: 22px !important; box-shadow: 0 12px 32px rgba(31,38,34,.05) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.rs-rates-dashboard-theme .rs-rate-card:hover { transform: translateY(-2px); box-shadow: 0 17px 36px rgba(31,38,34,.075) !important; } /* Gold card */ body.rs-rates-dashboard-theme .rs-rate-card-gold { border-color: rgba(201,154,72,.25) !important; background: radial-gradient( circle at 100% 0%, rgba(212,165,78,.16), transparent 28% ), linear-gradient( 145deg, #fffaf0, #fffefa ) !important; } /* Silver card */ body.rs-rates-dashboard-theme .rs-rate-card-silver { border-color: rgba(117,129,137,.17) !important; background: radial-gradient( circle at 100% 0%, rgba(152,164,173,.12), transparent 28% ), linear-gradient( 145deg, #f6f8f9, #fffefa ) !important; } /* Green card */ body.rs-rates-dashboard-theme .rs-rate-card-green { border-color: rgba(60,135,93,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(60,135,93,.09), transparent 28% ), linear-gradient( 145deg, #f1faf4, #fffefa ) !important; } /* Blue card */ body.rs-rates-dashboard-theme .rs-rate-card-blue { border-color: rgba(88,119,182,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(88,119,182,.09), transparent 28% ), linear-gradient( 145deg, #f3f6fc, #fffefa ) !important; } /* Purple card */ body.rs-rates-dashboard-theme .rs-rate-card-purple { border-color: rgba(128,87,156,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(128,87,156,.10), transparent 28% ), linear-gradient( 145deg, #f8f3fb, #fffefa ) !important; } /* Teal card */ body.rs-rates-dashboard-theme .rs-rate-card-teal { border-color: rgba(62,112,108,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(62,112,108,.10), transparent 28% ), linear-gradient( 145deg, #eff8f6, #fffefa ) !important; } /* Rose card */ body.rs-rates-dashboard-theme .rs-rate-card-rose { border-color: rgba(153,73,63,.14) !important; background: radial-gradient( circle at 100% 0%, rgba(153,73,63,.08), transparent 28% ), linear-gradient( 145deg, #fdf3f1, #fffefa ) !important; } /* ========================================================== CARD HEADINGS ========================================================== */ body.rs-rates-dashboard-theme .rs-rate-card .card-head { padding-bottom: 12px; } body.rs-rates-dashboard-theme .rs-rate-card .eyebrow { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; background: rgba(245,234,213,.9); color: #946823; font-size: 9px; font-weight: 900; } body.rs-rates-dashboard-theme .rs-rate-card h2, body.rs-rates-dashboard-theme .rs-rate-card h3, body.rs-rates-dashboard-theme .rs-rate-card h4 { color: var(--rs-ink); letter-spacing: -.025em; } /* ========================================================== FORM LAYOUT ========================================================== */ body.rs-rates-dashboard-theme .rs-rates-form { gap: 14px; } /* ========================================================== INPUTS ========================================================== */ body.rs-rates-dashboard-theme input:not([type="checkbox"]):not([type="radio"]), body.rs-rates-dashboard-theme select, body.rs-rates-dashboard-theme textarea { min-height: 43px; border: 1px solid #ddd7ca !important; border-radius: 11px !important; background: rgba(255,255,255,.94) !important; color: var(--rs-ink) !important; transition: border-color .18s ease, box-shadow .18s ease; } body.rs-rates-dashboard-theme input:not([type="checkbox"]):not([type="radio"]):focus, body.rs-rates-dashboard-theme select:focus, body.rs-rates-dashboard-theme textarea:focus { outline: none; border-color: #c99a48 !important; box-shadow: 0 0 0 4px rgba(201,154,72,.10) !important; } body.rs-rates-dashboard-theme label { color: #5e6964; font-size: 10px; font-weight: 800; } /* ========================================================== FIELD COLOUR BLOCKS ========================================================== */ body.rs-rates-dashboard-theme .rs-rate-field { padding: 9px; border-radius: 13px; } /* Rate */ body.rs-rates-dashboard-theme .rs-rate-field-gold { border: 1px solid #ead6ae; background: linear-gradient( 145deg, #fff4dc, #fff ); } /* Purity */ body.rs-rates-dashboard-theme .rs-rate-field-purple { border: 1px solid #dfd3e8; background: linear-gradient( 145deg, #f4eef9, #fff ); } /* GST */ body.rs-rates-dashboard-theme .rs-rate-field-blue { border: 1px solid #d9e1ee; background: linear-gradient( 145deg, #eef3fa, #fff ); } /* HSN */ body.rs-rates-dashboard-theme .rs-rate-field-teal { border: 1px solid #d4e6e1; background: linear-gradient( 145deg, #ecf6f3, #fff ); } /* Unit */ body.rs-rates-dashboard-theme .rs-rate-field-green { border: 1px solid #d5e8db; background: linear-gradient( 145deg, #eef8f2, #fff ); } /* ========================================================== SUBMIT BUTTONS ========================================================== */ body.rs-rates-dashboard-theme button[type="submit"], body.rs-rates-dashboard-theme .btn-primary { min-height: 44px; border: 0 !important; border-radius: 12px !important; background: radial-gradient( circle at 90% 0%, rgba(220,185,111,.16), transparent 34% ), linear-gradient( 110deg, #173027, #3c4937 ) !important; box-shadow: 0 10px 22px rgba(23,48,39,.16); color: #fff !important; font-weight: 900 !important; transition: transform .18s ease, box-shadow .18s ease; } body.rs-rates-dashboard-theme button[type="submit"]:hover, body.rs-rates-dashboard-theme .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(23,48,39,.22); } /* ========================================================== SECONDARY BUTTONS ========================================================== */ body.rs-rates-dashboard-theme .btn-secondary, body.rs-rates-dashboard-theme button:not([type="submit"]) { border: 1px solid #ded4c3 !important; border-radius: 11px !important; background: linear-gradient( 145deg, #fffefa, #f5f1e7 ) !important; color: #4e5b55 !important; font-weight: 800 !important; } /* ========================================================== TABLE PANEL ========================================================== */ body.rs-rates-dashboard-theme .rs-rates-table-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 22px !important; background: radial-gradient( circle at 98% 3%, rgba(201,154,72,.07), transparent 25% ), radial-gradient( circle at 2% 98%, rgba(62,112,108,.05), transparent 27% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } /* ========================================================== TABLE ========================================================== */ body.rs-rates-dashboard-theme .rs-rates-table { width: 100%; border-collapse: separate !important; border-spacing: 0 8px !important; } body.rs-rates-dashboard-theme .rs-rates-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8d8069 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } body.rs-rates-dashboard-theme .rs-rates-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.86); color: var(--rs-ink-soft); } body.rs-rates-dashboard-theme .rs-rates-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-rates-dashboard-theme .rs-rates-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } /* ========================================================== RATE ROW HOVER ========================================================== */ body.rs-rates-dashboard-theme .rs-rate-row { transition: transform .18s ease, filter .18s ease; } body.rs-rates-dashboard-theme .rs-rate-row:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } body.rs-rates-dashboard-theme .rs-rate-row:hover td { background: #fffdf8; border-color: #e5d6b7 !important; } /* ========================================================== ROW ACCENTS ========================================================== */ body.rs-rates-dashboard-theme .rs-rate-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-rates-dashboard-theme .rs-rate-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-rates-dashboard-theme .rs-rate-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-rates-dashboard-theme .rs-rate-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-rates-dashboard-theme .rs-rate-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-rates-dashboard-theme .rs-rate-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== METAL ROW TINTS ========================================================== */ body.rs-rates-dashboard-theme .rs-rate-row-gold-metal td { background: linear-gradient( 100deg, rgba(255,247,226,.80), rgba(255,255,255,.92) ); } body.rs-rates-dashboard-theme .rs-rate-row-silver-metal td { background: linear-gradient( 100deg, rgba(238,243,247,.88), rgba(255,255,255,.92) ); } body.rs-rates-dashboard-theme .rs-rate-row-diamond td { background: linear-gradient( 100deg, rgba(242,235,249,.82), rgba(255,255,255,.92) ); } body.rs-rates-dashboard-theme .rs-rate-row-utensil td { background: linear-gradient( 100deg, rgba(229,244,239,.82), rgba(255,255,255,.92) ); } /* ========================================================== SWITCHES / CHECKBOX ========================================================== */ body.rs-rates-dashboard-theme input[type="checkbox"] { accent-color: #397453; } /* ========================================================== HELP / INFO BOXES ========================================================== */ body.rs-rates-dashboard-theme .soft-callout, body.rs-rates-dashboard-theme .info-box, body.rs-rates-dashboard-theme .hint-box { border: 1px solid #e7dac0 !important; border-radius: 14px !important; background: linear-gradient( 110deg, #fbf3df, #fffdf8 ) !important; color: #705f43 !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1180px) { body.rs-rates-dashboard-theme .rs-rates-metrics { grid-template-columns: repeat( 2, minmax(0,1fr) ); } } @media (max-width: 760px) { body.rs-rates-dashboard-theme .rs-rates-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 23px 19px; border-radius: 20px; } body.rs-rates-dashboard-theme .rs-rates-hero-actions { width: 100%; } body.rs-rates-dashboard-theme .rs-rates-action { flex: 1; } body.rs-rates-dashboard-theme .rs-rates-metrics { grid-template-columns: 1fr; } body.rs-rates-dashboard-theme .rs-rates-table { min-width: 760px; } body.rs-rates-dashboard-theme .rs-rate-card, body.rs-rates-dashboard-theme .rs-rates-table-panel { border-radius: 18px !important; } } /* ========================================================== REPORTS PAGE — DASHBOARD PREMIUM ========================================================== */ body.rs-reports-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-soft: #dceee3; --rs-gold: #c99a48; --rs-gold-soft: #f5e7c5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #e7e1f1; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; --rs-rose: #99493f; --rs-rose-soft: #f5ddd7; } /* ========================================================== PAGE ========================================================== */ body.rs-reports-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 48px; } /* ========================================================== HERO ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 152px; margin-bottom: 16px; padding: 29px 34px; border-radius: 26px; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ); box-shadow: 0 20px 50px rgba(24,35,30,.15); color: #fff; } body.rs-reports-dashboard-theme .rs-reports-hero::before { content: ""; position: absolute; z-index: -1; right: -78px; bottom: -120px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-reports-dashboard-theme .rs-reports-hero::after { content: "▦"; position: absolute; right: 18%; top: -36px; font-size: 180px; font-weight: 900; color: rgba(255,255,255,.018); pointer-events: none; } body.rs-reports-dashboard-theme .rs-reports-kicker { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px; color: #dfbd78; font-size: 10px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase; } body.rs-reports-dashboard-theme .rs-reports-kicker span { width: 7px; height: 7px; border-radius: 50%; background: #dfbd78; box-shadow: 0 0 0 5px rgba(223,189,120,.11); } body.rs-reports-dashboard-theme .rs-reports-hero h2 { max-width: 720px; margin: 0; color: #fff; font-size: clamp( 25px, 3vw, 37px ); line-height: 1.08; letter-spacing: -.04em; } body.rs-reports-dashboard-theme .rs-reports-hero p { max-width: 720px; margin: 11px 0 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.6; } /* ========================================================== HERO ACTIONS ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-hero-actions { position: relative; z-index: 2; display: flex; gap: 9px; flex-shrink: 0; } body.rs-reports-dashboard-theme .rs-reports-action { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 15px; border-radius: 12px; text-decoration: none; font-size: 11px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-reports-dashboard-theme .rs-reports-action:hover { transform: translateY(-2px); } body.rs-reports-dashboard-theme .rs-reports-action-light { background: rgba(255,255,255,.96); color: #1a2923; box-shadow: 0 8px 18px rgba(0,0,0,.08); } body.rs-reports-dashboard-theme .rs-reports-action-gold { background: linear-gradient( 135deg, #d8b064, #bd8934 ); color: #1b211d; box-shadow: 0 9px 20px rgba(178,126,42,.22); } /* ========================================================== EXISTING HEADER ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-existing-head { margin-bottom: 15px; } /* ========================================================== DATE / REPORT FILTERS ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-filter { position: relative; display: flex; align-items: flex-end; flex-wrap: wrap; gap: 11px; margin-bottom: 16px; padding: 15px; border: 1px solid var(--rs-line); border-radius: 18px; background: radial-gradient( circle at 100% 0%, rgba(86,112,162,.08), transparent 28% ), linear-gradient( 145deg, #f9fbff, #fffefa ); box-shadow: 0 10px 26px rgba(31,38,34,.04); } body.rs-reports-dashboard-theme .rs-reports-filter label { color: #5e6964; font-size: 9px; font-weight: 900; } body.rs-reports-dashboard-theme .rs-reports-filter input, body.rs-reports-dashboard-theme .rs-reports-filter select { min-height: 42px; border: 1px solid #ddd7ca; border-radius: 11px; background: #fff; color: var(--rs-ink); } body.rs-reports-dashboard-theme .rs-reports-filter input:focus, body.rs-reports-dashboard-theme .rs-reports-filter select:focus { outline: none; border-color: #c99a48; box-shadow: 0 0 0 4px rgba(201,154,72,.10); } /* ========================================================== FILTER FIELD TINTS ========================================================== */ body.rs-reports-dashboard-theme .rs-report-field { padding: 9px; border-radius: 13px; } body.rs-reports-dashboard-theme .rs-report-field-gold { border: 1px solid #ead6ae; background: linear-gradient( 145deg, #fff4dc, #fff ); } body.rs-reports-dashboard-theme .rs-report-field-blue { border: 1px solid #d9e1ee; background: linear-gradient( 145deg, #eef3fa, #fff ); } body.rs-reports-dashboard-theme .rs-report-field-purple { border: 1px solid #dfd3e8; background: linear-gradient( 145deg, #f4eef9, #fff ); } body.rs-reports-dashboard-theme .rs-report-field-teal { border: 1px solid #d4e6e1; background: linear-gradient( 145deg, #ecf6f3, #fff ); } /* ========================================================== REPORT CARDS BASE ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 22px !important; box-shadow: 0 12px 32px rgba(31,38,34,.05) !important; transition: transform .18s ease, box-shadow .18s ease; } body.rs-reports-dashboard-theme .rs-report-card:hover { transform: translateY(-2px); box-shadow: 0 17px 38px rgba(31,38,34,.075) !important; } /* ========================================================== GOLD — SALES ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card-gold { border-color: rgba(201,154,72,.22) !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.13), transparent 28% ), linear-gradient( 145deg, #fff9e9, #fffefa ) !important; } /* ========================================================== GREEN — COLLECTIONS ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card-green { border-color: rgba(60,135,93,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(60,135,93,.10), transparent 28% ), linear-gradient( 145deg, #eff9f3, #fffefa ) !important; } /* ========================================================== BLUE — PURCHASES ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card-blue { border-color: rgba(88,119,182,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(88,119,182,.09), transparent 28% ), linear-gradient( 145deg, #eef4fb, #fffefa ) !important; } /* ========================================================== PURPLE — CATEGORY / METAL ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card-purple { border-color: rgba(128,87,156,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(128,87,156,.10), transparent 28% ), linear-gradient( 145deg, #f3f1fa, #fffefa ) !important; } /* ========================================================== TEAL — CUSTOMER ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card-teal { border-color: rgba(62,112,108,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(62,112,108,.10), transparent 28% ), linear-gradient( 145deg, #edf8f5, #fffefa ) !important; } /* ========================================================== ROSE — OUTSTANDING ========================================================== */ body.rs-reports-dashboard-theme .rs-report-card-rose { border-color: rgba(153,73,63,.15) !important; background: radial-gradient( circle at 100% 0%, rgba(153,73,63,.09), transparent 28% ), linear-gradient( 145deg, #fff2ee, #fffefa ) !important; } /* ========================================================== SECTION HEADERS ========================================================== */ body.rs-reports-dashboard-theme .rs-report-section-head { padding-bottom: 12px; border-bottom: 1px solid rgba(230,224,212,.75); } body.rs-reports-dashboard-theme .rs-report-section-head .eyebrow { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: #f6ead5; color: #946823; font-size: 9px; font-weight: 900; } body.rs-reports-dashboard-theme .rs-report-section-head h2, body.rs-reports-dashboard-theme .rs-report-section-head h3 { color: var(--rs-ink); letter-spacing: -.025em; } /* ========================================================== KPI / METRIC CARDS ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-metric { border: 1px solid var(--rs-line) !important; border-radius: 20px !important; box-shadow: 0 12px 30px rgba(30,37,33,.045) !important; } body.rs-reports-dashboard-theme .rs-reports-metric-gold { background: linear-gradient( 145deg, #fff9e9, #fffefa ) !important; } body.rs-reports-dashboard-theme .rs-reports-metric-green { background: linear-gradient( 145deg, #eff9f3, #fffefa ) !important; } body.rs-reports-dashboard-theme .rs-reports-metric-blue { background: linear-gradient( 145deg, #eef4fb, #fffefa ) !important; } body.rs-reports-dashboard-theme .rs-reports-metric-purple { background: linear-gradient( 145deg, #f3f1fa, #fffefa ) !important; } body.rs-reports-dashboard-theme .rs-reports-metric-teal { background: linear-gradient( 145deg, #edf8f5, #fffefa ) !important; } body.rs-reports-dashboard-theme .rs-reports-metric-rose { background: linear-gradient( 145deg, #fff2ee, #fffefa ) !important; } /* ========================================================== TABLE PANELS ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-table-panel { position: relative; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 22px !important; background: radial-gradient( circle at 98% 2%, rgba(201,154,72,.07), transparent 25% ), radial-gradient( circle at 2% 98%, rgba(62,112,108,.05), transparent 26% ), #fffefa !important; box-shadow: 0 14px 38px rgba(31,38,34,.055) !important; } /* ========================================================== TABLE ========================================================== */ body.rs-reports-dashboard-theme .rs-reports-table { width: 100%; border-collapse: separate !important; border-spacing: 0 8px !important; } body.rs-reports-dashboard-theme .rs-reports-table thead th { padding: 10px 13px !important; border: 0 !important; background: transparent !important; color: #8d8069 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .10em; text-transform: uppercase; } body.rs-reports-dashboard-theme .rs-reports-table tbody td { padding: 13px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.86); color: var(--rs-ink-soft); } body.rs-reports-dashboard-theme .rs-reports-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 14px 0 0 14px; } body.rs-reports-dashboard-theme .rs-reports-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 14px 14px 0; } /* ========================================================== ROW HOVER ========================================================== */ body.rs-reports-dashboard-theme .rs-report-row { transition: transform .18s ease, filter .18s ease; } body.rs-reports-dashboard-theme .rs-report-row:hover { transform: translateY(-2px); filter: drop-shadow( 0 8px 15px rgba(45,45,39,.05) ); } body.rs-reports-dashboard-theme .rs-report-row:hover td { background: #fffdf8; border-color: #e5d6b7 !important; } /* ========================================================== ROW COLOUR STRIPS ========================================================== */ body.rs-reports-dashboard-theme .rs-report-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-reports-dashboard-theme .rs-report-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-reports-dashboard-theme .rs-report-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-reports-dashboard-theme .rs-report-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-reports-dashboard-theme .rs-report-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-reports-dashboard-theme .rs-report-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== REPORT BUTTONS ========================================================== */ body.rs-reports-dashboard-theme button[type="submit"], body.rs-reports-dashboard-theme .btn-primary { min-height: 43px; border: 0 !important; border-radius: 12px !important; background: radial-gradient( circle at 90% 0%, rgba(220,185,111,.16), transparent 34% ), linear-gradient( 110deg, #173027, #3c4937 ) !important; box-shadow: 0 10px 22px rgba(23,48,39,.16); color: #fff !important; font-weight: 900 !important; } /* ========================================================== EXPORT / PRINT BUTTON ========================================================== */ body.rs-reports-dashboard-theme .rs-report-export { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 11px; border: 1px solid rgba(201,154,72,.25) !important; border-radius: 10px !important; background: linear-gradient( 145deg, #fff7e7, #fff ) !important; color: #8f6522 !important; font-size: 9px; font-weight: 900; transition: transform .18s ease, box-shadow .18s ease; } body.rs-reports-dashboard-theme .rs-report-export:hover { transform: translateY(-1px); box-shadow: 0 7px 15px rgba(65,52,31,.08); } /* ========================================================== SECONDARY BUTTON ========================================================== */ body.rs-reports-dashboard-theme .btn-secondary { border: 1px solid #ded4c3 !important; border-radius: 11px !important; background: linear-gradient( 145deg, #fffefa, #f5f1e7 ) !important; color: #4e5b55 !important; font-weight: 800 !important; } /* ========================================================== EMPTY STATE ========================================================== */ body.rs-reports-dashboard-theme .empty-state { margin: 15px; padding: 45px 20px; border: 1px dashed #dfd5c1; border-radius: 17px; background: linear-gradient( 145deg, #fff9ec, #fffefa ); text-align: center; color: var(--rs-muted); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { body.rs-reports-dashboard-theme .rs-reports-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 23px 19px; border-radius: 20px; } body.rs-reports-dashboard-theme .rs-reports-hero-actions { width: 100%; } body.rs-reports-dashboard-theme .rs-reports-action { flex: 1; } body.rs-reports-dashboard-theme .rs-reports-filter { align-items: stretch; flex-direction: column; } } @media (max-width: 680px) { body.rs-reports-dashboard-theme .rs-reports-table { min-width: 820px; } body.rs-reports-dashboard-theme .rs-report-card, body.rs-reports-dashboard-theme .rs-reports-table-panel { border-radius: 18px !important; } } /* ========================================================== SETTINGS PAGE — DASHBOARD PREMIUM ========================================================== */ body.rs-settings-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-soft: #dceee3; --rs-gold: #c99a48; --rs-gold-soft: #f5e7c5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #e7e1f1; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; --rs-rose: #99493f; --rs-rose-soft: #f5ddd7; } /* ========================================================== CONTENT ========================================================== */ body.rs-settings-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 50px; } /* ========================================================== HERO — DASHBOARD STYLE ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 28px; min-height: 152px; margin-bottom: 17px; padding: 29px 34px; border: 0 !important; border-radius: 26px !important; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ) !important; box-shadow: 0 20px 50px rgba(24,35,30,.15) !important; color: #fff; } body.rs-settings-dashboard-theme .rs-settings-hero::before { content: ""; position: absolute; z-index: -1; right: -78px; bottom: -120px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.025); border-radius: 50%; } body.rs-settings-dashboard-theme .rs-settings-hero::after { content: "⚙"; position: absolute; right: 17%; top: -48px; font-size: 190px; font-weight: 900; color: rgba(255,255,255,.018); pointer-events: none; } body.rs-settings-dashboard-theme .rs-settings-hero .eyebrow { color: #dfbd78 !important; } body.rs-settings-dashboard-theme .rs-settings-hero h2 { max-width: 690px; margin: 0; color: #fff !important; font-size: clamp( 25px, 3vw, 37px ); line-height: 1.08; letter-spacing: -.04em; } body.rs-settings-dashboard-theme .rs-settings-hero p { max-width: 700px; color: rgba(255,255,255,.65) !important; line-height: 1.6; } body.rs-settings-dashboard-theme .rs-settings-hero .feature-chip { border: 1px solid rgba(255,255,255,.12) !important; border-radius: 999px !important; background: rgba(255,255,255,.09) !important; backdrop-filter: blur(8px); color: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.08); } /* ========================================================== SETTINGS GRID ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-grid-premium { gap: 16px; } /* ========================================================== CARD BASE ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card { position: relative; isolation: isolate; overflow: hidden; border: 1px solid var(--rs-line) !important; border-radius: 22px !important; box-shadow: 0 12px 32px rgba(31,38,34,.05) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } body.rs-settings-dashboard-theme .rs-settings-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(31,38,34,.075) !important; } /* ========================================================== GOLD — BRAND ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card-gold { border-color: rgba(201,154,72,.23) !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.14), transparent 28% ), linear-gradient( 145deg, #fff9e9, #fffefa ) !important; } /* ========================================================== GREEN — WHATSAPP ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card-green { border-color: rgba(60,135,93,.17) !important; background: radial-gradient( circle at 100% 0%, rgba(60,135,93,.10), transparent 28% ), linear-gradient( 145deg, #eff9f3, #fffefa ) !important; } /* ========================================================== BLUE — BUSINESS / TAX IDENTITY ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card-blue { border-color: rgba(88,119,182,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(88,119,182,.10), transparent 28% ), linear-gradient( 145deg, #eef4fb, #fffefa ) !important; } /* ========================================================== PURPLE — TAX / MAKING ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card-purple { border-color: rgba(128,87,156,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(128,87,156,.10), transparent 28% ), linear-gradient( 145deg, #f3f1fa, #fffefa ) !important; } /* ========================================================== TEAL — SOCIAL ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card-teal { border-color: rgba(62,112,108,.16) !important; background: radial-gradient( circle at 100% 0%, rgba(62,112,108,.10), transparent 28% ), linear-gradient( 145deg, #edf8f5, #fffefa ) !important; } /* ========================================================== ROSE — INVOICE DETAILS ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card-rose { border-color: rgba(153,73,63,.15) !important; background: radial-gradient( circle at 100% 0%, rgba(153,73,63,.08), transparent 28% ), linear-gradient( 145deg, #fff2ee, #fffefa ) !important; } /* ========================================================== CARD HEAD ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-card .card-head { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; padding-bottom: 13px; border-bottom: 1px solid rgba(227,220,207,.72); } body.rs-settings-dashboard-theme .rs-settings-card .card-head .eyebrow { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: rgba(246,234,213,.90); color: #946823; font-size: 9px; font-weight: 900; letter-spacing: .10em; } body.rs-settings-dashboard-theme .rs-settings-card h3 { margin-top: 7px; color: var(--rs-ink); font-size: 18px; letter-spacing: -.025em; } body.rs-settings-dashboard-theme .rs-settings-card .card-head p:not(.eyebrow) { margin-top: 5px; color: #909995; font-size: 10px; line-height: 1.5; } /* ========================================================== HEADER ICON ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-head-icon { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.72); border: 1px solid rgba(215,206,190,.7); color: #8c6a30; font-size: 15px; font-weight: 900; box-shadow: 0 6px 16px rgba(51,46,36,.05); } /* ========================================================== LABELS ========================================================== */ body.rs-settings-dashboard-theme .settings-card label { color: #5f6965; font-size: 10px; font-weight: 800; } /* ========================================================== INPUTS ========================================================== */ body.rs-settings-dashboard-theme .settings-card input:not([type="checkbox"]):not([type="radio"]), body.rs-settings-dashboard-theme .settings-card select, body.rs-settings-dashboard-theme .settings-card textarea { min-height: 43px; border: 1px solid #ddd7ca !important; border-radius: 11px !important; background: rgba(255,255,255,.94) !important; color: var(--rs-ink) !important; transition: border-color .18s ease, box-shadow .18s ease; } body.rs-settings-dashboard-theme .settings-card textarea { min-height: 105px; } body.rs-settings-dashboard-theme .settings-card input:not([type="checkbox"]):not([type="radio"]):focus, body.rs-settings-dashboard-theme .settings-card select:focus, body.rs-settings-dashboard-theme .settings-card textarea:focus { outline: none; border-color: #c99a48 !important; box-shadow: 0 0 0 4px rgba(201,154,72,.10) !important; } /* ========================================================== COLOURED FIELD WRAPPERS ========================================================== */ body.rs-settings-dashboard-theme .rs-setting-field { padding: 9px; border-radius: 13px; } body.rs-settings-dashboard-theme .rs-setting-field-gold { border: 1px solid #ead6ae; background: linear-gradient( 145deg, #fff4dc, #fff ); } body.rs-settings-dashboard-theme .rs-setting-field-green { border: 1px solid #d5e8db; background: linear-gradient( 145deg, #eef8f2, #fff ); } body.rs-settings-dashboard-theme .rs-setting-field-blue { border: 1px solid #d9e1ee; background: linear-gradient( 145deg, #eef3fa, #fff ); } body.rs-settings-dashboard-theme .rs-setting-field-purple { border: 1px solid #dfd3e8; background: linear-gradient( 145deg, #f4eef9, #fff ); } body.rs-settings-dashboard-theme .rs-setting-field-teal { border: 1px solid #d4e6e1; background: linear-gradient( 145deg, #ecf6f3, #fff ); } body.rs-settings-dashboard-theme .rs-setting-field-rose { border: 1px solid #ecd8d4; background: linear-gradient( 145deg, #fdf1ee, #fff ); } /* ========================================================== SMALL HELP TEXT ========================================================== */ body.rs-settings-dashboard-theme .settings-card small { display: block; margin-top: 5px; color: #979f9b; font-size: 9px; line-height: 1.5; } /* ========================================================== LOGO UPLOADER ========================================================== */ body.rs-settings-dashboard-theme .logo-uploader { padding: 16px; border: 1px solid rgba(201,154,72,.20); border-radius: 17px; background: linear-gradient( 145deg, #fff8e8, rgba(255,255,255,.88) ); } body.rs-settings-dashboard-theme .logo-preview { border: 1px solid #eadab9 !important; border-radius: 16px !important; background: #fffdf8 !important; box-shadow: 0 9px 22px rgba(74,59,35,.06); } /* ========================================================== FILE INPUT ========================================================== */ body.rs-settings-dashboard-theme .file-label { border-radius: 14px; color: #7b622f; } /* ========================================================== CHECKBOX ROW ========================================================== */ body.rs-settings-dashboard-theme .check-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; padding: 9px 11px; border: 1px solid #eadfd0; border-radius: 11px; background: rgba(255,255,255,.70); } body.rs-settings-dashboard-theme input[type="checkbox"] { accent-color: #397453; } /* ========================================================== SAVE BUTTON ========================================================== */ body.rs-settings-dashboard-theme .rs-settings-save, body.rs-settings-dashboard-theme .settings-grid button[type="submit"] { min-height: 50px; border: 0 !important; border-radius: 14px !important; background: radial-gradient( circle at 90% 0%, rgba(220,185,111,.18), transparent 34% ), linear-gradient( 110deg, #173027, #3c4937 ) !important; box-shadow: 0 13px 27px rgba(23,48,39,.19); color: #fff !important; font-size: 11px; font-weight: 900 !important; transition: transform .18s ease, box-shadow .18s ease; } body.rs-settings-dashboard-theme .rs-settings-save:hover, body.rs-settings-dashboard-theme .settings-grid button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 17px 32px rgba(23,48,39,.24); } /* ========================================================== SECONDARY BUTTONS ========================================================== */ body.rs-settings-dashboard-theme .btn-secondary, body.rs-settings-dashboard-theme button:not([type="submit"]) { border: 1px solid #ded4c3 !important; border-radius: 11px !important; background: linear-gradient( 145deg, #fffefa, #f5f1e7 ) !important; color: #4e5b55 !important; font-weight: 800 !important; } /* ========================================================== WIDE CARDS ========================================================== */ body.rs-settings-dashboard-theme .settings-card.span-wide { grid-column: 1 / -1; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { body.rs-settings-dashboard-theme .rs-settings-hero { align-items: flex-start; flex-direction: column; min-height: auto; padding: 23px 19px; border-radius: 20px !important; } } @media (max-width: 760px) { body.rs-settings-dashboard-theme .settings-grid { grid-template-columns: 1fr !important; } body.rs-settings-dashboard-theme .settings-card { border-radius: 18px !important; } body.rs-settings-dashboard-theme .brand-settings-grid { grid-template-columns: 1fr !important; } } /* ========================================================== INVOICE VIEW — DASHBOARD PREMIUM ========================================================== */ body.rs-invoice-dashboard-theme { --rs-ink: #17211f; --rs-ink-soft: #56615d; --rs-muted: #8d9692; --rs-line: #e8e4da; --rs-panel: #fffefa; --rs-green: #173027; --rs-green-soft: #dceee3; --rs-gold: #c99a48; --rs-gold-soft: #f5e7c5; --rs-blue: #5670a2; --rs-blue-soft: #e2e8f4; --rs-purple: #80579c; --rs-purple-soft: #e7e1f1; --rs-teal: #3e706c; --rs-teal-soft: #dcecea; --rs-rose: #99493f; --rs-rose-soft: #f5ddd7; } /* ========================================================== CONTENT ========================================================== */ body.rs-invoice-dashboard-theme .content { max-width: 1500px; margin: 0 auto; padding-bottom: 50px; } /* ========================================================== TOOLBAR ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 15px; padding: 11px 13px; border: 1px solid var(--rs-line); border-radius: 16px; background: linear-gradient( 145deg, #fffefa, #f8f5ed ); box-shadow: 0 8px 22px rgba(31,38,34,.04); } body.rs-invoice-dashboard-theme .rs-invoice-toolbar .back-link { display: inline-flex; align-items: center; min-height: 37px; padding: 0 11px; border-radius: 10px; background: #f2eee4; color: #56615d; text-decoration: none; font-size: 10px; font-weight: 900; } /* ========================================================== TOOLBAR BUTTONS ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-toolbar .btn-secondary { border: 1px solid #d8d1c4 !important; border-radius: 11px !important; background: #fff !important; color: #48544f !important; font-weight: 900 !important; } body.rs-invoice-dashboard-theme .rs-invoice-toolbar .btn-whatsapp { border: 1px solid rgba(60,135,93,.18) !important; border-radius: 11px !important; background: linear-gradient( 145deg, #e7f5ec, #f8fcf9 ) !important; color: #397453 !important; font-weight: 900 !important; } /* ========================================================== MAIN INVOICE CARD ========================================================== */ body.rs-invoice-dashboard-theme .invoice-card { position: relative; overflow: hidden; border: 1px solid rgba(201,154,72,.20) !important; border-radius: 26px !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.09), transparent 22% ), #fffefa !important; box-shadow: 0 18px 48px rgba(40,43,37,.07) !important; } /* ========================================================== INVOICE HERO ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-hero { position: relative; isolation: isolate; overflow: hidden; min-height: 148px; padding: 27px 30px !important; border: 0 !important; border-radius: 24px !important; background: radial-gradient( circle at 88% 10%, rgba(220,185,111,.20), transparent 29% ), linear-gradient( 115deg, #15251f 0%, #20372c 52%, #3c4937 100% ) !important; color: #fff; } body.rs-invoice-dashboard-theme .rs-invoice-hero::before { content: ""; position: absolute; z-index: -1; right: -70px; bottom: -125px; width: 280px; height: 280px; border: 30px solid rgba(255,255,255,.026); border-radius: 50%; } body.rs-invoice-dashboard-theme .rs-invoice-hero::after { content: "₹"; position: absolute; right: 18%; top: -48px; font-size: 190px; font-weight: 900; color: rgba(255,255,255,.018); pointer-events: none; } body.rs-invoice-dashboard-theme .rs-invoice-hero .eyebrow { color: #dfbd78 !important; } body.rs-invoice-dashboard-theme .rs-invoice-hero h2 { margin: 5px 0; color: #fff !important; font-size: clamp( 25px, 3vw, 36px ); letter-spacing: -.04em; } body.rs-invoice-dashboard-theme .rs-invoice-hero > div:first-child > span { color: rgba(255,255,255,.62) !important; } /* ========================================================== STATUS / CUSTOMER DUE ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-status-premium { min-width: 185px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.10); border-radius: 17px; background: rgba(255,255,255,.08); backdrop-filter: blur(9px); box-shadow: 0 12px 24px rgba(0,0,0,.07); } body.rs-invoice-dashboard-theme .rs-invoice-status-premium small { color: rgba(255,255,255,.55) !important; } body.rs-invoice-dashboard-theme .rs-invoice-status-premium strong { color: #fff !important; font-size: 18px !important; font-weight: 900 !important; } body.rs-invoice-dashboard-theme .rs-invoice-status-premium .status { border-radius: 999px !important; font-weight: 900 !important; } /* Paid */ body.rs-invoice-dashboard-theme .status-paid { background: #dceee3 !important; color: #397453 !important; } /* Partial */ body.rs-invoice-dashboard-theme .status-partial, body.rs-invoice-dashboard-theme .status-partially_paid { background: #f5e7c5 !important; color: #916522 !important; } /* Due */ body.rs-invoice-dashboard-theme .status-due, body.rs-invoice-dashboard-theme .status-unpaid { background: #f5ddd7 !important; color: #99493f !important; } /* ========================================================== CUSTOMER INFORMATION GRID ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-customer-grid { display: grid !important; grid-template-columns: repeat( 4, minmax(0,1fr) ) !important; gap: 10px !important; margin: 16px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.rs-invoice-dashboard-theme .rs-invoice-customer-card { position: relative; min-height: 78px; padding: 14px; border: 1px solid var(--rs-line); border-radius: 16px; box-shadow: 0 7px 18px rgba(40,45,41,.035); } body.rs-invoice-dashboard-theme .rs-invoice-customer-card span { display: block; margin-bottom: 6px; color: #8f9793 !important; font-size: 8px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; } body.rs-invoice-dashboard-theme .rs-invoice-customer-card strong { color: var(--rs-ink) !important; font-size: 12px; font-weight: 900; } /* Gold */ body.rs-invoice-dashboard-theme .rs-invoice-customer-gold { background: linear-gradient( 145deg, #fff8e8, #fffefa ); border-color: #ead8b3; } /* Blue */ body.rs-invoice-dashboard-theme .rs-invoice-customer-blue { background: linear-gradient( 145deg, #eef4fb, #fffefa ); border-color: #d9e1ee; } /* Purple */ body.rs-invoice-dashboard-theme .rs-invoice-customer-purple { background: linear-gradient( 145deg, #f3eef8, #fffefa ); border-color: #dfd3e8; } /* Teal */ body.rs-invoice-dashboard-theme .rs-invoice-customer-teal { background: linear-gradient( 145deg, #edf8f5, #fffefa ); border-color: #d4e6e1; } /* ========================================================== TABLE WRAPPER ========================================================== */ body.rs-invoice-dashboard-theme .invoice-card .table-wrap { margin: 0 16px 16px; overflow-x: auto; border: 1px solid var(--rs-line); border-radius: 18px; background: rgba(255,255,255,.75); box-shadow: 0 10px 26px rgba(34,39,35,.035); } /* ========================================================== TABLE ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-table { width: 100%; border-collapse: separate !important; border-spacing: 0 7px !important; } body.rs-invoice-dashboard-theme .rs-invoice-table thead th { padding: 11px 12px !important; border: 0 !important; background: transparent !important; color: #8b806e !important; font-size: 8px !important; font-weight: 900 !important; letter-spacing: .08em; text-transform: uppercase; } body.rs-invoice-dashboard-theme .rs-invoice-table tbody td { padding: 12px !important; border-top: 1px solid #eee9df !important; border-bottom: 1px solid #eee9df !important; background: rgba(255,255,255,.88); color: var(--rs-ink-soft); } body.rs-invoice-dashboard-theme .rs-invoice-table tbody td:first-child { border-left: 1px solid #eee9df !important; border-radius: 13px 0 0 13px; } body.rs-invoice-dashboard-theme .rs-invoice-table tbody td:last-child { border-right: 1px solid #eee9df !important; border-radius: 0 13px 13px 0; } body.rs-invoice-dashboard-theme .rs-invoice-table tbody td strong { color: var(--rs-ink); font-weight: 900; } body.rs-invoice-dashboard-theme .rs-invoice-table tbody td small { display: block; margin-top: 3px; color: #969e9a; font-size: 8px; } /* ========================================================== TABLE ROW ACCENTS ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-row { transition: transform .18s ease, filter .18s ease; } body.rs-invoice-dashboard-theme .rs-invoice-row:hover { transform: translateY(-1px); filter: drop-shadow( 0 7px 13px rgba(40,42,37,.045) ); } body.rs-invoice-dashboard-theme .rs-invoice-row-gold td:first-child { box-shadow: inset 4px 0 0 #c99a48; } body.rs-invoice-dashboard-theme .rs-invoice-row-green td:first-child { box-shadow: inset 4px 0 0 #4d8a64; } body.rs-invoice-dashboard-theme .rs-invoice-row-blue td:first-child { box-shadow: inset 4px 0 0 #5670a2; } body.rs-invoice-dashboard-theme .rs-invoice-row-purple td:first-child { box-shadow: inset 4px 0 0 #80579c; } body.rs-invoice-dashboard-theme .rs-invoice-row-teal td:first-child { box-shadow: inset 4px 0 0 #3e706c; } body.rs-invoice-dashboard-theme .rs-invoice-row-rose td:first-child { box-shadow: inset 4px 0 0 #99493f; } /* ========================================================== GOLD / SILVER ITEM BACKGROUNDS ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-metal-gold td { background: linear-gradient( 100deg, rgba(255,247,226,.80), rgba(255,255,255,.92) ); } body.rs-invoice-dashboard-theme .rs-invoice-metal-silver td { background: linear-gradient( 100deg, rgba(239,243,247,.86), rgba(255,255,255,.92) ); } /* ========================================================== EXCHANGE DIVIDER ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-exchange-divider { margin: 18px 16px !important; border-top: 1px solid rgba(128,87,156,.18) !important; } /* ========================================================== EXCHANGE HEADER ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-exchange-head { margin: 0 16px 12px; padding: 15px; border: 1px solid rgba(128,87,156,.15); border-radius: 16px; background: radial-gradient( circle at 100% 0%, rgba(128,87,156,.10), transparent 30% ), linear-gradient( 145deg, #f5eff9, #fffefa ); } body.rs-invoice-dashboard-theme .rs-invoice-exchange-head .eyebrow { display: inline-flex; padding: 5px 9px; border-radius: 999px; background: #e7e1f1; color: #765a94 !important; font-size: 8px; font-weight: 900; } body.rs-invoice-dashboard-theme .rs-invoice-exchange-head h3 { margin: 7px 0 0; color: var(--rs-ink); font-size: 16px; } /* ========================================================== EXCHANGE TABLE ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-exchange-table tbody td { background: linear-gradient( 100deg, rgba(243,238,248,.80), rgba(255,255,255,.92) ); } /* ========================================================== INVOICE SUMMARY JEWELLERY BUSINESS PULSE STYLE ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { position: relative; display: grid !important; grid-template-columns: repeat( 2, minmax(0,1fr) ); gap: 9px; margin: 18px 16px !important; padding: 16px !important; border: 1px solid rgba(201,154,72,.23); border-radius: 21px; background: radial-gradient( circle at 96% 4%, rgba(216,176,100,.16), transparent 30% ), linear-gradient( 145deg, #fffdf8, #fff9ee ); box-shadow: 0 13px 30px rgba(68,55,32,.055); } /* ========================================================== SUMMARY ROW BASE ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-row { position: relative; display: grid !important; grid-template-columns: 34px minmax(0,1fr) auto !important; align-items: center; gap: 10px; min-height: 56px; padding: 10px 12px !important; border: 1px solid transparent !important; border-radius: 14px !important; background: rgba(255,255,255,.78); box-shadow: 0 5px 16px rgba(38,44,40,.028); } body.rs-invoice-dashboard-theme .rs-invoice-summary-row::before { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 10px; font-size: 12px; font-weight: 900; } body.rs-invoice-dashboard-theme .rs-invoice-summary-row span { color: #666f6b; font-size: 10px; font-weight: 700; } body.rs-invoice-dashboard-theme .rs-invoice-summary-row strong { color: var(--rs-ink); font-size: 12px; font-weight: 900; } /* ========================================================== SALE VALUE — GOLD ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-gold { border-color: rgba(207,157,73,.20) !important; background: linear-gradient( 100deg, #fff2d5, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-gold::before { content: "₹"; background: #f1dfbc; color: #9b6c24; } /* ========================================================== DISCOUNT — PURPLE ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-purple { border-color: rgba(128,87,156,.15) !important; background: linear-gradient( 100deg, #f3ebf9, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-purple::before { content: "−"; background: #e7e1f1; color: #765a94; } /* ========================================================== EXCHANGE — GREEN ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-green { border-color: rgba(60,135,93,.16) !important; background: linear-gradient( 100deg, #e9f6ee, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-green::before { content: "↺"; background: #dceee3; color: #397453; } /* ========================================================== ROUND OFF — BLUE ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-blue { border-color: rgba(88,119,182,.15) !important; background: linear-gradient( 100deg, #edf2fa, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-blue::before { content: "≈"; background: #e2e8f4; color: #5670a2; } /* ========================================================== INVOICE TOTAL — TEAL ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-teal { border-color: rgba(62,112,108,.16) !important; background: linear-gradient( 100deg, #e9f4f2, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-teal::before { content: "◆"; background: #dcecea; color: #3e706c; } body.rs-invoice-dashboard-theme .rs-summary-teal strong { font-size: 14px; } /* ========================================================== PAID — GREEN ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-paid { border-color: rgba(60,135,93,.16) !important; background: linear-gradient( 100deg, #e7f5ec, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-paid::before { content: "✓"; background: #dceee3; color: #397453; } body.rs-invoice-dashboard-theme .rs-summary-paid strong { color: #397453; } /* ========================================================== DUE — ROSE ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-due { border-color: rgba(153,73,63,.17) !important; background: linear-gradient( 100deg, #fae9e5, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-due::before { content: "!"; background: #f5ddd7; color: #99493f; } body.rs-invoice-dashboard-theme .rs-summary-due strong { color: #99493f !important; } /* ========================================================== NOTE ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-note { margin: 0 16px 18px !important; padding: 14px 15px !important; border: 1px solid rgba(86,112,162,.15) !important; border-radius: 15px !important; background: radial-gradient( circle at 100% 0%, rgba(86,112,162,.08), transparent 30% ), linear-gradient( 145deg, #f3f6fb, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-invoice-note strong { color: #5670a2 !important; } body.rs-invoice-dashboard-theme .rs-invoice-note p { color: #68736e !important; } /* ========================================================== SUCCESS CALLOUT ========================================================== */ body.rs-invoice-dashboard-theme .soft-callout { border: 1px solid rgba(60,135,93,.17) !important; border-radius: 16px !important; background: linear-gradient( 110deg, #eaf7ef, #fff ) !important; color: #456957 !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1000px) { body.rs-invoice-dashboard-theme .rs-invoice-customer-grid { grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { grid-template-columns: 1fr; } } @media (max-width: 700px) { body.rs-invoice-dashboard-theme .rs-invoice-toolbar { align-items: stretch; flex-direction: column; } body.rs-invoice-dashboard-theme .rs-invoice-toolbar .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } body.rs-invoice-dashboard-theme .rs-invoice-hero { align-items: flex-start !important; flex-direction: column !important; padding: 22px 18px !important; border-radius: 19px !important; } body.rs-invoice-dashboard-theme .rs-invoice-status-premium { width: 100%; min-width: 0; } body.rs-invoice-dashboard-theme .rs-invoice-customer-grid { grid-template-columns: 1fr !important; margin: 12px !important; } body.rs-invoice-dashboard-theme .invoice-card .table-wrap { margin-left: 12px; margin-right: 12px; } body.rs-invoice-dashboard-theme .rs-invoice-table { min-width: 850px; } body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { margin: 15px 12px !important; padding: 12px !important; } } /* ========================================================== RATAN SETU INVOICE SUMMARY — FINAL NON-OVERLAP PREMIUM LAYOUT ========================================================== */ /* ========================================================== FULL WIDTH SUMMARY CONTAINER ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { position: relative !important; display: grid !important; grid-template-columns: repeat( auto-fit, minmax(175px, 1fr) ) !important; gap: 11px !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 18px 16px 20px !important; padding: 15px !important; border: 1px solid rgba(201,154,72,.22) !important; border-radius: 21px !important; background: radial-gradient( circle at 96% 5%, rgba(216,176,100,.15), transparent 28% ), radial-gradient( circle at 3% 100%, rgba(62,112,108,.06), transparent 27% ), linear-gradient( 145deg, #fffdf8, #fff9ef ) !important; box-sizing: border-box !important; box-shadow: 0 14px 32px rgba(68,55,32,.055) !important; } /* decorative background circle */ body.rs-invoice-dashboard-theme .rs-invoice-summary-premium::after { content: ""; position: absolute; right: -55px; top: -65px; width: 155px; height: 155px; border: 24px solid rgba(201,154,72,.035); border-radius: 50%; pointer-events: none; } /* ========================================================== FINANCIAL CARD BASE IMPORTANT: 2 columns only: icon | text amount lives BELOW label. This removes all overlap. ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-row { position: relative !important; z-index: 1; display: grid !important; grid-template-columns: 40px minmax(0,1fr) !important; grid-template-rows: auto auto !important; column-gap: 11px !important; row-gap: 3px !important; align-items: center !important; min-width: 0 !important; min-height: 86px !important; margin: 0 !important; padding: 13px 14px !important; border: 1px solid transparent !important; border-radius: 16px !important; box-sizing: border-box !important; overflow: hidden !important; box-shadow: 0 6px 18px rgba(38,44,40,.035) !important; transition: transform .18s ease, box-shadow .18s ease !important; } body.rs-invoice-dashboard-theme .rs-invoice-summary-row:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(47,45,38,.065) !important; } /* ========================================================== ICON ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-row::before { grid-column: 1 !important; grid-row: 1 / 3 !important; align-self: center; display: grid !important; place-items: center !important; width: 38px !important; height: 38px !important; margin: 0 !important; border-radius: 11px !important; font-size: 13px !important; font-weight: 900 !important; box-sizing: border-box; } /* ========================================================== LABEL ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-row > span { grid-column: 2 !important; grid-row: 1 !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; color: #68726e !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .01em; white-space: normal !important; overflow-wrap: anywhere; } /* ========================================================== AMOUNT separate line = no overlap ========================================================== */ body.rs-invoice-dashboard-theme .rs-invoice-summary-row > strong { grid-column: 2 !important; grid-row: 2 !important; display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; text-align: left !important; color: #17211f !important; font-size: 15px !important; font-weight: 900 !important; line-height: 1.15 !important; letter-spacing: -.025em !important; white-space: nowrap !important; overflow: visible !important; } /* ========================================================== SALE VALUE — GOLD ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-gold { border-color: rgba(207,157,73,.22) !important; background: radial-gradient( circle at 100% 0%, rgba(207,157,73,.10), transparent 35% ), linear-gradient( 110deg, #fff1d2, #fffdf8 ) !important; } body.rs-invoice-dashboard-theme .rs-summary-gold::before { content: "₹" !important; background: #f1dfbc !important; color: #966821 !important; } body.rs-invoice-dashboard-theme .rs-summary-gold > strong { color: #8f641e !important; } /* ========================================================== DISCOUNT — PURPLE ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-purple { border-color: rgba(128,87,156,.16) !important; background: linear-gradient( 110deg, #f4ebfa, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-purple::before { content: "−" !important; background: #e9ddf1 !important; color: #80579c !important; } body.rs-invoice-dashboard-theme .rs-summary-purple > strong { color: #80579c !important; } /* ========================================================== EXCHANGE CREDIT — GREEN ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-green { border-color: rgba(60,135,93,.17) !important; background: linear-gradient( 110deg, #e6f5ec, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-green::before { content: "↺" !important; background: #d8ecdf !important; color: #397453 !important; } body.rs-invoice-dashboard-theme .rs-summary-green > strong { color: #397453 !important; } /* ========================================================== ROUND OFF — BLUE ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-blue { border-color: rgba(86,112,162,.16) !important; background: linear-gradient( 110deg, #edf2fa, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-blue::before { content: "≈" !important; background: #e2e8f4 !important; color: #5670a2 !important; } body.rs-invoice-dashboard-theme .rs-summary-blue > strong { color: #5670a2 !important; } /* ========================================================== INVOICE TOTAL — TEAL ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-teal { border-color: rgba(62,112,108,.18) !important; background: radial-gradient( circle at 100% 0%, rgba(62,112,108,.09), transparent 35% ), linear-gradient( 110deg, #e7f3f1, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-teal::before { content: "◆" !important; background: #d9eae8 !important; color: #3e706c !important; } body.rs-invoice-dashboard-theme .rs-summary-teal > strong { color: #315f5b !important; font-size: 16px !important; } /* ========================================================== PAID — PREMIUM GREEN ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-paid { border-color: rgba(60,135,93,.18) !important; background: radial-gradient( circle at 100% 0%, rgba(60,135,93,.09), transparent 35% ), linear-gradient( 110deg, #e5f4eb, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-paid::before { content: "✓" !important; background: #d5eadc !important; color: #397453 !important; } body.rs-invoice-dashboard-theme .rs-summary-paid > strong { color: #2f7650 !important; font-size: 16px !important; } /* ========================================================== DUE — ROSE ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-due { border-color: rgba(153,73,63,.18) !important; background: radial-gradient( circle at 100% 0%, rgba(153,73,63,.08), transparent 35% ), linear-gradient( 110deg, #fae7e3, #fff ) !important; } body.rs-invoice-dashboard-theme .rs-summary-due::before { content: "!" !important; background: #f2d8d3 !important; color: #99493f !important; } body.rs-invoice-dashboard-theme .rs-summary-due > strong { color: #a3453a !important; font-size: 16px !important; } /* ========================================================== INVOICE TOTAL + PAID + DUE Give important cards stronger presence ========================================================== */ body.rs-invoice-dashboard-theme .rs-summary-teal, body.rs-invoice-dashboard-theme .rs-summary-paid, body.rs-invoice-dashboard-theme .rs-summary-due { min-height: 91px !important; } /* ========================================================== LARGE DESKTOP 5 main cards fit beautifully in one row. ========================================================== */ @media (min-width: 1250px) { body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { grid-template-columns: repeat( auto-fit, minmax(185px, 1fr) ) !important; } } /* ========================================================== MEDIUM DESKTOP / LAPTOP ========================================================== */ @media (max-width: 1249px) { body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; } } /* ========================================================== TABLET ========================================================== */ @media (max-width: 900px) { body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { grid-template-columns: repeat( 2, minmax(0,1fr) ) !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 560px) { body.rs-invoice-dashboard-theme .rs-invoice-summary-premium { grid-template-columns: 1fr !important; margin: 14px 12px 18px !important; padding: 12px !important; } body.rs-invoice-dashboard-theme .rs-invoice-summary-row { min-height: 80px !important; } body.rs-invoice-dashboard-theme .rs-invoice-summary-row > strong { font-size: 16px !important; } } /* ========================================================== NEW BILL — CUSTOMER FOUND TEXT FIX ========================================================== */ body.rs-sale-new-page .customer-result, body.rs-sale-new-page .customer-preview, body.rs-sale-new-page .customer-info, body.rs-newbill-dashboard-theme .customer-result, body.rs-newbill-dashboard-theme .customer-preview, body.rs-newbill-dashboard-theme .customer-info { color: #17211f !important; } /* Main "Customer found" / success heading */ body.rs-sale-new-page .customer-result strong, body.rs-sale-new-page .customer-result h3, body.rs-sale-new-page .customer-result h4, body.rs-sale-new-page .customer-preview strong, body.rs-sale-new-page .customer-preview h3, body.rs-sale-new-page .customer-preview h4, body.rs-sale-new-page .customer-info strong, body.rs-sale-new-page .customer-info h3, body.rs-sale-new-page .customer-info h4, body.rs-newbill-dashboard-theme .customer-result strong, body.rs-newbill-dashboard-theme .customer-result h3, body.rs-newbill-dashboard-theme .customer-result h4, body.rs-newbill-dashboard-theme .customer-preview strong, body.rs-newbill-dashboard-theme .customer-preview h3, body.rs-newbill-dashboard-theme .customer-preview h4, body.rs-newbill-dashboard-theme .customer-info strong, body.rs-newbill-dashboard-theme .customer-info h3, body.rs-newbill-dashboard-theme .customer-info h4 { color: #111916 !important; opacity: 1 !important; font-weight: 900 !important; } /* Normal customer information */ body.rs-sale-new-page .customer-result span, body.rs-sale-new-page .customer-result p, body.rs-sale-new-page .customer-preview span, body.rs-sale-new-page .customer-preview p, body.rs-sale-new-page .customer-info span, body.rs-sale-new-page .customer-info p, body.rs-newbill-dashboard-theme .customer-result span, body.rs-newbill-dashboard-theme .customer-result p, body.rs-newbill-dashboard-theme .customer-preview span, body.rs-newbill-dashboard-theme .customer-preview p, body.rs-newbill-dashboard-theme .customer-info span, body.rs-newbill-dashboard-theme .customer-info p { color: #46514c !important; opacity: 1 !important; } /* Extra protection for success text/classes */ body.rs-sale-new-page [class*="customer"] .success, body.rs-sale-new-page [class*="customer"] [class*="success"], body.rs-newbill-dashboard-theme [class*="customer"] .success, body.rs-newbill-dashboard-theme [class*="customer"] [class*="success"] { color: #111916 !important; opacity: 1 !important; } /* Direct customer-found wording containers */ body.rs-sale-new-page [class*="customer-found"], body.rs-newbill-dashboard-theme [class*="customer-found"] { color: #111916 !important; opacity: 1 !important; font-weight: 900 !important; } /* ========================================================== LOGIN FULLSCREEN PREMIUM V2 Ratan Setu Dashboard Design Language ========================================================== */ body.rs-login-premium-v2 { --rs-login-ink: #17211f; --rs-login-muted: #7f8984; --rs-login-green: #173027; --rs-login-green-2: #20372c; --rs-login-green-3: #3c4937; --rs-login-gold: #c99a48; --rs-login-gold-light: #e0bb73; --rs-login-gold-soft: #f5e7c5; --rs-login-blue: #5670a2; --rs-login-blue-soft: #e2e8f4; --rs-login-purple: #80579c; --rs-login-purple-soft: #e7e1f1; --rs-login-teal: #3e706c; --rs-login-teal-soft: #dcecea; --rs-login-rose: #99493f; --rs-login-rose-soft: #f5ddd7; margin: 0 !important; min-height: 100vh !important; overflow-x: hidden; background: #f5f2ea !important; } /* ========================================================== PAGE BACKGROUND ========================================================== */ body.rs-login-premium-v2::before { content: ""; position: fixed; inset: 0; z-index: -3; background: radial-gradient( circle at 10% 12%, rgba(201,154,72,.15), transparent 27% ), radial-gradient( circle at 89% 12%, rgba(86,112,162,.10), transparent 26% ), radial-gradient( circle at 82% 88%, rgba(128,87,156,.09), transparent 25% ), radial-gradient( circle at 15% 88%, rgba(62,112,108,.10), transparent 26% ), linear-gradient( 135deg, #f8f5ed 0%, #f4f2ec 45%, #f8f6f0 100% ); } body.rs-login-premium-v2::after { content: ""; position: fixed; inset: 0; z-index: -2; opacity: .28; pointer-events: none; background-image: linear-gradient( rgba(23,48,39,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(23,48,39,.025) 1px, transparent 1px ); background-size: 42px 42px; } /* ========================================================== FORCE EXISTING LOGIN WRAPPERS TO FULL SCREEN ========================================================== */ body.rs-login-premium-v2 > * { box-sizing: border-box; } body.rs-login-premium-v2 .rs-login-stage { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1.08fr) minmax(430px, .92fr) !important; width: min( 1440px, calc(100vw - 72px) ) !important; max-width: 1440px !important; min-height: calc(100vh - 72px) !important; height: auto !important; margin: 36px auto !important; padding: 0 !important; overflow: hidden !important; border: 1px solid rgba(212,204,188,.72) !important; border-radius: 34px !important; background: #fffefa !important; box-shadow: 0 34px 90px rgba(38,43,39,.14) !important; } /* ========================================================== LEFT BRAND PANEL ========================================================== */ body.rs-login-premium-v2 .rs-login-brand-panel { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: calc(100vh - 72px); padding: clamp( 44px, 5vw, 84px ) !important; color: #fff !important; background: radial-gradient( circle at 15% 15%, rgba(222,184,109,.20), transparent 24% ), radial-gradient( circle at 90% 80%, rgba(86,112,162,.10), transparent 28% ), linear-gradient( 135deg, #12221c 0%, #1b3329 48%, #3c4937 100% ) !important; } body.rs-login-premium-v2 .rs-login-brand-panel::before { content: ""; position: absolute; z-index: -1; width: 530px; height: 530px; right: -240px; top: -210px; border: 52px solid rgba(255,255,255,.024); border-radius: 50%; } body.rs-login-premium-v2 .rs-login-brand-panel::after { content: "₹"; position: absolute; z-index: -1; right: 7%; bottom: -95px; font-size: 420px; line-height: 1; font-weight: 900; color: rgba(255,255,255,.018); pointer-events: none; } /* ========================================================== BRAND LOGO / MARK ========================================================== */ body.rs-login-premium-v2 .rs-login-brand-panel .brand, body.rs-login-premium-v2 .rs-login-brand-panel .login-brand { position: relative; z-index: 2; } body.rs-login-premium-v2 .rs-login-brand-panel .brand-mark { width: 52px !important; height: 52px !important; border-radius: 15px !important; background: linear-gradient( 145deg, #e0bb73, #bd8934 ) !important; color: #19251f !important; box-shadow: 0 13px 28px rgba(180,125,42,.22); font-weight: 900 !important; } /* ========================================================== LEFT TYPOGRAPHY ========================================================== */ body.rs-login-premium-v2 .rs-login-brand-panel h1, body.rs-login-premium-v2 .rs-login-brand-panel h2, body.rs-login-premium-v2 .rs-login-brand-panel h3 { color: #fff !important; } body.rs-login-premium-v2 .rs-login-brand-heading { max-width: 650px !important; margin: 52px 0 20px !important; font-size: clamp( 44px, 4.6vw, 72px ) !important; line-height: .98 !important; letter-spacing: -.055em !important; font-weight: 900 !important; } body.rs-login-premium-v2 .rs-login-brand-panel p { max-width: 630px; color: rgba(255,255,255,.63) !important; font-size: clamp( 14px, 1.15vw, 17px ) !important; line-height: 1.75 !important; } /* ========================================================== OLD FEATURE CHIPS ========================================================== */ body.rs-login-premium-v2 .rs-login-feature-chip { display: inline-flex !important; align-items: center !important; min-height: 32px; margin: 7px 5px 0 0 !important; padding: 0 11px !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 999px !important; background: rgba(255,255,255,.06) !important; backdrop-filter: blur(8px); color: rgba(255,255,255,.78) !important; font-size: 9px !important; font-weight: 800 !important; } /* ========================================================== BENEFIT CARDS ========================================================== */ body.rs-login-premium-v2 .rs-login-benefits { position: relative; z-index: 2; display: grid; grid-template-columns: repeat( 3, minmax(0,1fr) ); gap: 11px; margin-top: 42px; } body.rs-login-premium-v2 .rs-login-benefit { min-width: 0; min-height: 118px; padding: 16px; border: 1px solid rgba(255,255,255,.09); border-radius: 17px; background: rgba(255,255,255,.055); backdrop-filter: blur(9px); box-shadow: 0 12px 30px rgba(0,0,0,.06); } body.rs-login-premium-v2 .rs-login-benefit-icon { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 14px; border-radius: 10px; font-weight: 900; } body.rs-login-premium-v2 .rs-login-benefit strong { display: block; color: #fff; font-size: 11px; font-weight: 900; } body.rs-login-premium-v2 .rs-login-benefit small { display: block; margin-top: 6px; color: rgba(255,255,255,.50); font-size: 9px; line-height: 1.55; } body.rs-login-premium-v2 .rs-login-benefit-gold .rs-login-benefit-icon { background: rgba(224,187,115,.17); color: #e0bb73; } body.rs-login-premium-v2 .rs-login-benefit-green .rs-login-benefit-icon { background: rgba(82,157,109,.16); color: #83c69b; } body.rs-login-premium-v2 .rs-login-benefit-purple .rs-login-benefit-icon { background: rgba(156,111,185,.17); color: #c59adc; } /* ========================================================== RIGHT PANEL ========================================================== */ body.rs-login-premium-v2 .rs-login-form-panel { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: calc(100vh - 72px); padding: clamp( 44px, 5vw, 82px ) !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.11), transparent 28% ), radial-gradient( circle at 10% 100%, rgba(62,112,108,.06), transparent 25% ), linear-gradient( 145deg, #fffefa 0%, #fffaf2 100% ) !important; } /* ========================================================== LOGIN HEADING ========================================================== */ body.rs-login-premium-v2 .rs-login-form-panel .eyebrow, body.rs-login-premium-v2 .rs-login-form-panel [class*="eyebrow"] { display: inline-flex; align-items: center; width: fit-content; margin-bottom: 13px; padding: 6px 10px; border: 1px solid rgba(201,154,72,.18); border-radius: 999px; background: #f7ecd6; color: #966822 !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .13em; } body.rs-login-premium-v2 .rs-login-form-panel h1, body.rs-login-premium-v2 .rs-login-form-panel h2 { margin: 0 0 10px !important; color: #17211f !important; font-size: clamp( 34px, 3vw, 48px ) !important; line-height: 1.05 !important; letter-spacing: -.045em !important; font-weight: 900 !important; } body.rs-login-premium-v2 .rs-login-form-panel > p { max-width: 470px; color: #7d8782 !important; line-height: 1.6; } /* ========================================================== FORM ========================================================== */ body.rs-login-premium-v2 .rs-login-form-panel form { width: 100%; margin-top: 28px; } /* ========================================================== LABELS ========================================================== */ body.rs-login-premium-v2 .rs-login-label { display: block; margin-bottom: 7px; color: #4d5853 !important; font-size: 10px !important; font-weight: 900 !important; } /* ========================================================== INPUTS ========================================================== */ body.rs-login-premium-v2 .rs-login-input { width: 100% !important; min-height: 58px !important; padding: 0 16px !important; margin-bottom: 18px !important; border: 1px solid #dcd5c8 !important; border-radius: 14px !important; outline: none !important; background: rgba(255,255,255,.90) !important; color: #17211f !important; font-size: 14px !important; font-weight: 700 !important; box-shadow: 0 4px 12px rgba(35,41,37,.025); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease !important; box-sizing: border-box !important; } body.rs-login-premium-v2 .rs-login-input:hover { border-color: #cbbd9f !important; } body.rs-login-premium-v2 .rs-login-input:focus { border-color: #c99a48 !important; background: #fff !important; box-shadow: 0 0 0 5px rgba(201,154,72,.11), 0 10px 25px rgba(38,42,37,.06) !important; } /* ========================================================== PASSWORD INPUT SPECIAL SOFT BLUE ========================================================== */ body.rs-login-premium-v2 .rs-login-input[type="password"] { border-color: #d8dfeb !important; background: linear-gradient( 110deg, #f2f5fb, #fff ) !important; } /* ========================================================== LOGIN BUTTON ========================================================== */ body.rs-login-premium-v2 .rs-login-submit { position: relative; overflow: hidden; width: 100% !important; min-height: 58px !important; margin-top: 5px !important; border: 0 !important; border-radius: 14px !important; cursor: pointer; background: radial-gradient( circle at 90% 0%, rgba(224,187,115,.20), transparent 35% ), linear-gradient( 110deg, #173027, #3c4937 ) !important; color: #fff !important; font-size: 12px !important; font-weight: 900 !important; box-shadow: 0 14px 30px rgba(23,48,39,.20) !important; transition: transform .18s ease, box-shadow .18s ease !important; } body.rs-login-premium-v2 .rs-login-submit:hover { transform: translateY(-2px); box-shadow: 0 19px 36px rgba(23,48,39,.26) !important; } /* ========================================================== SECURITY NOTE ========================================================== */ body.rs-login-premium-v2 .rs-login-security-note { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 14px; border: 1px solid #d8e6df; border-radius: 15px; background: linear-gradient( 110deg, #edf7f1, #fff ); } body.rs-login-premium-v2 .rs-login-security-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; background: #dceee3; color: #397453; font-weight: 900; } body.rs-login-premium-v2 .rs-login-security-note strong { display: block; color: #20322a; font-size: 10px; font-weight: 900; } body.rs-login-premium-v2 .rs-login-security-note small { display: block; margin-top: 3px; color: #87918c; font-size: 8px; line-height: 1.5; } /* ========================================================== LOGIN ALERT / ERROR ========================================================== */ body.rs-login-premium-v2 .alert, body.rs-login-premium-v2 .error, body.rs-login-premium-v2 .login-error { margin-bottom: 18px !important; padding: 12px 14px !important; border: 1px solid rgba(153,73,63,.15) !important; border-radius: 13px !important; background: #fff0ed !important; color: #99493f !important; font-size: 10px !important; font-weight: 800 !important; } /* ========================================================== RESPONSIVE — TABLET ========================================================== */ @media (max-width: 1050px) { body.rs-login-premium-v2 .rs-login-stage { grid-template-columns: 1fr !important; width: calc(100vw - 40px) !important; margin: 20px auto !important; min-height: auto !important; } body.rs-login-premium-v2 .rs-login-brand-panel, body.rs-login-premium-v2 .rs-login-form-panel { min-height: auto !important; } body.rs-login-premium-v2 .rs-login-brand-heading { margin-top: 35px !important; font-size: 48px !important; } body.rs-login-premium-v2 .rs-login-brand-panel { padding: 42px !important; } body.rs-login-premium-v2 .rs-login-form-panel { padding: 42px !important; } } /* ========================================================== RESPONSIVE — MOBILE ========================================================== */ @media (max-width: 650px) { body.rs-login-premium-v2 .rs-login-stage { width: calc(100vw - 20px) !important; margin: 10px auto !important; border-radius: 22px !important; } body.rs-login-premium-v2 .rs-login-brand-panel { padding: 28px 22px !important; } body.rs-login-premium-v2 .rs-login-brand-heading { margin-top: 28px !important; font-size: 37px !important; } body.rs-login-premium-v2 .rs-login-benefits { grid-template-columns: 1fr !important; margin-top: 28px; } body.rs-login-premium-v2 .rs-login-benefit { min-height: auto; } body.rs-login-premium-v2 .rs-login-form-panel { padding: 34px 22px !important; } body.rs-login-premium-v2 .rs-login-form-panel h1, body.rs-login-premium-v2 .rs-login-form-panel h2 { font-size: 34px !important; } body.rs-login-premium-v2 .rs-login-input, body.rs-login-premium-v2 .rs-login-submit { min-height: 54px !important; } } /* ========================================================== LOGIN V3 — FULL SCREEN PREMIUM ========================================================== */ html:has(body.rs-login-v3), body.rs-login-v3 { width: 100%; height: 100%; min-height: 100%; margin: 0 !important; overflow: hidden !important; } body.rs-login-v3 { --login-ink: #17211f; --login-green: #173027; --login-green-2: #243d31; --login-green-3: #42503b; --login-gold: #c99a48; --login-gold-light: #ebce91; --login-blue: #5670a2; --login-purple: #80579c; --login-teal: #3e706c; --login-rose: #99493f; --login-cream: #f7f3e9; --login-white: #fffefa; background: #f4f1e9 !important; } /* ========================================================== FULL VIEWPORT ROOT ========================================================== */ body.rs-login-v3 .rs-login-v3-root { position: relative !important; isolation: isolate; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: clamp( 18px, 2.5vw, 40px ) !important; overflow: hidden !important; box-sizing: border-box; display: flex !important; align-items: center !important; justify-content: center !important; background: radial-gradient( circle at 6% 10%, rgba(201,154,72,.16), transparent 28% ), radial-gradient( circle at 92% 16%, rgba(86,112,162,.11), transparent 25% ), radial-gradient( circle at 82% 88%, rgba(128,87,156,.07), transparent 27% ), linear-gradient( 135deg, #f8f5ed 0%, #f1eee5 48%, #f7f4ec 100% ) !important; } /* ========================================================== EXISTING MAIN LOGIN CONTAINER Enlarge previous card into premium screen ========================================================== */ body.rs-login-v3 .rs-login-v3-root > div:not(.rs-login-v3-credit):not(.rs-login-ornaments) { position: relative; z-index: 5; width: min( 1240px, calc(100vw - 80px) ) !important; height: min( 760px, calc(100vh - 80px) ) !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; border: 1px solid rgba(81,72,55,.10) !important; border-radius: 34px !important; box-shadow: 0 35px 90px rgba(33,39,34,.15) !important; } /* ========================================================== LEFT SIDE ========================================================== */ body.rs-login-v3 .rs-login-v3-root > div > div:first-child { position: relative; overflow: hidden; background: radial-gradient( circle at 80% 16%, rgba(235,206,145,.12), transparent 29% ), radial-gradient( circle at 20% 88%, rgba(86,112,162,.07), transparent 28% ), linear-gradient( 145deg, #14251f 0%, #1d352a 54%, #3c4937 100% ) !important; } /* decorative rings */ body.rs-login-v3 .rs-login-v3-root > div > div:first-child::before { content: ""; position: absolute; right: -115px; top: -155px; width: 420px; height: 420px; border: 55px solid rgba(255,255,255,.025); border-radius: 50%; pointer-events: none; } body.rs-login-v3 .rs-login-v3-root > div > div:first-child::after { content: "R"; position: absolute; right: 35px; bottom: -135px; color: rgba(255,255,255,.025); font-size: clamp( 270px, 29vw, 460px ); font-weight: 900; line-height: 1; pointer-events: none; } /* ========================================================== LEFT SIDE MAIN HEADLINE ========================================================== */ body.rs-login-v3 .rs-login-v3-root > div > div:first-child h1, body.rs-login-v3 .rs-login-v3-root > div > div:first-child h2 { position: relative; z-index: 2; max-width: 590px; color: #fff !important; font-size: clamp( 35px, 4vw, 64px ) !important; line-height: .99 !important; letter-spacing: -.055em !important; font-weight: 900 !important; } /* ========================================================== LEFT DESCRIPTION ========================================================== */ body.rs-login-v3 .rs-login-v3-root > div > div:first-child p { position: relative; z-index: 2; color: rgba(255,255,255,.64) !important; line-height: 1.7; } /* ========================================================== LEFT PILLS / FEATURE ITEMS ========================================================== */ body.rs-login-v3 .rs-login-v3-root > div > div:first-child span { position: relative; z-index: 2; } /* ========================================================== RIGHT LOGIN PANEL ========================================================== */ body.rs-login-v3 .rs-login-v3-root > div > div:last-child { position: relative; background: radial-gradient( circle at 98% 2%, rgba(201,154,72,.10), transparent 30% ), radial-gradient( circle at 5% 100%, rgba(62,112,108,.06), transparent 28% ), linear-gradient( 145deg, #fffefa, #faf7ef ) !important; } /* ========================================================== LOGIN FORM ========================================================== */ body.rs-login-v3 .rs-login-v3-form { position: relative; z-index: 3; width: 100%; max-width: 480px; margin: 0 auto; } /* ========================================================== RIGHT PANEL HEADLINE ========================================================== */ body.rs-login-v3 .rs-login-v3-form ~ h1, body.rs-login-v3 .rs-login-v3-form ~ h2 { color: var(--login-ink); } /* ========================================================== INPUTS ========================================================== */ body.rs-login-v3 .rs-login-v3-form input[type="text"], body.rs-login-v3 .rs-login-v3-form input[type="password"] { width: 100% !important; height: 58px !important; min-height: 58px !important; padding: 0 52px 0 17px !important; border: 1px solid #d9d6ce !important; border-radius: 15px !important; background: #fff !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); color: #17211f !important; font-size: 14px !important; font-weight: 800 !important; outline: none !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } body.rs-login-v3 .rs-login-v3-form input[type="text"]:focus, body.rs-login-v3 .rs-login-v3-form input[type="password"]:focus { border-color: #c99a48 !important; background: #fffefb !important; box-shadow: 0 0 0 5px rgba(201,154,72,.11), 0 10px 24px rgba(62,54,38,.06) !important; } /* ========================================================== LABELS ========================================================== */ body.rs-login-v3 .rs-login-v3-form label { display: block; margin-bottom: 8px !important; color: #495550 !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .04em; } /* ========================================================== PASSWORD WRAPPER ========================================================== */ body.rs-login-v3 .rs-password-field { position: relative; width: 100%; } /* ========================================================== EYE BUTTON ========================================================== */ body.rs-login-v3 .rs-password-eye { position: absolute; z-index: 6; top: 50%; right: 10px; transform: translateY(-50%); display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 11px; background: #f2f0e9; color: #737c77; cursor: pointer; transition: all .18s ease; } body.rs-login-v3 .rs-password-eye:hover, body.rs-login-v3 .rs-password-eye.active { background: #f4e8cc; color: #966b27; } body.rs-login-v3 .rs-password-eye svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================== FORGOT / CREATE USER ========================================================== */ body.rs-login-v3 .rs-login-v3-links { display: flex; align-items: center; justify-content: flex-end; gap: 9px; margin: 13px 1px 17px; } body.rs-login-v3 .rs-login-link { appearance: none; padding: 0; border: 0; background: transparent; color: #6c746f; font-size: 10px; font-weight: 850; cursor: pointer; transition: color .18s ease; } body.rs-login-v3 .rs-login-link:hover { color: #9a6c25; } body.rs-login-v3 .rs-create-link { color: #397453; } body.rs-login-v3 .rs-login-link-divider { color: #c6bca9; font-size: 10px; } /* ========================================================== LOGIN BUTTON ========================================================== */ body.rs-login-v3 .rs-login-v3-submit { position: relative; overflow: hidden; width: 100% !important; min-height: 56px !important; margin-top: 0 !important; border: 0 !important; border-radius: 15px !important; background: radial-gradient( circle at 90% 0%, rgba(235,206,145,.24), transparent 33% ), linear-gradient( 110deg, #173027, #314637 58%, #5d6245 ) !important; box-shadow: 0 14px 30px rgba(23,48,39,.20); color: #fff !important; font-size: 12px !important; font-weight: 900 !important; letter-spacing: -.01em; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; } body.rs-login-v3 .rs-login-v3-submit:hover { transform: translateY(-2px); box-shadow: 0 19px 36px rgba(23,48,39,.27); } /* ========================================================== COMPANY CREDIT ========================================================== */ body.rs-login-v3 .rs-login-v3-credit { position: absolute; z-index: 20; right: clamp( 28px, 4vw, 65px ); bottom: clamp( 18px, 3vh, 30px ); display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid rgba(201,154,72,.18); border-radius: 14px; background: rgba(255,254,250,.80); backdrop-filter: blur(12px); box-shadow: 0 9px 25px rgba(48,45,38,.06); } body.rs-login-v3 .rs-credit-mark { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 10px; background: linear-gradient( 145deg, #e0b65f, #bb8533 ); color: #17211f; font-size: 10px; font-weight: 950; box-shadow: 0 6px 15px rgba(164,114,39,.16); } body.rs-login-v3 .rs-credit-copy { display: flex; flex-direction: column; line-height: 1.25; } body.rs-login-v3 .rs-credit-copy > span { color: #999187; font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } body.rs-login-v3 .rs-credit-copy strong { margin-top: 2px; color: #17211f; font-size: 10px; font-weight: 950; } body.rs-login-v3 .rs-credit-copy small { margin-top: 2px; color: #777f7b; font-size: 7px; } body.rs-login-v3 .rs-credit-copy small b { color: #9b6b24; font-weight: 900; } /* ========================================================== FLOATING COLOUR ORNAMENTS ========================================================== */ body.rs-login-v3 .rs-login-ornaments { position: absolute; inset: 0; z-index: 0; pointer-events: none; } body.rs-login-v3 .rs-orb { position: absolute; border-radius: 50%; filter: blur(1px); opacity: .85; } body.rs-login-v3 .rs-orb-gold { top: 9%; left: 7%; width: 11px; height: 11px; background: #c99a48; box-shadow: 0 0 0 8px rgba(201,154,72,.10); } body.rs-login-v3 .rs-orb-blue { top: 13%; right: 9%; width: 9px; height: 9px; background: #5670a2; box-shadow: 0 0 0 7px rgba(86,112,162,.08); } body.rs-login-v3 .rs-orb-purple { bottom: 12%; right: 17%; width: 9px; height: 9px; background: #80579c; box-shadow: 0 0 0 7px rgba(128,87,156,.08); } body.rs-login-v3 .rs-orb-green { bottom: 9%; left: 9%; width: 9px; height: 9px; background: #4d8a64; box-shadow: 0 0 0 7px rgba(77,138,100,.08); } /* ========================================================== MODAL ========================================================== */ body.rs-login-v3 .rs-login-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .2s ease, visibility .2s ease; } body.rs-login-v3 .rs-login-modal.open { visibility: visible; opacity: 1; } body.rs-login-v3 .rs-login-modal-backdrop { position: absolute; inset: 0; background: rgba(12,25,20,.50); backdrop-filter: blur(7px); } body.rs-login-v3 .rs-login-modal-card { position: relative; z-index: 2; width: min( 440px, 100% ); padding: 28px; border: 1px solid rgba(201,154,72,.22); border-radius: 24px; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.14), transparent 30% ), #fffefa; box-shadow: 0 30px 80px rgba(18,27,23,.24); transform: translateY(10px) scale(.98); transition: transform .2s ease; } body.rs-login-v3 .rs-login-modal.open .rs-login-modal-card { transform: translateY(0) scale(1); } body.rs-login-v3 .rs-login-modal-close { position: absolute; top: 15px; right: 15px; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 10px; background: #f3efe6; color: #6d746f; font-size: 20px; cursor: pointer; } body.rs-login-v3 .rs-login-modal-icon { display: grid; place-items: center; width: 45px; height: 45px; margin-bottom: 18px; border-radius: 14px; background: #f5e7c5; color: #956821; font-size: 17px; font-weight: 950; } body.rs-login-v3 .rs-login-modal-kicker { margin: 0 0 8px; color: #9b6b24; font-size: 8px; font-weight: 950; letter-spacing: .14em; } body.rs-login-v3 .rs-login-modal-title { margin: 0; color: #17211f; font-size: 24px; letter-spacing: -.04em; } body.rs-login-v3 .rs-login-modal-text { margin: 11px 0 20px; color: #6c7671; font-size: 12px; line-height: 1.65; } body.rs-login-v3 .rs-login-modal-company { padding: 13px 14px; border: 1px solid #d9e6df; border-radius: 14px; background: linear-gradient( 145deg, #edf8f3, #fff ); } body.rs-login-v3 .rs-login-modal-company span, body.rs-login-v3 .rs-login-modal-company small { display: block; color: #84908a; font-size: 8px; } body.rs-login-v3 .rs-login-modal-company strong { display: block; margin: 3px 0; color: #173027; font-size: 12px; font-weight: 950; } body.rs-login-v3 .rs-login-modal-done { width: 100%; min-height: 45px; margin-top: 17px; border: 0; border-radius: 12px; background: linear-gradient( 110deg, #173027, #3c4937 ); color: #fff; font-weight: 900; cursor: pointer; } /* ========================================================== LAPTOP HEIGHT — PREVENT SCROLL ========================================================== */ @media (max-height: 820px) and (min-width: 901px) { body.rs-login-v3 .rs-login-v3-root { padding: 20px !important; } body.rs-login-v3 .rs-login-v3-root > div:not(.rs-login-v3-credit):not(.rs-login-ornaments) { height: calc(100vh - 40px) !important; width: min( 1180px, calc(100vw - 70px) ) !important; } body.rs-login-v3 .rs-login-v3-root > div > div:first-child h1, body.rs-login-v3 .rs-login-v3-root > div > div:first-child h2 { font-size: clamp( 34px, 3.7vw, 54px ) !important; } body.rs-login-v3 .rs-login-v3-form input[type="text"], body.rs-login-v3 .rs-login-v3-form input[type="password"] { height: 52px !important; min-height: 52px !important; } body.rs-login-v3 .rs-login-v3-submit { min-height: 50px !important; } } /* ========================================================== MOBILE / TABLET ========================================================== */ @media (max-width: 900px) { html:has(body.rs-login-v3), body.rs-login-v3 { height: auto; overflow: auto !important; } body.rs-login-v3 .rs-login-v3-root { width: 100% !important; height: auto !important; min-height: 100vh !important; overflow: visible !important; padding: 16px !important; } body.rs-login-v3 .rs-login-v3-root > div:not(.rs-login-v3-credit):not(.rs-login-ornaments) { width: 100% !important; height: auto !important; min-height: calc(100vh - 32px) !important; border-radius: 25px !important; } body.rs-login-v3 .rs-login-v3-credit { position: fixed; display: none; } } /* ========================================================== VERY SMALL PHONE ========================================================== */ @media (max-width: 600px) { body.rs-login-v3 .rs-login-v3-root > div > div:first-child { display: none !important; } body.rs-login-v3 .rs-login-v3-root > div:not(.rs-login-v3-credit):not(.rs-login-ornaments) { display: block !important; } body.rs-login-v3 .rs-login-v3-links { justify-content: center; } } /* ========================================================== LOGIN FINAL POLISH — DASHBOARD FAMILY ========================================================== */ /* ========================================================== PAGE — ZERO SCROLL ========================================================== */ html:has(body.rs-login-v3), body.rs-login-v3 { width: 100% !important; height: 100% !important; min-height: 100% !important; margin: 0 !important; overflow: hidden !important; background: #f5f2ea !important; } body.rs-login-v3 .rs-login-v3-root { width: 100vw !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: clamp( 20px, 3vh, 34px ) clamp( 30px, 5vw, 80px ) !important; overflow: hidden !important; box-sizing: border-box !important; background: radial-gradient( circle at 8% 5%, rgba(201,154,72,.13), transparent 27% ), radial-gradient( circle at 94% 10%, rgba(86,112,162,.09), transparent 27% ), radial-gradient( circle at 82% 92%, rgba(62,112,108,.07), transparent 28% ), #f5f2ea !important; } /* ========================================================== REMOVE THE HUGE OUTER SQUARE ========================================================== */ body.rs-login-v3 .rs-login-final-shell { position: relative !important; z-index: 5 !important; display: grid !important; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr) !important; gap: 18px !important; width: min( 1220px, calc(100vw - 90px) ) !important; height: min( 700px, calc(100vh - 60px) ) !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } /* ========================================================== LEFT PANEL — FLOATING PREMIUM PANEL ========================================================== */ body.rs-login-v3 .rs-login-final-left { position: relative !important; isolation: isolate; overflow: hidden !important; height: 100% !important; padding: clamp( 34px, 4vw, 58px ) !important; border: 1px solid rgba(255,255,255,.05) !important; border-radius: 30px !important; background: radial-gradient( circle at 96% 4%, rgba(216,176,100,.13), transparent 27% ), radial-gradient( circle at 7% 94%, rgba(86,112,162,.08), transparent 28% ), linear-gradient( 140deg, #14251f 0%, #1d352a 58%, #354536 100% ) !important; box-shadow: 0 24px 55px rgba(23,35,29,.18) !important; box-sizing: border-box; } body.rs-login-v3 .rs-login-final-left::before { content: ""; position: absolute; right: -120px; top: -145px; width: 430px; height: 430px; border: 52px solid rgba(255,255,255,.023); border-radius: 50%; pointer-events: none; } body.rs-login-v3 .rs-login-final-left::after { content: ""; position: absolute; left: -80px; bottom: -130px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient( circle, rgba(201,154,72,.08), transparent 68% ); pointer-events: none; } /* ========================================================== LEFT HEADLINE ========================================================== */ body.rs-login-v3 .rs-login-final-left h1, body.rs-login-v3 .rs-login-final-left h2 { position: relative; z-index: 2; max-width: 560px !important; margin-top: 72px !important; color: #fff !important; font-size: clamp( 40px, 4.1vw, 63px ) !important; line-height: .98 !important; letter-spacing: -.055em !important; font-weight: 950 !important; } body.rs-login-v3 .rs-login-final-left > p { position: relative; z-index: 2; max-width: 550px; color: rgba(255,255,255,.64) !important; font-size: 14px !important; line-height: 1.68 !important; } /* ========================================================== FEATURE CHIPS ALREADY ABOVE FEATURE BOXES ========================================================== */ body.rs-login-v3 .rs-login-final-left span { position: relative; z-index: 2; } /* ========================================================== CHANGE WHITE SQUARE FEATURE CARDS INTO COMPACT DARK PREMIUM TILES ========================================================== */ body.rs-login-v3 .rs-login-feature-strip { position: relative !important; z-index: 3 !important; display: grid !important; grid-template-columns: repeat( 3, minmax(0,1fr) ) !important; gap: 9px !important; width: 100% !important; margin-top: 30px !important; padding: 0 !important; border: 0 !important; background: transparent !important; } body.rs-login-v3 .rs-login-feature-card { position: relative; overflow: hidden; min-height: 82px !important; padding: 13px 14px !important; border: 1px solid rgba(255,255,255,.08) !important; border-radius: 18px !important; background: rgba(255,255,255,.055) !important; backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.035) !important; color: #fff !important; transition: transform .18s ease, border-color .18s ease, background .18s ease; } body.rs-login-v3 .rs-login-feature-card:hover { transform: translateY(-3px); background: rgba(255,255,255,.075) !important; } body.rs-login-v3 .rs-login-feature-card strong, body.rs-login-v3 .rs-login-feature-card h3, body.rs-login-v3 .rs-login-feature-card h4 { color: #fff !important; font-size: 10px !important; font-weight: 900 !important; } body.rs-login-v3 .rs-login-feature-card p, body.rs-login-v3 .rs-login-feature-card small { color: rgba(255,255,255,.47) !important; font-size: 8px !important; line-height: 1.4 !important; } /* Gold feature */ body.rs-login-v3 .rs-login-feature-gold { border-color: rgba(216,176,100,.22) !important; background: linear-gradient( 145deg, rgba(201,154,72,.13), rgba(255,255,255,.035) ) !important; } /* Green feature */ body.rs-login-v3 .rs-login-feature-green { border-color: rgba(81,151,105,.18) !important; background: linear-gradient( 145deg, rgba(77,138,100,.12), rgba(255,255,255,.035) ) !important; } /* Purple feature */ body.rs-login-v3 .rs-login-feature-purple { border-color: rgba(139,102,162,.19) !important; background: linear-gradient( 145deg, rgba(128,87,156,.12), rgba(255,255,255,.035) ) !important; } /* ========================================================== RIGHT PANEL ========================================================== */ body.rs-login-v3 .rs-login-final-right { position: relative !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; justify-content: center !important; height: 100% !important; padding: clamp( 42px, 5vw, 72px ) !important; border: 1px solid rgba(201,154,72,.14) !important; border-radius: 30px !important; background: radial-gradient( circle at 100% 0%, rgba(201,154,72,.10), transparent 31% ), radial-gradient( circle at 0% 100%, rgba(62,112,108,.055), transparent 28% ), linear-gradient( 145deg, #fffefa, #faf7ef ) !important; box-shadow: 0 24px 55px rgba(49,45,36,.09) !important; box-sizing: border-box; } body.rs-login-v3 .rs-login-final-right::after { content: ""; position: absolute; top: -85px; right: -75px; width: 210px; height: 210px; border: 28px solid rgba(201,154,72,.035); border-radius: 50%; pointer-events: none; } /* ========================================================== RIGHT HEADER ========================================================== */ body.rs-login-v3 .rs-login-final-right h1, body.rs-login-v3 .rs-login-final-right h2 { color: #17211f !important; font-size: clamp( 34px, 3.3vw, 49px ) !important; line-height: 1 !important; letter-spacing: -.052em !important; font-weight: 950 !important; } /* ========================================================== FORM ========================================================== */ body.rs-login-v3 .rs-login-final-form { width: 100% !important; max-width: 470px !important; margin-left: 0 !important; margin-right: 0 !important; } /* ========================================================== LABELS ========================================================== */ body.rs-login-v3 .rs-login-final-form label { margin-bottom: 7px !important; color: #56615d !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .025em; } /* ========================================================== REMOVE BLUE INPUT BACKGROUND ========================================================== */ body.rs-login-v3 .rs-login-final-form input[type="text"], body.rs-login-v3 .rs-login-final-form input[type="password"] { width: 100% !important; height: 55px !important; min-height: 55px !important; border: 1px solid #ddd8cd !important; border-radius: 14px !important; background: #fff !important; box-shadow: 0 5px 15px rgba(40,43,37,.025) !important; color: #17211f !important; font-size: 13px !important; font-weight: 800 !important; } body.rs-login-v3 .rs-login-final-form input[type="text"]:focus, body.rs-login-v3 .rs-login-final-form input[type="password"]:focus { border-color: #c99a48 !important; background: #fffefa !important; box-shadow: 0 0 0 4px rgba(201,154,72,.10), 0 9px 22px rgba(74,60,36,.055) !important; } /* ========================================================== PASSWORD EYE ========================================================== */ body.rs-login-v3 .rs-password-eye { right: 9px !important; width: 37px !important; height: 37px !important; border-radius: 11px !important; background: #f5f1e7 !important; color: #68736e !important; } body.rs-login-v3 .rs-password-eye:hover, body.rs-login-v3 .rs-password-eye.active { background: #f3e4c5 !important; color: #946720 !important; } /* ========================================================== FORGOT + CREATE USER ========================================================== */ body.rs-login-v3 .rs-login-v3-links { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 9px !important; margin: 12px 2px 18px !important; } body.rs-login-v3 .rs-login-link { font-size: 9px !important; font-weight: 850 !important; color: #717a75 !important; } body.rs-login-v3 .rs-forgot-link:hover { color: #946720 !important; } body.rs-login-v3 .rs-create-link { color: #397453 !important; } body.rs-login-v3 .rs-create-link:hover { color: #245d3d !important; } /* ========================================================== LOGIN BUTTON ========================================================== */ body.rs-login-v3 .rs-login-v3-submit { min-height: 53px !important; border-radius: 14px !important; background: radial-gradient( circle at 90% 0%, rgba(220,185,111,.18), transparent 34% ), linear-gradient( 110deg, #173027, #304437 62%, #5a6044 ) !important; box-shadow: 0 13px 27px rgba(23,48,39,.18) !important; color: #fff !important; font-weight: 900 !important; } /* ========================================================== SECURITY NOTE ========================================================== */ body.rs-login-v3 .rs-login-security-note { margin-top: 18px !important; padding: 13px 14px !important; border: 1px solid rgba(62,112,108,.15) !important; border-radius: 15px !important; background: linear-gradient( 100deg, #eaf5f1, #fffaf0 ) !important; box-shadow: none !important; } /* ========================================================== ROCTICS TECHNOLOGY CREDIT NOW INSIDE LEFT PANEL TOP ========================================================== */ body.rs-login-v3 .rs-login-final-left .rs-login-final-credit { position: absolute !important; z-index: 20 !important; top: 28px !important; left: 34px !important; right: auto !important; bottom: auto !important; display: flex !important; align-items: center !important; gap: 10px !important; width: auto !important; max-width: 330px; margin: 0 !important; padding: 9px 12px !important; border: 1px solid rgba(216,176,100,.18) !important; border-radius: 14px !important; background: rgba(255,255,255,.055) !important; backdrop-filter: blur(10px); box-shadow: none !important; } body.rs-login-v3 .rs-login-final-credit .rs-credit-mark { width: 34px !important; height: 34px !important; border-radius: 10px !important; background: linear-gradient( 145deg, #e1b65d, #bb8533 ) !important; color: #17211f !important; } body.rs-login-v3 .rs-login-final-credit .rs-credit-copy > span { color: rgba(255,255,255,.45) !important; font-size: 6.5px !important; letter-spacing: .09em !important; } body.rs-login-v3 .rs-login-final-credit .rs-credit-copy strong { color: #fff !important; font-size: 10px !important; font-weight: 900 !important; } body.rs-login-v3 .rs-login-final-credit .rs-credit-copy small { color: rgba(255,255,255,.54) !important; font-size: 7px !important; } body.rs-login-v3 .rs-login-final-credit .rs-credit-copy small b { color: #e0bd78 !important; font-weight: 900 !important; } /* ========================================================== SMALL PRODUCT LABEL ========================================================== */ body.rs-login-v3 .rs-roctics-mini-label { position: absolute; z-index: 10; left: 35px; bottom: 24px; display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.40); font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; } body.rs-login-v3 .rs-roctics-dot { width: 6px; height: 6px; border-radius: 50%; background: #d8b064; box-shadow: 0 0 0 5px rgba(216,176,100,.09); } /* ========================================================== REMOVE OLD ROOT CREDIT POSITION SIDE EFFECTS ========================================================== */ body.rs-login-v3 .rs-login-v3-root > .rs-login-v3-credit { position: static !important; } /* ========================================================== LAPTOP HEIGHT ========================================================== */ @media (max-height: 820px) and (min-width: 901px) { body.rs-login-v3 .rs-login-v3-root { padding: 18px 55px !important; } body.rs-login-v3 .rs-login-final-shell { height: calc(100vh - 36px) !important; max-height: 680px !important; } body.rs-login-v3 .rs-login-final-left { padding: 38px 46px !important; } body.rs-login-v3 .rs-login-final-left h1, body.rs-login-v3 .rs-login-final-left h2 { margin-top: 68px !important; font-size: clamp( 38px, 3.7vw, 54px ) !important; } body.rs-login-v3 .rs-login-feature-strip { margin-top: 22px !important; } body.rs-login-v3 .rs-login-feature-card { min-height: 72px !important; } body.rs-login-v3 .rs-login-final-right { padding: 38px 55px !important; } } /* ========================================================== TABLET ========================================================== */ @media (max-width: 900px) { html:has(body.rs-login-v3), body.rs-login-v3 { overflow: auto !important; } body.rs-login-v3 .rs-login-v3-root { width: 100% !important; height: auto !important; min-height: 100vh !important; padding: 15px !important; overflow: visible !important; } body.rs-login-v3 .rs-login-final-shell { grid-template-columns: 1fr !important; width: 100% !important; height: auto !important; max-height: none !important; } body.rs-login-v3 .rs-login-final-left, body.rs-login-v3 .rs-login-final-right { min-height: auto !important; } } /* ========================================================== PHONE ========================================================== */ @media (max-width: 600px) { body.rs-login-v3 .rs-login-final-left { display: none !important; } body.rs-login-v3 .rs-login-final-shell { display: block !important; } body.rs-login-v3 .rs-login-final-right { min-height: calc(100vh - 30px) !important; padding: 32px 22px !important; border-radius: 24px !important; } body.rs-login-v3 .rs-login-v3-links { justify-content: center !important; } } /* ========================================================== NEW BILL — CUSTOMER FOUND TEXT FIX ========================================================== */ body.rs-sale-new-page .customer-result, body.rs-sale-new-page .customer-preview, body.rs-sale-new-page .customer-info, body.rs-newbill-dashboard-theme .customer-result, body.rs-newbill-dashboard-theme .customer-preview, body.rs-newbill-dashboard-theme .customer-info { color: #17211f !important; } /* Main "Customer found" / success heading */ body.rs-sale-new-page .customer-result strong, body.rs-sale-new-page .customer-result h3, body.rs-sale-new-page .customer-result h4, body.rs-sale-new-page .customer-preview strong, body.rs-sale-new-page .customer-preview h3, body.rs-sale-new-page .customer-preview h4, body.rs-sale-new-page .customer-info strong, body.rs-sale-new-page .customer-info h3, body.rs-sale-new-page .customer-info h4, body.rs-newbill-dashboard-theme .customer-result strong, body.rs-newbill-dashboard-theme .customer-result h3, body.rs-newbill-dashboard-theme .customer-result h4, body.rs-newbill-dashboard-theme .customer-preview strong, body.rs-newbill-dashboard-theme .customer-preview h3, body.rs-newbill-dashboard-theme .customer-preview h4, body.rs-newbill-dashboard-theme .customer-info strong, body.rs-newbill-dashboard-theme .customer-info h3, body.rs-newbill-dashboard-theme .customer-info h4 { color: #111916 !important; opacity: 1 !important; font-weight: 900 !important; } /* Normal customer information */ body.rs-sale-new-page .customer-result span, body.rs-sale-new-page .customer-result p, body.rs-sale-new-page .customer-preview span, body.rs-sale-new-page .customer-preview p, body.rs-sale-new-page .customer-info span, body.rs-sale-new-page .customer-info p, body.rs-newbill-dashboard-theme .customer-result span, body.rs-newbill-dashboard-theme .customer-result p, body.rs-newbill-dashboard-theme .customer-preview span, body.rs-newbill-dashboard-theme .customer-preview p, body.rs-newbill-dashboard-theme .customer-info span, body.rs-newbill-dashboard-theme .customer-info p { color: #46514c !important; opacity: 1 !important; } /* Extra protection for success text/classes */ body.rs-sale-new-page [class*="customer"] .success, body.rs-sale-new-page [class*="customer"] [class*="success"], body.rs-newbill-dashboard-theme [class*="customer"] .success, body.rs-newbill-dashboard-theme [class*="customer"] [class*="success"] { color: #111916 !important; opacity: 1 !important; } /* Direct customer-found wording containers */ body.rs-sale-new-page [class*="customer-found"], body.rs-newbill-dashboard-theme [class*="customer-found"] { color: #111916 !important; opacity: 1 !important; font-weight: 900 !important; } /* ========================================================== SUPPLIER PURCHASE V3 ========================================================== */ .purchase-item-card{ overflow:hidden; } .purchase-item-card .section-divider{ margin:16px 0; } .purchase-metal-fields{ padding-top:2px; } .purchase-item-card .section-banner{ margin-top:0; margin-bottom:12px; } @media(max-width:1180px){ .purchase-metal-fields{ grid-template-columns:repeat(2,1fr); } } @media(max-width:680px){ .purchase-metal-fields{ grid-template-columns:1fr 1fr; } }