/* =====================================================================
   SMMPIX V16 FRONTEND UX POLISH — all client themes
   Loaded after the compiled theme CSS so this layer is the final visual
   contract. Functional markup/routes remain unchanged.
   ===================================================================== */
:root{
  --ui-focus:color-mix(in srgb,var(--p) 34%,transparent);
  --ui-radius:12px;
  --ui-radius-sm:9px;
  --ui-shadow:0 8px 24px rgba(15,23,42,.06);
  --ui-shadow-hover:0 12px 30px rgba(15,23,42,.10);
}

html{scroll-behavior:smooth}
body.is-client{font-family:var(--font);background:var(--bg);color:var(--tx);line-height:1.5}
body.is-client main{min-width:0}
body.is-client main>.page-wrap,body.is-client main>.max-w-\[1120px\]{width:100%;margin-inline:auto}

/* Page rhythm / hierarchy */
body.is-client .page-head,body.is-client .page-header{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
body.is-client .page-head h1,body.is-client .page-header h1{font-size:clamp(20px,2vw,28px);letter-spacing:-.02em;font-weight:750;color:var(--tx);margin:0}
body.is-client .page-head p,body.is-client .page-header p{margin-top:4px;color:var(--mu);font-size:13px}

/* Cards */
body.is-client .card,body.is-client .ui-card,body.is-client .af-step,body.is-client .no-step,body.is-client .sum-card,body.is-client .mo-stat,body.is-client .mo-table-wrap,body.is-client .hist,body.is-client .pp-box,body.is-client .xo-card,body.is-client .cp-card{
  border-color:var(--bd)!important;
  border-radius:var(--ui-radius)!important;
  background:var(--card)!important;
}
body.is-client .card,body.is-client .ui-card,body.is-client .af-step,body.is-client .no-step,body.is-client .sum-card,body.is-client .mo-table-wrap,body.is-client .hist,body.is-client .pp-box,body.is-client .xo-card,body.is-client .cp-card{box-shadow:var(--ui-shadow)}
body.is-client .card:hover,body.is-client .ui-card:hover,body.is-client .af-step:hover,body.is-client .no-step:hover,body.is-client .sum-card:hover,body.is-client .cp-card:hover{border-color:color-mix(in srgb,var(--p) 22%,var(--bd))!important}

/* Buttons: consistent hierarchy without changing semantics */
body.is-client .btn,body.is-client .btn-primary,body.is-client .btn-secondary,body.is-client .btn-danger,body.is-client .btnx,body.is-client .site-cta,body.is-client .t3-cta{
  min-height:40px;border-radius:10px!important;font-weight:650!important;letter-spacing:-.005em;
  transition:transform .16s ease,box-shadow .16s ease,filter .16s ease,background .16s ease!important;
}
body.is-client .btn-primary,body.is-client .site-cta,body.is-client .t3-cta{box-shadow:0 5px 14px color-mix(in srgb,var(--p) 20%,transparent)!important}
body.is-client .btn-primary:hover,body.is-client .site-cta:hover,body.is-client .t3-cta:hover{transform:translateY(-1px)!important;box-shadow:0 8px 20px color-mix(in srgb,var(--p) 26%,transparent)!important}
body.is-client .btn:disabled,body.is-client .btn[aria-disabled="true"],body.is-client button:disabled{cursor:not-allowed!important;opacity:.58!important;transform:none!important;box-shadow:none!important}

/* Forms */
body.is-client label{font-weight:600;font-size:13px;color:var(--tx)}
body.is-client input:not([type=checkbox]):not([type=radio]):not([type=color]),body.is-client select,body.is-client textarea{
  min-height:42px;border-radius:10px!important;transition:border-color .15s,box-shadow .15s,background .15s!important;
}
body.is-client textarea{min-height:100px}
body.is-client input::placeholder,body.is-client textarea::placeholder{color:color-mix(in srgb,var(--mu) 82%,transparent)}
body.is-client input:focus,body.is-client select:focus,body.is-client textarea:focus{box-shadow:0 0 0 3px var(--ui-focus)!important}
body.is-client input[type=checkbox],body.is-client input[type=radio]{accent-color:var(--p)}

/* Tables */
body.is-client main .overflow-x-auto,body.is-client .table-wrap,body.is-client .mo-table-wrap{border-radius:var(--ui-radius)!important}
body.is-client main table thead th{background:color-mix(in srgb,var(--sf) 72%,var(--card));white-space:nowrap}
body.is-client main table tbody tr{transition:background .12s ease}
body.is-client main table tbody tr:hover td{background:color-mix(in srgb,var(--p) 4%,var(--card))!important}

/* Status / badge consistency */
body.is-client .ui-badge,body.is-client .badge,body.is-client .pill{white-space:nowrap}

/* Alerts */
body.is-client .alert{box-shadow:0 2px 8px rgba(15,23,42,.04);line-height:1.45}

/* Loading state added by app.js */
body.is-client [data-form-loading="1"]{position:relative}
body.is-client [data-form-loading="1"] .form-submit-spinner{display:inline-flex}
body.is-client .form-submit-spinner{display:none;width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:smmSpin .7s linear infinite}
@keyframes smmSpin{to{transform:rotate(360deg)}}

/* Classic — premium, airy SaaS panel */
html[data-ui-theme="classic"] body.is-client .card,html[data-ui-theme="classic"] body.is-client .ui-card,html[data-ui-theme="classic"] body.is-client .xo-card{box-shadow:0 8px 24px rgba(15,23,42,.055)}
html[data-ui-theme="classic"] body.is-client .sidebar{box-shadow:2px 0 18px rgba(15,23,42,.04)}
html[data-ui-theme="classic"] body.is-client .topbar{backdrop-filter:saturate(140%) blur(10px)}

/* Perfect — compact, professional service-panel styling */
html[data-ui-theme="perfect"] body.is-client{background:var(--bg)!important}
html[data-ui-theme="perfect"] body.is-client .topbar,html[data-ui-theme="perfect"] body.is-client header{background:var(--card)!important;color:var(--tx)!important;border-color:var(--bd)!important}
html[data-ui-theme="perfect"][data-theme="dark"] body.is-client .topbar,html[data-ui-theme="perfect"][data-theme="dark"] body.is-client header{background:#111827!important}
html[data-ui-theme="perfect"] body.is-client .card,html[data-ui-theme="perfect"] body.is-client .ui-card,html[data-ui-theme="perfect"] body.is-client .xo-card{box-shadow:0 2px 8px rgba(15,23,42,.045)!important;border-radius:8px!important}
html[data-ui-theme="perfect"] body.is-client .btn-primary{border-radius:7px!important}
html[data-ui-theme="perfect"] body.is-client input:not([type=checkbox]):not([type=radio]):not([type=color]),html[data-ui-theme="perfect"] body.is-client select,html[data-ui-theme="perfect"] body.is-client textarea{border-radius:7px!important}
html[data-ui-theme="perfect"][data-theme="dark"] body.is-client .card,html[data-ui-theme="perfect"][data-theme="dark"] body.is-client .ui-card,html[data-ui-theme="perfect"][data-theme="dark"] body.is-client .xo-card{background:#1e293b!important;border-color:#334155!important}

/* Bootstrap — preserve its flatter language while improving spacing and mobile nav */
html[data-ui-theme="bootstrap"] body.is-client .card,html[data-ui-theme="bootstrap"] body.is-client .ui-card,html[data-ui-theme="bootstrap"] body.is-client .xo-card{border-radius:6px!important;box-shadow:0 1px 3px rgba(0,0,0,.05)!important}
html[data-ui-theme="bootstrap"] body.is-client .btn,html[data-ui-theme="bootstrap"] body.is-client .btn-primary,html[data-ui-theme="bootstrap"] body.is-client .site-cta{border-radius:5px!important;box-shadow:none!important}
html[data-ui-theme="bootstrap"] body.is-client input:not([type=checkbox]):not([type=radio]):not([type=color]),html[data-ui-theme="bootstrap"] body.is-client select,html[data-ui-theme="bootstrap"] body.is-client textarea{border-radius:4px!important}
html[data-ui-theme="bootstrap"] body:not(.is-admin) aside.sidebar nav,html[data-ui-theme="bootstrap"] body:not(.is-admin) aside.sidebar .flex-1.overflow-y-auto{flex-wrap:nowrap!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none}
html[data-ui-theme="bootstrap"] body:not(.is-admin) aside.sidebar nav::-webkit-scrollbar{display:none}
html[data-ui-theme="bootstrap"] body:not(.is-admin) aside.sidebar .nav-item{flex:0 0 auto!important;min-height:50px!important}
html[data-ui-theme="bootstrap"] body.is-client .main-pad{padding-top:16px!important}
html[data-ui-theme="bootstrap"][data-theme="dark"] body.is-client main table thead th{background:#141414!important}

/* Public landing pages — common polish across theme branches */
.t3-nav,.t3-mnav,.pp-l header.pp-h{backdrop-filter:saturate(140%) blur(12px)}
.t3-card,.t3-plat,.pp-l .card,.pp-l .plat{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.t3-card:hover,.t3-plat:hover,.pp-l .card:hover,.pp-l .plat:hover{transform:translateY(-2px);box-shadow:var(--ui-shadow-hover)}

/* Mobile: prioritize actions, readable forms, and no accidental horizontal overflow */
@media(max-width:767px){
  body.is-client .page-head,body.is-client .page-header{flex-direction:column;gap:10px;margin-bottom:14px}
  body.is-client .page-head>*:last-child,body.is-client .page-header>*:last-child{width:100%}
  body.is-client .page-head .btn,body.is-client .page-header .btn{width:100%}
  body.is-client main{padding-bottom:20px}
  body.is-client .card,body.is-client .ui-card,body.is-client .af-step,body.is-client .no-step,body.is-client .sum-card,body.is-client .xo-card,body.is-client .cp-card{border-radius:11px!important}
  body.is-client main table{font-size:12px}
  body.is-client main table td,body.is-client main table th{padding:9px 10px}
  body.is-client .modal,body.is-client .modal>div{max-width:calc(100vw - 20px)!important}
}
@media(max-width:480px){
  body.is-client .page-head h1,body.is-client .page-header h1{font-size:21px}
  body.is-client .alert{padding:10px 12px}
  body.is-client .btn,body.is-client .btn-primary,body.is-client .btn-secondary,body.is-client .btn-danger,body.is-client .btnx{min-height:42px}
}

/* Keep accessibility strong while retaining a polished visual hierarchy. */
body.is-client :where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--ui-focus)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.t3-card,.t3-plat,.pp-l .card,.pp-l .plat{transform:none!important}}