/* MEDASENDER_UI_THEME_2026_V1
 * Fresh admin skin for MedaSender
 * Scope: presentation only. No PHP, database, queue, mail or SMS logic.
 */
@import url("https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css");

:root{
  --ms-bg:#f4f6f9;
  --ms-surface:#ffffff;
  --ms-surface-soft:#f8fafc;
  --ms-sidebar:#0a1027;
  --ms-sidebar-2:#141b3a;
  --ms-sidebar-active:#20294f;
  --ms-text:#111827;
  --ms-muted:#667085;
  --ms-border:#e6eaf0;
  --ms-border-strong:#d8dee8;
  --ms-accent:#ff6b35;
  --ms-accent-dark:#ea5923;
  --ms-blue:#2563eb;
  --ms-green:#159a64;
  --ms-red:#dc3545;
  --ms-amber:#d97706;
  --ms-purple:#7c3aed;
  --ms-shadow:0 8px 30px rgba(15,23,42,.055);
  --ms-shadow-lg:0 18px 55px rgba(15,23,42,.11);
  --ms-radius:15px;
  --ms-radius-sm:10px;
}

*{box-sizing:border-box}
html{background:var(--ms-bg);scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  background:var(--ms-bg);
  color:var(--ms-text);
  font-family:Vazirmatn,Tahoma,Arial,sans-serif;
  font-size:14px;
  line-height:1.75;
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body,button,input,textarea,select{font-family:Vazirmatn,Tahoma,Arial,sans-serif}
button,input,textarea,select{font-size:inherit}
a{color:#1f3a70;text-decoration:none;transition:color .15s ease,background .15s ease,box-shadow .15s ease,transform .15s ease}
a:hover{color:#13264c}
img{max-width:100%;height:auto}
hr{border:0;border-top:1px solid var(--ms-border);margin:22px 0}
code,pre,.ltr{direction:ltr;text-align:left;font-family:Consolas,Monaco,monospace}
[hidden]{display:none!important}

/* -------- app shell -------- */
.app{display:flex;min-height:100vh;min-width:0}
.sidebar{
  width:268px;
  flex:0 0 268px;
  min-width:268px;
  height:100vh;
  position:sticky;
  top:0;
  z-index:70;
  overflow-y:auto;
  padding:22px 16px;
  color:#fff;
  background:
    radial-gradient(circle at 20% -10%,rgba(64,86,180,.24),transparent 36%),
    linear-gradient(180deg,var(--ms-sidebar),#0b1230 55%,#090f25);
  border-left:1px solid rgba(255,255,255,.05);
  box-shadow:-8px 0 28px rgba(9,15,37,.08);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:20px}
.brand{
  position:relative;
  margin:0 2px 18px;
  padding:4px 10px 20px;
  border-bottom:1px solid rgba(255,255,255,.11);
}
.brand:before{
  content:"";
  position:absolute;
  right:10px;
  bottom:-2px;
  width:44px;
  height:3px;
  border-radius:99px;
  background:var(--ms-accent);
}
.brand b{display:block;font-size:25px;line-height:1.2;letter-spacing:-.35px;color:#fff}
.brand span{display:block;margin-top:7px;font-size:11.5px;color:#aeb8d7;line-height:1.7}
.sidebar nav{display:flex;flex-direction:column;gap:3px;width:100%}
.sidebar nav a,.sidebar>a{
  position:relative;
  display:flex;
  align-items:center;
  gap:11px;
  width:100%;
  min-height:44px;
  margin:0;
  padding:10px 12px;
  color:#d9e0f3;
  border:1px solid transparent;
  border-radius:11px;
  font-weight:600;
  line-height:1.5;
}
.sidebar nav a:hover,.sidebar>a:hover{
  color:#fff;
  background:rgba(255,255,255,.065);
  border-color:rgba(255,255,255,.045);
  transform:translateX(-1px);
}
.sidebar nav a.active,.sidebar>a.active{
  color:#fff;
  background:linear-gradient(135deg,var(--ms-sidebar-active),#252f5c);
  border-color:rgba(255,255,255,.08);
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}
.sidebar nav a.active:after,.sidebar>a.active:after{
  content:"";
  position:absolute;
  right:0;
  top:11px;
  bottom:11px;
  width:3px;
  border-radius:99px;
  background:var(--ms-accent);
}
.ico{display:inline-flex;align-items:center;justify-content:center;min-width:18px;color:var(--ms-accent);font-size:17px;line-height:1}
.upgrade{margin-top:18px;padding:15px;border-radius:13px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.08);color:#fff}
.upgrade p{margin:4px 0;color:#aeb8d7;font-size:12px}

.main,.main-content{
  flex:1 1 auto;
  min-width:0;
  width:calc(100% - 268px);
  padding:0 26px 30px;
  background:var(--ms-bg);
}
.top{
  min-height:82px;
  margin:0 -26px 22px;
  padding:14px 26px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--ms-border);
  box-shadow:0 2px 12px rgba(15,23,42,.025);
  backdrop-filter:saturate(140%) blur(10px);
}
.top>div:first-child{min-width:0}
.top h1{margin:0;font-size:24px;line-height:1.35;letter-spacing:-.35px;color:#111827}
.top p{margin:5px 0 0;color:#7a8495;font-size:12.5px}
.top-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.profile{min-width:0;padding-right:14px;border-right:1px solid var(--ms-border)}
.profile b{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
.profile small{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#7a8495;font-size:11px;direction:ltr;text-align:right}

/* -------- layout helpers -------- */
.grid{display:grid;gap:14px;min-width:0}
.grid.cols-2,.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.cols-3,.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid.cols-4,.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(320px,.72fr);gap:16px;align-items:start;min-width:0}
.stats,.dashboard-service-stats,.dashboard-main-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.top-actions-row{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 14px}
.top-actions-row>div{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.campaign-list-full{display:block;width:100%;min-width:0}

/* -------- cards / metrics -------- */
.card{
  min-width:0;
  background:var(--ms-surface);
  border:1px solid var(--ms-border);
  border-radius:var(--ms-radius);
  padding:18px;
  box-shadow:var(--ms-shadow);
}
.card+.card{margin-top:0}
.card h1,.card h2,.card h3,.card h4{color:#171e2e}
.card h2{margin:0 0 14px;font-size:18px;line-height:1.5}
.card h3{margin:0 0 12px;font-size:15px}
.card>p:first-child{margin-top:0}
.metric{position:relative;min-height:122px;display:flex;flex-direction:column;justify-content:center;overflow:hidden;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.metric:before{content:"";position:absolute;right:0;top:0;width:4px;height:100%;background:linear-gradient(180deg,var(--ms-accent),#ff9b72);opacity:.9}
a.metric:hover,.metric[role="button"]:hover{transform:translateY(-2px);box-shadow:0 13px 34px rgba(15,23,42,.08);border-color:#d9e0e9;cursor:pointer}
.metric span{display:block;color:#737e90;font-size:11px;font-weight:700}
.metric b{display:block;margin:4px 0 1px;color:#141a28;font-size:28px;line-height:1.25;font-weight:900;letter-spacing:-.5px}
.metric small{display:block;color:#9aa3b1;font-size:10.5px}
.hint{color:#7d8796;font-size:11.5px;line-height:1.8}
.muted{color:var(--ms-muted)}

/* -------- buttons -------- */
.btn,button.btn,a.btn,input[type="submit"],button[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:39px;
  padding:8px 14px;
  border:1px solid var(--ms-border-strong);
  border-radius:10px;
  background:#fff;
  color:#273249;
  font-weight:700;
  line-height:1.25;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,.025);
  transition:transform .12s ease,box-shadow .12s ease,background .12s ease,border-color .12s ease,color .12s ease;
}
.btn:hover,button.btn:hover,a.btn:hover,input[type="submit"]:hover,button[type="submit"]:hover{transform:translateY(-1px);border-color:#cbd3df;background:#fbfcfe;box-shadow:0 5px 15px rgba(15,23,42,.06)}
.btn.orange,.orange.btn{background:var(--ms-accent);border-color:var(--ms-accent);color:#fff}
.btn.orange:hover,.orange.btn:hover{background:var(--ms-accent-dark);border-color:var(--ms-accent-dark);color:#fff}
.btn.green,.green.btn{background:var(--ms-green);border-color:var(--ms-green);color:#fff}
.btn.blue,.blue.btn{background:var(--ms-blue);border-color:var(--ms-blue);color:#fff}
.btn.red,.red.btn,.btn.danger{background:var(--ms-red);border-color:var(--ms-red);color:#fff}
.btn.small,.btn-sm{min-height:32px;padding:5px 9px;border-radius:8px;font-size:11.5px}
.btn.full,.full{width:100%}
.btn:disabled,button:disabled{opacity:.55;cursor:not-allowed;transform:none!important}

/* -------- forms -------- */
form{min-width:0}
label{display:block;margin:11px 0 6px;color:#30394a;font-weight:750;font-size:12px}
input,textarea,select{
  width:100%;
  min-width:0;
  min-height:42px;
  padding:9px 11px;
  color:#1d2635;
  background:#fff;
  border:1px solid var(--ms-border-strong);
  border-radius:10px;
  outline:0;
  box-shadow:0 1px 2px rgba(15,23,42,.015) inset;
  transition:border-color .14s ease,box-shadow .14s ease,background .14s ease;
}
textarea{min-height:112px;resize:vertical;line-height:1.8;direction:rtl}
select{cursor:pointer}
input:focus,textarea:focus,select:focus{border-color:#93b4f8;box-shadow:0 0 0 3px rgba(37,99,235,.09)}
input::placeholder,textarea::placeholder{color:#a3abba}
input[type="checkbox"],input[type="radio"]{width:17px;height:17px;min-height:0;padding:0;vertical-align:middle;accent-color:var(--ms-accent)}
input[type="color"]{height:42px;padding:4px}
input[type="file"]{padding:7px}
fieldset{border:1px solid var(--ms-border);border-radius:12px;padding:14px}
legend{padding:0 7px;font-weight:800;color:#39445a}

/* -------- filters / toolbars -------- */
.subscriber-filters,.filters,.filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.filter-actions{display:flex;align-items:flex-end;gap:7px;min-width:0}
.filter-result{margin:10px 0 0;padding:9px 11px;border:1px solid #e3e8ef;border-radius:9px;background:#fafbfc}
.bulk-toolbar{display:grid;grid-template-columns:auto minmax(180px,1fr) auto auto;align-items:center;gap:8px;margin:12px 0;padding:10px 12px;background:#f8fafc;border:1px solid var(--ms-border);border-radius:11px}
.bulk-toolbar b{white-space:nowrap}
.actions,.row-actions,.table-actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap}

/* -------- tables -------- */
.table-wrap,.table-responsive,.campaign-table-wrap{width:100%;min-width:0;overflow:auto;border:1px solid var(--ms-border);border-radius:12px;background:#fff}
table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;color:#273142;font-size:12.5px}
th,td{padding:11px 12px;text-align:right;vertical-align:middle;border-bottom:1px solid #edf0f4;white-space:normal}
th{position:sticky;top:0;z-index:2;background:#f8fafc;color:#5e6879;font-size:11.5px;font-weight:850;white-space:nowrap}
tr:last-child td{border-bottom:0}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:#fbfcfe}
td a{font-weight:700}
td .btn{white-space:nowrap}
.table-empty,.empty-state{padding:30px;text-align:center;color:#8a94a5}

/* -------- status / badges / alerts -------- */
.badge,.status,.pill{display:inline-flex;align-items:center;gap:5px;min-height:25px;padding:3px 8px;border-radius:999px;background:#f2f4f7;border:1px solid #e4e7ec;color:#475467;font-size:10.5px;font-weight:800;white-space:nowrap}
.badge.green,.status.sent,.status.active,.status.ok{background:#ecfdf3;border-color:#c8f0d9;color:#087443}
.badge.red,.status.failed,.status.error,.status.inactive{background:#fff1f2;border-color:#ffd2d8;color:#b4233b}
.badge.orange,.status.pending,.status.queued,.status.sending{background:#fff7ed;border-color:#fed7aa;color:#b45309}
.badge.blue,.status.draft{background:#eff6ff;border-color:#cfe1ff;color:#1d4ed8}
.alert{margin:10px 0;padding:11px 13px;border:1px solid #dfe6ef;border-radius:11px;background:#f8fafc;color:#344054}
.alert.ok,.alert.success{background:#ecfdf3;border-color:#c9f0d9;color:#087443}
.alert.err,.alert.error{background:#fff1f2;border-color:#ffd0d7;color:#b4233b}
.alert.warn,.alert.warning{background:#fffbeb;border-color:#fde7aa;color:#9a6700}

/* -------- pagination -------- */
.pagination,.pager{display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap;margin:16px 0 0}
.pagination a,.pagination span,.pager a,.pager span{display:inline-flex;min-width:34px;height:34px;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--ms-border);border-radius:9px;background:#fff;color:#525d6e;font-size:11.5px;font-weight:700}
.pagination .active,.pager .active{background:#16203f;border-color:#16203f;color:#fff}

/* -------- template builder -------- */
.template-builder{border:1px solid var(--ms-border);border-radius:13px;background:#f8fafc;overflow:hidden}
.builder-tools{display:flex;gap:7px;flex-wrap:wrap;padding:10px;border-bottom:1px solid var(--ms-border);background:#fff}
.builder-tools .btn{min-height:33px;padding:6px 10px;font-size:11px}
.builder-canvas{min-height:120px;padding:10px}
.builder-item{position:relative;margin:7px 0;padding:12px 13px;border:1px solid #dde4ed;border-radius:10px;background:#fff;box-shadow:0 2px 7px rgba(15,23,42,.025);cursor:grab}
.builder-item.dragging{opacity:.45}
.builder-actions{display:flex;gap:5px;margin-bottom:7px}
.builder-actions button{min-width:29px;height:29px;border:1px solid #dde4ed;border-radius:7px;background:#f8fafc;color:#4b5565;cursor:pointer}
.builder-actions button:hover{background:#eef2f6}
.builder-snippet{direction:rtl;color:#6f7888;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.builder-preview{width:100%;min-height:480px;border:1px solid var(--ms-border);border-radius:12px;background:#fff}

/* -------- modal / drawers -------- */
.modal,.drawer,.dialog{color:var(--ms-text)}
.modal-backdrop,.drawer-backdrop{background:rgba(15,23,42,.36);backdrop-filter:blur(1.5px)}
.modal-content,.drawer-panel{background:#fff;border:1px solid var(--ms-border);box-shadow:var(--ms-shadow-lg)}

/* -------- analytics V1/V2/V3/V4/V5 compatibility -------- */
.dashboard-analytics-card,.da2-card,.da3-card,.da4-card,.da5-card{border-radius:var(--ms-radius)!important;border-color:var(--ms-border)!important;box-shadow:var(--ms-shadow)!important}
.dashboard-range-switch,.da2-segment,.da3-segment,.da4-segment,.da5-segment{background:#f5f7fa!important;border-color:#e3e8ee!important}
.dashboard-chart-scroll,.da2-chart,.da3-chart,.da4-chart,.da5-chart{border-radius:12px}

/* -------- login / standalone screens -------- */
.login-page{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 12% 10%,rgba(37,99,235,.10),transparent 31%),
    radial-gradient(circle at 88% 90%,rgba(255,107,53,.12),transparent 34%),
    #f4f6f9;
}
.login-card{
  width:min(440px,100%);
  margin:auto;
  padding:28px;
  background:#fff;
  border:1px solid var(--ms-border);
  border-radius:20px;
  box-shadow:0 22px 65px rgba(15,23,42,.12);
}
.login-card:before{content:"MedaSender";display:block;margin-bottom:2px;color:#111827;font-size:29px;font-weight:950;letter-spacing:-.7px}
.login-card h1{margin:0 0 5px;font-size:0}
.login-card p{margin:0 0 18px;color:#7b8492}
.login-card .btn{margin-top:16px;min-height:46px}
.login-meta{display:flex;justify-content:space-between;gap:8px;margin-top:14px;color:#8b95a5;font-size:10px}
.login-security{margin-top:13px;padding:10px;border-radius:10px;background:#fafbfc;border:1px solid #edf0f4;color:#7a8494;font-size:10.5px}

/* -------- small utilities -------- */
.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}
.nowrap{white-space:nowrap}.w-full{width:100%}.mb-0{margin-bottom:0}.mt-0{margin-top:0}

/* -------- responsive -------- */
@media(max-width:1200px){
  .sidebar{width:244px;min-width:244px;flex-basis:244px;padding-right:12px;padding-left:12px}
  .main,.main-content{width:calc(100% - 244px);padding-right:20px;padding-left:20px}
  .top{margin-right:-20px;margin-left:-20px;padding-right:20px;padding-left:20px}
  .stats,.dashboard-service-stats,.dashboard-main-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .subscriber-filters,.filters,.filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
  body{font-size:13px}
  .app{display:block;width:100%;min-width:0}
  .main,.main-content{width:100%;max-width:100%;padding:0 12px 22px;overflow-x:hidden}
  .top{min-height:70px;margin:0 -12px 14px;padding:12px 68px 12px 12px;align-items:flex-start}
  .top h1{font-size:19px}.top p{font-size:10.5px}
  .top-actions{gap:6px}.profile{display:none}
  .split,.grid.cols-2,.cols-2,.grid.cols-3,.cols-3,.grid.cols-4,.cols-4{grid-template-columns:1fr}
  .card{padding:14px;border-radius:13px}
  .card h2{font-size:16px}
  .stats,.dashboard-service-stats,.dashboard-main-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .metric{min-height:105px;padding:14px}.metric b{font-size:23px}
  .subscriber-filters,.filters,.filter-grid{grid-template-columns:1fr 1fr}
  .bulk-toolbar{grid-template-columns:1fr 1fr}
  .bulk-toolbar b{grid-column:1/-1}
  .top-actions-row{align-items:stretch}.top-actions-row>div{width:100%}
  .table-wrap,.table-responsive,.campaign-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table{min-width:680px}
  th,td{padding:9px 10px}
  .builder-tools{gap:5px}
  .login-page{padding:14px}.login-card{padding:22px;border-radius:17px}

  /* compatible with current off-canvas sidebar patch */
  .sidebar{
    width:min(86vw,320px);
    max-width:320px;
    min-width:0;
    height:100dvh;
    padding:18px 10px;
  }
  .sidebar .brand{width:100%;padding-right:12px;padding-left:12px}
  .sidebar>nav,.sidebar nav{width:100%;min-width:0;max-width:none;margin:0;padding:3px 6px 18px;align-items:stretch}
  .sidebar>nav>a,.sidebar nav>a{width:100%;min-width:0;max-width:none;margin:0 0 3px;padding:10px 10px;text-align:right;white-space:normal}
}

@media(max-width:560px){
  .stats,.dashboard-service-stats,.dashboard-main-kpis{grid-template-columns:1fr}
  .subscriber-filters,.filters,.filter-grid,.bulk-toolbar{grid-template-columns:1fr}
  .filter-actions{flex-direction:column;align-items:stretch}.filter-actions .btn{width:100%}
  .top{padding-right:64px;min-height:66px}.top p{display:none}
  .top-actions-row .btn{flex:1 1 auto}
  .card{padding:12px}
  .login-card:before{font-size:26px}
}

@media(prefers-reduced-motion:reduce){
  *,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}
}


/* MEDASENDER_UI_LAYOUT_COMPAT_V101_START
 * Restores MedaSender's legacy structural layout helpers on top of UI Theme V1.
 * Presentation only: no PHP/database/queue behavior is changed.
 */

.wide{min-width:0}

.form-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(260px,1.1fr);
  gap:16px;
  align-items:start;
  min-width:0;
}
.form-grid>.card{
  min-width:0;
  margin:0;
  align-self:start;
}
.form-grid .wide{grid-column:span 2}
.form-grid>#medasenderAbConfig,
.form-grid>.campaign-test-card,
.form-grid>.sticky{grid-column:1/-1}

.two{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  min-width:0;
}
.two>p{min-width:0;margin:0}

.three{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  min-width:0;
}
.four{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  min-width:0;
}

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:8px 0 18px;
}
.section-head h2{margin:0}
.section-head p{margin:3px 0 0;color:var(--ms-muted,#7b849a)}

.toggle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:46px;
  margin:10px 0;
  padding:10px 12px;
  background:var(--ms-surface-soft,#fafbff);
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
}
.toggle input[type="checkbox"],
.toggle input[type="radio"]{
  width:17px;
  height:17px;
  flex:0 0 17px;
  margin:0;
}

.source-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.source{
  min-width:0;
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
  padding:14px;
  background:#fff;
  text-align:center;
}
.source.selected{
  border-color:var(--ms-success,#27b56b);
  box-shadow:0 0 0 3px rgba(39,181,107,.12);
}
.source input{width:auto}
.source small{
  display:block;
  color:var(--ms-muted,#7b849a);
  margin-top:7px;
}

.feature-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
}
.feature-row>div{
  min-width:0;
  padding:14px;
  background:var(--ms-surface-soft,#fafbff);
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
  text-align:center;
}

.steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  background:#fff;
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
  padding:14px;
  margin-bottom:16px;
}
.steps span{
  padding:8px 13px;
  border-radius:999px;
  background:var(--ms-surface-soft,#f3f5fa);
  color:var(--ms-muted,#667085);
  white-space:nowrap;
}
.steps .on{
  background:var(--ms-success,#27b56b);
  color:#fff;
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}
.chips span{
  background:#effaf3;
  border:1px solid #cdeed9;
  color:#16834d;
  border-radius:8px;
  padding:7px 10px;
}

.deliver{
  display:grid;
  gap:8px;
  margin-top:14px;
}
.deliver span{
  background:#effaf3;
  border-radius:8px;
  padding:8px 10px;
  color:#16834d;
}

.sticky{
  position:sticky;
  bottom:12px;
  z-index:20;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
  padding:12px;
  display:flex;
  gap:10px;
  align-items:center;
  margin-bottom:16px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
}

.inline{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}

.settings-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.settings-grid>div{
  min-width:0;
  background:var(--ms-surface-soft,#fafbff);
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
  padding:12px;
}
.settings-grid code{
  display:block;
  direction:ltr;
  text-align:left;
  margin-top:7px;
  overflow-wrap:anywhere;
}

.preview iframe{
  display:block;
  width:100%;
  height:430px;
  border:1px solid var(--ms-border,#e5e9f2);
  border-radius:10px;
  background:#fff;
}

/* Keep common nested campaign fields compact. */
.form-grid label,
.form-grid p{min-width:0}
.form-grid input,
.form-grid select,
.form-grid textarea{min-width:0}

@media(max-width:1200px){
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid .wide{grid-column:span 2}
  .feature-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .source-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:860px){
  .form-grid,
  .two,
  .three,
  .four,
  .settings-grid,
  .source-cards,
  .feature-row{
    grid-template-columns:1fr;
  }

  .form-grid .wide,
  .form-grid>#medasenderAbConfig,
  .form-grid>.campaign-test-card,
  .form-grid>.sticky{
    grid-column:auto;
  }

  .section-head{
    align-items:flex-start;
    flex-direction:column;
  }

  .steps{
    justify-content:flex-start;
    flex-wrap:nowrap;
    overflow-x:auto;
  }

  .sticky{
    position:static;
    flex-wrap:wrap;
  }
}
/* MEDASENDER_UI_LAYOUT_COMPAT_V101_END */


/* MEDASENDER_UI_PAGE_LAYOUT_FIX_V1_0_2_BEGIN
 * Restores page-specific MedaSender layouts that were present in the
 * original UI but were not part of the rebuilt global theme.
 * CSS only: Subscribers, Senders, Templates and supporting widgets.
 */

/* ================================================================
 * Subscribers
 * ================================================================ */
.subscriber-stats-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  margin:0 0 14px!important;
  min-width:0!important;
}
.subscriber-stats-grid .metric{
  min-width:0!important;
  min-height:104px!important;
  padding:14px 16px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  align-items:flex-start!important;
  text-decoration:none!important;
}
.subscriber-stats-grid .metric b{
  display:block!important;
  margin:2px 0 4px!important;
  font-size:25px!important;
  line-height:1.2!important;
}
.subscriber-stats-grid .metric span{
  display:block!important;
  font-size:11px!important;
}

.subscribers-layout,
.subscribers-layout-v25{
  display:grid!important;
  grid-template-columns:minmax(300px,360px) minmax(0,1fr)!important;
  gap:16px!important;
  align-items:start!important;
  direction:ltr!important;
  min-width:0!important;
}
.subscribers-layout>*,
.subscribers-layout-v25>*{
  direction:rtl!important;
  min-width:0!important;
}
.subscribers-layout-v25 .subscribers-form,
.subscribers-layout .subscribers-form{
  grid-column:1!important;
  align-self:start!important;
}
.subscribers-layout-v25 .subscribers-list,
.subscribers-layout .subscribers-list{
  grid-column:2!important;
  min-width:0!important;
  overflow:hidden!important;
}
.subscribers-form input,
.subscribers-form select,
.subscribers-form textarea{
  margin-bottom:5px!important;
}
.subscribers-head{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
}
.pager-size{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  white-space:nowrap!important;
}
.pager-size label{margin:0!important}
.pager-size select{
  width:auto!important;
  min-width:90px!important;
  min-height:38px!important;
}

.sync-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:8px!important;
  margin-bottom:14px!important;
}
.sync-row .btn,
.sync-row a{
  width:100%!important;
  min-width:0!important;
  white-space:normal!important;
}
.group-pills{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  margin-top:10px!important;
}
.group-pills span{
  display:inline-flex!important;
  align-items:center!important;
  gap:5px!important;
  padding:6px 9px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:8px!important;
  background:#f7f9fc!important;
  color:#334155!important;
}
.group-pills b{
  padding:1px 6px!important;
  border-radius:999px!important;
  background:#fff!important;
}

.subscriber-filters{
  display:grid!important;
  grid-template-columns:minmax(250px,1.8fr) repeat(5,minmax(130px,1fr)) auto!important;
  gap:9px!important;
  align-items:end!important;
  margin:12px 0 14px!important;
  padding:11px!important;
  overflow-x:auto!important;
  background:#f8fafc!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:11px!important;
}
.subscriber-filters label{
  display:block!important;
  margin:0 0 5px!important;
  font-size:11px!important;
  white-space:nowrap!important;
}
.subscriber-filters input,
.subscriber-filters select{
  min-width:0!important;
  height:39px!important;
  min-height:39px!important;
  margin:0!important;
}
.subscriber-filters .filter-actions{
  display:flex!important;
  align-items:flex-end!important;
  gap:7px!important;
  white-space:nowrap!important;
}
.filter-result{
  margin:-3px 0 11px!important;
}

.bulk-toolbar{
  display:grid!important;
  grid-template-columns:auto minmax(155px,1fr) minmax(145px,1fr) minmax(140px,1fr) minmax(140px,1fr) minmax(190px,1.5fr) auto!important;
  gap:8px!important;
  align-items:center!important;
  margin:11px 0!important;
  padding:10px!important;
  overflow-x:auto!important;
}
.bulk-toolbar b{white-space:nowrap!important}
.bulk-toolbar input,
.bulk-toolbar select{
  min-width:0!important;
  min-height:38px!important;
  height:38px!important;
  margin:0!important;
}
.bulk-toolbar .btn{
  min-height:38px!important;
  height:38px!important;
  white-space:nowrap!important;
}

.subscribers-table-wrap{
  width:100%!important;
  max-width:100%!important;
  overflow:auto!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:11px!important;
  background:#fff!important;
}
.subscribers-table{
  width:100%!important;
  min-width:1060px!important;
  table-layout:fixed!important;
  border-collapse:separate!important;
  border-spacing:0!important;
}
.subscribers-table th,
.subscribers-table td{
  vertical-align:middle!important;
  line-height:1.65!important;
}
.subscribers-table th{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:#fff!important;
}
.subscribers-table td{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.subscribers-table .c-check{width:42px!important}
.subscribers-table .c-name{width:220px!important}
.subscribers-table .c-email{width:240px!important}
.subscribers-table .c-phone{width:135px!important}
.subscribers-table .c-company{width:190px!important}
.subscribers-table .c-groups{width:170px!important}
.subscribers-table .c-brand{width:105px!important}
.subscribers-table .c-source{width:120px!important}
.subscribers-table .c-user-status{width:125px!important}
.subscribers-table .c-sub-status{width:105px!important}
.subscribers-table .c-date{width:125px!important}
.subscribers-table .c-actions{width:88px!important}
.subscribers-table .email-cell,
.subscribers-table .company-cell,
.subscribers-table .groups-cell{
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
.pagination-bar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  flex-wrap:wrap!important;
  margin-top:12px!important;
}
.pages{
  display:flex!important;
  gap:5px!important;
  flex-wrap:wrap!important;
  align-items:center!important;
}
.pages a,
.pages span{
  display:inline-flex!important;
  min-width:34px!important;
  height:34px!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 8px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:8px!important;
  background:#fff!important;
}
.pages a.active{
  background:var(--ms-accent,#ff6533)!important;
  border-color:var(--ms-accent,#ff6533)!important;
  color:#fff!important;
}

/* ================================================================
 * Senders
 * ================================================================ */
.sender-settings-grid.clean-senders,
.sender-settings-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
  align-items:start!important;
  min-width:0!important;
}
.sender-settings-grid.clean-senders>.card,
.sender-settings-grid>.card,
.brand-settings-card{
  min-width:0!important;
  align-self:start!important;
}
.sender-card-head{
  display:flex!important;
  justify-content:space-between!important;
  align-items:flex-start!important;
  gap:12px!important;
  margin-bottom:8px!important;
}
.sender-card-head>div{
  flex:1 1 auto!important;
  min-width:0!important;
}
.sender-card-head h3{margin:0!important}
.sender-card-head h3 small{
  display:inline-block!important;
  margin-right:5px!important;
  padding:2px 8px!important;
  border-radius:999px!important;
  background:#e9f8f0!important;
  color:#16834d!important;
  font-size:10.5px!important;
}
.mini-toggle{
  width:auto!important;
  min-width:82px!important;
  min-height:36px!important;
  margin:0!important;
  padding:6px 9px!important;
  gap:7px!important;
  flex:0 0 auto!important;
  justify-content:flex-start!important;
}
.brand-settings-card details{
  margin:10px 0!important;
  padding:10px 12px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:10px!important;
  background:#fbfcff!important;
}
.brand-settings-card summary{
  cursor:pointer!important;
  font-weight:850!important;
  color:#273249!important;
}
.brand-settings-card details[open] summary{
  margin-bottom:10px!important;
}
.sender-actions{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  flex-wrap:wrap!important;
  margin:12px 0!important;
}
.brand-preview{
  display:block!important;
  width:100%!important;
  height:260px!important;
  margin-top:10px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:10px!important;
  background:#fff!important;
}
.new-sender-card{
  border-color:#cdeed9!important;
  background:#fcfffd!important;
}

/* ================================================================
 * Default templates and preview cards
 * ================================================================ */
.template-cards,
.default-template-cards{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:14px!important;
  width:100%!important;
  min-width:0!important;
}
.template-card{
  display:grid!important;
  grid-template-columns:280px minmax(0,1fr)!important;
  gap:16px!important;
  align-items:start!important;
  width:100%!important;
  min-width:0!important;
  padding:14px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:12px!important;
  background:#fff!important;
}
.template-meta{
  display:grid!important;
  align-content:start!important;
  gap:8px!important;
  min-width:0!important;
  padding:5px 2px!important;
}
.template-meta b{
  display:block!important;
  font-size:14px!important;
  color:#182033!important;
}
.template-meta small{
  display:block!important;
  color:var(--ms-muted,#7b849a)!important;
  overflow-wrap:anywhere!important;
}
.template-meta .hint{
  display:block!important;
  margin:0!important;
}
.template-card iframe{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  height:300px!important;
  min-width:0!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:10px!important;
  background:#fff!important;
}
.color-dot{
  display:inline-block!important;
  width:28px!important;
  height:6px!important;
  border-radius:99px!important;
}
.sender-preview-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.mini-preview{
  min-width:0!important;
  padding:12px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:11px!important;
  background:#fff!important;
}
.mini-preview b,
.mini-preview small{display:block!important}
.mini-preview small{color:var(--ms-muted,#7b849a)!important}
.mini-preview iframe{
  display:block!important;
  width:100%!important;
  height:280px!important;
  margin-top:10px!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:10px!important;
  background:#fff!important;
}

/* Existing template editor remains full width. */
.preview{
  min-width:0!important;
}
.preview iframe,
.builder-preview{
  max-width:100%!important;
}

/* ================================================================
 * Responsive
 * ================================================================ */
@media(max-width:1200px){
  .subscriber-stats-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .subscriber-filters{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .subscriber-filters .filter-main,
  .subscriber-filters .filter-actions{
    grid-column:1/-1!important;
  }
  .bulk-toolbar{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
  .bulk-toolbar b{
    grid-column:1/-1!important;
  }
}

@media(max-width:1100px){
  .sender-settings-grid.clean-senders,
  .sender-settings-grid{
    grid-template-columns:1fr!important;
  }
  .template-card{
    grid-template-columns:240px minmax(0,1fr)!important;
  }
  .sender-preview-grid{
    grid-template-columns:1fr!important;
  }
}

@media(max-width:860px){
  .subscriber-stats-grid,
  .subscriber-filters,
  .bulk-toolbar,
  .sync-row{
    grid-template-columns:1fr!important;
  }
  .subscribers-layout,
  .subscribers-layout-v25{
    grid-template-columns:1fr!important;
    direction:rtl!important;
  }
  .subscribers-layout-v25 .subscribers-form,
  .subscribers-layout .subscribers-form,
  .subscribers-layout-v25 .subscribers-list,
  .subscribers-layout .subscribers-list{
    grid-column:auto!important;
  }
  .subscriber-filters .filter-main,
  .subscriber-filters .filter-actions,
  .bulk-toolbar b{
    grid-column:auto!important;
  }
  .template-card{
    grid-template-columns:1fr!important;
  }
  .template-card iframe{
    height:330px!important;
  }
  .subscriber-stats-grid .metric{
    min-height:90px!important;
  }
}

/* MEDASENDER_UI_PAGE_LAYOUT_FIX_V1_0_2_END */

/* MEDASENDER_OPERATION_ICONS_V1_2_0 */
.meda-operation-cell,
.actions-cell.icon-actions{
  white-space:nowrap;
}
.meda-operation-cell > .meda-operation-wrap,
.actions-cell.icon-actions{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-wrap:wrap;
}
.meda-operation-cell form,
.actions-cell.icon-actions form{
  display:inline-flex;
  margin:0;
}
.meda-op-btn,
.actions-cell.icon-actions .action-icon{
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid #dbe3ed !important;
  border-radius:9px !important;
  background:#fff !important;
  color:#172033 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  line-height:1 !important;
  cursor:pointer;
  transition:border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease;
}
.meda-op-btn:hover,
.actions-cell.icon-actions .action-icon:hover{
  border-color:#aeb9c8 !important;
  background:#f8fafc !important;
  color:#111827 !important;
  transform:translateY(-1px);
}
.meda-op-btn:focus-visible,
.actions-cell.icon-actions .action-icon:focus-visible{
  outline:2px solid #ff6b35 !important;
  outline-offset:2px !important;
}
.meda-op-btn svg,
.actions-cell.icon-actions .action-icon svg{
  width:18px !important;
  height:18px !important;
  display:block !important;
  fill:none !important;
  stroke:currentColor !important;
  stroke-width:1.8 !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  pointer-events:none !important;
}
.meda-op-btn[data-meda-action="delete"]:hover,
.actions-cell.icon-actions .action-delete:hover{
  color:#b42318 !important;
  border-color:#f0b7b2 !important;
  background:#fffafa !important;
}
.meda-op-btn[data-meda-action="stop"]:hover,
.actions-cell.icon-actions .action-stop:hover{
  color:#9a6700 !important;
  border-color:#e7cf95 !important;
  background:#fffdf5 !important;
}
@media (max-width:860px){
  .meda-op-btn,
  .actions-cell.icon-actions .action-icon{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    min-height:38px !important;
  }
}

/* MEDASENDER_TEMPLATE_PREVIEW_REALISTIC_WIDTH_V1_2_1_START */
/*
 * Keep email previews at a realistic desktop email-client viewport.
 * This is UI-only: it does not alter stored template HTML or sent mail.
 */
.default-template-cards .template-card{
  grid-template-columns:280px minmax(0,680px)!important;
  justify-content:space-between!important;
  align-items:start!important;
}
.default-template-cards .template-card iframe{
  display:block!important;
  width:100%!important;
  max-width:680px!important;
  min-width:0!important;
  height:300px!important;
  justify-self:start!important;
  border:1px solid var(--ms-border,#e5e9f2)!important;
  border-radius:10px!important;
  background:#fff!important;
}
@media(max-width:1100px){
  .default-template-cards .template-card{
    grid-template-columns:240px minmax(0,620px)!important;
  }
  .default-template-cards .template-card iframe{
    max-width:620px!important;
  }
}
@media(max-width:860px){
  .default-template-cards .template-card{
    grid-template-columns:1fr!important;
    justify-content:stretch!important;
  }
  .default-template-cards .template-card iframe{
    width:100%!important;
    max-width:100%!important;
    height:330px!important;
    justify-self:stretch!important;
  }
}
/* MEDASENDER_TEMPLATE_PREVIEW_REALISTIC_WIDTH_V1_2_1_END */