/* MassHeads Sales Portal / Design System v1.0 adaptation */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=JetBrains+Mono:wght@500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Syne:wght@700;800&display=swap');
:root{--bg-paper:#F7F5F0;--bg-paper-alt:#EFECE4;--bg-white:#fff;--bg-dark:#0B0B0E;--accent-red:#FF1F30;--bg-red:#E70027;--text-muted:#5C5B61;--border-dark:rgba(11,11,14,.18);--shadow-hard:5px 5px 0 #0B0B0E;--shadow-red:5px 5px 0 #FF1F30;--font-display:'Syne',sans-serif;--font-sans:'Plus Jakarta Sans',sans-serif;--font-mono:'JetBrains Mono',monospace;--font-hand:'Caveat',cursive;--radius-md:16px;--radius-lg:24px;--accent:#FF1F30;--ink:#0B0B0E;--muted:#5C5B61;--border:rgba(11,11,14,.17);--bg:#F7F5F0;--white:#fff}
*{box-sizing:border-box}
html{font-size:15px;scroll-behavior:smooth}
body{background:var(--bg-paper);color:var(--bg-dark);font:400 14px/1.6 var(--font-sans);margin:0;min-height:100vh}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:999;opacity:.028;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
button,input,select,textarea{font:inherit}a{color:inherit;text-decoration:none}a:hover{color:var(--bg-red)}
.wrap{max-width:1390px;padding:0 30px;margin:0 auto}
header{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:94px;padding:18px 0 22px;border-bottom:2px solid var(--bg-dark);flex-wrap:wrap;position:relative;z-index:110}
.brand{display:flex;align-items:center;gap:12px;font:800 17px/1.2 var(--font-display)}
.brand-logo{width:48px;height:48px;object-fit:contain;flex-shrink:0}
.mh-wordmark{font:800 23px/1.13 var(--font-display);letter-spacing:-.07em}.mh-wordmark em{color:var(--bg-red);font-style:normal}.mh-wordmark small{font:600 10px/1.3 var(--font-mono);letter-spacing:.02em;color:var(--text-muted);display:block;margin-top:4px}
nav{display:flex;align-items:center;gap:5px;flex-wrap:wrap;background:var(--bg-paper-alt);border:1px solid var(--border-dark);border-radius:999px;padding:5px}
nav>a{font-weight:800;font-size:12px;padding:10px 13px;border-radius:999px;transition:.2s}
nav>a:hover{background:var(--bg-dark);color:#fff}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.03em;line-height:1.14}h1{font-size:clamp(32px,4vw,54px);margin:34px 0 10px;font-weight:800}h2{font-size:20px;margin:0 0 18px;font-weight:800}h3{font-size:16px}
.sub,.muted{color:var(--text-muted)}.sub{font-size:14px;margin:0 0 22px}
.grid,.mh-kpi-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;margin:24px 0}
.stat,.panel,.login,.mh-kpi-card{background:var(--bg-white);border:2px solid var(--bg-dark);border-radius:var(--radius-md);box-shadow:var(--shadow-hard);padding:22px}
.panel{margin-bottom:28px;min-width:0}
.panel h2{margin-bottom:18px}.panel>p{margin-top:0}
.stat span,.mh-kpi-card span{font:700 11px var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted)}
.stat strong,.mh-kpi-card strong{font:800 clamp(26px,3vw,38px)/1.1 var(--font-display);display:block;letter-spacing:-.04em;margin:12px 0}
.mh-kpi-card{min-height:158px;position:relative;transition:transform .25s,box-shadow .25s}
.mh-kpi-card:hover{transform:translate(-3px,-3px);box-shadow:8px 8px 0 var(--accent-red)}
.mh-kpi-card small{color:var(--text-muted);font-size:12px}
.mh-kpi-card:nth-child(2){background:var(--bg-paper-alt)}
.mh-kpi-card:nth-child(3){box-shadow:var(--shadow-red)}
.mh-page-intro{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;margin:32px 0 22px}
.mh-page-intro h1{margin:6px 0 9px}
.mh-page-intro .sub{margin:0}
.mh-eyebrow{font:800 11px var(--font-mono);letter-spacing:.13em;color:var(--bg-red);text-transform:uppercase}
button,.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:2px solid var(--bg-dark);border-radius:999px;background:var(--accent-red);box-shadow:3px 3px 0 var(--bg-dark);color:#fff;padding:10px 17px;cursor:pointer;font:800 12px/1.25 var(--font-sans);white-space:nowrap;transition:transform .18s,box-shadow .18s,background .18s}
button:hover,.btn:hover{background:var(--bg-dark);color:#fff;box-shadow:5px 5px 0 var(--accent-red);transform:translate(-1px,-1px)}
button:disabled{opacity:.5;cursor:not-allowed}
.button-subtle{background:#fff;color:var(--bg-dark)}.button-subtle:hover{background:var(--bg-paper-alt);color:var(--bg-dark)}
.textbutton{border:0;background:transparent;color:var(--text-muted);padding:4px;box-shadow:none}
label{display:block;font:800 11px var(--font-mono);letter-spacing:.02em;margin:14px 0 6px}
input:not([type=checkbox]),select,textarea{background:#fff;border:1.5px solid var(--bg-dark);border-radius:10px;padding:11px 13px;width:100%;color:var(--bg-dark);outline:none;min-height:43px}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--accent-red);box-shadow:3px 3px 0 var(--accent-red)}
textarea{min-height:105px;resize:vertical}
input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent-red);cursor:pointer}
:focus-visible{outline:3px solid var(--accent-red);outline-offset:3px}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}
.panel-head h2{margin:0}
table{width:100%;text-align:left;border-collapse:collapse;min-width:690px}
th{background:var(--bg-paper-alt);font:800 10px var(--font-mono);letter-spacing:.05em;text-transform:uppercase}
td,th{padding:14px 12px;border-bottom:1px solid var(--border-dark);vertical-align:middle}
tr:hover td{background:#ff1f3008}
tr:last-child td{border-bottom:0}
.pill{display:inline-block;padding:5px 10px;border-radius:999px;background:var(--bg-paper-alt);border:1px solid var(--border-dark);font:700 10px var(--font-mono);white-space:nowrap}.pill.green{background:#e2faeb}.pill.red{background:#ffe5e9;color:#900a20}
.filters{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-bottom:17px}.filters input{max-width:330px}.filters select{max-width:240px}
.notice{background:#fff3df;border:2px solid var(--bg-dark);border-radius:10px;padding:15px;margin:18px 0}
.login{max-width:450px;margin:9vh auto;padding:32px;box-shadow:8px 8px 0 var(--accent-red)}
.login .brand{margin-bottom:26px}.login h2{font-size:26px}
.two,.mh-settings-grid,.mh-dashboard-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.mh-dashboard-cols{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.mh-settings-grid .panel{min-width:0}
footer{font:700 10px var(--font-mono);text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-top:1px solid var(--border-dark);padding:27px 0;margin:55px 0}
.fieldsmall{max-width:240px}.form-row{margin-top:20px}.tableform{display:inline}.actions,.mh-actions,.mh-bulk-buttons,.mh-transfer-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin:14px 0}
a.link{color:var(--bg-red);font-weight:800}
.mh-form{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;margin-bottom:20px}
.mh-form label{margin:0}.mh-form input,.mh-form select{max-width:255px}.mh-target{max-width:340px}
.mh-bulk-buttons{border-top:1px dashed var(--border-dark);margin-top:20px;padding-top:16px}
.mh-pass{display:flex;align-items:center;gap:8px}.mh-pass input{min-width:0;flex:1}
.mh-account-menu,.mh-notification-menu{position:relative;z-index:300;font-size:12px}
.mh-account-menu summary,.mh-notification-menu summary{display:flex;align-items:center;gap:8px;list-style:none;cursor:pointer;font-weight:800;background:#fff;border:1.5px solid var(--bg-dark);border-radius:999px;padding:6px 13px 6px 6px;white-space:nowrap}
.mh-account-menu summary::-webkit-details-marker,.mh-notification-menu summary::-webkit-details-marker{display:none}
.mh-account-menu[open] summary,.mh-notification-menu[open] summary{box-shadow:3px 3px 0 var(--accent-red)}
.mh-avatar,.mh-bell{display:grid;place-items:center;background:var(--accent-red);width:32px;height:32px;border-radius:50%;border:1px solid var(--bg-dark);color:#fff;font:800 13px var(--font-display)}
.mh-bell{font-size:11px;font-weight:700}.mh-caret{font-size:19px}
.mh-account-dropdown,.mh-notification-dropdown{position:absolute;right:0;top:calc(100% + 12px);z-index:500;background:#fff;border:2px solid var(--bg-dark);border-radius:14px;box-shadow:6px 6px 0 var(--bg-dark);width:min(360px,90vw);padding:12px;max-height:70vh;overflow:auto}
.mh-account-dropdown{width:260px}.mh-account-meta{padding:10px;border-bottom:1px dashed var(--border-dark)}
.mh-account-meta strong,.mh-account-meta small{display:block}.mh-account-meta small{font-size:11px;color:var(--muted);overflow-wrap:anywhere;margin-top:3px}
.mh-account-dropdown a,.mh-sign-out{display:block;width:100%;text-align:left;padding:11px!important;background:#fff!important;color:var(--bg-dark)!important;border:0!important;border-radius:6px!important;box-shadow:none!important;font:700 12px var(--font-sans)!important;transform:none!important}
.mh-account-dropdown a:hover,.mh-sign-out:hover{background:var(--bg-paper-alt)!important}
.mh-notification-count{background:var(--bg-dark);color:#fff;border-radius:999px;padding:2px 7px;font:800 10px var(--font-mono)}
.mh-notification-head{display:flex;align-items:center;justify-content:space-between;padding:7px 9px 13px;border-bottom:1px solid var(--border-dark);gap:15px}
.mh-notification-head strong{font:800 18px var(--font-display)}.mh-notification-head a{font:700 11px var(--font-mono);color:var(--bg-red)}
.mh-notification-item{display:block;padding:13px 10px;border-bottom:1px solid var(--border-dark);border-radius:6px}
.mh-notification-item:last-child{border-bottom:0}.mh-notification-item.is-unread,.mh-inbox-item.is-unread{background:#ff1f300c}
.mh-notification-title,.mh-notification-body{display:block}.mh-notification-title{font-weight:800}.mh-notification-body{font-size:12px;color:var(--muted);line-height:1.5;margin:4px 0}
.mh-notification-item small,.mh-inbox-item small{font:600 10px var(--font-mono);color:var(--muted)}
.mh-empty{padding:13px 9px;color:var(--muted)}
.mh-transfer-card,.mh-inbox-item{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px dashed var(--border-dark);padding:18px 4px}
.mh-transfer-card:last-child,.mh-inbox-item:last-child{border-bottom:0}
.mh-transfer-card strong,.mh-inbox-item strong{font:800 16px var(--font-display)}
.mh-transfer-card p,.mh-inbox-item p{color:var(--muted);margin:5px 0}
.mh-transfer-actions form{display:flex;gap:10px;flex-wrap:wrap}
.mh-recent-item,.mh-quick-links a{display:flex;justify-content:space-between;align-items:center;gap:15px;padding:14px 2px;border-bottom:1px dashed var(--border-dark)}
.mh-recent-item strong,.mh-recent-item small{display:block}.mh-recent-item strong{font-weight:800}.mh-recent-item small{font:500 11px var(--font-mono);color:var(--muted);margin-top:4px}
.mh-quick-links a{font-weight:800}.mh-quick-links a:last-child,.mh-recent-item:last-child{border-bottom:0}
.mh-progress-bar{height:11px;border:1px solid var(--bg-dark);background:var(--bg-paper-alt);border-radius:999px;overflow:hidden}.mh-progress-bar>div{height:100%;background:var(--accent-red)}
.mh-setting-heading{display:flex;gap:13px;align-items:flex-start;margin-bottom:22px}.mh-setting-heading h2{margin:0 0 7px}.mh-setting-heading p{margin:0}
.mh-setting-icon{display:grid;place-items:center;width:38px;height:38px;background:var(--accent-red);color:#fff;border-radius:9px;border:2px solid var(--bg-dark);font:800 11px var(--font-mono)}
.mh-settings-form{display:flex;flex-direction:column;gap:3px}.mh-settings-form>button{align-self:flex-start;margin-top:15px}.mh-settings-form input[readonly]{background:var(--bg-paper-alt);color:var(--muted)}
.mh-field-hint{color:var(--muted);font-size:12px;margin:7px 0}
@media(max-width:1050px){.wrap{padding:0 20px}.mh-kpi-grid,.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mh-dashboard-cols{grid-template-columns:1fr}}
@media(max-width:760px){header{align-items:flex-start;flex-direction:column}nav{width:100%;border-radius:18px;justify-content:flex-start}nav>a{padding:7px 9px}.two,.mh-settings-grid{grid-template-columns:1fr}.mh-page-intro h1{font-size:33px}.panel{overflow-x:auto}.mh-notification-dropdown{right:auto;left:0}.mh-form{align-items:stretch}.mh-form input,.mh-form select{max-width:none}}
@media(max-width:430px){.wrap{padding:0 13px}.mh-kpi-grid,.grid{gap:11px}.mh-kpi-card,.stat{padding:14px}.mh-kpi-card strong{font-size:24px}.panel{padding:15px}nav{gap:0}.mh-account-menu summary,.mh-notification-menu summary{font-size:0;padding:5px}.mh-account-menu summary span:not(.mh-avatar),.mh-notification-menu summary span:not(.mh-bell):not(.mh-notification-count){display:none}.mh-notification-count{font-size:10px}.mh-account-dropdown{right:0}.mh-notification-dropdown{left:0;width:min(350px,92vw)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* =========================
   MassHeads UI Refinement v4
   add this at the END of app.css
========================= */

:root{
  --mh-paper:#F7F5F0;
  --mh-paper-alt:#EFECE4;
  --mh-white:#FFFFFF;
  --mh-ink:#0B0B0E;
  --mh-muted:#5C5B61;
  --mh-muted-light:#A0A0AB;
  --mh-red:#FF1F30;
  --mh-red-deep:#E70027;
  --mh-border:rgba(11,11,14,.14);
  --mh-shadow-hard:6px 6px 0px #0B0B0E;
  --mh-shadow-soft:0 14px 34px rgba(11,11,14,.14), 0 3px 8px rgba(11,11,14,.08);
  --mh-radius-sm:12px;
  --mh-radius-md:18px;
  --mh-radius-lg:26px;
  --mh-radius-pill:9999px;
}

html,body{
  background:var(--mh-paper)!important;
  color:var(--mh-ink)!important;
  font-family:'Plus Jakarta Sans',Arial,sans-serif!important;
  font-size:15px;
  line-height:1.55;
}

body:has(header){
  background:linear-gradient(#fff 0 104px,var(--mh-paper) 104px)!important;
}

.wrap{
  max-width:1360px;
  padding:0 28px;
}

h1,h2,h3,.mh-wordmark,.sectiontitle,.mh-page-intro h1,.panel h2{
  font-family:'Syne','Plus Jakarta Sans',sans-serif!important;
  letter-spacing:-.04em;
  color:var(--mh-ink)!important;
}

label,th,.mh-eyebrow{
  font-family:'JetBrains Mono','Plus Jakarta Sans',monospace!important;
  letter-spacing:.02em;
  color:var(--mh-ink)!important;
}

.sub,.muted,.mh-field-hint,.mh-kpi-card small,.brand small{
  color:var(--mh-muted)!important;
}

a{
  color:var(--mh-ink);
  text-decoration:none;
}

/* Header */
header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:88px;
  padding:16px 0;
  background:#fff;
  border-bottom:2px solid var(--mh-ink)!important;
  flex-wrap:nowrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-logo{
  width:58px;
  height:58px;
  object-fit:contain;
  flex:0 0 auto;
}

.mh-wordmark{
  font-size:20px;
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.mh-wordmark em{
  color:var(--mh-red);
  font-style:normal;
}

.mh-wordmark small{
  display:block;
  margin-top:6px;
  font-size:12px;
  font-weight:600;
  letter-spacing:0;
  font-family:'Plus Jakarta Sans',sans-serif!important;
}

nav{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
  flex-wrap:wrap;
}

nav > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:0 16px;
  border-radius:999px;
  font-weight:700;
  transition:.18s ease;
}

nav > a:hover,
nav > a:focus-visible{
  background:#fff;
  border:2px solid var(--mh-ink);
  box-shadow:3px 3px 0 var(--mh-ink);
  color:var(--mh-ink);
}

/* Account chip */
.mh-account-menu{
  position:relative;
  z-index:50;
}

.mh-account-menu summary{
  list-style:none;
  display:flex;
  align-items:center;
  gap:12px;
  min-height:64px;
  padding:8px 18px 8px 10px;
  border:2px solid var(--mh-ink)!important;
  border-radius:999px;
  background:#fff;
  box-shadow:3px 3px 0 var(--mh-ink);
  cursor:pointer;
  font-weight:800;
  user-select:none;
}

.mh-account-menu summary::-webkit-details-marker{
  display:none;
}

.mh-account-menu summary:hover,
.mh-account-menu[open] summary{
  transform:translate(-1px,-1px);
  box-shadow:5px 5px 0 var(--mh-ink);
}

.mh-avatar{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:var(--mh-red);
  color:#fff;
  border:2px solid var(--mh-ink);
  box-shadow:2px 2px 0 var(--mh-ink);
  font-size:15px;
  font-weight:800;
  flex:0 0 auto;
}

.mh-caret{
  font-size:16px;
  color:var(--mh-ink)!important;
  margin-left:2px;
}

.mh-account-dropdown{
  position:absolute;
  right:0;
  top:calc(100% + 12px);
  width:280px;
  background:#fff;
  border:2px solid var(--mh-ink)!important;
  border-radius:22px;
  box-shadow:var(--mh-shadow-hard);
  padding:10px;
}

.mh-account-meta{
  padding:14px;
  border-bottom:1px solid #E7E1D7;
}

.mh-account-meta strong{
  font-size:14px;
  font-weight:800;
}

.mh-account-meta small{
  display:block;
  margin-top:6px;
  color:var(--mh-muted)!important;
  overflow-wrap:anywhere;
}

.mh-account-dropdown > a,
.mh-sign-out{
  display:block;
  width:100%;
  text-align:left;
  padding:13px 14px!important;
  border:0!important;
  border-radius:14px!important;
  background:#fff!important;
  color:var(--mh-ink)!important;
  font-size:14px;
  font-weight:700!important;
  box-shadow:none!important;
  min-height:auto!important;
}

.mh-account-dropdown > a:hover,
.mh-sign-out:hover{
  background:var(--mh-paper-alt)!important;
  color:var(--mh-red)!important;
}

/* Intro */
.mh-page-intro{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin:34px 0 18px;
}

.mh-page-intro h1{
  margin:6px 0 8px;
  font-size:clamp(2rem,3.1vw,3.2rem);
  line-height:.95;
}

.mh-page-intro .sub{
  margin:0;
  max-width:760px;
}

.mh-eyebrow{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--mh-red)!important;
}

/* Cards / Panels */
.panel,
.stat,
.login,
.mh-kpi-card{
  background:var(--mh-white)!important;
  border:2px solid var(--mh-ink)!important;
  border-radius:var(--mh-radius-lg)!important;
  box-shadow:var(--mh-shadow-hard)!important;
}

.panel{
  padding:28px!important;
  margin-bottom:24px;
  overflow:hidden!important;
}

.panel:has(table){
  overflow:auto!important;
}

.stat{
  padding:22px;
}

.notice{
  margin-top:18px;
  padding:16px 18px;
  border:2px solid var(--mh-ink);
  border-radius:16px;
  background:#FFF3D6;
  box-shadow:4px 4px 0 #D4BA74;
}

/* KPI */
.mh-kpi-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  margin:24px 0 28px;
}

.mh-kpi-card{
  min-height:170px;
  padding:24px;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.mh-kpi-card span{
  font-size:13px;
  font-weight:700;
  color:var(--mh-muted)!important;
}

.mh-kpi-card strong{
  margin:12px 0 10px;
  font-size:clamp(28px,2.5vw,38px);
  line-height:1;
  font-weight:800;
  letter-spacing:-.04em;
  color:var(--mh-ink)!important;
}

/* Buttons */
button,
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:52px;
  padding:0 22px;
  border:2px solid var(--mh-ink)!important;
  border-radius:999px!important;
  background:var(--mh-red)!important;
  color:#fff!important;
  box-shadow:4px 4px 0 var(--mh-ink)!important;
  font-family:'Plus Jakarta Sans',sans-serif!important;
  font-weight:800!important;
  cursor:pointer;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease;
}

button:hover,
.btn:hover{
  transform:translate(-2px,-2px);
  box-shadow:6px 6px 0 var(--mh-ink)!important;
}

.button-subtle{
  background:#fff!important;
  color:var(--mh-ink)!important;
}

.textbutton{
  background:none!important;
  border:0!important;
  box-shadow:none!important;
  color:var(--mh-muted)!important;
  padding:0!important;
  min-height:auto!important;
}

/* Inputs */
input,
select,
textarea{
  width:100%;
  min-height:54px;
  padding:14px 16px;
  border:2px solid var(--mh-ink)!important;
  border-radius:18px!important;
  background:#fff!important;
  color:var(--mh-ink)!important;
  box-shadow:none!important;
  font-family:'Plus Jakarta Sans',sans-serif!important;
}

textarea{
  min-height:140px;
  resize:vertical;
}

input:focus,
select:focus,
textarea:focus,
button:focus,
.btn:focus,
summary:focus{
  outline:3px solid rgba(255,31,48,.28);
  outline-offset:2px;
}

/* Tables */
table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
  text-align:left;
}

th{
  background:#F3EEE5;
  color:var(--mh-muted)!important;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
}

td,th{
  padding:15px 14px;
  border-bottom:1px solid #E7E1D7;
  vertical-align:middle;
}

tr:last-child td{
  border-bottom:0;
}

/* Pills */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:32px;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--mh-ink);
  background:#fff;
  color:var(--mh-ink);
  font-size:12px;
  font-weight:700;
}

/* Filters */
.filters{
  display:grid;
  grid-template-columns:minmax(280px,1.25fr) minmax(220px,.85fr) auto;
  gap:14px;
  align-items:center;
  margin-bottom:20px;
}

.filters input,
.filters select{
  max-width:none!important;
}

.filters button{
  min-width:130px;
}

/* Admin capacity row */
.mh-form{
  display:grid;
  grid-template-columns:110px minmax(220px,1fr) 130px minmax(160px,.8fr) 130px minmax(160px,.8fr) auto;
  gap:14px;
  align-items:center;
  margin-bottom:24px;
}

.mh-form label{
  margin:0;
  white-space:nowrap;
  font-size:12px;
}

.mh-form input,
.mh-form select{
  max-width:none!important;
}

/* Bulk toolbar */
.mh-bulk-buttons,
.mh-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
  padding-top:14px;
}

.mh-target select{
  max-width:380px!important;
}

/* Lead ownership */
.mh-actions{
  display:grid;
  grid-template-columns:auto minmax(420px,1fr);
  gap:16px;
  align-items:end;
}

.mh-actions form{
  margin:0;
}

.mh-actions form:last-child{
  display:grid;
  grid-template-columns:minmax(240px,1fr) auto;
  gap:12px;
  align-items:center;
}

.mh-actions select{
  max-width:none!important;
}

/* Dashboard columns */
.mh-dashboard-cols{
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(340px,.95fr);
  gap:24px;
  align-items:start;
}

.mh-recent-list{
  display:flex;
  flex-direction:column;
  gap:0;
}

.mh-recent-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:72px;
  padding:16px 2px;
  border-bottom:1px dashed #D8D1C5;
}

.mh-recent-item:last-child{
  border-bottom:0;
}

.mh-recent-item strong{
  display:block;
  font-size:14px;
  font-weight:800;
  margin-bottom:4px;
}

.mh-recent-item small{
  display:block;
  font-size:12px;
  color:var(--mh-muted)!important;
}

/* Quick actions */
.mh-quick-links{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-top:8px;
}

.mh-quick-links a{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  min-height:74px;
  padding:14px 2px;
  border-bottom:1px dashed #D8D1C5;
  font-weight:800;
  color:var(--mh-ink)!important;
}

.mh-quick-links a:last-child{
  border-bottom:0;
}

.mh-quick-links a:hover{
  color:var(--mh-red)!important;
}

.mh-quick-links a span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:76px;
  height:36px;
  padding:0 14px;
  border:2px solid var(--mh-ink);
  border-radius:999px;
  background:#fff;
  box-shadow:2px 2px 0 var(--mh-ink);
  font-size:0;
  flex:0 0 auto;
}

.mh-quick-links a span::before{
  content:"Open";
  font-size:12px;
  font-family:'JetBrains Mono',monospace;
  font-weight:800;
  color:var(--mh-ink);
  letter-spacing:.02em;
}

/* Progress */
.mh-progress-panel .panel-head{
  margin-bottom:14px;
}

.mh-progress-bar{
  height:12px;
  border-radius:999px;
  background:#ECE7DD;
  overflow:hidden;
  border:1px solid var(--mh-ink);
}

.mh-progress-bar > div{
  height:100%;
  background:var(--mh-red);
  border-radius:999px;
}

/* Settings */
.mh-settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:24px;
}

.mh-setting-heading{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-bottom:18px;
}

.mh-setting-heading h2{
  margin:0 0 6px;
}

.mh-setting-heading p{
  margin:0;
}

.mh-setting-icon{
  min-width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border:2px solid var(--mh-ink);
  border-radius:14px;
  background:#FFE6EB;
  color:var(--mh-red);
  font-weight:800;
  box-shadow:2px 2px 0 var(--mh-ink);
}

.mh-settings-form{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.mh-settings-form label{
  margin-top:12px;
}

.mh-settings-form .mh-pass{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.mh-settings-form .mh-pass input{
  min-width:0;
}

.mh-settings-form > button{
  align-self:flex-start;
  margin-top:18px;
}

/* Login */
.login{
  max-width:480px;
  margin:10vh auto;
  padding:28px;
}

.login .brand{
  margin-bottom:22px;
}

/* Responsive */
@media (max-width:1180px){
  header{
    flex-wrap:wrap;
    align-items:flex-start;
  }

  nav{
    width:100%;
    margin-left:0;
    justify-content:flex-start;
  }

  .mh-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mh-dashboard-cols,
  .mh-settings-grid{
    grid-template-columns:1fr;
  }

  .mh-form{
    grid-template-columns:1fr 1fr;
  }

  .mh-form label{
    margin-top:4px;
  }

  .mh-actions{
    grid-template-columns:1fr;
  }
}

@media (max-width:760px){
  .wrap{
    padding:0 16px;
  }

  body:has(header){
    background:linear-gradient(#fff 0 150px,var(--mh-paper) 150px)!important;
  }

  .filters{
    grid-template-columns:1fr;
  }

  .mh-kpi-grid{
    grid-template-columns:1fr;
  }

  .mh-form{
    grid-template-columns:1fr;
  }

  .mh-settings-form .mh-pass,
  .mh-actions form:last-child{
    grid-template-columns:1fr;
  }

  .mh-account-dropdown{
    width:min(92vw,280px);
    right:0;
  }

  .mh-wordmark{
    font-size:18px;
  }

  nav > a{
    min-height:42px;
    padding:0 12px;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
/* ===== Brand / Logo Fix ===== */
.brand {
  display: flex;
  align-items: center;
}

.brand-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: inherit;
}

.brand-logo {
  width: 58px;
  height: 58px;
  object-fit: contain;
  display: block;
  flex-shrink: 0;
}

.brand-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.1;
}

.brand-name {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #111111;
  text-transform: lowercase;
}

.brand-name span {
  color: #e31b23;
}

.brand-text small {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  color: #666666;
  font-weight: 500;
}

/* ===== Remove all visible arrows / carets ===== */
.caret,
.chevron,
.arrow,
.quick-arrow,
.account-caret,
.dropdown-arrow,
.menu-arrow,
.nav-arrow {
  display: none !important;
}

/* لو فيه details/summary مستخدم في My Account */
summary::-webkit-details-marker {
  display: none;
}
summary::marker {
  display: none;
}

/* لو فيه pseudo elements عاملة أسهم */
.quick-link::after,
.account-trigger::after,
.dropdown-toggle::after,
.nav-link.has-arrow::after,
.has-arrow::after {
  content: none !important;
  display: none !important;
}

/* شيل سهم الـ select الافتراضي */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none !important;
  padding-right: 16px;
}

/* لو فيه wrapper كان عامل custom arrow */
.select-wrap::after,
.field-select::after,
.select-arrow,
.custom-select::after {
  display: none !important;
  content: none !important;
}

/* تحسين شكل account button */
.account-trigger,
.account-menu > button,
.my-account-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* تحسين شكل quick links من غير أسهم */
.quick-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  text-decoration: none;
}

/* لو الصورة مش موجودة ما تبقاش بايظة */
.brand-logo[src=""],
.brand-logo:not([src]) {
  display: none;
}



/* MASSHEADS — ARROWLESS UI */

.mh-caret,
.mh-quick-links a > span,
.mh-quick-links a > span::before,
.quick-arrow,
.account-caret,
.dropdown-arrow,
.nav-arrow,
.select-arrow {
    display: none !important;
}

.mh-account-menu summary {
    list-style: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.mh-account-menu summary::-webkit-details-marker {
    display: none !important;
}

.mh-account-menu summary::marker {
    content: "" !important;
}

.mh-quick-links a {
    display: flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none !important;
}


/* MassHeads / arrowless header — final override */
.mh-account-menu > summary {
    list-style: none !important;
    appearance: none;
    -webkit-appearance: none;
}
.mh-account-menu > summary::-webkit-details-marker { display: none !important; }
.mh-account-menu > summary::marker { content: none !important; }
.mh-account-menu > summary::before,
.mh-account-menu > summary::after,
.mh-account-menu .mh-caret { content: none !important; display: none !important; }
.mh-account-menu > summary > span { display: inline-flex; align-items: center; }
.mh-account-menu > summary > .mh-avatar { display: grid; }

/* Password visibility control — consistent inline alignment */
.mh-pass,
.mh-settings-form .mh-pass,
.login .mh-pass {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

.mh-pass > input,
.mh-pass > input[type=password],
.mh-pass > input[type=text] {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Target the real button regardless of its optional custom class. */
.mh-pass > button,
.mh-pass > .mh-toggle-pass,
.mh-pass > .mh-show-password {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 88px !important;
  min-width: 0 !important;
  height: 52px !important;
  min-height: 52px !important;
  margin: 0 !important;
  padding: 0 10px !important;
  font-size: 12px !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

@media (max-width: 480px) {
  .mh-pass,
  .mh-settings-form .mh-pass,
  .login .mh-pass {
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 8px !important;
  }
  .mh-pass > button,
  .mh-pass > .mh-toggle-pass,
  .mh-pass > .mh-show-password {
    width: 74px !important;
    padding: 0 6px !important;
  }
}