/*
  SBX admin UI - shared design system (navy/red, Manrope + Montserrat).
  Single source of truth for the refreshed admin look. Used by admin/login.php
  and the sbx_die() error page (includes/common_functions.php) via the
  sbx_admin_ui_open()/sbx_admin_ui_close() template helpers, and intended for
  any new admin pages going forward.

  Fonts are defined separately in /fonts/sbx/sbx-fonts.css (loaded alongside
  this file). Do not duplicate these rules in individual pages.
*/

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:'Manrope',system-ui,-apple-system,BlinkMacSystemFont,sans-serif;-webkit-font-smoothing:antialiased;color:#16224f}

.sbx-login{min-height:100vh;width:100%;display:flex;background:#ffffff}

/* ---- Left brand panel ---- */
.sbx-brand{position:relative;flex:0 0 44%;max-width:620px;background:#16224f;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:56px 56px 48px}
.sbx-brand__cut{position:absolute;inset:0;background:#d2203f;clip-path:polygon(100% 0,100% 100%,58% 100%);pointer-events:none}
.sbx-brand__glow{position:absolute;inset:0;background:radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,0.06),transparent 60%);pointer-events:none}

.sbx-wordmark{position:relative;display:flex;flex-direction:column;gap:4px}
.sbx-wordmark__logo{display:flex;align-items:flex-start;font-family:'Montserrat',sans-serif;font-weight:800;font-size:46px;letter-spacing:-1px;line-height:1;color:#ffffff}
.sbx-wordmark__x{position:relative;color:#ffffff}
.sbx-wordmark__accent{position:absolute;top:-7px;right:-3px;width:16px;height:14px;background:#d2203f;clip-path:polygon(0 0,100% 0,100% 100%)}
.sbx-wordmark__tag{font-family:'Montserrat',sans-serif;font-weight:600;font-size:11px;letter-spacing:7px;color:rgba(255,255,255,0.72);padding-left:2px}

.sbx-brand__statement{position:relative;max-width:380px}
.sbx-brand__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:34px;line-height:1.15;color:#ffffff}
.sbx-brand__desc{margin-top:16px;font-size:15px;line-height:1.6;color:rgba(255,255,255,0.78)}

.sbx-brand__meta{position:relative;display:flex;gap:28px;font-size:12.5px;color:rgba(255,255,255,0.62);font-weight:500}

/* ---- Right content panel ---- */
.sbx-form-panel{flex:1;display:flex;align-items:center;justify-content:center;padding:48px 32px;background:#f6f7f9}
.sbx-form-wrap{width:100%;max-width:400px}

.sbx-mobilebrand{display:none}

.sbx-form-head{margin-bottom:36px}
.sbx-form-head__title{font-family:'Montserrat',sans-serif;font-weight:700;font-size:28px;color:#16224f}
.sbx-form-head__sub{margin-top:8px;font-size:14.5px;color:#6b7184;line-height:1.6}

.sbx-alert{margin-bottom:24px;background:#fdecee;border:1px solid #f5c2cb;color:#b91833;padding:12px 16px;border-radius:8px;font-size:13.5px;font-weight:600;word-break:break-word}

/* monospace detail block (e.g. error backtrace) */
.sbx-trace{margin-bottom:24px;background:#ffffff;border:1px solid #e6e8ee;border-radius:8px;padding:14px 16px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;color:#475067;white-space:pre-wrap;word-break:break-word;max-height:320px;overflow:auto}

/* ---- Form controls ---- */
.sbx-form{display:flex;flex-direction:column;gap:20px}
.sbx-field{display:flex;flex-direction:column;gap:8px}
.sbx-label{font-size:13px;font-weight:600;color:#16224f}
.sbx-input{width:100%;height:48px;padding:0 16px;border:1.5px solid #dfe2e9;border-radius:8px;font-family:inherit;font-size:15px;color:#16224f;background:#ffffff;outline:none;transition:border-color .15s,box-shadow .15s}
.sbx-input:focus{border-color:#16224f;box-shadow:0 0 0 3px rgba(22,34,79,0.12)}

.sbx-pw{position:relative;display:flex;align-items:center}
.sbx-pw .sbx-input{padding:0 72px 0 16px}
.sbx-pw__toggle{position:absolute;right:6px;height:36px;padding:0 12px;border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:600;color:#6b7184;cursor:pointer}
.sbx-pw__toggle:hover{color:#16224f}

.sbx-remember{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#475067;cursor:pointer;user-select:none}
.sbx-remember input{width:16px;height:16px;margin:0;accent-color:#16224f;cursor:pointer}

.sbx-submit{height:50px;margin-top:4px;border:none;border-radius:8px;background:#d2203f;color:#ffffff;font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;letter-spacing:.2px;cursor:pointer;transition:background .15s,transform .05s}
.sbx-submit:hover{background:#b91833}
.sbx-submit:active{transform:translateY(1px)}

/* ---- Footer ---- */
.sbx-foot{margin-top:28px;padding-top:24px;border-top:1px solid #e6e8ee;display:flex;align-items:center;justify-content:space-between}
.sbx-foot__label{font-size:13px;color:#8a90a2}
.sbx-foot__link{font-size:13px;font-weight:600;color:#16224f;text-decoration:none}
.sbx-foot__link:hover{text-decoration:underline}

/* ---- Responsive ---- */
@media (max-width:860px){
	.sbx-brand{display:none}
	.sbx-mobilebrand{display:flex;margin-bottom:28px}
	.sbx-mobilebrand__logo{display:flex;align-items:flex-start;font-family:'Montserrat',sans-serif;font-weight:800;font-size:34px;letter-spacing:-1px;line-height:1;color:#16224f}
	.sbx-mobilebrand__logo .sbx-wordmark__x{color:#16224f}
}