:root {
  font-family:
    Segoe UI,
    Arial,
    sans-serif;
  color: #203044;
  background: #f3f5f9;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
body {
  margin: 0;
}
button,
input,
select {
  font: inherit;
  padding: 9px 12px;
  border: 1px solid #cbd4e0;
  border-radius: 7px;
}
button {
  cursor: pointer;
  background: #edf1f8;
  color: #213c63;
}
button:hover {
  background: #dce5f3;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
a {
  color: #315892;
}
label {
  display: grid;
  gap: 6px;
}
form {
  display: grid;
  gap: 14px;
  max-width: 650px;
  padding: 22px;
  background: white;
  border: 1px solid #dbe1eb;
  border-radius: 12px;
  margin: 20px 0;
}
aside {
  position: fixed;
  inset: 0 auto 0 0;
  width: 236px;
  background: #302e4a;
  color: #fff;
  padding: 20px 12px;
  display: flex;
  flex-direction: column;
}
.brand {
  font-size: 23px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
aside small {
  letter-spacing: 2px;
  font-size: 10px;
  margin: 20px 10px;
}
nav {
  display: grid;
  gap: 5px;
}
nav button {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  border: 0;
  background: transparent;
  color: #e4e2f2;
  font-size: 14px;
  padding: 10px;
}
nav button[aria-current="page"] {
  background: #514b75;
  color: #fff;
}
svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
footer {
  margin-top: auto;
  display: grid;
  gap: 12px;
  font-size: 13px;
  padding: 15px 7px;
}
main {
  margin-left: 236px;
  padding: 32px;
  min-width: 0;
}
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
h1 {
  margin: 8px 0 20px;
  font-size: 29px;
}
small {
  color: #8492a8;
}
#feedback {
  position: fixed;
  bottom: 8px;
  right: 18px;
  max-width: 600px;
  background: #fff1cd;
  color: #663c00;
  border-radius: 8px;
  padding: 12px;
  z-index: 10;
}
#feedback:empty {
  display: none;
}
#access {
  max-width: 560px;
  margin: 60px auto;
  padding: 24px;
}
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
}
.card {
  background: white;
  border: 1px solid #dbe1eb;
  border-radius: 12px;
  padding: 22px;
}
.card strong {
  display: block;
  font-size: 30px;
  margin-top: 12px;
}
.table-wrap {
  overflow: auto;
  background: white;
  border: 1px solid #dbe1eb;
  border-radius: 10px;
  margin: 18px 0;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
  white-space: nowrap;
}
th,
td {
  text-align: left;
  padding: 13px;
  border-bottom: 1px solid #e8ecf3;
}
th {
  background: #edf1f8;
}
input[type="search"] {
  width: min(100%, 400px);
  margin: 8px 0;
}
p {
  line-height: 1.6;
}
.collapsed aside {
  width: 76px;
}
.collapsed main {
  margin-left: 76px;
}
.collapsed nav span,
.collapsed aside small,
.collapsed footer span {
  display: none;
}
.collapsed .brand {
  font-size: 0;
}
.collapsed footer button {
  font-size: 11px;
  padding: 6px;
}
.collapsed nav button {
  justify-content: center;
}
@media (max-width: 750px) {
  aside {
    width: 76px;
  }
  main {
    margin-left: 76px;
    padding: 16px;
  }
  nav span,
  aside small,
  footer span {
    display: none;
  }
  .brand {
    font-size: 0;
  }
  nav button {
    justify-content: center;
  }
  footer button {
    padding: 6px;
    font-size: 11px;
  }
  h1 {
    font-size: 23px;
  }
  form {
    padding: 15px;
  }
}
/* Dense navigation shared with messaging workspaces. */
aside {
  width: 210px;
  padding: 10px 8px;
  min-height: 0;
}
main {
  margin-left: 210px;
}
.brand {
  font-size: 19px;
}
aside small {
  margin: 8px 4px 12px;
}
nav {
  gap: 1px;
  overflow-y: auto;
  min-height: 0;
}
nav button {
  min-height: 30px;
  padding: 5px 9px;
  font-size: 13px;
  line-height: 20px;
}
.collapsed aside {
  width: 68px;
}
.collapsed main {
  margin-left: 68px;
}
@media (max-width: 750px) {
  aside {
    width: 68px;
  }
  main {
    margin-left: 68px;
  }
  .brand {
    font-size: 0;
  }
}
.grid-pager{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 28px;font-size:13px}.grid-pager>span{margin-right:auto;color:#62718a}.grid-pager label{display:flex;align-items:center;gap:8px;margin:0}.grid-pager select{width:auto;margin:0;padding:6px 10px}.grid-pager button,.row-actions button{padding:6px 12px;font-size:13px;white-space:nowrap}.grid-pager button:disabled{opacity:.4;cursor:default}.row-actions{white-space:nowrap}

/* Account security shares the active portal shell. */
.security-panel{max-width:720px;margin:0;padding:24px;border:1px solid #d6e3dd;border-radius:14px;background:white;box-shadow:0 5px 20px #173e3408}
.security-panel h1{font-size:22px;margin:0 0 8px}.security-panel h2{font-size:18px}
.security-panel form{display:grid;gap:14px;margin-top:20px}.security-panel [hidden]{display:none!important}
.security-panel label{display:grid;gap:6px;font-size:14px;margin:0}.security-panel input{box-sizing:border-box;width:100%;padding:10px 12px;min-width:0;border:1px solid #bfd0c8;border-radius:8px;font:inherit}
.security-panel p{font-size:14px;line-height:1.6}.security-panel button{justify-self:start;padding:10px 18px}.security-panel #status:empty{display:none}
.security-panel #status:not(:empty){padding:10px;background:#edf4f0;border-radius:8px}.security-panel #recovery{border-top:1px solid #d6e3dd;padding-top:16px}
@media(max-width:600px){.security-panel{padding:16px}.security-panel button{width:100%}}


/* Shared action colors and icons across all portals. */
body button.action-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--action-bg)!important;color:var(--action-fg)!important;border:1px solid var(--action-border)!important;vertical-align:middle}
button.action-button[data-action-tone=neutral]{--action-bg:#e2e8f0;--action-fg:#334155;--action-border:#cbd5e1}
button.action-button[data-action-tone=success]{--action-bg:#187447;--action-fg:#fff;--action-border:#187447}
button.action-button[data-action-tone=info]{--action-bg:#285fa5;--action-fg:#fff;--action-border:#285fa5}
button.action-button[data-action-tone=danger]{--action-bg:#b73535;--action-fg:#fff;--action-border:#b73535}
button.action-button[data-action-tone=warning]{--action-bg:#925c09;--action-fg:#fff;--action-border:#925c09}
button.action-button[data-action-tone=export]{--action-bg:#7545a7;--action-fg:#fff;--action-border:#7545a7}
button.action-button[data-action-tone=primary]{--action-bg:#076c5c;--action-fg:#fff;--action-border:#076c5c}
button.action-button .action-icon{width:17px;height:17px;flex:0 0 17px;pointer-events:none}
body button.action-button:hover:not(:disabled){filter:brightness(.96);box-shadow:0 2px 5px #152b3b15}
body button.action-button:focus-visible{outline:3px solid #63a0de;outline-offset:2px}
body button.action-button:disabled{opacity:.48;cursor:not-allowed;box-shadow:none}

.smtp-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;background:white;border:1px solid #ccd5e1;border-radius:12px;padding:20px;margin-bottom:14px}.smtp-settings h2,.smtp-settings p{grid-column:1/-1;margin:0}.smtp-settings label{display:grid;gap:5px}.smtp-settings input,.smtp-settings select,.smtp-test input{font:inherit;padding:9px;border:1px solid #bdc9d8;border-radius:6px;min-width:0}.smtp-settings button{justify-self:start}.smtp-test{display:flex;gap:10px;flex-wrap:wrap}@media(max-width:650px){.smtp-settings{grid-template-columns:1fr}}

/* Compact page heading: keep the work area near the top. */
#panel>main{padding:14px 24px}
#panel>main>header{min-height:32px;gap:12px;margin:0 0 12px;flex-wrap:wrap}
#panel>main>header small{display:none}
#panel>main>header h1{font-size:22px;line-height:1.25;margin:0}
.admin-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px;margin-left:auto;flex-wrap:wrap}
#notice{margin:0;font-size:12px;color:#62718a}
#notice:empty{display:none}
#refresh{padding:6px 12px;min-height:32px;font-size:13px}
#content>:first-child{margin-top:0}
@media(max-width:750px){#panel>main{padding:12px 14px}.admin-header-actions{gap:8px}#notice{font-size:11px}}

.pricing-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start;margin-bottom:18px}.pricing-columns>section{min-width:0}.pricing-columns .pricing-form{margin:0;padding:18px;border:1px solid #ccd5e1;border-radius:12px;background:white;max-width:none}.pricing-form h2{font-size:18px;margin:0 0 14px}.pricing-form p{font-size:13px;line-height:1.5}.pricing-form input[type=checkbox]{width:auto;margin:0 0 0 8px}.pricing-billing-details{min-width:0}.pricing-billing-details h2{font-size:18px;margin:0 0 10px}@media(max-width:950px){.pricing-columns{grid-template-columns:1fr}}

/* Consistent compact data grids. */
 table th,table td{padding:7px 10px;font-size:12px;line-height:1.4}
 table td button{padding:5px 8px;min-height:28px;font-size:12px;margin-top:0;margin-bottom:0}
 table td button svg{width:15px;height:15px;flex-basis:15px}

/* Consistent professional action controls across application views. */
body button.action-button[data-action-tone]:not(:where(.profile-items button)){
  --action-bg:#ffffff;--action-fg:#334155;--action-border:#d5dee7;
  font-weight:600;border-radius:6px;box-shadow:none;
  transition:background-color .15s,border-color .15s,color .15s;
}
body button.action-button[data-action-tone=primary]:not(:where(.profile-items button)),
body button.action-button[data-action-tone=success]:not(:where(.profile-items button)){
  --action-bg:#176b54;--action-fg:#ffffff;--action-border:#176b54;
}
body button.action-button[data-action-tone=danger]:not(:where(.profile-items button)){
  --action-bg:#fffafa;--action-fg:#a43e3e;--action-border:#e8cdcd;
}
body button.action-button:hover:not(:disabled):not(:where(.profile-items button)){
  --action-bg:#f1f5f9;--action-border:#aebfce;filter:none;box-shadow:none;
}
body button.action-button[data-action-tone=primary]:hover:not(:disabled):not(:where(.profile-items button)),
body button.action-button[data-action-tone=success]:hover:not(:disabled):not(:where(.profile-items button)){
  --action-bg:#125641;--action-border:#125641;
}
body button.action-button[data-action-tone=danger]:hover:not(:disabled):not(:where(.profile-items button)){
  --action-bg:#fceeee;--action-border:#d8a9a9;
}
body button.action-button .action-icon{stroke-width:1.8}
body button.action-button:focus-visible{outline:2px solid #328773;outline-offset:3px}
body button.action-button:disabled{opacity:.5;box-shadow:none}
@media(prefers-reduced-motion:reduce){body button.action-button{transition:none}}
/* Subtle action accents: light surfaces, colored icons and matching borders. */
body button.action-button[data-action-tone=info]:not(:where(.profile-items button)){
  --action-border:#a9c4e4;--action-icon-color:#356da8;
}
body button.action-button[data-action-tone=export]:not(:where(.profile-items button)){
  --action-border:#c8b9df;--action-icon-color:#7856a0;
}
body button.action-button[data-action-tone=warning]:not(:where(.profile-items button)){
  --action-border:#d9c8a5;--action-icon-color:#997329;
}
body button.action-button[data-action-tone=danger]:not(:where(.profile-items button)){
  --action-border:#dfb4b4;--action-icon-color:#b34c4c;
}
body button.action-button[data-action-tone] .action-icon{color:var(--action-icon-color,currentColor)}
body button.action-button[data-action-tone=info]:hover:not(:disabled):not(:where(.profile-items button)){
  --action-bg:#edf4fc;--action-border:#719dce;
}
body button.action-button[data-action-tone=export]:hover:not(:disabled):not(:where(.profile-items button)){
  --action-bg:#f4f0fa;--action-border:#a58bc6;
}
body button.action-button[data-action-tone=warning]:hover:not(:disabled):not(:where(.profile-items button)){
  --action-bg:#faf6ed;--action-border:#bca16c;
}
/* Match the customer workspace shell. */
:root{background:#f2f6fc;color:#203e61}
#panel aside{background:#fafbfc;color:#263445;border-right:1px solid #203e61}
#panel .brand{color:#163d35;letter-spacing:-.4px}
#panel #collapse{background:#fff;color:#64748b;border:1px solid #dce4eb;border-radius:7px}
#panel aside>small{color:#203e61;font-weight:700;letter-spacing:1.6px}
#panel nav button{background:transparent;color:#526174;font-weight:500;border-radius:7px}
#panel nav button svg{color:#7b8a9b;stroke-width:2.8}
#panel nav button:hover{background:#edf1f5;color:#263445}
#panel nav button[aria-current=page]{background:#e3f2eb;color:#14634d;font-weight:650}
#panel nav button[aria-current=page] svg{color:#198262}
#panel nav button:focus-visible{outline:2px solid #4c9c85;outline-offset:2px}
#panel footer{border-top:1px solid #e2e8ee;padding:12px 7px 0;gap:9px}
#panel #security-link{display:flex;align-items:center;gap:9px;padding:7px;color:#526174;text-decoration:none;border-radius:7px}
#panel #security-link:hover{background:#edf1f5}
#panel #admin-name{color:#334155;font-weight:600}
#panel #logout{background:#f5f0f0!important;color:#9c4747!important;border-color:#eadcdc!important;box-shadow:none}
#panel #logout:hover{background:#f5e3e3!important;filter:none}
#panel main{padding:24px;min-width:0}
#panel header{gap:16px;flex-wrap:wrap;margin-bottom:18px}
#panel header h1{font-size:24px;margin:0;line-height:1.3}
#panel #content{background:#fff;border:1px solid #d6e3dd;border-radius:14px;padding:20px;min-width:0;overflow-x:auto}
#content h2{font-size:20px;margin:0 0 12px;line-height:1.35}
#content p{font-size:13px;color:#607286;margin:8px 0 18px}
#content form{max-width:none}
#content .cards{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px}
#content .card{padding:18px;background:#f8fafc;border-color:#e0e8ef;font-size:13px}
#content .card strong{font-size:28px;color:#203e61;margin-top:10px}
.admin-plan-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:16px;align-items:stretch}
#content .admin-plan-grid .pricing-form{margin:0;padding:18px;gap:12px;min-width:0;background:#fafcfd;border-color:#dce5ed;display:flex;flex-direction:column}
.pricing-form h3{font-size:17px;margin:0 0 4px;color:#203e61}
.pricing-form label{font-size:13px;color:#526174;min-width:0}
.pricing-form input:not([type=checkbox]){width:100%;min-width:0;font-size:14px;padding:8px 10px;background:#fff}
.pricing-form .plan-availability{display:flex;align-items:center;justify-content:space-between;gap:8px}
.pricing-form input[type=checkbox]{width:16px;height:16px;accent-color:#176b54}
#content .pricing-form>button{margin-top:auto;align-self:stretch}
@media(max-width:750px){#panel main{padding:16px}#panel #content{padding:16px}#panel header h1{font-size:22px}.admin-plan-grid{grid-template-columns:1fr}}
/* Section colors on admin navigation icons only. */
#panel #nav button[title="Dashboard"] svg{color:#3687a3}
#panel #nav button[title="Customers / Workspaces"] svg{color:#8065b0}
#panel #nav button[title="Users & Access"] svg{color:#547dc1}
#panel #nav button[title="Verification Links"] svg{color:#449786}
#panel #nav button[title="Plans & Pricing"] svg{color:#b38a35}
#panel #nav button[title="Payment History"] svg{color:#558a6c}
#panel #nav button[title="Subscriptions & Invoices"] svg{color:#8e6ab1}
#panel #nav button[title="WhatsApp Connections"] svg{color:#319c83}
#panel #nav button[title="Campaign Monitor"] svg{color:#c47d5c}
#panel #nav button[title="Integrations & Settings"] svg{color:#5c81ae}
#panel #nav button[title="Audit & System Health"] svg{color:#4b95b0}
#panel #security-link svg{color:#8e6ab1;stroke-width:2.2}
/* Keep full admin menu labels on one line. */
@media(min-width:751px){
  body:not(.collapsed) #panel aside{width:260px}
  body:not(.collapsed) #panel main{margin-left:260px}
}
#panel #nav button{white-space:nowrap}
#panel #nav button>span{white-space:nowrap}
/* Compact integration controls, with detailed configuration below. */
.admin-settings-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.admin-settings-grid>*{grid-column:1/-1;min-width:0}
#content .admin-settings-grid .settings-toggle-card{grid-column:auto;display:flex;flex-direction:column;gap:12px;margin:0;padding:18px;border-radius:10px}
#content .admin-settings-grid .smtp-settings h2{font-size:20px;line-height:1.3;margin:0}
#content .admin-settings-grid .smtp-settings p{font-size:14px;line-height:1.5;margin:0}
#content .admin-settings-grid .settings-toggle-card label{display:flex;align-items:center;justify-content:flex-start;gap:10px;font-size:15px;font-weight:600;margin:0}
#content .admin-settings-grid input[type=checkbox]{width:17px;height:17px;min-height:0;padding:0;margin:0;flex:0 0 17px;accent-color:#176b54}
#content .admin-settings-grid .settings-toggle-card button{align-self:flex-start;margin-top:auto;font-size:14px;padding:9px 12px}
#content .admin-settings-grid .smtp-settings:not(.settings-toggle-card){margin:0;padding:18px;gap:12px 18px}
#content .admin-settings-grid .smtp-settings label{font-size:14px}
#content .admin-settings-grid .smtp-settings input:not([type=checkbox]),#content .admin-settings-grid .smtp-settings select{font-size:14px;padding:8px 10px}
#content .admin-settings-grid .smtp-test{margin:0;align-items:center}
#content .admin-settings-grid>p{font-size:14px;line-height:1.5;margin:0}
@media(max-width:1200px){.admin-settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:850px){.admin-settings-grid{grid-template-columns:minmax(0,1fr)}}

/* Keep collapsed sidebar controls visible and inside the navigation rail. */
#panel #collapse{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:0 0 36px;padding:8px;font-size:16px}
#panel #collapse svg{display:block;width:18px;height:18px}
body.collapsed #panel .brand{justify-content:center}
body.collapsed #panel #collapse svg{transform:rotate(180deg)}
body.collapsed #panel footer{padding:12px 0;gap:10px;justify-items:center}
body.collapsed #panel footer .nav-icon{display:flex}
body.collapsed #panel footer .nav-label,body.collapsed #panel #admin-name{display:none}
body.collapsed #panel #security-link,body.collapsed #panel #logout{display:flex;align-items:center;justify-content:center;gap:0;width:40px;height:40px;padding:9px;margin:0;min-width:0}
body.collapsed #panel #logout svg{display:block;width:20px;height:20px}
@media(max-width:750px){
 #panel .brand{justify-content:center}
 #panel footer{padding:12px 0;gap:10px;justify-items:center}
 #panel footer .nav-icon{display:flex}
 #panel footer .nav-label,#panel #admin-name{display:none}
 #panel #security-link,#panel #logout{display:flex;align-items:center;justify-content:center;gap:0;width:40px;height:40px;padding:9px;margin:0;min-width:0}
 #panel #logout svg{display:block;width:20px;height:20px}
}

#content .dashboard-card-heading{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.4}
#content .dashboard-card-heading svg{width:22px;height:22px;stroke-width:2.2;flex-shrink:0}
#content .dashboard-value{display:inline-block;margin-top:16px;font-size:30px;font-weight:700;line-height:1.2;color:#203e61;text-decoration:none;border-radius:4px}
#content .dashboard-value:hover{color:#176b54;text-decoration:underline;text-underline-offset:5px}
#content .dashboard-value:focus-visible{outline:2px solid #368b9f;outline-offset:5px}

/* Dashboard metrics: four cards per row on desktop. */
#content .cards:has(.dashboard-card){grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){#content .cards:has(.dashboard-card){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){#content .cards:has(.dashboard-card){grid-template-columns:minmax(0,1fr)}}