/* =========================================================
 * S8 Sending Control V275 — Unified Premium UI
 * UI-only layer: no business logic, DB schema or routing changes.
 * ========================================================= */
:root{
  --s8v275-bg:#f3f7f5;
  --s8v275-panel:#ffffff;
  --s8v275-ink:#102a22;
  --s8v275-muted:#6f827b;
  --s8v275-line:#dfe9e5;
  --s8v275-primary:#078866;
  --s8v275-primary-2:#10b981;
  --s8v275-side:#052f27;
  --s8v275-side-2:#073f34;
  --s8v275-shadow:0 18px 50px rgba(5,62,49,.08);
  --s8v275-radius:20px;
}
html{scroll-behavior:smooth}
body{background:var(--s8v275-bg)!important;color:var(--s8v275-ink)!important}
body,button,input,select,textarea{font-family:"Bai Jamjuree",system-ui,-apple-system,"Segoe UI",sans-serif!important}

/* Shell */
.s8-app{min-height:100dvh!important;background:var(--s8v275-bg)!important}
.s8-side{
  width:286px!important;
  padding:20px 14px 16px!important;
  background:
    radial-gradient(circle at 10% 0%,rgba(42,210,151,.17),transparent 28%),
    linear-gradient(180deg,var(--s8v275-side-2),var(--s8v275-side))!important;
  border-right:1px solid rgba(255,255,255,.06)!important;
  box-shadow:18px 0 50px rgba(2,35,28,.08)!important;
  overflow:hidden!important;
  z-index:80!important;
}
.s8-brand{
  min-height:66px!important;
  padding:8px 10px 17px!important;
  margin:0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  gap:11px!important;
}
.s8-brand>span{
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  border-radius:15px!important;
  background:linear-gradient(145deg,#25d39b,#078866)!important;
  box-shadow:0 10px 26px rgba(12,188,132,.22)!important;
  overflow:hidden!important;
}
.s8-brand>span img{width:100%!important;height:100%!important;object-fit:cover!important}
.s8-brand-copy{min-width:0!important}
.s8-brand-copy b{font-size:15px!important;line-height:1.15!important;letter-spacing:-.01em!important;color:#fff!important}
.s8-brand-copy small{margin-top:4px!important;font-size:9px!important;line-height:1.25!important;color:rgba(221,246,238,.68)!important}
.s8-mobile-menu-toggle{display:none}

.s8-side nav{
  flex:1 1 auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
  margin:12px 0!important;
  padding:2px 4px 14px!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.18) transparent;
}
.s8-side nav a{
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  min-height:40px!important;
  padding:10px 12px 10px 15px!important;
  border:1px solid transparent!important;
  border-radius:12px!important;
  color:rgba(226,245,238,.76)!important;
  font-size:11px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:.005em!important;
  transition:background .18s ease,border-color .18s ease,color .18s ease,transform .18s ease!important;
}
.s8-side nav a:before{
  content:"";position:absolute;left:6px;top:50%;width:3px;height:0;border-radius:99px;
  background:#52e5b4;transform:translateY(-50%);transition:height .18s ease;
}
.s8-side nav a:hover{background:rgba(255,255,255,.065)!important;border-color:rgba(255,255,255,.08)!important;color:#fff!important;transform:translateX(1px)!important}
.s8-side nav a[aria-current="page"],.s8-side nav a.is-active{
  background:linear-gradient(90deg,rgba(32,203,146,.22),rgba(32,203,146,.08))!important;
  border-color:rgba(89,226,178,.24)!important;color:#fff!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)!important;
}
.s8-side nav a[aria-current="page"]:before,.s8-side nav a.is-active:before{height:18px}

.s8-account-card{
  flex:0 0 auto!important;margin-top:auto!important;padding:12px!important;
  border:1px solid rgba(255,255,255,.09)!important;border-radius:16px!important;
  background:rgba(255,255,255,.045)!important;box-shadow:none!important;
  backdrop-filter:blur(8px);
}
.s8-account-main{gap:10px!important}.s8-account-avatar{width:38px!important;height:38px!important;flex:0 0 38px!important;border-radius:12px!important;background:rgba(61,220,165,.18)!important;color:#bff8e4!important}
.s8-account-info b{font-size:11px!important;color:#fff!important}.s8-account-info small{font-size:8px!important;color:rgba(224,245,238,.58)!important}.s8-account-info em{font-size:7px!important;color:#81e5c2!important}
.s8-account-actions{gap:6px!important;margin-top:10px!important}.s8-account-actions a{min-height:32px!important;padding:8px 9px!important;border-radius:9px!important;font-size:8px!important}

.s8-main{
  margin-left:286px!important;
  width:calc(100% - 286px)!important;
  min-height:100dvh!important;
  padding:22px 26px 40px!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(16,185,129,.045),transparent 27%),
    linear-gradient(180deg,#f8fbfa 0%,var(--s8v275-bg) 34%,#f4f8f6 100%)!important;
}
.s8-main>header{
  position:sticky!important;top:0!important;z-index:35!important;
  max-width:1600px!important;min-height:74px!important;margin:0 auto 20px!important;padding:12px 14px!important;
  border:1px solid rgba(221,234,229,.88)!important;border-radius:18px!important;
  background:rgba(255,255,255,.9)!important;box-shadow:0 8px 28px rgba(11,68,53,.055)!important;
  backdrop-filter:blur(15px);
}
.s8-main>header h1{font-size:24px!important;line-height:1.1!important;letter-spacing:-.035em!important;color:#0c3027!important}
.s8-main>header p{margin:5px 0 0!important;font-size:11px!important;color:#748780!important}
.s8-header-actions{gap:9px!important}.s8-header-date{min-height:38px!important;padding:10px 12px!important;border:1px solid #e0ebe7!important;border-radius:11px!important;background:#f7faf9!important;color:#46675e!important;font-size:10px!important;font-weight:800!important}

/* Global cards */
.s8-panel,.s8-stats article,.s8-hub-stats article,.s8-dashboard-payments article,.s8-dashboard-payments>a{
  border:1px solid var(--s8v275-line)!important;border-radius:var(--s8v275-radius)!important;
  background:var(--s8v275-panel)!important;box-shadow:var(--s8v275-shadow)!important;
}
.s8-panel{padding:20px!important}
.s8-panel-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;margin-bottom:15px!important}
.s8-panel-head h2{font-size:17px!important;line-height:1.25!important;letter-spacing:-.02em!important;color:#143e33!important}
.s8-panel-head p{margin:5px 0 0!important;font-size:10px!important;line-height:1.5!important;color:#7a8d86!important}

/* Dashboard hero */
.s8-hub-hero{
  max-width:1600px!important;margin-left:auto!important;margin-right:auto!important;
  padding:27px 28px!important;border:1px solid rgba(109,224,184,.28)!important;border-radius:24px!important;
  background:
    radial-gradient(circle at 86% 14%,rgba(142,255,216,.18),transparent 25%),
    linear-gradient(135deg,#053f34 0%,#08795d 58%,#0da97a 100%)!important;
  box-shadow:0 22px 55px rgba(4,83,64,.18)!important;color:#fff!important;overflow:hidden!important;
}
.s8-hub-eyebrow{display:inline-flex!important;padding:6px 9px!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;background:rgba(255,255,255,.09)!important;color:#baf6df!important;font-size:8px!important;letter-spacing:.11em!important}
.s8-hub-hero h2{max-width:720px!important;margin:10px 0 6px!important;font-size:27px!important;letter-spacing:-.035em!important;color:#fff!important}
.s8-hub-hero p{margin:0!important;font-size:11px!important;color:rgba(236,255,248,.72)!important}
.s8-hub-health{min-width:170px!important;padding:16px 18px!important;border:1px solid rgba(255,255,255,.15)!important;border-radius:18px!important;background:rgba(255,255,255,.09)!important;backdrop-filter:blur(7px)}
.s8-hub-health span,.s8-hub-health small{color:rgba(236,255,248,.7)!important}.s8-hub-health b{font-size:28px!important;color:#fff!important}

.s8-hub-stats,.s8-dashboard-payments,.s8-hub-grid{max-width:1600px!important;margin-left:auto!important;margin-right:auto!important}
.s8-hub-stats{gap:12px!important}.s8-hub-stats article{position:relative!important;overflow:hidden!important;padding:17px 18px!important;transition:transform .18s ease,box-shadow .18s ease!important}
.s8-hub-stats article:hover{transform:translateY(-2px)!important;box-shadow:0 20px 46px rgba(5,62,49,.11)!important}
.s8-hub-stats article:after{content:"";position:absolute;right:-25px;bottom:-30px;width:88px;height:88px;border-radius:50%;background:rgba(16,185,129,.045)}
.s8-hub-stats article>span{font-size:9px!important;font-weight:800!important;color:#71857d!important;text-transform:uppercase!important;letter-spacing:.04em!important}
.s8-hub-stats article>b{margin:7px 0 3px!important;font-size:27px!important;letter-spacing:-.035em!important;color:#0a5c48!important}
.s8-hub-stats article>small{font-size:9px!important;color:#8a9a95!important}
.s8-hub-stats article.danger>b{color:#d94a58!important}

/* Payment strip */
.s8-dashboard-payments{gap:10px!important}.s8-dashboard-payments article,.s8-dashboard-payments>a{padding:15px 16px!important}
.s8-dashboard-payments span,.s8-dashboard-payments small,.s8-dashboard-payments a small{font-size:8px!important}.s8-dashboard-payments b{font-size:18px!important}
.s8-dashboard-payments>a{background:linear-gradient(135deg,#063f34,#07805f)!important;border-color:#0a775d!important;color:#fff!important;box-shadow:0 15px 34px rgba(6,79,64,.15)!important}

/* Tables and forms */
.s8-table{border:1px solid #e3ece8!important;border-radius:14px!important;background:#fff!important;overflow:auto!important}
.s8-table table{min-width:760px}.s8-table th{position:sticky;top:0;z-index:2;background:#f5f9f7!important;color:#647b73!important;font-size:9px!important;text-transform:uppercase!important;letter-spacing:.035em!important}
.s8-table th,.s8-table td{padding:11px 12px!important;border-bottom:1px solid #e7eeeb!important}.s8-table td{font-size:10px!important;color:#294d43!important}.s8-table tbody tr:hover td{background:#f8fcfa!important}
.s8-badge{border:1px solid transparent!important;padding:5px 8px!important;font-size:8px!important}
.s8-btn,.s8-login button,.s8-review button{min-height:40px!important;border-radius:11px!important;background:linear-gradient(135deg,#10b981,#078866)!important;box-shadow:0 8px 18px rgba(8,136,102,.14)!important}
.s8-form input,.s8-form select,.s8-form textarea,.s8-filters input,.s8-filters select,.s8-review input{border-color:#d8e5e0!important;background:#fff!important;transition:border-color .18s ease,box-shadow .18s ease!important}
.s8-form input:focus,.s8-form select:focus,.s8-form textarea:focus,.s8-filters input:focus,.s8-filters select:focus,.s8-review input:focus{outline:none!important;border-color:#67cfad!important;box-shadow:0 0 0 4px rgba(16,185,129,.09)!important}

/* Alerts */
.s8-alert,.s8-security-alert{border-radius:14px!important;box-shadow:0 10px 24px rgba(5,62,49,.04)!important}

/* Login */
.s8-login{background:#f4f8f6!important}.s8-login>section{background:radial-gradient(circle at 20% 10%,rgba(80,233,182,.2),transparent 28%),linear-gradient(145deg,#042f27,#08765b)!important}.s8-login>form{background:#fff!important}.s8-login-logo{box-shadow:0 12px 30px rgba(10,164,119,.22)!important}

/* Scrollbar */
.s8-side nav::-webkit-scrollbar,.s8-table::-webkit-scrollbar{width:7px;height:7px}.s8-side nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16);border-radius:99px}.s8-table::-webkit-scrollbar-thumb{background:#cdded8;border-radius:99px}

@media(max-width:1180px){
  .s8-side{width:254px!important}.s8-main{margin-left:254px!important;width:calc(100% - 254px)!important;padding:18px 18px 34px!important}
  .s8-hub-hero{padding:23px!important}.s8-hub-hero h2{font-size:24px!important}
}

@media(max-width:820px){
  html.s8-nav-open,html.s8-nav-open body{overflow:hidden!important}
  .s8-app{display:block!important}
  .s8-side{
    position:sticky!important;inset:0 0 auto 0!important;width:100%!important;height:auto!important;min-height:68px!important;
    padding:8px 10px!important;border-right:0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;
    box-shadow:0 10px 30px rgba(2,35,28,.14)!important;overflow:visible!important;
  }
  .s8-brand{min-height:52px!important;padding:3px 4px!important;border-bottom:0!important}.s8-brand>span{width:40px!important;height:40px!important;flex-basis:40px!important;border-radius:12px!important}.s8-brand-copy b{font-size:13px!important}.s8-brand-copy small{font-size:8px!important}
  .s8-mobile-menu-toggle{display:flex!important;margin-left:auto!important;width:40px!important;height:40px!important;padding:0!important;border:1px solid rgba(255,255,255,.12)!important;border-radius:11px!important;background:rgba(255,255,255,.07)!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;gap:4px!important;cursor:pointer!important}
  .s8-mobile-menu-toggle span{width:17px;height:2px;border-radius:99px;background:#fff;transition:.18s ease}.s8-mobile-menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}.s8-mobile-menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}.s8-mobile-menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .s8-side>nav{
    display:none!important;position:fixed!important;left:10px!important;right:10px!important;top:66px!important;bottom:12px!important;
    margin:0!important;padding:12px!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:18px!important;
    background:linear-gradient(180deg,#073f34,#052f27)!important;box-shadow:0 24px 60px rgba(2,28,22,.32)!important;overflow-y:auto!important;
  }
  html.s8-nav-open .s8-side>nav{display:flex!important}
  .s8-side>nav a{min-height:44px!important;font-size:12px!important}
  .s8-account-card{display:none!important}
  .s8-main{margin:0!important;width:100%!important;padding:12px 10px 86px!important}
  .s8-main>header{position:relative!important;top:auto!important;min-height:0!important;padding:12px!important;margin-bottom:12px!important;border-radius:15px!important}.s8-main>header h1{font-size:20px!important}.s8-main>header p{display:block!important;font-size:9px!important}.s8-header-actions{display:none!important}
  .s8-hub-hero{padding:20px 18px!important;border-radius:19px!important;align-items:flex-start!important;flex-direction:column!important}.s8-hub-hero h2{font-size:22px!important}.s8-hub-health{width:100%!important;margin-top:13px!important}
  .s8-hub-stats{grid-template-columns:1fr 1fr!important;gap:9px!important}.s8-hub-stats article{padding:14px!important;border-radius:16px!important}.s8-hub-stats article>b{font-size:22px!important}
  .s8-dashboard-payments{grid-template-columns:1fr 1fr!important;gap:8px!important}.s8-panel{padding:14px!important;border-radius:17px!important}.s8-panel-head h2{font-size:15px!important}
}

@media(max-width:560px){
  .s8-hub-stats,.s8-dashboard-payments{grid-template-columns:1fr!important}
  .s8-main{padding-left:8px!important;padding-right:8px!important}.s8-hub-hero{padding:18px 15px!important}.s8-hub-hero h2{font-size:20px!important}
  .s8-panel{padding:12px!important}.s8-table table{min-width:640px}
}

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