:root{
  --bg:#f3f3f1;
  --ink:#0b0b0b;
  --muted:#707070;
  --line:#deded8;
  --white:#fff;
  --radius:22px;
}
*{box-sizing:border-box}
body{margin:0;font-family:"DM Sans",sans-serif;background:var(--bg);color:var(--ink)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.hidden{display:none!important}
.eyebrow{font-size:11px;letter-spacing:.2em;font-weight:700;margin:0 0 8px}
.muted{color:var(--muted)}
.brand-mark{width:52px;height:52px;border-radius:16px;background:#111;color:#fff;display:grid;place-items:center;font-family:"Space Grotesk";font-weight:700}
.brand-mark.small{width:40px;height:40px;border-radius:12px}
.login-shell{min-height:100vh;display:grid;place-items:center;padding:24px;background:#0a0a0a}
.login-card{width:min(440px,100%);background:#fff;border-radius:30px;padding:42px}
.login-card h1{font:700 56px/0.9 "Space Grotesk";letter-spacing:-.05em;margin:28px 0 18px}
.stack{display:grid;gap:16px;margin-top:30px}
label{display:grid;gap:7px;font-size:13px;font-weight:600}
input,textarea,select{width:100%;border:1px solid var(--line);border-radius:13px;background:#fff;padding:13px 14px;outline:none}
input:focus,textarea:focus,select:focus{border-color:#111}
.btn{border:0;border-radius:13px;padding:12px 17px;font-weight:700}
.btn-primary{background:#111;color:#fff}
.btn-light{background:#fff;color:#111}
.btn-ghost{background:#eee;color:#111}
.form-error{color:#b42121;font-size:13px}
.app-shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}
.sidebar{position:sticky;top:0;height:100vh;background:#0b0b0b;color:#fff;padding:24px 16px;display:flex;flex-direction:column;justify-content:space-between}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:4px 8px 28px}
.sidebar-brand strong,.sidebar-brand span{display:block}.sidebar-brand span{font-size:12px;color:#999;margin-top:2px}
.nav{display:grid;gap:7px}
.nav-item{background:transparent;color:#aaa;border:0;border-radius:12px;padding:12px 14px;text-align:left;font-weight:600}
.nav-item:hover,.nav-item.active{background:#1d1d1d;color:#fff}
.logout{color:#aaa}
.main{padding:28px 34px 60px;min-width:0}
.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.topbar h2{font:700 34px/1 "Space Grotesk";letter-spacing:-.03em;margin:0}
.mobile-menu{display:none}
.hero-panel{background:#111;color:#fff;border-radius:30px;padding:34px;display:flex;justify-content:space-between;align-items:end}
.hero-panel h3{font:700 42px/1 "Space Grotesk";letter-spacing:-.04em;margin:8px 0}
.hero-panel .muted{color:#aaa}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:14px 0}
.stat-card,.panel{background:#fff;border:1px solid #e6e6e2;border-radius:var(--radius)}
.stat-card{padding:22px}
.stat-card span{display:block;color:var(--muted);font-size:13px;margin-bottom:14px}
.stat-card strong{font:700 27px "Space Grotesk"}
.panel{padding:24px}
.panel-heading,.section-actions,.dialog-heading,.dialog-actions,.preview-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}
.panel-heading h3,.dialog-heading h3{margin:0;font:700 22px "Space Grotesk"}
.section-actions{margin-bottom:16px}
.cards-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.client-card{background:#fff;border:1px solid #e6e6e2;border-radius:20px;padding:20px}
.client-card h3{margin:3px 0 7px}
.card-actions{display:flex;gap:8px;margin-top:16px}
.table-wrap{overflow:auto}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:14px 12px;border-bottom:1px solid #eee;white-space:nowrap}
th{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#777}
.status{display:inline-flex;padding:6px 9px;border-radius:999px;background:#eee;font-size:11px;font-weight:700;text-transform:capitalize}
.status.paid{background:#dff4e4}.status.sent,.status.deposit-paid{background:#fff0c9}.status.cancelled{background:#e4e4e4}
dialog{border:0;padding:0;background:transparent;max-width:none}
dialog::backdrop{background:rgba(0,0,0,.68);backdrop-filter:blur(5px)}
.dialog-card{width:min(590px,calc(100vw - 30px));max-height:90vh;overflow:auto;background:#fff;border-radius:26px;padding:26px;display:grid;gap:17px}
.wide-dialog .dialog-card{width:min(980px,calc(100vw - 30px))}
.icon-btn{width:38px;height:38px;border:0;border-radius:50%;font-size:24px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.full{grid-column:1/-1}
.divider{border-top:1px solid #eee}
.line-items-wrap{margin-top:10px}
.line-item{display:grid;grid-template-columns:1fr 90px 125px 110px 40px;gap:9px;align-items:end;margin-top:10px}
.line-total{padding:13px 8px}
.remove-line{width:38px;height:42px;border:0;border-radius:12px}
.invoice-bottom-grid{display:grid;grid-template-columns:1fr 330px;gap:22px;margin-top:15px}
.totals-card{background:#f4f4f1;border-radius:18px;padding:18px}
.totals-card>div{display:flex;justify-content:space-between;padding:9px 0}
.grand-total{border-top:1px solid #d8d8d2;margin-top:7px;padding-top:15px!important;font-size:18px}
.toast{position:fixed;z-index:999;right:22px;bottom:22px;background:#111;color:#fff;padding:13px 16px;border-radius:13px;opacity:0;transform:translateY(10px);pointer-events:none;transition:.2s}
.toast.show{opacity:1;transform:none}
.preview-dialog{width:100vw;height:100vh}
.preview-shell{height:100%;overflow:auto;background:#252525;padding:20px}
.preview-toolbar{position:sticky;top:0;z-index:3;background:#fff;padding:13px 16px;border-radius:16px;margin:0 auto 18px;width:min(900px,100%)}
.invoice-paper{width:794px;min-height:1123px;background:white;margin:auto;padding:58px;color:#111;font-family:"DM Sans",sans-serif}
.pdf-head{display:flex;justify-content:space-between;gap:40px}
.pdf-brand{font:700 29px "Space Grotesk"}
.pdf-title{font:700 58px/1 "Space Grotesk";letter-spacing:-.05em;margin:65px 0 40px}
.pdf-meta{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:38px}
.pdf-label{font-size:10px;letter-spacing:.17em;font-weight:700;color:#777;margin-bottom:8px}
.pdf-items{width:100%;border-collapse:collapse}
.pdf-items th,.pdf-items td{padding:13px 8px;border-bottom:1px solid #ddd}
.pdf-total-block{width:310px;margin:28px 0 40px auto}
.pdf-total-block>div{display:flex;justify-content:space-between;padding:8px 0}
.pdf-total-block .grand{font-size:20px;border-top:2px solid #111;padding-top:14px;margin-top:8px}
.pdf-footer{margin-top:60px;border-top:1px solid #ddd;padding-top:20px;display:grid;grid-template-columns:1fr 1fr;gap:30px;font-size:12px}
.empty{padding:32px 10px;color:#777;text-align:center}
@media(max-width:900px){
 .app-shell{grid-template-columns:1fr}
 .sidebar{position:fixed;z-index:20;left:-260px;width:245px;transition:.2s}
 .sidebar.open{left:0}
 .mobile-menu{display:block;border:0;border-radius:12px;padding:10px 14px}
 .main{padding:22px 18px 50px}
 .stats-grid{grid-template-columns:1fr 1fr}
 .cards-grid{grid-template-columns:1fr 1fr}
 .invoice-bottom-grid{grid-template-columns:1fr}
}
@media(max-width:620px){
 .login-card{padding:28px}.login-card h1{font-size:48px}
 .hero-panel{align-items:flex-start;flex-direction:column;gap:20px}.hero-panel h3{font-size:36px}
 .stats-grid,.cards-grid,.form-grid{grid-template-columns:1fr}
 .full{grid-column:auto}
 .line-item{grid-template-columns:1fr 65px 92px 38px}
 .line-item .line-total{display:none}
 .section-actions{align-items:flex-start;flex-direction:column}
}

.dashboard-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:14px;margin-top:14px}
.monthly-chart{display:flex;align-items:end;gap:10px;height:230px;padding-top:20px}
.month-bar-wrap{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px}
.month-bar{width:min(34px,70%);min-height:4px;background:#111;border-radius:8px 8px 3px 3px;transition:.2s}
.month-bar:hover{opacity:.7}
.month-label{font-size:10px;color:#777;text-transform:uppercase;letter-spacing:.08em}
.month-value{font-size:10px;font-weight:700;white-space:nowrap}
.invoice-tools{display:grid;grid-template-columns:minmax(220px,1fr) 180px auto;gap:10px;align-items:center;margin-bottom:14px}
.invoice-tools input,.invoice-tools select{background:#fff}
.archive-toggle{display:flex;grid-template-columns:auto 1fr;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);padding:11px 14px;border-radius:13px;white-space:nowrap}
.archive-toggle input{width:auto}
.action-menu{display:flex;flex-wrap:wrap;gap:6px}
.btn-mini{padding:8px 10px;border-radius:10px;font-size:12px}
.status.overdue{background:#ffdada;color:#8b1111}
.status.archived{background:#dedede}
.client-history-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.client-history-summary>div{background:#f4f4f1;border-radius:16px;padding:16px}
.client-history-summary span{display:block;color:#777;font-size:12px;margin-bottom:7px}
.client-history-summary strong{font:700 20px "Space Grotesk"}
.pdf-topline{height:7px;background:#111;margin:-58px -58px 48px}
.pdf-number-badge{display:inline-block;border:1px solid #111;border-radius:999px;padding:6px 10px;font-size:10px;font-weight:700;letter-spacing:.08em;margin-top:10px}
.pdf-due-card{background:#111;color:#fff;border-radius:18px;padding:18px 20px;margin:28px 0 0 auto;width:310px}
.pdf-due-card span{display:block;font-size:10px;letter-spacing:.15em;color:#bbb;margin-bottom:5px}
.pdf-due-card strong{font:700 27px "Space Grotesk"}
.pdf-status{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:700;color:#777;margin-top:7px}
@media(max-width:900px){.dashboard-grid{grid-template-columns:1fr}}
@media(max-width:620px){.invoice-tools{grid-template-columns:1fr}.client-history-summary{grid-template-columns:1fr}}

.status.accepted{background:#dff4e4;color:#174e25}
.status.declined{background:#f3dddd;color:#761b1b}
.status.expired{background:#eee0d2;color:#71421b}
.status.converted{background:#dedff8;color:#25265f}
.converted-note{display:inline-flex;align-items:center;padding:6px 9px;font-size:11px;font-weight:700;color:#666}


/* MD Solutions branded document theme */
.invoice-paper{
  --md-blue:#168FE5;
  --md-blue-deep:#0874C8;
  --md-blue-soft:#EAF6FF;
  --md-ink:#07090B;
  --md-grey:#66717A;
  background:#fff;
  color:var(--md-ink);
}
.pdf-topline{
  height:9px;
  background:linear-gradient(90deg,var(--md-blue-deep),var(--md-blue),#45B6FF);
  margin:-58px -58px 34px;
}
.branded-head{
  align-items:flex-start;
}
.pdf-logo-wrap{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
}
.pdf-logo{
  display:block;
  width:138px;
  height:138px;
  object-fit:contain;
  object-position:left center;
}
.pdf-contact{
  text-align:right;
  font-size:12px;
  line-height:1.7;
  color:#4E5961;
  max-width:260px;
}
.pdf-number-badge{
  display:inline-flex;
  align-items:center;
  background:var(--md-blue-soft);
  color:var(--md-blue-deep);
  border:1px solid #B9E1FF;
  border-radius:999px;
  padding:8px 13px;
  font-size:11px;
  line-height:1;
  font-weight:800;
  letter-spacing:.08em;
}
.pdf-title{
  color:var(--md-ink);
  margin:46px 0 36px;
  position:relative;
}
.pdf-title::after{
  content:"";
  display:block;
  width:64px;
  height:5px;
  border-radius:999px;
  background:var(--md-blue);
  margin-top:15px;
}
.pdf-label{
  color:var(--md-blue-deep);
  font-weight:800;
}
.pdf-meta{
  background:#F7FAFC;
  border:1px solid #E6EEF3;
  border-radius:16px;
  padding:20px;
}
.pdf-items{
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:1px solid #DCE7EE;
  border-radius:14px;
}
.pdf-items thead th{
  background:var(--md-ink);
  color:#fff;
  border-bottom:0;
  font-size:10px;
  letter-spacing:.12em;
}
.pdf-items thead th:first-child{
  box-shadow:inset 5px 0 0 var(--md-blue);
}
.pdf-items td{
  border-bottom:1px solid #E7EEF2;
}
.pdf-items tbody tr:last-child td{
  border-bottom:0;
}
.pdf-total-block{
  background:#F4F9FC;
  border:1px solid #D9EAF5;
  border-radius:15px;
  padding:15px 18px;
}
.pdf-total-block .grand{
  color:var(--md-blue-deep);
  border-top:2px solid var(--md-ink);
}
.pdf-due-card{
  background:var(--md-ink);
  color:#fff;
  border-radius:17px;
  padding:20px 22px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  width:330px;
  margin:30px 0 35px auto;
  box-shadow:inset 6px 0 0 var(--md-blue);
}
.pdf-due-card span{
  color:#A9D9FA;
  font-size:10px;
  letter-spacing:.16em;
  font-weight:800;
}
.pdf-due-card strong{
  font:700 23px "Space Grotesk";
}
.pdf-status{
  display:inline-flex;
  margin-top:9px;
  padding:6px 9px;
  border-radius:999px;
  background:var(--md-blue-soft);
  color:var(--md-blue-deep);
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.pdf-footer{
  border-top:3px solid var(--md-ink);
  position:relative;
}
.pdf-footer::before{
  content:"";
  position:absolute;
  left:0;
  top:-3px;
  width:80px;
  height:3px;
  background:var(--md-blue);
}


/* =========================================================
   MD SOLUTIONS — FULL PORTAL BRAND THEME
   ========================================================= */

:root{
  --bg:#F3F8FC;
  --ink:#071019;
  --muted:#66737D;
  --line:#D8E7F1;
  --white:#FFFFFF;
  --radius:22px;

  --md-blue:#168FE5;
  --md-blue-deep:#0874C8;
  --md-blue-dark:#075A9D;
  --md-blue-soft:#EAF6FF;
  --md-blue-pale:#F5FBFF;
  --md-black:#071019;
  --md-black-soft:#101B24;
}

/* PAGE + LOGIN */
body{
  background:
    radial-gradient(circle at top right, rgba(22,143,229,.08), transparent 28%),
    var(--bg);
  color:var(--ink);
}

.login-shell{
  background:
    radial-gradient(circle at 15% 10%, rgba(22,143,229,.30), transparent 28%),
    linear-gradient(145deg,#06111A 0%,#091A26 56%,#0A1118 100%);
}

.login-card{
  border:1px solid rgba(22,143,229,.18);
  box-shadow:0 26px 80px rgba(0,0,0,.28);
}

.login-card h1{
  color:var(--md-black);
}

.login-card::before{
  content:"";
  display:block;
  width:78px;
  height:5px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--md-blue-deep),var(--md-blue),#45B6FF);
  margin-bottom:24px;
}

/* BRAND MARKS */
.brand-mark{
  background:linear-gradient(145deg,var(--md-blue-deep),var(--md-blue));
  color:#fff;
  box-shadow:0 10px 25px rgba(22,143,229,.25);
}

.sidebar-brand .brand-mark{
  border:1px solid rgba(255,255,255,.12);
}

/* SIDEBAR */
.sidebar{
  background:
    linear-gradient(180deg,#06111A 0%,#081722 100%);
  border-right:1px solid rgba(22,143,229,.18);
}

.sidebar-brand strong{
  color:#fff;
}

.sidebar-brand span{
  color:#8EBFE3;
}

.nav-item{
  color:#8FA3B3;
}

.nav-item:hover{
  background:rgba(22,143,229,.10);
  color:#fff;
}

.nav-item.active{
  background:linear-gradient(90deg,rgba(22,143,229,.22),rgba(22,143,229,.08));
  color:#fff;
  box-shadow:inset 3px 0 0 var(--md-blue);
}

.logout:hover{
  color:#fff;
  background:rgba(255,255,255,.05);
}

/* TOP BAR */
.topbar{
  border-bottom:1px solid rgba(8,116,200,.10);
  padding-bottom:20px;
}

.topbar .eyebrow{
  color:var(--md-blue-deep);
}

.topbar h2{
  color:var(--md-black);
}

.mobile-menu{
  background:var(--md-black);
  color:#fff;
  border:1px solid rgba(22,143,229,.20);
}

/* HERO */
.hero-panel{
  background:
    radial-gradient(circle at 85% 20%, rgba(69,182,255,.25), transparent 26%),
    linear-gradient(135deg,#06111A 0%,#0B1D2A 62%,#0B3554 100%);
  border:1px solid rgba(22,143,229,.18);
  box-shadow:0 20px 45px rgba(8,32,50,.12);
}

.hero-panel .eyebrow{
  color:#78C7FF;
}

.hero-panel h3{
  color:#fff;
}

.hero-panel .muted{
  color:#A8C7DC;
}

.hero-panel .btn-light{
  background:#fff;
  color:var(--md-blue-deep);
}

/* CARDS + PANELS */
.stat-card,
.panel,
.client-card{
  border-color:#D9E8F2;
  box-shadow:0 8px 28px rgba(7,45,72,.045);
}

.stat-card{
  position:relative;
  overflow:hidden;
}

.stat-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(var(--md-blue-deep),var(--md-blue));
}

.stat-card span{
  color:#6D7A84;
}

.stat-card strong{
  color:var(--md-black);
}

.panel-heading .eyebrow,
.client-card .eyebrow,
.dialog-heading .eyebrow,
.full > .eyebrow{
  color:var(--md-blue-deep);
}

.panel-heading h3,
.dialog-heading h3,
.client-card h3{
  color:var(--md-black);
}

/* BUTTONS */
.btn-primary{
  background:linear-gradient(135deg,var(--md-blue-deep),var(--md-blue));
  color:#fff;
  box-shadow:0 8px 18px rgba(22,143,229,.18);
}

.btn-primary:hover{
  filter:brightness(.96);
  transform:translateY(-1px);
}

.btn-light{
  background:#fff;
  color:var(--md-blue-deep);
  border:1px solid #CFE7F7;
}

.btn-light:hover{
  background:var(--md-blue-soft);
}

.btn-ghost{
  background:var(--md-blue-soft);
  color:var(--md-blue-deep);
  border:1px solid #D4EAF8;
}

.btn-ghost:hover{
  background:#DDF1FF;
}

.icon-btn,
.remove-line{
  background:var(--md-blue-soft);
  color:var(--md-blue-deep);
}

.icon-btn:hover,
.remove-line:hover{
  background:#DDF1FF;
}

/* INPUTS */
input,
textarea,
select{
  border-color:#D7E6EF;
  background:#fff;
  color:var(--md-black);
}

input:hover,
textarea:hover,
select:hover{
  border-color:#BBDCF0;
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--md-blue);
  box-shadow:0 0 0 3px rgba(22,143,229,.10);
}

::placeholder{
  color:#9CAAB4;
}

/* TOOLBARS */
.invoice-tools{
  background:#FFFFFF;
  border:1px solid #D9E8F2;
  border-radius:18px;
  padding:12px;
  box-shadow:0 8px 22px rgba(7,45,72,.035);
}

.archive-toggle{
  border-color:#D7E6EF;
  background:#fff;
  color:#4C5B65;
}

/* TABLES */
table{
  background:#fff;
}

th{
  color:var(--md-blue-deep);
  background:#F4FAFE;
}

td{
  border-bottom-color:#E7F0F5;
}

tbody tr:hover td{
  background:#FAFDFF;
}

/* STATUS PILLS */
.status{
  border:1px solid transparent;
  font-weight:800;
}

.status.draft{
  background:#EEF4F8;
  color:#566671;
  border-color:#DCE6EC;
}

.status.sent{
  background:#EAF6FF;
  color:#0874C8;
  border-color:#CFEAFF;
}

.status.deposit-paid{
  background:#FFF4D9;
  color:#795717;
  border-color:#F4E2AE;
}

.status.paid,
.status.accepted{
  background:#E5F6EB;
  color:#246039;
  border-color:#CDEBD7;
}

.status.overdue,
.status.declined{
  background:#FFE8E8;
  color:#942B2B;
  border-color:#F5CACA;
}

.status.cancelled,
.status.archived{
  background:#EEF0F2;
  color:#5C6369;
  border-color:#DDE1E4;
}

.status.expired{
  background:#FFF0E0;
  color:#825020;
  border-color:#F0D8BE;
}

.status.converted{
  background:#EDE9FF;
  color:#4E3A8A;
  border-color:#DCD2FF;
}

/* DIALOGS */
dialog::backdrop{
  background:rgba(4,13,20,.72);
  backdrop-filter:blur(7px);
}

.dialog-card{
  border:1px solid rgba(22,143,229,.14);
  box-shadow:0 30px 90px rgba(0,0,0,.28);
}

.dialog-heading{
  border-bottom:1px solid #E6EFF5;
  padding-bottom:16px;
}

.dialog-actions{
  border-top:1px solid #E6EFF5;
  padding-top:16px;
}

/* TOTALS */
.totals-card{
  background:linear-gradient(180deg,#F7FCFF 0%,#EEF8FE 100%);
  border:1px solid #D4E9F6;
}

.grand-total{
  border-top-color:#BBDCEC;
  color:var(--md-blue-deep);
}

/* CHART */
.month-bar{
  background:linear-gradient(180deg,var(--md-blue),var(--md-blue-deep));
  box-shadow:0 4px 12px rgba(22,143,229,.16);
}

.month-value{
  color:var(--md-black);
}

.month-label{
  color:#73828C;
}

/* CLIENT HISTORY */
.client-history-summary .history-stat{
  background:linear-gradient(180deg,#FFFFFF,#F7FBFE);
  border:1px solid #D9E8F2;
}

/* TOAST */
.toast{
  background:linear-gradient(135deg,#071019,#0A2C43);
  border:1px solid rgba(22,143,229,.28);
  box-shadow:0 14px 38px rgba(0,0,0,.24);
}

/* SCROLLBARS */
*{
  scrollbar-color:#A9D7F4 #EEF6FB;
  scrollbar-width:thin;
}

::-webkit-scrollbar{
  width:10px;
  height:10px;
}
::-webkit-scrollbar-track{
  background:#EEF6FB;
}
::-webkit-scrollbar-thumb{
  background:#A9D7F4;
  border-radius:999px;
  border:2px solid #EEF6FB;
}

/* MOBILE */
@media(max-width:900px){
  .sidebar{
    box-shadow:20px 0 60px rgba(0,0,0,.25);
  }
}

@media(max-width:620px){
  .hero-panel{
    background:
      radial-gradient(circle at 95% 5%, rgba(69,182,255,.22), transparent 28%),
      linear-gradient(145deg,#06111A,#0B2C42);
  }
}