/* Sahanaz Pay Merchant UI · independent merchant portal styling.
   Original implementation inspired by user-provided interface references.
   No third-party assets, actual merchant data only, no payment logic changes. */
.layout-portal .app-layout.merchant-layout {
  --m-text:#25344b;--m-muted:#748198;--m-line:#e8edf4;--m-base:#f5f7fb;
  --m-card:#fff;--m-blue:#3468e6;--m-soft:#eaf1ff;
  grid-template-columns:224px minmax(0,1fr);gap:0;min-height:calc(100vh - 40px);
  background:var(--m-base);border:1px solid var(--m-line);border-radius:16px;
  overflow:clip;align-items:stretch;padding:0;margin:12px auto 24px;
  box-shadow:0 14px 48px rgba(24,45,80,.06);color:var(--m-text);
}
.merchant-layout .merchant-sidebar {height:auto;min-height:100%;position:relative;top:auto;
  overflow:visible;border:0;border-right:1px solid var(--m-line);border-radius:0;
  background:var(--m-card);box-shadow:none;padding:25px 11px 22px;margin:0;display:flex;flex-direction:column;
  color:var(--m-text);}
.merchant-sidebar-brand{display:flex;align-items:center;gap:10px;padding:0 13px 20px;color:var(--m-text)!important;text-decoration:none!important;}
.merchant-sidebar-brand>span:last-child{display:flex;flex-direction:column;line-height:1.3}
.merchant-sidebar-brand strong{font-size:15px;font-weight:800;letter-spacing:-.25px}
.merchant-sidebar-brand small{font-size:11px;color:var(--m-muted)}
.merchant-brand-symbol {width:34px;height:34px;flex:0 0 34px;border-radius:11px;background:linear-gradient(135deg,#5483f1,#315cd4);
  color:#fff;display:grid;place-items:center;font-weight:850;font-size:19px}
.merchant-sidebar-desktop{flex:1;display:flex;flex-direction:column}
.merchant-sidebar-mobile{display:none}
.merchant-nav-group{margin:2px 0 14px}
.merchant-nav-label{font-size:10px;color:#9ca8ba;letter-spacing:.06em;font-weight:750;margin:0 10px 6px;padding-top:4px}
.merchant-nav-group nav{display:flex;flex-direction:column;gap:3px}
.merchant-nav-group a{padding:10px 12px;border-radius:9px;display:flex;align-items:center;gap:12px;
  color:#66748a!important;font-weight:650;font-size:13px;line-height:1.4;min-height:41px;text-decoration:none!important}
.merchant-nav-group a:hover{background:#f0f5ff;color:var(--m-blue)!important}
.merchant-nav-group a.selected,.merchant-nav-group a[aria-current=page]{background:var(--m-soft);color:var(--m-blue)!important}
.merchant-nav-icon{font-size:17px;font-weight:400;min-width:22px;text-align:center;line-height:1}
.merchant-side-footer{margin-top:auto;border-top:1px solid var(--m-line);padding:12px 8px 0;display:grid;gap:5px}
.merchant-side-footer>a,.merchant-logout {display:block;width:100%;font-size:12px!important;color:var(--m-muted)!important;
  padding:9px!important;line-height:1.3;text-align:left;text-decoration:none!important;border:0!important;border-radius:7px!important;
  background:transparent!important;cursor:pointer;font-weight:600;box-shadow:none!important}
.merchant-side-footer>a:hover,.merchant-logout:hover{background:var(--m-soft)!important;color:var(--m-blue)!important}

.merchant-layout .merchant-workspace{padding:0 0 40px;background:var(--m-base);min-width:0}
.merchant-topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(18px,2.5vw,36px);
  border-bottom:1px solid var(--m-line);background:var(--m-card)}
.merchant-location{font-size:13px;color:var(--m-muted);font-weight:600}
.merchant-location span{margin:0 9px;color:#b5bdcc}
.merchant-location strong{color:var(--m-text);font-weight:750}
.merchant-avatar{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;background:#e1eaff;
  color:#3562ce!important;font-weight:800;text-decoration:none!important}
.merchant-content{padding:29px clamp(18px,2.5vw,36px) 24px;min-width:0}
.merchant-page-heading{margin-bottom:22px}
.merchant-page-heading h1{font-size:24px;line-height:1.3;font-weight:820;margin:0 0 7px;letter-spacing:-.55px;color:var(--m-text)}
.merchant-page-heading p{margin:0;color:var(--m-muted);font-size:12px;line-height:1.7}
.merchant-welcome{background:linear-gradient(107deg,#e6eeff,#d4e4ff);padding:25px 27px;margin-bottom:17px;
  display:flex;align-items:center;justify-content:space-between;border:1px solid #d5e5ff;border-radius:13px;color:#24385c}
.merchant-welcome-label{font-size:10px;letter-spacing:.14em;font-weight:750;color:#5576b4}
.merchant-welcome h2{margin:7px 0;font-size:23px;color:#20375b;font-weight:810;letter-spacing:-.4px}
.merchant-welcome p{margin:0;font-size:12px;color:#627ca3;overflow-wrap:anywhere}
.merchant-welcome-mark {font-weight:850;line-height:1;font-size:50px;color:rgba(65,111,193,.25);margin-right:12px}
.merchant-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:17px}
.merchant-kpi{border:1px solid var(--m-line);border-radius:12px;background:var(--m-card);padding:20px 18px;min-width:0}
.merchant-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:5px}
.merchant-kpi-top span{font-size:12px;font-weight:650;color:var(--m-muted)}
.merchant-kpi-top i{font-size:18px;color:#b8cbf5;font-style:normal;font-weight:750}
.merchant-kpi>strong{display:block;font-size:clamp(19px,2vw,27px);line-height:1.3;letter-spacing:-.65px;margin:12px 0 6px;
  color:var(--m-text);overflow-wrap:anywhere}
.merchant-kpi>small{font-size:10px;color:#9aa8ba}
.merchant-block{border:1px solid var(--m-line);border-radius:12px;background:var(--m-card);padding:21px;margin-bottom:16px;min-width:0}
.merchant-section-title{display:flex;justify-content:space-between;align-items:start;gap:12px;margin-bottom:18px;}
.merchant-section-title h2{font-size:16px;line-height:1.4;margin:0;color:var(--m-text)}
.merchant-section-title p{font-size:11px;line-height:1.5;color:var(--m-muted);margin:5px 0 0}
.merchant-section-title>a{font-size:12px;font-weight:700;text-decoration:none;color:var(--m-blue);white-space:nowrap}
.merchant-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.merchant-shortcuts a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px 8px;border-radius:10px;color:var(--m-text)!important;font-size:12px;text-decoration:none!important;
  border:1px solid transparent;}
.merchant-shortcuts a:hover{background:var(--m-soft);border-color:#dce8ff}
.merchant-shortcuts a span{font-size:24px;color:#6488d3;line-height:1}
.merchant-shortcuts a strong{font-weight:650}
.merchant-duo{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:16px}
.merchant-duo>.merchant-block{min-width:0}
.merchant-layout .tablewrap{border:1px solid var(--m-line);overflow:auto;max-width:100%}
.merchant-layout table{font-size:12px;min-width:500px}
.merchant-layout th {background:#f7f9fd;color:#8b98aa;font-size:11px;white-space:nowrap}
.merchant-layout td{color:var(--m-text)}
.merchant-layout td,.merchant-layout th {border-color:var(--m-line);padding:13px 12px}
.merchant-layout tr:last-child td{border-bottom:0}
.merchant-layout tbody tr:hover{background:#fafcff}
.merchant-layout .filterbar{margin-bottom:17px}
.merchant-layout .filterbar input{flex:1;min-width:190px}
.merchant-layout .filterbar select{min-width:132px;flex:0 1 168px}
.merchant-layout .empty {color:var(--m-muted);padding:32px 10px}
.merchant-account-lines>div,.merchant-channel-desc{display:flex;align-items:start;justify-content:space-between;gap:10px;
  border-bottom:1px solid var(--m-line);padding:11px 0;font-size:12px}
.merchant-account-lines>div:first-child{padding-top:0}
.merchant-account-lines span,.merchant-channel-desc span{color:var(--m-muted)}
.merchant-account-lines strong,.merchant-account-lines code,.merchant-channel-desc strong{color:var(--m-text);text-align:right;overflow-wrap:anywhere;font-size:12px}
.merchant-security-note{font-size:11px;line-height:1.75;color:#607ba7;border:1px solid #e0eaff;
  background:#f3f7ff;padding:12px;margin-top:14px;border-radius:8px}
.merchant-layout input:not([type=checkbox]),.merchant-layout select,.merchant-layout textarea{
  border:1px solid #dae2ef;background:var(--m-card);color:var(--m-text);min-height:40px;}
.merchant-layout .filterbar button,.merchant-layout .merchant-channel-form button{
  background:#3b6ce3!important;border-radius:8px!important;color:#fff!important;min-height:40px}
.merchant-count{color:var(--m-muted);font-size:12px;white-space:nowrap}
.merchant-channel-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.merchant-channel-card{border:1px solid var(--m-line);border-radius:12px;background:var(--m-card);padding:19px;min-width:0}
.merchant-channel-head{display:flex;align-items:center;gap:11px;margin-bottom:13px}
.merchant-channel-symbol{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:20px;font-weight:850;flex:0 0 42px}
.merchant-channel-symbol.ali{color:#167adc;background:#e9f4ff}
.merchant-channel-symbol.wx{color:#29945f;background:#e7f7ed}
.merchant-channel-head>div{min-width:0;flex:1}
.merchant-channel-head h3{font-size:15px;margin:0;color:var(--m-text)}
.merchant-channel-head p{font-size:11px;color:var(--m-muted);margin:3px 0;overflow-wrap:anywhere}
.merchant-channel-head .pill{font-size:10px}
.merchant-channel-desc:last-of-type{border-bottom:0}
.merchant-channel-actions{display:flex;justify-content:end;padding-top:14px}
.merchant-channel-action{display:inline}
.merchant-layout button.merchant-disable,.merchant-layout button.merchant-enable{
  font-size:12px;border-radius:8px!important;box-shadow:none!important;padding:8px 13px!important;
  color:#fff!important;background:#396add!important;min-height:36px}
.merchant-layout button.merchant-disable{background:#fff6f6!important;color:#ad4f57!important;border:1px solid #f2d2d6!important}
.merchant-channel-empty{grid-column:1/-1;text-align:center;padding:44px 15px;color:var(--m-muted)}
.merchant-channel-empty strong{color:var(--m-text)}
.merchant-channel-empty p{font-size:12px}
.merchant-channel-form{display:grid;grid-template-columns:minmax(150px,1fr) minmax(150px,1fr) minmax(200px,2fr) auto;gap:12px;align-items:end}
.merchant-channel-form label{margin:0;font-size:11px}
.merchant-channel-form button{margin-bottom:0;white-space:nowrap}














/* Existing admin and public pages are untouched by merchant styles */
@media (max-width:1150px){
  .layout-portal .app-layout.merchant-layout{grid-template-columns:190px minmax(0,1fr)}
  .merchant-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .merchant-channel-form{grid-template-columns:repeat(2,minmax(0,1fr))}
  .merchant-channel-form button{grid-column:1/-1}
}
@media (max-width:820px){
  .layout-portal .app-layout.merchant-layout{display:block;min-height:0;margin-top:8px}
  .merchant-layout .merchant-sidebar{min-height:0;display:block;border-right:0;border-bottom:1px solid var(--m-line);padding:12px 16px}
  .merchant-sidebar-brand{padding:3px 0 10px}
  .merchant-sidebar-desktop{display:none}
  .merchant-sidebar-mobile{display:block}
  .merchant-sidebar-mobile summary{cursor:pointer;list-style:none;color:var(--m-text);background:var(--m-soft);padding:10px 13px;border-radius:9px;font-size:12px;font-weight:730;display:flex;gap:10px}
  .merchant-sidebar-mobile summary span{margin-left:auto;color:var(--m-blue)}
  .merchant-sidebar-mobile summary::-webkit-details-marker{display:none}
  .merchant-sidebar-mobile-inner{padding:12px 0}
  .merchant-nav-group nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .merchant-layout .merchant-workspace{padding:0 0 24px}
  .merchant-duo{grid-template-columns:1fr}
  .merchant-content{padding:20px 15px}
  .merchant-channel-grid{grid-template-columns:1fr}
}
@media (max-width:520px){
  .merchant-kpis{gap:9px}
  .merchant-kpi{padding:15px 12px}
  .merchant-kpi>strong{font-size:20px}
  .merchant-welcome{padding:19px 16px}
  .merchant-welcome h2{font-size:20px}
  .merchant-welcome-mark{display:none}
  .merchant-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .merchant-block{padding:16px}
  .merchant-channel-form{grid-template-columns:1fr}
  .merchant-section-title {align-items:start}
  .merchant-nav-group nav{grid-template-columns:1fr 1fr}
  .merchant-topbar{padding:0 15px}
}