:root{--primary:#1a73b7;--secondary:#2e9e5b;--accent:#18b8a6;--ink:#1a2330;--bg:#f4f7fa;--panel:#fff;--muted:#697586;--line:#dbe2ea;--danger:#d94242;--warning:#d58b08;--shadow:0 1px 3px rgba(20,35,55,.12);--radius:13px;--sidebar:254px}
*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}body{margin:0;min-height:100vh;background:var(--bg)}button,input,select,textarea{font:inherit;color:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}.muted{color:var(--muted)}.small{font-size:.82rem}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.shell{min-height:100vh}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);z-index:20;background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column}.brand{height:72px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--line)}.brand-mark{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.8rem;background:linear-gradient(135deg,var(--primary),var(--secondary));overflow:hidden}.brand-mark img{width:100%;height:100%;object-fit:contain}.nav{display:grid;gap:6px;padding:22px 11px}.nav a{display:flex;align-items:center;gap:13px;min-height:46px;padding:0 14px;border-radius:11px;font-weight:650}.nav a:hover{background:color-mix(in srgb,var(--primary) 8%,transparent)}.nav a.active{background:var(--primary);color:#fff}.nav-ico{width:22px;text-align:center;font-size:1.15rem}.signout{margin:auto 16px 18px;padding:13px 10px;border:0;background:transparent;color:var(--muted);text-align:left}.topbar{position:fixed;z-index:15;top:0;left:var(--sidebar);right:0;height:72px;background:var(--panel);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 26px}.top-search{width:min(450px,60vw);height:40px;border:1px solid var(--line);border-radius:10px;background:var(--bg);padding:0 14px}.top-spacer{flex:1}.online{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;background:#dff8eb;color:#207a49;border-radius:999px;font-size:.78rem;font-weight:700}.online.offline{background:#fff0cf;color:#946008}.icon-btn{width:40px;height:40px;border:0;border-radius:10px;background:transparent;font-size:1.2rem}.main{margin-left:var(--sidebar);padding:100px 26px 90px;min-height:100vh;max-width:1600px}.page-head{display:flex;align-items:flex-start;gap:18px;margin-bottom:24px}.page-head h1{margin:0;font-size:1.65rem;letter-spacing:-.03em}.page-head p{margin:4px 0 0;color:var(--muted)}.page-actions{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}.btn{border:1px solid var(--line);background:var(--panel);min-height:39px;padding:8px 15px;border-radius:9px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:hover{filter:brightness(.98)}.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}.btn.secondary{background:var(--secondary);border-color:var(--secondary);color:#fff}.btn.danger{background:var(--danger);border-color:var(--danger);color:#fff}.btn.ghost{background:transparent}.btn:disabled{opacity:.45;cursor:not-allowed}.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.panel-pad{padding:20px}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.stat{padding:17px;min-height:95px;position:relative}.stat-label{font-size:.8rem;color:var(--muted);margin-bottom:8px}.stat-value{font-size:1.45rem;font-weight:800;letter-spacing:-.03em}.stat-bubble{position:absolute;right:15px;top:15px;width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:color-mix(in srgb,var(--primary) 12%,white);color:var(--primary)}.dashboard-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(280px,1fr);gap:14px}.card-title{font-size:1rem;margin:0 0 16px}.chart{height:245px;display:flex;align-items:end;gap:6%;padding:24px 12px 0;border-bottom:1px solid var(--line);background:repeating-linear-gradient(to top,transparent 0,transparent 59px,var(--line) 60px)}.bar{flex:1;max-width:74px;background:var(--primary);border-radius:8px 8px 0 0;min-height:2px;position:relative}.bar span{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);font-size:.72rem;color:var(--muted)}.list-stack{display:grid;gap:8px}.list-item{border:1px solid var(--line);border-radius:11px;padding:12px;display:flex;align-items:center;gap:12px}.list-item strong{display:block}.list-item .amount{margin-left:auto;font-weight:800}.amount.due{color:var(--danger)}.amount.paid{color:var(--secondary)}.avatar{width:38px;height:38px;display:grid;place-items:center;border-radius:50%;background:color-mix(in srgb,var(--primary) 12%,white);color:var(--primary);font-weight:800}.section-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.filters{display:flex;gap:10px;margin-bottom:14px}.input,.select,.textarea{width:100%;border:1px solid var(--line);border-radius:9px;background:var(--panel);padding:10px 12px;outline:none}.input:focus,.select:focus,.textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 16%,transparent)}.textarea{min-height:92px;resize:vertical}.search-grow{flex:1}.table-wrap{overflow:auto}.data-table{width:100%;border-collapse:collapse;min-width:760px}.data-table th,.data-table td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--line);font-size:.88rem}.data-table th{color:var(--muted);font-weight:700;background:#f8fafc}.data-table tr:last-child td{border-bottom:0}.data-table tbody tr:hover{background:color-mix(in srgb,var(--primary) 3%,white)}.linkish{color:var(--ink);font-weight:750}.badge{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:.75rem;font-weight:750;text-transform:capitalize}.badge.paid,.badge.active{background:#dcf7e8;color:#1b7b47}.badge.sent{background:#e3effe;color:#2867ad}.badge.partially-paid,.badge.partially{background:#fff0c9;color:#946008}.badge.draft{background:#e8ecf1;color:#586678}.badge.overdue,.badge.void{background:#ffe0e0;color:#b72929}.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.service-card{padding:16px;display:flex;flex-direction:column;min-height:166px}.service-top{display:flex;gap:8px}.service-top h3{font-size:1rem;margin:0}.service-top button{margin-left:auto}.service-meta{color:var(--secondary);font-size:.79rem;margin:4px 0 10px}.service-desc{font-size:.87rem;color:var(--muted);margin:0}.service-bottom{display:flex;align-items:end;margin-top:auto;padding-top:14px}.service-price{font-weight:850;font-size:1.1rem}.service-bottom .badge{margin-left:auto}
.modal-backdrop{position:fixed;z-index:100;inset:0;background:rgba(11,22,36,.48);display:grid;place-items:center;padding:18px}.modal{width:min(760px,100%);max-height:92vh;overflow:auto;background:var(--panel);border-radius:15px;box-shadow:0 24px 70px rgba(0,0,0,.24)}.modal-head{display:flex;align-items:center;padding:20px 22px 10px}.modal-head h2{margin:0;font-size:1.3rem}.modal-close{margin-left:auto;border:0;background:transparent;font-size:1.4rem}.modal-body{padding:12px 22px 22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.field{display:grid;gap:6px}.field.full{grid-column:1/-1}.field label{font-size:.82rem;font-weight:700}.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:20px}.checkline{display:flex;align-items:center;gap:9px}.checkline input{width:18px;height:18px}
.invoice-form{display:grid;gap:14px}.invoice-top-grid{display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:12px}.line-actions{display:flex;gap:9px;margin-bottom:12px}.invoice-totals-layout{display:grid;grid-template-columns:1.1fr .9fr;gap:14px}.totals{display:grid;gap:9px}.total-row{display:flex;justify-content:space-between}.total-row.grand{font-size:1.15rem;font-weight:850;border-top:1px solid var(--line);padding-top:10px}.line-input{min-width:80px;border:1px solid var(--line);border-radius:7px;padding:7px}.line-desc{min-width:220px}.empty-state{text-align:center;padding:32px;color:var(--muted)}.invoice-sheet{max-width:900px;margin:auto;background:#fff;color:#17212b;padding:40px;border-radius:8px}.invoice-brand{display:flex;align-items:flex-start;gap:18px}.invoice-logo{width:64px;height:64px;object-fit:contain}.invoice-brand h1{margin:0}.invoice-title{margin-left:auto;text-align:right}.invoice-parties{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:32px 0}.print-actions{display:flex;justify-content:flex-end;gap:9px;margin-bottom:15px}
.tabs{display:flex;gap:2px;padding:4px;background:#eaf0f4;border-radius:11px;overflow:auto;margin-bottom:10px}.tab{border:0;background:transparent;padding:9px 14px;border-radius:8px;font-weight:700;color:var(--muted);white-space:nowrap}.tab.active{background:var(--panel);color:var(--ink);box-shadow:var(--shadow)}.settings-section{padding:22px}.settings-section h3{margin:0 0 4px}.settings-section hr{border:0;border-top:1px solid var(--line);margin:22px 0}.logo-preview{width:160px;height:96px;border:1px solid var(--line);border-radius:10px;display:grid;place-items:center;margin:12px 0;overflow:hidden}.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}.color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.color-input{display:flex;gap:8px}.color-input input[type=color]{width:46px;height:42px;padding:2px;border:1px solid var(--line);border-radius:8px;background:#fff}.backup-card{max-width:680px}.danger-zone{color:var(--danger)}.toast{position:fixed;z-index:200;bottom:24px;right:24px;max-width:360px;background:#17212b;color:#fff;padding:12px 16px;border-radius:10px;box-shadow:0 12px 34px rgba(0,0,0,.2);opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:none}.mobile-title{display:none}
.dark{--ink:#e8eef5;--bg:#101722;--panel:#182231;--muted:#a7b2c0;--line:#2d3a4b;--shadow:0 1px 3px rgba(0,0,0,.25)}.dark .data-table th{background:#111b28}.dark .invoice-sheet{color:#17212b}.dark .brand-mark,.dark .avatar,.dark .stat-bubble{color:#fff}.dark .badge.paid,.dark .badge.active{background:#173d2b}.dark .badge.sent{background:#17304d}.dark .badge.partially-paid,.dark .badge.partially{background:#433512}.dark .badge.draft{background:#2a3543}.dark .badge.overdue,.dark .badge.void{background:#482323}
@media(max-width:1050px){.stats{grid-template-columns:repeat(2,1fr)}.service-grid{grid-template-columns:repeat(2,1fr)}.invoice-top-grid{grid-template-columns:1fr 1fr}.color-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){:root{--sidebar:0px}.sidebar{position:fixed;top:auto;right:0;width:auto;height:70px;border-right:0;border-top:1px solid var(--line);z-index:40}.brand,.signout{display:none}.nav{padding:7px 6px;display:grid;grid-template-columns:repeat(6,1fr);gap:1px;width:100vw}.nav a{min-height:55px;padding:4px 2px;display:flex;flex-direction:column;justify-content:center;gap:2px;border-radius:9px;font-size:.65rem}.nav-ico{font-size:1rem}.topbar{left:0;height:62px;padding:0 12px}.top-search{width:auto;flex:1}.online{padding:5px 8px}.mobile-title{display:block;font-weight:850}.main{margin-left:0;padding:84px 12px 92px}.page-head{align-items:center;margin-bottom:16px}.page-head h1{font-size:1.35rem}.page-head p{font-size:.8rem}.page-actions{width:auto}.page-actions .btn{padding:8px 11px}.stats{grid-template-columns:1fr 1fr;gap:8px}.stat{min-height:86px;padding:13px}.stat-value{font-size:1.16rem}.stat-bubble{display:none}.dashboard-grid,.section-grid,.invoice-totals-layout{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr}.filters{flex-direction:column}.table-wrap{border:0;box-shadow:none;background:transparent}.data-table{min-width:0;border-collapse:separate;border-spacing:0 9px}.data-table thead{display:none}.data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}.data-table tr{background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:11px;box-shadow:var(--shadow)}.data-table td{padding:5px 0;border:0;display:flex;justify-content:space-between;gap:14px}.data-table td::before{content:attr(data-label);color:var(--muted);font-size:.76rem;font-weight:700}.form-grid,.invoice-top-grid,.color-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.invoice-line-table{min-width:740px}.tabs{border-radius:9px}.settings-section{padding:16px}.invoice-sheet{padding:20px}.invoice-parties{grid-template-columns:1fr}.invoice-title{margin-left:0}.modal-backdrop{padding:7px;align-items:end}.modal{max-height:94vh;border-radius:16px 16px 0 0}.print-actions{justify-content:stretch}.print-actions .btn{flex:1}}
@media(max-width:420px){.nav a{font-size:.59rem}.stats{grid-template-columns:1fr}.page-head{flex-wrap:wrap}.page-actions{margin-left:0;width:100%;justify-content:stretch}.page-actions .btn{flex:1}.top-search{max-width:55vw}.chart{height:190px}}
@media print{body{background:#fff}.sidebar,.topbar,.print-actions,.page-head,.toast{display:none!important}.main{margin:0;padding:0}.invoice-sheet{max-width:none;border:0;box-shadow:none;padding:20px}.panel{box-shadow:none}}

/* Exact CCAJ website branding */
.brand{height:86px;justify-content:center;padding:8px 16px}
.brand .brand-mark{width:170px!important;height:60px!important;border-radius:12px;background:var(--primary);padding:9px 12px;box-sizing:border-box}
.brand .brand-mark img{width:100%;height:100%;object-fit:contain}
.logo-preview{width:180px;height:110px;background:var(--primary);padding:12px;box-sizing:border-box}
.invoice-logo{width:156px;height:88px;background:var(--primary);border-radius:12px;padding:12px;box-sizing:border-box;object-fit:contain}
@media(max-width:760px){.invoice-brand{flex-wrap:wrap}.invoice-logo{width:140px;height:80px}}